Skip to content

Instantly share code, notes, and snippets.

Avatar

James Musgrave jamesmusgrave

View GitHub Profile
View campaignmonitor-signup.vue
<template>
<div>
<input v-model="emailAddress" type="email" placeholder="your@email.com" />
<button @click="submitForm">{{subscribeText}}</button>
</div>
</template>
<script>
export default {
data() {
return {
@jamesmusgrave
jamesmusgrave / _smart-underline.scss
Last active Sep 24, 2019
Smart Underline Sass Mixin
View _smart-underline.scss
@mixin smart-underline($background: #fff, $text: #000, $selection: #ffc, $position: 86%){
a {
color: inherit;
text-decoration: none;
background: -webkit-linear-gradient($background, $background), -webkit-linear-gradient($background, $background), -webkit-linear-gradient($text, $text);
background-size: .05em 1px, .05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 $background, -0.03em 0 $background, 0 0.03em $background, 0 -0.03em $background, 0.06em 0 $background, -0.06em 0 $background, 0.09em 0 $background, -0.09em 0 $background, 0.12em 0 $background, -0.12em 0 $background, 0.15em 0 $background, -0.15em 0 $background;
background-position-y: $position,$position, $position;
background-position-x: 0%, 100%, 0%;
View lerp.js
// Linear interpolation
const lerp = function(start, end, t){
return start * (1 - t) + end * t;
}
@jamesmusgrave
jamesmusgrave / campaign-monitor-angular.html
Last active Oct 3, 2018
Angular method to handle Campaign Monitor's secure subscribe link signup
View campaign-monitor-angular.html
<form name="newsletterSignupForm" novalidate ng-submit='submitEmail()'>
<input ng-model="emailAddress" type="email" placeholder="your@email.com" required />
<div class="checkbox">
<input type="checkbox" ng-model="acceptTerms" name="acceptTerms" required />
<div class="checkbox-label">I’ve read and accept the <a href="/terms" target="_blank">TOS and Privacy Policy</a>. </div>
</div>
<button ng-disabled="!newsletterSignupForm.$valid" type="submit" ng-bind="subscribeText"></button>
</form>
View type-scaling.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type Scaling</title>
<style>
html{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
}
View countryHash
countryHash: {
unicodeCountry: {
AF: "Afghanistan",
AX: "Aland Islands",
AL: "Albania",
DZ: "Algeria",
AS: "American Samoa",
AD: "Andorra",
AO: "Angola",
AI: "Anguilla",
View mysqlbackup.sh
#!/bin/bash
function backupdb {
USER=$1
PASSWORD=$2
REMOTEIP=$3
OUTPUTDIR="/Volumes/Backup/MYSQL/$(date +%F)"
MYSQLDUMP="/usr/local/bin/mysqldump"
MYSQL="/usr/local/bin/mysql"
View easing.js
if ( settings.easing === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
if ( settings.easing === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
if ( settings.easing === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
if ( settings.easing === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
if ( settings.easing === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
if ( settings.easing === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
if ( settings.easing === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
if ( settings.easing === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
if ( settings.easin
View iOS-iFrame fix
html,
body,
#doc {
height: 100%; // Passes through the height of the parent iframe element
}
#doc {
// Magic to prevent iOS growing the iFrame to fit the content.
// This container will mimic the behavior of the iframe on a desktop browser
-webkit-overflow-scrolling:touch;
overflow-y: scroll;
View datewithtimezone.js
Date.prototype.stdTimezoneOffset = function() {
var jan = new Date(this.getFullYear(), 0, 1);
var jul = new Date(this.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
Date.prototype.dst = function() {
return this.getTimezoneOffset() < this.stdTimezoneOffset();
}