William Cantin wilomgfx

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

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)

This API was removed in React 17

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

Theming Ant Design with Sass and Webpack

This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.

What this solution offers:

use a single sass-file to customize (no duplicate variables for your project and Ant)
hot reload compatibility
no dependencies on outdated npm modules
easy integration with your existing webpack setup (webpack 3+ tested)

For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

First method (override Material UI classnames):

1 - Add the property classes in the AppBar component:

    <AppBar classes={{root: 'my-root-class'}}

VSCode

Bracket Pair Colorizer

Sublime Text

BracketHighlighter rainbowth for ST 3 rainbowth for ST 2

	#!/bin/bash

	# Ensure we're working on the latest version of the main branch
	git switch main
	git fetch
	git pull

	# Create a new branch
	git switch -c vitest

	{
	"version": "0.2.0",
	"configurations": [
	{
	"type": "node",
	"request": "launch",
	"name": "Jest Current File",
	"runtimeExecutable": "sh", // <-- The important bit!
	"program": "node_modules/.bin/jest",
	"args": ["${relativeFile}"],

	# finds all .js files that have either `</` or `/>` tags in them and renames them to .jsx
	find ./src -type f -name '.js' -not -name '.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</\|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;