luciopaiva

See this jsPerf test.

The most performant way to store data related to a certain element is to use a Map. Besides being the fastest, it also allows you to store arbitraty data. Using dataset and data-* attributes only allow for string values.

luciopaiva

class SampleApp() {
    
    constructor () {
        this.pageLoadingPromise = null;
    }
    
    waitForDomContentLoaded() {
        if (!this.pageLoadingPromise) {
            // this is the first time; prepare the promise
            this.pageLoadingPromise = new Promise(resolve => {

luciopaiva

:root {
    --app-width: 1000px;
    --some-calculation: calc(var(--app-width) + 1);
}

luciopaiva

Full socket.io client and server example

Last updated: 2021-02-21, tested with socket.io v3.1.1

This is the simplest implementation you will find for a client/server WebSockets architecture using socket.io.

To see a full explanation, read my answer on SO here: https://stackoverflow.com/a/24232050/778272.

If you're looking for examples using frameworks, check these links:

luciopaiva

 _            _
| |          (_)
| |_   _  ___ _  ___
| | | | |/ __| |/ _ \
| | |_| | (__| | (_) |
|_|\__,_|\___|_|\___/

luciopaiva

// will print numbers from 0 to 19
for (const x of range(20)) {
    console.info(x);
}

// will print
// 0 0
// 1 0
// 0 1
// 1 1

luciopaiva

async function getJson(url) {
    return JSON.parse(await getFile(url));
}

async function getFile(url) {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.addEventListener("load", function () {
            try {
                resolve(this.responseText);

luciopaiva

/**
 * Asynchronously sleep for the specified amount of time.
 * @param {Number} millis
 * @return {Promise}
 */
function sleep(millis) {
    return new Promise(resolve => setTimeout(resolve, millis));
}

luciopaiva

Quick Guide to Flexbox

Flex container

display: flex;
flex-direction: row | column;
/* main axis alignment: */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
/* cross axis alignment: */

align-items: flex-start | flex-end | center | baseline | stretch;

luciopaiva

Example .ssh/config file:

# severals rules that depend on the wildcard rule at the bottom

Host foo.com
    HostName foo.com
    User foo
    IdentityFile /path/to/id-1