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
08 Sep, 2023
Avoid using the <b>, <i>, <s> and <u> tags
13 May, 2021
Avoid using multiple <h1> tags per page
13 May, 2021
Avoid skipping heading levels
13 May, 2021
Avoid boolean parameters
13 May, 2021
Specify the doctype
29 Apr, 2021
Omit values of HTML boolean attributes
19 Apr, 2021
Avoid invisible text when loading a font
25 Mar, 2021
Combine Google font requests
22 Mar, 2021
Early return
21 Mar, 2021
Avoid using CSS @import
21 Mar, 2021
Keep the calculation of a magic number
11 Mar, 2021
Do not use submit to name a submit button
04 Mar, 2021
Reuse the current color
03 Mar, 2021
Use template literal to concatenate strings
23 Feb, 2021
Use an underscore to name unused argument
23 Feb, 2021
Trim the spaces before parsing a number
23 Feb, 2021
Always pass the radix to parseInt
23 Feb, 2021
Wrap arrow function body in parentheses
22 Feb, 2021
Do not add custom methods to primitive objects
22 Feb, 2021
Tip
Quickly insert alternate characters while typing
30 Sep, 2023
Prevent scrolling behind a fixed header
12 Sep, 2023
Set Git configuration conditionally
30 Aug, 2023
Select the direct children of an element
29 Aug, 2023
Pass specified environments to Webpack
29 Aug, 2023
Include properties conditionally
28 Aug, 2023
Set a numbering type for a list element
28 Sep, 2022
Select a folder to upload
27 Sep, 2022
Disable all fields of a form
27 Sep, 2022
Count how many times a function has been called
27 Sep, 2022
Insert a link into a Markdown editor quickly
24 Sep, 2022
Omit properties of a Svelte component
03 Nov, 2021
Go to the previous directory
17 Oct, 2021
Pick the first and last items of an array
17 May, 2021
Find the root NPM package to update
17 May, 2021
Escape CSS class names
17 May, 2021
Create a big file on Linux
17 May, 2021
Compose multiple React providers
13 May, 2021
Skip questions when creating a package.json file
12 May, 2021
Quickly type color variables
12 May, 2021
List branches sorted by most recent commit date
12 May, 2021
Fold CSS declarations with region markers
12 May, 2021
Pick given properties from a JSON representation
19 Apr, 2021
Persist Console logs between page refreshes
13 Apr, 2021
Create a multiline strings
13 Apr, 2021
Lazy loading images with the loading attribute
12 Apr, 2021
Highlight text with the mark element
12 Apr, 2021
Force the browsers to download new favicon
12 Apr, 2021
Transform values from a JSON representation
08 Apr, 2021
Create shapes with the clip path property
08 Apr, 2021
Prevent browsers from asking to translate
06 Apr, 2021
Copy the base64 data of an image
04 Apr, 2021
Locate an element with a given selector
27 Mar, 2021
Display links in the print mode
25 Mar, 2021
Add a subject to a mailto link
25 Mar, 2021
Start a simple web server on macOS
24 Mar, 2021
Smooth scrolling with pure CSS
24 Mar, 2021
Create an one-time event handler
24 Mar, 2021
Use Array.includes for multiple conditionals
23 Mar, 2021
Prevent macOS from going to sleep
22 Mar, 2021
Watch a variable's value with live expressions
21 Mar, 2021
Load given characters in a Google font request
21 Mar, 2021
Create a file of any size
19 Mar, 2021
View print stylesheets with Chrome DevTools
18 Mar, 2021
Capture a screenshot without shadow on macOS
18 Mar, 2021
Style index numbers of list items
17 Mar, 2021
Shorten import paths in Webpack
17 Mar, 2021
Open a package's homepage or repo
17 Mar, 2021
Center an element vertically and horizontally
17 Mar, 2021
Shorten import paths in TypeScript
16 Mar, 2021
Append leading zeros to ordered list items
16 Mar, 2021
Truncate long text
15 Mar, 2021
Move the screenshot area on macOS
15 Mar, 2021
Hide an element with Chrome DevTools
15 Mar, 2021
Style list items with special characters
14 Mar, 2021
Number headings and subheadings automatically
14 Mar, 2021
Copy screenshots to the clipboard on macOS
14 Mar, 2021
Create an array with conditional elements
12 Mar, 2021
Create a polyfill
10 Mar, 2021
Run the last command as the root user
07 Mar, 2021
Checkout the previous branch
07 Mar, 2021
Toggle hidden files on macOS
06 Mar, 2021
Quick query elements in the Console
06 Mar, 2021
Pure collapsible element
06 Mar, 2021
Log the full object in NodeJS
06 Mar, 2021
Copy the full path of a file on macOS
06 Mar, 2021
Always put the footer at the bottom
06 Mar, 2021
Add a line break between inline elements
05 Mar, 2021
Access the selected node in the Console
04 Mar, 2021
Use CSS fallback properties
03 Mar, 2021
Pass an array as function arguments
03 Mar, 2021
Format a number as a currency string
03 Mar, 2021
Find scrollable elements
03 Mar, 2021
Create a line-on-sides heading
03 Mar, 2021
Make a table with equal column widths
02 Mar, 2021
Prevent a string from being escaped
01 Mar, 2021
Inspect an element shown on hover
01 Mar, 2021
Filter file types of a file input
01 Mar, 2021
Create a download link
01 Mar, 2021
Accept any numbers of parameters
01 Mar, 2021
Ignore items from array destructuring
28 Feb, 2021
Use short-circuits conditionals
27 Feb, 2021
Pretty format JSON
27 Feb, 2021
Log an array to the Console
27 Feb, 2021
Log a value to the Console
27 Feb, 2021
Get the current timestamp
27 Feb, 2021
Format a list
27 Feb, 2021
Return an object in an arrow function quickly
25 Feb, 2021
Manage multiple boolean flags
25 Feb, 2021
Create an object with dynamic keys
25 Feb, 2021
Use negative nth-child and nth-last-child
24 Feb, 2021
Show a placeholder for an empty list
24 Feb, 2021
Set content for an empty link
24 Feb, 2021
Separate list items
24 Feb, 2021
Remove the border from the last navigation item
24 Feb, 2021
Create a descending list of numbered items
24 Feb, 2021
Conditional logging in the Console
24 Feb, 2021
Use underscores to represent a number
23 Feb, 2021
Use the wbr tags to represent path
23 Feb, 2021
Swap two variables
23 Feb, 2021
Style broken images
23 Feb, 2021
Get rid of escaping quotes with template literal
23 Feb, 2021
Copy a long variable from the Console
23 Feb, 2021
Add an icon to external links
23 Feb, 2021
Remove a property from an object
22 Feb, 2021
Merge different arrays
22 Feb, 2021
Indicate img elements that miss alt attribute
22 Feb, 2021
Get characters of a string
22 Feb, 2021
Convert string to number
22 Feb, 2021
Trick
Open all links in new tabs
13 Apr, 2021
Create a custom emoji cursor
12 Apr, 2021
Add keyboard shortcuts
14 Mar, 2021
Shorten codes with the comma operator
06 Mar, 2021
Write CSS rules for Firefox only
04 Mar, 2021
Show the first letter only
04 Mar, 2021
Log a variable in an arrow function
25 Feb, 2021
Enforce required parameters
24 Feb, 2021
Track the focused element with Chrome DevTools
23 Feb, 2021
Override the behavior of instanceof
23 Feb, 2021
Recent posts ⚡
Build a simple code editor
03 Oct, 2023
innerText vs textContent
02 Oct, 2023
Truncate the content of an element
02 Oct, 2023
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
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