Tips, Tricks, Best Practices

for front-end development

Accept any numbers of parameters

Access local webpack dev servers from external devices

Access the selected node in the Console

Add a line break between inline elements

Add a subject to a mailto link

Add an icon to external links

Add keyboard shortcuts

Always pass the radix to parseInt

Always put the footer at the bottom

Always use "noopener" or "noreferrer" for links opened in new tabs

Append leading zeros to ordered list items

Avoid boolean parameters

Avoid invisible text when loading a font

CSS, Google Font

Avoid skipping heading levels

Accessibility, HTML

Avoid to use colons and periods in the id attribute

Avoid using CSS @import

Avoid using multiple <h1> tags per page

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

Accessibility, HTML

Capture a screenshot without shadow on macOS

Center an element vertically and horizontally

Check if the browser supports for an element attribute

DOM, JavaScript

Checkout the previous branch

Combine Google font requests

CSS, Google Font

Combine styles with the :is pseudo-class selector

Compose multiple React providers

Conditional logging in the Console

Convert string to number

Copy a long variable from the Console

Copy screenshots to the clipboard on macOS

Copy the base64 data of an image

Copy the full path of a file on macOS

Create a big file on Linux

Create a custom emoji cursor

Create a descending list of numbered items

Create a download link

Create a file of any size

Create a function that accepts a single parameter

Create a line-on-sides heading

Create a multiline strings

Create a polyfill

Create an array with conditional elements

Create an autocomplete list with the datalist element

Create an object with dynamic keys

Create an one-time event handler

DOM, JavaScript

Create shapes with the clip path property

Display links in the print mode

Do not add custom methods to primitive objects

Don't mix styles of an element with its container

Do not use magic numbers when manipulating strings

Do not use submit to name a submit button

Early return

Enforce required parameters

Escape CSS class names

Filter file types of a file input

Find scrollable elements

Firefox DevTools

Find the root NPM package to update

Fold CSS declarations with region markers

CSS, Visual Studio Code

Force the browsers to download new favicon

Format a list

Format a number as a currency string

Get characters of a string

Get rid of escaping quotes with template literal

Get the current timestamp

Go to the previous directory

Hide an element with Chrome DevTools

Highlight text with the mark element

Ignore case sensitivity in a CSS attribute selector

Ignore items from array destructuring

Increase or decrease CSS values with Chrome DevTools

Indicate img elements that miss alt attribute

A11y, Accessibility, CSS

Inspect an element shown on hover

Keep the calculation of a magic number

Lazy loading images with the loading attribute

List branches sorted by most recent commit date

Load given characters in a Google font request

CSS, Google Font

Locate an element with a given selector

Log a value to the Console

Log a variable in an arrow function

Log a variable to the console using conditional breakpoints

Log an array to the Console

Log the full object in NodeJS

Make a table with equal column widths

Manage multiple boolean flags

Merge different arrays

Move the cursor to any position in a macOS command

Command Line, macOS

Move the screenshot area on macOS

Number headings and subheadings automatically

Omit properties of a Svelte component

Omit values of HTML boolean attributes

Open a package's homepage or repo

Open all links in new tabs

Override the behavior of instanceof

Pass an array as function arguments

Persist Console logs between page refreshes

Pick given properties from a JSON representation

Pick the first and last items of an array

Prefix class name with js to manipulate with javascript

Pretty format JSON

Prevent a string from being escaped

Prevent anchor links from disappearing behind a sticky header

Prevent browsers from asking to translate

Prevent macOS from going to sleep

Prevent the default behavior with jQuery event handler

DOM, JavaScript

Pure collapsible element

Put special operators at the beginning of a function

Quick query elements in the Console

Quickly type color variables

Visual Studio Code

Remove a property from an object

Remove the border from the last navigation item

Replace multiple if statements with a lookup table

Replace multiple if statements with a single switch statement

Return an object in an arrow function quickly

Reuse the current color

Run the last command as the root user

Save a few bytes when checking the existence of module

Separate list items

Set content for an empty link

Share recommendation Visual Studio Code extensions

Visual Studio Code

Shorten codes with the comma operator

Shorten import paths in TypeScript

Shorten import paths in Webpack

Show a placeholder for an empty list

Show the first letter only

Skip questions when creating a package.json file

Smooth scrolling with pure CSS

Specify the doctype

Start a simple web server on macOS

Style broken images

Style index numbers of list items

Style list items with special characters

Swap two variables

Toggle hidden files on macOS

Track the focused element with Chrome DevTools

Transform values from a JSON representation

Trim the spaces before parsing a number

Truncate long text

Unpack a property of an object with different name

Use an underscore to name unused argument

Use Array.includes for multiple conditionals

Use CSS fallback properties

Use DocumentFragments when adding a big list of elements

DOM, JavaScript

Use multiple SSH keys for different GitHub accounts

Use negative nth-child and nth-last-child

Use short-circuits conditionals

Use string literals for the TypeScript enum values

Use template literal to concatenate strings

Use the datetime attribute when displaying dates, times

Use the strict equality operator when comparing variables

Use the wbr tags to represent path

Use underscores to represent a number

Validate an input value with the pattern attribute

View a file in a different branch without switching the branch

View print stylesheets with Chrome DevTools

Visualize elements on page with the outline style

DOM, JavaScript

Watch a variable's value with live expressions

Wrap arrow function body in parentheses

Write CSS rules for Firefox only