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 / localStorage.js
Last active April 19, 2016 19:42
Retrieving localStorage from the client
'use strict';
function getStorage(type) {
var storage = window[type + 'Storage'],
delta = 0,
li = document.createElement('li');
if (!window[type + 'Storage']) {
return;
}
@AllThingsSmitty
AllThingsSmitty / ie7-border-box-mixin.scss
Last active August 29, 2015 13:55
Border-box mixin for IE7
/* Thank god no ones uses IE7 anymore, amirite */
@mixin IE7Padding($width: null, $unit: 1px, $paddingLeft: 0, $paddingRight: 0) {
@if $padding == 0 and $paddingRight != 0 {
padding-right: $paddingRight * $unit;
width: $width * $unit;
.lt-ie8 & {
padding-right: $paddingRight + $unit;
width: ($width = $paddingRight) * $unit;
}
}
@AllThingsSmitty
AllThingsSmitty / index.html
Last active August 29, 2015 13:56
Animated spinning loader
<div class="spinner bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
@AllThingsSmitty
AllThingsSmitty / picture-element.htm
Last active August 29, 2015 13:56
An example of how to implement the <picture> element
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture Element</title>
<style>
@media all {
#pictureElement {
background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
}
@AllThingsSmitty
AllThingsSmitty / README.md
Last active August 29, 2015 13:56
Implementing the Geolocation API with Google Maps API

Once you've called the GoogleMap function, you can set ID, height, and width of the map (mapcanvas.id, mapcanvas.style.height and mapcanvas.style.width). You can set map default functionality like zoom, position, and control under var myOptions:

var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeControl: false,
  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
@AllThingsSmitty
AllThingsSmitty / box-sizing-grid.htm
Last active August 29, 2015 13:56
Creating a grid using box-sizing in CSS3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box-Sizing Grid</title>
<style>
.row:after {
clear: both;
content: "";
display: block;
@AllThingsSmitty
AllThingsSmitty / index.htm
Last active August 29, 2015 13:57
Experimenting with AngularJS filters
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS application template</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open\+Sans">
</head>
<body ng-controller="MyAppController">
@AllThingsSmitty
AllThingsSmitty / README.md
Created March 28, 2014 14:45
How to get the Google Translate API free

I'm looking to use the Google Translate API but that service isn't free. I need to find a way of utilizing it or some alternative.

@AllThingsSmitty
AllThingsSmitty / grid.scss
Last active April 19, 2016 19:44
A grid system using Sass and calc()
// Here is a grid system
// Relying on `calc()` (http://caniuse.com/#search=calc)
// and advanced CSS selectors (http://caniuse.com/#feat=css-sel3)
// Expect it to work on IE9+, Android 4.4+ and any other browsers
// Applying a clean box-model to all elements
* {
box-sizing: border-box;
}
@AllThingsSmitty
AllThingsSmitty / README.md
Last active August 29, 2015 13:58
Getting old weather data

I'm looking into a way to obtain old weather data. This may work for API's.