Adding E2E Setup With PlayWright And Cucumber In TypeScript Project
In this post, I'll demonstrate how to set up an end-to-end (E2E) testing framework using Cucumber and Playwright in your TypeScript project. Installing dependencies First, add…
How To Set Up A Custom World For Cucumber/Playwright Tests In TypeScript
It's important to ensure that each test you run is independent of each other . Cucumber uses the concept of a World , which is an isolated scope for each scenario, exposed as …
JavaScript Modules Explained
Nowadays, it's natural to split up a JavaScript program into multiple files, i.e. modules. However, until the ES6 revision in 2015 , there was no official support for this. Con…
How To Prevent CLS From Image Rendering On Client Side
Cumulative Layout Shift (CLS) can negatively affect your user experience and SEO results . The most common cause is improper image rendering on the client side. Fortunately, t…
How To Properly Add Google Analytics in NextJS
In NextJS, Google Analytics should be loaded using the Script component which optimizes loading performance of third-party scripts. As the script should be loaded on every pa…
Returning An Empty React Component
If you wish to return an empty React component, return either true , false , null , or undefined . These are all valid React nodes and are ignored when rendering the DOM. …
React Element vs JSX Element vs React Node vs React Component
Even for experienced React developers, the difference between a React/JSX Element, Node and Component can be somewhat elusive at first. So here's a clear breakdown of the term…
How To Add URL Parameters Using NextJS
NextJS makes it easy to add URL parameters with next/router . The router object , returned by the useRouter hook, accepts a URL of type UrlObject , which is a NodeJS modul…
Running Automated Scripts In DigitalOcean
To automate any command in DigitalOcean, you need to find the Build and Run Command section of your project. These instructions are for an App Platform project. In your projec…
How To Truncate Multiple Lines Of Text With CSS
Truncating, for example, any text beyond the 2 nd line is fairly simple with the following properties. Property -webkit-line-clamp does most of the magic, but needs to be u…
Is ForwardRef Necessary To Pass Down A React Ref
Whenever you wish to pass down a ref to a child component, React recommends to use forwardRef . But why? Actually, you don't have to . As stated 📝 in React's (older) offici…
Load Balancer Briefly Explained
A load balancer is a hardware or software unit that intercepts and distributes network traffic to a group of servers. It allows the application to scale up or down by being aw…
UseImperativeHandle Hook Easily Explained
What does the useImperativeHandle hook do? In the simplest terms, it allows you to control what is returned by a ref prop, specifically the ref handle . The handle is u…
Get Local Time From UTC Timestamp In JavaScript
If you've got a UTC timestamp string, turn it into a Date object , and JavaScript will automatically convert it to your local timezone. For a string representation of the d…
Learn How To Use Vuetify’s Grid System
Vuetify’s grid system is built on top of Flexbox, a CSS3 web layout model, which makes responsive web design a breeze. Those of you who are already familiar with Bootstrap‘s grid …