POWERFUL TOOLS FOR BUILDING WEB SOLUTIONSSASS, X2JS, TypeScript, Javascript REPLs, Node.js, Internet Browsers, OSS, HTTP Proxies, Color Palette Management, Web fonts, CSS new features, CSS Auto Prefixing

AndreaTino

#allrightsreserved #2015 #creativecommons #cc4.0 #attribution #noncommercial #sharealike #international

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!

JAVASCRIPT AND CSS ARE WEB’S ASSEMBLYThe 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.typescriptlang.org

CoffeeScript

http://coffeescript.org

A developer on CSS

“CSS is the worst thing ever created”

New abstractionsDo 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.

CONSTRAINTS NEEDEDMy 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 limitsThese 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.

My thoughts on thisTHE WORLD AROUND JAVASCRIPTTools for a better Javascript development experience

2

DISCOVERING TYPESCRIPTMicrosoft’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.typescriptlang.org/Playground

Handbook

http://www.typescriptlang.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.

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 browserA 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.

BROWSER JAVASCRIPT CONSOLE APIDebugging 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/hh772173%28v=vs.85%29.aspx

Firefox’s console API ref.

http://developer.mozilla.org/en-US/docs/Tools/Browser_Console

Accessing the consoleAlthought 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.

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/API/MutationObserver

Observing changesThis 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.

PROFILING JAVASCRIPTWhat 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/dn255003%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 deepChrome 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 leaksIE 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.

EVENT AWARENESSIn 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/dn255003%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 EventThis 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 monitorChrome 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);

TRACKING EVENTS: DIYInstead 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 libraryCreate a separate js file and put there the function. This file must be included as LAST library in your web application.

2. Override subscriptionOverride event subscription functions.

HTMLElement.prototype.addEventListener = function(type,listener,useCapture) {...};HTMLElement.prototype.removeEventListener = function(type,listener,useCapture) {...};

3. Implement logging logicLog 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

My thoughts on thisTOWARDS A BETTER STYLING EXPERIENCEWhat the world out there can offer to improve styling

web applications with CSS

3

DISCOVERING SASS AND LESSA very useful tool to create better CSS stylesheets

without the chaos of CSS.

3.1

SASS

http://sass-lang.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 CSSSASS 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

TOWARDS OBJECT ORIENTED CSSOO principles applied to CSS or what?

3.2

:( :)

OOCSShttp://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;}

CRAZY PREFIXING SOLVEDOne 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/postcss/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 automaticallyThere 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 STYLUSnpm install -g pleeease-cli

MANAGE YOUR COLOR PALETTESVery 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 professionalsAdobe 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.colourlovers.com/

Color-Hex This provides basic features.

PATTERNS

My thoughts on thisIMPROVING PRODUCTIVITYA miscellaneous of tools on the Web to improve

development experience in general

4

INSPECT HTTP COMMUNICATIONSWhen 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 callsWeb 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

DISCOVERING ADOBE EDGE ANIMATECreating 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/products/animate

Animating like in FlashI 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 :)

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 TestSupport 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!

My thoughts on thisDEVELOPING CROSS PLATFORM HYBRID APPSToday’s most popular tools for creating apps on

different stores with the same code base

5

THE WORLD AROUND HYBRID APPSThe main actors on the stage of cross platform apps

5.1

Cordova

https://cordova.apache.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’ SDKshttps://developer.android.

com/sdk/index.htmlhttps://developer.apple.c

om/xcode/

Specialization

Used to develop

HOW AN HYBRID APP IS BUILTOnce upon a time...

5.2

WebView

Native app

Webview

A mini-browser hosted by apps

From web applicationsHybrid 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.

WHAT CORDOVA DOESActually, 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 appCordova 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

HOW TO CREATE APPS WITH CORDOVAFrom command line, just a few commands and there you

can go.

5.3.2

For Windows

cordova prepare windowscordova compile windows

For Android

cordova prepare androidcordova compile android

For iOS

cordova prepare ioscordova compile ios

Win output

myapp.appx

Android output

myapp.apk

iOS output

myapp.ipa

Configuration

package.json

config.xml

This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

THANK YOUTwitter: @_atinoE-Mail: andry.tino@hotmail.com

The end