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
NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.
I'd like to hear how you approach this: @valuedstandards or comment on this gist.
You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':
I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).
| var UndoMixin = { | |
| getInitialState: function() { | |
| return { | |
| undo: [] | |
| }; | |
| }, | |
| handleUndo: function() { | |
| if (this.state.undo.length === 0) { | |
| return; |
| #!/bin/sh | |
| ### | |
| # SOME COMMANDS WILL NOT WORK ON macOS (Sierra or newer) | |
| # For Sierra or newer, see https://github.com/mathiasbynens/dotfiles/blob/master/.macos | |
| ### | |
| # Alot of these configs have been taken from the various places | |
| # on the web, most from here | |
| # https://github.com/mathiasbynens/dotfiles/blob/5b3c8418ed42d93af2e647dc9d122f25cc034871/.osx |
| // Lefalet shortcuts for common tile providers - is it worth adding such 1.5kb to Leaflet core? | |
| L.TileLayer.Common = L.TileLayer.extend({ | |
| initialize: function (options) { | |
| L.TileLayer.prototype.initialize.call(this, this.url, options); | |
| } | |
| }); | |
| (function () { | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Alpha-Shapes</title> | |
| <script src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script src="http://mbostock.github.com/d3/d3.geom.js"></script> | |
| <style type="text/css"> | |
| path { |
| (function(){ | |
| var button_id = "download" | |
| // include this code in your page | |
| // you must have jQuery installed | |
| // you must have a link element with an id of "download" | |
| // this is limited to only one chart on the page (the first) | |
| function encode_as_link(){ | |
| // Add some critical information |
