Snippets

These are a collection of tips and tricks you can use to improve the performance and readability of your code.

Filter by category

All90

CSS3

Namespacing styled-components

To improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.

Read full article

CSS

Creating state-selectors in utility-first CSS

This is how libraries like Tailwind CSS can use prefixes like `hover:` and `focus:` to apply styles to pseudo classes.

Read full article

General

Descriptive variables instead of complex conditions

When chaining conditions together, putting them into named variables makes code more readable.

Read full article

General

Using Boolean prefixes for variable names

When naming variables that hold Boolean values, using a prefix that indicates as much helps with readability.

Read full article

JavaScript

Creating number ranges

We can create a sequence of numbers by spreading the keys of one array into another array. We can then change that range any way we like.

Read full article

JavaScript

Implicit object return in arrow functions

We can skip the return keyword if arrow functions immediately return a value. If that value is an object, we need to also wrap it in parentheses.

Read full article

React

Combining arrow functions in styled-components

We can write a single function that reads the global theme instead of doing the same thing for multiple properties.

Read full article

React

Destructuring props in styled-components

When using styled-components in React, we can use destructuring to make our components more readable.

Read full article

Snippets

Filter by category

Namespacing styled-components

Creating state-selectors in utility-first CSS

Descriptive variables instead of complex conditions

Using Boolean prefixes for variable names

Creating number ranges

Implicit object return in arrow functions

Combining arrow functions in styled-components

Destructuring props in styled-components

Work

Legal