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
@kevin-smets
kevin-smets / iterm2-solarized.md
Last active Oct 14, 2019
iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + [Powerlevel10k] - (macOS)
View iterm2-solarized.md

Default

Default

Powerlevel10k

Powerlevel10k

@paulirish
paulirish / what-forces-layout.md
Last active Oct 14, 2019
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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.

Element

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 CSS for <sup> and <sub>
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
@jimbojsb
jimbojsb / gist:1630790
Created Jan 18, 2012
Code highlighting for Keynote presentations
View gist:1630790

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2:

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;
@ericclemmons
ericclemmons / example.md
Last active Oct 10, 2019
HTML5 <details> in GitHub
View example.md

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!

<details>
 <summary>Summary Goes Here</summary>
@lucasfais
lucasfais / gist:1207002
Created Sep 9, 2011
Sublime Text 2 - Useful Shortcuts
View gist:1207002

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
View conference-mc-tips.md

👀📎 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.

@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);
@mxstbr
mxstbr / Readme.md
Last active Sep 16, 2019
Enable tab completion for JSX with Emmet in Atom
View Readme.md

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:
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
You can’t perform that action at this time.