webpack tutorial

http://chunghe.googlecode.com/git/experiment/webpack-demo/

resources: http://gaearon.github.io/react-hot-loader/ https://github.com/gaearon/react-hot-loader https://github.com/webpack/react-starter

OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube

OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube

# Downloading JS the right way - only download the JS you need for each “page” - single page app “page” == entry point - 17 entry points for Instgram - Subsequent navigations should not download the same JS again - ie. share libraries # Asynchronously load your bundles http://webpack.github.io/docs/code-splitting.html window.onpopstate = function () { if (window.location.pathname === ‘/profile’) { showLoadingIndicator(); require.ensure([], function () { hideLoadingIndicator(); require(‘./pages/profile’).show(); }); } else if (window.location.pathname === ‘/feed’) { showLoadingIndicator(); require.ensure([], function () { hideLoadingIndicator(); require(‘./pages/feed’).show(); } } # They’re part of the dependency graph Images, CSS, fonts, etc ex: ProfileEnteryPoint depends on profile.css // Ensure bootstrap.css stylesheet is in the page require(‘./bootstrap.css’); var Image = document.createElement(‘img’); myIage.src = require(‘./myimage.png’); // following code will only be executed after all the required resources loaded. # CSS the pragmatic way - Namespaced, unambiguous class names - No cascading (reason: a simple grep will know the the rule is no longer used) - single class name selector only - No overriding - <div class=“one two three”> - one, two and three should be orthogonal

fb-flo

fb-flo

fb-flo is a Chrome extension that lets you modify running apps without reloading. It's easy to integrate with your build system, dev environment, and can be used with your favorite editor. Live edit JavaScript, CSS, Images and basically any static resource. Works with your editor of your choice. Easily integrates with your build step, no matter how complex. Easily integrates with your dev environment. Configurable and hackable.

Mac App Store - OpenConv 2

Mac App Store - OpenConv 2

Dev.Opera — The CSS3 object-fit and object-position Properties

Dev.Opera — The CSS3 object-fit and object-position Properties

The four possible values of object-fit are as follows: - contain: if you have set an explicit height and width on a replaced element, object-fit:contain will cause the content (e.g. the image) to be resized so that it is fully displayed with intrinsic aspect ratio preserved, but still fits inside the dimensions set for the element. - fill: causes the element’s content to expand to completely fill the dimensions set for it, even if this does break its intrinsic aspect ratio. - cover: preserves the intrinsic aspect ratio of the element content, but alters the width and height so that the content completely covers the element. The smaller of the two is made to fit the element exactly, and the larger overflows the element. - none: the content completely ignorse any height or weight set on the element, and just uses the replaced element’s intrinsic dimensions.

anselmh/object-fit

RequireBin

RequireBin

Shareable JavaScript programs powered by npm and browserify