Skip to content

Instantly share code, notes, and snippets.

View ravenwilde's full-sized avatar
😸
code, cats & caffeine

Jennifer Scroggins ravenwilde

😸
code, cats & caffeine
View GitHub Profile
@ravenwilde
ravenwilde / api.ts
Created March 12, 2024 04:19
JSON Web Token authentication functions for use with WPGraphQL JWT Authentication plugin
const API_URL = process.env.WORDPRESS_API_URL
/**
* Fetches the API to get the JWT refresh token
* @returns {Promise<string>} The JWT refresh token
*/
export async function fetchToken() {
const query = `
mutation LoginUser($input: LoginInput!) {
login(input: $input) {
@ravenwilde
ravenwilde / material-design-box-shadow.scss
Last active January 17, 2017 22:11
Material Design Box Shadow Sass Mixin... with 'silky smooth' performant box shadow animation technique from: http://tobiasahlin.com/blog/how-to-animate-box-shadow/
// Material Design Box Shadows
// 'Silky Smooth' performant box shadow animation technique from: http://tobiasahlin.com/blog/how-to-animate-box-shadow/
@mixin material-box-shadow($level, $hover) {
$shadow-initial: 0;
$shadow-hover: 0;
@if $level == 1 {
$shadow-initial: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@ravenwilde
ravenwilde / responsive-headings.scss
Last active June 12, 2019 06:55
Responsive Header Generation & Management with Sass
/*
* Responsive Heading Generation with Sass
* Type scale borrowed from: http://typecast.com/blog/a-more-modern-scale-for-web-typography
*/
// Config Map of font-size and line-height values for each Heading level at each page breakpoint
$headers-responsive : (
1: (
xs: ( font-size: 2rem, line-height: 1.25 ),
md: ( font-size: 2.5rem, line-height: 1.125 ),
@ravenwilde
ravenwilde / vertical-rhythm-grid.scss
Last active August 29, 2015 14:19
Grid Overlay for Testing Vertical Rhythm
// For Testing
// Vertical rhythm grid
// Based on the Bourbon/Neat Column Grid Mixin
$vertical-grid: no !global;
$vertical-grid-color: #444444 !global;
$vertical-grid-index: front !global;
$vertical-grid-height: (1em * 1.5);
$vertical-grid-opacity: 0.3 !global;
@ravenwilde
ravenwilde / fancy-cta.scss
Last active August 29, 2015 14:13
Fancy animated call to action button mixin.
// CALL TO ACTION BUTTON - INSPIRED BY CODROPS, 5th button, top section @ http://tympanus.net/Development/CreativeButtons/
// Fancy hover effect happens on desktop, but does not occur on mobile in order work with iOS hover behavior
$bg-color: #0e83cd;
$color: #fff;
@mixin call-to-action() {
position: relative;
z-index: 1;
@ravenwilde
ravenwilde / _settings.scss
Created October 22, 2014 15:23
Sass files to style the interface that displays the data layout created by the javascript in my charts.js gist
$font-family-sans-serif : 'Ubuntu', Arial, sans-serif;
$font-family-numbers : 'Ubuntu Mono', Arial, sans-serif;
/* COLORS */
$white : #FFFFFF;
$ghost : #FAFAFA;
$jet : #222222;
$black : #000000;
@ravenwilde
ravenwilde / charts.js
Created October 20, 2014 21:19
Pulls data from a JSON feed, parses and prepares it for hand-off to and return from Google Charts API. Also pulls data from the same feed and posts it elsewhere on the page for display in tables and large callouts.
//parses raw JSON and makes workable array
function prepData(jsonData) {
var dataArr = [];
var staffArr = [];
var bugsArr = [];
$.each($.parseJSON(jsonData), function(key,value){
if (key == 'staff_tickets') {
var result = $.parseJSON(value);
$.each(result, function(obj,vals) {
var tempArr = [];