Skip to content

Instantly share code, notes, and snippets.


Daniel Eden daneden

View GitHub Profile
daneden /
Last active May 23, 2019
SASS Importing

Importing differentiation

You might be wondering why the Sass file here is using import directives with underscores, as opposed to the normal un-suffixed and un-prefixed importing (@import "base/all";, for example.)

Well, I’ve always had "_all.scss" as an importer for directories, but today I created a component SCSS file that appeared before "_all.scss" in the file browser.

To counter this, and make sure that the importer is always the first file I see in a directory of Sass files, I renamed the importers to "__all.scss". This has the added benefit of being extremely explicit in what exactly the imported file does—it’s in charge of pulling its siblings along with it.

daneden /
Created Dec 1, 2015
Remap Caps Lock to Emoji on Mac

How to remap the caps lock key to the emoji selector on Mac

  1. Go to System Preferences -> Keyboard -> Modifier Keys...
  2. Change “Caps Lock” to “No action”
  3. Install Seil
  4. Change the Caps Lock key in Seil to keyCode 80 (F19)
  5. Install Karabiner
  6. Open Karabiner and go to Misc & Uninstall -> Open private.xml
  7. Copy the contents of this gist's example to the XML file and save
  8. In Karabiner, go to Change Keys -> Reload XML
View js-is-weird.js
// I learned in this post (
// that arguments passed to a function run before the function itself:
* // This runs second
* outerFunction(
* // This runs first
* innerFunction()
* )
// This makes sense. But I wondered what it looked like in practice.
View config.yml
name: github
repo: daneden/
publish_mode: editorial_workflow
- name: blog
label: "Blog"
folder: "src/blog"
daneden / .htaccess
Created Oct 17, 2013
I whipped up a cache-buster for Jekyll, similar to the jekyll-assets method. Basically, when you run `jekyll build`, cachebuster.rb generates a hash based on the current time, and shoves it into the default.html template. Requests for style-{hash}.css are redirected to style.css by .htaccess
View .htaccess
RewriteRule (.+)-[a-zA-Z0-9]+(\.(js|css))$ $1$2 [L]
daneden / Component.js
Last active Aug 5, 2018
styled-components will generate duplicative style declarations when props change the value for a rule. This is fine for e.g. the example below, where the ruleset is already small, but what if we have a dozen or more common styles for the two variants?
View Component.js
const Component = styled.div`
display: inline-block;
color: ${props => ? 'red' : 'green'};
export default Component
daneden / gist:4032573
Created Nov 7, 2012
Sass media queries and @extend
View gist:4032573
// Fairly safe way to visually hide content, but make it accessible to screen readers
.visually-hidden {
position: absolute;
left: -9999px;
height: 1px;
@media screen and (max-width: 700px) {
// Again, accessible to screen readers
// Example: <a href="/login" class="icon icon-twitter"><span class="mobile-offscreen">Single-click </span> log in with Twitter</a>

layout: recipe title: Seared Salmon with Spinach and Walnut Salad hero: /uploads/2016/05/salmon.jpg

intro: This salad is a fantastically easy worknight dinner inspired by a dish from Réveille Coffee. Toasting the walnuts is completely optional, but if you can spare the couple extra minutes, it enhances their flavor and helps round out the dish.


Hearth Loaf

This bread takes about two days to make. The recipe seems long, but it’s just detailed. The steps are also very catered to my own schedule, so you should play around with the steps, making use of your refrigerator, to see what works for you.

Also, this recipe is basically a direct copy of a recipe in Josey Baker’s excellent book on making bread, and I implore you to buy it and read it.

Stuff you’ll need

  • Store-bought yeast (I use dry active)
  • Whole wheat flour

Camera recommendations 2017H2

So I use a Sony a6000 with a variety of lenses, but my selected camera and equipment has taken a lot of time and money to establish. I really love the camera, and can recommend a few lenses in a variety of price ranges that go well with it. Sony has also released two new models of this camera—the a6300 and a6500—which are the same in terms of size but with slight upgrades in features (though at it’s price, the a6000 is probably still the best investment)

I’m obviously biased toward Sony, having invested a fair bit on lenses, but an entry-level camera in Sony’s mirrorless family is also Wirecutter’s top suggestion:

In general, Wirecutter’s recommendations are typically top-notch, so you can explore their full reviews in this category and decide for yourself:

You’ll likely find that the majority of good sources will be recommending ‘mirrorless’ cameras: these s