Skip to content
Maxim Orlov Logo

Helping Node.js developers write robust applications ๐Ÿš€

๐Ÿ’ก Handy Tips

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.

setTimeout Execution Time

๐Ÿ’ก A common misconception of setTimeout is:
"Execute this function in (exactly) x ms"

When in reality, you should think of it as:
"Execute this function no earlier than x ms"

setTimeout guarantees a *minimum* delay, but can't guarantee exact execution time

Front Matter CMS for VSCode

Just discovered https://frontmatter.codes by @eliostruyf and the idea of a built-in CMS right in your editor is genius! ๐Ÿ’ก

You can manage your articles & media. Create new articles from templates and preview them. I'm using it with @eleven_ty and it works great. Amazing ๐Ÿคฉ

What Is a Callback Function?

๐Ÿ’ก What is a callback function?

A function passed as an argument to another function in order to be called from *inside* that function.

Callback functions are often initialised anonymously and inlined in the function call.

Initialising two functions: printToConsole and getGreeting. printToConsole takes a single argument and console.logs it. getGreeting takes a string and a callback function as arguments and calls the callback function with "Hello" prepended to the string. Calling getGreeting with "Maxim" and printToConsole as arguments outputs: Hello Maxim Initialising a getGreeting function that takes two arguments: a name and a callback. getGreeting calls the callback function with "Hello" prepended to the name. Calling getGreeting with name="Maxim" and an inlined anonymous callback function which prints the argument to the console results in "Hello Maxim" as output

Skip to Content Link

๐Ÿ’กIncrease the accessibility of your website by adding a "Skip to content" link first thing after the opening body tag

It allows screen readers and keyboard users to jump straight to the content without having to go through other elements

An a tag with href="#main" right after the opening body tag. Followed by fictional navigation bar and headers, and then a main tag with id="main" holding the main content.

Using theme-color Meta Tag

๐Ÿ’ก Use the theme-color meta tag to create a seamless experience between the browser interface and your site's top nav bar:

โžก๏ธ <meta name="theme-color" content="#dc3838">

Works on Android (Chrome, Brave, Samsung) and iOS (Safari 15), as well as on desktop! (macOS Safari 15)

Screenshot of maximorlov.com homepage on desktop showing a red top navigation bar with a smooth transition to, an equally red, browser interface. Screenshot of maximorlov.com homepage on mobile showing a red top navigation bar with a smooth transition to, an equally red, mobile status bar.

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.