OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

JaumeGelabert

"use client";

import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger
} from "@/components/ui/dialog";
import useDragDrop from "@/hooks/useDragDrop";
import { cn, formatBytes } from "@/lib/utils";

caksoylar

Display improvements for the Corne-ish Zen keyboard

This note details the changes made to the Zen and ZMK codebase to improve the experience of e-ink displays.

Getting the changes

You can test out below changes using your Zen config repo by modifying your config/west.yml file, following ZMK instructions:

manifest:
  remotes:
 - name: caksoylar

coryhouse

// This file assures that a Jest test file and Cypress test file exists for each component.
import path from "path";
import fs from "fs";

function getFiles(filepath: string) {
  return fs.readdirSync(filepath).filter(function (file) {
    return fs.statSync(path.join(filepath, file)).isFile();
  });
}

tyler-dot-earth

// Logiops (Linux driver) configuration for Logitech MX Master 3.
// Includes gestures, smartshift, DPI.
// Tested on logid v0.2.2-35-g1c209ed.

// File location: /etc/logid.cfg

devices: ({
  name: "Wireless Mouse MX Master 3";

  smartshift: {

slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

tyler-dot-earth

```
import postcss from 'rollup-plugin-postcss';
import genericNames from 'generic-names';

// ...

postcss({
  extract: true,
  modules: {
    // Special scoped name generation function used to sync

WebReflection

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

tyler-dot-earth

#!/usr/bin/python
# -*- coding: utf-8 -*- 
'''
This is a little script to download every song from every playlist
if your Google Play Music account. Songs are organized as follows:
    <playlist>/<artist>/<album>/<song>.mp3

I Highly recomend putting this file in your %USER%\Music folder
before running.

jinwoo

const fastify = require('fastify');
const fastifyAutoPush = require('fastify-auto-push');
const fs = require('fs');
const path = require('path');
const {promisify} = require('util');

const fsReadFile = promisify(fs.readFile);

const STATIC_DIR = path.join(__dirname, 'static');
const CERTS_DIR = path.join(__dirname, 'certs');