Matt Smith AllThingsSmitty

Build a better web.

AllThingsSmitty / sort-merge.js

Last active November 15, 2015 14:37

Take two sorted lists of numbers and merge them into a single sorted list

	var list1 = [2, 4, 5, 6];
	var list2 = [3, 5, 8, 9];
	merged_list = merge_sorted_list(list1, list2);
	alert(merged_list);

	function merge_sorted_list(list1, list2) {
	merged_list = list1.concat(list2);
	return merged_list.sort(numsort);
	}

AllThingsSmitty / exec.js

Last active November 27, 2015 22:55

Testing regex in JavaScript with the exec() method

	console.log(/p.*g/.test('programming')); // true
	console.log(/p.*g/.test('pickles')); // false

	var re = /quick\s(brown).+?(jumps)/ig;
	var result = re.exec(
	'The Quick Brown Fox Jumps Over The Lazy Dog'
	);

	console.log(result);
	// ["Quick Brown Fox Jumps", "Brown", "Jumps"]

AllThingsSmitty / negative-nth-child.css

Created July 23, 2015 14:45

Use negative nth-child to select items 1 through n

	li {
	display: none;
	}
	/* select items 1 through 3 and show them */
	li:nth-child(-n+3) {
	display: block;
	}

AllThingsSmitty / last-el.js

Last active August 29, 2015 14:25

Get last element of an array in one line with no temp vars

	// var last = arr.reverse()[0];
	Array.prototype.last = function () { return this.length > 0 ? this[this.length -1] : undefined };

AllThingsSmitty / import.css

Created July 17, 2015 23:15

How our main CSS file might end up looking with HTTP/2

	@import "core.css";
	@import "theme.css";
	@import "user-theme.css";
	@import "small-breakpoint.css" (max-width: 40em);
	@import "landscape.css" screen and (orientation: landscape);
	@import "print.css" print;

AllThingsSmitty / replace.js

Last active July 22, 2017 18:36

Using String.replace() with regular expressions

 var myString = 'EXAMPLEstring';
 var myNewString = myString.replace(/[A-Z]/g, '0');
 console.log(myNewString);
 function replaceFunc (a, b, c) {
   console.log(a, b, c);
   return a.toLowerCase();
 }
 var myOtherString = myString.replace(/[A-Z]/g, replaceFunc);

AllThingsSmitty / index.htm

Created June 26, 2015 00:07

Using Level 4 CSS validity pseudo-classes to improve form UX

	<div class="container">
	<form class="form">
	<div class="form-group">
	<label class="sr-only" for="emailAddress">Email Address</label>
	<input class="form-control input-lg" type="email" placeholder="example@email.com" id="emailAddress" required>
	<button type="submit" class="btn btn-default input-lg">Subscribe</button>
	</form>
	</div>

AllThingsSmitty / wrap.js

Created June 19, 2015 12:51

Great way to wrap non-React UI elements that manage lists of items and leverage VDOM diffing

	const SourceElement = React.createClass({
	componentDidMount: f() {
	this.props.view.addSource(this.props.source);
	},

	componentWillUnumount: f() {
	this.props.view.removeSource(this.props.source);
	},

	componentWillReceiveProps: f(nextProps) {

AllThingsSmitty / dimensions.js

Last active October 7, 2021 16:06

Every possible way (pretty much) to get the dimensions of any image on a web page with JavaScript

	var myImg = document.querySelector('img'),
	op = document.querySelector('output');

	op.innerHTML = "Computed width: " +
	getComputedStyle(myImg).getPropertyValue('width') +
	'<br>' + 'img.width: ' +
	myImg.width +
	'<br>' + 'getAttribute(width): ' +
	myImg.getAttribute('width') +
	'<br>' + 'img.naturalWidth: ' +

AllThingsSmitty / querySelector.js

Last active August 20, 2022 13:32

Use querySelector with .bind() as a shortcut to familiar function names

	// returns first element selected - $('input[name="food"]')
	var $ = document.querySelector.bind(document);
	// return array of selected elements - $$('img.dog')
	var $$ = document.querySelectorAll.bind(document);

	// Credit: https://twitter.com/wesbos/status/608341616173182977