Miguel P shelldandy

🏠

Working from home

Software Engineer @grafana

shelldandy / App.js

Created October 17, 2017 19:08

nprogress with react-router in create-react-app

	import React from 'react'
	import { BrowserRouter as Router, Switch } from 'react-router-dom'
	import routes from './routes'
	import FancyRoute from './components/tools/FancyRoute'

	const App = props =>
	<Router>
	<Switch>
	{routes.map((route, i) =>
	<FancyRoute key={i} {...route} />

shelldandy / webpack.config.js

Created October 15, 2017 01:00

	const webpack = require('webpack')
	const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
	const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
	const {cwd} = require('process')

	const production = process.env.NODE_ENV === 'production'
	const debug = process.env.NODE_ENV === 'debug'

	// When you really want to make the relationship work...
	const ENTRY_PATH = cwd() + '/src/index.js'

shelldandy / package.json

Created October 10, 2017 15:26

Jest Globals for standardJS in package.json

shelldandy / loopQuery.js

Last active September 30, 2017 07:48

Tabs using vanilla JS

	/**
	* Make a document.querySelectorAll loopable
	* @author Todd Motto
	* @tutorial https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack
	* @param {NodeList} elements
	* @param {Function} callback function that takes element and index
	* @param {this} scope what this refers to
	*/
	const loopQuery = (elements, callback, scope) => {
	for (let i = 0; i < elements.length; i++) {

shelldandy / index.js

Created September 30, 2017 02:37

Modules via data-attributes

	// Require and use modules via data attributes
	// your modules need to take an element as a param
	// the modules live in this same folder to work
	const moduleElements = document.querySelectorAll('[data-module]')

	Array.prototype.forEach.call(moduleElements, el => {
	const name = el.getAttribute('data-module')
	const Module = require(`./${name}`)
	Module(el)
	})

shelldandy / typekit.html

Last active April 27, 2018 15:25

Master Race Typekit Solution by Glen Maddern

	<head>
	<script>
	if (window.localStorage && window.localStorage._tk_cache) {
	document.documentElement.classList.add('wf-active');
	var script = document.createElement('script');
	script.innerHTML = localStorage._tk_cache + ";(function () {var timeout = setTimeout(function () {document.documentElement.classList.remove('wf-active');}, 300); Typekit.load({ async: false, active: function () { clearTimeout(timeout); }});})();";
	document.head.appendChild(script);
	}
	window._tk_onload = function () {
	var req = new XMLHttpRequest()

shelldandy / gulpfile.js

Last active April 12, 2017 01:16 — forked from tmslnz/gulpfile.js

Complete example gulpfile.js for gulp-shopify-theme

	/*
	Streamlined Shopify theme development.

	npm install --save-dev yargs gulp gulp-sass gulp-changed gulp-sourcemaps gulp-autoprefixer gulp-uglify gulp-concat gulp-replace gulp-plumber gulp-babel browser-sync gulp-if del gulp-add-src gulp-rename gulp-yaml gulp-shopify-theme

	Highlights:

	- https proxying via BrowserSync
	- autoreload
	- sourcemaps support

shelldandy / slick-custom.scss

Last active March 7, 2018 23:16

depends on my manila mixins or just replace the size mixin for width and height

shelldandy / custom-select.scss

Created February 22, 2017 05:41

Bullet proof custom selects with css only

	$caret: url(BASE_64_PNG);

	.custom-select {
	appearance: none;
	border-radius: 0; // Safari Mac/iOS
	border: none; // Safari Mac/iOS/Firefox
	display: block;
	width: 100%;
	background: {
	size: 12px; // Size of your caret

shelldandy / cursor-trails.markdown

Created February 22, 2017 03:45

Cursor trails