Today, I want to tell you about my latest project; the Dev Concepts e-book series, which is currently on pre-order.

Update 2021–03–20: You can now buy the first tome, dedicated to the software craft.

As some of you might know, I’m the author of a book about the TypeScript programming language. It was my first experience with the publishing world and it taught me a lot. The writing experience in itself was interesting, but seeing people reading and learning from my own book felt great.

I want to continue to contribute to the IT community, and writing is my main…

and how to use it right now

Learn how to migrate your applications to Tailwind 2.1+, and how to enable Tailwind’s Just-In-Time mode.

Update 2021–04–06: Adapted the content after the release of Tailwind v2.1

About two weeks ago, Adam Wathan announced a new Tailwind experiment: Just-In-Time. Since then, Tailwind 2.1 has been released and it introduces official support for this new feature.

In this article, I’ll tell you what it’s all about, and how you can take advantage of it.

WARNING: Tailwind’s Just-In-Time mode is still in preview at this point in time. …

Picture courtesy of Kevin Grieve

In very rare circumstances, you might want to delay the loading of your Angular application. In this article, I’ll show you how you can do it.

Warning: Don’t do this lightly. Carefully evaluate if you really need to do this, as it can have a devastating effect on user experience!

Angular module import side-effects

In my previous article, I’ve briefly explained the Angular application bootstrap process. One thing that I mentioned there is that the import statements remain at runtime, and are taken care of by Webpack.

What I didn’t mention though is what happens as soon as Webpack imports an Angular module; for…

Did you ever wonder how Angular applications start up?

In this article, I’ll give you an overview of how Angular applications are bootstrapped. Note that this is an article for beginners, not a deep-dive.

High-level process

For an Angular application to start, multiple things have to happen within the Web browser:

  • The HTML of the entry point must be loaded
  • The different JavaScript bundles of the application must be loaded
  • The main bundle of the application must be executed
  • The main bundle must load Angular and trigger the bootstrap of the root Angular application module
  • Angular must bootstrap the root Angular application module, and render the application

Let’s look at those…

Last month, I wrote a lengthy post to share my story as a SaaS startup founder:

This is what happened next.

Picture courtesy of Drew Beamer

In that article, I’ve explained what I’ve gone through during the previous 20 months; all the time and effort spent trying to create a product, and not succeeding (yet).

I wrote that honestly, sharing my thoughts about the ups and downs, and the struggle to accept or reject the idea that I had fallen for the sunk cost fallacy.

In this article, I’m sharing my lessons learned since last month, and how writing that article last month influenced…

Recently, I’ve been doing some research around Next.js & GraphQL.

After looking into the back-end side (which I’ll write about another day), I wanted to test drive some libraries for querying my GraphQL API.

Of course, since I was using Apollo on the back-end, it made sense to go full-circle and use Apollo on the “client-side” too.

In this article, I’ll explain how I’ve integrated it into my Next.js application. Since you know me, it should be obvious that the application uses TypeScript!

Note that I’m no Next.js specialist (nor a React one :p) and thus, I might be wrong…

Back in 2019, I wrote a short cheatsheet about the Design Sprint 2.0 approach. It’s been sitting on my Google Drive, and I thought that it may be useful to others, so here goes!

This isn’t an introduction to the approach, so if you’ve never heard of design sprints, you should probably check out the Sprint book of Jake Knapp (the creator of Design Sprints).

In two words though:

Design Sprints are workshops, spread out over about a week of time (depending on which variation you use), during which your team will try to solve a big design challenge, and…

As some of you might know, I’m working on a book about Software Development Concepts.

Among many other things, the book will cover the basics of User Experience (UX), User Interface (UI), and Customer Experience (CX).

Tonight, I wanted to help my readers to visualize the difference between those. Here’s what I’ve come up with so far:

This diagram is directly inspired by the one published here by Michael Janda, extended with some ideas of mine.

Now that I have created the visualization, I can continue explaining those concepts… one by one ;-)

That’s it for today!

PS: If you have ideas/remarks about this, don’t hesitate to comment, I’m curious.

TL;DR: It can be really hard to know if we’re just resilient or falling for the sunk cost fallacy.

I’ve been working for ~20 months on my current project, spent 2K hours on it, and “lost” 200K € by not doing something else. That project is not ready yet. Here’s the story behind it.

Update 2021–02–28: I posted a follow-up:

Picture courtesy of Natalie Rhea

Before it all

Early in 2018, after having worked for 10+ years as an employee, office politics got to me and I was tired of wasting time in meetings. …

Today, while preparing to publish the table of contents for my book, I realized that I didn’t know how to add it to my landing page

Picture courtesy of Lalaine Macababbad

In this article, I’ll explain how to generate a table of contents with automatic numbering using pure HTML and CSS.

CSS counters to the rescue

In the past, I imagine that quite a lot of JavaScript code has been written for this purpose. Luckily, nowadays, the Web platform is more powerful than ever. We can do wonderful things with HTML and CSS alone. For one, counting things!

With CSS counters, we can use and increment variables maintained transparently for us by CSS; allowing us to customize the appearance of our content easily.

The value of a CSS counter can be displayed using counter() or counters()

Sébastien Dubois.

Author, CTO. Subscribe to my newsletter: Follow me on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store