Planet Mozilla Interns

Jez Ng: Announcing Doppio: A JVM in Coffeescript

Tue, 01 May 2012 16:21:05 +0000

Doppio is a JVM implementation in Coffeescript. I worked on it with CJ Carey and Jonny Leahey as part of a class this semester, but we took it a lot further than was required – it now runs Rhino as well as the Java 4 compiler. The about page describes some of the architecture.

I hadn’t quite planned to announce the project yet, but it found its way onto reddit and hackernews, so I guess the cat’s out of the bag. Pardon the rough edges!

Wei Zhou: Location based sex service – this is ridiculous.

wei zhou — Wed, 04 Apr 2012 23:08:36 +0000

OK before I go ahead and make any insightful comments. All of you need to know this popular mobile app: Mo Mo. (Chinese name, 陌陌). It could be directly translated as “strange strange”. And it’s a location based sex hookup software (tho it’s not explicitly explained on their website).

Go ahead and download this app here.

If you know Chinese well – go ahead and read this page, this explains the skills you’ll need to pick up girls.

Everyone else thinks this app is gonna be huge someday and has the potential to beat up weixin (biggest voice instant chatting app developed by Tencent China) and weibo(Largest SNS micro-blogging site that gains facebook like attention in China, developed by Sina).

The reason behind this is quite scientific - it meets human being’s basic desires.

And I just think this is soooo wrong. A digital products’s moral value should be considered into development.

Compared to Path (A very poetic, private and life-enhancing experience), Mo Mo is so wrong in almost every way.

Wei Zhou: What does future digital businesses need?

wei zhou — Wed, 04 Apr 2012 03:50:00 +0000

What does future digital businesses need?

This world goes digital. It’s inevitable, intense and on-going. It is heavily relying on new trends of technology, which fosters to create two identities for each individual(a real self and a second digital self). As these two selves melt together, humanity, culture, nature and business are altered into one single important realm: DESIGN. Why?

The major difference between humans and other animals is that “we as human beings are constantly and reflectively changing and creating things and values”. If we deconstruct human brain we would find the human brain is perfectly designed to align with our worldly visionary pattern: The left brain, the logic one, is constantly seeking efficiency. While the right brain, the emotional one, is relentlessly creating value. It’s not hard to take the assumption that the most valuable human behavior is creating innovative businesses that transforms needs and wants into meaningful realities. We believe a business model describes the rationale of how an organization creates, delivers and captures value. A designer’s job is to extend the boundaries of thought, to generate new options, and, ultimately, to create value for users. This requires the ability to imagine “that which does not exist.” We are convinced that the rolls and attitude of the design profession are prerequisites for success in the business model generation. We can boldly assume the future business practitioners needs both knowledge of business and design to create truly innovative and successful digital products.

SMALL and HUMAN. Information technology rapidly reshapes the world and renders it as a flat and mash-able space. Technology and resources become less and less important factors for business creation. IT starts to penetrate human nature and immerses into every single aspect of daily lives. We conclude that a potential successful business model needs a solid and careful observation of human wants and needs. If a small business model can solve a tiny problem in a set environment – it could be used as a independent pattern for successful value creation. It contains a timeless value that can be used directly or replicated in a similar environment. We then assume the user experience design associated with that pattern is positive and with a guaranteed business value in it. Venture capitalists love these small and human business ideas.

Everyone is entrepreneur. This concept is originated from a pure fact: we now even see elementary school students creating iPhone apps to bring in extra income. The income tunnel is not entirely related with age, profession or geo. A simple idea with limited capital and human resource could become a marketable business model and potentially bringing in revenue and value.

Value Co-Creation. “Everyone is entrepreneur” is both an concept and a fact. The integration of resource becomes a must. Interdependency is necessary.

In sum. I believe digital business needs three things: Small&human, everyone as entrepreneur and value co-creation.

Ehren Metcalfe: The Dead

ehren — Sat, 24 Mar 2012 18:48:31 +0000

that region where dwell the vast hosts of the dead

Conservatively detecting unused functions in a large codebase requires more information than can be gleamed from a simplistic observation of compilation (using GCC or clang, for example). Functions called by ASM alone are one problem. Functions called only via dlsym are another. These are not insurmountable problems (ASM can be parsed; dlsym accepts a constant identifier).

In addition, mozilla-central contains a large amount of third party code. Removing unused functions in these libraries is at odds with merging upstream changes. There are also large numbers of functions used on one platform (or build setting) but not another. Propagating the appropriate #ifdefs is the solution here but it’s a large task.

I’d like to offer one approach with an eye towards identifying the easiest candidates for removal. This is a combination of some of my existing work, by now admittedly crusty, based on Dehydra and Callgraph, but with a new (too me) simple insight about how to group the members of the subgraph of unused functions: partition them by the “is called by or is a (dead) caller of” relation.

This has the effect that if a false positive is in the results, all functions declared unused because they’ve been transitively called by the false positive get grouped with that false positive.

The output of a tool employing the above is here (source here).

Some notes on the results

The largest partition consists of 541 nodes (warning: giant file). It is the result of a single false positive, legacy_Open, called only via PR_FindFunctionSymbol, a dlsym wrapper. I have attempted to mitigate these situations by colouring green those functions having __attribute__(visibility(“hidden”)) (visibility specified in the flags passed to GCC is also detected). The count of functions having this visibility, but not transitively called by a function that doesn’t, is listed in the ‘Transitively Hidden’ column. This info is useless here, however, because the function is exported using a linker map.

It would be interesting to determine if the visibility is always correctly applied; I seem to remember seeing warnings related to the attribute in the past. There may be technical reasons why internal C++ must be visible but, in any case, its visibility does not preclude its removal. Here’s proof. (Also, I calculate that only 17.4% of mozilla-central has hidden visibility).

Moving on, the next largest partition has 507 nodes. They are all in the pulled-in chromium sources however. Apparently, it is genuinely dead because the minimum ranked note, evrpc_register_rpc, is only used in a test case (via a macro).

xptcstubs’ PrepareAndDispatch is an example of a false positive due to ASM (graph here).

Anyhow, I will leave the reader to examine the rest which gets more interesting once you skip the mega partitions.

Potential improvements

The non-callgraph portion of the tool is really just a couple of hacky scripts. The same thing could be implemented against the DXR callgraph (it would need to determine the targets of function pointers in some regard).

On this topic of handling function pointers, note that the call graph of this tool uses the naive address-taken approach. However, it has been ‘optimized’ for the dead code problem by treating the taking of a function’s address inside the scope of a function as a normal call. This makes the call graph useless for practically anything else but I plan on adding an addressTaker/addressTakee table in the future.

In fact, such an addition would make it easier to implement a simple type-based alias analysis where functions noted to have their address taken at global or local scope are matched against pointers using their return type and the type of their parameters (they’d then be pruned from the address taken list). I’m not sure if there would be problems with this beyond unsafe casting.

(More precise attempts at function pointer may-alias analysis would first require an interprocedural control flow graph but that is the simplest step. I’m somewhat tempted to build an ICFG using a hackish framework where visiting a function body = recompiling a .ii file. Were one to go about this, doing some basic form of interprocedural constant propagation and seeing what unused blocks fall out might be more fruitful.)

In any case, I do have some numbers regarding how many more functions one could expect to declare dead by improving alias information. At one point I had made a change that affected the creation of SQL statements building the graph. By mistake I had left out the generation of SQL for all address taking, regardless of scope. This resulted in the tool flagging just over 50000 functions as dead. Given that it currently flags 11479 out of 187081 (6% — seems low), one might expect to find another 2300 (6% of 39000) or so (these numbers include declarations, definitions, gcc builtins and the like). Although come to think of it, that’s a dubious estimate because function scope address taking is already handled in an, albeit, imprecise manner and the number of functions whose address is taken at file scope is only 5949 (using the 6% figure, only 357 more would be found).

Finally, another area of unnecessary conservatism is that, as you’ll note in graphs such as this one, there is an edge going both ways from a method declared in a base class to its override in a derived class (for example, there is an edge from nsSVGAElement::GetLinkState() to Link::GetLinkState() because of a direct function call, but there are also two edges linking nsSVGAElement::GetLinkState() and nsIContent::GetLinkState() because of their inheritance relationship). The edge really only needs to go from the base to the derived though. Once this is changed, the tool will presumably flag instances where a method overrides a base class method but all calls go through the derived implementation.

Brian Krausz: Joining Facebook

Brian — Sat, 10 Mar 2012 06:40:18 +0000

For those who don’t follow my company blog:

GazeHawk Team Joins Facebook

I start at Facebook Monday. As always I’m hoping I have the chance to blog more actively, though we’ll see how realistic that is.

To go along with the new job, I’ve moved my blog over from nerdlife.net to briankrausz.com, and made it look a little more professional. Nerdlife.net will be used to host my pet projects as they pop up. Feedback/suggestions on the redesign are certainly welcome!

Erick Dransch: Signing Mac Builds

edransch — Wed, 29 Feb 2012 18:34:04 +0000

For the past month or so I have been working with Ben to add functionality for the signing of mac builds to our current signing infrastructure. Along the way, we discovered a few things.

What is signing?

Code signing is the process of attaching a digital signature to a piece of software that allows the user’s OS to verify that the software does indeed come from its advertised source, and that it has not been altered since being signed.

Why do we need signing?

Apple’s recently announced Mountain Lion is going to be introducing a few new features. In particular the new Gatekeeper ( Learn more here ) is important for Release Engineering at Mozilla. The default setting for Gatekeeper will *only* allow Applications to be installed from The App Store or from Registered Developers. This means that any applications are not signed by a Registered Apple Developer will show Security warnings when users install them. To ensure that our users have a seamless experience, we need to make sure that our builds are signed correctly according to Apple’s standards.

Gatekeeper isn’t the only reason Code signing is important. Signing verifies that the contents of the Application a) come from the trusted developer and b) have not been altered. OSX also uses the code signatures to determine whether an Application is trustworthy enough to be allowed Keychain access.

Code Signing on OSX

Apple provides a tool for Signing Applications called ‘codesign’. The ‘codesign’ tool will apply a digital signature to an entire ‘.app’ directory.

There are two parts to the signature:

A generated manifest containing hashes of each file in the directory. This file is located in ‘*.app/Contents/_CodeSigning/CodeResources’ and is generated according to a specified rules file (more on this later).
A digital signature attached to the binary specified as ‘CFBundleExecutable’ in Info.plist . This signature also contains the hash of the generated CodeResources file.

‘Codesign’ will verify a given ‘.app’s signature with the -v option. (Be sure to add a second v to get ‘verbose’ output, otherwise the only indication of success is the return code)

$ codesign -vv Firefox.app
Firefox.app: valid on disk
Firefox.app: satisfies its Designated Requirement

Automating Signing

There are a few important details about code signing on OSX which were important to address.

OS Compatibility

Applications which are signed on OS 10.7 (Lion) do not verify on 10.5 (Leopard). Since we want to be running one set of servers to sign all of our builds, we need signed builds to verify on 10.5, 10.6, and 10.7. Luckily, applications signed on OS 10.6 (Snow Leopard) verify correctly on all three versions. We’ll be using 10.6 as the OS on our Mac signing servers at least until 10.8 (Mountain Lion) is released, at which point we’ll need to re-evaluate.

Keychain Popup

Apple’s ‘codesign’ command require an signing key, or ID, which is stored in a Keychain. The ID and Keychain are passed as arguments to ‘codesign’. Unfortunately, ‘codesign’ does not offer any way to enter the password at the command line. If it tries to access a locked Keychain, it will pop up a UI prompt, asking the user for the Keychain’s password.

The bane of release engineers worldwide

Thankfully for those of us who like to automate things, the ‘security’ tool comes to our rescue here. ‘Security’ is another Apple tool that allows command-line access and manipulation of Keychains. And ‘security’ does allow the Keychain’s password to be entered either as an argument or in response to a terminal prompt.

$ security unlock-keychain ***.keychain
password to unlock ***.keychain:

One important thing to note about the ‘security unlock-keychain’ command is that it will only unlock the Keychain for the current security context. In particular this means that if the Keychain has been unlocked by the command being run in a terminal, it is not unlocked for any ssh connections into the machine.
To user ‘security unlock-keychain’ without user interaction, the password needs to be entered at the tty level. Pexpect is one option for python which will wait for the command-line prompt and enter the password.
Now we’ve got all the tools we need to automate signing with the following steps with no user interaction:

Unlock the keychain with ‘security unlock-keychain’ and enter the passphrase using pexpect
Run the ‘codesign’ command
Lock the keychain again with ‘security lock-keychain’

Code Resources

The CodeResources file is used by ‘codesign’ to specify which files in the ‘.app’ directory need to be included in the signature and which files do not. Before signing, the CodeResources file contains a set of rules. After signing, the hashes of all files specified in the rules will be added to the CodeResources file.
This page by Apple provides some description and examples of the CodeResources file, but it fails to explicitly state an important fact: any path specified in the CodeResources rules will be interpreted recursively to include all of the files in that directory and below.
The CodeResources rules must specify all files that need to be included in the final signature. Any files not listed or not in any of the recursive includes will be ignored, and will not have their hashes added to the signed version of the CodeResources file. Any files that are included in a recursive listing of a directory can be explicitly omitted. The file specified as ‘CFBundleExecutable’ in Info.plist is never included in the signed CodeResources file. Instead it is signed directly by the ‘codesign’ command.

The following example will use this simple directory structure:

Test.app
    Contents
        Info.plist
        MacOS
            binary <-- the binary file listed in Info.plist
            anotherfile
        Resources
            omittedfile
            resourcesfile

Before signing, we specify a set of rules in the CodeResources file. These rules will be passed to the ‘codesign’ command when it is called. The following code specifies these rules:

Recursively include the ‘MacOS’ directory and the ‘Resources’ directory
Omit ‘Resources/omittedfile’ from signing.
Include ‘version.plist’ in the signature

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<dict>
        <!-- Recursively include 'MacOS' and 'Resources' dirs -->
		<key>^MacOS/</key>
		<true/>
		<key>^Resources/</key>
		<true/>
        <!-- Omit a file -->
		<key>^Resources/omittedfile$</key>
		<dict>
			<key>omit</key>
			<true/>
			<key>weight</key>
			<real>1100</real>
		</dict>
		<key>^version.plist$</key>
		<true/>
	</dict>
</dict>
</plist>

The after signing, the CodeResources file has a list of the hash of every file specified in the rules. If any of these files are changed, ‘codesign -vv’ will fail and will specify the changed file. Notice that the omitted file does not have its hash listed here, nor does the Info.plist file, which was not included explicitly, nor in any of the recursive includes. The binary file has been signed separately by ‘codesign’ and is not included in this file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>files</key>
	<dict>
		<key>MacOS/anotherfile</key>
		<data>
		K2QRL8qPGNuexZXewkmnMlmcdKU=
		</data>
		<key>Resources/resourcesfile</key>
		<data>
		PhrNXR4JvoBSBHWVsGOxbosr2po=
		</data>
	</dict>
	<key>rules</key>
	<dict>
		<key>^MacOS/</key>
		<true/>
		<key>^Resources/</key>
		<true/>
		<key>^Resources/omittedfile$</key>
		<dict>
			<key>omit</key>
			<true/>
			<key>weight</key>
			<real>1100</real>
		</dict>
		<key>^version.plist$</key>
		<true/>
	</dict>
</dict>
</plist>

That’s it for now

Look for Mac signing servers in the next few weeks at Mozilla. I hope this helps us provide a more seamless user experience (maybe including Keychain access?), and readies us for the release of OS 10.8 (Mountain Lion).

Nick Fitzgerald: Source Code Cartography

fitzgen@gmail.com (Nick Fitzgerald) — Fri, 23 Dec 2011 07:00:00 +0000

I spent the summer at Mozilla working on source maps. Source maps allow one to map the line and column information between an original source and a generated source for debugging purposes. Watch the webcast to learn more!

View Comments

Nick Fitzgerald: Pycco Needs A Loving Home

fitzgen@gmail.com (Nick Fitzgerald) — Wed, 17 Aug 2011 07:00:00 +0000

When I wrote Pycco, it was meant to be a single-serving coding session. It was fun and simple. But then the project started receiving more attention than I ever expected it to. In fact, one year later, I am still getting a pull request every month or so. But the problem is that I no longer have the time to spend nor interest in maintaining the project. I feel bad because a few people are out there dedicating their own precious time while writing code to make Pycco better, and I'm not holding up my end of the bargain by reviewing that code and merging it back to the project.

If anyone would like to adopt this project and give it a loving home, please leave a comment here and we can work it out. I'd hate to see the project rot away while there are definitely still a few people interested in it.

View Comments

Jez Ng: Using git with mozilla-central

Fri, 22 Jul 2011 01:35:45 +0000

I like git more than hg, so it made me pretty happy to discover Chris Double’s git mirror of mozilla-central. Here are a couple of scripts and tips that make the git experience more awesome:

git branch-diff

Paul O’Shannessy has scripted a couple of custom git commands. One I like very much is git branch-diff <branch>, which does a diff between <branch> and its last point of merge with master branch. Very convenient if you’re working with one bug per topic branch.

Exporting hg-format patches

Since I don’t have level 3 commit access yet, I often find myself asking others to check my code in. Since most of them use hg, I’ve written two scripts to create the appropriate patch files. git hg-patch <commit 1> <commit 2> creates a patch of the difference between the two commits, and git hg-branch-patch <branch> is a similar command that wraps git branch-diff.

Faster tab-completion in zsh

One thing that bothered me very much was the slow tab-completion in zsh. git checkout <tab> would take forever on m-c. Thankfully there’s an easy hack-fix here.

I’d love to hear about other useful git tricks that you guys use.

Jez Ng: Efficient MXR Navigation with mxr-vim

Mon, 11 Jul 2011 22:05:44 +0000

MXR is incredibly useful for doing code archaeology, but it is also kind of slow. I often find myself with this annoying workflow:

1. Search MXR for identifier
2. Click on a result (nsISomething.cpp line 500)
3. Wait for a 6000-line file to load
4. Decide that you want to edit this file
5. Open this file in vim

mxr-vim is an addon that allows you to launch vim directly from MXR. My new workflow now is:

1. Search MXR for identifier
2. Click on a result
3. Result opens in vim.

Setup

mxr-vim can be downloaded here. Alternatively, you can clone the source from github and build it by activating the Addon SDK and typing cfx xpi.

mxr-vim needs to know three things:

1. where the source tree on your disk is located (no default; mine is
   ~/src/mozilla-central)
2. where your shell is located (default /bin/sh)
3. where vim is located (default /usr/local/bin/mvim)

These pieces of information can be set via about:config. They are located under extensions.mxr-vim.*

To complete the circle of mxr-vim integration, I use the following mappings in my .vimrc, which fire off a search of MXR for the word under the cursor:

nnoremap <c-f>i :! open -a Aurora.app 'http://mxr.mozilla.org/mozilla-central/ident?i=<cword>'<cr><cr>
nnoremap <c-f>f :! open -a Aurora.app 'http://mxr.mozilla.org/mozilla-central/search?string=<cword>'<cr><cr>

Jez Ng: Tabs now land where you drop them

Fri, 08 Jul 2011 23:20:23 +0000

Previously, detaching a tab in Firefox would simply create a new window right top of the first, regardless of where you actually try to drop it. Now that bug 465186 has been fixed in Aurora, the new window is created right under your mouse. (If you try to detach a tab from a window with only one tab, we’re smart enough to move the whole window instead of creating a new one.)

When Frank Yan finishes bug 455694, we’ll have awesome animations to go along with the new tab behavior.

Happy dragging!

Jez Ng: Animating about:memory

Wed, 06 Jul 2011 13:50:47 +0000

I did a little hack to about:memory to make it update regularly and color-code the changes. The rows in the treeview glow red when memory rises and turn green when it drops back down. Here’s a little screencast showing it in action (switch to fullscreen to see it more clearly). You can observe the GC at work a few seconds after tabs get backgrounded or closed.

Vimeo

about:memory animation from Jezreel Ng on Vimeo.

Nikhil Marathe: Interning

noreply@blogger.com (nikhil) — Wed, 22 Jun 2011 15:26:14 +0000

DA-IICT 3rd year students usually do an internship in the summer. Good industrial internships are always hard to come by, although the situation is way better in IT than in other, more resource-intensive disciplines. 10 interviews, a hundred or so e-mails and lots of forms later this is part guide, part my internship search story. The first thing you’ve to decide is what kind of company you want to intern at. Most companies will have menial code jockey jobs which you don’t want. This is my first blog post typed out on the n900 for the most part while waiting for a flight home at Ahmedabad airport. What a keyboard!

Why not a GSoC again?

Having over two years of FOSS contribution and 7 years of usage and having done a GSoC previously, I could have done one again. While a GSoC is an invaluable experience, it is not the same as an internship. GSoC is excellent at improving e-mail communication skills and long distance collaboration and giving a feel of the open source development style. But it is not the same as going to office, talking to people, having lunch together and hanging out. In addition internships usually will be in a city or country other than the one you live so it can be a great excuse to explore a new place. So if you’ve already done a GSoC, getting a different sort of experience is way more important in my opinion. So I didn’t apply at all this year. Besides I was confident that my experience would serve me just as well to get into the kind of companies I wanted.

Have a good CV

Spell-check, design it well and put in only relevant things. If you are a good singer don’t put that in just to have stuff to show in a IT company. On the other hand positions of responsibility should always be highlighted. FOSS contributions top the charts in startups and other ‘cool’ or cutting-edge companies.

Start early

By luck or resolve my best move was starting to look for internships in December for an intern to start in May. Keep in mind that HR departments are busy places, resumes can take time to process and sometimes do get lost. Wait for a week for a reply when you submit your CV, then ping them aggressively on IRC, Twitter and e-mail to ensure you aren’t forgotten. Interview procedures can take upto a month and for international interns there are visa procedures that take time. Finally you are likely to get rejected by the first few and you should have time to apply for more. In any case companies with established internship programs have information available on their websites and start each season with prior planning.

Decide what you want to work on

The first two companies I applied to were Google India and RethinkDB. The RethinkDB folks were very positive about international interns. I had two interviews in early January which went ok. I was rejected, which in hindsight I know was due to me not really being passionate enough about what they were doing. So I narrowed down to the two specific interests I currently have.

Javascript engines and low level APIs
concurrency, distributed networking and web-scale computing.

and decided that I would only approach companies based on these work areas.

Stick to a few companies.

Interviews are always stressful because you have to think on the spot. If you are trying internationally they will be at very bad times (most of mine were at 6am and 10pm). Companies hiring solely on phone interviews will usually take atleast three interviews. In addition you will have to prepare atleast a bit for them. This adds up to a lot of things to do. So stick to a few companies at a time. Prioritise which company you want to work for if hired by multiples companies. When you agree for interview times, make sure you convert timezones properly and that you don’t have any appointments more important than the interview at that time. Finally, remember you have a life too :) I gave one of my interviews at conf.kde.in, and another during Synapse. At such times be very careful with scheduling.

Research

Off-campus internships (ie. ones you find on your own) are the way to go. The college will always aim for what is good for a majority of students, or towards established companies. But if your area of interest is niche you can do a much better job looking on your own.
Try to find out as much as you can about what interns do in the company. With some searching you can usually find blog posts of former interns which can be very informative. Talk to people in the domain. If you are a FOSS contributor ask fellow IRC users about intern opportunities or experiences.
Based on my areas I finally applied to:

RethinkDB
Google India
Directi
Opera
Mozilla

I was very lucky to meet a former Mozilla intern at the MIT Media Lab COEP workshop in late January. Without that I would never have thought of it as I was unaware of the Mozilla Foundation and Mozilla Corporation dichotomy.

Be confident, but ready for rejection.

During the interview what matters most is being able to keep up a continuous stream of conversation going to show that you are capable of thinking. So if you tend to think mentally for 15 minutes and then produce the answer in a flash, it would be good to think out loudly. If you are confused, clarify the question, it does not penalise you. Remember that in interviews no one expects perfect code, and classes and documentation. If you miss edge cases thats fine, performance – not an issue until the interviewer actually asks you for a better algorithm. Graph and string algorithms are a favourite of interviewers. For algorithms the TopCoder tutorials are a good read. For C++, the C++ FAQ is invaluable. In fact I suggest always having that page open during the interview. For C++, templates and virtual functions tend to be a question spot. In addition, know the warts and good points of your favourite language. If you have FOSS projects, be ready to explain what they are, and how you implemented them. One favourite interviewer question is, “What was the hardest part to implement?”. In such a case be prepared to explain in as general terms as possible, since the APIs you use may not be something the interviewer has experience with.
A typical telephone interview will last 30 minutes to an hour. Half of that time will be the technical interview and the other half when you can chat with the interviewer. A full recap of my interviews with each company are beyond the scope of this article, but suffice to say that I was lucky to have extremely nice interviewers. Google insists on algorithmic questions which you’ll usually answer via a shared Google Docs. Remember that in a phone interview it is important to know how to approach the problem. Since you have access to a computer, once you know what to do, you can look up your existing code or use the internet. Just keep discussing the approach on the phone and speak with utmost confidence. The interviewer may try to misguide you. For Mozilla and Opera the interview was purely on former experiences and some C++ stuff. Use the chat time later well. Good questions to ask are about prior interns, what they do, how they find the company etc. If you know their name before the interview, see if you can find out about them on the internet.

Get to know and learn from the interviewers

My most memorable interview was the fourth one with Mozilla when due to some daylight savings confusion I was woken up by the interview call. Desperate to get myself sane, I asked him a few questions before I let him start the technical round. After that I spent 45 minutes discussing spidermonkey and Mozilla’s general plans with Luke Wagner. It was a very humbling experience. If you can show the interviewer that you are passionate about the products and do you homework, there final review is much more likely to be glowingly positive. Finally they can tell you about some implementation features, constraints etc. that can be interesting to know about even if you never join that organization.

Congrats, now get to work!

After all this, I hope you get selected somewhere. I can’t really write the part about how to handle it if you get rejected. So what happened to me?
The response order was:

RethinkDB reject – January 16, 2011
Directi reject – March ??, 2011
Mozilla accept – March 22, 2011
Google accept – March 25, 2011
Opera reject – March 28, 2011

based on my interview experiences, stipend and location I opted for Mozilla Corporation! When I got the confirmation on March 22, it was unbelievable but I guess all the hard work paid off. The Mozilla folks have been really nice and punctual throughout the process, and damn they know how to take care of their interns :) I think a series of posts will of course pour out of me regarding the internship in the coming months. I will be working at Mozilla HQ in Mountain View, California from next week to the end of July. My first assignment is typed array implementation improvements in JavaScript so Firefox can perform WebGL, audio/video and binary data better. With Mozilla I found a great, FOSS friendly company, interesting work dealing directly with JavaScript engines, a new city to explore right in Silicon Valley and going to the United States of America for the first time ever. I couldn’t have asked for more :D

A note to DA-IICT students specifically! Our placement cell has an odd policy where when you apply for one or more internships through the placement cell, you are bound to accept the offer of whichever company accepts you first. So if a ‘better’ company delays their interviews, and a ‘lesser’ company hires you already, you are screwed.

Posted via email from nikhil's posterous

Nick Fitzgerald: Operational Transformation Part 2: Operations

fitzgen@gmail.com (Nick Fitzgerald) — Tue, 05 Apr 2011 07:00:00 +0000

This is the second post in a series I am doing on the real-time collaboration algorithm Operational Transformation (OT). The first post was an introduction to OT and this series. There are two repositiories on GitHub to follow along with:

operational-transformation - This is an Operational Transformation library for plain text which assumes nothing about how the storage backend for your documents works, what kind of frontend you will be using, etc. This is where most of the ideas discussed in this series will be implemented.
operational-transformation-example - This repository contains an example application which takes advantage of the OT library.

However, before we can start transforming operations and providing a real-time experience for our users, we have to decide how to represent and generate operations. That is the topic for this post.

Representing Operations

We will be representing operations as a stream of simple edits. As Daniel Spiewak notes in Understanding and Applying Operational Transformation, this is perfect for the type of automated processing we will be doing inside the xform function. Our operations will be made up of the following three types of edits:

retain(n) - Copy n characters from the old version to the new one.
insert(subsequence) - Insert subsequence in to the new document, without changing where we are indexed in the old document.
delete(subsequence) - Advance the position we are indexed in the old document by the length of subsequence, without copying subsequence in to the new document. The reason we pass a subsequence instead of a number is soley so that we can assert we are deleting the proper subsequence and throw an error if we are not.

To create the document "Hello, World!" from the document "hello world", you would apply the following operation:

[ delete('h'),
  insert('H'),
  retain(4),
  insert(','),
  retain(1),
  delete('w'),
  insert('W'),
  retain(4),
  insert('!') ]

Note that the edits start at the beginning of the old document and finish at the end of it. If an operation doesn't affect the whole document, the last edit in the operation should be retain(length of remaining document).

Calculating Operations

First off: you don't want to add listeners to keyboard and mouse events! Imagine all of the edge cases and browser incompatibilities: would you successfully handle Ctrl-a or Shift-up-arrow followed by backspace? Yikes, I don't even want to think about all of the common key combinations (not to mention the differences between key combinations across OSs).

No, instead you want to take two versions of the document and programmatically generate a list of operations which transform one version to the other. Fortunately, comparing sequences and determining their similarity or difference is pretty much a solved problem in computer science.

Levenshtein Distance

Levenshtein distance (sometimes also referred to as edit distance) is defined as the number of edits required to transform one sequence in to another sequence. Classicly, these edits are either an insertion, deletion, or substitution of a single item in the sequence. Comparing sequences of characters (or, as we know them, plain text documents) is a classic use case for Levenshtein distance. Variations of Levenshtein distance are also often used in bioinformatics to compare sequences of DNA.

The Levenshtein distance between "WUTANG" and "MUTATION" is five, because it would take three substitutions and two insertions to transform "WUTANG" in to "MUTATION":

"WUTANG" -> "MUTANG" (substitution)
"MUTANG" -> "MUTATG" (substitution)
"MUTATG" -> "MUTATI" (substitution)
"MUTATI" -> "MUTATIO" (insertion)
"MUTATIO" -> "MUTATION" (insertion)

The algorithm for calculating Levenshtein distance runs in O(m * n). Here it is presented in psuedo code:

LevenshteinDistance( s[1..m], t[1..n] ):
  d = matrix[0..m, 0..n]

  # The distance between the empty string and another
  # string is equal to the length of the other string.
  for i = 0 to m:
    d[i, 0] = i
  for j = 0 to n:
    d[0, j] = j

  for j = 1 to n:
    for i = 1 to m:
      if s[i] is equal to t[j]:
        d[i, j] = d[i-1, j-1]              # No edit
      else:
        d[i. j] = minimum( d[i-1, j] + 1,  # Deletion
                           d[i, j-1] + 1,  # Insertion
                           d[i-1, j-1] + 1 # Substitution
                         )

  return d[m, n]

However, the number of edits is immaterial in our application; we care about what the edits are. Modifying the algorithm to return a list of edits instead of the number of edits is trivial: just store lists of edits in the d matrix rather than numbers.

Here is my JavaScript implementation of calculating an operation on GitHub.

Possible Improvements in Calculating Operations

Currently, every insert, delete, and retain only handles one character at a time. We could save some bandwidth if [retain(1), retain(1), retain(1)] was simplified to [retain(3)] and [insert('c'), insert('a'), insert('t')] to [insert('cat')], etc. I chose not to do this simply because it has been easier this way, and I haven't ran in to any problems so far.
In practice, usually only a small part of the document has changed since the last comparison. Humans don't randomly change documents in random places; we add new sentences and delete old paragraphs. Knowing this, we can cut down on the size of our problem domain by reducing the area of the strings we are looking for edits in.
```
PrefixPostfixOptimizedOperations(s[1..m], t[1..n]):
  prefix = []
  i = 1
  while s[i] == t[i] and i <= m and i <= n:
    push(prefix, retain(1))
    i = i + 1


  postfix = []
  j = 0
  while s[m-j] == t[n-j] and j < m and j < n:
    push(postfix, retain(1))
    j = j + 1


  return concatenate(prefix,
                     Operations(s[i..m-j], t[i..n-j]),
                     postfix)
```
I haven't implemented this optimization yet, but I probably will have to eventually. In my preliminary testing, O(m * n) is just too slow for large values of m and n, and causes the browser's UI to be unresponsive while the computation is performing.
My representation of the individual edits in the stream of edits which make up an operation could be optimized. Currently, each edit is represented in an array of two elements where the first is the type of edit and the second is the associated data. For example, insert('toto') is represented as ['insert', 'toto'] and retain(4) is ['retain', 4]. This isn't the most memory efficient, bandwidth efficient, or "JavaScripty" solution; it's just the first I thought up and implemented. Eventually, I will probably update it so that each edit is a string and the first character is the operation type, while the rest of the string is the associated data. So, insert('toto') would become 'itoto' and retain(4) would become 'r4'.

Update: I have now implemented the string representation.

Applying Operations To a Document

Applying operations to a document is straight forward. See the apply.js file in the operational-transformation GitHub repo.

Next Up

In the next part of this series, I will describe the xform function, and how it transforms a pair of operations so that two documents can be kept in sync.

References

Levenshtein Distance on Wikipedia.
Understanding and Applying Operational Transformation by Daniel Spiewak.
Introduction To Algorithms section 15.4 on the Longest Common Subsequence algorithm by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein. (Levenshtein distance and Longest Common Subsequence are very similar to the point of being two faces of the same problem).

Update: If you don't have the book (or just want more), MIT has provided the video recorded lecture and notes by Charles E. Leiserson.

View Comments

Nick Fitzgerald: Operational Transformation: An Introduction

fitzgen@gmail.com (Nick Fitzgerald) — Sat, 26 Mar 2011 07:00:00 +0000

I have been researching the optimistic concurrency algorithm for real time collaboration known as Operational Transformation (OT). OT is the algorithm used by many real time collaborative editors that you see today, such as Google Wave, Google Docs, Etherpad, Mockingbird, and Novell's Vibe Cloud (formerly known as Pulse). This is the first in a series of posts I will be writing on OT.

As I am writing this series, I am I also implementing the ideas being discussed in JavaScript. I have made two public repositories on github:

operational-transformation - This is an Operational Transformation library for plain text which assumes nothing about how the storage backend for your documents works, what kind of frontend you will be using, etc. This is where most of the ideas discussed in this series will be implemented.
operational-transformation-example - This repository contains an example application which takes advantage of the OT library.

Why Operational Transformation?

Operational Transformation is a good fit for web applications because it is optimistic. Consider the scenario where multiple clients are concurrently editing the same document hosted on a central server. The goal is to provide a real time editing experience so that the clients can collaborate as they change the document, and each client's changes are preserved.

OT optimisticly assumes that whatever operations are currently being applied to the document on any given client will not conflict with any operations that might be applied at this same moment by one of the other clients. Conflicts can't be discovered, let alone dealt with, until some point in the future. This frees operations to be applied to the document as they are generated by the client and the user interface is updated in a responsive manner. There is no need to request a lock on the document from the server.

Locking, and other pessimistic concurrency algorithms, are unrealistic within the constrains of the web application environment because of the high latency associated with communicating round trip with the server and other clients. The majority of clients would be powerless to change the document for many seconds at a time while another client has acquired the lock. This is a recipe for bad user experience.

Furthermore, it is natural to stop thinking of changes at the document level, and instead focus on individual operations being applied. Operations are much more malleable than whole documents. If two clients change their documents such that they become out of sync, how do you bring them back to the same state while preserving both changes in a meaningful way? In comparison, it is easy to adjust the index of a single insertion operation on client A because of a deletion from client B, and then share this adjusted operation with client B so that both clients' documents are in the same state.

Finally, Operational Transformation allows us to only consider two operations at any given time. Rather than fret about how client A's changes will affect client B's document after client B just applied client C's recent changes, we only compare one client's document and the central master document at any given time. Not only is this much more simple, with many less edge cases, but it also directly maps on to the client/server architecture of the web.

A Bird's Eye View of Operational Transformation

At the heart of the aptly-named Operational Transformation is the transformation of operations such that they can be applied to documents whose states have diverged, bringing them both back to the same state. In other words,

xform(a, b) = {a', b'}

such that if applying the operation a followed by the operation b' to document Y yields document Z, applying the operation b followed by the operation a' to document Y must also yield document Z.

The one caveat to this rule is summarized in the paper High Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System:

Of course, there are many possible functions that have this property. For example, the function xform(c, s) = {delete everything, delete everything} would satisfy our ordering property, but would probably not satisfy many users! In general, the transforms should try to find some "reasonable" way to combine the two operations into a final effect.

However, xform only handles the case where each side has diverged by one operation. In practice, it is hardly ever the case that we only consider divergences of one. To rectify the situation, xform will be called repeatedly, as you traverse across document state space until both the client and server's documents reach the same state. I will expand on these transformations in a later post in this series. In the meantime, see Understanding and Applying Operational Transformation for more.

Resources

Read the following papers and articles to learn more about Operational Transformation and to prepare for the rest of this series.

High Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System

Authored by David A. Nichols, Pavel Curtis, Michael Dixon, and John Lamping.

This is the paper that I have seen referenced most often by other papers and articles discussing Operational Transformation. It is very well written and approachable, and was the first paper published describing OT as we know it today.

Understanding and Applying Operational Transformation

Authored by Daniel Spiewak.

This is a great article written by one of the developers working on Novell Vibe Cloud (previously named Pulse). Vibe Cloud implements the Wave Protocol, and the article reflects this by focusing on Wave's implementation of OT and Google's contribution to OT theory with the idea of composing operations. Nevertheless, this piece is incredibly informative and provides a very detailed walkthrough of the one of the more difficult transformations you will have to do.

Wikipedia on Operational Transformation

Wikipedia's article on OT is very good, but not as approachable as either of the two resources above. I suggest reading them first and then only reading the Wikipedia entry once you feel you feel comfortable with the others.

Very Simple Operational Transformation in Erlang

This was a very simple implementation of OT that I wrote in Erlang. It is written in somewhat of a Literate Programming style, so it should be fairly easy to follow along with. I will be going in to much more depth in this series, and with the JavaScript implementation, than I previously did in this project.

The goals of the Erlang project was to prove to myself that I understood OT, could implement a simple version of it, and pass all of my tests. The goals of this series of blog posts, and accompanying JavaScript OT implementation, is a production-worthy real time collaboration app.

Up Next

The next installment in this series will focus on how to generate the operations that Operational Transformation works with.

Update: Part 2 is posted.

View Comments

Nick Fitzgerald: Javascript Timer Congestion

fitzgen@gmail.com (Nick Fitzgerald) — Tue, 08 Mar 2011 07:00:00 +0000

Quick Summary of how JavaScript Timers Work

There are two functions that browsers expose to the JavaScript environment for asynchronously executing functions after a a specified amount of time in milliseconds: window.setTimeout and window.setInterval. Timeouts occur once, intervals repeat. However, JavaScript is single-threaded (with the exception of Web Workers) and so if a timer is set, but then the process blocks, the callback can be delayed or even fail to ever be fired. For example, the "hello" message will never be logged below.

window.setTimeout(function () {
    console.log("hello");
}, 1000);
while (true) ;

The thread within which the JavaScript interpreter runs is also shared by the browser's UI and rendering systems. This means that not only will the above message never be logged, but that the browser will be unresponsive and appear to be frozen to the user.

For more in depth discussions about the details of how JavaScript timers work, see the references.

Timer Congestion

It also follows from the single threaded nature of JavaScript that only one timeout can fire its callback at any given moment in time. If another piece of JavaScript is already executing when a timer is scheduled to run, the timer's callback is queued to run when the interpreter is done with the code it is currently executing.

It is possible to set so many timers expiring at about the same time that they just keep queuing up one after another; never giving the browser's UI a moment to update. I am going to refer to this as "timer congestion". I first read about this phenomena in Nicholas C. Zakas' book High Performance JavaScript (HPJS from now on). It was mentioned only in passing, however I found the idea fascinating. HPJS refers to research conducted by Neil Thomas while he was working on the mobile version of GMail.

Neil shared his research and the process that led him to do that research in his article Using Timers Effectively.

When I first started working on the new version of Gmail for mobile, the application used only a couple of timers. As we continued adding more and more features, the number of timers grew. We were curious about the performance implications: would 10 concurrent timers make the app feel slow? How about 100? How would the performance of many low-frequency timers compare to a single high-frequency timer?

He summarized his results as follows.

With low-frequency timers - timers with a delay of one second or more - we could create many timers without significantly degrading performance on either [an Android G1 or iPhone 3G]. Even with 100 timers scheduled, our app was not noticeably less responsive. With high-frequency timers, however, the story was exactly the opposite. A few timers firing every 100-200 ms was sufficient to make our UI feel sluggish.

Thomas goes on to explain why they decided to hardcode their callback functions inline, rather than create a registration-based system:

Keep in mind that this code is going to execute many times every second. Looping over an array of registered callbacks might be slightly "cleaner" code, but it's critical that this function execute as quickly as possible. Hardcoding the function calls also makes it really easy to keep track of all the work that is being done within the timer.

However, by sacrificing the accuracy of when timers fire, it is possible to attain the clean architecture Thomas refers to and also guarantee that many timers will not cause the page to feel sluggish.

First, restrict yourself to a single recursive timeout loop which you can register tasks with. Use window.setTimeout instead of window.setInterval to ensure that the browser has enough time to update between every single iteration. This is necessary because window.setInterval(callback, ms) tries to fire its callback every n milliseconds rather than providing n milliseconds between each time it fires. Thus, if your callback takes longer than n milliseconds to execute, it will be repeatedly executed back to back, never allowing the browser a few milliseconds to update the UI.

Second, while looping through the tasks registered with the timeout loop, keep track of how long the loop has been running. Before the loop has been running long enough to negatively affect the user's experience, yield to the browser with window.setTimeout and then pick up the loop where you left off after the browser has had a chance to update the UI.

By doing these two things, when you have a large number of tasks firing their callbacks concurrently they will not make the browser feel sluggish like many timers expiring at the same time would. Instead, the tasks will only be pushed back and executed at a later time than they had been scheduled for to ensure that the browser can respond to user interaction. In extreme cases of congestion, it would be possible for a task pushed back for so long that it will effectively never be called. Even in this worst case scenario, it is better than the alternative: an unresponsive browser.

Introducing Chronos

Chronos is an implementation of the techniques described above which also mirrors the HTML 5 WindowTimers interface.

interface WindowTimers {
  long setTimeout(in any handler, in optional any timeout, in any... args);
  void clearTimeout(in long handle);
  long setInterval(in any handler, in optional any timeout, in any... args);
  void clearInterval(in long handle);
};

This means that to switch existing code from using window.setTimout and friends, all you need to do is include Chronos on the page and replace window.setTimeout with chronos.setTimeout, etc to take advantage of what Chronos has to offer.

Putting Chronos to the Test

I have put together a test page for Chronos where you can define how many concurrent timers to execute on the page, how long each one should block for, and whether to use Chronos, or the native timer functions. I have tested the page on my MacBook Pro (Firefox 3.6 and 4 beta, Safari 5, and Chrome 9), as well as on my Motorolla Droid 2 running Android 2.2. In all cases, the browser's UI updated more smoothly when using Chronos than without whenever there was enough of a workload for any type of sluggishness to occur.

References

Using Timers Effectively by Neil Thomas
High Performance JavaScript by Nicholas C. Zakas
WHATWG HTML 5 Specification for Timers
How JavaScript Timers Work by John Resig
Understanding JavaScript Timers by Angus Croll
setTimeout Patterns in JavaScript by Yours Truly

View Comments

Jaclyn Fu: Hello world!

Jaclyn Fu — Sat, 26 Feb 2011 21:49:34 +0000

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

Michael Sullivan: Doing whole tree analysis with Dehydra

sully — Wed, 16 Feb 2011 06:02:02 +0000

Introduction

In this post I discuss how I used Dehydra to do analysis of the entire Tracemonkey tree.

Note

I talk briefly about some Tracemonkey things to motivate what I used Dehydra for, but a knowledge of Tracemonkey is not required to appreciate the main point of this post.

The problem

One of the optimizations in my Tracemonkey inline threading work (Bug 506182), which I will be posting about later, is “PC update elimination”. Doing this requires figuring out which functions out of a certain set can access the JavaScript virtual program counter (which is stored as a variable named “pc” in a class named “JSFrameRegs”). There are about 230 functions in this set, so doing it manually is impractical.

The solution

I used Dehydra to help solve this problem mechanically. Dehydra is a static analysis tool built on top of gcc. It allows the semantic information of a program to be queried with JavaScript scripts.

First steps

By providing a process_function() function in a Dehydra script, I can inspect the variables used and the functions called by every function. Determining whether the pc is used is as simple as seeing if any variable has the name “JSFrameRegs::pc”.

function process_function(f, statements) {
  for each (let v in iterate_vars(statements)) {
    if (v.name == "JSFrameRegs::pc") {
      print(f.name);
      break;
    }
  }
}

The catch

Unfortunately, this isn’t quite what we want. This will tell us which functions directly use the PC, but not which functions can indirectly use it through function calls. Figuring out that requires looking at all the functions called by a given function. This is not straightforward with Dehydra, as functions frequently call functions declared in other files. Dehydra is a gcc plugin and is driven by the normal build system. Thus, it works on a file-by-file basis. Normal builds output an object file for each source file and rely on the linker to stitch it all together. Likewise, to do a whole tree analysis we need to output per-file information and then link it together later.

Collating the data

I reworked my process_function() to determine both whether the PC is directly accessed and the set of functions called directly. This data is then printed with the dump() function (discussed below):

function process_function(f, statements) {
  usespc = false;
  calls = {};

  for each (let v in iterate_vars(statements)) {
    if (v.name == "JSFrameRegs::pc") {
      usespc = true;
    }
    if (v.isFunction) {
      calls[v.name] = true;
    }
  }
  dump(f.name, usespc, calls);
}

The remaining question is how to structure our output. Outputting it as data declarations for some programming language seems like an easy way to do it. Since I am more comfortable with Python than JavaScript, I output the data as Python code:

function dump(name, usespc, calls) {
  s = '@@@';
  s += '\t"' + name + '": ({';
  for (let f in calls) {
    s += '"' + f + '", ';
  }
  s += '}, ' + (usespc ? "True" : "False") + '),';
  print(s);
}

We create a dictionary mapping function names to tuples of the set containing the name of each function called and whether the PC is accessed directly. When doing a build, the output will be intermixed with output from other parts of the build infrastructure, so we tag all of the output lines with ‘@@@’ so that a post-processing shell script can recognize and extract the relevant data.

The relevant bit of the shell script (which is linked below), is:

(echo "callgraph = {";
cd "$DIR" && make -s CXX="$CXX" 2>&1 | grep ": @@@" | cut -d@ -f4-;
echo "}")

This data gathering method could easily be modified to analyze different problems. For simplicity, I extracted only the relevant information and converted it directly to Python data structures. Another approach would be to dump all of the function information (probably in JSON), allowing a later analysis script access to everything.

The analysis

I wrote an analysis script in Python to process the data. The input is a large dictionary, mapping functions to the set of functions they call and whether they touch PC directly.

I viewed the problem in terms of graph theory. The mapping from functions to the functions they call is simply a directed graph. Each function is a node and there is a edge from a function to each function that it calls. In this graph, some nodes (those that touch the PC) are initially marked. We want to color red every node that has a path to one of the initially marked nodes.

Another way to state this is that a node is colored red if and only if it is either initially marked or has an edge to a red node. Doing the coloring is a simple problem. We simply compute the reverse graph (reversing all of the edges) and then perform a depth first search of the reverse graph starting from the marked nodes. Every node we see, we color red.

When doing the DFS, we keep track of which node we first reached a newly colored node from, so that we can determine a path back to an initially marked node.

My implementation also supports providing a predicate to exclude certain nodes from the search, in order to investigate how fixing certain functions to not require the PC would change things.

Caveats

While my method is useful, it is not perfect. It can produce both false positives and false negatives.

False negatives result from polymorphism in the form of virtual functions and function pointers. When a call to such a function is made, there needs to be an edge from the caller to all of the functions that could be called. For virtual functions, this is all functions overriding the virtual function. For function pointers, I think this is every function of the proper type that is used in a way that it not a call at some point. It should be possible to address this problem, but at a significantly increased complexity compared to what I have. Fortunately for me, Tracemonkey does not use virtual classes much and does not use function pointers in places where it matters for my analysis.

False positives are a little trickier, and can’t be worked around in general. Consider the following:

void foo(bool bar) {
    if (bar)
        // access the PC
}
void baz() { foo(false); }

Calling baz() will not result in the PC being accessed, but my analysis will report that it can access the PC (since foo() can). Knowing whether a function can actually cause the PC to be accessed is isomorphic to the halting problem and thus undecidable.

The code

My code is available here. make_callgraph.sh expects to find g++ and Dehydra under ~/gcc-dehydra/, as suggested in the Dehydra installation instructions. make_callgraph.sh must be run with its output redirected to callgraph.py. search.py contains both the general search algorithm and code that uses it to analyze functions introduced in my inline threading patch.

Michael Sullivan: Inline threading for TraceMonkey slides

sully — Wed, 16 Feb 2011 05:58:01 +0000

Here are the slides from my end of summer brown-bag presentation: http://www.msully.net/~sully/files/inline_slides.pdf.

Wei Zhou: 2011欢迎故事的纽约和有故事的纽约人

weizhou — Thu, 06 Jan 2011 21:21:59 +0000

2011年的到来，忽然想写一点文字。许久已经没有动笔，有些紧张也有些欣喜。

自认不是一个多愁善感的人，文字或性格也从不曾盲目伤感。但是今天，我想用文字跳舞。是那种忧伤和惆怅的跳。

来美国5年零四个月，读书，生病，读书，工作。今年的圣诞节，我拿到了绿卡，看到告示的那一秒，埋住只有过来人才知道的辛酸，我笑着流泪。3年前的今天，当我躺在病床前被医生宣判无期徒刑的时候，我被告知我要和梦想划上句号的时候，当我在耶鲁大学因病被迫休学的时候，那时的黑暗和无助里，似乎也曾经沉默着笑着流泪－心境，却黑白可鉴。也许有种恨，文字都被衬托的苍白。一张绿卡，打开了一扇梦想的门。

此时此刻，我想要自私的，一个人享受这种快乐。用一种坚韧的笑脸对待明天－也许这样才让我更喜欢我自己。用一种用文字慢舞的方式，发泄自己最深处的脆弱。

纽约Korean town是一个神奇的地方，有一种凌晨四点还人流不断的韩国样悲情寂寞，掺杂了些须纽约样的奢华和玩世不恭。从著名的韩国夜店Circle向上走8条街，或是在脱衣舞店Ricks拐一个弯，就可以看到花花绿绿一幅“整容脸”的韩国女孩们，她们美的非常，美的让人思考那个困扰女人人生的问题－作为一个人和一个女人，究竟是做一个成功的人，还是做一个成功的女人（女人之所以经常逻辑混乱，和她们被这个变态矛盾的问题纠缠有很大关系）。窗外的女人们，是不是也和我一样，坎坷一言难尽，成就屈指可数，在欢迎故事的纽约里做有着许多故事的纽约人？

我爱的朋友们坐在这个地方，庆祝2011年。说些不着边的浑话，或者是不着边的新年愿景。空气中充满了生命力。我不喝酒，也感觉人自醉胜过酒醉人。粗犷的论调，给人很多坚韧的希望。有一秒觉得，活着真他妈好。可以有梦想。

2011年，我想做一个更好的设计师，想要大刀阔斧地运营公司，想要更快乐，想要自己的性格更完善，想要我的朋友们都幸福安康。凌晨四点的我想着2011年，仿佛一个孩子般，激动的无法入眠，这一年，一定是我人生中最不平凡的一年。

周为，写于2011年

Nick Fitzgerald: Oop The Good Parts: Message Passing, Duck Typing, Object Composition, And Not Inheritance

fitzgen@gmail.com (Nick Fitzgerald) — Fri, 31 Dec 2010 08:00:00 +0000

A couple months ago, a Lisper who goes by Josh Marchán detailed the process he had been using to write programs in an Object Oriented style.

You first think of what kind of object you want to describe, and create a new class that has data fields that sort of describe that "object", then you write methods for that class. The hope here is that you can just inherit from whatever class, and everything will be okay.

I think this is a familiar process for many developers, including myself. However, Sykosomatic continued by pointing out the weaknesses that this style of programming presents, mainly that

There are many attributes, attribute initializations, and parameters for the initialization method. This grows to be verbose.
Some of these attributes might be completely unnecessary. A subclass might derive some of this information from other sources, or programmatically generate it rather than store it statically in a field.
Subclassing this class is the sole way for other developers or library end-users to reuse any code. Code that had the potential to be reused in other places is unnecessarily tied to a class.

In a similar vein, Raganwald pokes fun at inheritance and describes how OOP used backwards is POO.

The abstract ontology is derived from the behaviour of the individual specimens, the ontology does not define the behaviour of the individual specimens.

OOP gets this backwards. In OOP you define the ontology up front in the form of classes or prototypes. You then derive individual instances or objects from the ontology. The OOP ontology isn't a way of sketching what we observe, it's blueprint for building what we observe, nearly the exact opposite of the naturalist's ontology.

...

Changes and re-arrangements break existing code, because all of the specimens, the instances and objects, depend on the various classes, interfaces, and other constructs that define their behaviour. Is this a problem? Yes again, because computer programs change constantly. Discovery of new requirements, and new information is the norm, not the exception. OOP programs built as towering hierarchies of classes are like perfect crystals, to be admired by architects everywhere but loathed by the programmers responsible for maintaining them.

He goes on to champion an alternative way forward.

What if objects exist as encapsulations, and the communicate via messages? What if code re-use has nothing to do with inheritance, but uses composition, delegation, even old-fashioned helper objects or any technique the programmer deems fit? The ontology does not go away, but it is decoupled from the implementation.

Sykosomatic has a similar revelation after he discovers that the code base for his Chillax project becomes much cleaner when he codes in terms of generic functions and protocols rather than classes.

The beauty here is that you can reuse code without dealing with inheritance, or any sort of class-based hierarchy.

However, these ideas are nothing new. In fact, they are as old as the term "Object Oriented", which was coined by Alan Kay.

Just a gentle reminder that I took some pains at the last OOPSLA to try to remind everyone that Smalltalk is not only NOT its syntax or the class library, it is not even about classes. I'm sorry that I long ago coined the term "objects" for this topic because it gets many people to focus on the lesser idea.

The big idea is "messaging".

Does an object respond to a set of messages? Does it have X, Y, and Z methods? If so, we can use it; who cares if it inherits from a certain parent class or not?

function bad (foo) {
  if ( ! (foo instanceof Bar) ) {
    throw new TypeError("This is an annoying restriction!");
  }
  return foo.baz(foo.quux(10));
}

function good (foo) {
  if ( !foo.baz || !foo.quux ) {
    throw new TypeError("We need foo to have baz and quux methods.");
  }
  return foo.baz(foo.quux(10));
}

This paradigm is sometimes referred to as duck typing. Wikipedia describes duck typing as "a style of dynamic typing in which an object's current set of methods and properties determines the valid semantics, rather than its inheritance from a particular class."

The classic example is if it walks like a duck, swims like a duck, and quacks like a duck, it must be a duck. I prefer Cheech and Chong's explanation:

Looks like dog shit, smells like dog shit, feels like dog shit, tastes like dog shit. Must be dog shit. Good thing we didn't step in it!

So what am I getting at? I present to you a very simple method to support duck typing as a first class concept in JavaScript.

`quacksLike`

Just ask if a given object quacksLike you want it to. You can describe the messages you want an object to respond to with the key, and the type that you expect in the slot by using a constructor as the value.

var arrayish = {
  length: Number
};

var iterable = {
  filter: Function,
  forEach: Function,
  map: Function
};

(function () {

  console.log(quacksLike(arguments, arrayish));
  // true, because the arguments object has the value
  // 3 in its length slot.

  console.log(quacksLike(arguments, iterable));
  // false, because the arguments object is not blessed
  // with the `map`, `filter`, and `forEach` methods.

}(1, "a", {}));

The definition of the function quacksLike is given below.

var quacksLike = function (obj, definition) {
  var k, ctor;
  for ( k in definition ) {
    ctor = definition[k];
    if ( ctor === Number ) {
      if ( Object.prototype.toString.call(obj[k]) !== "[object Number]"
           || isNaN(obj[k]) ) {
        return false;
      }
    } else if ( ctor === String ) {
      if ( Object.prototype.toString.call(obj[k])
           !== "[object String]" ) {
        return false;
      }
    } else if ( ! (obj[k] instanceof ctor) ) {
      return false;
    }
  }
  return true;
};

Do we really need to formalize duck typing with quacksLike? Strictly, no. You could call the methods that you expect to exist and let the the errors be raised if the object was missing that method, or you could check by hand that they exist like I did in the above function good. I think the latter is better than the former because it makes your expectations and dependencies explicit. quacksLike is an easier-to-use formalization of this pattern.

Composition

Composing objects to create new ones is a powerful technique that allows us to easily re-use code for multiple objects. Surprisingly enough, even the Gang Of Four reccomended using composition in favor of inheritance in Design Patterns.

var foo = { 0: "a", 1: "b", 2: "c", length: 3 };
var fooPlusPlus = Object.combine(Array.prototype, foo);

console.log(quacksLike(foo, iterable));
// false
console.log(quacksLike(fooPlusPlus, iterable));
// true
fooPlusPlus.forEach(console.log.bind(console));
// a
// b
// c

I have defined Object.combine using ES5's Object.getOwnPropertyNames for convenience. Besides making the implementation clearer, it also allows us to compose objects which include the non-enumerable methods of an object, such as those on Array.prototype. If we were to use a for-in loop instead of Object.getOwnPropertyNames, we wouldn't iterate over and copy concat, forEach, etc. This is an ongoing trend in my code examples for this blog post. I would rather communicate ideas than deal with browser quirks, or incomplete ES5 implementations.

Object.combine = function () {
  var newObj = {},
      i      = 0,
      args   = Array.prototype.slice.call(arguments),
      len    = args.length;
  function copyProperty(k) {
    newObj[k] = args[i][k];
  }
  for ( ; i < len; i++ ) {
    Object.getOwnPropertyNames(args[i]).forEach(copyProperty);
  }
  return newObj;
};

An Example

Here is a less trivial example: a mini DOM manipulation library. To be trendy, the global entry point will be $. This library uses quacksLike to determine the DOM model and the correct way to attach event listeners, the module pattern in multiple places to encapsulate private data, and Object.combine to re-use code that has already been written for us by others in Array.prototype.

window.$ = (function () {

  var undef, listen, customAPI;


  // Private function to turn `thing` in to an array,
  // optionally slicing the first `n` elems off.

  function toArray(thing, n) {
    return Array.prototype.slice.call(thing, n || 0);
  }


  // Private function to partially apply the first n arguments
  // to `fn`.

  function curry (fn) {
    var args = toArray(arguments, 1);
    return function () {
      return fn.apply(this, args.concat(toArray(arguments)));
    };
  }


  // Private function to set the attribute `attr` of a single
  // DOM node `node` to `val`.

  function nodeAttributeSetter (attr, val, node) {
    node.setAttribute(attr, val);
  }


  // Private function to get the value of the attribute `attr`
  // on the DOM node `node`.

  function nodeAttributeGetter (attr, node) {
    return node.getAttribute(attr);
  }


  // Do the work to determine the correct method for attaching
  // event listeners only once by using `quacksLike` and an
  // immediately invoked function.

  listen = (function () {

    var w3c = {
          addEventListener: Function
        },
        ie = {
          attachEvent: Function
        };

    if ( quacksLike(document.body, w3c) ) {
      return function (event, fn, node) {
        node.addEventListener(event, fn, false);
      };
    } else if ( quacksLike(document.body, ie) ) {
      return function (event, fn, node) {
        node.attachEvent("on" + event, fn);
      };
    } else {
      throw new TypeError("Do not know how to attach event listeners.");
    }

  }());


  // This object is a mixin to be composed with the NodeList
  // results of querying the DOM by CSS selector. It provides
  // handy methods for getting and setting attributes,
  // attaching event listeners, and performing sub-queries by
  // CSS on these elements.

  customAPI = {

    attr: function (attr, val) {
      if ( val !== undef ) {
        this.forEach(curry(nodeAttributeSetter, attr, val));
        return this;
      } else {
        return this.length > 0
          ? nodeAttributeGetter(attr, this[0])
          : "";
      }
    },

    on: function (event, fn) {
      this.forEach(curry(listen, event, fn));
      return this;
    },

    find: function (selector) {
      var res = [];
      this.forEach(function (node) {
        res.push.apply(res, toArray(node.querySelectorAll(selector)));
      });
      return Object.combine(res, customAPI);
    }

  };

  return function (selector, context) {
    context = context || document;
    return Object.combine(Array.prototype,
                          context.querySelectorAll(selector),
                          customAPI);
  };

}());

The mini DOM library might be used like this:

// The following two forms are equivalent.
// They select the same elements.

$("div").find("p");
$("div p");


// Disable all links.

$("a").on("click", function (event) {
  event.preventDefault();
  alert("Don't leave me all alone!");
});


// Get the id of the first paragraph.

$("p").attr("id");


// Disable all input elementss.

$(input").attr("disabled", "disabled");


// Do stuff with each matched element.

$("div.foo").forEach(function (el) {
  doStuffWith(el);
});

Conclusion

To conclude, we should recognize that OOP does not need to be an all or nothing proposition. You can take the parts that are beneficial to you (such as message passing, encapsulation, and composition) and leave the parts which you may not require (such as inheritance).

Finally, take everything I say with a grain of salt (as you should with everything you read on the internet).

References

Josh Marchán's article Chillax and Protocols.
Raganwald's article OOP Practiced Backwards is POO.
Wikipedia's entry on Duck Typing.
Alan Kay's message to the Squeak mailing list about OOP, inheritance, and message passing.
The Gang of Four, on composition versus inheritance.
Angus Croll's article Delegation vs. Inheritance in JavaScript.

View Comments

Brian Krausz: How to Catch a Cheater

Brian — Mon, 22 Nov 2010 19:47:14 +0000

Update: I wanted to explicitly mention that these homeworks were basically puzzles, which is why Googling was off-limits.

Update 2: Thanks gzak for remembering the actual name of the problem. It’s “Finkleberg’s 101 Game” and a copy of the actual homework is here.

There’s a story making its way around the web about a professor catching 1/3 of his class cheating and the fallout from it (everyone retakes the midterm, people who admit to cheating have to take an ethics course). It reminded me of something one of my professors at Carnegie Mellon did in one of my Freshman year CS classes. This is a from-memory recount of it, exact details are probably slightly off.

For context:

The early homeworks in this class were basically puzzles, where if you’ve seen the style of problem before you more or less knew the answer. The goal was to expose us to these types of problems and teach us how to think them through properly.
We were explicitly told that searching online for answers to homeworks was forbidden.
One of our last homework’s problems began with something like “Commonly referred to as The Glorblar Problem, …” (I don’t remember the actual word he used, it seemed completely plausible)

We get to class one day and wait for the professor to start speaking. Today he just starts running through slides silently:

“As many of you know, one of my hobbies is catching cheaters”
A picture of the last homework with the phrase “The Glorblar Problem” circled
A screenshot of Google with “The Glorblar Problem” in the search box
A screenshot of the Google results, with the domain of the first result (which had the problem and correct solution) circled
The whois result for that domain, with the professor’s name circled (you can hear a collective gulp as half the room realized what was coming next)
The apache logs from the webserver, along with blurred-out reverse IP lookups for the entries

Then he started speaking. He told us he had access to the login records from the school’s public machines as well. Anyone who Googled the result should confess and take a 0 for the homework, otherwise he would report them to the dean and they’d fail his mandatory class.

A ton of students confessed. A lot of them were sent the link from a friend and many claimed not to have used it, but nobody could deny that they were caught cheating by the letter of the law.

The moral of the story is don’t fuck with Luis von Ahn, he will wreck you (no, I wasn’t one of the students who cheated, but that was one of the more impressive hacks I’d seen during college).

tl;dr – My professor made a honeypot for cheaters by planting a Google bombed phrase in his homework.

Nick Fitzgerald: Pythonic Javascript Methods

fitzgen@gmail.com (Nick Fitzgerald) — Tue, 16 Nov 2010 07:00:00 +0000

What do I mean by "Pythonic" methods?

For anyone who hasn't used Python before, every instance method in Python takes the object it is bound to as its first argument, which is named self by convention.

class Foo(object):
    def bar(self):
        print "This is me:", self

When I refer to "Pythonic" methods, I simply mean methods on an object which have their first argument bound to that object.

Why would we want to make any of our JavaScript methods "Pythonic"?

This is a very good question, and if I did not have an answer this whole blog post would be questionable. Some people like the way methods work in Python, others do not. I do not want to discuss whether it is good for Python; I want to explain why it is good for JavaScript. Funny enough, the arguments behind whether it is good for Python and whether it is good for JavaScript don't really intersect. This is due to the nature of this in JavaScript, and how it differs from self in Python.

Unlike Python's self, JavaScript's this is not just a normal variable or parameter. It has dynamic binding (as opposed to lexical) meaning it is a reflection of the context of the surrounding function when it is invoked rather than when it is defined. It is common that the value of this will change in the middle of your method definitions:

var myObject = {
    foo: function () {
        console.log(1, this);
        (function () {
            console.log(2, this);
        }());
        setTimeout(function () {
            console.log(3, this);
        }, 100);
    }
};

myObject.foo();
// Logs:
//   1 myObject
//   2 window
//   3 window

If you wanted the second and third calls to console.log to have access to the same this that the first one does, the common solution is to create a normal variable that references the desired context:

var myObject = {
    foo: function () {
        var that = this;
        console.log(1, that);
        (function () {
            console.log(2, that);
        }());
        setTimeout(function () {
            console.log(3, that);
        }, 100);
    }
};

myObject.foo();
// Logs:
//   1 myObject
//   2 myObject
//   3 myObject

But I get tired of doing that all the time. Tired of remembering when I need to define that until after I have a bug. Tired of the ugly blemish it puts in my code. I would rather write this:

var myObject = bindSelf({
    foo: function (self) {
        console.log(1, self);
        (function () {
            console.log(2, self);
        }());
        setTimeout(function () {
            console.log(3, self);
        }, 100);
    }
});

myObject.foo();
// Logs:
//   1 myObject
//   2 myObject
//   3 myObject

I find this syntactic helper especially nice when defining prototypes or extending existing objects. These situations tend to rely on state that is stored in this more often than other examples, so I find the utility added by binding this to self also tends to be greater.

var MyView = Backbone.View.extend(bindSelf({
    events: {
        "click :input": "clickHandler"
    },
    initialize: function (self, opts) {
        ...
    },
    render: function (self) {
        ...
    },
    clickHandler: function (self, event) {
        ...
    }
}));

What is the implementation?

function bindSelf (obj) {

    // 1
    for (var k in obj) {
        if (obj.hasOwnProperty(k) && typeof obj[k] === "function") {

            // 2
            (function (oldMethod) {
                obj[k] = function () {

                    // 3
                    return oldMethod.apply(
                        this,
                        [this].concat(toArray(arguments))
                    );

                };
            }(obj[k]));

        }
    }

    // 4
    function toArray (thing) {
        return Array.prototype.slice.call(thing);
    }

    return obj;

}

What is it doing? We are iterating through each of the methods on obj and rebinding the name of each method to a new function which calls the old method with its this concatenated with its arguments. That was a mouthful.

Here is the step-by-step:

First, we iterate over all of the keys in obj which are not from the prototype chain and whose values are functions. This is important. We obviously don't want to try and redefine non-method attributes of obj as functions, which is why we check that typeof obj[k] === "function". However, we also do not want to break any of the object's methods which are inherited from its prototype, which is why we check that obj.hasOwnProperty(k).
Before rebinding obj[k] to the new function, we need to make an immediately invoked function expression so that we create a new variable oldMethod on every iteration of the loop. If we didn't do this, and incorrectly wrote the code something like this:
```
...
// At the top level of `bindSelf`.
var oldMethod;
    ...
    // Inside the loop.
    oldMethod = obj[k];
    obj[k] = function () {
        return oldMethod.apply(
            this,
            [this].concat(toArray(arguments))
        );
    }
    ...
...
```
then we would capture the same oldMethod variable in the closure of every new function. Unlike languages such as C, JavaScript does not create a new scope every time you open the curly braces. Every new method would call the same oldMethod; definitely not what we want.
Okay we are finally creating these new functions and rebinding them to where the oldMethod used to live. When we call oldMethod, lets make sure that this inside oldMethod is still bound to this; and lets also add this to the front of the arguments we were called with before passing them to oldMethod. This is what we set out to do all along. Its really quite simple from this point on, you just need to understand what Function.prototype.apply does.
The last piece is our good old friend toArray. Any JavaScripter worth their salt has probably written this exact function many times before, possibly with a different name. All it does is take an array-like object and turn it in to a real array. What is an array-like object? It is one which has a length property and possibly 0, 1, 2, etc. properties defined. The cannonical example is the arguments object, which is what we are using it for. See the problem with arguments is that it doesn't have any of the Array.prototype's methods attached, and that when you concatenate it with a list, you get unexpected results:
```
// Does *not* return [1,2,3,4,5,6] as you might expect!
(function () {
    return [1,2,3].concat(arguments);
}(4, 5, 6));


// Instead it returns something like this:
[1, 2, 3, { 0: 4, 1: 5, 2: 6, length: 3 }]
```
By calling toArray on arguments before concatenation, we get the expected result.

View Comments

Brian Krausz: Force a Canvas Refresh

Brian — Fri, 22 Oct 2010 03:45:13 +0000

When playing around with some canvas stuff I found an interesting bug in Chrome. Basically when you have a putImageData call inside of a setInterval loop, canvas does not refresh properly.

There’s a pretty simple hack to fix this: force the canvas to refresh every time you call putImageData. But how do you do this? There is no redraw function, nor any obvious way to force a refresh.

The trick is making a change to some property of the canvas element. Doing this in a way that forces a refresh every frame but won’t actually change anything for the user is not as obvious as you’d think.

Opacity isn’t actually visible with a sufficiently small delta, so it’s a good candidate. We just switch back and forth between two different opacities.

this.ctx.putImageData(img, x, y);
this.rebuild_chrome_hack = !this.rebuild_chrome_hack;
$('#canvas').css('background-color', this.rebuild_chrome_hack ? 1 : 0.999);

Brian Louie: Are you a web developer or designer?

Brian Louie — Tue, 14 Sep 2010 22:20:56 +0000

(This is the same post as the one found on the Mozilla Hacks blog. Thanks to Jay Patel for co-writing this with me.)

If you are a web developer or designer, we can use your input. After gaining some great insights from our previous survey on Firefox 3.6 and Firebug 1.5, we have decided to go broader and get a better industry-wide snapshot of web developers.

We have created a new survey in our continued effort to better understand the web developer landscape and how the Mozilla Developer Network can be a better resource within it. Over the past few weeks, we have interviewed web developers about how they work and collaborated with a research consultant to compile a list of questions that will hopefully give us a clearer picture of the people behind the open Web and how we can better serve them.

This survey asks questions about the web development experience: the technologies and resources you use, the communities you join, and the companies that influence the realm of your work. We plan to use your responses to improve our developer engagement efforts and deliver relevant programs and content through the Mozilla Developer Network to make your web development experience better.

Your input is be much appreciated. Take the survey here, and please feel free to share the survey with other web developers and designers. Please pass on this link: http://bit.ly/wdatow2010 to the appropriate lists, forums, blogs, etc.

It is important that the results accurately represent the diverse set of people that make up the web developers of the world, so we hope that you will help us reach other developer communities, including those mentioned in our survey. Together, we can take a step closer to a better open Web. Thanks!

- the MDN team

Wei Zhou: Is the browser dying? Is user interface dying? Long live user experience.

wei zhou — Wed, 08 Sep 2010 07:42:46 +0000

I haven’t use my browser for almost a week…yes. I cannot believe it is happening, and it’s happening so fast – people spend less and less time with their browser right now. And as an user experience designer I’d like to say, this fact reflects a change of Internet lifestyle. This is pretty significant in computer history because it announces the death of Matrix, and probably, the death of user interface. It is scary and exciting because people soon need to redefine user experience and the job function of UX designers: We will soon design things without thinking about screens. We will think about creating better service. We will become business designers. Or we will become entrepreneur consultants.

It happened almost like overnight since Apple proudly introduce their iPhone and iPad, followed by a series of other fancy smart phones and mini computer-like devices. People are busy tracking apps instead of browser from the second they wake up in the morning to late night sex time. They are smart enough to realize what they really need is to get rid of all the user interfaces and get to know their best friends’ status, bank balances and next job oppotunites. Now since they can accomplish these tasks without a computer. Sooner or later there’ll be some other vitural devices or service to help them get rid of their smart phones, such as built-in-body-chips or visual augmented sun glasses.

People’s life are simplified. The world will be more visual and more real since we’ll not gonna deal with interfaces but down-to earth UI-free services.

Or is it what we really want? How about system design?

As a hot nerdy girl I both love and hate about system design – it’s like a sophisticated and but usually over-dressed woman – although we really just want to see the naked body inside, the process to get there could be fancinating and addictive – it has some ritual values. If we don’t design it well, it will turn from a hotty blonde to your mother – who yells at you and makes you want to kill yourself.

So there I come and say, long live user experience, the browser may die some day, smart phone will die some day, but there’s always people issues that require us to solve – we UX designers will seek our ways to thrive and make better services. As long as there’s people, there’s user experience.

Brian Louie: Introducing the new MDN website

Brian Louie — Mon, 30 Aug 2010 20:01:18 +0000

(This is the same article that can be found on the Hacks blog and is an updated version of the draft that was posted here last week. Thanks to Jay Patel for co-writing this with me.)

This week, Mozilla unveiled the newly redesigned Mozilla Developer Network, the latest incarnation of MDC. The website has evolved over the years and we recently decided to change the name from Mozilla Developer Center to the Mozilla Developer Network (MDN) to better reflect the developer segments that make up our community and provide a better platform for engaging developers in the Mozilla mission and our plans for pushing the open Web forward. In this blog post, we’ll walk you through some of the new features and content, in addition to some of the things you can expect in the months to come.

Our Mission
Upon first glance, the most obvious change is that the website has undergone a radical overhaul: from top to bottom, the entire MDN looks different. Even the tagline underneath the title is new: the Mozilla Developer Network is “a comprehensive, usable, and accurate resource for everyone developing for the Open Web.”

The idea behind the tagline is perhaps the biggest change we’ve made to the MDN: we wanted to create a place where all web developers – not just people who develop using Mozilla technologies – can find the resources they need to make the Internet at-large a better place. This fundamental premise drove many of the design decisions incorporated into the new MDN.

The New Home Page
One of our main goals for this redesign was to streamline and simplify the process of finding information. Because the MDN home page is the first page most people will see when they visit the MDN, we wanted to make sure a diverse set of users could access as much information as possible without cluttering the page.

Throughout the page, there are several opportunities for the user to sign up for an MDN account; if you already have an MDC/Deki account there’s no need to sign up again. If you’re new to MDN, you can easily register to join our community. Members will be able to log in to both the Developer Forums and the Docs Wiki.

The page also features a promo box with revolving panes highlighting important open Web technologies and tools. The goal of the promo box is to direct developers to the pages about technologies that are most likely to be pertinent to their work, which helps reduce the number of steps it takes to reach a desired article. There are a lot of things happening at Mozilla that developers will care about, so this is where we hope to provide every visitor a chance to learn more about those topics.

Moreover, the main content of the page will be available through a tabbed interface that will allow users to click through to whichever section in which they are interested. We currently have Docs and News but have plans to add Tools and Events as well. There are plans for the sidebar as well, but for now we have provided a live Twitter feed so that users can get a feel for what various Mozilla communities are talking about and sharing. We will eventually add trending topics based on activity from around the MDN, streams for conversations in the forums, and the latest web technology demos and experiments.

Site Architecture
The new MDN header contains a search bar and click-through access to various sections through the primary navigation. The MDN’s content has been separated into four main categories, each of which has its own navigation item: Web, Mobile, Add-ons, and Applications. This segmentation of the navigation allows us to organize content into non-overlapping buckets, which should more precisely direct developers to the content they need. Then we have the universal Docs – which takes users to a landing page leading to various articles and content from the Docs Wiki – and Community – which takes users to the Developer Forums for now – navigation items. Since those two areas are applicable to all developer segments, we kept them separate in the navigation layout.

Each content page has a similar format: we feature a few popular articles for each category, some Mozilla-supplied tools, related news and updates, and a feed with relevant tweets. At the bottom of each page, there will eventually be popular forum topics and community comments. (Only the Add-ons page has this content right now). If you don’t find what you’re looking for on the landing page for any given category, there are links in each section of the page that take you to more options and pages. Despite the design overhaul, all of the information from the previous MDC remains intact, so there’s no need to worry about losing important articles. It’s all there and works exactly the same way as before.

Also, any information that can be accessed via the Docs landing page can also be accessed from other pages on the MDN, but we wanted to provide an alternative way of presenting the information: we highlight some important web development topics, in addition to important topics from the other categories. There are also fun features like Doc of the Day and Most Active Docs, in case you’re interested in what everyone else is looking at.

Growing the Community
The final navigation item in the header is for Community and perhaps the most important addition to the new MDN: Developer Forums. In the previous version of the MDN, although there was plenty of documentation to be found, we didn’t provide developers much of an opportunity to talk, discuss, and ask questions. We felt that, in our goal to make the MDN a central hub for web developers, forums comprised an important feature to incorporate into the new version.

Right now, there are five broad topics for discussion: Open Web, Mozilla Platform, MDN Community, Mozilla Add-ons, and Mozilla Labs. These domains should be able to cover much of the wide gamut of available discussion topics, but if not, we can always add new ones. Because the forums are new, they are still in the experimental stage; if you have any feedback for us, just use the feedback link at the bottom of the page. Feel free to start new threads and ask questions about anything, especially if it’s about documentation or the open web in general.

We’d love for you to try out the new forums! Again, if you have an account for MDC/Deki, you can use that to log in; if not, you can use the link in the upper-right corner to become an MDN member.

Submitting Feedback
At the bottom of every page, there’s a link to submit feedback on the new MDN pages. Whether there’s something wrong or there’s something you’d like to see (or whether you’d just like to say hello!), just hit that link and let us know what’s on your mind. We’ll do what we can to integrate your ideas to make the Mozilla Developer Network a better place for all developers.

Next Steps
Though we have made quite a few changes to the Mozilla Developer Network, they certainly are not the last. As the MDN continues to expand, we have decided to create a next-generation Docs platform that the Mozilla web development team will be building on Django, similar to the one being implemented for the new SUMO site. Planning is already underway, and we hope to migrate documentation over sometime in 2011.

Once we’ve converted all the content over, we plan to improve the way you find information via the search bar. So far, we have been devising ways to improve the tagging system and make sure that localized versions of articles are released as soon as possible. In addition, with the help of article rating and commenting systems, we can help make sure that the most relevant and accurate results are mentioned at the top of each search query. And finally, we are building a system that allows community experts in particular fields to regulate editing and writing of articles in their domains.

We’re also looking to expand the Community tab. Though we expect the forums to remain the centerpiece of that section of the site, we hope to also bring you news, updates, and other community-sourced content.

We hope that this has helped you get acquainted with the new Mozilla Developer Network. As always, we are amenable to your feedback and ideas, as we are as eager as you are to make the MDN an even better place for web developers to write, read, and discuss important Web topics. We look forward to hearing from you, and we hope you like the new MDN.

Thanks!
- Jay & Brian (+ the MDN team)

Brian Louie: Some cool releases this week

Brian Louie — Tue, 24 Aug 2010 22:00:33 +0000

Today, we released the next beta for Firefox 4 – the fourth one, for what it’s worth. This might be the biggest beta release yet. Most notably, it features Firefox Panorama (previously referred to as Tab Candy) and Firefox Sync, which allows you to sync your desktop browser with things like your phone and other computers in your house or office or wherever else. CNET posted a good, unbiased summary of the update earlier today. If you’re interested at all in the future of tab and task management, definitely check out the latest beta.

Also of note: the refreshed Mozilla Developer Network, as I’ve been discussing in many of my posts below, releases tonight, meaning that when you go to developer.mozilla.org tomorrow morning, you should be able to see the hard work Jay, the web development team, and I have been putting into the MDN over the past few weeks (or months). Expect a long post detailing that in the near future!

Michael Kurze: Diaspora — Can the Social Graph be Our Web of Trust?

Michael Kurze — Mon, 23 Aug 2010 01:30:22 +0000

On Friday we had Max, Ilya and Raphael from Diaspora over at Mozilla. They talked about their effort in creating a distributed social network. Where I think they are on the right track, and where they should think even bigger.

Why we need Diaspora

Personally, I see three major challenges that everyone passionate about the open internet needs to make up their mind about:

The erosion of Net Neutrality
Participants switching to closed environments of apps and appliances, becoming mere consumers (*)
People entrusting their personal data and social activity to Facebook, forced to choose between control and connectedness

In the context of the Diaspora talk, I’ll focus on the third issue.

We need Diaspora because people need to be in control over with whom they share personal information. Every time Facebook sneaks in a new default that breaks privacy, we grudgingly change the settings again — and stay, not wanting to lose our friends. Or we just don’t know about it and leave it as it is. Combined with the social monopoly that Facebook has established, this makes privacy and security optional features, subject to change like any other.

How Diaspora can help already

The main distinguishing factor of Diaspora compared to Facebook et al. is in that it decouples your social graph from the network provider, bringing back real competition to the social space. Like with E-Mail, there can be lots of network providers, loosely connected over push-interfaces. Whenever a pod (the equivalent to an e-mail-provider in Diaspora) should violate your trust, you can just switch to another one, or set up your own pod.

What could be done better

On the downside, this means that you have to trust your pod as well as all your friend’s pods. No big deal? Well, where the same server software is used on a distributed network, it is very prone to exploit of vulnerabilities due to patch delay and misconfiguration (correctly setting up TLS is still a big challenge, not only for regular people).

Secure HTTP is great when a large, anonymous group of people needs to trust a central service. It allows us to do online banking and purchases, free from eavesdropping and man-in-the-middle attacks. However, it is not peer-to-peer: When you fetch your mail over a secure IMAP connection, you might be sure that your password is protected, but you do not know who actually sent you that e-mail (think about it: that is the reason why phishing works). When you get it from Google Mail, you might be using TLS, but Google is still able to read your every conversation.

How PGP can solve this

I propose that Diaspora pods should be dumb post boxes that are not able to actually look into status updates, private messages, friend lists and so on. How? The technology for that has been available for quite some time and is called PGP.

Basically, PGP allows you to send and receive messages that cannot be decrypted by the servers that route them. So, if you were to encrypt your message inside your browser, you would establish secure end-to-end communication. No need to trust the shady pods that some of your friends decided to use, not knowing any better. But encryption in a web client? That sounds awfully slow! Well, Firefox Sync does it already with your entire browsing history (the pass phrase to your key is never sent to the server), and I would imagine that JavaScript interpreters have become fast enough to emulate the cryptographic capabilities of a PC from 1991.

I do have ideas on how to approach search and incremental profile updates with this, and on the new security considerations that apply here (Can you always trust your browser? Could a pod not make you use an insecure web client that transmits your passphrase?). However, that is rather technical, possibly material for a follow up post.

The social network is a key signing party

The problem with PGP has always been that people have been unable to exchange public keys in a manner that is both trustworthy and extensive. Because a web of trust can often not be established, people refrain from using encrypted e-mail. Turns out that social networks come with a mechanism that is just made for this: Friending. In the secure social network, accepting a friend request would be equivalent to exchanging keys. Usually you are referred to friends from people you already know, so there already is a basic level of trust.

This means that online social networks can be transformed from a jeopardy to our security to a vehicle of the same. This idea is of course also not entirely new. What might be new is the idea of building the social web entirely on top of PGP rather than just integrating that as an optional feature.

Any Comments?

I have not gotten around to add Commenting or Pingback to this blog, but I would love to incorporate any (links to) comments in a follow up post, please write to michael at this domain.

Update:

If I understand correctly, the diaspora guys are already planning to use GPG for cryptography somewhere. This is a pretty good start. If they really already plan on generating keys for everyone, then they would only need to pull the actual encryption into the web client.

(*) Like any intern at Mozilla I had the opportunity to to talk to John Lilly, and I got the impression that Mozilla takes this development very seriously.

Jaclyn Fu: Once a Mozillian, Always a Mozillian

Jaclyn Fu — Sun, 22 Aug 2010 20:59:24 +0000

The most awesomest internship ever.

I wish I could quit school to work here forever. I was spoiled by Bay Area weather, yummy snacks, super people, and rewarding work. Thanks Mozilla for such a great learning experience, and thank you Mozilla community for being great supporters. Hope to work with everyone again soon!

Back to UC Berkeley for my last year of academic slavery where I’ll be finishing up my History degree (taking loads of marketing classes nevertheless). I’ll probably still be posting Mozilla thoughts here, or maybe I’ll start a new blog – stay tuned!

Below is the slide deck for my intern presentation which highlights several accomplishments and things I learned. Enjoy!

John Wayne Hill: Firefox Home Tab Concept

John Wayne — Tue, 17 Aug 2010 15:27:28 +0000

This summer I’ve been working at Mozilla with the Firefox UX team. My main project of the summer was to research what the hometab of the future could and should be. I was to give Firefox a useful path to traverse and provide some ideas about the design and experience of the hometab in Firefox.

In starting this project I came up with some predispositions (pre-project thoughts) on hometab, and how people use the internet. I then completed three major types of research: competitor analysis, academic research, and user research. This research led me to the following insights:

Insights

We need to equip people with the right tools
allow for personal connections
gradually engage people within the hometab

From these insights I sketched and iterated on many concepts. I then built a prototype concept. I used this prototype for about two weeks and had my colleagues on the UX team use it as well. I asked for feedback on desires, problems, and future thoughts. With this data I created new mockups showing what I think the hometab of the future should be. These mockups show 10 features of hometab:

Features

Universal Search (across the web, your history, download, contacts, etc)
Stream (information guilt free way of browsing things you are interested in)
Web Apps
Sessions (an opt-in approach to restore previous sessions)
Contacts in the browser
Shared Content (a place to see everything you’ve shared across the web, because it’s important to you)
Bookmarks
History
Downloads
Firefox Sync

Hometab is laid out in a way to allow gradual engagement, quick access to important information, and personal connections.

Hometab with universal search and stream view

on Hover of Stream Items, an overlay appears

upon clicking a stream item, a large overlay appears with details and features

web apps that allow for badged notifications

ability to selectively restore tabs from previous sessions

showing contacts right in the browser

clicking a contact brings up an overlay with information and a conversation stream

content that you've shared across the web all in one place for easy findability

hovering over a shared content area brings up an overlay with more information

easy to get to bookmarks with location aware frequency

hovering over a bookmark takes away the favicon overlay and shows a preview of the site

quick searchable history with an option to see your full browsing history

easy to acess searchable downloads which the browser can open when possible

easy acess to Firefox tabs on other computers

Please keep in mind that this project was to map out a general direction for the Firefox UX team and to provide ideas and thoughts on the design and experience of Firefox hometab. In no way is my concept slated for inclusion in Firefox.

In the coming weeks I hope to expand upon this concept with more details about my process and the design shown above. Stay tuned!

Please let me know your thoughts and critique, as I strongly believe in getting good critiques.

John Wayne Hill: Sharing in Firefox

John Wayne — Thu, 12 Aug 2010 20:33:31 +0000

Most of us like to share things with people that we know. This is one reason that flickr, facebook, and twitter became so popular. Sharing is huge. It’s likely that if you’ve used the internet, you have shared something with someone. Many of us share different things through many different networks. This can be quite a pain. There are many add-ons that tackle this very issue. However, the browser can make sharing easier by integrating sharing into the browser. If we know what social networks you use, by what passwords you’ve saved in Firefox, it should be pretty easy to enable sharing in Firefox.

In looking at this problem I’ve come up with the following design:

A user should be able to simply right-click an image, video, or link and then click Share. From here a nice overlay should appear with a preview of the thing to be sent, a URL auto filled into a text area, an area to add more information (comment, text, etc), a way to choose what service to use, and a way to share the item with only particular people.

I’ve created some mock-ups to show how this feature might work. Furthermore, I researched what social services I think Firefox should support when first implementing this feature.

A page with an image the user wants to share

user right clicks image

user selects "share image"

an overlay appears with a preview of the image and the url autofilled

a user can add their own text if desired

users can select a service with which to share

character counts could appear if Twitter is selected

users can choose to share privately with certain individuals

selecting particular people with which to share using Gmail

inline autocomplete for Twitter sharing

With sharing enabled directly by the browser people can more easily share images, videos, and links with a variety of social networks or with particular people. Furthermore, by integrating sharing directly into the browser users are never taken out of their flow or interrupted by moving between different websites and services.

Want to help make Firefox better? Why not contribute and help add this feature. Bug #: 586780

Brian Louie: Firefox 4.0 beta 3 live

Brian Louie — Thu, 12 Aug 2010 02:23:52 +0000

Hey, everyone!

Earlier today, the third beta for Firefox 4.0 went live. Most prominent of the changes include support for multitouch gestures on Windows 7 machines and revisions to the JS engine so that pages render faster. If you haven’t gotten it already, find it here.

I’ll be publishing another post soon detailing my work from the past couple of weeks. Stick around!

Michael Kurze: Sites for Mozilla Input

Michael Kurze — Tue, 10 Aug 2010 18:46:36 +0000

As a side project during my internship at Mozilla, I worked with Aakash from Mozilla QA to bring a new feature to the Mozilla Input website.

Oftentimes when users have trouble with a Firefox beta, there is not actually a bug in the beta, but a problem with a specific website (such as broken user agent detection). Even when a problem is related to Firefox, it can be very helpful for QA to see what sites trouble our users the most, and what issues the users face there.

Enter clustering…

To group sentiment by topic, my fellow metrics intern Andres and I made use of Dave Dash’s clustering algorithm, which uses techniques from the search engine world to group related input. That helps to get a quick impression on what’s going on when a site is causing trouble for many users. We also get a lot of positive feedback on sites where the user experience has improved for beta users compared to the release version.

…and Django of course!

It was very cool to do something with Django again. The webdev team is very knowledgeable in this area so I learned a lot working with Fred and Dave. There are some limitations (you still cannot prefetch related objects along the inverse edge of a one-to-many relationship, like with any sensible ORM), but other than that Django has become a pretty solid toolkit. Also I finally got started with Git, which is as of now my version control system of choice.

Hopefully my main project will allow me time to improve Input and the dashboard in the future, there’s a lot of cool stuff planned with it.

Jaclyn Fu: Firefox 1.1 Quiz Challenge Winners!

Jaclyn Fu — Wed, 04 Aug 2010 16:46:15 +0000

Congratulations to our two Firefox 1.1 for the Nokia N900 Quiz Challenge winners, Matt Boes and Heni Purwanti! In 3 weeks, over 6,700 quizzes were submitted from all over the world! Thank you to everyone who participated and supported Mozilla’s mission to browse without borders.

Here’s a recap of the quiz questions:

Quiz 1
1) Typing is hard on a mobile phone. What Firefox 1.1 feature takes you to your favorite parts of the web with minimal typing? Correct Answer: Awesome Bar

The Awesome Bar utilizes your search history to suggest links as you’re typing, allowing you to get to sites faster!

2) Firefox 1.1 now has improved zooming to make your browsing experience even more convenient. What new way can you zoom in and out on the Nokia N900? Correct Answer: Using the Volume Rocker

3) Don’t start from scratch. Sync your Firefox passwords, history, tabs, and bookmarks from your PC to your mobile phone. What current Firefox 1.1 feature on the N900 allows you to just get up and go? Correct Answer: Firefox Sync

Note: The Weave Sync project was renamed to Firefox Sync. We clarified this question by asking for the most “current” feature.

Quiz 2
1) How is Firefox for mobile built like Firefox 3.6 for the desktop? Check all that apply. Correct Answer: All (Add-ons, Awesome Bar, Sync, HTML5)

Did you know that Firefox mobile supports many HTML 5 features! The browser includes important features like Location-Aware browsing, the <canvas> and <svg> tags, Web workers and offline storage.

2) On our @MozMobile Twitter account, what Firefox 1.1 feature was spotlighted on April 14th 3:08pm US/PST? (hint: you can save as PDF and add search engine here). Correct Answer: Site menu

Due to Twitter localization, it was difficult for many people to find the correct answer. The hint was quickly added after a community member brought this to our attention (Thank you!).

3) What are the goals of bringing Firefox to mobile phones? Correct Answer: All

Firefox mobile aims to deliver an exceptional mobile experience, provide a platform for developers, and to do work in shared Mozilla repositories that benefit each other

Quiz 3
1) (True or False) Firefox is the world’s only mobile Web browser to support add-ons. Correct answer: True

We are now the first to support add-ons as of a few mobile Web browsers’ claim of supporting add-ons. Firefox mobile is a pioneer and leader in setting standards!

2) The improved Site Menu in Firefox 1.1 for the Nokia N900 lets you better manage your relationship with the site you’re on. What action can’t you do using the Site Menu options? Correct answer: Pizza

Interesting that 11% of participants believed you could order pizza off of the Firefox mobile site menu..That should be a new feature!

3) Firefox tries everywhere it can to minimize the amount you have to type on mobile phones. Besides the Awesome Bar, what other feature focuses on typing less? Correct answer: Form auto-complete

If you did not have the chance to sign up for the about:mobile newsletter to receive exclusive updates on mobile products and future challenges, you can do so by clicking here:

To our two winners of the quiz challenge: Let us know what you think of Firefox 1.1 on your new Nokia N900!

Brian Krausz: GazeHawk Launches!

Brian — Thu, 29 Jul 2010 22:06:39 +0000

At least now I have a publicly known excuse for being busy!

http://techcrunch.com/2010/07/29/y-combinator-backed-gazehawk-heatmaps-with-web-cams/

Keep an eye on our blog at http://gazehawk.com/blog/ for some interesting technology/startup posts.

Time to go deal with my ever-growing inbox .

Brian Louie: Redesigning the MDN (part 2)

Brian Louie — Thu, 29 Jul 2010 21:44:14 +0000

[This is a continuation of the post "Redesigning the MDN (part 1)."]

In my previous post I mentioned our fundamental goal is provide web developers with a central hub for documentation and discussion. I’ve talked a bit about how we plan to achieve the former, but what of the latter?

For this reason, we added yet another tab to the MDN’s header, called “Community.” In the newest iteration of the MDN, this tab will primarily serve to host a UserVoice-based forum where web developers can congregate and discuss anything open-web related. As we get that finalized, I’ll update this blog with a list of initial topics so that you can start to think about things to talk about.

Again, when the new MDN goes live sometime in mid-August, expect a more in-depth tour of the Community tab. Also, note that the Community tab will eventually encompass more than forums. Eventually there will also be community-provided news articles and other community engagement efforts via Mozilla. Those should be coming in later iterations of the MDN.

Thanks for reading! As usual, if you have any questions, comment or shoot me an email.

Jaclyn Fu: Building Firefox 2.0 Position & Product

Jaclyn Fu — Wed, 28 Jul 2010 19:54:45 +0000

Back to basics: What does the mobile Web user want in a browser?

I left our mobile product delivery meeting with some thoughts: 1) The competitive landscape is rapidly changing what were many “nice to have” features into mandatory industry standards and 2) positioning a product is much easier if we understood exactly what the user wanted.

This prompted me to conduct a quick market research survey. I included a research question in Quiz #3 of the Firefox 1.1 for the Nokia N900 Quiz Challenge that asked participants which feature was most important in a mobile Web browser. Here are the results out of a 1800 person sample:

1) Speed
2) Battery life/memory usage
3) Readability/zooming
4) Tabs
5) Sync
6) Social media integration
7) Add-ons

It’s interesting to note that in this small sample, many people also wrote “full PC-like capabilities” in the open answer text field. Fennec is built from the same engine as Firefox for desktop and also has the same powerful capabilities as the desktop version. It’s even more interesting to see Tabs rank so high because Firefox is the only mobile Web browser that does tabs right (from experience). Most mobile Web browsers require you to navigate through a maze before you can reach your tabs, but Fennec conveniently stores them to the side of your browser, accessible with a quick swipe across the screen. Firefox Sync and Add-Ons satisfy the 5th and 7th most important features, respectively. Social media integration, or sharing, is the next step in Fennec development. You can view the Fennec planning page here.

Most of the sample audience uses Opera Mini, Opera Mobile, IE Mobile, and Android Browser. If you have had experience with these browsers, how do you think Firefox compares with them?

Firefox 2.0 is going to be a full, rich, mobile Web browser. We have all the bells and whistles – but how do we stand with the basics? Electrolysis and layers are going to improve performance, and there are current developments to maximize efficient battery life. The biggest challenge now is to improve readability so that zooming and text formatting is seamless. By the time the final product rolls out, I’m positive Firefox 2.0 will be polished, fast, and ready for daily use.

The user feedback data was really insightful for gaining a better sense of user needs and expectations. I’ve been trying to apply the concepts I learned from my 8am marketing class from last semester, but of course real-life problems are much more difficult to solve than classroom case studies. Let’s open this up for some discussion – what kind of experience do you have with brand positioning and do you have any tips for an aspiring marketer? How do you feel about Fennec’s current positioning?

Want to experience the nightlies yourself? You can download a nightly build of Fennec 2.0a1pre here.

Brian Louie: Redesigning the MDN (part 1)

Brian Louie — Wed, 28 Jul 2010 18:19:27 +0000

(Redesigning the MDN is a complex project that’s going to take more than one post. In this post, I discuss the reasoning behind some of the more superficial changes I’ve made to the Network.)

Another one of my big projects here at Mozilla has been working on redesigning and re-branding the Mozilla Developer Network (MDN). If you’ve been keeping up with my blog, you’ve already seen some of the work that Jay and I have done with regard to graphically redesigning the network. As I’ll discuss in a bit, we’ve made some important changes since then.

First, it’s important to understand the impetus for change. The Mozilla Developer Center (the current name for the MDN), as it stands, can be found here, if you’re not already familiar with it. Although it certainly looks better than it has in years past, it could still use some fixes here and there. Or all over the place. You can find the slide deck with some pictures of our first draft of the redesign here.

Underneath the superficial overhaul, however, lies a deeper paradigm shift. Although content is pretty well spread out to cover various domains of the open web, the focus currently concentrates on developing on the Mozilla platform specifically. While certainly we want to reward and help those who develop with the tools that we provide them, we feel that perhaps this mindset is a little close-minded. Mozilla’s goal is to advance the open web in every way possible, Mozilla-inspired or not. Consequently a solely inward focus on only Mozilla’s tools is unintuitive and does not allow us to optimize the progress of the open web.

Ultimately, the goal of the Mozilla Developer Network is to provide a central hub for discussion and documentation for open web developers, regardless of platform. The redesign of the MDN cannot lose sight of this goal.

With this goal in mind, we took the original .psd files from our web designers and started making tweaks. As previously mentioned, there are four main documentation headers: Web, Mobile, Add-ons, and Applications. In the currently released design, all of those headers are given equal weight, which runs against our fundamental goal.

Unfortunately, there wasn’t much of a way to change these headlines without breaking the entire header, so we instead decided to revamp the site’s home page to place a greater emphasis on open web technologies at-large. When the new site is live, you’ll be able to see for yourself. There have been several other changes as well; I’ll tour through them on this blog when the new Network goes live.

One thing I’d like to emphasize: though our presentation of information has changed to fit our goal, none of the documentation has changed. You will still find all the information found on the current MDC, from Gecko to info about Mozilla-specific APIs. These articles will continued to be updated as well. Only the presentation of the information has changed.

Expect the site to go live mid-August. Tomorrow, I’ll write about some of the awesome new features that we can expect to see in the next iteration of the MDN and how we plan to facilitate communication between developers.

Brian Louie: Firefox 4 beta 2

Brian Louie — Tue, 27 Jul 2010 20:12:51 +0000

A quick aside from my summary posts: download the Firefox 4 beta 2 to check out application tabs and a sweet new Mac OS X interface. The alpha for Tab Candy is also available as an early build of Firefox, if you’re interested in trying that out as well.

For a more detailed rundown of the new beta, check out the Hacks blog for a sweet demo from our very own Paul Rouget!

Happy developing!

Brian Louie: A global picture of the open web

Brian Louie — Tue, 27 Jul 2010 17:54:53 +0000

Hey there! Sorry for the long delay since my previous post; it’s been a busy past few weeks. Since coming back from the summit, my internship has been full of twists and turns, leaving me little time to write.

I’ve been assigned to work on a whole lot of different things. To give equal exposure to all of them, I’ll write several posts to update you on my work these past few weeks.

One of my big projects thus far has been designing an industry-wide web developer survey. Some of you might have seen one of my previous blog entries about the results of the survey we distributed this past March. The findings, while interesting, don’t paint a complete picture of the state of the open web and the developer tools you all like to use. Thus far the surveys we’ve released – the one previously mentioned and one that was released last November – have been distributed via Mozilla channels and have only really inquired about Mozilla platform technologies. We hope to change that.

We hope to get a wider snapshot of the web development community, not just for us, but for you. A panorama, if you will.

The survey will be released in a few weeks – sometime before the end of August – so check back frequently for the opportunity to take the survey and help us paint the picture of the open web. Thus far I’ve iterated through several drafts of the survey and talked to several market research consultants to determine how to best distribute and design the survey. It will be ready soon!

On a more interesting note, I’ve also been reaching out to infographic designers. Although the data obtained from the survey will certainly help us, we want it to help you, too. We want to present our data and conclusions in an aesthetically awesome way. Right now, I’m talking over our goals and the possibilities of an end design with several artists. They all have some pretty good stuff going on; they’ve won awards and made some pretty interesting designs. Stay tuned!

Because we expect such a large audience to be taking the survey, there has been a lot of pressure to get every word and every question right. I never realized just how much goes into designing a questionnaire: figuring out the average time spent to read and answer each question, the best way to structure a question, the most efficient reconciliation of details and the big picture, etc. Given the impact we expect this survey to have on our engagement efforts, the survey must determine with exact precision the information that we’re looking for. Such a statistical conquest, I have discovered, isn’t as easy as it looks.

More blog posts about the other things I’m working on will be coming soon! Thanks for reading.

Brian Krausz: The Worst Paragraph Ever Written

Brian — Wed, 21 Jul 2010 11:31:15 +0000

Context: There’s an organization that sponsors Shabbat dinners. It’s really awesome: they basically pay you to feed your friends. That being said, they need a copywriter. Here’s a paragraph in the email they sent confirming my sponsored dinner:

As of Monday, July 19th, the new NEXT Shabbat program will begin providing new NEXT Shabbat’s with up to $14 per guest (maximum of 16 guests) for the first three meals a host registers after that date. After those three meals, hosts will receive up to $10 dollars per guest. As a returning NEXT Shabbat host, your meal-payment will be based on the number of meals you’ve held already. However, since you have a meal scheduled to take place between July 19th and August 19th, you will still receive $18 per-guest for that meal. Following that meal, if you’ve already held at least three meals, any meal registered after July 19th will only be eligible for a payment of $10 per guest. By joining with us as we make these changes to the program you will give many more people the opportunity to host and will enable thousands to participate in home-based Shabbat meals for the first time. If you’ve held less than three meals, any meal registered after July 19th will be eligible for a payment of up to $14 through your third meal. You can also see how many meals you have already hosted.

As always apologies for the lack of updates: I promise there’s a short (but major) update coming very soon, followed by more frequent posting (there’s a reason I’ve been so quiet lately).

Jaclyn Fu: NEW Creative Collective Design Challenge! “Home is Where the Phone is”

Jaclyn Fu — Sat, 17 Jul 2010 17:55:01 +0000

Design an iPhone skin for Firefox Home!

Find out more on the Creative Collective challenge page.

Calling on all designers and Firefox mobile enthusiasts! Create cool designs to make into iPhone skins and help spread the news about Firefox Home. This is your opportunity to be featured on Mozilla’s website, blogs and possibly even official Mozilla merchandise!

We’re looking for designs that convey the message of how Firefox Home gives you instant access to your favorite parts of the web. Now you can carry your home with you on your phone. Themes we are focusing on:

-Get up and go. Easily pick up where you left off with Firefox.

-Home sweet home. Access your favorite parts of the Web anytime and anywhere.

-Don’t start from scratch. Enjoy the convenience of leveraging your Firefox browsing history.

-Comforts of your web. Your private data is protected and always with you.

We encourage you to be as creative as you can be. Be abstract and don’t take the themes too literally. A Mozilla team will pick the Top 5, and it’s up to the community to vote for the winner.

Download the design template and start designing! Make sure you follow all the design guidelines to ensure your design is considered.

The challenge ends on August 15th. Can’t wait to see what you come up with!

John Wayne Hill: Mozilla Summit 2010

John Wayne — Wed, 14 Jul 2010 18:42:57 +0000

I recently got back from the Mozilla 2010 Summit in Whistler, BC.

I can sum up my entire experience in just one word.

Awesome!

But, that doesn’t really do the summit justice, not even close really. The summit was held over three days. Three full days of talking to people who change the world. Three days of meeting with like minded people who are just as enthusiastic about Mozilla as I am, even more perhaps. These people changed me a bit. I saw a spark in them that is very hard to describe. They, much like me, really believed that they could change the world (via the internet) for a better place. They really cared, not just giving lip service, about the people who use the software they help create. They put people first. Awesome!

This “army of awesome” as it was so called lent me a lot of energy. I was fueled by their passion. It was fantastic.

I gave a talk on the Perception of Performance in Firefox. I think there was about 500-600 people in attendance. It rocked my world. Many people came up to me after and told me that they really liked the work I was doing. Validation! I walked away from that talk exhausted but feeling incredibly worthy and capable of changing the world.

Firefox UX Beer Hall Design Session

Much like any conference or summit, so many things happened in the after hours events. The Firefox UX team held a Beer Hall design session where we solicited ideas, complaints, and solutions from anyone who wished to join us. The ‘end-of-summit’ party, held on top of a mountain, was the best I’ve ever attended. It was full of fun, dancing, and some great discussions. We also had fun monsters hanging out with us! We even had a cool dancing conga line!

Me dancing with the monsters

In summary I would like to thank everyone who made this possible. The summit was truly invigorating and exhilarating. In short, it was effing awesome!

Brian Louie: Mozilla Summit 2010: day 3

Brian Louie — Sun, 11 Jul 2010 04:05:44 +0000

The final day was a little shorter than the first two, but it was arguably the most memorable of the trip.

We woke up to a few lightning talks, which are five-minute demonstrations of various things that Mozillians have been working on. The lightning talks also featured the work of fellow intern John Wayne Hill, who has been working in user experience. Check out his blog at planet.mozinterns.net for more info.

Afterward, we went to our penultimate round of breakout sessions. Today I decided to stray from the usual engagement stuff to check out a session on web gaming. We were treated to demos of non-Flash-based games, including one that a fellow Mozillian had coded up on the plane on the way to Vancouver. It was, in short, a good time.

We then had one final round of lightning talks – featuring another fellow intern, Kyle Huey – followed by two more sets of breakout sessions. One of the most interesting breakout sessions featured my mentor, Jay Patel. As I mentioned in a blog post a week or two ago, one of our big projects has been working on the expansion and the redesign of the Mozilla Developer Network (previously called the Mozilla Developer Center). We’ve finished designing the new static pages, which should be going live by the end of the month. Most important in the redesign of these static pages is the categorization of documentation pages into four parts: web, mobile, add-ons, other.

If you want to see what the MDN looks like right now, check out the site. As you can tell, it could use quite the graphical overhaul.

We also hope to clean up the documentation and improve the way people navigate the site. As indicated by the heated discussion at the session, the most difficult obstacle will be localization: it’s hard to coordinate translation of documentation and to keep all of those different translations updated. We plan to keep the site constantly updated with the most updated version of an article in at least one language and to offer incentives for localizers to contribute. Furthermore, we plan to pinpoint contributors’ areas of expertise to streamline the technical review process so that articles are updated in a timely fashion.

If you want more details about the redesign of the MDN, check out the site for a copy of the PowerPoint deck that Jay and I made and also the priorities and requirements documents. If you have anything you’d like to contribute or suggest, please feel free to comment on this article or to contact me at blouie@mozilla.com. Any feedback is much appreciated!

Equally important is finding ways to get people to contribute to original documentation. Eric Shephard and Janet Swisher gave a great presentation about the implementation of so called “doc sprints,” which will bring together developers and experts in a particular field to draft documentation about a particular topic. If you have ideas to do so, definitely email Eric or Janet at sheppy@mozilla and jswisher@mozilla respectively.

After quite the busy day and an inspiring closing address by Jay Sullivan, we were corralled into gondolas that took us up to the peak of one of the highest mountains in Whistler. There was a great dinner and dance party up there; it was the perfect way to wrap up this opportunity to learn so much awesome stuff and meet so many awesome people. As they said at the closing address, there was “too much awesome.”

I can’t find a better way to describe it. I hope you’ve enjoyed reading my chronicles of the summit. If you have anything to say, don’t hesitate to talk to me!

Brian Louie: Mozilla Summit 2010: day 2

Brian Louie — Sat, 10 Jul 2010 01:20:28 +0000

Day two was equally as eventful, interesting, and informative as day one.

After starting the day with a breakfast highlighted by muffins and yogurt with berries and honey, we were treated to a couple of keynote addresses from Mitchell Baker and Mike Shaver, two of the most prominent Mozillians. They were inspiring; I’ve never felt safer and prouder of Mozilla’s future.

Soon after, breakout sessions continued. The first breakout session I attended was pretty unique: it compared Mozilla to other nonprofit movements, from the Boy Scouts to Alcoholics Anonymous. Though clearly Mozilla is different from these movements – the difference is especially apparent when analyzing certain of these organizations – but nonetheless there are certain core values that make each of these decentralized organizations successful, from having a unified mission to delineating a specific list of principles. Because precedence has been established, it’s easy to follow these examples and cultivate an effective call to action.

A few hours (and a delicious lunch with ravioli and peach upside-down cake) later, Mozilla threw a “science fair” in which Mozillians from various departments showed off demos of their hard work. The exhibits were diverse; there were some WebGL demos, some mobile demos with Nokia N900s, and there were Bugzilla-related demos. My favorite was Paul Rouget’s usage of HTML5 in Firefox 4 to do crazy things in his web page, like play videos on rotating cubes and scroll along 3D photo walls, all using just HTML, CSS, and a bit of JavaScript. The hall was clogged around Paul’s table; be sure to take a look at it online after the summit is over!

The next breakout session I attended discussed the the telling of the Mozilla mission. The session featured consultants from Engine Company 1, a market research firm. With the help of some data they’ve been collecting over the past couple years, the consultants offered some interesting and rather surprising insights, from the “people” Mozilla and its competitors convey to the branding association between parent company and browser to even the way people look at the Mozilla mascot. The main takeaway is that although Mozilla has awesome products (try out the Firefox 4 beta if you haven’t!), its brand image is not as well defined as its offerings. I accepted this as a personal challenge with regard to the developer community. I’ll update my blog as I continue to make progress over the next couple of months.

Afterward, we were treated to the summit’s World Expo, in which Mozilla branches from countries all around the world set up tables and talked about their countries. I’ll be honest: I really only went to the tables that had free snacks, including some rather interesting salted licorice. But the people were equally interesting! I met programmers from Sweden, marketers from Japan, and community developers from Chile. In short, Mozilla is EVERYWHERE.

The highlight of the event was definitely the dinner. In honor of the international theme of the event, Mozilla set up three dining rooms, each geographically themed. One room was for Asian, one was for Europe, and one was for the Americas. There was so much food that I got full after eating in just one room! But the food was delicious. Despite being full, I couldn’t help but stuff myself a little bit more.

The expo more or less marked the rest of the day, minus some barhopping and such. Stick around for updates on day three!

Jaclyn Fu: Mozilla Summit 2010

Jaclyn Fu — Fri, 09 Jul 2010 21:56:45 +0000

“Be More Like The Web”, Fairmont Chateau – Whistler, BC, July 6-10

I think I may have lost all my brain cells in my 4 days at Summit from all the mind-blowing that happened. If you’re thinking about interning at Mozilla, I advise you to choose an even-numbered year (or intern twice!) so you don’t miss out on Summit. I always loved Mozilla, our mission, my work, and the people; but my experience this week gave me an invigorated passion and a motivation to truly make the Web a better place.

I was able to match IRC handles to faces, participate in stimulating discussions on challenges we’re facing, and create new memories that still give me shits and giggles whenever I think about them (blouie, get it?) The keynotes, breakout sessions, and lightning talks raised questions about the future of OUR Web and reinforced that Mozilla is a mover in how users will interact with their browser and the Web. Issues of privacy, communicating the Mozilla mission, the future of Mobile, and building community, contended that Mozilla Firefox will always be on the users’ side. Great products for great people by great people. On this note: Firefox 4 is going to be game-changing. I’m still recovering from the demo of Tab Candy.

To all the new friends I made: Thank you for the cool conversations and let’s keep in touch.

For pictures and Twitter feed of the Summit, click here.

Wilson Lee: Cross-Domain Requests and Prototype

kourge — Thu, 08 Jul 2010 18:47:54 +0000

Ever since 3.5, cross-domain HTTP requests have been supported in Firefox. Getting this to work may seem easier and saner than piggy-backing Flash ("simply request a URL of different origin in your XMLHttpRequest!"), but unless you use jQuery, you'll realize that for some reason, cross-domain requests mysteriously fail in your JavaScript framework despite the fact that the server is correctly responding with an appropriate Access-Control-Allow-Origin header.

Jaclyn Fu: Want to win a Nokia N900? Take the Quiz Challenge!

Jaclyn Fu — Wed, 07 Jul 2010 07:00:04 +0000

Firefox 1.1 is available for download in the Ovi Store. Take the weekly Quiz Challenge for your chance to win a Nokia N900.

The challenge is now closed. Thank you for participating!

The Challenge
Pass a quiz with a perfect score for a chance to win a Nokia N900. There will be a total of 3 weekly quizzes every Wednesday, with the last one ending Tuesday, July 27th 11:59pm PST. The more quizzes you pass the more chances you have to win! Each completed quiz with a score of 100% will enter into a pool where 2 winners are selected.

We welcome all Firefox mobile enthusiasts of any experience level.

Getting Started
Firefox 1.1 for the Nokia N900 is the newest version of our awesome mobile browser. Don’t know much about it? Here’s a list of useful resources to get you started:

More information
1st Quiz: 7/7 – 7/13
2nd Quiz: 7/14 – 7/20
Last Quiz: 7/21 – 7/27
Announcement of winners: 8/4 – Congrats to our winners! http://bit.ly/99Wyh0

After the deadline of each quiz passes, you will no longer be able to take that quiz. However, you can still continue in the challenge and participate in other quizzes if you miss any.

Stay Connected

Challenge Rules
Please see complete Challenge Rules for more information.

Questions?
Contact firefoxmobile@mozilla.com or jaclynf on IRC (#mobile, #marketing) for more information.

Good luck!

Michael Kurze: En Route To Whistler

Michael Kurze — Tue, 06 Jul 2010 13:48:05 +0000

The two first weeks as an intern at Mozilla were like a blast. Now we are heading for the worldwide Summit 2010 in Whistler, Mountain View.

Independence day with fireworks in SF is just over, and we are already heading back to the city, this time for the airport. In the past two weeks there was not much time for blogging: Mozilla interns BBQ, awesome work at the Metrics team, and Germany advancing past the round of eight in the soccer world cup.

Before I board the plane, I want to share a picture of the custom keyboard I am using at Mozilla:

Mission accomplished!

Update:

Thanks to Pascal at Mozilla who gave me a keyboard with German layout.

Michael Kurze: Stirring Kettle

Michael Kurze — Tue, 06 Jul 2010 11:45:59 +0000

To work on my intern project at Mozilla, I have learned my way around with Pentaho Data Integration (aka Kettle).

What is this data integration anyways?

At any organization as large as Mozilla, enormous amounts of data are generated, that are potentially useful when making development decisions: We count downloads, up-to-date checks for the malware blocklist and installed addons, and there are webserver logs for the various Mozilla Web sites, the responses for Test Pilot case studies, and so on.

Such data pieces are generated in large quantities every day. So before the data can be analyzed by the metrics team, it needs to be grouped by common criteria (e.g. by date, language, region or hour of the day). This way, the data sets are summarized and the amount of becomes digestable for statistical tools such as R, Microsoft Excel or OpenOffice Calc.

A data collection that is accessible for analysis in this way is often called a data warehouse, as it persists data and makes it accessible in consumable quantities. Data integration is the task of transforming data from various sources into the data warehouse representation.

How does Kettle help here?

Kettle is a powerful node based tool to model and implement data integration tasks. It simple to visually express data transformations without getting lost in a soup of nested function calls and intermingled SQL-statements. Nodes in the graph represent transformation steps, while the edges indicate the flow of records. Each step handles one record at a time, allowing for parallel handling of large data sets.

There are lots of predefined steps available to import and export data to and from text/CSV files or database tables, to perform basic calculation, to group and to sort. There are steps for details-lookup, for merging and for splitting of record sets. When manually programmed, such operations require a lot of hand coding and are easy to get wrong. With Kettle, it is just a matter of connecting the right nodes and setting the appropriate configuration.

Whenever the predefined steps are insufficient, it is possible to write custom steps in JavaScript — or Java if performance is a concern.

No downsides?

Of course, there is always room or improvement, with Pentaho Data Integration especially in the area of usability. On Mac OS X, the visual editor does not use the appropriate shortcuts (it requires you to press ctrl-c instead of cmd-c for copy to clipboard). Also, the node editing is a bit fiddly: The editor for the various transformation steps should be a contextual inspector that automatically shows the editing options for the currently selected steps. Instead, I manually have to open it for each step (that means: all the time).

In the end, Kettle is very useful nonetheless: It allows for headless execution of the created transformations, so that the data integration process can be automated. And it has very good support for regular expressions, allowing for the parsing of fairly complicated source formats.

If you have to deal with the conversion of file and/or database formats on a regular basis, you might want to give Kettle a try. There is a free community edition of PDI available at the Pentaho website.

John Wayne Hill: Firefox Home Tab Concepts

John Wayne — Thu, 01 Jul 2010 18:10:29 +0000

As you may know, I’ve been doing a lot of researching and thinking about post Firefox 4 Home Tab during my internship here at Mozilla. I’ve taken the research I’ve conducted, my colleagues thinking, experience and ideas, along with my own experience and ideas and put together some wireframes. These sketches represent some very basic directions that we could take with the Home Tab.

It’s important to note that these concepts represent some very basic and rough ideas of what the home tab could look like in the future. These are in no way absolute directions, but rather provide some jumping off points for future work.

That being said, let’s frame these concepts a bit better.

I’ve been thinking about the word “Home” and it’s meaning for a while. So, what does it mean and how am I using it?

Home: a place to store my stuff. I define home here as a place to store my stuff. This is a very basic definition and certainly does not cover all uses of the word but I’ve found it adequate for my research.

I’ve also done some research looking at current ‘start’ pages on the web, as well as some academic research. Currently most of these ‘start’ pages allow you to collect things, put your things in ‘boxes’, they allow for customization, and usually have some sort of quick access links. But, … they still don’t understand me!

What we really need is a better way to organize and collect my online data, all of it. We need a way to help me find stuff I’ve put online, stuff my friends have put online, and general online trends. We need a way of representing the relationships between these things. We need to better understand people’s locations and how that effects browsing habits. Furthermore, we need a way for me to discover new things, not just random things (which is entertaining at times), but things that matter to me.

I’ve also identified some keywords that I think are important in going forward with my research: Personal, Fast, Digestible, Easy, Stable, Findable, Discoverable, and Delightful.

With this basic framing in place we can now begin to explore this design space via some concepts.
(Please note that I did not wireframe all my ideas, concepts, and sketches but rather only a subset of these)

Sessions & Discover

The Sessions & Discover concept illustrates many ideas. First, you have a basic session restore feature that allows you to save and restore browsing session with ease. The sites feature is basically a location aware list of your favorite bookmarks. The Links feature is a listing of all the links, photos, videos, etc that you have shared across the web; this makes finding these links much easier as they are likely pretty important to you. Next up we have the Discover feature. This feature is a way for Firefox to show you things that you are interested in that you might not have discovered yet. For instance, if you were big into photography, like me, Firefox might ‘know’ this by your browsing history, bookmarks, etc. Firefox could then easily find other websites and applications that you are likely to be interesting to you. On the very right is the Contacts feature. This feature collects all of your contacts from across the web and lets you know who is online in a open, non-platform binding manner.

Many of these features are included in other concepts below.

Drawers

The Drawers concept includes features such as Sites, Links, and Contacts. Furthermore it features a Downloads section which lists all of your downloads for greatly findability. History is located on the left side of the browser and slides out, as a drawer, to list your browsing history. Additionally a Discover drawer is located on the right which also slides out and shows things that you could discover.

WordPress

The WordPress concept takes many of the above features and puts them in a very familiar WordPress like layout. This would allow for a more detail per individual feature while still being navigatable. Furthermore, this concept features a Personal Search which allows you to search across all of your personal items, history, links, etc.

Post in the Middle

The Post in the Middle concept shows many of the same features as the concepts above. Additionally, this concept features a quick post area that allows for quickly posting to a blog; as well as a simple ToDo list.

Spokes

The Spokes concept is a way to show the relationships of your data to you. You could click on the Sites icon to see your bookmarks, or click on Contacts to see a listing of friends; from there you could dive deeper to take a look at what links you have shared with a particular friend, or what links they have shared with you.

Left Nav

The Left Nav is a concept that shows greater details for each feature while still providing easy, very common, navigation.

Grid

The Grid concept is a way to show lots of information in an overview like state. Individual items could be drilled down into to see more detail and information. Furthermore, this concept has a Web Clips feature which would allow you to ‘clip’ a certain part of a website and have it shown and updated on your home page (shopping for prices, game scores, etc). The Events feature shows you events in your local area that you might be interested and could also pull information in from various calendars.

As a Site

The As a Site concept shows what Firefox Home Tab could look like as a website. This could allow you to use a friends computer, but log into Firefox and have access to all of your data.

Timeline

The Timeline concept shows your history, discovery items, and trending topics in a timeline view. This view shows history along a timeline as well as showing ‘future history’, Discovery towards the front. This allows for a great mental model of things that you might be interested in going to, but have not yet visited. Individual favicons would be displayed along the top of the line if a topic/website is trending across the web or below the line if a topic/website is more personal to just you. Each favicon could be clicked to see more information. Additionally, a slider along the bottom of the page allows for different zoom levels to get a broad or vary narrow view of your personal timeline.

Hitchhiker’s Guide

The Hitchhiker’s Guide concept is directly inspired from the book interface of the movie. This provides a delightful way of exploring your personal information gathered from across the web.

Feedback, Critique, and Future Directions

I presented these ideas and concepts to the Firefox UX team, of which I’m a proud proud member! My colleagues gave me great feedback, critique, and suggestions. Some feedback that I recieved was that there wasn’t always a clear visual hierarchy to these designs, there was a desire to see other firefox content within these concepts, that clips and contacts are great, worry about how to show different web applications (not app tabs), a worry about Links vs Sites, thoughts on how to scale these ideas to other devices, thoughts on sharing things via the browser, comments on how to make Firefox Home Tab more personal, as well as how to show that things are private and secure, and much much more.

Future directions include iterating on these and other ideas, ideating on my colleagues great feedback and critique, and getting more public feedback. Furthermore, I wish to explore more design inspiration for future interfaces. I also wish to further think about how concepts might scale to other devices, and how to make the home tab much more personal.

Michael Kurze: 72 Hours at Mozilla

Michael Kurze — Thu, 24 Jun 2010 08:42:50 +0000

On Monday, my internship at Mozilla started, and I can tell you how great it is. Since everything is open source anyway, I am actually encouraged to blog and talk about my work there.

Mozilla has more than a hundred people at its headquarters in Mountain View, while even more contributors work from all around the world. There are more than thirty other interns here, involved in various projects from mobile development, to metrics (such as myself), to developer engagement. I am going to write more about the data integration project I am working on, but first I want to give a quick impression of what an internship at Mozilla entails.

There are various benefits that help you to relax when you need to, and to focus on your work otherwise. For example free snacks and drinks (even beer) are provided for everyone, there are some big screen TV sets (yes, I watched the German team advance in the World Cup today, wooot), as well as pool and ping pong tables.

Also, there are lots of small conference rooms, so whenever you need some quiet for work and/or a phone call, you can find a spot, or just hang out at Ten Forward which is like a bar, a living room and a cinema in one. Funny thing: All conference rooms are either inspired by the Star Trek series, or pick up on classic internet memes. Other than Ten Forward, there are for example Holodeck (where new interns are trained), All your Base and the Bikeshed.

Every Monday after the all-hands meeting there is free food for everyone, and every Wednesday evening there is Intern Movie Night (we watched Primer tonight: great, but mind-boggling). Yesterday, I was at lunch with the Metrics Team: There is some great seafood to be had in mountain view.

In July, there will be the Mozilla Summit in Whistler, Canada. I will make sure to write about that, too.

Michael Kurze: Going to Mozilla

Michael Kurze — Fri, 18 Jun 2010 17:07:33 +0000

Starting on Monday, June 21 I am going to intern at the Mozilla Corporation (MoCo) in Mountain View, California. Yay!

For quite some time I have been following the mozine and later PMO. So I am absolutely thrilled to have this opportunity, and this also means that this blog will get a new topic added. Not only will I get to know many more interns with whom I am going to live in Mountain View, and not only will I participate in the Mozilla project together with all the great people at the MoCo HQ. But also I will be attending the Mozilla Summit, the biennial meeting of people from all over the world that made great projects such as the Firefox web browser and AMO possible.

My internship position will be at the metrics department led by Ken Kovash and quite probably I will be allowed to go into the details of my project there, either at this blog or at a Mozilla blog.

Leaving for CA

If you plan to go abroad to the U.S. for an internship, I suggest you apply for the internship position(s) of your choice at least two months before the actual start of the internship. I was a bit late to the party and that led to a rather tight schedule: As a Germany based student at RWTH Aachen University, I had to invest some time in getting the visa. But fortunately there is a very helpful visa sponsoring partner, so everything went smoothly after all.

I do not know about other areas, but as a student in computer science you can expect compensation for an internship in the U.S. which is not necessarily the case in Germany. I applied at two organizations, and in both cases their offers covered living expenses and the flight to California. So I really do recommend that next spring you visit the web site of any company or organization you always wanted to get to know, and apply for an internship there. Make sure that the professional and academic experience on your resume matches the position you apply for, and prepare for two to three phone interviews.

John Wayne Hill: Perceived Speed Performace

John Wayne — Wed, 16 Jun 2010 21:25:19 +0000

Firefox is fast, no doubt about it. But for many people it feels pretty slow when starting up. Chrome, while only marginally faster than Firefox at starting, feels much faster. By analyzing videos of these start-up processes we can start to understand what makes Firefox feel slow.

First, last start with some definitions of browser start-up events.

Before Spinner: the time from when the user clicks the application icon to when the spinner starts running.
Spinner Running: the time while the spinner is actually running (may appear and disappear).
Before Window Draw: the time from when the spinner stops running until the window begins drawing.
Window Drawing: the time from when the window starts drawing until the title bar comes into view.
Drawing Title Bar: the time it takes the title bar to come into view.
Window Done Drawing: the time it takes for the window to draw after the title bar is seen.
Drawing Chrome: the time it takes for the browser chrome to be drawn.
Website Drawn: the time it takes for the entire website to be drawn (different websites used).
Close Window: the time it takes from when a users presses the close button on the browser until when the browser is no longer shown.
Active Icon Disappears: the time it takes from when the browser is no longer shown until the application is no longer running.
“Fresh”: brand new profile; standard set of plugins enabled: Acrobat, Google Update, Java Deployment Toolkit, Java(TM) platofmr SE 6 U20, Microsoft Office 2010, Shockwave Flash, Silverlight, WPI Detector 1.1
“Full”: fresh profile (only the history data used to create the 50 bookmarks below); standard set of plugins; 50 bookmarks (the 50 top alexa global sites); 5 tabs in the session (google, facebook, youtube, wikipedia, live.com); 2 common add-ons installed (ietab and adblock plus)

Videos

My colleague Alex Faaborg shot the following videos with an SLR at 60fps. Furthermore he created a very small application that would show time flying by in milliseconds. He then loaded up each browser, with different configurations, three times each.

Firefox Fresh (no plugins): http://www.youtube.com/watch?v=HtC7XVdq8Ko
Firefox vs Chrome (Fresh): http://www.youtube.com/watch?v=S3oLFHkeCco
Firefox vs Chrome (Full): http://www.youtube.com/watch?v=t7uAFp4gRq4

General Observations

Spinner Count: Upon starting Firefox, the spinner graphic is shown (and disappears) a total of three times, meanwhile in Chrome the graphic is only shown twice.

Window Drawing: In Firefox, the window is drawn (animated to size), then the browser chrome is drawn, then the website is drawn. In Chrome, the window and browser chrome is drawn all at once and then the web- site is drawn. This helps Chrome to feel faster because there is less visually going on at different times. Firefox feels very sequential in it’s loading, while Chrome seems to do everything at once. This allows Chrome to feel fast because once the window is animated the size, everything is pretty much ready to go. This is especially true if google.com is set as your homepage on Chrome.

Webpage Drawing: In Chrome the webpage loading icon is fairly small and is never ‘fully’ seen. While in Firefox the loading icon is large, grey, and can always be seen in it’s entirety. This is visually ‘bloated’ and makes Firefox seems slower. Furthermore, because Chrome’s loading icon animation goes ‘around’ faster, Firefox’s loading icon takes more time (seemingly) to get ‘around’.

Page Title: In Firefox, a page’s title is shown on the tab right away, while in Chrome the title is not shown un- til the website has completed loading. This is a simple trick that allows Chrome to feel faster in that once the title is shown, the page is ready. While in Firefox, a page’s title makes it seem like a page has loaded but
in fact the page isn’t ready to be interacted with quite yet and the user has to ‘wait longer’.

Graphs

The following graphs show the average time, in milliseconds, each event takes to ‘complete’.

Explanation of Deltas

In the Firefox vs Chrome Fresh Installs graph, Firefox was loaded up with the default minefield page. This page is significantly heavier (both in text and images) than the Chrome Fresh Installs default page (google.com).

It should also be noted that Chrome draws the window and browser chrome at the same time.

In the Firefox vs Chrome Full graph, Firefox was loaded with at least four tabs while Chrome was only loaded with one tab (google.com). This has a significant affect on the Window Drawing time and the Close Window time (diaglog box that informs of closing multiple tabs opens and needs to be closed first).

Recommend Actions

With just a few changes in the Firefox start-up process, we could greatly enhance the feeling of Firefox’s speed. The changes listed below are recommendations to help better the overall Firefox experience.

Draw the OS spinner icon as little as possible, but one solid break isn’t bad and might be better than one really long spinner.
Draw the browser chrome while the window is being animated (drawn) to size. So that most of the drawing happens simultaneously rather than sequentially.
Make a new ‘website loading’ icon with less visual weight that animates faster but is slightly larger (would allow a user to ‘see’ the faster animation).
‘Lazy’ load tabs that are being restored (already being talked about).
Load upgrades and add-on updates upon browser close, not browser start.
Delay loading the website’s title until the website is ready for interaction.

Jaclyn Fu: Lock and Loaded

Jaclyn Fu — Wed, 16 Jun 2010 17:41:20 +0000

Firefox Home for the iPhone and Firefox 1.1 for the Nokia N900 are about to go live soon! So what have I been doing to help support these launches?

With the submission of Firefox Home, we’re going to launch an iPhone skin design challenge through the Creative Collective to find the coolest looking designs. Get those creative juices flowing! Be on the lookout later in June.
Firefox 1.1 is an awesome mobile browser, but you’ll need a Nokia N900 in order to experience it. Don’t have one? We got you covered! A quiz challenge will also be launched later in June that will feature TWO Nokia N900 phones as grand prizes. Start reading up about Firefox 1.1 in the mean time so you have the best chances of winning!

To find out more information, tune in to the bi-weekly Community Marketing Calls or the IRC #mobile channel.

Brian Krausz: How to Dispose of a Hard Drive

Brian — Thu, 03 Jun 2010 01:50:40 +0000

In 5 easy steps:

Find hammer
Give up on finding hammer…grab pliers
Attack drive with pliers, destorying circuitry but leaving platters untouched
Cut finger, swear and bleed profusely on drive
Repeat steps 3 & 4 until you realize that nobody cares enough about your data to read it directly from platters. Toss drive in trash, go grab a band-aid

Tada!

Jaclyn Fu: Off to the Races

Jaclyn Fu — Sat, 29 May 2010 17:31:02 +0000

The first three days were fun, but getting started on my projects for the summer is even better! I had my 1 on 1 meeting with Caitlin and we sat down to identify objectives and which of my ideas met those objectives. It’s so exciting to have your ideas recognized and to be put into place, especially as an intern – there’s no coffee fetching here (only if it’s for yourself)! At Mozilla, interns have just as much responsibility and accountability as regular employees. Love it. I have full control over my projects and creative input in everything I want to do.

My first task was to write creative briefs on the ideas I’m proposing to help drive downloads for Firefox Home and Firefox 1.1 on the Nokia N900. Firefox Home is an iPhone application that will sync your desktop and mobile phone with all of your Firefox history, tabs and bookmarks so that you can just get up and go with all your stuff. Pretty handy for people like me who hate typing out lengthy URLS and who always forget passwords. If you have a N900, download Firefox 1.1 and check out how features like the Awesome Bar, Add-Ons, and Firefox Sync can make your mobile browsing experience even better.

Writing the creative briefs reminded me of writing case briefs for marketing class. It’s definitely a lot harder to write a proposal completely off of your own idea than analyzing a previous case. But with them almost complete, I have already started talking to different Mozillians and got the ball rolling on putting things together. Can’t wait to see them at materialization!

Brian Krausz: Diaspora’s Upfront Costs

Brian — Thu, 27 May 2010 03:08:55 +0000

This post on Hacker News got me thinking about the costs Dispora‘s going to have receiving all of their money and fulfilling their promises, so I did a little digging. The numbers below are estimates, but they should be fairly close to actual costs for these services (assuming no huge burst in donations over the next 6 days):

$ 5510 = $190k * 2.9% Amazon fees[1]
  1800 = 6k donations * $0.30 Amazon fees
  9500 = $190k * 5% for Kickstarter
  4150 = 5000 cds with jewel cases * $0.83 (random googling, I assume the "note from our team" will be on the jewel case insert)
  1380 = 400 sheets of stickers * $3.45 (zazzle, 20 sheet of stickers, 2 stickers per person)
 10200 = 3000 shirts * $3.40 (customink, Gildan 50/50 1 color on white front only)
  9000 = 3000 postage & packaging for shirts + stickers * $3
  2000 = 2000 postage & packaging for just stickers * $1
  1200 = "Turnkey hosting" for 600 people[2]
  2800 = 4 new computers*$700
======
$47540

[1] I’m not sure if Kickstarter gets a bulk discount here, or if it’s Dispora’s account history, so a volume discount may apply. I also assume all transactions are billed at the $10+ rate (2.9%) rather than the < $10 rate (5%) for simplicity.
[2] Turnkey hosting and phone support are hard to estimate...it may be more if they need to pay for phone support, but I think this is a reasonable number. I'm also including project hosting costs. I know they say plenty of hosting companies have offered their services, but you can't guarantee that will be there.

Keep in mind that this misses three big points:

Declined credit cards & canceled/fraudulent donations – I have no clue what the expected amount of these is
People who requested a gift for donating who never give their contact info
The huge overhead for packing/sending all of these items, though I imagine a day of pizza and soda for volunteers can get all of them packed (the con I used to help run had similar “mailing parties” that were fairly effective)

With that in mind you’re looking at about 25% of the funding going toward transaction fees and fulfilling the rewards. This leaves around $142,000 left for them, which is still plenty of money. Though I don’t want to think about what an accountant would say about this money and how much he would charge to make it legitimate.

Don’t get me wrong: I think Diaspora is a great idea and I’d love to see it succeed, but I wonder if the founders considered the logistical overhead to this whole thing. Granted, this would have been smaller had they only raised $10k, but it’s still a big task to undertake. I hope they’re ready for it and they don’t let us down.

Brian Krausz: Boston WordPress Meetup Example Code

Brian — Thu, 27 May 2010 02:01:50 +0000

As promised here’s the example code from the meetup I gave last Monday. It’s fairly small, so I only describe what it does briefly in the top comment. Feel free to use it how you wish (though if you make a lot of money off of it you owe me a t-shirt):

Example 1: Erroring out on install

register_activation_hook(__FILE__, 'bostonwp_install_error');

if('error_scrape' == $_GET['action'] && basename($_SERVER['PHP_SELF']) == 'plugins.php') {
    echo '<pre>' . get_option('bostonwp_activate_error') . '</pre>';
    delete_option('bostonwp_activate_error');
    deactivate_plugins($_GET['plugin']);
    die();
}

function bostonwp_install_error($error = false) {
    if(!$error) {
        $error = 'Generic Error Occurred';
    }
    add_option('bostonwp_activate_error', $error);
    //trigger a fatal error
    trigger_error('', E_USER_ERROR);
}

Example 2: Updating your DB structure

// http://codex.wordpress.org/Creating_Tables_with_Plugins

define('BOSTONWP_DB_VERSION', '1.0');

register_activation_hook(__FILE__, 'bostonwp_install');

$wpdb->bostonwp = $wpdb->prefix . 'bostonwp';

function bostonwp_install() {
    global $wpdb;

    $installed_ver = get_option( 'bostonwp_db_version' );

    $sql = 'CREATE TABLE ' . $wpdb->bostonwp . ' (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        time bigint(11) DEFAULT 0 NOT NULL,
        name tinytext NOT NULL,
        text text NOT NULL,
        url VARCHAR(55) NOT NULL,
        UNIQUE KEY id (id)
        );';

    if($wpdb->get_var('show tables like "' . $wpdb->bostonwp . '"') != $wpdb->bostonwp) {
        require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
        dbDelta($sql);

        $welcome_name = 'Mr. WordPress';
        $welcome_text = 'Congratulations, you just completed the installation!';

        $insert = 'INSERT INTO ' . $wpdb->bostonwp .
            ' (time, name, text) ' .
            'VALUES (' . time() . ',"' . $wpdb->escape($welcome_name) . '","' . $wpdb->escape($welcome_text) . '")"';

        $results = $wpdb->query( $insert );

        add_option("bostonwp_db_version", BOSTONWP_DB_VERSION);
    }
    elseif( $installed_ver != BOSTONWP_DB_VERSION ) {
        require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
        dbDelta($sql);

        update_option( "bostonwp_db_version", BOSTONWP_DB_VERSION );
    }
}

Example 3: Adding admin menus

// http://codex.wordpress.org/Adding_Administration_Menus

add_action('admin_menu', 'bostonwp_menu');
function bostonwp_menu() {
    add_posts_page('My Page', 'My Page', 'manage_categories', 'bostonwp_page', 'bostonwp_dostuff');
}

function bostonwp_dostuff() {
?>
    <div class="wrap">
        <?php if(function_exists('screen_icon')) screen_icon(); ?>
        <h2>My Boston WP Page</h2>
    </div>
<?php
}

Example 4: Adding meta boxes to posts

// http://www.deluxeblogtips.com/2010/04/how-to-create-meta-box-wordpress-post.html

add_action('add_meta_boxes_post', 'bostonwp_box');
add_action('save_post', 'bostonwp_save');
add_action('delete_post', 'bostonwp_delete');

function bostonwp_box($post) {
    // http://codex.wordpress.org/Function_Reference/add_meta_box
    add_meta_box('bostonwp', __('Boston WP'), 'bostonwp_meta_box', 'post', 'side');
}

function bostonwp_meta_box() {
    global $post;
    $val = get_post_meta($post->ID, 'bostonwp', true);

    // Use nonce for verification
    echo '<input type="hidden" name="bostonwp_nonce" id="bostonwp_nonce" value="' . wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

    // The actual fields for data entry
    echo '<input type="checkbox" name="bostonwp" value="1" ' . ($val ? ' checked="checked" ' : '') . ' />';
    echo '<label for="bostonwp">' . __('There Is Cake!') . '</label> ';
}

function bostonwp_save($id) {
    // verify nonce
    if ($_POST['action'] != 'inline-save' && !wp_verify_nonce($_POST['bostonwp_nonce'], plugin_basename(__FILE__))) {
        return $id;
    }

    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $id;
    }

    update_post_meta($id, 'bostonwp', $_POST['bostonwp']);
}

function bostonwp_delete($id) {
    delete_post_meta($id, 'bostonwp');
}

Example 5: Adding columns to post list

add_filter('manage_posts_columns', 'bostonwp_posts_column');
add_action('manage_posts_custom_column', 'bostonwp_manage_column', 10, 2);

function bostonwp_posts_column($cols) {
    $cols['bostonwp'] = __('Boston WP');
    return $cols;
}

function bostonwp_manage_column($name, $id) {
    if($name != 'bostonwp') {
        return;
    }
    $cake = get_post_meta($id, 'bostonwp', true);
    if($cake) {
        echo 'There is cake!';
        $cake = 1;
    }
    else {
        echo 'The cake is a lie!';
        $cake = 0;
    }
    echo '<div id="inline_' . $id . '_bostonwp" class="hidden">' . $cake . '</div>';
}

Example 6: Expanding Quick Edit

add_action('quick_edit_custom_box', 'bostonwp_posts_custom_box', 10, 2);
add_action('admin_head-edit.php', 'bostonwp_add_script');

function bostonwp_posts_custom_box($col, $type) {
    if($col != 'bostonwp' || $type != 'post') {
        return;
    }
?>
<fieldset class="inline-edit-col-right"><div class="inline-edit-col">
    <div class="inline-edit-group">
        <label class="alignleft">
            <input type="checkbox" value="1" name="bostonwp" id="bostonwp_check">
            <span class="checkbox-title">This Post Has Cake</span>
        </label>
    </div>
</fieldset>
<?php
}

function bostonwp_add_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('a.editinline').live('click', function() {
        var id = inlineEditPost.getId(this);
        var val = parseInt(jQuery('#inline_' + id + '_bostonwp').text());
        jQuery('#bostonwp_check').attr('checked', !!val);
    });
});
</script>
<?php
}

John Wayne Hill: Firefox Home Tab

John Wayne — Wed, 26 May 2010 18:45:16 +0000

As you may know, I’m currently working as User Experience Intern at Mozilla. I’ve been tasked with designing the next generation Firefox Home Tab. I wanted to share what work I’ve done so far and give a general update on what I plan on doing in the near future. I will be routinely updating the progress and my work on this project as the summer goes forward. So check back often to keep updated on what I’m doing.

I think it’s important to know right off the what we (the UX team) are imagining for the new home tab. We do not imagine the new home tab to be a content aggregation service, but rather we hope to fully understand and push the boundaries of what we (as a browser) can do that websites might not be able to do well. I’ve come up with some approaches that I’ve been looking at to use while designing, which I’ve listed below.

Possible Design Tools

Golden Questions
used to understand many different perspectives
Secondary Research
what research has been done so far by academia and other industry players?
User Research
understand what users of home pages via surveys, possible interviews
Data Aggregation
bring together all data points, see trends, gather insights
Brainstorming
generate multiple ideas on what we can do as a browser
Design Lunch
group brainstorming to get multiple view points and crazy ideas
Sketching
to get ideas out of our heads
Concepting, Ideating
to fully explore a design space
Prototyping
to further explore a particular design
User Studies
to understand gaps and problems with a design or concept

Current Existing Approaches

I started out with this project by completing a competitor analysis of current ‘home’ pages on the web. This would allow me to get a good grasp of what is currently ‘out there’ in the world, to get a base understanding of what people actually use, to find out what is popular currently, to understand some trends, and to find what existing approaches currently ‘do right’. In order to be effective, I decided to focus on the following web sites:

Yahoo

My Yahoo

iGoogle

Windows Live

MSN

My MSN

Netvibes

Chi.mp

Flavors.me

UnHub

In doing this research I looked at trends among these sites and general observations. I aggregated
this research into the following observations.

Most home page current use the gadgets/widgets
Boxes are the prevalent way to interact with these widgets
Most sites/pages allow for customization of layout, color choices, and/or themes
News was the most popular default widget, although I didn’t find it useful (survey here?)
Ads were very prominent and disruptive to the experience
Search was very prominent and always in the same position on every different site/page
Tabs on the side/top were the predominant way to organize these horrible boxes
Twitter trends were popular
Facebook connect was popular
Quick sharing was popular
Quick links to other integrated services were popular

You can find my full research (notes) on Google Docs

Summary and Next Steps

To summarize, we are not looking to build the next iGoogle, Netvibes, or My Yahoo clone, but rather
looking at what we (Mozilla) can do with our special role as an information broker and not a
web site. I’ve outlined some possible design tools and approaches to use in this project, and looked
at existing solutions in the world today.

As I move forward in this (very fluid) design process, I’ll be blogging about individual steps I’m
taking as well as my reflection on those steps and my process in general. I hope to continue
writing about my experience here at Mozilla and the awesome things on which I get to work.

I look forward to your feedback, comments, and ideas while continuing my work on this project.

Jaclyn Fu: 270

Jaclyn Fu — Tue, 25 May 2010 21:40:50 +0000

Sitting on a padded rolling filing cabinet in a conference room named “Peanut Butter and Jelly”, I witnessed the creative whirlwind that would be the makings of a product launch. Amidst all the ideas being thrown around, teleconference technical difficulties and big dogs, I was truly inspired. The marketing meetings I attended really showed me how much of an impact such a small group of people can make on millions of people. It was in this Peanut Butter and Jelly conference room that Firefox Mobile was going to be marketed and rolled out. What does it take to market Firefox Mobile? A whole bunch of Google Docs, emails, coffee and amazing people. Everyone has so much responsibility and input, I can’t wait to get started and produce results!

I was reminded of Mozilla’s vision and how everything centered around improving the web experience through open-source transparency. It still surprises me that only a company of 270 employees can make such a great difference in the way we browse the web – and soon, how we browse on a mobile phone. Probably had a lot of interns..

Jaclyn Fu: Day 1

Jaclyn Fu — Mon, 24 May 2010 20:56:04 +0000

Hey everyone! This blog will be about my summer at Mozilla as a Firefox Mobile Marketing Intern. I will be posting on my thoughts about mobile browsing, Firefox on different phones and what it’s like to be a product marketing intern here at Mozilla.

To kick it off, my first day went something like this:

* Dogs
* Orientation (which was an overload of information on how good the life of an intern is)
* Meeting my mentor – Yay Caitlin!
* Getting lost finding the bathroom
* Getting lost finding my desk
* Chinese food!
* More stickers added to my laptop (I found that the average stickers/laptop here is around 2)

I’m so excited to get my hands on an Android phone so I can start testing mobile browsers (basically to confirm that Firefox Mobile is the best)! I’ll also be working to drive downloads for Firefox 1.1 on Nokia N900s and to engage with the early adopter community.

Only 43 more days until Mozilla Summit in Whistler!

John Wayne Hill: Firefox User Experience

John Wayne — Thu, 20 May 2010 21:55:06 +0000

Woo hoo!

This summer (actually I already started) I will be working with Mozilla on the Firefox User Experience team. I couldn’t be more excited or happy. Firefox is a great product that has around 370 million users worldwide. This is a huge audience for which to design and will come with many challenges. I look forward to tackling these challenges head on with all that I have learned about design. I also hope to learn more than ever about designing in the real world, working with real people, on stuff that will actually be in the world and used by millions. It’s scary as hell and I love it!

Reflection Thus Far

In thinking about the past (almost) two weeks, I can already seen how things have changed for me a bit. I’ve started to understand how UX teams might work in real world companies, specifically companies that are developer centric. Furthermore, I’ve started to understand the unique challenges that come with designing open source software. There are so many people involved, so many opinions, and so very many valid use and edge cases. It’s superbly interesting and a little overwhelming. I’m starting to look through my toolset and understand what tools I have that can best be used within a community such as Firefox. My colleagues (wow, that’s awesome to say) have blogged about some of these things as well. I work with really smart and amazing people. I’m very grateful for their help and support thus far.

You might want to have a look at what Alex Faaborg, Jennifer Borris, Aza Raskin, and Alex Limi are saying. It’s awesome!

The first week here I was a sponge, running around trying to soak up as much information as possible. It also happened to be an intensive work week where we had all of our remote people in the office. It was a really great week where I learned quite a bit about how things work at Mozilla and the direction that Firefox was taking. I also got to participate in many quick design meetings where we discussed and ideated on designs. Furthermore, I was able to give my opinion on some Bike Sheding issues and I really felt welcomed.

This week (my second) I’ve started my first project and helped the team on some other stuff. Limi and I filled a bazillion bugs for the Firefox Papercuts issues (see his presentation on the topic). So now I have a great grasp on filling bugs within bugzilla. My new project involves doing a good amount of research on what the next generation “home tab” might look like for the web. I really like this project thus far as it really allows me to stretch my imagination and think about the future of the web and how it can be better designed for people.

So far, I’m having a great time. The Bay Area is fantastic. Mozilla is really great, and I love the people on the UX team. Plus I’m working for an organization that has a dino head for a logo. How cool is that!

Life is good.

Adrian Kalla: The Proprietary Trap

Tue, 11 May 2010 02:08:24 +0000

Once again I was reminded, that proprietary file formats are not only evil, but are real trouble for the user at the end. Here is the story:

After finishing secondary school seven years ago, I started a movie project using all the pictures and video material we have gathered in school. As the software I have chosen "Pinnacle Studio 8", because my uncle was using it at that time too. I should have listened to him, when he was telling me, that "this is the worst software I have ever seen", because he was right. It took me nearly two years and an upgrade to "Studio 9" to be able to finish the project - the software was simply so buggy, that it was impossible to encode a one hour movie without bugs (e.g. missing transition effects, reversed transition effects) or crashes.

But finally - about five years ago my free time project was ready, burned to DVDs, and I was happy that I don't have to use Pinnacle's software anymore

2005 I wasn't thinking about HD videos (and my PC would be even too slow to allow me to watch them, not even considering encoding HD videos). But now I'd like to have that movie in HD.

I still have all the project files, so it would be really nice to just: choose a good video editing software, open the project and export it to 1080p. Unfortunately, that's not possible, because Pinnacle stores the project in a proprietary format. So the only choice I have, is to rely on "Pinnacle Studio 14", which can export my movie project to HD.

In theory, "Studio 14" can open projects saved by "Studio 9" or newer, but I remember my experience upgrading "Studio 8" to "Studio 9" - it took me several days to remove all the glitches it created in the project... I don't have so much time for it now - I just want to have it working and be ready with it in one single day.

To come to a conclusion: my hopes are, that:

maybe someone reading this knows a converter for Pinnacle Studio projects to use them with other software?
if the above will not work... The I'll have to give "Studio 14" a try, but that is my least favorite option - I read too many comments about that version saying "as buggy as the previous versions" :/

At least I've learned my lesson: never, absolutely never store anything in a proprietary format - even if you think you won't need to use it in the future - you never really know. And you never know what (and if any) software will support that format in the future. Stay on the safe side - stay open.

Brian Krausz: On To Bigger Things

Brian — Tue, 04 May 2010 01:20:56 +0000

Alternative title: OMGWTF I just quit my job!
Alternative alternative title: A better way to resign from a company

That’s right. I just gave notice that I’m leaving a great job with awesome coworkers and interesting problems. I’m trading all of that for the privilege of moving across the country, not taking a salary, and working 80 hours a week. If I’m lucky, I’ll get to continue doing this for a long time, rather than finding another job that pays actual money.

Shorter explanation: I’m moving to Silicon Valley to start a business.

Not too much to say right now about the startup. I got a funding offer I couldn’t turn down for an idea I really believe in. Expect more posts in the future, since they valley always does inspire more blogging in me. For now I don’t want to say too much about the idea itself, since we’re still fleshing a lot of things out, but I promise there will be some awesome posts about it in the future.

However, there is something to say about my current employer, TripAdvisor. Shortly put, they’ve been amazing. I got to work on awesome features (like mobile flight search, which just launched today…tripadvisor.com from a mobile phone). And not just work on them but have a major say in their direction. My coworkers were a lot of fun, and my boss was flexible and understanding.

I knew before I graduated that I would eventually leave my first employer to start a business (though I didn’t think it would be so soon). TripAdvisor made that an incredibly hard thing to do, which I commend them for. Hopefully I’ll be hiring soon, but until I open a Boston office, definitely apply for a position with them. If you’d like a contact within the company (not necessary, the engineering HR manager is a solid guy and will get your resume to the right place), just ask.

I’ll be out in Mountain View in early June. See you on TechCrunch .

Wei Zhou: Tencent QQ UX design – Chinese user experience products is picking up…are we ready for the combat?

wei zhou — Tue, 27 Apr 2010 21:27:17 +0000

This article is about an reflection on a user experience design of a popular Chinese chatting software – QQ. I think UX experts can learn from about International digital products business development and culture barrier issues by studying their case. QQ has proven to be the best chatting software among all existing ones(it has the richest user experience and the most users) – it’s business models deserve to be studied by western cultures. Chinese has a unique way of thinking user experience design in terms of life-enhancing patterns – we’ve seen this country is moving from imitation to innovation. For me this process is thrilling – Western investors and entrepreneurs, is it too late to enter China?

- Wei Zhou

I’ve recently seen an article from Tencent QQ official site: http://cdc.tencent.com/?p=2464

Video:

Background: Tecent QQ is the dominating instant messaging software in China. I personally believe it will be the dominating reasons for Facebook and Twitter to fail in China. This software has existed for over 20 years and it’s influence is encompassing. Chinese’ three generations are using it and it togethers with Baidu(A chinese Google), Taobao(a Chinese eBay) and Xiaonei/Kaixin(Chinese facebook) to form Chinese digital UX patterns. Recently Tencent officially announced their new prototype. It’s claim for practicing “natural interface design” reflects some Zen thoughts. It’s fresh and original interface is worth to see.

Development process(translated from their official site):

This prototype is Tencent QQ’s first NUI(Natural User Interface)product. In addition to the basic instant messaging feature, it also includes dynamic profile pictures, dynamic backgrounds, Multi-tab windows, 3D Interaction, Vector Interact and Desktop friends short-cut…

The original interface lights up the users: It triggers a lot more emotions. The interface is life-enhancing. It delivers an imaginary space beyond time and space dimensions. The expressions of interface is bold and colorful…It supports better mouse interaction and touchscreen interaction integration.

There’s two trends involved in the design process: Personified and materialized processes. Keywords are: Life force, time and space. This means the product design concerns day-to-day life stories. The interaction model should have a “breathing” effect.Design changes in different time settings, etc.,

Brain storming process:

Wireframes and prototyping:

Interesting pane emotion selector:

Visual Languages:

Profile Manager:

Friends management:

Dynamic backgrounds:

Pie panel enhances touchscreen interaction:

I will add QQ’s business models tomorrow. They did a great job on integrating online Ads into this product smoothly and seamlessly.

Ehren Metcalfe: RTL level function removal

ehren — Thu, 22 Apr 2010 04:38:10 +0000

Over the past few days I’ve been focusing on getting the call graph portion of my dead code analysis in check. It turns out that function local const (or static) initializations are not accessible during later gcc passes. Luckily, walking the front end tree representation, which is accessible via Treehydra‘s process_cp_pre_genericize, does the trick. This takes care of all remaining false positives of which I am aware.

The downside is that going through all these extra tree codes is sloooow. After a bunch of false starts the damn thing is still running on one of the CDOT‘s development machines (probably an 8+ hour compile).

For a little while though, I’ve been thinking of ways to automatically remove identified dead code without actually patching the source. By applying Taras’ assembler name patch to dehydra I can now identify precisely which code to remove. The question now is how to remove it.

My first thought was a hack using objcopy. I could first output a list of the mangled names of dead functions and then, after running a build with -ffunction-sections, run a script like this:

#!/bin/sh
while read asmname
do
  find objdir -name "*.o" | xargs objcopy --remove-section=".text.$asmname"
done < asmlist.txt

(and then relinking). This works, but only for non-member functions.

The other option was some sort of gcc hack to remove as much code as possible when obcopy can’t do the job. I first tried removing every statement in every basic block of the function (see gsi_remove). This seems to only work with a non-branching cfg however (even when I leave a valid return statement). I then tried cgraph_remove_node with an IPA pass plugin which blows up if a function’s referenced anywhere else.

Today I arrived at a solution that, although requiring a direct patch of GCC, seems to be ideal. Surprisingly, it’s possible to hook in right before assembly generation, and it’s easy too:

diff --git a/gcc/final.c b/gcc/final.c
--- a/gcc/final.c
+++ b/gcc/final.c
@@ -4090,16 +4090,34 @@
 {
   if (symbol_queue)
     {
       free (symbol_queue);
       symbol_queue = NULL;
       symbol_queue_size = 0;
     }
 }
+
+static bool
+is_dead(const char* name) 
+{
+  char asmname[100];
+  FILE* fp = fopen("/home/ehren/asmlist.txt", "r");
+  if (!fp)
+    return false;
+
+  while (fscanf(fp, "%s", asmname) != EOF) {
+    if (strcmp(asmname, name) == 0) {
+      fclose(fp);
+      return true;
+    }
+  }
+  fclose(fp);
+  return false;
+}
 
 /* Turn the RTL into assembly.  */
 static unsigned int
 rest_of_handle_final (void)
 {
   rtx x;
   const char *fnname;
 
@@ -4109,17 +4127,19 @@
   x = DECL_RTL (current_function_decl);
   gcc_assert (MEM_P (x));
   x = XEXP (x, 0);
   gcc_assert (GET_CODE (x) == SYMBOL_REF);
   fnname = XSTR (x, 0);
 
   assemble_start_function (current_function_decl, fnname);
   final_start_function (get_insns (), asm_out_file, optimize);
-  final (get_insns (), asm_out_file, optimize);
+  if (!is_dead(fnname)) {
+    final (get_insns (), asm_out_file, optimize);
+  }
   final_end_function ();
 
 #ifdef TARGET_UNWIND_INFO
   /* ??? The IA-64 ".handlerdata" directive must be issued before
      the ".endp" directive that closes the procedure descriptor.  */
   output_function_exception_table (fnname);
 #endif

With this, functions are removed completely (except from the symbol table) and the bodies of virtuals are replaced with a couple words worth of NOPs. Yes, opening up the file with a hardcoded path for every function is ugly but later on I could always read it into a global somewhere else (and do a binary search).

The only downside here is I won’t get any link time errors if a few false positives slip through, as opposed to with objcopy. In my experiments, calling a function that doesn’t exist results in an immediate segmentation fault (makes sense), but storing the return of a NOP-body virtual just leaves you with an uninitialized value.

Hopefully, I’ll soon have some good results on the analysis front to actually test this on Mozilla.

Ehren Metcalfe: Dead code progress

ehren — Thu, 08 Apr 2010 02:04:15 +0000

So far things are on track with my attempts to developed an unused function finding tool. Now that the function pointer/jump table problem has been solved other more subtle issues have come to light.

The first was a problem with callgraph‘s handling of inheritance chains. As I mentioned previously, it was necessary to add each method to the node table (see schema reference) both when the method’s body is processed (as is already the case) but also when the method’s type is processed. At some point I should really develop some tests here but this affects the recognition of pure virtual functions in a number of complicated cases.

However, I also ran into another issue where certain methods were not finding themselves into the inheritance chains in which they belong. This seems to be only when a virtual function overrides a base class function that has not been defined in the ‘next up’ base class (A defines virtual foo, B derives from A, C derives from B and redefines virtual foo). This could be a Treehydra issue or a maybe a problem with the GCC binfo data structure (or maybe I’m just misunderstanding things).

Either way, my solution has been to process all base classes and subclasses of a method both when the type is processed and also when the method body is processed. This appears to be a working solution (although it certainly does not improve callgraph compilation times).

Once this was handled I started to get some pretty good results but I noticed scriptable methods were getting into the mix. After a few hours of fruitless hacking it turned out I just forgot to properly define NS_SCRIPTABLE (since I’m not running a –with-static-checking build). After rebuilding again, I believe I finally attained a 0% false positive rate.

This time I hit another problem though. A bunch of genuinely dead methods turned up by my most recent (defective) analysis were not showing up. In fact, very few methods were showing up at all. Investigating, it turns out I’ve been quite overzealous in marking a method as scriptable. My previous technique was to check if __attribute__((user("NS_script")) was present in the declaration attributes of a function and also to check if it is present in the type attributes of the class and any base class. This excludes a bunch of juicy dead stuff like nsCharsetMenu::SetCharsetCheckmark (gimple isn count 75 ftw) which is a member of a non-scriptable class that derives from two scriptable interfaces (which do not declare SetCharsetCheckmark).

Naturally, the solution when marking methods scriptable because of their base classes is only to mark the method scriptable when the base class declares the method and is scriptable. Come to think of it, I probably don’t even need to do this because of the way I group together base and derived methods.

Anyway, my current status is waiting for a build with these changes to finish. We will see if there are more issues.

Ehren Metcalfe: Function declaration escape analysis v2

ehren — Tue, 06 Apr 2010 07:46:45 +0000

I don’t want to get too excited until I’ve run this through 4000000 loc but I believe I’ve solved the problem of being unable to process global initializations of const/static global variables. Earlier, I posted a message to the GCC mailing list describing my troubles with varpool. I did receive a helpful response in that there is nothing inherent about const/static declarations that would prevent one from getting at the lhs of their initialization.

Today I experimented with walking as many trees in as many places as I could find without much luck. I then tried compiling this sample code with -Wunused:

int foo() {
  return 0;
}

typedef struct {
  int (*p) ();
} Table;

static Table t[] = {
  { foo }
};

As expected, GCC warns about the unused static variable.

Taking a look at toplevel.c It didn’t take too long to find a solution (and this works for const, static, and const static):

Index: gcc/toplev.c
===================================================================
--- gcc/toplev.c  (revision 157978)
+++ gcc/toplev.c  (working copy)
@@ -844,12 +844,26 @@
   return output_something;
 }

+static tree 
+find_funcs_callback(tree *tp, int *walk_subtrees, void *data)
+{
+  tree t = *tp;
+
+  if (TREE_CODE(t) == FUNCTION_DECL)
+    fprintf(stderr, "address held: %s\n", IDENTIFIER_POINTER(DECL_NAME(t)));
+
+  return NULL_TREE;
+}
+
 /* A subroutine of check_global_declarations.  Issue appropriate warnings
    for the global declaration DECL.  */

 void
 check_global_declaration_1 (tree decl)
 {
+  if (DECL_INITIAL(decl))
+    walk_tree(&DECL_INITIAL(decl), find_funcs_callback, NULL, NULL);
+
   /* Warn about any function declared static but not defined.  We don't
      warn about variables, because many programs have static variables
      that exist only to get some text into the object file.  */

I’ve got to fix up the output to match callgraph‘s serialization but this could be it.

Ehren Metcalfe: Problems with const static initializations

ehren — Mon, 05 Apr 2010 05:02:44 +0000

Unfortunately I spoke too soon about developing an airtight dead code finder. The technique of processing file scope variables I mentioned in my previous post has a serious drawback: it doesn’t work for const static data. This is a show stopper when it comes to peeking into most jump tables.

I’ve been able to print type information for all globals using the dehydra hooks placed into c-common.c however it seems like const initializations are not even handled at this level. I have my suspicions that there’s no way to recover the FUNCTION_DECL node in this case, likely because gcc has no use for the info at this level.

Although I may be able to make do by simply manually filtering as many callback functions as I can this approach is not quite ideal. I’ll have to think more about this but I’m now thinking that the lto streamer might be of use. There’s also the chance that there’s another way of using the cgraph to get at this data.

The other possibility is ditching gcc entirely and using elsa to dump the data. I’ll report back when I know more.

Ehren Metcalfe: Function declaration escape analysis

ehren — Sun, 04 Apr 2010 15:13:31 +0000

It’s been quite a while since I’ve blogged. Frankly I’ve got behind with my work. However, I believe I have hit a huge breakthrough finding dead code. I don’t want to get too ahead of myself but if things work as I think, I can now identify every unused function/member function in mozilla-central with a near 0 false positive rate.

I’ve mentioned many times that assignments to function pointers are a huge pain when it comes to recognizing call graph edges. I’ve been able to handle function local address taking for some time now but the problem of functions referenced in global variables (usually jump tables) has proved elusive. In fact, it’s currently not possibly to process global variables at all with Treehydra. This leads to thousands of false positives in the analysis and a bunch of special case handling.

It suddenly dawned on me that GCC might have already done the work for me. ipa-type-escape.c, which “determines which types in the program contain only instances that are completely encapsulated by the compilation unit” seems to fit the bill, but I ended up with less than stellar results trying to print out any escaping function declarations. In fact, I don’t think it really is useful for my purposes.

However, the technique of processing global variables using the varpool is exactly what I needed. In fact, I can very easily write a GCC plugin to print off all the globally escaping declarations in a compilation unit. Unfortunately, getting a plugin to build that uses more than the standard set of routines is a bit of a challenge (more stuff needs to be linked in) so I just hacked it into dehydra_plugin.c. It works though!

Here’s the code:

static tree find_funcs_callback(tree *tp, int *walk_subtrees, void *data) {
  tree t = *tp;
  
  if (TREE_CODE(t) == FUNCTION_DECL) {
    // dump function (I use dehydra specific code)
  }
  
  return NULL_TREE;
}
 
static void find_funcs(tree decl) {
  walk_tree(&decl, find_funcs_callback, NULL, NULL);
}

// This needs to go in the execute function of an IPA pass.
// I just stuck it into dehydra's gcc_plugin_post_parse
struct varpool_node *vnode;
FOR_EACH_STATIC_VARIABLE(vnode)
  find_funcs(DECL_INITIAL(vnode->decl));

Now all I have to do is mark every function printed by this routine as escaping. I’ve been able to match callgraph‘s serialization almost completely so this will be a breeze.

I’ve also found that the current way callgraph treats inheritance chains (using a table of ‘implementor’ – ‘interface’ pairs) is not particularly useful for finding dead code. In fact, a whole bunch of functions in the implementors table are being left out of the node table. I’ve been able to rectify this by treating method overriding just like any call edge. In particular, I have the base class ‘call’ the derived class which will fit right into my existing algorithm (becuase of dynamic dispatch, once the base method is called all bets are off on whether or not some derived method is called). In order to get any results previously, I’ve just been identifying base method-derived method pairs by textually matching the prototypes. Looking at my current results, I’ve found a disproportionate number of static methods which suggests that this technique is too conservative. Here’s the old script btw. With these callgraph chages the next one will be much simpler (with no method name parsing!)

I’ve had some success already with dead code in content and particularly in layout, even with this rudimentary script. I also certainly have more to file. With this new approach, though, I think I’ll be able able to find and file all of it by release 1.0.

Adrian Kalla: Browser ballot fail: asks to set IE as the default browser

Thu, 11 Mar 2010 19:50:28 +0000

Wasn't the whole ballot thing about preserving the users choice? Then wtf is this:

Procedure to reproduce:

choose to install your prefered browser, but not IE (actually, my prefered browser, SeaMonkey, is not in the list, even when it is the 6th most popular desktop browser in Europe... That's a big fail too.)
close the ballot screen by clicking on "Choose later (Später auswählen)", because you couldn't find a "Close" button
install the downloaded browser and set it as default
restart your system
see the ballot screen asking you to set IE as the default browser

Is it just me, or does this look like a violation of what Microsoft has signed in Brussels?

Wei Zhou: It’s really not all about money

wei zhou — Fri, 05 Mar 2010 20:41:55 +0000

When I studied Graphic Design in Yale University, my professor told me a universal truth: “When you choose a career path the primary thing is figure out if you would enjoy the details.” I realized at a young age that I don’t enjoy choosing typefaces among a thousand of options, so I quit graphic design. Among these years, I’ve watched so many types of jobs: I would never be an investment banker because I don’t enjoy correction typos or copying pasting numbers in the pitch book. I would never be an programmer because debugging kills my skin cell. And I would never be a teacher because I don’t enjoy talking to dumb kids. Now I work as a senior consultant in user experience industry, I realize sometimes don’t like using visios to create wireframes or photoshop creating visual design comps. This baffles me for a while: how could I ever fulfill and satisfy myself? I think this article(by josh Kaufman) answers this question well: you need to know yourself well enough.

Here’s a deceptively simple question: why do people work? On the face of it, the answer seems relatively straightforward:

The 3 Core Levels of Material Need

Level 1: Resources
Working for immediate needs like food & shelter; living paycheck to paycheck.

Level 2: Security
Working to ensure safety; saving and investing for future needs.

Level 3: Freedom
Working to ensure self-sufficiency and independent choice of action.

These three levels of work are similar to the first few levels of Maslow’s Hierarchy of Needs or ERG Theory: work is a way we can meet our basic existential needs effectively and reliably.

That’s a perfectly reasonable explanation, but here’s where things get interesting: what happens when people have enough resources to do whatever they want? What does “Level 4” look like?

Level 4: Primary Motivation

Consider individuals like Warren Buffett, Steve Jobs, Dick Cheney, and Angeline Jolie. Each of these individuals has enough money to ensure that they never need to work again – they could quit tomorrow and live off of their savings in perpetuity. For some reason, however, they don’t – they keep working. Why?

After considering this question, I think that people who have reached the “Freedom” stage of work make a choice (either explicitly or implicitly) about what they’re ultimately working for. The choice ultimately revolves around what that person values most: power, status, pleasure, creation, or quality.

#1: The Autocrat

The Autocrat’s primary motivation is power and control. Common behaviors include continually seeking influence or control over the lives and actions of other people. Examples: businesspeople turned politicians like Henry Paulson (US Secretary of the Treasury), Dick Cheney (US Vice-President), and Michael Bloomburg (mayor of New York City).

#2: The Narcissist

The Narcissist’s primary motivation is attention, status, and fame. Common behaviors include continually seeking the attention and esteem of other people, and acting in ways that will ensure they receive more and more attention. Examples: actors / celebrities like Lindsay Lohann, Brittany Spears, and Madonna.

#3: The Hedonist

The Hedonist’s primary motivation is pleasure and enjoyment of material goods. Common behaviors include the continual acquisition of luxurious homes, fine food, and exotic travel. Examples: Larry Elison (CEO of Oracle), Mohammed bin Rashid Al Maktoum (Sheikh of Dubai), and Paul Allen (co-founder of Microsoft).

#4: The Architect

The Architect’s primary motivation is creating something new or reshaping the world. Common behaviors include the establishment of a vision of what the world “should” look like, then continually pursuing projects that they believe will bring the world closer to that ideal. Examples: Steve Jobs (CEO of Apple), Richard Dawkins (biologist and lecturer), Muhammad Yunus (father of micro-lending), and politicians like Ron Paul, Denis Kucinich, and Al Gore.

#5: The Craftsman

The Craftsman’s primary motivation is quality and enjoyment of the work. Common behaviors include the continual exercise and improvement of a set of specific skills or abilities and use of those skills as a means of self-expression. Examples: Warren Buffett (investor and CEO of Berkshire Hathaway), J.K. Rowling (author), and Stephen Spielberg (filmmaker).

Why is Primary Motivation Important?

Here’s my first hypothesis: once you identify your primary motivation, you’ll find it much easier to achieve your goals. These primary motivations appear to be relatively universal, and are based on very deep-seated psychological needs. Tapping into these sources of motivation directly allows people to accomplish their actual objectives more quickly, whatever they might be. Said another way, it’s easier to get what you really want if you identify what you really want.

My second hypothesis is that not all of these primary motivations lead to a lasting sense of personal satisfaction and fulfillment. If you’re an Autocrat, there will always be people you do not control. If you’re a Narcissist, there will always be people who look down on or ignore you. If you’re a Hedonist, the hedonic treadmill ensures that every pleasure eventually fades. If you’re an Architect, the world seems to have a tendency to stubbornly refuse to conform to your ideals.

When I look at the universe of “successful” people in the world, it appears that the Craftsman has the best shot at lasting personal satisfaction and fulfillment. You ultimately can’t control the world or other people, but you can control your dedication to perfecting your craft and expressing yourself through your work.

If we have a choice in determining our primary motivation, it seems that the Craftsman’s ethos has the most to offer: it may eventually lead to power, status, pleasure, and world-changing achievement, but it frees us from the perception that our self-worth depends on any of these things. That’s a remarkable combination.

Thoughts? Leave them in the comments.

Ehren Metcalfe: Dead code update (and problems finding uninitialized class members)

ehren — Thu, 25 Feb 2010 14:16:10 +0000

Well, I’ve fallen way behind with this blog again. Unfortunately, what I’ve done so far hasn’t worked out exactly as expected either. Anyway, here’s an update.

Finding Dead Code
I’ve refined the script I posted previously to take into account the fact that indirect calls to virtual functions register in g++ as calls to the base method (among a few other things). It can be viewed here. Running this new analysis, I’ve learned that finding dead methods is even more difficult than finding dead functions. Why? A tonne of stuff is exported as part of the Mozilla public api. A function or even an entire class may seem dead but it’s likely used via javascript/xpcom inside the mozilla tree (or maybe in an extension).

As far as I know, anything that derives from a class defined in an idl file probably can’t be marked dead and I suspect detecting this case will be most difficult. One thing I could take into account, however, are methods marked as NS_SCRIPTABLE ie __attribute__((user("NS_script"))). It would be easy to add this info to the node table in callgraph. Also, in regard to plain functions, I think it would be prudent to register function local address taking (of functions).

On the bright side I think I’ve found a handful of unused functions (view sample output of the script showing these here). I may be able to gleam more info once I’m able to actually query my paths table though. Unfortunately, the latest incarnation of the script is only about 85% finished:

  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND                                                                                         
28977 ehren     20   0 17804  12m 2132 R 100.1  0.4   2331:07 python

That’s CPU time!

Uninitialized class members
I’ve also put a bit of work into a more immediate analysis. Bug 525063 proposes an error for any class with uninitialized data members. It seemed like an interesting project perhaps as an introduction to ESP analysis (especially since the only state transitions are assignments and passing by reference). In fact, dmandelin’s already done work on an analysis for uninitialized variables in general which I originally attempted to adapt. This was not the easiest task however, although I have just recently learned why I was not successful (I think it relates to a malfunctioning of create_decl_set which I have yet to diagnose).

Giving up on ESP for the moment, I tried my hand doing things the simple way. That is, if there’s any code at all in the constructor that initializes a variable, then I consider that variable initialized.

To accomplish this, I first wrote a rather ugly and unreadable version of the script. I then polished it up a bit. My days of using JS arrays for maps and sets is hopefully over and, in fact, I think I’d be able to take another run at an ESP analysis now. Unfortunately though, running my simple script has uncovered more fundamental problems.

The bug comments mention classes with an overridden operator new (containing a memset(0) to initialize the data members) as one special case but this is nowhere near the largest problem. Consider this mdc page on xpcom:

You can provide an initialization function for your class. This will be called immediately after your class is allocated and the constructor is called. The init function takes 0 arguments, returns an nsresult, and must be public. You can call it anything you like, just reference it from NS_GENERIC_FACTORY_CONSTRUCTOR_INIT (discussed below).

Now we have the situation of variable initialization split across multiple functions. In fact, it’s even more complicated! Here’s an example:

mCSSAware (part of nsHTMLEditor) is one ‘uninitialized’ member turned up by the script. Rather than being directly initialized in Init() (or in the constructor), the initialization takes place in UpdateForFlags which is called from Init() here. Luckily in this case the initializations are all within the same translation unit although I suspect this is not always the case.

So, what would be the solution? If it’s worth doing, some kind of interprocedural analysis will have to be performed. I was thinking of collecting all the ‘uninitialized’ fields during compilation of both the constructor and any other functions identified as an inititializer. Initializers must include any member function called by an initializer (note that pass by reference is just simple initialization). If the set of uninitialized fields in a particular constructor intersected with the sets of fields from the other initializers is non-empty, you’ve found a genuine uninitialized field.

I was thinking that if every initialization takes place in the same translation unit it might be possible to do this within the current static-checking framework ie by compiling only once. I’d basically just have to identify the set of data members not initialized for every member function while building a mini call graph to eventually determine which of those member functions is really an initializer. It would then be a simple matter to take the intersection of the relevant sets of uninitialized fields.

However, I suspect there’s probably more than a few cases where member function definitions are spread across translation units (Actually that might be a neat dehydra analysis if this behaviour’s unwanted). To deal with this case I’d have to store the sets of ‘uninitialized’ data members until the entire build is complete while also determining the set of initializing functions. I’d then have to determine which data members are really initialized during a post-compilation analysis.

It might also be possible to produce the errors while the build process is still under way if I was able to query an sqlite database from within a treehydra script. I’m under the impression that the only way to use sqlite from js is by using xpcshell though so I don’t know if this suggestion would work. You’d still have to run a callgraph build prior to compilation anyway which takes quite some time.

There’s also the issue of the accuracy of any analysis when the call graph will likely have to be pretty dumb ie unfeasible code in a particular function that contains a call will end up registering as an edge. I suppose it would also be necessary to relate a functions parameter’s (and any global data) to whether or not a particular call within a function is feasible or not (and so on). The ESP paper does discuss a framework for interprocedural analysis but that’s way out of my scope. It would probably still be a worthwhile analysis if this kind of stuff is not taken into account, however it kind of defeats the purpose of performing an ESP analysis to find which members are uninitialized.

Anyway, I’ll report back (hopefully without such a long delay) when I’ve determined the next course of action.