Guidelines for choosing a Node.js framework

I often see the question "What’s the best Node.js framework?" crop up on message boards and social media. The replies tend to be full of strong opinions. Some developers will even get into arguments about it.

Full article

Read More

Testing Nested Components Reliably with Cypress

Cypress is a brilliant program for testing user interface elements. It offers flexibility for testing different types of components, and it handles changing pages fairly well. One of the quirks of Cypress shows up when working with nested components.

Full article

Read More

Introduction to Rome — An All-in-One JavaScript Toolchain

Building a modern JavaScript project with front-end libraries like React, Vue, or Angular requires you to configure many development tools so that they can process your JavaScript code. And there are even more tools such as PostCSS for CSS processing and TypeScript for enforcing type checking.

Full article

Read More

How I Run Builds and Tests & Other Operations in VSCode Efficiently

Over the last couple of years, I’ve developed a simple workflow to run builds, tests, and other operations during development that allows me to easily and efficiently examine results. Rather than struggling to find the output in a wall of text in a terminal with limited keyboard support, I simply log each build and test run to a file. Adding a timestamp to each line helps me to avoid stale data.

Full article

Read More

Graceful error handling using Error Boundaries in React.js

Working with React.js, it’s a common thing you would see where if something goes wrong, (for instance, a JavaScript error), the entire React.js app would crash and renders blank. Meaning, the UI goes entirely blank leaving the error only in the console.

Full article

Read More

Let’s Dive Into Cypress For End-to-End Testing

Is end-to-end testing a painful topic for you? In this article, Ramona Schwering explains how to handle end-to-end testing with Cypress and make it make it not so tedious and expensive for yourself, but fun instead.

Full article

Read More

Web Vitals patterns

A carousel is a UX component that displays content in a slideshow-like manner. Large, above-the-fold carousels often contain a page's Largest Contentful Paint (LCP) element, and therefore can have a significant impact on LCP.

Full article

Read More

Some Vulnerabilities of React.js Security-Guide for 2021

ReactJS is an open-source JavaScript framework that is used to develop a single-page application. Let's look at its vulnerabilities and best practices to prevent them. ReactJS is a free, open-source, component-based, and one of the most popular JavaScript front-end frameworks.

Full article

Read More

Lessons Learned Rebuilding A Large E-Commerce Website With Next.js (Case Study)

At our company, Unplatform, we have been building e-commerce sites for decades now. Over those years, we have seen the technology stack evolve from server-rendered pages with some minor JavaScript and CSS to full-blown JavaScript applications..

Full article

Read More

Infrastructure overview

MangaDex is bigger than you think. No, really. People are often surprised (and/or sneer) at the complexity of some of the technical details we mention, but we do not engage in complexity for fun's sake.

Full article

Read More

Video optimization for the web simplified with ImageKit

It is easy to convey a complex idea through a video. For example, this landing page of a developer-focused tool demonstrates the real-time resizing of images using URL parameters. However, to present the same idea using a static image would have been slightly tricky.

Full article

Read More

Replacing Docker Desktop with hyperkit + minikube

MacOS is a Unix but it isn’t a Linux so, unfortunately, if/when we need to use linux-y things like docker we need to install a VM just like in the Windows world. That’s of course also true for docker.

Full article

Read More

Vector? Raster? Why Not Both!—zachleat.com

This week I ran into an interesting class of problem that—in hindsight—could use a much better workflow. Does it exist? It has to do with the hero image on the right side of the home page on jamstackconf.com.

Full article

Read More

Converting a Large Create React App Project from JavaScript to TypeScript

I'm working on a large industrial react project, scaffolded by create-react-app. The project was started in 2018, just before TypeScript really started becoming well known and used.

Full article

Read More

Different Monorepo Solutions in 2021

A Monorepo is a single repository where you store all the code that belongs to a project. For example, a Monorepo will include the website code and mobile app code in one place. However, it differs from a monolithic application as the modules are placed with clear boundaries within the repository.

Full article

Read More

React antipatterns to avoid

Here are some of the antipatterns most commonly seen in React applications and how to fix them. These antipatterns will make your codebase a nightmare to work with if you’re don’t learn to recognize and prevent them at their early stages. Redux is awesome.

Full article

Read More

25 Hand-Picked React Libraries You Probably Didn’t Know Existed

Using these will put your web development skills on steroids. Here are some libraries you can use in 2021 to level up your web application. The Best Toast in Town. Smoking hot React notifications. SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).

Full article

Read More

React Readability Analysis Of Implementing Custom Hooks

The introduction of hooks in React 16.8 has totally changed the way we implement logic in our React components. React hooks provided us with an entirely new way of encapsulating logic, sharing it between components, and keeping it separate from the view layer.

Full article

Read More

Small Bundles, Fast Pages: What To Do With Too Much JavaScript

Minimising the amount of JavaScript in your pages is an essential step to ensure a speedy user experience. This post will explain why bundle size matters and recommend tools and processes you can follow to monitor, visualise, and most importantly, shrink your JS bundles.

Full article

Read More

The best frontend development strategies in 2022

This article is challenging, polarising and thought provoking on purpose. It covers a lot of fresh content and ideas which you are most likely not aware of. An iPhone has 6 Cores.

Full article

Read More

Tree shaking and code splitting in webpack

What is tree shaking? Tree shaking, also known as dead code elimination, is the practice of removing unused code in your production build. It’s important to ship as little code to your end-users as possible.

Full article

Read More

For Code Consistency, Always Share Your Environment Settings

In days of yore, developers would argue about tabs vs. spaces, two spaces vs. four spaces, character line limits, and just about any other coding convention. To be fair, people still argue about that.

Full article

Read More

How to Be an Engineering Leader: A letter to my past self

Everyone has their own definition of true leadership. What I didn't understand at the start of my leadership journey was that each of us is a leader. Regardless of intent, we influence and impact our communities, industries, workplaces, and relationships.

Full article

Read More

Choosing the Best Form Library for Your React Project

Forms are notoriously difficult to work with in React. Unlike other elements, form elements have their own internal state. In React, there are two distinct approaches for handling interactions with these elements.

Full article

Read More

5 Best Practices to Choosing Third-Party NPM Packages

Installing an NPM package is a pretty straightforward task. But, choosing the right package is a lot harder than you think since there are over 1.3 million out there. So, this article will discuss 5 best practices you need to follow when selecting a third-party NPM library for your project.

Full article

Read More

Compound Components In React

A compound component is one of the advanced patterns of React which makes use of an interesting way to communicate the relationship between UI components and share implicit state by leveraging an explicit parent-child relationship.

Full article

Read More

Project Management Skills to Succeed at Work

In the field of project management, it is not easy to choose a delegate to execute projects with flying colors. The chosen leader has to possess an outstanding set of professional project management skills and competencies.

Full article

Read More

Mitigating Breaks in Workflow in Complex Application Design

Users of complex applications are frequently interrupted during their workflows, starting a task only to have to wait an extended period of time before completing it.

Full article

Read More

How to Handle Web Push Notifications in Websites and PWAs

Push notifications are a common sight on the modern web. They let you communicate timely information to the user, even if your site’s not actually open.

Full article

Read More

Bitcoin Uses More Electricity Than Many Countries. How Is That Possible?

Cryptocurrencies have emerged as one of the most captivating, yet head-scratching, investments in the world. They soar in value. They crash. They’ll change the world, their fans claim, by displacing traditional currencies like the dollar, rupee or ruble. They’re named after dog memes.

Full article

Read More

9 Best Practices for Optimizing Frontend Loading Time

You have 50 milliseconds to make a first good impression on your potential visitors. So yes, it takes only 50 milliseconds for users to form an opinion about your website to decide whether they’ll stay or leave.

Full article

Read More

Interactive Learning Tools For Front-End Developers

We learn better by playing games. So we’ve collected interactive coding tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack and pretty much everything in-between. Because this industry moves so quickly, learning new skills is a regular thing for most of us. Over the last little while, I’ve been able to collect links to several interactive coding tools and apps that can help you supplement your skills in different areas of web development.

Full article

Read More

Microservices Architecture From A to Z

This article aims to discuss the microservices architecture from its definition to a concrete example. The following results were produced via various sources: scientific publications, articles, videos, documentations from large companies, etc.

Full article

Read More

Ship / Show / Ask

Pull Requests have been widely adopted by many software teams. Some people love them, and some people long for the days of Continuous Integration – where you never created branches and your team put their changes together all the time.

Full article

Read More

HTTP/3 From A To Z: Core Concepts (Part 1)

After almost five years in development, the new HTTP/3 protocol is nearing its final form. Earlier iterations were already available as an experimental feature, but you can expect the availability and use of HTTP/3 proper to ramp up over in 2021. So what exactly is HTTP/3? Why was it needed so soon after HTTP/2? How can or should you use it? And especially, how does it improve web performance? Let’s find out.

Full article

Read More

Reimagining Agility with Diversity, Equity and Inclusion

Key Takeaways There is a misconception that Agile approaches are inherently more inclusive than other ways of working – this is not true 26% of participants in the survey believe agile approaches actively create exclusion and inequity in the ways of working the teams or organizations that embracin

Full article

Read More

How I structure my React projects

It’s been quite a while since I wrote an article about how I structure my Node.js REST APIs. The article covered the approach of designing a well organized and maintainable folder structure for Node.js applications. What should the folder structure look like?

Full article

Read More

The Three Stages of Engineering Teams 📊

Mike Krieger, co-founder & CTO of Instagram, believes there are three major growth stages every engineering team goes through. These are crucial moments in the wider company evolution, and largely match my own experience at a fast-growing startup first, and a larger company later.

Full article

Read More

ES2022 feature: class static initialization blocks

For setting up an instance of a class, we have two constructs in JavaScript: Field: Create (and optionally initialize) instance properties. Constructor: A block of code that is executed before setup is finished. For setting up the static part of a class, we only have static fields.

Full article

Read More

Architecting Database Systems for the Microservices World

Microservices are not new—they have been around for quite a while. However, it is because of innovations that came recently which accelerated the adoption of the microservices architecture. Most importantly: The idea of microservices comes from the service-oriented architecture world.

Full article

Read More

Measuring Value Realization Through Testing in Production

Hastie: I'm Shane Hastie. It is my privilege to be the host for the measuring value realization through testing in production roundtable. We have a panel who I'm going to ask to introduce themselves briefly, and answer the question, what does testing in production mean to you?

Full article

Read More

Clean Architecture on Frontend

Not very long ago I gave a talk about the clean architecture on frontend. In this post I'm outlining that talk and expanding it a bit. First, we'll talk about what the clean architecture is in general and get familiar with such concepts as domain, use case and application layers.

Full article

Read More

Customize TailwindCSS to give your sites a unique look

Front-end development is fascinating, not only because you can create magical experiences and it is very tangible to see the results of your work, but also because of the vast number of options available for building UIs.

Full article

Read More

Design for Safety, An Excerpt

Antiracist economist Kim Crayton says that “intention without strategy is chaos.” We’ve discussed how our biases, assumptions, and inattention toward marginalized and vulnerable groups lead to dangerous and unethical tech—but what, specifically, do we need to do to fix it? The intention to make our tech safer is not enough; we need a strategy.

Full article

Read More

What I Wish I Knew About CSS When Starting Out As A Frontender

CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break.

Full article

Read More

Using React Grid System for Responsive Web Apps

React Grid System is a handy tool that provides a responsive grid layout for React applications inspired by Bootstrap. The library allows for user configuration, including letting you set breakpoints, total columns, and even the maximum screen size.

Full article

Read More

Thinking in React isn’t enough

Hey there! If you missed my first post on advanced react patterns, I strongly suggest you check it out. A quick skim through the article will give you just enough context

Full article

Read More