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)
- Polyfills (when missing features)
- Don't write your framework unless
- Performance is top 1 priority
- Educational purposes
Alternatives to HTML/CSS/JS
-
Adobe Flash
-
Microsoft Silverlight
-
???
Alternatives to HTML/CSS/JS
-
Adobe Flash -
Microsoft Silverlight -
???
NONE
TODO: More slides
performance
- Reduce request amount
- Concatenate & minimize
- Reduce request size
- Compress with GZIP
- Prevent requests
- Caching
PageSpeed (http://goo.gl/vk6ZaF)
HTML, CSS, JS
By Laurynas Veržukauskas
