Skip to content

Instantly share code, notes, and snippets.

Dave Rupert davatron5000

Block or report user

Report or block davatron5000

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 book.yml
# - title:
# subtitle:
# author:
# img: https://images-na.ssl-images-amazon.com/images/P/#.01._SCLZZZZZZZ_.jpg
# url:
# rating:
# notes:
- year: 2018
books:
- title: Showa 1953-1989
@davatron5000
davatron5000 / popup.css
Last active Jun 16, 2017
Universal Popup Control
View popup.css
[aria-hidden="true"] { display: none; }
@davatron5000
davatron5000 / bashprompt
Last active May 25, 2018
My Custom Bash Prompt
View bashprompt
# Make a bash prompt that looks like this:
# λ directory [master !?] $
# get current branch in git repo
function parse_git_branch() {
BRANCH=`git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\1/'`
if [ ! "${BRANCH}" == "" ]; then
STAT=`parse_git_dirty`
View vanilla-fitvids.js
// Vanilla version of FitVids
// Still licencened under WTFPL
//
// Not as robust and fault tolerant as the jQuery version.
// It's BYOCSS.
// And also, I don't support this at all whatsoever.
;(function(window, document, undefined) {
'use strict';
@davatron5000
davatron5000 / the-state-of-element-container-queries.md
Last active Jul 20, 2019
The State of Element/Container Queries
View the-state-of-element-container-queries.md

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

View testing-polyfills.md

Question on JS testing for Polyfills

First off, I'm not great at testing; I'll come right out and say that. But I've had a few issues lately and am curious how I'd automate testing to safeguard features. Here's the scenario:

On the beta signup form for DayTrip, I wanted to use the new fetch() API as a replacement for jQuery and $.ajax. Using this across all browsers requires two polyfills, a Fetch Polyfill and a Promises Polyfill. The form has has broken twice now which is not ideal for a new product.

  • First time was just ignorance, didn't realize I needed a Promise polyfill for some modern browsers, even tho that's documented on the Fetch polyfill.
  • Second time was a botched Asset Pipeline. The polyfills weren't included in my home.js, maybe due switching to rails_12factor, still not sure.

|   | Edge | Mobile Safari | Chrome |

View southwestSort.js
var letters = ["q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m"];
function southwestSort( arr ) {
var a = arr.slice( 0, Math.floor(arr.length / 3) );
var b = arr.slice( Math.floor(arr.length / 3), Math.floor(arr.length / 3)*2 );
var c = arr.slice( Math.floor(arr.length / 3)*2, arr.length );
return a.sort().concat(b.sort()).concat(c.sort());
}
View pet-features-web-platform.md

Every browser is the new IE (to me)

There's been a lot of talk lately about "the New IE". Heck, the Verge even tried to blame all their performance problems on it. There's also been a lot of great (and not-so great) criticism about it.

  IE/Edge Firefox Chrome Opera Safari Mobile Safari Opera Mini
<picture> X X X X
<svg><use> X X X
CORS Support for <use xlink:href> X X X X X X X
Service Worker X X X X X
@davatron5000
davatron5000 / blur-validate.js
Created May 28, 2015
HTML5 Validation on blur()
View blur-validate.js
var inputs = document.querySelectorAll('input, textarea');
for(var i=0;i<inputs.length;i++) {
inputs[i].addEventListener('blur', function(){
if(!this.checkValidity()) {
this.classList.add('has-error');
} else {
this.classList.remove('has-error');
}
});
}
View icon-grid.html
<div id="styleguide-icon-grid"></div>
<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>
<script>
var grid = document.querySelector('#styleguide-icon-grid');
var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';
function svgloaded() {
var svgEmbed = document.querySelector("#svgembed");
var svg = svgEmbed.getSVGDocument();
You can’t perform that action at this time.