- Bytes and Brew
- Posts
- Don't code a website - sketch it instead!
Don't code a website - sketch it instead!
Plus OpenAI drama and... snakes?!
š Hey there!
I hope your thanksgiving was wonderful. Weāre starting to get into the holiday season, but I wonāt be taking a break from delivering content to your inbox.
Last edition, Ashley Orehek Rossi provided a lot of insight as to how she uses AI for her job as a meteorologist-turned-librarian. If you havenāt yet, Iād suggest you go check this out, as I think itās important to see how AI is used in the industry. You never know, this may spark some ideas on your end!
Thereās been a lot of advancements in the AI community since the last edition, one of which Iām highlighting here: a recent development on using a whiteboard-based application to create a website š¤Æ
Letās get into it.
Affiliate links are used in this edition of Bytes and Brew. If you choose to purchase the product and/or service with one of these links, it will help support the newsletter with no additional cost to you.
New here? Grab a cup of coffee - weāre talking AI here. This newsletter talks about how you can use AI to create solutions to problems, so if this sounds like your kind of thing, hit that āsubscribeā button below!
As an entrepreneur, I need to be able to find the best software to help me manage my two newsletters. While there is a ton of software out there, most of them come at a cost. Given that I am on a tight budget, I need to ensure that I am making wise decisions when purchasing software.
And this is where RocketHub helps me out! Their newsletter is sent straight to my inbox, showing me discounted deals on high-quality software that will help me as an entrepreneur and a business owner.
Hereās a few of their products you may see in their newsletter:
SEO Pilot - A Chrome extension to easily analyze on-page data points, extract contact & social info, and generate rank-worth articles with AI.
Floik - An all-in-one software solution for creating step-by-step guides, interactive demos, and videos.
Nureply - Cold email outreach software with generous limits and unlimited warmups, sending accounts, contacts, and campaigns.
Be sure to subscribe to their newsletter for free to learn more about the software they are offering today!
Oh, and if you decide to purchase any products from their platform during Cyber Monday only, the RocketHub team was kind enough to provide a 20% discount code: BLACKFRIDAY-20.
By now, weāre used to drag-and-drop editors to create websites using services such as Wix and SquareSpace. What if I told you that you can use an online whiteboard to generate a website instead?
Last week, online whiteboard software (tldraw and Excalidraw) have leveraged OpenAIās API to be able to generate a website in a matter of minutes. Iāll be showcasing how you can create one using one of these whiteboards.
Here, Iām generating landing page for an Introduction to ChatGPT mini course:
The schematic used to generate a web page via Excalidraw
First, youāre going to need an OpenAI key. Visit the API Keys web page and create a new secret key (donāt share this with anyone š¤«). Note: You will need to load a minimum of $5 to your OpenAI account.
Next, visit either Excalidraw or tldraw and begin designing the web page using their interface. Iāll be using Excalidraw for the images for this since Iāve used it in previous editions:
Creating the landing page (gif)
Once you have your design in-place and are ready to create a working web page, click on the āMore Toolsā option in Excalidraw, select āWireframe to codeā, and highlight your design (in tldraw, click the āMake Realā button in the upper right):
Creating the code for your selection in Excalidraw | Creating the code for your selection in tldraw |
Once complete, your design will be embedded on the whiteboard next to your creation. If you want to take a peek at the code and save it locally in a .html file, you can copy it to your clipboard:
The rendition of the web page, highlighting the option to copy the source code to the clipboard.
ā¦ and yes, I did get Rick Rolled šļø Thanks, Excalidraw š¤¦
Anyways, if you didnāt get the exact results from your sketch (like I did), you can tell the AI that you want certain parts of the web page formatted a specific way by specifying text on the side of the schematic. This text can specify important parts of the web page, such as:
Font size and style for specific sections
Padding and margins around text, images, and videos
Border radius, color, and size of image placeholders
Row/column layouts
Given the rise of AI technology, weāve seen many new ways to build a web page. This approach brings a few different positive perspectives to web development:
Increases accessibility. In scenarios where someone wants to take a visual-based approach to generating a website, they can use this software for (nearly) free.
Rapid visual iteration: While software such as Figma allows you to do this, a whiteboard-based approach allows for more rapid updates with low(er) technical overhead.
Itās fun! This approach makes front-end designing much more fun (for me, at least).
One feature that I really like with Excalidraw is that it is collaborative, making this a great way to work with your team in real time.
Now, of course thereās a few limitations with this approach:
Bare Bones: At the time of writing this, youāll have to implement your own JavaScript and back-end logic (PHP, Python, JS, etc) for interactive elements (forms, animations, database interactions, etc).
Styling Code: Both whiteboard applications use Tailwind for styling. If you want to use a different framework (such as Bootstrap) or raw CSS, youāll need to modify the code appropriately.
SEO Optimization: AI Generated content may not necessarily be SEO optimized.
I know that SEO is critical for any websiteās success. You wouldnāt want to spend time creating and deploying a website, only to have it lost in the depths of Google or to have it overshadowed in the search rankings by hundreds of other websites. An app such as Morningscore can revolutionize your SEO strategy. It turns this complex task of SEO into a game-like experience, providing user-friendly guidance, analytics, and tools to enhance your sites search performance. This approach makes managing and improving your websiteās visibility both engaging and straightforward, ensuring that your hard work pays off in search engine results.
So while there are some drawbacks to building a website using applications such as Excalidraw and tldraw, I believe this is a step in a direction that can open up a whole new range of possibilities when it comes to a visual-first approach to designing and developing websites.
Did you enjoy this edition?Click/tap on your response. Any feedback is super helpful! |
Prompt āHyper-realistic photo of a drone carrying a Christmas present, evening, snowed street, soft lighting --ar 16:11ā |
š Gaming: Using tldraw, Austin Petersmith made a game of snake.
š§āš Job Posting: University of Oklahoma is looking for 2 Postdocs to develop trustworthy AI tools for predicting weather and climate.
The first postdoc focuses on how people react to major flooding events.
The second postdoc focuses on atmospheric science applications.
š„ Health: Draft clinical plans in a matter of seconds with Glass.
Drama š¦: OpenAI fired their CEO and then brought him back (yes, that is a drama llama emoji. Please donāt unsubscribe.)
šļø Audio: Reach a wider audience for your blog, newsletter, or web content by converting it to audio with HearTheWeb.
š Fashion: Humane released their AI Pin, pushing the bounds of current portable technology.
Prompt āRealistic photo of a blue ocean wave with rose and golden reflectionsā |
Hereās a few different ways I can help you. If youāre looking toā¦
Start a newsletter, I do offer consulting services to help you get started.
Advertise in Bytes and Brew, I have availability for the remainder of the year and into next year.
To get in touch about any of the above, click/tap the button below to get in touch. This will open the default email interface on your device.
āļø See you next edition š
The next edition will be delivered to your inbox on December 11th!
Reply