jaredhirsch

I dunno why I always forget this set of steps.

puttin code on an awsbox for dev.

./scripts/deploy.js deploy <the name> -t m1.large
git push <the name> dev:master

if you want to work with unminified code:

ssh app@.personatest.org

jaredhirsch

1. javascript + source map.
2. create a macro that modifies js syntax.
3. use the macro.
4. need to regenerate the underlying code + underlying source map.

so it isn't really dynamic.

but if you define source maps, does that mean you can read coffeescript (say) but be editing javascript?

idk if source maps' output gets recycled back into the running interpreter. I think it's just for debugging.

jaredhirsch

technical blogging

lessons learned getting started

develop a formula

• meta/method vs content:
  • When I read articles, I don't just want results. I want to learn how to do things myself--reusable stuff.
  • Try to orient small things in context of bigger things.
    • Even if this isn't done explicitly, point of view & meta stuff can still be picked up by your readers.
• THinking in terms of a bigger picture helps to find gaps in discussion or explanation of specific examples

jaredhirsch

Fantastic front end performance, part 3 - Big performance wins by serving fonts smarter - A Node.js holiday season, part 8

In Persona we cut our page load times in half by serving fonts smarter.  This post outlines exactly how we implemented these performance wins, and gives you tools to do the same.

Introducing connect-fonts

connect-fonts is a Connect font-management middleware that improves @font-face performance by serving locale-specific subsetted font files, reducing downloaded font size up to 80%. It also generates locale/browser-specific @font-face CSS, and manages the CORS header required by Firefox and IE 9+. Subsetted fonts are served from a font pack--a directory tree of font subsets, plus a simple JSON config file. Some common open-source fonts are available in pregenerated font packs on npm, and creating your own font packs is straightforward.

(Feeling lost? We've [put together}(https://gist.github.com/6a68/5187976) a

jaredhirsch

asdf

jaredhirsch

jaredhirsch

Horizontal bar graphage from http://hdnrnzk.me/2012/07/04/creating-a-bar-graph-using-d3js/.

I took the original codez from the author's gist and adapted them to the bl.ocks.org conventions.

You can view the running example at http://bl.ocks.org/6a68/5165005.

To be used to experiment with horizontal bar graphs for an upcoming blog post on the connect-fonts library.

peace

jaredhirsch

d3js-based horizontal bar graphs for an upcoming article on the connect-fonts library.

Runnable example lives at http://bl.ocks.org/6a68/5166525, underlying gist lives at https://gist.github.com/6a68/5166525.

I based this code on a tutorial. For links to that tutorial, and code as presented in original article, see the parent gist, https://gist.github.com/6a68/5165005, or its corresponding runnable example at http://bl.ocks.org/6a68/5165005.

jaredhirsch

So. @font-face is unfamiliar scary stuff? Here are some links to enjoy:

font-face basics: different file types in different browsers, and quirks.

• html5 rocks article
• caniuse for woff, ttf, eot, svg

FOUT: what happens until your fonts load

• paul irish latest
• typekit's API lets you control this
• fonts.com's API lets you control this

jaredhirsch

{
    "users": [{
            "id": 1,
            "lastPasswordReset": 1363889433,
            "emails": {
                "unverified@testuser.com": {
                    "type": "secondary",
                    "verified": false
                }
            }