A series of super tiny, quick tips, tricks and best practices of front-end development.

The series cover different topics:

• CSS
• HTML
• JavaScript
• TypeScript
• Browser developer tools

1. Clone the project:

$ git clone https://github.com/phuoc-ng/frontend-tips

2. Install the dependencies:

$ cd frontend-tips
$ npm install

3. Run it on the local:

$ npm run serve

Look at the console to see the Local URL. Open it in your browser to see it in action.

Pull requests are welcomed. To submit your favorite tip, please create a markdown file, and put it in the posts folder. The content of markdown file has to look like

---
title: ___
category: ___
date: ___
tags:
  - posts
layout: layouts/post.njk
topics: ___
---

The content of post

• title: Must match with the file name
• category: Can be one of tip, trick or practice
• date: The date that post is created
• topics: The list of topic(s), separated by a comma

Here is an example.

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

• Twitter
• dev.to
• Github

You might be interested in my products:

Products

• Blur Page - A browser extension to hide sensitive information on a web page
• Check Browsers Support - A browser extension to check browser compatibility without leaving your tab
• Fake Numbers - Generate fake and valid numbers
• Form Validation - The best validation library for JavaScript
• Intersection Observer Examples - Practical, real world examples of Intersection Observer
• React PDF Viewer - A React component to view a PDF document

Resources

• 1LOC - Favorite JavaScript utilities in single line of code
• CSS Layout - A collection of popular layouts and patterns made with CSS
• HTML DOM - How to manage HTML DOM with vanilla JavaScript
• Responsive Design Patterns - A collection of patterns to create a responsive web page
• Super tiny, quick tips, tricks and best practices of front-end development
• this VS that - The differences between ___ and ___ in the front-end development