Skip to content

Instantly share code, notes, and snippets.

AshCoolman / Styled utility functions
Last active Feb 16, 2019
Styled utility functions package
View Styled utility functions

Styled utility functions package

I try and resist putting stuff in this package. But its just for overflow when theme/markup doesn't cut it, and if I CONTINUALLY reuse some styles.

Package structure

├── defaultTheme
│   └── index.js
├── index.js
AshCoolman /
Created Aug 21, 2018
Device-independent pixels and React Native


React Native dimensions are unitless & represent density-independent pixels (abstract pixels, representing a physical distance on the device)

Density-independent pixel (dp)

WARNING: DP (or DiP) not DPI

DP units keep _things roughly the same physical size

AshCoolman /
Created Mar 19, 2018
React Component to onBlur, only when leaving component

[PROOF OF CONCEPT] For when you want "tabbable" children (e.g. in Date selector composed of a textfield for Day, Month and year) but only want to perform validation on blur-entire-component not each Textfield

class BlurCapturer extends React.Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        onBlur: PropTypes.func,
        children: PropTypes.node,
AshCoolman /
Created Feb 28, 2018
Silver searcher snippets

ag -u -Q "autoprefixer({" .

AshCoolman /
Last active Feb 28, 2018
React reason doc notes

Creation, Props & Self

  • just a record
  • need a make function
  • creates new component every JSX invocation
  • props = labeled arguments make, last prop must be chilren

Props Forwarding


Language basics

let binding

let is just an expression and akin to a function!

let greeting = hello
let greeting = "hi"; /* shadowed */
let scoped = {
AshCoolman /
Last active Feb 28, 2018
When did the build break?
#!/usr/bin/env bash
# 1. Place this file one level above the project folder
# 2. git bisect start <badSHA> <goodSHA>
# 3. chmod +x ../
# 4. git bisect run ../
rm -r .out
View gist:628fc5be4a0c49894dae6f6203a5aba5
While such costs might be negligable for cold code, in the sort code comparator was invocated millions of times which made overheads of arguments adaptation quite pronounced.
AshCoolman / kk
Last active Feb 20, 2018
OSX notifications for 'kk.'
View kk
#!/usr/bin/env bash
notify "kk."
AshCoolman / label.js
Created Feb 15, 2018
Label to help with jest snapshots
View label.js
// Jests dont write to file in chron order, prefix with number helps
let count = 0;
const label = (tmpl, ...val) => {
return `${
count++ // eslint-disable-line
}. ${
tmpl.reduce((p, c) => p + c + (val.length ? val.pop() : ''), '')