Josh Dyck inlightmedia

React + Typescript Cheatsheet

Setup

If you use atom... download & install the following packages:

What are Typescript type definition files? (*.d.ts)

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	# This installs https://github.com/warner/magic-wormhole (a nifty
	# utility to securely send stuff from one computer to another) on
	# Alpine Linux

	FROM alpine
	RUN apk update && apk add build-base python3-dev libffi-dev openssl-dev && pip3 install magic-wormhole

	/**
	* Encrypts plaintext using AES-GCM with supplied password, for decryption with aesGcmDecrypt().
	* (c) Chris Veness MIT Licence
	*
	* @param {String} plaintext - Plaintext to be encrypted.
	* @param {String} password - Password to use to encrypt plaintext.
	* @returns {String} Encrypted ciphertext.
	*
	* @example
	* const ciphertext = await aesGcmEncrypt('my secret text', 'pw');

	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));

	doctype html5
	html
	head
	title Test Page

	body
	.error #{message}
	form(action='/login' method='POST')
	label Email
	input(type='email' name='email')

	function parseVideo (url) {
	// - Supported YouTube URL formats:
	// - http://www.youtube.com/watch?v=My2FRPA3Gf8
	// - http://youtu.be/My2FRPA3Gf8
	// - https://youtube.googleapis.com/v/My2FRPA3Gf8
	// - Supported Vimeo URL formats:
	// - http://vimeo.com/25451551
	// - http://player.vimeo.com/video/25451551
	// - Also supports relative URLs:
	// - //player.vimeo.com/video/25451551

	{
	"presets": ["es2015"],
	"plugins": ["transform-async-to-generator"]
	}