Building an audio player in React to play sound or music

If you run a podcast or any other sound- or music-related web application, you may want to add an audio player to your project. This guide will teach you how to build an audio player from scratch with React.

Full article

Read More

Do You Need a BFF? The Backend for Frontend Pattern

In a simpler world, a web application will only ever have one client interacting with one server. For many years, this was the case. Data surfaced from the server through an API could be closely tied to the client’s specific needs. There was little need for any additional complexity.

Full article

Read More

Migrating from ts-node to Bun

I've wanted to take a look at some of the alternative JavaScript runtimes for a while. The thing that has held me back is npm compatibility. I want to be able to run my code in a runtime that isn't Node.js and still be able to use npm packages.

Full article

Read More

Why you need to know your site's performance poverty line (and how to find it)

If you've ever asked yourself any of these questions, then you could find the answers in identifying and understanding the performance poverty line for your site. The performance plateau is the point at which changes to your website’s rendering metrics (such as Start Render and Largest Contentful Paint) cease to matter because you’ve bottomed out in terms of business and user engagement metrics.

Full article

Read More

Writing Your Own Reactive Signal Library

Lately, the frontend space has been exploding with a newfound admiration for fine-grained reactivity, a style of building reactive user interfaces by using three primary primitives: signals, effects, and memos.

Full article

Read More

A Framework for Prioritizing Tech Debt

Having spent over a decade building tech startups, I've come across my fair share of tech debt: The gnarly Ember.js code no one wants to touch, the bespoke cloud infrastructure maintained entirely by hand, or the solitary Elixir service left behind by a long-gone former teammate.

Full article

Read More

How AI Technology Will Transform Design

The rise of AI-generated art makes design practitioners wonder if AI will replace designers. In this article, Nick and Gleb shed light on the current state of design, answer common questions designers have about AI tools, and share practical tips on how designers can make the most of using AI tools.

Full article

Read More

How to Build Momentum During Project Onboarding

At Atomic, many project teams function under a hybrid model of work-from-home and in-office attendance. Because of this, communication is key to not only project onboarding but also to maintaining a healthy work environment. With project onboarding, I like to use the analogy of a relay race.

Full article

Read More

Solving Concurrency in Event-Driven Microservices

We tend to consider too much the good luck of the early bird and not enough the bad luck of the early worm, Franklin Roosevelt once said. I’ve never been the kind of guy that plays in the lottery.

Full article

Read More

React’s Upcoming Compiler Only Solves Part Of The Problem

I spoke about how I think signals are the future of web frameworks. Since then, I am excited to welcome Angular to the Signals club. What took me by surprise is this tweet where Andrew Clark wrote that he thinks that React Forget is a better approach than Signals.

Full article

Read More

How to Start Investing in an Employer Retirement Plan if You Aren’t a Personal Finance Nerd

I am unqualified to offer you financial advice about retirement. I’m not a professional (or even an amateur) money whiz. That’s why I have a feeling my advice might be useful here.

Full article

Read More

Scrape Contributor Emails From Any Git Repository

In a I wrote about how it’s possible to scrape emails from GitHub repositories using their API. I even wrote up a Ruby script to do this. I now realize that is a very complicated way to go about it after discovering the git shortlog command.

Full article

Read More

Running your engineering onboarding program.

Most companies say that it takes three to six months for newly hired engineers to fully ramp up. Engineering leaders know it’s impolitic to admit that it takes their team longer than three to six months to onboard new engineers, so that’s what they say out loud, but they generally believe it takes longer for a new engineer to become fully productive.

Full article

Read More

3 Essential React Testing Library Tips for Flawless Tests

Writing tests is an important part of any software development project. React Testing Library is a popular testing tool for React applications. However, even with its automatic logging, it can be difficult to identify why a test has failed.

Full article

Read More

Why Turborepo is migrating from Go to Rust

Turborepo is a high-performance build system for JavaScript and TypeScript codebases. We're reimagining build systems, taking inspiration from tools like Buck and Bazel, to make them accessible for everyone. At the heart of Turborepo is a very simple idea: never do the same work twice.

Full article

Read More

Modularizing React Applications with Established UI Patterns

Established UI patterns are often underutilized in the frontend development world, despite their proven effectiveness in solving complex problems in UI design. This article explores the application of established UI building patterns to the React world, with a refactoring journey code example to showcase the benefits.

Full article

Read More

All JavaScript and TypeScript Features From the Last 3 Years

This article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / ECMAScript and TypeScript. Not all of the following features will be relevant to you or even practical, but they should instead serve to show what’s possible and to deepen your understanding of these languages. Established UI patterns are often underutilized in the frontend development world, despite their proven effectiveness in solving complex problems in UI design. This article explores the application of established UI building patterns to the React world, with a refactoring journey code example to showcase the benefits.

Full article

Read More

An Epic Saga in Distributed Transactions

This is the second article highlighting key ideas from the book “Software Architecture: The Hards Parts”. If you like it, consider reading Making Sure Microservices Doesn’t Turn into a Cyberpunk Dystopia which covers how to right-size your services.

Full article

Read More

Sentry’s Frontend Tests: Migrating from Enzyme to React Testing Library

At Sentry, we practice continuous delivery, which means that code can be released as soon as it’s merged into the main branch. This allows us to iterate quickly on our product, making new features, bug fixes, configuration changes, and experiments available in production as frequently as possible. We merge over 700 pull requests a month.

Full article

Read More

WTF Is Code Extraction

We are full-stack developers! That means we write both client and server code. But where should we place the server and client code? Conventional wisdom says that we should put them in different files. Except, it is not so simple; we also have code that runs both on the server and client.

Full article

Read More

Stop saying “technical debt”

We were supposed to release this feature three weeks ago. One developer got caught in a framework update. Another got stuck reorganizing the feature flags. A third needed to spelunk a long-abandoned repository to initiate the database changes. The team is underwater.

Full article

Read More

What is the Secret Behind Increasing Salesforce’s Developer Velocity?

From retail to healthcare to IT and beyond, countless industries rely on software development to enhance business performance. However, to optimize software innovation and performance, companies must create enhanced environments that remove productivity blockers and deliver great experiences for developers.

Full article

Read More

Is software getting worse?

I recently stumbled upon “Software disenchantment,” a post by Nikita Propokov. It called to mind Maciej Cegłowski’s post “The Website Obesity Crisis” and several others in the same vein.

Full article

Read More

How to contribute to a project you have no idea about

Recently I got really excited about Bun. It’s a new JavaScript / TypeScript runtime similar to Deno / Node. It has one advantage over other runtimes that Is very interesting for me. It’s the super quick (at least in JS world) startup time.

Full article

Read More

Full-Stack TypeScript with tRPC and React

tRPC allows developers to create fully type safe APIs with TypeScript in full-stack applications. While the server application produces a type safe router with type safe functions (e.g.

Full article

Read More

Focus Time and Other Tips for Avoiding Meeting Fatigue

Building software requires a lot of meetings. We meet to collaborate with our teams, plan sprints, run retros, and workshop or review work with clients. Then there are ad-hoc meetings when something comes up and we need to meet urgently.

Full article

Read More

Monitoring debt builds up faster than software teams can pay it off

If we are to believe the stories we hear, software teams across the industry have modern monitoring and observability practices. Teams get alerted about potential issues before they hit customers—and are able to pull up crime-show-worthy dashboards to find and fix their issues.

Full article

Read More

useSignal() is the Future of Web Frameworks

The key difference between Signals and State is that Signals return a getter and a setter, whereas non-reactive systems return a value (and a setter). Note: some reactive systems return a getter/setter together, and some as two separate references, but the idea is the same.

Full article

Read More

API Evolution Is a Challenge. Could Contract Testing Be the Solution?

In a microservices architecture, services are typically integrated through remote procedure calls or asynchronous messages. The traditional way of testing microservice integration is through end-to-end integration tests.

Full article

Read More

Module Extraction: The Silent Web Revolution

Module Extraction is the new silent revolution of the web happening right now. Bundling tooling in JS, like Webpack, Rollup and Vite do one thing very well: merge modules and remove what's not used (tree-shaking), but they have no clue how to split code automatically.

Full article

Read More

Platform Engineering Teams Done Right…

There’s been a lot of discussion about platforms recently, I talked about why I think it’s a current hot meme on the WTF Podcast with Charles Humble recently, and Sam Newman just wrote a blog post “Don’t call it a platform”.

Full article

Read More

The Three Pillars of Quality Engineering Microservices

Building APIs at the high standard is challenging. While many people would argue they are doing APIs, they are simply exposing basic read and write operations in a CRUD mode.

Full article

Read More

React Is Holding Me Hostage

It feels like this article would have been sacrilege only a few years ago. Under protection of this new found trendiness in React displeasure, I’d like to finally say my piece. I don’t much care for React. And frankly I’d say the same is true for most.

Full article

Read More

The 25 Percent Rule for Tackling Technical Debt

Let’s talk about technical debt. Let’s talk about practical usable approaches for actually paying it down on a daily, weekly, monthly, and yearly basis. Let’s talk about what debt needs to be fixed now versus what can wait for better planning.

Full article

Read More

How to automate your releases, versioning & release notes like a boss

Whether you have an open source project or work in a private company on a project that other people use in their projects, you probably need to communicate the changes you make to your project, so that others can understand what changed and know if there’re any breaking changes.

Full article

Read More

React vs Signals: 10 Years Later

How does the old Winston Churchill quote go? Those who fail to learn from history are doomed to repeat it. Although a more ironic addendum might add. Those who study history are doomed to stand by while everyone else repeats it. In the past few weeks, we've seen the culmination of a build of excitement around the revival of fine-grained reactivity, being referred to as Signals, across the front-end world.

Full article

Read More

Experimental Performance Insights Panel in Chrome DevTools

Have you tried Chrome DevTool’s Experimental Performance Insights panel? If not, let's explore some of its many slick features together. While the existing Performance panel you may be familiar with has many (many) capabilities, it’s also quite overwhelming at the same time.

Full article

Read More

An Engineer’s Bill of Rights (and Responsibilities)

Power has a way of flowing towards people managers over time, no matter how many times you repeat “management is not a promotion, it’s a career change.” It’s natural, like water flowing downhill.

Full article

Read More

Building Future-Proof High-Performance Websites With Astro Islands And Headless CMS

Let’s see how to achieve phenomenal web performance and great developer experience with Astro and a headless CMS, resulting in the best possible experience for users, developers and content creators alike. Nowadays, web performance is one of the crucial factors for the success of any online project. Most of us have probably experienced the situation that you left a website due to its unbearable slowness.

Full article

Read More

The Evolution of Signals in JavaScript

There has been some buzz recently in the frontend world around the term "Signals". In seemingly short order they seem to be everywhere showing up in everything from Preact to Angular. But they are not a new thing.

Full article

Read More

Pinterest is now on HTTP/3

Now Pinterest operates on HTTP/3. We have enabled HTTP/3 for major Pinterest production domains on our multi-CDN edge network, and we’ve upgraded client apps’ network stack to support the new protocol. This allows us to catch up with industry trends.

Full article

Read More

Mature as a Junior Developer: Habit Building

Starting your career can be one hell of an experience. You might face fatigue and imposter syndrome, and you might wonder if you’ll ever actually be good at your job.

Full article

Read More

The Unit in Unit Testing

Key Takeaways Unit tests should increase confidence that our code works correctly, allow us to document how our code should function, and aid in designing loosely coupled, highly cohesive software.

Full article

Read More

What Is ChatGPT Doing … and Why Does It Work?

That ChatGPT can automatically generate something that reads even superficially like human-written text is remarkable, and unexpected. But how does it do it? And why does it work? My purpose here is to give a rough outline of what’s going on inside ChatGPT—and then to explore why it is that it can do so well in producing what we might consider to be meaningful text.

Full article

Read More

Sentry’s Frontend Tests: Migrating from Enzyme to React Testing Library

At Sentry, we practice continuous delivery, which means that code can be released as soon as it’s merged into the main branch. This allows us to iterate quickly on our product, making new features, bug fixes, configuration changes, and experiments available in production as frequently as possible.

Full article

Read More

Let's build a Chrome extension that steals everything

Manifest v3 may have taken some of the juice out of browser extensions, but I think there is still plenty left in the tank. To prove it, let’s build a Chrome extension that steals as much data as possible.

Full article

Read More

A type-checking performance analysis of zod/superstruct/yup/typebox

In 2023, Typescript is rarely questioned as an important tool for modern JavaScript developers, but one of its biggest limitations is the lack of added runtime type safety, particularly when dealing with IO at the boundaries of your application.

Full article

Read More

What to Expect from Vue in 2023 and How it Differs from React

In a documentary two years ago about the JavaScript framework Vue.js, it was described as a kind of indie alternative in the JavaScript ecosystem, compared to the two leading frameworks — Facebook’s React and Google’s Angular.

Full article

Read More

How to "Build Once and Deploy Many" for React App in CI/CD

We look at building the React application binary-only once, then migrate the same binary file from Development to Non-Production and then to Production by loading configurations at application runtime.

Full article

Read More

Getting started with SolidJS

Solid.js is an open-source JavaScript library for building web applications focusing on performance and simplicity. It is designed to make it easy for developers to create fast, scalable, and maintainable web applications. Solid.

Full article

Read More