Vasa vasanthk

Here is a checklist of all the things I need my CSS solution to handle.

I can explain any of the points. Leave a comment on the gist or tweet @DavidWells

Challenge: Take your favorite CSS solution and see how the checklist holds up.

Has ability Localize classes
Has ability to use global classes
Has ability to write raw CSS
Syntax highlighting and auto completion

JavaScript Crypto Libraries

I start with a list and plan to create a comparison table.

WebCryptoAPI

http://www.w3.org/TR/WebCryptoAPI/

This specification describes a JavaScript API for performing basic cryptographic operations in web applications, such as hashing, signature generation and verification, and encryption and decryption. Additionally, it describes an API for applications to generate and/or manage the keying material necessary to perform these operations. Uses for this API range from user or service authentication, document or code signing, and the confidentiality and integrity of communications.

Currently considering https://github.com/webdriverio/webdrivercss

Core Goals:

Can test in up-to-date versions of all major browsers
Can test on up-to-date versions of all major OSes
Can test in IE9 (because Bootstrap v4 will support IE9+)
Don't want to have to setup/maintain our own cluster of VMs running all the necessary OSes (and all the versions of Windows)
Workflow for management of reference/baseline/norm screenshots

React lifecycle cheatsheet

Method	Side effects¹	State updates²	Example uses
Mounting
`componentWillMount`		✓	Constructor equivalent for `createClass`
`render`			Create and return element(s)
`componentDidMount`	✓	✓	DOM manipulations, network requests, etc.
Updating
`componentWillReceiveProps`		✓	Update `state` based on changed `props`

	class Counter extends Component {
	componentWillMount() {
	let self = this;
	class IfEven extends Component {
	render() {
	let {children} = this.props;
	return !(self.props.value % 2) ? children : null;
	}
	}

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	/*
	* As I have been migrating a project from redux-form v5 to v6, I have come across this useful pattern.
	*
	* I have many such "custom inputs and errors beside them" structures around my app.
	*/

	// v5 code
	<div>
	<MyCustomInputThing
	{...myField}

	Latency Comparison Numbers
	--------------------------
	L1 cache reference 0.5 ns
	Branch mispredict 5 ns
	L2 cache reference 7 ns 14x L1 cache
	Mutex lock/unlock 25 ns
	Main memory reference 100 ns 20x L2 cache, 200x L1 cache
	Compress 1K bytes with Zippy 3,000 ns 3 us
	Send 1K bytes over 1 Gbps network 10,000 ns 10 us
	Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}

	// with props
	import React, { Component } from 'react';

	// this method work as a our base `handleClick` function
	function handleClick(name, event) {
	alert(`hello ${name}`);
	}

	class App extends Component {
	constructor(props) {