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:

  1. 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.

  2. 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.

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

  1. 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).

  2. 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.

  3. 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!

Login or Subscribe to participate in polls.

 

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.

  • 🏥 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…

  1. Start a newsletter, I do offer consulting services to help you get started.

  2. 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!

Join the conversation

or to participate.