Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Mobile Usability – Custom Scrollbars

On mobile devices, Usability is everything.
Because of this, standard elements are often designed broader and larger.

Example of a 30px wide and 100px thumb custom scrollbar:

/*A custom scrollbar is configurable. 
Here, it is broader than the standard.
This way, it is easier to use on touchscreen 
or other small or mobile devices.*/

/* width */
::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    height: 100px!important;
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*end custom scrollbar*/

Pixel sizes – Mobile – Screen – Resolution -Definition

This is a compilation from the Web. I do not know the original author. As I am good at compiling information, I think it will be useful, though.

In case you are the author of this and can prove it, please drop me a line so we can link to your content.

Standard Size Ratio Definition

16:9 Ratio
4:3 Ratio
3:2 Ratio
2:1 Ratio

Delay function in JavaScript JS

The timeout function puts a thread to sleep, which is often NOT what you want:

function someFunction(param) {
    setTimeout(function () {
        if (param == -1) {
            console.log('Parameter is -1');
        }
    }, 2000);//2 sec delay
}

Instead with ECMA6 you can use the async/await syntax.

const delay = ms => new Promise(res => setTimeout(res, ms));

const delayFunction = async () => {
  await delay(2000);
  console.log("[X] 2 sec delay.");
};

The Code looks like being synchronous while it is in fact asynchronous. This makes it easier to maintain. Plus you avoid a freeze in UIs in case you want to delay for the human eye in a UI…