• Stars
    star
    619
  • Rank 72,184 (Top 2 %)
  • Language MDX
  • License
    MIT License
  • Created over 3 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Super tiny, quick tips, tricks and best practices of front-end development

Front-end Tips

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

Running it on local

  1. Clone the project:
$ git clone https://github.com/phuocng/frontend-tips
  1. Install the dependencies:
$ cd frontend-tips
$ npm install
  1. Run it on the local:
$ npm run start

Open http://localhost:8081 in your browser to see it in action.

Contributing

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

---
title: ___
category: ___
date: '___'
topics: ___
---

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

Here is an example.

About

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

Be my friend on

More Repositories

1

csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
MDX
8,047
star
2

1loc

What's your favorite JavaScript single LOC (line of code)?
MDX
6,756
star
3

html-dom

Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 โญif itโ€™s useful.
MDX
6,512
star
4

this-vs-that

Understanding the difference between หหห and หหห in front-end development
MDX
1,470
star
5

css-animation

Popular CSS animation showcases. You don't need a CSS animation library for them.
MDX
99
star
6

react-drag-drop

Master the art of drag and drop in React
TypeScript
71
star
7

responsive-page

Collection of patterns to create a responsive website
TypeScript
63
star
8

mirror-a-text-area

Enhancing user experience through text area mirroring
HTML
62
star
9

fake-numbers

Generate fake, valid numbers. Check if a number is valid. Support a lot of different numbers: Credit card, EAN, ISBN, RTN, VIN, etc.
TypeScript
60
star
10

cross-browser

Techinques to deal with cross browser issues on the front-end side
MDX
31
star
11

placeholders

SVG-based placeholders in web components
TypeScript
28
star
12

master-of-react-ref

Your complete guide to mastering the use of "ref" in React
TypeScript
22
star
13

intersection-observer-examples

Practical, real world examples of Intersection Observer
15
star
14

frame

An iframe wrapper that resizes based on its content automatically
TypeScript
12
star
15

get-svg

A Chrome extension to download SVG from a webpage
JavaScript
12
star
16

javascript-proxy

Practical examples of using JavaScript Proxy
MDX
11
star
17

css-grid

Discover how to use CSS grid layout with real-life examples
9
star
18

phuocng

7
star
19

lit-web-component-aha

Aha moments when working with the Lit library
3
star