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/ […]

Installing TypeScript Choose one of these This will allow you to run tsc command. To test whether a TypeScript file compiles you create one: and then run tsc index.ts. You end up with an error: The reason is that name property is already defined on the window object (global scope), so you either have to […]

You need Node >= 10.16 and npm >= 5.6. Creating a React with TypeScript project Rendering JSX Rendering JSX into the DOM: React elements are immutable Once you create an element, you can’t change its children or attributes. You would have to call render again to see changes. React DOM then compares the element and […]