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
| // 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!"); |
In React's terminology, there are five core types that are important to distinguish:
React Elements
| var Dialog = React.createClass({ | |
| render: function() { | |
| // 1) render nothing, this way the DOM diff will never try to do | |
| // anything to it again, and we get a node to mess with | |
| return React.DOM.div(); | |
| }, | |
| componentDidMount: function() { | |
| // 2) do DOM lib stuff | |
| this.node = this.getDOMNode(); |
Whether you're trying to give back to the open source community or collaborating on your own projects, knowing how to properly fork and generate pull requests is essential. Unfortunately, it's quite easy to make mistakes or not know what you should do when you're initially learning the process. I know that I certainly had considerable initial trouble with it, and I found a lot of the information on GitHub and around the internet to be rather piecemeal and incomplete - part of the process described here, another there, common hangups in a different place, and so on.
In an attempt to coallate this information for myself and others, this short tutorial is what I've found to be fairly standard procedure for creating a fork, doing your work, issuing a pull request, and merging that pull request back into the original project.
Just head over to the GitHub page and click the "Fork" button. It's just that simple. Once you've done that, you can use your favorite git client to clone your repo or j
| /* | |
| Show a progress element for any form submission via POST. | |
| Prevent the form element from being submitted twice. | |
| */ | |
| (function (win, doc) { | |
| 'use strict'; | |
| if (!doc.querySelectorAll || !win.addEventListener) { | |
| // doesn't cut the mustard. | |
| return; | |
| } |
| /*! | |
| * gulp | |
| * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev | |
| */ | |
| // Load plugins | |
| var gulp = require('gulp'), | |
| sass = require('gulp-ruby-sass'), | |
| autoprefixer = require('gulp-autoprefixer'), | |
| cssnano = require('gulp-cssnano'), |
| <html> | |
| <head> | |
| <title>Test</title> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> | |
| <script src="http://fb.me/react-0.5.1.js"></script> | |
| <script src="http://fb.me/JSXTransformer-0.5.1.js"></script> | |
| </head> |
| // 1. Go to page https://www.linkedin.com/settings/email-frequency | |
| // 2. You may need to login | |
| // 3. Open JS console | |
| // ([How to?](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers)) | |
| // 4. Copy the following code in and execute | |
| // 5. No more emails | |
| // | |
| // Bookmarklet version: | |
| // http://chengyin.github.io/linkedin-unsubscribed/ |
| // --- | |
| // Sass (v3.2.9) | |
| // --- | |
| @mixin respond-to($queries...) { | |
| $length: length($queries); | |
| @for $i from 1 through $length{ | |
| @if $i % 2 == 1 { | |
| @media screen and (min-width: nth($queries, $i)) { |