Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.1k followers · 6 following
View GitHub Profile
@AllThingsSmitty
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
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
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
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
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
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
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
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
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
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