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
<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); |
I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.
TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/
For async JavaScript file requests, we have the async
attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).
Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
Copyright (C) 2014 ADDY OSMANI <addyosmani.com> | |
Everyone is permitted to copy and distribute verbatim or modified | |
copies of this license document, and changing it is allowed as long | |
as the name is changed. | |
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION |
When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.
Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008
…………………………
The script below is triggered every day from my Mac. I use Hazel to move the tar.gz to an external hard disk once it's finished. This happens every day without me noticing. You can exclude folders if you want to. You probably want to exclude giant cache folders.
You should have a similar script.
.border-radius (@radius) { | |
-webkit-border-radius: @radius; | |
-o-border-radius: @radius; | |
-moz-border-radius: @radius; | |
-ms-border-radius: @radius; | |
border-radius: @radius; | |
} | |
.user-list { | |
// need to use special `.` syntax |
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php | |
$('[placeholder]').focus(function() { | |
var input = $(this); | |
if (input.val() == input.attr('placeholder')) { | |
input.val(''); | |
input.removeClass('placeholder'); | |
} | |
}).blur(function() { | |
var input = $(this); |