Skip to content

Instantly share code, notes, and snippets.

View crates's full-sized avatar
❤️‍🔥
Crates is CEO of llnnll.com, Athames.com, Crates.Media / Cr8s.Net : 844-CR8S-NET

Crates McDade crates

❤️‍🔥
Crates is CEO of llnnll.com, Athames.com, Crates.Media / Cr8s.Net : 844-CR8S-NET
View GitHub Profile
@crates
crates / reloadCSS.js
Created February 11, 2020 17:38 — forked from kdzwinel/reloadCSS.js
Reload CSS files without reloading the page
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
@crates
crates / mov-to-gif.sh
Created February 11, 2020 17:37 — forked from RodrigoEspinosa/mov-to-gif.sh
Alias for OS X Screencast to animated GIF
mov-to-gif() {
ffmpeg -i $1 -vf "scale=1024:-1:flags=lanczos" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=0 --delay=7 #
}
@crates
crates / movgif.sh
Created February 11, 2020 17:34 — forked from kdzwinel/mkgif.sh
Making gifs from mov files on OS X.
#!/bin/sh
palette="./palette.png"
# speed - setpts=0.15*PTS,
# crop - ffmpeg -i in.mov -filter:v "crop=480:600:320:80" out.mov
filters="fps=25,scale=640:-1:flags=lanczos"
ffmpeg -v warning -i $1 -vf "$filters,palettegen" -y $palette
@crates
crates / identify-undefined-css-classes.js
Created February 11, 2020 17:33 — forked from kdzwinel/main.js
List all undefined CSS classes
/*
This script attempts to identify all CSS classes mentioned in HTML but not defined in the stylesheets.
In order to use it, just run it in the DevTools console (or add it to DevTools Snippets and run it from there).
Note that this script requires browser to support `fetch` and some ES6 features (fat arrow, Promises, Array.from, Set). You can transpile it to ES5 here: https://babeljs.io/repl/ .
Known limitations:
- it won't be able to take into account some external stylesheets (if CORS isn't set up)
- it will produce false negatives for classes that are mentioned in the comments.
@crates
crates / code-kata-fetch-promise-arrays.js
Created February 11, 2020 17:32 — forked from kdzwinel/kata.js
Code kata featuring: fetch, promises, array.sort, array.reduce, array.map
// 1) fetch members of polish parlament (poslowie)
// 2) group them by occupation
// 3) sort occupations by number of members and occupation name
// 4) get top 5 entries
// 5) print result on the screen
(function() {
'use strict';
const POSLOWIE_ENDPOINT = 'https://api-v3.mojepanstwo.pl/dane/poslowie/';
@crates
crates / animate-ui-component.js
Created February 11, 2020 17:32 — forked from kdzwinel/main.js
Animate any UI component in a fancy way
function getFamilyTree(el) {
const levels = new Map();
function bfs(el, level) {
const levelElements = levels.get(level) || [];
for (const child of el.children) {
child.style.opacity = '0';
levelElements.push(child);
@crates
crates / concentrate.js
Created February 11, 2020 17:29 — forked from kdzwinel/concentrate.js
DevTools snippet that lets you focus on a single element during developement
(function() {
function hideEvertyhingAround($el) {
const $parent = $el.parentElement;
$parent.style.transition = 'background-color 150ms ease-in';
$parent.style.backgroundColor = 'white';
$parent.childNodes.forEach($child => {
if($child !== $el && $child.style) {
@crates
crates / scroll_to.js
Created February 11, 2020 17:29 — forked from kdzwinel/scroll_to.js
Scroll to element or scroll by value
let rafId;
function scrollToElement(el, offsetTop = 0) {
scrollByValue(el.getBoundingClientRect().top - offsetTop);
}
function scrollByValue(offsetTop = 0) {
if (offsetTop !== 0) {
if (rafId) {
cancelAnimationFrame(rafId);