Skip to content

Instantly share code, notes, and snippets.

Avatar

Dave Rupert davatron5000

View GitHub Profile
View gist:1be8d9ad83121548181f5c1077873d9c
if(prop("Completed") / prop("Goal") == 0, "░░░░░░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.1), "▓░░░░░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.2), "▓▓░░░░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.3), "▓▓▓░░░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.4), "▓▓▓▓░░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.5), "▓▓▓▓▓░░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.6), "▓▓▓▓▓▓░░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.7), "▓▓▓▓▓▓▓░░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.8), "▓▓▓▓▓▓▓▓░░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.9), "▓▓▓▓▓▓▓▓▓░ ", if(smallerEq(prop("Completed") / prop("Goal"), 0.99), "▓▓▓▓▓▓▓▓▓▓ ", if(prop("Completed") / prop("Goal") == 1, " 🏁", "")))))))))))) + format(round(prop("Completed") / prop("Goal") * 100)) + "%"
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 Oct 7, 2020
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');
}
});
}
You can’t perform that action at this time.