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
@chriscoyier
chriscoyier / frontendplugins.md
Last active Sep 11, 2019
How WordPress Plugins Should Handle Front End Resources
View frontendplugins.md

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.

@neoswf
neoswf / gist:02d66dadbfef56f0254c
Last active Aug 29, 2015
How to catch an error event for an SVG image
View gist:02d66dadbfef56f0254c
<!--
Image is a 87px height & 200px width long.
I'm calling an image from DB, but if it fails to load, im listening to the Error event, and than call an image from DB.
Big thing here is this guy: `onerror="this.href.baseVal='pathTo_placeholder_fallback_image'"`
`this.href.baseVal`
This guy enables you to overright the SVG image source, with the fallbacl one.
-->
@bfillmer
bfillmer / toolbox.less
Created Jun 16, 2014
Generic LESS Mixins
View toolbox.less
// Liked what Chris Coyier showed off in this blog post:
// http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like
// Decided to make LESS versions really quickly.
.coverer() {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
View Center Align
@mixin center-align($dir: false) {
$map: (
top: ( Y ),
left: ( X )
);
@if map_get($map, $dir) != null {
#{$dir}: 50%;
transform: #{"translate#{map_get($map,$dir)}(-50%)"};
} @else {
@hdragomir
hdragomir / sm-annotated.html
Last active Oct 5, 2019
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@funzeye
funzeye / WordPress Advanced Custom Field - Responsive Image Field
Last active Nov 26, 2015
How To Use Responsive Images in WordPress using Advanced Custom Field's image field and the wp-tevko-responsive-images Plugin
View WordPress Advanced Custom Field - Responsive Image Field
<figure>
<?php
$image = get_field('your_image_field_name');
$atts = array(
'imageid' => $image,
'size1' => '0',
'size2' =>'600',
'size3' =>'1000'
);
echo tevkori_responsive_shortcode($atts) ; ?>
@ruandre
ruandre / AiFitToArtboard.jsx
Last active Aug 14, 2019
Adobe Illustrator script to resize objects proportionally to fit inside the artboard.
View AiFitToArtboard.jsx
/*
Illustrator CS4+ script for resizing objects
proportionally so that they fit inside artboard
Based on: https://forums.adobe.com/message/4164590
Usage:
1. Create new document with desired artboard size
2. Paste object into document, select it and run this script
@tbmiller
tbmiller / line-on-sides.scss
Last active Aug 29, 2015
Sass - Line On SIdes Headers
View line-on-sides.scss
/*
Sass - Line On Side Headers
Reference Link: http://css-tricks.com/line-on-sides-headers/
Implementation Example: <h1 class="fancy"><span>Title</span></h1>
*/
@jina
jina / ie-output.scss
Last active Aug 29, 2015
Super Simple IE Mixins to Separate Output, in response to Brad Frost's question: https://twitter.com/brad_frost/status/433768787758690304
View ie-output.scss
// ---------------------
// _page.scss
// Regular Page Styles
.page {
margin: 0 auto;
width: 75%;
}
// IE Page Styles
View f1.js
// the old way :/
$.ajax({
url: "http://codepen.io/chriscoyier/pen/b2ad8b9a336845dd7b11d4bed34f4256.html",
complete: function(resp) {
// This HTML needs to be there first
$("body").append(resp.responseText);
// Because this script is going to do something with it.
You can’t perform that action at this time.