CSC 510 : Final Screencast

Note: Please make sure you watch in HD 1080P to see the text clearly. If this doesnt work on this site, watch on youtube with 1080P HD quality

References

  1. Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007
  2. Junghoon Oh, Seungbong Lee, Sangjin Lee, Advanced evidence collection and analysis of web browser activity, Digital Investigation, Volume 8, Supplement, August 2011, Pages S62-S70, ISSN 1742-2876, http://dx.doi.org/10.1016/j.diin.2011.05.008.
  3. Olga Baysal, Ian Davis, and Michael W. Godfrey. 2011. A tale of two browsers. In Proceedings of the 8th Working Conference on Mining Software Repositories (MSR ’11). ACM, New York, NY, USA, 238-241. DOI=10.1145/1985441.1985481 http://doi.acm.org/10.1145/1985441.1985481
  4. Firefox and Firebug: A Developer’s Swiss Army Knife, http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3801831/Firefox-and-Firebug-A-Developers-Swiss-Army-Knife.htm

CSC 510 : Final Podcast

Show Notes
In this podcast we discuss the script and console panels of our three tools – Chrome Developer tools, Firebug, F12 developer tools.

The first section of our podcast focuses on the console and how it has made working with javascript a much more pleasant experience. We briefly discuss

  • using the console to log events
  • javascript execution on console
  • usability and layout of these panels
  • working with javascript errors

The next section focuses on the scripting panel and how to use it debug javascript errors. We show how these tools are moving towards acting as a runtime IDE for javascript. Here we look at

  • debugging a javascript error
  • sub-panels- watch, stack, breakpoints
  • layout and usabillity
  • how they went above and beyond

One Cool thing

We think the fact that these tools are coming coles to being IDEs is AWESOME

References

  • Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007
  • S. Artzi, J. Dolby, S. Jensen, A. Møller, and F. Tip, “A Framework for Automated Testing of JavaScript Web Applications,” in Intl. Conference on Software Engineering (ICSE). ACM, 2011, pp. 571-580.
  • Derrell Lipman. 2012. LIBERATED: a fully in-browser client and server web application debug and test environment. In Proceedings of the 3rd USENIX conference on Web Application Development (WebApps’12). USENIX Association, Berkeley, CA, USA, 8-8
  • Brad Myers, Scott E. Hudson, and Randy Pausch. 2000. Past, present, and future of user interface software tools. ACM Trans. Comput.-Hum. Interact. 7, 1 (March 2000), 3-28. DOI=10.1145/344949.344959 http://doi.acm.org/10.1145/344949.344959

—
Raghav Tripathi & Roopak Venkatakrishnan

CSC510 : Final Blogpost

The front end of web development has always been seen as somewhat of a pain for developers. The reason for this, stems from the fact that there are many different non standard factors they have to account for along with the lack of tools provided to them for this purpose. Each of the major web browsers in the market today namely Google Chrome, Mozilla Firefox and Microsoft Internet Explorer[1] vary slightly in their implementation.

To help make web development easier some tools were introduced into the market. Some of them are Firebug for Firefox (v1.12.4)[2], Chrome developer tools (v30) and F12 developer tools for Internet Explorer (IE9). Each of the tools works with a different browser and has been implemented in a different way. We hope to study these tools and understand where these tools excel, and what they lack.

One has to understand that usability of these tools is very important. The easier it is to access the various features provided by these tools , the more of them that will be used. We will be looking into how the usability of the tools are important.

These tools have several areas they focus on and we hope to analyze each of these areas. This blog post focuses on the HTML, CSS and DOM panels. These are the basic components which define a web page and all of the tools have some features to assist in each of these areas. Some other things we will be looking at later include Script, Console, Network and other things which are tool specific.

Usability

As mentioned in the introduction, the usability of a web development tool is essential[3]. In addition to the features it provides the ease of use of a tool determines how easy is it for the developer to fix the issue using the tool. For this blogpost, we analyzed and evaluated the usability of only the HTML, DOM and CSS panels. We plan to do the same for other panels in the podcast and screencast submissions. Firebug is an add on which needs to be explicitly added to Mozilla Firefox. Whereas Chrome developer tools and F12 developer tools both are inbuilt features in the Google Chrome and Microsoft Internet Explorer browsers respectively. Hence, their updates are handled more seamlessly. It took us a while to determine the correct Firebug version for the Firefox browser on which we started to gather results for this blog. This is slightly user unfriendly and it would be better if Firebug displays the download link to the Firebug which is compatible with the browser version from which it is being downloaded.

Firebug Download page

Firebug has a particularly good feature of allowing the user to display only the panels of interest to the developer. So, for example if the developer is debugging a CSS related issue such as misalignment of text or image on a web page then the developer can hide all the other panels other than the CSS panel. We found that this seemingly simple feature which is not available in Chrome Developer tools and F12 developer tools can help the user have more focus on the task at hand by not showing other panels which are irrelevant to current issue.

Firebug Showing only relevant panels

The Chrome developer tools use a search icon () at the bottom of the panel to indicate the “Inspect” functionality. This is a little unintuitive as the regular mouse pointer icon () as used in Firebug and F12 developer tools are more indicative of that feature. So, it took us a while to find how to inspect an element in Chrome developer tools. Both Chrome developer tools and F12 developer tools also don’t allow the developer to collapse and hide the right window in the HTML panel. Firebug has this option which again gives the developer the option to reduce clutter and give a much more cleaner user interface to focus on during the task.

The F12 developer tools user interface is clunky because of the Windows style menus displayed in addition to the panels. We feel that the menu options don’t provide any added functionality to F12 developer tools but only result in UI bloat.

UI Bloat on F12 Dev Tools

Menu UI Bloat on F12 Dev Tools

However, a particularly useful feature we noticed in F12 developer tools was the presence of compatibility views for Internet Explorer versions ranging from 7 to 10. This enables the web developer to look at the web page in context of different Internet Explorer browser versions without the possible need to have multiple versions installed on the host. This is a must have with Internet Explorer to help maintain backward compatibility of web sites because of significant change in the way it interprets web standards like HTML, CSS etc from major version 7 to 10.

F12 Developer tools has a link which quickly allows for the page to be validated for HTML, CSS, Javascript errors. This is handy and would be a good addition to Firebug and Chrome Developer Tools. It would be interesting if this checking could be done offline.

HTML

The main HTML panel is quite similar in all tools and renders the web page in a tree like structure consisting of tags which can be expanded as required by the developer.

All of the tools we are studying, Firebug, Chrome developer tools and F12 developer tools allows the user to inspect various elements on a page. When hovering over a tag in the HTML panel the tools highlights the corresponding part of the page and vice versa. This is pretty helpful as it helps the user quickly determine where the tag is on the page, how big it is, its margins etc.

Hover functionality for inspecting elements

Hover functionality for inspecting elements

Firebug   also draws out the path to each node on top of the HTML panel. It puts down the path starting with the node itself on the right and working its way to the html tag on the left. We felt that this may be misleading considering the fact that a web page starts with a html tag and works its way to each node.

F12 developer tools[4] renders the word “Text” before putting down any plain text within a tag. This is definitely very confusing and none of the other tools exhibit this behavior. We are unable to determine why this is done in the first place and cannot find a place where this might be of any use. It should be noted that this behavior is not uniform and F12 does not put down the word “Node” or something similar before any other node.

Text pre-pended to node

Text pre-pended to node

One of the features that we found really useful in Chrome Developer tools was its ability to help debug web pages on a mobile device. It requires the developer to connect the system to a device running Chrome and the tool on the desktop would offer the same functionality as it offered for debugging the web page in a desktop environment.

Both Chrome and Firebug offer tools to help with the debugging of actions caused by change in the DOM of the page due to javascript etc[5] . This can be seen in the DOM breakpoints subpanel. It is particularly useful because of the way web pages of today are being designed. We will look into this in more detail when we analyze the javascript and scripting console.

The HTML panel in Chrome Dev tools also allow the user to force a particular element into the hover state, or active or visited. We didn’t seem to find an equivalent capability in the other tools. We thought this could be a useful feature but also that it could be extended to force an element into more than the simple states offered here.

One flaw which we saw while using F12 developer tools on IE, was that the layout sub-panel which shows the box model for each node has no scroll-bar. It makes it very hard for the user to make changes using the panel without resizing F12.

Layout flaw in F12

Layout flaw in F12

The HTML panels on all the tools are somewhat similar, and there are no striking features that sets any of them apart, however each of the tools have small nits which the providers of the tools could work on to make the use of the tools easier.

DOM & CSS

Only Firebug has a separate panel for DOM. Whereas Chrome developer tools displays DOM related data as a “Properties” sub panel in the right window of their HTML panels and F12 developer tools doesn’t have a panel to display information specific to the DOM. The separate panel for DOM in Firebug allows the developer to view all the objects and arrays of a web page in an expandable tree view.

Overall the CSS panel is one of the most recently used panels as it allows the developers to fix alignment related issues. Since, each browser interprets CSS in a different manner the same web page can look very different in different browsers. All three of the tools allow editing of the CSS element values and see the effects of the change rendered.

For example: we found a user interface bug in www.csc.ncsu.edu when being viewed in Internet Explorer v9 with compatibility for IE7. When hovering over any of the menus like “About Us”, “Academics”, “Research” etc the corresponding entries were getting hidden underneath the Feature stories.  The CSS panels of all 3 tools can be used to fix such issues.

Dropdown hidden

Dropdown hidden

It is worth mentioning that both Firebug and F12 developer tools have an explicit CSS panel while Chrome developer tools has a Styles subpanel in Elements to display CSS related information. Firebug and F12 developer tools edges the Chrome developer tools when it comes to CSS panel as they show both

  1. CSS of an element being inspected
  2. Contents of the entire CSS file loaded for a web page

Chrome developer tools shows only the CSS of an element being inspected. In Firebug and F12 the developer can select from a dropdown all the CSS files loaded to render this page. However, we noticed that F12 developer tools possibly downloads the CSS file again as there is a noticeable delay after selecting the CSS file from the drop down till when the file’s contents are displayed. Also, the check-boxes next to CSS elements in F12 developer tools are unintuitive as to what they enable the developer to perform.

Though the CSS panels are useful in analyzing and playing around with the layout of a web page, it is worth noting that none of the three tools provide the functionality to view the webpage and its elements in a 3D layout. This is a particularly useful feature to view elements that mistakenly are hidden due to incorrect values in the z-index of of the page.

References

  1. http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
  2. Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007 (http://dl.acm.org/citation.cfm?id=1243939)
  3. Brad Myers, Scott E. Hudson, and Randy Pausch. 2000. Past, present, and future of user interface software tools. ACM Trans. Comput.-Hum. Interact. 7, 1 (March 2000), 3-28. DOI=10.1145/344949.344959 http://doi.acm.org/10.1145/344949.3449590
  4. http://blogs.msdn.com/b/cbowen/archive/2011/06/17/internet-explorer-9-developer-tools-deep-dive-part-2-html-amp-css.aspx
  5. S. Oney and B. Myers, “FireCrystal: Understanding interactive behaviors in dynamic web pages,” in Proc. of the Symposium on Visual Languages and Human-Centric Computing (VLHCC). IEEE, 2009, pp. 105-108.(http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.149.9682)

By
Raghav Tripathi & Roopak Venkatakrishnan

CSC 510 : midterm screencast

In this screencast we look into a couple of papers and discuss how they are relevant.



References

Front End Developer Tools – Where are they going?

        Working on the front end code for a web site or web application has never been the best part of a programmer’s day. Typically User Interface for software moved from text based to a more GUI based approach. As discussed by Myers et al. [Mye00], this pushed tools for UI development to a more GUI and window based approach as well. Web development tools following this GUI based approach sprung up, each having its own merits and demerits. Microsoft FrontPage for example, one of the older more popular web page authoring tools offered the user a WYSIWYG editor [Fra99]. These visual editors, gave users the ability to develop the front end of web applications pretty easily, but  one of the major drawbacks was that the architecture these tools supported, dealt with static content, like a group of HTML files . Working with web applications which had front ends which interacted with databases did not benefit majorly from such WYSIWYG tools. These limitations however are slowly disappearing, and the definition of a web-application front end is changing.

FrontPage, offered not only development, but also management of “web-sites”

        The front end of web applications has moved over the years from simple dynamically generated HTML pages to a more interactive type of application which uses JavaScript and technologies like AJAX to make the applications, light, faster, more intuitive and user friendly. However debugging JavaScript, has for the most part been a tough process. JavaScript cannot be run like a simple program and tested. It involves simulating the JavaScript environment, the DOM of the HTML page etc.[Art11] One crucial step however which had made JavaScript hard to work with, was debugging the errors. Before tools like Firebug, and Chrome Developer tools came along, JavaScript developers relied on the “alert” function [Ler07].

When javascript didn’t work, developers ended up throwing in a bunch of such alert statements all over the place

        As the definition of web front end is changing, the tools used to develop the front end is also constantly evolving. Starting from notepad about a decade ago, we moved to GUI tools, and are now moving to combination of many kinds of tools, starting from a simple text IDE combined with a web debug and testing toolkit like Chrome Developer tools and its competitors like Firebug and F12 Developer tools.

References:

—
Raghav Tripathi & Roopak Venkatakrishnan

April 11 2012 -> Earthquake at Sumatra, -> Indonesia, Chennai , Bombay

And for the second time this blog posts live about an earthquake!

Apparently a huge earthquake off the coast of Northen Sumatra…. 8.9 in the richter scales….

Reports are coming from everywhere… here are the links i could find….

http://earthquake.usgs.gov/earthquakes/recenteqsww/Quakes/pt12102000.php

It is reported to be from a tsunami… Did anyone else feel anything??? Please post any interesting stories/information

Update :
Earthquake felt at Singapore, Thailand and southern India!

The richter scale was at 8.7

Update 2:
tsunami alert in tamil nadu and Andhra Pradhesh, india

Update 3:

http://ptwc.weather.gov/ptwc/?region=3&id=indian.TSUIOX.2012.04.11.0845&msg for tsunami arrival times

Update 4:
People in chennai feel a second tremor!

 

Update 5:
On the lighter side :

  •     People think rajinikanth had something to do with this
  •     Kevin William David claims that facebook and twitter are the most affected areas

The tambrahm guide to finding a spouse

Unlike in the western countries in India we believe in the concept of an arranged marriage. This means that your parents will go around looking for someone they think is a suitable life partner for you. This is the concept pretty much throughout India, but there are some things very different that go on in a tambrahm house…

after a lot of difficulty and research i have finally managed to find the secret algorithm that is used to find the perfect life partner.I have decided that it is now time to share this secret with the world so that everyone may benefit. ( I shall reveal the algo for finding a girl in my next post, this one shall concentrate on finding that perfect guy).

So tambrahm parents of today here you go!

ALGORITHM:

  1. Call your daughter to give the talk about how getting married is important bla bla
  2. convince her its time she get married
  3. if daughter agrees
    go to step 4
    else
    you now have to do two things at once,one starts at step 1 and the other is continuing with step 4
  4. Call every one you know on the pretext of saying hello… its been ages “romba naal aachu… chumma thaan” this has to be realistic… And after an hour long tele con
    “mama / mami ongluku ethaa nalla varan therinchithu naa konjam sollungo, namba _____ ku paakalaan thaan”
    (if you happen to get the details of a good boy please let me know, looking for a guy for our __daughters-name-here__
  5. That step 4 is very important it calls of an external command which sends a chain of people calling each other… The thing is everyone wants to have to say at the marriage, did u know i am the person who put these people in touch.
  6. If you are slightly modern, and want to use this to your advantage now might be a good time to put up a profile on all the million matrimony sites out there.
  7. To pass time ensure that you look through every guy on these sites and find something wrong, this could range from height, gothram,vedam, star, moonji serila, avan US-la irukkan, epdi photo eduthirkaan paaru, and the most common “ivla thaan padichirkaan,”
  8. Meanwhile the step you took at no 4 will bring some varan from some mama/mami you have never heard of in your life.
    “pattu maami oda athay payan oda payan” “ambi chithappa oda veetla kudirkaravar oda payan”
  9. whatever the relation , your reaction should show awe as if you know them, “oh avaraa” … never the more sane I’m not sure I know him
  10. now call up to get the info.
  11. Here are some things you ought to ask for while getting the info
    • gothram
    • jaathagam (enowadays exchanged by email… naangalaam modern… we dont believe in age old methods)
    • if iyengar (thenkalai vadakalai)
    • what the boy is doing
    • star
    • where he works (you might not have ever heard of the company but make sure you pose as if you know it)
    • post
    • samblam (salary… if u dont feel shy asking)
  12. tell them you’ll get back if the jaathagam matches.
    here are some straight of rules to eliminate 99 of the 100 ppl you get in touch with ,

    • the gothrams cant be the same,
    •  the jaathagams have to match,
    • the stars should be ok together,
    • the thenkalai/vadakalai should be the same…
    • there are about another 23 more things but we should start giving up all these superstitious things… so ill cut out the rest
  13. now of the 1 in the 100 which matched you approach your daughter… kanna what do you think of this boy (you should have re convinced your daughter by this point again)
    in 99% of the cases

    • she asks you enna maa/paa paakara, ivan verum masters thaan panirkaan MBA kooda illa (hes only done a masters no MBA?) or some reason she doesnt like the boy,
    • hes not tall enough
    • he doesnt look good
    • hes not fun enough
    • hes ____ endless list
    • goto step 14

    and that 1% if she says ok

    • goto step 15
  14. go back to step 1…. try try try till you succeed
  15. YOU won!!! appaadi… now the various steps to fix the marriage and move on …(will describe this later)

NOTE: This is correct to the best of my knowledge. further improvisations shall be added as i figure out more secrets of the trade

  • If you want to get your daughter married when shes 28, start step one when shes around 24. You will reach success only around the 15th iteration… Everyone knows the early bird gets the worm
  • After years of watching my mom talking on the phone getting a million varans and passing them on to eager parents, this is as much as I have gleaned.

please share your knowledge using comments

Update : (with the knowledgeable advice of Siddharth Krishnan )

  • The more modern families are ok with an iyeR or an iyengar … you see we HAVE to progress… intha maari chinna chinnathalaan paaka koodaathu
  • the tamil translation of the “chekka chavelnu irukkan ” would be “he has Wheatish Complexion”

Firefox 4 Launch Party – Chennai #fx4party

Yes, we just had a Firefox 4 launch party at our college today!!! and a mighty blast it was

Started off as a surprise as all the students gathered there were told it was a seminar … Oh the look on their sad faces when they were told they had to listen to another lecture was priceless…  (and a sample below below) … and yes one kid slept off just as he sat down !!!

When he heard it was a lecture he was asleep in a jiffy

First question I managed to blurt out… why do you think you are here… one smart kid who had seen some Firefox banner on the notice board managed to guess it was a launch party… To get some interest we immediately rewarded him with a FF bag, a few badges and an armband!!! Bang… everyone was awake!!!

Though a huge part of the crowd seemed to know firefox, not many of them had yet started using FF 4 … we played the videos straight of the site… quite a bit of fun to watch ppl wowwing and the very same features i take for granted ( What would i do without firefox ?)

Jus for fun, i quickly stripped the wall of all firefox posters, handed out papers to everybody and the person with the best likeness of the firefox logos got a bag… while that went some techies pitted their minds against our FF quiz… surprisingly one of them even managed to answer my question about “the book of mozilla” (mental note to self : make questions harder next time)

Before the first batch of attendees was sent away we got em to screen “Firefox 4” … I think I’m half deaf now 😦

Screaming FF 4

It would have been fun to see the other off stage competitions we had but i was stuck helping out with the quiz!!!

We Finally ended up distributing the swag (so kindly sent to us by the Mozilla foundation) … The funniest part was when the kids who attended the launch went about getting the students who had classes all riled up!!!

Then some total off stage work like “firefoxing” our entire lab… and fotos with our HOD and professors… All in all an amazing event…

Note : some fotos are in this post… will be posting some on flickr with the tag #fx4party … and the fotos with other ppl will follow as soon as i get them!!!

This slideshow requires JavaScript.

Rules to drive in Chennai!!

Driving in Chennai(or anywhere in India), as everybody knows is not the same as driving anywhere else in the world… There are certain things any person driving in here ought to know… So to help out newbie drivers in Chennai I am going to write a set of rules and prerequisites to drive here…

Requirements:

  • A license may not be necessary if you have enough cash to bribe the police guy( popularly called as “Mama” by the youth)
  • A limited knowledge of Tamil… YES i mean the SWEAR words… trust me you feel much better cursing in language the other person understands
  • A sound device which starts playing the ‘airtel song’,’vaseegara’ or ‘every night from titanic’ when u shift to the reverse gear!!! (Strictly no other songs entertained)
  • and of course patience!!!

Ok the requirements are probably very easy to fulfill, lets now get down to the rules. Not too hard either, its  just a question of knowing what to do when!

Rules

-> Unlike other countries, it is much better to ensure the driver doesnt wear a seat belt so that it is easier for him to turn and scream at anybody(we’ll get to that later)

->One hand constantly on the horn. Be sure to honk every 90 seconds or so. Whether you’re at a signal or not,  or rather wherever you are just honk at fixed regular intervals. Make sure u honk whenever some one does something stupid as well!!!

This is where your patience and honking skills come to use!

This is where your patience and honking skills come to use!

-> If you think you can play a song while honking, go ahead you might as well entertain the pedestrians

-> Whenever you are at a signal be ready to give a big smile to the random people in other cars who stare at you. Chennai is a very friendly place, you smile at every random stranger you see

-> Just as you turn to the left or right at the signal some asinine d#!@ @$$ will cut across. Take a quick look to see if its some huge burly guy(it will most probably be the same stranger you smiled at while waiting at the signal), if its not, now’s the time your Tamil comes to use, lower the window and curse away ‘$#!T @$%@!$#  !#@$%*#@#!  #$@%’ … REMEMBER : use Tamil, you want the other guy to know what you are saying!

-> When the person who cut across at the signal is a huge looking wrestler kind of guy, it might be wise to keep your windows shut and scream in english all the same!!! Let it out, trust me it keeps the pressure from building.

-> If you happen to see a ‘jaalmudi thalu vandi’ on the road, stop your car and get a packet or two, don’t worry about the cars behind, they’re now going to play music for the pedestrians. Make sure you fumble for a bit while looking for that money.

-> Parking is a whole art in its own here. Its way beyond the scope of this post but I’d be happy to teach anyone who approaches me. But a quick pointer, you can park your car just about anywhere u think it’ll fit. Just make sure that once you park, the people beside you have an arduous task of getting their car out.

Thats something not many people can do!

-> Please don’t stare at the guy with 4 people on the bike. Its rude!!! He has taken pains to arrange his entire family on a vehicle that barely supports 2 people. Furthermore he has even managed to drive it that way! He would be a way better stunt driver than those teams in the “foreign circuses”.

-> Dealing with “mama’s” is yet another art. Obviously ladies have the upper hand on this one. Start of by denying knowledge of what you did wrong (wrong direction in a one way, parking in the wrong place). Something on the lines of  “appdiya sir, theriyavae illa, anga boardey illa sir, sorry sir, therippi pannamaaten” (is, that so sir, I had no clue,I’m sorry, I wont repeat it) and repeat the “sorry sir, therippi pannamaaten” bit for quite some time. Of course the ladies could just feign a few tears and sort the issue out much easier. EASIEST method of them all, IF you have the moolah, bribe him. Not directly but more on the lines of, “sir late aaidchu, onglukittu fina Kattitu pota?” (I am late, may I pay the “fine” to you and leave?)

-> When u find that you can’t take a U-Turn at a particular place and that it will save you a LOT of time. Follow the following algorithm

->Stop

->look on all sides for a mama

-> if (mama==not found)
{
make the U turn. don’t bother about the cursing from other drivers… “It’s all in the game”
}

-> else
{
Check purse for cash and willingness to pay, if ready make the turn bribe the mama and be on your way

Else go the long route!
}

-> Lastly while you do all this, remember to keep honking at regular intervals. We wouldn’t want to reduce the noise pollution now would we?

You now know the basics of driving in Chennai. Keep watching this blog for more tips and tricks and how to go about getting there quicker!

If anyone else has any rules please post them as comments. Lets help each other out!