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
(function() { | |
var CSSCriticalPath = function(w, d, opts) { | |
var opt = opts || {}; | |
var css = {}; | |
var pushCSS = function(r) { | |
if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
for(var i = 0; i < styles.length; i++) { | |
if(!!styles[i] === false) continue; | |
var pair = styles[i].split(": "); |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Screen recorder</title> | |
</head> | |
<body> | |
<button id="recording-toggle">Start recording</button> | |
<script defer> |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Single File Web Component</title> | |
<style> | |
body { | |
background-color: #eee; | |
font-family: Helvetica, sans-serif; | |
} |
Examples of getting certificates from Let's Encrypt working on Apache, NGINX and Node.js servers.
I chose to use the manual method, you have to make a file available to verify you own the domain. Follow the commands from running
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
// MIT license | |
(function() { | |
var lastTime = 0; | |
var vendors = ['ms', 'moz', 'webkit', 'o']; |
/* Ultra lightweight Github REST Client */ | |
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb | |
const token = 'github-token-here' | |
const githubClient = generateAPI('https://api.github.com', { | |
headers: { | |
'User-Agent': 'xyz', | |
'Authorization': `bearer ${token}` | |
} | |
}) |
Google Chrome Developers says:
The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.
Some examples of file size differences: WOFF vs. WOFF2
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// once cached, the css file is stored on the client forever unless | |
// the URL below is changed. Any change will invalidate the cache | |
var css_href = './index_files/web-fonts.css'; | |
// a simple event handler wrapper | |
function on(el, ev, callback) { | |
if (el.addEventListener) { | |
el.addEventListener(ev, callback, false); |