Skip to content

Instantly share code, notes, and snippets.

View kfranqueiro's full-sized avatar

Kenneth G. Franqueiro kfranqueiro

63 followers · 0 following
View GitHub Profile
@kfranqueiro
kfranqueiro / inclusiveCards.tsx
Created June 13, 2021 20:37
Implementation of https://inclusive-components.design/cards/ (using Chakra UI, but shouldn't be hard to migrate to something else) - demo at https://codesandbox.io/s/inclusive-components-cards-using-react-chakra-ui-vq9mm
import * as React from "react";
import { BoxProps, CSSObject } from "@chakra-ui/react";
interface Options {
/** Distance (in px) under which to still consider interaction a click */
threshold?: number;
}
/**
* Returns mousedown and mouseup handlers to process clicks on an ancestor of the
@kfranqueiro
kfranqueiro / README.md
Last active September 11, 2020 16:16
Rudimentary visual regression testing strategery

Introduction

This gist documents the setup I originally used to run visual diffs on the MDC Web demo pages for testing material-components/material-components-web#1285, but I have used it since then on other projects.

Setup

  1. Create a directory containing the js and txt files from this gist
  2. npm i

Process

@kfranqueiro
kfranqueiro / spot-bookmarklet.txt
Last active October 25, 2019 21:56
spot - a script/bookmarklet providing utility functions for finding unused CSS selectors/classes
javascript:window.spot=function(){function a(a,b){for(var d,c=document.styleSheets,e=0,f=c.length;f>e;e++)if((!b||c[e].href&&-1!==c[e].href.indexOf(b))&&(d=c[e].cssRules,d&&d.length))for(var g=d.length;g--;)d[g].selectorText&&a(d[g].selectorText)}function b(a,c){c||a(document.documentElement);for(var d=(c||document.documentElement).children,e=0,f=d.length;f>e;e++)a(d[e]),b(a,d[e])}function c(a){var b={},c=getComputedStyle(a);for(var d in c)isNaN(d)&&"function"!=typeof c[d]&&(b[d]=c[d]);return b}function d(a,b){var c=Object.keys(a);if(c.length!==Object.keys(b).length)return!1;for(var d=c.length;d--;)if(a[c[d]]!==b[c[d]])return!1;return!0}return{unusedClasses:function(){var a=Array.prototype.slice,e={},f=[];b(function(b){if(b.className){var g,h,f=a.call(b.classList);g=c(b);for(var i=f.length;i--;)h=f[i],e[h]||(b.classList.remove(h),e[h]=!d(g,c(b)),b.classList.add(h))}});for(var g in e)e[g]===!1&&f.push(g);return f},unusedSelectors:function(b){var c={};return a(function(a){document.querySelector(a)||(c[a]=!0)},b
@kfranqueiro
kfranqueiro / resize.js
Last active October 9, 2019 14:03
Bookmarklet to create a window and resize it multiple times (for condensing breakpoint screenshots into gifs)
(function() {
const bg = document.createElement('div');
bg.style.position = 'absolute';
bg.style.top = '0';
bg.style.width = '100%';
bg.style.height = '100%';
bg.style.background = '#000';
bg.style.zIndex = '99999';
document.body.appendChild(bg);
@kfranqueiro
kfranqueiro / README.md
Last active February 27, 2019 19:17
Script to replace MDC Web npm dependencies with packages from local clone

This script will replace the MDC Web packages it finds under node_modules with copies of the folders from a local MDC Web clone. This can be used to test MDC Web code ahead of releases.

Instructions

Easiest usage:

  1. Add this js file to a directory in PATH
  2. chmod 700 it
  3. Go into the root directory of a project that uses MDC Web dependencies and run the script
@kfranqueiro
kfranqueiro / input.scss
Last active March 16, 2018 01:01
MDC Web #2415 experimentation
@function replace-or-append($list, $target, $value) {
$newlist: ();
$replaced: false;
@for $i from 1 through length($list) {
@if (nth($list, $i) == $target) {
$newlist: append($newlist, $value);
$replaced: true;
} @else {
$newlist: append($newlist, nth($list, $i));
@kfranqueiro
kfranqueiro / DeferredDeclarativeMenu.js
Created March 13, 2011 21:37
Extension of dijit.Menu which fetches its items from a server endpoint outputting widgets in declarative HTML.
dojo.provide('kgf.widget.DeferredDeclarativeMenu');
dojo.require('dojo.parser');
dojo.require('dojo.string');
dojo.require('dijit.Menu');
dojo.requireLocalization('dijit', 'loading');
dojo.declare('kgf.widget._DeferredDeclarativeMenuMixin', null, {
// src: String
// URL to be loaded when this menu is opened.
@kfranqueiro
kfranqueiro / findDep.js
Last active March 1, 2016 22:47
Functions to find what's depending on a loaded Dojo module or what a module depends on (uses ES5 methods)
function findDep(depid) {
return Object.keys(require.modules).map(function(mid) {
return require.modules[mid];
}).filter(function(m) {
return m.deps && m.deps.map(function(dep) {
return dep.mid;
}).indexOf(depid) > -1;
}).map(function(m) {
return m.mid;
});
@kfranqueiro
kfranqueiro / MoreMixin.html
Created March 15, 2013 04:22
Example of extending dgrid's `_StoreMixin` to present a list or grid progressively, one page at a time.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../dojo/resources/dojo.css">
<link rel="stylesheet" href="../../dgrid/css/skins/claro.css">
<style>
#list {
border: none;
height: auto;
@kfranqueiro
kfranqueiro / enterUp.js
Created February 22, 2013 21:02
Example of a dojo/on extension event that fires when the enter key is released
function enterUp(node, listener) {
return on(node, "keyup", function(evt) {
if (evt.keyCode === 13) {
listener.call(this, evt);
}
});
}
// Usage with dojo/on: on(element, enterUp, ...)
// Usage with dgrid editor: editor({ editOn: enterUp, ... })