Broke some more bones!

me with bonez

Thought I’d give the longer story here since so many people are curious.

Didn’t get hit by a car this time, but it happened on my bike. I hung a reusable bag on my handlebars and put my U-lock in it, and while riding down a hill the bag swung into my front tire and halted the bike. I flew forward and landed on my face and hands, breaking my right ring and pinky fingers, and fracturing the side of my right hand and a wrist bone.

Anna drove me to the ER and it was plain I got a concussion because I don’t remember the majority of the ride there. But things are fine. No head damage beyond the stitches on my chin and the scrape on my face. Going to see an orthopedist today about replacing my splint with a cast. Still won’t be able to do most two-handed things, I gather, but I’ll just take it slow. Got some pain meds; they work.

Anna has been wonderful as always, hanging out with me this first day and just helping me do what I need to do.

What is a function?

I’m trying my hand at writing a ridiculously easy-to-follow guide on JavaScript essentials. There might be many of these out there, but this one is mine. Tell me what you think and whether I can clarify or simplify at any point.

In JavaScript, a function is a bunch of code that can be run, or called, repeatedly.

Creating a function

Here is an example of a function being created:

var doStuff = function () {
  // Code you want to run goes here!

In this example, we are first creating a variable called doStuff. doStuff is then being assigned a function as its value – which means, from now on when we refer to doStuff, we are referring to a bunch of code that can be called.

Calling a function

Whenever you see parentheses following a variable, it means we are calling a function – the code inside it will be run:

doStuff(); // the doStuff function is being called.

This is in contrast to just referring to a variable, which is valid, but doesn’t do anything:

doStuff; // no-op


Some functions can change what they do, based on how they are called.

When we are writing code for the browser, we automatically have access to a function named alert, which tells the web browser to pop up a dialog box. When we call alert, we need to specify what exactly to show inside that dialog box:

// the alert function is being called with the string 'Hello!'

In this example, we are putting a string inside the parentheses. Anything placed inside these parentheses is called an argument. In the case of alert, the argument determines what text appears in the dialog box that shows up:

Screen Shot 2013-04-05 at 5.19.18 PM

If we want to create a function that makes use of an argument, it would look like this:

var takeThis = function (foo) {
  // Inside these brackets,
  // we have access to a variable named foo.

// foo's value will be "Hello!" when the function is called.

// foo's value will be 3 when the function is called.

In this example, we are saying that whatever is passed in as an argument when we call takeThis will be referred to as foo as the function runs. We can name the argument whatever we want, but it only affects how it will be referred to inside the function’s code.


Functions can also give back a result after they’ve been called. This is called returning. Returning is important if we want to receive the result of a function and use it someplace else:

var giveMeSomething = function () {
  return "Here you go";

var something = giveMeSomething();
// now something's value will be "Here you go"

In this example, we are using the command return to specify what comes out of the function when it is called. Upon calling giveMeSomething, we are taking its result and assigning it as the value of a new variable named something.

Multiple arguments

Functions can accept multiple arguments. It is as simple as separating the values being passed in with a comma. In this example, we are creating a function that can add two numbers together and return the result:

var add = function (addend1, addend2) {
  // add the two arguments together and then return the result
  return addend1 + addend2;

// pass 1 and 2 when calling add and assign its result, 3, to sum
var sum = add(1, 2);

Having called add with 1 and 2 as the arguments, those values are then assigned to addend1 and addend2, respectively.

Calling functions inside other functions

There’s nothing stopping us from calling functions within the code of another:

var sayHello = function () {

Here, we’re creating our own function and calling it inside another function we’re creating:

var bar = function () {
  // do something

var foo = function () {

foo(); // call foo, which will call bar

Here’s a more complex example where we’re passing in arguments and getting things returned to us:

var bar = function (arg) {
  return arg - 1

var foo = function (arg) {
  return bar(arg) - 1;

var result = foo(3);

Seem complicated? Hover over these steps to see how this code will run:

  1. bar is defined and assigned
  2. foo is defined and assigned
  3. foo is called with 3 passed as the argument
  4. foo begins to run, with arg having a value of 3
  5. bar is called with arg passed as the argument
  6. bar begins to run, with its own version of arg having a value of 3
  7. arg is subtracted by 1, and returned
  8. The result of bar(arg), which is 2, is subtracted by 1, and returned
  9. The result of foo(3), which is 1, is assigned to result.

Passing functions into other functions

To take it one step further, we can even pass functions themselves as arguments:

var bar = function () {
  // do something

var foo = function (callMe) {
  // we are assuming that the argument is a function

// we are not calling bar here,
// merely passing it in as an argument while calling foo

This last example might take a bit of time to understand. The difference between merely referring to a function versus calling it is an important distinction.

  1. When we run foo(bar); we are calling foo, but not calling bar – remember, we don’t see a pair of parentheses following it – we’re only referring to it and passing it in.
  2. When foo begins to run, it has access to a variable named callMe. Having specified the function bar as the argument, callMe now refers to it as well.
  3. callMe, or bar, is called.

Why would we want to do this? So we can call foo multiple times and tell it specifically which function to run each time. In the real world, foo would do more than just call another function – it might do something with the result of that function, or return something itself.

That’s it for an introduction. I’ll see if I can write something about more complex topics like scopes, this, recursion, closures, asynchronicity, et cetera – but we’ll start here and see how it goes.

New website: Jeffrey and Anna

At work and at play, I’m always makin’ websites! Shortly after getting engaged at the beginning of the year, I started brainstorming on how best to tell family, friends, and the world at large about us. Naturally, it would be a website, but I realized I’d have to pick up a pen and pencil for the first time in years if I really wanted to make it special.

Screenshot of Jeffrey and Anna

After a few months of tinkering, I present to you Jeffrey and Anna, a super-fun, animated adventure through our life. Everything has been coded (save for some plugins) and drawn by me, and written by both of us.

What follows is a bit of a technical walk through the site.

Jeffrey and Anna is, naturally, pure HTML, CSS, and JavaScript. It adapts to different resolutions and form factors with media queries, using the same technology to gracefully degrade for less capable browsers. The site is very different from on a desktop computer, but hopefully just as usable, when you view it on a phone or tablet.

I drew everything on paper, scanned it, and colored it in Photoshop. I designed the site to use different complementary color schemes for every section, and further personalized it with Google Web Fonts and Font Awesome.

Superscrollorama is the engine behind the animations which happen as you scroll through the page. I slightly modified the library to detect whether you’re scrolling up or down, and to cause certain animations to start from wherever you currently are on the page.

I used certain parts of Twitter Bootstrap. Scrollspy causes our clothes to change as we jump through the sections, and Carousel provides CSS-animated navigation between subsections.

The site runs on Rails, my current web application framework of choice. Being database-driven, it doubles as our guest list management tool, as we can easily create invitations for guests by using RailsAdmin – and guests can enter their automatically-generated RSVP codes to instantly notify us of their attendance.

The stylesheet is written in Sass + Compass. Compass’ astounding ability to automatically generate sprites would have been an amazing help, given the massive amount of images on the site, but unfortunately, the sheer size of the sheets it generated caused the site’s performance to slow to a crawl. It turns out that it’s not a good idea to have dozens of images at tens of thousands of square pixels moving around on the screen at once. Instead, images are individually crushed and preloaded.

A little easter egg: some of you will see a little range slider in the lower-right corner of the page. Use it and see what happens!

I feel that this site represents the epitome of my current skills. It’s a bit hard to poke through the files on the site as it’s minified for best performance, but fortunately, it’s all open-source! Please poke through the code on GitHub, and feel free to comment (or create an issue) with any suggestions.

For those who are wondering, we haven’t sent out invitations yet! There’s still the task of combing over the list with the parentals, and then collecting the physical addresses of almost a hundred families. It’ll be a few weeks. But do be on the lookout soon for the location and date of our wedding!

Lost In the Internet

(Originally written in 1996.)

“It’s coming down on me! It’s, it’s- AHHHH!!!-” I woke up. I was gasping. I looked at my clock. “8:45!? I’m late for school!”

Before I knew it, I was out the door running.

My school is Weibel. I’m in 5th grade! My teacher is Mrs. Locklan. As I opened the door, everyone looked at me. They were checking homework. Homework! I forgot to pack my backpack.

“And Jeffrey? Jeffrey?” Mrs Locklan asked.

“I forgot,” I murmured.

“That will be inside lunch recess for you,” she quickly stated.

My name is Jeffrey Faden. I’m nine years old. I love computers.

Speaking about computers, that afternoon, we had a computer lab.

I started my computer. We started the Internet.

Just then, I felt a sucking feeling coming from the computer. It was sucking me in!

“Whoa! Whoa! WHOA!”

Total darkness.

“Wh-where-where am I-I?” I mumbled.

“You are on Netcom Avenue,” someone replied while I discovered it was late evening.

“Who are you?”

“I am Mr. Http.”

“Wait a minute! Isn’t that part of an internet adress?”

“Got to go! Here’s my card. So long!” Before he went, he whispered something to me.

On the card, it said:

Name: Baud Http

Adress: http:http.html

Zip: 11101001101

Occupation: Server

If you need any help, fax me at 423-8886.

“Talk about weirdness!” I exclaimed.

I heard a yell. I saw a flash.

“Simeon?” Simeon is someone in my class. “What are you doing here?”

“What are you doing here, Jeffrey?”

We saw a sign. The sign said, “WELCOME TO THE WORLD WIDE WEB. Population: 10001011101”.

“The World Wide Web! That’s an Internet server!” I stated.

“The Internet! That’s where we are!”

“???” I asked.

We took a cab on the Information Superhighway to a strang place. I faxed Mr. Http a question:

“Where are we? What should we do?”

He faxed me back:

“You are in Modemsville. Go see Mr. Megabyte.”

I looked in the Net Search (what did you expect in the internet? The phone book?).

“There’s no Mr. Megabyte, but there is a Dr. Gigabyte.” Simeon said.

“Okay, let’s try him.”

“His address is http://modemsville/ Oh! That’s his house right there!”

“Funky house!” I exclaimed.

“Let’s go!”

We clicked the doorbell. We didn’t hear anything. We knocked. No answer.

“Let’s just go in. The door’s unlocked,” Simeon shrugged.

I opened the door. It was really dark in there! “Let’s go, Simeon.”

Inside, I could see nothing. Suddenly, the lights flashed on. So suddenly that action scared the living laydights out of me!

“Who is th-ere?”

“It is I, Dr Gigabyte.” sneered a voice.

I saw a bald-headed man in a white suit. He had a lightning bold-like mustache with gray hair around the side.

“What do you want?” hissed the voice.

“We just want to go home!” we whimpered together.

“Do you know what happened to the last people that wanted to go home with Dr. Gigabyte?” he scoffed. “They were erased!” he thundered, and his hands turned white with little sparks flashing around them.

Voom! Lightning bolts shot from his electric hands toward us! We dodged and they missed us. The place where they hit turned black.

“Simeon!” I yelled. “Go into the basement! On the circut panel, press the big red button!”

While he went, I kept scampering from the lightning bolts.

Suddenly, I heard a loud click. Everything turned wavy. Then, I felt like I was going right through a transparent wall. I saw the computer lab. I was there. Everyone stared as if I was an alien.

Simeon appeared. Everybody did the same thing.

When my mom came to pick me up from school, she asked, “What did you do at school today?”

“Nuthin’,” I mumbled.

The End

SONIC THE HEDGEHOG: a short story

(Originally written May 31, 1993.)

Once there was a hedgehog named Sonic. Now I mean he was’nt just a regular junky ol` hedgehog, I mean he runs HECK-a-FAST!! Faster than anyone on the planet, Mobius!
But one day Dr. Ivo Robotnik trapped ALL of Sonic’s friends into the Prison Egg, except one.His name was Tails the Fox. He could run almost as fast as Sonic. Now I hope you know Sonic had a LOT of friends, but there’s only two that could help it! Sonic + Tails! Now I hope you know Sonic’s the REAL hero, but Tails could do one more thing than sonic…-FLY! But then they just remembered something… THEIR FRIENDS!!
Robotnik had turned them into robots! They ran as fast as they could, but when they got there and jumped on the Prison Egg…IT WAS TOO LATE! Badniks (Robotnik’s robots) came jumping out! This ” “Hedgehogy dude” and the “Foxy Dude” Lost all their rings, but they didn’t die. Now they were mad. They ran 1,000,000 times faster than the sound of speed! But where? Robotnik’s Hideout! Where else? But wait! there was a door blocking it! No problemo! There’s a button! Robotnik ran away, but he’ll be back with even better stuff!

The End! WAIT!!!!!!!!!

He left something over! THE CHAOS EMERALDS! Ther’e very powerful! Speakin` about powerful, he – he – he – he turned yellow! Do you know how? Why? Since he had 50 rings, and all the emeralds, HE TURNED INTO SUPER SONIC, SONIC, SONIC, SONIC, SONIC, SONIC, SONIC, SONIC, SONIC!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! It meaned that he had power sneakers and invincibility at the same time! PERMANILY!!!! Tails was so suprized, he could’nt bare it !!!!!!!!! Next time Dr. Robotnik comes, he’ll be scared to pices!

NOW The End!

Yearly Meme #9

Still doing this thing! Last year’s answers.

1. What did you do in 2011 that you’d never done before?
Went to a Catholic funeral, moved in with my girlfriend.

2. Did you keep your new years’ resolutions, and will you make more for next year?
Last year I resolved to lose weight and move out of the Tenderloin, and I did the latter. Next year I just gotta keep doing that weight thing – probably play DDR at least once a week in addition to going to the gym.

3. Did anyone close to you give birth?
Not yet! Anna’s sister is on schedule for late March.

4. Did anyone close to you die?
Anna’s grandpa did.

5. What countries did you visit?
The east coast.

6. What would you like to have in 2012 that you lacked in 2011?
I wanted a living room and I got one! Next year – a cat of my own maybe?

7. What date from 2011 will remain etched upon your memory, and why?
April Something! Moving in with Anna.

8. What was your biggest achievement of the year?
Releasing a major corporate website, becoming a teacher.

9. What was your biggest failure?
Letting my gums get so bad – but that was over a few years. At least I’m going to the dentist regularly again!

10. Did you suffer illness or injury?
Besides the aforementioned bad gums, not really.

11. What was the best thing you bought?
A king-sized memory foam mattress. Haha just kidding it was an engagement ring

12. Whose behaviour merited celebration?
Anna and my family’s for being so accomodating.

13. Whose behaviour made you appalled and depressed?
My former roommate for scamming me out of a month’s worth of rent!

14. Where did most of your money go?
Taxes! But I became a salaried employee early this year, so that shouldn’t become a trend.

15. What did you get really, really, really excited about?
It hasn’t happened just yet. ENGAGEMENT

16. What song will always remind you of 2011?
“Fuck You”

17. Compared to this time last year, are you:
i. happier or sadder?
ii. thinner or fatter? Fatter!!!
iii. richer or poorer? Richer!!!

18. What do you wish you’d done more of?
Small hangouts with a friend or two. I need to get to know individual people better.

19. What do you wish you’d done less of?

20. How will you be spending Christmas?
Spent Christmas at my dad’s, although it was the least festive year yet. The rest of the week’s been spent at Anna’s.

21. Did you fall in love in 2011?
I’m kind of already down in there

22. How many one-night stands?

23. What was your favourite TV program?
We went back and watched a whole lot of early Simpsons this year.

24. Do you hate anyone now that you didn’t hate this time last year?

25. What was the best book you read?
I picked up some great comix at APE this year. Even got Ian‘s new mini-thing!

26. What was your greatest musical discovery?
Tune-Yards, the National.

27. What did you want and get?
I got to move in with Anna!

28. What did you want and not get?

29. What was your favorite film of this year?
Bridesmaids was pretty great.

30. What did you do on your birthday, and how old were you?
Turned 26 – Woke up at Anna’s parents’ place, had lunch with my mom, and headed back up for some birthday pizza (mac + cheese + bacon, and meatball marinara).

31. What one thing would have made your year immeasurably more satisfying?
Spending time hopping around the bay with random people, maybe

32. How would you describe your personal fashion concept in 2011?
Less t-shirts. Pants that fit.

33. What kept you sane?
My coworkers in the face of corporate silliness.

34. Which celebrity/public figure did you fancy the most?
Patrick Stewart

35. What political issue stirred you the most?
Occupy, SOPA

36. Who did you miss?
I think I kind of saw everyone this year!

37. Who was the best new person you met?
Anna’s got some cool famblies.

38. Tell us a valuable life lesson you learned in 2011:
Lighten up and don’t let sarcasm consume you.

39. Quote a song lyric that sums up your year:
I can’t think of anything and if I can’t think of it next year I’ll probably remove this question

Fandom: for those who don’t know the answer to “where do you get your ideas from”

The concept of fandom actually bothers me a bit — it seems like describing yourself as a member of a “fandom” means you’re more invested in the community that has grown around a given thing than you are in the thing itself. And while I can appreciate the sense of community and enrichment that being part of that community brings, it also prevents people from trying new things. Doctor Who is a great show, but there are so many people out there doing Doctor Who fan work when they could be making stories of their own. MS Paint Adventures is a great comic, but there are so many people out there making troll versions of themselves when they could be making comics of their own. Of course I’m probably biased. Because I’ve been “making things of my own” for years now, I can’t imagine why anyone wouldn’t do that.


Oh, hello. Welcome to Jeffrey’s Internet Etiquette Soapbox, where I passive-aggressively explain to you how obnoxious you are based on the trivial actions you take on a trivial social network!

Retweeting when someone replies to you with a compliment
The cardinal sin. There is no reason anyone would be at all interested in what some random person thinks of you. Your mom stopped caring when you turned five.
Retweeting when someone includes you in a jumble of usernames with the “#ff” hashtag
Congratulations! Someone thinks you’re worthy enough to be part of the cast of characters in their Final Fantasy fanfiction. Your followers already follow you. When they see that you’re included in a list of people to follow, they second-guess whether they should have followed you in the first place. Do you want that?
Retweeting when someone replies to something that you say
Unless what the person says is funny or interesting in its own right, there’s no need to retweet them for all your followers to see. Not even when they’re answering a question. We don’t want to be invited on a quest to discover the answer, since no one cares but you. If anyone did care, they’d check the replies to your question themselves.
Putting pound signs before words, or concatenating words prefaced by a pound sign
Pound signs serve no purpose; remove the key from your keyboard. I don’t care that it’s also the key for “3”.
Telling people where you are
No one has to know that you’ve left your basement. Take it to Google Latitude, where no one will hear about it. Have you ever bragged about patronizing McDonalds before the advent of Twitter? There’s no reason to start doing so now.
Posting nothing but how relaxing of a day you’re having
One can only surmise that you are only relaxed when you’re tweeting something pleasant, and at all other times you’re a nervous wreck.

In summary, if you ever stop to think about whether what you’re about to post has any relevance or use to anyone besides yourself, the answer is probably “no”, so put your phone away and pay attention to the tree you’re about to walk into.

Song Rating Spergatory

I still live in the dinosaur era of digital music management, in that I download and store full albums on my computer. None of this “cloud” silliness. Not yet, at least. All these downloads start to add up, so for the past 5 or so years, I’ve “actively” listened to my music; that is, I rate my music as I listen to it.

This comic from 2008 details the basics:

  • ★★★★★ – A song I could listen to over and over.
  • ★★★★ – A song I would play at a party.
  • ★★★ – A song I’d listen to on-the-go, but not with other people.
  • ★★ – A corrupted or misnamed file. I’ve got a smart playlist which acts as a to-fix list for these.
  • ★ – A song I don’t want on my iPhone, for one reason or another.

Out of 100GB of music in my library, only about 300 songs have a 5-star rating. There just aren’t many songs I could listen to repeatedly, and even then, they might get stale, prompting me to downgrade some to 4 stars.
4-star songs that I used to think were cool often get downgraded to 3 stars, because my taste in music (or taste in friends) has changed.
3-star songs are downgraded to 1 when I realize I get zero enjoyment from listening to the song.

I try to keep my library at 100GB, which is more than any music hoarder should ever need in the era of instant song querying via Google/YouTube. When I go over that amount, I take a few minutes to look at my iTunes smart playlist that contains songs whose album has an average rating of 1, and delete entire albums that contain no redeeming tracks.

On my iPhone, I make sure to automatically load any songs I haven’t yet rated. The remaining space is filled up by 3-, 4-, or 5-star songs with the oldest “last played” date. This ensures that my library remains “fresh.”

At home, I tend to play my entire library. That’s basically the only way I ever “upgrade” any songs from 1 star in case my tastes have changed.

Much like most of the content in this blog nowadays, I’ve written this here just so I can refer to something that doesn’t fit within 140 characters. So there we go. Feel free to chime in with any other music management suggestions if you got ’em.