After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.
I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.
When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on:
| var gulp = require('gulp'); | |
| var sourcemaps = require('gulp-sourcemaps'); | |
| var source = require('vinyl-source-stream'); | |
| var buffer = require('vinyl-buffer'); | |
| var browserify = require('browserify'); | |
| var watchify = require('watchify'); | |
| var babel = require('babelify'); | |
| function compile(watch) { | |
| var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel)); |
| // | |
| // MultiDirectionAdjudicatingScrollView.swift | |
| // Khan Academy | |
| // | |
| // Created by Andy Matuschak on 12/16/14. | |
| // Copyright (c) 2014 Khan Academy. All rights reserved. | |
| // | |
| import UIKit | |
| import UIKit.UIGestureRecognizerSubclass |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?
| struct Regex { | |
| let pattern: String | |
| let options: NSRegularExpressionOptions! | |
| private var matcher: NSRegularExpression { | |
| return NSRegularExpression(pattern: self.pattern, options: self.options, error: nil) | |
| } | |
| init(pattern: String, options: NSRegularExpressionOptions = nil) { | |
| self.pattern = pattern |
| protocol Calendar { | |
| typealias Unit: BidirectionalIndexType | |
| typealias Era: Unit | |
| typealias Year: Unit | |
| typealias Month: Unit | |
| typealias Week: Unit | |
| typealias Day: Unit | |
| typealias Weekday: Unit | |
| typealias Hour: Unit |
| /* | |
| Minimal Facebook Messenger | |
| ========================== | |
| 1. Make a Fluid (http://fluidapp.com/) instance of https://facebook.com/messages/ | |
| 1. a. (You need to buy the paid version of Fluid to modify UserStyles) | |
| 2. Apply the below CSS as a Userstyles stylesheet | |
| 3. Like magic, you can now message without all the cruft of Full Facebook | |