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; // ¯\\_(ツ)_/¯

dtinth

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

lhorie

So there were a few threads going around recently about a challenge to write the longest sequence of keywords in Javascript:

• https://twitter.com/bterlson/status/1093624668903268352
• https://news.ycombinator.com/item?id=19102367

There are, however, a few problems:

• These solutions use non-keyword tokens (null, true, false are actually Literals, not Keywords)
• One of the solutions isn't quite valid (new super)

jonalmeida

#!/usr/bin/env python3

import csv, sys, re
from functools import reduce

"""
From StackOverflow: https://stackoverflow.com/a/32486472

Strips whitespace off from the headers of CSV field names.
"""

cieplak

* (()())
* ((()())())
* (((()())())())
  (((()())())(()()))
* ((((()())())())())
  ((((()())())())(()()))
* ((((()())())(()()))())
  ((((()())())(()()))(()()))
  ((((()())())(()()))((()())()))
  ((((()())())(()()))(((()())())()))

djmitche

[UPDATE July 2024]

New year, new links:

• CLG
• Engineering CLG

I don't work at Mozilla any longer, but I'm happy to keep this up-to-date. Please reach out (same username on gmail) with any updates!

[UPDATE June 2020]

jasonLaster

Time Travel Debugging

Time Travel refers to the ability to record a tab and later replay it ([WebReplay][wrr]). The technology is useful for local development, where you might want to:

• pause and step forwards or backwards
• pause and rewind to a prior state
• rewind to the time a console message was logged
• rewind to the time an element had a certain style or layout
• rewind to the time a network asset loaded

mholt

// Package main is a sample macOS-app-bundling program to demonstrate how to
// automate the process described in this tutorial:
//
// https://medium.com/@mattholt/packaging-a-go-application-for-macos-f7084b00f6b5
//
// Bundling the .app is the first thing it does, and creating the DMG is the
// second. Making the DMG is optional, and is only done if you provide
// the template DMG file, which you have to create beforehand.
//
// Example use:

gricard

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ webpack@4.0.0-beta.2