These tips are fire.
ProgrammingAll articles in this category →
Posted on I collected all snippets right on this site now. Go to all snippets →
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!'
}// 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!'
}// 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!'
}// 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')// 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')// 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')// 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><style>
.text\:italic {
font-style: italic;
}
.text\:uppercase {
text-transform: uppercase;
}
</style>
<p class="text:italic text:uppercase">
Italic and uppercase
</p><style>
.text\:italic {
font-style: italic;
}
.text\:uppercase {
text-transform: uppercase;
}
</style>
<p class="text:italic text:uppercase">
Italic and uppercase
</p><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?