DEV Community: Nam Phạm

Bionic Reading on bionic-reading.com

Nam Phạm — Sun, 27 Mar 2022 17:53:39 +0000

I recently visited https://bionic-reading.com/. Here comes a new idea that I find interesting that is making the first few letters of a word bold in the text will make the it easier to read. 😃 I'm not sure if this actually makes the text easier to read or if it's just easier for some people but I like this idea and I find it applicable to websites, especially https://bionic-reading.com/ itself. 😄 So what is the method? Userscript then. 😄 A Userscript running on each web page and bionic reading mode enabled would be a reasonable solution. So in this article, I will show you how to write a simple userscript to enable bionic reading in thick text web pages and hopefully it will make the text easier to read for you. This is a rough idea, so the algorithm used in this userscript will be simple and not as complete as the original page with the main purpose for you to understand how to do it can customize at your discretion then. 😁

Idea

We will build code based on the ideas outlined and that is the first

Decompose a string into words

Given you a string, how can you decompose them into words? The solution I use is a regular expression combined with a generator.

Build a regular expression

I built a regular expression named PIECE_PATTERN to capture words. Here, I want to preserve spaces so this regular expression will be

const PIECE_PATTERN = /(?<space>\s+)|(?<word>\S+)/y;

This regular expression will capture words and spaces in turn, so remember to pay attention to the sticky mode (the ending y).

Next we will

Build a generator to generate a string

Generator will have the following code

function  *wordize(str) {
    let pattern = new RegExp(PIECE_PATTERN);
    let m;

    while (m = pattern.exec(str)) {
        if (m.groups.space) {
            yield {
                text: m.groups.space,
                space: true
            };
            continue;
        }

        yield {
            text: m.groups.word,
            space: false
        };
    }
}

Using regular expression's exec and sticky suffix, we can easily split string into words

Making the first few letters bold

The bionic reading site's algorithm is quite sophisticated and as I said before, I implemented just a simple algorithm. Its idea is: you have a value of level to indicate the number of characters you want to make them bold at the beginning. If level == 1 you make half the characters bold, If level == 2 you make one quarter of the characters bold and so on. I should have built my own function for this but integrated version would be better so I make the code into the makeBionicTextSpan function, which takes a string and will create a span element corresponding to that string including the head and tail part. To do that we do the following:

Decompose strings into words

Using the for loop as below will do the job

for (let piece of wordize(text))

And with every word we fetch

Word processing

If the fetched word is spaces, we simply create a text node and add the resulting span element. If it's is the opposite then

Calculate the number of bold characters of the word

By default, the number of bold characters n will be 1. Based on level, if the length of the string is significantly greater than 2^level or 1 << level, we will halve that number of characters until level reaches the value 0 . During that process, if the number of characters is odd, we will add one to that number. And so our code to find n is going to be

let str = piece.text;
let n = 1;

if (str.length > 1 << level) {
    n = str.length;
    let l = level;

    while (l) {
        if (n & 1)
            n++;

        n >>= 1;
        l--;
    }
}

Having calculated n we

Split string into two parts

It's span.bionic-head and span.bionic-tail with the code

let head = document.createElement("span");
let tail = document.createElement("span");

head.textContent = str.substr(0, n);
tail.textContent = str.slice(n);

head.classList.add(HEAD_CLASS_NAME);
tail.classList.add(TAIL_CLASS_NAME);

span.appendChild(head);
span.appendChild(tail);

And the full code is

function makeBionicTextSpan(text, level = 1) {
    if (!text.length || level < 0)
        return null;

    let span = document.createElement("span");

    for (let piece of wordize(text)) {
        if (piece.space) {
            span.appendChild(document.createTextNode(piece.text));

            continue;
        }
        let str = piece.text;
        let n = 1;

        if (str.length > 1 << level) {
            n = str.length;
            let l = level;

            while (l) {
                if (n & 1)
                    n++;

                n >>= 1;
                l--;
            }
        }

        let head = document.createElement("span");
        let tail = document.createElement("span");

        head.textContent = str.substr(0, n);
        tail.textContent = str.slice(n);

        head.classList.add(HEAD_CLASS_NAME);
        tail.classList.add(TAIL_CLASS_NAME);

        span.appendChild(head);
        span.appendChild(tail);
    }

    return span;
}

Replace text nodes below any element

The technique I use here is recursion with the function makeBionicElement(el, level) where el is the element to be processed.

Replaces the text nodes of the current element

I use XPath here to list all the text nodes of the current element and replace them with the span generated from the makeBionicTextSpan function above. So our code is

let texts = document.evaluate("./text()", el, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0; i < texts.snapshotLength; i++) {
    let node = texts.snapshotItem(i);

    if (el.classList.contains(HEAD_CLASS_NAME) || el.classList.contains(TAIL_CLASS_NAME) || FULL_SPACES_PATTERN.test(node.textContent))
        continue;

    let bionic = makeBionicTextSpan(node.textContent, level);

    if (bionic)
        el.replaceChild(bionic, node);
}

Same applies to elements below the current element

This is done by calling the makeBionicElement(el, level) function itself for successive elements like code below

for (let child of el.children)
    if (!IGNORED_TAGS.includes(child.tagName.toLowerCase()))
        makeBionicElement(child, level);

Here you will see that I do not apply to some tags like code or pre

Add style and apply to body

I used a simple style here for testing, you can tweak it if you want

let sty = document.head.appendChild(document.createElement("style"));
sty.textContent =
    `
    span.bionic-head{
        font-weight: 450 !important;
    }
    span.bionic-tail{
        font-weight: lighter !important;
        opacity: 40% !important;
    }
    `
makeBionicElement(document.body, 1);

And such,

Our complete script will be

// ==UserScript==
// @name     Bionic reading
// @version  1
// @grant    none
// ==/UserScript==

const PIECE_PATTERN = /(?<space>\s+)|(?<word>\S+)/y;
const FULL_SPACES_PATTERN = /^\s+$/g;
const HEAD_CLASS_NAME = "bionic-head";
const TAIL_CLASS_NAME = "bionic-tail";
const IGNORED_TAGS = Object.freeze(["code", "kbd", "pre"]);

function  * wordize(str) {
    let pattern = new RegExp(PIECE_PATTERN);
    let m;
    while (m = pattern.exec(str)) {
        if (m.groups.space) {
            yield {
                text: m.groups.space,
                space: true
            };
            continue;
        }

        yield {
            text: m.groups.word,
            space: false
        };
    }
}

function makeBionicTextSpan(text, level = 1) {
    if (!text.length || level < 0)
        return null;

    let span = document.createElement("span");

    for (let piece of wordize(text)) {
        if (piece.space) {
            span.appendChild(document.createTextNode(piece.text));

            continue;
        }
        let str = piece.text;
        let n = 1;

        if (str.length > 1 << level) {
            n = str.length;
            let l = level;

            while (l) {
                if (n & 1)
                    n++;

                n >>= 1;
                l--;
            }
        }

        let head = document.createElement("span");
        let tail = document.createElement("span");

        head.textContent = str.substr(0, n);
        tail.textContent = str.slice(n);

        head.classList.add(HEAD_CLASS_NAME);
        tail.classList.add(TAIL_CLASS_NAME);

        span.appendChild(head);
        span.appendChild(tail);
    }

    return span;
}

function makeBionicElement(el, level = 1) {
    if (!el.tagName)
        return;

    let texts = document.evaluate("./text()", el, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

    for (let i = 0; i < texts.snapshotLength; i++) {
        let node = texts.snapshotItem(i);

        if (el.classList.contains(HEAD_CLASS_NAME) || el.classList.contains(TAIL_CLASS_NAME) || FULL_SPACES_PATTERN.test(node.textContent))
            continue;

        let bionic = makeBionicTextSpan(node.textContent, level);

        if (bionic)
            el.replaceChild(bionic, node);
    }

    for (let child of el.children)
        if (!IGNORED_TAGS.includes(child.tagName.toLowerCase()))
            makeBionicElement(child, level);
}

let sty = document.head.appendChild(document.createElement("style"));

sty.textContent =
    `
    span.bionic-head{
        font-weight: 450 !important;
    }
    span.bionic-tail{
        font-weight: lighter !important;
        opacity: 40% !important;
    }
    `

makeBionicElement(document.body, 1);

Results achieved on bionic reading page

When I apply the script on bionic reading page, the result will be as follows (you can compare with the original website)

Thought

This is an interesting idea although I am not sure if it will benefit you but I hope it brings a new experience to you. 😊 Have a nice day with this userscript then. 😊

PS: This userscript is broken on some pages so maybe I will update in the near future. 😉

JS Simple Trie Implementation

Nam Phạm — Sat, 25 Dec 2021 14:10:05 +0000

Introduction

As you know, Trie performs quite well on string operations such as searching and extracting a substring, especially when you have many substrings to search and simply performing normal search operations will It takes a lot of time and so in this article, I will show you a simple implementation of Trie data structure in JS language. 😃 You can use this implementation to understand how Trie works and use some of the available functions I provide. 😃 Note that this version is still quite simple and therefore may in some cases not be good for performance. 😅

Implementation

The first thing you need is function(s) that lists the characters from a given string. I named these functions forwardChars and backwardChars respectively (they are generators). The Trie structure that I implement can allow you to search for a substring ending in a certain position, and that will be more convenient for you when performing tasks that involve replacing strings in textarea elements of html. And the code should be straight forward as following:

function* forwardChars(str, index) {
    index |= 0;

    if (index < 0)
        index = 0;

    for (let i = index; i < str.length; i++)
        yield str.charCodeAt(i);
}

function* backwardChars(str, index) {
    if (index >= str.length || !Number.isSafeInteger(index)) {
        index = str.length;
        index--;
    }

    for (let i = index; i >= 0; i--)
        yield str.charCodeAt(i);
}

In this version, I will use character codes instead of plain characters.

Next, I implemented the TrieNode structure in Trie. The structure is pretty simple, it's an object that holds a codes mapping that maps from the next character code to the next TrieNode. In TrieNode, I provide only one method which is next to get the next node based on the given character code. ensure parameter to ensure a new node will be created instead of null being returned. And so, our source code will be

class TrieNode {
    constructor() {
        this.codes = new Map();
    }

    next(code, ensure) {
        if (!this.codes.has(code)) {
            let next = null;

            if (ensure) {
                next = new TrieNode();
                this.codes.set(code, next);
            }

            return next;
        }

        return this.codes.get(code);
    }
}

Next, we will have the Trie class, which is the main class in the entire source code. In Trie we will have

The constructor which is used to create a root node which is a TrieNode. Here, we will have the forward parameter to choose between forward or backward mode
The add(str) function will add a substring str to Trie
The match(str, index) function will match the substring str at position index and return the matched substring presented in Trie

And so our source code will be

class Trie {
    constructor(forward = true) {
        this.root = new TrieNode();
        this.listChars = forward ? forwardChars : backwardChars;
    }

    add(str) {
        let current = this.root;

        for (let code of this.listChars(str))
            current = current.next(code, true);

        current.terminated = true;
    }

    match(str, index) {
        let forward = this.listChars == forwardChars;
        let current = this.root;
        let count = 0;
        let length = 0;

        index |= 0;

        for (let code of this.listChars(str, index)) {
            count++;
            current = current.next(code, false);

            if (!current)
                break;

            if (current.terminated)
                length = count;
        }

        return str.substr(forward ? index : ++index - length, length);
    }
}

Combine them all and the full source code is

function* forwardChars(str, index) {
    index |= 0;

    if (index < 0)
        index = 0;

    for (let i = index; i < str.length; i++)
        yield str.charCodeAt(i);
}

function* backwardChars(str, index) {
    if (index >= str.length || !Number.isSafeInteger(index)) {
        index = str.length;
        index--;
    }

    for (let i = index; i >= 0; i--)
        yield str.charCodeAt(i);
}

class TrieNode {
    constructor() {
        this.codes = new Map();
    }

    next(code, ensure) {
        if (!this.codes.has(code)) {
            let next = null;

            if (ensure) {
                next = new TrieNode();
                this.codes.set(code, next);
            }

            return next;
        }

        return this.codes.get(code);
    }
}

class Trie {
    constructor(forward = true) {
        this.root = new TrieNode();
        this.listChars = forward ? forwardChars : backwardChars;
    }

    add(str) {
        let current = this.root;

        for (let code of this.listChars(str))
            current = current.next(code, true);

        current.terminated = true;
    }

    match(str, index) {
        let forward = this.listChars == forwardChars;
        let current = this.root;
        let count = 0;
        let length = 0;

        index |= 0;

        for (let code of this.listChars(str, index)) {
            count++;
            current = current.next(code, false);

            if (!current)
                break;

            if (current.terminated)
                length = count;
        }

        return str.substr(forward ? index : ++index - length, length);
    }
}

Using the class

The thing you should focus here is the Trie class. Using the class is simple: initialize one, add substrings to it using add method and the call match on the string you want to extract at index position. So the code

let ft = new Trie(); // this is forward trie

ft.add('abc');
ft.add('abcdef');
ft.add('xyz');

ft.match('abc', 0); // return 'abc'
ft.match('abc', 1); // return ''
ft.match('ab', 0); // return ''
ft.match('abcdef', 0); // return 'abcdef'
ft.match('abcdef', 1); // return ''
ft.match('xabcdef', 0); // return ''
ft.match('xabcdef', 1); // return 'abcdef'
ft.match('xyz', 0); // return 'xyz'
ft.match('xyz', 1); // return ''
ft.match('qxyz', 0); // return ''

let bt = new Trie(false); // this is backward trie

bt.add('abc');
bt.add('abcdef');
bt.add('xyz');

bt.match('abc', 2); // return 'abc'
bt.match('abc', 1); // return ''
bt.match('xabc', 3); // return 'abc'
bt.match('xyz', 2); // return 'xyz'

I hoped the implementation helped you see how to implement such a simple Trie in JS and hoped it can help you with search operations on strings. 😃 Have a nice day then. 😊

Embed deeplinks.js into userscript

Nam Phạm — Sat, 11 Dec 2021 15:12:40 +0000

Recently, I came to a js libary that allows you to link to any text selection of a web page. That is deeplinks.js, which is here. It would be useful that your link points directly to the section you need especially the page is long. It would require the author of the page to use the deeplinks.js libary in order for the library to work but what if most of the pages does not include that library? So it would be nice to use the library even without the author including it. The solution is, of course, using a userscript. So I'm going to show you how to embed this library into a userscript and use it.

`Deeplink.js` the library

While the library can be found in the above link, it would require you to build the library. Because I'm lazy, I'm going to use the pre-built library in the example given in the repository, which is this one.

You should also note that this library can only work on pages with minimum changes. Generated page generally don't work and the library is truly useful when it comes to long pages.

Once included in a web page, you can select a text portion and the library will generate the link directly into the page url in a form of fragment identifier.

Userscripts and Greasemonkey

In order to use userscripts, you need a browser extension to do so. In Firefox, it's Greasemonkey. In Chrome, you can use TamperMonkey or the like. Userscripts would be activated on the specified pages so check your scripts before running them for security concerns.

Writing the script

The idea of writing this script is simple: create the script element, set the text content to the library and insert it into the body element. The problem with directly import this library into the userscript is that it contains the back tick character. So to circumvent this one, use base64 to encode the content and the decode it in the script.

So let's step in

The first step should be encode the content of the script in base64. You can use online tool to do the job

The second one is open a new userscript in Greasemonkey and type in some metadata

// ==UserScript==
// @name     Deeplink.js on all page
// @version  1
// @grant    none

You can change the name if you want

Next step is to write simple code below the metadata to create the script element and set the content of the element to the decoded library. Because the library use export, the type of the script element must be module. So it is

let src64 = "...Your base64 encoded library here...";
let script = document.body.appendChild(document.createElement("script"));
script.type = "module"
script.textContent = atob(src64);

Now you can use and enjoy the library on pages especially static ones, for example The storage problem of web3 by Stephen Diehl

Welcome to Vintagram

Nam Phạm — Fri, 05 Nov 2021 11:23:39 +0000

Ever wonder if you can build such an offline alternative to the gram from the meta to use the vintage filters you love while avoid all the metal health issues? Wonder no more, 'cause today, in this article, I'll show you how to build an offline one that should be called Vintagram 😀 Have fun using it then 😆

The Glitch, the Zuck and the Offline

I uploaded this one to glitch, so you can both use it online at https://vintagram.glitch.me/ and offline just by downloading files or copying the source codes I pasted here while avoid the Zuck completely, is it cool? 😀

Download the files for offline use

In order to use vintagram offline, you need to download the files at

https://vintagram.glitch.me/index.html
https://vintagram.glitch.me/webgl-image-filter.js (or from github)
https://vintagram.glitch.me/download.js (or from github)
https://vintagram.glitch.me/run.js

and run a local webserver to serve them.

Some little intro

I write code mainly just for fun and I think it's necessary to have fun in life, 'cause it's too short 😓. My main interest now is to find some cool libraries, especially javascript and thinking how to have fun using them 😀. There are actually tons of libraries to have fun with and I hope I have time in the future to do so :D Vintagram is an idea I have when I found many cool effect libraries and there are not many people willing to turn them into something fun to use. So I decide to build one 😊, and I'll show you how to do it too 😀

Technique details

I list the technique details here so you can easily follow the article

Technique	Solution / Library used	Note
Building a simple and clean interface	The `pico.css` library	`pico.css` provides classless version to build elegant interface
Font face for headers	The `Grand Hotel` font	Suitable for vintage theme
Drag drop files	The file drag drop api	Better UX
Filter processing	The `WebGL Image Filter` library	A cool library that provides the core functionality
Download image button	The `Download.js` library	For quick implementation of the download button
Copy Paste skill		For better coding 😀

Understand how it works

Interface structure

The interface structure is quite clear. You can view the source code to see the html code and some css then. The pico.css and font can be served by the cdn. Just copying the code they give you and that is done.

App structure and flow

Vintagram is designed that at first, you load a photo to the page via drag drop (desktop / laptop usage) or the upload photo button (smartphones, ...). The photo then get displayed and clicking on the filter image will apply that effect. The download button is for saving image or use can use save image feature from the browser.

Dragdroping file

This is straightfoward as you'll just have to implement the listeners for the dragover and drop events. For quick building, I listen on the whole viewport, that is, the html element. The handleDrop function handles the droping while handleDragOver funtion is just for preventing the default action from the browser. Look at the code

function handleDrop(ev) {
    ev.preventDefault();

    if (ev.dataTransfer.files && ev.dataTransfer.files.length == 1) {
        let [f] = ev.dataTransfer.files;

        loadFile(f);
    }
}

So to extract the dropped file, you query the ev.dataTransfer.files property. The length is just for ensuring that user only drop 1 image at a time. Also remember to prevent the default action as well. After that the loadFile function will handle the file.

You can infer the code for the upload photo button

function handleFileChange(ev) {
    ev.preventDefault();

    if (ev.target.files && ev.target.files.length == 1) {
        let [f] = ev.target.files;

        loadFile(f)
    }
}

to handle this situation. This time, to get the file, you query the ev.target.files property rather than ev.dataTransfer.files above and the event you need to listen to here is change event from the hidden file input of the page. Again, the loadFile function is called to do the job.

Loading the image

In order to load and display the image, I maintain 2 image variable: the display variable for displaying result and the inner variable for handling loading behind the scene. Also, inner is for checking if the given file is a valid image (also for keeping the original version of the image). That's why I listen to the onload and onerror event from inner. There are also two url variable, current and received to maintain the current url and the one being received.

If a valid image is loaded, discard the current url and replace it with the received one. If an invalid image is loaded then discard the received one. In the case of a valid image, we also display it by passing the url to the display image and from the usage of the webgl-image-filter, we have to create a new filter variable (this requires a canvas with the width and height of the image) and hence the code

inner.onload = function () {
    let canvas = document.createElement('canvas');

    canvas.width = inner.naturalWidth;
    canvas.height = inner.naturalHeight;

    filter = new WebGLImageFilter({ canvas });
    display.src = this.src;

    if (current)
        URL.revokeObjectURL(current);

    current = received;
    received = null;
}

We are good to go with loading the image then.

Using `WebGLImageFilter`

The main point of the webgl-image-filter library is to create a filter, which we did in the onload listener, then call addFilter function for each filter you want to add. There is also the reset function in case you want to return to the beginning (will clear all the added filters) and finally, using apply to apply the filter to the image. The result will be drawn to the canvas given to the filter in the listener above. After that, you can use the data from the canvas. Here is the example of the filter variable usage

filter.reset()

filter.addFilter('hue', 15);
filter.addFilter('saturation', 0.2);
filter.addFilter('brightness', 0.2);
filter.addFilter('contrast', 0.2);

filter.apply(theImage).toDataURL(); // get the data url from the drawn canvas

I find this library kinda cool because the author provided some useful filters that you can use immediately. So rather than knowing how to use hue, saturation, brightness, contrast,... properly, you can use instantly use the polaroid effect with

filter.reset()

filter.addFilter('polaroid'); // cool!!!

filter.apply(theImage).toDataURL(); // get the data url from the drawn canvas

This article is mean to show you how to build an simple app like vintagram so I won't dig deeper into how to build filters, but rather focus on using the library and the presets. You will have to find more about filters in another articles or try building one.

Applying the filter

The idea here is simple: using a preset and transfer the data url to the display image. I build some filter with associated name in the presets variable so you can use them easily by calling the applyPreset function which will find and apply the filter as following code shown

function applyPreset(name) {
    if (!filter || !(name in presets))
        return;

    filter.reset();
    presets[name](filter);
    display.src = filter.apply(inner).toDataURL();
}

Download the image

This is quite simple: use the download function provided by the download.js library through the downloadImage wrapper

function downloadImage() {
    if (!filter)
        return;

    download(display.src, "vintagram.png");
}

Well, and that's vintagram. Hope you enjoy the app, the article and learn something new. Have a nice day then 😊

Emoticons to emojis again, with live typing

Nam Phạm — Fri, 29 Oct 2021 14:22:33 +0000

Last time, I covered Using string's replaceAll function to convert emoticons into emojis and hope you enjoy. This time, we improve the functionality with live typing emoticons upon <input/> or <textarea/> will result in emojis. As you can see, in many situations, this live typing is much more pleasant then having to convert the whole text to emojis so here we go.

The code

The UI

Copy the code here to your main html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Emoticons to Emojis</title>
        <script src="regex.js"></script>
        <script src="run.js"></script>
    </head>
    <body>
        <h1>Emoticons to Emojis live typing
        </h1>
        <p>Type emoticons in the textarea below to see emojis :D</p>
        <div>
            <textarea id="live" rows="10" cols="80"></textarea>
        </div>
    </body>
</html>

Get the helper library

My script I write use a regex builder from https://github.com/wyantb/js-regex so grab the script file at https://github.com/wyantb/js-regex/raw/master/regex.js and put it into directory. Its name is regex.js as referenced by the html.

Create the main script file

Create a run.js file and copy the following code to it

let emoticons = {
    "(:": "🙃",
    ":)": "🙂",
    ":')": "🥲",
    ":))": "😂",
    "=))": "🤣",
    ";)": "😉",
    ":D": "😀",
    ":P": "😋",
    "B)": "😎",
    ":*": "😗",
    ":(": "🙁",
    ":'(": "😥",
    ":((": "😭",
    ":o": "😮",
    ">:(": "😠",
    ">:-(": "😡",
}

const pattern = (function () {
    let r = regex.create().either();
    let cmp = function (a, b) {
        let d = a.length - b.length;

        if (d)
            return -d;

        if (a < b)
            return -1;

        if (a > b)
            return 1;

        return 0;
    }

    for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)

    return new RegExp(r.endEither().peek(), "gu");
})();

const mlength = (function () {
    let m = 0;

    for (let key of Object.keys(emoticons))
        if (key.length > m)
            m = key.length;

    return ++m;
})();

function getEmoji(emoticon) {
    if (emoticon in emoticons)
        return emoticons[emoticon];

    return "";
}

function cvE2E(str) {
    return str.replaceAll(pattern, getEmoji)
}

function handleInput(e) {
    if (e.type == "input" && e.inputType == "insertText" && e.data == " ") {
        let input = e.target;
        let start = Math.max(input.selectionEnd - mlength, 0) | 0;

        input.setSelectionRange(start, input.selectionEnd);

        let replaced = cvE2E(input.value.substring(start, input.selectionEnd));

        input.setRangeText(replaced, start, input.selectionEnd, 'end');
    }
}

function install(input) {
    input.addEventListener('input', handleInput);
}

document.addEventListener('DOMContentLoaded', function () {
    install(document.getElementById('live'));
});

Understand how it works

To do live typing emoticons to emojis, we will have to attach a listener to the input event of the input or textarea, thus the install and handleInput functions. Every time user inputs a blank space, we will extract the text, convert any emoticons found to emojis and put it back into the element. About the replacing, you can read my previous article (link above) to grab the main idea. This time, the idea is basically the same but we have to do a little trick to improve the performance. Rather than extract the whole text, we will extract a short sub string from input position indicated by the selectionEnd property. To know the length, we will have to iterate through the emoticons object's keys to find the max length of the emoticons (remember to increase it to 1 to also count the blank space inserted) and store it to the mlength constant. So now, when user insert a blank space, just extract the sub string with mlength characters from the inserted position backward and do the replacement. After that, just put the text back and you have the live typing result.

Again, hope you enjoy the article and have fun typing emoticons^^

Using string's replaceAll function to convert emoticons into emojis

Nam Phạm — Tue, 26 Oct 2021 16:00:44 +0000

For us, who are 8Xes and familiar with Yahoo Messenger, using emoticons is fun remembering. And even until today, we and some 10Xes still type them as well 😀. We really miss those days 🙁. Nowadays, people are with smartphones and emojis is the norm. But still, emojis are hard to type especially on desktop keyboards where typing emoticons is much easier. This let me to the thinking 'Can we use emojis in the form of emoticons?' 😀. And clearly, it's a 'yes' and in this article, I'll show you how as well as a clear detailed explanation 😀. Isn't that cool 😎. (Note: The text above use the converter I wrote 😉)

The motivation is to show you how to use string's replaceAll function to do the trick in its second form and... for fun, of course 😎.

The web tool

You can even have fun even before understand the magic behind the tool by just using it to turn the emoticons into emojis :D. To do it, prepare directory and

Create the UI

Create a html file with the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Emoticons to Emojis</title>
        <script src="regex.js"></script>
        <script src="run.js"></script>
    </head>
    <body>
        <h1>Convert the emoticons to emojis</h1>
        <div>
            <button onclick="handleClick()">Click to convert emoticons to emojis</button>
        </div>
        <div>
            <textarea id="input" rows="10" cols="80"></textarea>
        </div>
        <div>
            <textarea id="output" rows="20" cols="80" readonly></textarea>
        </div>
    </body>
</html>

and you have the UI

Get the helper library

Create the main script file

Create a run.js file and copy the following code to it

let emoticons = {
    "(:": "🙃",
    ":)": "🙂",
    ":')": "🥲",
    ":))": "😂",
    "=))": "🤣",
    ";)": "😉",
    ":D": "😀",
    ":P": "😋",
    "B)": "😎",
    ":*": "😗",
    ":(": "🙁",
    ":'(": "😥",
    ":((": "😭",
    ":o": "😮",
    ">:(": "😠",
    ">:-(": "😡",
}

const pattern = (function () {
    let r = regex.create().either();
    let cmp = function (a, b) {
        let d = a.length - b.length;

        if (d)
            return -d;

        if (a < b)
            return -1;

        if (a > b)
            return 1;

        return 0;
    }

    for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)

    return new RegExp(r.endEither().peek(), "gu");
})();

function getEmoji(emoticon) {
    if (emoticon in emoticons)
        return emoticons[emoticon];

    return "";
}

function cvE2E(str) {
    return str.replaceAll(pattern, getEmoji)
}

function handleClick() {
    document.getElementById("output").value = cvE2E(document.getElementById("input").value);
}

Open the web page and use it now. Have fun then.

Understand how it works

In order to convert emoticons to emojis, you have to map and emoticon to an emoji. The following code defines the mapping

let emoticons = {
    "(:": "🙃",
    ":)": "🙂",
    ":')": "🥲",
    ":))": "😂",
    "=))": "🤣",
    ";)": "😉",
    ":D": "😀",
    ":P": "😋",
    "B)": "😎",
    ":*": "😗",
    ":(": "🙁",
    ":'(": "😥",
    ":((": "😭",
    ":o": "😮",
    ">:(": "😠",
    ">:-(": "😡",
}

As it is an object, it maps emoticons to emojis and you can extend it as well. For this article, I'll use some of them for the demonstration only, try to add more 😉

The key point of converting emoticons to emojis is to use string's replaceAll function in junction with a regular expression that matches and extracts emoticons from the string. It is done by using the helper library, with minor trick here. The idea here is to create a regular expression that matches either of emoticons, hence

for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)

in the code. But just iterating through the object fetching its key to add to the pattern isn't enough. There is a catch here. You must match the longer string first, or else, the result is wrong. For example the emoticon :)) must be matched before :). That is why you have to sort the keys array using a comparer cmp as shown in the code before creating the pattern.

The final piece is the string's replaceAll function in its second form: replaceAll(pattern, replacementAsAFunction). As many of us use replaceAll(pattern, replacement) with replacement as a string in most of the cases but here, it would require a function the get the corresponding emoji for the matched emoticon. So replacementAsFunction would take a matched emoticon and return the corresponding emoji. It is getEmoji function in the code and cvE2E is the converting function. The rest can be infered easily.

I hope you understand how the code works as well as knowing the second form of replaceAll function in case you haven't 😉. Have fun using the tool and adding emoticons then 😉.

PS: if you added more emoticons, share so everybody can use it^^

Introducing to a simple classification and create a neural network using Brainjs to do it

Nam Phạm — Sun, 24 Oct 2021 15:08:30 +0000

An introduction

I write this article especially for my students as many of them have heard about some topics such as machine learning, deep learning, classification, … but still haven't figured how to do it due to difficulties in learning about the ideas, the math, platform to run, languages, libraries usage, … It takes to learn about deep learning and it is in general a very broad topics so in this article, I want to show you how to do a classification task using a deep learning technique called neural network to give you a slice idea of how to do it in general.

So what is a classification? Classification is that you are given an input, and your job is to tell what type of the input is based on some known types. For example, in this article, you are given a measurement of an iris flower (its sepal length, sepal width, petal length, petal width) and you need to tell what variety of that iris flower is (it can be setosa, versicolor or virginica)

The ideas

How can we do that? Basically, you will build a function that takes the above parameters and outputs the type of the iris flower. We can see that it is not possible to generate such a function using classical programming techniques and that is where we resort to the neural network technique of deep learning. This neural network plays the role of the above function and we will train the neural network based on the measured parameter of gathered iris flowers data that we collected and with that the neural network can perform classification task by interpolation for an unknown measurement parameter. Each measurement parameter will be attached to the main label as the type of iris flower.
Thus we have the following:

Collect data and corresponding labels
Building a neural network
Train neural network based on collected data set
Verify the results of the neural network
Using the above neural network in practice

This article uses the iris flower dataset at https://www.kaggle.com/arshid/iris-flower-dataset

How do we create neural network as said? In fact, there are libraries like tensorflow, pytorch, … dedicated to deep learning, but due to the use of python and high hardware requirements, it is not suitable for those who use javascript as the main programming language. and that's why this article uses brainjs, a library that allows creating a simple neural network using javascript and can fully use the power of the GPU to train through the GPU.js library as a foundation.

Before we get into using brainjs to create and train neural networks we need to take a look at our dataset.

sepal_length	sepal_width	petal_length	petal_width	species
5.1	3.5	1.4	0.2	Iris-setosa
4.9	3	1.4	0.2	Iris-setosa
4.7	3.2	1.3	0.2	Iris-setosa
4.6	3.1	1.5	0.2	Iris-setosa
5	3.6	1.4	0.2	Iris-setosa
7	3.2	4.7	1.4	Iris-versicolor
6.4	3.2	4.5	1.5	Iris-versicolor
6.9	3.1	4.9	1.5	Iris-versicolor
5.5	2.3	4	1.3	Iris-versicolor
6.5	2.8	4.6	1.5	Iris-versicolor
5.7	2.8	4.5	1.3	Iris-versicolor
6.3	3.3	6	2.5	Iris-virginica
5.8	2.7	5.1	1.9	Iris-virginica
7.1	3	5.9	2.1	Iris-virginica
6.3	2.9	5.6	1.8	Iris-virginica
6.5	3	5.8	2.2	Iris-virginica
7.6	3	6.6	2.1	Iris-virginica
4.9	2.5	4.5	1.7	Iris-virginica
7.3	2.9	6.3	1.8	Iris-virginica

As you can see an recorded tuple (5.1, 3.5, 1.4, 0.2) is labeled Iris-setosa while (7, 3.2, 4.7, 1.4) is Iris-versicolor and for (6.3, 3.3, 6, 2.5), it is Iris-virginica. Our function, in this case is the neural network, should be able to tell what variety a iris flower is for an arbitrary given input tuple.

Before we dive in into how to create such network, we have to understand the form of the input we feed to the network, and the output we will get there. The input is easy to see that it must be an tuple of 4 numbers, but what's about our output? We first numbered the label Iris-setosa, Iris-versicolor, Iris-virginica 0, 1 and 2 respectively. You may think that our function should output these values, but no. The number is actually the slot in tuple, which indicates the probabilities of the input being in each variety. So the input (5.1, 3.5, 1.4, 0.2) should be mapped to the output of (1, 0, 0) because it is 100% the setosa iris and none for the others. Again, we will have to transform our data into something like this:

sepal_length	sepal_width	petal_length	petal_width	Iris-setosa	Iris-versicolor	Iris-virginica
5.1	3.5	1.4	0.2	1	0	0
4.9	3	1.4	0.2	1	0	0
4.7	3.2	1.3	0.2	1	0	0
4.6	3.1	1.5	0.2	1	0	0
5	3.6	1.4	0.2	1	0	0
7	3.2	4.7	1.4	0	1	0
6.4	3.2	4.5	1.5	0	1	0
6.9	3.1	4.9	1.5	0	1	0
5.5	2.3	4	1.3	0	1	0
6.5	2.8	4.6	1.5	0	1	0
5.7	2.8	4.5	1.3	0	1	0
6.3	3.3	6	2.5	0	0	1
5.8	2.7	5.1	1.9	0	0	1
7.1	3	5.9	2.1	0	0	1
6.3	2.9	5.6	1.8	0	0	1
6.5	3	5.8	2.2	0	0	1
7.6	3	6.6	2.1	0	0	1
4.9	2.5	4.5	1.7	0	0	1
7.3	2.9	6.3	1.8	0	0	1

And now, we can train our network

Brainjs

Brainjs is a js library that allow users to create, train and reuse the neurtal networks they created. Brainjs can be used in browser environment and this article focus on training a neural network in browser. You should have Firefox or Google Chrome installed to run the example.

Understand how to work with Brainjs

Prepare the data

The data is an js array whose elements are the rows from the dataset and each row must be in the form of

{
    input: [inputNumber0, inputNumber1, inputNumber2, ..., inputNumberM],
    output: [outputNumber0, outputNumber1, outputNumber2, ..., outputNumberN]
}

for example, the row

sepal_length	sepal_width	petal_length	petal_width	Iris-setosa	Iris-versicolor	Iris-virginica
5.1	3.5	1.4	0.2	1	0	0

will be

{
    input: [5.1, 3.5, 1.4, 0.2],
    output: [1, 0, 0]

}

Create a neural network

We create a neural network in Brainjs using the following code

let net = new brain.NeuralNetwork({
                    binaryThresh: 0.5,
                    hiddenLayers: [3, 3, 2],
                    activation: "sigmoid",
                });

Here, hiddenLayers parameter determine the number of layers in the neural network and number of neurons in each layers.
The activation parameter determine the activation function being used at the last hidden layer before the output.

Train the network

After creating the network, we can train the network using the following code

net.train(trainingData, {
                    iterations: 1000,
                    learningRate: 0.3,
                });

The iterations determines how many round the net will run
The learningRate determines how large the network parameters should be updated

Use the trained network to do classification task

You can use the network to do classification task by calling

net.run([value0, value1, value2, value3]);

The output is the probabilities of each type in the classification

Extract the trained network data

After training the network, you can extract the network data by running

let extracted = net.toJSON()

Reload trained network

With the extracted data, you can now recreate the network without training it by

net.fromJSON(extracted)

Provided example

User should have tool like http-server, Vite installed and know how to use the tool from the command line. I use Vite here since I'm using it for other projects as well.

Steps

Create a directory for the project

You should be able to create a directory for a project

Download and convert the csv data to json

Download the data from the kaggle link I mentioned earlier and use tool like csv2json at https://csvjson.com/csv2json to convert data and download it to your directory. Name it data.json

Create `index.html`

In your directory, create a index.html file with following code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Kaggle Iris dataset training</title>
        <script src="https://unpkg.com/brain.js@2.0.0-beta.2/dist/brain-browser.min.js"></script>
    </head>
    <body>
        <h1>Kaggle Iris dataset training using brainjs</h1>
        <div>
            <button onclick="handleClick()">Click to train</button>
        </div>
        <div>
            <textarea id="output" rows="40" cols="80" readonly></textarea>
        </div>

        <script>
            let running = false;
            let trained = null;
            async function handleClick() {
                if (running) return;

                running = true;

                try {
                    let net = train(await getTrainingData());

                    trained = net;
                    document.getElementById("output").value = JSON.stringify(net.toJSON(), null, 4);
                } finally {
                    running = false;
                }
            }

            async function getTrainingData() {
                return (await (await fetch("data.json")).json()).map((o) => ({
                    input: [o.sepal_length, o.sepal_width, o.petal_length, o.petal_width],
                    output: [o.species == "Iris-setosa" ? 1 : 0, o.species == "Iris-versicolor" ? 1 : 0, o.species == "Iris-virginica" ? 1 : 0],
                }));
            }

            function train(trainingData) {
                let net = new brain.NeuralNetwork({
                    binaryThresh: 0.5,
                    hiddenLayers: [3, 3, 2],
                    activation: "sigmoid",
                });

                net.train(trainingData, {
                    iterations: 1000,
                    learningRate: 0.3,
                });

                return net;
            }
        </script>
    </body>
</html>

Run a web server from your directory

Fire up a web server by using http-server or Vite

Click run to train

Go to your local web server and click the button. The code will download the data from data.json file, transform it to Brainjs data form, create a neural network and feed the data to the network, train it and finally output the trained networked into the textarea element in the form of json

Sorry for not implementing the UI to run the classification but the trained network is stored in the global variable trained. You can easily do the classificatoin by runing the trained.run in the console

The article won't cover all the aspects of neural network and deep learning in general but I hope you know what to do with the network especially when you write js.

Have fun with Brainjs and have a good day.

sepal_length	sepal_width	petal_length	petal_width	Iris-setosa	Iris-versicolor	Iris-virginica
5.1	3.5	1.4	0.2	1	0	0
4.9	3	1.4	0.2	1	0	0
4.7	3.2	1.3	0.2	1	0	0
4.6	3.1	1.5	0.2	1	0	0
5	3.6	1.4	0.2	1	0	0
7	3.2	4.7	1.4	0	1	0
6.4	3.2	4.5	1.5	0	1	0
6.9	3.1	4.9	1.5	0	1	0
5.5	2.3	4	1.3	0	1	0
6.5	2.8	4.6	1.5	0	1	0
5.7	2.8	4.5	1.3	0	1	0
6.3	3.3	6	2.5	0	0	1
5.8	2.7	5.1	1.9	0	0	1
7.1	3	5.9	2.1	0	0	1
6.3	2.9	5.6	1.8	0	0	1
6.5	3	5.8	2.2	0	0	1
7.6	3	6.6	2.1	0	0	1
4.9	2.5	4.5	1.7	0	0	1
7.3	2.9	6.3	1.8	0	0	1

sepal_length	sepal_width	petal_length	petal_width	Iris-setosa	Iris-versicolor	Iris-virginica
5.1	3.5	1.4	0.2	1	0	0
4.9	3	1.4	0.2	1	0	0
4.7	3.2	1.3	0.2	1	0	0
4.6	3.1	1.5	0.2	1	0	0
5	3.6	1.4	0.2	1	0	0
7	3.2	4.7	1.4	0	1	0
6.4	3.2	4.5	1.5	0	1	0
6.9	3.1	4.9	1.5	0	1	0
5.5	2.3	4	1.3	0	1	0
6.5	2.8	4.6	1.5	0	1	0
5.7	2.8	4.5	1.3	0	1	0
6.3	3.3	6	2.5	0	0	1
5.8	2.7	5.1	1.9	0	0	1
7.1	3	5.9	2.1	0	0	1
6.3	2.9	5.6	1.8	0	0	1
6.5	3	5.8	2.2	0	0	1
7.6	3	6.6	2.1	0	0	1
4.9	2.5	4.5	1.7	0	0	1
7.3	2.9	6.3	1.8	0	0	1

DEV Community: Nam Phạm

Bionic Reading on bionic-reading.com

Idea

Decompose a string into words

Build a regular expression

Build a generator to generate a string

Making the first few letters bold

Decompose strings into words

Word processing

Calculate the number of bold characters of the word

Split string into two parts

Replace text nodes below any element

Replaces the text nodes of the current element

Same applies to elements below the current element

Add style and apply to body

Our complete script will be

Results achieved on bionic reading page

Thought

JS Simple Trie Implementation

Introduction

Implementation

Using the class

Embed deeplinks.js into userscript

Deeplink.js the library

Userscripts and Greasemonkey

Writing the script

Welcome to Vintagram

The Glitch, the Zuck and the Offline

Download the files for offline use

Some little intro

Technique details

Understand how it works

Interface structure

App structure and flow

Dragdroping file

Loading the image

Using WebGLImageFilter

Applying the filter

Download the image

Emoticons to emojis again, with live typing

The code

The UI

Get the helper library

Create the main script file

Understand how it works

Using string's replaceAll function to convert emoticons into emojis

The web tool

Create the UI

Get the helper library

Create the main script file

Understand how it works

Introducing to a simple classification and create a neural network using Brainjs to do it

An introduction

The ideas

Brainjs

Understand how to work with Brainjs

Prepare the data

Create a neural network

Train the network

Use the trained network to do classification task

Extract the trained network data

Reload trained network

Provided example

Steps

Create a directory for the project

Download and convert the csv data to json

Create index.html

Run a web server from your directory

Click run to train

`Deeplink.js` the library

Using `WebGLImageFilter`

Create `index.html`

sepal_length	sepal_width	petal_length	petal_width	Iris-setosa	Iris-versicolor	Iris-virginica
5.1	3.5	1.4	0.2	1	0	0
4.9	3	1.4	0.2	1	0	0
4.7	3.2	1.3	0.2	1	0	0
4.6	3.1	1.5	0.2	1	0	0
5	3.6	1.4	0.2	1	0	0
7	3.2	4.7	1.4	0	1	0
6.4	3.2	4.5	1.5	0	1	0
6.9	3.1	4.9	1.5	0	1	0
5.5	2.3	4	1.3	0	1	0
6.5	2.8	4.6	1.5	0	1	0
5.7	2.8	4.5	1.3	0	1	0
6.3	3.3	6	2.5	0	0	1
5.8	2.7	5.1	1.9	0	0	1
7.1	3	5.9	2.1	0	0	1
6.3	2.9	5.6	1.8	0	0	1
6.5	3	5.8	2.2	0	0	1
7.6	3	6.6	2.1	0	0	1
4.9	2.5	4.5	1.7	0	0	1
7.3	2.9	6.3	1.8	0	0	1