Skip to content

Instantly share code, notes, and snippets.

View Fabiantjoeaon's full-sized avatar

Fabian Fabiantjoeaon

View GitHub Profile
import canvasSketch from "canvas-sketch";
import { random } from "canvas-sketch-util";
import _ from "lodash";
document.body.style.backgroundColor = "#A08BED";
const settings = {
animate: true,
duration: 15,
dimensions: [2048, 2048],
@Fabiantjoeaon
Fabiantjoeaon / bling.js
Created May 26, 2017 20:25
No need for jQuery, just use Bling (by @paulirish @wesbos)
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = NodeList.prototype.addEventListener = function(name, fn) {
@Fabiantjoeaon
Fabiantjoeaon / localStorageMiddleware.js
Created May 5, 2017 08:46
Redux middleware for saving to local storage on action intercept
const localStorageMiddleware = store => next => action => {
if (action.type === REGISTER || action.type === LOGIN) {
if (!action.error) {
window.localStorage.setItem('jwt', action.payload.user.token);
agent.setToken(action.payload.user.token);
}
} else if (action.type === LOGOUT) {
window.localStorage.setItem('jwt', '');
agent.setToken(null);
}
@Fabiantjoeaon
Fabiantjoeaon / ambientLight.js
Last active October 30, 2016 16:02
Useful HTML5 Web API uses, most change in the future, and have limited browser support, so be sure to look these up before implementing them. src: https://www.youtube.com/watch?v=NCGLPp778JY
// Listen for ambient lighting in room
window.addEventListener('devicelight', (e) => {
console.log(`${e.value} lux`);
});
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement /*, fromIndex*/) {
'use strict';
if (this == null) {
throw new TypeError('Array.prototype.includes called on null or undefined');
}
var O = Object(this);
var len = parseInt(O.length, 10) || 0;
if (len === 0) {
@Fabiantjoeaon
Fabiantjoeaon / mapTree.js
Last active October 30, 2016 16:03
Object tree mapper, executes map for every node in tree. Src: @mpjme, https://www.youtube.com/watch?v=2jp8N6Ha7tY
const mapTree = (node,mapper) => {
return {
value: mapper(node.value),
nodes: node.nodes
? node.nodes.map( x =>
mapTree(x, mapper)
)
: null
}
}
@Fabiantjoeaon
Fabiantjoeaon / scroll.js
Last active November 6, 2019 19:01
Vanilla JS (ES6) smooth scrolling w/ Easing functions
const scrollToItemId = (containerId, srollToId) => {
const scrollContainer = document.getElementById(containerId);
const item = document.getElementById(scrollToId);
//with animation
const from = scrollContainer.scrollTop;
const by = item.offsetTop - scrollContainer.scrollTop;
if (from < item.offsetTop) {
if (item.offsetTop > scrollContainer.scrollHeight - scrollContainer.clientHeight) {
by = (scrollContainer.scrollHeight - scrollContainer.clientHeight) - scrollContainer.scrollTop;
@Fabiantjoeaon
Fabiantjoeaon / ellipsis.css
Created September 9, 2016 08:01
Elegant overflow with text-overflow: ellipsis; Concatenated text with '...'.
width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@Fabiantjoeaon
Fabiantjoeaon / getURL.js
Created September 2, 2016 09:27
ES6 retrieve GET parameters from URL
/**
* Retrieve parameter values from URL
* @param {name} name of paramater
* @param {url} URL to fetch parameter from | optional
* @returns URL param value || null
*/
const getURLParemeters = ( name, url ) => {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
@Fabiantjoeaon
Fabiantjoeaon / iife.js
Created September 1, 2016 18:11
ES6 IIFE stored in scoped variable
let fn;
(fn = () => {
})();
fn();