staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

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.

---

TrevorJTClarke

var devices = [
  { name: 'Desktop - Huge', width: 2880, height: 1800, ratio: 2, type: 'desktop' },
  { name: 'Desktop - Extra Large', width: 1920, height: 1080, ratio: 1, type: 'desktop' },
  { name: 'Desktop - Large', width: 1440, height: 900, ratio: 1, type: 'desktop' },
  { name: 'Desktop - HiDPI', width: 1366, height: 768, ratio: 1, type: 'desktop' },
  { name: 'Desktop - MDPI', width: 1280, height: 800, ratio: 1, type: 'desktop' },
  { name: 'Laptop with HiDPI screen', width: 1440, height: 900, ratio: 2, type: 'desktop' },
  { name: 'Laptop with MDPI screen', width: 1280, height: 800, ratio: 1, type: 'desktop' },
  { name: 'Laptop with touch', width: 1280, height: 950, ratio: 1, type: 'desktop' },
  { name: 'Tablet - Portrait', width: 768, height: 1024, ratio: 1, type: 'tablet' },

paulirish

What forces layout / reflow

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.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

katowulf

{
  "chat": {
     // the list of chats may not be listed (no .read permissions here)
     
     // a chat conversation
     "$key": {
         
         // if the chat hasn't been created yet, we allow read so there is a way 
         // to check this and create it; if it already exists, then authenticated 
         // user (specified by auth.id) must be in $key/users

JakeHartnell

Include README.md in documentation generation and tests

Recentely, I was trying to make sure our README.md files for DAO DAO were included in the documentation generated by cargo doc or rustdoc. Moreover, I wanted code examples in our README.md files to be tested.

Here's a quick gist...

There is of course the doc attribute, and the rust book contains the following example which you are meant to include in your lib.rs or main.rs:

imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

jrburke

//Download jquery.js and place it in the build, do not use require-jquery.js 
//in the build, since each of the build layers just needs almond and not the 
//full require.js file.
//This file is run in nodejs to do the build: node build.js

//Load the requirejs optimizer
var requirejs = require('./r.js');

//Set up basic config, include config that is
//common to all the requirejs.optimize() calls.

larrybotha

Fix SVG in <img> tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use sed in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

pocotan001

• 🎨 when improving the format/structure of the code
• 🚀 when improving performance
• ✏️ when writing docs
• 💡 new idea
• 🚧 work in progress
• ➕ when adding feature
• ➖ when removing feature
• 🔈 when adding logging
• 🔇 when reducing logging
• 🐛 when fixing a bug

addyosmani

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",