Skip to content

Instantly share code, notes, and snippets.

View ShMcK's full-sized avatar

Shawn McKay ShMcK

View GitHub Profile
@ShMcK
ShMcK / Live Reload from NPM scripts
Created July 25, 2016 05:50
Concurrent Live reload using NPM scripts
{
"name": "live-reload-npm-scripts",
"version": "1.0.0",
"description": "Run 'npm start' to begin developing",
"main": "src/index.js",
"scripts": {
"browserify": "browserify src/index.js -o dist/bundle.js -t [ babelify --presets [ es2015 ] ]",
"browsersync:start": "browser-sync start --server --files 'index.html dist/bundle.js'",
"browsersync:reload": "browser-sync reload",
"reload": "npm run browserify && npm run browsersync:reload",
@ShMcK
ShMcK / Atom-Stylesheet.less
Last active June 14, 2016 21:04
Atom Stylesheet with background whitespace grid & styled html properties
// Atom Styles
// theme: one-dark
// syntax: apm install oceanic-next
atom-text-editor,
atom-workspace {
font-family: "Fira Code"; // https://github.com/tonsky/FiraCode
font-size: 14px;
line-height: 1.7;
}
@ShMcK
ShMcK / PictureElement
Last active August 29, 2015 14:07
<picture> element
<!-- Angular picture-fill: https://github.com/tinacious/angular-picturefill -->
<!-- ng.pictureFill -->
<span picture-fill data-alt="Image Description">
<span pf-src="images/image.png" data-media="(min-width: 1px)"></span>
<span pf-src="images/image-600.png" data-media="(min-width: 645px)"></span>
<span pf-src="images/image-1024.png" data-media="(min-width: 960px)"></span>
</span>
<span picture-fill data-alt="{{post.thumbnail.description}}" ng-if="post.thumbnail">
@ShMcK
ShMcK / unselectable
Created September 30, 2014 10:50
HTML content unselectable
<!-- prevents copying -->
<body ondragstart="return false;" onselectstart="return false;" oncontextmenu="return false;" onload="clearData();"
onblur="clearData();">
<script type="text/javascript">
// IE fix for unselectable
var elem = document.getElementById("resume");
elem.unselectable = "on"; // For IE and Opera
</script>
@ShMcK
ShMcK / JavascriptModulePatterns
Created September 30, 2014 10:32
Javascript (ES5) Module Patterns
'use strict';
// 1. Revealing Module Pattern
var revModule = function (param) {
return {
// public
funk: funk
};
// private
@ShMcK
ShMcK / Angular1.3--Forms.html
Created September 30, 2014 10:26
Using Angular 1.3 Forms with $validators, ngMessages, $pending, $touched Src: http://www.htmlxprs.com/post/11/angularjs-1.3-form-validation-tutorial
<html ng-app="demoApp">
<script type="text/javascript">
angular.module('demoApp', ['ngMessages']); // include ngMessages module
angular
.module('htmlxprs', [])
.directive('usernameValidator', function () {
return {
restrict: 'AE',
require: 'ngModel',
link: function ($scope, elem, attrs, ngModel) {