A growing list of accessibility tools and resources

The Accessibility Resources is a growing list of more than 200+ hand-curated accessibility plugins, tools, articles, case studies, design patterns, assistive technologies, design resources and accessibility standards.

Full article

Read More

Tailwind CSS Resources you wish you had.

This week I decided to take a look at Tailwind CSS and create a simple e-commerce website. The first thing I noticed is how well the documentation was written. Even if Tailwind is your first CSS framework, you will easily be able to navigate through different sections😉.

Full article

Read More

How to Access Ports on the Host from a Docker Container

If you’re networking to the outside world, Docker behaves as if the request was coming from the host machine. But if you want to access processes that are running on the host, your firewall may need some extra configuration.

Full article

Read More

Effective Product Management

As a VP at VMware of product management, I spend a lot of time talking to teams about what the product management discipline should look like. Every step of the product management journey has been a delight for me — from individual contributor to managing a team of well over one hundred product managers.

Full article

Read More

Create a Modular React Component Library

Design systems/UI libraries used to be a luxury enjoyed exclusively by large enterprises, but in recent years, due to the advent of new technologies, we've seen that changed quite drastically.

Full article

Read More

How We Facilitate Remote Team Health Checks at Atomic Object

Team Health Checks are of our most valuable tools for checking in with our teams. They keep our leadership informed about any acute or systemic issues facing our project teams.

Full article

Read More

React is becoming a black box

It pains me to say it, but React on the verge of becoming a black box. On any given day, just search “React hooks” or “React Concurrent Mode” on Twitter and you’ll inevitably stumble upon a conversation that goes something like this:

Full article

Read More

10 Tips to Improve Productivity using Chrome Dev Tools

If you are a web developer, I’m pretty sure you are already familiar with Chrome Dev Tools. It has a massive list of features to support web development. But most of us use the bare minimum, just to get the work done.

Full article

Read More

36 Hidden Google Search Games and Easter Eggs

Google has hidden lots of quirky Easter eggs and fun games in its search engine. Below are some of the best, so just head to Google and type one of the following searches. Did you mean nag a ram? Not exactly. An anagram is a word (or phrase) formed by rearranging the letters of a source word.

Full article

Read More

Vital Web Performance

I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do we even define what “slow” is?

Full article

Read More

Most Common Security Vulnerabilities Using JavaScript

JavaScript is undoubtedly the most popular programming language for web development. A survey by Stack Overflow shows that over 67% of professional developers use JavaScript. Additionally, it is used by more than 95% of websites on the web. 

Full article

Read More

VSCode Tips and Tricks for Power Users

Becoming a power user is another way to stay ahead. Developers often talk about how they stay at the top of their game and how they constantly learn new things and continue to hone their skills.

Full article

Read More

An Introduction To Running Lighthouse Programmatically

Being able to run Google’s Lighthouse analysis suite programmatically provides a lot of advantages, especially for larger or more complex web applications. Using Lighthouse programmatically allows engineers to set up quality monitoring for sites that need more customization than straightforward applications of Lighthouse (such as Lighthouse CI) allow.

Full article

Read More

Rewriting Facebook's "Recoil" React library from scratch in 100 lines

Recoil is a slick new React library written by some people at Facebook that work on a tool called “Comparison View." It came about because of ergonomics and performance issues with context and useState.

Full article

Read More

The Ultimate Guide to React Localization with i18next

There is a host of internationalization (i18n) libraries when it comes to React localization. One of the most popular is i18next, and for good reason: the library is robust, feature-complete, and often maintained.

Full article

Read More

Migrating from styled-components to Stitches

This post is about highlighting the main differences between styled-components and Stitches. Some of these differences are related to the authoring experience. Others are about what happens behind the scenes. Disclaimer: This post isn't about comparing which one is best.

Full article

Read More

How to Use Rate Limiting on Nginx

Rate limiting controls how many requests users can make to your site. This is usually put in place to stop abusive bots, limit login attempts, and control API usage, which can prevent your server from slowing down under load.

Full article

Read More

React + TypeScript ❤️: The good parts ⚡

I've started using TypeScript with React, and after a while, learning, and implementing them together. This is how I feel: If we type labels. inside List we get the code completion with methods and attributes from Array.prototype, in this case Array.prototype.

Full article

Read More

I Use These 4 Questions to Find Outstanding JavaScript Developers

JavaScript is now a very popular programming language, based on which a large number of libraries and frameworks have been derived. But no matter how the upper ecosystem evolves, it can’t do without vanilla JavaScript.

Full article

Read More

GitHub Actions & Angular 10/9: Install Node.js, Angular CLI and Deploy your App to GitHub Pages

In this example, we'll see how to use Github Actions to install Node.js and Angular CLI 10 and then build and deploy our Angular 10 application or any previous version to GitHub pages.

Full article

Read More

Tailwind CSS Resources you wish you had.

This week I decided to take a look at Tailwind CSS and create a simple e-commerce website. The first thing I noticed is how well the documentation was written. Even if Tailwind is your first CSS framework, you will easily be able to navigate through different sections😉.

Full article

Read More

Performance tests in your CI Pipeline with Lighthouse CI

Lighthouse CI is Google’s 2nd take on running performance analysis on the development flow for a web app. Previous and now deprecated was Lighthouse Bot. In this article we’ll go along the setup of Lighthouse CI in an existing pipeline of continuous integration that we use in our web apps at Properati.

Full article

Read More

Automate JavaScript project versioning with commitizen and standard-version

It is such a hassle to manually update versions, changelogs, and create git tags. Ever wonder if there is a better way of doing this? Fear not, standard-version will do everything that is said in a single command line!! To implement the auto versioning, there are several configurations that need to be done though.

Full article

Read More

How 7 Lines of Code Turned Into a $36 Billion Empire

Hit our engagement metrics this weekend! The Tweet was accompanied by an engagement ring — which explained the kind of metrics Patrick was talking about.

Full article

Read More

What’s the Benefit of Statically Typed Programming Languages?

Static typing is a programming language feature that requires you to strictly define the structure and data types of the code you write. While it’s often more work for the developer, it leads to much cleaner and understandable codebases in the long run.

Full article

Read More

6 Ways to Make the Most of Your Remote Sprint Retrospective

Like many companies, Atomic is currently operating remotely due to the Covid-19 pandemic. While software design and development are certainly possible in a fully-remote context, there are a few meetings and tasks that can be more difficult when you can’t be in the same room as your teammates.

Full article

Read More

How to Run a Linux Program at Startup with systemd

Need to launch a Linux program at boot? The systemd software provides a way to do it on any Linux distro with systemd—which is most of them these days, including Ubuntu. We’ll walk you through the process of creating an integrated service—and it even talks to the journal.

Full article

Read More

AVIF has landed

Back in ancient July I released a video that dug into how lossy and lossless image compression works and how to apply that knowledge to compress a set of different images for the web. Well, that's already out of date because AVIF has arrived. Brilliant.

Full article

Read More

4 Practical Ways to Build Micro Frontends

For most projects, the frontend world remains largely monolithic. Just as with the backend before micro-services, this means that it’s hard to scale development and that teams keep stepping on each other’s toes instead of being free to independently build, deliver, and choose their own tech solutions. Instead of working separately from each other, developers are all bound to the same codebase of a growing SPA or SSR app and so are all forced to crowd in the same build pipeline. This makes development inefficient and hard to scale.

Full article

Read More

A Gentle Introduction to Code Splitting with React

A lot of folks (myself included) are used to write SPA React applications that need both a user-facing part and an admin interface for managing the data. In general, there are a variety of options that are commonly used to implement this type of requirements, which typically fall into two categories...

Full article

Read More

Beginners guide to Kafka

Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications.

Full article

Read More

Building React Apps With Storybook

Storybook is a UI explorer that eases the task of testing components during development. In this article, you will learn what storybook is about and how to use it to build and test React components by building a simple application. We’ll start with a basic example that shows how to work with storybook, then we’ll go ahead to create a storybook for a Table component which will hold students’ data.

Full article

Read More

⚛️ 🚀 React Component Patterns

This documentation will help identify the trade-offs of the different React patterns and when each pattern would be most appropriate. The following patterns will allow for more useful and reusable code by adhering to design principles like separation of concern, DRY, and code reuse.

Full article

Read More

Use VSCode Like a Senior Developer

VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. Here I will introduce some advanced tips for using VSCode, which I hope will help you. We might want to type the same thing in different places at the same time.

Full article

Read More

10 lesser-known Web APIs you may want to use

API is the acronym for Application Programming Interface which defines interactions between multiple software architecture layers. Programmers carry out complex tasks easily using APIs in software development.

Full article

Read More

Work-from-Home Fatigue? Change Things Up

Work can be stressful and tiresome, especially these days — it can be hard to find motivation in the midst of current events. And when I’m working, I can’t always reach the same level of productivity that I have in the past. Why is that?

Full article

Read More

Towards an understanding of technical debt

What I was trying to say was, “I’m deeply uncomfortable with how our industry talks about this thing, I think it’s probably harmful, but I don’t know quite how to express what I mean.

Full article

Read More

Designing a JavaScript Plugin System

It simplifies the API. It makes testing easier (for both BetaCalc and the plugins themselves). It reduces the dependencies of our system, making it more loosely coupled.

Full article

Read More

Redux vs React's Context API

For the last few years, Redux has been THE state management solution for bigger React apps. It’s far from being dead and yet, a strong enemy is arising: React’s Context API!

Full article

Read More

A Basic Introduction to Webpack

In this article, I will introduce the core concepts with Webpack in a practical easy to follow manner. I will explain setting up webpack configuration file from scratch and what each of the configuration such as entry point, css, loaders, plugins mean.

Full article

Read More

Building A Component Library With React And Emotion

A component library helps to keep a design consistent across multiple projects. It ensures consistency because any changes made will propagate across the projects that make use of it. In this tutorial, we’ll learn how to build a component library, using Emotion in React to resolve inconsistencies.

Full article

Read More

The Missing Introduction to React

React is the world’s most popular JavaScript framework, but it’s not cool because it’s popular. It’s popular because it’s cool. Most React introductions jump right into showing you examples of how to use React, and skip the “why”. That’s cool.

Full article

Read More

7 Pitfalls to Avoid With OKR’s

Can you name the top five priorities for your organization or department? OKRs are an important aspect to achieving business goals, but what are their pitfalls? Can you name the top 5 priorities for your organization (or department)? How likely is that your colleagues can also come up with the same

Full article

Read More

How to establish a Git Team Workflow

When I have been working with my clients over the last years, I have seen how crucial it can be to establish a common sense git workflow for a team to become productive.

Full article

Read More

Using environment variables in React

When you don’t have a server-side programming background, environment variables can seem like a bit of magic. That lack of knowledge smacks you in the face like a bag of dicks, when you’re done creating todo applications on your localhost, and try to create a production build for the first time.

Full article

Read More

Lazy Load Images in Angular with Two Lines of Code

Image lazy loading defers the loading of an image that isn’t currently visible in the viewport. Such an image will be loaded only when the user scrolls and the image becomes visible. Using this technique, we can gain better performance and load time.

Full article

Read More