How To Be A Web UI Developer

This video is in English.
Length: 48:55
Source: YAPC::NA 2013 on the 2013-06-03.
Speaker: Casey West speaker

In this talk I'll show how to use tools to build web application interfaces that will make you look like a rockstar. Your UI can be beautiful, functional, and well tested, too.

Much like our first time on CPAN, it can be difficult to know what tools are going to make your life easy, and make you a rockstar, and which won't.

If you're building web applications with Perl you'll want to have these time saving, happy-user creating tips, tricks, and tools at the ready. We will build a simple app using these tools so you can see them in action.




Twitter Bootstrap

HTML5 Boilerplate For gettng started with good looking web site. General guidelines and downloadable project that you can use to get roliin.

Boilerplate Initializer provides a template of a responsive design that will look good both on computers and on mobile devices. It also uses Modernizr


Sprites - Instead of adding million small image files it lets you create one big image and then you use style sheets to show specific areas of the image.

HTML Header - with lots of conditional statement specifically for IE.

Modernizr detects HTML5 and CSS3 features and will tell you if the current web browser specific features. If the feature is not supported you can use Polyfills to support them.

Respond.js is a Pollyfill for the min an max width media query style sheets.

Modernizr has a long list of Pollyfiles

Grid system

It is like using tables but is uses divs so it is good because we are using a differen word.

Mimosa it will compile lots of Javascript and CSS files into nicely packed files that are easie for the clients to download.

Install Node.js and NPM using homebrew on a Mac

shell> brew install npm
shell> cd
shell> mimosa config

shell> mimosa watch --server --optimize --minify

Stylus is a Meta language for style sheets likes Sass, SCSS or less.


jQuery, plugins, and jQuery UI.

Bower is a bit like CPAN for Javascript - package management system.

Bower components

shell> npm install -g bower
shell> echo '{"directory": "src/js/vendor/bower"}' > .bowerrc
shell> bower init
shell> bower install requirejs


CoffeeScript a meta language that compiles down to JavaScript.

Backbone (See also the talk of Bill Humphries called Perl Meets Modern Web UI. An MVC-style framework for JavaScript.

shell> bower install underscore
shell> bower install backbone
shell> bower install backbone.localStorage




Mocha testing framework for JavaScript.

PhantomJS a headless browser.