una

Links: A CSS Story

Ghosts of CSS Past

• Big List of CSS Hacks
• Paul Irish CSS Hack Test List
• caniuse: @supports
• caniuse: will-change

Ghosts of CSS Present

lintonye

Render svg on Sketch, Web and React Native

What?

Use a single codebase to render svg on Sketch, Web and React Native, but react-primitives doesn't support svg yet. One suggestion is to use react-primitives-svg, but there's an issue when trying to render it on the web, as described in airbnb/react-sketchapp#265.

Solution

We could directly use the core.web.js file as below. Also there might be a way to pick up the .web.js extension just as .android.js and .ios.js.

// Svg.js
import { Platform } from "react-primitives";

zats

let emojis: [String: [String]] = [
  // +[EMFEmojiCategory TravelAndPlacesEmoji]
  "travel": ["🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🚚", "🚛", "🚜", "🛴", "🚲", "🛵", "🏍", "🚨", "🚔", "🚍", "🚘", "🚖", "🚡", "🚠", "🚟", "🚃", "🚋", "🚞", "🚝", "🚄", "🚅", "🚈", "🚂", "🚆", "🚇", "🚊", "🚉", "🚁", "🛩", "✈️", "🛫", "🛬", "🚀", "🛰", "💺", "🛶", "⛵️", "🛥", "🚤", "🛳", "⛴", "🚢", "⚓️", "🚧", "⛽️", "🚏", "🚦", "🚥", "🗺", "🗿", "🗽", "⛲️", "🗼", "🏰", "🏯", "🏟", "🎡", "🎢", "🎠", "⛱", "🏖", "🏝", "⛰", "🏔", "🗻", "🌋", "🏜", "🏕", "⛺️", "🛤", "🛣", "🏗", "🏭", "🏠", "🏡", "🏘", "🏚", "🏢", "🏬", "🏣", "🏤", "🏥", "🏦", "🏨", "🏪", "🏫", "🏩", "💒", "🏛", "⛪️", "🕌", "🕍", "🕋", "⛩", "🗾", "🎑", "🏞", "🌅", "🌄", "🌠", "🎇", "🎆", "🌇", "🌆", "🏙", "🌃", "🌌", "🌉", "🌁"],
  // +[EMFEmojiCategory NatureEmoji]
  "nature": ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐽", "🐸", "🐵", "🙈", "🙉", "🙊", "🐒", "🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🦆", "🦅", "🦉", "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐚", "🐞", "🐜", "🕷", "🕸", "🐢", "🐍", "🦎", "🦂", "🦀", "🦑", "🐙", "🦐", "🐠", "🐟", "🐡", "🐬", "🦈

developit

/** Async version of Array.prototype.reduce()
 *  await reduce(['/foo', '/bar', '/baz'], async (acc, v) => {
 *    acc[v] = await (await fetch(v)).json();
 *    return acc;
 *  }, {});
 */
export async function reduce(arr, fn, val, pure) {
  for (let i=0; i<arr.length; i++) {
    let v = await fn(val, arr[i], i, arr);
    if (pure!==false) val = v;

brandonbloom

// devDependencies in package.json:

    "require-reload": "0.2.2",
    "react-transform-hmr-no-accept": "1.0.1", // not published, get it here: https://github.com/brandonbloom/react-transform-hmr

// in babelrc:

 "env": {
      "development": {
        "plugins": [

jareware

Long Live Icon Fonts!

or, a Quick PSA on icon fonts and ligatures.

tl;dr: keep using icon fonts, they are nice, just enable ligatures

These are my talking notes at the http://wwweeklies.com/ on 2015-12-04:

• This Seriously, Don’t Use Icon Fonts post came out
• This I agree with: SVG is really nice for the Web

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

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

ryanflorence

let Thing = (props) => (
  <div>look {props.name}! no state!</div>
)

render(<Thing name="Ma"/>, el)

gaearon

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';

const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

// ------------
// reducers
// ------------