Clean code is more than just working code. Clean code is easy to read, simple to understand, and neatly organized. In this article, we’ll look at eight ways we can write cleaner React code.
When going through these suggestions, it’s important to remember that’s exactly what they are: suggestions. If you disagree with any of them, that’s completely fine. However, these are practices that I’ve found helpful in writing my own React code.
Let’s dive in!
If you need to conditionally render something when a condition is true
and not render anything when a condition is false
, don’t use a…
When discussing new JavaScript features and syntax, it’s common to hear words like polyfill, transpile, and even ponyfill used. For example, someone might say, “In order to use this in older browsers, you’ll need to use Babel to transpile the code.” Or maybe, “Make sure to provide a polyfill for this functionality so that older browsers can use it.”
If you’re not familiar with these terms, you may be asking yourself, “What’s the difference? Are these all just interchangeable words that mean the same thing?”
In this article, we’ll define these terms and clear the air of any surrounding confusion.
…
Where do you keep your dad jokes? In a dadabase of course! Let’s imagine that you are a site maintainer for the world’s best dad joke database. Your app communicates with the database using a REST API that allows you to retrieve jokes and post ratings for those jokes. Visitors to your site can rate each joke they see via a simple user interface.
Recently you heard of a fancy new technology called GraphQL that provides the flexibility to request only the data that you need using a single API endpoint. It sounds neat, and you’d like to start using…
Your frontend application needs a design system. If you want to provide a consistent user experience (UX), ship features faster, make re-branding changes more easily, and free up your time to focus on hard UX problems, this article is for you.
A design system is a tool that enables you to build your application. It provides all the building blocks and guidance your team needs to design and develop a product. In simple terms, you can think of a design system as a component library. At the “atomic” level, you might have components for a button, or an avatar, or…
I recently published an article comparing HTML-to-PDF export libraries. In it, I explored options like the native browser print functionality, open-source libraries jsPDF and pdfmake, and the paid service DocRaptor. Here’s a quick recap of my findings:
If you want the simplest solution and don’t need a professional-looking document, the native browser print functionality should be just fine. If you need more control over the PDF output, then you’ll want to use a library.
jsPDF shines when it comes to single-page content generated based on HTML shown in the UI. pdfmake works best when generating PDF content from data rather…
Hey, you! Yeah, you. Are you a software engineer? Do you have ownership over a particular repository at your company? Do you want to ensure that working with your repo is a constant source of frustration for your fellow developers? Great! Then read on for these tips on how to be a terrible project maintainer.
Especially on how to do local development or how to contribute to the repo. You want to keep people guessing. Running your project locally should be a puzzle that only the greatest minds can solve. …
Everyone seems to be strapped for time these days and desperate to get more done in less time. I’m in the same boat.
Enter “life hacks”: simple tricks to make your life easier. Or, questionable bits of productivity advice from strangers on the internet with hit-or-miss results.
As gimmicky as productivity life hacks can be, they really can help when the advice is grounded in science. Understanding the psychology of your mind at work allows you to tap into your hidden potential. The trick is not to work more — instead, it’s to work more meaningfully.
Below are five ideas…
Software engineers early in their careers often ask me, “How can I level up quickly?”
In other words, how can I become an effective contributor in the shortest amount of time possible? How can I familiarize myself with our massive code base? How do I learn all the things I should know?
Starting a new job can be stressful — even as a senior engineer — and it can be especially overwhelming when it’s your first programming job. So, let’s look at four strategies for leveling up as a junior developer so that you can hit the ground running.
One of my 2021 goals is to contribute more to open source. I got a head start in December of 2020 by re-writing the test suite for the focus-trap-react
npm package using the React Testing Library. Here’s my merged pull request.
If you haven’t heard of this package, focus-trap-react
is one of the best solutions out there for temporarily trapping keyboard focus in a specific area of your application; for instance, while a modal or panel is open. We wouldn’t want users tabbing outside the modal into content in the background, now would we?
In this article, we’ll go over…
Every dog owner wants to find the perfect friends for their new puppy. Now we have an app for that! You can browse through various puppy profiles and swipe right or left to find your new puppy friend. Setting up puppy playdates has never been easier.
OK, not really. But we do have a wacky demo app built with React, Material-UI, Apollo Client, and Slash GraphQL (a hosted GraphQL back end from Dgraph).
In this article, we’ll explore how I built the app and also look at some of the basics of the technologies I used.
Ready to unleash the…