Benjamin Schneider bschne

Getting Started

Install:

jest: npm install --save-dev jest
ts-jest: npm install --save-dev ts-jest @types/jest

Modify package.json

"jest": {
  "transform": {
 "^.+\\.tsx?$": "ts-jest"

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

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

	const { widget } = figma
	const { Rectangle, AutoLayout, Frame, Text, useSyncedState, usePropertyMenu, useEffect, Ellipse } = widget

	function Dot(props) {
	let visible = props.visible
	return (
	<Ellipse
	opacity={visible ? 1 : 0}
	width={24}
	height={24}

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<style type="text/css">
	/* Star hover using lang hack in its own style wrapper, otherwise Gmail will strip it out */
	* [lang~="x-star-wrapper"]:hover *[lang~="x-star-number"]{
	color: #119da2 !important;
	border-color: #119da2 !important;
	}

	tell application "System Events"
	set activeApp to name of first process whose frontmost is true
	end tell

	if application "Slack" is running and activeApp is not equal to "Slack" then
	tell application "Notifications Scripting"
	# set show event handler results to true
	set event handlers script path to (path to me)

	display notification "Slack is running" message "Are you waiting on an @mention?" action button "No" other button "Yes"

	location /resize {
	alias /tmp/nginx/resize;
	set $width 150;
	set $height 100;
	set $dimens "";

	if ($uri ~* "^/resize_(\d+)x(\d+)/(.*)" ) {
	set $width $1;
	set $height $2;
	set $image_path $3;

	# Save this file (after modifying ID_VENDOR and ID_MODEL if necessary) as /etc/udev/rules.d/81-thinkpad-dock.rules

	# These values seem to work for "ThinkPad Mini Dock Plus Series 3"
	SUBSYSTEM=="usb", ACTION=="add\|remove", ENV{ID_VENDOR}=="17ef", ENV{ID_MODEL}=="100a", RUN+="/etc/sbin/thinkpad-dock.sh"