Slide for Code Camp 14

Haven't been doing technical blogging for a while after having second kid :)

I still owe people a lot of blog posts :)

Here is the presentation for last year Code Camp

Javascript Testing with Jasmine

Slide and github for Code Camp 13

Thank you for attending this afternoon session, hopefully you guys at least get some basic knowledge on Backbone and how each component interact with each others.

I hope we could have internet access today, so we all can get some hands on experience by going through the github code together. So please feel to checkout the code, follow the instruction and set it up in your local environment.   Feel free to poke around. 

https://github.com/iroy2000/backbone-tutorial

I will update the slide later, you should get the slide on the code camp official website later as well.

Update
======
There is a question about if there is a user preference concept for an application, and what the user preference will do is adding some filtering for a screen ( Let say stock quote view ).

There are plenty of ways to do that, but one of them I would see is
1) assume you have a user/ api
2) assume you have a stock-quote/ api

What usually is done should be in this sequence
1) You will fetch the user/ api first, because your other view or section has dependency on it
2) Grab what you need from the user api response, let's say your user has a preference of showing top 10 stock for each day
3) Now you can fetch the stock-quote/ api by passing some filter parameter that your user set earlier, for example,  /stock-quote/?display_top_transaction=10

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 )

IE error on feeding array of HTML elements to jquery html()

I was debugging a seemingly simple issues in IE ( but it turns out could be an inconsistent in javascript implantation ), which unsurprisingly works in other browsers.  When I trace the error, it was coming from the jquery library, and in which there is a native function call fragment.append(elem)

And this is my guess - the implementation of append() in IE doesn't really support an array of elements. Maybe I'm wrong, please let me know if that's a wrong guess.

There are so many ways to fix it, but one simple way is do a 'join' on your array before feeding to the jquery html()  function to append stuff.

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 :)