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 🤯
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.
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.
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
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:
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.