Clean Code Blog – www.harder-it-consulting.de
Clean Code – Tipps, Tricks for Fullstack React / Java / JavaScript / HTML 5 and more…
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 đ
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*/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
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…