The @font-face rule does not work in the shadow DOM

Yesterday I found out that the shadow DOM is less isolated than I thought, but there’s another quirk that completely bewildered me: the @font-face rule does not work in the shadow DOM. Yes, it’s that simple and that frustrating.

The style inside the shadow DOM is less isolated than I thought

Over the years, I’ve experimented with the shadow DOM several times but never had the chance to use it in a real project. One of the main limitations that held me back was my understanding that styles inside the shadow DOM are completely isolated from outside styles. This would make it difficult to build components as part of the same application, where you typically want components to share at least some common styling. So I made a mental note to use shadow DOM only when I needed 100% style isolation.

Today that day finally came! I had a perfect use case requiring complete isolation! I eagerly pulled the shadow DOM from my toolbox where it had been waiting for so long. But wait—what’s happening? Why is the text inside my shadow DOM adopting styles from outside?

The joy of classless CSS frameworks

Suppose you are building a simple page or application, maybe for internal or personal use. Suppose you don’t need anything fancy—just a good-looking form, some buttons, a headline here, and some text there. Oh, and I almost forgot—a nice modal to give feedback to the user. What will you do? Reach for a fully-fledged CSS framework like Bootstrap? (By the way, is it even used anymore?) Use a complete UI kit like Material UI? Those are clearly overkill. So what’s the alternative? Will you write all the CSS from scratch? That would be tedious.

Luckily, there’s a third way: you can use a mini CSS framework—or even better, a classless one.

What I learned refactoring a medium sized Elm project

Recently I’ve been busy in refactoring a medium sized Elm project. The refactor was needed because the code base had grown during the years and had became very contrived and difficult to understand. That is way it was difficult to change and evolve.

During this activity I learned some lessons that I’d like to share. Probably not everyone will agree on every point, but let me know in the comments if you have different opinions.

The pros and cons of Elm as a Front End language

Everybody knows that there are a lot of JavaScript Front End frameworks. Their number is so hight, in fact, that it is one of the main sources of the so called JavaScript fatigue.

But not everybody knows that it is possible to build web sites, single page applications and web interfaces in general even without writing a single line of JavaScript. And I’m not talking about a simple static HTML and CSS web page, but about a rich, interactive application.

There are some alternatives to JS, one of them is the C# based Blazor, by Microsoft.

But the one I will focus on in this post is Elm. Elm is a Domain Specific Language to build web interfaces. It is a purely functional language and its main selling proposition is that it prevents runtime exceptions. It has a lot of nice features and some downsides. Let’s take a closer look both at pros and at cons.

How I finally succeeded in doing Test Driven Development on the Front End

For years I’ve been hearing great things on Test Driven Development and on testing in general. But my experience with testing on the Front End has actually been a long history of misery. I’ve spent a lot of hours in writing tests, only to spent many more of them when a functional change was needed and all the tests had to be rewritten. And all this time was spent with apparently no gain. Only a ridiculous amount of regressions were caught by the tests, around 5 per year, while we were having hundreds of them. There was no relation between the amount of tests written and the amount of bugs in a feature. The most tested features had more or less the same amount of bugs as the untested ones. And finally, tests didn’t help at all with refactoring and with code evolution. On the contrary they stood in the way every time the code had to be changed. This is why I was coming to the conclusion that Test Driven Development on the Front End was impossible, and unit testing was doing more harm than good.

But then, on the project I’m working daily, which is big and complex, we are having some big issues, and some of them are clearly caused by a poor testing automation strategy. For instance, when we release on production we are not that confident that everything will work as intended. On the contrary past experience tells us that there will probably be some regressions. This is why at every release on production we must plan at least half a day for manual no regression testing, and some more hours for hotfixing. So, to (hope to) be ready when the business starts its day, he have to start the release process in the middle of the night. And be prepared for a lot of stressful hours of emergency work. How better would it be if at least part of this testing could be automated!

So, my feelings were split. On one hand I was hating automated tests. On the other one I was wanting more of them.

But, then, finally, I saw the light too!

How to build a modern SPA client side (almost) frameworkless - Part 6

Hi all, this is a bonus post on the “How to build a modern SPA client side (almost) frameworkless” series. Thanks to a talk by Massimo Artizzu I learned that we can use JsDoc to have a sort of type system without using TypeScript. Of course I knew JsDoc, but I’ve always used it just to add comments on functions. As it turns out it can do much more, and, at least for simple project, can replace TypeScript.

How to build a modern SPA client side (almost) frameworkless - Part 5

Welcome to the fifth and last part of this series of post where we are building a modern client side single page application using the bare minimum amount of tooling necessary.

In the fourth part we basically completed our application with a zero tooling approach. In this part we’ll see how to add a dev server and a bundler, thanks to Vite and some other tools. It’s really easy to do and it is totally optional. Yon can start with no tool at all, and then add the ones that you need only when and if you really need them.

How to build a modern SPA client side (almost) frameworkless - Part 4

Welcome to the fourth part of this series of post where we are building a modern client side single page application using the bare minimum amount of tooling necessary.

In the third part we did a big step ahead introducing the routing. Now there is just one thing left to do: let the user update a note. It should be pretty straightforward by now, we just need to apply what we’ve learned so far.

How to build a modern SPA client side (almost) frameworkless - Part 3

Welcome to the third part of this series of post where we are building a modern client side single page application using the bare minimum amount of tooling necessary.

In the second part we developed almost all the basic features of our application, but there is still one missing: the possibility to edit a note. We could just add a <textarea> in the note card in the existing page and call it a day. But there is another missing feature in our application: routing. To showcase both of them we will create a new page to display a single note, and we’ll add editing capabilities to that page.

How to build a modern SPA client side (almost) frameworkless - Part 2

Welcome to the second part of this series of post where we are building a modern client side single page application using the bare minimum amount of tooling necessary.

In the first part we develop the foundation of the application. In this post we will add some missing feature: deleting, saving the searching notes, plus our DIY solution for CSS in Js.

How to build a modern SPA client side (almost) frameworkless - Part 1

In the first post we said we are gonna develop a personal note taking web app, using µhtml as the only dependency, while we will use the web platform for everything else:

• ESM modules to split and organize the code
• Custom elements to create components
• Constructable stylesheets for css-in-js styling
• The Navigation API to handle the routing

Enough talk, let’s start coding.

You can follow this tutorial cloning this repo, every post has its own branch.

How to build a modern SPA client side (almost) frameworkless - Introduction

In the last post I explored the so called HTML Web Components. They allow to progressively enhance a site or application where the HTML is static or rendered server side. But what about the classic data driven single page application rendered client side?

Here the HTML must be created on the fly by the client, starting from some data. This is the typical use case for frameworks like React, Angular, Vue, Svelte, Solid and so on. But, can we go frameworkless and use only the web platform?

How to build a simple web app with web components

Recently I developed a simple project to test how far is it possible to go in writing a simple web app without any libraries and with the tiniest amount of tooling.

Let’s clarify one point right at the beginning: when the complexity increases a proper build step and a framework are probably needed. This is just an experiment to understand where this threshold lies.

As a developer, I expect a modern web app to have:

• A modular code base
• Composable components
• Reactivity
• Declarative code style
• Input sanitization
• Scoped style
• A dev server with auto reload and hot reload
• To be testable at all levels (unit, integration, functional, ect.)
• Type checking
• SSR capabilities

How to send a SOAP message with PFX certificate authentication in node

Recently we had to integrate in a node.js backend an external email service that exposes a SOAP service, protected by a pfx certificate.

After some trials and errors, it turns out it’s quite simple to do it in plain Node.js code, without any external library.

How to integrate Google Analytics in React

More often than not, someone will ask you to integrate Google Analytics into your project, usually that happens just some days before the go live. But don’t worry, it’s really easy, let’s see how.

How to implement a cookie banner in react

The EU GDPR gives the EU citizens some nice rights on their data. Unfortunately, as a side effect, almost every sites needs the infamous “cookie banner”.

The good news is that we don’t need a library to implement it in React, it takes just some lines of code.

Why cookies are better than local storage to store auth tokens

For years I’ve been keeping my auth and session tokens in the local storage. This strategy has many shortcomings:

1- You need to explicitly manage the writing and reading of the token from the local storage 2- Once you store the token in the local storage, the obvious choice to send it back to the server is inside an auth header, eg: “Authorization: bearer ". Unfortunately you can add an header only to HTTP calls made with JavaScript, not calls made by the browser itself to static resource. So, for instance, if you need to protect your images with a token, you cannot just drop an `img` tag in the page with an `src` attribute. The browser would not sent any token. You are forced to use an horrible workaround, like putting the token in the image URL's query string. 3- Local storage can be accessed by JavaScript, that exposes the token to possible [CSRF attacks](https://owasp.org/www-community/attacks/csrf) 4- Local storage does not expires. Either you choose session storage, and the information is wiped out at every session, or choose local storage and the information sits there forever, until is not explicitly removed by the user. Ok, the token duration should be handled by the token emitter, but having more control on token expiration on the cline side is not bad.

All this problems can be, not only solved, but entirely avoided just by keeping the token in a cookie.

How to populate a field in strapi with data from an external API

I’m using (Strapi)[https://strapi.io] for a project in the fashion industry. There are a lot of contents that are related to the “season”. I could hardcode in Strapi a list of the past and future season, but it would be better if such a list could be fetched from an external API, so that it would be always up to date.

Thankfully that is not only possible, but even quite easy.

How to use the <dialog> element in React

To render a modal in React I usually use (material ui)[https://mui.com/core] or (react-modal)[https://github.com/reactjs/react-modal]. Today I came across a (nasty bug)[https://github.com/wojtekmaj/react-date-picker/issues/415] that happens to react-date-picker when it is rendered inside a modal created by react-modal. The only solution I found is to remove react-modal. So I took a look at the (native

How to integrate Google Maps into React

Sure, you can use an npm package to integrate Google Maps into a React application, but you can easily do it by yourself and avoid a dependency that must be maintained during the project lifetime.

Event listeners run only once

If you want to add an event listener and run it only once, you can use the once option.

element.addEventListener('click', () => console.log('I run only once'), {
  once: true,
})

Copy to clipboard

You can use the Clipboard API to create a “Copy to Clipboard” function.

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
}

How to setup a react project with Vite

I’ve been using Create React App for years now. I didn’t want to deal with the Webpack configuration. Usually I’m not a fan of tooling, I just want to code and get things done.

More often than not you need to apply some customization to Create React App, and that is not possible out of the box. You need to use tools like Craco or React App Rewired. This can be troublesome because they are not always in sync with the CRA releases, but usually, with a minimum effort, you can bend CRA just enough to suite your needs.

But in the last six months I hit a limitation of Create React App that I could not override without ejecting. CRA doesn’t allow imports outside of the src folder, and the dev server doesn’t update when a dependency in the node_modules folder changes. This is a problem when you work in a monorepo project. For instance, if you have a monorepo with this folders:

  |
  +- Packages
    +- Components
    +- App1
    +- App2

You want your dev server to update App1 and App2 whenever the components they import from the Components folder change.

I couldn’t find a way to achieve this with CRA, if you know how, please drop me a note in comments.

So I began experimenting alternative solutions to CRA. I played with Vite in a project using solid js and I decided to give it a try.

I discovered that bootstrapping a React project with vite is quite easy and, all in all doesn’t require much more work than with CRA.

This is my recipe. It is quite long, but the only actually required step is the first one. All the others are optional and depends on your desired setup. Almost all of them, except the 3 and 4, are required also with CRA.