Front-end Tips

Front-end Tips is an open-source collection of super tiny, quick tips, tricks, and best practices for front-end development, covering CSS, HTML, JavaScript, TypeScript, and browser developer tools. The project is built with Eleventy, a static site generator, and is authored by Nguyen Huu Phuoc.

What is Front-end Tips?

Front-end Tips is a GitHub-hosted repository where each tip is a short markdown post stored in the contents folder. The project's core function is to publish learnable front-end development lessons in a few sentences each, with a consistent structure that makes them easy to browse, search, and contribute to. The repository is maintained by Nguyen Huu Phuoc, who describes himself as a product builder and knowledge sharer.

Key Features

• Quick-hit format — Each tip is intentionally super tiny, focusing on one trick, tip, or best practice at a time so readers can absorb a new lesson in under a minute.
• Markdown + YAML front matter — Tips are written as plain .md or .mdx files with front matter that includes category, created, tags, and title. The title must exactly match the filename, as shown in the convert-string-to-number example.
• Content categories — Posts are tagged as Tip, Trick, or Practice, giving a lightweight taxonomy beyond topic.
• Topic coverage — The series spans CSS, HTML, JavaScript, TypeScript, and browser developer tools, making it a single source for multiple front-end disciplines.
• Eleventy-powered static site — The repository's metadata lists eleventy as a topic, indicating it builds into a static site using the Eleventy generator.
• Community contributions — The README invites pull requests and provides a clear contribution workflow: create a markdown file, fill out the front matter, and submit it.

Who is it for?

Front-end Tips is aimed at developers who want to sharpen their front-end skills without committing to long tutorials. It's a useful resource for:

• Self-taught developers — reading one compact tip per day builds familiarity with browser APIs and CSS/JS quirks across many topics.
• Working professionals — quick reference for common tasks, such as converting a string to a number, can save time during daily development.
• Community contributors — developers who have their own favorite trick can share it by opening a pull request, gaining visibility via the project's GitHub stars and contributor credits.

What can you do with it?

• Learn a tip quickly: Open any post and read a self-contained lesson; for example, the included sample explains how to convert a string to a number.
• Contribute your own tip: Follow the documented markdown format, place the file in the contents folder, and submit a pull request for review.
• Reference across topics: Use the tag list to filter tips by the technology you're currently working on, whether that's CSS layout, HTML semantics, JavaScript APIs, or TypeScript types.

How does it work?

The project's structure is simple: all tips live in the contents folder as markdown files. To add a new tip, you create a file with a title matching the filename, set the front matter fields (category, created, tags), and write the tip content. Then you open a pull request, and once merged, the tip becomes part of the static site built by Eleventy.

Pricing

Front-end Tips is free to read and contribute to. The entire repository is publicly accessible on GitHub, and the README does not mention any paid tier or premium content.

FAQ

How can I contribute a tip?

Create a markdown file in the contents folder using the format shown in the README: fill in category, created, tags, and title in the front matter, then submit a pull request. The project's maintainer welcomes contributions.

What topics are covered?

The series covers CSS, HTML, JavaScript, TypeScript, and browser developer tools. Within these, tips are further classified as Tip, Trick, or Practice depending on what they demonstrate.

Is Front-end Tips free?

Yes, it's an open-source project. The repository is public on GitHub and everything is accessible without payment.

What file format do tips use?

Tips use Markdown, and the example file is an .mdx file, which means MDX is supported for any interactive content. The required front matter must include category, created, tags, and title.

Who developed Front-end Tips?

Nguyen Huu Phuoc created the project. He describes himself as a product builder and knowledge sharer and links to his Twitter and GitHub profiles from the README.