Blog posts tagged: javascript

Most web developers have heard of, and used Firebug, but perhaps don't know its full power. Firebug is a debugger, editor, and monitor for websites, CSS, HTML, DOM, JavaScript, and HTTP. It was created by one of the original Firefox creators Joe Hewitt.

Below I will list 12 of the most important things I feel web developers should know about Firebug.

1. You can instantly find any part of the page's HTML with Firebug

Have you ever used a background color property in HTML simply to see how big the element is? If so then you are wasting time.

After Firebug is installed simply right click on any place of any web page and select Inspect Element. This will instantly bring up the HTML inspector along with the styling information on the right hand side.

Once Firebug is open you can also click on the top left corner within Firebug, where the arrow is, and then use your mouse to hover over any part of the HTML page. Hovering over any HTML element will automatically highlight it for you in the actual HTML rendering.

2. You can modify HTML and CSS with Firebug

This includes editing HTML directly, adding attributes, removing elements, adding CSS styles, and more. When you change HTML the change will take place immediately on the rendered page.

For bigger changes, you can even modify the entire HTML source at once instead of one element at a time.

3. You can discover what properties a DOM element has and work with XML

OK this one is actually two different items, but I messed up and put three twice :). Both features in #3 are independent though.

After inspecting an HTML element you can click on the right tab called DOM and see a list of every property available to you in JavaScript to iterate over the DOM. You can also go to the JavaScript editor and use the auto complete by typing in any JavaScript code and pressing Tab to iterate over the DOM elements.

To work with XML, simply open up an XML file and right click on any element. Select inspect element. Right clicking on the element in Firebug will then allow you to copy out the XPath location of the selected element.

Of course this feature is also useful for HTML pages.

4.You can use Firebug to execute arbitrary JavaScript code

Want to execute new code within the context of the current page without reloading the current page?

With Firebug open, simply click on the Console tab.
You will see at the bottom of this window a prompt with 3 arrows: >>> These arrows allow you to type any arbitrary JavaScript code and execute it immediately. There is a small red button on the bottom right which allows you to execute a multiline JavaScript code.

The JavaScript code even supports auto complete with all of the DOM elements that you are inspecting. Press Tab to iterate through (or Shift Tab) to go backwards.

5.Firebug remembers your state across reloads.

You can reload your page at any time and Firebug will automatically go back to the same part of the page it was at on the previous reload.

6.You can use Firebug to try things out easily.

You can use the JavaScript Console to execute code instantly and you have access to special variables like: $1 the last element you inspected $2 the 2nd last element you inspected

7. You can use Firebug to visualize how a page is changing state

Firebug will highlight any change in yellow as the change is happening. This is useful to visualize how the DOM changes after the page is loaded.

8. Profile your JavaScript code

With Firebug profiling you can start the profiler, and then do any operation including a page reload, and then stop the profiler.

On the Console tab simply click on the profile button, and then do whatever you want to measure, and when you are done hit the same button again.

This will create an absolutely awesome list of functions, the amount of calls to each function, The percent of time spent in that function, and the min, max, and average time spent in each function.

9. Profiling the rest of your web app

For a breakdown of the entire page load time, you can click on the top level Net tab in Firebug. It will show you a graphical display of how long each HTTP request took and the size of each response.

You can even expand each of these requests and see the request HTTP headers, the response HTTP headers, the actual response, and caching information. Looking at the response headers would be useful for example to see if compression was used to send your resource as the content encoding.

You can filter this list on the toolbar just under the Net tab and select to only view HTML, CSS, JS, or other types of files. You can for example filter on images and see just how much data is sent for images.

Even AJAX calls made after your page loads will automatically fill into this Net tab.

10. Logging one or more JavaScript functions

Every programmer knows that profiling is important, but just as important is logging so you can discover the sequence of calls in your program.

You can right click on any function name in the function definition in the script viewer and select to log the function. You can do this for several different functions, but the only time I can get the menu item to show up is when I right click the actual function name when the debugger is paused.

The console tab will then be filled with a message every time the log is called, and you can even see which parameter was passed in for each call. Once you have function logging turned on you can press F8 to run and watch the log tab fill in as you interact with the page.

11. You can debug in Firebug

In the script tab simply click on the left of the line number you'd like to break on debugging and then reload your page.

• Press F10 to go to the next line.
• Press F8 to continue execution
• Press F11 to step into a function.
• Press Shift+F11 to step out of a function.

Other useful things you can do when debugging:

• Use the watch window to see any variable's value while you are paused.
• Hover over any variable while the debugger is paused and see its value (as shown in the image above).
• When your debugger is paused, you can see the call stack. The call stack is shown in the toolbar at the top of Firebug, you can click on any item in the list to go to that source code for that function.

12. You can set conditional breakpoints in Firebug

Breaking every time a line is executed is usually best, but sometimes you know there is a bug only when a certain value occurs. You can then use conditional breakpoints to filter out when to actually break.

The following are some of the possibilities you can use with Firebug debugging:

• Break when a DOM element's attribute change
• Break when a DOM element gets a child added or removed
• Break when a DOM element is removed
• Break when a certain condition is met, to do this simply right click on any breakpoint to see the conditional window.
• Break on errors, when an error happens it will show up on your console and you can then set a breakpoint next to it for the next time the error occurs.

Other Browsers?

Google Chrome offers a Firebug like tool which is included by default. You can right click on any element and select Inspect Element like in Firebug. Firebug also makes a lite version for Chrome which is not as good as the one for Firefox.

IE offers a tool called The IE Developers Toolbar.

Although both the built-in Chrome tool and IE Developer Toolbar are great tools, and can even do debugging, they are no match for Firebug+Firefox. Of course if you have a problem that only occurs in IE or Chrome you need to debug in IE or Chrome respectively.

If you haven't heard of Khan Academy yet, you need to start reading more news. I first heard of Khan Academy when they were announced as a winner of Google's Project 10^100 and have been telling people and tweeting about them ever since. I didn't start looking into how their development process works until last night though.

Khan Academy is a non profit company started by Salman Khan with the mission of educating the world. Sal himself has created over 2,000 videos on a range of topics from history to mathematics and everything in between. The videos are nothing short of amazing and are broken down into 10 minute chunks which was originally because of the youtube limit imposed on Sal.

Shantanu is the President and COO of the Khan Academy and also has a strong mathematical background like Sal.

Khan Academy has a reputation/energy and badge system in place which makes the site just as addictive as StackOverflow. The badge system is especially cool, offering real time badge awards, something not easily done with a NoSQL implementation and a huge dataset behind the scenes.

Khan Academy is hosted on Google code and uses subversion (SVN) Kiln Hg (They upgraded from SVN) for source control. There are currently 11 committers to the project, the current most active by far (with over a half dozen commits even on a Saturday afternoon) is someone named Ben Kamens (@kamens).

Ben is a previous employee of Joel Spolsky's company Fog Creek Software, and has a great blog with some interesting insight on how Khan Academy works. He accomplished a lot within just a few months of working at Khan Academy. He also develops a couple of cool iPhone apps one called RulerPhone and the other Precorder.

Khan Academy runs on Google App Engine (GAE) which means they must either use Java or Python 2.5 (Python 2.5 in sandboxed mode also minus the ability to run C extension modules). Khan Academy uses Python 2.5 along with GAE's default webapp module. Since webapp does not include a template engine, they use the Django 0.96 template engine which the GAE runtime includes by default. As with all GAE applications, the main sitemap is configured via setting URL pattern matching with a YAML configuration file. GAE has a great GAE getting started guide if you are interested. I was.

GAE works off of a datastore which is automatically replicated and scaled and is based on BigTable and hence Google Filesystem (GFS). GAE does not allow for you to host a relational database. Instead of using SQL to tie into the datastore and having write access to your filesystem, you need to use the Google Query Language (GQL). GQL looks exactly like SQL but you can't do joins and you can't select partial entities from your queries. You must either select just the keys or the entire entity.

GAE applications such as Khan make use of caching so that the datastore does not need to be contacted on each page load. This caching is typically handled with the memcache service included in GAE API. Typically each model that you have would save to the memcache when you write the model to the datastore, and it would try to retrieve the object from the memcache before getting it from the datastore.

Khan Academy does expose an HTTP JSON API but only for getting a list of playlists and videos per playlist.
It would be great to see additional APIs for read only access to the energy and badge system.

The backup system used by Khan Academy takes around 3 days to complete and is run on an Amazon EC2 instance.
I think this could be improved by doing incremental/differential processes, and using deduplication.

Khan Academy tries to fix all bugs before adding new features, which is a great mantra to have. Other than GAE they use a few very cool Javascript libraries under the hood:

• jQuery (who doesn't use jQuery?)
• ASCIIMathML to formulate math equations, this works by automatically converting any math equation within back tick characters.
• ASCIIsvg Graphing is accomplished using an iframe which contains generated SVG code (hurray for IE9 finally getting native SVG support)
• JavaScript InfoVis: Provides tools for creating Interactive Data Visualizations for the Web. Used for the old knowledge map.
• YUICompressor to compress the Javascript, but better ratios could be accomplished using the Google Closure compiler.
• Google Maps API v3 is used for the exercise dashboard using a custom map type and some other customizations on the controls and zoom. Another cool aspect is that you are actually zooming around images from the Hubble telescope.
• Google Analytics is a tracking tool for stats on your visitors
• Highcharts JS: Interactive JavaScript charts. They use this for user profile charts.
• Raphaël—JavaScript Library: Used for the scratchpad when doing exercises, and for exercise drawings. Raphaël is a Javascript library for creating SVG graphics, every graphic object is a DOM object which can be manipulated
• MathJax: Math visualization library for inputs of MathML and LaTeX

HTML5 is used by Khan Academy proved by their HTML doctype declaration; however, in the exercise modules some simple changes could improve the user interface and be compatible across all browsers and platforms. By simply making input boxes like so: <input type="number"> this would mean that all popular mobile phones would display a numeric keypad by default right away. All browsers default to type="text" if the type specified is unknown by old browsers that don't understand HTML5.

Sal himself started the code but I would imagine most of his time is spent creating the actual content videos, handling press, and doing thousands of other things today. Dean Brettle and Omar Rizwan are also notable developers (sorry if I missed others). Dean amongst other things handles release management, and created the scratch pad used in exercises. Omar has contributed at least 16 exercise modules. Jason Rosoff (Jason's blog, @jasonrr) is also extremely involved in the project and is known as the lead designer also doing some coding. Marcia Lee (@marcia_lee) is a recent hire and makes frequent commits.

If you are interested in helping with the Khan Academy project you can get started by:

• Reading the Khan developer's guide
• Taking a look at the open issues or the full issue list
• Checkout the project: http://khanacademy.googlecode.com/svn/trunk https://khanacademy.kilnhg.com/Repo/Website/Group/stable
• Create a new module from the list of modules pending development
• Start working on exercise modules and bug fixes!