My takes on this world

Small change for you, big change for me, I’m switching to Zola for my personal blog. This marks my first blog post using Zola. I’m using a new theme as well, which also convinced me to change. Docusaurus is well suited for (technical) documentation but not so elegant for blogging (opinion).

Instead of doing the popular Advent of Code, this year I tried to complete the Advent of TypeScript. In this article, you’ll find my solutions and some details on how they work or what I learned while solving the challenge.

This is a personnal list of conferences I like the most throughout the event. You may have your own preferences but the most part is worth watching for frontend developers.

An Injector is a mechanism dedicated to dependency injection in Angular. Not all frameworks build their Dependency Injection (DI) the same way. For example, the Spring IoC Container can be mentioned for the famous Java framework. The Angular documentation has long emphasized providers, leaving aside other elements necessary for DI. Injectors are no exception, which is why I propose to see together how they work.

With the omnipresence of Babel and TypeScript in the Frontend universe, the JavaScript compatibility of our applications is (almost) no longer an issue. For HTML, only a few attributes have been added since HTML5 for bonus features (lazyload, prefetch, etc.). They are generally ignored by incompatible browsers. What about CSS? There are no proper polyfills, very heterogeneous support, and even a slight misstep with display: grid can be disastrous for the visuals. So, how do we rationalize our CSS? Let’s explore that together.

Let’s talk about application-level state management. Local states (React Hook, Vue Composable, Angular Service + RxJS Subject) have limited use by definition. With the extent of the React ecosystem in the professional world, Redux has become the obvious answer to the State Management challenge. Let’s explore the fairly natural process that leads us to Redux and take a step back to reconsider our choices.

Integrated into ES2020, present since 2018 in Babel, and since version 3.7 of TypeScript, optional chaining is an operator widely used today. Although the usefulness of such an operator is undeniable, let’s explore together the biases and bad practices that can emerge from its usage.

What are we talking about?

In TypeScript, it is possible to define types in several ways: interface, class, enum, the type keyword, as const, and more. In this article, we will focus on types constructed from a discriminated union and the advantages of such a practice. In TypeScript, unions are created using the | symbol (e.g., type Union = A | B | C). The term “disjoint” is not accidental because, unlike polymorphism, the types we will use may have nothing in common.

Unfortunately, it is not (yet) possible in JavaScript, nor in TypeScript. But we can try to get closer to it, especially by separating the identification of a scenario from its execution. The goal is to enhance readability and bring the code closer to the problem it solves. To illustrate this, we will use the example of processing a blog article (adding, deleting, publishing, etc.) based on the information contained in the article. Additionally, I suggest we take it step by step so that you can apply this refactoring in your code.

Get started

This is a step-by-step guide to install Pi-hole on a Raspberry Pi. I will only use IPv4 as IPv6 doesn’t provide significant benefits for local network. Please consider reading pi-hole’s official documentation : https://pi-hole.net/

1. Install Raspberry Pi OS (formerly Raspbian) via https://www.raspberrypi.org/software/
2. Boot on this OS
3. Run sudo raspi-config and disable WiFi + Bluetooth (security concerns)
4. Enable SSH daemon when starting.