let providerHandler = { | |
get: async(target, name) => { | |
console.log('load someting from remote...') | |
return new Promise( (res, rej) => { | |
setTimeout(() => res(42), 4200) | |
}) | |
}, | |
set: function (obj, prop, value) { | |
return new Promise((res, rej) => { |
// https://codepen.io/cmykw/pen/gemxJm | |
// layout | |
<nav/> | |
// style | |
<style> | |
body { min-height: 200vh; } | |
nav { |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent
{ | |
"AF": "Afghanistan", | |
"AX": "Aland Islands", | |
"AL": "Albania", | |
"DZ": "Algeria", | |
"AS": "American Samoa", | |
"AD": "Andorra", | |
"AO": "Angola", | |
"AI": "Anguilla", | |
"AQ": "Antarctica", |
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso