Tips, tricks and best practices of front-end development

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