news from the front lines - an update on front-end tech

News From the Front Linesan 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

http://www.html5rocks.com/en/tutorials/webrtc/basics/


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

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

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>

<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


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


2D/3D Graphics


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


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


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


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

becomes8*

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-trafficked 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

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 athttp://csspre.com/compare/

http://csspre.com/compare/


Website Frameworks

63

•HTML5 Boilerplate A front-end template for building fast, robust, and adaptable web apps or sites.

•BootstrapEasily the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

•FoundationA 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 CoffeeScript

•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-comparisonandhttps://www.lullabot.com/articles/choosing-the-right-javascript-framework-for-the-job

68

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

http://caniuse.com

https://www.airpair.com/js/javascript-framework-comparison

https://www.lullabot.com/articles/choosing-the-right-javascript-framework-for-the-job


Благодаря

Kevin Bruce twitter @kevinbruce

Don’t forget to rate my talk https://joind.in/talk/view/14865

69

Thanks, BulgariaPHP!

https://joind.in/talk/view/14865

https://joind.in/talk/view/6494/




































































































































news from the front lines - an update on front-end tech

Internet