The document discusses various tools for modern web application development including JavaScript frameworks like Angular and Backbone, CSS preprocessors like SCSS and LESS, templating languages like Jade and Haml, module loaders, performance optimization tools, documentation tools, and continuous integration tools. It also covers techniques for structuring code and CSS including OOCSS, BEM, and SMACSS methodologies. Finally, it discusses scaffolding and build tools like Yeoman, Grunt, and Bower for automating workflows.
26. TDD/BDD
Why TDD?
Design your code well
Build confidence to use your code
Don’t let same bug popup twice
Seamless change requests adaption
Automatic Documentation
Continuous Integration
45. Continuous
Integration
Continuous integration – the practice
of frequently integrating one's new or
changed code with the existing code
repository – should occur frequently
enough that no intervening window
remains between commit and build,
and such that no errors can arise
without developers noticing them and
correcting them immediately
CI
-wikipedia
51. What is CSS
Preprocessors
Stylesheet meta language that
is interpreted into CSS
$basecolor: #f1f1f1;
body{
background: $basecolor
}
body {
background: #f1f1f1;
}
SC
SS
C
SS
55. Compiling
Deployment Server Client Local
Compile as
part of
deployment
process
(Capistrano,
Fabric).
Compile and
cache up on
request.
Compile
using
javascript at
browser end
(not
recommended)
Compile
using tools.
62. OOCSS
Purpose of OOCSS is to identify common
pattern & encourage code reuse
Main principles
Separate structure and skin
Separate container and content
63. BEMBlock : A block is an independent entity.
Element : An element is a part of a block that
performs a certain function. Blocks and
elements constitute page content.
Modifier : Similar block with slightly altered its
appearance or behavior..
64. SMACSSBase : Base rules are the defaults.
Layout : Divide the page into sections. Layouts hold one
or more modules together.
Module : are the reusable, modular parts of our design.
State : are ways to describe how our modules or layouts
will look when in a particular state. Is it hidden or
expanded?
Theme : are similar to state rules in that they describe
how modules or layouts might look.
67. KSSstyleguide
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given
styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}
85. Lightning-fast scaffolding
Great build process
Automatically compile CoffeeScript & Compass
Automatically lint your scripts
Built-in preview server
Awesome Image Optimization
Killer package management
PhantomJS Unit Testing
Yeoman
It's a workflow
collection of tools and best practices