thomaswilburn

Re: Iterate

I'm so old I remember when arrays in JavaScript didn't have forEach() or map(), and a lot of libraries would implement their own functional looping constructs, which were better than regular loops because you got a new function scope (remember, we didn't have let or const either). We all had to adjust when native forEach() landed because we were used to jQuery's each(), which had the arguments in the wrong order.

I was reminded of this while doing some scraping last week using Cheerio to load and traverse an HTML page in Node. Cheerio implements a jQuery-like API, which is genuinely pleasant to use, but carries some of that legacy behavior (like each(index, item) argument ordering) with it in ways that are jarring if you haven't used actual jQuery in a while. Fortunately, Cheerio also implements the iterator protocol on its collections, so if you just want the items for a given selector, you can use for ... of loops and not have to think abo

thomaswilburn

#include "print.h"
#include QMK_KEYBOARD_H

enum ctrl_keycodes {
    L_BRI = SAFE_RANGE, //LED Brightness Increase                                   //Working
    L_BRD,              //LED Brightness Decrease                                   //Working
    L_EDG_I,            //LED Edge Brightness Increase
    L_EDG_D,            //LED Edge Brightness Decrease
    L_EDG_M,            //LED Edge lighting mode
    L_PTN,              //LED Pattern Select Next                                   //Working

thomaswilburn

#include QMK_KEYBOARD_H

enum ctrl_keycodes {
    L_BRI = SAFE_RANGE, //LED Brightness Increase                                   //Working
    L_BRD,              //LED Brightness Decrease                                   //Working
    L_EDG_I,            //LED Edge Brightness Increase
    L_EDG_D,            //LED Edge Brightness Decrease
    L_EDG_M,            //LED Edge lighting mode
    L_PTN,              //LED Pattern Select Next                                   //Working
    L_PTP,              //LED Pattern Select Previous                               //Working

thomaswilburn

Win zip()

I don't often use zip(), but by coincidence this week I ran into it a few times, using both Python and JavaScript. In the former, it's a built-in, but in the latter it's typically provided by a library like D3. And it struck me as kind of a fun warm-up challenge. How would you write this function in modern JavaScript?

Well, let's see how D3 does it. Oh, it's a wrapper around transpose(), here we go...

import min from "./min.js";

function length(d) {

thomaswilburn

Reading lit-html

I've been interested in lit-html for a while now: it's an HTML templating solution that doesn't require a build step like JSX, uses standard JavaScript tagged literals for its syntax, and claims to selectively update the DOM without a V-DOM. At 8KB minified, it's also reasonably-sized--not quite as tiny as my go-to dot.js micromodule, but the functionality is much higher.

In the past, reading through library code has been one of the ways that I got better at development. I remember Paul Irish's classic "10 things I learned from reading the jQuery source" video, which had inspired me to do my own spelunking back in the day. Figuring out how jQuery, D3, and Backbone translated high-level function calls into the low-level browser API taught me a lot, and I figured lit-html would be a similar chance to learn something new.

I was right! It turns out, there's a lot going on under the hood of lit-html. Even better, much of it is built on top of platform features, as opposed to pure JS abstracti

thomaswilburn

set -x
set -e

mkdir -p output

cd original
for f in *.jpg; do
  # first image in the stack is the base image
  convert $f \
    # second image is the same thing, but with dilate/erode applied to remove thin lines (i.e., text)

thomaswilburn

<style>
:host {
  width: 300px;
  height: 150px;
  display: block;
  position: relative;
}

canvas {
  position: absolute;

thomaswilburn

var presets = {
  starting: {
    r: 55,
    efficacy: 95,
    immunity: 0
  },
  baseline: {
    immunity: 0
  },
  lowImmunity: {

thomaswilburn

/*

Register functions to be notified if a specific selector matches (or stops matching)

*/

var watchList = new Map();

var glance = function(watch) {
  var result = document.querySelector(watch.selector);

thomaswilburn

var ElementBase = require("../elementBase.js");
var Retriever = require("../retriever.js");

/*
Let's make a web component the elections20-primaries way! We're going to start by 
subclassing our base element, since it makes the setup a little more declarative. 
You'll see how that works in a minute.
*/
class DemoElement extends ElementBase {