Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

View GitHub Profile
philhawksworth /
Last active February 13, 2023 21:52
Conference MC-ing tips

👀📎 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 August 14, 2017 14:11
WordPress Breadcrumbs Data and HTML
* @return object
function get_breadcrumb_home()
return (object) [
'post_title' => __( 'Home', 'uncg-bryan' ),
'permalink' => site_url()
adamgiese / nth-child-quantity-mixins.scss
Last active April 19, 2023 11:22
Advanced nth-child mixins
@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.

hello world
ericclemmons /
Last active April 24, 2024 18:09
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 Goes Here
IceCreamYou / force-scrollbars-visible.css
Last active March 6, 2024 01:00
Mac OS X hides scrollbars by default. This is annoying for UI design because it means users might not realize that certain areas are scrollable. This public domain Gist forces the scrollbar to always be visible with native behavior in Webkit-based browsers (Chrome and Opera) on Macs.
.force-show-scrollbars ::-webkit-scrollbar-track:vertical {
border-left: 1px solid #E7E7E7;
box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
.force-show-scrollbars ::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #E7E7E7;
box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
mxstbr /
Last active December 20, 2023 12:01
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:
arleym / layouts.alfredworkflow
Created February 28, 2016 13:37
Alfred Layout Alpha
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 June 18, 2024 12:00
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