anvaka

npm rank

This gist is updated daily via cron job and lists stats for npm packages:

1. Top 1,000 most depended-upon packages
2. Top 1,000 packages with largest number of dependencies
3. Top 1,000 packages with highest PageRank score

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

blueboxes

##Micro Game Engines And Boilerplates## http://ox2d.com/
https://github.com/Gozala/selfish
https://github.com/michalbe/mibbu
https://github.com/ooflorent/js13k-boilerplate

##Sound and Music## http://sb.bitsnbites.eu/

adrienjoly

Startup Noob Guide (bit.ly/startupnoob)

If you want to create a startup, and you've never done that before, you should consult the resources that are relevant to your situation.

[FR] Si vous comprenez le français, je vous invite à regarder la vidéo de mon pote Shubham qui résume assez bien le plus gros des conseils de cette page, en 8 minutes: Vous avez une idée de startup ?.

[FR] ...et si vous voulez comprendre tout ce contenu de manière plus efficace et ludique, inscrivez-vous sur mon MOOC "Startup Tour: créez votre startup en 3h" (gratuit).

---

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

lambdahands

/* @flow */

var T = require('immutable');

type Branch    = T.List<string>
type TrainLine = T.Map<string, Branch>
type CTAMap    = T.Map<string, TrainLine>

/*
 * Representation of Chicago's train stops and branches

p3t3r67x0

Styling native elements

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] {

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

enapupe

angular.module("myApp").directive("autoGrow", function(){
    return function(scope, element, attr){
        var update = function(){
            element.css("height", "auto");
            var height = element[0].scrollHeight;
            if(height > 0){
                element.css("height", height + "px");
            }
        };
        scope.$watch(attr.ngModel, function(){

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.

---