Category Archives: coding

Naiveté – Chris Eppstein minitalk- GoGaRuCo ’12

talking to an activist, who saw a clearcut field and it broke his heart.
“if i had known what i was going to get into, might not have done all fo this.” but no regret in his voice. was happy that was ignorant of what was coming down.
resonated with me, because in my life, i’ve taken a risk but wasn’t aware of it.

a couple of stories. =)

in high school, college application deadline passed.

[Notetaker’s aside: I stopped taking notes here because the stories were really personal. They were amazing and I’ll post a link to the video when it comes up. The main takeaway is that… sometimes, if you’d known how “hard” something was going to be, that might have deterred you from attempting to do the really hard thing in the first place. But then you wouldn’t have done that amazing stuff. What I got from it was: don’t be afraid, and when more experienced people tell you “that’s not possible, do you know how hard that will be?” just do it anyway if you really believe in yourself.]

webkit/chromium performance @gogaruco12! Cargo Cult Web Performance Optimization – Ilya Grigorik

https://twitter.com/igrigorik
Ilya Grigorik

rough notes
Cargo Cult Web Performance Optimization

3 major components
netowrk
server
browser execution

server – rails app server
network – shows different & moving components in the network stack. look at some things chrome does for htis
browser execution

network stack: an average page has grown to 1059kB (over 1MB!!!) and is now composed of 80+ subresources

dns prefetch – good idea until you do wikipedia. need algorithm to see which host you need to preresolve
tcp preconnect – preresolve the hostname but perhaps we can also open up the connection and keep it idle so when you click the link it’s already there (another 50-100 ms)
pooling & re-use – leverage keep-alive, re-use existinc onnections
caching – fastest request is request not made

chrome does somethign specific – it learns the subresources as well. you go to cnn.com, the first time you come to cnn.com, the browsesr has to load all the resources, contact over 30 hostnames, will remember all those hostnames, next time you come back it’ll remember — let me try to preconnect to those as well. builds this giant hash map, it keeps track of all the requests and whether any of these succeeded. keep track, confidence intervals for each connection we make. hlelp hide some of the latency.

some examples // snippets from actual source code
enum ResolutionMotivation {
MOUSE_OVER_MOTIVATED, //mouse-over link induced resolution
OMNIBOX_MOTIVATED,
… so on

chrome://predictors/ — chrome estimates the chance that you’re going to a certain url
green – if i type gith, i’m rpobably going to github.org
look at data, lots of interesting
chrome://histograms/ — looked at whitespace, dns_resolution

could doc.write, stop the world! browser has simple model to verify what’s coming next in the dom tree. stop the world, wait for script to come down and execute, only then will we proceed. this cannot parse until this application.js file has been brought down and executed. the cause of lots of latency, and looking at a blank page while your js is being downloaded.
so the solution is script “async” and “defer” are your only escape clauses. you can say “trust me, i won’t do a doc.write!” but what if not? well if you look at the document parser (“very readable c++ so don’t be scared”) … this if(isWaitingForScripts()) tips us off — if we’re waiting for scripts, let’s start a preload scanner. a preload scanner is optimized to do 1 thing and 1 thing well — get stuff liek stylesheets that could block rendering. technically an image is not a critical resource but we do preload it because it could block rendering. we move ahead in the stream and scan ahead for tehse attributes. it literally just looks for anglebracket img — we don’t want to spend time parsing and throwing away, so it’s simple.

preload scanner does interesting things — example, this page takes 1.5 seconds. but stylesheet loaded 200ms in, but it came in parallel with the actual html. this is an example of the preload scanner working. i encourage you guys to take a look at some of this code to see what’s going on https://gist.github.com/3058839
not wait until entire page is complete

some lessons learned from this
we have the network stack
the network stack feeds data into the tokenizer, bye
construct dom tree
if dom tree is blocked, the preload scanner is moving ahead and trying to find out what are the blocking resources. this is a fairly efficient way to get your resources scheduled. script execution. while it’s popular to move your dependency management into javascript, in the long run, that’s the worst thing you can do (from the perspective of the browser) cuz you’re moving it away from the browser/hiding it from the browser, so the browser can’t help you. so don’t hide resources from the parser!

you ahve the dom tree, has a lot of stuff we don’t care about in terms of visual respresentation (like meta tags, not on screen) so only stuff that’s visible. then depending on type of element, we’ll have a render layer. some objects get a dedicated layer, like the video tag, which is gpu backed. that by itself has a different tree.

the moment you need . example: getting width/height/offset – stops the world.

60fps? for games, right? we’re just building webpages? turns out that’s not the case. if we want our buttery-smooth scrolling on the page, we need 60 fps. at 60fps, we have 16.6 milliseconds budget per frame. so preferably even faster than 10ms just to be safe. in diagram, 1 frame took 46ms to render (“i’m not going to name the offender… ahem mashable” lol) they’re executing some standard banner of javascript that’s taking 20ms or more. these events aren’t accumulated, and sometimes even mlutipel frames per page. sometimes if you’re scrolling nd it’s dragging, this is what happening — javascript executing due to some handler that’s not properly set up.

we’ve done some testing. one counterintuitive thing i’ve discovered is: better to be consistent than jump all over. it’s much worse to be jumping between 15ms and 60ms (because we can actually percieve that). so instead, pick one
good talk on this from google.io called jangbusters (????) to check out

hardware acceleration 101
sprinkle this on your code and everything will go faster: force a gp layer: webkit-transform:translateZ(0) , all tehse blog posts saying “i put this on all my divs and it goes faster!” so why don’t we
there’s a reason: well, when we do this, we make everything a layer. push it to the gpu. the gotcha: pushing stuff to the gpu is not exactly free. take bitmap. transfer it from cpu to gpu, and that takes a lot of bandwidth. if you take this on your smartphone, could be doing gigabits per second for 60 frames per second, that’ll easily saturate your gpu bus, will destroy your battery.
1. the object is painted to a buffer (texture)
2. texture is uploaded to gpu
3. send cmommands to gpu (apply X to texture Y)
gpu is good at transformations, but then reapplying it back to the thing takes a lot of

spin animation on hover actually makes sense for pushign to gpu.

IF YOU ONLY REMEMBER ONE THING…..
(4 gig checkout!)
1st: don’t just drop everything you’re doing and say “i need to understand webkit” — you need to understand it piece by piece. pick something you’re working on right now. go to code.google.com and type in query. code is well-laid-out. htmlLinkElement,

HTMLDocumentParser, HTMLPreloadScanner (Everybody should read those)

Q: best investment?
A: education. what people don’t realize is that when people come out of the computer engineering degree, we don’t build stuff for the operating system, most of the time we build stuff for the web. there’s a lot of stuff that’s hidden for implemenation. would want to see a lot of change in educational systems. can see classes teaching mapreduce (couldn’t see that 3 years ago). we will get there. in the meantime, it’s up to us to educate. this is the best thing we can invest in.

Now it’s off to Mighty for Square’s party WOOOO

Heather Rivers – Linguistic Potluck – crowdsourcing localization in rails!

I LOVED this talk!!!!!!!!!!!!!

4. Heather Rivers – linguistic optluck – crowdwourcing localization with rails @heatherrivers
Started w/ Ruby at a startup weekend and discovered the true way (cheers lol).
Computer aren’t ready to do natural language processing just yet. Sometimes, we need computers to be able to serve content in different languages.

token: “{friend} tagged you at {location}.” look simple, but the hardest part of internationalization.
Frank bought a {something} from Dee. articles can be “a” or “an” depending on context. You could solve this by writing a method that detects of the something beings with a vowel, but you’d end up with “an unicorn”. Or you could store , but this is a closed set — you can’t store the right articles anymore. May come to conslusion that you need to have the user enter the article themselves. No need to parse it out. Store id: a unicorn, water, an hour, un croissant, une pamplemousse.

Store meanings, not words. Otherwise you’ll end up projecting langauges you happen to speak into your schema, ad you’ll be locked into it, which is no good.

Let your users help you — they know the answers. if you can find a way to extract the answers, you life will be a lot easier.

Translation is conceptually simple without tokens. take a word, adda human brain that provides the translation, adn store the ressult.
Add tokens, things get trickier. “{count} books” –> brain –> some representation of rules. We need to find out how to store those rules. Localization is hard. If it were easy, every app would be available in every langauge. Even facebook didn’t start porting its second language until it had well over 50 million users (zuckerburg with redbook, wine, and the bird)

pie chart part – english languages speakers account for only a quarter of total internet users, only just greater than. pie i have eaten, pie i have not yet eaten.

studies show: when people make deicison in a foreign language, their decisions tend to be less rooted in emotional reactions. So if you make them read it in english and it’s not their native langauge, they may be less likely to fall in love with your app.

There are ways to do it without changing your application too much. Also you might be worried it’ll cost a lot of money: but not necessarily. There are services that provide it that keep costs manageable. But the other way to do it: crowdsource it and pretty much free.

Benefits
Forces you to design better software. Keep your content and your code cleanly separated (moses parting the red sea lol).

How is content transferred to user?
1st you have to store
2. selection: you have to decide which
3. transformation: change the data, prepare it
4. presentation: display in browser

Let’s use Quora for an example. “Question promoted by Dee to 100 people.” Template file: serves as primary storage of text that will be displayed to user, as well as selection , with embedded language-specific transfomration rules , and presentation … all in one file.

So languages helps you separate this out. benefit of internationalization
storage: yml, database, external service // totally insane humane language idiosyncrasies
selection: locale detection & traslation retreival
transformation: interpolate … (we’ll look at the slides later)
presentation:

Only the intent is stored in the presentation.

Another benefit of localization:
A well-placed, widely understood symbol is a better user experience (regardless of how many languages you support). But be careful: apple’s trash can icon, europe thought it was a mailbox.

Another benefit of localization: flexibility, using different images that support multiple languages.

Another benefit: keep your page layout really flexibile. The size and shape of yoru text can change dramatically, so you end up designing your layout to handle different content more gracefully.

Be careful about your encodings. Always have a content type and a meta tag, always be careful about your database encodings.

Else you’ll get mojibake — unreadable characters you get from bad encodings.

Once you’ve dcided it’s time to expand your linguistic offerings, you need to figure out which languages you’d like to support. Get some tool that helps you gather this info (google analytics)
or rely on http headers (http_accept_language)

LINGUISTICS
– easy to code yourself into a corner if you don’t know the scope of your problem.
– morpheme: smallest chunk of language that has meaning. (the word “cat” contains one morpheme)
the word “cats” contains two morphemes
typical english phrase contains slightly more morphemes than words. (words are conventionally things between spaces)

i saww the cats running away: 6 words, 9 morphemes (saw is 2 morephemes, see and past)

analytic vs synthetic
analytic: chinese, vietnamese, yomba – indicate meaning by word order rather than chagnes to the words themselves.
move across to latin and greek: the ratio changes. a word in one of these languages
one of the most synthetic langauges is inuktitut. if you compare chinese and inuktitut, you’ll get

if you wait for me, i will go with you
ni deng wo, wo jiu gen ni qu: ratio 1:1
inuktitut: 2:9 (two words, 9 morphemes)

Why do we care? a good way to see if there’s word agreement. analytic = no agreement, synthetic = hella agreement
in swahili you have to change every wrod.
japanese exhibits no agreement at all.
so that’s what this specturm is all about.
agreement is kind of a measure of psychomatic complexity. if you change 1 word in 1 part of phrase, it might change other stuff int he phrase.
agreement is very wet: you get teh same things stored all over the place. (write everything twice)
no agreement is dry (don’t repeat yourself)

let’s talk about the ones that come up the most.
person
gender
number

in indo european languages, person agreement is not that bad
yo soy, nosotros somos, tu eres, vosotros sois, el es, ellos son.
in georgian/hungarian, the verb agrees not just with the subject but also god knows what else in the sentence. hungarian: szeret. verb agrees with both person and number of object, as well as the specifity of the object. (definite vs indefinite — a cat vs that specific cat.)

pluralization rules
english: 1 and not 1. we have it easy. in rails
#config/locales/en.yml
:pets
:cat

Arabic pluralization rules: lots more categories (zero, one, two, few, many, other)

gender
usually: male/female, male/female/neuter, animate/inanimate. but nto easy because gender is charged issue.
{user} tagged themself in a photo. in 2008 facebook started aggressively asking users to specify gender. in other languages, “themself” didn’t work. decided to ask for missing information, in the name of grammar. be aware of issue: try not to be overly heternormative about it if you end up having to ask for that information because it’s obnoxious.

now you have an idea of the problem. imlement plan of attack. whatever framework you choose, it’ll be: machine generated, crowdsoured, or professionally translated. maybe some mix of them.

machine translation: google and a few others offer some client-side translation tools that are not real internatlionalisiontg, but require almost nothing for you. adds this selector to your site, lets you pick from 55 different languages (out of box). from user’s perspective, they have both the original language and another langauge to choose from. and if gogole translate gives them a bad one, user can suggest a better translation.

storage: database (instead of on google
selection: redirect to local-specific url, pull locale data from storage
transformation: apply stored rules to data
presentation: render result

rails ships with extensible international
github.com/svenfuchs/rails-i18n
gives you methods like I18n.translate, localize, transliterate
comes with framework for api, simple backend to get you started.
backend, by default, stores your translation in these yml files. produces right ranslation with approriate punctuation. if our localization needs are simple, you can limp by with yml files for a while, but these totally suck for keeping them maintained and synced across langauges so don’t bother.
luckily it’s easy to store these translations in different ways. any persistent key-value store, redis or whatever you want, can chain multiple backends.
or if you have a ton of static content, include locale in your template name (though not good idea, keep logic in template)

i18n-active_record gem stores translations in database with active_record. cached. gem makes caching real easy to set up. super-extensible. translating ui text (or anything else stored in template).

but if you’re storing text in database (like for a blog), there’s a gem: globalize3. scope activerecord getters and setters to the current locale. easy to use.

lots of ways to extend this default backend or api however you want. this i18n-inflector gem provides an additional layer of abstraction on the default translation backend. academically faithful, but not practical solution. template really hard to read. but is example of how you can extend the default options.

yammer uses “tron” (berk/tr8n) to crowdsource translations.
use pirate as an example. click on the current language in the footer, brings up langauge sellector box. click on language, changes all text on page. one day you notice untranslated text, click “start translating” — see red and green lines everywhere, see what has been translated and what hasn’t been. click on red line. if you see a translation that you like or dislike, can vote on it WOW!!!! yammer can monitor translations and translators with admin panel (out of box).

now, look at case with context rules. click: generate context rules for this translation.
tell tr8n that the translation depends on the numberical value of count.
tr8n is easy to populate with rules. in pirate english, two types of number: 1 and not 1. generates forms for those, lets you fill them in, translation is much better. in backend, all transltaions and rules are stored in pretty normalized way in

yammer has collected 70,000 translations from 80 languages from users.
lots of advantages to collectnig translations this way:
1. free (kind of)
2. allows for progressive enhancement. you don’t have to wait until every single word of your site is tranlsated before offering a benefit to user (even if at 50%, much better expreience for users). don’t have to wait to populate, people will
3. totally self-monitoring system. requires very little oversight.

one of tron’s big advantages for developrs: use default lagnauge’s value as translation key.
value: hello name, and second argument “welcome message” .. .also provides disambiguation

lol her coworkers held up 9.9, 9.8 on their laptops at the end =D

Building a Rails Engine – gogaruco12

@
Positive

Building a Rails Engine
0.14
11/11/05 – DHH wrote an anti-engine post on the official RoR blog. Basically writing against how we use Rails today (bringing in Omniauth, etc) — thought you should build application-specific solutions because it would be so easy. “the goal of rails is to create a world where they are neither needed or strongly desired” — that’s not the world we have to day, so it’s an interesting historical note. The goal for rails in 2005 was not to have pluggable components — it was going to be “if you need something, 10 lines of custom code! it’ll be that easy!”
JAmes Adam, “it would be madness to include them in the core rails” — creator of Engines
So how did we get here?
a rails application is an engine. you cannot build a rails app without an engine

may 21, 08 – merb slices. same idea of engines for merb. “little slices of mvc cake” — a vertical slicing of an application. slice out a bit of functionality and use them in different applications. how the speaker got invovled — was using merb, wrote merbadmin (first gogaruco lightning talks on merbadmin). his first open source project. took open source css from django 😉 you see a lot of sharing in the open source community but not a lot across languages.

12/23/08 – rails and merb merge. merb was dead as a standalone project, but many of the ideas of merb, including engine, got built into rails core.

(my computer died!)

3: Steven! Ragnarok on teaching Ruby!
I live-tweeted this crap out of this =D

Lunch announcement: salad, chicken breast sandwich with goat cheese because this would not be san francisco without goat cheese, roasted veggie mix, dessert = chocolate mousse custard. Don’t worry, there is plenty of food for everyone, plenty for seconds!

Installing Ruby 1.9.3 — errors and solutions!

We’re using Ruby 1.9.2-p194 for HelloRubyTuesdays at our weekly Women Who Code Rails night! So it was time for me to install 1.9.3. I ran into two errors before I got a successful install, so here’s how google searches helped me fix them.

1. When I first typed $ rvm install ruby-1.9.3-p194, I got this error, which ended like:

error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed
More details here: http://curl.haxx.se/docs/sslcerts.html

curl performs SSL certificate verification by default, using a "bundle"
of Certificate Authority (CA) public keys (CA certs). If the default
bundle file isn't adequate, you can specify an alternate file
using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in
the bundle, the certificate verification probably failed due to a
problem with the certificate (it might be expired, or the name might
not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use
the -k (or --insecure) option.
ERROR: There was an error, please check /Users/judytuna/.rvm/log/ruby-1.9.3-p194/*.log
ERROR: There has been an error while trying to fetch the source.
Halting the installation.
ERROR: There has been an error fetching the ruby interpreter. Halting the installation.

Wut? Can’t download? Is there something wrong with my curl? Do I have to pull in a bundle of certificates? Initial searching suggested downloading certificates, but I kept looking for a simpler solution. Finally, this answer on stackoverflow provided a fix that was easy to try, and I knew it wouldn’t break anything–it suggested updating rvm, which has the new certificates, and pointed out that rvm doesn’t live at beginrescueend.com anymore. The command to update rvm is also viewable at rvm.io. It is as follows:

$ curl -L https://get.rvm.io | bash -s stable

After that, rvm was able to download the ruby I wanted!

2. So the installation progressed like so, until…

judymbp:HelloRubyTuesdays judytuna$ rvm install ruby-1.9.3-p194
Installing Ruby from source to: /Users/judytuna/.rvm/rubies/ruby-1.9.3-p194, this may take a while depending on your cpu(s)...

ruby-1.9.3-p194 - #downloading ruby-1.9.3-p194, this may take a while depending on your connection...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 9610k 100 9610k 0 0 385k 0 0:00:24 0:00:24 --:--:-- 449k
ruby-1.9.3-p194 - #extracting ruby-1.9.3-p194 to /Users/judytuna/.rvm/src/ruby-1.9.3-p194
ruby-1.9.3-p194 - #extracted to /Users/judytuna/.rvm/src/ruby-1.9.3-p194
ruby-1.9.3-p194 - #configuring
ruby-1.9.3-p194 - #compiling
Error running 'make ', please read /Users/judytuna/.rvm/log/ruby-1.9.3-p194/make.log
There has been an error while running make. Halting the installation.

Opening up the log file showed me a whole bunch of warning: implicit conversion shortens 64-bit value into a 32-bit value all over the place, and then this at the end:

tcltklib.c: In function ‘tcltklib_compile_info’:
tcltklib.c:10032: warning: implicit conversion shortens 64-bit value into a 32-bit value
linking shared-object tcltklib.bundle
ld: in /usr/local/lib/libiconv.2.dylib, missing required architecture x86_64 in file for architecture x86_64
collect2: ld returned 1 exit status
make[2]: *** [../../.ext/x86_64-darwin11.4.0/tcltklib.bundle] Error 1
make[1]: *** [ext/tk/all] Error 2
make: *** [build-ext] Error 2

So, something about 32-bit vs 64-bit. One of the google searches turned up a pragprog forum thread, and Sam R’s post linked to a blog post celebrating the release of 1.9.3 which contained a solution to my problem! make was using the libiconv.2.dylib in /usr/local/lib/, but we want to use the one in /usr/lib. You can see that the /user/lib one is the one that had x86_64 by looking at the file output of those files:

judymbp:HelloRubyTuesdays judytuna$ file /usr/local/lib/libiconv.2.dylib
/usr/local/lib/libiconv.2.dylib: Mach-O universal binary with 2 architectures
/usr/local/lib/libiconv.2.dylib (for architecture i386): Mach-O dynamically linked shared library i386
/usr/local/lib/libiconv.2.dylib (for architecture ppc): Mach-O dynamically linked shared library ppc
judymbp:HelloRubyTuesdays judytuna$ file /usr/lib/libiconv.2.dylib
/usr/lib/libiconv.2.dylib: Mach-O universal binary with 2 architectures
/usr/lib/libiconv.2.dylib (for architecture x86_64): Mach-O 64-bit dynamically linked shared library x86_64
/usr/lib/libiconv.2.dylib (for architecture i386): Mach-O dynamically linked shared library i386

So I backed up the one at /usr/local/lib (because I’m paranoid, I guess) and followed the instructions in the blog post to symlink that location to the one in /usr/lib. Here’s what I did:

$ sudo mv /usr/local/lib/libiconv.2.dylib /usr/local/lib/libiconv.2.dylib.bak
$ ln -s /usr/lib/libiconv.2.dylib /usr/local/lib/libiconv.2.dylib

and then $ rvm install ruby-1.9.3-p194 worked. Yay!