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 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
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, {
View example-post.html
<p>It may be news to you, but there is a nifty resource called <a href="http://quotesondesign.com/">Quotes on Design</a> that serves up interesting quotes <em>about design</em>, curated by our very own <a href="http://chriscoyier.net">Chris Coyier</a>.</p>
<p>Up to this point, Quotes on Design (QoD) used a bit of custom code to query the WordPress database and serve up quotes. This was used for the site itself, and for its <a href="http://quotesondesign.com/api-v4-0/">API</a> to allow use on external sites. With the excitement surrounding the upcoming <a href="http://wp-api.org/">WordPress JSON REST API</a>, we thought it would be fun to rebuild the site to use the WP API instead of our own custom code.</p>
<p><span id="more-200657"></span></p>
<figure id='post-201770' class='align-right media-201770'><img src='//css-tricks.com/wp-content/uploads/2015/07/qod.gif' alt='' /></figure>
<p>Here's what we'll cover:</p>
<ol>
<li>Setting up the API</li>
<li>Querying the API to grab a random quote</li>
<li>Doing somet
View gist:1a6d10b6155ff4a5d838
<p>stuff</p>
<figure id='post-201853' class='align-right media-201853'><img src='//css-tricks.com/wp-content/uploads/2016/01/Screen-Shot-2016-01-27-at-11.29.21-AM.png' alt='' /></figure>
View wp_css_tricks_images_responsive.php
<?php
// I could use some help with this.
// It looks SUPER close to working, but at the final moment, it doesn't.
// Example post HTML
// https://gist.github.com/chriscoyier/27954c6e12c96fadeb6f
@chriscoyier
chriscoyier / SassMeister-input.scss
Created Jan 19, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
.parent {
& .child {
color: red;
}
}
@chriscoyier
chriscoyier / index.html
Created Sep 23, 2015
Difference Between Inline SVG reference and External reference
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.icon {
width: 100px;
height: 100px;
}
You can’t perform that action at this time.