gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

gaearon

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

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.

---

dypsilon

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

JamieMason

#!/bin/bash

# Functions ==============================================

# return 1 if global command line program installed, else 0
# example
# echo "node: $(program_is_installed node)"
function program_is_installed {
  # set to 1 initially
  local return_=1

drublic

@main-font-size: 16px;

.x-rem (@property, @value) {

  // This is a workaround, inspired by https://github.com/borodean/less-properties
  @px-fallback: @value * @main-font-size;
  -: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
  -: ~`(function () { return ';@{property}: @{value}rem'; }())`;
}

nickawalsh

@import compass

$icons: sprite-map("icons/*.png")
$icons-hd: sprite-map("icons-hd/*.png")

i
  background: $icons
  display: inline-block
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background: $icons-hd

furf

_.mixin({

  // Get/set the value of a nested property
  deep: function (obj, key, value) {

    var keys = key.replace(/\[(["']?)([^\1]+?)\1?\]/g, '.$2').replace(/^\./, '').split('.'),
        root,
        i = 0,
        n = keys.length;

andreasbovens

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

• All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

• 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
• 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
• 1 site has 2 viewport meta tags (with different values) in the source...

scttnlsn

var BaseView = Backbone.View.extend({
    
    close: function() {
        this.closeSubviews();
        this.unbindFromAll();
        this.off();
        this.remove();
        
        if (this.onClose) this.onClose();
    },