Marco Biedermann marcobiedermann

This has been incorporated in a small library.

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

	/*

	limitLoop.js - limit the frame-rate when using requestAnimation frame
	Released under an MIT license.

	When to use it?
	----------------
	A consistent frame-rate can be better than a janky experience only
	occasionally hitting 60fps. Use this trick to target a specific frame-
	rate (e.g 30fps, 48fps) until browsers better tackle this problem

	# taken from http://www.piware.de/2011/01/creating-an-https-server-in-python/
	# generate server.xml with the following command:
	# openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
	# run as follows:
	# python simple-https-server.py
	# then in your browser, visit:
	# https://localhost:4443

	import BaseHTTPServer, SimpleHTTPServer
	import ssl

	<div>
	<label for="sort-by">Sort by</label>
	<select id="sort-by">
	<option value="manual">Featured</option>
	<option value="price-ascending">Price: Low to High</option>
	<option value="price-descending">Price: High to Low</option>
	<option value="title-ascending">A-Z</option>
	<option value="title-descending">Z-A</option>
	<option value="created-ascending">Oldest to Newest</option>
	<option value="created-descending">Newest to Oldest</option>

	# Ruby is our language as asciidoctor is a ruby gem.
	lang: ruby
	before_install:
	- sudo apt-get install pandoc
	- gem install asciidoctor
	script:
	- make
	after_success:
	- .travis/push.sh
	env:

	#!/bin/sh

	wget http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.24-osx10.9-x86_64.tar.gz
	tar xfvz mysql-5.6*

	echo "stopping mamp"
	sudo /Applications/MAMP/bin/stop.sh
	sudo killall httpd mysqld

	echo "creating backup"

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };