Simple ways to write better and cleaner code

Teeth-whitening kit
Teeth-whitening kit
Photo by Candid on Unsplash.

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!

1. Conditional Rendering Only for One Condition

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…


How to help older browsers understand new objects, methods, and syntax

Image for post
Image for post
Photo by Nikki Jeffrey on Unsplash

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.

Polyfill


Dad joke “dadabase” app
Dad joke “dadabase” app
Dad joke “dadabase” app

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…


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

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.

First off, what is a design system?

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…


A PDF export showdown

Image for post
Image for post
Photo by Chris Chow on Unsplash

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…


Six secrets to driving software engineers crazy

Image for post
Image for post
Photo by Hunters Race on Unsplash

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.

Don’t write good documentation

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. …


Five ideas to get more out of your workday

Image for post
Image for post
Photo by Tim van der Kuip on Unsplash

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?”

Giving advice
Giving advice
Photo by NeONBRAND on Unsplash.

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.

1. Ask Lots of Questions


Test like a user

Mouse trap
Mouse trap
Photo credit: Skitterphoto on Pixabay

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…


Get to know Slash GraphQL

Happy corgi dog
Happy corgi dog
A corgi living his best life (Source: Pixabay)

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…

Tyler Hawkins

Senior software engineer. Continuous learner. Educator. http://tylerhawkins.info

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