(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.
$sprites: sprite-map("sprites/*.png"); | |
$sprites-retina: sprite-map("sprites-retina/*.png"); | |
@mixin sprite-background($name) { | |
background-image: sprite-url($sprites); | |
background-position: sprite-position($sprites, $name); | |
background-repeat: no-repeat; | |
display: block; | |
height: image-height(sprite-file($sprites, $name)); | |
width: image-width(sprite-file($sprites, $name)); |
guard 'rspec', :version => 2 do | |
watch(%r{^spec/.+_spec\.rb$}) | |
watch(%r{^lib/(.+)\.rb$}) { |m| "spec/lib/#{m[1]}_spec.rb" } | |
watch('spec/spec_helper.rb') { "spec" } | |
# Rails example | |
watch(%r{^app/(.+)\.rb$}) { |m| "spec/#{m[1]}_spec.rb" } | |
watch(%r{^app/(.*)(\.erb|\.haml)$}) { |m| "spec/#{m[1]}#{m[2]}_spec.rb" } | |
watch(%r{^app/controllers/(.+)_(controller)\.rb$}) { |m| ["spec/routing/#{m[1]}_routing_spec.rb", "spec/#{m[2]}s/#{m[1]}_#{m[2]}_spec.rb", "spec/acceptance/#{m[1]}_spec.rb"] } | |
watch(%r{^spec/support/(.+)\.rb$}) { "spec" } |
AF | Afghanistan | |
---|---|---|
AX | Åland Islands | |
AL | Albania | |
DZ | Algeria | |
AS | American Samoa | |
AD | Andorra | |
AO | Angola | |
AI | Anguilla | |
AQ | Antarctica | |
AG | Antigua and Barbuda |
(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.
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(); |
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
It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.
Integrating third party JavaScript libraries not written with Google Closure Compiler in mind continues to both be a source of error for users when going to production, and significant vigilance and effort for the the broader community (CLJSJS libraries must provide up-to-date and accurate externs).
In truth writing externs is far simpler than most users imagine. You only need externs for the parts of the library you actually intend to use from ClojureScript. However this isn't so easy to determine from Closure's own documentation. Still in the process of writing your code it's easy to miss a case. In production you will see the much dreaded error that some mangled name does not exist. Fortunately it's possible to enable some compiler flags :pretty-print true :pseudo-names true
to generate an advanced build with human readable names. However debugging missing externs means compiling your production build for each missed case. So much time wasted for such simple mistakes damages our sen