Vinh Le vinhlh

Python VS ES6 syntax comparison

Python syntax here : 2.7 - online REPL

Javascript ES6 via Babel transpilation - online REPL

Imports

import math

Folder Structure

Please note

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.

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

Using emmet in jsx files
Emmet expands text when js autocomplete needed

🎨 when improving the format/structure of the code
🚀 when improving performance
✏️ when writing docs
💡 new idea
🚧 work in progress
➕ when adding feature
➖ when removing feature
🔈 when adding logging
🔇 when reducing logging
🐛 when fixing a bug

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Mocking - not testing - private functions in JavaScript

Instead of trying to extract a private function, we can rely on mocking/spying. This gist shows how to use the "new Function()" constructor to replace an internal call so that we can mock, spy or stub.

Another response to @philwalton - 
http://philipwalton.com/articles/how-to-unit-test-private-functions-in-javascript/

This is a followup to https://gist.github.com/dfkaye/5971486 - a suggestion for 
*annotating* functions to be extracted and tested separately (publicly).

	{
	// http://eslint.org/docs/rules/

	"env": {
	"browser": true, // browser global variables.
	"node": false, // Node.js global variables and Node.js-specific rules.
	"worker": false, // web workers global variables.
	"amd": false, // defines require() and define() as global variables as per the amd spec.
	"mocha": false, // adds all of the Mocha testing global variables.
	"jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0.

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	# post_loc.txt contains the json you want to post
	# -p means to POST it
	# -H adds an Auth header (could be Basic or Token)
	# -T sets the Content-Type
	# -c is concurrent clients
	# -n is the number of requests to run in the test

	ab -p post_loc.txt -T application/json -H 'Authorization: Token abcd1234' -c 10 -n 2000 http://example.com/api/v1/locations/

	angular.module('Prism', []).
	directive('prism', [function() {
	return {
	restrict: 'A',
	link: function ($scope, element, attrs) {
	element.ready(function() {
	Prism.highlightElement(element[0]);
	});
	}
	}