How We Improved the Performance and Developer Experience of UberEats.com

At Uber Eats, we want ordering the food you crave at the touch of a button to be as easy as possible, whether on desktop or mobile. That’s why our engineering team spends a lot of time thinking about, building, and maintaining web applications for restaurants and customers.

Full article

Read More

Persisting React State in localStorage

This is a cross-post from my personal blog. View it there for at least 35% more whimsy! Let's say we're building a calendar app, like Google Calendar. The app lets you toggle between three different displays: month, week, and day.

Full article

Read More

Writing unit tests with React, Typescript, and react-testing-library

The company I work for started embracing Typescript as a go-to solution for writing React. During code reviews, I noticed a lot of people had problems while testing their components.

Full article

Read More

Should you care about the license?

Before I was not concerned about license of npm package. I could check the license of immediate dependency but never checking 3rd party (transitional) dependencies.

Full article

Read More

Setting Up Tailwind CSS In A React Project

In the dispensation of CSS libraries and frameworks, a ton of awesome libraries have been built to simplify the work of a developer in the quest to create intuitive interfaces. However, quite a lot of them (Bootstrap, Foundation) impose design decisions that are difficult to undo; they come with predefined components, therefore, eliminating the need for dynamic customization. This is the reason why Tailwind CSS is considered to be a good choice for building 21st-century web interfaces.

Full article

Read More

6 Practices in React You Might Find Effective – JSManifest

React, a library created by Facebook engineers makes it possible to create complex user interfaces. If you're like me, you never end up becoming bored when developing with react might which be due to its declarative nature, when in practice.

Full article

Read More

8 Out of 10 QATs Said They Prefer Cypress.

Software development was once a slow, laborious process. Analysts would spend weeks detailing comprehensive volumes of requirements, architecture and design documents. Developers waited in the wings while stakeholders reviewed and revised the docs.

Full article

Read More

React Router v6 in Two Minutes

At the time of writing, React Router v6 is shown on the horizon as an alpha version. Even if it is an early alpha version, there is so much great news to talk about. As you may already know, there is another great routing solution for React called Reach Router.

Full article

Read More

Performant front-end architecture

This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache?

Full article

Read More

Opinion: The unspoken truth about managing geeks

I can sum up every article, book and column written by notable management experts about managing IT in two sentences: "Geeks are smart and creative, but they are also egocentric, antisocial, managerially and business-challenged, victim-prone, bullheaded and credit-whoring.

Full article

Read More

Styled Components vs. CSS Stylesheets

Over the last few years, CSS-in-JS solutions have become prevalent across the front-end landscape with many offerings such as styled-components, and emotion that provides a way to colocate your components and style definitions.

Full article

Read More

Setting Up a New MacBook for JavaScript Development

I just got a new MacBook, and I need to prep it for JavaScript software development. This happens all the time when you get hired for a new job, or when you just need to upgrade your personal machine for side projects.

Full article

Read More

Forgotten Map Types

Several years ago, I stumbled on a map so shocking to my modern workaday sensibilities that I couldn’t quite believe my eyes. “Oh, zounds, look at this old thing,” I almost certainly thought.

Full article

Read More

Scrollable Grid with Just-in-Time Data Loading – Using React Window

Say you have thousands (or even just hundreds) of rows of data to render. To provide a good experience for the user, you might not want to fetch all the data at once. Instead, you might want to fetch the first hundred, show those, then fetch the next hundred.

Full article

Read More

Exploring the New GitHub CLI

GitHub recently announced their new CLI offering. cli.github.com It allows us to do GitHub work directly from the command line. This is more than just push or pull and is not tied directly to the Git command line tools. It is also not the same as GitHub’s hub CLI tool.

Full article

Read More

5 MORE Awesome features in Chrome DevTools.

I use this one all the time. Often times you’re working with a large code file and need to see what’s happening on a specific line of code. You could open the Sources panel, search for the location you’re interested in, and set a breakpoint. Try this instead.

Full article

Read More

Get Started with Tailwind CSS in 15 Minutes

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components. You'll never need to override CSS framework classes again.

Full article

Read More

So You Want to be a Functional Programmer (Part 1)

Taking that first step to understanding Functional Programming concepts is the most important and sometimes the most difficult step. But it doesn’t have to be. Not with the right perspective. When we first learned to drive, we struggled. It sure looked easy when we saw other people doing it.

Full article

Read More

4 Ways to Document a React Component Library

Component libraries are the de-facto modern way to reuse UI components. They help ensure UI consistency across teams and standardize development. When building a React component library it’s important to provide proper documentation, so that people can adopt and use the components.

Full article

Read More

You definitely should be using NestJS for your Node apps

I will start with a bold statement. Using NestJS is super cool. The creators of it (author Kamil Myśliwiec and other open-source contributors) got inspired by other great frameworks.

Full article

Read More

Angular 9: Lazy Loading Components

Angular 9 has some pretty awesome new features. The runtime, code-name Ivy, opens the doors to things like making lazy load Angular components more straightforward than ever. This article shows you how to lazy load with Angular 9 and provides the code and resources along the way.

Full article

Read More

Atomic Tech Lead Learning Interests for 2020 Professional Dev.

Last week, the tech leads in Atomic’s Grand Rapids office got together to share professional development interests and brainstorm opportunities for 2020.

Full article

Read More

Face recognition using JavaScript

Face detection is one of the most common applications of Artificial Intelligence. The use of Facial detection has increased in the last couple of years. In this tutorial, we will build the face recognition app that will work in the Browser.

Full article

Read More

Building a Continuous Integration & Deployment Pipeline Using Docker (CI/CD)

I built my first websites in the late '90s, and it was pretty simple to get them up and running. You had a single shared server running Apache and you could FTP in by typing ftp://ftp.example.com into the URL bar, entering your username and password, and moving your files to the host.

Full article

Read More

To Understand Concurrent React, Look Outside React

Third talk is Let’s Get Lazy: Explore the Real Power of Streams by Venkat Subramaniam using Java, but also Haskell and Scala. Processes voluntarily yield control periodically or when idle or logically blocked in order to enable multiple applications to be run concurrently.

Full article

Read More

Getting Acquainted With Svelte, the New Framework on the Block

Svelte is in a strong position considering its late entrance and small community. Developer satisfaction is high, while the big three have been seeing recent declines. The Svelte community is small, but growing, and the code is open source which is a huge plus for the overall web community.

Full article

Read More

13 Must-Have Browser Extensions for Web Developers

Modern browsers like Google Chrome not only provide a great experience for visiting websites, but they offer great tools for web developers to build awesome applications. One can choose from a variety of great browser extensions, so I’ve collected some of the best that will help software engineers be more productive, develop applications more quickly, or find bugs.

Full article

Read More

Innovation Can’t Keep the Web Fast

Every so often, the fruits of innovation bear fruit in the form of improvements to the foundational layers of the web. In 2015, HTTP/2 became a published

Full article

Read More

How I improve my JavaScript Coding Skill every day

Currently, there are countless types of editors out there and we don’t know which one to choose for productivity. With me, except for Android code required to use Android Studio or iOS using Xcode, I mostly only use Visual Studio Code.

Full article

Read More

Best React open-source projects

It is no secret that every great developer should be committed to open source projects. It is useful for personal professional development, as well as for the technology ecosystem.

Full article

Read More

ESLint configuration and best practices

This post describes how I setup ESLint in different scenarios. We'll start with a simple plain JavaScript project and then we'll deal with TypeScript, and also React. The aim is to do the things right and avoid installing random packages or copy/pasting snippets of configuration until things work.

Full article

Read More

Misunderstood generations: what Millennials and Gen Z actually think about work

Millennials and Gen Z have heard a lot about their work ethic and attitudes. Turns out they disagree with most of it. You might think younger generations are disloyal to employers. Turns out most see their job as core to their identity, and want to stay in their current job long term.

Full article

Read More

Improve Your Workflow With These 4 GitHub Actions

If you host your code on GitHub, you can take advantage of GitHub Actions. Instead of running all tests and linters manually, you can leverage GitHub Actions for those tasks. Without further ado, here are four time-saving GitHub Actions that will improve your workflow.

Full article

Read More

An Introduction to Using Web Workers in React

Web Workers are a way of running web scripts in background threads without blocking the main thread. JavaScript is a single-threaded environment, which means that multiple scripts cannot be run at the same time. A single thread means that every line of JS code is executed one at a time.

Full article

Read More

10 Useful React Components for 2020

For me, small and specific solutions in the form of single components, make more sense than the all-in-one solutions offered by component libraries. I like to pick and choose my own components, I don’t like long documentations and I’d like to avoid meaningless updates that often break things.

Full article

Read More

Introduction to functional JavaScript programming

This is an introduction to functional JavaScript programming. First, you will learn what functional programming is about and what pure functions are. Afterwards I explain two built-in array functions. Don’t miss the section about currying and point-free notation.

Full article

Read More

7 Habits that Seem Lazy (But Actually Let You Get More Done)

In 1850, French economist Claude-Frédéric Bastiat published his famous essay, “Ce qu’on voit et ce qu’on ne voit pas” or, “What is seen and what is unseen.” In it, he argues against the “bad economist” who looks only to the initial effect of actions taken, and not their further consequences.

Full article

Read More

React Libraries in 2020

React has been around for a while. Since then a well-rounded yet overwhelming ecosystem evolved around the component driven library. Developers coming from other programming languages or frameworks often have a hard time figuring out all the building blocks for building web applications with React.

Full article

Read More

10 Must-Know Chrome Developer Tools and Tricks

Just because a website is blazing fast on your monstrous gaming PC with its 10GB/second download speed doesn’t mean it’s fast for most users. Old phones relying on laggy connections are still trending.

Full article

Read More

From Software Engineer to Engineering Manager

A year ago, all engineers at ShopBack reported directly to the CTO. We had no Engineering Managers (EM), no team leads, and in other words — no structure. Recognising this as a rising issue for a start-up with a 250% year-on-year growth rate, we hired a VP Engineering to put a proper structure in place.

Full article

Read More

Incrementally Introducing TypeScript into Your React Project

Why would you want to migrate from JS to TS? There can be an infinite amount of reasons but that’s not the point. The (hypothetical) fact is: you need to start using TypeScript and you need an easy way to introduce it into your project.

Full article

Read More

Typing objects in TypeScript

In this blog post, we will explore how objects and properties are typed statically in TypeScript. Records: A fixed amount of properties that are known at development time. Each property can have a different type.

Full article

Read More

How To Recover From A Bad Day In 5 Minutes

My second year in college began with boundless excitement. I was smitten with a super-cool woman in my psychology class. We hadn’t started to date yet, but I knew that was the next step.

Full article

Read More

Build a Weight Tracker App with Node.js and PostgreSQL

Did you make any resolutions this year? One resolution I seem to make every year is to lose weight and exercise. Sometimes I even stick to it. A good way I have found to keep on track with any resolution is to record progress.

Full article

Read More

Testing React with Cypress.io

What is Cypress? Cypress is a front-end testing tool. Cypress allows you to test anything thaty runs in a browser. With Cypress, you can write unit tests, integration tests and end-to-end tests. Cypress architecture allows you to have complete control over your application.

Full article

Read More

How to Send and Receive SMS Messages With Node.js and Azure Functions

Webhooks are ever-more popular in the API world, and Nexmo uses them for quite a few of our APIs. So I end up writing quite a few of them. Since I’m a Node.js fan, I used to do most of them with Express.

Full article

Read More

How I share React components between projects

Such as creating the same types of components — buttons, forms, navbars etc — over and over again. I recently came across a platform called Bit, which provides developers with an easy and effective way for sharing components between projects.

Full article

Read More

Render as you Fetch Pattern in React with SWR

Render as you Fetch is a pattern that lets you start fetching the data you will need at the same time you start rendering the component using that data.

Full article

Read More

PurgeCSS 2.0

When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc… But you will only use a small set of the framework, and a lot of unused CSS styles will be included. One optimization would be to remove the CSS that is not used.

Full article

Read More

How to Add Custom Functions to a Jest Test Suite

Jest is a fantastic testing framework. Of the many I’ve used across different platforms and languages, it’s the best by a landslide. Jest is fast to learn, easy to use, full of features out of the box, and simple to customize.

Full article

Read More