• 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:

    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

    element)[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog] and apparently it works quite well, it is accessible, has a strong browser support and it works as ma modal is supposed to work: it opens on top of the content and prevents any interaction with that content.

  • 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.