Sometimes it feels masochistic to be a frontend developer. I regularly come across articles or tweets with new features that will improve my day-to-day workflow or solve a cumbersome, but consistent, problem and I get excited. I just can’t help it. I let my mind celebrate in the streets of all the different uses cases I can imagine.

Then I review the browser support and immediately my proverbial parade is doused in the rain that is reality.

A row of coloful themed houses in Longyearbyen, Svalbard.
A row of coloful themed houses in Longyearbyen, Svalbard.

It’s no secret that as products expand and development teams grow or change over, codebases begin to suffer from styling inconsistencies. Whether it be with element sizes, colors, or general ‘magic numbers’ littering the files, there are common approaches to minimizing these issues. While some products justify being split into a standalone component library, I want to look at the ones that need only a solid theme at its base to be the source of styling truth.

Note: While this article will focus on React projects using Styled Components, a lot of these challenges and approaches are technology agnostic and…

I can’t remember how many years ago it was, but during my first interview for a Frontend position, I was asked to sketch out the CSS box model. I outlined the margins, borders, and padding and even denoted each side with its physical description–left, right, top and bottom.

I had committed that model to memory, and have never really reconsidered it since. It never occurred to me that something so fundamental could change. Yet here I am, writing an article to tell you that it, in fact, has.

Enter Logical Properties

Properties like top and left are physical in nature. They describe the…

Easy Peasy provides a better API and experience on top of Redux

Lighthouse in Finland
Lighthouse in Finland
Bengtskar Lighthouse, Finland, 2020. Photo by the author.

Since the end of 2019, I have been using Easy Peasy to manage the state of my applications both professionally and personally. The library has a familiar API and logic with a lightweight feel and good flexibility. If you’re using or have used Redux and aren’t fully sold on it, take a look into Easy-Peasy. It may be worth it.

“Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience.” — Easy Peasy’s official website

Each time I’ve set up an Easy Peasy store, I’ve experimented more with its implementation. I’ve asked myself more…

Many moons ago, when I started working as a front-end developer, I didn’t know much about web accessibility. That changed when I worked on a team at a large insurance company and was put in charge of making the product accessible. You see, in the US, something like the inability to file an insurance claim on a website due to inaccessibility could lead to lawsuits. Super duper expensive lawsuits.

I didn’t want to be responsible for that.

As a result, I learned a lot in a short period of time about accessibility. …

Netlify Deploy Treating Warnings as Errors
Netlify Deploy Treating Warnings as Errors

If you’re like me, you were minding your own business and deploying your latest feature to staging. And if you’re even more like me, you’re not in the habit or monitoring every single deploy but your pipeline just works.

Until it doesn’t.

This morning’s deploy came to a grinding halt with the following error:

Treating warnings as errors because process.env.CI = true.

Daniel Yuschick in Hang En Cave taken by @nome_sapien
Daniel Yuschick in Hang En Cave taken by @nome_sapien

Can you believe it’s been three years since I’ve last updated my personal website? Three!?!? I sure can’t. Since then, I’ve moved countries, visited many others, completed my horror movie sleeve, written a novel, and am currently laid off surviving a pandemic.

Of course, in similarly dramatic fashion, the world of frontend development has also changed. It was about time my personal site did, too.

The Goals

When I first started with design ideas, the goal was simple–simplicity. I wanted simple content, simple maintenance, and simple consumption.

My previous sites, dating as far back as I can remember, focused solely on my…

I’ll be real; when I first entered the Gatsby ecosystem and tried to load my first image, I was like ‘whaaaaaaat?’. And if I was that befuddled trying to load a single picture, how in the world was I going to wrangle Gatsby Image into handling fluid art-directed images, compression, and formatting with broad support?

In an unexpected word–easily(ish).

In a lot more words…

Gatsby Image

The web would be trash without pictures but it’s also trash whenever those pictures take….way…..too……long to load. Enter Gatsby Image, an incredibly powerful plugin for optimizing and serving your images.

Note: I won’t be going into…

Phong Nha, Vietnam
Phong Nha, Vietnam

According to Twitter, which is definitely an accurate representation of real life, I’m in the extreme minority of developers who actually enjoy CSS. I got into development (all those years ago) by way of design and as a designer first, working in CSS unlocked so much creative potential.

As the web shifted into a more fluid experience (all those years ago), things like Flexbox and Grid blew my mind with their incredible potential for responsive design. And on a smaller scale, this little CSS function has done the same thing recently.

CSS Clamp()

The clamp() function seems small but wields incredible power…

Translating Placeholder, Alt & Title Text with React-Intl

Update: 20 April, 2020

Since writing the original post, react-intl has released newer versions that include their own hooks, making the process of translating attribute text a bit cleaner. And, arguably, the best part is the incredibly quick migration from the original HOC approach.

I will be showing the updated code block in this section but for a better understanding and more background, give the original post a glance.

Now, when handling translations within your app, react-intl exposes the useIntl hook.

import { useIntl } from ‘react-intl’;

With the hook imported, a new intl instance can be instantiated inside the Nav component providing access…

Daniel Yuschick

I live my life one hot chocolate at a time.

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