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
(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.
I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!
\
This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.
Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:
getTweetsFor("domenic", function (err, results) {
// the rest of your code goes here.
| describe(' a tribute ') | |
| .to(' the syntactical hubris of attempting ') | |
| .to(' present logic flows as grammatically coherent ') | |
| .english() | |
| it(' is a foolish attempt ') | |
| .for(' it aids aesthetically but limits functionally ') | |
| .and() | |
| .truly(' misidentifies ') | |
| .a(' difficulty in the understanding of code ') | |
| .foolishly(' attributing understandability of it to its ') |
| * { | |
| font-size: 12pt; | |
| font-family: monospace; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-decoration: none; | |
| color: black; | |
| cursor: default; | |
| } |
Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.
Source tweet: https://twitter.com/rauchg/status/712799807073419264
const leftPad = await requireFromTwitter('712799807073419264');
| // https://crontab.guru/ | |
| // https://www.typescriptlang.org/play?ts=4.9.5#code/C4TwDgpgBAwgSgeQHJQLxQAYBIDe9kB0AogB5gBOEAzlQJYD2AdgL5S75LFmU0Mtt5EnUhWp0mrdkK6jeEgRxk9xLDAG4AUAHotUPVAB6Afg0bQkKABVqwAIxpY0gBIBXALYBDRgB4ARAGYABigATigAKgiI3wA+TR19QxMzcGhrKmAAJgdFV08fX0iwyJLY+N19Y1NzNJt-HOd3Lz9wrXriqPCy7Qq9KpSLdOAAFgbCPObCtoitUZLouJ7E-pqrGwBWMc4Jgtb6+dLFhMrk1aGANi2CHZaZ-c7u477T1LWMgHYrm99bTdbsg6PXpJaqvIYADi+TV2UXuXSOwJWYJsYXQuWhtxK00O5WWL0GNlswTRjXymKg+y0AKBeNBBIytnsJPGGMKsJm2WGNJOdNqDOyzO2rOCmUpAOxs25z15bzs9UF11ZYVFHLuUC5CNpAz5dlGCu+rV+M0ukX2UpB2tlRv1rIOFIWuJ5SwAtK6AMYuYCu52mAAmEDdABsPJQoIwPG5qGAPG7oBwoDgNHoIGR6ORgFBViJlHwHABycJ5qAAHzD7gARhByCXMK1cIwK1XmOpTMnU+nM68bpYoCngBBGL6qI5kDEHEnElZeyR+4Ph9gcLRGAAzKtQACykkXK7XTi3S9X1YAIpuBAe1+vT7hz8eAOrNieTqBGKy0SPeJwAGnXY77A6HmDXju1Y9n+c5QBk5BLgA5g+T6JC+R4eCA3iXp+UAnuhR63r+M7-vOQGHhh06zgBkEwXB8EIcRYEAb4vhQI+VH6C+lhMcxUAAFyATglisEwAhHpRHHcYwEAAG5Vuxk6iRJUlUbJknkJoE4JN6jETmcb4QB+9AuOQ6HrkunoQGO6BMUZDb9iR+FQAWRbSS+Th6dWtHDvZegvnmcnkCAUBuMZ-ZFgk8wAPpQOFoXSdxzn6TZ4ELjeUBOPFAENm4 |
The final result: require() any module on npm in your browser console with browserify
This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.
Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5
