Skip to content

Instantly share code, notes, and snippets.


Chris Coyier chriscoyier

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()
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 Sep 8, 2020
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 Aug 18, 2020
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 Sep 18, 2020
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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
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.