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

👀📎 It looks like you're preparing to MC a conference...

🚨 GIANT DISCLAIMER: This stuff is far from authoritative. But it's what I think works for me, and what I enjoy in an MC when I'm attending a conference.

Biggest tip - enjoy yourself.

acodesmith / wp-breadcrumb-home-info.php
Last active Aug 14, 2017
WordPress Breadcrumbs Data and HTML
View wp-breadcrumb-home-info.php
* @return object
function get_breadcrumb_home()
return (object) [
'post_title' => __( 'Home', 'uncg-bryan' ),
'permalink' => site_url()
adamgiese / nth-child-quantity-mixins.scss
Last active Sep 11, 2019
Advanced nth-child mixins
View nth-child-quantity-mixins.scss
@mixin valid-quantity($quantity) {
@if type-of($quantity) != 'number' {
@error 'The "quantity" parameter must be a number!';
@if not(unitless($quantity)) {
@error 'The "quantity" parameter must not have a unit!';
@if $quantity < 0 {
@error 'The "quantity" parameter must be at least 0!';

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

<div>hello world</div>
ericclemmons /
Last active Nov 11, 2019
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

 <summary>Summary Goes Here</summary>
mxstbr /
Last active Oct 27, 2019
Enable tab completion for JSX with Emmet in Atom

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Gif of the tab completion working

  1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
  2. Add these lines of code to your keymap:
View layouts.alfredworkflow
on alfred_script(q)
tell application "Google Chrome" to activate -- needs to be in front
tell application "System Events" to tell application process "Chrome"
repeat with x from 1 to (count windows)
get properties of window x
set position of window x to {0, 21}
set size of window x to {1280, 709}
end repeat
end try

Installing Babel

The following are a few important npm packages.

Core Babel and access to Babel:

  • babel-core: the core compilation machinery and plugin infrastructure for Babel. You will rarely need to install this package, because other packages such as babel-cli have it as a dependency, meaning that it will be automatically installed when they are installed.

  • babel-cli: a command line interface to Babel. It includes the following commands:

    • babel-doctor detects common problems with your Babel installation.
paulirish /
Last active Nov 14, 2019
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
NodeList.prototype.__proto__ = Array.prototype;
You can’t perform that action at this time.