DEV Community: Taufik Nurrohman

CSS: Best Practices for Multi-Level Navigation

Taufik Nurrohman — Thu, 13 Jun 2024 15:00:49 +0000

Just get to the point, the key is to use the CSS adjacent sibling selector (the + selector), child selector (the > selector) and the new :focus-within pseudo-class selector:

/*
 * Hide sub-menu(s) by default.
 */
nav li ul {
  display: none;
}

/*
 * Image 1: Adjacent sibling selector to show the
 * closest sub-menu when a user focuses on a menu
 * item link that has a sub-menu next to it.
 */
nav li a:focus + ul {
  display: block;
}

/*
 * Image 2: Child selector to show the closest sub-menu
 * when a user hovers on a menu item with a sub-menu.
 */
nav li:hover > ul {
  display: block;
}

/*
 * Image 3: Focus-within selector to keep the sub-menu
 * visibility when a user moves the focus to the sub-menu
 * item link(s).
 */
nav li:focus-within > ul {
  display: block;
}

/*
 * Image 2: Child selector to keep the menu item link hover
 * effect when a user moves the pointer to the sub-menu.
 */
nav a:hover,
nav li:hover > a {
  background: blue;
}

Mecha CMS Installation Guide

Taufik Nurrohman — Sat, 07 Nov 2020 08:47:33 +0000

Mecha is a minimalist flat-file content management system written in PHP. Based on the experience that happened after the release of version 2.0.0, I found that so many users feel the difficulty in installing the application because of the documentation that is not beginner-friendly.

The following are dummy videos that demonstrate the installation process in a local web server. I don’t do much editing on them (not even at all), sorry. I will try my best in the future when the experience and resources are sufficient.

Step 1: Installing the Core CMS

~~This video demonstrates how slow my computer is.~~

This video demonstrates the steps for installing Mecha on a web server. The /media/taufik/0/web location path is a custom location that points to the root domain. On the original web server, that location will usually be in /var/www folder. Please consult with your web hosting provider about where you should upload these files.

There isn’t any music on this video. Use your own damn music player while watching this video.

Step 2: Adding Pages

This video demonstrates how to add pages in Mecha.

Step 3: Adding User Feature (Optional)

This video demonstrates how to install the user extension before installing the control panel feature.

Step 4: Adding Control Panel Feature (Optional)

This video demonstrates how to install the control panel feature in Mecha after installing the user extension.

Match Valid RGB/RGBA Color String using Range Pattern

Taufik Nurrohman — Sat, 24 Oct 2020 03:06:00 +0000

First, we need to match range from 0 to 9. This range is safe enough so you can just:

let range = /^[0-9]$/;

Then match range from 10 to 99:

let range = /^([0-9]|[1-9][0-9])$/;

Then match range from 100 to 199:

let range = /^([0-9]|[1-9][0-9]|1[0-9][0-9])$/;

Then match range from 200 to 249:

let range = /^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9])$/;

Last, match range from 250 to 255:

let range = /^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|2[0-5][0-5])$/;

You can narrow down the range pattern using alternative syntax. For example, use \d in place of [0-9]:

let range = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|2[0-5]{2})$/;

Test it!

for (let i = -100; i < 300; ++i) {
    if (range.test(i + "")) {
        console.log('[' + i + ']');
    } else {
        console.log(i);
    }
}

Matching RGB color string using the range pattern (with permissive white-spaces):

let range = '(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|2[0-5]{2})';

let rgb = new RegExp('^rgb\\(\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + range + '\\s*\\)$');

To match RGBA color string, you need to create alpha range. First, match range from 0 to 1:

let alpha = /^(0|1)$/;

Then match the decimal point prefixed by 0:

let alpha = /^(0|0\.[0-9]+|1)$/;

Sometimes, leading zero is not required, so:

let alpha = /^(0|0?\.[0-9]+|1)$/;

Narrow down the pattern:

let alpha = /^([01]|0?\.\d+)$/;

To match RGBA color string:

let range = '(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|2[0-5]{2})';
let alpha = '([01]|0?\\.\\d+)';

let rgb = new RegExp('^rgba\\(\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + alpha + '\\s*\\)$');

To match both RGB and RGBA color string:

let range = '(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|2[0-5]{2})';
let alpha = '([01]|0?\\.\\d+)';

let rgb = new RegExp('^(?:rgb\\(\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + range + '\\s*\\)|rgba\\(\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + range + '\\s*,\\s*' + alpha + '\\s*\\))$');

Match Valid HEX/HEX+A Color String using Regular Expression

Taufik Nurrohman — Sat, 24 Oct 2020 03:02:00 +0000

HEX color normally accept 6 input of 0 to 9 and a to f excluding the hash prefix, and they are case insensitive. I put the important part in a group just in case you want to take it using exec() or match():

let color = /^#([a-f0-9]{6})$/i;

Sometimes, HEX color can be narrowed down into 3 input (e.g. from #aabbcc to #abc):

let color = /^#((?:[a-f0-9]{1,2}){3})$/i;

FYI, current CSS specification allow us to store alpha channel in a HEX color. So #000000, #000, #000000ff and #000f means black. #00000000 and #0000 means transparent:

let color = /^#((?:[a-f0-9]{1,2}){3,4})$/i;

Narrow down the pattern:

let color = /^#((?:[a-f\d]{1,2}){3,4})$/i;

Type Checking in JavaScript

Taufik Nurrohman — Sun, 18 Oct 2020 16:19:52 +0000

I like to group all type checking tasks into helper functions like this to be used internally. This has the advantage in case of code minification ¹

function isArray(x) {
    return Array.isArray(x);
}

function isBoolean(x) {
    return false === x || true === x;
}

function isElement(x) {
    return x instanceof Element;
}

function isFloat(x) {
    return isNumber(x) && 0 !== x % 1;
}

function isFunction(x) {
    return 'function' === typeof x;
}

function isInteger(x) {
    return isNumber(x) && 0 === x % 1;
}

function isNull(x) {
    return null === x;
}

function isNumber(x) {
    return 'number' === typeof x;
}

function isNumeric(x) {
    return /^-?(?:\d*\.)?\d+$/.test(x + "");
}

function isObject(x, isPlainObject) {
    if ('object' !== typeof x) {
        return false;
    }
    return isPlainObject ? x instanceof Object : true;
}

function isPattern(x) {
    return x instanceof RegExp;
}

function isSet(x) {
    return 'undefined' !== typeof x && null !== x;
}

function isString(x) {
    return 'string' === typeof x;
}

These functions are very inspired by PHP which already has standard functions such as is_array(), is_object(), is_string(), etc.

There was a proposal to allow users to write the type checking as if ($int instanceof int) {} expression somewhere. I don’t know where the page is. I couldn’t find it anymore.

Update: found it!

Update: Is now available as Node.js module.

taufik-nurrohman / is

Conditional utility.

Conditional Utility

I like to group all type checking tasks into helper functions like this to be used internally. This has the advantage in case of code minification.

These functions are very inspired by PHP which already has standard functions such as is_array(), is_object(), is_string(), etc.

Usage

CommonJS

const {isString} = require('@taufik-nurrohman/is');

console.log(isString('false'));

ECMAScript

import {isString} from '@taufik-nurrohman/is';

console.log(isString('false'));

Methods

isArray(any)

isBoolean(any)

isDefined(any)

isFloat(number)

isFunction(any)

isInstance(object, constructor, exact = false)

isInteger(number)

isNull(any)

isNumber(any)

isNumeric(string)

isObject(any, isPlain = true)

isScalar(any)

isSet(any)

isString(any)

isVoid(any)

View on GitHub

Unless you specify it as object property in the library like jQuery.isString = function(x) {};. You cannot minify object property in any way. ↩

What Are Your Tips for Getting More Stars on GitHub?

Taufik Nurrohman — Sun, 04 Oct 2020 10:39:17 +0000

… and also, to generate passive income through it?

I understand that you cannot make ends meet and buy a house with GitHub stars but I’m sure that GitHub stars deserves to be used as a lite version for “testimonials”. It’s like Facebook like button compared to Facebook comments. This may be useless but people use stars as a parameter to make choices from several similar GitHub projects (I did that too). So, I think getting more stars is a good first step.

I have several open source projects on GitHub and found the fact that the complexity of the project didn’t determine the number of stars. This made me think that it might be futile to continue working with complex projects if I could get more responses and stars from simple projects. The following are some of the things I have found based on my experience:

People give stars when they think the project is useful to them. I created the project because it was useful to me, and therefore I will use it again in another place, and therefore I published it on GitHub. But not all projects get the number of stars as I describe myself rating my own projects.
People give stars to projects with simple, meaningful names.
People prefer projects that are in the shape of “plugin” that can be used and combined with larger projects.
People give stars to the project which is an extension for the base project that has a large number of stars. For example, you are creating a plugin for Vue. You get a lot of stars because of the popularity of Vue.

I came to this conclusion through my GitHub projects in which I hoped to get the number of stars at a proportional level to the complexity of the project, but the opposite happened.

@mecha-cms/mecha has a complex structure and a lot of consideration for every feature decision it makes, but it doesn’t get as many stars because the name doesn’t mean anything and not everyone uses it. Content management systems need a web hosting as a place to try them out. It was intended to be used stand-alone, not to be combined or to improve the features of other projects. It was to be used as a center application with its default features, so that other projects can improve it.

On the other hand, @taufik-nurrohman/color-picker got more stars because the name is simple and has meaning as it is. It has a simpler structure but its “plugin-like” nature has made this project more desirable.

I don’t do advertising, and don’t ask other people to share my project with others, literally.

I am not a programmer in a professional way and currently doing all these things as a hobby. I didn’t get the existing knowledge through formal IT education (web development is an achievable task for me as I have a web browser installed by default in my computer), and therefore It was easy for me to release them as open source projects without having the feeling that I would be losing out on making it all for free.

But seeing how developers could get small amounts of money and financial support through other people that used their projects, made me think that maybe I could retire in the future through digital products.

I’m still healthy now. 27 years old, working as a nurse in my own country. I don’t have any binding expenses and debt, but also not that rich. But I know that someday I will get old and sick so that I can’t work anymore like now.

Working for the government is not a solution to me. As pension funds is basically their own money, which was forced to be saved when they were young and productive. They also have stiff (and sometimes unfair) competition.

~~There are “privileges” and such.~~

Shame on me, maybe I’m just not smart enough to compete.

In the past, people were able to live by royalty for the books and musics they created. Passive income is not something new actually. And now I see digital products as a new passive income potential.

What are your tips for making my projects (and readers’ projects) more popular? Can my existing projects still be improved? Should I make the concepts “smarter” for my future projects and leave the existing projects as they are?

Do you guys have any experience getting passive income through individual GitHub projects? What experiences can you share? Do you do advertising? Do I need to do advertising for open source projects? Will my investments return?

Thank you very much.

Photo Credit: Isaac Smith on Unsplash

The `import()` Syntax of ES2020 Looks Promising; How to Detect if Such Feature Available Then?

Taufik Nurrohman — Sat, 20 Jun 2020 00:12:31 +0000

With the plan, import() is proposed to work in both modules and scripts, giving script code an easy asynchronous entry point into the module world and allowing it to start running module code.

https://www.infoworld.com/article/3538809/ecmascript-2020-spec-for-javascript-approved.amp.html

Can I check the existence of this feature as it was a function? And if that is possible, is it conform to the standard?

What I am thinking:

if ('function' === typeof import) {
    import('taufik-nurrohman/f3h.js').then(F3H => {
        let f3h = new F3H;
    });
}

Also, how do I expose module in the file to import, without causing syntax errors in the window environment?

// :|
if ('function' === typeof import) {
    export default F3H;
} else {
    window.F3H = F3H;
}

Thanks!

When Does Arrow Function Become Useless?

Taufik Nurrohman — Fri, 05 Jun 2020 14:50:08 +0000

Arrow function loses its benefits when used like this:

for (let i = 0, j = elements.length; i < j; ++i) {
  elements[i].addEventListener('click', () => {
    // `this` of what?
    alert(this.textContent);
  }, false);
}

And like this:

for (let i = 0, j = elements.length; i < j; ++i) {
  elements[i].addEventListener('click', () => {
    // The value of `i` has already changed to the maximum index
    // because the loop is already complete even before
    // we decide to click on `elements[i]`
    alert(elements[i].textContent);
  }, false);
}

Any others?

This Code Snippet Will Make You Think That `switch ... case` Statements Are Obsolete

Taufik Nurrohman — Sun, 29 Dec 2019 16:13:03 +0000

Before

let b;

switch (a) {
  case '#':
    b = 'one';
    break;
  case '##':
    b = 'two';
    break;
  default:
    b = 'unknown';
}

After

let b = ({
    '#': 'one',
    '##': 'two'
})[a] ?? 'unknown';

Bringing `KeyboardEvent.key` and `KeyboardEvent.keyCode` Altogether for the Best Keyboard Interaction Experience

Taufik Nurrohman — Thu, 05 Dec 2019 02:24:23 +0000

Photo by Sathesh D from Pexels

In ancient times, we were depending on the KeyboardEvent.keyCode property for so long to detect which key we were pressing on the keyboard:

node.addEventListener('keydown', e => {
    if (13 === e.keyCode) {
        // Do something with `Enter` key
    }
}, false);
~~~{% endraw %}

Years have passed and the diversity of today&rsquo;s [keyboard layout](https://en.wikipedia.org/wiki/Keyboard_layout) makes me even more horrified. Most of us still using that old method to support the _en-US_ keyboard standard only (either consciously or not), which then gives us the possibility of unexpected results on other keyboard layouts. For example, on the Russian keyboard layout, the {% raw %}`,` key stands together with the `Б` key, so that when we have a custom keyboard interaction that requires the detection of comma character to perform certain actions, then usually that action will also be triggered when we actually want to type `Б`. We literally has ignored other keyboard layouts either because of lack of knowledge or because we feel that it just too much to be able to support all of them.

<figure>
  <img alt="Russian Keyboard" src="https://user-images.githubusercontent.com/1669261/70196397-29cc8500-173b-11ea-9091-fafcc444dbb4.png">
  <figcaption>Russian Keyboard</figcaption>
</figure>

Long story short, the {% raw %}`KeyboardEvent.keyCode`{% endraw %} is now deprecated. We now have a better alternative: {% raw %}`KeyboardEvent.key`{% endraw %} that displays whatever characters we type on an input without caring about the type of keyboard layout that we are currently using. It also works on non-printable characters such as that <kbd>Enter</kbd> and <kbd>Backspace</kbd> key which will produce {% raw %}`'Enter'`{% endraw %} and {% raw %}`'Backspace'`{% endraw %} string accordingly.{% raw %}

~~~ js
node.addEventListener('keydown', e => {
    if (',' === e.key) {
        // Do something with `,` key
    }
}, false);
~~~{% endraw %}

It&rsquo;s so cool that I want to pee here. Unfortunately, this feature is still not widely supported, especially on mobile devices. So it&rsquo;s better to use both of them to get the best results:{% raw %}

~~~ js
node.addEventListener('keydown', e => {
    let key = e.key,
        keyCode = e.keyCode;
    if (key && ',' === key || keyCode && 188 === keyCode) {
        // Do something with `,` key
    }
}, false);
~~~{% endraw %}

Since {% raw %}`KeyboardEvent.keyCode`{% endraw %} value mostly in line with character codes from the ASCII table, some people also like to use this method. Although this method will not work on non-printable characters, at least we try to give the best results with {% raw %}`KeyboardEvent.key`{% endraw %} as priority:{% raw %}

~~~ js
node.addEventListener('keydown', e => {
    let key = e.key || String.fromCharCode(e.keyCode);
    if (',' === key) {
        // Do something with `,` key
    }
}, false);
~~~{% endraw %}

For devices that support {% raw %}`KeyboardEvent.key`{% endraw %}, a key that cannot be identified will return {% raw %}`'Unidentified'`{% endraw %}. This case becomes very strange when I try to check it on my mobile device as it always produces {% raw %}`'Unidentified'`{% endraw %} on any key:

<figure>
  <img alt="Google Chrome on Android Device" src="https://user-images.githubusercontent.com/1669261/70196398-2a651b80-173b-11ea-8f3f-dfa115e9b27b.jpg" width="300" height="513">
  <figcaption>Chrome 78.0.3904.108</figcaption>
</figure>

Normally, when an object property does not exists (no {% raw %}`key`{% endraw %} property means no support for {% raw %}`KeyboardEvent.key`{% endraw %}), it should return {% raw %}`undefined`{% endraw %}. But it **wasn&rsquo;t**. This leads me to conclude that {% raw %}`KeyboardEvent.key`{% endraw %} feature might already exist on my device, it&rsquo;s just that it&rsquo;s not working properly.

Maybe, the last way that looks pretty hacky but just works in an urgent situation is to check the last character that we entered. But since the last character don&rsquo;t exist (yet) as the {% raw %}`keydown`{% endraw %} event is being performed, we need to delay the action in a fraction of a millisecond before retrieving the incoming characters:{% raw %}

~~~ js
node.addEventListener('keydown', e => {
    // First try
    if ( /* … */ ) {
        // Do something with `,` key
    } else {
        setTimeout(() => {
            // Second try
            if (',' === node.value.slice(-1)) {
                // Do something with `,` key
            }
        }, 1);
    }
}, false);
~~~{% endraw %}

You can also use the [Text Selection Range API](https://github.com/taufik-nurrohman/text-editor) to handle this if you want to check the last character **exactly before the caret**, but it&rsquo;s just too much, especially for HTML elements with `contenteditable` attribute (they simply have different API). And if you decide to use it, then it might be more beneficial for you to detect those characters through the incoming values and so forget about the `KeyboardEvent.key` feature detection.

By the way, the following is a project that I have made using the above concept. It beautifies your text input into a &ldquo;tags&rdquo; input, sort of. It also has better keyboard interaction support such as removing tags using <kbd>Delete</kbd> and <kbd>Backspace</kbd> keys. You can also navigate to other tags using the arrow keys:

{% github taufik-nurrohman/tag-picker %}