jody tate jodytate

Part 4 of React Lesson - Composition

Ok, but now we see how JSX is pretty awesome.

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.

	/**
	* Step 1: Create a named label
	* Step 2: Open board
	* Step 3: Open devtools console
	* Step 4: Copy and paste this whole gist into console
	* Step 5: Create an array of all cards to be renamed. For all cards: var allCards = Array.prototype.slice.call(document.querySelectorAll('.list-card'))
	* Step 6: call addLabelToCards with the list of nodes as first argument, label name as 2nd argument: addLabelToCards(allCards, 'work')
	**/

	function addLabelToCards(cards, labelName) {

	function combineChars (chars) {
	var permutations = [], words = [], firstChar;
	if (chars.length === 1) { // base case
	permutations.push(chars);
	return permutations;
	}
	firstChar = chars[0];
	chars = chars.substring(1,chars.length);
	words = combineChars(chars);
	for (var i = 0; i < words.length; i++) {

	angular.module('stateMock',[]);
	angular.module('stateMock').service("$state", function($q){
	this.expectedTransitions = [];
	this.transitionTo = function(stateName){
	if(this.expectedTransitions.length > 0){
	var expectedState = this.expectedTransitions.shift();
	if(expectedState !== stateName){
	throw Error("Expected transition to state: " + expectedState + " but transitioned to " + stateName );
	}
	}else{

	<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
	<title>Javascript multiline string expression shim</title><style type="text/css">
	body{background-color:#333;color:#ccc;max-width:40em;margin:0 auto;}
	h1,h2,h3,em,strong,th,thead,label,dt,legend,caption{color:#fff}
	a:link{color:#6ff}a:visited{color:#9f3}label:hover,a:hover{background-color:#000}
	html *{font-family:"Courier New",monospace}
	pre{tab-size:2;-moz-tab-size:2;background-color: #444}
	</style></head><body>

	angular.module('stateMock',[]);
	angular.module('stateMock').service("$state", function($q){
	this.expectedTransitions = [];
	this.transitionTo = function(stateName){
	if(this.expectedTransitions.length > 0){
	var expectedState = this.expectedTransitions.shift();
	if(expectedState !== stateName){
	throw Error("Expected transition to state: " + expectedState + " but transitioned to " + stateName );
	}
	}else{

	anglar.module('myApp',['ui']).config(["$provide", function($provide) {
	return $provide.decorator("$http", ["$delegate", function($delegate) {
	var get = $delegate.get;
	$delegate.get = function(url, config) {
	// Check is to avoid breaking AngularUI ui-bootstrap-tpls.js: "template/accordion/accordion-group.html"
	if (!~url.indexOf('template/')) {
	// Append ?v=[cacheBustVersion] to url
	url += (url.indexOf("?") === -1 ? "?" : "&");
	url += "v=" + cacheBustVersion;
	}

	# Last updated May, 2024 for Apple silicon Macs
	# Install Homebrew if you don't already have it: https://brew.sh

	# install nano from homebrew
	brew install nano nanorc

	# update your nanorc file
	echo 'include "'"$(brew --cellar nano)"'//share/nano/.nanorc"' >> ~/.nanorc

	# close and re-open your terminal and you'll have syntax highlighting

	/*
	* Decide on your cache-busting strategy. In this example, we use the current timestamp, which will
	* force a change every time the app is visited, but not every time the partial is loaded within a
	* visit. Even better would be to use a hash of the file's contents to ensure that the file is always
	* reloaded when the file changes and never reloaded when it isn't.
	*/
	var cacheBustSuffix = Date.now();

	// Optionally, expose the cache busting value as a constant so other parts of your app can use it.
	ngModule.constant("cacheBustSuffix", cacheBustSuffix);