David Normington davidnormo

JSX Explored

It is very common to see JSX and React together and you'd (almost) be forgiven for thinking they were part of the same library. That is, until you came to use React and found that you had to compile any JSX before being able to run your code.

JSX is completely separate to React. Take a look: https://facebook.github.io/jsx. JSX is an ECMAscript syntax extension specification. It is intended as a declarative, Domain Specific Language (DSL) that can be compiled to Javascript.

In essence, the React JSX transpiler takes this:

<MyComponent />;

The following command will give you a string of all the npm packages and their versions that are currenctly globally installed.
Note: that this ignores packages installed from directories and picks only those installed via the npm registry.

$ npm ls -g --depth 0 | sed -e '1d' -e 's/└── //g' -e 's/├── //g' -e '/^.*->.*$/d' -e '/^$/d' | tr '\n' ' '

If you copy this string, you can then append it to the end of npm install -g to install all of the packages.

Tips for removing javascript code

Removing files should be relatively safe. If you miss any references your build system should fail, hopefully with the problem files if the tool is any good.
Removing scoped code can be done if all references to them are removed from within the scope. E.g. references to a local variable within a method or references to a function within a module.
Removing public functions, that are exported by a module or added to the global scope, cannot be done deterministically due to the dynamic nature of javascript. Try the following:
- grep code base looking for method uses (Warning: may not catch all cases e.g. myObj['method']() or myObj[getMethodName()]() etc)
- grep code looking for the import of the containing module, then further grep to find method references: grep -ril path/to/my/module www/src | xargs grep -ril myMethodName

	/**
	* Pixels to Twips conversion
	* @param {Int} pixels
	* @return {Int}
	* /
	var pixelsToTwips = function(pixels){
	return pixels * 15;
	};

	/**

	// Media Queries in Sass 3.2
	//
	// These mixins make media queries a breeze with Sass.
	// The media queries from mobile up until desktop all
	// trigger at different points along the way
	//
	// And important point to remember is that and width
	// over the portrait width is considered to be part of the
	// landscape width. This allows us to capture widths of devices
	// that might not fit the dimensions exactly. This means the break

	#!/bin/sh
	#accept stdin input
	exec < /dev/tty

	#prompt user
	read -p "Have you prayed? " -n 1 -r

	#complete on new line
	echo

	var pdf = new jsPDF();
	pdf.text(0, 0, 'Hello World!');
	var pdfBase64 = pdf.output('datauristring');

	window.plugin.email.open({
	to: ['[email protected]'],
	subject: 'New PDF!',
	body: 'Hi there, here is that new PDF you wanted!',
	isHTML: false,
	attachments: [pdfBase64]

	/**
	* Be careful of closure behaviour, it might not give you values you expect!
	* For example when you have timeouts or event listeners.
	*/
	(function(){
	var i = 0,
	arr = ['a','b','c','d'],
	doSomething = function(localKey){
	console.log('i:', i);
	console.log('localKey:', localKey);

	let asAttrs = (strings, value) => {
	let attrs = [];
	for (let prop in value) {
	let val = value[prop];
	if (typeof val === 'boolean'){
	attrs.push(`${prop}` + (val ? '' : '=false'));
	} else {
	attrs.push(`${prop}="${val}"`);
	}
	}

	"use strict";

	var observableDiff = require("deep-diff").observableDiff,
	lodash = require("lodash");

	function valueToString(target) {
	return JSON.stringify(target, function(key, value) {
	var type = Object.prototype.toString.call(value);

	if (value instanceof jasmine.Any) {