A 360-degree overview of the most popular technologies in web development to boost your productivity.

1. POWERFUL TOOLS FOR
BUILDING WEB SOLUTIONS
SASS, X2JS, TypeScript, Javascript REPLs, Node.js, Internet
Browsers, OSS, HTTP Proxies, Color Palette Management,
Web fonts, CSS new features, CSS Auto Prefixing
Andrea
Tino
#allrightsreserved #2015 #creativecommons #cc4.0 #attribution #noncommercial #sharealike
#international

2. Who is this
presentation for?
Everyone with a
minimal background
on web programming
What topics does it
cover?
See previous slide :)
Oh yeah... But how
detailed?
Just a rapid look at
those technologies,
the rest is up to you!

3. JAVASCRIPT AND CSS ARE WEB’S ASSEMBLY
The world is moving in a certain direction where
Javascript and CSS are not really used for developing
the web today.
1.1
C#’s creator on C#
“Forget about C#...
Javascript is the future”
TypeScript
http://www.typescri
ptlang.org
CoffeeScript
http://coffeescript.org
A developer on CSS
“CSS is the worst thing
ever created”
New abstractions
Do you remember when we used to develop websites using
HTML and Javascript? Well, today you should write not a
single line of Javascript anymore.
Why? Because Javascript allows too many things, too many
hacks. It is also a non typed language, thus it introduces
very few restrictions. It means that there is not much
control when a Javascript program is executed.
X2JS So we created new languages which compile into
Javascript. There are many of them out there: TypeScript,
CoffeeScript, LiveScript also functional languages.
Same for CSS CSS sort of shares the same destiny
of Javascript but for a slightly different reason: CSS
has no limits and can scale to extremely chaotic sets
of overridden rules.
There is need for more consistency and structure.

4. CONSTRAINTS NEEDED
My thoughts on this.
1.1.2
Me
“X2JS and X2CSS are today’s
attempt to provide Semantics to
two technologies (Javascript and
CSS) that can act as the Assembly
language of our current
applications’ platform: the Web”
Setting limits
These new languages popping up on the Internet every new
day are a clear representatoion of what the community is
seeking: restrictions!
To make things more neat and less chaotic, we need to add
constraints to our programming experience.
X2JS Languages compiled into Javascript use OOP and
types to confine the extreme flexibility of Javascript.
X2CSS Languages compiling into CSS provide a better
syntax structure to specify selectors and create selectors
hierarchies for a less chaotic styling.

5. My thoughts on this
THE WORLD AROUND JAVASCRIPT
Tools for a better Javascript development experience
2

6. DISCOVERING TYPESCRIPT
Microsoft’s solution for a better Javascript
programming experience by C#’s creator: Anders
Hejlsberg
2.1
NPM install
npm i -g typescript
Playground
http://www.typescriptl
ang.org/Playground
Handbook
http://www.typescriptl
ang.org/Handbook
TYPE SUPPORT VARIANT TYPE
GENERICS INTERFACES
EXCEPTIONS LAMBDA EXPR
MODULES TYPE INFERENCE
DECL.MERGING INHERITANCE
POLYMORPHISM NODE.JS READY
Like C#
TypeScript is sort of inspired to C#, after all
both languages have the same father :)
The programming experience is very intuitive
and can be seen like a very advanced
ActionScript with full support for OOP and its
principles: Encapsulation, Inheritance and
Polymorphism.

7. JAVASCRIPT REPL(S)
Most common places to write your Javascript hacks
and try your experiments.
2.2
REPL.IT
http://repl.it/languages/JavaScript
JS Bin
http://jsbin.com
JS Fiddle
https://jsfiddle.net
Script on your browser
A REPL (Read, Eval, Print, Loop) is sort of a shell
available on web. There are many of them supporting
many different languages.
JS Bin This is by all means my favorite. It allows you
to create Javascript hacks and save them in your free
account. You can also share them.
JS Fiddle Probably one of the very first Javascript
REPLs on the web it offers the possibility to integrate
your code with almost all Javascript libraries out
there (possibility to select version!).
Reple It This is an amazing tool for REPLing all
languages. It supports Javascript but also Node.js
and many other languages. It is like having a
platforms with all languages you might need.

8. BROWSER JAVASCRIPT CONSOLE API
Debugging Javascript can be hard, but browsers
developed many tools for developers.
2.3
Chrome’s console API ref.
http://developer.chrome.com/devtools/docs/
commandline-api
IE’s console API ref.
http://msdn.microsoft.com/en-us/library/ie/h
h772173%28v=vs.85%29.aspx
Firefox’s console API ref.
http://developer.mozilla.org/en-US/docs/Tool
s/Browser_Console
Accessing the console
Althought there is no W3C recommendations or
specification on this, all browsers implement a
Javascript API that allows developers to debug their
web applications.
Element selectors Commands for getting elements
in the DOM. XPath is also supported in some
browsers.
Object inspection Commands for accessing objects
and their properties. Some browsers allow
serialization to and from XML/JSON as well.
Event inspection Commands for listing active event
handlers on objects and handle them.
Monitoring Commands for observing objects’ state
and trigger callbacks when something occurs or
changes.

9. MUTATION OBSERVERS (EX EVENTS)
Debugging sometimes can be painful in Javascript,
especially with large projects. However a black-box
approach is possible
2.4
W3C DOM Specification
http://www.w3.org/TR/dom
MDN - Mutation Observer API
http://developer.mozilla.org/en/docs/Web/AP
I/MutationObserver
Observing changes
This is a functionality introduced in still draft DOM4
W3C specification and replaces old Mutation Events
API. It is design for development, but this feature
can be actually pretty handy when debugging large
Javascript projects with many lines of code.
Trigger when something changes Usage is quite
straightforward: An object is provided (must be Node
in the DOM) and an observer is created by providing
also the list of changes to listen to (like Sensitivity
Lists in VHDL). When one of these changes occur, the
observer will execute the callback provided.
Better debug It is a good functionality when trying
to figure out what side effects some components are
introducing in the DOM.

10. PROFILING JAVASCRIPT
What the user experiences is all the Javascript in your
browser (except turnarounds due to http non-AJAX
reqs), thus profiling your JS is good practice!
2.5
IE’s memory profiler
http://msdn.microsoft.com/en-us/library/ie/d
n255003%28v=vs.85%29.aspxChrome’s Flame Chart
http://developer.chrome.com/devtools/docs/
cpu-profiling
Modern browsers have very nice tools for profiling
web applications and discover slow components in
order to enhance them or take reasonable action.
Chrome: function deep
Chrome has a very interesting functionality: the
Flame Chart in the “Profiles” section. It allows
programmers to visually identify which functions are
executing for a long time
IE: find memory leaks
IE delivers the Memory Profiler as part of its F12
developer tool. It enabes the possibility to take
snapshots and, thus, it is very good, among the other
things, for locating memory leaks.

11. EVENT AWARENESS
In large applications, handling events is
important as they trigger events when in the
capture phase and also when bubbling.
2.6
IE’s memory profiler
http://msdn.microsoft.com/en-us/library/ie/d
n255003%28v=vs.85%29.aspx
Events can be like little lizards moving
everywhere, keeping track of them is crucial!
Browsers themselves offer some solutions,
however some external tools can be handy.
SpryMedia Visual Event
This lightweight and extremely easy-to-use tool lets
you visually identify which events an element in the
DOM has subscribed to.
Different types As it is possible to use jQuery and
other ways to subscribe to events, Visual Event is able
to recognize which method the developer used to
subscribe to events for a specific element.
Chrome’s event monitor ref.
http://developer.chrome.com/devtools/docs/
console#monitoring-events
Console API: event monitor
Chrome and other browsers, as part of the console
API, offers the possibility to monitor events.
monitorEvents(document.body,”click”);
unmonitorEvents(document.body);
monitorEvents(document.body);

12. TRACKING EVENTS: DIY
Instead of using external tools and libraries doing
magic, you can develop easily a way to track
events in every web application.
2.6.2
<head>
...
<script src=”...”></script>
<script src=”mylib.js”></script>
</head>
1. Define the library
Create a separate js file and put there the
function. This file must be included as LAST
library in your web application.
2. Override subscription
Override event subscription functions.
HTMLElement.prototype.addEventListener =
function(type,listener,useCapture) {...};
HTMLElement.prototype.removeEventListener =
function(type,listener,useCapture) {...};
3. Implement logging logic
Log everytime the event traverses an element.
// Attention: Pseudo-Code!
var log = function(fun) {...}
function(type,listener,uc) {
this.oldAEL(type,function(){log(fun)},uc);
for (ancenstor in this.ancestors) {
ancestor.oldAEL(type,log,uc);
}
};
TODO

13. My thoughts on this
TOWARDS A BETTER STYLING EXPERIENCE
What the world out there can offer to improve styling
web applications with CSS
3

14. DISCOVERING SASS AND LESS
A very useful tool to create better CSS stylesheets
without the chaos of CSS.
3.1
SASS
http://sass-la
ng.com
LESS
http://lesscss.
org
SASS Playground
http://sassmeister.com/
SASS vs LESS
https://css-tricks.com/sass-vs-less/
LESS Playground
http://lesscssismore.com
Higher level CSS
SASS Syntactically Awesome
StyleSheets provides developers with a
more structured language. Sadly is that
it cannot be installed through NPM :(
gem install sass
LESS aka Less CSS. Same as SASS
but with some different features
and slightly different syntax. Ah, it
is NPM ready :)
npm install -g less
GOOD COND.STRUCT.BETTER SYNTAX
BETTER CSS OUTPUT BETTER DOC

15. TOWARDS OBJECT ORIENTED CSS
OO principles applied to CSS or what?
3.2
:( :)
OOCSS
http://www.smashingmagazine.co
m/2011/12/12/an-introduction-to-
object-oriented-css-oocss/
Writing better CSS
.button {
width: 200px; height: 50px;
padding: 10px;
border: solid 1px #ccc;
}
.box {
width: 400px; height: 100px;
border: solid 1px #000;
background-color: #fff;
}
.widget {
width: 500px; height: 200px;
border: solid 1px #ccc;
background-color: #fce;
}
Avoid duplication Like in OOP, it is good to act
by the principle of less possible redundancy.
.button {
width: 200px; height: 50px;
}
.box {
width: 400px; height: 100px;
}
.widget {
width: 500px; height: 200px;
}
Separate concerns Identify what’s specific to
each object and remove non-specific rules.
:) .skin {
padding: 10px;
border: solid 1px #ccc;
background-color: #efe;
}
.button.skin {
background-color:
inherit;
}
Use methods Use common rules changing with context.
.box.skin {
padding: 0;
border-color: #000;
background-color: #fff;
}
.widget.skin {
padding: 0;
background-color: #fce;
}

16. CRAZY PREFIXING SOLVED
One of the most annoying things about CSS is that
many features arenot fully implemented by browsers,
many rules have prefixes, this makes CSS ugly!
3.3
MDN
https://developer.mozilla.org/en-US
/docs/Web/CSS
Autoprefixer
https://github.com/postc
ss/autoprefixer
Playground
http://jsbin.com/
gufoko/
Playground
http://pleeease.io/
play
Should I prefix?
How can I know whether a CSS rule should be
prefixed or not? Use MDN, search the CSS rule and
find the Browser Compatibility matrix!
Or better do it automatically
There are some tools which perform auto-prefixing on
your CSS sylesheets. These can be used on your CSS,
SASS, Stylus or even LESS files.
Autoprefixer Very efficient and fast tool.
SASS
Pleeease
http://pleeease.io
Pleeease Flexible and does everything.
npm install -g autoprefixer
LESS STYLUS npm install -g pleeease-cli

17. MANAGE YOUR COLOR PALETTES
Very important tools for UX designers to style web
applications and keep color palettes always in order.
3.4
Adobe Color CC
https://color.adobe.com/
Color Hex
http://www.color
-hex.com/
For professionals
Adobe sure delivers amazing applications for
designers and Color CC (formerly knows as Kuler) is
one of these.
Not so advanced ones...
Other solutions which are not as good as Adobe’s but provide
a very good level of color palette handling in the Cloud.
COLOR RULES
SHARINGFROM IMAGE
COLOR WHEEL
Color-Hex This provides basic features.
ColourLovers
http://www.colourlo
vers.com/
Color-Hex This provides basic features.
PATTERNS

18. My thoughts on this
IMPROVING PRODUCTIVITY
A miscellaneous of tools on the Web to improve
development experience in general
4

19. INSPECT HTTP COMMUNICATIONS
When developing web applications, AJAX calls are
something more than common (especially in SPAs), some
tools can help you see what’s going on the channel.
4.1
Telerik Fiddler
http://www.telerik.com/fiddler
SERVER
127.0.0.1:80
CLIENT
Browser
Debugging AJAX calls
Web applications will naturally send and
receive information with the server. AJAX calls
are also quite a common thing, but
sometimes we need to debug data and
having a look at what’s going on on the
channel is a very good thing to have!
Fiddler By Telerik, it is one of the most used
HTTP proxy and sniffer. It has many
capabilities ad can be customized using a
programming language.
JSCRIPT PRGRMMBLE
REVERSE PROXY
CUSTOM RULES

20. DISCOVERING ADOBE EDGE ANIMATE
Creating Javascript based animations with a timeline
based tool is like having Adobe Flash... without the need
of the SWF Player :)
4.2
Adobe Edge Animate
https://creative.adobe.com/product
s/animate
Animating like in Flash
I started developing Flash presentations
when Flash was still Macromedia’s (5.0). Now
unfortunately the market has moved away
from it, but with Edge Animate it is still
possible to have the same authoring
experience, and this is awesome!
width:
height:
x:
y:
Timeline based
animation design
is a very effective
way to create
animations.
Javascript The very nice thing of Animate is that the
output is a bunch of Javascript, CSS and HTML files.
Adobe guarantees that animations are cross browser :)

21. DOES MY BROWSER SUPPORT IT?
The most popular tool to discover which browser is
implementing whatever feature.
4.3
Can I Use?
http://caniuse.com/
HTML5 Test
https://html5test.com/
Can I Use?
Does Chrome fully support multiple columns?
Does IE support CSS animations? Yes? What
about IE10? And FireFox? Opera?
All those questions can have an answer by
simply using CanIUse!
Always updates CanIUse is always updated
with latest info about support of standards by
browsers. Some tools even use CanIUse to
keep their database updated.
HTML5 Test
Support for newly come HTML5 features can
be something important to keep in track. The
nice thing of HTML5Test is that you will not
be presented with a support matrix, the tool
will run a set of tests on your browser and
give you results for that specific version!
Other browsers The tool also offers the
possibility to evaluate other browsers and
even compare support!

22. My thoughts on this
DEVELOPING CROSS PLATFORM HYBRID APPS
Today’s most popular tools for creating apps on
different stores with the same code base
5

23. THE WORLD AROUND HYBRID APPS
The main actors on the stage of cross platform apps
5.1
Cordova
https://cordova.apach
e.org/
Hybrid app
Developed in HTML +
CSS + JS mostly
PhoneGap
http://phonegap.com
Appium
http://appium.io/
Selenium
http://www.seleniumhq.org/
HTML5 + CSS + JS
Supported platforms’SDKs
https://developer.android.
com/sdk/index.html
https://developer.apple.c
om/xcode/
Specialization
Used to develop

24. HOW AN HYBRID APP IS BUILT
Once upon a time...
5.2
WebView
Native app
Webview
A mini-browser
hosted by apps
From web applications
Hybrid apps basically originate from web
applications. The process simply consists in
considering a web applications and then
building apps which embody a Webview
connecting to the same server to download
the HTML content.
Tooling Cordova, while generating the
apps, will also include libraries to handle
communications between the native layer
and the webview.

25. WHAT CORDOVA DOES
Actually, nothing so somplicated.
5.3
Android Webview
webkit.WebView
iOS Webview
UIView::UIWebView
Win Webview
WebView
Unix
Android
MacOS
Android
iOS
Windows
Android
Win
Creating
an app
Cordova will generate a
very simple app consisting
in a Canvas element
together with a WebView
element on top covering all
the screen.
Since the app to build is
always the same, instead of
having developers do that,
Cordova automates this
process.
npm install -g cordova

26. HOW TO CREATE APPS WITH CORDOVA
From command line, just a few commands and there you
can go.
5.3.2
For Windows
cordova prepare windows
cordova compile windows
For Android
cordova prepare android
cordova compile android
For iOS
cordova prepare ios
cordova compile ios
Win output
myapp.appx
Android output
myapp.apk
iOS output
myapp.ipa
Configuration
package.json
config.xml

27. This work is distributed under the Creative Commons
Attribution-NonCommercial-ShareAlike 4.0 International license.
THANK YOU
Twitter: @_atino
E-Mail: andry.tino@hotmail.com
The end