Skip to content

Instantly share code, notes, and snippets.

View derekjohnson's full-sized avatar

Derek Johnson derekjohnson

14 followers · 18 following
View GitHub Profile
@derekjohnson
derekjohnson / dabblet.css
Created May 31, 2012 09:53
CSS open/close menu idea
/**
* CSS open/close menu idea
*/
body {background: #fff;padding:0;margin:0}
#menu {display:none}
#menu:target {display:block;position:absolute;top:0;background:#fff}
@derekjohnson
derekjohnson / dabblet.css
Created June 1, 2012 16:11 — forked from anonymous/dabblet.css
Styling radio buttons
/**
* Styling radio buttons
*/
label {
display:inline-block;
padding: 1em;
background: #faf;
}
@derekjohnson
derekjohnson / registration.html
Created June 5, 2012 22:49
Form with two submit buttons using HTML5
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>DEMO - Form with two submit buttons using HTML5</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Registration</h1>
@derekjohnson
derekjohnson / dabblet.css
Created August 3, 2012 16:27
col
/**
* col
*/
.first {background:red}
.last {background: blue}
@derekjohnson
derekjohnson / resize-monitor.js
Last active December 14, 2015 05:38
Small snippet to log an event in Google Analytics when a browser window is resized. It's often assumed designers and developers are the only people who resize the browser to see responsive web design in action. Let's test that assumption.
if(window.addEventListener) { // correlates with media query support
var timer = false
, resize_monitor = function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() { _gaq.push(['_trackEvent', 'Resize', 'Resize', 'Resized']); }, 100);
// or log a pageview on a non-existant page if you prefer
@derekjohnson
derekjohnson / markers.js
Last active December 14, 2015 05:59
Add markers to text to easily see line length when prototyping layouts.
(function(doc){
if(doc.querySelectorAll) { // This only works in IE 8+
var copy = doc.querySelectorAll('.string') // Element(s) with class="string" need to be in markup
, i = 0
, ii = copy.length
, replace_at = function(text, index, char) {
return text.substr(0, index) + char + text.substr(index + 1);
}
;
@derekjohnson
derekjohnson / form.html
Last active December 23, 2015 19:09
Hide form labels visually when placeholder is supported. (Shows both in Blackberry OS 5 and under, placeholder support absent from <textarea> in Android 2.3)
<form>
<label class="js-placeholded" for="first-name">First name</label>
<input type="text" required aria-required="true" placeholder="First name" id="first-name">
<label class="js-placeholded" for="last-name">Last name</label>
<input type="text" required aria-required="true" placeholder="Last name" id="last-name">
<label class="js-placeholded" for="telephone">Telephone</label>
<input type="tel" required aria-required="true" placeholder="Telephone" id="telephone">
@derekjohnson
derekjohnson / Here's my opinion
Created September 25, 2013 13:40
A handy copy and paste version of Holly Brockwell's perfect rant at https://twitter.com/hollybrocks/status/382587935347847168. Just replace dresses if you're not on a site that sells dresses.
Literally no one, in the world, anywhere, ever, likes these bloody pop up boxes that get in your way when you're trying to browse. I've been on your site for all of five seconds and already you're turning the lights out and demanding my opinion. Well, here it is. I'm closing this tab and going to shop on a website that understands I want to see dresses, not needy bullshit text boxes. Happy now?
@derekjohnson
derekjohnson / gist:7006394
Created October 16, 2013 11:38
var connection = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection || { type : 'unknown' },
slow = connection.type === 3 || connection.type === 4 || connection.bandwidth <= 0.25;
if(!slow) {
// load webfonts
}
@derekjohnson
derekjohnson / webfonts.js
Last active December 28, 2015 18:49
Font loader
(function(win, doc, undefined) {
// sanity check - is it a decent browser
if('addEventListener' in win && 'localStorage' in win && 'querySelector' in doc) {
// https://gist.github.com/scottjehl/5406853
var injectref = doc.getElementsByTagName('script')[0],
loadCSS = function(href) {
var fontslink = doc.createElement('link');