Front-End development mastery: simple tips, tricks, and best practices

This series is packed with super tiny, yet powerful tips, tricks, and best practices for front-end development.

You'll find everything you need to know about CSS, HTML, JavaScript, TypeScript, and browser developer tools in one place. Get ready to become a front-end development master!

Practice

Avoid using default exports

Avoid using the <b>, <i>, <s> and <u> tags

Avoid using multiple <h1> tags per page

Avoid skipping heading levels

Avoid boolean parameters

Do not mix styles of an element with its container

Specify the doctype

Use DocumentFragments when adding a big list of elements

Omit values of HTML boolean attributes

Use the datetime attribute when displaying dates, times

Avoid invisible text when loading a font

Combine Google font requests

Early return

Avoid using CSS @import

Always use noopener or noreferrer for links opened in new tabs

Keep the calculation of a magic number

Do not use magic numbers when manipulating strings

Replace multiple if statements with a lookup table

Do not use submit to name a submit button

Reuse the current color

Use the strict equality operator when comparing variables

Use template literal to concatenate strings

Use an underscore to name unused argument

Trim the spaces before parsing a number

Prevent the default behavior with jQuery event handler

Prefix class name with js to manipulate with javascript

Avoid to use colons and periods in the id attribute

Always pass the radix to parseInt

Wrap arrow function body in parentheses

Use string literals for the TypeScript enum values

Do not add custom methods to primitive objects

Tip

Copy variables from the browser console to the clipboard

Quickly insert alternate characters while typing

Prevent scrolling behind a fixed header

Set Git configuration conditionally

Select the direct children of an element

Pass specified environments to Webpack

Include properties conditionally

Set a numbering type for a list element

Select a folder to upload

Disable all fields of a form

Count how many times a function has been called

Insert a link into a Markdown editor quickly

Omit properties of a Svelte component

Go to the previous directory

Share recommendation Visual Studio Code extensions

Pick the first and last items of an array

Find the root NPM package to update

Escape CSS class names

Create a big file on Linux

Compose multiple React providers

Skip questions when creating a package.json file

Quickly type color variables

List branches sorted by most recent commit date

Fold CSS declarations with region markers

Access local webpack dev servers from external devices

Use multiple SSH keys for different GitHub accounts

Pick given properties from a JSON representation

Persist Console logs between page refreshes

Create a multiline strings

Lazy loading images with the loading attribute

Highlight text with the mark element

Force the browsers to download new favicon

Transform values from a JSON representation

Create shapes with the clip path property

Validate an input value with the pattern attribute

Prevent browsers from asking to translate

Copy the base64 data of an image

Move the cursor to any position in a macOS command

Locate an element with a given selector

Display links in the print mode

Add a subject to a mailto link

Start a simple web server on macOS

Smooth scrolling with pure CSS

Prevent anchor links from disappearing behind a sticky header

Create an one-time event handler

Use Array.includes for multiple conditionals

Ignore case sensitivity in a CSS attribute selector

Combine styles with the :is pseudo-class selector

Prevent macOS from going to sleep

Watch a variable's value with live expressions

Load given characters in a Google font request

Create a file of any size

View print stylesheets with Chrome DevTools

Capture a screenshot without shadow on macOS

Style index numbers of list items

Shorten import paths in Webpack

Open a package's homepage or repo

Center an element vertically and horizontally

Shorten import paths in TypeScript

Increase or decrease CSS values with Chrome DevTools

Append leading zeros to ordered list items

View a file in a different branch without switching the branch

Truncate long text

Move the screenshot area on macOS

Hide an element with Chrome DevTools

Create a function that accepts a single parameter

Style list items with special characters

Number headings and subheadings automatically

Copy screenshots to the clipboard on macOS

Create an array with conditional elements

Create a polyfill

Unpack a property of an object with different name

Run the last command as the root user

Checkout the previous branch

Toggle hidden files on macOS

Quick query elements in the Console

Pure collapsible element

Log the full object in NodeJS

Copy the full path of a file on macOS

Always put the footer at the bottom

Add a line break between inline elements

Access the selected node in the Console

Use CSS fallback properties

Pass an array as function arguments

Format a number as a currency string

Find scrollable elements

Create a line-on-sides heading

Make a table with equal column widths

Prevent a string from being escaped

Inspect an element shown on hover

Filter file types of a file input

Create a download link

Accept any numbers of parameters

Ignore items from array destructuring

Use short-circuits conditionals

Pretty format JSON

Log an array to the Console

Log a value to the Console

Get the current timestamp

Format a list

Return an object in an arrow function quickly

Manage multiple boolean flags

Create an object with dynamic keys

Use negative nth-child and nth-last-child

Show a placeholder for an empty list

Set content for an empty link

Separate list items

Remove the border from the last navigation item

Create an autocomplete list with the datalist element

Create a descending list of numbered items

Conditional logging in the Console

Use underscores to represent a number

Use the wbr tags to represent path

Swap two variables

Style broken images

Get rid of escaping quotes with template literal

Copy a long variable from the Console

Add an icon to external links

Remove a property from an object

Merge different arrays

Indicate img elements that miss alt attribute

Get characters of a string

Convert string to number

Trick

Open all links in new tabs

Create a custom emoji cursor

Save a few bytes when checking the existence of module

Add keyboard shortcuts

Shorten codes with the comma operator

Write CSS rules for Firefox only

Show the first letter only

Log a variable to the console using conditional breakpoints

Replace multiple if statements with a single switch statement

Log a variable in an arrow function

Enforce required parameters

Check if the browser supports for an element attribute

Visualize elements on page with the outline style

Track the focused element with Chrome DevTools

Put special operators at the beginning of a function

Override the behavior of instanceof

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Front-End development mastery: simple tips, tricks, and best practices

Practice

Tip

Trick

Recent posts ⚡

Newsletter 🔔