jameswquinn’s gists

jameswquinn / gist:546e375679fa57eada25d0808843b7ce

Created September 5, 2019 16:33 — forked from pdewouters/gist:92af5d06f95fa201edf5b3c19809661b

Fetch from API with useEffect

	import React, { useState, useEffect } from "react";


	export default function QuoteBox() {
	const API_URL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
	const [quote, setQuote] = useState({});
	const [isLoading, setLoading] = useState(false);
	async function queryAPI() {
	setLoading(true);
	const response = await fetch(API_URL);

jameswquinn / LazyLoader.jsx

Created August 26, 2019 10:59 — forked from Shoya90/LazyLoader.jsx

	// IntersectionObserver polyfill
	import 'intersection-observer'
	// *****************************

	import React, { Component } from 'react'

	export default class ImageLazyLoader extends Component {

	state = {
	isLoaded: false,

jameswquinn / gist:b8c425c5989f1fdf72a22cec50763b32

Created July 16, 2019 17:14 — forked from jsturgis/gist:3b19447b304616f18657

public test videos

	var mediaJSON = { "categories" : [ { "name" : "Movies",
	"videos" : [
	{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
	"subtitle" : "By Blender Foundation",
	"thumb" : "images/BigBuckBunny.jpg",
	"title" : "Big Buck Bunny"
	},
	{ "description" : "The first Blender Open Movie from 2006",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],

jameswquinn / router.js

Created November 11, 2018 01:04 — forked from fr0gs/router.js

	//ROUTER
	//Silly small javascript router to help me learn how they worked in a very simple way

	(function (){
	const appDiv = "app";

	// Both set of different routes and template generation functions
	let routes = {};
	let templates = {};

jameswquinn / fiddle.html

Created March 18, 2018 14:23 — forked from anonymous/fiddle.html

(source: https://jsfiddle.net/nyh18bLq/)

	<script src=//unpkg.com/vue></script>
	<script src=//unpkg.com/vuetrend></script>

	<div id="app">
	<trend
	:data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
	:gradient="['#6fa8dc', '#42b983', '#2c3e50']"
	auto-draw
	smooth>
	</trend>

jameswquinn / fiddle.html

Created March 15, 2018 19:37 — forked from anonymous/fiddle.html

VuexFire Todo App Demo (source: https://jsfiddle.net/973dLvsy/)

	<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
	<script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/vuex"></script>
	<script src="https://unpkg.com/vuexfire"></script>

	<div id="app">
	<input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
	<ul>
	<li v-for="todo in todos">
	<input :value="todo.text" @input="updateTodoText(todo, $event.target.value)">

jameswquinn / fiddle.babel + jsx

Created March 12, 2018 19:45 — forked from anonymous/fiddle.babel + jsx

Vue Carousel - Navigation example (source: https://jsfiddle.net/toddlawton/46wegz8a/?utm_source=website&utm_medium=embed&utm_campaign=46wegz8a)

	const buildSlideMarkup = (count) => {
	let slideMarkup = '';
	for (var i = 1; i <= count; i++) {
	slideMarkup += '<slide><span class="label">' + i + '</span></slide>'
	}
	return slideMarkup;
	};

	new Vue({
	el: '#example',

jameswquinn / fiddle.css

Created March 12, 2018 17:29 — forked from anonymous/fiddle.css

jameswquinn / ripple.js

Created February 4, 2018 16:36 — forked from MattHsiung/ripple.js

Ripple Button

	/**
	* Created by matt on 3/8/17.
	*/
	import React, { PropTypes } from 'react';
	import './button.scss';

	function ripple (e) {
	const midX = e.offsetX;
	const midY = e.offsetY;
	const { width, height } = e.target.getBoundingClientRect();

jameswquinn / gulp-pdf-snippet.js

Created January 4, 2018 22:03

gulp recipe for html to pdf including icon font and images in base 64

	var pdf = require('gulp-html-pdf');
	var replace = require('gulp-replace');
	var inlineimg = require('gulp-inline-image-html');
	var cssfont64 = require('gulp-cssfont64');

	gulp.task('pdf',['font64'], function () {
	return gulp.src('HTML/Pages/*.html')
	.pipe(replace(/<link\b.+href="(?!http)([^"])".>/g, function(s, filename) {
	var filepath = path.relative(__dirname , path.resolve(__dirname + '/HTML/css', filename))
	var style = fs.readFileSync(filepath, 'utf8');