Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

Block or report user

Report or block chriscoyier

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View tags.php
class CTF_Register_Taxonomies {
* Initialize the class
public function __construct() {
add_action('init', array( $this, 'tags_support_all') );
add_action('pre_get_posts', array( $this, 'tags_support_query') );

Keybase proof

I hereby claim:

  • I am chriscoyier on github.
  • I am chriscoyier ( on keybase.
  • I have a public key ASAOqGFRMkYF7J1yITeO3M2VMTRRoozedjmZoEz-UBGVTwo

To claim this, I am signing this object:

View highlighting.css
.token.cdata {
color: #777;
.token.attr-name {
View gulpfile.js
// Should I be ES6+ing this file? Does it matter? Seems like it would feel nicer but running Babel over this file feels like ouroboros.
// I'm using Gulp 3.x. I couldn't for the life of me get Gulp 4.x going, I think because my Gulp CLI was at too high (??) of a version and no amount of uninstalling and reinstalling would bring it back down.
var gulp = require("gulp");
// I thought I needed this until I found out about gulp.series. Can I refactor anything here?
var runSequence = require("run-sequence");
// Would this be a speed boost for anything? As in, only looking at files that have changed instead of all files?
View broken.css
.asdf2 {
opacity: 1;
animation: pi-fadein 0.5s ease 3s forwards; }
.my-module {
opacity: 1;
opacity: 1;
opacity: 1;
opacity: opacity: 1; }
View gist:daf08a8b18a55ac4ce2af0d78dcff5c6
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
View resize.js
// Fires when __CodePenIFrameAddedToPage() fires.
makeCodePenEmbedsResizeable: function() {
if (window.innerWidth > 625) {
var maxWidth = 1000; // calculated below
var minWidth = 320;
var minHeight = 150;
$(".cp_embed_wrapper").each(function() {
var $wrapper = $(this);
View comment_callback.php
// Custom Comments
function csstricks_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<div class="grid group comment-wrap" id="comment-<?php comment_ID(); ?>">
<div class="comment-avatar grid-1-5">
chriscoyier / instrument.js
Last active May 3, 2019
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, {
You can’t perform that action at this time.