markdalgleish

Someone asked me about the spacing scale in Braid and I thought I'd share my thoughts here. For reference this is what they were referring to: https://github.com/seek-oss/braid-design-system/blob/ecdd7f3060cab2a6675cde7dd45bcd510caa268b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts#L166-L175

I could maybe have turned this into a blog post, but I'm just dropping my rough thoughts here instead.

In practice, the T-shirt size scale felt like indirection because our designers didn't think in those terms so it actually got in the way of developers and designers communicating.

The names also weren't really semantic in the sense that we couldn't confidently change them later without breaking a lot of layouts.

It also made it difficult to name new values to the scale, e.g. if we needed to add a value between "small" and "medium", what would we call it? I've seen things like "xmedium" in other systems before which shows how awkward this can get.

shawn-dsz

div.d-flex.flex-row.flex-justify-between.project-header.pt-2.pb-3.px-5.border-bottom {
    display: none;
}

div.pagehead.repohead.instapaper_ignore.readability-menu.experiment-repo-nav {
    display: none;
}

header.Header.f5 {
    display: none;

shawn-dsz

lodash v4.13.1

Array

• _.chunk
• _.compact
• _.concat

ryyppy

// ###############################
// runPackager.js
// ###############################

// In this example, the IO function is tightly coupled with the implementation
import { execFileSync } from 'child_process';

type RunPackagerOptions = {
  projectRoot: string, // CWD the react-native binary is being run from
  targetDir: string, // Target directory absolute or relative to projectRoot (e.g. 'rna/')

fntlnz

Create Root CA (Done once)

Create Root Key

Attention: this is the key used to sign the certificate requests, anyone holding this can sign certificates on your behalf. So keep it in a safe place!

openssl genrsa -des3 -out rootCA.key 4096

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])':

jfmengels

lodash v4.17.20

Array

• _.chunk
• _.compact
• _.concat

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

yoavniran

The Ultimate Unit Testing Cheat-sheet

---

• Sinon Chai
• Chai
• Sinon

nkbt

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  "plugins": ["react"],

  "ecmaFeatures": {