Skip to content

Instantly share code, notes, and snippets.

Austin amcdnl

Block or report user

Report or block amcdnl

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
View clone.ts
import { cloneElement, useMemo } from 'react';
import classNames from 'classnames';
interface CloneElementProps {
element: any | null;
children?: any;
* CloneElement is a wrapper component for createElement function.
View pub.yml
- run:
name: publish to npm
command: |
echo "//$NPM_TOKEN" > ~/.npmrc
npm publish dist/js/*
View invader.js
* Space invaders canvas game
* Inspiration:
export const spaceInvaders = canvas => {
let screen;
let gameSize;
let game;
let invaderCanvas;
View todo
centerGraph() {
const { height, width } = this.graph.getGraphDimensions();
this.panTo(width / 2, height / 2);
panTo(x: number, y: number) {
const { offsetX, offsetY, zoomLevel } = this.state;
const newOffsetX = (x - offsetX) * (zoomLevel + (this.chartWidth / 2));
View rough.ts
class Foo {
do(name: string, userObj: object);
do(name: string, age: string | object, birthday: string) {
if (typeof age !== 'string') {
// do thing
} else {
// do other thing
View thingie.js
ctx.moveTo(topLeft, 0);
ctx.lineTo(geom.width - topRight, 0);
ctx.lineTo(geom.width, geom.height - bottomRight);
ctx.lineTo(geom.width - bottomRight, geom.height);
ctx.lineTo(bottomLeft, geom.height);
ctx.lineTo(0, geom.height - bottomLeft);
ctx.lineTo(topLeft, 0);
View .eslintrc
"extends": [
"plugins": ["typescript", "react", "prettier", "standard", "jest", "graphql"],
View foo.ts
// Problem: Create a UI that will display a list of fields
// that will have nesting based on dot notation...
// Example fields
const exampleFields = [

Building your own data visualization framework with D3.js and React

D3.js is a great framework for creating unique and complex visualizations but the API reminds me of jQuery. It lacks a good structure and doesn't offer a declarative syntax we've all come to love with frameworks like React and Angular. We will dive into harnessing the power of D3 with the super hero powers of React to create composable declarative visualizations.



Austin is a JavaScript veteran with over 10 years building web applications with client-side technologies including being a contributor and team member on projects like Angular. Austin enjoys sharing his experience with other through speaking around the world, podcasts about web technology and creating and contributing to open-source projects.

Checkout Austin online at:

You can’t perform that action at this time.