zeraphie

System Preferences

In my System Preferences I've set the following:

• Background: #1D1F20
• Text Colour: #EFEFEF
• Selection: #9FB8D8
• Cursor: Vertical Bar
• Blink Cursor: Checked

zeraphie

export default class DataTable {
    /**
     * Add the dataset (from a database query) to the class instance and also
     * contain the attributes for the table element
     * 
     * @param {json}
     * @param {Object}
     */
    constructor(data, attributes = {}){
        this.data = data;

zeraphie

export default class SuperFetch {
    constructor(url, data, params = {}){
        this.url = url;
        this.data = data;
        this.params = params;
    }

    /**
     * Send a get request using the fetch api
     *

zeraphie

Dual Words

I was bored and made this small tool to merge words together, below is an example of it working in action

https://codepen.io/zephyr/full/GxPbZR

This was made using this

If you want to make a word with the allowed letters, this tool can help. The allowed letters are: "aeioucdhmrtvx"

zeraphie

let selector = 'a'; [...document.querySelectorAll(selector)].reduce((total, cur) => ++total, 0);

zeraphie

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

zeraphie

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

zeraphie

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

zeraphie

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

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