Skip to content

Instantly share code, notes, and snippets.

View kdzwinel's full-sized avatar

Konrad Dzwinel kdzwinel

719 followers · 0 following
View GitHub Profile
@kdzwinel
kdzwinel / concentrate.js
Last active February 11, 2020 17:29
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) {
@kdzwinel
kdzwinel / main.js
Created April 15, 2016 20:59
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);
@kdzwinel
kdzwinel / kata.js
Last active February 11, 2020 17:32
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/';
@kdzwinel
kdzwinel / main.js
Created September 24, 2015 10:13
stroke effect generator
var color = 'white';
var r = 1.4;//circle readius
var x = -0.15;//circle center
var y = 0.15;
function getXY(angle) {
return {
x: r * Math.cos(angle) + x,
y: r * Math.sin(angle) + y
};
@kdzwinel
kdzwinel / LICENSE.txt
Last active February 11, 2020 17:40
Custom Elements finder < 140 bytes (119 bytes)
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@kdzwinel
kdzwinel / index.md
Last active February 11, 2020 17:41
What can be built with JS/HTML/CSS?

#What can be built with JS/HTML/CSS?

Any application that can be written in JavaScript will eventually be written in JavaScript.

Jeff Atwood, July 17, 2007

Desktop app

@kdzwinel
kdzwinel / mkgif.sh
Last active February 11, 2020 22:43
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
@kdzwinel
kdzwinel / reloadCSS.js
Last active February 13, 2020 11:18
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;
});
@kdzwinel
kdzwinel / index.js
Created November 9, 2015 19:53
browser-sync-client Chrome Extension socket
"use strict";
var MSG_NAMESPACE = 'browser-sync';
var port = chrome.runtime.connect({name: MSG_NAMESPACE});
/**
* @returns {string}
*/
exports.getPath = function () {
return window.location.pathname;
@kdzwinel
kdzwinel / appcues-frame.html
Created May 28, 2020 15:52 — forked from dharb/appcues frame
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(window) {
// Allow listeners to subscribe to localStorage events.
var isObject = function(obj) { return Object.prototype.toString.call(obj) === '[object Object]' },
listeners = [];
var postMessage = function(targetWindow, mesg, targetOrigin) {