FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.
| <html> | |
| <head> | |
| <script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script> | |
| <title>ZeroToApp</title> | |
| <style> | |
| #messages { width: 40em; border: 1px solid grey; min-height: 20em; } | |
| #messages img { max-width: 240px; max-height: 160px; display: block; } | |
| #header { position: fixed; top: 0; background-color: white; } | |
| .push { margin-bottom: 2em; } | |
| @keyframes yellow-fade { 0% {background: #f2f2b8;} 100% {background: none;} } |
| html { | |
| /* Adjust font size */ | |
| font-size: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| /* Font varient */ | |
| font-variant-ligatures: none; | |
| -webkit-font-variant-ligatures: none; | |
| /* Smoothing */ | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; |
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
| #!/bin/bash | |
| # Runs the specified command (provided by the first argument) in all tmux panes | |
| # in every window. If an application is currently running in a given pane | |
| # (e.g., vim), it is suspended and then resumed so the command can be run. | |
| all-panes() | |
| { | |
| all-panes-bg_ "$1" & | |
| } |
(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.
| <script type="text/javascript"> | |
| (function () { | |
| "use strict"; | |
| // once cached, the css file is stored on the client forever unless | |
| // the URL below is changed. Any change will invalidate the cache | |
| var css_href = './index_files/web-fonts.css'; | |
| // a simple event handler wrapper | |
| function on(el, ev, callback) { | |
| if (el.addEventListener) { | |
| el.addEventListener(ev, callback, false); |
| (function (root, factory) { | |
| if ( typeof define === 'function' && define.amd ) { | |
| define([], factory(root)); | |
| } else if ( typeof exports === 'object' ) { | |
| module.exports = factory(root); | |
| } else { | |
| root.myPlugin = factory(root); | |
| } | |
| })(typeof global !== "undefined" ? global : this.window || this.global, function (root) { |