Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Coyier chriscoyier

View GitHub Profile
@kevin-smets
kevin-smets / iterm2-solarized.md
Last active Aug 7, 2020
iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + [Powerlevel10k] - (macOS)
View iterm2-solarized.md

Default

Default

Powerlevel10k

Powerlevel10k

View 20111011_SteveYeggeGooglePlatformRant.md

Stevey's Google Platforms Rant

I was at Amazon for about six and a half years, and now I've been at Google for that long. One thing that struck me immediately about the two companies -- an impression that has been reinforced almost daily -- is that Amazon does everything wrong, and Google does everything right. Sure, it's a sweeping generalization, but a surprisingly accurate one. It's pretty crazy. There are probably a hundred or even two hundred different ways you can compare the two companies, and Google is superior in all but three of them, if I recall correctly. I actually did a spreadsheet at one point but Legal wouldn't let me show it to anyone, even though recruiting loved it.

I mean, just to give you a very brief taste: Amazon's recruiting process is fundamentally flawed by having teams hire for themselves, so their hiring bar is incredibly inconsistent across teams, despite various efforts they've made to level it out. And their operations are a mess; they don't real

@paulirish
paulirish / what-forces-layout.md
Last active Aug 7, 2020
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.

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
@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:

@ericclemmons
ericclemmons / example.md
Last active Aug 3, 2020
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>
@maxfenton
maxfenton / a-new-mac-setup.md
Last active Jul 29, 2020
System setup stuff for a new mac
View a-new-mac-setup.md

New computer setup

a/o 2020-05-29

--

Format the drive

  1. Restart with Cmd-R or Cmd-D
  2. Erase drive / 3x if second-hand
  3. Reinstall MacOS
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;
@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
@necolas
necolas / snippet.js
Created Jun 14, 2011
Optimised async loading of cross-domain scripts
View snippet.js
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@mxstbr
mxstbr / Readme.md
Last active Jul 12, 2020
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.