Frontend 2/2 (CSS & JS)

10-css.md

1. CSS

Purpose - styling webpage

Problems

• Duplication
• Verbosity
• Lack of semantic value
• Handling other used assets

1.2 Preprocessors

1.2.1 Less (nodejs) vs Sass (ruby)

Syntax

>>> Variable <<<
Sass                              | Less
----------------------------------+-----------------
$color: red;                      | @color: red;
#menu a {                         | #menu a {
  color: $color;                  |   color: @color;
}                                 | }


>>> Mixins <<<
Sass                              | Less
----------------------------------+----------------------------------
@mixin borderadius($radius) {     | .borderadius(@radius) {
  border: solid 2px black;        |   border: solid 2px black;
  border-radius: $radius;         |   border-radius: @radius;
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @include borderadius(3px);      |   .borderadius(3px);
}                                 | }


>>> Extending <<<
Sass                              | Less  
----------------------------------+----------------------------------
.bordered {                       | .bordered {
  border: 1px solid red;          |   border: 1px solid red; 
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @extend .bordered;              |   &:extend(.bordered);
  border-bottom: 2px;             |   border-bottom: 2px;      
}                                 | }

Which is better?

Need sprites - go with Sass (Compass (ruby) handles them for you)

Installation

• http://sass-lang.com/install
• http://lesscss.org/#using-less-installation

Don't use PHP implementations - they are bad!

1.2.2 Development process

Assetic (Symfony2 web assets manager)

1. JUST refresh browser*

Using watchers

1. Start watcher - program that tracks changes in files and recompiles assets
2. Edit stylesheet
3. Refresh browser

Minification

Reduces CSS file size to improve loading time at price of readability

20-javascript.md

2. JavaScript

Purpose: allow client-side scripts to interact with the user

Shitty language. Really shitty language. Even ES6 ("Harmony") won't fix deep architectural flaws.

jQuery

• Hotfixing what browsers lack
• Sizzle CSS selectors library
• Fusing algorithms and DOM
• Less inlined JS

Good at what does, often missused. jQuery UI is far from good as well.

Old presentation

http://slides.com/im0rtality/building-web-applications#/

JavaScript is nice, but OPTIONAL

30-automatization.md

3. Automatization

Grunt/Gulp (nodejs)

Basic idea: preconfigure all tasks in buildscript, so you can run all tasks with single command

Getting started

• http://gruntjs.com/getting-started
• https://github.com/gulpjs/gulp/blob/master/docs/README.md

TODO

Configure grunt/gulp to compile, concat and minimize your CSS & JS (if using JavaScript).