Ian McNally ianmcnally

Checkbox slider

A sliding checkbox for representing an on/off toggle in a simple and slick way.

Coming to React from Angular

My friends started using it, Stride clients started asking for it, and it's been getting serious buzz on the internet. So I realized it was time for me to learn React.

I've been an Angular guy for the past couple years, and I've gotten pretty good at it. I've seen its nooks and crannies, and I've grown fond of it.

But, like I said, it was hard to ignore React.

It's fast, it's light, it's new and shiny. So I dug in. I recently released an app, Farely, which I'd written in Angular. (Note: I didn't use directives like I should have.) I thought it'd be the perfect opportunity to try out React, since the app could be composed of components. It also wouldn't need anything React doesn't offer, like routing or complex data modeling.

A week's small victories: Angular, Equality and Testing

Our work weeks are made up of victories both big and small. What really gets me writing is the small. The a-ha! moments. The high fives (internal ones count too). The green builds. The git pushes.

I spent my week creating dynamic forms and lists in Angular. I made them, fought with them, tested them, and came out the other side in one piece. Here's my story:

Writing and testing custom form validators

Custom form validators are a powerful feature in Angular.

	def longest_palindrome str
	palindromes = []
	str.split('').each.with_index do \|c, i\|
	0.upto i do \|j\|
	# get all substrings up to the current letter
	chunk = str[j..i]
	reverse_chunk = chunk.reverse
	# check if they're a palindrome
	palindromes << chunk if chunk == reverse_chunk
	end

	# Only update <input> elements with bound angular models <input ng-model="my model"> on 'blur' event.
	# Tweaked from a variety of places.
	app.directive 'updateOnBlur', ->
	require : 'ngModel'
	link : (scope, element, attributes, ngModelController) ->
	element.unbind 'input'
	element.bind 'blur', ->
	scope.$apply ->
	ngModelController.$setViewValue element.val()

	Configuring Charles to proxy, so you can test localhost on a virtual machine.

	1. In Charles proxy settings, set a port, i.e., 8889.
	2. In your VM, modify the local area settings.
	1. In IE, go to Settings > Connections > LAN Settings
	2. Under proxy server, select Use a proxy server.
	3. Under proxy server Address, use your machine's IP.
	4. Under proxy server Port, use the Charles proxy port, i.e., 8889.
	3. Turn on proxying in Charles.

	git config --global mergetool.sublime.cmd "subl -w \$MERGED"
	git config --global mergetool.sublime.trustExitCode false
	git config --global merge.tool sublime


	Usage:
	git mergetool -y

	fizzbuzz = ->
	for n in [1..100]
	fizz = if n % 3 is 0 then 'fizz' else ''
	buzz = if n % 5 is 0 then 'buzz' else ''
	output = fizz + buzz or n
	console.log output

	function isBalanced(string) {
	var closers = {
	'{' : '}',
	'(' : ')',
	'[' : ']'
	}
	var stack = [];
	for (var i = 0, l = string.length; i < l; i++) {
	if (closers[string[i]]) {
	stack.push(string[i]);

	#
	# Write a function `wordPair` that for a
	# given a string, returns the most frequent word pair (word, space, word)
	# E.g., 'I want to be a part of it New York, New York' -> 'New York'
	#

	wordPair = (str) ->
	getWordPairCounts = (str) ->
	words = str.replace(/[^a-zA-Z\s]/g, '').split ' '
	pairCounts = {}