Skip to content

Instantly share code, notes, and snippets.

View cletusw's full-sized avatar

Clayton Watts cletusw

19 followers · 5 following
View GitHub Profile
@cletusw
cletusw / designer.html
Created June 26, 2014 23:09
designer
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
@cletusw
cletusw / attribute-web-components.txt
Last active August 29, 2015 14:04
Attribute Web Components (Decorators?)
View live: http://bl.ocks.org/cletusw/64a0e8fda34eba1b8cd1
TODO: Make dynamic (adding or removing the attribute adds or removes the functionality)
@cletusw
cletusw / downgrade.sh
Created April 15, 2015 05:49
Convert video to x264 in mp4
ffmpeg -i "$1" -c:v libx264 -preset veryslow -crf 35 -c:a copy "${1:0: -4} low.mp4"
@cletusw
cletusw / backdrop.html
Created May 21, 2015 21:28
Generate a backdrop with a cutout (ie, for highlighting a page element in an app walkthrough)
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<mask id="walkthrough-backdrop-mask">
<rect width="100%" height="100%" x="0" y="0" fill="white"></rect>
<ellipse class="hole" ng-attr-cx="{{cutoutCenterX}}" ng-attr-cy="{{cutoutCenterY}}" ng-attr-rx="{{cutoutRadiusX}}" ng-attr-ry="{{cutoutRadiusY}}" fill="black"></ellipse>
</mask>
</defs>
<rect width="100%" height="100%" x="0" y="0" fill="black" fill-opacity="0.75" mask="url(#walkthrough-backdrop-mask)"></rect>
</svg>
@cletusw
cletusw / polymer-element.sublime-snippet
Last active December 21, 2015 01:19
Here's a Sublime Text snippet for quickly creating polymer-elements. Just type "<polymer" and press TAB to generate the empty element, then tab through the different fields to add a name (which is automatically mirrored to the Polymer() call), attribute default values in the prototype (which are automatically mirrored to the "attributes" attribu…
<snippet>
<content><![CDATA[
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="$1" attributes="${2/:[^\n$]*(\n[ \t]*|$)/ /g}">
<template>
<style>
:host {
display: block;
}
@cletusw
cletusw / mostBlamed.sh
Last active April 28, 2016 21:16
Most blamed
git blame --line-porcelain -L 300,319 path/to/file.js | sed -n 's/^author //p' | sort | uniq -c | sort -rn | sed -n '1 p' | sed -n 's/^ *[0-9]* //p'
# Or to see all for an entire directory
git log --pretty=format:"%an" -- path/to/dir/ | sort | uniq -c | sort -rn
@cletusw
cletusw / test
Last active September 26, 2016 16:56
http://sjc-uhls-proxy116.ustream.tv/watch/playlist.m3u8?cid=9408562&appType=11&appVersion=2&locks=97d170e1550eee4afc0af065b78cda302a97674c&geo=US&geocity=Riverton&userId=&connectionId=sjc-flot-omega02_5962147&ts=1474908924&ip=50.207.240.162&cdn=uhs_akamai&sgn=d94ad210a8701db5c72f0924bb0df4f7179b8df3
@cletusw
cletusw / html-webpack-header-loader.js
Last active July 14, 2017 15:20
Add javascript to be added to the webpack-built JS file directly in your HTML (for declaring dependencies, etc.)
/*
Usage:
// template.html
<script type="text/javascript-webpack-header">
console.log('loaded template');
require('./nested.js');
</script>
<h1>This is the template</h1>
@cletusw
cletusw / My Git config
Last active July 20, 2017 19:44
apply.whitespace fix
core.whitespace 'space-before-tab,-indent-with-non-tab,trailing-space'
core.ignorecase true
diff.renames copies
merge.ff only
merge.conflictstyle diff3
pull.ff only
push.default upstream
push.followTags true
rerere.enabled 1
@cletusw
cletusw / almost-amd-to-commonjs.js
Last active August 16, 2017 21:28
Codemod: AMD in CommonJS style -> CommonJS
/**
* Run this with jscodeshift
* Live demo: https://astexplorer.net/#/gist/3aec6fa8858f3ec0e0a82ab5ec4ad32d/latest
*
* Converts:
* define(function (require) {
* var React = require('react');
* const props = { foo: 'bar' };
* return React.createClass(props);
* });