Skip to content
Maxim Orlov Logo

Helping Node.js developers write robust applications 🚀

💡 Handy Tips

A collection of 114 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.

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"

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

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.

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.