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 / npm-yo.har
Created October 14, 2016 22:38
`yarn add yo` vs `npm i yo` HARs
This file has been truncated, but you can view the full file.
{
"log": {
"version": "1.2",
"creator": {
"name": "WebInspector",
"version": "537.36"
},
"pages": [],
"entries": [
@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 / index.html
Last active November 10, 2017 22:44
<head>
...
<meta name="viewport" content="width=device-width">
...
</head>
@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 / main.js
Last active April 13, 2024 20:50
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.
@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 / optimizely.js
Created June 17, 2015 21:31
Calculating A/B Test Sample Size
"use strict";
//based on https://www.optimizely.com/resources/sample-size-calculator/
function getSampleSize() {
let effect = 0.05; // Minimum Detectable Effect
let significance = 0.95; // Statistical Significance
let conversion = 0.05; // Baseline Conversion Rate
let c = conversion - (conversion * effect);
let p = Math.abs(conversion * effect);
@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