Izzy Skye zeraphie

Easy Lightbox

This is just a really easy lightbox that can be used, created with minimal javascript and css, but has a bit of life and animation!

Demo is visible here https://codepen.io/zephyr/pen/XgzEyP

Easy Accordions

This was my attempt at making a really simple accordion with minimalistic code, taking advantage of a combination of scss and javascript.

It utilizes the offsetHeight method to measure the height of all the elements inside it, even if the max-height is set to 0 on the containing element, and as such, is pretty agnostic about what's contained inside!

Here's a demo: https://codepen.io/zephyr/pen/VWNNdg

Service Workers

Below is some boilerplate for using service workers inside a project so that a web application can still run to some degree in an offline environment

register-service-worker.js would be loaded into your normal javascript
service-worker.js would be on it's own in the directory you wish to run the service worker inside (urls should reflect this)
Things in <> brackets will need to be replaced by their relevant information

Note: Service Workers can only be run in an SSL secured environment

Service Workers with a Sitemap Parser

This is a collection of ES2017 classes (so a transpiler is needed, webpack is used here with babel and the env preset) that utilize Service Workers to add offline support for a site. This example should work for WordPress sites as well

Installation

Because DOMParser is not included in Service Workers, you will need to install the npm package xmldom

npm install xmldom --save-dev

With Service Workers

Engine

This is a simple JavaScript engine built around request animation frame that features a small api for usage and a queue system

https://codepen.io/zephyr/pen/OzeQJO - Bare bones example

https://codepen.io/zephyr/pen/OOeywo - Animating a snow background

Usage

// Have a variable to track frames outside of the engine

	/* ============================================================================
	* __ __ *
	* ____ _ / // /_ ___ _____ ____ ____ *
	* / __ `// // __ \ / _ \ / ___// __ \ / __ \ *
	* / /_/ // // /_/ // __// / / /_/ // / / / *
	* \__,_//_//_.___/ \___//_/ \____//_/ /_/ *
	* *
	============================================================================ */

	<?php

	namespace Junker;

	/**
	* Class Junker
	*
	* Dump some dismissable data - contains basic styles in order to help position
	* the dump and make it clearer to use without
	* clogging up some valuable screen space

	<?php

	if(!function_exists('arrayExtract')){
	/**
	* Extract items from an array and return them using a callback function to
	* compare values
	*
	* @param array $arr
	* @param Callable $callback
	* @param bool $preserve

	# via http://stackoverflow.com/a/28858550

	git diff --shortstat `git hash-object -t tree /dev/null`