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
| def f(diff, n): | |
| """ | |
| This function returns the new difficulty. | |
| """ | |
| period_count = (n + 1) // 100000 | |
| return max(diff + 2**(period_count - 1), 5000) | |
| | |
| diff = 6232935860523 # starting diffculty | |
| blocknumber = 200000 # starting blocknumber | |
| numberOfBlocks2years = 2*365*24*60*60/15 |
| // Promise.all is good for executing many promises at once | |
| Promise.all([ | |
| promise1, | |
| promise2 | |
| ]); | |
| // Promise.resolve is good for wrapping synchronous code | |
| Promise.resolve().then(function () { | |
| if (somethingIsNotRight()) { | |
| throw new Error("I will be rejected asynchronously!"); |
| babel github-es6.js -o github.js --optional runtime --experimental |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
| /* | |
| If you try to print a gitbook directly, you get nothing but the contents because of their *just* use of `@media print` styling to hide away the content section of the books. | |
| Fret not, here is the codez: | |
| */ | |
| $(".book-header,.book-summary,.navigation,.book-progress").remove(); | |
| $(".book.with-summary .book-body").css('left', '0px'); | |
| $("*").css('position', 'static'); | |
| window.print() |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
**~~ NOTE: This is a Stage 0 proposal. ~~**
Please direct all future feedback to that repo in the form of directed issues.
| // Stock Android Browser Check >>>>>>>>>>>>>>>> | |
| var ua = navigator.userAgent.toLowerCase(); | |
| var isAndroid = ua.indexOf("android") > -1 && ua.indexOf("mobile") && ua.indexOf("chrome")==-1 | |
| if(isAndroid) { | |
| // stuff | |
| } |