Skip to content

Instantly share code, notes, and snippets.

Robat Williams robatwilliams

Block or report user

Report or block robatwilliams

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@robatwilliams
robatwilliams / frontendne2019.md
Created Apr 11, 2019
Notes from Frontend NE 2019 conference
View frontendne2019.md

Going Offline (Jeremy Keith)

  • Good libraries aim to make themselves redundant: consider jQuery > querySelector.
  • Users don't expect sites to work offline.

Using a Modern Web to Recreate 1980s Screens... (Remy Sharp)

  • Typed arrays are much quicker. Fixed length and known types mean they can be in contiguous memory.
  • "Crapify"
@robatwilliams
robatwilliams / D3Adapter.js
Last active Apr 18, 2019
Framework adapters: D3-for-React + React-for-D3
View D3Adapter.js
import * as d3 from 'd3';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
/**
* Adapter for using D3 components in React.
*
* To be compatible, D3 components must follow the reusable component convention
* as proposed by Mike Bostock: https://bost.ocks.org/mike/chart/
*
View git-safe-hard-reset.sh
# put in ~/.bashrc
alias git='gitwrapper'
gitwrapper () {
if [ "$1" == 'reset' ] && [ "$2" == '--hard' ]; then
\git status --short
read -n 1 -p 'Continue with hard reset (y/n)? ' answer
if [ "$answer" == 'y' ]; then
@robatwilliams
robatwilliams / README.md
Last active Jan 18, 2018
Compound annual growth rates (dynamic scale)
View README.md

Displays investment compound annual growth rates over all time frames. Rows represent start years from 1986, columns represent number of years the investment was held for.

Dynamic scale using ckmeans data clustering algorithm. This assigns the colours to groups with minimal differences in their values. A dynamic scale makes the visualisation usable on a wide variety of data, but makes it difficult to compare different sets of data (the scales would be different). In this implementation, it also results in a non-nice scale.

Inspired by the Portfolio Charts website's heat map - calculator, explanation.

FTSE All-Share Index yearly return data from http://www.swanlowpark.co.uk/ftseannual.jsp

References for CAGR calculation in code comments.

@robatwilliams
robatwilliams / README.md
Last active Jan 17, 2018
Compound annual growth rates
View README.md

Displays investment compound annual growth rates over all time frames. Rows represent start years from 1986, columns represent number of years the investment was held for.

Inspired by the Portfolio Charts website's heat map - calculator, explanation.

FTSE All-Share Index yearly return data from http://www.swanlowpark.co.uk/ftseannual.jsp

References for CAGR calculation in code comments.

@robatwilliams
robatwilliams / README.md
Last active Dec 27, 2018
Currencies, then and now (2)
View README.md

Companion gist for blog post: Mapping currency strength changes with D3

Displays currency strengthening or weakening against other world currencies, between a reference date in the past and today.

Try it out - click to change the base country, use the picker to change the reference date. Data is available from the start of 2000.

Uses ES6 features, so you need a modern browser.

Improvements over v1

  • Optionally use currencylayer for data, which has more countries (see "Data sources" below)
@robatwilliams
robatwilliams / README.md
Last active Dec 27, 2018
Currencies, then and now
View README.md

Companion gist for blog post: Mapping currency strength changes with D3

Displays currency strengthening or weakening against other world currencies, between a reference date in the past and today.

Try it out - click to change the base country, use the picker to change the reference date. Data is available from the start of 2000.

Uses ES6 features, so you need a modern browser.

Data sources

World map: https://github.com/topojson/world-atlas

@robatwilliams
robatwilliams / README.md
Last active Jan 10, 2018
Asset allocation glide path chart
View README.md

Reproduction of a real asset allocation glide path chart using D3 and D3FC.

It shows the investment fund moving towards safer assets as the target date nears.

Uses ES6 features, so you need a modern browser.

View understanding-spectre.js
// Based on https://spectreattack.com/spectre.pdf, sections 3 mainly, 4, 4.3
// Also see: https://webkit.org/blog/8048/what-spectre-and-meltdown-mean-for-webkit/
const array1 = [1, 2, 3];
const array1_size = 3;
const array2_size = (64 * 1024) / 8;
const array2 = new Array(array2_size); // 8192 empty 8-byte entries = 64KB. 64KB is 256*256
function run() {
setup();
@robatwilliams
robatwilliams / HtmlModuleScriptWebpackPlugin.js
Created Dec 3, 2017
Plugin to create HTML page which loads ES5 or ES6 build according to browser capability
View HtmlModuleScriptWebpackPlugin.js
const { concat, mapKeys, merge, uniq } = require('lodash');
/**
* Tweaked from original by Mike Engel
* https://github.com/jantimon/html-webpack-plugin/issues/782#issuecomment-331229728
*
* Use this with multiple Webpack configurations that generate different builds
* for modern and legacy browsers. But use the same instance of the plugin in both configurations.
*
* It keeps track of assets seen in each build configuration, and appends script tags for
You can’t perform that action at this time.