Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

10.7k followers · 244 following
View GitHub Profile
@chriscoyier
chriscoyier / instrument.js
Last active February 15, 2023 00:09
The JS Instrumenting we do at CodePen
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
chriscoyier / mawodr.markdown
Created September 28, 2016 22:13
mAwodR
@chriscoyier
chriscoyier / endless-countdown.markdown
Last active September 19, 2016 14:30
endless countdown
@chriscoyier
chriscoyier / example-post.html
Created January 30, 2016 21:47
<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
@chriscoyier
chriscoyier / gist:1a6d10b6155ff4a5d838
Created January 30, 2016 21:45
<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>
@chriscoyier
chriscoyier / wp_css_tricks_images_responsive.php
Last active February 28, 2016 15:56 — forked from joemcgill/wp_css_tricks_images_responsive.php
CSS Tricks Responsive Image Filter
<?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 January 19, 2016 20:34
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
.parent {
& .child {
color: red;
}
}
@chriscoyier
chriscoyier / index.html
Created September 23, 2015 18:21
Difference Between Inline SVG reference and External reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.icon {
width: 100px;
height: 100px;
}
@chriscoyier
chriscoyier / index.html
Created September 22, 2015 13:46
yYJZoR
test
@chriscoyier
chriscoyier / overloaded.html
Last active August 29, 2015 14:21 — forked from tsabat/overloaded.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>CodePen Overloaded</title>
<style>