This is how you can force TypeScript to always have at least one item in an array. Or in other words: to not allow empty arrays. You can also force it to have at least 2, 3 etc. items: This came in handy lately when I was implementing a ColorSelection component in React: Having it […]

Create an NX workspace for a new project using myorg as the workspace name. The workspace name will be used as a prefix when creating libraries later such as @myorg/mylib. You will be asked a couple of questions such as choosing a preset (React, Next, react-express, angular, empty and more) and a CLI. Alternatively you […]

Let’s assume you have an array of data: What you want to end up with is this: In other words, you want to group 3 elements together by surrounding them with another element. The solution

Installation Change into your project root folder (package.json must exist) and run Verify that it was correctly installed by running Cypress: or in case this makes trouble (it did for me, see below) run that instead: For convenience you can add a script to package.json: The official docs provide further info about installation such as […]

Let’s say you have and want to get rid of item2. How do you do that in JavaScript? Now, newData contains: Or, if you have the key stored as a string in a variable called key: A simple utility function would look like this: Using a list of allowed keys This will make a shallow […]

Cloud Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs. Initialize Cloud Firestore Get Firebase configuration from web console and then use it to initialize the app in your web frontend: A collection contains documents and nothing else. Documents contain data as property-value pairs. The […]

Installing recoil Add RecoilRoot to your root component Atoms An atom is (a piece) of state that can shared between your components is what components can use to read from or write to will trigger a re-render for any component (that uses the atom) whenever the atom state changed You create atom shared state like […]

This article demonstrates how to create Flexbox alignments with Tailwind.

Smooth scrolling effect with pure CSS only, without JavaScript

Setup As of march 2021 you need node version 10.13 or later to run NextJS. Create a folder an initialize your project with What we will get is Automatic compilation and bundling (with webpack and babel) React Fast Refresh Static generation and server-side rendering of ./pages/ (see Pages and Routing below) Static file serving. ./public/ […]