Tips, tricks and best practices of front-end development

Star me on GitHub ● 486★
Pure collapsible element
HTML
Quick query elements in the Console
DevTools
Quickly type color variables
Visual Studio Code
Replace multiple if statements with a lookup table
JavaScript
Remove a property from an object
JavaScript
Return an object in an arrow function quickly
JavaScript
Replace multiple if statements with a single switch statement
JavaScript
Run the last command as the root user
Command Line
Save a few bytes when checking the existence of module
JavaScript
Remove the border from the last navigation item
CSS
Select a folder to upload
HTML
Reuse the current color
CSS
Set a numbering type for a list element
HTML
Separate list items
CSS
Share recommendation Visual Studio Code extensions
Visual Studio Code
Shorten import paths in Webpack
Webpack
Shorten import paths in TypeScript
TypeScript
Set content for an empty link
CSS
Skip questions when creating a package.json file
NPM
Show a placeholder for an empty list
CSS
Shorten codes with the comma operator
JavaScript
Smooth scrolling with pure CSS
CSS
Show the first letter only
CSS
Style index numbers of list items
CSS
Specify the doctype
HTML
Style list items with special characters
CSS
Style broken images
CSS
Toggle hidden files on macOS
macOS
Track the focused element with Chrome DevTools
DevTools
Swap two variables
JavaScript
Unpack a property of an object with different name
JavaScript
Start a simple web server on macOS
macOS
Truncate long text
CSS
Transform values from a JSON representation
JavaScript
Use CSS fallback properties
CSS
Use an underscore to name unused argument
JavaScript
Trim the spaces before parsing a number
JavaScript
Use Array.includes for multiple conditionals
JavaScript
Use multiple SSH keys for different GitHub accounts
Git
Use negative nth-child and nth-last-child
CSS
Use template literal to concatenate strings
JavaScript
Use DocumentFragments when adding a big list of elements
DOM, JavaScript
Use short-circuits conditionals
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
View a file in a different branch without switching the branch
Git
Validate an input value with the pattern attribute
HTML
Visualize elements on page with the outline style
DOM, JavaScript
View print stylesheets with Chrome DevTools
DevTools
Watch a variable's value with live expressions
DevTools
Write CSS rules for Firefox only
CSS
Use the wbr tags to represent path
HTML
Wrap arrow function body in parentheses
JavaScript
Access local webpack dev servers from external devices
Webpack
Access the selected node in the Console
DevTools
Add a line break between inline elements
CSS
Always pass the radix to parseInt
JavaScript
Add an icon to external links
CSS
Add a subject to a mailto link
HTML
Always use "noopener" or "noreferrer" for links opened in new tabs
HTML
Add keyboard shortcuts
HTML
Always put the footer at the bottom
CSS
Avoid boolean parameters
JavaScript
Avoid skipping heading levels
Accessibility, HTML
Accept any numbers of parameters
JavaScript
Avoid to use colons and periods in the id attribute
DOM, HTML
Avoid invisible text when loading a font
CSS, Google Font
Append leading zeros to ordered list items
CSS
Avoid using multiple <h1> tags per page
HTML
Avoid using CSS @import
CSS
Center an element vertically and horizontally
CSS
Avoid using the <b>, <i>, <s> and <u> tags
Accessibility, HTML
Capture a screenshot without shadow on macOS
macOS
Checkout the previous branch
Git
Check if the browser supports for an element attribute
DOM, JavaScript
Combine styles with the :is pseudo-class selector
CSS
Combine Google font requests
CSS, Google Font
Conditional logging in the Console
DevTools
Convert string to number
JavaScript
Copy the base64 data of an image
DevTools
Copy screenshots to the clipboard on macOS
macOS
Compose multiple React providers
React
Copy a long variable from the Console
DevTools
Copy the full path of a file on macOS
macOS
Create a descending list of numbered items
HTML
Create a big file on Linux
Command Line
Count how many times a function has been called
JavaScript
Create a custom emoji cursor
CSS
Create a download link
HTML
Create a file of any size
macOS
Create a multiline strings
JavaScript
Create a function that accepts a single parameter
JavaScript
Create shapes with the clip path property
CSS
Create a polyfill
JavaScript
Create a line-on-sides heading
CSS
Disable all fields of a form
HTML
Create an array with conditional elements
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
Create an one-time event handler
DOM, JavaScript
Display links in the print mode
CSS
Don't mix styles of an element with its container
CSS
Do not add custom methods to primitive objects
JavaScript
Find scrollable elements
Firefox DevTools
Enforce required parameters
JavaScript
Escape CSS class names
CSS
Force the browsers to download new favicon
HTML
Find the root NPM package to update
NPM
Early return
JavaScript
Format a list
JavaScript
Format a number as a currency string
JavaScript
Get characters of a string
JavaScript
Fold CSS declarations with region markers
CSS, Visual Studio Code
Get rid of escaping quotes with template literal
JavaScript
Go to the previous directory
Command Line
Get the current timestamp
JavaScript
Hide an element with Chrome DevTools
DevTools
Ignore items from array destructuring
JavaScript
Filter file types of a file input
HTML
Highlight text with the mark element
HTML
Indicate img elements that miss alt attribute
A11y, Accessibility, CSS
Ignore case sensitivity in a CSS attribute selector
CSS
Increase or decrease CSS values with Chrome DevTools
DevTools
Insert a link into a Markdown editor quickly
Markdown
Keep the calculation of a magic number
JavaScript
Locate an element with a given selector
DevTools
Lazy loading images with the loading attribute
HTML
Load given characters in a Google font request
CSS, Google Font
Log a variable in an arrow function
JavaScript
Inspect an element shown on hover
DevTools
Log an array to the Console
JavaScript
Log a variable to the console using conditional breakpoints
DevTools
Log a value to the Console
JavaScript
List branches sorted by most recent commit date
Git
Log the full object in NodeJS
NodeJS
Merge different arrays
JavaScript
Number headings and subheadings automatically
CSS
Move the cursor to any position in a macOS command
Command Line, macOS
Make a table with equal column widths
CSS
Move the screenshot area on macOS
macOS
Manage multiple boolean flags
JavaScript
Override the behavior of instanceof
JavaScript
Open a package's homepage or repo
NPM
Open all links in new tabs
HTML
Omit properties of a Svelte component
Svelte
Persist Console logs between page refreshes
DevTools
Pass an array as function arguments
JavaScript
Omit values of HTML boolean attributes
HTML
Pick given properties from a JSON representation
JavaScript
Prevent anchor links from disappearing behind a sticky header
CSS
Pretty format JSON
JavaScript
Prevent a string from being escaped
JavaScript
Prefix class name with js to manipulate with javascript
DOM, HTML
Prevent browsers from asking to translate
HTML
Prevent the default behavior with jQuery event handler
DOM, JavaScript
Pick the first and last items of an array
JavaScript
Prevent macOS from going to sleep
macOS
Put special operators at the beginning of a function
JavaScript
Follow me on and to get more useful contents.