Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

View GitHub Profile
View mq.css
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
View dabblet.css
* Arc
div {
position: relative;
transition: top 1s ease-in, left 1s ease-out;
body:hover div {
top: 100px;
chriscoyier / instrument.js
Last active February 15, 2023 00:09
The JS Instrumenting we do at CodePen
View instrument.js
var esprima = require('esprima');
function instrument(code) {
var LOOP_CHECK = 'if (window.CP.shouldStopExecution(%d)){break;}';
var LOOP_EXIT = "\nwindow.CP.exitedLoop(%d);\n";
var loopId = 1;
var patches = [];
esprima.parse(code, {
chriscoyier / dabblet.css
Created December 21, 2011 16:00
Checkbox Hack
View dabblet.css
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
label {
-webkit-appearance: push-button;
-moz-appearance: button;
chriscoyier / dabblet.css
Created January 9, 2012 00:53
YouTube Footer Buttons
View dabblet.css
YouTube Footer Buttons
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
chriscoyier / podcast-migrate-to-s3.php
Created May 26, 2022 14:42
One-Time Metadata Migration
View podcast-migrate-to-s3.php
* Plugin Name: Migrate Podcast Files to S3
* Text Domain: cp-podcast-migrate
* Version: 1.0.0
* Add menu item
chriscoyier / dabblet.css
Created January 31, 2012 05:24
Ratings Stars
View dabblet.css
Ratings Stars
(with as little code as possible)
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
.rating > span {
chriscoyier / functions.php
Created September 16, 2011 20:35
View functions.php
// tumblr-like post titles in feeds
function tumblrFeedTitles($permalink) {
global $wp_query;
if ($url = get_post_meta($wp_query->post->ID, 'TumblrURL', true)) {
return $url;
return $permalink;
View gulpfile.js
// gulpfile.js
// Initialize modules
const gulp = require('gulp');
// Importing all the Gulp-related packages we want to use
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
//const browserSync = require('browser-sync');
//const server = browserSync.create();
const child = require('child_process');
chriscoyier /
Last active March 3, 2021 17:31
How WordPress Plugins Should Handle Front End Resources

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.