The latest release brings big changes

Image for post
Image for post
Photo by Bobby Burch on Unsplash

Tailwind is by far, the most popular utility CSS framework. It’s changed the way we build web applications, and how we work with CSS. It’s themeable, extendable, and easy to work with.

I love Tailwind because it lets me concentrate on shipping. I can build full features, full pages, without ever leaving my HTML. Instead of having to write display: flex; everywhere, I can just use a class name. I enjoy the utility first approach championed by Tailwind.

Tailwind 2.0 is the first major release since Tailwind 1.0 …


Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

They really grind my gears

Don’t get me wrong. I love my job. My coworkers are great, the salary is nice, and the freedom to work remotely is amazing. But that doesn’t mean there aren’t things that I have about being a programmer.

I have worked full time as a Frontend Developer for about five years. I’ve worked for agencies, for product companies, in North America and in Europe. And at every one of these companies, I’ve found these problems.

These are the things I hate most about my job.

1. Useless meetings, endless process

Scrum is the most popular software development methodology. If you have worked as a software developer over the last decade, it’s been almost impossible to avoid it. …


Internationalization, image optimization and so much more

Image for post
Image for post
Photo by Priscilla Du Preez on Unsplash

NextJS is a popular framework for making high performance, server-rendered React applications. Originally released in 2016 by Vercel, NextJS has come a long way. It’s now one of the most popular frameworks for not only building server-rendered applications but also for building static sites.

Let’s go over what’s new in this release, and why we are so excited for the future of NextJS.

Highlights

• Automatic Image Optimization

NextJS 10 introduces a new component: next/image. The NextJS team worked with the Google Chrome team to create this component that offers performance as a default. With this component, our images are automatically lazy-loaded and responsive.

One of our biggest complaints with NextJS was their lack of an alternative for the great gatsby-image component. Not anymore! And since next/image optimizes our images on demand, our builds remain fast, no matter how many images we add to our application. …


Using useEffect, useRef and TypeScript

Image for post
Image for post
Photo by Jeremy Perkins on Unsplash

The Fetch API supports cancelling requests using AbortController interface. We can therefore cancel in-flight requests in our applications without the need for including external fetching libraries like axios.

Example of the `AbortController` API

Above we can see how we can use an AbortController to cancel an in-flight fetch request.

But this basic example is not indicative of how you would use this API in your applications. Let’s instead look at a real world example.

Cancelling Fetch Requests in React Applications

We will create a React application that allows users to type in a search term. Then our application will call an API, and return a list of matching users. …


Use it today with SWR and TypeScript

Image for post
Image for post
Photo by Brooke Cagle on Unsplash

Suspense For Data Fetching

Suspense for Data Fetching is an experimental feature in ReactJS. It allows us to “wait” for some code to load, and to declare a loading state while we are waiting. useSWR is a library that takes all the complexity out of data fetching and data caching in React applications. useSWR also supports React Suspense for data fetching.

If you are unfamiliar with useSWR, be sure to check out our previous article on the subject.

Getting started

Let’s start by creating a brand new Create React App. Run the following command.

npx create-react-app --template typescript suspense-swr

After it finishes installing our dependencies and bootstrapping our application, cd into the directory and run yarn add swr. …


What to expect from the release

Image for post
Image for post
Photo by Md Mahdi on Unsplash

Create-React-App allows us to scaffold new React applications. It’s an incredibly useful tool for building React applications. It keeps all of our dev dependencies like webpack, ESLint and babel inside of react-scripts. That means, that in order to update these dependencies, we need to wait for an update to Create-React-App. Lucky for us, that day is here.

Yesterday Create-React-App version 4 was released.

Let’s go over the new features you can expect from updating, and the migration steps you may have to go through to successfully upgrade.

Highlights

• Fast Refresh

If you have worked with NextJS, then you know just how awesome Fast Refresh is. Fast Refresh is a replacement for React Hot Loader. Its big advantages include amazing performance and state preservation on component reload. …


Which to use when, and why

Image for post
Image for post
Photo by Alesia Kazantceva on Unsplash

Frontend developers often use these terms to describe their web applications. However, to developers less familiar with web applications, these terms are often confused. If you are confused about the differences between Client-Side Rendering, Server-Side Rendering, and Static-Site Generation, then this article is for you!

Client-Side Rendering

Client-side rendering was made popular with the advent of the Single Page Application (or SPA). JavaScript Frameworks like AngularJS, ReactJS, BackBone.JS and many more use this approach. With Client-Side-Rendered Applications, the server sends static HTML and JavaScript files to the client. …


It’s official, Testing Library (formally known as react-testing-library) has surpassed Enzyme in weekly downloads. While enzyme encourages you to test your component’s implementation, react testing library encourages you to test as a user.

If you are still using enzyme, now is a great time to learn how to use testing library.

To help you get started, here are three of our favourite posts about testing.

1. Testing a Full-Stack React Application

A deep dive into testing a CRUD React application using Jest and Testing Library. In this post, we show you how to easily test asynchronous user interactions.

2. Setting Up Testing Library with NextJS

The missing documentation for how to set up testing library with NextJS.

3. Testing Asynchronous Forms

An exploration of testing asynchronous forms using Formik and testing library. Good reading for the developer who is comfortable testing presentational components, but needs a bit more exposure to testing user interactions and asynchronous functions.


Using next-compose-plugins

Image for post
Image for post
Photo by Lisa H on Unsplash

One of the great features of NextJS is how customizable it is. Vercel offers a number of official plugins that you can use to add further functionality to your applications. However, new users are often confused about how to use more than one plugin with their application.

Let’s assume that we are creating a new NextJS application, and we would like to use the following plugins: next-images, and next-react-svg. Combining multiple NextJS plugins with the official API is hard to understand, and hard to reason about.

Instead, let’s use next-compose-plugins, a plugin that gives us an alternative API for enabling and configuring plugins. …


Using npkill to clear up disk space

Image for post
Image for post
Photo by Thomas Park on Unsplash

As Frontend Developers, we use npm to manage our dev and runtime dependencies. When we run npm install or yarn install, we download hundreds of megabytes of dependencies and store them in our project’s node_modules directory. For a small React application, when you factor in all of your dev dependencies and run time dependencies, this can add quickly.

My personal laptop is a MacBook with a 128 gig hard drive. Between side projects, small applications I make to test out libraries, and photos, this doesn’t leave much extra room on my computer. Every few weeks, I notice my computer running slower and slower. This is due to so much of my hard drive space being taken up by node_modules. …

About

Malcolm Laing

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store