News From the Front Lines - an update on Front-End Tech

News From the Front Lines 
an Update on HTML5 and Front-End Tech
Kevin Bruce
Creative Director
php[architect] magazine

News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Who I Am
•Designer
•Developer
•Co-Founder of musketeers.me
2

What I do
•Design php[architect] magazine, books, and
conferences.
•Front end developer- mostly CSS and some
JavaScript
3

An Update on HTML5
and Front-End Tech
4

News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 5
Front-End Web
Development.
Some historical
context

1998
• HTML3
• Rollovers
• Banners
• Animated Gifs
• php3 Released
6
print(“Hello World”);

2000
• Flash Explodes in Popularity
• php4 Released
• Javascript still a mess
7
echo “Hello World”;

2004-2005
• Social Media Begins
• Blogs
• Ajax (the javascript variety) has
entered the lexicon
• PHP5 is released
8
$hello = new HelloWorld;

2008
• Web Apps
• JS Libraries
• APIs
• Adobe Air (Flash for Desktop)
9

2010
• Steve Jobs publishes some
“Thoughts on Flash”…
• HTML5 Championed by Apple
10

2012
• HTML5 Stack embraced by developers and web clients
• Flash’s popularity has plummeted
11

Current HTML5
API Landscape

Semantics

Semantics
14
More Meaningful Tags
Outlining and sectioning elements in HTML5: <section>, <article>, <nav>, <header>, <footer>
and <aside>.
<article>
<header>
<h1>Mystery</h1>
</header>
<section>
<h2>Chapter 1</h2>
<p>It was a dark…</p>
</section>
<aside>
<p>advertising block</p>
</aside>
<section>
<h2>Chapter 2</h2>
<p>It was a dark…</p>
</section>
</article>
4.1
5
4
9

Semantics
15
Semantic Elements
Beside sections, media and forms elements, there are numerous new
elements, like <mark>, <figure>, <figcaption>, <data>, <time>,
<output>, <progress>, or <meter> and <main>, increasing the amount of
valid HTML5 elements.
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="An awesome picture">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p>The <mark> element is used to <mark>highlight</mark> text</p>
The <mark> element is used to highlight text
5.1
8
4
9

Semantics
16
Audio and Video Tags
The <audio> and <video> elements embed and allow the manipulation of
new multimedia content.
Semantics
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.bul.vtt" srclang="bul" label="Bulgarian">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
3.1
3
3.5
9

Semantics
17
iframe enhancements
Using the sandbox, seamless, and srcdoc attributes, authors can now be precise about the
level of security and the wished rendering of an <iframe> element.
<iframe width="400" height=“215" seamless=“seamless” sandbox="allow-same-origin
allow-scripts allow-popups allow-forms” src="https://maps.google.com/maps?…”>
</iframe>
In JavaScript, iframe still complies to the same-origin policy as before. Cross-domain
communication can still be achieved with window.postMessage.
5
1
17
10

Connectivity

Connectivity
19
Web sockets
Allows creating a permanent connection between the page and the server and to exchange
non-HTML data through that means.
var connection = new WebSocket(‘ws://services.example.com/chat', ['soap', 'xmpp']);
// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};
Notice the ws:. This is the new URL schema for WebSocket connections. There is also
wss: for secure WebSocket connection.
5
6
4
X

Connectivity
20
Server Sent Events
Allows a server to push events to a client, rather than the classical paradigm where the server could
send data only in response to a client's request.
var evtSource = new EventSource(“push_demo.php");
var evtSource = new EventSource("//api.example.com/push_demo.php", {
withCredentials: true
});
evtSource.onmessage = function(e) {
var newElement = document.createElement("li");
newElement.innerHTML = "message: " + e.data;
eventList.appendChild(newElement);
}
5
5
6
X

Connectivity
21
WebRTC (Real Time Communication)
This technology, where RTC stands for Real-Time Communication, allows connecting to other
people and controlling videoconferencing directly in the browser, without the need for a plugin
or an external application.
WebRTC is used in various apps like WhatsApp, Facebook Messenger, appear.in and platforms
such as TokBox.
Excellent introduction and how-to:
http://www.html5rocks.com/en/tutorials/webrtc/basics/
Connectivity
X
5
22
X

Ofﬂine Functionality

23
DOM storage
Client-side session and persistent storage allows web applications to store structured data on the client side.
if(!localStorage.getItem('bgcolor')) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
setStyles();
}
function setStyles() {
var currentColor = localStorage.getItem('bgcolor');
document.getElementById('bgcolor').value = currentColor;
htmlElem.style.backgroundColor = '#' + currentColor;
}
4
10.5
3.5
8

24
indexDB
IndexedDB is a web standard for the storage of signiﬁcant
amounts of structured data in the browser and for high
performance searches on this data using indexes.
var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
db = event.target.result;
};
7.1
24
16
10

25
File Access for Web Applications
Support for the new HTML5 File API has been added to Gecko, making it possible for web
applications to access local files selected by the user. This includes support for selecting
multiple files using the <input> of type file HTML element's new multiple attribute. There also
is FileReader.
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
6
7
3.6
10

Multimedia

Multimedia
27
Audio/Video without plugins
The <audio> and <video> elements embed and allow the manipulation of new multimedia
content.
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.bul.vtt" srclang="bul" label="Bulgarian">
</audio>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
34.1
3
3.5
9

Multimedia
28
<track> and webVTT
The <track> element allows subtitles and chapters. WebVTT is a text track format.
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_bul.vtt" kind="subtitles" srclang="bul" label="Bulgarian">
</video>
in the subtitles_bul.vtt ﬁle:
WEBVTT
1
00:00:22.230 --> 00:00:24.606
Koĭ misli Bŭlgariya PHP e strakhotno ?
2
00:00:30.739 --> 00:00:34.074
Clap ako obichate Bŭlgariya PHP !
6
23
31
10

2D/3D Graphics

2D/3D Graphics
30
The <canvas> element
Allows for on-the-ﬂy creation and rendering of 2D and 3D images within a webpage with
javascript and webGL (for 3D).
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
tx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
2
1
12
9

2D/3D Graphics
31
Text API for <canvas>
The HTML5 text API is now supported by <canvas> elements.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
5
1
3.5
9

2D/3D Graphics
32
webGL- openGL for <canvas>
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL
ES 2.0 that can be used in HTML5 <canvas> elements.
5.1
9
4
11

2D/3D Graphics
33
SVG- embedded vector graphics for HTML
An XML-based format of vector images that can directly be embedded in the HTML.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="8" fill="orange" />
</svg>
8
31
38
9

Performance and Integration

35
Web Workers
Allows delegation of JavaScript evaluation to background threads, allowing these activities to
prevent slowing down interactive events.
4
4
3.5
10
var worker = new Worker("worker.js");
// Watch for messages from the worker
worker.onmessage = function(e){
// The message from the client:
e.data
};

worker.postMessage("start");

History API
Allows the manipulation of the browser history. This is especially useful for pages loading
interactively new information.
5
5
4
10
window.history.back();
window.history.forward();
//go() allows you to move to a certain point in history
window.history.go(-1);
window.history.go(1);
//determine the number of pages in the history stack
var numberOfEntries = window.history.length;

The contentEditable Attribute
In HTML5 any element can be editable. Using some JavaScript event handlers you can transform
your web page into a full and fast rich-text editor.
8
31
38
8
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true">
This text can be edited by the user.
</div>
</body>
</html>

requestAnimationFrame
Allows control of animations rendering to obtain optimal performance.
8
31
38
10
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);

Fullscreen API
Controls the usage of the whole screen for a Web page or application, without the browser UI
displayed.
5*
15*
9*
11*
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}

Device Access

Device Access
41
Camera API
Allows using, manipulating, and storing an image from the computer's camera.
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
X
45*
39
X

Device Access
42
Touch events*
Handlers to react to events created by a user pressing touch screens.
*Currently, only Chrome and Edge support
function startup() {
var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchleave", handleEnd, false);
el.addEventListener("touchmove", handleMove, false);
log("initialized.");
}
X
31
X
X

Device Access
43
Geolocation
Let browsers locate the position of the user using geolocation.
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
8
31
38
9

Device Access
44
Device orientation*
Get the information when the device on which the browser runs changes orientation. This can
be used as an input device (e.g., to make games that react to the position of the device) or to
adapt the layout of a page to the orientation of the screen (portrait or landscape).
*Currently, only Chrome and Firefox support
window.addEventListener("deviceorientation", handleOrientation, true);
X
43*
38*
11*

Device Access
45
Pointer lock API
Allows locking the pointer to the content, so games and similar application don't lose focus
when the pointer reaches the window limit.
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock ||
canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
X
31
38
X

Styling

Styling
47
Box and Text Shadow
You can put a shadow to a box, using box-shadow and multiple backgrounds can be set.
.box {
background-color: #DC592B;
width: 200px;
height: 200px;
box-shadow: 10px 10px 5px #000000;
}
8
31
38
9

Styling
48
Multiple Backgrounds
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one
another with the ﬁrst background you provide on top and the last background listed in the
back. Only the last background can include a background color.
.multi_bg_example {
background-color:#000000;
width:400px;
height:300px;
border-radius:12px;
background-image : url(/https/www.slideshare.net/assets/images/logo.png),
url(/assets/images/pye.png);
background-repeat : no-repeat,
no-repeat;
background-position: top left,
bottom 10px right 10px;
}
8
31
38
9

Styling
49
Border Images
Not only it is now possible to use images to style borders, using border-image and its
associated longhand properties.
#repeat {
border: 15px solid transparent;
padding: 10px 20px;
border-image:url("/assets/images/border.png") 30 30 repeat;
}
<div id="repeat">The image is tiled (repeated) to fill the area.</div>8
31
38
11

Styling
50
Animation
Using CSS Transitions to animate between diﬀerent states or using CSS Animations to animate parts of the page without a
triggering event, you can now control mobile elements on your page.
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
8
31
38
10

Styling
51
Multiple columns within a single element
In order to improve the ﬂexibility of designs, two new layouts have been added: the CSS
multi-column
<section style=“columns-count:3”>
Lorem ipsum dolor sit aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum
<section>
Lorem ipsum dolor sit aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation
ullamco amet, consectetur
adipisicing elit, sed do
laboris nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in
reprehenderit in voluptate
velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat non proident, sunt
in culpa qui oﬃcia deserunt
mollit anim id est laborum
becomes
8*
43*
39*
10

Modern
Development
Frameworks,
Libraries, and
Utilities

JavaScript

JavaScript
54
jQuery library
Born in 2005, jQuery stood out as the prominent javascript framework.
jQuery is the most popular JavaScript library in use todayBorn in 2005 with installation on 65%
of the top 10 million highest-traﬃcked sites on the Web.

JavaScript
55
AngularJS Framework
beginning life in 2009 as part of the commercial product, GetAngular, it was later backed by
Google as the Open Source framework AngularJS.
Features:
• two-way data bindings
• dependency injection
• easy-to-test code
• extending the HTML dialect by using directives.

JavaScript
56
backboneJS Framework
Born in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC
frameworks such as ExtJS.
Features:
• models with key-value binding and custom events
• collections with a rich API of enumerable functions
• views with declarative event handling
• connects to any API over a RESTful JSON interface

JavaScript
57
Ember Framework
Starting life as the SproutCore MVC framework, originally developed by SproutIt and later by
Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and
Ruby on Rails projects.*
Features:
• Complete developer stack, including Ember CLI
• provides a standard application structure and build pipeline
• pluggable architecture
* Referenced from Uri Shaked’s article “AngularJS vs. Backbone.js vs. Ember.js”
https://www.airpair.com/js/javascript-framework-comparison

CSS Preprocessors

CSS Preprocessors
59
Sass (Syntactically Awesome Stylesheets)
A scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the
scripting language itself.
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Compiles to
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 10%)
.border
padding: $margin/2
margin: $margin/2
border-color: $blue

CSS Preprocessors
60
LESS
Created before SASS, LESS is a dynamic style sheet language that can be compiled into
Cascading Style Sheets (CSS) and run on the client-side or server-side.
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#footer {
border-radius: 10px;
}
Compiles to
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

CSS Preprocessors
61
Stylus
Like LESS and SASS, features include extending classes, creating mixins (functions), importing
stylesheets, and setting variables but aims to have less cluttered code.
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
border-radius: 5px;
}
Compiles to
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px

CSS Preprocessors
62
Comparison
A great comparison chart for the features of SASS, LESS and Stylus is located at 
http://csspre.com/compare/

Website Frameworks
63
•HTML5 Boilerplate  
A front-end template for building fast, robust, and adaptable web apps or
sites.
•Bootstrap 
Easily the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-ﬁrst web sites.
•Foundation 
A family of responsive front-end frameworks that make it easy to design
responsive websites.

•Bower works by fetching and installing
packages from all over
•npm (Node[JS] Package Manager)
64
Package Managers

•Yeoman workflow manager  
(uses Grunt/Gulp and Bower/npm to carry
out tasks)
•Grunt for repetitive tasks like minification,
compilation, unit testing, linting
•Gulp was created after Grunt as an attempt
to address issues
65
Workflow Systems

•Koala compiler for LESS, Sass/Compass, and
CoﬀeeScript
•Compass Sass authoring and compiling app
•Scout Sass compiler
66
Open Source GUI Compiler Apps

•CodeKit universal compiler and
Package Manager (via Bower).  
Mac only.
•PrePros compiler for LESS, Sass,
Compass, Stylus, Jade
67
For-Pay GUI Compiler Apps

Resources
• HTML5 API 
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
• Browser Support Checker 
http://caniuse.com
• Javascript Framework Comparisons 
https://www.airpair.com/js/javascript-framework-comparison 
and 
https://www.lullabot.com/articles/choosing-the-right-javascript-
framework-for-the-job
68

Благодаря
Kevin Bruce 
twitter @kevinbruce
Don’t forget to rate my talk 
https://joind.in/talk/view/14865
69
Thanks, BulgariaPHP!

News From the Front Lines - an update on Front-End Tech

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to News From the Front Lines - an update on Front-End Tech (20)

More from Kevin Bruce (6)

Recently uploaded (20)

News From the Front Lines - an update on Front-End Tech