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 pub.yml
- run:
name: publish to npm
command: |
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
npm publish dist/js/*
View invader.js
/**
* Space invaders canvas game
* Inspiration: https://codepen.io/amcdaniel2/pen/MdQZpL
*/
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.beginPath();
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": [
"standard",
"plugin:react/recommended",
"prettier",
"prettier/react",
"prettier/standard",
"plugin:jest/recommended"
],
"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 = [
'name',
'description',
'entity.hostname',
'entity.url',
'entity.ipaddress.name',
View talk.md

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.

View bio.md

Bio

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:

View spring-range.txs
const SpringRange = (p) => {
const { items, children, keys, from, enter, exit, update, ...rest } = p;
let map = new Map();
const renderChild = ({ delta }, item, index) => {
const range = [index / items.length, 1]
const itemKey = keys(item, index);
let prevItem = map.get(index);
console.log(prevItem)
You can’t perform that action at this time.