smnh

How to add a class to the body tag in Next.js

31 Jul 2021

If you are familiar with React Helmet, then you probably know that you can set attributes, such as className, to the <body> tag from any component in your code. Of course, the value of the className does not have to be static, you can use component’s props to set the value dynamically:

import React from "react";
import {Helmet} from "react-helmet";

export default function Layout(props) {
    return (
        <div>
            <Helmet>
                <meta charSet="utf-8" />
                <title>{ props.title }</title>
                <body className={ props.isDark ? 'dark-mode' : 'light-mode' } />
            </Helmet>
            ...
        </div>
    );
}

Unfortunately, you can’t set body class with Next’s next/head, at least not officially.

Managing Multi-Environment Configurations in Node.js

18 Jul 2021

If you ever struggled with managing your project configuration across multiple environments, then this article is for you.

While working with projects that can run on different environments (e.g., local, develop, staging, production), a typical pattern is creating configuration files per environment. For example, a project having three environments such as local, develop and production can have three configuration files:

.
├── config.local.json
├── config.dev.json
└── config.prod.json

Indexing and Searching Arbitrary JSON Data using Elasticsearch

20 Oct 2017

If you have ever worked with Elasticsearch, then you are probably familiar with one of the most important features of Elasticsearch - the [Dynamic Field Mapping]:

By default, when a previously unseen field is found in a document, Elasticsearch will add the new field to the type mapping.

Therefore, if you need to index documents with high similarity between their field names (dense data), including field types, then this default behaviour may be exactly what you want. However, if your documents have high variation of field names (sparse data), or have same field names but with different types, then you will need a different approach.

In this post I would like to show you how to create an Elasticsearch index that can be used to index arbitrary JSON data, including data with nested arrays and objects. All this, without exploding the index type mapping with arbitrary properties originating from the indexed data. Nevertheless, the indexed data will still be searchable by any of its fields, including any nested fields by specifying their path in a “dot” notation format. In addition, I will show how to use Elasticsearch aggregations to fetch a list of all of the available fields and their respective types of the indexed data.

Indexing and Searching Arbitrary Data in Elasticsearch

Extending events and attributes of the inherited backbone views

07 Feb 2015

I like Backbone Views because they introduce a conventional way to wrap HTML elements and their presentation logic in a single JavaScript class. Thus, allowing better organisation and reuse of my application views. In addition to that, by utilizing JavaScript prototypical inheritance, JavaScript classes can be further extended to allow even better code reuse. But sometimes, when I am extending Backbone.View classes, I also want to extend some of their properties instead of just overriding them.

Synchronizing rotation animation between the keyboard and the attached view - Part 2

28 Jan 2015

In the first part of this post I have explained how to synchronize rotation animation in iOS between its virtual keyboard and the view floating above it. Many things have changed since then, iOS 6, iOS 7 and now the iOS 8, which is the reason why I am writing the second part of that post. In short, Apple changed something in their iOS 8 implementation causing keyboard notifications observer methods to execute their code while animations are disabled. But only when notifications are posted as a consequence of an interface orientation change while the keyboard was visible.