Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

10.8k followers · 247 following
View GitHub Profile
@chriscoyier
chriscoyier / SassMeister-input-HTML.html
Created May 5, 2015 21:33
Generated by SassMeister.com.
<div class="col">
test
</div>
@chriscoyier
chriscoyier / jed.md
Created December 9, 2014 15:15
@chriscoyier
chriscoyier / ei.js
Created December 5, 2014 16:22
//= require libs/get_elements_by_class_name_polyfill.js
"use strict";
var CodePenEmbed = {
width: "100%",
init: function() {
this.showCodePenEmbeds();
this.listenToParentPostMessages();
@chriscoyier
chriscoyier / functions.php
Created December 4, 2014 20:02
function myprefix_kses_allowed_tags($input){
return array_merge( $input, array(
// paragraphs
'p' => array(
'style' => array()
),
'span' => array(
'style' => array()
),
'div' => array(
@chriscoyier
chriscoyier / comment.md
Created December 3, 2014 15:03
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>

<head>
  <script>alert("Anything goes in here");</script>
  <meta>because it just should just be escaped anyway</meta>
</head>
@chriscoyier
chriscoyier / bounty.md
Created October 21, 2014 01:23
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
chriscoyier / frontendplugins.md
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.

@chriscoyier
chriscoyier / gist:9784598
Created March 26, 2014 14:27
// 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
chriscoyier / A-Pen-by-Chris-Coyier.markdown
Created March 17, 2014 16:25
A Pen by Chris Coyier.
@chriscoyier
chriscoyier / something.markdown
Created February 16, 2014 23:30

hi.

<div>hi</div>