HTML & CSS

Laurynas Veržukauskas

@Im0rtality

2014

HTML

• Human readable/plain text
• Read by browser
• Static

Real world HTML

• Templating
• Template + Data => HTML
• Makes HTML dynamic
• Backend and/or frontend

<p>Hello {{ user.name }}!</p>

CSS

• Human readable/plain text
• Read by browser
• Static
• Code duplicates
• Non semantic constants
• CSS3
  • Lot of new toys
  • See this: http://goo.gl/iUZyiW

Real world CSS

• Frameworks
• CSS preprocessors

• Dynamic
• Less duplication
  • functions
  • semantic constants
  • etc

Javascript

• Horrible language (see http://goo.gl/xKxHjK)
• ES6 will improve somewhat (ETA 2015-2016)

Real world JS

• Spaghetti code
• Inlining
• Mixing JS with HTML
• Mixing JS with CSS
• Browser support
• ...

What can we do?

• "Not invented here"
  • Libraries
  • Frameworks
• Automated testing
  • Karma, Jasmine, ...
• Static analysis tools
  • JSLint, JSHint

"Not Invented HERE"

• Shims (when API is different)
  • es5-shim
• Polyfills (when missing features)
  • http://goo.gl/m85Htl
• Don't write your framework unless
  • Performance is top 1 priority
  • Educational purposes

Alternatives to HTML/CSS/JS

1. Adobe Flash

2. Microsoft Silverlight

3. ???

Alternatives to HTML/CSS/JS

1. Adobe Flash

2. Microsoft Silverlight

3. ???

NONE

TODO: More slides

performance

1. Reduce request amount
   • Concatenate & minimize
2. Reduce request size
   • Compress with GZIP
3. Prevent requests
   • Caching

PageSpeed (http://goo.gl/vk6ZaF)