SlideShare uma empresa Scribd logo
1 de 69
Baixar para ler offline
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
What I do
•Design php[architect] magazine, books, and
conferences.
•Front end developer- mostly CSS and some
JavaScript
3
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
1998
• HTML3
• Rollovers
• Banners
• Animated Gifs
• php3 Released
6
print(“Hello World”);
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2000
• Flash Explodes in Popularity
• php4 Released
• Javascript still a mess
7
echo “Hello World”;
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2004-2005
• Social Media Begins
• Blogs
• Ajax (the javascript variety) has
entered the lexicon
• PHP5 is released
8
$hello = new HelloWorld;
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2008
• Web Apps
• JS Libraries
• APIs
• Adobe Air (Flash for Desktop)
9
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2010
• Steve Jobs publishes some
“Thoughts on Flash”…
• HTML5 Championed by Apple
10
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2012
• HTML5 Stack embraced by developers and web clients
• Flash’s popularity has plummeted
11
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 12
Current HTML5
API Landscape
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 13
Semantics
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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 &lt;mark&gt; element is used to <mark>highlight</mark> text</p>
The <mark> element is used to highlight text
5.1
8
4
9
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 18
Connectivity
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 22
Offline Functionality
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Offline 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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Offline Functionality
24
indexDB
IndexedDB is a web standard for the storage of significant
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Offline Functionality
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 26
Multimedia
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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>
<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>
34.1
3
3.5
9
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Multimedia
28
<track> and webVTT
The <track> element allows subtitles and chapters. WebVTT is a text track format.
<video width="320" height="240" controls>
<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 file:
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 29
2D/3D Graphics
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
2D/3D Graphics
30
The <canvas> element
Allows for on-the-fly 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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 34
Performance and Integration
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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");
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 36
History API
Allows the manipulation of the browser history. This is especially useful for pages loading
interactively new information.
Performance and Integration
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;
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 37
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.
Performance and Integration
8
31
38
8
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true">
This text can be edited by the user.
</div>
</body>
</html>
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 38
requestAnimationFrame
Allows control of animations rendering to obtain optimal performance.
Performance and Integration
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);
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 39
Fullscreen API
Controls the usage of the whole screen for a Web page or application, without the browser UI
displayed.
Performance and Integration
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();
}
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 40
Device Access
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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*
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 46
Styling
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Styling
48
Multiple Backgrounds
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one
another with the first 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(/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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Styling
50
Animation
Using CSS Transitions to animate between different 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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Styling
51
Multiple columns within a single element
In order to improve the flexibility 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 officia deserunt
mollit anim id est laborum
becomes
8*
43*
39*
10
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 52
Modern
Development
Frameworks,
Libraries, and
Utilities
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 53
JavaScript
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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-trafficked sites on the Web.
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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.
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 58
CSS Preprocessors
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
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);
}
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
CSS Preprocessors
62
Comparison
A great comparison chart for the features of SASS, LESS and Stylus is located at

http://csspre.com/compare/
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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-first web sites.
•Foundation

A family of responsive front-end frameworks that make it easy to design
responsive websites.
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
•Bower works by fetching and installing
packages from all over
•npm (Node[JS] Package Manager)
64
Package Managers
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
•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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
•Koala compiler for LESS, Sass/Compass, and
CoffeeScript
•Compass Sass authoring and compiling app
•Scout Sass compiler
66
Open Source GUI Compiler Apps
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
•CodeKit universal compiler and
Package Manager (via Bower). 

Mac only.
•PrePros compiler for LESS, Sass,
Compass, Stylus, Jade
67
For-Pay GUI Compiler Apps
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
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
News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015
Благодаря
Kevin Bruce

twitter @kevinbruce
Don’t forget to rate my talk

https://joind.in/talk/view/14865
69
Thanks, BulgariaPHP!

Mais conteúdo relacionado

Mais procurados

Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchivePaul Calvano
 
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...Vadym Kazulkin
 
Full-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJSFull-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJSVMware Tanzu
 
Why your APIs should fly first class
Why your APIs should fly first classWhy your APIs should fly first class
Why your APIs should fly first classLibbySchulze
 
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...Perficient, Inc.
 
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...VMware Tanzu
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
Ten Battle-Tested Tips for Atlassian Connect Add-ons
Ten Battle-Tested Tips for Atlassian Connect Add-onsTen Battle-Tested Tips for Atlassian Connect Add-ons
Ten Battle-Tested Tips for Atlassian Connect Add-onsAtlassian
 
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"Daniel Bryant
 
MWLUG - Universal Java
MWLUG  -  Universal JavaMWLUG  -  Universal Java
MWLUG - Universal JavaPhilippe Riand
 
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018Paul Calvano
 
Out of the Blue - the Workflow in Bluemix Development
Out of the Blue - the Workflow in Bluemix DevelopmentOut of the Blue - the Workflow in Bluemix Development
Out of the Blue - the Workflow in Bluemix DevelopmentOliver Busse
 
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And DxlBp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxldominion
 
How to Build a Better JIRA Add-on
How to Build a Better JIRA Add-onHow to Build a Better JIRA Add-on
How to Build a Better JIRA Add-onAtlassian
 
Hnd201 Building Ibm Lotus Domino Applications With Ajax Plugins
Hnd201 Building Ibm Lotus Domino Applications With Ajax PluginsHnd201 Building Ibm Lotus Domino Applications With Ajax Plugins
Hnd201 Building Ibm Lotus Domino Applications With Ajax Pluginsdominion
 
Implementing Certificate Based Authentication for HCL Traveler Access - Enga...
 Implementing Certificate Based Authentication for HCL Traveler Access - Enga... Implementing Certificate Based Authentication for HCL Traveler Access - Enga...
Implementing Certificate Based Authentication for HCL Traveler Access - Enga...Milan Matejic
 
Cloud Native Java with Spring Cloud Services
Cloud Native Java with Spring Cloud ServicesCloud Native Java with Spring Cloud Services
Cloud Native Java with Spring Cloud ServicesChris Sterling
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and PantheonPantheon
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastAtlassian
 

Mais procurados (20)

Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP Archive
 
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
 
Full-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJSFull-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJS
 
Why your APIs should fly first class
Why your APIs should fly first classWhy your APIs should fly first class
Why your APIs should fly first class
 
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
 
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...
Creating Polyglot Communication Between Kubernetes Clusters and Legacy System...
 
Serverless Spring
Serverless SpringServerless Spring
Serverless Spring
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Ten Battle-Tested Tips for Atlassian Connect Add-ons
Ten Battle-Tested Tips for Atlassian Connect Add-onsTen Battle-Tested Tips for Atlassian Connect Add-ons
Ten Battle-Tested Tips for Atlassian Connect Add-ons
 
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"
CNCF Webinar Series: "Creating an Effective Developer Experience on Kubernetes"
 
MWLUG - Universal Java
MWLUG  -  Universal JavaMWLUG  -  Universal Java
MWLUG - Universal Java
 
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
Common Traits of High Performing Websites, WebPerfDays Amsterdam 07-Nov-2018
 
Out of the Blue - the Workflow in Bluemix Development
Out of the Blue - the Workflow in Bluemix DevelopmentOut of the Blue - the Workflow in Bluemix Development
Out of the Blue - the Workflow in Bluemix Development
 
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And DxlBp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl
 
How to Build a Better JIRA Add-on
How to Build a Better JIRA Add-onHow to Build a Better JIRA Add-on
How to Build a Better JIRA Add-on
 
Hnd201 Building Ibm Lotus Domino Applications With Ajax Plugins
Hnd201 Building Ibm Lotus Domino Applications With Ajax PluginsHnd201 Building Ibm Lotus Domino Applications With Ajax Plugins
Hnd201 Building Ibm Lotus Domino Applications With Ajax Plugins
 
Implementing Certificate Based Authentication for HCL Traveler Access - Enga...
 Implementing Certificate Based Authentication for HCL Traveler Access - Enga... Implementing Certificate Based Authentication for HCL Traveler Access - Enga...
Implementing Certificate Based Authentication for HCL Traveler Access - Enga...
 
Cloud Native Java with Spring Cloud Services
Cloud Native Java with Spring Cloud ServicesCloud Native Java with Spring Cloud Services
Cloud Native Java with Spring Cloud Services
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
 

Destaque

New Bandit Cab Legislation
New Bandit Cab LegislationNew Bandit Cab Legislation
New Bandit Cab Legislationstephanieclai
 
Html per bibliotecari
Html per bibliotecariHtml per bibliotecari
Html per bibliotecariAndrea Spila
 
User Experience deliverables
User Experience deliverablesUser Experience deliverables
User Experience deliverableshamutal
 
G4 Group 28
G4 Group 28G4 Group 28
G4 Group 28chiking1
 
A Safety And Compliance Model 2010 Gew
A Safety And Compliance Model 2010 GewA Safety And Compliance Model 2010 Gew
A Safety And Compliance Model 2010 GewGeorge Wendleton
 
Roll Over Power Point Advanced Edu Safety Gew 6 10 09
Roll Over Power Point Advanced Edu Safety Gew 6 10 09Roll Over Power Point Advanced Edu Safety Gew 6 10 09
Roll Over Power Point Advanced Edu Safety Gew 6 10 09George Wendleton
 
Creating web APIs with apigility
Creating web APIs with apigilityCreating web APIs with apigility
Creating web APIs with apigilityKaloyan Raev
 
Accidental professional
Accidental professionalAccidental professional
Accidental professionalAdam Culp
 
Clean application development tutorial
Clean application development tutorialClean application development tutorial
Clean application development tutorialAdam Culp
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy CodeAdam Culp
 
It's not tools, Stupid
It's not tools, StupidIt's not tools, Stupid
It's not tools, Stupidke4qqq
 
Performance schema in_my_sql_5.6_pluk2013
Performance schema in_my_sql_5.6_pluk2013Performance schema in_my_sql_5.6_pluk2013
Performance schema in_my_sql_5.6_pluk2013Valeriy Kravchuk
 
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...DataStax Academy
 
Distributions from the view a package
Distributions from the view a packageDistributions from the view a package
Distributions from the view a packageColin Charles
 
Enterprise Social Search
Enterprise Social SearchEnterprise Social Search
Enterprise Social SearchElium
 
Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015Colin O'Dell
 
Data massage: How databases have been scaled from one to one million nodes
Data massage: How databases have been scaled from one to one million nodesData massage: How databases have been scaled from one to one million nodes
Data massage: How databases have been scaled from one to one million nodesUlf Wendel
 
More on gdb for my sql db as (fosdem 2016)
More on gdb for my sql db as (fosdem 2016)More on gdb for my sql db as (fosdem 2016)
More on gdb for my sql db as (fosdem 2016)Valeriy Kravchuk
 

Destaque (20)

New Bandit Cab Legislation
New Bandit Cab LegislationNew Bandit Cab Legislation
New Bandit Cab Legislation
 
Html per bibliotecari
Html per bibliotecariHtml per bibliotecari
Html per bibliotecari
 
User Experience deliverables
User Experience deliverablesUser Experience deliverables
User Experience deliverables
 
G4 Group 28
G4 Group 28G4 Group 28
G4 Group 28
 
A Safety And Compliance Model 2010 Gew
A Safety And Compliance Model 2010 GewA Safety And Compliance Model 2010 Gew
A Safety And Compliance Model 2010 Gew
 
Roll Over Power Point Advanced Edu Safety Gew 6 10 09
Roll Over Power Point Advanced Edu Safety Gew 6 10 09Roll Over Power Point Advanced Edu Safety Gew 6 10 09
Roll Over Power Point Advanced Edu Safety Gew 6 10 09
 
Creating web APIs with apigility
Creating web APIs with apigilityCreating web APIs with apigility
Creating web APIs with apigility
 
Accidental professional
Accidental professionalAccidental professional
Accidental professional
 
Clean application development tutorial
Clean application development tutorialClean application development tutorial
Clean application development tutorial
 
Create, test, secure, repeat
Create, test, secure, repeatCreate, test, secure, repeat
Create, test, secure, repeat
 
Your code are my tests
Your code are my testsYour code are my tests
Your code are my tests
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy Code
 
It's not tools, Stupid
It's not tools, StupidIt's not tools, Stupid
It's not tools, Stupid
 
Performance schema in_my_sql_5.6_pluk2013
Performance schema in_my_sql_5.6_pluk2013Performance schema in_my_sql_5.6_pluk2013
Performance schema in_my_sql_5.6_pluk2013
 
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...
C* Summit 2013: Data Modelers Still Have Jobs - Adjusting For the NoSQL Envir...
 
Distributions from the view a package
Distributions from the view a packageDistributions from the view a package
Distributions from the view a package
 
Enterprise Social Search
Enterprise Social SearchEnterprise Social Search
Enterprise Social Search
 
Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015Debugging Effectively - php[world] 2015
Debugging Effectively - php[world] 2015
 
Data massage: How databases have been scaled from one to one million nodes
Data massage: How databases have been scaled from one to one million nodesData massage: How databases have been scaled from one to one million nodes
Data massage: How databases have been scaled from one to one million nodes
 
More on gdb for my sql db as (fosdem 2016)
More on gdb for my sql db as (fosdem 2016)More on gdb for my sql db as (fosdem 2016)
More on gdb for my sql db as (fosdem 2016)
 

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

HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...Beat Signer
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010Patrick Lauke
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalHimanshu Mendiratta
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Patrick Lauke
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008Caleb Jenkins
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010Patrick Lauke
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCMayflower GmbH
 
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDESAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDEMarkus Van Kempen
 
Silverlight 4 @ MSDN Live
Silverlight 4 @ MSDN LiveSilverlight 4 @ MSDN Live
Silverlight 4 @ MSDN Livegoeran
 
Introduction To Silverlight and Prism
Introduction To Silverlight and PrismIntroduction To Silverlight and Prism
Introduction To Silverlight and Prismtombeuckelaere
 
MCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam BlueprintMCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam BlueprintJeff Chu
 
Employee Info Starter Kit
Employee Info Starter KitEmployee Info Starter Kit
Employee Info Starter Kitjoycsc
 
Building a Bank with Go
Building a Bank with GoBuilding a Bank with Go
Building a Bank with GoC4Media
 
Lessons learned using Firebase in Production
Lessons learned using Firebase in ProductionLessons learned using Firebase in Production
Lessons learned using Firebase in ProductionMaik Buchmeyer
 
HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 BeMyApp
 

Semelhante a News From the Front Lines - an update on Front-End Tech (20)

HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDESAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
 
Silverlight 4 @ MSDN Live
Silverlight 4 @ MSDN LiveSilverlight 4 @ MSDN Live
Silverlight 4 @ MSDN Live
 
Introduction To Silverlight and Prism
Introduction To Silverlight and PrismIntroduction To Silverlight and Prism
Introduction To Silverlight and Prism
 
MCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam BlueprintMCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam Blueprint
 
Employee Info Starter Kit
Employee Info Starter KitEmployee Info Starter Kit
Employee Info Starter Kit
 
Building a Bank with Go
Building a Bank with GoBuilding a Bank with Go
Building a Bank with Go
 
Lessons learned using Firebase in Production
Lessons learned using Firebase in ProductionLessons learned using Firebase in Production
Lessons learned using Firebase in Production
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3 HP Helion European Webinar Series ,Webinar #3
HP Helion European Webinar Series ,Webinar #3
 
Techdays 2011 - Things I will remember
Techdays 2011 - Things I will rememberTechdays 2011 - Things I will remember
Techdays 2011 - Things I will remember
 
Microsoft Silverlight
Microsoft SilverlightMicrosoft Silverlight
Microsoft Silverlight
 

Mais de Kevin Bruce

Design for Developers SunshinePHP 2017
Design for Developers  SunshinePHP 2017Design for Developers  SunshinePHP 2017
Design for Developers SunshinePHP 2017Kevin Bruce
 
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)Kevin Bruce
 
Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Kevin Bruce
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Kevin Bruce
 
Building html5 sites that don't suck
Building html5 sites that don't suck Building html5 sites that don't suck
Building html5 sites that don't suck Kevin Bruce
 
Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5Kevin Bruce
 

Mais de Kevin Bruce (6)

Design for Developers SunshinePHP 2017
Design for Developers  SunshinePHP 2017Design for Developers  SunshinePHP 2017
Design for Developers SunshinePHP 2017
 
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)
I Can Magazine- and YOU CAN, TOO! (A Case Study of a Boutique Designer)
 
Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
Building html5 sites that don't suck
Building html5 sites that don't suck Building html5 sites that don't suck
Building html5 sites that don't suck
 
Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5Web Design Trends - the Do's and Don'ts of using HTML5
Web Design Trends - the Do's and Don'ts of using HTML5
 

Último

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 

Último (12)

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 

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

  • 1. News From the Front Lines
 an Update on HTML5 and Front-End Tech Kevin Bruce Creative Director php[architect] magazine
  • 2. 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
  • 3. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 What I do •Design php[architect] magazine, books, and conferences. •Front end developer- mostly CSS and some JavaScript 3
  • 4. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 An Update on HTML5 and Front-End Tech 4
  • 5. 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
  • 6. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 1998 • HTML3 • Rollovers • Banners • Animated Gifs • php3 Released 6 print(“Hello World”);
  • 7. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2000 • Flash Explodes in Popularity • php4 Released • Javascript still a mess 7 echo “Hello World”;
  • 8. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2004-2005 • Social Media Begins • Blogs • Ajax (the javascript variety) has entered the lexicon • PHP5 is released 8 $hello = new HelloWorld;
  • 9. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2008 • Web Apps • JS Libraries • APIs • Adobe Air (Flash for Desktop) 9
  • 10. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2010 • Steve Jobs publishes some “Thoughts on Flash”… • HTML5 Championed by Apple 10
  • 11. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2012 • HTML5 Stack embraced by developers and web clients • Flash’s popularity has plummeted 11
  • 12. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 12 Current HTML5 API Landscape
  • 13. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 13 Semantics
  • 14. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 15. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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 &lt;mark&gt; element is used to <mark>highlight</mark> text</p> The <mark> element is used to highlight text 5.1 8 4 9
  • 16. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 17. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 18. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 18 Connectivity
  • 19. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 20. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 21. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 22. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 22 Offline Functionality
  • 23. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Offline 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. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Offline Functionality 24 indexDB IndexedDB is a web standard for the storage of significant 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. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Offline Functionality 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
  • 26. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 26 Multimedia
  • 27. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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> <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> 34.1 3 3.5 9
  • 28. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Multimedia 28 <track> and webVTT The <track> element allows subtitles and chapters. WebVTT is a text track format. <video width="320" height="240" controls> <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 file: 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
  • 29. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 29 2D/3D Graphics
  • 30. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 2D/3D Graphics 30 The <canvas> element Allows for on-the-fly 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
  • 31. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 32. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 33. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 34. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 34 Performance and Integration
  • 35. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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");
  • 36. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 36 History API Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information. Performance and Integration 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;
  • 37. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 37 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. Performance and Integration 8 31 38 8 <!DOCTYPE html> <html> <body> <div contentEditable="true"> This text can be edited by the user. </div> </body> </html>
  • 38. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 38 requestAnimationFrame Allows control of animations rendering to obtain optimal performance. Performance and Integration 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);
  • 39. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 39 Fullscreen API Controls the usage of the whole screen for a Web page or application, without the browser UI displayed. Performance and Integration 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(); }
  • 40. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 40 Device Access
  • 41. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 42. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 43. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 44. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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*
  • 45. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 46. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 46 Styling
  • 47. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 48. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Styling 48 Multiple Backgrounds With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first 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(/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
  • 49. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 50. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Styling 50 Animation Using CSS Transitions to animate between different 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
  • 51. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Styling 51 Multiple columns within a single element In order to improve the flexibility 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 officia deserunt mollit anim id est laborum becomes 8* 43* 39* 10
  • 52. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 52 Modern Development Frameworks, Libraries, and Utilities
  • 53. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 53 JavaScript
  • 54. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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-trafficked sites on the Web.
  • 55. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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.
  • 56. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 57. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 58. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 58 CSS Preprocessors
  • 59. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 60. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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 { -webkit-border-radius: 10px; -moz-border-radius: 10px; 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); }
  • 61. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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 { -webkit-border-radius: 5px; -moz-border-radius: 5px; 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
  • 62. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 CSS Preprocessors 62 Comparison A great comparison chart for the features of SASS, LESS and Stylus is located at
 http://csspre.com/compare/
  • 63. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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-first web sites. •Foundation
 A family of responsive front-end frameworks that make it easy to design responsive websites.
  • 64. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 •Bower works by fetching and installing packages from all over •npm (Node[JS] Package Manager) 64 Package Managers
  • 65. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 •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
  • 66. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 •Koala compiler for LESS, Sass/Compass, and CoffeeScript •Compass Sass authoring and compiling app •Scout Sass compiler 66 Open Source GUI Compiler Apps
  • 67. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 •CodeKit universal compiler and Package Manager (via Bower). 
 Mac only. •PrePros compiler for LESS, Sass, Compass, Stylus, Jade 67 For-Pay GUI Compiler Apps
  • 68. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 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
  • 69. News From the Front Lines - an update on Front-End Tech - Kevin Bruce - BulgariaPHP 2015 - Sept 26th 2015 Благодаря Kevin Bruce
 twitter @kevinbruce Don’t forget to rate my talk
 https://joind.in/talk/view/14865 69 Thanks, BulgariaPHP!