Skip to content

Tips

Handy tips always at your fingertips

A collection of 123 tips that come in real handy when you need them. Originally posted as tweets on my Twitter account, and now gathered here so you can browse them easily.

Using Data Attributes

💡 Use the data-* naming convention to pass custom data to HTML elements

Then in JavaScript you can access the data through the `dataset` property

A div element inside an HTML page with two custom data attributes: data-country and data-city. We grab the element in JavaScript and access the custom data through the dataset property: document.querySelector('#card').dataset. Read tip

TypeScript Declarations for NPM Packages

💡 You can tell if a library ships with @TypeScript type declarations by the icon next to its name in @npmjs

TS = ships with declarations, no need to install types separately
DT = declarations available at @types/... (icon links to declarations package)

Screenshot of Vue package in NPM showing TS icon next to its name with the text: "This package contains built-in TypeScript declarations." Screenshot of Express package in NPM showing DT icon next to its name with the text: "This package has TypeScript declarations provided by @types/express" Read tip

Node.js Port Already in Use

💡 Failing to start a Node.js server because port is already taken? "Error: listen EADDRINUSE" 🚫

👉🏼 kill-port will kill the process running on a specific port. Works on MacOS/Unix and Windows

➡️ npx kill-port 3000

https://github.com/tiaanduplessis/kill-port

Read tip

Copyright Format in Website Footer

💡 Copyright in the website footer, how do you format it?

👉🏼 <copy> <date> <author>

<copy> - Copyright, Copr. or ©
<date> - Years of publication, e.g. 2019-2021 or 2021
<author> - Name or Company name

I use: Copyright 2019-2021 Maxim Orlov

Read tip

Debug Srcset and Sizes Attributes in Images

💡 Working with srcset and sizes and looking for easier debugging of what the browser does?

👉🏼 Import responsive-image-test by @OliverJAsh and hook it up to your image. It will console computed and real widths for you to compare. ✨

Importing responsive-image-test from unpkg and hooking it to an image with observeSizes function. Read tip

Using HTML Tags in Markdown

💡 Using *aside* tag in Markdown for (side-)notes in articles?

👉🏼 Make sure to add an empty line between the tag and the content to have it rendered in Markdown instead of raw HTML.

Two examples of markdown content inside an aside HTML tag surrounded with, and without, empty lines. Two examples showing raw formatted content, and content parsed as markdown. Read tip

Find Nearest Tailwind Colour

💡 Looking for a default @tailwindcss colour that is a close match to another colour?

👉🏼 This tool shows you the Tailwind class that's the closest match to a given colour. Even tells you how to extend your config to include the full palette.

https://find-nearest-tailwind-colour.netlify.app/

Read tip

Practice Algorithms and Data Structures in JavaScript

💡 Preparing for an interview and need to brush up on your data structures and algorithms knowledge?

👉🏼 This repository gem by @Trekhleb has many #JavaScript implementations with comprehensive explanations.

https://github.com/trekhleb/javascript-algorithms

Read tip