Because animations and gradients in CSS are delightful.

Image for post
Image for post
Photo by Ruvim Noga on Unsplash

I love when websites go the extra mile…

As a web developer myself, I always appreciate when websites go above and beyond being purely functional, and add a touch of fun andmagic. A parallax background, a cool animation or page transition, or some other cute Easter egg I wasn’t expecting to find — you know it when you see it. It’s the kind of thing that makes you smile and think: “Cool!”.

And a lot of times, it really isn’t that hard to make these things happen — or, at least it may not be — because chances are, you’re not the first person who’s wanted to do it. All it takes is a little searching, a little testing and tweaking to make it fit your use case, and a little extra effort, to make someone else’s day when they encounter it. …


Why leave the IDE to test new endpoints? Now you don’t have to.

Image for post
Image for post
Photo by Carlos Muza on Unsplash

Web Developers fetch a lot of data

If you’ve been doing web development for any length of time, you’re probably aware that a lot of our job revolves around data: reading data, writing data, manipulating data and displaying it in the browser in a way that makes sense.

And the vast majority of that data is supplied from REST API endpoints: representational state transfer application programming interfaces (what a mouth full 🥵, hence REST API). In laymen’s terms: the data we want exists in some other service or database, and our application queries that service to retrieve the data and use it as we see fit.

Now in the past, in order to test REST APIs before wiring up the UI to accept the data, typically you’d have to either query the API through a terminal’s command line, or use a GUI like Insomnia or Postman (which I actually compared in a previous blog post). …


They’ve come a long way since the days of Promise.resolve() and Promise.reject().

Image for post
Image for post
Photo by Crew on Unsplash

Promises, Promises.

JavaScript’s been slowly but steadily improving as a programming language ever since its inception back in 1995, and lately it seems as though those improvements are coming at a quicker and quicker pace. One of the biggest advancements (in my opinion, at least) was with the introduction of promises for asynchronous operations back in 2012.

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value, and it delivered JavaScript developers everywhere from the conundrum known as “callback hell.”

But that’s in the past, what I want to talk about now is the future: the future of promises. Not content to rest on the laurels of Promise.resolve() and Promise.reject(), the authors of JavaScript (the ECMAScript Committee) have added several new methods in both ES6 and ES2020 to make promises more useful and versatile than ever before. …


Don’t let unreliable test data keep your new features from making it to production

Image for post
Image for post
Photo by UX Indonesia on Unsplash

Introduction

If your web development team is anything like mine, you’ll understand the value and importance of tests to support and continue to verify your application’s functionality (even if you’re not a huge fan of writing tests, which sometimes, I’m not).

Unit tests, integration tests, and end-to-end tests in particular are a way to safeguard against bugs popping up in seemingly unrelated pieces of code while you’re building out cool, new features.

End-to-end testing, in case you’re less familiar with it, is a technique for testing the entire software product from beginning to end to ensure the application flow behaves as expected. Basically, an automated test is written to control a browser as a user would; it types text into inputs, clicks buttons, looks for page elements, etc. …


Queries are no longer relegated to just page level components

Image for post
Image for post
Photo by Lukas Blazek on Unsplash

Introduction

I’m in the process of building myself a new personal website: a site where people can learn more about me, find all the articles I’ve written over time about web development and get in touch if they want to say hi. 👋

Since I’m already quite familiar with the React framework, and this will be a static site lacking the need for a server, protected routes or a separate database, I decided to go with Gatsby to build it.

Gatsby’s been sweeping the web development world since mid 2017, offering a powerful, open source alternative to build “blazing fast” static sites leveraging the React framework and GraphQL for data fetching. It’s opinionated in how you configure a web app, but because of this, building and deploying the site live is remarkably easy. And Gatsby boasts an ever-expanding ecosystem of plugins making so many things possible with a just a few extra lines of configuration code. …


Loading screens are needed everywhere — don’t reinvent the wheel every time.

Image for post
Image for post
Screenshot of the universal loader animation.

Introduction

If you’ve worked in web development for any length of time and ever needed to access a database or some other service containing data before showing a page to a user, you’ve encountered the need for a loading screen.

Even with the ever-improving speed and availability we’re afforded by the Internet today, it can still take more than mere milliseconds to fetch data off a server (especially when it’s a large amount of data you need, or that data needs to be transformed by the browser before displaying it onscreen) or process a request from the browser (like placing an order online). …


useInterval is a custom Hook that’s certain to make intervals simpler in your app.

Image for post
Image for post
Photo by Veri Ivanova on Unsplash

Introduction

The web application my development team is building at work provides a lot of data to our users, including downloadable Excel spreadsheets that can sometimes contain up to 250,000 rows’ worth of information. And our users have the ability to generate these reports, on demand, from our tool.

As you may imagine, it can sometimes take several minutes or more to compile this much data, and waiting around looking at a loading animation while our report service crunches numbers in the background wouldn’t be a great user experience.

Instead, we needed a way to check when the report service was done generating a report, without blocking a user from doing other work in our application while that was going on. …


Another handy React animation library to have in your tool belt.

Image for post
Image for post

Introduction

A few months ago, I gave a talk with a coworker at the tech conference Connect.Tech about the ever-growing need for responsive web design when building websites and applications. During the presentation, we discussed a few different ways to approach it, specifically when it comes to the JavaScript framework React.

While I won’t go into all the details in our talk of how to approach responsive design (if you’d like, you can see the full slide deck of the talk here), I did want to share a handy React animation library I stumbled across while building the mobile-responsive demo application, called React Transition Group. …


Writing tests is hard. These tips make it a little easier

Image for post
Image for post
Photo by Farzad Nazifi on Unsplash.

A few weeks ago, I had the good fortune to attend a two-day training course at work on improving my React Testing Library knowledge and skills.

At my job, my team relies heavily on many forms of automated testing (unit, integration, end-to-end, etc.) to help ensure that all the pieces of our app are working correctly. So when I took the course, I already had a basic understanding of how to use React Testing Library (RTL) because we had begun using it a few months prior as we started writing more React hooks-based components in our application. …


Avoid prop drilling both your values and your functions with the help of Context

Image for post
Image for post
Photo by Robert Horvick on Unsplash

Introduction

At work recently, I was faced with a problem that’s quite common, thanks to React’s one-way data flow. At a high level of my application, I opened a checkout drawer that contained a user’s selection of items to order. In another, much lower component, I triggered the actual ordering of those items. Once the order was successfully placed, I needed the drawer to automatically slide closed again.

Following so far?

Because of the nature of my app’s checkout process, there were a lot of intermediate components between the top-level, parent component (controlling the drawer’s open or closed state), and the final checkout child component inside the drawer (containing the button and function to place the order). …

About

Paige Niedringhaus

Senior Software Engineer, previously a digital marketer. JavaScript’s my language of choice & React my framework, but I’m always up for learning new things.

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