Yax.com Daily Worklog
Each day I summarize the work I’ve done to build Yax.com, describing technical and business challenges.
This is my inventor’s notebook for the project. Before Yax.com, I worked as a director of engineering (see my LinkedIn profile) and came to see the importance of explaining technology choices in the context of business challenges. I used to encourage my team to explain how they were using technology by using architecture decision records and an architecture decision log. This is similar; I write about the technical challenges I’m facing and tell the bigger story about what I’m building and why.
April 28, 2020
Today is the first day of the Yax.com project.
I’m now in a villa in Bali, working in an office overlooking rice fields. Beyond the rice fields, a worldwide pandemic rages. I left San Francisco five years ago, and I’ve been living and traveling in Southeast Asia. I relocated from Manila to Bali on March 19th when a lockdown was announced and borders were about to be closed.
I’m hoping that in a few months I can look back and say the pandemic reached its peak this month and the risk and restrictions eased quickly. Right now I don’t know if there will be worse to come. It’s clear economic disruption and uncertainty will last for months. Right now I can’t travel like I have in the last five years. My consulting work is on hold. I don’t expect to start any new jobs soon. For me, this is a good time to start a new project that is speculative, exploratory, and intrinsically satisfying.
This project is about helping people build websites. In the past six months, I’ve helped family and friends with their simple websites. Along the way, I encountered limitations with the commercial services people use to build websites. My plan is to explore the possibilities for a do-it-yourself website builder. I want to develop an open source project that can build websites that are:
- free to build and use, with no cost for templates or hosting or custom domains
- unbranded, with no advertising
- free of vendor lock-in, so the owner can move them anywhere
- using web-standard code, so an owner can easily customize a site
Wix and Squarespace dominate the market and there are dozens of smaller competitors, so that suggests there is demand. I’ve seen the limitations imposed by Wix while helping my mother with her website, and encountered further difficulty helping a friend rescue her website from Envato Sites, a website builder service that went out of business. I’ve built my personal website using a static site generator and helped my son build a website using Hugo, Forestry, and Netlify (it helped him get a job building rockets). The JAMstack approach I used with my son is superior to the commercial website builder services because it produces websites that are free to build and host, without lock-in, but the approach is technically complex and not suitable for non-developers.
I’ve also been reflecting on the early days of the web, recalling the very first web browser which had a capability to edit as well as view web pages. I’d like to offer websites that can be edited easily from within the browser. It should be possible to select a template, publish it, and then edit the content directly on the page. I want to explore the newest web standards and offer templates that reflect the best web development practices so beginners will have examples to guide their learning. I’m thinking of offering tutorials as I did with my RailsApps open source project. Right now the business model is unknown but perhaps it will be like RailsApps with a choice of free, basic tutorials and paid, more advanced tutorials.
Before I try to acquire and engage users, I’ll need to build a prototype and see what’s possible.
Website requirements
The initial yax.com website requirements are simple. I’ll start with a sign-up form and drip email that delivers tutorials to subscribers. I’ll add live chat so I can engage with visitors. I’ll need a blog because I want to publish this journal. With those requirements in mind, I’ve begun building the website for yax.com.
Choose a CSS framework and template
I started by looking for some appropriate templates for the website. In the past I’ve used templates from David Miller’s open source StartBootstrap project but the Bootstrap CSS framework is weighty and dated. I looked for templates built with newer CSS frameworks. The Tailwind framework and its UI components are getting a lot of developer interest but the component library is not yet fully built out and the license terms don’t allow template developers to use the framework, so Tailwind is not a contender. Next I looked at the Bulma CSS framework which gets a lot of love from developers. I found a template that suits my needs that is implemented with Bulma for the Hugo static site generator. There’s also a Bulma UI component library I can use to add sections such as tables to the template pages. In the past, I’ve used Stackbit to generate sites and deploy to Netlify but this time I set up Hugo and a GitHub repo directly. I don’t really like Hugo (the template system is cumbersome) but the “Bulma for Hugo” template looks like a good starting point. It took me only a few minutes to install Hugo and begin making changes to the template.
April 29, 2020
Choose an email service provider
I’ve got the beginnings of a landing page for the website. The most important element will be a call to action (CTA) so I can engage with users. For this iteration, the CTA will be an email sign-up form. I’ll collect email addresses and save them to a contact list hosted by an email service provider. I used Mailchimp for many years for my RailsApps open source project but Mailchimp becomes very expensive as the number of subscribers increase. With Mailchimp I paid more than $200 per month just to store the email addresses even when I wasn’t sending mail regularly. Today I looked for alternatives and found a provider named Sendinblue that has no fee for storing a list of subscribers. Sendinblue charges a fee only when you send email to your subscribers.
Integrate the Sendinblue sign-up form
Like Mailchimp or any other email service provider, Sendinblue has a form design interface that helps you create a subscription form. It’s available in three versions: IFrame code that embeds the form on your website, simple HTML code for a form without validation or confirmation messages, and a complex combination of HTML and JavaScript that performs validation and displays a success message. I expected I could simply copy the code and paste it into landing page. Instead I experienced a day of web developer pain. The iFrame worked but it was impossible to get the layout and styling to fit the design of my site. I tried the combination of HTML and JavaScript but the HTML alone was 68 lines of code and the JavaScript downloaded from Sendinblue was several thousand lines of code and encumbered the page loading with delays. So I put together a simple form with Bulma and started writing JavaScript AJAX to listen for the form submission event and submit the form.
April 30, 2020
Integrate Sendinblue sign-up form
I spent a full day in hell just to write the JavaScript needed to submit email addresses to Sendinblue. Here’s the thing about JavaScript. It was a crappy language when it was first written. Over many years the Net gods have twisted it into a world-class modern programming language (so they say). But there’s at least three different ways to implement AJAX form submission. Ten years ago I would have used jQuery or maybe Axios. Then maybe a vanilla JavaScript implementation with XMLHttpRequest. More recently, there’s a new best practice using fetch. Here’s the thing about me. I don’t do JavaScript development every day or even very often. If I did, it’d take only a few minutes to slam together the code for form submission. As it is, I spent hours sorting through out-of-date tutorials before I found some examples for the current recommended approach. Professional JavaScript developers accept this state of affairs as normal. Which is why companies have to hire professional JavaScript developers. I don’t think web development should have devolved to this.
Investigate web components
I’m not going to dive into it now but I want to see if some basic website features such as a sign-up form have already been implemented as reusable web components. I’ve been hearing about web components but I haven’t tried the technology yet. It’s still new and unknown to most web developers. I’d like to see if I can find a library of web components that includes a tag like <email-signup-form> and just drop it in, configuring the web component with the form submission target and applying styles of my CSS framework of choice. There should be no need to write one-off JavaScript for the same feature that thousands of people implement. Where are the web component libraries? There are thousands of WordPress plugins or NPM packages. Web components should be the package manager for HTML, extending the language with reusable features so I don’t have to write JavaScript or adopt a heavy framework like React or Vue to get basic features.
First blog posts
I wanted some credible long-form content on the blog so I borrowed two essays from my danielkehoe.com personal website. Now I’ve got posts about the Early Days of the Web and a story from 1993 about Punctuating the Web. It’s good to have some content in place so the first blog post isn’t titled “My First Blog Post.”