A directory of brand guidelines: logosearch.link

These tips are fire.

Dom Habersack
Dom HabersackJune 24, 2020
A fire.
This literal fire is also fire.

I collected all fire tips right on this site now. Go to all fire tips →

A few weeks ago, I started posting my own “fire tips” on Twitter. Following the trend started by Wes Bos, I am sharing bite-sized tips on how to write better code.

The inspiration for them comes from my daily work. You won’t find quizzes on bizarre quirks in JavaScript you are unlikely to ever encounter. Instead, I am giving patterns that I use a lot in real projects. While some of them are specific to JavaScript and CSS for now, the concepts work in other languages. Here are some of my favorites so far:


A few well-named variables go a long way towards making code more self-explanatory. Readability is worth a few extra lines; your future self will thank you!

// it’s hard to see what this combination of conditions does
if (!(currentDay === 'Saturday' || currentDay === 'Sunday') &&
    currentHour >= 9 && currentHour <= 18) {
  return 'The store is open!'
}


// by assigning the conditions to variables, we can use their names to
// explain the logic behind our code in plain language
const isSaturday = currentDay === 'Saturday'
const isSunday = currentDay === 'Sunday'

const isWeekend = isSaturday || isSunday

const isDuringBusinessHours = currentHour >= 9 && currentHour <= 18

if (!isWeekend && isDuringBusinessHours) {
  return 'The store is open!'
}

Have to use a function over and over, but one or more of its parameters are always the same? Improve readability by creating a function that hides that repetition.

// Repeating `en_US` every time is tedious and prone to typos.
const title = translate('app.title', 'en_US')
const slogan = translate('app.slogan', 'en_US')
const action = translate('app.action', 'en_US')

// While `translate` takes two parameters, this function only takes one. It
// returns the result we would get if we called `translate` with `en_US`.
const translateEN = key => translate(key, 'en_US')

// We can call our function as before, but no longer need to write `en_US`.
const title = translateEN('app.title')
const slogan = translateEN('app.slogan')
const action = translateEN('app.action')

You can use non-standard characters like “:” in CSS class names if you escape them with a backslash.

<style>
  .text\:italic {
    font-style: italic;
  }

  .text\:uppercase {
    text-transform: uppercase;
  }
</style>

<p class="text:italic text:uppercase">
  Italic and uppercase
</p>

You can check out the entire collection (updated irregularly) at this Twitter Moment:

https://twitter.com/i/events/1273283119274176514

What is your favorite tip that you wish more people knew about?

– Dom

Continue reading

A close view of the moon.
#66December 9, 2020

The easiest way to build a Dark Mode

Media queries are essential for doing Responsive Design. They can test for many features beyond browser width. We can use one of them to build a dark mode.

Lines of candies.
#45July 15, 2020

JavaScript sorts arrays weird

By default, an array of numbers will not be sorted numerically. To avoid unexpected results, we can tell it how to sort an array.

Assorted colorful miniature houses.
#69December 30, 2020

I finally understand “many small functions”

Writing many small functions instead of a few large ones is common wisdom. It took a book from the 90s for me to understand why that’s better.

Read all issues →