Tips, tricks and best practices of front-end development

Star me on GitHub ● 524★

List branches sorted by most recent commit date

Git

Log a value to the Console

JavaScript

Locate an element with a given selector

DevTools

Log a variable to the console using conditional breakpoints

DevTools

Log a variable in an arrow function

JavaScript

Log an array to the Console

JavaScript

Make a table with equal column widths

CSS

Log the full object in NodeJS

NodeJS

Move the cursor to any position in a macOS command

Command Line, macOS

Move the screenshot area on macOS

macOS

Merge different arrays

JavaScript

Number headings and subheadings automatically

CSS

Manage multiple boolean flags

JavaScript

Open a package's homepage or repo

NPM

Omit properties of a Svelte component

Svelte

Omit values of HTML boolean attributes

HTML

Open all links in new tabs

HTML

Pick given properties from a JSON representation

JavaScript

Override the behavior of instanceof

JavaScript

Persist Console logs between page refreshes

DevTools

Pick the first and last items of an array

JavaScript

Prefix class name with js to manipulate with javascript

DOM, HTML

Pass an array as function arguments

JavaScript

Pretty format JSON

JavaScript

Prevent the default behavior with jQuery event handler

DOM, JavaScript

Prevent anchor links from disappearing behind a sticky header

CSS

Prevent a string from being escaped

JavaScript

Prevent browsers from asking to translate

HTML

Quick query elements in the Console

DevTools

Prevent macOS from going to sleep

macOS

Pure collapsible element

HTML

Put special operators at the beginning of a function

JavaScript

Remove a property from an object

JavaScript

Remove the border from the last navigation item

CSS

Quickly type color variables

Visual Studio Code

Replace multiple if statements with a lookup table

JavaScript

Replace multiple if statements with a single switch statement

JavaScript

Return an object in an arrow function quickly

JavaScript

Run the last command as the root user

Command Line

Save a few bytes when checking the existence of module

JavaScript

Reuse the current color

CSS

Select a folder to upload

HTML

Set a numbering type for a list element

HTML

Share recommendation Visual Studio Code extensions

Visual Studio Code

Shorten import paths in TypeScript

TypeScript

Separate list items

CSS

Shorten import paths in Webpack

Webpack

Set content for an empty link

CSS

Show a placeholder for an empty list

CSS

Shorten codes with the comma operator

JavaScript

Skip questions when creating a package.json file

NPM

Specify the doctype

HTML

Smooth scrolling with pure CSS

CSS

Show the first letter only

CSS

Style list items with special characters

CSS

Start a simple web server on macOS

macOS

Style index numbers of list items

CSS

Toggle hidden files on macOS

macOS

Swap two variables

JavaScript

Track the focused element with Chrome DevTools

DevTools

Style broken images

CSS

Transform values from a JSON representation

JavaScript

Truncate long text

CSS

Use an underscore to name unused argument

JavaScript

Trim the spaces before parsing a number

JavaScript

Use Array.includes for multiple conditionals

JavaScript

Unpack a property of an object with different name

JavaScript

Use DocumentFragments when adding a big list of elements

DOM, JavaScript

Use multiple SSH keys for different GitHub accounts

Git

Use CSS fallback properties

CSS

Use short-circuits conditionals

JavaScript

Use negative nth-child and nth-last-child

CSS

Use template literal to concatenate strings

JavaScript

Use string literals for the TypeScript enum values

TypeScript

Use the datetime attribute when displaying dates, times

HTML

Use the strict equality operator when comparing variables

JavaScript

Use underscores to represent a number

JavaScript

Validate an input value with the pattern attribute

HTML

View a file in a different branch without switching the branch

Git

View print stylesheets with Chrome DevTools

DevTools

Use the wbr tags to represent path

HTML

Visualize elements on page with the outline style

DOM, JavaScript

Watch a variable's value with live expressions

DevTools

Wrap arrow function body in parentheses

JavaScript

Write CSS rules for Firefox only

CSS

Always pass the radix to parseInt

JavaScript

Access the selected node in the Console

DevTools

Add a subject to a mailto link

HTML

Add keyboard shortcuts

HTML

Accept any numbers of parameters

JavaScript

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

HTML

Avoid boolean parameters

JavaScript

Append leading zeros to ordered list items

CSS

Avoid invisible text when loading a font

CSS, Google Font

Always put the footer at the bottom

CSS

Add an icon to external links

CSS

Avoid to use colons and periods in the id attribute

DOM, HTML

Avoid using CSS @import

CSS

Add a line break between inline elements

CSS

Avoid skipping heading levels

Accessibility, HTML

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

Accessibility, HTML

Check if the browser supports for an element attribute

DOM, JavaScript

Center an element vertically and horizontally

CSS

Avoid using multiple <h1> tags per page

HTML

Capture a screenshot without shadow on macOS

macOS

Checkout the previous branch

Git

Combine Google font requests

CSS, Google Font

Access local webpack dev servers from external devices

Webpack

Conditional logging in the Console

DevTools

Combine styles with the :is pseudo-class selector

CSS

Compose multiple React providers

React

Copy screenshots to the clipboard on macOS

macOS

Copy a long variable from the Console

DevTools

Count how many times a function has been called

JavaScript

Convert string to number

JavaScript

Create a download link

HTML

Create a big file on Linux

Command Line

Create a descending list of numbered items

HTML

Copy the full path of a file on macOS

macOS

Copy the base64 data of an image

DevTools

Create a multiline strings

JavaScript

Create a file of any size

macOS

Create a line-on-sides heading

CSS

Display links in the print mode

CSS

Create an array with conditional elements

JavaScript

Do not add custom methods to primitive objects

JavaScript

Create a custom emoji cursor

CSS

Create shapes with the clip path property

CSS

Create a polyfill

JavaScript

Don't mix styles of an element with its container

CSS

Create a function that accepts a single parameter

JavaScript

Create an autocomplete list with the datalist element

HTML

Create an object with dynamic keys

JavaScript

Do not use magic numbers when manipulating strings

JavaScript

Do not use submit to name a submit button

HTML

Enforce required parameters

JavaScript

JavaScript

Create an one-time event handler

DOM, JavaScript

Find scrollable elements

Firefox DevTools

Filter file types of a file input

HTML

Escape CSS class names

CSS

JavaScript

Find the root NPM package to update

NPM

Disable all fields of a form

HTML

Get rid of escaping quotes with template literal

JavaScript

Force the browsers to download new favicon

HTML

Format a number as a currency string

JavaScript

Hide an element with Chrome DevTools

DevTools

Get characters of a string

JavaScript

Ignore case sensitivity in a CSS attribute selector

CSS

Ignore items from array destructuring

JavaScript

Go to the previous directory

Command Line

Get the current timestamp

JavaScript

Indicate img elements that miss alt attribute

A11y, Accessibility, CSS

Highlight text with the mark element

HTML

Insert a link into a Markdown editor quickly

Markdown

Increase or decrease CSS values with Chrome DevTools

DevTools

Keep the calculation of a magic number

JavaScript

Fold CSS declarations with region markers

CSS, Visual Studio Code

Load given characters in a Google font request

CSS, Google Font

Inspect an element shown on hover

DevTools

Lazy loading images with the loading attribute

HTML

Follow me on Twitter and GitHub to get more useful contents.