Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

View GitHub Profile
View svgasimg.js
"name": "SVG as an <img> tag source",
"property": "svgasimg",
"caniuse" : "svg-img",
"tags": ["svg"],
"authors": ["Stu Cox"],
"async" : true,
"notes": [{
"name": "HTML5 Spec",
View erroring.scss
$color: #43BBC5;
@function shadow($count, $width, $size, $offset) {
$bs: ();
@for $i from 0 through $count {
$r: $width/2;
$x: $r*cos($i*2*pi()/$count + $offset) + px;
$y: $r*sin($i*2*pi()/$count + $offset) + px;
$bs: $bs, $x $y 0px $size + px $color;
View gist:8854817
Chriss-MacBook-Pro-4:codepen2 chriscoyier$ node --version
"name": "example-project",
"version": "0.1.0",
"devDependencies": {
"gulp": "~3.4.0",
"gulp-util": "~2.2.14",
"gulp-autoprefixer": "0.0.6",
View gist:9784598
// Figure Inserting
function html5_insert_image($html, $id, $caption, $title, $align, $url) {
$html5 = "<figure id='post-$id media-$id' class='align-$align'>";
$html5 .= "<img src='$url' alt='$title' />";
if ($caption) {
$html5 .= "<figcaption>$caption</figcaption>";
$html5 .= "</figure>";
return $html5;
chriscoyier /
Created Oct 21, 2014
Bounty on fixing up Emmet.js for CodeMirror for custom use

Howdy! We use CodeMirror as our editor on CodePen. We also use the Emmet add on for it. We love it. The users love it. It's also very very big at 831k (before compression and stuff).

I've been wanting to optimize it for a while, I've just struggled with it the few times I've tried, and think maybe one of you smart people might be able to do the job more efficiently.

Here's what our custom version of Emmet.js would be like:

  • It would not include it's own copy of Lodash.js, it would just assume that's already available on the page.
  • It would remove everything related to vendor prefixing that's built into Emmet. CodePen offers two prefixing solutions already that are a bit better fit.
  • Remove all the CanIUse information. There is a ton of it in there, and I suspect it's related to the prefixing feature which we're wanting to remove anyway.
chriscoyier /
Created Dec 3, 2014
Example Markdown Comment

This is a sample sentence to test Markdown in the comments of a WordPress blog with Jetpack Markdown enabled for comments.

<h1 id="test">This is a code block</h1>

  <script>alert("Anything goes in here");</script>
  <meta>because it just should just be escaped anyway</meta>
View functions.php
function myprefix_kses_allowed_tags($input){
return array_merge( $input, array(
// paragraphs
'p' => array(
'style' => array()
'span' => array(
'style' => array()
'div' => array(
View SassMeister-input-HTML.html
<div class="col">
You can’t perform that action at this time.