Skip to content

Instantly share code, notes, and snippets.

View zeraphie's full-sized avatar

Izzy Skye zeraphie

View GitHub Profile
@zeraphie
zeraphie / !-dotfiles.md
Last active June 12, 2018 16:34
Dotfiles

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
zeraphie / DataTable.js
Created May 21, 2018 16:02
Create an HTMLElement table from a json response from a database query
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
zeraphie / SuperFetch.js
Last active May 14, 2018 14:11
A fetch wrapper that takes the same parameters and formats the fetch request for you
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
zeraphie / !-README.md
Last active March 27, 2023 04:26
Make a word with a different one ontop of it like Beͦsͧtͭ tͨoͪoͣlͬ eͫvͤeͩr

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"

let selector = 'a'; [...document.querySelectorAll(selector)].reduce((total, cur) => ++total, 0);
@zeraphie
zeraphie / !-readme.md
Last active January 25, 2018 14:27
JavaScript Engine
@zeraphie
zeraphie / !-readme.md
Last active October 16, 2019 11:56
Add a service worker that can read a sitemap

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
zeraphie / !-readme.md
Last active January 8, 2018 18:09
Service Worker

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
zeraphie / !-easy-accordion.md
Last active July 17, 2017 13:12
A really easy way of doing responsive accordions

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
zeraphie / !-easy-lightbox.md
Last active June 27, 2017 14:33
This is just a really easy lightbox that can be used, created with minimal javascript and css

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