├── .gitignore
├── .projections.json
├── CONTRIBUTING.md
├── Dockerfile-dev
├── Gemfile
├── Gemfile.lock
├── Makefile
├── README.md
├── _authors
    └── rstacruz.md
├── _config.yml
├── _drafts
    └── styled-jsx-is-awesome.md
├── _includes
    ├── about-the-site.html
    ├── base.html
    ├── body.html
    ├── end.html
    ├── head.html
    ├── meta.html
    ├── next-article.html
    ├── polyfills.html
    ├── post.html
    ├── site-header.html
    └── social-list.html
├── _layouts
    ├── article.html
    └── landing.html
├── _posts
    ├── 2013-01-07-easy-favicons.md
    ├── 2013-11-27-get-started-with-ansible.md
    ├── 2015-02-13-get-started-with-mocha.md
    ├── 2015-02-14-use-browserify-to-precompile.md
    ├── 2015-02-15-javascript-orms-suck.md
    ├── 2015-02-16-extend-sucks.md
    ├── 2015-02-17-node-js-exiting.md
    ├── 2015-02-18-rails-inline-partials.md
    ├── 2015-02-19-use-markdown-documentation.md
    ├── 2015-02-23-use-bower-in-npm.md
    ├── 2015-02-24-refactoring-long-calls.md
    ├── 2015-02-24-using-bower-and-rails-in-heroku.md
    ├── 2015-02-25-es6-class-pitfalls.md
    ├── 2015-02-26-organizing-js.md
    ├── 2015-03-02-inline-svg-in-css.md
    ├── 2015-03-03-easy-color-computations.md
    ├── 2015-03-05-css-ligatures.md
    ├── 2015-03-06-mocha-clean.md
    ├── 2015-03-09-releasing-packages.md
    ├── 2015-03-10-static-sites-in-heroku.md
    ├── 2015-03-13-relative-paths-in-jekyll.md
    ├── 2015-03-20-javascript-shortcuts.md
    ├── 2015-03-27-github-two-factor-authentication.md
    ├── 2015-04-14-use-macvim-with-lua.md
    ├── 2015-04-17-ie-polyfills.md
    ├── 2015-04-20-osx-keyboard-shortcuts.md
    ├── 2015-04-22-navigate-code-with-ctags.md
    ├── 2015-05-18-local-google-fonts.md
    ├── 2015-05-19-iojs-on-homebrew.md
    ├── 2015-05-24-repeat-tmux-from-vim.md
    ├── 2015-05-25-markdown-in-jekyll.md
    ├── 2015-05-26-babel-ie-class-inheritance.md
    ├── 2015-05-29-testing-static-sites.md
    ├── 2015-06-06-alfred-color-schemes.md
    ├── 2015-06-22-use-vendor-bundle.md
    ├── 2015-07-06-mocha-instanbul-coverage.md
    ├── 2015-11-17-pausing-capybara-selenium.md
    ├── 2015-11-23-parallel-npm-commands.md
    ├── 2015-11-28-factory_girl_with_custom_factories.md
    ├── 2015-12-10-using-git-merge-base.md
    ├── 2015-12-17-rails-and-cloudfront.md
    ├── 2016-01-02-selective-polyfilling.md
    ├── 2016-01-21-npm-in-rails.md
    ├── 2016-08-11-ordered-keys-in-js.md
    ├── 2016-08-25-my-immutable-toolkit.md
    ├── 2016-08-28-filtering-falsy-values.md
    ├── 2016-09-29-neovim-with-python-on-osx.md
    ├── 2016-12-28-graphql-on-javascript.md
    ├── 2017-02-19-life-in-side-quests.md
    ├── 2017-03-14-redux-side-effects.md
    ├── 2017-06-06-rails-mailer-race-conditions.md
    ├── 2017-07-12-less-cpu-on-development.md
    ├── 2017-09-19-a-better-hello-world.md
    ├── 2018-05-22-css-in-js-showdown-draft.md
    └── 2018-06-09-github-always-ssh.md
├── _sass
    ├── base
    │   ├── normalize.scss
    │   ├── typography.sass
    │   └── utils.sass
    ├── components
    │   ├── about-the-site.sass
    │   ├── big-button.sass
    │   ├── brief-intro.sass
    │   ├── full-image.sass
    │   ├── hint.sass
    │   ├── hljs.sass
    │   ├── next-article.sass
    │   ├── post-headline.sass
    │   ├── post-icon.sass
    │   ├── post-index.sass
    │   ├── post-list.sass
    │   ├── site-header.sass
    │   └── social-list.sass
    ├── elements
    │   ├── body.sass
    │   ├── code.sass
    │   └── table.sass
    ├── helpers
    │   ├── blink.sass
    │   ├── general.sass
    │   └── margins.sass
    └── style.sass
├── _trash
    ├── 2015-05-20-rails-i18n-best-practices.md
    ├── 2015-06-04-rscss-alternate-naming.md
    ├── aoeu.md
    ├── clean-up-commands-in-shell-scripts.md
    ├── creating-streams.md
    ├── how-js-testing-works.md
    ├── traversee-du-desert.md
    └── unite.md
├── assets
    ├── bg
    │   ├── Makefile
    │   ├── pebbles.jpg
    │   ├── rosebench.jpg
    │   ├── roughwall.jpg
    │   ├── stairs.jpg
    │   └── woodfloor.jpg
    ├── script.js
    └── style.sass
├── atom.xml
├── docker-compose.yml
├── images
    ├── alfred-dark.png
    ├── cloudfront-reference.png
    ├── iojs-linking.png
    ├── keep-missions.png
    ├── ligatures.png
    ├── mocha-istanbul.png
    ├── office-fonts.png
    ├── osx-keyboard.png
    ├── side-quest-example.jpg
    ├── skyfonts.png
    ├── tmux-repeat.gif
    └── unite-ctags.png
├── index.html
└── reference
    ├── authors.md
    ├── code.md
    ├── general.md
    ├── images.md
    ├── index.md
    └── tables.md


/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .jekyll-metadata
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.projections.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "_posts/*.md": {
 3 |     "type": "post",
 4 |     "template": [
 5 |       "---",
 6 |       "title: {basename}",
 7 |       "tags: [Development]",
 8 |       "description: ...",
 9 |       "---"
10 |     ]
11 |   }
12 | }
13 | 
14 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Developer notes
 2 | 
 3 | ## Docker setup
 4 | 
 5 | ```bash
 6 | alias dr='docker-compose run --rm web'
 7 | 
 8 | # Build image
 9 | docker-compose build
10 | 
11 | # First-time setup
12 | dr bundle install
13 | ```
14 | 
15 | Server:
16 | 
17 | ```bash
18 | # Start server
19 | docker-compose up
20 | ```
21 | 
22 | Tests:
23 | 
24 | ```bash
25 | echo "lol, you wish"
26 | ```
27 | 


--------------------------------------------------------------------------------
/Dockerfile-dev:
--------------------------------------------------------------------------------
1 | FROM ruby:2.5
2 | RUN mkdir -p /app
3 | WORKDIR /app
4 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | # http://jekyllrb.com/docs/github-pages/
2 | source 'https://rubygems.org'
3 | 
4 | gem 'github-pages'
5 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (4.2.9)
  5 |       i18n (~> 0.7)
  6 |       minitest (~> 5.1)
  7 |       thread_safe (~> 0.3, >= 0.3.4)
  8 |       tzinfo (~> 1.1)
  9 |     addressable (2.5.2)
 10 |       public_suffix (>= 2.0.2, < 4.0)
 11 |     coffee-script (2.4.1)
 12 |       coffee-script-source
 13 |       execjs
 14 |     coffee-script-source (1.11.1)
 15 |     colorator (1.1.0)
 16 |     commonmarker (0.17.9)
 17 |       ruby-enum (~> 0.5)
 18 |     concurrent-ruby (1.0.5)
 19 |     dnsruby (1.60.2)
 20 |     em-websocket (0.5.1)
 21 |       eventmachine (>= 0.12.9)
 22 |       http_parser.rb (~> 0.6.0)
 23 |     ethon (0.11.0)
 24 |       ffi (>= 1.3.0)
 25 |     eventmachine (1.2.7)
 26 |     execjs (2.7.0)
 27 |     faraday (0.15.1)
 28 |       multipart-post (>= 1.2, < 3)
 29 |     ffi (1.9.23)
 30 |     forwardable-extended (2.6.0)
 31 |     gemoji (3.0.0)
 32 |     github-pages (185)
 33 |       activesupport (= 4.2.9)
 34 |       github-pages-health-check (= 1.8.1)
 35 |       jekyll (= 3.7.3)
 36 |       jekyll-avatar (= 0.5.0)
 37 |       jekyll-coffeescript (= 1.1.1)
 38 |       jekyll-commonmark-ghpages (= 0.1.5)
 39 |       jekyll-default-layout (= 0.1.4)
 40 |       jekyll-feed (= 0.9.3)
 41 |       jekyll-gist (= 1.5.0)
 42 |       jekyll-github-metadata (= 2.9.4)
 43 |       jekyll-mentions (= 1.3.0)
 44 |       jekyll-optional-front-matter (= 0.3.0)
 45 |       jekyll-paginate (= 1.1.0)
 46 |       jekyll-readme-index (= 0.2.0)
 47 |       jekyll-redirect-from (= 0.13.0)
 48 |       jekyll-relative-links (= 0.5.3)
 49 |       jekyll-remote-theme (= 0.3.1)
 50 |       jekyll-sass-converter (= 1.5.2)
 51 |       jekyll-seo-tag (= 2.4.0)
 52 |       jekyll-sitemap (= 1.2.0)
 53 |       jekyll-swiss (= 0.4.0)
 54 |       jekyll-theme-architect (= 0.1.1)
 55 |       jekyll-theme-cayman (= 0.1.1)
 56 |       jekyll-theme-dinky (= 0.1.1)
 57 |       jekyll-theme-hacker (= 0.1.1)
 58 |       jekyll-theme-leap-day (= 0.1.1)
 59 |       jekyll-theme-merlot (= 0.1.1)
 60 |       jekyll-theme-midnight (= 0.1.1)
 61 |       jekyll-theme-minimal (= 0.1.1)
 62 |       jekyll-theme-modernist (= 0.1.1)
 63 |       jekyll-theme-primer (= 0.5.3)
 64 |       jekyll-theme-slate (= 0.1.1)
 65 |       jekyll-theme-tactile (= 0.1.1)
 66 |       jekyll-theme-time-machine (= 0.1.1)
 67 |       jekyll-titles-from-headings (= 0.5.1)
 68 |       jemoji (= 0.9.0)
 69 |       kramdown (= 1.16.2)
 70 |       liquid (= 4.0.0)
 71 |       listen (= 3.1.5)
 72 |       mercenary (~> 0.3)
 73 |       minima (= 2.4.1)
 74 |       nokogiri (>= 1.8.1, < 2.0)
 75 |       rouge (= 2.2.1)
 76 |       terminal-table (~> 1.4)
 77 |     github-pages-health-check (1.8.1)
 78 |       addressable (~> 2.3)
 79 |       dnsruby (~> 1.60)
 80 |       octokit (~> 4.0)
 81 |       public_suffix (~> 2.0)
 82 |       typhoeus (~> 1.3)
 83 |     html-pipeline (2.8.0)
 84 |       activesupport (>= 2)
 85 |       nokogiri (>= 1.4)
 86 |     http_parser.rb (0.6.0)
 87 |     i18n (0.9.5)
 88 |       concurrent-ruby (~> 1.0)
 89 |     jekyll (3.7.3)
 90 |       addressable (~> 2.4)
 91 |       colorator (~> 1.0)
 92 |       em-websocket (~> 0.5)
 93 |       i18n (~> 0.7)
 94 |       jekyll-sass-converter (~> 1.0)
 95 |       jekyll-watch (~> 2.0)
 96 |       kramdown (~> 1.14)
 97 |       liquid (~> 4.0)
 98 |       mercenary (~> 0.3.3)
 99 |       pathutil (~> 0.9)
100 |       rouge (>= 1.7, < 4)
101 |       safe_yaml (~> 1.0)
102 |     jekyll-avatar (0.5.0)
103 |       jekyll (~> 3.0)
104 |     jekyll-coffeescript (1.1.1)
105 |       coffee-script (~> 2.2)
106 |       coffee-script-source (~> 1.11.1)
107 |     jekyll-commonmark (1.2.0)
108 |       commonmarker (~> 0.14)
109 |       jekyll (>= 3.0, < 4.0)
110 |     jekyll-commonmark-ghpages (0.1.5)
111 |       commonmarker (~> 0.17.6)
112 |       jekyll-commonmark (~> 1)
113 |       rouge (~> 2)
114 |     jekyll-default-layout (0.1.4)
115 |       jekyll (~> 3.0)
116 |     jekyll-feed (0.9.3)
117 |       jekyll (~> 3.3)
118 |     jekyll-gist (1.5.0)
119 |       octokit (~> 4.2)
120 |     jekyll-github-metadata (2.9.4)
121 |       jekyll (~> 3.1)
122 |       octokit (~> 4.0, != 4.4.0)
123 |     jekyll-mentions (1.3.0)
124 |       activesupport (~> 4.0)
125 |       html-pipeline (~> 2.3)
126 |       jekyll (~> 3.0)
127 |     jekyll-optional-front-matter (0.3.0)
128 |       jekyll (~> 3.0)
129 |     jekyll-paginate (1.1.0)
130 |     jekyll-readme-index (0.2.0)
131 |       jekyll (~> 3.0)
132 |     jekyll-redirect-from (0.13.0)
133 |       jekyll (~> 3.3)
134 |     jekyll-relative-links (0.5.3)
135 |       jekyll (~> 3.3)
136 |     jekyll-remote-theme (0.3.1)
137 |       jekyll (~> 3.5)
138 |       rubyzip (>= 1.2.1, < 3.0)
139 |     jekyll-sass-converter (1.5.2)
140 |       sass (~> 3.4)
141 |     jekyll-seo-tag (2.4.0)
142 |       jekyll (~> 3.3)
143 |     jekyll-sitemap (1.2.0)
144 |       jekyll (~> 3.3)
145 |     jekyll-swiss (0.4.0)
146 |     jekyll-theme-architect (0.1.1)
147 |       jekyll (~> 3.5)
148 |       jekyll-seo-tag (~> 2.0)
149 |     jekyll-theme-cayman (0.1.1)
150 |       jekyll (~> 3.5)
151 |       jekyll-seo-tag (~> 2.0)
152 |     jekyll-theme-dinky (0.1.1)
153 |       jekyll (~> 3.5)
154 |       jekyll-seo-tag (~> 2.0)
155 |     jekyll-theme-hacker (0.1.1)
156 |       jekyll (~> 3.5)
157 |       jekyll-seo-tag (~> 2.0)
158 |     jekyll-theme-leap-day (0.1.1)
159 |       jekyll (~> 3.5)
160 |       jekyll-seo-tag (~> 2.0)
161 |     jekyll-theme-merlot (0.1.1)
162 |       jekyll (~> 3.5)
163 |       jekyll-seo-tag (~> 2.0)
164 |     jekyll-theme-midnight (0.1.1)
165 |       jekyll (~> 3.5)
166 |       jekyll-seo-tag (~> 2.0)
167 |     jekyll-theme-minimal (0.1.1)
168 |       jekyll (~> 3.5)
169 |       jekyll-seo-tag (~> 2.0)
170 |     jekyll-theme-modernist (0.1.1)
171 |       jekyll (~> 3.5)
172 |       jekyll-seo-tag (~> 2.0)
173 |     jekyll-theme-primer (0.5.3)
174 |       jekyll (~> 3.5)
175 |       jekyll-github-metadata (~> 2.9)
176 |       jekyll-seo-tag (~> 2.0)
177 |     jekyll-theme-slate (0.1.1)
178 |       jekyll (~> 3.5)
179 |       jekyll-seo-tag (~> 2.0)
180 |     jekyll-theme-tactile (0.1.1)
181 |       jekyll (~> 3.5)
182 |       jekyll-seo-tag (~> 2.0)
183 |     jekyll-theme-time-machine (0.1.1)
184 |       jekyll (~> 3.5)
185 |       jekyll-seo-tag (~> 2.0)
186 |     jekyll-titles-from-headings (0.5.1)
187 |       jekyll (~> 3.3)
188 |     jekyll-watch (2.0.0)
189 |       listen (~> 3.0)
190 |     jemoji (0.9.0)
191 |       activesupport (~> 4.0, >= 4.2.9)
192 |       gemoji (~> 3.0)
193 |       html-pipeline (~> 2.2)
194 |       jekyll (~> 3.0)
195 |     kramdown (1.16.2)
196 |     liquid (4.0.0)
197 |     listen (3.1.5)
198 |       rb-fsevent (~> 0.9, >= 0.9.4)
199 |       rb-inotify (~> 0.9, >= 0.9.7)
200 |       ruby_dep (~> 1.2)
201 |     mercenary (0.3.6)
202 |     mini_portile2 (2.3.0)
203 |     minima (2.4.1)
204 |       jekyll (~> 3.5)
205 |       jekyll-feed (~> 0.9)
206 |       jekyll-seo-tag (~> 2.1)
207 |     minitest (5.11.3)
208 |     multipart-post (2.0.0)
209 |     nokogiri (1.8.2)
210 |       mini_portile2 (~> 2.3.0)
211 |     octokit (4.9.0)
212 |       sawyer (~> 0.8.0, >= 0.5.3)
213 |     pathutil (0.16.1)
214 |       forwardable-extended (~> 2.6)
215 |     public_suffix (2.0.5)
216 |     rb-fsevent (0.10.3)
217 |     rb-inotify (0.9.10)
218 |       ffi (>= 0.5.0, < 2)
219 |     rouge (2.2.1)
220 |     ruby-enum (0.7.2)
221 |       i18n
222 |     ruby_dep (1.5.0)
223 |     rubyzip (1.2.1)
224 |     safe_yaml (1.0.4)
225 |     sass (3.5.6)
226 |       sass-listen (~> 4.0.0)
227 |     sass-listen (4.0.0)
228 |       rb-fsevent (~> 0.9, >= 0.9.4)
229 |       rb-inotify (~> 0.9, >= 0.9.7)
230 |     sawyer (0.8.1)
231 |       addressable (>= 2.3.5, < 2.6)
232 |       faraday (~> 0.8, < 1.0)
233 |     terminal-table (1.8.0)
234 |       unicode-display_width (~> 1.1, >= 1.1.1)
235 |     thread_safe (0.3.6)
236 |     typhoeus (1.3.0)
237 |       ethon (>= 0.9.0)
238 |     tzinfo (1.2.5)
239 |       thread_safe (~> 0.1)
240 |     unicode-display_width (1.3.2)
241 | 
242 | PLATFORMS
243 |   ruby
244 | 
245 | DEPENDENCIES
246 |   github-pages
247 | 
248 | BUNDLED WITH
249 |    1.16.1
250 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | PORT ?= 3000
 2 | bundle := bundle
 3 | 
 4 | start: bundle
 5 | 	${bundle} exec jekyll serve --safe --watch --port ${PORT}
 6 | 
 7 | # Incremental building is faster, but more fragile
 8 | start-incremental: bundle
 9 | 	${bundle} exec jekyll serve --safe --drafts --watch --incremental --port ${PORT}
10 | 
11 | build: bundle
12 | 	${bundle} exec jekyll build
13 | 
14 | bundle:
15 | 	${bundle}
16 | 
17 | # Print tags
18 | tags:
19 | 	grep "tags:" _posts/*.md -h | sort | uniq
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > **Archived** &mdash; Thank you for staying tuned with my blog! A new version of the blog is avialable at [**rstacruz/til**](https://github.com/rstacruz/til) _(github.com)_.
 2 | 
 3 | ---
 4 | 
 5 | # Today I learned
 6 | 
 7 | *Grab bag of random things I pick up.* Got comments? Suggestions? Corrections? [I'd love to hear from you.](https://github.com/rstacruz/til/issues)
 8 | 
 9 | ## Development
10 | 
11 | Local server:
12 | 
13 |     make
14 |     PORT=4000 make
15 | 
16 | Deployment:
17 | 
18 |     git push
19 | 
20 | ## Thanks
21 | 
22 | © 2013+ Rico Sta. Cruz, licensed [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
23 | 


--------------------------------------------------------------------------------
/_authors/rstacruz.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Rico Sta. Cruz
3 | ogp: https://www.facebook.com/ricostacruz
4 | twitter: rstacruz
5 | ---
6 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Markdown
 2 | markdown: kramdown
 3 | kramdown:
 4 |   input: GFM
 5 |   hard_wrap: false
 6 | 
 7 | # Site settings
 8 | permalink: /:title.html
 9 | exclude:
10 |   - "Makefile"
11 |   - "README.md"
12 |   - "CONTRIBUTING.md"
13 |   - "CNAME"
14 |   - "node_modules"
15 |   - "vendor"
16 |   - "Gemfile"
17 |   - "Gemfile.lock"
18 |   - "docker-compose.yml"
19 |   - "Dockerfile-dev"
20 | sass:
21 |   style: compressed
22 | 
23 | # Site info
24 | url: https://ricostacruz.com/til
25 | title: Today I Learned
26 | 
27 | # Google analytics
28 | analytics:
29 |   hostname: ricostacruz.com
30 |   id: "UA-20473929-1"
31 | 
32 | # Collections
33 | collections:
34 |   - authors
35 | 
36 | # Default variables
37 | defaults:
38 |   -
39 |     scope:
40 |       path: ""
41 |     values:
42 |       layout: "article"
43 |       tags: []
44 |       secret: false
45 |       author: Rico Sta. Cruz
46 | 


--------------------------------------------------------------------------------
/_drafts/styled-jsx-is-awesome.md:
--------------------------------------------------------------------------------
  1 | # CSS-in-JavaScript
  2 | 
  3 | [styled-jsx] has been my preferred way of integrating CSS in JavaScript. It lets me write CSS in a more declarative fashion. It leads to code that's easier to understand.
  4 | 
  5 | Before I tell you why I prefer _styled-jsx_, let's learn about some programming concepts&mdash;It'll all make sense later, trust me!
  6 | 
  7 | ## Imperative vs. declarative code
  8 | 
  9 | There are two styles of expressing data. The most common way is to simply write it out as a data structure. We can call this a **declarative** style of writing, where we try to express logic without providing any instructions.
 10 | 
 11 | ```js
 12 | {
 13 |   "name": "my-js-package",
 14 |   "description": "A sample package",
 15 |   "author": "Rico Sta. Cruz"
 16 | }
 17 | ```
 18 | 
 19 | There are cases when this style may not be flexible enough, so some systems take an **imperative** approach. In contrast to the declarative style, it's a piece of code with instructions that runs procedurally. Here's an example of a Ruby [gem specification](https://guides.rubygems.org/specification-reference/), which defines a Ruby package's metadata:
 20 | 
 21 | ```rb
 22 | Gem::Specification.new do |spec|
 23 |   spec.name = 'my-ruby-gem'
 24 |   spec.summary = 'A sample package'
 25 |   spec.authors = ['Rico Sta. Cruz']
 26 | end
 27 | ```
 28 | 
 29 | ## But they look the same!
 30 | 
 31 | Ruby's gem specification style is _imperative_ because we're issuing instructions that are to be ran sequentially. It can keep variables, call functions, and do all the things you can do in a Ruby program. Think of the Ruby gemspec as a program talking to the system:
 32 | 
 33 | > - _Okay, computer. Build a new Gem specification._
 34 | > - _Set the name to 'my-ruby-gem'._
 35 | > - _Set the summary to 'A sample package'._
 36 | > - _Finish building._
 37 | 
 38 | On the other hand, JavaScript's _declarative_ style isn't concerned with any instructions or control flow. It's not a piece of code that talks to your system, it's really just a table of keys and values.
 39 | 
 40 | ## Imperative is powerful
 41 | 
 42 | Imperative style gives you the power to write expressions that you can't easily do with a declarative-style conventions. For instance, here's an example gem specification where the list of files are gathered via a system command (`git ls-files`):
 43 | 
 44 | ```rb
 45 | Gem::Specification.new do |spec|
 46 |   spec.name = 'my-gem'
 47 |   spec.summary = 'This is my gem'
 48 |   spec.files = `git ls-files -z`.split("\x0")
 49 | end
 50 | ```
 51 | 
 52 | ## Declarative is easier to understand
 53 | 
 54 | Imperative conventions give developers a great amount of flexibility. However, this power comes at the cost of _complexity_. Here's an example where development dependencies are _imperatively_ defined in a Ruby gem, taking advantage of Ruby's `Array#each` to reduce redundancy.
 55 | 
 56 | ```rb
 57 | Gem::Specification.new do |spec|
 58 |   ['bundler', 'rake', 'minitest', 'rails'].each do |gemname|
 59 |     spec.add_development_dependency(gemname)
 60 |   end
 61 | end
 62 | ```
 63 | 
 64 | In contrast, here's how it may be _declaratively_ defined in a JavaScript package's `package.json`.
 65 | 
 66 | ```js
 67 | {
 68 |   "dependencies": {
 69 |     "react": "^16.0.0",
 70 |     "react-dom": "^16.0.0",
 71 |     "redux": "^4.0.1"
 72 |   }
 73 | }
 74 | ```
 75 | 
 76 | JavaScript's _declarative aproach_ may be less flexible than the _imperative_ one, but the constraints of a JSON format makes things more predictable and easier to glance.
 77 | 
 78 | ## CSS is declarative
 79 | 
 80 | CSS is beautifully declarative. To write CSS is to write a list of rules, not a set of instructions. For instance, we would say _buttons are supposed to be blue_, rather than _turn all buttons to blue_.
 81 | 
 82 | ```css
 83 | /* "Buttons are supposed to be blue" in CSS. */
 84 | button {
 85 |   background: blue;
 86 | }
 87 | ```
 88 | 
 89 | ```js
 90 | // "Turn all buttons to blue" in JavaScript.
 91 | // (Please don't do this.)
 92 | Array.from(document.querySelectorAll('button')).forEach(button => {
 93 |   button.style.background = 'blue'
 94 | })
 95 | ```
 96 | 
 97 | ## A lot of JS-in-CSS is imperative
 98 | 
 99 | At first glance, we can say that most JS-in-CSS solutions require you to write in a declarative style, since it's mostly just taking CSS and putting it in JavaScript. Here's how you would define a blue button using [styled-components]:
100 | 
101 | ```js
102 | const Button = styled.a`
103 |   background: blue;
104 | `
105 | ```
106 | 
107 | However, how would you start making red `danger` buttons? With _styled-components_, you'll have to provide a function which returns a CSS fragment depending on how you would interpret `props`:
108 | 
109 | ```js
110 | // using styled-components
111 | const Button = styled.a`
112 |   background: blue;
113 | 
114 |   ${props =>
115 |     props.danger &&
116 |     css`
117 |       background: red;
118 |     `};
119 | `
120 | ```
121 | 
122 | This is where it starts to break down. We're now mixing the declarative nature of CSS with some rules that are written in an imperative style. We're also now interweaving 2 languages together&mdash;CSS and JavaScript&mdash;where your brain may have to switch contexts mid-way. This brain-context-switching is even more apparent in some other CSS-in-JS libraries:
123 | 
124 | ```css
125 | // using emotion
126 | const Button = styled.a`
127 |   background: ${props => props.danger ? 'red' : 'blue'};
128 |   opacity: ${props => props.isHidden ? 0 : 1};
129 | `
130 | ```
131 | 
132 | ## Declarative CSS with styled-jsx
133 | 
134 | [styled-jsx] lets me write CSS in a declarative fashion. It also minimizes the interweaving of CSS and JavaScript code. This, in my opinion, makes styled-jsx code easier-to-understand, even at the modest cost of a little extra verbosity.
135 | 
136 | How would you style a danger button differently in _styled-jsx_? Just use CSS classes as you normally would. Simple!
137 | 
138 | ```js
139 | const Button = ({ children, danger }) => {
140 |   return (
141 |     <a className={`button ${danger ? 'danger' : ''}`}>
142 |       {children}
143 |       <style jsx>{style}</style>
144 |     </a>
145 |   )
146 | }
147 | 
148 | const style = css`
149 |   .button {
150 |     background: blue;
151 |   }
152 | 
153 |   .button.danger {
154 |     background: red;
155 |   }
156 | `
157 | ```
158 | 
159 | [styled-components]: https://www.styled-components.com/
160 | [styled-jsx]: https://github.com/zeit/styled-jsx
161 | [emotion]: https://emotion.sh/
162 | 


--------------------------------------------------------------------------------
/_includes/about-the-site.html:
--------------------------------------------------------------------------------
 1 | <div class="about-the-site">
 2 |   <div class="container">
 3 |     <p class='blurb'>
 4 |       <strong>I'm <a href="https://ricostacruz.com">Rico Sta. Cruz</a></strong>, a web developer
 5 |       who makes open-source JavaScript projects. You're reading my
 6 |       <a href="{{ base }}">Today I learned</a> blog.
 7 |       <i class='fleuron'></i>
 8 |       Follow me on
 9 |       <a href="https://twitter.com/rstacruz">Twitter</a> for web development snark,
10 |       <a href="https://github.com/rstacruz">GitHub</a> for code, and
11 |       <a href="https://instagram.com/rstacruz">Instagram</a> for calligraphy.
12 |     </p>
13 |     <h3 class='identity'><a href="https://ricostacruz.com">@rstacruz</a></h3>
14 | 
15 |     {% if page.url != '/index.html' %}
16 |     <p class='back'>
17 |       <a class='big-button -back -slim' href='{{ base }}#toc'></a>
18 |     </p>
19 |     {% endif %}
20 | 
21 |     <p>
22 |     </p>
23 |   </div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/_includes/base.html:
--------------------------------------------------------------------------------
1 | {%comment%}<!-- set the base -->{%endcomment%}
2 | {% assign base = '' %}
3 | {% assign depth = page.url | split: '/' | size | minus: 1 %}
4 | {% if depth <= 1 %}{% assign base = '.' %}
5 | {% elsif depth == 2 %}{% assign base = '..' %}
6 | {% elsif depth == 3 %}{% assign base = '../..' %}
7 | {% elsif depth == 4 %}{% assign base = '../../..' %}{% endif %}
8 | {% assign timestamp = site.time | date: "%Y%m%d%H%M%S" %}
9 | 


--------------------------------------------------------------------------------
/_includes/body.html:
--------------------------------------------------------------------------------
1 | </head>
2 | <body>
3 | 


--------------------------------------------------------------------------------
/_includes/end.html:
--------------------------------------------------------------------------------
1 | <script src='https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js'></script>
2 | <script src='https://unpkg.com/prismjs@1.6.0'></script>
3 | <script src='https://unpkg.com/prismjs@1.6.0/components/prism-ruby.js'></script>
4 | <script src='{{base}}/assets/script.js?t={{timestamp}}'></script>
5 | </body>
6 | </html>
7 | 


--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | 
 4 |     follow me on twitter.
 5 | 
 6 |      ,-.          .                      
 7 |     /,-.\ ,-. ,-. |- ,-. ,-. ,-. . . ,_, 
 8 |     |,-|| |   `-. |  ,-| |   |   | |  /  
 9 |     \`-^/ '   `-' `' `-^ `-' '   `-^ '"' 
10 |      `-'                                 
11 | 
12 | -->
13 | <html class='no-js {{ page.html_class }}' lang='en'>
14 | <head>
15 | {% include base.html %}
16 | {% include meta.html %}
17 | {% include polyfills.html %}
18 | 
19 | <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/atom.xml">
20 | 
21 | <style>html{opacity:0}</style>
22 | <link href='{{ base }}/assets/style.css?t={{ timestamp }}' rel='stylesheet'>
23 | 


--------------------------------------------------------------------------------
/_includes/meta.html:
--------------------------------------------------------------------------------
 1 | <meta charset='utf-8'>
 2 | 
 3 | {%comment%}<!-- title -->{%endcomment%}
 4 | {% if page.full_title %}
 5 | <title>{{ page.full_title }}</title>
 6 | <meta content='{{ page.full_title }}' property='og:title'>
 7 | <meta content='{{ page.full_title }}' property='twitter:title'>
 8 | <meta content='article' property='og:type'>
 9 | {% elsif page.title %}
10 | {%comment%}<title>{{ page.title }} &mdash; {{ site.title }}</title>{%endcomment%}
11 | <title>{{ page.title }}</title>
12 | <meta content='{{ page.title }}' property='og:title'>
13 | <meta content='{{ page.title }}' property='twitter:title'>
14 | <meta content='{{ page.type | default: "article" }}' property='og:type'>
15 | {% else %}
16 | <title>{{ site.title }}</title>
17 | <meta content='{{ site.title }}' property='og:title'>
18 | <meta content='{{ site.title }}' property='twitter:title'>
19 | <meta content='{{ page.type | default: "website" }}' property='og:type'>
20 | {% endif %}
21 | 
22 | {%comment%}<!-- description -->{%endcomment%}
23 | {% if page.description %}
24 | <meta content="{{ page.description }}" name="description">
25 | <meta content="{{ page.description }}" property="og:description">
26 | {% endif %}
27 | 
28 | {%comment%}<!-- canonical URL -->{%endcomment%}
29 | {% if page.url != '/index.html' %}
30 | <link rel="canonical" href="{{ site.url }}{{ page.url | replace: ".html", "" }}">
31 | <meta name="og:url" content="{{ site.url }}{{ page.url | replaec: ".html", "" }}">
32 | <link rel="prefetch" href="{{ site.url }}">
33 | <link rel="prerender" href="{{ site.url }}">
34 | {% endif %}
35 | 
36 | {%comment%}<!-- author -->{%endcomment%}
37 | {% if page.author %}
38 | {% for author in site.authors | where: "name", page.author %}
39 | <meta content='{{ author.name }}' name='author'>
40 | {% if author.ogp %}
41 | <meta content='{{ author.ogp }}' property='article:author'>
42 |   {% endif %}
43 | {% endfor %}
44 | {% endif %}
45 | 
46 | {%comment%}<!-- site name -->{%endcomment%}
47 | {% if site.title %}
48 | <meta content='{{ site.title }}' property='og:site_name'>
49 | {% endif %}
50 | 
51 | {%comment%}<!-- facebook -->{%endcomment%}
52 | {% if site.facebook.app_id %}
53 | <meta content='{{ site.facebook.app_id }}' property='fb:app_id'>
54 | {% endif %}
55 | {% if site.facebook.admin %}
56 | <meta content='{{ site.facebook.admin }}' property='fb:admins'>
57 | {% endif %}
58 | 
59 | {%comment%}<!-- page meta -->{%endcomment%}
60 | {% if page.date %}
61 | <meta content='{{ page.date | date: "%Y-%m-%d" }}' property='article:published_time'>
62 | {% endif %}
63 | {% if page.image %}
64 | {% if page.image contains '://' %}
65 | <meta content='{{ page.image }}' property='og:image'>
66 | <meta content='{{ page.image }}' name='twitter:image'>
67 | {% else %}
68 | <meta content='{{ site.url }}/{{ page.image }}' property='og:image'>
69 | <meta content='{{ site.url }}/{{ page.image }}' name='twitter:image'>
70 | {% endif %}
71 | {% endif %}
72 | 
73 | {%comment%}<!-- tags -->{%endcomment%}
74 | {% if page.tags[0] %}
75 | <meta content='{{ page.tags[0] }}' property='article:section'>
76 | {% endif %}
77 | {% if page.tags %}
78 | {% for tag in page.tags %}
79 | <meta content='{{ tag }}' property='article:tag'>
80 | {% endfor %}
81 | {% endif %}
82 | 
83 | {%comment%}<!-- google analytics -->{%endcomment%}
84 | {% if site.analytics %}<script>if(~location.hostname.indexOf("{{site.analytics.hostname}}")){var _gaq=_gaq||[];_gaq.push(["_setAccount","{{ site.analytics.id }}"]);_gaq.push(["_trackPageview"]);(function(){var ga=document.createElement("script");ga.async=true;ga.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ga,s)})()}</script>{% endif %}
85 | 
86 | <meta content='IE=edge' http-equiv='X-UA-Compatible'>
87 | <meta content='width=device-width, initial-scale=1.0' name='viewport'>
88 | <link href='{{ base }}/assets/favicon.png' rel='shortcut icon'>
89 | 
90 | {%comment%}<!-- js -->{%endcomment%}
91 | <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
92 | 


--------------------------------------------------------------------------------
/_includes/next-article.html:
--------------------------------------------------------------------------------
 1 | <a class='next-article {{ include.class }}' href="{{ base }}{{ include.page.url | replace: ".html", "" }}" data-id="{{ include.page.id }}">
 2 |   <span class='container'>
 3 |     <span class='heading'>Next article:</span>
 4 |     <span class='h3 unorphan'><span>{{ include.page.title }}</span></span>
 5 |     {% if include.page.description %}
 6 |       <span class='excerpt unorphan'>{{ include.page.description }}</span>
 7 |     {% endif %}
 8 |     <span class='big-button -next' href='{{ base }}{{ include.page.url }}'>Read</a>
 9 |   </span>
10 | </a>
11 | 


--------------------------------------------------------------------------------
/_includes/polyfills.html:
--------------------------------------------------------------------------------
1 | <!-- legacy IE polyfills -->
2 | <!--[if lt IE 9]>{%comment%}
3 | {%endcomment%}<script src='//cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>{%comment%}
4 | {%endcomment%}<script src='//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script>{%comment%}
5 | {%endcomment%}<script src='//cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>{%comment%}
6 | {%endcomment%}<script src='//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js'></script>{%comment%}
7 | {%endcomment%}<script src='//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script>{%comment%}
8 | {%endcomment%}<![endif]--> 
9 | 


--------------------------------------------------------------------------------
/_includes/post.html:
--------------------------------------------------------------------------------
 1 | <div class='post-list'>
 2 |   <div class="post-item">
 3 |     <div class="post-headline">
 4 |       <abbr class='post-icon -icon-{{ include.post.tags | first | slugify }} hint--right' data-hint='{{ include.post.tags | first }}'><span data-label='{{ include.post.tags | first }}'></span></abbr>
 5 |       <h1>
 6 |         <a href=".{{ include.post.url | replace: ".html", "" }}" rel="bookmark" title="{{ include.post.title }}">
 7 |           {{ include.post.title }}
 8 |         </a>
 9 |       </h1>
10 |       <h5 class='meta'>
11 |         <a href=".{{ include.post.url | replace: ".html", "" }}" rel="bookmark" title="{{ include.post.title }}">
12 |           {% for author in site.authors | where: "name", include.page.author %}
13 |             <span class='author' itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">{{ author.name }}</span>
14 |           {% endfor %}
15 |           &middot;
16 |           <time class='date' itemprop="datePublished" datetime="{{ include.post.date | date: "%Y-%m-%d" }}">{{ include.post.date | date: "%B %e, %Y" }}</time>
17 |         </a>
18 |       </h5>
19 |     </div>
20 | 
21 |     <div class="post-content">
22 |       {{ include.content }}
23 |     </div>
24 | 
25 |     {% include social-list.html page=include.post %}
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/_includes/site-header.html:
--------------------------------------------------------------------------------
1 | <div class='site-header'>
2 |   <div class='container'>
3 |     This is <a href='.'><em>Today I Learned</em></a> &mdash; a collection of things I've learned in my day-to-day web development work.
4 |   </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/_includes/social-list.html:
--------------------------------------------------------------------------------
1 | <ul class="social-list {{ include.class }}">
2 |   <li class="facebook hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url | uri_escape }}{{ include.page.url | replace: ".html", "" | uri_escape }}" target="share"><span class="text">Like</span></a></li>
3 |   <li class="twitter hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ include.page.description | uri_escape }}+{{ site.url | uri_escape }}{{ include.page.url | replace: ".html", "" | uri_escape }}" target="share"><span class="text">Tweet</span></a></li>
4 |   <li class="googleplus hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url | uri_escape }}{{ include.page.url | replace: ".html", "" | uri_escape }}" target="share"><span class="text">+1</span></a></li>
5 | </ul>
6 | 


--------------------------------------------------------------------------------
/_layouts/article.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: article
 3 | ---
 4 | {% include head.html %}
 5 | {% include body.html %}
 6 | {% include site-header.html %}
 7 | 
 8 | {% include post.html post=page content=content %}
 9 | 
10 | {% if page.previous %}
11 |   {% include next-article.html page=page.previous %}
12 | {% endif %}
13 | 
14 | {% include about-the-site.html %}
15 | {% include end.html %}
16 | 


--------------------------------------------------------------------------------
/_layouts/landing.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: blog
 3 | ---
 4 | {% include head.html %}
 5 | {% include body.html %}
 6 | {% include site-header.html %}
 7 | {% assign posts = site.posts | where: "secret", false %}
 8 | 
 9 | {% if posts[0] %}
10 |   {% assign post = posts[0] %}
11 |   {% include post.html post=post content=post.content %}
12 | {% endif %}
13 | 
14 | {% if posts[1] %}
15 |   {% assign next = posts[1] %}
16 |   {% include next-article.html page=next class="-lofi" %}
17 | {% endif %}
18 | 
19 | {% if posts %}
20 | <div class='post-index' id='toc'>
21 |   <div class='container'>
22 |     <h3 class='bottom-space-1'>Previously on TIL:</h3>
23 |     {% for post in posts %}
24 |     <a class='post-index-item' href="{{ base }}{{ post.url | replace: ".html", "" }}">
25 |         <span class='date'>{{ post.date | date_to_string }}</span>
26 |         <span class='article'>{{ post.title }}</span>
27 |         <strong class='tag'>{{ post.tags | first }}</strong>
28 |       </a>
29 |     {% endfor %}
30 |   </div>
31 | </div>
32 | {% endif %}
33 | 
34 | {% include about-the-site.html %}
35 | {% include end.html %}
36 | 


--------------------------------------------------------------------------------
/_posts/2013-01-07-easy-favicons.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Easily make favicon.ico
 3 | tags: [Development]
 4 | description: Never look for a favicon generator again.
 5 | ---
 6 | 
 7 | To create `favicon.ico`, you don't need anything other than ImageMagick.
 8 | 
 9 |     brew install imagemagick
10 |     sudo apt-get install imagemagick
11 | 
12 | Use it to convert PNG's into .ico: (use 32px and 16px sizes for retina compatibility)
13 | 
14 |     convert favicon-32.png favicon-16.png favicon.ico
15 | 
16 | You can even use it to generate a 16px version from a 32px:
17 | 
18 |     convert favicon-32.png -resize 16x16 favicon16.png
19 | 


--------------------------------------------------------------------------------
/_posts/2013-11-27-get-started-with-ansible.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Get started with Ansible in 2 minutes
 3 | tags: [Development]
 4 | description: Provisioning servers is easy using Ansible. Here's a guide to set it up from scratch.
 5 | ---
 6 | 
 7 | [Ansible](http://ansible.com) is a fantastic tool for provisioning servers. I personally prefer it over Chef, Puppet and Salt. Here's how to get an Ansible project started.
 8 | {:.brief-intro.center}
 9 | 
10 | ----
11 | 
12 | ### Install Ansible
13 | Officially available via `pip`.
14 | 
15 | ~~~ sh
16 | brew install ansible            # OSX
17 | [sudo] pip install ansible      # elsewhere
18 | ~~~
19 | {:.terminal}
20 | 
21 | ### Start your project
22 | Make the directory. Put this under version control, preferrably.
23 | 
24 | ~~~ sh
25 | ~$ mkdir setup
26 | ~$ cd setup
27 | ~~~
28 | 
29 | ### Create an inventory file
30 | This is a list of hosts you want to manage, grouped into groups. (Hint: try
31 | using 127.0.0.1 to deploy to your local machine)
32 | 
33 | ~~~ dosini
34 | # ~/setup/hosts
35 | 
36 | [sites]
37 | 127.0.0.1
38 | 192.168.0.1
39 | 192.168.0.2
40 | 192.168.0.3
41 | ~~~
42 | 
43 | ### Create your first Playbook
44 | A playbook is just a YAML file.
45 | 
46 | ~~~ yaml
47 | # ~/setup/playbook.yml
48 | 
49 | - hosts: 127.0.0.1
50 |   user: root
51 |   tasks:
52 |     - name: install nginx
53 |       apt: pkg=nginx state=present
54 | 
55 |     - name: start nginx every bootup
56 |       service: name=nginx state=started enabled=yes
57 | 
58 |     - name: do something in the shell
59 |       shell: echo hello > /tmp/abc.txt
60 | 
61 |     - name: install bundler
62 |       gem: name=bundler state=latest
63 | ~~~
64 | 
65 | ### Run it
66 | Use the `ansible-playbook` command.
67 | 
68 | ~~~ sh
69 | ~/setup$ ls
70 | hosts
71 | playbook.yml
72 | ~~~
73 | 
74 | ~~~ sh
75 | ~/setup$ ansible-playbook -i hosts playbook.yml
76 | PLAY [all] ********************************************************************
77 | 
78 | GATHERING FACTS ***************************************************************
79 | ok: [127.0.0.1]
80 | 
81 | TASK: [install nginx] *********************************************************
82 | ok: [127.0.0.1]
83 | 
84 | TASK: [start nginx every bootup] **********************************************
85 | ok: [127.0.0.1]
86 | ...
87 | ~~~
88 | 
89 | ----
90 | 
91 | ### Further reading
92 | 
93 | Ansible's source is available via GitHub: [ansible/ansible](https://github.com/ansible/ansible).
94 | 
95 | * [Getting Started With Ansible](http://lowendbox.com/blog/getting-started-with-ansible/) (lowendbox.com)
96 | * [Ansible Documentation](http://docs.ansible.com/modules.html) (ansible.com)
97 | 


--------------------------------------------------------------------------------
/_posts/2015-02-13-get-started-with-mocha.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Get started with Mocha testing
  3 | tags: [JavaScript]
  4 | description: In 60 seconds, let's learn how to write tests for any Node.js package.
  5 | ---
  6 | 
  7 | Testing Node.js packages is easy. Here's the condensed 1-minute guide to setting up tests on a Node.js project.
  8 | {:.brief-intro.center}
  9 | 
 10 | ----
 11 | 
 12 | ### Start with a package
 13 | Make a `package.json` file if you don't have one yet, then install your weapons of choice.
 14 | 
 15 | ```bash
 16 | npm init
 17 | # just keep pressing enter.
 18 | # this will create the file `package.json`
 19 | ```
 20 | 
 21 | ```bash
 22 | npm install --save-dev mocha chai
 23 | ```
 24 | 
 25 | ### Write tests
 26 | 
 27 | Make your first test file `test/my_test.js`:
 28 | 
 29 | ```js
 30 | /* test/my_test.js */
 31 | var expect = require('chai').expect;
 32 | 
 33 | describe('my test suite', function () {
 34 |   it('fails majestically', function () {
 35 |     expect(3).to.eql(2);
 36 |   });
 37 | });
 38 | ```
 39 | 
 40 | ### Update scripts
 41 | 
 42 | Update your `package.json` to use mocha.
 43 | 
 44 | ```diff
 45 |   "scripts": {
 46 | -   "test": "echo \"Error: no test specified\" && exit 1"
 47 | +   "test": "mocha"
 48 |   },
 49 | ```
 50 | 
 51 | ### Run tests
 52 | 
 53 | Type `npm test` to run your tests. It should fail. Now go write tests that will pass!
 54 | 
 55 | ```
 56 |   my test suite
 57 |     1) fails majestically
 58 | 
 59 | 
 60 |   0 passing (17ms)
 61 |   1 failing
 62 | 
 63 |   1) my test suite fails majestically:
 64 | 
 65 |       AssertionError: expected 3 to deeply equal 2
 66 |       + expected - actual
 67 | 
 68 |       +2
 69 |       -3
 70 | 
 71 |       test/test.js:5:18: Context.<anonymous>
 72 | ```
 73 | 
 74 | ----
 75 | 
 76 | ### Learn a bit more
 77 | 
 78 | Here's a quick Mocha cheatsheet. Also see [mochajs.org](http://mochajs.org).
 79 | 
 80 | ```js
 81 | describe('test suite', function () {
 82 |   beforeEach(function() { /*...*/ });
 83 |   afterEach(function() { /*...*/ });
 84 | 
 85 |   before(function() { /*...*/ });
 86 |   after(function() { /*...*/ });
 87 | 
 88 |   it('a basic test', function() {
 89 |     /*...*/ });
 90 | 
 91 |   it('a test with a promise', function() {
 92 |     return somePromiseObject; });
 93 | 
 94 |   it('an asynchronous test', function(next) {
 95 |     if (success) { next(); } else { next(error); }
 96 |   });
 97 | 
 98 |   xit('use "xit" for pending tests', function() {
 99 |     /*...*/ });
100 | });
101 | ```
102 | 
103 | ### Expectations with Chai
104 | Here's a quick Chai cheatsheet. See [chaijs.com](http://chaijs.com/api/bdd/) for other `expect()`ations.
105 | 
106 | ```js
107 | expect(3).to.eql(2);
108 | 
109 | expect(obj).to.be.a('string');
110 | expect(obj).to.be.null;
111 | expect(obj).to.be.true;
112 | expect(obj).to.be.false;
113 | expect(obj).to.be.undefined;
114 | 
115 | expect(list).to.include("item");
116 | expect(list).to.have.length(3);
117 | expect(list).to.have.length.gt(0);
118 | ```
119 | 
120 | ### Further reading
121 | 
122 | Use Sinon ([sinonjs.org][Sinon]) for mocks.
123 | 
124 | [Mocha]: http://mochajs.org/
125 | [Sinon]: http://sinonjs.org/
126 | 


--------------------------------------------------------------------------------
/_posts/2015-02-14-use-browserify-to-precompile.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Use Browserify to precompile npm libraries
 3 | tags: [JavaScript]
 4 | description: Keep large libraries sane using Browserify. With ES6 and CoffeeScript support!
 5 | ---
 6 | 
 7 | Remove the hassle in writing npm libraries in a transpiled language ([babeljs], [CoffeeScript], etc) by using browserify.
 8 | 
 9 | With this technique, there's no need to maintain a full new directory of compiled files... just one pre-built `dist/` file.
10 | 
11 | ### Files
12 | 
13 | ```
14 | .
15 | ├─ lib
16 | │  └─ index.js        - actual entry point
17 | ├─ dist
18 | │  └─ js2coffee.js    - built package
19 | └─ index.js           - entry point (used in development)
20 | ```
21 | 
22 | ### Install the requisite packages
23 | 
24 | ```bash
25 | npm install --save-dev browserify babelify babel-preset-es2015
26 | ```
27 | 
28 | ### Make the entry point
29 | Put your *actual* main entry point as, say, `./lib/index.js`. Then create an entry point `./index.js` like this for development:
30 | 
31 | ```js
32 | require('babel/register');
33 | module.exports = require('./lib/index');
34 | ```
35 | 
36 | ### Set up compilation
37 | Set up a compliation script in the prepublish hook:
38 | 
39 | ```js
40 | {
41 |   "scripts": {
42 |     "prepublish": "browserify -s js2coffee --bare -t [ babelify --presets [ es2015 ] ] ./lib/index.js > dist/js2coffee.js"
43 |   }
44 | }
45 | ```
46 | 
47 | For CoffeeScript support, use [coffeeify](https://github.com/jnordberg/coffeeify) for CoffeeScript (`-t [ coffeeify -x .coffee ]`).
48 | 
49 | Options used:
50 | 
51 | * `-s` - standalone (uses a UMD wrapper)
52 | * `--bare` - don't stub node builtins
53 | * `-t` - define transformations to use
54 | 
55 | For packages targeting Node.js, use `--node --no-bundle-external`. This will disable browser-field resolution in package.json and not bundle node_modules.
56 | 
57 | ### Point the package
58 | Set `main` in `package.json` to the precompiled version:
59 | 
60 | ```js
61 | {
62 |   "main": "dist/js2coffee.js"
63 | }
64 | ```
65 | 
66 | ### All done
67 | 
68 | * Every time `npm publish` is called, the pre-built version (dist/js2coffee.js) gets built
69 | * Doing `require('js2coffee')` will point to the `dist/` version
70 | * Doing `require('../index')` in your tests will point to the source version
71 | * You can also do `require('js2coffee/index')` from other packages
72 | 
73 | ### Babel
74 | 
75 | For [babeljs], I recommend using `--loose` for libraries that will target legacy IE.
76 | 
77 | ```
78 | -t [ babelify --loose all ]
79 | ```
80 | 
81 | [babeljs]: http://babeljs.io/
82 | [CoffeeScript]: http://coffeescript.org/
83 | [browserify]: https://github.com/substack/node-browserify
84 | 


--------------------------------------------------------------------------------
/_posts/2015-02-15-javascript-orms-suck.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: JavaScript ORM's suck
 3 | tags: [JavaScript]
 4 | description: Database ORM's and JavaScript aren't a good mix. Here's why.
 5 | ---
 6 | 
 7 | Consider this scenario: there's a strange bug in production's data that you need to inspect. In Rails, you can tell `rails console`: "show me all project IDs that are active and made by users that never logged in" like so:
 8 | 
 9 | ```ruby
10 | pry(main)> User.where(last_signed_in: null)
11 |   .map { |u| u.projects.active }
12 |   .flatten
13 |   .pluck :id
14 | ```
15 | 
16 | This may not be the most efficient way to do it, but some situations are urgent and will call for one-offs like these.
17 | 
18 | In Node.js, you'll probably do something like this:
19 | 
20 | ```js
21 | > User.where({ last_signed_in: null })
22 |   .fetch().then(function (users) {
23 |     return Promise.all(users.map(function(u){
24 |       return u.projects.active.fetch();
25 |     }))
26 |   })
27 |   .then(function(projects) {
28 |     return projects.map(function(p) {
29 |       return p.id;
30 |     });
31 |   })
32 |   .then(console.log)
33 | ```
34 | 
35 | Ah, granted that promises and ES6 (fat arrows) would make this better, but still...
36 | 


--------------------------------------------------------------------------------
/_posts/2015-02-16-extend-sucks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "@extend sucks"
 3 | tags: [CSS]
 4 | description: Let me tell you why you should never use @extend again.
 5 | ---
 6 | 
 7 | Using `@extend` in CSS preprocessors really suck... so use mixins instead. Consider this example:
 8 | 
 9 | ```scss
10 | %antialias {
11 |   text-rendering: optimizeLegibility !important;
12 |   -webkit-font-smoothing: antialiased !important;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | ```
16 | 
17 | Seems innocent enough:
18 | 
19 | ```scss
20 | h3 {
21 |   @extend %antialias;
22 | }
23 | ```
24 | 
25 | Until you try it with media queries:
26 | 
27 | ```scss
28 | @media (max-width: 300px) {
29 |   h3 {
30 |     @extend %antialias;
31 |   }
32 | }
33 | ```
34 | 
35 | ...then it won't work. Use mixins instead.
36 | 


--------------------------------------------------------------------------------
/_posts/2015-02-17-node-js-exiting.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Node.js exit hooks
 3 | tags: [JavaScript]
 4 | description: Catch a Node program from exiting with these events.
 5 | ---
 6 | 
 7 | Usually useful for test frameworks or daemon runners or whatever:
 8 | 
 9 | ```js
10 | process.on('uncaughtException', err => { ... })
11 | process.on('SIGHUP', ...)
12 | process.on('exit', ...)
13 | process.on('beforeExit', ...)
14 | ```
15 | 


--------------------------------------------------------------------------------
/_posts/2015-02-18-rails-inline-partials.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Inline partials
 3 | tags: [Ruby]
 4 | description: Organize long views into smaller sub-views with this tip.
 5 | ---
 6 | 
 7 | Ever find it annoying to have really long blocks of code being hard to parse in your head?
 8 | 
 9 | ```haml
10 | 
11 | - if @list.any?
12 |   - @list.each do |item|
13 |     - # really long code
14 |     - # ...
15 | 
16 | - else
17 |   - # also long code
18 |   - # ...
19 | ```
20 | 
21 | You can break them into partials, or like so:
22 | 
23 | ```ruby
24 | - body, list, empty = nil
25 | 
26 | - body = Proc.new do
27 |   - if @list.any?
28 |     - list.call
29 |   - else
30 |     - empty.call
31 | 
32 | -# List of items
33 | - list = Proc.new do
34 |   %div
35 |     - @venues.each do |venue|
36 |       = venue
37 | 
38 | -# No items available
39 | - empty = Proc.new do
40 |   %div nothing here
41 | 
42 | - body.call
43 | ```
44 | 


--------------------------------------------------------------------------------
/_posts/2015-02-19-use-markdown-documentation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Use Markdown for documentation
 3 | tags: [Development]
 4 | description: Forget complex documentation schemes... it's really just this easy.
 5 | ---
 6 | 
 7 | The most universal documentation "format" is a bunch of Markdown files inside a project's `doc/` directory. Here are some projects that follow that convention:
 8 | 
 9 | * [io.js](https://github.com/iojs/io.js/tree/v1.x/doc/api) (and Node.js)
10 | * [stylus](https://github.com/LearnBoost/stylus/tree/master/docs)
11 | * [puppet](https://github.com/puppetlabs/puppet/tree/master/docs)
12 | * [salt](https://github.com/saltstack/salt/tree/develop/doc) (uses .rst)
13 | * [pip](https://github.com/pypa/pip/tree/develop/docs) (uses .rst)
14 | * [npm](https://github.com/npm/npm/tree/master/doc)
15 | * [composer](https://github.com/composer/composer/tree/master/doc)
16 | 
17 | In my opinion, "a bunch of Markdown files" is good because:
18 | 
19 | * It's easily viewable in GitHub
20 | * It can be made into a Jekyll (GitHub pages) site easily
21 | * It can be made into a Sphinx site easily
22 | * It's a common documentation format that you can get some tools to generate to
23 | 


--------------------------------------------------------------------------------
/_posts/2015-02-23-use-bower-in-npm.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Use Bower packages like npm packages
 3 | tags: [JavaScript]
 4 | description: Ever wanted to use some frontend packages but they're not npm-compatible?
 5 | ---
 6 | 
 7 | [Napa] is a package that lets you install arbitrary projects (without package.json) into `node_modules`.
 8 | 
 9 | Bower packages are repos without package.json manifests. Hence, you can use Napa to use Bower packages as if they were npm packages... sort of.
10 | 
11 | ```js
12 | {
13 |   "scripts": {
14 |     "install": "napa"
15 |   },
16 |   "napa": {
17 |     "hint": "chinchang/hint.css#v1.3.1",
18 |     "colorbox": "jackmoore/colorbox#1.5.9"
19 |   }
20 | ```
21 | 
22 | Promising idea, but I'd like to see it developed more. Some caveats as of 1.2.0:
23 | 
24 | - not compatible with `npm shrinkwrap`
25 | - upgrading packages are not automatic
26 | 
27 | [Napa]: https://www.npmjs.com/package/napa
28 | 


--------------------------------------------------------------------------------
/_posts/2015-02-24-refactoring-long-calls.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Refactoring long calls
 3 | tags: [Development]
 4 | description: Clean up long code reasonably with these tips.
 5 | ---
 6 | 
 7 | Consider seeing this code in a view. It seems a little long, and may be a candidate for refactoring.
 8 | {:.brief-intro.center}
 9 | 
10 | ```ruby
11 | = event.ticket.custom_message.to_s.strip.gsub("[URL]", site_url)
12 | ```
13 | {:.terminal.medium}
14 | 
15 | ----
16 | 
17 | ### Attempt #1
18 | One way to rewrite this is to make it as short as possible, ie, store all the complexity in a helper function.
19 | 
20 | ```ruby
21 | = custom_message_for(event)
22 | ```
23 | 
24 | ```ruby
25 | def custom_message_for(event)
26 |   event.ticket.custom_message.to_s.strip.gsub("[URL]", site_url)
27 | end
28 | ```
29 | 
30 | In my opinion, this isn't really good because:
31 | 
32 |  * The complexity was simply moved from one part to another, instead of broken down into more easily-understandable chunks.
33 |  * The method `custom_message_for` is too tightly coupled. To test this, you will need to create a mock event, with a mock ticket, with a mock custom message.
34 | 
35 | ----
36 | 
37 | ### Attempt #2
38 | I would prefer this to be written as:
39 | 
40 | ```ruby
41 | = format_message(event.ticket.custom_message)
42 | ```
43 | 
44 | ```ruby
45 | def format_message(message)
46 |   message.to_s.strip.gsub("[URL]", site_url)
47 | end
48 | ```
49 | 
50 | The view code may be a little longer, but you get these advantages:
51 | 
52 |  * The method `format_message` is simple and its purpose is immediately obvious.
53 |  * Glancing at the view code (`format_message(event...)`), it's apparent how the message is being derived.
54 |  * It can be easily tested (just need to pass it a string).
55 | 
56 | ...Another way to implement this is with a presenter, which may not be a bad idea either.
57 | 


--------------------------------------------------------------------------------
/_posts/2015-02-24-using-bower-and-rails-in-heroku.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Using Bower and Rails in Heroku
 3 | tags: [Ruby]
 4 | description: Use the Bower package manager in Rails projects when deploying to Heroku.
 5 | ---
 6 | 
 7 | This seems pretty easy until you realize that Bower (a Node.js package) is not available in the Heroku Ruby build pack.
 8 | The gem [bower-rails](http://rubygems.org/gems/bower-rails) allows for easy Bower integration into Rails, but it won't work out of the box in Heroku.
 9 | 
10 | ### Solution: add execjs
11 | The [Ruby buildpack](https://github.com/heroku/heroku-buildpack-ruby) has a magic behavior where if it detects the `execjs` gem, it will [bundle Node.js](https://github.com/heroku/heroku-buildpack-ruby#assets) with the build. This should make it work.
12 | 
13 | ```ruby
14 | gem 'execjs'
15 | ```
16 | {:.terminal.large}
17 | 
18 | ### Alternative solution
19 | {:.top-space-4}
20 | 
21 | Use the [Multi buildpack](https://github.com/ddollar/heroku-buildpack-multi) to combine Ruby and Node buildpacks.
22 | 
23 | ```
24 | heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
25 | ```
26 | 
27 | ```
28 | # vim .buildpacks
29 | https://github.com/heroku/heroku-buildpack-nodejs.git#v60
30 | https://github.com/heroku/heroku-buildpack-ruby.git#v127
31 | ```
32 | 
33 | I recommend locking the versions (`#v60`) to ensure that you get versions that interoperate together (in case one upgrades and breaks interoperability).
34 | 
35 | The last pack defined (Ruby in this case) is the "main" one that defines the process types (web, console, etc).
36 | 


--------------------------------------------------------------------------------
/_posts/2015-02-25-es6-class-pitfalls.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ES6 class pitfalls
 3 | tags: [JavaScript]
 4 | description: Keep aware of this one caveat when making classes in ES6.
 5 | ---
 6 | 
 7 | ```js
 8 | class Shape {
 9 |   get area() {
10 |     return this.width * this.height;
11 |   }
12 | }
13 | ```
14 | 
15 | ES6 makes it easy to define classes, but you can't have decorated functions. For that, you'll still need to drop to using `prototype`.
16 | 
17 | ```js
18 | Shape.prototype.iterate = memoize(function () {
19 |   ...
20 | })
21 | ```
22 | 
23 | Same with non-method attributes.
24 | 
25 | ```js
26 | Shape.prototype.template =
27 |   require('fs').readFileSync('./template.html', 'utf-8');
28 | ```
29 | 


--------------------------------------------------------------------------------
/_posts/2015-02-26-organizing-js.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Organizing JavaScript for simple sites
 3 | tags: [JavaScript]
 4 | description: How do you sort JavaScript files in a Rails project? Here's one way.
 5 | ---
 6 | 
 7 | Some sites don't need big JavaScript architectures, only bits of small behaviors that will affect certain elements. I prefer to put them into a directory called `behaviors`.
 8 | 
 9 | * Each file is a self-contained piece of code that only affects a *single* element type.
10 | * Name each one of the files according to the `class` (or `role`) it affects.
11 | * They should also be independent of each other, and therefore, order-agnostic.
12 | 
13 | ## Example project
14 | 
15 | ```js
16 | ...
17 | └── javascripts/
18 |     └── behaviors/
19 |         ├── colorpicker.js
20 |         ├── modal.js
21 |         ├── select2.js
22 |         ├── tooltip.js
23 |         └── wow.js
24 | ```
25 | 
26 | ```js
27 | // select2.js -- affects `.select2`
28 | $(function () {
29 |   $(".select2").select2();
30 | })
31 | ```
32 | 
33 | ```js
34 | // wow.js -- affects `.wow`
35 | $(function () {
36 |   new WOW().init();
37 | })
38 | ```
39 | 
40 | ```js
41 | // tooltips.js -- affects `.tooltip`
42 | $(document).on('hover', '.tooltip', function () {
43 |   ...
44 | });
45 | ```
46 | 
47 | ### Using behaviors
48 | Just include them all into one file. In Rails, this should be as easy as:
49 | 
50 | ```js
51 | //= require_tree ./behaviors
52 | ```
53 | 
54 | This JavaScript will be safe to include in all pages.
55 | 


--------------------------------------------------------------------------------
/_posts/2015-03-02-inline-svg-in-css.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Inline SVG in CSS
 3 | tags: [CSS]
 4 | description: Create complex shapes easily by combining SVG and CSS.
 5 | ---
 6 | 
 7 | ```css
 8 | .box {
 9 |   background:
10 |     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='20' version='1.1'><polyline fill='white' points='0,0 1000,0 0,20'/></svg>") left top / 100% auto no-repeat
11 | }
12 | ```
13 | 
14 | **[Demo here](http://cssdeck.com/labs/ip24y9lj)** of a white triangle notch implemented using inline CSS, perfect for making parallelograms. The caveats:
15 | 
16 | * IE9+ supported, legacy IE's arent.
17 | * Hex color codes are not supported. Use `rgb(0, 100, 200)` instead.
18 | 
19 | 


--------------------------------------------------------------------------------
/_posts/2015-03-03-easy-color-computations.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Easy color computations
 3 | tags: [CSS]
 4 | description: Need to lighten/darken colors easily? Here's how.
 5 | ---
 6 | 
 7 | ```bash
 8 | $ npm i -g stylus
 9 | $ stylus -i
10 | ```
11 | {:.terminal}
12 | 
13 | **Use [stylus]'s CLI.** Stylus CLI is faster than Sass and has shorter syntax for color computations. Here's *lighten* and *hue shift*:
14 | 
15 | ```
16 | > #aaa + 10%
17 | => #b2b2b2
18 | ```
19 | ```
20 | > #ff0 - 10deg
21 | => #ffd500
22 | ```
23 | 
24 | ### One-liner version
25 | Not quite as elegant, but it can be useful.
26 | 
27 | ```bash
28 | echo "*{a: #ff0 - 10deg}" | stylus -p
29 | * { a: #ffd500; }
30 | ```
31 | 
32 | ### Using Sass
33 | If you need Sass for some reason, it also takes `-i`.
34 | 
35 | ``` sh
36 | $ gem install sass
37 | $ sass -i
38 | >> darken(red, 10%)
39 | #cc0000
40 | ```
41 | 
42 | [stylus]: http://learnboost.github.io/stylus
43 | 


--------------------------------------------------------------------------------
/_posts/2015-03-05-css-ligatures.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Ligatures in CSS
 3 | tags: [CSS]
 4 | description: Implement fancy typographic ligatures with just CSS.
 5 | ---
 6 | 
 7 | Headings can benefit from nice ligatures. Use the [font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) CSS property to enable these OpenType features.
 8 | 
 9 | ```css
10 | .headings {
11 |   /* don't display digraphs in languages that don't support it */
12 |   font-language-override: normal;
13 | 
14 |   /* use font-defined kerning info */
15 |   font-kerning: auto;
16 | 
17 |   /* opentype options: kerning, ligatures, horiz ligatures,
18 |    * discretionary ligatures, contextual swash */
19 |   font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh";
20 | 
21 |   /* allow browser to auto-infer missing glyphs */
22 |   font-synthesis: weight style;
23 | }
24 | ```
25 | 
26 | Here is what they would look like with EB Garamond. Be sure to also check [List of OpenType features](http://en.wikipedia.org/wiki/List_of_typographic_features) for more features you can use.
27 | 
28 | ![](images/ligatures.png)
29 | 
30 | ### Use brick.im
31 | Fonts from Typekit and Google Web Fonts may be stripped of all these extra OpenType information. Use fonts from [brick.im](http://brick.im/) instead.
32 | 
33 | ### Swashes
34 | First letters can look good with swashes (eg, an `R` with an extra long stem). Just be sure to turn this on on a as-needed basis since it may overlap with the rest of the text.
35 | 
36 | ```css
37 | .headings:first-letter {
38 |   font-feature-settings: "kern", "swsh";
39 | }
40 | ```
41 | 
42 | ## Disabling
43 | 
44 | You can turn off ligatures using:
45 | 
46 | ```css
47 | font-feature-settings: "liga" 0;
48 | ```
49 | 


--------------------------------------------------------------------------------
/_posts/2015-03-06-mocha-clean.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Cleaner Mocha stack traces
 3 | tags: [JavaScript]
 4 | description: Suppress stack trace frames from 3rd-party modules in Mocha.js.
 5 | image: https://raw.githubusercontent.com/rstacruz/mocha-clean/gh-pages/comparison.png
 6 | ---
 7 | 
 8 | [Mocha] is a great way to test JavaScript, but its stack traces are riddled
 9 | with useless frames from Mocha internals and 3rd-party modules. Let's try and
10 | clean it up.
11 | {:.brief-intro.center}
12 | 
13 | ![Image]({{ page.image }})
14 | {:.full-image.cropped}
15 | 
16 | <br>
17 | 
18 | ### Introducing mocha-clean
19 | 
20 | `mocha-clean` is a plugin for Mocha. It strips away mocha internals,
21 | node_modules, absolute paths (based on cwd), and other unneccessary cruft
22 | from stack traces.
23 | Simply invoke Mocha with `-r mocha-clean`. The easiest way to do this is to add
24 | it to your *test/mocha.opts* file.
25 | 
26 | ```
27 | --require mocha-clean
28 | ```
29 | 
30 | It's available via npm, and works with Mocha 1.x in Node.js and in the browser. The source is available in GitHub: [rstacruz/mocha-clean][src].
31 | 
32 | ```bash
33 | npm install --save-dev mocha-clean
34 | ```
35 | {:.terminal}
36 | 
37 | * * * *
38 | 
39 | ### Merging into Mocha?
40 | 
41 | A pull request is currently open in Mocha to integrate this functionality into Mocha itself. Check out [#1564](https://github.com/mochajs/mocha/pull/1564) and offer your support and comments.
42 | 
43 | [src]: https://github.com/rstacruz/mocha-clean
44 | [Mocha]: http://visionmedia.github.io/mocha
45 | 
46 | 


--------------------------------------------------------------------------------
/_posts/2015-03-09-releasing-packages.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Tools to make releasing packages easier
 3 | date: 2015/03/09
 4 | tags: [Development]
 5 | description: Make releasing packages easier with these 2 open-source tools.
 6 | image: https://camo.githubusercontent.com/b35364114a530e5b4066d719c150d7abaaf4e95f/687474703a2f2f63646e2e7261776769742e636f6d2f727374616372757a2f62756d702d636c692f613235316336332f62756d702e706e67
 7 | ---
 8 | Releasing packages involves the same repetitive tasks: updating the change log, bumping versions, tagging a release, and so on. Here are a few tools to make this chore easier.
 9 | {:.brief-intro.center}
10 | 
11 | ![]({{ page.image }})
12 | {:.full-image.cropped.bottom-space-2}
13 | 
14 | ### 1. Bump versions via [bump-cli](http://npmjs.com/bump-cli)
15 | This utility allows you to increment versions of files through the command line. For JavaScript packages, this simply means bumping your `.json` files. This works with any file type with [semver](http://semver.org/) tags.
16 | 
17 | ### 2. Continuously maintain the change log
18 | There are many change log tools available, but I've found that the sanest solution is to update the log as features get implemented. Maintain an "unreleased" list on top of the change log—on release time, you'll simply need to add a date.
19 | 
20 | ```
21 | ## v0.1.0 - unreleased
22 | 
23 | * Added feature Y
24 | * Fixed bug Z
25 | * ...
26 | ```
27 | 
28 | ### 3. Tag and release via [git-extras](https://github.com/tj/git-extras)
29 | 
30 | Git Extras comes with the `git release` command, which automates creating a release commit, tags it with the right version, and pushes it.
31 | 
32 | ```bash
33 | git release "v1.0.0"
34 | ```
35 | {:.terminal.large.cursor}
36 | 
37 | 
38 | ## All together now
39 | {:.top-space-2.bottom-space-0}
40 | 
41 | Here's how it would work for a typical [npm](http://npmjs.com) package. These tools are language-agnostic, though—this process will also work for non-JavaScript packages.
42 | 
43 | ```bash
44 | vim HISTORY.md
45 | bump *.json &&
46 | npm test &&            # Run tests
47 | npm publish &&         # Publish to npm
48 | git release "v1.0.0"   # Publish to GitHub
49 | ```
50 | 


--------------------------------------------------------------------------------
/_posts/2015-03-10-static-sites-in-heroku.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Hosting static sites in Heroku"
 3 | tags: [Development, Heroku]
 4 | description: Serve simple websites for free using Heroku with this one simple tip.
 5 | ---
 6 | 
 7 | Just add an `index.php` to your repository.
 8 | It tells [Heroku](http://heroku.com) that the site is a PHP site and that it will be hosted using 
 9 | Apache.
10 | {:.brief-intro.center}
11 | 
12 | ```
13 | touch index.php
14 | ```
15 | {:.terminal.large}
16 | 
17 | And yes, you can still have an `index.html` file. The `.html` file takes 
18 | precedence over the `.php` one. Have fun!
19 | 


--------------------------------------------------------------------------------
/_posts/2015-03-13-relative-paths-in-jekyll.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Relative paths in Jekyll
 3 | tags: [Development, Jekyll]
 4 | description: Fix the problem with GitHub Pages's relative URLs with this snippet.
 5 | ---
 6 | {%raw%}
 7 | 
 8 | [Jekyll] is a great static site tool. If you're using [GitHub Pages][gh-pages], it comes with it for free, making it a very useful tool for any public blog or website. It comes, though, with one common problem that I've yet to come across a good solution for: relative paths.
 9 | {:.brief-intro.center}
10 | 
11 | ## The problem
12 | 
13 | ```html
14 | <!-- _layouts/default.html -->
15 | <link href='assets/style.css' rel='stylesheet'>
16 | ```
17 | {:.terminal}
18 | 
19 | ### The mess of relative paths
20 | Let's say you have an innocent URL in your layout like the one above. This is a relative path, not an absolute one that begins with `/`. It resolves based on wherever it's included from.
21 | 
22 | This works well in pages of your site placed in the root directory. Once you path one level deep though, you'll encounter problems.
23 | 
24 | | From this page... | Base | Final URL |  |
25 | |----|----|----|----:|
26 | | `/index.html` | `/` | `/assets/style.css` | Good ✓ |
27 | | `/me.html` | `/` | `/assets/style.css` | Good ✓ |
28 | | `/about/profile.html` | `/about` | `/about/assets/style.css` | Wrong ✗ |
29 | {:.lite-headings}
30 | 
31 | <br>
32 | 
33 | ## A naive workaround
34 | 
35 | One workaround is to use absolute paths by adding a `/` in the beginning.
36 | 
37 | ```html
38 | <link href='/assets/style.css' rel='stylesheet'>
39 |             ^
40 | ```
41 | 
42 | ### Why absolute URLs suck
43 | This works great for sites that live on its own domain. When your site will be hosted in a sub-directory (such as the case with [GitHub Project Pages][gh-pages]), this absolute path will not resolve to `/project/assets/style.css` as you probably would have intended.
44 | 
45 | 
46 | | If your site is in... | It resolves to... | | 
47 | |----|----|----:|
48 | | `user.github.io/` | `/assets/style.css` | Good ✓ |
49 | | `user.github.io/project/` | `/assets/style.css` | Wrong ✗ |
50 | {:.lite-headings}
51 | 
52 | <br>
53 | 
54 | ## A better workaround
55 | 
56 | This snippet below automatically determines the relative base and stores it in the variable `base`. Place it in your partials path, and include the partial in your layouts.
57 | 
58 | ```html
59 | <!-- _includes/base.html -->
60 | {% assign base = '' %}
61 | {% assign depth = page.url | split: '/' | size | minus: 1 %}
62 | {% if    depth <= 1 %}{% assign base = '.' %}
63 | {% elsif depth == 2 %}{% assign base = '..' %}
64 | {% elsif depth == 3 %}{% assign base = '../..' %}
65 | {% elsif depth == 4 %}{% assign base = '../../..' %}{% endif %}
66 | ```
67 | 
68 | ### Use it as a prefix
69 | You can then use it as a prefix to URLs, like the examples below. You don't need to `include` it all the time—just include it once in your layouts and it will be available everywhere.
70 | 
71 | ```html
72 | {% include base.html %}
73 | <link href='{{base}}/assets/style.css' rel='stylesheet'>
74 | ```
75 | 
76 | ```html
77 | <a href='{{ base }}'>Back to home</a>
78 | ```
79 | 
80 | ```html
81 | <a href='{{ base }}/about.html'>About me</a>
82 | ```
83 | 
84 | ```html
85 | <a href='{{ base }}{{ post.url }}'>Read "{{ post.title }}"</a>
86 | ```
87 | 
88 | [Jekyll]: http://jekyllrb.com/
89 | [gh-pages]: http://pages.github.com/
90 | {%endraw%}
91 | 


--------------------------------------------------------------------------------
/_posts/2015-03-20-javascript-shortcuts.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: JavaScript shortcuts using bitwise operators
 3 | description: Learn some shorter ways to write some common JavaScript expressions.
 4 | tags: [JavaScript]
 5 | ---
 6 | 
 7 | Some common operations can be made shorter using bitwise operators. Here are some of my favorites.
 8 | {:.brief-intro}
 9 | 
10 | ### Rounding off a number
11 | 
12 | `Math.floor(3.5)` can be written as `3.5|0`. The [Bitwise OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR) operator will make an integer out of the number, and this construct is in fact used in [asm.js](http://asmjs.org/spec/latest/) to denote an integer.
13 | 
14 | ```js
15 | list[list.length * Math.random() | 0]
16 | // ...same as:
17 | list[Math.floor(list.length * Math.random()]
18 | ```
19 | 
20 | ### Checking for -1
21 | The [Bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) operator will turn `-1` into zero. This makes substring checks with `indexOf()` a little shorter.
22 | 
23 | ```js
24 | if (~string.indexOf("John")) { ... }
25 | // ...same as:
26 | if (string.indexOf("John") !== -1) { ... }
27 | ```
28 | 


--------------------------------------------------------------------------------
/_posts/2015-03-27-github-two-factor-authentication.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: GitHub two-factor authenication guide
 3 | description: Secure your GitHub account with these easy steps.
 4 | tags: [Development, GitHub]
 5 | ---
 6 | 
 7 | Two-factor authentication in GitHub is pretty simple to set up, though the exact steps are layed out in maybe 3 different articles. I've consolidated them all together to this one simple guide.
 8 | {:.brief-intro.center}
 9 | 
10 | ----
11 | 
12 | ### Enable 2FA
13 | Enable [2 factor authentication](https://github.com/settings/security) on the GitHub website (Settings → Security → Two Factor Authentication).
14 | 
15 | ### Prepare your phone
16 | Install [Google Authenticator](https://en.wikipedia.org/wiki/Google_Authenticator). Works for iOS and Android. In Authenticator, tap *Add*, then *Scan Barcode*. Take a picture of the QR code on your computer. ([More info on apps](https://help.github.com/articles/configuring-two-factor-authentication-via-a-totp-mobile-app/))
17 | 
18 | ### Enable git credential caching
19 | On your computer, [enable caching your GitHub HTTPS credentials](https://help.github.com/articles/caching-your-github-password-in-git/). This allows you to store your 2FA token and not get asked for it everytime.
20 | 
21 | ```
22 | git config --global credential.helper osxkeychain   # OSX
23 | git config --global credential.helper cache         # Linux
24 | ```
25 | 
26 | ### Generate an API key
27 | 
28 | [Generate a GitHub API key](https://github.com/settings/tokens) under "Personal Access Tokens". You'll use this for the Git command line. Leave the scopes unchanged.
29 | 
30 | ### Use HTTPS on your repos
31 | If your git repos still use SSH (`git@github.com:user/repo.git`), change them to use HTTPS (`https://github.com/user/repo.git`). ([More info on remote URLs](https://help.github.com/articles/which-remote-url-should-i-use/#cloning-with-https-recommended))
32 | 
33 | ```
34 | cd project
35 | vim .git/config
36 | ```
37 | 
38 | ### Git push
39 | Push a repo. You'll be asked for a password. Use the token for the password. You won't have to do this again if enabled credential caching.
40 | 
41 | ```
42 | $ git push
43 | Username for 'https://github.com': rstacruz
44 | Password for 'https://rstacruz@github.com':
45 | ```
46 | 
47 | ### Save your recovery codes
48 | 
49 | Get your [recovery codes](https://github.com/settings/auth/recovery-codes) (Settings → Security → Two Factor Authentication → Recovery Codes) and put them somewhere safe. This will allow you to log onto your account when, say, your phone isn't charged. ([More info on recovery codes](https://help.github.com/articles/downloading-your-two-factor-authentication-recovery-codes/))
50 | 
51 | ## That's it!
52 | 
53 | If everything worked, your `git push` should work. Further reading below:
54 | 
55 | * [Two factor authentication articles](https://help.github.com/categories/two-factor-authentication-2fa/) (github.com)
56 | * [TOTP mobile apps](https://help.github.com/articles/configuring-two-factor-authentication-via-a-totp-mobile-app/) (github.com)
57 | * [About two factor authentication](https://help.github.com/articles/about-two-factor-authentication/) (github.com)
58 | * [Providing your 2FA Authentication Code](https://help.github.com/articles/providing-your-2fa-authentication-code/) (github.com)
59 | * [Caching your GitHub password](https://help.github.com/articles/caching-your-github-password-in-git/) (github.com)
60 | * [Downloading your two factor recovery codes](https://help.github.com/articles/downloading-your-two-factor-authentication-recovery-codes/) (github.com)
61 | * [HTTPS remote URLs](https://help.github.com/articles/which-remote-url-should-i-use/) (github.com)
62 | 


--------------------------------------------------------------------------------
/_posts/2015-04-14-use-macvim-with-lua.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Speed up MacVim with Lua
 3 | description: Make your OSX Vim experience better with this simple switch.
 4 | tags: [Vim]
 5 | ---
 6 | 
 7 | It's always a good idea to install [MacVim] with Lua support. [Homebrew] does not compile with Lua support by default. This gets you the benefit of a noticeably-faster [Unite.vim].
 8 | 
 9 | ```
10 | brew install macvim --with-cscope --with-lua --override-system-vim --with-luajit --with-python3
11 | ```
12 | {:.terminal.wide}
13 | 
14 | The option `--override-system-vim` will allow you to use `vim` in the command line apart from the GUI... also a great idea.
15 | 
16 | [MacVim]: https://github.com/macvim-dev/macvim
17 | [Homebrew]: http://brew.sh/
18 | [Unite.vim]: https://github.com/Shougo/unite.vim
19 | 


--------------------------------------------------------------------------------
/_posts/2015-04-17-ie-polyfills.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Legacy IE polyfills
 3 | tags: [CSS]
 4 | description: Speed along your legacy IE development with this all-purpose 8-line snippet.
 5 | ---
 6 | 
 7 | Use this convenient snippet in almost any project. It will fill in some basic support for modern CSS features for legacy IE versions.
 8 | {:.brief-intro.center}
 9 | 
10 | {:.wide.light}
11 | ```js
12 | <!--[if lt IE 9]>
13 | <script src='https://cdn.jsdelivr.net/nwmatcher/1.2.5/nwmatcher.min.js'></script>
14 | <script src='https://cdn.jsdelivr.net/json2/0.2/json2.min.js'></script>
15 | <script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
16 | <script src='https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js'></script>
17 | <script src='https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js'></script>
18 | <script src='https://cdn.jsdelivr.net/es5.shim/4.4.1/es5-shim.min.js'></script>
19 | <![endif]-->
20 | ```
21 | 
22 | <br>
23 | 
24 | ## What's going on?
25 | 
26 | The world has largely moved on from IE6 to IE8, but this is the least you can do to make your sites at least don't appear broken on older browsers. This snippet packs these 6 libraries which can be dropped into any project:
27 | 
28 |  - **[html5shiv]** — for new HTML5 tags like `<article>` (IE6-8)
29 |  - **[respond]** — for `@media` queries for responsive design (IE6-8)
30 |  - **[selectivizr]** — for all modern CSS selectors (IE6-8)
31 |  - **[json2]** — for JSON parsing (IE6-7)
32 |  - **[nwmatcher]** — the selector engine for selectivizr
33 |  - **[es5-shim]** — add ES5+ functions (IE6-8)
34 | 
35 | It's wrapped in an [IE conditional comment][concom], so only the poor souls with outdated IE's will bear the extra load.
36 | 
37 | ### Selectivizr
38 | While Selectivizr has been abandoned at 1.0.2, there are new changes that haven't been officially released yet (see [#67](https://github.com/keithclark/selectivizr/issues/67)) that fixes interoperability with Respond.js. [This article](http://selectivizr.com/tests/respond) has the technical details, but is outdated in a few ways: Respond.js already [has support](https://github.com/scottjehl/Respond/pull/43) for selectivizr in upstream, and the selectivizr changes described are already sitting unreleased in the [master branch](https://github.com/keithclark/selectivizr).
39 | 
40 | This snippet uses [rawgit.com](http://rawgit.com/) to fetch the unreleased 1.0.3 from the fork [gisu/selectivizr](https://github.com/gisu/selectivizr) to fix interoperability issues with respond.js.
41 | 
42 | ### Legacy IE cheatsheet
43 | I've put together a [Legacy IE cheatsheet](http://ricostacruz.com/cheatsheets/ie.html) to help you figure out what features you can use for older versions of IE.
44 | 
45 | [html5shiv]: https://code.google.com/p/html5shiv/
46 | [json2]: https://github.com/douglascrockford/JSON-js
47 | [respond]: https://github.com/scottjehl/Respond
48 | [selectivizr]: http://selectivizr.com/
49 | [concom]: http://www.quirksmode.org/css/condcom.html
50 | [NWmatcher]: http://javascript.nwbox.com/NWMatcher/
51 | [es5-shim]: https://github.com/es-shims/es5-shim
52 | 


--------------------------------------------------------------------------------
/_posts/2015-04-20-osx-keyboard-shortcuts.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Navigate OS X with the keyboard
 3 | description: Speed through the Mac OS X GUI with these shortcuts.
 4 | image: images/osx-keyboard.png
 5 | tags: [OSX]
 6 | ---
 7 | 
 8 | ![Image](./images/osx-keyboard.png){:style='max-width:600px;margin-bottom:-130px'}
 9 | {:.full-image.cropped.bottom-space-4}
10 | 
11 | After switching to OS X, one thing I've always missed in Windows and Linux is the ability to spawn menus using `Alt` `F`. Today I realized that OS X has two ways to accomplish this.
12 | {:.brief-intro}
13 | 
14 | * **By arrows:** `Ctrl` + `F2` lets you navigate menus with arrow keys.
15 | * **By typing:** `⌘` `⇧` `/` will get you the help menu.
16 | 
17 | ----
18 | 
19 | ### Spotlight for menus
20 | The `⌘` `⌥` `/` shortcut is essentially a Spotlight for menu items—it opens the help menu where you can type in the menu item you want. Not all applications support it, though.
21 | 
22 | ### Full keyboard access
23 | Under the *Keyboard* preference pane, there's an option for *Full Keyboard Access*. I suggest enabling this, as this lets you navigate through file save windows with just the keyboard.
24 | 
25 | ## More shortcuts
26 | 
27 | | Key         | Description                 |
28 | | ---         | ---                         |
29 | | `^` `F1`    | Turn keyboard access on/off |
30 | | `^` `F2`    | Menu bar                    |
31 | | `^` `F3`    | Dock                        |
32 | | `^` `F5`    | Toolbar                     |
33 | | `^` `F6`    | Floating window             |
34 | | `^` `F8`    | Status menu                 |
35 | | `⌘` `⇧` `/` | Help                        |
36 | {:.shortcuts}
37 | 


--------------------------------------------------------------------------------
/_posts/2015-04-22-navigate-code-with-ctags.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Navigate code like a pro with Ctags
  3 | description: Move through code fast. Set up Ctags. Here's how.
  4 | tags: [Vim, Ctags]
  5 | image: images/unite-ctags.png
  6 | ---
  7 | 
  8 | [Ctags] lets you navigate code fast, and is perhaps the single most useful productivity boosting tool in any developer's arsenal. If you're not using Ctags yet, let's get you started.
  9 | {:.brief-intro.center}
 10 | 
 11 | ![Image](./images/unite-ctags.png){:style='max-width:900px;margin-bottom:-100px'}
 12 | {:.full-image.cropped.bottom-space-4}
 13 | 
 14 | ## What's it for?
 15 | 
 16 | Ctags indexes a project's *tags*, or names of its classes and methods. Coupled with some integration with your editor (shown: Vim's [unite-tag]), it will give you two interesting features to help you traverse code base:
 17 | 
 18 | 1. Jump to where any class, module, method, or function is defined given its name. In vim, that's `:tag`.
 19 | 
 20 | 2. Place your cursor on a word, and jump to where it's defined with one keystroke. In vim, that's `^]`.
 21 | 
 22 | ## Installing Ctags
 23 | 
 24 | ### Exuberant Ctags
 25 | In OS X, use Homebrew to install [Exuberant Ctags][Ctags]. This is a more useful version of ctags than the one that ships with Xcode.
 26 | 
 27 |     brew install ctags
 28 | 
 29 | ### Ctags options
 30 | Let's make ctags ignore some common directories. Save this file as `~/.ctags`.
 31 | 
 32 |     --recurse=yes
 33 |     --exclude=.git
 34 |     --exclude=vendor/*
 35 |     --exclude=node_modules/*
 36 |     --exclude=db/*
 37 |     --exclude=log/*
 38 | 
 39 | ### Generate ctags for a project
 40 | Go to your project's path, and run ctags to generate a `tags` file in your project. This is the index of all tags in your project that your editor will use.
 41 | 
 42 |     ctags .
 43 | 
 44 | ### Ignore all ctags files
 45 | It's safe to make all projects ignore all files called `tags`. I recommend setting up a global git ignore list.
 46 | 
 47 |     echo "tags" >> ~/.global_ignore
 48 |     git config --global core.excludesfile $HOME/.global_ignore
 49 | 
 50 | <br>
 51 | 
 52 | Vim setup
 53 | ---------
 54 | 
 55 | ### Auto-update ctags files
 56 | Use [vim-autotag] to automatically update `tags` files. This will only work on projects that have already had `ctags -R` performed before.
 57 | 
 58 |     Plug 'craigemery/vim-autotag'
 59 | 
 60 | ### Jumping to tags
 61 | 
 62 | Use `:tag` to go to the definition of a certain tag. Usually, you will want to use this to jump to a certain Class or Method. Yes, this supports tab completion!
 63 | 
 64 | ```
 65 | :tag ClassName
 66 | ```
 67 | 
 68 | ### From the command line
 69 | Use `vim -t` to open vim to a certain tag.
 70 | 
 71 | ```
 72 | vim -t <tag>
 73 | ```
 74 | 
 75 | ### Navigating through multiple definition
 76 | If you used `:tag` on a tag that's got multiple definitions, use these commands to sift through them all.
 77 | 
 78 | | Shortcut | Definition |
 79 | | ---- | ---- |
 80 | | `:tn` | Move to next definition (`:tnext`) |
 81 | | `:tp` | Move to previous definition (`:tprevious`) |
 82 | | `:ts` | List all definitions (`:tselect`) |
 83 | {:.shortcuts}
 84 | 
 85 | ### Key shortcuts
 86 | You can also place your cursor on some text and press `^]` to jump to that tag.
 87 | 
 88 | | Shortcut | Definition |
 89 | | ---- | ---- |
 90 | | `^]` | Jump to definition |
 91 | | `^t` | Jump back from definition |
 92 | | `^W` `}` | Preview definition |
 93 | | `g]` | See all definitions |
 94 | {:.shortcuts}
 95 | 
 96 | ### Unite integration
 97 | If you're using [unite.vim], you can use [unite-tag] to browse tags. You can also check out my plugin, [vim-fastunite], which offers a pre-packaged distribution of Unite.vim.
 98 | 
 99 |     :Unite -start-insert tag
100 | 
101 | ## Futher reading
102 | 
103 | * [Browsing programs with tags](http://vim.wikia.com/wiki/Browsing_programs_with_tags) (vim.wikia.com)
104 | 
105 | [vim-fastunite]: https://github.com/rstacruz/vim-fastunite
106 | [vim-autotag]: https://github.com/craigemery/vim-autotag
107 | [unite.vim]: https://github.com/Shougo/unite.vim
108 | [unite-tag]: https://github.com/tsukkee/unite-tag
109 | [Ctags]: http://ctags.sourceforge.net
110 | 
111 | 


--------------------------------------------------------------------------------
/_posts/2015-05-18-local-google-fonts.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The best way to get Google Fonts offline
 3 | tags: [Misc]
 4 | image: images/skyfonts.png
 5 | description: Chances are you've downloaded a few Google fonts to your computer. Here's a better way to do it.
 6 | ---
 7 | 
 8 | ![Image]({{ page.image }}){:style='max-width:600px;margin-bottom:-130px'}
 9 | {:.full-image.cropped.bottom-space-4}
10 | 
11 | If you're doing any work creating UI mockups, chances are you've downloaded a few [Google fonts] to your computer. Doing this manually is tedious, and you wouldn't be up to date when the fonts get updated.
12 | 
13 | [SkyFonts] is a free font syncing service that puts webfonts into your computer. It works with paid services like [fonts.com], but also offers unlimited support for Google Fonts.
14 | 
15 | This by far is the most convenient way to get Google Fonts onto your computer. Adding new fonts is mostly a one-click affair, fonts updates are automatically pushed to your computer, and you can even conveniently install the top 50 Google Fonts.
16 | 
17 | Monotype Skyfonts is available via [Caskroom] as `monotype-skyfonts`.
18 | 
19 | [Caskroom]: http://caskroom.io/
20 | [Caskroom-fonts]: https://github.com/caskroom/homebrew-fonts
21 | [Google fonts]: http://www.google.com/fonts
22 | [SkyFonts]: https://skyfonts.com/
23 | [fonts.com]: http://www.fonts.com/
24 | 


--------------------------------------------------------------------------------
/_posts/2015-05-19-iojs-on-homebrew.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Installing iojs on Homebrew
 3 | tags: [OSX]
 4 | image: images/iojs-linking.png
 5 | description: Here's how to get iojs on OSX using Homebrew.
 6 | ---
 7 | 
 8 | ![Image]({{ page.image }}){:style='max-width:500px'}
 9 | {:.full-image.cropped.bottom-space-4}
10 | 
11 | An updated [homebrew-iojs] formula is maintained by [@aredridel] and is available with just one command.
12 | 
13 | ```
14 | brew install aredridel/iojs/iojs
15 | ```
16 | {:.terminal}
17 | 
18 | ----
19 | 
20 | ### Default formula
21 | As of iojs 2.0.2, Homebrew ships with its own formula for iojs. This isn't preferrable, in my opinion, since global npm packages aren't being ran properly.
22 | 
23 | If you'd like to use this anyway, simply doing `brew install iojs` is not enough. To get iojs working on [Homebrew] You will need to unlink `node` first then use `link --force` to install iojs.
24 | 
25 | ```
26 | brew install iojs
27 | brew unlink node
28 | brew link iojs --force
29 | ```
30 | {:.terminal}
31 | 
32 | [homebrew-iojs]: https://github.com/aredridel/homebrew-iojs/blob/master/Formula/iojs.rb
33 | [@aredridel]: https://github.com/aredridel
34 | [Homebrew]: http://brew.sh/
35 | 


--------------------------------------------------------------------------------
/_posts/2015-05-24-repeat-tmux-from-vim.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Running tests using Vim and Tmux
 3 | tags: [Vim]
 4 | image: images/tmux-repeat.gif
 5 | description: The most intuitive way for me to run tests is to use tmux split panes.
 6 | hljs_languages: [vim]
 7 | ---
 8 | 
 9 | ![Image]({{ page.image }})
10 | {:.full-image.cropped.bottom-space-4}
11 | 
12 | ### Using split panes
13 | The most intuitive way for me to run tests is to use a tmux split pane. I
14 | simply split my screen between my editor and a shell that runs tests (`npm
15 | test` in this example). I've then set up a vim hotkey (`,r` for me) to quickly send "up enter" to the last tmux pane used.
16 | 
17 | ```vim
18 | " Repeat last command in the next tmux pane.
19 | nnoremap <Leader>r :call <SID>TmuxRepeat()<CR>
20 | 
21 | function! s:TmuxRepeat()
22 |   silent! exec "!tmux select-pane -l && tmux send up enter && tmux select-pane -l"
23 |   redraw!
24 | endfunction
25 | ```
26 | 
27 | ### Save-and-repeat
28 | Even better, I've set up `Ctrl-S` as a "save-and-repeat" key to make it all happen in one keystroke:
29 | 
30 | ```vim
31 | inoremap <C-s> <Esc>:w<CR>:call <SID>TmuxRepeat()<CR>a
32 | noremap  <C-s> :w<CR>:call <SID>TmuxRepeat()<CR>
33 | ```
34 | 
35 | ----
36 | 
37 | Alternatively, you can use [vim-dispatch], but it doesn't support colors and can be disorienting.
38 | 
39 | [vim-dispatch]: https://github.com/tpope/vim-dispatch
40 | 


--------------------------------------------------------------------------------
/_posts/2015-05-25-markdown-in-jekyll.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Markdown in Jekyll
 3 | description: Insert Markdown into any Jekyll document with this simple tag.
 4 | tags: [Development, Jekyll]
 5 | ---
 6 | {% raw %}
 7 | 
 8 | To add Markdown to any HTML file in Jekyll, capture it into a variable and print that variable using *markdownify*. That is:
 9 | 
10 | ```
11 | {% capture x %}
12 | ## This is markdown
13 | 
14 | so and so
15 | {% endcapture %}{{ x | markdownify }}
16 | ```
17 | 
18 | ## Kramdown
19 | Also, it's preferred to use [kramdown] as your Markdown processor: it supports GitHub-like code fencing and many useful Markdown extensions.
20 | 
21 | ```yaml
22 | # _config.yml
23 | markdown: kramdown
24 | kramdown:
25 |   input: GFM
26 | ```
27 | 
28 | If you do, there's a great alternative. Name your HTML files as `.md`, which is fine, because Markdown will ignore HTML blocks by default. You can then opt into Markdown processing via `markdown="1"`. More info on this on Kramdown's [documentation]. Hat tip to [@marksteve].
29 | 
30 | ```html
31 | <div>
32 |   <h3>I'm HTML</h3>
33 |   <div markdown="1">
34 | I am *Markdown text*. Be sure not to indent me, else
35 | I'll be interpreted as a code block.
36 |   </div>
37 | </div>
38 | 
39 | ```
40 | 
41 | [kramdown]: http://kramdown.gettalong.org/
42 | [@marksteve]: http://marksteve.com
43 | [documentation]: http://kramdown.gettalong.org/syntax.html#html-blocks
44 | {% endraw %}
45 | 


--------------------------------------------------------------------------------
/_posts/2015-05-26-babel-ie-class-inheritance.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Babel class inheritance in Internet Explorer
 3 | tags: [JavaScript]
 4 | description: IE doesn't support class inheritance in Babel. Here's a way to fix that.
 5 | ---
 6 | 
 7 | ```js
 8 | class Circle extends Shape {
 9 |   getArea() {
10 |     return this.radius * Math.PI * 2;
11 |   }
12 | }
13 | ```
14 | 
15 | ### Class inheritance caveats
16 | When using class inheritance with Babel.js, keep in mind that IE10 and below are [not supported](http://babeljs.io/docs/advanced/caveats) by default. Babel's class inheritance relies on *\_\_proto\_\_* which is not available on legacy IE versions.
17 | 
18 | Using *super* is also not supported on IE8 and below, as it compiles down to using [Object.getPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf).
19 | 
20 | To get around these caveats, use the [protoToAssign](http://babeljs.io/docs/advanced/transformers/spec/proto-to-assign/) transformer to make inheritance work, along with loose mode on classes to enable support for `super`.
21 | 
22 | ```bash
23 | babel --optional spec.protoToAssign --loose es6.classes script.js
24 | ```
25 | {:.terminal}
26 | 


--------------------------------------------------------------------------------
/_posts/2015-05-29-testing-static-sites.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Testing generated static sites
 3 | tags: [Development, Jekyll]
 4 | description: Ever feel guilty that your Jekyll sites don't have tests? Here's a way around that.
 5 | ---
 6 | 
 7 | You can make a test script use `grep` and `test` to check for generated output. Since grep will die with an error code if it doesn't match anything, the test will be considered a failure.
 8 | 
 9 | ```bash
10 | #!/usr/bin/env sh
11 | set -o errexit # die on errors
12 | 
13 | grep "<title>" _site/index.html >/dev/null
14 | grep display _site/style.css >/dev/null
15 | grep function _site/script.js >/dev/null
16 | test -f _site/image.jpg #check for file existence
17 | ```
18 | 
19 | ### Travis support
20 | You can even integrate these with your [Travis-CI] tests. (Learn more about build configuration from their [documentation](http://docs.travis-ci.com/user/build-configuration/).)
21 | 
22 | ```yaml
23 | # .travis.yml
24 | before_script: bundle exec jekyll build
25 | script: ./test/test.sh
26 | ```
27 | 
28 | ### Makefiles
29 | Another good way is to use a `Makefile` so you can simply use `make test` to invoke tests.
30 | 
31 | ```bash
32 | test: _site
33 |     grep display _site/style.css >/dev/null
34 |     grep function _site/script.js >/dev/null
35 |     test -f _site/image.jpg #check for file existence
36 | 
37 | _site:
38 |     bundle
39 |     bundle exec jekyll build --safe
40 | ```
41 | 
42 | [Travis-CI]: http://travis-ci.org
43 | 


--------------------------------------------------------------------------------
/_posts/2015-06-06-alfred-color-schemes.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Alfred color schemes
 3 | description: Here's my nice color scheme for Alfred.
 4 | image: images/alfred-dark.png
 5 | tags: [OSX]
 6 | ---
 7 | 
 8 | ![]({{ page.image }})
 9 | {:.full-image.stretched}
10 | 
11 | Today I learned you can change colors in [Alfred].<br>
12 | [Here's mine.][color]
13 | {:.brief-intro.center}
14 | 
15 | [Alfred]: http://alfredapp.com
16 | [color]: alfred://theme/searchForegroundColor=rgba(255,255,255,1.00)&resultSubtextFontSize=1&searchSelectionForegroundColor=rgba(0,0,0,1.00)&separatorColor=rgba(0,0,0,0.00)&resultSelectedBackgroundColor=rgba(22,9,7,0.25)&shortcutColor=rgba(76,76,76,1.00)&scrollbarColor=rgba(38,38,38,1.00)&imageStyle=8&resultSubtextFont=Helvetica%20Neue%20Light&background=rgba(30,31,49,0.84)&shortcutFontSize=2&searchFontSize=3&resultSubtextColor=rgba(127,127,127,1.00)&searchBackgroundColor=rgba(0,0,0,0.00)&name=OSX%20Yosemite%20Dark%20%2B&resultTextFontSize=2&resultSelectedSubtextColor=rgba(186,186,186,1.00)&shortcutSelectedColor=rgba(127,127,127,1.00)&widthSize=2&border=rgba(4,19,37,0.00)&resultTextFont=Helvetica%20Neue%20Light&resultTextColor=rgba(255,255,255,1.00)&cornerRoundness=3&searchFont=Helvetica%20Neue%20Light&searchPaddingSize=0&credits=&searchSelectionBackgroundColor=rgba(178,215,255,1.00)&resultSelectedTextColor=rgba(255,255,255,1.00)&resultPaddingSize=2&shortcutFont=Helvetica%20Neue%20Light
17 | 


--------------------------------------------------------------------------------
/_posts/2015-06-22-use-vendor-bundle.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Bundle your gems inside your project
 3 | description: Here's a tip to get the most out of your Ruby development experience.
 4 | tags: [Ruby]
 5 | ---
 6 | 
 7 | ```bash
 8 | bundle install -j3 --path=vendor/bundle
 9 | ```
10 | {:.terminal.large}
11 | 
12 | When working on a Ruby project, I always put the files in `vendor/bundle/`. This has the benefit of having a greppable index of all the gems of your project, while keeping your global gemset tidy.
13 | 
14 | You only need to do this once in your project. The `--path` setting will be persisted in your project's Bundler configuration (`.bundle/config`).
15 | 
16 | ----
17 | 
18 | ### Inspecting your gems
19 | Doing this will make inspecting your gem code easier. This can be conveniently done with something like ack or [the silver searcher]:
20 | 
21 | ```nohighlight
22 | $ cd vendor/bundle/ruby/*/gems
23 | $ ag all_application_helpers
24 | 
25 |   actionpack-4.2.1/lib/action_controller/metal/helpers.rb
26 |   106:   def all_application_helpers
27 | ```
28 | {:.light}
29 | 
30 | ----
31 | 
32 | ### Globally ignoring
33 | I recommend placing `vendor/bundle/` on a global gitignore. If you haven't set up a global gitignore list yet, it's pretty easy.
34 | 
35 | ```nohighlight
36 | git config --global core.excludesfile ~/.gitignore
37 | echo vendor/bundle >> ~/.gitignore
38 | ```
39 | {:.light}
40 | 
41 | ----
42 | 
43 | ### Goodbye, rvm!
44 | This removes the need for managing gemsets via [rvm]. In fact, if your project always uses the latest Ruby (which you also should, in my opinion!), you won't even need rvm at all.
45 | 
46 | Even if you don't use this tip, you actually don't need rvm gemsets at all. Bundler solves the same problem.
47 | 
48 | ### Parallel installs
49 | Bonus: the `-j3` flag makes your installations faster by allowing 3 installs in parallel.
50 | 
51 | [rvm]: http://rvm.io/
52 | [the silver searcher]: https://github.com/ggreer/the_silver_searcher
53 | 


--------------------------------------------------------------------------------
/_posts/2015-07-06-mocha-instanbul-coverage.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Getting Mocha coverage reports using Istanbul
 3 | description: Here's how to get detailed coverage reports from Mocha via Istanbul.
 4 | image: images/mocha-istanbul.png
 5 | tags: [JavaScript]
 6 | ---
 7 | 
 8 | ![]({{ page.image }}){:style='max-width:600px;margin-bottom:-75px'}
 9 | {:.full-image.cropped.bottom-space-4}
10 | 
11 | This is all you really need to run coverage reports on [Mocha] tests via [Istanbul].
12 | 
13 | ```
14 | istanbul cover _mocha
15 | ```
16 | {:.terminal.large}
17 | 
18 | ### Opening reports
19 | Your reports will be available under `coverage/`. By default, you'll get  JSON files and an HTML report.
20 | 
21 | ```nohighlight
22 | open coverage/lcov-report/*.html
23 | ```
24 | {:.light}
25 | 
26 | ----
27 | 
28 | ### Locking istanbul
29 | Preferrably, though, you'll want to add `istanbul` to your project so you can pin down the version you need and have it available on your CI.
30 | 
31 | [Mocha]: http://mochajs.org/
32 | [Istanbul]: https://www.npmjs.com/package/istanbul
33 | 
34 | ```nohighlight
35 | npm install --save-dev istanbul
36 | ./node_modules/.bin/istanbul cover _mocha
37 | ```
38 | {:.light}
39 | 
40 | ### Adding to gitignore
41 | There's no need to commit the coverage reports.
42 | 
43 | ```nohighlight
44 | echo "/coverage" >> .gitignore
45 | ```
46 | {:.light}
47 | 
48 | ### Making an npm task
49 | To make things a bit easier, add a script to your `package.json` to run this. After that, just invoke `npm run coverage`.
50 | 
51 | ```js
52 | /* package.json */
53 | {
54 |   ...
55 |   "scripts": {
56 |     "coverage": "istanbul cover _mocha -- -R spec"
57 |   }
58 | }
59 | ```
60 | 
61 | ### Travis integration
62 | If you're using [Travis] to automate your tests, you can also set it up to show coverage reports on your builds. [Looks like this](https://travis-ci.org/rstacruz/ractive-ractive).
63 | 
64 | ```yml
65 | # .travis.yml
66 | script: npm run coverage
67 | ```
68 | 
69 | [Travis]: https://travis-ci.org/
70 | 
71 | 


--------------------------------------------------------------------------------
/_posts/2015-11-17-pausing-capybara-selenium.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Pausing Capybara tests
 3 | tags: [Ruby]
 4 | description: Use the web inspector in Capybara/Selenium tests.
 5 | ---
 6 | 
 7 | Want to use the Web Inspector in Capybara/Selenium tests? The first thing you'll probably try is to use [pry-byebug](https://rubygems.org/gems/pry-byebug) to pause your tests. You'll probably find that this doesn't work as intended: it will halt everything, making your browser not load anything because Rails can't respond to the request.
 8 | 
 9 | ```rb
10 | scenario 'visiting the home page' do
11 |   visit root_path
12 |   binding.pry # ✗
13 | end
14 | ```
15 | 
16 | A better alternative is to use `$stdin.gets`. This is what [Poltergeist](https://rubygems.org/gems/poltergeist) uses to pause execution. That method is not available in Capybara/Selenium though, so you'll need to add it in yourself:
17 | 
18 | ```rb
19 | $stderr.write 'Press enter to continue'
20 | $stdin.gets
21 | ```
22 | 
23 | ## With RSpec
24 | If you're using Capybara with Rspec, you can turn this into a helper. You can then just use `pause` in your tests.
25 | 
26 | ```rb
27 | # spec/support/pause_helpers.rb
28 | module PauseHelpers
29 |   def pause
30 |     $stderr.write 'Press enter to continue'
31 |     $stdin.gets
32 |   end
33 | end
34 | ```
35 | 
36 | ```rb
37 | # spec/rails_helper.rb
38 | RSpec.configure do
39 |   config.include PauseHelpers, type: :feature
40 | end
41 | ```
42 | 
43 | ## Using Poltergeist
44 | 
45 | When using Poltergeist (for PhantomJS support), just use its [Remote Debugging](https://github.com/teampoltergeist/poltergeist#remote-debugging-experimental) feature with the `inspector: true` flag.
46 | 


--------------------------------------------------------------------------------
/_posts/2015-11-23-parallel-npm-commands.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Running NPM tasks in parallel
 3 | tags: [Development]
 4 | description: You can run multiple NPM script tasks in parallel. This is great for tasks like running build watchers.
 5 | ---
 6 | 
 7 | You can run multiple NPM script tasks in parallel. This is great for tasks like running build watchers. Just use the bash construct `&` to put each command in the background, then finally add `wait` so they can be terminated with `^C`. The final syntax would be:
 8 | 
 9 | ```bash
10 | command1 & command2 & wait
11 | ```
12 | 
13 | In pratice, this looks like so:
14 | 
15 | ```js
16 | {
17 |   "scripts": {
18 |     "watch": "npm run watch:js & npm run watch:css & wait",
19 |     "watch:js": "watchify -v -t babelify -s Editor index.js -o dist/index.js",
20 |     "watch:css": "stylus -w css/style.styl -o dist/index.css",
21 |   }
22 | }
23 | ```
24 | 


--------------------------------------------------------------------------------
/_posts/2015-11-28-factory_girl_with_custom_factories.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Using factory_girl with custom factories
 3 | tags: [Ruby]
 4 | description: Do you use an actual factory pattern in Rails? Set up factory_girl to use this factory.
 5 | ---
 6 | 
 7 | [Factory Girl](https://github.com/thoughtbot/factory_girl) is great when creating 'presets' of ActiveRecord models. This is all you really need for most simple cases.
 8 | 
 9 | ```rb
10 | factory :user do
11 |   name { 'John' }
12 |   email { 'john@example.com' }
13 | end
14 | ```
15 | 
16 | ```rb
17 | create :user
18 | # same as User.create(name: 'John', email: 'john@example.com')
19 | ```
20 | {:.light}
21 | 
22 | ### Using custom factories
23 | 
24 | At some point however, your models may get too complicated and you may need an actual [factory](https://en.wikipedia.org/wiki/Factory_method_pattern)—a class that constructs an object and performs actions along with it.
25 | 
26 | ```rb
27 | class UserCreator
28 |   attr_reader :user
29 | 
30 |   def initialize(attrs)
31 |     @user = User.create(attrs)
32 |     @user.profile = Profile.create(@user)
33 |     @user.posts = create_sample_post
34 |   end
35 | end
36 | ```
37 | 
38 | ```rb
39 | creator = UserCreator.create(name: 'John')
40 | creator.user
41 | ```
42 | {:.light}
43 | 
44 | ### Setting it up (the hard way)
45 | 
46 | Factory Girl will then consume a class in this manner:
47 | 
48 | ```
49 | user = User.new
50 | user.name = 'John'
51 | user.save!
52 | ```
53 | 
54 | You can set up a `factory_girl` factory to use this by passing a `class` option.  You'll have to make your factory implement these methods. This is silly and painful.
55 | 
56 | ```rb
57 | factory :real_user, class: 'UserCreator' do
58 |   ...
59 | end
60 | ```
61 | 
62 | ```rb
63 | create(:real_user).user
64 | ```
65 | {:.light}
66 | 
67 | ## Even easier
68 | 
69 | Why not use the [attributes_for](http://www.rubydoc.info/gems/factory_girl/file/GETTING_STARTED.md#Using_factories) helper instead?
70 | 
71 | ```rb
72 | UserCreator.create attributes_for(:user)
73 | ```
74 | 
75 | ## Also see
76 | 
77 | Also see the [Factory Girl cheatsheet](http://ricostacruz.com/cheatsheets/factory_girl.html), along with other cheatsheets from my [cheatsheets](http://ricostacruz.com/cheatsheets) archive.
78 | 


--------------------------------------------------------------------------------
/_posts/2015-12-10-using-git-merge-base.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Use git merge-base for big merges
 3 | tags: [Development, Git]
 4 | description: Use this one command to help you with big Git merges.
 5 | ---
 6 | 
 7 | When trying to merge two Git branches that have diverged a lot, it's a little difficult to make sense of what happened on both sides.
 8 | 
 9 | Enter [git merge-base]--a simple built-in utility to tell you where two branches diverged. It will tell you the commit where the two branches split off:
10 | 
11 | ```nohighlight
12 | $ git merge-base develop master
13 | b8ac838cad3266f6a7e414181875831fd9b86ed5
14 | ```
15 | 
16 | ### Set up git tags
17 | This command will create a tag `_base` that will point to where they both diverged.
18 | 
19 | ```bash
20 | git tag _base `git merge-base develop master`
21 | ```
22 | {:.terminal.large}
23 | 
24 | ### Inspecting changes
25 | You can then use `git diff`, `git log`, or [tig] to inspect changes on either side:
26 | 
27 | ```bash
28 | # Inspect changes in Gemfile on each side
29 | tig _base...develop -- Gemfile
30 | tig _base...master -- Gemfile
31 | 
32 | git diff _base...develop -- Gemfile
33 | git diff _base...master -- Gemfile
34 | ```
35 | 
36 | ### Check if both branches diverged
37 | You can also use the `--independent` flag which will show commits that can't be reached by any other.  If it prints 2 commits, it means that there are changes on both sides.
38 | 
39 | ```nohighlight
40 | $ git merge-base develop master --independent
41 | 46978182cc8d90439b862e772e99a3f71889901a
42 | 8501118e0d958115caff692abda0f29ad530db4f
43 | ```
44 | 
45 | If it only prints 1, it means only one side has changes.
46 | 
47 | ```bash
48 | $ git merge-base develop master --independent
49 | 8501118e0d958115caff692abda0f29ad530db4f
50 | ```
51 | 
52 | [git merge-base]: http://git-scm.com/docs/git-merge-base
53 | [tig]: https://jonas.nitro.dk/tig
54 | 


--------------------------------------------------------------------------------
/_posts/2015-12-17-rails-and-cloudfront.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Using Cloudfront as a Rails CDN
  3 | tags: [Ruby]
  4 | description: This guide will walk you through using Amazon CloudFront as an asset CDN for your Rails app.
  5 | ---
  6 | 
  7 | Setting up a CDN for your application assets is easy nowadays. This guide will walk you through using Amazon CloudFront as an asset CDN for your Rails application.
  8 | 
  9 | There are other guides out there today; [Heroku's CloudFront guide](https://devcenter.heroku.com/articles/using-amazon-cloudfront-cdn) is pretty good, but I think misses a few key points about CORS and denying requests outside `/assets`. This guide should fill those in.
 10 | 
 11 | ## Set up CloudFront
 12 | 
 13 | Sign up in [aws.amazon.com](http://aws.amazon.com) and create a new CloudFront distribution. This will get you a subdomain (like `d1h2t3n5.cloudfront.net`) that will act as a caching proxy to your actual site. You may opt to use your own domain names if you like.
 14 | 
 15 | ### Custom configuration
 16 | Make sure that `OPTIONS` is also being passed through. This will allow CORS requests through (see next section). Also, enable "compress automatically" to let CloudFront handle gzip compression for you.
 17 | 
 18 | * __Origin Settings__
 19 |     * Origin domain name: `www.yoursite.com`
 20 | * __Default Cache Behavior Settings__
 21 |     * Allowed HTTP Methods: `GET, HEAD, OPTIONS`
 22 |     * Cached HTTP Methods: Turn on `OPTIONS`
 23 |     * Compress Objects Automatically: `on`
 24 | 
 25 | ## Set up asset host
 26 | {:.top-space-4}
 27 | 
 28 | This will make `image_tag`, `asset_url` and other asset-related helpers point your assets to your CloudFront distribution. Do this only for `production.rb`.
 29 | 
 30 | ```rb
 31 | # config/environments/production.rb
 32 | config.action_controller.asset_host = '<YOUR DISTRIBUTION SUBDOMAIN>.cloudfront.net'
 33 | ```
 34 | 
 35 | ## Serve static assets
 36 | {:.top-space-4}
 37 | 
 38 | Enable the serving of static assets. You will want to do this if you're using Heroku or any 12-factor-style deployment.
 39 | If you use a reverse proxy like Nginx or Haproxy, skip this section and configure your reverse proxy to handle CORS instead.
 40 | 
 41 | ```rb
 42 | # config/environments/production.rb
 43 | # Rails 5+
 44 | config.public_file_server.enabled = true
 45 | config.public_file_server.headers = {
 46 |   'Cache-Control' => 'public, max-age=31536000'
 47 | }
 48 | ```
 49 | 
 50 | ```rb
 51 | # Rails 4.x and below
 52 | config.serve_static_assets = true
 53 | config.static_cache_control = 'public, max-age=31536000'
 54 | ```
 55 | 
 56 | ## Enable CORS in assets
 57 | {:.top-space-4}
 58 | 
 59 | If you use `serve_static_assets`, you will need to enable cross-origin requests for assets. This will prevent issues like Firefox not loading custom icons and fonts.
 60 | 
 61 | ### Install the `rack-cors` gem
 62 | Use the [rack-cors] gem to enable cross-origin requests. At time of writing, it is at version 0.4.0.
 63 | 
 64 | [rack-cors]: https://rubygems.org/gems/rack-cors
 65 | 
 66 | ```rb
 67 | # Gemfile
 68 | gem 'rack-cors'
 69 | ```
 70 | 
 71 | ### Configure rack-cors
 72 | This will make assets accessible from any website. You want to enable this because you'd want `yoursite.com` to be able to load assets out of `<id>.cloudfront.net`.
 73 | 
 74 | ```rb
 75 | # config/initializers/cors.rb
 76 | Rails.application.config.middleware.insert_before 0, Rack::Cors do
 77 |   allow do
 78 |     origins '*'
 79 | 
 80 |     resource '/assets/*',
 81 |       headers: :any,
 82 |       methods: [:get]
 83 |   end
 84 | end
 85 | 
 86 | # In older versions of Rails, you'll need to use
 87 | # 'Rack::Cors' (as a string with quotes)
 88 | ```
 89 | 
 90 | ## Deny everything but /assets
 91 | {:.top-space-4}
 92 | 
 93 | Set up your app to disallow Cloudfront from fetching anything but `/assets`. This uses User Agent detection; see CloudFront's docs on [User-Agent headers](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-user-agent-header) for information.
 94 | 
 95 | If you miss this step, you'll be able to access the rest of your site in your CloudFront URL. While those aren't public, you'd best have them secured as it can open up security flaws and possibly lead to SEO penalties.
 96 | 
 97 | ```rb
 98 | # app/services/cloudfront_denier.rb
 99 | 
100 | # Middleware to deny CloudFront requests to non-assets
101 | # http://ricostacruz.com/til/rails-and-cloudfront
102 | class CloudfrontDenier
103 |   def initialize(app, options = {})
104 |     @app = app
105 |     @target = options[:target] || '/'
106 |   end
107 | 
108 |   def call(env)
109 |     if cloudfront?(env) && !asset?(env)
110 |       [302, { 'Location' => @target }, []]
111 |     else
112 |       @app.call(env)
113 |     end
114 |   end
115 | 
116 |   def asset?(env)
117 |     env['PATH_INFO'] =~ %r{^/assets}
118 |   end
119 | 
120 |   def cloudfront?(env)
121 |     env['HTTP_USER_AGENT'] == 'Amazon CloudFront'
122 |   end
123 | end
124 | ```
125 | 
126 | ```rb
127 | # config/initializers/cloudfront.rb
128 | Rails.application.config.middleware.use CloudfrontDenier,
129 |   target: 'https://www.yoursite.com/'
130 | ```
131 | 


--------------------------------------------------------------------------------
/_posts/2016-01-02-selective-polyfilling.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Selective polyfilling
 3 | tags: [JavaScript]
 4 | description: Load JavaScript polyfills in a smart, controlled manner.
 5 | ---
 6 | 
 7 | Need to support legacy browsers, but don't want the full weight of [es5-shim] loaded for everyone? Sure, just load it for browsers that need it!
 8 | 
 9 | [es5-shim]: https://github.com/es-shims/es5-shim
10 | 
11 | ```js
12 | <script>(function(){function a(src){var s=document.createElement('script'),r=document.getElementsByTagName('script')[0];s.src=src;s.type='text/javascript';r.parentNode.insertBefore(s,r)}
13 | this.JSON||a('https://cdn.jsdelivr.net/json2/0.2/json2.min.js');
14 | (Object.keys&&[].map&&alert.bind)||a('https://cdn.jsdelivr.net/es5.shim/4.4.1/es5-shim.min.js');
15 | this.Promise||a('https://www.promisejs.org/polyfills/promise-6.1.0.js');
16 | }())</script>
17 | ```
18 | {:.light}
19 | 
20 | It should be easy enough to add more polyfills as you need them. You can also include some [legacy IE polyfills](ie-polyfills.html) to complete the experience.
21 | 
22 | Alternatively, you can use the [polyfill.io](https://polyfill.io/) service which takes care of this for you and more.
23 | 


--------------------------------------------------------------------------------
/_posts/2016-01-21-npm-in-rails.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Using npm packages in Rails
 3 | tags: [Ruby]
 4 | description: Load CSS/JavaScript packages from npm.
 5 | ---
 6 | 
 7 | We load our gems from [Rubygems][], but a lot of you may still be placing your JavaScripts into `vendor/assets/javascripts`. Why not use [npm][]? It's actually pretty easy to set up Rails to use npm.
 8 | 
 9 | [Rubygems]: https://rubygems.org/
10 | [npm]: https://www.npmjs.com/
11 | 
12 | ## Use npm itself
13 | 
14 | The best way to load npm packages in Rails is to use npm as your pipeline itself. [npm-pipeline-rails](https://github.com/rstacruz/npm-pipeline-rails) helps you do just that.
15 | 
16 | Don't want to switch away from the asset pipeline? That's fine, read on for an alternative approach.
17 | 
18 | ## Alternative
19 | 
20 | ### Add `node_modules` to your gitignore
21 | Because you don't want to commit those, just like you don't commit your gems.
22 | 
23 | ```bash
24 | echo '/node_modules' >> .gitignore
25 | ```
26 | 
27 | ### Create a `package.json` in your project
28 | This is the npm equivalent of a `Gemfile`—it's where your packages are stored.
29 | 
30 | ```
31 | npm init
32 | ```
33 | 
34 | ### Add `node_modules` to your asset path
35 | This lets you use npm modules in your Sprockets assets. In `config/application.rb`:
36 | 
37 | ```rb
38 | module YourApp
39 |   class Application < Rails::Application
40 |     config.assets.paths << Rails.root.join('node_modules')
41 | ```
42 | 
43 | ### Run `npm install` on startup
44 | Rails (or Bundler) prevents you from starting itself when you have gems that aren't installed yet. To emulate that behavior for npm packages, do this in `config/initializers/npm.rb`:
45 | 
46 | ```rb
47 | system 'npm install' if Rails.env.development? || Rails.env.test?
48 | ```
49 | 
50 | ### Heroku: add Node.js support
51 | If you're deploying to Heroku, the default Ruby buildpack doesn't include Node, which you need to use npm. Add both the Node.js and Ruby buildpacks:
52 | 
53 | ```bash
54 | heroku bulidpacks:add 'https://github.com/heroku/heroku-buildpack-nodejs.git'
55 | heroku bulidpacks:add 'https://github.com/heroku/heroku-buildpack-ruby.git'
56 | ```
57 | 
58 | ## Adding JavaScript packages
59 | 
60 | You can only use node modules that come with a pre-built version in it. [modernizr] won't work. You can try [browserify-rails][].
61 | 
62 | [browserify-rails]: https://github.com/browserify-rails/browserify-rails
63 | 
64 | ### Use `npm install`
65 | 
66 | ```bash
67 | npm install --save --save-exact modernizr
68 | ```
69 | 
70 | ### Add to `application.js`
71 | Then in your `application.js`, require it like so:
72 | 
73 | ```js
74 | //= require onmount/onmount
75 | ```
76 | 
77 | [modernizr]: https://modernizr.com/
78 | 


--------------------------------------------------------------------------------
/_posts/2016-08-11-ordered-keys-in-js.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Ordered keys in JS objects
 3 | tags: [JavaScript]
 4 | description: So you think JavaScript has ordered keys? Think again.
 5 | ---
 6 | 
 7 | It seems like JavaScript has ordered keys. Notice that the order of keys are based on insertion order.
 8 | 
 9 | ```js
10 | > obj = {};
11 | > obj.zulu = 1;
12 | > obj.yankee = 1;
13 | > obj.xray = 1;
14 | > obj
15 | { zulu: 1, yankee: 1, xray: 1 }
16 | ```
17 | 
18 | You can add more keys to an object, and it'll always end up in the end.
19 | 
20 | ```js
21 | > obj.bravo = 1;
22 | > obj.alpha = 1;
23 | > obj
24 | { zulu: 1, yankee: 1, xray: 1, bravo: 1, alpha: 1 }
25 | ```
26 | 
27 | ## Not really
28 | 
29 | But there are special cases when the key is a string that is a number. Notice this puts the new key at the beginning:
30 | 
31 | ```js
32 | > obj['5'] = 1;
33 | > obj
34 | { '5': 1, zulu: 1, yankee: 1, xray: 1, bravo: 1, alpha: 1 }
35 | ```
36 | 
37 | This is only true for numbers-as-strings. Strings that begin with numbers aren't affected.
38 | 
39 | ```js
40 | > obj['5X'] = 1;
41 | > obj
42 | { '5': 1, zulu: 1, yankee: 1, xray: 1, bravo: 1, alpha: 1, '5X': 1 }
43 | ```
44 | 
45 | ## Sorting behavior
46 | 
47 | The number-like keys are going to be sorted numerically (not lexically) before the other keys.
48 | 
49 | ```js
50 | > obj = {};
51 | > obj.y = 1;
52 | > obj.x = 1;
53 | > obj['22'] = 1;
54 | > obj['5'] = 1;
55 | > obj['2'] = 1;
56 | > obj
57 | { '2': 1, '5': 1, '22': 1, y: 1, x: 1 }
58 | ```
59 | 
60 | Hat tip to [@cheeaun](https://twitter.com/cheeaun/status/763578733496143872) for the observation on the behavior of numeric sorting!
61 | 


--------------------------------------------------------------------------------
/_posts/2016-08-25-my-immutable-toolkit.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Tools for immutable work
  3 | tags: [JavaScript]
  4 | description: Make writing immutable JavaScript easier with these tools.
  5 | ---
  6 | 
  7 | Most people reach for [lodash] for general-purpose JavaScript work. With the recent tides shifting towards functional programming, [Ramda] has become a popular option as well. I don't prefer to use them, let me show you why.
  8 | 
  9 | ## Accumulated bloat
 10 | 
 11 | I love both lodash and Ramda, but they're a bit too bloated to use for web apps. A simple [lodash.map](https://lodash.com/docs#map) weighs in at a whopping 24 kilobytes:
 12 | 
 13 | ```bash
 14 | $ browserify -r lodash/map | uglifyjs -cm | wc -c
 15 | 24895
 16 | ```
 17 | 
 18 | {:.terminal}
 19 | 
 20 | Ramda's [R.map](http://ramdajs.com/0.21.0/docs/#map) is slimmer, but still hefty at 7kb:
 21 | 
 22 | ```bash
 23 | $ browserify -r ramda/src/pluck | uglifyjs -cm | wc -c
 24 | 7750
 25 | ```
 26 | 
 27 | {:.terminal}
 28 | 
 29 | This may not seem like much, but for a web application, every kilobyte matters.
 30 | 
 31 | ## Loops
 32 | 
 33 | While JavaScript comes with [Array.prototype.map](http://devdocs.io/javascript/global_objects/array/map), it's not very useful for objects. I don't appreciate that iterating through arrays are done differently from iterating through objects. Not only that, but iterating through `Object.keys().map` is one of the slower ways of looping through an object's keys.
 34 | 
 35 | ```js
 36 | // Iterating through arrays
 37 | array.map((val, key) => {
 38 |   /*...*/
 39 | })
 40 | 
 41 | // Iterating through objects
 42 | Object.keys(object).map(key => {
 43 |   let val = object[key]
 44 |   /*...*/
 45 | })
 46 | ```
 47 | 
 48 | For this, I prefer [object-loops](https://www.npmjs.com/package/object-loops). `object-loops/map` is only 1kb!
 49 | 
 50 | ```js
 51 | import map from 'object-loops/map'
 52 | map(array, (val, key) => { /*...*/ })
 53 | map(object, (val, key) => { /*...*/ })
 54 | ```
 55 | 
 56 | ## Immutable Set/get
 57 | 
 58 | Setting deep keys is something that's needed in every [Redux]-powered app. While most Redux guides advice you to use the [spread operator](http://devguides.io/redux/introduction#the-spread-operator), it quickly gets unwieldy for deep structures.
 59 | 
 60 | ```js
 61 | // Plain mutable JS
 62 | state.albums[id] = album
 63 | 
 64 | // ESnext syntax
 65 | state = {
 66 |   ...state,
 67 |   albums: {
 68 |     ...state.albums,
 69 |     [id]: album
 70 |   }
 71 | }
 72 | ```
 73 | 
 74 | For this, [101](https://www.npmjs.com/package/101) comes with `101/put` and `101/pluck`.
 75 | 
 76 | ```js
 77 | import set from '101/put'
 78 | import get from '101/pluck'
 79 | 
 80 | state = set(state, `albums.${id}`, album)
 81 | get(state, `albums.${id}`)
 82 | ```
 83 | 
 84 | It comes with `101/omit` as well as an immutable analogue for `delete`.
 85 | 
 86 | ```js
 87 | // Plain mutable JS
 88 | delete state.albums[id]
 89 | 
 90 | // Using 101
 91 | import del from '101/omit'
 92 | del(state, `albums.${id}`)
 93 | ```
 94 | 
 95 | ## Recap
 96 | 
 97 | [object-loops] is great for iteration.
 98 | 
 99 | ```js
100 | // Iterating
101 | import map from 'object-loops/map'
102 | 
103 | map(state.albums, (val, key) => { /*...*/ })
104 | ```
105 | 
106 | [101] is great for setting/getting values from deep structures.
107 | 
108 | ```js
109 | // Setting and getting
110 | import set from '101/put'
111 | import get from '101/pluck'
112 | import del from '101/omit'
113 | 
114 | state = set(state, `albums.${id}`, album)
115 | state = del(state, `albums.${id}`)
116 | get(state, `albums.${id}`)
117 | ```
118 | 
119 | [lodash]: http://lodash.com/
120 | [Ramda]: http://ramdajs.com/
121 | [Redux]: http://redux.js.org/
122 | [object-loops]: https://www.npmjs.com/package/object-loops
123 | [101]: https://www.npmjs.com/package/101
124 | 


--------------------------------------------------------------------------------
/_posts/2016-08-28-filtering-falsy-values.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Filtering falsy values
 3 | tags: [JavaScript]
 4 | description: Check out JavaScript's equivalent of Array.compact.
 5 | ---
 6 | 
 7 | Quickly discard falsy values from an Array using `filter(Boolean)`. This is like [lodash.compact](http://devdocs.io/lodash~4/index#compact) or Ruby's [Array#compact](http://devdocs.io/ruby~2.3/array#method-i-compact).
 8 | 
 9 | ```js
10 | > ['this', 'has', undefined, false, 0, null, NaN, 'values'].filter(Boolean)
11 | [ 'this', 'has', 'values' ]
12 | ```
13 | 
14 | This works because `Boolean(val)` is roughly equivalent to `val => !!val`. That is, it's a function that coerces a value into a Boolean.
15 | 


--------------------------------------------------------------------------------
/_posts/2016-09-29-neovim-with-python-on-osx.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Neovim with Python on OSX
 3 | tags: [Development]
 4 | description: Here's how you can set up Neovim with Python support on OSX.
 5 | ---
 6 | 
 7 | Want to use plugins like [Deoplete](https://github.com/Shougo/deoplete.nvim), [Hyperstyle](http://ricostacruz.com/vim-hyperstyle) and other Python plugins on OSX, you need a working installation of both Python2 and Python3 managed by Homebrew (ie, system default Python isn't enough).
 8 | 
 9 | ```bash
10 | brew install python
11 | brew install python3
12 | pip2 install neovim --upgrade
13 | pip3 install neovim --upgrade
14 | ```
15 | 
16 | To complete this, add this to your `~/.config/nvim/init.vim`:
17 | 
18 | ```vim
19 | let g:python2_host_prog = '/usr/local/bin/python'
20 | let g:python3_host_prog = '/usr/local/bin/python3'
21 | ```
22 | 
23 | And of course, you have to have Neovim installed for this. The repo [homebrew-neovim](https://github.com/neovim/homebrew-neovim) has all the info on how to do this.
24 | 
25 | ```bash
26 | brew install neovim/neovim/neovim
27 | ```
28 | 
29 | ## Troubleshooting
30 | 
31 | You can use the `:HealthCheck` command to see issues with your Python providers.
32 | 


--------------------------------------------------------------------------------
/_posts/2016-12-28-graphql-on-javascript.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: GraphQL on JavaScript
 3 | tags: [JavaScript]
 4 | description: Use graphql.js's buildSchema to write schemas in GraphQL's schema language.
 5 | ---
 6 | 
 7 | The de-facto GraphQL package in JavaScript, [graphql.js], is a bit verbose. Use [buildSchema()] to make your life easier. You can use GraphQL's schema definition language to write your schemas.
 8 | 
 9 | [graphql.js]: https://www.npmjs.com/package/graphql
10 | [buildSchema()]: http://graphql.org/graphql-js/utilities/#buildschema
11 | 
12 | ```js
13 | import { graphql, buildSchema } from 'graphql'
14 | 
15 | const schema = buildSchema(`
16 |   type Query {
17 |     hello: String
18 |   }
19 | `)
20 | 
21 | const root = {
22 |   hello () { return 'world' }
23 | }
24 | 
25 | graphql(schema, '{ hello }', root)
26 |   .then(res => { console.log(res) })
27 | // => { data: { hello: 'world' } }
28 | ```
29 | 
30 | Without *buildSchema()*, you'll have to write it using lower-level classes:
31 | 
32 | ```js
33 | import {
34 |   graphql,
35 |   GraphQLSchema,
36 |   GraphQLObjectType,
37 |   GraphQLString
38 | } from 'graphql'
39 | 
40 | var schema = new GraphQLSchema({
41 |   query: new GraphQLObjectType({
42 |     name: 'RootQueryType',
43 |     fields: {
44 |       hello: {
45 |         type: GraphQLString,
46 |         resolve() { return 'world' }
47 |       }
48 |     }
49 |   })
50 | })
51 | 
52 | graphql(schema, '{ hello }')
53 |   .then(res => { console.log(res) })
54 | // => { data: { hello: 'world' } }
55 | ```
56 | 
57 | You can see an example in the graphql.js documentation's [home page](http://graphql.org/graphql-js/#writing-code).
58 | 


--------------------------------------------------------------------------------
/_posts/2017-02-19-life-in-side-quests.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Your life is a series of side quests
  3 | tags: [Productivity]
  4 | image: images/side-quest-example.jpg
  5 | description: Video games organize tasks in quests. There's no reason this can't work in real life, too.
  6 | ---
  7 | 
  8 | ![Image]({{ page.image }}){:style='margin-bottom:-10px'}
  9 | {:.full-image.cropped.bottom-space-4.top-space-4}
 10 | 
 11 | Video games tell you what to do using *quests* or *missions*. There's no reason this can't work in real life, too. Books tell us to lead purpose-driven lives with long-term and short-term goals. Seems like a perfect way to make your life an RPG.
 12 | 
 13 | ## Missions
 14 | 
 15 | A *mission* is an achievable goal within 3 months or less. A mission should be broken down into sub-tasks. In other words, it's an actionable short-term goal.
 16 | 
 17 | <div class='mission-list top-space-4 bottom-space-4'>
 18 | <div class='mission-item'>
 19 | <h3>1703 Start a blog <em>#project</em></h3>
 20 | <ul>
 21 | <li>Figure out the design</li>
 22 | <li>Write a few articles</li>
 23 | <li>Publishing</li>
 24 | </ul>
 25 | </div>
 26 | <div class='mission-item'>
 27 | <h3>1704 Couch to 5K <em>#fitness</em></h3>
 28 | <ul>
 29 | <li>Study the running program</li>
 30 | <li>Week 1 - 0.5km</li>
 31 | <li>Week 2 - 1km</li>
 32 | <li>Week 3 - 2.5km</li>
 33 | <li>Week 4 - 5km</li>
 34 | </ul>
 35 | </div>
 36 | <div class='mission-item'>
 37 | <h3>1704 Get a job <em>#career</em></h3>
 38 | <ul>
 39 | <li>Send 4 resumes</li>
 40 | <li>Get an interview</li>
 41 | <li>Go through negotiation</li>
 42 | <li>Get hired</li>
 43 | </ul>
 44 | </div>
 45 | <div class='mission-item'>
 46 | <h3>1706 Plan vacation <em>#life</em></h3>
 47 | <ul>
 48 | <li>Decide on destination</li>
 49 | <li>Book tickets</li>
 50 | <li>Book accomodations</li>
 51 | <li>Bon voyage!</li>
 52 | </ul>
 53 | </div>
 54 | </div>
 55 | 
 56 | I prefix each mission with a projected date of completion (`1702` is 2017, February), but this is totally up to you. I do this to get a good retrospective at the end of the year of all the missions I've completed.
 57 | 
 58 | <div class='mission-list top-space-4 bottom-space-4 -single'>
 59 | <div class='mission-item -goals'>
 60 | <ul>
 61 | <li>1703 Start a blog</li>
 62 | <li>1704 Couch to 5K</li>
 63 | <li>1704 Job at Hyperfisk</li>
 64 | <li>1706 Vacation to Paris</li>
 65 | <li>1707 Remodel kitchen</li>
 66 | <li>1707 Learn guitar</li>
 67 | </ul>
 68 | </div>
 69 | </div>
 70 | 
 71 | ## Keeping track
 72 | 
 73 | This system is so simple, you can use anything to keep track of it. As an Android user, I prefer using [Google Keep](https://keep.google.com). It lets me view all my missions at a glance, both ongoing and completed.
 74 | 
 75 | ![Image](images/keep-missions.png){:style='max-width:400px;margin-bottom:-130px'}
 76 | {:.full-image.cropped.bottom-space-4.top-space-4}
 77 | 
 78 | There are a variety of other ways to keep track of your missions, including using plain notebooks and pens. What's important is you break your goals into manageable pieces, and give yourself a way to look back on your progress.
 79 | 
 80 | <style>
 81 | .mission-list {
 82 |   box-sizing: border-box;
 83 |   font-size: .86em;
 84 | }
 85 | .mission-item {
 86 |   box-sizing: border-box;
 87 |   margin: 8px;
 88 |   padding: 16px;
 89 |   border: solid 1px rgba(30, 144, 255, 0.2);
 90 |   box-shadow: 0 4px 8px rgba(30, 144, 255, 0.07);
 91 |   border-radius: 3px;
 92 | }
 93 | @media (min-width: 481px) {
 94 |   .mission-list {
 95 |     display: flex;
 96 |     margin-left: -200px;
 97 |     margin-right: -200px;
 98 |     justify-items: center;
 99 |   }
100 |   .mission-item {
101 |     flex: 0 0 25%;
102 |     margin: 4px;
103 |   }
104 | }
105 | .mission-item > h3,
106 | .mission-item > ul,
107 | .mission-item > ul > li {
108 |   margin: 0;
109 |   padding: 0;
110 |   border: 0;
111 |   list-style-type: none;
112 |   background: transparent;
113 | }
114 | .mission-item > h3 {
115 |   padding-bottom: 8px;
116 |   margin-bottom: 8px;
117 |   border-bottom: solid 1px rgba(30, 144, 255, 0.2);
118 | }
119 | .mission-item.mission-item > h3 > em {
120 |   font-style: normal;
121 |   font-weight: 400;
122 |   font-size: .86em;
123 |   font-family: sans-serif;
124 |   color: rgba(30, 144, 255, 0.5);
125 |   margin-left: 4px;
126 | }
127 | .mission-item > ul > li {
128 |   margin-top: 2px;
129 | }
130 | .mission-item > ul > li::before {
131 |   content: '';
132 |   box-sizing: border-box;
133 |   position: relative;
134 |   left: 0;
135 |   top: 1px;
136 |   display: inline-block;
137 |   width: 12px;
138 |   height: 12px;
139 |   border: solid 2px rgba(30, 144, 255, 0.2);
140 |   border-radius: 2px;
141 |   margin: 0 8px 0 0;
142 | }
143 | @media (min-width: 481px) {
144 |   .mission-list.-single {
145 |     margin-left: 100px;
146 |     margin-right: 100px;
147 |   }
148 |   .mission-list.-single > .mission-item {
149 |     flex: 1 0 auto;
150 |   }
151 | }
152 | .mission-item.-goals > ul > li + li {
153 |   border-top: solid 1px rgba(30, 144, 255, 0.2);
154 |   padding-top: 4px;
155 |   margin: 4px 0;
156 | }
157 | .mission-item.-goals > ul > li::before {
158 |   background: rgba(30, 144, 255, 0.2);
159 |   border-color: transparent;
160 | }
161 | </style>
162 | 


--------------------------------------------------------------------------------
/_posts/2017-03-14-redux-side-effects.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Managing side effects in Redux
  3 | tags: [JavaScript]
  4 | description: Learn to manage impure side effects in a Redux store with middleware.
  5 | ---
  6 | 
  7 | [Redux] is the preferred state management pattern for React apps today. Being a very "functional" library, it doesn't like side effects much. This means doing asynchronous actions in a Redux reducer is not just a bad idea, it simply won't work.
  8 | 
  9 | ```js
 10 | /* ✗ Warning: This won't work! */
 11 | 
 12 | function reducer (state, action) {
 13 |   switch (action.type) {
 14 |     case 'profile:load':
 15 |       fetch('/my_profile')
 16 |         .then(res => res.json())
 17 |         .then(res => {
 18 |           dispatch({ type: 'profile:set', payload: res.body })
 19 |           // ✗ Error: dispatch is not defined
 20 |         })
 21 | 
 22 |         ...
 23 | ```
 24 | 
 25 | You can't modify state here in an async callback. In fact, you can't even `dispatch()` in a reducer! This won't work and is a bad idea; you break the purity of the store reducer.
 26 | 
 27 | ## Middleware for side effects
 28 | 
 29 | Fortunately, Redux has built-in provisions for managing side effects: [Middleware](http://redux.js.org/docs/advanced/Middleware.html)! You can write your own middleware with business logic. You don't need to use 3rd-party packages other than Redux itself.
 30 | 
 31 | Redux middleware is simply a decorator for `dispatch()`. Here's an example where we extend `dispatch()` to perform certain side effects (an AJAX call, in this case) when certain actions come in.
 32 | 
 33 | ```js
 34 | // Redux middleware
 35 | function ProfileLoader () {
 36 |   return store => dispatch => action {
 37 |     dispatch(action) // First pass them through to the reducers.
 38 | 
 39 |     switch (action.type) {
 40 |       case 'profile:load!':
 41 |         fetch('/my_profile')
 42 |           .then(res => res.json())
 43 |           .then(res => dispatch({ type: 'profile:set', payload: res.body }))
 44 |           .catch(err => dispatch({ type: 'profile:error', payload: err }))
 45 |     }
 46 |   }
 47 | }
 48 | ```
 49 | 
 50 | ```js
 51 | // Use the middleware in your store
 52 | store = createStore(reducers, {}, applyMiddleware(
 53 |   ProfileLoader()
 54 | )
 55 | ```
 56 | 
 57 | ## Other solutions
 58 | 
 59 | Perhaps the most well-known solution to this is [redux-thunk](https://www.npmjs.com/package/redux-thunk), which allows you to dispatch functions ("thunks").
 60 | 
 61 | ```js
 62 | // Using a function as an action via redux-thunk
 63 | store.dispatch((dispatch) => {
 64 |   fetch('/my_profile')
 65 |     .then(res => res.json())
 66 |     .then(res => dispatch({ type: 'profile:set', payload: res.body }))
 67 |     .catch(err => dispatch({ type: 'profile:error', payload: err }))
 68 | })
 69 | ```
 70 | 
 71 | I personally advise against this approach for a number of reasons:
 72 | 
 73 | - It moves logic to your action creators, which were supposed to be very simple pieces of code.
 74 | - It makes actions complicated, when they can just be simple JSON instructions (eg, `{ type: 'profile:load' }`).
 75 | - It can't interact with other side effects. For instance, you can't make a side effect to send `profile:error`s to an error tracking service. Middleware can do this.
 76 | 
 77 | ## Naming convention
 78 | 
 79 | You may have noticed I named my action `profile:load!`. This is my preferred convention of choice, where action names are simply strings, and "side effect" actions are suffixed with an exclamation mark, just as it would in Ruby or Elixir.
 80 | 
 81 | ## Other examples
 82 | 
 83 | How about a middleware that tracks errors as they come in?
 84 | 
 85 | ```js
 86 | function ErrorTracker () {
 87 |   return store => dispatch => action {
 88 |     dispatch(action)
 89 | 
 90 |     switch (action.type) {
 91 |       case 'profile:error':
 92 |       case 'account:error':
 93 |       case 'other:error':
 94 |         Rollbar.track(action.payload)
 95 |     }
 96 |   }
 97 | }
 98 | ```
 99 | 
100 | Or a middleware that sends `tick` events every second? Great for timers or for RPG's.
101 | 
102 | ```js
103 | function Ticker (options) {
104 |   let timer
105 | 
106 |   return store => dispatch => action {
107 |     dispatch(action)
108 | 
109 |     switch (action.type) {
110 |       case 'ticker:start!':
111 |         timer = setInterval(() => {
112 |           store.dispatch({ type: 'ticker:tick', now: new Date() })
113 |         }, options.interval)
114 |         break
115 | 
116 |       case 'ticker:stop!':
117 |         if (timer) clearInterval(timer)
118 |         timer = null
119 |         break
120 |     }
121 |   }
122 | }
123 | ```
124 | 
125 | And to put them all together:
126 | 
127 | ```js
128 | store = createStore(reducers, {}, applyMiddleware(
129 |   ProfileLoader(),
130 |   ErrorTracker(),
131 |   Ticker({ interval: 1000 })
132 | )
133 | ```
134 | 
135 | ## See also
136 | 
137 | Check out [Redux on devguides.io](http://devguides.io/redux)! Devguides.io is my new pet project where I make pocket-sized explainers for web development concepts.
138 | 
139 | [Redux]: http://redux.js.org/
140 | 


--------------------------------------------------------------------------------
/_posts/2017-06-06-rails-mailer-race-conditions.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Rails mailer conventions are silly
 3 | tags: [Ruby]
 4 | description: Typical Rails convention will tell you to send email like using the ActiveMailer API like so. This is not a very good idea, and let me tell you why.
 5 | ---
 6 | 
 7 | Typical Rails convention will tell you to send email like using the ActiveMailer API like so. This is not a very good idea, and let me tell you why.
 8 | 
 9 | ```ruby
10 | NotificationMailer.notification(@user, @post).deliver_later
11 | ```
12 | 
13 | ## Sample implementation
14 | 
15 | This kind of mailer would typically be implemented like so:
16 | 
17 | ```ruby
18 | class NotificationMailer < ApplicationMailer
19 |   def notification(user, post)
20 |     @user = user
21 |     @post = post
22 |     
23 |     mail to: @user.email,
24 |          subject: "You've got a notification"
25 |   end
26 | end
27 | ```
28 | 
29 | ## Race condition!
30 | 
31 | If you follow Rails best practices, you'd be using `#deliver_later` to send email in the background. This is great for performance, but that means you have to start thinking asynchronously. The code above is written in a very synchronous style and will fail in certain conditions. Consider this scenario:
32 | 
33 | - A notification is triggered for user Joe, who is `joe@example.com`, by creating a new `Post`.
34 | - A background job is created.
35 | - Before an email could be sent, the `Post` is deleted.
36 | - The mailer now fails because `@post` is nil.
37 | 
38 | ## Think asynchronously
39 | 
40 | Instead of passing Rails models or record ID's, pass a fully-loaded _plain hash_ of everything the mailer needs to send the email. Consider something like this instead:
41 | 
42 | ```ruby
43 | NotificationMailer.notification(
44 |   user: {
45 |     email: @user.email
46 |   },
47 |   post: {
48 |     id: @post.id,
49 |     title: @post.title,
50 |     url: post_url(@post)
51 |   }
52 | ).deliver_later
53 | ```
54 | 
55 | The mailer will now not need to hit the database to fetch any data, eliminating any race conditions. Even if the post is modified or deleted later on, the email will still send just fine.
56 | 


--------------------------------------------------------------------------------
/_posts/2017-07-12-less-cpu-on-development.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Use less CPU for Rails
 3 | tags: [Development]
 4 | description: Is Rails eating your CPU in development? Try this nifty trick.
 5 | ---
 6 | 
 7 | Is Rails eating your CPU in development? Try lowering its priority using [renice(1)](http://manpages.ubuntu.com/manpages/zesty/en/man1/renice.1.html), a standard BSD utility that should be available in OS X and most Linux distributions. Here's a shell script that will automatically reset the priority to `+15` to common development processes:
 8 | 
 9 | ```
10 | #!/usr/bin/env sh
11 | sudo renice +15 -p $(ps ax | grep -E 'ruby|node|watchman|postgres' | grep -v grep | awk '{print $1}' | tr '\n' ' ')
12 | ```
13 | 
14 | Save this as `renice-dev` into one of your `bin` paths, and give it a `chmod +x renice-dev`. You can type `renice-dev` after you start your development processes to "renice" them.
15 | 
16 | The lowest priority is `+19` (only run when nothing else is running), the default is `0`, and the highest is `-20` (makes things go very fast).
17 | 
18 | ## References
19 | 
20 | - [Throttling processes in OS X](https://tinyapps.org/blog/mac/201107230700_throttle_process_os_x.html) *(tinyapps.org)*
21 | 


--------------------------------------------------------------------------------
/_posts/2017-09-19-a-better-hello-world.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: A better Hello World
 3 | description: "Hello world programs aren't as useful today as they were before. Here's what I propose..."
 4 | tags: [Development]
 5 | ---
 6 | 
 7 | The "Hello world" program is usually the first introduction to any programming language. It looks like this in the C programming language:
 8 | 
 9 | ```c
10 | /* hello.c */
11 | #import <stdio.h>
12 | 
13 | int main(int argc, char *argv[]) {
14 |   printf("Hello, world!");
15 |   return 0;
16 | }
17 | ```
18 | 
19 | It demonstrates the minimum amount you need to write a C program. In more modern languages however, this example isn't as useful anymore. Here's the same example in Python:
20 | 
21 | ```py
22 | # hello.py
23 | print "Hello, world!"
24 | ```
25 | 
26 | ## A better hello world
27 | 
28 | In today's world of more succint programming languages, we need a different "hello world" to demonstrate language features better. Here's what I propose:
29 | 
30 | ```js
31 | // hello.js
32 | function getGreeting (name) {
33 |   return `Hello, ${name}!`
34 | }
35 | 
36 | const message = getGreeting('world')
37 | console.log(message)
38 | ```
39 | 
40 | This simple example demonstrates a few more things than printing strings:
41 | 
42 | - How to write a function with an argument
43 | - Returning values from functions
44 | - How to use variables
45 | - The naming convention for functions (camelCase versus snake_case)
46 | - String concatenation
47 | - Comments
48 | 
49 | ## More examples
50 | 
51 | I've started writing these kinds of programs for languages that I'm learning. Here's how it'd look like in Go, which I've added to my [Go cheatsheet](https://ricostacruz.com/cheatsheets/go):
52 | 
53 | ```go
54 | // hello.go
55 | package main
56 | 
57 | import "fmt"
58 | 
59 | func main() {
60 |   message := getGreeting("world")
61 |   fmt.Println(message)
62 | }
63 | 
64 | func getGreeting(name string) (string) {
65 |   return "Hello, " + name + "!"
66 | }
67 | ```
68 | 
69 | Here's an Elixir version, also at the [Elixir cheatsheet](https://ricostacruz.com/cheatsheets/elixir):
70 | 
71 | ```elixir
72 | # hello.exs
73 | defmodule Greeter do
74 |   def get_greeting(name) do
75 |     "Hello, " <> name <> "!"
76 |   end
77 | end
78 | 
79 | message = Greeter.get_greeting("world")
80 | IO.puts message
81 | ```
82 | 


--------------------------------------------------------------------------------
/_posts/2018-05-22-css-in-js-showdown-draft.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "CSS-in-JS showdown: styled-jsx vs. Emotion"
  3 | tags: [JavaScript]
  4 | secret: true
  5 | description: |
  6 |   ...
  7 | ---
  8 | 
  9 | There's a lot of solutions for CSS-in-JS. Today we're going to look at `styled-jsx` and `emotion`.
 10 | {:.brief-intro.center}
 11 | 
 12 | ### What's emotion?
 13 | 
 14 | It's a library. Check it out: [emotion]. It's available in various flavors:
 15 | 
 16 | * [react-emotion]
 17 | * [styled-components]
 18 | 
 19 | ### What's styled-jsx?
 20 | 
 21 | It's also a library. Check it out: [styled-jsx].
 22 | 
 23 | ---
 24 | 
 25 | ## Dynamic styles
 26 | 
 27 | How does each library handle the problem of dynamic styles?
 28 | {:.brief-intro.center}
 29 | 
 30 | ### Emotion — use interpolation
 31 | 
 32 | Emotion gives you the option to interpolate inside CSS. This leads us to constructions such as these:
 33 | 
 34 | ```js
 35 | // Emotion
 36 | const Block = styled('div')`
 37 |   opacity: ${p => (p.isHidden ? '0' : '1')};
 38 |   transition: opacity ${p => (p.isHidden ? '300ms' : '50ms')} linear;
 39 | `
 40 | ```
 41 | 
 42 | ### styled-jsx — use CSS classes
 43 | 
 44 | On the other hand, `styled-jsx` prefers that you write your styles in plain CSS. You will end up with longer, but more readable code:
 45 | 
 46 | ```js
 47 | // styled-jsx
 48 | const Block = ({ children }) => {
 49 |   return (
 50 |     <div className={isHidden ? 'hidden' : 'visible'}>
 51 |       {children}
 52 | 
 53 |       <style jsx>{`
 54 |         .visible {
 55 |           opacity: 1;
 56 |           transition: opacity 50ms linear;
 57 |         }
 58 | 
 59 |         .hidden {
 60 |           opacity: 0;
 61 |           transition: opacity 300ms linear;
 62 |         }
 63 |       `}</style>
 64 |     </div>
 65 |   )
 66 | }
 67 | ```
 68 | 
 69 | ### Which is better?
 70 | 
 71 | Some people may prefer the terse-ness of the Emotion approach, since it leads to shorter code. On the other hand, styled-jsx is more conducive to a _declarative_ style of writing styles, very similar to how it might be done with plain CSS approaches.
 72 | 
 73 | |                 | styled-jsx                       | emotion                  |
 74 | | --------------- | -------------------------------- | ------------------------ |
 75 | | **Style**       | Declarative :+1:                 | Imperative               |
 76 | | **Syntax**      | Mostly just CSS :+1:             | CSS/JS hybrid            |
 77 | | **Length**      | Longer code                      | Shorter code :+1:        |
 78 | | **Parsability** | Friendlier to CSS designers :+1: | Harder to mentally-parse |
 79 | 
 80 | ### Winner: styled-jsx
 81 | 
 82 | I prefer the `styled-jsx` approach. While dynamic interpolation can lead to shorter code, the "static" style that styled-jsx encourages wins for me.
 83 | 
 84 | ---
 85 | 
 86 | ## Handling big components
 87 | 
 88 | Components typically have multiple elements in them. How does each library handle this case?
 89 | {:.brief-intro.center}
 90 | 
 91 | ### Emotion — use multiple components
 92 | 
 93 | Emotion is (...):
 94 | 
 95 | ```js
 96 | const Profile = () => (
 97 |   <Root>
 98 |     <Image />
 99 |     <Info>
100 |       <Name />
101 |       <Timestamp />
102 |     </Info>
103 |   </Root>
104 | )
105 | 
106 | const Root = styled.section`
107 |   display: flex;
108 | `
109 | const Image = styled.img`
110 |   width: 32px;
111 |   height: 32px;
112 | `
113 | const Info = styled.div`
114 |   display: flex;
115 | `
116 | const Name = styled.span`
117 |   font-weight: bold;
118 | `
119 | const Timestamp = styled.div`
120 |   font-size: 0.8em;
121 | `
122 | ```
123 | 
124 | ### styled-jsx — use HTML elements
125 | 
126 | styled-jsx is (...):
127 | 
128 | ```js
129 | const Profile = () => (
130 |   <section className="Profile">
131 |     <div className="image" />
132 |     <div className="info">
133 |       <span className="name" />
134 |       <span className="timestamp" />
135 |     </div>
136 | 
137 |     <style jsx>{`
138 |       .Profile {
139 |         display: flex;
140 |       }
141 |       .image {
142 |         width: 32px;
143 |         height: 32px;
144 |       }
145 |       .info {
146 |         display: flex;
147 |       }
148 |       .name {
149 |         font-weight: bold;
150 |       }
151 |       .timestamp {
152 |         font-size: 0.8em;
153 |       }
154 |     `}</style>
155 |   </section>
156 | )
157 | ```
158 | 
159 | ### Comparison
160 | 
161 | Here's how they compare:
162 | 
163 | |           | emotion | styled-jsx |
164 | | --------- | ------- | ---------- |
165 | | **Style** | Messy   | Clean      |
166 | 
167 | ## 3rd-party support
168 | 
169 | styled-jsx supports PostCSS:
170 | 
171 | ```js
172 | const Profile = children => (
173 |   <div className="Profile">
174 |     {children}
175 | 
176 |     <style jsx>{`
177 |       @import 'styles/variables';
178 | 
179 |       .Profile {
180 |         color: color(var(--text-color) alpha(50%));
181 |       }
182 |     `}</style>
183 |   </div>
184 | )
185 | ```
186 | 
187 | This allows you stuff:
188 | 
189 | ## Linting
190 | 
191 | With styled-jsx, your CSS is lintable via [Stylelint], which ensures CSS conventions like variable naming, class-name conventions, and more.
192 | 
193 | Stylelint support is available to styled-components via [stylelint-processor-styled-components].
194 | 
195 | ## Debuggability
196 | 
197 | TBD
198 | 
199 | ## Verdict
200 | 
201 | Well...
202 | 
203 | [stylelint]: https://github.com/stylelint/stylelint
204 | [stylelint-processor-styled-components]: https://github.com/styled-components/stylelint-processor-styled-components
205 | [styled-components]: https://github.com/styled-components
206 | [styled-jsx]: https://github.com/zeit/styled-jsx
207 | [emotion]: http://emotion.sh/
208 | [react-emotion]: https://www.npmjs.com/package/react-emotion
209 | 


--------------------------------------------------------------------------------
/_posts/2018-06-09-github-always-ssh.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Force git to use SSH on GitHub
 3 | description: |
 4 |   Make Git always use SSH: `git config --global url."git@github.com:".insteadOf "https://github.com/"`
 5 | tags: [Development]
 6 | ---
 7 | 
 8 | ### Always SSH (recommended)
 9 | 
10 | This forces GitHub to always use SSH, even for HTTPS URL's!
11 | 
12 | ```bash
13 | git config --global url."git@github.com:".insteadOf "https://github.com/"
14 | ```
15 | 
16 | This way, you can use `https://` GitHub URL's and they will still use your SSH key.
17 | 
18 | ```bash
19 | git clone https://github.com/rstacruz/vimfiles.git
20 | # rewrites to `git@github.com:rstacruz/vimfiles.git`
21 | ```
22 | 
23 | ### Always HTTPS
24 | 
25 | Alternatively, this forces GitHub to always use HTTPS. Great for OSX, where you can use [git-credential-osxkeychain](https://help.github.com/articles/updating-credentials-from-the-osx-keychain/) to store your GitHub token.
26 | 
27 | This will _not_ rewrite `git@github.com:user/repo.git` URL's, though, so I don't really recommend it! Besides, SSH keys are often easier to manage than API tokens.
28 | 
29 | ```bash
30 | git config --global url."https://github".insteadOf git://github
31 | ```
32 | 
33 | ### References
34 | 
35 | Hat tip to these people!
36 | 
37 | - <https://gist.github.com/Kovrinic/ea5e7123ab5c97d451804ea222ecd78a>
38 | - <https://gist.github.com/grawity/4392747>
39 | 


--------------------------------------------------------------------------------
/_sass/base/normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }
428 | 


--------------------------------------------------------------------------------
/_sass/base/typography.sass:
--------------------------------------------------------------------------------
 1 | @import url('//brick.a.ssl.fastly.net/Roboto:400,400i,700')
 2 | @import url('//fonts.googleapis.com/css?family=Raleway:800')
 3 | @import url('//fonts.googleapis.com/css?family=Fira+Mono:400,400i')
 4 | @import url('//brick.a.ssl.fastly.net/EB+Garamond:400i')
 5 | 
 6 | $body-font-size: 17px
 7 | $body-line-height: 1.7
 8 | 
 9 | @mixin font-size($multiplier, $lhmultiplier, $size, $line-height)
10 |   font-size: $size * $multiplier
11 |   @if $line-height != none
12 |     line-height: $line-height * $lhmultiplier
13 | 
14 | @mixin body-font
15 |   font-family: 'Roboto', sans-serif
16 |   font-weight: 400
17 | 
18 | @mixin italic-font
19 |   font-family: 'eb garamond', serif
20 |   font-weight: 400
21 |   font-style: italic
22 |   +kernliga
23 | 
24 | @mixin headline-font
25 |   font-family: 'eb garamond', serif
26 |   font-weight: 400
27 |   font-style: italic
28 |   +kernliga
29 | 
30 | @mixin caps-font
31 |   text-transform: uppercase
32 |   letter-spacing: 2px
33 | 
34 | @mixin mono-font
35 |   font-family: 'fira mono', monospace
36 |   font-weight: 400
37 |   letter-spacing: -0.5px
38 |   +no-antialias
39 | 
40 | @mixin bold-font
41 |   font-family: 'raleway', sans-serif
42 |   font-weight: 800
43 | 
44 | /*
45 |  * sizes
46 |  */
47 | 
48 | @mixin italic-font-size($size, $line-height: none)
49 |   +font-size(1.0, 1.0, $size, $line-height)
50 | 
51 | @mixin headline-font-size($size, $line-height: none)
52 |   +font-size(1.0, 1.0, $size, $line-height)
53 | 
54 | @mixin bold-font-size($size, $line-height: none)
55 |   +font-size(1.0, 1.0, $size, $line-height)
56 | 
57 | @mixin mono-font-size($size, $line-height: none)
58 |   +font-size(1.0, 1.0, $size, $line-height)
59 | 


--------------------------------------------------------------------------------
/_sass/base/utils.sass:
--------------------------------------------------------------------------------
 1 | @mixin kernliga
 2 |   font-size-adjust: none
 3 |   // don't display digraphs in languages that don't support it
 4 |   -webkit-font-language-override: normal
 5 |   font-language-override: normal
 6 | 
 7 |   // use font-defined kerning info
 8 |   -webkit-font-kerning: auto
 9 |   font-kerning: auto
10 | 
11 |   // opentype options: kerning, ligatures, horiz ligatures, discretionary ligatures, contextual swash
12 |   // http://en.wikipedia.org/wiki/List_of_typographic_features
13 |   -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
14 |   font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
15 | 
16 |   // allow browser to auto-infer missing glyphs
17 |   font-synthesis: weight style
18 | 
19 |   // swashes on first letters
20 |   // &:first-letter
21 |   //   font-feature-settings: "kern", "swsh"
22 |   //   -webkit-font-feature-settings: "kern", "swsh"
23 | 
24 | @mixin antialias
25 |   text-rendering: optimizeLegibility
26 |   -webkit-font-smoothing: antialiased
27 |   -moz-osx-font-smoothing: grayscale
28 | 
29 | @mixin no-antialias
30 |   text-rendering: auto
31 |   -webkit-font-smoothing: subpixel-antialiased
32 |   -moz-osx-font-smoothing: auto
33 | 
34 | @mixin clearfix
35 |   &:after
36 |     display: table
37 |     content: ''
38 |     clear: both
39 |     height: 0
40 |     zoom: 1
41 | 
42 | 


--------------------------------------------------------------------------------
/_sass/components/about-the-site.sass:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * .about-the-site
  3 |  */
  4 | 
  5 | .about-the-site
  6 |   &
  7 |     position: relative
  8 | 
  9 |   .container
 10 |     text-align: center
 11 |     padding: 3em 80px
 12 |     margin: 0 auto
 13 |     +clearfix
 14 | 
 15 |     @media (max-width: 768px)
 16 |       padding-left: 40px
 17 |       padding-right: 40px
 18 | 
 19 |   &:before
 20 |     content: ''
 21 |     position: absolute
 22 |     display: block
 23 |     left: 20px
 24 |     right: 20px
 25 |     top: 0
 26 |     border-top: solid 1px $hairline
 27 | 
 28 |   &
 29 |     +body-font
 30 |     font-size: 0.85em
 31 |     color: lighten($gray, 20%)
 32 | 
 33 |   a, a:visited
 34 |     color: lighten($gray, 10%)
 35 |     box-shadow: inset 0 -1px rgba(black, 0.05)
 36 |     padding-bottom: 2px
 37 | 
 38 |   a:hover, a:focus
 39 |     color: $black
 40 |     box-shadow: inset 0 -2px $accent
 41 | 
 42 |   strong
 43 |     +bold-font
 44 | 
 45 |   strong a, strong a:visited
 46 |     color: $black
 47 |     box-shadow: none
 48 | 
 49 |   strong a:hover, strong a:focus
 50 |     color: $black
 51 |     box-shadow: inset 0 -2px $accent
 52 | 
 53 |   .identity
 54 |     margin: 0
 55 |     margin-top: 0.2em
 56 |     float: right
 57 |     +italic-font
 58 |     +italic-font-size(2.5em)
 59 | 
 60 |   .identity a,
 61 |   .identity a:visited
 62 |     color: $black
 63 |     box-shadow: none
 64 | 
 65 |   .identity a:hover,
 66 |   .identity a:focus
 67 |     color: $accent
 68 | 
 69 |   .blurb
 70 |     margin: 0
 71 |     max-width: 500px
 72 |     text-align: left
 73 |     float: left
 74 |     line-height: 1.55
 75 | 
 76 |   .back
 77 |     float: right
 78 |     margin-top: 0.4em
 79 |     margin-right: 2em
 80 | 
 81 |   .fleuron:before
 82 |     content: '\f492'
 83 |     font-family: Ionicons
 84 |     font-size: 16px
 85 |     font-weight: normal
 86 |     font-style: normal
 87 |     display: inline-block
 88 |     vertical-align: middle
 89 |     color: $black
 90 |     margin: 0 7px
 91 | 
 92 |     @media (max-width: 768px)
 93 |       display: none
 94 | 
 95 |   @media (max-width: 768px)
 96 |     .identity
 97 |       float: left
 98 |       clear: both
 99 |     .blurb
100 |       float: none
101 |       margin-bottom: 1em
102 |       width: auto
103 |     .back
104 |       float: right
105 |       margin-right: 0
106 | 


--------------------------------------------------------------------------------
/_sass/components/big-button.sass:
--------------------------------------------------------------------------------
 1 | .big-button,
 2 | a.big-button
 3 |   display: inline-block
 4 | 
 5 |   width: 180px
 6 |   height: 50px
 7 |   line-height: 50px - 2px
 8 |   padding: 0
 9 |   border-radius: 30px
10 |   font-size: 0.85em
11 |   box-shadow: none
12 |   background: transparent
13 | 
14 |   @media (max-width: 768px)
15 |     width: 140px
16 |     height: 40px
17 |     line-height: 40px - 2px
18 | 
19 |   &, &:visited
20 |     border: solid 2px $accent
21 |     color: $accent
22 | 
23 |   &.-back,
24 |   &.-back:visited
25 |     border: solid 1px rgba($gray, 0.2)
26 |     color: $gray
27 | 
28 |   &.-back:before,
29 |   &.-next:after
30 |     font-family: Ionicons
31 |     font-size: 20px
32 |     display: inline-block
33 |     vertical-align: middle
34 |     position: relative
35 |     top: -1px
36 | 
37 |   &.-back:before
38 |     content: '\f38f'
39 | 
40 |   &.-next:after
41 |     content: '\f3d1'
42 |     margin-left: 16px
43 |     top: 0
44 | 
45 |   &.-slim
46 |     width: 60px
47 |     border-width: 2px
48 |     height: 60px
49 |     line-height: 60px
50 |     border-radius: 50%
51 | 
52 |     @media (max-width: 768px)
53 |       width: 40px
54 |       height: 40px
55 |       line-height: 40px
56 | 
57 |   &:hover, &:focus
58 |     background: $accent
59 |     border-color: transparent
60 |     color: white
61 |     box-shadow: none
62 | 
63 |   &.-back:hover,
64 |   &.-back:focus
65 |     background: $accent
66 |     color: white
67 | 


--------------------------------------------------------------------------------
/_sass/components/brief-intro.sass:
--------------------------------------------------------------------------------
1 | /*
2 |  * .brief-intro -- Brief introduction
3 |  */
4 | 
5 | .brief-intro
6 |   font-size: 1.1em
7 |   color: $gray
8 | 
9 | 


--------------------------------------------------------------------------------
/_sass/components/full-image.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .full-image -- full width image containers
 3 |  */
 4 | 
 5 | .full-image
 6 |   &
 7 |     overflow: hidden
 8 |     text-align: center
 9 |     position: relative
10 | 
11 |   img
12 |     background: #fcfcfc
13 | 
14 |   &.cropped img,
15 |   &.cropped img:first-child:last-child
16 |     margin-bottom: -50px
17 |     display: block
18 |     background: transparent
19 | 
20 |   &.cropped:after
21 |     content: ''
22 |     display: block
23 |     position: absolute
24 |     bottom: 0
25 |     left: 20px
26 |     right: 20px
27 |     border-bottom: solid 1px $lightgray
28 | 
29 |   &.stretched img
30 |     width: 100%
31 | 
32 |   @media (max-width: 768px)
33 |     margin-left: -20px
34 |     margin-right: -20px
35 | 
36 |   @media (min-width: 769px)
37 |     width: 100vw
38 |     margin-left: calc(-50vw + #{$page-width} / 2)
39 | 


--------------------------------------------------------------------------------
/_sass/components/hint.sass:
--------------------------------------------------------------------------------
 1 | .hint--top, .hint--bottom
 2 |   &:before
 3 |     margin-top: -14px
 4 |     margin-left: -8px
 5 |     border-radius: 2px
 6 | 
 7 |   &:before, &:after
 8 |     transition-duration: 10ms
 9 | 
10 |   &:after
11 |     box-shadow: none
12 |     border-radius: 2px
13 |     text-shadow: none
14 |     margin-left: -55px
15 | 


--------------------------------------------------------------------------------
/_sass/components/hljs.sass:
--------------------------------------------------------------------------------
 1 | .hljs-literal,
 2 | .hljs-number,
 3 | .hljs-string,
 4 | .hljs-symbol,
 5 | .hljs-value
 6 |   color: $accent
 7 | 
 8 | .hljs-key,
 9 | .hljs-attribute
10 |   color: darken($accent, 20%)
11 | 
12 | .hljs-keyword,
13 | .hljs-constant
14 |   color: $black
15 | 
16 | .hljs-comment
17 |   color: $gray
18 |   font-style: italic
19 | 
20 | //
21 | // Prism
22 | //
23 | 
24 | .token.comment,
25 | .token.prolog,
26 | .token.doctype,
27 | .token.cdata
28 |   color: $gray
29 |   font-style: italic
30 | 
31 | .token.punctuation
32 |   color: #999
33 | 
34 | .token.property,
35 | .token.tag,
36 | .token.boolean,
37 | .token.number,
38 | .token.constant,
39 | .token.symbol,
40 | .token.deleted
41 |   color: #905
42 | 
43 | .token.selector,
44 | .token.attr-name,
45 | .token.string,
46 | .token.char,
47 | .token.builtin,
48 | .token.inserted
49 |   color: $accent
50 | 
51 | .token.operator,
52 | .token.entity,
53 | .token.url,
54 | .language-css .token.string,
55 | .style .token.string
56 |   color: #a67f59
57 | 
58 | .token.atrule,
59 | .token.attr-value,
60 | .token.keyword
61 |   color: #07a
62 | 
63 | .token.function
64 |   color: #DD4A68
65 | 
66 | .token.regex,
67 | .token.important,
68 | .token.variable
69 |   color: #e90
70 | 
71 | .token.important,
72 | .token.bold
73 |   font-weight: bold
74 | .token.italic
75 |   font-style: italic
76 | 
77 | .token.entity
78 |   cursor: help
79 | 


--------------------------------------------------------------------------------
/_sass/components/next-article.sass:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * .next-article -- lead into the next article
  3 |  */
  4 | 
  5 | .next-article
  6 |   $bg: darken(#8e44ad, 15%)
  7 |   $textcolor: saturate(mix(white, $bg, 85%), 90%)
  8 | 
  9 |   &
 10 |     display: block
 11 |     padding: 0
 12 |     margin-left: 40px
 13 |     margin-right: 40px
 14 |     position: relative
 15 | 
 16 | 
 17 |   &, &:hover, &:focus
 18 |     box-shadow: none
 19 | 
 20 |   &:after
 21 |     content: ''
 22 |     display: block
 23 |     position: absolute
 24 |     left: -20px
 25 |     right: -20px
 26 |     bottom: 0
 27 |     border-bottom: solid 1px $hairline
 28 | 
 29 |   // suppress its hairline
 30 |   & + .about-the-site:before
 31 |     display: none
 32 | 
 33 |   @media (max-width: 768px)
 34 |     margin-left: 0
 35 |     margin-right: 0
 36 | 
 37 |     // remove horizontal line
 38 |     & + .about-the-site:before
 39 |       display: none
 40 | 
 41 |   .container
 42 |     display: block
 43 |     text-align: center
 44 |     padding: 10em 20px
 45 | 
 46 |     @media (min-width: 769px)
 47 |       margin-top: 8em
 48 |       padding: 8em 20px
 49 | 
 50 |   .h3
 51 |     display: block
 52 |     margin: 0 auto auto
 53 |     padding: 0
 54 |     font-size: 2.2em
 55 |     line-height: 1.3em
 56 |     +bold-font
 57 |     color: white
 58 |     transition: all 250ms linear
 59 | 
 60 |     // &:hover > span
 61 |       // box-shadow: inset 0 -2px $accent
 62 |       // text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg
 63 | 
 64 |     @media (max-width: 768px)
 65 |       font-size: 1.5em
 66 | 
 67 |   .h3, .excerpt
 68 |     max-width: $page-width * 0.9
 69 | 
 70 |   .h3 + .excerpt
 71 |     margin-top: 0.5em
 72 | 
 73 |   .excerpt
 74 |     display: block
 75 |     margin-left: auto
 76 |     margin-right: auto
 77 |     font-size: 1em
 78 |     line-height: 1.6em
 79 | 
 80 |   .big-button
 81 |     margin-top: 2em
 82 | 
 83 |   h3 a:hover,
 84 |   h3 a:focus
 85 |     color: $accent
 86 | 
 87 |   .heading
 88 |     display: block
 89 |     +caps-font
 90 |     font-size: 0.7em
 91 |     margin-bottom: 1em
 92 | 
 93 |   .heading:before
 94 |     font-family: Ionicons
 95 |     content: '\f4a8'
 96 |     margin-right: 15px
 97 |     font-size: 16px
 98 |     display: inline-block
 99 |     vertical-align: middle
100 |     color: $accent
101 | 
102 |   .big-button,
103 |   a.big-button
104 |     background: transparent
105 | 
106 |     &, &:visited
107 |       border-color: $accent
108 |       color: white
109 | 
110 |     &:hover, &:focus
111 |       background: $accent
112 |       border-color: transparent
113 | 
114 | @mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
115 |   $w: 1500
116 |   $h: 10
117 |   $textcolor: mix(white, $bg, 75%)
118 |   $notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"
119 | 
120 |   &
121 |     background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
122 |   &:hover, &:focus
123 |     background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
124 |   .excerpt, .heading
125 |     color: $textcolor
126 | 
127 | .next-article
128 |   &
129 |     +recolor-article(#612e76, #5867cc)
130 |   &.-v2
131 |     text-shadow: 0 1px 1px rgba(black, 0.5)
132 |     +recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
133 |   &.-v3
134 |     text-shadow: 0 1px 1px rgba(black, 0.5)
135 |     +recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
136 |   &.-v4
137 |     text-shadow: 0 1px 1px rgba(black, 0.5)
138 |     +recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
139 |   &.-v5
140 |     text-shadow: 0 1px 1px rgba(black, 0.5)
141 |     +recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
142 |   // &.next-article
143 | 


--------------------------------------------------------------------------------
/_sass/components/post-headline.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .post-headline -- H1's of posts
 3 |  */
 4 | 
 5 | .post-headline
 6 |   &
 7 |     margin: 1.5em auto 3em auto
 8 |     text-align: center
 9 | 
10 |   .post-icon
11 |     margin-bottom: 2px
12 | 
13 |   h1
14 |     text-align: center
15 |     margin-bottom: 0
16 |     +headline-font
17 |     +headline-font-size(2.8em, 1.2)
18 |     width: 80%
19 |     margin-left: auto
20 |     margin-right: auto
21 | 
22 |     @media (max-width: 768px)
23 |       +headline-font-size(2em)
24 | 
25 |   .meta
26 |     display: block
27 |     text-align: center
28 |     margin: 0
29 |     margin-top: 1em
30 |     font-weight: normal
31 |     +caps-font
32 |     font-size: 0.8em
33 | 
34 |   .meta .author,
35 |   .meta .date
36 |     margin: 0 5px
37 |     padding-bottom: 2px
38 | 
39 |   .meta a,
40 |   .meta a:visited
41 |     color: $gray
42 | 
43 |   .meta a:hover,
44 |   .meta a:focus
45 |     &, span
46 |       color: $gray
47 | 
48 |     time
49 |       color: $black
50 |       box-shadow: inset 0 -2px $accent
51 | 
52 |   a, a:visited, a:focus, a:hover
53 |     color: $black
54 |     text-decoration: none
55 |     box-shadow: none
56 | 
57 | 


--------------------------------------------------------------------------------
/_sass/components/post-icon.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .post-icon -- category icons
 3 |  */
 4 | 
 5 | $icon-size: 56px
 6 | 
 7 | @mixin iconify($color, $text)
 8 |   &
 9 |     background: $color
10 |     color: lighten($color, 50%)
11 |     box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba($color, 0.2), 1px 3px rgba($color, 0.3)
12 | 
13 |   span:after
14 |     content: $text
15 | 
16 | .post-icon,
17 | abbr.post-icon
18 |   border: 0
19 |   margin: 0
20 |   display: inline-block
21 |   width: $icon-size
22 |   height: $icon-size
23 |   line-height: $icon-size + 2px
24 |   text-align: center
25 |   border-radius: 50%
26 |   color: #aaa
27 |   background: #eee
28 | 
29 |   +body-font
30 |   font-size: 16px
31 |   letter-spacing: 1px
32 | 
33 |   span:after
34 |     content: attr(data-label)
35 |     font-size: 0.9em
36 |     position: relative
37 |     top: -1px
38 | 
39 |   @media (max-width: 480px)
40 |     transform: scale(0.75)
41 | 
42 |   &.-icon-css
43 |     +iconify(#3498db, 'CSS')
44 |     font-size: 14px
45 |     line-height: $icon-size + 2px
46 |   &.-icon-development
47 |     +iconify(#34495e, 'DEV')
48 |     font-size: 14px
49 |     line-height: $icon-size + 2px
50 |   &.-icon-ruby
51 |     +iconify(#e74c3c, 'RB')
52 |     text-indent: 2px
53 |   &.-icon-javascript
54 |     +iconify(#2ecc71, 'JS')
55 |     text-indent: 1px
56 |   &.-icon-productivity
57 |     +iconify(#2ecc71, 'PROD')
58 |     text-indent: 1px
59 | 


--------------------------------------------------------------------------------
/_sass/components/post-index.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .post-index (et al) -- utility classes
 3 |  */
 4 | 
 5 | .post-index
 6 |   &
 7 |     margin: 0 auto 4em auto
 8 |     position: relative
 9 |     padding-top: 4em
10 |     font-size: 0.9em
11 | 
12 |   .container
13 |     overflow: hidden
14 |     max-width: $page-width
15 |     margin: 0 auto
16 | 
17 |   h3
18 |     +caps-font
19 |     color: $gray
20 |     font-size: 1em
21 | 
22 | .post-index-item
23 |   display: block
24 |   overflow: hidden
25 |   padding: 6px 20px
26 |   border-top: solid 1px $hairline
27 | 
28 |   &, &:hover, &:focus
29 |     box-shadow: none
30 | 
31 |   &:hover, &:focus
32 |     .article
33 |       transition: none
34 | 
35 |   .date
36 |     display: block
37 | 
38 |   .date
39 |     width: 100px
40 |     font-size: 0.8em
41 |     color: $gray
42 | 
43 |   @media (min-width: 768px)
44 |     padding-left: 0
45 |     padding-right: 0
46 | 
47 |     .date, .tag
48 |       margin-top: 0.2em
49 | 
50 |     .date, article
51 |       float: left
52 | 
53 |     .tag
54 |       float: right
55 | 
56 |   .article
57 |     color: $text
58 |     margin-right: 3px
59 |     transition: all 100ms linear
60 | 
61 |   &:hover .article
62 |     color: $accent
63 | 
64 |   &:nth-of-type(1) .article,
65 |   &:nth-of-type(2) .article,
66 |   &:nth-of-type(3) .article,
67 |   &:nth-of-type(4) .article
68 |     +bold-font
69 | 
70 |   .tag
71 |     color: $gray
72 |     font-weight: normal
73 |     font-size: 0.8em
74 | 


--------------------------------------------------------------------------------
/_sass/components/post-list.sass:
--------------------------------------------------------------------------------
 1 | .post-item
 2 |   max-width: $page-width
 3 |   margin: 0 auto
 4 | 
 5 | .post-list
 6 |   margin: 40px auto
 7 |   padding: 20px
 8 | 
 9 |   @media (max-width: 768px)
10 |     margin: 0 auto
11 | 
12 | .post-list > .post-item:not(:first-child)
13 |   &:before
14 |     content: ''
15 |     display: block
16 |     width: 150px
17 |     height: 1px
18 |     background: $hairline
19 |     margin: 7em auto
20 | 
21 |     @media (max-width: 768px)
22 |       margin: 4em auto
23 | 
24 | 


--------------------------------------------------------------------------------
/_sass/components/site-header.sass:
--------------------------------------------------------------------------------
 1 | 
 2 | .site-header
 3 |   text-align: center
 4 |   padding: 0 20px
 5 | 
 6 |   .container
 7 |     padding: 15px 20px
 8 |     font-size: 0.9em
 9 |     color: rgba($gray, 0.6)
10 |     border-bottom: solid 1px $hairline
11 | 
12 |   em
13 |     +italic-font
14 |     +italic-font-size(1.1em)
15 |     font-size: 1.1em
16 |     color: $text
17 | 
18 | 


--------------------------------------------------------------------------------
/_sass/components/social-list.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .social-list -- social share icons
 3 |  */
 4 | 
 5 | .social-list
 6 |   &, li
 7 |     margin: 0
 8 |     padding: 0
 9 | 
10 |   &
11 |     display: block
12 |     text-align: center
13 |     width: 100%
14 |     margin-top: 2em
15 | 
16 |     @media (min-width: 768px)
17 |       margin-top: 4em
18 | 
19 |   &.-top
20 |     margin-top: -2em
21 | 
22 |     @media (min-width: 768px)
23 |       margin-top: -1em
24 | 
25 |   li
26 |     display: inline-block
27 | 
28 |   a
29 |     display: inline-block
30 |     padding: 6px
31 |     text-align: center
32 |     box-shadow: none
33 | 
34 |   a:before, a:after
35 |     transition: all 100ms linear
36 | 
37 |   .text
38 |     display: none
39 | 
40 |   a:before
41 |     font-family: 'Ionicons'
42 |     font-weight: normal
43 |     font-style: normal
44 |     font-size: 18px
45 |     width: 40px
46 |     height: 40px
47 |     line-height: 40px
48 |     display: inline-block
49 |     text-align: center
50 |     border: solid 2px transparent
51 |     border-radius: 50%
52 | 
53 |   @mixin socialiconify($color, $content, $filled)
54 |     &
55 |       color: darken($lightgray, 10%)
56 | 
57 |     &:hover,
58 |     &:focus
59 |       color: $color
60 |     &:before
61 |       content: $filled
62 |     &:hover:before,
63 |     &:focus:before
64 |       border-color: $color
65 |       content: $filled
66 | 
67 |   .facebook a
68 |     +socialiconify(#4c66a4, '\f230', '\f231')
69 |   .twitter a
70 |     +socialiconify(dodgerblue, '\f242', '\f243')
71 |   .googleplus a
72 |     +socialiconify(#f53, '\f234', '\f235')
73 | 
74 | 


--------------------------------------------------------------------------------
/_sass/elements/body.sass:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * html base (html, body)
  3 |  */
  4 | 
  5 | *
  6 |   +antialias
  7 | 
  8 | html
  9 |   font-size: $body-font-size
 10 |   line-height: $body-line-height
 11 |   background: $bg
 12 |   color: $text
 13 | 
 14 |   @media (max-width: 768px)
 15 |     font-size: floor($body-font-size * 14/17)
 16 | 
 17 | html
 18 |   transition: opacity 200ms linear
 19 |   opacity: 1
 20 | 
 21 | html, input, textarea, td, th
 22 |   +body-font
 23 | 
 24 | html, body
 25 |   overflow-x: hidden
 26 | 
 27 | /*
 28 |  * fouc prevention
 29 |  */
 30 | 
 31 | body
 32 |   transition: opacity 100ms linear
 33 | 
 34 | html.no-js *
 35 |   opacity: 0
 36 | 
 37 | /*
 38 |  * basic styles (a, p, img...)
 39 |  */
 40 | 
 41 | a, a:visited
 42 |   color: $text
 43 |   text-decoration: none
 44 |   box-shadow: inset 0 -1px rgba(#888, 0.3)
 45 |   transition: all 100ms linear
 46 | 
 47 | a:focus, a:hover
 48 |   box-shadow: inset 0 -2px $accent
 49 |   color: $black
 50 | 
 51 | strong, b
 52 |   &, a, a:visited
 53 |     color: $black
 54 | 
 55 | h3, p, ul, ol
 56 |   margin: 1.5em 0
 57 | 
 58 | /*
 59 |  * iframes
 60 |  */
 61 | 
 62 | p > iframe
 63 |   margin: 0 auto
 64 |   display: block
 65 | 
 66 | /*
 67 |  * lists
 68 |  */
 69 | 
 70 | ul, ol
 71 |   padding-left: 1.5em
 72 | 
 73 | ul
 74 |   &
 75 |     list-style: none
 76 | 
 77 |   > li
 78 |     position: relative
 79 | 
 80 |   > li:before
 81 |     content: ''
 82 |     display: block
 83 |     position: absolute
 84 |     left: -1.4em
 85 |     top: 0
 86 |     margin-top: 0.7em
 87 |     width: 4px
 88 |     height: 4px
 89 |     border-radius: 50%
 90 |     border: solid 2px $lightgray
 91 | 
 92 |     @media (max-width: 768px)
 93 |       width: 3px
 94 |       height: 3px
 95 | 
 96 | /*
 97 |  * headings
 98 |  */
 99 | 
100 | h2
101 |   &, a, a:visited
102 |     color: $black
103 | 
104 | h2
105 |   text-align: center
106 |   +headline-font
107 |   +headline-font-size(2em, 1.4)
108 |   margin: 2em auto 0 auto
109 |   @media (max-width: 768px)
110 |     +headline-font-size(1.6em)
111 | 
112 | @media (min-width: 769px)
113 |   h2:before,
114 |   h2:after
115 |     content: ''
116 |     display: inline-block
117 |     vertical-align: middle
118 |     width: 46px
119 |     height: 1px
120 |     background: $lightgray
121 |     margin: 0 30px
122 | 
123 | h3
124 |   +bold-font
125 |   +bold-font-size(1.1em)
126 |   margin-top: 2em
127 | 
128 |   &, a, a:visited
129 |     color: $black
130 | 
131 |   @media (max-width: 768px)
132 |     margin-top: 1.5em
133 | 
134 | h3 + p
135 |   margin-top: -1.7em
136 | 
137 | /*
138 |  * images
139 |  */
140 | 
141 | p > img:first-child:last-child
142 |   display: block
143 |   margin: 0 auto
144 |   max-width: 100%
145 | 
146 | code
147 |   +mono-font
148 |   +mono-font-size(0.9em)
149 | 
150 | hr
151 |   width: 200px
152 |   height: 1px
153 |   border: 0
154 |   background: $lightgray
155 |   margin: 3em auto
156 |   display: block
157 | 
158 | 


--------------------------------------------------------------------------------
/_sass/elements/code.sass:
--------------------------------------------------------------------------------
  1 | $term-border: mix($accent, white, 50%)
  2 | 
  3 | /*
  4 |  * pre > code -- code blocks
  5 |  */
  6 | 
  7 | pre > code
  8 |   +mono-font
  9 |   +mono-font-size(0.82em)
 10 |   color: $text
 11 |   padding-right: 20px
 12 |   // box-shadow: inset 1px 1px rgba(black, 0.06)
 13 | 
 14 | pre
 15 |   padding: 20px 50px
 16 |   border-radius: 4px
 17 |   background: $wash
 18 |   margin: 2.2em -50px
 19 |   line-height: 1.2em
 20 | 
 21 |   @media (min-width: 768px)
 22 |     border-top: solid 1px #eef3fa
 23 |     border-bottom: solid 1px #c7d7ee
 24 |     border-radius: 4px
 25 | 
 26 |   @media (max-width: 768px)
 27 |     padding: 20px
 28 |     margin: 2em -20px
 29 |     background: darken($wash, 3%)
 30 | 
 31 |   @media (max-width: 660px)
 32 |     border-radius: 0
 33 | 
 34 | pre + pre
 35 |   margin-top: -1.5em
 36 | 
 37 | pre.medium
 38 |   > code
 39 |     font-size: 1em
 40 |   @media (min-width: 768px)
 41 |     padding-top: 30px
 42 |     padding-bottom: 30px
 43 | 
 44 | pre.large
 45 |   > code
 46 |     font-size: 1.1em
 47 |     line-height: 1.4em
 48 |   @media (min-width: 768px)
 49 |     padding-top: 30px
 50 |     padding-bottom: 30px
 51 | 
 52 | pre.terminal,
 53 | pre.light
 54 |   &
 55 |     background: white
 56 |     border: solid 1px $term-border
 57 |     position: relative
 58 | 
 59 | pre.light
 60 |   background: #fdfdff
 61 | 
 62 | pre.terminal
 63 |   &
 64 |     padding-top: 56px
 65 | 
 66 |   &.large
 67 |     padding-top: 65px
 68 | 
 69 |   &:before
 70 |     content: ''
 71 |     display: block
 72 |     height: 34px
 73 |     line-height: 34px
 74 |     background: white
 75 |     border-bottom: solid 1px $term-border
 76 |     border-top-left-radius: 3px
 77 |     border-top-right-radius: 3px
 78 |     position: absolute
 79 |     top: 0
 80 |     left: 0
 81 |     right: 0
 82 |     +bold-font
 83 | 
 84 |   &:after
 85 |     content: ''
 86 |     position: absolute
 87 |     display: block
 88 |     width: 4px
 89 |     height: 4px
 90 |     border-radius: 50%
 91 |     left: 15px
 92 |     top: 15px
 93 |     font-size: 20px
 94 |     background-color: $term-border
 95 |     box-shadow: 20px 0 $term-border, 40px 0 $term-border
 96 | 
 97 |   @media (max-width: 768px)
 98 |     margin-left: 0
 99 |     margin-right: 0
100 | 
101 | pre + pre
102 |   margin-top: -1.7em
103 | 
104 | @media (min-width: 769px)
105 |   pre.cursor > code > :last-child:after
106 |     content: ''
107 |     display: inline-block
108 |     width: 3px
109 |     height: 1em
110 |     transform: scaleY(1.5) translateY(0.1em)
111 |     margin-left: 0.4em
112 |     background-color: $accent
113 |     -webkit-animation: blink 700ms steps(2,end) infinite
114 |     -moz-animation: blink 700ms steps(2,end) infinite
115 |     animation: blink 700ms steps(2,end) infinite
116 | 
117 | h3 + pre,
118 | h3 + table
119 |   margin-top: -1em
120 | 


--------------------------------------------------------------------------------
/_sass/elements/table.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * table
 3 |  */
 4 | 
 5 | table
 6 |   min-width: 100%
 7 |   margin-top: 2em
 8 |   margin-bottom: 2em
 9 |   font-size: 0.9em
10 |   border-bottom: solid 1px $gray
11 | 
12 | thead > tr:first-child > th,
13 | thead > tr:first-child > td,
14 | tbody > tr:first-child > th,
15 | tbody > tr:first-child > td
16 |   border-top: solid 1px $gray
17 | 
18 | td, th
19 |   text-align: left
20 |   border-top: solid 1px $hairline
21 |   padding: 8px 10px
22 | 
23 | th
24 |   +bold-font
25 |   color: $black
26 | 
27 | td:first-child,
28 | th:first-child
29 |   text-align: left
30 |   padding-left: 0
31 | 
32 | td:last-child,
33 | th:last-child
34 |   padding-right: 0
35 | 
36 | table.no-head
37 |   thead
38 |     display: none
39 | 
40 | table.shortcuts
41 |   &
42 |     table-layout: fixed
43 | 
44 |   thead
45 |     display: none
46 | 
47 |   th:nth-child(1), td:nth-child(1)
48 |     width: 25%
49 | 
50 |   th:nth-child(2), td:nth-child(2)
51 |     width: 75%
52 | 
53 |   td:first-child > code
54 |     background: #fcfcfc
55 |     padding: 5px 10px
56 |     border-radius: 2px
57 | 
58 | table.lite-headings
59 |   &
60 |     border-bottom: solid 1px mix($gray, $lightgray, 50%)
61 |     
62 |   th
63 |     color: mix($gray, $lightgray, 50%)
64 |     font-size: 0.9em
65 | 
66 |   thead > tr:first-child > td,
67 |   thead > tr:first-child > th
68 |     border-top: solid 1px mix($gray, $lightgray, 50%)
69 | 
70 |   tbody > tr:first-child > td,
71 |   tbody > tr:first-child > th
72 |     border-top: solid 1px $hairline
73 | 
74 | 


--------------------------------------------------------------------------------
/_sass/helpers/blink.sass:
--------------------------------------------------------------------------------
 1 | @keyframes blink
 2 |   0%
 3 |     opacity: 0
 4 |   100%
 5 |     opacity: 1
 6 | 
 7 | @-webkit-keyframes blink
 8 |   0%
 9 |     opacity: 0
10 |   100%
11 |     opacity: 1
12 | 


--------------------------------------------------------------------------------
/_sass/helpers/general.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .center (et al) -- utility classes
 3 |  */
 4 | 
 5 | .center
 6 |   text-align: center
 7 | 
 8 | .spaced
 9 |   @media (min-width: 769px)
10 |     margin-top: 4em
11 |     margin-bottom: 4em
12 | 
13 | .spaced-more
14 |   @media (min-width: 769px)
15 |     margin-top: 6em
16 |     margin-bottom: 6em
17 | 
18 | .spaced-less
19 |   @media (min-width: 769px)
20 |     margin-top: 2em
21 |     margin-bottom: 2em
22 | 
23 | .wide
24 |   @media (min-width: 920px)
25 |     width: 140%
26 |     margin-left: -25%
27 | 
28 | 


--------------------------------------------------------------------------------
/_sass/helpers/margins.sass:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * .top/.bottom -- margin helpers
 3 |  */
 4 | 
 5 | .top-collapse-0
 6 |   margin-top: 0
 7 | .top-collapse-1
 8 |   margin-top: -1em
 9 | .top-collapse-2
10 |   margin-top: -2em
11 | .top-collapse-4
12 |   margin-top: -4em
13 | 
14 | .top-space-0
15 |   margin-top: 0
16 | .top-space-1
17 |   margin-top: 1em
18 | .top-space-2
19 |   margin-top: 2em
20 | .top-space-4
21 |   margin-top: 2em
22 |   @media (min-width: 769px)
23 |     margin-top: 4em
24 | 
25 | .bottom-collapse-0
26 |   margin-bottom: 0
27 | .bottom-collapse-1
28 |   margin-bottom: -1em
29 | .bottom-collapse-2
30 |   margin-bottom: -2em
31 | .bottom-collapse-4
32 |   margin-bottom: -4em
33 | 
34 | .bottom-space-0
35 |   margin-bottom: 0
36 | .bottom-space-1
37 |   margin-bottom: 1em
38 | .bottom-space-2
39 |   margin-bottom: 2em
40 | .bottom-space-4
41 |   margin-bottom: 2em
42 |   @media (min-width: 769px)
43 |     margin-bottom: 4em
44 | 


--------------------------------------------------------------------------------
/_sass/style.sass:
--------------------------------------------------------------------------------
 1 | // base colors
 2 | $text:        #555
 3 | $black:       #151515
 4 | $bg:          #fff
 5 | $wash:        #f4f6f8
 6 | 
 7 | // grays
 8 | $gray:        #939aa1
 9 | $lightgray:   #c0d3da
10 | $hairline:    #eef3fa
11 | 
12 | // accents
13 | $accent:      #1ea3ff
14 | $accent2:     #f53
15 | 
16 | // metrics
17 | $page-width:  620px
18 | 
19 | @import url('//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
20 | @import url('//cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css')
21 | 
22 | @import 'base/utils'
23 | @import 'base/typography'
24 | @import 'base/normalize'
25 | 
26 | @import 'elements/body'
27 | @import 'elements/table'
28 | @import 'elements/code'
29 | 
30 | @import 'components/about-the-site'
31 | @import 'components/big-button'
32 | @import 'components/brief-intro'
33 | @import 'components/full-image'
34 | @import 'components/hint'
35 | @import 'components/hljs'
36 | @import 'components/next-article'
37 | @import 'components/post-headline'
38 | @import 'components/post-icon'
39 | @import 'components/post-index'
40 | @import 'components/post-list'
41 | @import 'components/site-header'
42 | @import 'components/social-list'
43 | 
44 | @import 'helpers/general'
45 | @import 'helpers/margins'
46 | @import 'helpers/blink'
47 | 


--------------------------------------------------------------------------------
/_trash/2015-05-20-rails-i18n-best-practices.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Rails I18n best practices
  3 | tags: [Ruby, Rails]
  4 | description: Get the most out of localizing your Rails app.
  5 | ---
  6 | 
  7 | Rails gives us [localization features](http://guides.rubyonrails.org/i18n.html) via the rails-i18n gem. While the Rails guide describes the technical details on how to use it, it doesn't prescribe any guidelines on how to name and sort your localization strings. Here's my take on how a project's I18n strings should be sorted out.
  8 | {:.brief-intro.center}
  9 | 
 10 | * * * *
 11 | 
 12 | ### Quote your strings
 13 | While the YAML format is liberal and quotation marks aren't needed, the consistency is always welcome. It also makes it less ambiguous for non-developers who may edit the YAML file.
 14 | 
 15 | ```coffee
 16 | en:
 17 |   posts:
 18 |     index:
 19 |       title: "Blog posts"
 20 |       description: "These are the latest posts in the blog."
 21 | ```
 22 | 
 23 | ### Don't add punctuation
 24 | Some strings end in `:`. Don't place them in the YAML file. This will allow for the strings to be reusable later on.
 25 | 
 26 | ```rb
 27 | t('.categories') + ":"
 28 | ```
 29 | 
 30 | ### Group by controller and action
 31 | Place your page's strings under their respective `controller` and `action` names. This allows to you take advantage of Rails's shortcuts. Also, always name your primary title as `title`.
 32 | 
 33 | ```rb
 34 | # looks up 'posts.index.title', if you're on the posts#index view
 35 | t('.title')
 36 | ```
 37 | 
 38 | ### Group strings for partials
 39 | The same concept should apply for partials. You can also use the `t('.login')` shortcut inside partial views.
 40 | 
 41 | ```coffee
 42 | en:
 43 |   shared:
 44 |     nav:
 45 |       back_to_home: "Back to home"
 46 |       login: "Log in"
 47 | ```
 48 | 
 49 | ### Avoid top-level strings
 50 | Don't place strings on the top level such as `t('and')`. Place them on a parent, even an arbitrary one. If you can't think of a parent name, use `common`.
 51 | 
 52 | ```coffee
 53 | en:
 54 |   actions:
 55 |     submit: "Submit"
 56 |     add: "Add"
 57 |     delete: "Delete"
 58 |     login: "Log in"
 59 |   common:
 60 |     or: "or"
 61 |     and: "and"
 62 | ```
 63 | 
 64 | ### Avoid over nesting
 65 | Prefer to nest with just one level. Overly-complicated nesting can seem very arbitrary and confusing.
 66 | 
 67 | ```coffee
 68 | # Avoid
 69 | en:
 70 |   user:
 71 |     mail:
 72 |       status:
 73 |         delivered: "Delivered"
 74 |         read: "Read"
 75 | ```
 76 |   
 77 | ```coffee
 78 | # Better
 79 | en:
 80 |   mail_status:
 81 |     delivered: "Delivered"
 82 |     read: "Read"
 83 | ```
 84 | {:.light}
 85 | 
 86 | ### Familiarize yourself with defaults
 87 | The default locale file is available under rails-i18n. [Read it](https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/en.yml).
 88 |   
 89 | 
 90 | <br>
 91 | 
 92 | ## Time and date
 93 | 
 94 | ### Don't use .strftime
 95 | Use i18n to format timestamps. Define your time formats in `time.formats`. Listed below are the default time formats available in Rails.
 96 | 
 97 | ```rb
 98 | l(Time.now, format: :short)
 99 | ```
100 | {:.light}
101 | 
102 | ```coffee
103 | en:
104 |   time:
105 |     formats:
106 |       default: "%a, %d %b %Y %H:%M:%S %z"
107 |       short: "%d %b %H:%M"
108 | ```
109 | 
110 | ### Same with dates
111 | The `I18n.l` method also supports dates. Also, when creating new formats, add comments on what they should look like to help your teammates along.
112 | 
113 | ```rb
114 | l(Date.today, format: :long)
115 | ```
116 | {:.light}
117 | 
118 | ```yml
119 | en:
120 |   date:
121 |     formats:
122 |       default: "%Y-%m-%d" # 2015-06-25
123 |       long: "%B %d, %Y"   # June 25, 2015
124 |       short: "%b %d"      # Jun 25
125 | ```
126 | 
127 | <br>
128 | 
129 | ## Forms
130 | 
131 | ### Use ActiveRecord errors
132 | The Rails method [full_messages](http://devdocs.io/rails/activemodel/errors#method-i-full_messages) looks up in predefined locations in your locale file. Take advantage of them. See [the cheatsheet](http://ricostacruz.com/cheatsheets/rails-i18n.html) for more.
133 | 
134 | ```rb
135 | person = Person.create
136 | person.errors.full_messages
137 | #=> ["Name is too short (minimum is 5 characters)",
138 | #    "Name can't be blank", "Email can't be blank"]
139 | ```
140 | {:.light}
141 | 
142 | ```
143 | activerecord.errors.models.[model_name].attributes.[attribute_name].[error]
144 | activerecord.errors.models.[model_name].[error]
145 | activerecord.errors.messages.[error]
146 | errors.attributes.[attribute_name].[error]
147 | errors.messages.[error]
148 | ```
149 | 
150 | ### Use form labels
151 | There are also conventions on where [f.label](http://devdocs.io/rails/actionview/helpers/formbuilder#method-i-label) will look up labels.
152 | 
153 | ```rb
154 | form_for @post do
155 |   f.label :body
156 | ```
157 | {:.light}
158 | 
159 | ```coffee
160 | helpers:
161 |   # helpers.label.<model>.<field>
162 |   label:
163 |     post:
164 |       body: "Your body text"
165 | ```
166 | 


--------------------------------------------------------------------------------
/_trash/2015-06-04-rscss-alternate-naming.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Alternate naming conventions in RSCSS
 3 | description: A lot of people have adopted RSCSS with different naming conventions.
 4 | tags: [CSS]
 5 | ---
 6 | 
 7 | description: A lot of people have adopted [RSCSS] with different naming conventions.
 8 | 
 9 | ### Single-word components
10 | 
11 | ```
12 | .component
13 | .component > .element
14 | .component.-modifier
15 | ```
16 | 
17 | ### PCSS
18 | 
19 | ```
20 | .component
21 | .multiwordcomponent
22 | .component-element
23 | ```
24 | 
25 | Example:
26 | 
27 | ```
28 | .searchbar
29 | .searchbar-textbox
30 | .searchbar-button
31 | .searchbar.-compact
32 | ```
33 | 
34 | [RSCSS]: http://rscss.io
35 | 


--------------------------------------------------------------------------------
/_trash/aoeu.md:
--------------------------------------------------------------------------------
1 | ```
2 | plate() { (cd $1 >/dev/null && git archive HEAD) | tar xv; }
3 | ```
4 | 
5 | tar cf - --exclude .git .
6 | 
7 | :+1:
8 | 


--------------------------------------------------------------------------------
/_trash/clean-up-commands-in-shell-scripts.md:
--------------------------------------------------------------------------------
1 | ```bash
2 | tmp=$(mktemp) && trap 'rm -rf $tmp' EXIT HUP INT QUIT TERM
3 | ```
4 | 
5 | 


--------------------------------------------------------------------------------
/_trash/creating-streams.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Creating streams
 3 | ---
 4 | 
 5 | Line by line reader using through2 and split2
 6 | 
 7 | ```js
 8 | var through2 = require('through2');
 9 | var split2 = require('split2');
10 | 
11 | fs.createReadStream(file)
12 |   .pipe(split2())
13 |   .pipe(parse())
14 |   .pipe(through2(chunk, _, done) {
15 |     console.log(chunk);
16 |     done();
17 |   });
18 | 
19 | function parse() {
20 |   through2.obj(onLine, onEnd);
21 | 
22 |   function onLine(line, _, callback) {
23 |     this.push(...);
24 |     callback();
25 |   }
26 | 
27 |   function onEnd(callback) {
28 |     this.push(...);
29 |     callback();
30 |   }
31 | }
32 | ```
33 | 
34 | 


--------------------------------------------------------------------------------
/_trash/how-js-testing-works.md:
--------------------------------------------------------------------------------
 1 | We've seen test assertions like so:
 2 | 
 3 | ```js
 4 | it('should fail', function () {
 5 |   expect("hello").to.eql("world");
 6 | });
 7 | ```
 8 | 
 9 | ### What expect() is
10 | It's merely something that throws an exception.
11 | 
12 | ```js
13 | try {
14 |   var expect = require('chai').expect;
15 |   expect("hello").to.eql("world");
16 | } catch (e) {
17 |   console.log(e);
18 | }
19 | ```
20 | 
21 | You can expect the built-in [assert](https://iojs.org/api/assert.html) module of Node.js and io.js to work the same:
22 | 
23 | ```js
24 | try {
25 |   var assert = require('assert');
26 |   assert.equal("hello", "world");
27 | } catch (e) {
28 |   console.log(e);
29 | }
30 | ```
31 | 
32 | ```
33 | // result:
34 | { [AssertionError: 'hello' == 'world']
35 |   name: 'AssertionError',
36 |   actual: 'hello',
37 |   expected: 'world',
38 |   operator: '==',
39 |   message: '\'hello\' == \'world\'',
40 |   generatedMessage: true }
41 | ```
42 | 


--------------------------------------------------------------------------------
/_trash/traversee-du-desert.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Traversée du désert
 3 | tags: []
 4 | description: ...
 5 | ---
 6 | 
 7 | Today I learned of this French expression. It literally translates to "crossing the desert."
 8 | {:.brief-intro.center}
 9 | 
10 | <p class='wide spaced'><iframe width="720" height="405" src="https://www.youtube.com/embed/tILlZRLhBJE" frameborder="0" allowfullscreen></iframe></p>
11 | 
12 | He is not loose and glaucous and the slippery house is promising you thrice. We will be never them. Twice, they felt. A dish of the day was the point. An eel spoke a submissive orange to you, but heavily, the hope isn't usually counter-productive. Early, he is first affirmative. Eventually, nothing will be a filthy elk after a bison will be unkempt or him.
13 | 


--------------------------------------------------------------------------------
/_trash/unite.md:
--------------------------------------------------------------------------------
 1 | Unite.vim is one of those things I keep on trying but eventually give up on because it's slow.
 2 | 
 3 | ### Attempt 1
 4 | 
 5 | ```vim
 6 | nnmap <C-p> :<C-u>Unite -start-insert file_rec/async<CR>
 7 | ```
 8 | 
 9 | ### Problems
10 | 
11 | * it shows full paths.
12 | * matching is not fuzzy.
13 | * hidden files are shown.
14 | 
15 | Solutions:
16 | 
17 | * Use converter_relative_word
18 | * Use matcher_fuzzy
19 | * Use hide_hidden_files
20 | 
21 | ### Problem
22 | 
23 | * gitignore is not handled
24 | * use ag
25 | 
26 | ### Problem
27 | 
28 | * sorting sucks
29 | * Use selecta
30 | 
31 | ### Problem
32 | 
33 | It's slow. Use resume
34 | 
35 | 


--------------------------------------------------------------------------------
/assets/bg/Makefile:
--------------------------------------------------------------------------------
 1 | dl := dl() { wget $$1 -O $$2; mogrify -resize 1100x -quality 70 -strip $$2; ls -la $$2; }; dl
 2 | all: $(wildcard *.jpg)
 3 | 
 4 | stairs.jpg:
 5 | 	@# http://jaymantri.com/post/119561577503/download
 6 | 	${dl} "http://40.media.tumblr.com/5f3f3d2d2f4a81c3c60500b62c198eed/tumblr_noq5zbZF011qfirfao1_1280.jpg" $@
 7 | 
 8 | roughwall.jpg:
 9 | 	@# http://jaymantri.com/post/119559858023/download
10 | 	${dl} http://s169923.gridserver.com/images/roughwall.jpg $@
11 | 
12 | pebbles.jpg:
13 | 	@# http://jaymantri.com/post/118956931828/download
14 | 	${dl} http://41.media.tumblr.com/fe8834029a3ddb2b6db08bad2288dbb4/tumblr_noco7zrrF31qfirfao1_1280.jpg $@
15 | 
16 | woodfloor.jpg:
17 | 	@# http://jaymantri.com/post/117783615373/download#notes
18 | 	${dl} http://40.media.tumblr.com/e347691fe1217667582940869044d344/tumblr_nnmqtgZFzv1qfirfao1_1280.jpg $@
19 | 
20 | rosebench.jpg:
21 | 	@# http://jaymantri.com/post/117170705152/download#notes
22 | 	${dl} http://40.media.tumblr.com/48ac38622fd674a6d0ce70b68a7dd336/tumblr_nn8x5dIUIx1qfirfao1_1280.jpg $@
23 | 


--------------------------------------------------------------------------------
/assets/bg/pebbles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/assets/bg/pebbles.jpg


--------------------------------------------------------------------------------
/assets/bg/rosebench.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/assets/bg/rosebench.jpg


--------------------------------------------------------------------------------
/assets/bg/roughwall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/assets/bg/roughwall.jpg


--------------------------------------------------------------------------------
/assets/bg/stairs.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/assets/bg/stairs.jpg


--------------------------------------------------------------------------------
/assets/bg/woodfloor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/assets/bg/woodfloor.jpg


--------------------------------------------------------------------------------
/assets/script.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Next article backgrounds
 3 |  */
 4 | 
 5 | !(function () {
 6 |   var articles = document.querySelectorAll('.next-article')
 7 |   for (var i = 0; i < articles.length; i++) {
 8 |     var article = articles[i]
 9 |     var id = article.getAttribute('data-id')
10 |     var n = (hashify(id) % 6) + 1
11 |     article.className += ' -v' + n
12 |   }
13 | 
14 |   function hashify(str) {
15 |     var hash = 0, i, chr, len
16 |     if (str.length === 0) return hash
17 |     for (i = 0, len = str.length; i < len; i++) {
18 |       chr   = str.charCodeAt(i)
19 |       hash  = ((hash << 5) - hash) + chr
20 |       hash |= 0
21 |     }
22 |     return Math.abs(hash)
23 |   }
24 | })()
25 | 
26 | /*
27 |  * Unorphan
28 |  */
29 | 
30 | !(function () {
31 |   unorphan('h1, h2, h3, p, li, .unorphan')
32 | })()
33 | 
34 | /*
35 |  * Syntax highlight
36 |  */
37 | 
38 | !(function () {
39 |   // hljs.initHighlightingOnLoad()
40 |   Prism.highlightAll()
41 | })()
42 | 


--------------------------------------------------------------------------------
/assets/style.sass:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 | @import 'style'
4 | 


--------------------------------------------------------------------------------
/atom.xml:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: null
 3 | ---
 4 | <?xml version="1.0" encoding="utf-8"?>
 5 | <feed xmlns="http://www.w3.org/2005/Atom">
 6 |   <title><![CDATA[{{ site.title | cdata_escape }}]]></title>
 7 |   <link href="{{ site.url }}/atom.xml" rel="self"/>
 8 |   <link href="{{ site.url }}/"/>
 9 |   <updated>{{ site.time | date_to_xmlschema }}</updated>
10 |   <id>{{ site.url }}/</id>
11 |   {% if site.author %}
12 |   <author>
13 |     <name><![CDATA[{{ site.author | strip_html }}]]></name>
14 |     {% if site.email %}<email><![CDATA[{{ site.email }}]]></email>{% endif %}
15 |   </author>
16 |   {% endif %}
17 |   <generator uri="http://jekyllrb.com/">Jekyll</generator>
18 | 
19 |   {% assign posts = site.posts | where: "secret", false %}
20 |   {% for post in posts limit: 20 %}
21 |   <entry>
22 |     <title type="html"><![CDATA[{% if site.titlecase %}{{ post.title | titlecase | cdata_escape }}{% else %}{{ post.title | cdata_escape }}{% endif %}]]></title>
23 |     {% if post.authors.size > 0 %}
24 |       {% for author in site.authors %}
25 |         {% if post.authors contains author.name %}
26 |           <author>
27 |             <name><![CDATA[{{ author.name | strip_html }}]]></name>
28 |           </author>
29 |         {% endif %}
30 |       {% endfor %}
31 |     {% else %}
32 |       <author>
33 |         <name><![CDATA[{{ post.author | strip_html }}]]></name>
34 |       </author>
35 |     {% endif %}
36 |     <link href="{{ site.url }}{{ post.url }}"/>
37 |     <updated>{{ post.date | date_to_xmlschema }}</updated>
38 |     <id>{{ site.url }}{{ post.id }}</id>
39 |     <content type="html"><![CDATA[{{ post.content | expand_urls: site.url | cdata_escape }}]]></content>
40 |   </entry>
41 |   {% endfor %}
42 | </feed>
43 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | # This is a docker manifest for development, NOT production.
 2 | version: '3'
 3 | 
 4 | services:
 5 |   web:
 6 |     build:
 7 |       context: .
 8 |       dockerfile: Dockerfile-dev
 9 |     volumes:
10 |       - .:/app
11 |       - rubygems:/usr/local/bundle
12 |     ports:
13 |       - '25600:25600'
14 |     command: ['bundle', 'exec', 'jekyll', 'serve', '--safe', '--watch', '--port', '25600', '--host', '0.0.0.0']
15 | 
16 | volumes:
17 |   rubygems:
18 | 


--------------------------------------------------------------------------------
/images/alfred-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/alfred-dark.png


--------------------------------------------------------------------------------
/images/cloudfront-reference.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/cloudfront-reference.png


--------------------------------------------------------------------------------
/images/iojs-linking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/iojs-linking.png


--------------------------------------------------------------------------------
/images/keep-missions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/keep-missions.png


--------------------------------------------------------------------------------
/images/ligatures.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/ligatures.png


--------------------------------------------------------------------------------
/images/mocha-istanbul.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/mocha-istanbul.png


--------------------------------------------------------------------------------
/images/office-fonts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/office-fonts.png


--------------------------------------------------------------------------------
/images/osx-keyboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/osx-keyboard.png


--------------------------------------------------------------------------------
/images/side-quest-example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/side-quest-example.jpg


--------------------------------------------------------------------------------
/images/skyfonts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/skyfonts.png


--------------------------------------------------------------------------------
/images/tmux-repeat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/tmux-repeat.gif


--------------------------------------------------------------------------------
/images/unite-ctags.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/til-2013/501daa444cea48c83cbdc5230abfc267ae6c5338/images/unite-ctags.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: landing
3 | type: blog
4 | full_title: "Today I Learned — web development musings semi-daily"
5 | description: "TIL - a collection of things I learned on my day-to-day web development work."
6 | ---
7 | 


--------------------------------------------------------------------------------
/reference/authors.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Authors
3 | date: 1980-01-01
4 | ---
5 | 
6 | Put authors in `_authors/`. This allows you to pull their bio's, author URL's and such
7 | 
8 | 


--------------------------------------------------------------------------------
/reference/code.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Code blocks
 3 | date: 1980-01-01
 4 | ---
 5 | 
 6 | ### Code block modifiers
 7 | Applies to code blocks (`pre`).
 8 | 
 9 | | Class | Description |
10 | |:-----|-----:|
11 | | `.terminal` | Terminal style |
12 | | `.light` | Simpler light style |
13 | | `.large` | Large font |
14 | | `.cursor` | Has a cursor at the end |
15 | {:.no-head}
16 | 
17 | <br>
18 | 
19 | ## Examples
20 | 
21 | ```ruby
22 | def method_missing(name, args, &blk)
23 |   yield name
24 | end
25 | ```
26 | 
27 | ```ruby
28 | def method_missing(name, args, &blk)
29 |   yield name
30 | end
31 | ```
32 | {:.light}
33 | 
34 | ### Large terminal
35 | Using `.large` and `.terminal` together
36 | 
37 | ```
38 | gem install rails
39 | ```
40 | {:.terminal.large}
41 | 
42 | 


--------------------------------------------------------------------------------
/reference/general.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: General
 3 | date: 1980-01-01
 4 | ---
 5 | 
 6 | Brief paragraph. Due to a Portuguese day, a juicy coconut was not never the blue 
 7 | clam since a dish of the day did smile. The diagonal nightingale can change 
 8 | herself to him while a rock is noticing. It was not white once. A calling of the 
 9 | wild is nowadays hot.
10 | {:.brief-intro.center}
11 | 
12 | ## Generic modifiers
13 | 
14 | ### Generic block modifiers
15 | These can apply to any block (above, or `table`, `p`, etc)
16 | 
17 | | Class | Description |
18 | |:-----|-----:|
19 | | `.center` | Centered text |
20 | | `.wide` | Make it 140% the size |
21 | {:.no-head}
22 | 
23 | ### Margin helpers
24 | Useful for adjusting spacing around elements. Replace `#` with a number (`0`, `1`, `2` and `4`).
25 | 
26 | | Class | Description |
27 | |:-----|-----:|
28 | | `.spaced` | Larger vertical spacing |
29 | | `.spaced-more` | Even larger |
30 | | `.top-space-#` | Adds spacing of `#` em |
31 | | `.top-collapse-#` | Adds negative spacing of `#` em |
32 | | `.bottom-space-#` | Adds spacing of `#` em |
33 | | `.bottom-collapse-#` | Adds negative spacing of `#` em |
34 | {:.no-head}
35 | 
36 | ## Blocks
37 | 
38 | ### Special blocks
39 | Fancy blocks that can be used, just append `{:.brief-intro}` at the end.
40 | 
41 | | Class | Description |
42 | |:-----|-----:|
43 | | `.brief-intro` | Big paragraph |
44 | | `.full-image` | Full width image |
45 | {:.no-head}
46 | 
47 | ### Full images
48 | These modifiers are available for `.full-image`:
49 | 
50 | | Class | Description |
51 | |:-----|-----:|
52 | | `.stretched` | Force image to width: 100% |
53 | | `.cropped` | Crop the bottom of the image |
54 | {:.no-head}
55 | 


--------------------------------------------------------------------------------
/reference/images.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Images
 3 | date: 1980-01-01
 4 | ---
 5 | 
 6 | A judgement day did argue, then a four-wheel drive stood wonderfully. A force of nature will be first himself, then she will be never fast or her. A black truth was not tasty or itself. In addition to a dish of the day, a constitutional monarchy can smile. Incredibly, she is slippery heavily.
 7 | 
 8 | ### Third-level heading
 9 | Cheerfully, they weren't soft producers, and then it wasn't circular. Nothing is not scary today. An eagle was wonderfully red or wrong. Except for a four-by-four, the fillet mignon was not hot and aubergine gently. Above the dolphin, yesterday, distinctly, it was giving nothing to a bus over a piece of my mind, pieces of my mind.
10 | 
11 | ![Image](http://lorempixel.com/1440/300/city/9)
12 | {:.full-image.spaced-more}
13 | 
14 | <br>
15 | 
16 | ----
17 | 
18 | ### Image
19 | This is a wide image (`.wide.spaced`).
20 | 
21 | ![Image](http://lorempixel.com/1000/300/city/8)
22 | {:.wide.spaced}
23 | 


--------------------------------------------------------------------------------
/reference/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Reference
 3 | date: 1980-01-01
 4 | ---
 5 | 
 6 | * [General](general.html) - General styles
 7 | * [Tables](tables.html) - Table styles
 8 | * [Authors](authors.html) - For authors
 9 | * [Images](images.html) - Image styles
10 | * [Code blocks](code.html) - Code block styles
11 | 


--------------------------------------------------------------------------------
/reference/tables.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Tables
 3 | date: 1980-01-01
 4 | ---
 5 | 
 6 | ### Modifiers
 7 | All block modifiers work, in addition to these:
 8 | 
 9 | | Class | Description |
10 | |:-----|-----:|
11 | | `.no-head` | Hide the `thead` |
12 | | `.shortcuts` | Table of shortcut keys |
13 | | `.lite-headings` | Lightey gray headings |
14 | {:.no-head}
15 | 
16 | <br>
17 | 
18 | ## Examples
19 | 
20 | ### Wide table
21 | This use the `.wide` modifier.
22 | 
23 | | Resolution | DPPX | Actual resolution | PPI     | Actual PPI | Size | Devices    |
24 | | ---        | ---  | ---               | ---     | ---        | ---  |-----------:|
25 | | 320 x 480  | @1x  | 320 x 480         | 163 ppi | 163 ppi    | 3.5" | iPhone 3GS |
26 | | 320 x 480  | @2x  | 640 x 960         | 163 ppi | 326 ppi    | 3.5" | iPhone 4S  |
27 | | 320 x 568  | @2x  | 640 x 1136        | 163 ppi | 326 ppi    | 4"   | iPhone 5   |
28 | | 375 x 667  | @2x  | 750 x 1334        | 163 ppi | 326 ppi    | 4.7" | iPhone 6   |
29 | | 414 x 736  | @3x  | 1242 x 2208       | 133 ppi | 401 ppi    | 5.5" | iPhone 6+  |
30 | | ---        | ---  | ---               | ----    | ---        | ---  | ---        |
31 | | 360 x 640  | @3x  | 1080 x 1920       | 147 ppi | 441 ppi    | 5"   | Galaxy S4 |
32 | {:.wide}
33 | 
34 | <br>
35 | 
36 | ### Shortcuts table
37 | This uses the `.shortcuts` modifier.
38 | 
39 | |---|---|
40 | | Switch | Description |
41 | |---|---|
42 | | `⌘⌥1` | toggle left (layers) |
43 | | `⌘⌥2` | toggle right (inspector) |
44 | | `⌘⌥3` | toggle both |
45 | | `⌘.`  | presentation |
46 | |---
47 | | `⌘0` | 100% |
48 | | `⌘1` | fit to screen |
49 | | `⌘2` | fit selection to screen |
50 | | `⌘3` | center selection |
51 | {:.shortcuts}
52 | 
53 | 


--------------------------------------------------------------------------------