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

sandfox

Super rough race/gender analysis of http://uk.businessinsider.com/uk-tech-100-slideshow-2016-2

Aplogies to anyone who I've misgendered or attributed to the wrong race/ethnicity or would otherwise chose to be indentfied differently. Let me know and I'll correct things.

numbers

there are 109 people in total

• men: 84 (77%)
• women: 25 (22.9%)

ryanflorence

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they

rauchg

require-from-twitter

Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.

How to use

Source tweet: https://twitter.com/rauchg/status/712799807073419264

const leftPad = await requireFromTwitter('712799807073419264');

ryanflorence

import React from 'react'

const provideContext = (contextKey, contextType) => (
  React.createClass({
    childContextTypes: {
      [contextKey]: contextType
    },

    getChildContext() {
      const { children, ...props } = this.props

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

giuseppeg

(strict, q) => {
  eval(`!!q('[data-reactid], [data-reactroot], [class*="__"], [class*="--"]').length ${strict ? '&&' : '||'} 
  !q('[href=""], [href="#"], [href^="javascript"], link[src*="bootstrap.css"]').length && 
  console.log('You may want to work here')`)
}(true, document.querySelectorAll.bind(document))

Aldredcz

Notes

• This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
• This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
• Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
• To get this work, just put this snippet into your entry js file. Then it will work in whole application.
• Also supporting React Hot Reload!
• If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

• specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

marcbachmann

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12.5,

    // font family with optional fallbacks
    fontFamily: '"Meslo LG S for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color (hex)
    cursorColor: 'rgba(255,255,255,.4)',

vjeux

// Solution #1: Generic Override (like CSS)

var ButtonGroup = React.createClass({
  render() {
    return <div>{this.props.buttons.map((btn, i) => 
      <Button style={{
        ...(i !== 0 && {marginLeft: 0})
        ...(i !== this.props.buttons.length - 1 && {marginRight: 0})
      }} />
    )}</div>;