Once upon a blog...

Published on October 20, 2020 · 9 min. read

🎉 The date is October 20, 2020 and I can officially say: I have a blog now!

Following a common cliché in our industry, my first official blog post ever is about my own blog.

📝 The content

I say blog but this is more of a personal website. As Jeremy Keith would say, it's my "online home". The main goal is obviously to write articles, but I also intend to reference other content like detailed pages for my conference talks, lists of things, online bookmarks and short notes. I will mostly write in English, but some articles could be translated or written directly in French when it makes more sense.

Most of the content will deal with technical topics around the Web:

I've been growing my knowledge base and skillset around the Web since IE5, so I think I have a few things to write about in this area. The content will take the form of short tips, longer tutorials, detailed research, crazy experiments or even not so peaceful rants if I'm really pissed off.

I also want to write about less technical topics related to my job:

A few years ago, I gave a Web/JavaScript class to wonderful students (maybe they're reading this...). I've also been giving conference talks for the past 6 years. I really enjoy public speaking and sharing knowledge in general. I'm still learning a lot, but I want to write about this.

I've been working remotely in a coworking space for the past 4 years now. This had a big impact on my life and the way I work in general. Most of the time, remote workers write about working from home, but I don't see many articles about coworking spaces.

I may write about other topics I'm passionate about:

I'm not sure I have interesting things to say about them yet but suggestions and reviews would be a good start.

🎯 Motivations

The goal of this blog is to share my knowledge and experience, but I've learned from others that I should also write for myself. It's a bit like when you write code comments or documentation. Most of the time, your future self also ends up needing these detailed explanations.

I also read that writing about a given topic pushes you to learn even more about it. It's something I experienced and enjoyed a lot when I prepared conference talks and my Web/JavaScript class. Furthermore, let's be honest, I've always been impressed by people who answer a question with "Oh, I wrote an article about that, here's the URL".

Another motivation is to improve my writing skills, especially in English. In my opinion, this is really important for any developer who deals with issues, pull/merge requests and documentation in general.

🤩 Inspirations

The style of the site is not done yet. It's actually a very simple design I started 3 years ago and never finished. I think I want to try something else, but it wasn't a priority. I'll share about style inspirations once I start working again on this.

In my early career, I was a regular reader of A List Apart and Smashing Magazine. Long, researched, carefully reviewed and well-written articles. I also read many articles from developers' own personal blogs. Many of them inspired me to write and start a blog. Here are a few that come to mind:

Jake Archibald

Jake has articles with animated SVGs, how awesome is that? More seriously, I really like his tone. He has a tendency to dig deep into a subject which always makes a fascinating reading in the end.

jakearchibald.com

Jeremy Keith

Jeremy is a strong advocate of progressive enhancement and the IndieWeb. His articles often have a touch of wisdom I appreciate a lot. His site is one of the best examples of the IndieWeb I know and it gives me a lot of inspiration on how to publish and share my content.

adactio.com

Lea Verou

Just like CSS, Lea is awesome! She has a strong voice and I admire her for that. Over the years, she shared many great projects and interesting articles. Reading her work is always a good investment of my time.

lea.verou.me

Remy Sharp

Remy shares my enthusiasm for crazy experiments with Web Audio. I read many of his articles and like Jeremy, he shares links and notes on his site. He's also the one with the Christmas movie suggestions every year.

remysharp.com

Nicolas Martignole

When I started my career, I was doing a lot of Java and Nicolas Martignole's blog, "Le Touilleur Express", was the first one I followed thoroughly. With the passing years, he started writing about less technical topics like managing developers or being a senior developer. Always interesting.

touilleur-express.fr

Nicolas Hoizey

When it comes to the IndieWeb, I could describe Nicolas Hoizey as "the French Jeremy Keith". Like Jeremy, he follows the POSSE principle and the structure of his site is a great source of inspiration for me. I learned a lot by looking at his GitHub repo to see how he built and configured everything. He wrote a great deal of really good articles, you probably already read the one about viewport height.

nicolas-hoizey.com

Boris Schapira

Boris writes about the Web, but he also writes about politics, citizenship and being a dad. I'm not sure I'm ready to step out of my confort zone on this, but he is an inspiration. He often writes about webperf and when he does, it's 0% devrel BS and 100% from the field. Like Nicolas Hoizey, I often look at his GitHub repo to see how he built and configured his site.

boris.schapira.dev

🛠️ The stack

As of this writing, this site is mostly a static site built with Eleventy and hosted on Clever Cloud.

Last time I tried to start a blog, I spent all my time writing my own static site generator. In the end, all I got was a welcome page and no real articles. This time, I promised myself not to procrastinate (too much) and prioritize features.

Built with Eleventy

I chose Eleventy because I've heard a lot about its performance and simplicity. Let's be honest, I also chose it because it's written in JavaScript and because all the cool kids use it these days (hype-driven stack choices FTW). After a few weeks, I have a better understanding of how it works, and I think it matches my mindset really well. It's not trying to do too much, it has one job, and it does it very well.

I started with the most basic config and decided to add features along the way. If you take a look at my config file, you'll notice I only enabled two plugins so far:

Those were the only plugins I really needed before publishing the first articles. There are many other Eleventy plugins out there I wanted to try. I even started experimenting with an asciidoctor integration. However, if I want to beat procrastination, I really need to focus on the content and postpone this expedition in plugin land to another day.

Optimized with Parcel (v2)

As explained in this issue, Eleventy does not have an official asset pipeline. I don't think it's a problem, especially in my context where I don't use any CSS tool (Sass, Less, Tailwind and others).

I strongly believe in decoupling things. Each layer should do one thing and do it well. Each layer should know as little as possible about other layers. In the context of my own site, I wanted to decouple these two layers: building content and optimizing for performance.

When Eleventy is done building my content, I have a valid static site I could host as is. It's just not optimized for performance yet. I almost decided to go live without any optimizations, but I ended up trying Parcel (v2) and had a lot of fun.

I was able to use the output directory from Eleventy as an input and generate an optimized site with:

You used a JavaScript bundler for a site that doesn't have any JS?

Yes I did my friend. Parcel is more than just a JavaScript bundler. Unlike Webpack or Rollup, it is really Web centric, and it can start from an HTML entrypoint. I also chose it over lower level solution like Gulp because it knows how HTML, CSS, JS and image files depend on each other.

Parcel v2 is still in beta. I had to create a few custom plugins and I'm looking forward to the release of official plugins to add other improvements on images. You can find more details about how I used it in this pull request.

Hosted on Clever Cloud

When I bought this domain in 2015, I hosted this site on OVH with Docker on a virtual private server I had. Configuring this by myself was fun at the beginning, but it clearly was a pain to maintain and secure.

A few years later, I moved it to Netlify. When it comes to deploying a static site, they really have a nice product, even when you only have a homepage and no articles.

When I started working again on this in September, I decided to move the site to Clever Cloud. First and obvious reason: I work there. We have a push-to-deploy mindset with lots of features around it: live logs, detailed metrics, monitoring, auto-scaling, rollbacks, auto HTTPS...

Regarding the deployment of static sites on our platform, we have several options:

I went for a third option, deploying a JavaScript application with our Node.js support. This is clearly not the most reasonable choice for a static site. However, it is yet another opportunity to dogfood what I work on every day (even if our platform is already hosted on our platform).

The other reason is that on top of just serving static files, I wanted to experiment with some dynamic backend features. With a Node.js app, I can easily serve static files and use my preferred language to code the dynamic parts.

🙈 Served with my own HTTP framework

With those constraints, any reasonable developer would have used Express, Hapi or Fastify but that would be too easy, right?

In the context of another project, I started my own Node.js HTTP framework as a learning experiment. I tried to reuse it to serve the site, but I ended up rewriting it from scratch with a different approach. This time I wrote some unit tests. Procrastination clearly punched me in the face with this one, but I have to admit, digging into those HTTP RFCs was so much fun. I think it's ok and this person agrees with me: Why You Shouldn’t Feel Bad When You Procrastinate.

The page you're reading now was served with this custom HTTP framework. You can have a look at the configuration if you're curious but please, just please, DO NOT use it, especially NOT in production. I would like to say I know what I'm doing, but I'm not. What I can say is: it kinda works and I'm learning a lot while working on it.

👋 To be continued...

Thanks for reading this intro. While you wait for the next articles, you can already subscribe to my RSS feed:

https://www.hsablonniere.com/articles-feed.xml

If you have any suggestions regarding the future articles, please contact me or open an issue on the GitHub repo.

Thank you

😍 Thank you wonderful people: Alexandre Berthaud for your detailed review, Nicolas Géraud for your feedbacks, Anthony Ricaud for your kind support, and Marc-Antoine Perennou for pushing me to finish this, with your kind messages (and repetitive jokes).

Edit this page on GitHub