Automated Performance Testing with CasperJS

This is currently just a hobby script, but could potentially turn into a very useful performance automation testing framework.

Recently I have integrated a Spider into the Casper netsniff script, and what it does is when you pass the spider an entry point of your site, and it will go through all the pages, capture screenshot and generate har file for all your individual pages.

For more info about this project, please visit
https://github.com/iroy2000/casper-netsniff-spider

Here are some screenshots

CasperJS netsniff.js

Recently I was playing around with PhantomJS and like this testing framework a lot.  And then two days ago I saw in some forum posts that people recommended to use CasperJS ( built on top of PhantomJS ) which provide site navigation functionality. So I started playing around with CasperJS.

And then one day later, which is this morning, I was trying to think about using phantomJS netsniff.js script in CasperJS, and I google it like "How to use the phantomjs example netsniff.js inside casperjs", and there is not much results, all of them are talking about PhantomJS netsniff. Then I also search in the CasperJS google group and found that there some people actually are asking the same question.  Without finding any results further, I finally take the PhantomJS version and convert it for CasperJS.

Here is the github link:

https://github.com/iroy2000/casperjs-netsniff

Hope it helps those who have the same issue. Enjoy!

Note: I'm working on a customized version where you can generate har file when you navigate around the sites in your Casper tests.

Please leave me message if you have any comments.  Thanks!

Just Another Frontend Boilerplate

Recently put together a frontend boilerplate with some latest 3rd party libraries makes into a checkout-and-ready-to-use boilerplate.  It has a configured built tool which you can use right away.  Also, it comes with a customize micro framework which you can take advantage of, but you can replace it with your own easily.

For more information, go to https://github.com/iroy2000/frontend-boilerplate

Frontend Boilerplate

This frontend boilerplate includes a customized mirco framework that combines some of the latest frontend library in the market. It comes with Jasmine as testing framework, plus build tool and build config.

Libraries Included

• Backbone ( amd )
• Backbone Localstorage
• Underscore ( amd )
• Twitter Bootstrap
• Require-jQuery
• Text ( RequireJS Plugin )
• Modernizr
• HTML5 Bolierplate ( partial )

Bootstrap Modal browser resize issue

If you are using Bootstrap Modal  and when you resize your browser size to small enough, your modal will get cut off and you have no way to access the modal footer.

Try the demo in their page, click the demo link and resize your browser, you won't be able to access the button in the modal anymore.
http://twitter.github.com/bootstrap/javascript.html#modals

There may be several ways to solve this, one of them, we found the cheapest is using "media query" in css3, and there are some polyfills to make IE understand "media query".

And you can do something similar to below ( just example, make changes to fit your need )


/* create a rule for height that is smaller than 600px */
@media screen and (max-height: 600px) {
    /* make sure modal shrinks with the browser  */
    .my_dialog .modal-body, .modal-body {
        max-height:300px;
        overflow-y: scroll;
    }
}

What above does is to make the modal body size smaller when the screen size shrink to less than the max height that defined, and it will make the modal body scrollable.

But there are more than one way to fix the problem, this is just one of them.  Hope this helps :)

A great collection of App performance articles

This is a blog post quote from other people, but want to put it here as self reference in the future and in the hope that it will help more people. 

There have been some great app performance resources surfacing recently, so I thought it would make sense to do a roundup.

I've recently seen apps whose performance is being crushed by large & expensive paints, extra layouts, bad event decoupling or too many network requests. They are all fixable items, and Chrome's DevTools and tracing tool both do a great job of showing you what's going on under the hood.

Web Performance Power Tool: HTTP Archive (HAR)

A rundown of the HAR file and how you can use it to diagnose the network side of your application, with +Ilya Grigorik and +Peter Lubbers.

Article: http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/

Video: Make The Web Fast - The HAR Show: Capturing and Analyzing performance data with HTTP Archive format

Wait, DevTools could do THAT?

A fantastic presentation by +Ilya Grigorik on Chrome's DevTools

Video: Wait, Chrome Dev Tools could do THAT?

Notes: http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1

Progressive jpegs: a new best practice

Ann Robson explains how we can all reduce our apps' bandwidth consumption by making use of progressive jpegs

Article: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

Structural and Sampling (JavaScript) Profiling in Google Chrome

+John McCutchan and +Ilya Grigorik (he keeps showing up this guy!) cover Chrome's tracing tool. If you're a power user, this one is a must.

Video: Structural and Sampling (JavaScript) Profiling in Google Chrome!

Snow in canvas land

+Jake Archibald relives the horror of his 2-year-old code, and sets about fixing it

Article: http://calendar.perfplanet.com/2012/snow-in-canvas-land/

Improving Web App Performance With the Chrome DevTools Timeline and Profiles

A very thorough tutorial (with ANIMATED GIFS!) by +Addy Osmani on how to use Chrome DevTools to diagnose memory and performance issues.

Article: http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/

Scrolling Performance and Parallaxin'

Two articles by yours truly on understanding and improving scrolling performance in your applications

Article: http://www.html5rocks.com/en/tutorials/speed/parallax/

Article: http://www.html5rocks.com/en/tutorials/speed/scrolling/

Google I/O 2012 - Jank Busters: Building Performant Web Apps

+Nat Duca and +Tom Wiltzius of Google's Chrome GPU team cover a host of tips & tricks for maximizing your app's rendering performance

Video: Google I/O 2012 - Jank Busters: Building Performant Web Apps

Why moving elements with translate() is better than pos:abs top/left

+Paul Irish on using translates vs absolute positioning, and the performance implications of both

Article: http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

IE8 uses IE7 DOM model on website

Probably it is a well known issue, and there should be many posts out there already mentioned that.  But in case you find this post, it means you are still having this problem.

IE8 will fall back to use IE7 DOM mode when sometimes visit a page, they called it "compatibility" mode.  However, if you doesn't need to support IE7, then it means it will screw you up, because the compatibility mode in IE8 is using IE7 DOM.

But the fix for it is very easy, just put that meta in your header

<meta content="IE=edge" http-equiv="X-UA-Compatible" />

And this will force IE to use the latest version of DOM mode in its browser engine. 

Web Platform Docs

If you guys didn't know, the W3C has started a project called Web Platform Docs ( currently in alpha release ) aimed at being the centralized resources for web developer.  This project has been and will continue be contributed by the main (and big) players in the web development industry.

http://docs.webplatform.org/wiki/Main_Page

If you haven't heard of that before, you can visit their "Getting Started" link,

http://docs.webplatform.org/wiki/WPD:Getting_Started

Modeling and Reasoning behind DOM Events

A nice presentation on why DOM events behave in certain way.  So instead of telling you what a UI developer should know, it tells you why you have been told is true.

https://www.usenix.org/conference/webapps12/modeling-and-reasoning-about-dom-events

Here are some more good links in my reading list this month :)

Race Detection in UI
http://www.srl.inf.ethz.ch/papers/pldi12-wr.pdf

Whitepaper on Why Eval is Evil and General Misunderstanding
http://www.cs.purdue.edu/homes/gkrichar/papers/eval-ecoop-2011.pdf

Maintaining modular Javascript

Source coming from http://opensourcehacker.com/2012/06/29/maintaining-modular-javascript-codebase-with-requirejs/

Tools to test across all browsers

http://www.browserstack.com/
BrowserStack is a web based cross browser testing tool.  Has a nice feature to let you test on development server that might not be exposed to the public.

http://browsershots.org/
BrowsersShots let you enter your URL and do a browser compatibility test across the browsers you checked. Some people prefer Adobe Browser Lab because they claimed it's faster than Browsershots, and one can save his/her own set of browsers.

http://netrenderer.com/
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 10, 9, 8, 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out - it's free!

https://browserlab.adobe.com/en-us/index.html
Adobe BrowserLab is an online service that helps ensure your web content displays as intended. Accurately preview web pages across multiple browsers and operating systems, navigate links, and use diagnostic tools to optimize websites efficiently.

https://addons.mozilla.org/en-US/firefox/addon/adobe-browserlab-for-firebug/
Adobe BrowsersLab for Firebug

http://spoon.net/browsers/
Browser Sandbox lets you "run popular web browsers with no installs" (IE6, 7, 8, 9+, Firefox, Chrome, Safari, Opera).

http://finalbuilds.com/iecollection.htm
Multiple IE versions you can installed.

http://www.microsoft.com/en-us/download/details.aspx?id=4580
For testing in different IE versions on Windows, you can also use Microsoft Virtual PC.

Note: The above is not an exhausted list of tools you can use for browser testing.  If you have more tools you have seen and want to share, please feel free to add it in the comments, thanks!

Reading List for June

My reading list for June :)

Twitter Engineering Blog
http://engineering.twitter.com/

Cross Browser Debugging
http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/#comments

Handling Multiple Ajax Call
http://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/

Don't use Router handler in Backbone
http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/

Building Living Web Applications with HTML5 WebSockets

View more presentations from pmoskovi

Automated Performance Testing Slides

AugularJS Perf Testing
https://docs.google.com/presentation/pub?id=1gGqJGAhLF49IxZ42nNlsSphZFpxCx8iGD15Thh2yGMw&start=false&loop=false&delayms=3000#slide=id.p

Automated Performance Testing
http://www.zealake.com/2012/05/11/automated-performance-testing/

You should read those if you are working on frontend

Frontend coding standard
http://na.isobar.com/standards/

Frontend development guidelines
http://taitems.github.com/Front-End-Development-Guidelines/

How javascript timers works
http://ejohn.org/blog/how-javascript-timers-work/

How prototype inheritance works
http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html

Jquery Core Style Guideline
http://docs.jquery.com/JQuery_Core_Style_Guidelines

Jquery events misused
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

10 things I learn in Jquery video

Because the Web isn't Print

Visualize way to learn HTTP status

LOL, I love how they use dogs to describe http status :)

http://httpstatusdogs.com/

Best CSS3 Utilities

Most of these tools are pretty well known, but just in case you haven't used or heard of them, you can try to click and explore yourself.  If you know more CSS3 tools that is useful, please feel free adding those to the comments.

If you are interested in creating CSS3 tools for the community,  let me know, we can definitely figure something out.

• CSS3 Please- http://css3please.com/
• Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/
• CSS3 Generator - http://www.css3generator.com/
• CSS Desk - http://cssdesk.com/
• CSS Prefixer - http://cssprefixer.appspot.com/
• Normalize.css - http://necolas.github.com/normalize.css/
• CSS Crush - http://the-echoplex.net/csscrush/
• CSS3 Sandbox - http://westciv.com/tools/gradients/
• Ceaser CSS Easing Tool - http://matthewlein.com/ceaser/
• CSS3 Transformer - http://westciv.com/tools/transforms/index.html
• When can I use - http://caniuse.com/
• CSS3 Playground - http://css3.mikeplate.com/
• CSS3 Button Generator - http://css3button.net/
• CSS3 Maker - http://css3maker.com/
• Layer Styles - http://layerstyles.org/

Extra Tutorials

• HTML5 UI Components - http://nextgensim.info/uicomponents
• Canvas - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Re: The grey areas of progressive enhancement

Going through some articles about progressive enhancement and found this one - The grey areas of progressive enhancement.

Well, not everything has to follow the progressive enhancement rules, let's keep it flexible.  If it is something critical for a business or corporate, you don't want that to lose the design.  And I believe it is the spirit of progressive enhancement as well, keep critical elements the same in all platform and let's those non-critical to be enhanced progressively.  

Here are something I can think of at this moment about progressive enhancement:-

• Normal user won't look at your site using 2 or more browsers at the same time, so their user experience should basically be the same. But of course, those corporate identity design has to be kept as they are critical.
• The cost of making everything the same in all browsers could be huge. And if it is not critical, why not just save those resources for something else?
• You are punishing those users who are using older browser if we needs everything to be the same.  Because in order to achieve everything the same, client user may need to download extra images, extra js libraries.  

I came from the background of both "everything has to be the same" and "let's make it progressive enhance / gracefully degrade".  And each one has its good and bad, nothing is perfect honestly.

But for "making everything the same" method, here is my experience as a developer - You will learn the most out from it, but it could be a pain of the butt process.  Honestly if I have time and budget, I would do that, since it is fun. And a lot of famous libraries are coming out because some old browsers do not support certain features (maybe you could be the next one).  And again, if you have time and budget, just go for it :)

Extra

Ok, at the end, let me suggest you a graph and help you to decide when you should use "progressive enchantment" or not :)

The rule is "choose 2 and dump 1" :-

• If an element has to be the same, and you have limited budget, you need to give a lot of time to it
• If an element has to be the same, and you have short turn around time, you need to prepare a bigger budget ( hire more contractors, giving OT ... etc )
• If you have both time and budget limit, think about if an element has to be the same or not. If it is not critical, then why bother?

The war between Developers, Designers and Project Managers

 

HTML5 video player comparison

Here is the link

http://praegnanz.de/html5video/