Skip to content

Instantly share code, notes, and snippets.

🍦

Alex Holachek aholachek

🍦
Block or report user

Report or block aholachek

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
@aholachek
aholachek / index.js
Last active Sep 29, 2018
React Flip Toolkit Tutorial
View index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";
import "./styles.css";
const listData = [0, 1, 2, 3, 4, 5, 6, 7];
const colors = ["#6da5ff", "#7971ea", "#5900d8"];
// we'll iterate over this array to create groups of 3 components
const baseArray = [...Array(3).keys()];
View simple_proxy.js
// a handler object specifies which methods to proxy
// this one will simply override JavaScript’s default object get method
const loggingHandler = {
get(target, property) {
const val = target[property]
console.log(`Property "${property}" returned "${JSON.stringify(val)}"!`)
return val
}
}
@aholachek
aholachek / jsconfig.json
Created Jan 21, 2018
VSCode config to allow for "Go To Definition" with Webpack aliases
View jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"components/*",
"portal/*",
"platform/*"
]
@aholachek
aholachek / launch.json
Last active Jul 19, 2018
Simple VSCode Node.js launch config for 1) running currently open JS file 2) running jest tests for currently open file
View launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch current file",
"type": "node",
"request": "launch",
"program": "${file}",
"runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.4.0/bin/node"
},
View basic_lifecycle.js
export default function addAnimation(animateIn, animateOut) {
return function wrapComponent(WrappedComponent) {
return class AnimationHOC extends Component {
state = { animatingOut: false }
componentDidMount() {
if (this.props.isVisible) animateIn(this.child)
}
@aholachek
aholachek / FLIP_animation_function.js
Last active Dec 16, 2017
React Animation Article Examples
View FLIP_animation_function.js
export function animateGroups (ListComponent) {
const items = [...ListComponent.querySelectorAll('.item')]
const oldPositionDict = items.reduce((acc, item) => {
acc[item.dataset.id] = item.getBoundingClientRect()
return acc
}, {})
return function initiateAnimation () {
const transformPositionDict = {}
// Make sure to get the new array of item elements --
// React might have destroyed and created new DOM nodes
@aholachek
aholachek / .script-compiled.js
Last active Jun 1, 2017
Very simple responsive map of Asia
View .script-compiled.js
// load the data, find the svg container in the dom,
// and call createMap
d3.json('map-data.json', function(error, data){
var svg = d3.select('svg')
createMap(svg, data)
})
// put all logic in a nice reusable function
function createMap(svg, data) {
You can’t perform that action at this time.