Skip to content

Instantly share code, notes, and snippets.

:octocat:
I’m coding duh

Drew Powers dangodev

:octocat:
I’m coding duh
Block or report user

Report or block dangodev

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 manifold-resource-status.spec.ts
import { newSpecPage } from '@stencil/core/testing';
import { ManifoldResourceStatus } from './manifold-resource-status';
import { ManifoldResourceStatusView } from '../manifold-resource-status-view/manifold-resource-status-view';
describe('<manifold-resource-status>', () => {
describe('v0 props', () => {
it('[loading]: renders spinner icon', async () => {
const page = await newSpecPage({
html: '<manifold-resource-status></manifold-resource-status>',
components: [ManifoldResourceStatus, ManifoldResourceStatusView],
View keybase.md

Keybase proof

I hereby claim:

  • I am dangodev on github.
  • I am drewpow (https://keybase.io/drewpow) on keybase.
  • I have a public key ASDylMgX4qM675VKEC-jyTLbcrrlBwb8X-6q28_RpCHSLQo

To claim this, I am signing this object:

@dangodev
dangodev / jest.config.js
Last active Jun 21, 2019
Jest + TypeScript
View jest.config.js
module.exports = {
moduleNameMapper: {
'^components(.*)$': '<rootDir>/src/components/$1',
'^data(.*)$': '<rootDir>/src/data/$1',
'^hooks(.*)$': '<rootDir>/src/hooks/$1',
'^lib(.*)$': '<rootDir>/src/lib/$1',
'^pages(.*)$': '<rootDir>/src/pages/$1',
'^types(.*)$': '<rootDir>/src/types/$1',
'^utils(.*)$': '<rootDir>/src/utils/$1',
View generative-art.js
const canvasSketch = require('canvas-sketch');
const colors = require('nice-color-palettes');
const random = require('canvas-sketch-util/random');
const { lerp } = require('canvas-sketch-util/math');
const settings = {
dimensions: [2048, 2048],
};
const palette = random.pick(colors);
@dangodev
dangodev / history-of-css-in-js.md
Last active Mar 27, 2019
History of CSS in JS
View history-of-css-in-js.md

It should be noted that each creator was not the sole contributor. But either presented the idea, or became the outspoken advocate for it.

Name Creator(s) Year Notes
React Jordan Walke (Facebook) 2013 Open-sourced in 2013 after years of internal use
React: CSS in JS Christopher “vjeaux” Chedeau 2014 The slide that started a war
CSS Modules Sokra? 2015 Premiered as a [webpack demo][css-webpack]
PostCSS CSS Modules Alexander Madyankin 2015
Aphrodite Emily Eisenberg 2015
@dangodev
dangodev / history-of-components.md
Last active Mar 27, 2019
A timeline of component design thinking, from CSS to web components
View history-of-components.md

It should be noted that each creator was not the sole contributor. But either presented the idea, or became the outspoken advocate for it.

Name Creator(s) Year Notes
BEM Yandex 2006–2010 According to [the site][bem], they claim to have used it internally since 2006. But the public release was in 2010.
OOCSS Nicole Sullivan 2008 ️According to [Nicole Sullivan][nc], code started in 2004 but first talk was in 2008
Sketch 2010 Version 3, introducing Symbols and many other hallmark features, released 2014
SMACSS Jonathan Snook 2011
@dangodev
dangodev / README.md
Last active Jan 16, 2019
React fetching data from REST endpoint with 16.7 React hooks
View README.md

Simple, native React solution for fetching & caching data using hooks. Based on react-hooks-example.

Features

  • < 1KB (not including axios, but that can be easily swapped with fetch or any promise library)
  • Caches requests: will only re-fire if a request parameter has changed
  • Component can be re-rendered; request won’t fire unless necessary

Setup

View conferences.md
@dangodev
dangodev / smooth-scrolling.js
Last active Aug 17, 2019
Performant, 60FPS smooth scrolling in Vanilla JavaScript using requestAnimationFrame
View smooth-scrolling.js
/**
* @param {number} yPos Pixels from the top of the screen to scroll to
* @param {number} duration Time of animation in milliseconds
*/
const scrollTo = (yPos, duration = 600) => {
const startY = window.scrollY;
const difference = yPos - startY;
const startTime = performance.now();
const step = () => {
@dangodev
dangodev / babel-types.md
Last active Oct 28, 2018
Babel Node Types
View babel-types.md

Babel Node Types

In learning Babel, I found the learning curve pretty difficult. I made this document to better understand the node types I’d be working with. These are my notes I’ve collected.

Table of Contents

  1. Global
    1. Children
You can’t perform that action at this time.