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
| Hi, | |
| Thanks for your interest on connecting via LinkedIn. | |
| Sadly your LinkedIn Connection Request contains just the plain default LinkedIn Connection request text without any context, personal touch or proper introduction. Therefore I assume this LinkedIn Connection Request was written by an automated algorithm and thus has been declined. | |
| Bye! | |
| PS: For any humans reading this, please communicate in a human-friendly way and I will respond accordingly. |
| define(function() { | |
| var cssomPrefixes = 'Moz O ms Webkit'.split(' '); | |
| var modElem = { | |
| elem: document.createElement('modernizr') | |
| }; | |
| var mStyle = { | |
| style: modElem.elem.style | |
| }; |
| ( find . -type d -name ".git" && find . -name ".gitignore" && find . -name ".gitmodules" ) | xargs rm -rf |
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':
| /* bling.js */ | |
| window.$ = document.querySelector.bind(document); | |
| window.$$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); }; | |
| NodeList.prototype.__proto__ = Array.prototype; | |
| NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); }; |
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] {
| /** | |
| * After reading a few articles | |
| * (http://substack.net/task_automation_with_npm_run) | |
| * (http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/) | |
| * and discussing with other developers on Twitter | |
| * (@benhowdle, @_mikefrancis,@zachmayberry) | |
| * I put together a replacement of my current Grunt workflow using npm via | |
| * package.json using npm cli plugins instead of grunt specific plugins. | |
| * | |
| * I found that several grunt plugins were just wrappers for npm mopdules, |
| <html> | |
| <head> | |
| <style> | |
| p { background: #f5f4ee; } | |
| p:hover { background: #9d8380; } | |
| </style> | |
| </head> | |
| <body> | |
| <p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#car" width="100" height="100" alt="Car icon"></p> | |
| <p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#chequered-flag" width="100" height="100" alt="Chequered flag icon"></p> |