Recently, I’ve been working a lot with git, a version control system. My current company decided that it would be useful to switch from Bitbucket to GitHub. Given that we had a number of repositories already in Bitbucket, it became necessary to move each of these repositories from one source to another. Obviously, we wanted to keep all branches and history intact. It’s not very hard to search Google and find the easiest way to accomplish this¹, but I, being of the persuasion that enjoys pain, decided to ignore this simple prerequisite and instead push on with the benefit of only my experience. I accomplished, generally, a satisfactory result, but I thought I would document for posterity both how I should have done it, and how I did do it.

The Easy Way (How I should have done it)

The easiest way to move from one repository hosting service to another is answered in this stackoverflow post. Basically, you perform the following²:

git clone --mirror git@bitbucket.org:yourrepository
cd yourrepository.git
git remote rename origin bitbucket
git remote add origin github:yourgithubusername/yournewremoterepo
git push origin --mirror

The Hard(er) Way (How I did do it)

This is slightly more difficult, but the reason I’m posting this is because, if you did like I did, which is move the repository initially, then make a few commits against the new repository (that, of course, weren’t in the old repository, since you now consider that one dead to you), and then realize that there were items that you neglected to transfer over, then this is for you.

First, move the repository over (I assume you’ve probably already did this step):

cd yourrepositoryworkingdir
git remote add github github:yourgithubusername/yournewremoterepo
git remote rename origin bitbucket
git remote rename github origin
git push origin master

So, now your master branch is in the new origin, but what about the other branches? Let’s move them over³:

cd yourrepository
# Temporarily remove reference to new remote
git remote rm origin
git remote rename bitbucket origin

# Now, track all remote branches [3]
remote=origin; for brname in `git branch -r | grep $remote | grep -v master | grep -v HEAD | awk '{gsub(/^[^\/]+\//,"",$1); print $1}'`; do git checkout $brname; done

# Remove master temporarily (as that branch has already been pushed). You'll want to do this
# For any other branches you've moved over, as well.
git branch -D master

# Add back the origin
git remote rename origin bitbucket
git remote add origin github:yourgithubusername/yourgithubrepo

# Push all branches
git push origin --all

# Push all tags
git push origin --tags

While this is slightly more difficult than simply doing it the “easy” way, it does give you a bit more knowledge about the inner workings of git. A colleague of mine, L. David Baron, once told me, “Good judgement comes from experience. Experience comes from exercising poor judgement.”⁴ I gained a modicum of experience here, but it was worth it. Hopefully, this saves you from making the same mistakes I did, and if you do make those mistakes, it gives you an easier out to correcting them than searching Google for a couple of hours to collect all the pieces of what you need to do.

Footnotes

1. A Google search reveals the easiest way to do this with its first result.
2. Note that this, as well as other sections of this post assume you’ve added the following shortened github url syntax to your global git configuration (~/.gitconfig):

   [url "git@github.com:"]
   	insteadOf = "github:"
   

3. Note that for the step where branches are tracked from a remote branch, I modified a snippet I found here.
4. I love to quote this saying (as readers of my blog are aware from previous posts). For those of you who haven’t read this before, the quote doesn’t originate with David. While the exact origins of the quote are unknown, but it’s been attributed to the Sufi Sage Mulla Nasrudin, Jim Horning, and Frederick P. Brooks.

Conducting my first faceoff

As many of my friends and family are aware, I’ve wanted to be a hockey referee for a number of years. Why? Mostly because I love the game of hockey. There are, however, other reasons – I think calling penalties and rule infractions in a high-speed game like ice hockey is a challenging and interesting endeavor. I also highly enjoy skating, and I like to give back to my community when I can. Finally, while most hockey fans (and really, fans of any sport) don’t realize it, the game would not be possible without the referees. Referees play a vital role in keeping the game from degrading into a five-on-five boxing match on ice, and we enforce aspects of the rules that enable the game to remain fast-paced and skill-oriented. We also serve as teachers about the rules of the game to players, coaches, and sometimes even fans.

How does one become a hockey referee? Well, my experience is probably not like the experiences of others. In fact, my guess is that many referees probably have interesting stories about how and why they became a referee, but one thing I learned while training for this particular side-career is that I am almost completely unique in the art of hockey officiating, as I have never played hockey prior to this season. That said, I love the spectator aspect of the game, and truth be told, I enjoy the ritualistic nature of the signaling that referees use to communicate.

The governing body for youth hockey in the United States is USAHockey. Other organizations, such as the NHL and NCAA, have their own referees, each of whom may or may not be affiliated with USAHockey. It’s even possible that one could become a referee for one of these higher-level organizations without first working in youth hockey, but I definitely want to hone my skills and become a better referee before advancing to a level of competition like that ¹.

USAHockey has four referee classification levels, aptly numbered level 1-4. Every new referee must start out at level 1, which enables them to work games up to the “peewee” classification (typically 12 and under, but it can vary by district and association). A referee can, hypothetically, advance to the next level after they have spent a season at the previous level. So, hypothetically, I could advance to level 2 next season. Often, though, a referee will spend several seasons at levels 2 and 3 in order to get their skills in a shape where they feel they can handle the demands at a higher level. I’ve spoken with a couple of officials who don’t want to referee high school or adult games, and thus keep their certifications lower so they don’t get scheduled for these.

Every referee must attend a seminar at the beginning of each season in order to refresh their knowledge of the rules and skills necessary for conducting a game. Unfortunately, I didn’t get into a seminar until late last November (the last seminar of the 2012-2013 season, actually). Each area in USAHockey is broken up into districts. Officials typically officiate games in districts near where they live (to minimize travel time). Each district has their own rules and regulations that an official must meet before being assigned games. In the district in which I live, Minnesota District 6, one of these requirements is to attend a district meeting (held in August, September, and early October of each season) before being assigned to ref games. What this meant was that by the time I received my certification for level 1, I was unable to officiate games for the regular 2012-2013 season in district 6, as I wasn’t able to attend one of these meetings.

I tried contacting a number of other districts in the Minneapolis/St. Paul area, but they were all full for the 2012-2013 season. Fortunately, though, the scheduler for district 6 also helps schedule games for Minnesota’s summer hockey program, called “Showcase”. I was able to start being assigned to games starting in mid-April of 2013.

The First Game

During the seminar, one of the big topics they kept discussing was that your first game is typically quite difficult. Every referee, regardless of experience, makes mistakes. Newer referees will, for obvious reasons, make more mistakes than more experienced referees ². I definitely realized at my first game that I had skills that needed to be honed. Not the least of these skills was my ability to skate. That’s right – I fell twice during the game. One of these extravagant falls was caught on video by my wife. Feel free to view it and laugh at my mixture of (bad) figure skating and hockey officiating:

So what do you do when you fall in front of a bunch of people when you’re trying to keep control of a game like this? Get back up on your skates and try not to do it again – which is exactly what I did (well, that, and practice your skating skills in your off time to try and not get into the situation again).

On-the-Job Learning

Obviously, it’s important for a referee to know the rules of ice hockey. The officials are supposed to be the experts in how the game of ice hockey is played. So much is this the case, that in order to become a referee (at all levels of USAHockey), one must pass officiating exams. As you increase in level, you’re expected to be able to achieve better and better scores on these exams. About 20% of the questions on these exams cover officiating practices (e.g. how one should skate to keep play in view, where one should be positioned when the play is in certain areas of the ice, etc), with the remaining 80% covering the rules of ice hockey.

Watching the play

In this area, at least, I am most certainly an expert. Or, more accurately, I thought I was. I have been watching ice hockey almost my entire life. My parents literally took me to watch college hockey games when I was 3 and 4 years old. What I didn’t realize is that there are fundamental differences to the way ice hockey is played at the youth level versus at the college or adult level. In general, the rules of the game are very similar, but there are a few rules that take some getting used to. For one thing, in college hockey, every faceoff is at a faceoff spot on the ice. This isn’t true in youth hockey. It’s possible to have a faceoff at a “last play” faceoff location, which could be anywhere along an imaginary line connecting the end zone faceoff spots lengthwise across the ice.

The other major difference in youth hockey is the immediate offsides rule ³. In most ice hockey games (aside from the youth level), the concept of “tag-up” offsides (sometimes called a “slow whistle”) is used. Basically, this means that, provided the attacking team doesn’t have possession and control of the puck, the puck can be in the attacking zone with attacking players offside. Once attacking players all make skate contact with the blue line at the same time, the offsides infraction is waived, and play continues. If, however, the attacking team takes possession of the puck before all players make skate contact with the blue line, then the play is blown dead, and the faceoff takes place at the nearest faceoff location in the neutral zone (unless it was intentional, in which case it will take place in an end zone).

With immediate offsides, as soon as the puck crosses the blue line with attacking players offside, the play is blown dead. The only real exception to this is if the defending team passes the puck backward into their defending zone, in which case the official at the blue line should waive the offsides violation.

Number of Referees on the Ice

One other interesting area where USAHockey differs from the adult classifications is in the number of on-ice officials. Typically, in collegiate and professional ice hockey, there are four officials on the ice during the game: two referees and two linesmen ⁴. In youth hockey, there are either three officials (one referee and two linesman), or two officials (two referees). The two-official system is the most common for me, since all youth hockey up to about the high school level utilize this system. Originally, I thought it would be difficult to get used to, since I’m used to each on-ice official having a specific role to play in the game, and this seemed like it could get confusing when two referees handle everything. Fortunately, it’s not actually that difficult to learn. The basic rule of thumb is that the two referees, in general, have equal power to call penalties and infractions, and should be situated in such a way so they are 1) not in the same zone, and 2) diagonally across from one another.

Skating Fast and Hard

Learning on the ice is tricky. I’ve been skating since I was probably six years old, but not all of that time have I been continually practicing my skating abilities. When I finally decided to become an official, I had to learn a number of ice skating techniques in a fairly quick manner in order to simply stay on my feet when officiating a game. It’s also humbling to be officiating a game where the ten-year-old players are better skaters than you are. The thing is, nothing teaches quite as quickly as a trial by fire, so after a few games, my skating skills have drastically improved. It’s a skill that will likely need to be practiced my entire life to master, though. In a way, it’s much like riding a bike – once you learn, it comes back pretty quickly, but that doesn’t mean you can’t make a fool of yourself if you don’t practice regularly and develop the skills you need to master it and make it look easy.

Details, Details, Details…

As I said in the previous paragraph, learning on the ice is tricky. There’s a lot going on. There are ten skaters on the ice, all of which are trying desperately to get the puck into the opposing net. They are randomly swapping players in and out of play, so at any given time, you might have players coming up from behind you, or about to cut in front of you. You have a solid 3-inch diameter piece of frozen black rubber that may be making its way toward your head or body, as well as twelve sticks that could potentially become deadly weapons if you get caught in the wrong place at the wrong time. You have to think and process plays extremely quickly, as you often only get a single chance to make a call on a given play. You have to be focusing on staying out of the way, while at the same time focusing on where the puck is, who has possession, who last had possession, who last had possession before that (as you can award up to two assists for every goal), what the other players are doing that don’t have the puck, where your partner is, and, in my case, how fast I’m going and whether or not I’ll be able to stop without crashing into something or someone. All this, oh, and by the way, you’ve got a ton of people screaming at you (or at players on the ice, sometimes I don’t know, since I can’t really hear them).

Delayed Penalty

So, needless to say, you need to keep focused. Let me give you an example of what I mean. The other night, a scrimmage match (exhibition game) between two teams in Minneapolis was open and didn’t have a referee. I volunteered, because, being at the experience level I am right now, every game I can get makes me a better ref. What I didn’t realize at the time is that scrimmage matches typically only have one referee on the ice. That was probably the fastest and most exhausting game I’ve been on the ice for to date.

Here I am, in the middle of watching a play in one of the end zones, and I see what looks like a clear tripping penalty. I raise my arm, and wait for the team that committed the infraction to get possession of the puck, which happens after about eight agonizingly long seconds. I blow my whistle to indicate the play is dead, and signal the tripping penalty by taking my non-whistle hand and swiping it across my leg just below the knee. First of all, this was incorrect. I should have pointed to the player that committed the penalty first, but even more of an error was that I looked down at my hand as I’m making the tripping signal. I knew it as soon as I did it, too, that I was in trouble. Sure enough, I look back up from my tripping signal and realize: I don’t remember who committed the penalty. There are three kids in the vicinity of where the penalty happened, so I know it is one of these three, but I don’t know which one.

Now what? Well, one of the things that they kept talking about in the officiating seminars is “Everyone makes mistakes. You’re going to make a bad call once in a while. The key is, you need to sell it.” In other words, have confidence in your calls and do your best to get them right. So, I pointed to one of the three kids and verbalized the penalty. He comes over to me and says, “But I didn’t do it.” I asked him, “Ok, well then who did?” He responds, “Um… I don’t know.” “Well, sorry bud,” I say, “I guess I’m calling it on you.” The coaches didn’t argue, nor did any of the other players, so I thought that perhaps I picked the right kid and he was just trying to get out of a penalty, but I’m still unsure.

I definitely don’t mean to sound arrogant or infallible about that call. If the kid had told me, “Well, number 6 was the one that tripped him”, then I would have changed the penalty call to be called on number 6. But, regardless of the fact that I messed up the individual who committed the infraction, I witnessed a tripping infraction from a team, and that team needed to be assessed a penalty.

Conclusion

Being a hockey referee is much more complicated than it looks. There’s a lot to think about when you’re on the ice. When I was in the seminar last November, one of the things the instructors spent time doing was teaching us about how to conduct a proper faceoff. This is trickier than it sounds. Players can be moving, but, aside from the centers, they can’t be inside of a circle ten feet in diameter, centered around the faceoff spot. Often, the instructors mentioned, you’ll have to tell the kids to back up. If they don’t back up, or they don’t get in position, you may have to eject the center and start the faceoff again. Inevitably, you’re going to hear the phrase shouted from the stands, “Drop the puck!” The instructors laughed about this, saying, “Yeah, it’s never the players fault. You never hear them shout ‘Get in position!'”.

So, I expressed this frustration to my brother, Kyle. He has a tendency to do some crazy things from time to time. When my sister, mother, Kyle, and I went to the WCHA Final Five this past March to celebrate his birthday, we heard one of the fans expressing their (probably drunk) disapproval of the linesmen by uttering those exact words – “Drop the puck!” So, taking it in stride, Kyle gets up on his feet (we’re ten rows up from the ice, right behind the goal – pretty close to the linesman conducting the faceoff), and yells, “Hey guys! GET IN POSITION!” He then calmly sits back down, and turns to me and says, “Well, now you can’t say that everyone only picks on the refs.”

Footnotes

1. As the age classification increases, so does the intensity. I’ve found, from my limited experience so far, that some coaches (and parents) can be extremely intense. It’s possible that I might not want to ref at higher levels than youth hockey. I truly believe that the game of ice hockey is just that – a game. Tempers flare, and words can sometimes get heated, but, in the end, the point is to have fun. That includes the referees – I am doing this because, right now, it’s fun for me. I don’t know if I would want to officiate a game where that’s not the case, so it’s entirely possible that I might never officiate a college, olympic, semi-pro, or professional match.
2. There’s a saying from a computer scientist named Jim Horning that goes something like “Good judgement comes from experience; Experience comes from exercising poor judgement”. I think that this is especially true of referees, since “poor judgement” usually translates into a bad call. All of the referees I’ve spoken with have told me they have made their share of bad calls over the years – the key is to learn from them, accept that they are bad, and be willing to be flexible to change and improve your skills.
3. The offsides rule in ice hockey is somewhat tricky, so I’ll likely discuss it in more detail in a future blog post.
4. This wasn’t always the case. The NCAA changed the rules of ice hockey a few years ago to include an additional referee. Previously, there were three officials on the ice: a single referee and two linesmen.

If you don’t believe me, or you want to give it a try (please do – it’s always great to have people who can think about our processes and make them better!), take a look at our simple build documentation:

https://developer.mozilla.org/en-US/docs/Simple_Firefox_build

You might now be asking, ‘How does anyone do this every day?’ Well, that’s where the unwritten rite of passage comes into play – most developers, in their early days with the organization, spend a great deal of time developing a set of automated scripts, designed to ease the burden of all of these commands, and to customize the build system to their workflow. If you do it correctly, you can spend anywhere from few days to a few weeks creating these scripts, and then only spend a few minutes every so often, polishing them and updating them.

This works great for the ambitious and eager script-writer. But, keep in mind that these scripts are written, and this trial by fire is passed, before a contributor can even begin working on a real problem. Not only that, but because our organization is made up of so many different kinds of people – non-platform developers, UX experts, artists/creative folks, add-on developers, test engineers, build engineers, automation engineers… (the list goes on) – not everyone has the skill or patience to understand arcane build output.

I’ve found that new contributors are excited to get working on a problem with Firefox. Unfortunately, if it takes them an entire week or more (I’m not talking build time here… I mean actually fiddling with .mozconfig files, Makefiles, directory structures, etc…), they end up getting burned out before they even begin their project! I’d really like to avoid having contributors quit before they even get to the heart of the problem they originally signed up to take on.

So, to that end, I decided to take the scripts I originally used to make building Mozilla a bit easier and more customized for me and open them up to the general public. I call the set of tools ‘JMozTools’, and they are available at http://www.glasstowerstudios.com/trac/JMozTools/ These tools are not designed to replace the set of build tools already existing in Mozilla; they are designed to provide a set of ‘shortcuts’ for common build and run commands that would otherwise sometimes get unwieldy.

As time goes on, I intend to add some other tools to the suite, as well, such as Eclipse plugins that assist in merging those irritating .rej files that sometimes persist after running hg update and hg qpush’ing a bitrotted patch. For now, all of the scripts that I use on a regular basis (everyday – literally) are in this suite. Installation and use documentation is on the trac site, as are current bug reports and roadmaps for the future of the toolset. I encourage you to contact me if you have any questions about how to use the scripts, or especially if you’d like to contribute to this mini-project.

Happy (Mozilla) Hacking!

One solution is to offer users a “mini reader mode” – a pop-over or “light box” that contains the text, in a more readable format, which floats over the main page. Kats ² is working on a prototype to show how this might work. The original idea for this was to have a floating box overlay the text in a given area, so that user could see both the box with the more readable text, but also the context in which that text fits into the underlying page by showing the page behind the box. The idea is novel and unique to Firefox, although it’s not clear whether this prototype is going to ship in a release yet or not. In any case, Kats’ prototype is really beginning to demonstrate the possibilities of this approach to improving readability.

Another approach is the “reflow on zoom” approach. Basically, the idea here is to reflow the page as the user zooms in, potentially narrowing the text frames in order to force text wrapping. This is a solution to the horizontal scrolling problem described in Font Inflation, Fennec, and You ¹. The technical details of this aren’t incredibly exciting – I added an API for specifying the max line box width, which, when changed, generates a reflow event ³. This API is accessible from chrome javascript, meaning that webpages don’t have access to this API, only javascript used as part of the rendering of the browser itself (what we call the “browser chrome”, meaning the window decorations, the address bar, etc…). Inside of the browser itself, on mobile, I then specify the max line box width to be no greater than the width of the viewport (minus some padding so that text doesn’t go right to the edge of the screen). Currently, this is still a pretty rough prototype. There are a number of things that still need to be polished before it can be ready for actual use. You can see an example of what the prototype looks like in the following image, though:

Article without any reflow-on-zoom enhancements

Article text with reflow-on-zoom (line box width constrained to viewport width).

The problem I’m currently working on is a positioning problem. There are two methods commonly used to trigger zoom on mobile – a double tap gesture, and a pinch gesture. If the user double taps the screen, it will find the element associated with a particular point where the double tap occurred and then zoom in to this element. Unfortunately, this is somewhat less than ideal, since the whole point of the reflow on zoom concept is for the user to specify what the ideal zoom level is for her, then have the text wrap according to this width. Many elements are already almost as wide as the viewport, so enhancing them just a bit isn’t really a useful technique – we’re not actually increasing readability.

The other gesture, pinching to indicate the level of zoom, is more promising, but comes with its own set of difficulties. The biggest difficulty is that when the user zooms in to a particular rectangle, we want to maintain the position of the text she zoomed in to in relation to the viewport. When the reflow event happens after changing the line box width, the text moves a bit to the left, since the width of the element changes, causing it to no longer be centered within the viewport. This can be rectified easily using similar code in the double-tap gesture approach, but only if we can identify the element into which the user wanted to zoom. This is further complicated by the fact that pinching doesn’t have a single point to zoom in on like double-tapping does. Instead, it has a beginning point, several points as the user widens their fingers, and then a final point. These points appear to track the center of the line between the user’s two fingers. So, do we take the average of these points? The first point where the user’s fingers are close together? The last point, where the user’s fingers are furthest apart? As an additional problem, we might not be able to identify a specific element correctly – a DOM element might be too large of an area for us to use – perhaps we want something more like a piece of text to target.

All of these problems are solvable, but the prototype is still in the early stages. It’ll probably be many more iterations of this prototype before it’s finally ready for the prime time.

References

[1] Johnson, Scott. Font Inflation, Fennec, and You (2012). The Nothingness of Scott. Retrieved 31 August, 2012 from http://jwir3.wordpress.com/2012/07/30/font-inflation-fennec-and-you/.

[2] Gupta, Kartikaya. Readability 2.0 Prototyping (2012). Retrieved 31 August 2012 from https://staktrace.com/spout/entry.php?id=759.

[3] Bug 780258: Add support for max line box width API

Many people in the world now use mobile devices to browse the web. It’s fast, convenient, and absolutely indispensable when you absolutely have to prove that you are correct in an argument. However, early on in the mobile browsing craze, my father asked me (and he wasn’t the only one), “Why would anyone choose to use the internet on such a tiny screen?” Probably the most obvious reason is the convenience of being able to look up restaurants, stores, reviews, or virtually anything, while you’re trying to find a place and you’re disconnected from a traditional desktop/monitor setup. Or, for some people, being able to play Angry Birds or watch a TV show while outside sitting in a hammock is enough reason to want the web on your mobile device.

However, small text is difficult to read. If you are unable to read text, surfing the web really isn’t that much fun. It’s a lot of frustration and irritation – a commonly enjoyable task now becomes a disliked chore. How can we get around this? Well, zooming is a common way to alleviate something that is too small – effectively including a magnifying glass in the software you write. So, if something is too small on the screen – fonts, images, smileys, shortcuts, etc… – you simply increase the number of pixels these objects take up, effectively making them larger. This works reasonably well, assuming, or course, you have enough data. But, zooming has its own issues. If we zoom in on a piece of text, we’re making that text larger, along with all the surrounding text. This is what we want, but what if by zooming in on the text to make it readable, we now have a smaller amount of text on the screen? That is, we have to scroll after having read only a small amount of information. If you have to scroll after having read only two words, it gets tiresome very quickly. Another issue is having to scroll in multiple directions. We’re fairly content with scrolling vertically (or horizontally, if that’s the only direction), but having to scroll horizontally AND vertically is a pain (if you don’t believe me, try reading a PDF paper on your mobile device with the default reader – after the first half page, I get annoyed at having to scroll horizontally AND vertically).

Enter Font Inflation, Stage Left

Font Inflation¹ is the term for the Gecko implementation of an adjustment made to text during Reflow². The basic idea is that we divide up our set of frames into some which are text containers, and then increase the size of the fonts used for text within these containers. Font Inflation, as a concept, is not actually unique to Gecko. A form of this concept, called text size adjustment, is also implemented in WebKit, specifically for iOS devices³. The tricky parts are determining what constitutes a container for font size inflation, and enlarging text without drastically changing the page layout.

Basic Algorithm

David Baron developed the basic font inflation algorithm and processing in Gecko⁴. There are really two basic stages in which font inflation plays a role: Frame Construction and Reflow. During the phase of Frame Construction, we mark some frames as font inflation containers, and a subset of these as font inflation flow roots. A font inflation container is a frame that is an ancestor of frames containing text, with the added condition that font inflation containers are never line participants (e.g. inline frames such as <font> and <b>, and line breaks), because we want font inflation to be consistent within a line (i.e. we don’t want font inflation to adjust a line like this). You can think of font inflation containers as block frames containing some amount of text to be inflated. If there is more than one frame that represents a particular node in the content tree, only the outermost frame is a font inflation container. Font inflation containers happen to be the smallest unit of text for which we can disable font inflation entirely.

A font inflation flow root, on the other hand, is a slightly different beast. It’s a frame that is a font inflation container, where we want to start aggregation of font inflation data. In other words, it’s a bit of an artificial construct designed to fine-tune the heuristics we use to factor out things like copyright notices at the bottom of pages, and other areas of text where font inflation isn’t desired. In order to be a font inflation flow root, a frame must satisfy the following conditions:

1. It must be a font inflation container.
2. It must establish a new block formatting context⁵
3. It must be either⁶:
   1. Absolutely positioned
   2. or, floating
   3. or, a table cell
   4. or, it’s the root frame

If these conditions are met, then during frame construction, the frame is set as a font inflation flow root. This essentially means that this is the beginning of an area of “text flow” that we want to inflate. (Ideally,the content within the frames underneath a given flow root should be “connected” in the user’s mind. An example might be different paragraphs of a single section of a single article. Unfortunately, we can’t determine semantic connections, at least not without assistance from a more robust language than HTML 4.01). In other words, this is a subtree of the frame tree for which we want a separate font inflation statistical-aggregate data structure. It isn’t uncommon for the root frame to be the only font inflation flow root in a document.

Since I’m a visual person, I thought I’d give a visual example of what we’re talking about here. You can take a look at the example at http://people.mozilla.org/~sjohnson/font-inflation-documentation/example1.html. If you’re currently on Firefox for Android, then you should see the font inflated page. If you’re on desktop Firefox, open a new tab, type about:config, search for inflation, and set font.size.inflation.emPerLine to 15 and font.size.inflation.lineThreshold  to 200. You’ll then need to reload the example page. (A quick warning: this will inflate any pages you visit, so you’ll want to turn it off again after you’ve reloaded the example).

If you’re not interested in testing the font inflation for yourself on this example, here’s an idea of what it looks like after these inflation configuration settings have been enabled:

Example page with font inflation enabled

So why weren’t the sidebar and footer inflated? Shouldn’t they have been inflated as much as possible, just like the main article text? The answer to these questions lies in the work that was done to specify regions of layout that collect separate font inflation data (the flow roots mentioned above). This example is similar in structure to the layout of the New York Times website, which we had issues with regarding font inflation abnormally inflating the footer of the page (see “Footer Text”, in the Exceptions section, below, for context as to why this works the way it does). In order to better understand how this process, it’s useful to look at the example alongside a representation of the frame tree that is built within Gecko at the time of page layout. A non-inflated version of this page looks something like this:

Example page rendered without font inflation. The background colors indicate which frame the particular element corresponds to in the frame tree image (below).

I’ve color-coded the different frames so that it’s easier to coordinate them with the frame tree, which looks something like the following:

The frame tree for the example web page, condensed for brevity and clarity.

As you can see from the frame tree diagram, the root frame and the two block frames with id “main” and “sidebar” are our font inflation flow roots. This means that font inflation data is aggregated, starting at each of these frames, and not including the other font inflation flow root frames, or their respective subtrees. The font inflation containers are the block frames “body”, “page”, and “footer”. Since the descendants of the “footer” frame are the only content within the “root frame” font inflation flow root, and the text isn’t sufficient (the meaning of this might not be clear until the lineThreshold setting is discussed below), it isn’t inflated. For the same reason, the text underneath the “sidebar” flow root isn’t inflated. The text underneath the “main” frame, however, is sufficient, and thus is inflated as expected.

In other words, you can think of the font inflation flow roots as areas of the page that collect statistical data regarding the size (i.e. text amount) of their children, in total. This data is then used to determine whether or not the font inflation functionality should take effect for the child frames beneath these roots. They are also used to determine the maximum width (and thus the minimum text size), if font inflation is enabled for a given frame beneath the flow root. Font inflation containers are used to disable font inflation entirely for a smaller chunk of text than the flow roots.

Once we’ve initialized our frames to have the appropriate state bits and such, we perform a font size inflation calculation during reflow. First, given a particular target frame for which we want to inflate fonts, we find its font size inflation flow root, and compute the width. In order to compute the width that descendent frames will use from a given flow root, we find the nearest common ancestor of the first and last pieces of inflatable text within a given flow root. We then use the width of this ancestor frame, which might not be the flow root itself.  Then, given the two preferences for font size inflation (discussed below), we compute the minimum font size that will satisfy these parameters and will fit within the given container width. Using this minimum font size, we map all font sizes in the target frame within the range (0-150%] of the minimum font size to the range [100-150%] of the minimum font size⁷.

With a minimum font size of 20.0 px, 12.0 px gets mapped to 23.33 px.

Why not simply map everything under the minimum font size to the minimum font size itself? Because we want to be able to preserve differentiation between fonts at a size less than the minimum. So, for example, if we have text that is 12pt, with headers that are 16pt and 14pt, we want to make sure that all of these fonts, once adjusted, can be distinguished from one another.

One thing I glossed over here is that we only perform a font size inflation calculation during reflow if font inflation is enabled for the frame in question. This actually ends up being an important point, because there are certain situations where we want to disable font inflation for certain frames. The exceptional cases where we want to detect a certain (somewhat general) category of web page layout, and disable font inflation, either for individual frames or entire pages, is detailed in the next section.

Exceptions

The basic algorithm works really well, but there are still some situations where we want to limit or disable font inflation logic. Together, these situations comprise the bulk of the heuristics Gecko abides by when determining font inflation settings for a given set of frames. Development of the font inflation feature is essentially the refinement of these heuristics. Putting them together, and verifying which ones work well without too drastically impacting the performance of the rendering engine, as well as testing for correctness and general usability has been the goal of the font inflation project for the past 6+ months. Unfortunately, these don’t all fit very easily into a single area of the code, so it’s difficult to tell someone to look at the logic in X class on line Y if he/she wants to learn about how the font inflation heuristics work.

In the following sections, a brief summary of the most pressing issues confronting font inflation over the last few months are described. I try to explain these situations as clearly and concisely as possible. In addition, I try to give code references and documentation links that you can look to for more information if you’d like to see how something was implemented, or perhaps would like to try to fix something that you think is broken with the font inflation algorithm as a whole. That said, keep in mind that only as a whole do these heuristics work to bring you the font inflation feature that is new in Firefox 14.0 and the all-new Firefox for Android (Fennec), so any individual piece may be only one part of the process, or even nonsensical, when taken by itself.

Small Text Bits

The most notable (perhaps notorious is a better descriptor) bug we encountered when fine-tuning the heuristics is in what we’ve come to refer to as “the New York Times footer case” (Bug 706193). In this case, the New York Times site was inflated in certain areas (conforming as expected to the basic algorithm), but there was a problem where the algorithm was over-inflating the footer text, and causing the text to wrap – the text at the bottom of the page with links to different sections of the New York Times.

The difference in footer text size versus the article text size was incredibly noticeable, and quite distracting for users.

This applies to situations where small bits of text are in the document, and where the layout of the page is dependent on these small bits of text. Usually, site authors may not have explicitly defined a height on these bits, because there wasn’t previously a possibility that the text could wrap. Once we inflate the size of the text, however, this assumption is no longer valid.

To fix this, we utilize a technique where a threshold value is specified. This threshold is an amount of text for which font inflation is disabled if the threshold is not met. However, we couldn’t just use a specific amount of text within a block directly. If this were the case, then adjacent blocks within a document that had differing amounts of text would have differing font inflation settings, resulting in possibly strange rendering of text sizes. To better adjust for this, a line threshold was added as part of the fix for this bug. The line threshold works like this – for each block formatting context, we construct a set of data by scanning the items contained within that block formatting context (BFC). As we scan, we accumulate the text in each of the frames contained in the BFC – if we find sufficient text that has the same font size for inflation, then we set a bit in the font inflation data structure that enables font inflation for that size font.

An astute reader will realize this sounds a lot like what was described in the “Basic Algorithm” section above. In fact, this is the case. Since it’s such an important aspect of how David rewrote the font inflation code, I consider it part of the “Basic Algorithm,” and describe it twice. One thing that I didn’t explain in detail above, though, was what makes the text amount “sufficient.” The preference that was added for controlling this is somewhat unintuitive. The name of the preference is font.size.inflation.lineThreshold, and it controls “the percentage of a number of lines of text we’d need to trigger inflation”⁸. What that means is that if each of our characters’ widths are equivalent to 1em (most characters aren’t – they are usually smaller than this), then a value of 100 for this preference means we’d need 1 line of 1em-width text to trigger font inflation. Since we know the width and the size of the font for the text, we can determine how much text will fit on a line, based on the em-size of the text. By default, (at the time of this writing), the value for this threshold is 400, which means we need approximately 4 lines of text (under the assumption that all characters are square, which means that we’ll actually only need slightly under 2 lines of normal text) to trigger font inflation.

Constrained-Height Blocks

One of the first caveats to the font inflation algorithm that was recognized by David Baron was that block-level elements that have a constrained height cannot perform font inflation in the same way as blocks with unconstrained heights. The point of font inflation in the first place is to increase readability while discouraging the use of horizontal scrolling. This second part is important in this case, because if we want to avoid horizontal scrolling, then at some point, we’re always going to have constrained width. This means that as text gets larger, there will be more lines of text, since wrapping will happen more frequently. This is, in large part, due to the fact that the ultimate upper bound on the width, the screen size, remains constant. Thus, since we have more lines of text, we’re going to grow in the block direction – i.e. the height of our blocks will grow as font inflation deviates more and more from the original font size.

This issue was addressed in the original font inflation bug with a new frame state bit, NS_FRAME_IN_CONSTRAINED_HEIGHT. If the font inflation algorithm detects that a frame has this bit set, it does not enable font inflation for that frame. Interestingly, we’d also need to handle this case if we were to implement reflow-on-zoom (see the bottom part of note 1 for more details about reflow-on-zoom), so this is a problem that plagues both of the major readability enhancement solutions.

A related, but slightly different bug, had to do with constrained sizes with form controls. This was actually the symptom of a more general case, wherein if a frame was to be inflated, but between that frame and it’s nearest ancestor font inflation container on the frame tree there was a frame representing a non-inline element with constrained height or width (because these can’t wrap), then font inflation should not happen on that frame. This sounds complex, but, in reality, it’s a pretty simple case of determining whether we can actually inflate, based on size restrictions.

Mobile Sites

Sites that are already optimized for mobile (e.g. m.twitter.com) likely don’t need additional inflation, since the web developer already has adjusted the font size to fit on a phone-sized screen. These sites can often be detected by looking for the mobile-specific tag <meta name=”viewport”> in the header of the document. However, this was a bit tricky for us, because the code that detects the <meta name=”viewport”> tag was in the front-end code of Firefox, rather than in the platform, Gecko. As part of Bug 706198, we pulled the processing of the <meta name=”viewport”> element into Gecko and added two conditions that disable font inflation in what we consider to be “mobile” cases.

The first case depends on the default zoom attribute, which corresponds to the initial-scale attribute of the viewport metadata element. What this indicates is how “zoomed in” the viewport is initially upon page load. Typically, this value is inferred from other settings (such as when width or height are set) in the viewport metadata, so it’s not usually specified directly, unless a developer wants to use a specific zoom setting⁹. If this default zoom attribute is greater than or equal to 1.0, then we assume that this was set explicitly, or inferred from the width/height being set, which are typically done on mobile-optimized websites. Thus, in this case, we disable font inflation. Similarly, we disable font inflation on sites where the width or height attributes of the viewport meta tag are set to device-width.

There’s also something somewhat subtle about the logic for this condition – if the doctype string contains the text “WML”, “WAP”, or “Mobile”, or if the meta tag <meta name=”handheldFriendly”> has its content equal to “true”, we return early from our viewport metadata processing. Since the defaultZoom in this case is initially set to 1.0, font inflation will be disabled under these conditions as well. The former of these indicates that the page is using either the XHTML Mobile Profile or the Wireless Markup Language¹⁰, and the latter indicates that the site is optimized for mobile using the old AvantGo standard for Palm devices (being phased out now, I believe).

Lists

Bug 758079 shows another, more difficult bug to deal with. Bullets and ordered list numerals are rendered in the space given to either the left (for left to right text) or right (for right to left text) of the list item. Specifically, this ends up being placed in the margins of the block element in which the list is embedded. Unfortunately, this isn’t associated in the code directly with the list item itself. That means that if the list item is inflated, the space to the left or right (where the bullet/list numeral is rendered) is not inflated. By default, the area we have to render a list numeral or bullet icon is 40px. This normally works fine, but once we start playing with the font size in the rendering engine, we end up with numerals that might be larger than the amount of space we have in which to render the text. In this case, the text gets clipped somewhere before the start of the block element’s boundary.

Ideally, we’d solve this problem by linking the thing that constructs the indentation of the list item with the list item itself within the platform. This could be a quite massive change, though, and would require that we significantly reconstruct how we deal with bullets and lists. Instead, we opted for a bit more pragmatic approach: increase the amount of margin space in the event of font inflation. We increase the margin by multiplying the default margin size by the same ratio as the text in the bullet is inflated.

Incorrect Flow Roots

As a final exception to the basic algorithm, I’m going to discuss a problem that we don’t yet have a solution for: incorrect flow root assignment. Sometimes, we actually don’t want a table cell or float to be a flow root. It can cause issues like what happens at ycombinator.com when reading comments (Bug 707195):

Sometimes we don’t want to make individual table cells flow roots

Because some sites utilize tables for layout (indentation in the case of ycombinator.com) rather than for actually displaying tabular data, there exists a problem where the same type of syntactic node is used for two vastly different things. When indentation is controlled by tables by using nested tables, the width of each individual cell gets smaller with each nesting. This causes comments that come later in the thread (and thus are indented more) to be inflated less, and comments that come earlier in the thread to be inflated more, simply due to width restrictions. Because each table cell is an individual font inflation flow root, we can’t accumulate data across table cells to consistently apply font inflation to the entire set of table cells.

Somehow, we need to add heuristics to determine when a table cell is used for layout, and thus should not be a font inflation flow root, and when it should be a flow root. This isn’t unique to tables, either. Reddit.com also experiences a similar problem:

Reddit.com has a similar issue with nested div elements

Conclusion

The all-new Firefox for Android, nicknamed “Fennec” or, sometimes, “Fennec Native” has shipped. The new readability enhancements described above are included in this version of the software. This is fantastic, and it makes readability for the web on the Android platform better than ever. But, the work isn’t done yet. Font inflation is a great feature, but it’s not the only aspect of readability that we want to include in future versions of Firefox. Crisper, clearer fonts are also on the docket, along with an investigation of how reflow on zoom might be incorporated into our product. Another area of current development is Reader Mode¹¹. Reader Mode takes the text content of an article, strips away aspects of the page that might not be relevant to a user while trying to read the article, and places the resulting text onto a more readable background, with an easier-to-read font.

Let’s face it – much of what we do on the web is reading. We read news articles to learn about current events. We read recipes in order to prepare that fantastic salmon dinner your boyfriend/girlfriend wants. We read through instructions on how to fix that misfiring cylinder in our car. Almost every web page you visit has some text on it – it’s integral to the way we communicate and live. We want to make that experience not just better, but better than any other browser on the market. We literally (no pun intended) want everyone — from your 102-year-old grandmother to your 4-year-old nephew who just learned to read — to be able to interpret clear text in Firefox as easily as if they were reading a piece of paper. Our goal is to develop the features that will make you want to use Firefox as your daily browser because of how it renders text.

Notes and References

A special thanks to Daniel Holbert and David Baron for proofreading this post and pointing out issues they saw. Guys, I really appreciate your help and guidance!

[1] This is sometimes called “text size adjustment,” or just “text size adjust.” Font inflation is the name given to the Gecko implementation of this feature. Note that this is actually different than font-size-adjust, a CSS property that is used to preserve the aspect value (relative height of lowercase letters as compared to uppercase equivalents). It’s quite confusing, since both the text-size-adjust and font-size-adjust properties exist, and are different. It can also be confused with Reflow on zoom, another technique for increasing readability, which triggers the reflow process when a user double-taps to zoom. The key to this approach is that the user has effectively given us more information about what he/she is interested in, and thus we are able to make that text larger at the expense of the rest of the page (which is outside the viewport). Unfortunately, this approach doesn’t play nicely with panning after zooming, nor does it work quite right with pinch-to-zoom interfaces. Opera and the Android stock browser use the latter technique for readability, whereas the former is used by Google Chrome, Firefox, and Safari.

[2] Reflow is the process by which frames representing rectangular areas containing the content of a webpage, are laid out (i.e. given a width and height, and x and y locations on the screen) by the rendering engine of a web browser in preparation for display on the screen. Rendering a webpage happens essentially in a set of phases: 1) construction of a data structure representing content (element) tree, 2) parsing and construction of the style data structure, 3) combination of the style data structure and content tree to construct frame (or render) tree, 4) reflow, which includes placing and sizing frames, and 5) Painting/Compositing, which is the process of utilizing the frame tree, content tree, and style structures to produce individually-colored pixels, which are then drawn on the screen. Much of what we call “layout” code in Gecko is specifically targeted toward algorithms that create the frame tree and place content within frames during the reflow process. You can see an example of how reflow works (visually) by watching the following video: Gecko Reflow Visualization.

[3] Adjusting the Text Size (2011). Safari Web Content Guide, iOS Developer Library. Retrieved 28 June 2012, from http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html

[4] Font inflation as a feature in Gecko was originally developed under Bug 627842: Allow minimum font size based on size of frame, which landed on mozilla-central on 23 November, 2011. It wasn’t included in a release until the new Firefox for Android, which happens to be Firefox 14.0.

[5] A container that establishes a new Block Formatting Context is a container inside which individual block frames are laid out vertically (i.e. in the “block” direction). A new block formatting context is created with an absolutely positioned frame, a float, a block container that’s not a block box, and a block box with an overflow setting other than ‘visible’. All of the items in condition 3 establish a new block formatting context, so this condition is somewhat redundant, and serves only so that this can be described in more detail. The visual formatting section of the CSS v2 specification has more information on block formatting contexts at http://www.w3.org/TR/CSS2/visuren.html#block-formatting.

[6] There are a couple of other situations where a font inflation flow root is established. Namely, nsOuterSVGFrame (frames that bound the outermost <svg> element in an SVG document), nsSVGForeignObjectFrame (frames within an SVG document containing SVG Foreign Objects), nsBoxFrame (frames containing XUL boxes), and nsLeafBoxFrame (a generic class containing logic that is shared by the frames displaying XUL trees, XUL images, and XUL text boxes), but these are glossed over since they are reasonably special cases, and aren’t probably of interest to the reader.

[7] This algorithm might change in the future. Currently, the algorithm has a somewhat flat curve in terms of font differentiation, and we’d like it to be a bit steeper, so that different font sizes are more readily distinguishable after inflation. See Bug 777089 for more information.

[8]  http://hg.mozilla.org/mozilla-central/file/30dce13b71d0/modules/libpref/src/init/all.js#l1654

[9] Bovens, Andreas (2011). An Introduction to meta viewport and @viewport. Retrieved June 28, 2012, from http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/.

[10] XHTML Mobile Profile. Wikipedia: The Free Encyclopedia. Retrieved June 28, 2012, from http://en.wikipedia.org/wiki/XHTML_Mobile_Profile.

[11] Rocha, Lucas (2012). Reader Mode in Firefox Mobile. Retrieved June 29, 2012, from http://lucasr.org/2012/06/21/reader-mode-in-firefox-mobile/.

During classes, we typically listen to the radio, and inevitably, hear the Tom Shane, Shane Co., commercials. I told Ryan that we should do something similar to this, but instead of saying “Now you have a friend in the diamond business”, insert our own tagline, “Now you have a friend in the Kung Fu business.” He thought it was a pretty funny idea, and definitely something that would draw attention.

So, almost two years later, I finally decided that it was time to put this idea to the test. I don’t know if it will ever make it into mainstream radio, and I’m not sure I got the monotone sound of my voice correct, but here’s a little tidbit for your listening enjoyment:

Wu Chi Fighting Arts Radio Commercial

It’s somewhat amusing, at least if you’re bored out of your mind.

Synopsis

At the beginning of the book, Ned is an accountant for Brute’s Legion, an army of skilled and fearsome warriors. We get the impression that, while Ned isn’t extraordinarily good at being an accountant, he isn’t awful at it, either. He is transferred from this position to a command position in Ogre Company, which is a motley assortment of undisciplined characters that include a fire-breathing salamander, a shapeshifting goblin, several ogres (for which the company is apparently named), a promiscuous siren, and a bloodthirsty Amazon.

Ned isn’t quite sure how to handle this command position, and he is fairly disinterested in being a commander in general. As the story progresses, we learn more about Ned’s past, which leads to a confrontation that could ultimately destroy universes (yes, plural!). Ned is also the subject of essentially two female crushes, although he is oblivious to both of them. This situation adds humor and a bit of frustration to the novel. Frustration is felt by the reader (at least by me) on behalf of Ned’s two lovers’ feelings going not only unrequited, but unacknowledged. Add to this a plot to destroy Ned as a commander (in normal terms, this would mean killing the individual, but since Ned doesn’t stay dead, this becomes quite a conundrum), and there is a whole avenue of ridiculous humor to be explored.

Comparison to Other Works

I think that A. Lee Martinez’s writing style developed significantly in the year between the publishing of Gil’s All Fright Diner² (his first novel) and In the Company Of Ogres. The writing seems to be more fluid in In the Company of Ogres, whereas in Gil’s All Fright Diner, it seemed to me that the author was still trying to determine his place in the set of amusing and ridiculous fantasy novels. With In the Company of Ogres, Martinez seems to blend well with other authors in this genre such as Terry Pratchett, Douglas Adams, and (in some cases) Neil Gaiman.

One thing I will say regarding the comparison between Gil’s All Fright Diner and In the Company of Ogres is that I actually thought the overall topic of Gil’s All Fright Diner was more interesting. I’m not exactly sure why, but it seems to me that when reading a fantasy novel, especially one that’s set in an era similar in style to Earth’s “middle ages” (e.g. weapons are mostly melee, farming is done by hand, communication done by carrier pigeon or other bird, etc…), magic, demons, monsters, etc… are all just expected. So, the fact that in Gil’s All Fright Diner, a novel set in a rural town in what appears similar to modern America, the two main characters are a vampire and a werewolf, is original and unexpected. Even more unexpected is the fact that nobody seems to give this a second thought!

Review

Overall, I was pleased with the novel. I thought that the protagonist, in this case, Never Dead Ned, was interesting and developed in an unexpected way over the course of the novel. The novel was fairly funny, and it kept me interested throughout the book. I only have two criticisms about the book in general. One is that I thought the idea of the Mad Void – the supposed all-powerful demon asleep in Ned’s mortal shell – was somewhat hard to swallow, given that he had (some) difficulty defeating Rucka (a supposed smaller, or less-powerful demon). The Mad Void is introduced as a character that literally destroys universes for entertainment – that’s how powerful he is. On the other hand, he was somehow bound into a mortal form and trapped, as well as (almost) being defeated by Rucka. This sort of boggles my mind, and it might have been interesting to have a chapter on the back-history of the Mad Void either when he is first introduced, or perhaps at the beginning of the novel. Something that makes it clear how he was trapped in that shell originally, and why the Red Woman was assigned to watch him (rather than one of the magicians that originally trapped him) would have been useful.

The only other criticism I have of the novel is the idea of Ned’s autonomous left arm. I don’t think the idea is bad – in fact, I think it was a great idea that just wasn’t pushed quite hard enough. In the beginning, it’s introduced that Ned doesn’t have complete control over this arm, and my first reaction was “Oh boy, this is going to be funny later in the book.” There are some scenes where it enters in, such as in the pub when Ned first arrives at Ogre Company, but other than that, this plot device isn’t used much until the end of the book. I think it would have been really funny if it had gotten him into some strange troubles. I can see all kinds of jokes, especially given that there were two women chasing Ned, but Ned was somewhat oblivious to both of them. If the arm wasn’t oblivious, and had a mind of its own in situations like this, it would have been hilarious to see the reactions from Regina and Miriam as they get multiple signals from Ned – one of disinterest from Ned himself, but one of innate attraction from Ned’s left arm.

All in all, though, the book is definitely worth reading. I’m excited to see Martinez’s development as an author, and I’m looking forward to reading his other novels soon.

[1] In The Company of Ogres.
[2] Gil’s All Fright Diner.

The Hunger Games

This book introduces the characters that will tell the story of a revolution. Specifically, it’s told from the perspective of one Katniss Everdeen, a teenage girl from a place called District 12. District 12, we find out, is one of twelve (formerly 13) districts in a country called Panem. Panem exists as a country, ruled by a totalitarian government that is located in a separate district, called (unimaginatively) The Capitol. Each of the districts provides much needed food and supplies to citizens in the Capitol, which are essentially an aristocracy bend on doing nothing, but yet have an unsatisfying urge to be entertained. The Capitol pushes each of the districts to the brink of starvation, but keeps them subjugated with brutal enforcers known as Peacekeepers.

We find out early in the story that there were previously 13 districts, but District 13 incited a rebellion against the Capitol, resulting in it being entirely obliterated. As another repercussion of the failed coup, each district must give two children (known as Tributes) to the Capitol each year for a sport they call, “The Hunger Games.” In the Games, the children essentially fight to the death in a complicated arena for the entertainment of the Capitol’s citizens (and horror of those parents and friends watching from the other districts). Each year, there is exactly one winner.

The rationale for calling this bizarre circus “The Hunger Games” isn’t immediately clear, until you find out that from each district, every child between the ages of 12 and 18 must sign up once per year from their twelfth birthday,  to be chosen as a tribute. So, for example, if a child is twelve, they must enter their name once. If they are thirteen, twice. After that, you can put your name into the pool of potential tributes additional times for “tessera,” which are basically additional rations, in the event your family is poor and cannot afford enough food.

Now, I won’t ruin the story for you in telling all of the dramatics, but suffice it to say that Katniss is chosen as a tribute (albeit through a roundabout way). Likewise, a male tribute is chosen from District 12 named Peeta Mellark. Peeta and Katniss have an interesting history, which basically entails a sort of “love from afar” idea, but you don’t learn about this until later on in the novel. It’s used as a plot device to springboard into the rebellion that comes in the later novels.

All in all, the book is interesting. I enjoyed the concept of the arena, and how the Hunger Games are played out. The novel feels like you’re watching a grisly reality TV show. It’s a fascinating environment Katniss and Peeta exist within, and you’re thrown into this world that is similar to our world, but in many ways, you’re not sure what has been remembered from the time before Panem. I do thing it would have been interesting if more historical context were given. For example, a sub-story begins to develop when Katniss recalls a girl that was taken by the Capitol before her and her friend, Gale’s eyes. We find out that the girl has been turned into an “Avox” – which essentially just means her tongue was cut out. But no connection is made between this and the rest of the story. It’s as if the whole thing is simply a roundabout explanation of Avoxes in general. Instead, I think it would have been more interesting to have that part of the back-story lead somewhere, rather than simply being told and then dropped. I also had a number of questions like “Where did the hovercrafts come from?” and “How is an arena chosen and constructed?” which were left similarly unanswered.

There were some great lines from the book. I especially liked the line “May the odds be ever in your favor.” I find it exciting when an author can create a phrase, which, at first glance, seems uninteresting, but the more you read it and it rolls around in your mind, the better it seems⁴.

The major criticism I have of the novel, and really of the entire series, is that there doesn’t seem to be any character development. Every character is basically the same, personality-wise, from the beginning of this novel to the end of the last novel in the series. Especially Katniss Everdeen – she doesn’t seem to change throughout the entire series, even though we’re basically reading her thoughts and fears. They don’t seem to change from the moment we’re thrown in to the novel. This is probably partially a result of the book reading as though it was written by a twelfth-grader. Many of the sentences are short and direct. There isn’t a lot of self-reflection or complexity to the characters or the settings. The book is very focused on action and navigation from one plot point to another – one problem/climax/resolution set to another. Everything in the novel is black and white – there isn’t a lot of gray area shown.

Catching Fire

Katniss and Peeta are returned to the arena (in a special Hunger Games called a “Quarter Quell”), each having made a “deal” with Haymitch to keep the other alive. The reason for their being returned to the Hunger Games is mostly inferred to be a political move on President Snow’s part. He is attempting to crush the rebellion that started with Peeta and Katniss refusing to let only one victor be taken from the arena in the previous novel. Katniss learns that just their unwillingness to obey the manipulations of the Capitol and instead put up a small resistance of their own has sparked sentiments of unrest that have been growing for quite a while.

Add to this the growing tension between Gale and Peeta after Katniss and Peeta’s return from the Hunger Games, and there’s an actual story here. There is also some mystery revealed about the aforementioned District 13, previously thought to have been destroyed, actually being alive and well, albeit beneath the surface of the original district. The oppressive hand of the Capitol swoops down on District 12 in the form of additional security, and both Katniss and Gale have a run-in with the new guards, most of which aren’t as easy to appease as the previous ones were.

Tributes are chosen from among the other district’s victors, and surprisingly, instead of outright trying to kill Katniss and Peeta within the Games, some of them actually protect the newest victors from the dangers of the arena (and the other tributes who have decided, for whatever reason, not to “play ball”). In an epic conclusion, they actually assist Katniss in escaping from the arena without the games being finished. Peeta, however, isn’t quite as lucky. He gets left behind and we are led to assume he’s been captured by the Capitol.

Of the books in the series, this novel was probably my favorite in several regards. Before we get into the details, though, one needs to overlook the stupid repetition that is reminiscent of another plot hole that leaves one thinking, “Really? That’s the best you could come up with? A second Death Star?” (Oops.. I meant “Hunger Games.” A second “Hunger Games.”) Once you look past that, though, you begin to see the complexity of what’s happening. The idea of the clock as an arena was really intriguing, made even more so by the first showing of the watch to Katniss during the celebrations by Plutarch.

And then there’s the whole idea of District 13. Are they still around? It is interesting to think the Capitol has been using the same video shots over and over, if they could have actually gone back to the original site. But, if this were true, why wouldn’t have District 13 been clandestinely aiding the other districts?

It also  gives rise to a bunch of questions that really aren’t answered – where are the arenas physically located? Are they within the Capitol or somewhere outside? How does the force shield enclosing the games work? What is the back-story behind all of the tributes? This last question, in particular, could have made the story MUCH more interesting. Using Catching Fire as a jumping-off point, the rebellion could have lasted a number of additional books, and been told from the point of view of each of the tributes involved in Catching Fire – in a sort-of Lost way – which would have made the story leagues more provocative. Instead, it seems to sort of leave us hanging at the edge of our seats. This is fine with me – I love cliffhangers – but what’s not fine is that all of the enticement goes unfulfilled in the final installation of the series.

Mockingjay

The last book in the series, Mockingjay concludes the story of Katniss Everdeen. After escaping from the Quarter Quell with the assistance of the other tributes, Katniss is taken to District 13 for recovery. Once there, she learns that District 12 was obliterated due to her lack of willingness to cooperate, and as punishment for what President Snow feels was incitement for the Districts to rebel against the Capitol. Although it isn’t really stated, the other districts are in open revolt against the Capitol, led by District 13, which has the weapons and technology necessary to bring the fight to the Capitol.

Although Katniss is a wreck because Peeta was captured during their escape, District 13’s President Coin entices her to be used as a propaganda puppet. In exchange for amnesty of Peeta and they other tributes, as well as the opportunity to kill President Snow, Katniss agrees to utilize the concept of the Mockingjay debuted in Catching Fire by her stylist, Cinna, in order to sway public opinion against the Capitol.

Most of this novel has to do with Katniss’ internal struggles. It’s pretty grisly, as war is in real life. Many of the characters we’ve come to like or even tolerate don’t make it through the story alive. Those that die usually suffer horrible deaths, such as how Finnick dies at the hands of “muttations” while tredging through the Capitol’s sewers, trying to get to President Snow’s palace. Eventually, Peeta is rescued, but he’s been turned against Katniss and the Rebels via a technique called “hijacking”, where the venom of mutated yellow jackets (called “Tracker Jackers”) is put into his blood while he’s focusing on memories of events in his life, twisting and warping his sense of reality.

The story moves very quickly. It’s difficult to follow at times, because you’re unaware whether a few minutes or a few years has passed. The rebellion seems to last a very short amount of time – only a matter of months. I found this difficult to understand, as the fictional story I most commonly associate with rebels overthrowing a totalitarian government – the Star Wars saga – takes almost an entire generation for the Rebels to actually get to the point where they are making progress against the Empire. Most of this novel’s description of the overthrowing of the government happens in the course of 100 pages.

The criticism I have for this part of the series is pretty much the same as the criticism I have for the other two books: There’s no character development. In this novel, though, it’s even worse, as my sister points out so eloquently:

I didn’t particularly love the way that death was dealt with in the book. Several people die in instantaneous – completely unadorned ways (Prim, Cinna, Snow, Finnick). It was very blunt- just death, over. Katniss never reflected on the deaths really nor did she ask herself questions about why/how people died, she just accepted it and moved on (particularly in the case of Snow and Finnick).

My theory on this subject is pretty simple: Katniss didn’t reflect about anything in The Hunger Games, so why should she all of a sudden stop and start reflecting now? Oh, right, because characters should develop over the course of the novel, in order to better attune the reader to them as a person, and give them more depth and dimension than the simple black and white that’s on the page.

In general, the novel moved too quickly for my taste. It lacked subtlety and style. The plot skipped from one action sequence to the next, almost as if the rebellion itself were a series of snapshots or video clips. Or, like a storybook reading to a child, where the narrator is asked to skip the sections which the child cannot understand or appreciate, and therefore are considered “boring.” The most interesting aspect of the whole novel – the possibility that President Coin herself committed the acts of atrocity toward the children at the end of the novel (including, by the way, Katniss’ sister, who was the reason Katniss volunteered for the Hunger Games in the first place, and thus the reason for much of the storyline) – and therefore were not committed by President Snow – was even underdeveloped. It’s almost like an afterthought that perhaps President Coin isn’t the savior everyone thought she was after all, except that in Katniss’ mind, it’s certain enough that she deserved to die.

Overall

I understand that the point of the series is that war has an insurmountable cost, but that some things are worth fighting for. This is true even if the price for those things you hold most dear is steep. The problem with this “moral” so to speak, is that it’s not handled with care. All of the things worth fighting for in Katniss’ life are taken away. She’s left with an empty shell of a life – sacrificed so much – that the point of the war becomes unclear at the end. Even Peeta, with whom she survives, is not the same as he was at the beginning of the series. But, that’s due to a sudden and involuntary change – not the change one would expect of a character after going through so much hell.

It’s also unclear, at the end of the series, what the point of the war actually was. The Rebels from District 13 aren’t really any better than the original totalitarian government. President Coin, after the Capitol has been taken, puts an absurd choice to the remaining Hunger Games victors: Either everyone in the Capitol is put to death, or all of the children from the Capitol are taken and put into one final Hunger Games. What? How does this make any sense? Why would the Rebels, who have just fought and died to overthrow a regime that keeps them in constant fear of losing their children actually want to make such a choice? And why is the choice created in the first place? Where did it come from. I mean, that’s ridiculous. There’s no need to just kill everyone off that doesn’t agree with you. Even a child can see that’s how totalitarian regimes begin in the first place. This story just takes an incredibly strange turn as the end approaches – there doesn’t seem to be any heroes or villains left at the end of the novel. It seems almost as though the author got tired of writing and decided to just speed up the conclusion. I feel that a good author needs to carefully choose the themes of the story so that he/she can illustrate the differences and similarities inherent between good and evil, black and white, day and night. A really good author either decides to separate these things completely or blend them together so much as to make it indistinguishable when the line has been crossed from light into darkness. Traditional stories, such as most fairy tales and one of my favorite mythologies that I mentioned earlier, Star Wars, take the former approach. Darth Vader is pure evil. He’s represented in black, and has no problem killing others. Obi Wan Kenobi, Yoda, Luke, and eventually, Anakin Skywalker, refuse to sacrifice others for their own good. They act in very moral and justified ways. An example of the latter approach might be A Game of Thrones or Lost – it’s not really clear why people are doing the things they are, but as the story progresses, it becomes clear that no one individual is completely good or completely evil.

The Hunger Games series disappoints on this account. It initially tries to present a clear demarcation of good and evil, but later in the series decides that it is more interesting to blur the line. The problem is that not enough thought and time were put into how this line is shaded. Instead, in my opinion, it ends up becoming a smudge across the face of an otherwise interesting story.

On a somewhat unrelated note, as I was writing this post, I happened to go and see Sherlock Holmes: A Game of Shadows at my local theater (that movie is pretty good, by the way). Before the movie, there was a preview for the movie version of The Hunger Games, which looked pretty interesting. I’ll definitely go and see the movie version of this story. My hope is that the screenplay writers took the original story and spiced it up a bit – made the dialogue less tinny, enhanced the overall grandeur of the plot, and in general added special effects that make up for some of the shortcomings I see in the original novel. My hope is that this will be one case where the movies are better than the original novels.

[1] Mockingjay

[2] The Hunger Games

[3] Catching Fire

[4] My favorite example of this is the first line of Stephen King’s The Gunslinger: “The man in black fled across the desert, and the gunslinger followed.” This is a very simple, but yet eloquent introduction to the novel. It is short, but yet leaves so many questions unanswered that you must continue reading. I once read that Stephen King thought this was one of the best lines he had ever written. (Don’t quote me on this, though, because I am unable to substantiate from where I retrieved the quote).

One of the most interesting areas of philosophy in The Magician King is a conversation between the main character, Quentin, and his rival/friend, Penny, regarding a super-being they are witnessing performing a task that will remove magic from their world:

“Maybe we should talk to him,” Quentin said. “Maybe we can change his mind. We could, I don’t know, prove ourselves worthy of magic or something. Maybe they have a test.”

Penny shook his head.

“I don’t think they can change their minds. When you get to that level of power and knowledge and perfection, the question of what you should do next gets increasingly obvious. Everything is very rule-governed. All you can ever do in any given situation is the most gloriously perfect thing, and there’s only one of them. Finally, there aren’t any choices left to make at all.”

“You’re saying the gods don’t have free will.”

“The power to make mistakes,” Penny said. “Only we have that. Mortals.” ²

This brings in a new and interesting idea that I hadn’t considered before: What if the very nature of how a deity exists prevents such an intelligent, all-powerful being from having free will?

Let’s consider this for a moment based on the faith of Protestant Christianity. (I’m not trying to be offensive here, this is merely for the sake of argument, and is based entirely on my own knowledge faith, which happens to come in the form of Lutheran Christianity). There are a few assumptions that are made by most Christians regarding God:

1. God is Omnipotent (all-powerful).
2. God is Omniscient (all-knowing).
3. God is absolutely good.

Note that #3 doesn’t actually mean “all-good” for an individual. That is to say, what could be good for the universe as a whole, might not be good for me individually. This is usually phrased along the lines of “God has a plan” or “God works in mysterious ways” – indicating that we can neither expect that His plan is individually good for us, or that we can even understand His plan.

Now, if we take the logic that Penny was talking about in the snippet, and apply it, along with these axioms, we come up with the following train of thought (note that ‘virtuous’ and ‘good’ would have to have some definitions in this context. I save the definition of ‘good’ and ‘virtuous’ as an exercise for the reader): If God is all-knowing and absolutely good, it means that He will always take the most virtuous course of action, given a set of actions. Given a set of actions, there is always one action which is more good than the other actions. However, some actions are outside of the abilities of the one making the choice to act. Since God is all-powerful, no actions are outside of his abilities. Thus, there will always be a single choice, given a set of choices, which is absolutely good and virtuous, and which is within God’s power to act upon. It is therefore inherent in these axioms that God has a single choice which He will make at any juncture. Thus, it is impossible that He can choose to do anything aside from these choices. This is pretty much the definition of lack of free will. Thought of another way, since God is perfect, there is, at every juncture, only one perfect choice, given all possible sets of all possible actions. This leads us to the same conclusion as before, only with ‘absolutely good’ replaced by ‘perfect’ in this context.

So, I found this incredibly interesting. More so, because we, as Christian Protestants believe, are created from God. But, we (seemingly) have free will. So, how can an entity that lacks free will create an entity that has free will? Talk about a mind bender. (Of course, there is the possibility that we don’t have free will, and that everything is, at least for us, pre-destined. Perhaps this is a slightly different way of looking at Shakespeare’s famous quote, “All the world’s a stage, And all the men and women merely players.”).

There are a couple of flaws (that I see) in this philosophical argument. One is that we can’t know for certain that there is only one perfect choice. What if there are an infinite number of perfect choices? I suppose, when you’re operating on a plane where you are a supreme being, given a set of infinitely perfect choices, one must ultimately pick at least one of them, and thus, at some level, the deity would require free will.

Another flaw is if there isn’t a single entity – but rather, multiple deities operating in concert (or competition) with one another. In this case, if a deity is going to act, it must perform the most perfect choice available, unless another deity has already made this choice irrelevant (either by performing it itself, or by making a move which would make the previous ‘perfect’ move obsolete). In this case, we get more into a game-theory based philosophical argument. Really, it isn’t a lot different, though, because if the deities are all-knowing, then they will know the moves of one another in advance. It simply eliminates that as a possible choice, and they are back to choosing the most perfect of a set of reduced choices.

Neil Gaiman, one of my favorite authors, has written a lot about gods³ – stories about how gods are really products of human worship, rather than human worship being the product of their actions. I don’t remember seeing an argument to the effect of lack of free will in any of his stories (alebit it may have been treated in passing as part of the existence of The Endless in his Sandman novels – they each have a very specific role, although they don’t seem to lack free will). It would be interesting if he wrote a story or book on this concept.

At any rate, I realize this argument is a bit like the Omnipotence paradox⁴, but it definitely struck a chord in my mind while reading it. I would, for certain, recommend reading the novel. Although, I really hope Lev Grossman makes the series at least a trilogy, as the ending of The Magician King leaves quite a bit to be desired (in the way The Empire Strikes Back leaves you thinking, “What? That’s the end of the movie!?!?”).

I’m always interesting in a good thought-provoking novel, and in that respect, The Magician King definitely doesn’t disappoint.

Notes and Bibliography

[1] There are some spoilers in this post, and I have tried hard to minimize them, but if you have an intention of reading The Magician King, I would recommend doing so now, then coming back to this post at a later date.

[2] Grossman, Lev. (2011). The Magician King (pp. 303). New York, NY: Viking.

[3] If you’re interested in reading more on the existential question of deities, I highly recommend The Sandman graphic novels, as well as American Gods and Anansi Boys.

[4] Omnipotence Paradox (Wikipedia Entry)

Imagine a place where the smartest people get together to discuss and work on issues about which they are passionate, coaxing thoughtful insight and comment from one another to create new things that previously could never have been imagined. Academia, you say? Perhaps. But now imagine that place where the things you build are used by 500 million people worldwide, and where the politics are minimalistic compared to Academia. Mozilla fits this bill. There are quirks, for sure, no company or organization is completely without politics and difficulties. But, everyone in the company is so driven to make the user front and center that it’s difficult to imagine a product coming out of this environment that wasn’t absolutely awesome.

The Dinosaur Statue In the Main Lobby

Probably the burning question on your mind is… ‘What’s it like working for Mozilla?’ It’s fantastic, that’s for sure. Other than that, it’s difficult to describe, so I thought I’d show some pictures. The first thing I noticed (when I originally came for the interview) was the cool dinosaur statue in the main lobby of the office (pictured to the left). Now, if you’re wondering why the dinosaur statue is there at all, you should probably be advised that the dinosaur logo has been used by Mozilla long before it was an open source company (hint: Firefox actually used to be called by the name ‘Netscape Navigator’). The dinosaur logo came about after the Netscape team chose the name ‘Mozilla’, a concatenation of ‘Mosaic’ (the leading browser at the time) and ‘Killer’, as a codename for the Netscape Navigator browser[1]. The dinosaur was used as part of a logo because of the similarity of the name ‘Mozilla’ and ‘Godzilla’. Unfortunately, this has led to some less-than-informed commentary on Mozilla being ‘The Godzilla of Search Engines’ – see Jono’s Blog post about this if you’d like a laugh.

I have to say, the office in Mountain View is pretty cool. Mozilla runs part of the 2nd floor, all of the 3rd floor, and half of the 4th floor. All of the conference rooms on the 3rd floor are named alphabetically after internet memes, such as ‘Get to Da Choppa’, ‘Rickroll’, ‘ICANHAZCHEEZBURGER’ or ‘Keyboard Cat’.

The 'ICANHAZCHEEZBURGER' Conference Room

The major conference rooms are named after rooms in the Starship Enterprise: Warp Core, Sickbay, and The Bridge being some of these. This may seem pretty geeky to you, but how many people can say they are going to have a meeting in the Warp Core, or The Bridge?

Then there’s my all-time favorite, probably the favorite of many others as well, the lounge. Sticking with the Star Trek theme, the large room toward the front of the office space is aptly named ‘Ten Forward’. The coolest part about this particular room is not that it’s named after a Star Trek lounge (see Memory Alpha for an explanation of Ten Forward, if you don’t know what it is), but that it actually looks a lot like Ten Forward from Star Trek: The Next Generation. I know it’s difficult to tell, given that I took an image from the left side facing toward the bar, whereas the image on the right is from the right side facing the bar, but I definitely got the feeling while I was there that this layout was entirely meant to remind one of the Starship Enterprise.

Mozilla's Version of Ten Forward

Ten Forward on the NCC-1701D

There’s definitely an atmosphere of fun. I’ve never before seen so many Firefox logos. There’s even one made from Legos!

All throughout the office space, there’s the feeling that you’re in a place where cool things happen. There’s a lot of pride taken in the end product, and in the fact that the users are front and center when designing the product. I can honestly say I’ve never seen so many people (outside of Google or Walmart, but those are different stories) who are genuinely excited to be in the office working. I really got the impression that the folks at Mozilla are dedicated to furthering the web, whether it be through the development of a stable, user-friendly, feature-rich, free (as in freedom) browser or email client, or simply through furthering the knowledge that one has gained in technical endeavors and relaying that to others. I am excited to be a part of this world, and hopefully someday I’ll be able to describe to younger generations of software developers just what it was like to have the freedom to develop in such an environment.

[1] http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/