HTML5 & CSS3 Genius Guide Volume 3

FREE RESOURCES

NEW

Includes fonts, templates and videos

Volume 3

HTML5 CSS3 The professional guide to programming for web design and development

www.fullengineeringbook.net

#FCD905

Perfect responsive design • Master animation • Create apps


A comprehensive masterclass in becoming an instant expert

Welcome to Making a website is something that just isn’t possible without the aid of HTML. It is the basic framework of the World Wide Web and we rely on CSS to make the styling consistent and easier to manage. In this new volume we ofer you the tools you need to become a web design master. Within these pages you will learn the art of responsive design and how it will only serve to make your websites more user friendly, therefore more efective. Add pop-up modal boxes, integrate payments and incorporate a plethora of dynamic animations that will add extra pizazz to your designs. Take inspiration from the experts and recreate some of their more ingenious ideas and ind out what works for you and your designs. You also have access to FileSilo, where there is a wealth of free content online, just waiting for you to download and use, as well as hours of video tuition to aid you in your completion of the tutorials inside. Enjoy the book!



HTML5

CSS3

Imagine Publishing Ltd Richmond House 33 Richmond Hill Bournemouth Dorset BH2 6EZ +44 (0) 1202 586200 Website: www.imagine-publishing.co.uk Twitter: @Books_Imagine Facebook: www.facebook.com/ImagineBookazines

www.fullengineeringbook.net Publishing Director Aaron Asadi Head of Design Ross Andrews

Edited by Jen Neal & Fiona Hudson Senior Art Editor Greg Whitaker Assistant Designer Steve Dacombe Printed by William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT Distributed in the UK, Eire & the Rest of the World by Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU Tel 0203 787 9060 www.marketforce.co.uk Distributed in Australia by Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South Wales 2000, Australia Tel +61 2 8667 5288 Disclaimer The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this bookazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review. Although the bookazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This bookazine is fully independent and not affiliated in any way with the companies mentioned herein. HTML5 & CSS3 Genius Guide Volume 3 © 2016 Imagine Publishing Ltd ISBN 978 1785 462 603

Part of the

bookazine series

Contents 18

VR + THE WEB

92

Get to grips with how VR technology is revolutionising the way we think about the future of the internet

Tips & Techniques

Front-end

10

52

20 HTML5 tools you need now

18 VR & the web 26 Integrate payments with the

Responsive design decoded

60 Is your content king? 66 Design aspect ratio-based layouts


Stripe API

30 Master responsive image

with HTML and CSS

70 Make dynamic graphics with the

techniques

34

Create animated infographics with Snap.svg

38 Build with AngularJS 42 Develop apps with Facebook’s React Native framework

46 What’s new with Modernizr?

26

34

6 HTML5 Mac OS&XCSS3 Genius Genius GuideGuide

74 76

88 Create an interactive mobile 3D interface

p5.js library

92 Assemble full-screen navigation

Code 3D zoom effects with CSS

Developer

Form pop-up modal boxes with pure CSS

80 Build offline web apps with Service Workers

84 Model a unique mobile 3D interface

70

98 Be a jQuery code master 106 25 pro plugins 116 Produce a picture gallery with jQuery

HTML5 & CSS3

Genius Guide 132

60

120 Code validation into forms with

146 Create split-screen sliding panel

160 Code on-scroll image animations

www.fullengineeringbook.net ngMessages

124 Make drums with the Web Audio API

128 Get free web hosting with GitHub Pages

132 Manage JS with asynchronous tasks

effects

148 Animate an SVG with HTML and CSS

150 Code animated sliding panels on scroll

152 Make a resizable sliding panel for your content

Special effects

154 Sync animations to audio and

138 HTML & CSS animation

158 Make a draggable fading effect

98

164

video with Popcorn.js

with CSS

162 Add slide-up titles on page load using CSS

164 Animate typography and text effects

168 Create a 3D navigation menu with HTML

172 Make a screen shrink on scroll 174 Create scrolling text with colour change

154

HTML5 Mac & CSS3 OS X Genius Guide 7

Tips & Techniques


8 HTML5 & CSS3 Genius Guide

10

20 HTML5 tools you need now Master these essential APIs and specifications

18

VR & the web Understand how VR is set to revolutionise the web

26

Integrate payments with the Stripe API Install a payment gateway for taking cash online

30

Master responsive image techniques Control image presentation across different clients

34

Create animated infographics with Snap.svg Use animations to display information visually

38

Build with AngularJS Start building web apps with the framework

www.fullengineeringbook.net 42

Develop apps with Facebook’s React Native framework Build an image catalogue app with Facebook React

46

What’s new with Modernizr? Learn about the features of the latest release

HTML5 & CSS3 Genius Guide 9

Tips & Techniques

20 www.fullengineeringbook.net

tools you need now Get learning with these essential APIs and specifications for contemporary practices 10 HTML5 & CSS3 Genius Guide

HTML5 & CSS3

Genius Guide

1

Web Speech API

2 Text to speech API

A TECHNOLOGY IN ITS INFANCY, BUT WITH THE POTENTIAL TO INTRODUCE ENTIRELY NEW MODES OF EXPERIENCE TO THE WEB

WEB SPEECH API’S OTHER HALF

The Web Speech API is an experimental onresult, onerror, and onend. Rather than try to explain technology due to its ever-changing the event-oriented nature of the API, here is a basic specification, which brings voice dictation example of it in action. software to the web. The underlying premise of the API var recog = new window. is to provide capacity for both brief input (think SpeechRecognition(); commands) as well as continuous input (think classic var dict = document. dictation, allowing for pauses). querySelector('#dict'); With a bit of imagination, this feature could begin recog.continuous = true; quite a change in the way that user interfaces are recog.onresult = function(e) { designed on the web. Google and Apple have already e.results.forEach(function(r) { been exploring speech to enhance particular aspects of dict.textContent += r[0].transcript; the user experience in their products with ‘Okay }); Google’ and ‘Hey Siri’. Such facilities on the web will } surely bring new and exciting opportunities. recog.start(); The specification suggests more than a few This code creates a new instance of useful functions such as voice web search, the SpeechRecognition interface. It continuous recognition of open dialog, Target then configures the instance to speech UI present when no visible UI recognise continuous input, which Audience needs to be present and voice This technology will be particularly enables the speaker to pause. The activity detection (dvcs.w3.org/hg/ useful for people with disabilities instance is then started. When the speech-api/raw-file/tip/ such as visual impairment, and results are determined as the webspeechapi.html#use_cases). generally make the web an speaker talks, the textarea is Of course there will be some even more accessible appended to with the most likely privacy concerns with any API that place. correct result. potentially enables a device to capture URL: bit.ly/1WsQh1u and store local ambience for later. The specification sets out two mandatory conditions for vendors to follow, which paraphrased are: “User agents can only start recording speech with explicit and VOICE WEB SEARCH informed consent… User agents must provide obvious No doubt when this API becomes indications when speech is being recorded. This commonplace there will be clients requesting interface element must also allow users to cancel the their own version of ‘Okay Google’. current speech session.” CONTINUOUS RECOGNITION OF In terms of implementation, like most APIs of this OPEN DIALOG type, the interface is event-driven. SpeechRecognition This one really depends on who is using it. exposes four evented functions, which are: onstart, Hook it up to an email client and send ten times more email!

The flip side of speech-to-text is text-to-speech. It really is just like the ‘say’ command on any Mac OS X machine. Of course because this API is a web technology, it can and should be put to better use. Most of the legwork is done by Web Speech API’s SpeechSynthesis interface, which works in a similar manner to SpeechRecognition, where evented functions are exposed along with the speech function aptly named ‘speak’. Check out a stripped-down example of what it can look like in action below:

var s = new SpeechSynthesisUtterance(); s.text = 'I like cat food'; s.lang = 'en-US'; window.speechSynthesis.speak(s); A new instance of the SpeechSynthesisUtterance interface is instantiated. The instance then has the text defined – the string the computer is going to speak, along with a language. The final line passes the configured instance to the speak function and the computer begins to talk. Unlike the SpeechRecognition API, SpeechSynthesis is more widely supported, which makes it a real option provided that the target market is on iOS’s Safari. This is quite handy for any hands-free mobile applications, such as turn-by-turn directions, or maybe even a step-by-step recipe app.

www.fullengineeringbook.net Scenarios

Browser Support CHROME CHROME FOR ANDROID FIREFOX SAFARI EDGE/IE IOS

“

SPEECH UI PRESENT WHEN NO VISIBLE UI NEEDS TO BE PRESENT 25+ 44+ N/A N/A N/A N/A

This technology could unlock an entirely new market of even more minimal writing.

VOICE ACTIVITY DETECTION There have got to be some interesting opportunities when general voice activity levels are paired with HTML5 Canvas.

Google and Apple have already been exploring speech to enhance particular aspects of the user experience

”

URL: bit.ly/1L5Hbpj

Scenarios LISTENABLE BLOG POSTS A great feature for the visually impaired, blog posts that people can listen to would make for a really compelling experience.

TURN-BY-TURN DIRECTIONS Put your phone in your pocket and you can then be audibly guided to your destination by the browser’s voice.

STEP-BY-STEP RECIPES Sticky marks on touchscreens while weighing out ingredients could be a thing of the past.


43+ 44+ N/A 8+ N/A 7.1+


Tips & Techniques

3

6

WebSockets API

CAPTURE VIDEO/AUDIO FROM DEVICES

FIRST THERE WAS HTTP, THEN ALONG CAME AJAX. NOW, THERE IS WEBSOCKETS WebSockets is a fundamentally diferent concept to HTTP and AJAX. Instead of the client requesting resources and the server responding with them, the server and client agree to maintain a connection, called a socket. At any time, the server and client can start sending each other data across this socket, inherently avoiding the overhead that comes with HTTP. The lean nature of this protocol lends itself to latency-critical applications and real-time experiences. WebSocket-driven applications often require large numbers of persistent connections, something that traditional server-side technologies tend to be bad at facilitating. Server-side architectures that allow for high concurrency on a budget are often favoured – like those that are touted as ‘non-blocking IO’.

URL: mzl.la/1j9X55Q

Tools

Scenarios REAL-TIME PROPERTY UPDATES A forward-thinking estate agent implements real-time property updates, providing an ever-changing map of property to let.

MULTIPLAYER GAMING AND COLLECTIVE EXPERIENCES Any multiplayer game will require low-latency communication between clients and the server. This could apply to other group experiences as well.

REAL-TIME CHAT WebSockets could make a reasonable replacement for the aging IRC, enabling richer media to be used in discussion.

SOCKET.IO SOCKET.IO

Browser Support

Real-time Node.js WebSocket architecture.

CHROME ANDROID FIREFOX SAFARI EDGE/IE IOS

GetUserMedia API

HTML5’s getUserMedia API allows developers to capture media streams from the device – video, audio, and both at the same time. This capability isn’t that exciting on its own, but it gets interesting when paired with other HTML5 technologies. For example, the video stream returned by getUserMedia can be applied locally to a video element. That video element can be drawn to HTML5 Canvas, which in turn can be turned into a dataURL and then into a blob, ready to be sent across a WebSocket to all other connected clients. The nice thing about being able to bring the video stream into HTML5 Canvas is it allows for manipulation of the image before it gets sent to the server. It would be very easy to scale the frames down, run filters over them or even apply advanced efects such as blurring and distortion. GetUserMedia returns a stream of data that can be used locally by HTML5’s video element, like so:

var video = document. querySelector('video'); navigator.getUserMedia({ video: true, audio: true }, function(s) { video.src = window.URL.createObjectURL(s); video.play(); });


TORNADO GITHUB.COM/TORNADOWEB/TORNADO Python networking library and framework.

PLINK DINAHMOELABS.COM/PLINK

31+ 4.4 + 38+ 8+ 10+ 7.1+

Real-time collaborative music-making experience.

4

5

History API

Link Prefetch API

SAVE STATES IN A SINGLE-PAGE WEB APP

PREFETCH NEXT STEPS IN KEY JOURNEYS

This API provides means to manipulate browser history with JavaScript. This isn’t limited to just forward, backward and specific points, it also lets developers add their history events with pushState. History.pushState takes three values: an object associated with the state, a title and then a page URL which will be displayed in the browser’s address bar. The history API is very useful for single-page applications that have diferent states or views that a user may want to navigate between, but it still retains the benefit of XHRs.

The HTML5 Prefetch API is a browser mechanism that prefetches documents before a user manually requests the ones that they are likely to visit in the near future. Prefetching resources like this stop users having to waste time waiting for server response – the largest delay when fetching new pages and assets. Implementing prefetch cunningly can have a vast efect on perceived performance, especially when users are doing repetitive tasks. Prefetching tags appear in the of the page, along with the other metadata relating to the site.

URL: mzl.la/1KzFuKx

URL: mzl.la/1VafzyW

Browser Support CHROME FIREFOX SAFARI


CHROME FIREFOX SAFARI

URL: mzl.la/1iLRLWp

Parameters CONSTRAINTS Takes an object describing the stream constraints, such as width, height, frame rate and more.

SUCCESSCALLBACK If the request for a user’s media was successful, this function is invoked and the stream is passed.

ERRORCALLBACK If the request for media fails due to permissions, or lack of sources, this function is invoked.

Browser Support

Browser Support 31+ 38+ 8+

The DOM is queried for the video element. The script then requests permission to capture video and audio streams via the getUserMedia API. Finally, the stream returned is given to the video element, which begins playback in the browser.

31+ 38+ N/A

CHROME CHROME FOR ANDROID FIREFOX SAFARI EDGE/IE IOS

31+ 44+ 38+ N/A 12+ N/A

HTML5 & CSS3

Genius Guide

The API that is associated with media elements allows for separate media controls in the DOM. Although basic in this example, the feature does enable some interesting aesthetics.

The API provides access to a property called currentTime. This property controls the playback of the media but it will also return the media’s current position.

The API also enables basic properties of the media to be controlled, including playback speed. Here the developer has implemented a bespoke volume control interface.

The MediaElement interface allows the developer to control the playback of media. Here the developer has combined a play/pause as one button rather than having two separate ones.

7 HTML Media API www.fullengineeringbook.net

HTML5 VIDEO AND AUDIO HAVE PHASED OUT FLASH. IT’S TIME TO THINK ABOUT USING EMBEDDED MEDIA MORE CREATIVELY The HTML5 Media API provides a standard JavaScript API for interacting with the HTMLMediaElement interface. HTMLVideoElement and HTMLAudioElement are both children of the HTMLMediaElement and inherit its properties. Media Elements have properties for manipulating the playback of media, including load, play and so on. The scenarios for using this capability at first may seem obvious. Any media that Flash would have been used for before can now be done without browser plugins – but there are other benefits. It’s now easy to combine video and audio with other HTML5 technologies such as Canvas for the production of more engaging and grander interactive experiences. Canvas lets developers manipulate video pixels and apply bespoke efects. Video that’s more integrated with the surrounding webpage is also now possible. The JavaScript interface allows for play buttons to be separate from the traditional video user interface, opening up brand new possibilities for user experience designers to make use of. Incorporating supporting animation to control elements, such as expanding/revealing a video on a button click, is now not only possible but also easy.

var video = document.querySelector('video'); var button = document. querySelector('button'); button.addEventListener('click', play, false); function play() { if(video.paused) { video.play(); } else { video.pause(); } } First, DOM references are made to the video and button elements. Then, a click handler called ‘Play’ is then bound to the button. The play function provides playing and pausing functionality to the video by making use of the HTMLMediaElement API interface. Going on to build more advanced controls that incorporate volume, seeking, playback speed and tracking functions are all possible through the API. What this means is that it’s much easier to bring a visual style or brand to embedded media on the web than it ever has been before. Finally, the media element interface lets developers create autoplaying media, giving rise to silent video as a design element in a webpage – or transparent media.

Scenarios STANDARD VIDEO EMBED Browser support for HTML5 media is so good there really is no excuse for not using it as standard for media embedding.

STANDARD AUDIO EMBED Standard audio embedding is also preferred over plugin-powered solutions, such as Flash or Silverlight.

SILENT VIDEO Use silent video instead of images to capture human emotion and make emotional connections with users.

HYPERREALITY Shoot a video that contains very little movement, but more than a photograph. Hyperreal scenes can bring a page to life.

Browser Support CHROME ANDROID FIREFOX SAFARI EDGE/IE IOS

31+ 4.1+ 38+ 8+ 9+ 7.1+

URL: mzl.la/1NM0jYk


Tips & Techniques

8

Navigation Timing API

9

SMART DECISIONS AND CONNECTIONS

PERFORM ANALYSIS ON LOAD TIMES OF WEB PAGES WITH THIS API Ensuring pages are quick to load is crucial. The Navigation Timing API can gather statistics on page-load performance for developers to analyse. The statistics allow for useful metrics such as the critical render path and identification of slow images. Use snippets in Chrome Developer Tools to store useful functions for pulling metrics out of any page:

interactive, DOM content was loaded and the page had finished loading. URL: mzl.la/1eUB4oS

function criticalRenderPath() { var t = window.performance.timing; // Converting to seconds return { interactiveAt: (t.domInteractive t. domLoading) / 1000, domContentLoaded: (t.domContentLoadedEventStart t. domLoading) / 1000, complete: (t.domComplete t.domLoading) / 1000 } }

Network Information API

Scenarios ANALYSIS OF ANY GIVEN PAGE The navigation timing API should be used as a quick reference to determine the critical render path of any webpage.

COMPARATIVE ANALYSIS Store the performance timing results when conducting a series of improvements as a benchmark for subsequent tests.

URL: mzl.la/1KAJcV4

Browser Support


Long have developers wanted a definitive way to determine what type of connection a user is on so they’re better able to tailor experiences. The Network Information API promises exactly this kind of function capability. This API will allow developers to make subtle but important tweaks to experience, such as loading standard-definition video when a user is on a mobile data connection, as opposed to high definition when they’re on Wi-Fi and are therefore able to load high-quality content better. This distinction can also be efectively used in broader strokes, for example the user may want to send less data to the client for standard XHRs and this is especially useful if they are connected via a mobile data connection.

31+ 4.1+ 38+ 8+ 9+ 9+

CHROME CHROME FOR ANDROID FIREFOX SAFARI EDGE/IE IOS

N/A 44+ N/A N/A N/A N/A


This references the performance.timing metrics, then determines the metrics for each stage in the critical render path to provide stats on when the page was

10 User Timing API

11 Page Visibility API

12 Battery

13 IndexedDB

Status API

STORE DATA IN THE BROWSER

BESPOKE CODE BENCHMARKS

FOR LOST FOCUS IN WEBPAGES

TAILOR FOR BATTERY

The User Timing API is an extension window.performance, enabling developers to mark points in their code and make measurements. User Timing can be used to identify areas of code that are slower than desired. Window.performance.mark lets developers store a high resolution. Window.performance.measure lets developers calculate the elapsed time between recorded marks.

Users often have a bunch of webpages open at once, with only one in focus. The Page Visibility API fires events when a webpage loses focus or returns into focus again, allowing developers to get smart about the experiences on the page that loses focus. This includes pausing streaming media, as well as avoiding unnecessary processing when it comes to continuous animations and even live media.

This API exposes useful battery information. This includes charging, a Boolean indicating whether the device is currently charging; chargingTime, which tells you how long until the battery will be fully charged; dischargingTime, which tells you how long until the battery is depleted and the device puts itself to sleep; and level, which is the current battery level on a scale between 0 and 1.0.

URL: bit.ly/1MIIXwN

URL: mzl.la/1Fu21wh

URL: mzl.la/UlVKw7

Browser Support


31+ 38+ N/A





IndexedDB provides developers a low-level API to persistently store data to a browser. Developers can store data locally first and sync with the remote server when a data connection is available. This can be especially useful when working with large datasets, which should only be transferred over a Wi-Fi connection. Like localStorage, IndexedDB is subject to storage limits and eviction criteria. The mechanisms behind it are complex and vary with the browser too. URL: mzl.la/1y2iyCj

Browser Support 43+ 38+ N/A


31+ 38+ 8+

HTML5 & CSS3

Genius Guide

14 Drag & Drop API USE DRAG AND DROP TO MAKE SORTING, REORDERING AND COLLECTING ITEMS A FAST AND EASY TASK No longer do developers have to rely on third-party } function dragOver(e) { JavaScript UI frameworks like jQuery to enable the if (e.preventDefault) { implementation of drag and drop. The HTML5 e.preventDefault(); drag-and-drop API provides evented functions and } HTML attributes, enabling most elements on any given e.dataTransfer.dropEffect = 'move'; page to be made natively draggable. This means return false; developers can add cheap drag-and-drop functionality to } everyday tasks and applications; previously the function dragEnter(e) { overhead of libraries ensured it wasn’t an this.classList.add('dragging'); option. With a good implementation of } Colliding drag and drop, it should be harder function dragLeave(e) { elements than ever to distinguish web views this.classList. It’s important for users to get from native apps. There are seven remove('dragging'); high-quality visual feedback from events that cover the entire drag } drag-and-drop mechanisms. They lifecycle. Just like mouse events, function drop(e) { should be confident of where these can be bound to elements if (e.stopPropagation) { the item being dropped will using addEventListener. A basic e.stopPropagation(); be placed. implementation of the drag life cycle } would look something like this:

function dragStart(e) { this.style.opacity = '0.6';

return false; } function dragEnd(e) { item.classList.remove('dragging');

} var i = document.querySelectorAll('. item'); i.addEventListener('dragstart', dragStart, false); i.addEventListener('dragenter', dragEnter, false); i.addEventListener('dragover', dragOver, false); i.addEventListener('dragleave', dragLeave, false); i.addEventListener('drop', drop, false); i.addEventListener('dragend', dragEnd, false); First the various functions are set up to handle events. DragStart() reduces the opacity of the dragged element. DragEnter() and dragLeave() manage classes used to style the item when it’s colliding with another item. Drop() stops all of the current event propagation. DragEnd() ensures the class used to style ‘collisions’ is removed.

www.fullengineeringbook.net URL: mzl.la/1ENGVEq

Scenarios MANAGING CALENDAR ENTRIES Rather than editing specific times and dates when managing a calendar, it’s much easier to drag and drop appointments.

LIST SORTING Sorting lists is better done with drag and drop than the little arrow buttons that are sometimes seen on older websites.

TASK PRIORITISATION Prioritising tasks is an excellent use case for drag and drop, which enables the swift reordering of items.

IMAGE SORTING Visual sorting is also useful. Being able to sort images into two piles, such as ‘suitable’ and ‘unsuitable’, means that image organisation could be vastly improved by drag and drop.


31+ N/A 38+ 8+ 8+ N/A


Tips & Techniques 15 Web Workers

18 WebRTC Spec CONNECTING DEVICES TO EACH OTHER

HAND COMPUTATIONALLY INTENSIVE TASKS TO BACKGROUND PROCESSES Low concurrency CPU-intensive processing is something that JavaScript in the browser has never been good at due to its single-threaded nature. Operations that take a long time block the thread and stop other things from happening on the page. The Web Workers API can enable background threads to be spawned on the fly that can handle computationally expensive tasks without there being any detrimental efects to the main application thread. Web Workers communicate with the main JavaScript thread through an exposed function called postMessage. Here’s a basic example:

var worker = new Worker('worker.js'); worker.addEventListener('message', function(e) { console.log(e.data); }, false); worker.postMessage('I like cat food'); // worker.js self.addEventListener('message',function(e){ self.postMessage(e.data); }, false);

processing that would happen in the worker would be kicked of in this function, but for now the example just sends a message back to the main thread containing identical data.

URL: mzl.la/1KAJDyK

Scenarios SPREADSHEET APPLICATION Spreadsheets can require an immense amount of calculation if they’re large enough. Hand that computation to another thread.

VIDEO ENCODING Video encoding is an intensive computational task and is not something that should be done in the main thread.

Browser Support

The basic premise is to connect devices with each other using a common platform where it’s easy to craft rich experiences that leverage technologies – hence RTC (Real-Time Communications). The three APIs that WebRTC implements are: MediaStream (known as getUserMedia), RTCPeerConnection and RTCDataChannel. MediaStream provides access to streaming media from a user’s device, like a camera and microphone. RTCPeerConnection enables audio and video calling as well as providing encryption and bandwidth management capabilities. RTCDataChannel is for peer-to-peer communication of generic data. The MediaStream aspects of WebRTC are covered by the getUserMedia API section of this feature. RTCPeerConnection’s job is to facilitate streaming data between peers, but it doesn’t define any protocols to do so. Instead, developers can choose any messaging protocol they desire, such as XMPP, to handle the signaling required. The signaling channel is used to exchange three types of information between peers: media abilities, the resolution and codecs supported by a peer’s web browser; network information, a peer’s external IP address and port; and Session control for starting and closing communications as well as error reporting. WebRTC has a third API called RTCDataChannel, which lets peers exchange miscellaneous data with low latency. This makes WebRTC a contender for low latency peer-to-peer applications or a decentralised version of Web Sockets.


There are two files here: the first is the main thread which instantiates a worker from the other file, worker.js. The main thread starts listening for data sent by the worker. Then it sends data to the worker using postMessage, in this case a simple string. Worker.js contains a function that listens for data sent by the main thread. The

CHROME ANDROID FIREFOX SAFARI EDGE/IE IOS

31+ 4.4+ 38+ 8+ 10+ 7.1+

17 Vibration API

16 Pointer Lock API

URL: webrtc.org

ENHANCE IMMERSIVE 3D EXPERIENCES

PROVIDE PHYSICAL FEEDBACK

The premise of the Pointer Lock API is to provide access to raw mouse movement occurring beyond the constraints of the browser window as well as hiding the cursor. The API lends itself to first-person controls in games, as well as other interactive first-person experiences and experiences that require lots of mouse movement such as 3D editing tools. Before the Pointer Lock API, full-screen experiences would run up against the edge of the browser window, or worse go beyond it – making it easy for users to be taken out of the experience.

As smart devices become more common for interacting with the web it makes sense to start taking advantage of their unique abilities – such as tactile feedback like that of vibration. Most modern mobile devices have vibration hardware. The vibration API ofers applications the ability to access this hardware if it exists. The API is very straightforward, as follows:

URL: mzl.la/1j9YZDr

URL: mzl.la/1MIJ77B



Scenarios

window.navigator.vibrate(250); This line of code will cause the device to vibrate for 250 milliseconds. If an array is passed to vibrate, it will vibrate and then pause for every other argument.



31+ 38+ N/A

DEVICE-AGNOSTIC VIDEO CHAT WebRTC can bring video chat to almost any device with a browser, camera and microphone.

PEER-TO-PEER GAMING Games designed without a centralised server can use WebRTC to connect peers with low latency.

PEER-TO-PEER FILE TRANSFER WebRTC makes it possible to send large amounts of data between peers.


31+ 44+ 38+ N/A N/A N/A

HTML5 & CSS3

Genius Guide

19 Web Components

Scenarios MULTISITE EVENTS WIDGET

USE WEB COMPONENTS TO PACKAGE HTML, CSS AND JAVASCRIPT WIDGETS INTO REUSABLE, ISOLATED PACKAGES Templates are similar to templates in other Like WebRTC, the Web Components specification is a third-party technologies like AngularJS. They enable collection of several separate technologies. Web Components are self-contained, reusable user interface markup to be defined, ready to be made use of later. Shadow DOM is the specific technology that solves widgets that leverage other open web technologies. the DOM sandboxing issue, whereas Using already public Web Components is Custom Elements enable something that’s as easy as writing an developers to create fully featured import statement in an HTML page. Remember it is DOM elements. HTML Imports are Web Components provide a way not Polymer to package widgets built with HTML, similar to imports in other Iolymer is a Google framework CSS and JavaScript into reusable languages, enabling the import of based on Web Components components – they’re just as entire Web Components, including technologies and is not required capable as anything else that’s their CSS and JavaScript. to make effective use of Web available out there. While the four technologies in Components. For years, developers have worked Web Components are supposed to with widgets that aren’t sandboxed be used in conjunction with one from the rest of the DOM. The widget’s another, developers can select which styling sat with the rest of the CSS, the JavaScript parts of Web Components they need to use. with the rest of the JavaScript. This lack of sandboxing The amount of things that can be achieved is broad. made it hard to extend existing widgets without When thinking about Web Components retrospectively accidently regressing other parts of the code base. The against a recent project, they could be applied to any four parts of Web Components that work to alleviate self-contained feature of a webpage – allowing that new this problem are as follows: Templates, Shadow DOM, component to be imported anywhere in the project. URL: webcomponents.org Custom Elements and HTML imports.

Develop an events widget that lists events from an API dropped onto any site with one Import statement and a Custom Element.

SEARCH WITH AUTOCOMPLETE Take a search with autocomplete, such as Google’s Places, and then turn it into a reusable component.

IMAGE CAROUSEL Implement a carousel in a Web Component and never write another carousel. Import the old one that uses Custom Elements.

ACCORDION COMPONENT You can turn any piece of markup into an accordion by importing an accordion Web Component and surrounding the item in a Custom Element.


www.fullengineeringbook.net 20 Shadow DOM

41+ 44+ N/A N/A N/A N/A

Parameters ELEMENT.SHADOWROOT

ISOLATE PRESENTATION FROM CONTENT FOR MORE FLEXIBLE AND ROBUST FRONT-END ARCHITECTURES The Shadow DOM enables developers to encapsulate DOM elements from the rest of the page. In conjunction with templates, this enables the separation of concerns with content and presentation. Before, a developer may have written something like this when wanting to share directions to their house:

Directions to my house

Turn left

But with Shadow DOM, they can write this:

Turn left
<script> var s = document. querySelector('#directions'). createShadowRoot(), t = document.querySelector('#directionsTempl ate'), c = document.importNode(t.content, true); s.appendChild(c); The presentation code here is now inside a template, so it won’t be rendered by the browser. The script at the bottom clones the template to the Shadow DOM, with the presentation initially intended.

This is a read-only property that represents the youngest shadow root that is hosted on the element.

The content element used inside of the Shadow DOM is an insertion point, only to be used in Web Components

Much like the , the parameter is also an insertion point but it can also be used for older shadow roots on the same shadow host.


31+ 4.4+ N/A N/A N/A N/A

URL: bit.ly/1WsX3nM


Tips & Techniques

VR + THE WEB THE NEXT GENERATION OF WEB DESIGN IS HERE. BUT HOW WILL THE RULES CHANGE AND W H AT TO O LS A N D P LAT F O R M S W I L L B E A D E S I GN E R ’ S F R I E N D ?



HTML5 & CSS3

Genius Guide

How designing for the web is changing THERE’S A LOT TO CONTEMPLATE WHEN DESIGNING FOR THE WEB. IT’S NOT EASY, AND IF YOU’RE READING THIS YOU PROBABLY HAVE A GOOD IDEA OF WHAT WE’RE TALKING ABOUT Consider that designing for the traditional web some general guidelines to follow. Some of the best and of today is still a two-dimensional medium. The brightest minds are out on the front lines discovering the audience scrolls up and down, sometimes left sort of guidelines we need in this brave new world of and right, on a two-dimensional plane. Your goal is to user experience. make those two dimensions convey meaning and There are new guidelines to define and explore, but order in a way that touches their hearts and there are also many design principles with minds. You want to give them an which we are already familiar and stay the WEB experience that is both memorable same. The basic way the human eye REALITY and meaningful, within the confines works stays the same. Principles such The prospect of designing for a of two dimensions. as contrast, colour, and pattern new dimension is a very exciting Now consider how you would recognition are still valid tools. These one. Check out the Catch the accomplish the same goal in a concepts can still be useful as the Dragon site www. three-dimensional medium. There building blocks in our new virtual catchthedragon.nl. This are new factors to consider such as medium. We may even be able to combines and 360-degree the user’s head angle and their explore them further. video and VR. viewing radius. How do you make “But VR is just for videogamers, right?” elements touchable in a manner that is you may think. Virtual reality has the intuitive without the benefit of haptic potential to change the web too, and there is feedback? How do you deal with locomotion in a 3D work happening in many arenas on just that. The idea of space when a user is actually sitting or standing still? the metaverse is not about a game, but a medium where Does your UI move with the user or disappear the virtual and the physical realities come together to altogether? How do you use audio cues to get a user’s form a new way of life, change it forever, and make it so attention so that they turn their head? We’re no longer much better. designing in a flat medium, but within all the space As web designers and developers, we can be at the around a person. It may seem like there are fewer forefront of this new digital medium. We already are at constraints and that can be freeing, but also scary. We the forefront of the current prolific digital medium; the know that with some form of constraints, or rules, that it web. The bleeding edge is sharp, but we roll with it in can be easier to work within those confines. It may seem stride and push the boundaries of what is possible. This like the sky’s the limit when designing for a threeis just another step into the unknown. We should do so dimensional medium. But we’re finding that there are with confidence and enthusiasm.

How VR and the web can work together Education The proliferation of online courses is just getting started. Once you can immerse yourself into an online classroom, the possibilities could be endless. Check out Unimersiv.com for a glimpse into some of what’s already available.


“

Your goal is to make those two dimensions convey meaning and order in a way that touches their hearts and minds

” Jerad Bitner Technical project manager and VR enthusiast

“VR is the next medium for the web and should become a natural transition for web developers and designers. My recommendation is to start studying architectural design now so this can be applied to your virtual worlds.”

Socialising We’re already connected with each other through Twitter, Google+, Facebook, and other social networks. Imagine logging in and walking around in these sites with their own architecture and content with your friends. Check out Beloola.com to get an insight into one company’s vision.

Relaxation Wouldn’t it be great to re-visit your most relaxing vacation spot anytime you wanted? With capture devices becoming ubiquitous in the form of mobile phones, and lately 360° cameras, you may be able to visit wherever you like from the comfort of your home.

Creation VR is rapidly becoming a new and exciting medium for artists, both young and old. For examples, see this video of a classic Disney animator drawing in VR (vimeo.com/138790270), and check out this augmented reality colouring book for children (youtube.com/watch?v=SWzurBQ81CM).

Exploration So many countries, so little time. With 360° videos being taken worldwide of some of the most beautiful and remote places, you can now fully immerse yourself into these places to make you feel like you are really there.


Tips & Techniques

5 VR headsets A LOOK AT SOME OF THE MAJOR PLAYERS IN THE HMD MARKET Virtual reality is currently nothing without a headset to make the magic happen. There are various headsets in various stages of development, but most are set to come to the consumer in 2016. The big name in the world of virtual reality is Oculus Rift, and Facebook’s purchase of Palmer Luckey’s device means it will reach every corner of the market. As with any new tech, the pleasure of owning such a device will cost you dearly. But, the budget option (less than £5) is already out there in the shape of Google Cardboard. So go get your hands on one now!

Oculus Rift

Samsung Gear VR

oculus.com/en-us/rift/

oculus.com/en-us/gear-vr/

Facebook bought Oculus for $2 billion (£1.3 billion) to get their hands on this one. The consumer version is set to be available in July 2016 and is the default for almost all VR software. It’s to ship with hand controls.

A product of Samsung and Oculus, the Gear VR is a wireless headset used with a Samsung phone. The headset can be found for $99 (£65), but the Samsung phones are typically around $700 (£464).

What are spatial memories? Have you ever watched or read Dream Catcher? Well, within the story, one of the main characters has what he calls a ‘memory warehouse’. He can recall any given memory, dragging it up from a virtual warehouse he has built in his mind. He can walk around the building and find any memory due to its relative position to other memories. As such, he follows a ‘path’ to locate a particular memory.

This technique isn’t quite as science fiction-esque. The memory warehouse or memory palace is a system of storing information in your brain by creating an imaginary building and filling it with imagery of what needs to be recalled. Learn how to build your own at wikihow.com/Build-a-Memory-Palace. Our brains were always meant to store information to stay alive, like where you can find food and resources,

how to get home, and which plants are edible or poisonous. This is most likely why we are so good at remembering things visually and spatially. By creating virtual worlds in which we can see and hear, we are better able to create and recall memories in the human brain, so it’s important that the experience be a positive and even desirable one for our users.


“

By creating virtual worlds in which we can see and hear, we are better able to create and recall memories in the human brain

How will VR affect UX?

”

VR COMES WITH A NEW SET OF EXPECTATIONS FROM USERS, AND TOOLS WITH WHICH WE CAN CONNECT THEM TO OUR MEDIUM Interfaces will no longer constrain themselves to two-dimensional screens sitting on a desk. The screen appears to disappear with a screen mounted to your head. As you move your head there is new canvas space available all around. The head-mounted display gives a sense of depth and scale, and we can have browsers and apps all around us. Additionally we should consider how to organise these apps in the space around us. Spatial organisation of our UI components can help a user remember where they can find things. Or it could degrade into the nightmare desktop we’ve all seen with a massive clutter of icons. But even then, our brains are capable of making sense of that chaos.


Placing typical UI elements in such an environment can be tricky. It can be hard to work out what is optimal when the sky’s the limit. In order to get an idea of some of the factors involved in finding the level, take a look at some research conducted by Mike Alger, which is in turn based on useful observations provided by Alex Chu of Samsung. Alger’s research concludes that a measurable area looking as follows is what is optimal for user interface elements. This conclusion is based on several factors, as explained by Mike Alger in his paper. The first is the field of view when a user is looking straight forward. This distance is variable from device to device, but to give you a good idea, the Oculus Rift’s field of view is 94.2°.

The second factor is the distance to which a user can comfortably see. This distance is around 0.5 to 1 meter from the user as a result of how the eyes attempt to focus more and the strain caused after this distance. Oculus recently recommended a distance of 0.75 meters to developers. The third factor is the head rotation of a user. Horizontally the comfort zone is about 30° from the centre with a maximum distance of 55° to the side. The fourth is head pitch, or the distance up and down that is comfortable for a user to position their head. Upwards this is comfortable up to 20° with a maximum of 60°. Downwards this is comfortably 12° with a maximum of 40°.

HTML5 & CSS3

Genius Guide

Google Cardboard

HTC Vive

Razer OSVR

google.com/get/cardboard/

htcvr.com

razerzone.com/osvr

A much cheaper version of using your phone as a head-mounted display, the Cardboard is actual cardboard and works with many phones. The Cardboard app is available on Android and iOS.

HTC and Valve have partnered on this headset which comes with hand controllers and multiple light sensors for ‘room-scale’ VR applications. It is due to be available in April 2016.

This is a little diferent in that it is the first open source virtual reality headset. The goals of the project are to make the parts available for you to build and upgrade over time.

Creating memorable experiences

Scale can be a powerful tool

Another useful tool to consider is how scale can afect One side efect of experiencing virtual reality through a the user. Creating a small model of something like a head-mounted display is the direct impact on your robot can make the user feel powerful, as though the memory due to the feeling of being inside a new robot were a cute toy. But scale the robot up to three or environment rather than watching it on a screen. four times the original size and it’s now far more Feeling as though you’re a part of it all creates menacing. Depending on the memory you’re trying to memories of the experience, not just retention of create, scale can be useful in shaping the experience what we learned through reading. Engaging of the user. a user and creating memories on a level where they can almost forget that Steady what they are experiencing is virtual Horizons When you are creating Visually stunning scenery can afect is what we refer to as immersion. immersive environments, the immersion experience as well. Immersion is at the heart of VR make sure you keep your A beautiful sunset, or a star-filled applications. It being a core goal of horizon nice and steady for your night sky can give the user an the VR experience, we should try users in order to avoid inducing the all-too-often experienced environment to which they can to understand the factors involved “VR sickness”. relate. Relating to known places and and the techniques that are scenes is an efective means of becoming best practices in the creating memorable experiences. It’s a creation of an immersive experience. means of triggering other similar memories and feelings and then building on those with the Positional audio is a way of seeing with your ears. direction you are trying to take the user. An immersed Ingrained in us from early evolution, our brains have user may have been there before, but now there is a attuned themselves to figuring out exactly where a new experience to remember. sound comes from in relation to ourselves. A recognisable sound that is behind you and to your left Teaching someone a new and wonderful thing can also can quickly trigger not only an image of what made the be a useful memory trigger. Do you remember where sound, but we can approximate where that sound came you were when you first learned of HTML, or from. It also triggers feelings within us. We might feel a Photoshop? The knowledge that tends to stick out the measure of fear or soothing depending on what our most to us can trigger pretty powerful images and the brain relates this sound to and how close it is to us. As feelings that we memorised in those movements. in real life, so it is in VR. We can use positional audio as Heralded by some to be an important catalyst in cues to gain a user’s attention, or to give them changing how we learn, VR has the potential to information that is not presented visually. Remembering revolutionise education. Indeed we are better able to a time when you were in VR and a sudden loud sound create memories through the use of VR, and what scared the pants of of you can immediately recall a better memories than those of learning new and memory of everything else you were experiencing at interesting things? the time.

A new shopping experience

www.fullengineeringbook.net Create beautiful scenes

Use sound to draw attention

Make learning memorable

Advertising in VR is a whole new field, and companies are just starting to wrap their minds around the possibilities of connecting with their intended audiences in a whole new way. Advertisers and marketers have been trying new ways of selling products for ages. One of the basic principles of selling or marketing is making the consumer identify on a personal level with a product in order for them to want to buy it. Many tactics are engineered and employed to get people to buy things, but almost all of them come down to this one over-arching goal of having a person identify with the product. VR could be a huge catalyst for achieving this goal. Visiting a shop in virtual reality where you can walk around the wares, see their size and shape, hold them up with your virtual hands to really identify the product’s dimensions, and even obtain additional information through a display of information attached to the product – all of these are possible. Or perhaps you’re taken to a whole new place when you pick up the object to experience the use and operation of the product. All of these are additional ways that a person can identify with a product on a deeper level than a two-dimensional representation allows. There are some great examples of how VR is being used in the commercial space. Trillenium (trillenium.com) is just one of the many. They are looking to bring the retail experience to shoppers by creating virtual stores that allows users to browse through shops as in real life.


Tips & Techniques

WEBVR in action STANDARD EXAMPLES OF USING WEBVR FOR CREATING VIRTUAL ENVIRONMENTS

Chrome Experiments for VR vr.chromeexperiments.com Utilises WebGL and Three.js to create a virtual environment compatible with your smartphone and Google Cardboard.

What tools are developers using? WE INVESTIGATE SOME OF THE TOOLS AND PLATFORMS DEVELOPERS ARE USING TO BUILD, DISPLAY, AND COLLABORATE ON THEIR WORK

Unity 3D

3ds Max & Maya

website are very useful, not only teaching the basics of the software, but also giving introductory lessons to basic 3D modelling concepts. You can quickly learn the basics of modelling with SketchUp and then move onto more advanced tools like Blender if you desire. It’s really great for modelling, quickly learning the lingo, and then moving onto bigger and better things. You can grab a free trial version of the software at sketchup.com.


Unity is one of the most ubiquitous of tools used today These are Autodesk products for modelling, animation, for in the development of VR technology. At its heart it’s lighting and VFX. They don’t have VR support by default a game engine. It has a direct VR mode to preview your but through pricey plugins instead. AutoCAD and 3ds work in an HMD, which can really boost productivity by Max are long-time standards in the architectural design designing for VR almost within a virtual environment. industry and have some of the most precise tools in their Unity is quickly becoming the default tool for VR UI. Like almost all GUI’s for building 3D environments and development due to its ease of use and the ability it drawings, these tend to be quite massive UI’s with a lot of afords for quickly making prototype VR applications tools hidden behind menus, submenus, and toolbars. with it. There’s a huge community around this Learn more about 3ds Max, Maya and other tool and so there are a plethora of Autodesk products at autodesk.com/ WebVR resources and documentation to learn products/maya/overview. Standards from. What’s more, a market of 3D When you are looking to assets can get you up and running Blender is quickly becoming a develop for the web and VR, take in just a short amount of time. If favourite modeller for VR a look at the WebVR standard you’re familiar with C++ or developers. It’s free and open drafted by Mozilla and Google: JavaScript, you can get into the source software written in Python. mozvr.github.io/webvr-spec/ scripting pretty easily as well. All There’s a huge community of people webvr.html major HMDs are supported and it’s devoted to this software and its use. cross platform. You can even export to Many websites provide tutorial videos, WebGL. Unity can be found by visiting forums, and documentation. The software’s oficial unity3d.com. documentation is also quite impressive. Mainly for modelling, UV mapping, lighting, rigging, and animation, One of the main competitors of Unity 3D, Unreal Engine you can export your models to a multitude of formats is another gaming engine with VR integrations, an asset that can then be used with many other tools. There’s store, and it also has great documentation. The graphics even a great plugin for exporting your creations into are more advanced and realistic by default, and the JanusVR with a free open source plugin at github.com/ learning curve is not dissimilar to Unity. Many of the VR void4/FireVR. You can download Blender and use it for demos built with UE4 are much more life-like and free at blender.org. smoother to navigation within. It provides great performance with the conveniences of a modern editing Google’s SketchUp is a basic modelling application with a environment. UE4 itself is also cross platform, but it very low learning curve that can get anyone up and exports to slightly fewer platforms than Unity does. Find running in a short amount of time. The tutorials on the out more about UE4 by visiting unrealengine.com.

Blender

Unreal Engine (UE4)

SketchUp


GearVRf The GearVR framework (GearVRf) is an open source VR rendering library for application development on VR-supported Android devices. While many of the other tools can export Android or iOS applications to use with your phone, this is an Android native framework for developing VR applications. You can dig into this one more at gearvrf.org.

Three.js This is a JavaScript library which works as a layer on top of WebGL. It has many helpers and abstractions that make working with WebGL much easier than the WebGL API alone. WebGL is an OpenGL implementation within modern browsers such as Chrome, Firefox, and Safari. There are some excellent applications being developed with Three.js which utilise 3D design to create anything from fun demos, to multiplayer worlds and games. Most WebVR implementations are built using Three.js due to its ease of use and in part due to how popular JavaScript has become. Doing 3D graphics in the browser is hardly done without Three.js. Check out github.com/borismus/webvr-boilerplate to get started. Most browsers are still struggling with headset device support, but they’re getting much closer to being included in the main builds of modern browsers like

HTML5 & CSS3

Genius Guide

SceneVR scenevr.com With multiuser support, this metaverse is built on Three.js and NodeJS, with its own HTML-like markup.

Sharing the VR experience Many apps are built with VR in mind – anything from video games, increasingly implementing VR support, to desktop apps that enable you to have a VR desktop. While much of the UX and usability side of VR is being explored, many of these applications are already extremely compelling. A great place to start is the Oculus Share site, with hundreds of games and demos for VR already in the making, and that’s just for the Oculus Rift. There are many more being created for your browser in WebVR, and for Android and iOS devices in their respective app stores. You can also check out some exploration into journalism with VR. There’s a great piece created for LA Times on graphics.latimes.com/marsgale-crater-how-we-did-it/ which was created in WebGL for WebVR. You can experience this in VR using your phone and Google Cardboard, or simply go to the website graphics.latimes.com/ mars-gale-crater-vr.


INSPIRIT

Quake 3

mozvr.com/projects/inspirit

media.tojicode.com/q3bsp

Based on Three.js, built in Blender, and utilising the Web Audio API, this example of virtual reality will knock your socks of.

This is a working version and level rendered of the game Quake 3 in WebVR. You can check out its source here: github.com/toji/webgl-quake3.

Chrome and Firefox. However, most phones can be detected with github.com/borismus/webvr-polyfill and if turned sideways, they can be switched to a dual display mode that you can use with Google Cardboard, Samsung VR, or other headsets that are built to be used in conjunction with a smartphone.

JavaScript, and a subset CSS. This approach makes it quicker for the web development community to get involved and familiar with designing for VR. You can create games like Puck-man (scenevr.com/ws/puckman. scenevr.hosting/game.xml), or just import a model and show it of to your friends. Virtual environments built using SceneVR are even somewhat compatible with our next tool, JanusVR. Try it out at scenevr.com or, to read more, head over to docs. scenevr.com.

Vizor.io Vizor is an interesting take on a WebVR editor in your browser built with NodeJS and Three.js. It’s a visual programming environment for WebGL, WebVR and other HTML5 APIs. It features live preview, data flow visualisation, network communication, publishing, unlimited undo, and presets that can be used as modular building blocks. Complex logic can be nested in subgraphs and they can be rendered directly to a specific render target, or simply used as a texture. Loops are modelled as nested graphs that are evaluated once per loop iteration. All within your browser. To give it a try, head to vizor.io.

SceneVR Scene is an open source platform built using WebGL and Three.js for the client and NodeJS for the server side and multiplayer component. With Scene you can create virtual reality scenes using a simple HTML-like markup,

JanusVR Janus is more like an actual web browser for VR than a development tool. It’s a platform in the way that SceneVR is a platform, and while the client is closed source and built in QT5, the server-side component is open source and written in NodeJS. Janus has full Oculus Rift support with avatars and some hand control via the leapmotion. com Leap Motion controller. Virtual environments are written in much the same way as a more traditional website is created. An HTML-like syntax is used to set up “rooms” with basic JavaScript support. As virtual environments are just websites in Janus, you can serve them up like a traditional site, using whatever server you like, hosting it anywhere. It’s distributed just like the web of today.

Within Janus you can hit ‘tab’ to create a portal to a new website, in much the same way you enter an address into your usual web browser. Click the portal and walk through to a new website, or “room”. You can even place the Janus markup inside a traditional website within comment tags so that when you view the site with a typical browser, you see your regular website with parsed HTML, and Janus sees the 3D version. Janus lets you edit the code of the room from directly within Janus, and save. This is one feature making Janus a popular option for web developers to start the transition to building VR. It even has built-in multi-user support so you can walk around the internet with your friends, and talk to them via the built-in voice chat support. It’s a lot of fun and has a very low learning curve, especially if you’re already familiar with web technologies.


Tips & Techniques Creating a mixed reality HOW VR & AR COULD JOIN FORCES FOR A NEW REALITY Virtual reality consists of creating new worlds in which to immerse yourself and others within. It replaces the ‘real’ world you see and feel around you with one created for you. There are inherent problems with this when it comes to locomotion – it’s best experienced standing in one place or sitting in a swivel chair so that the user is not getting tangled in the cords, or bumping into real-world objects. Most VR applications do not take into account the actual physical surroundings of the user. Augmented reality deals with creating overlays onto the real world in order to enhance it in some way. AR takes into account the world around you, letting you see it and navigate within it but also changes it in ways to JOSH CARPENTER (PRODUCT DESIGN LEAD ON THE MOZVR TEAM) make it more useful or provide new experiences while REVEALS HOW MOZILLA ARE BUILDING THE NEXT-GEN OPEN WEB you interact with it. You can walk around with AR devices untethered by cables. There’s typically a camera which Q . What is the MozVR mission? much more accessible for developers, thanks to new you may see through, or perhaps light is projected To help build the next great generation of the open web developer tools like A-Frame and Vizor. directly onto the retina to create pixels that appear to by upgrading it for high-performance virtual the user to be in the real world. This is the reality and all forms of immersive Firefox Nightly currently ofers support for Android. area that products like MagicLeap Liv computing beyond. We believe it is the Are there any plans to add iOS to the list? (magicleap.com) are turning their Erickson @ imperative of those of us who love the Firefox for iOS is very new so it’s too soon to say how it focus on. misslivirose open web to be proactive about will evolve, but our team would love to see WebVR They’re fairly independent This is the account for a VR & AR extending it early into promising running inside it eventually, as is the case with Firefox for concepts but already we’re developer at Microsoft who often frontiers like VR, so that it is present Android. In the meantime, the great thing about WebVR looking for ways to make them writes a lot about teaching VR & for developers and users from day is that it runs wherever WebGL is available. With WebGL converge. Imagine a device that AR as well as sharing her one, and awesome. could let you see and interact experiences as she learns with the real world until you want more herself. Who works on the MozVR team, how to watch a movie with your friends did it come together and how is it being in VR. At that point it would simply take funded? up your entire field of view and provide a We’re a group of designers, engineers, and researchers more virtual experience rather than augmented. working from the ofice of the CTO, an organisation The web is a concept that works with both, either by WEBGL IS HARD. A-FRAME IS within Mozilla that works to invent the next generation of re-imaging webpages as virtual places you can interact GOING TO CHANGE THAT the web platform. Our team includes both full-time with, or by overlaying information from the web onto members such as myself and Vlad Vukicevic (co-creator existing real world objects. The point is that the of WebGL), and passionate volunteers who just want to underlying network of the internet itself can be applied WebGL is the backbone of today’s WebVR. It has work on something they believe in deeply. It was two of to and can support both mediums in very useful ways. amazing 3D performance and broad adoption. And us to start with, and we’ve been expanding the team in it’s going to get much faster in the coming year, response to positive feedback. thanks to new tech like WebGL 2 and shared memory. That said, we love the accessibility of For WebVR, designers, and developers need to HTML and CSS. It’s critical for the growth of WebVR download the latest Firefox Nightly and Add-on. At that as many people as possible can create VR what stage of development is it currently at? experiences, and HTML and CSS are much more ”Setting the table.” In 2015 our focus was establishing widely known than WebGL. To make it easier for critical baselines for performance and ease of use. By the more people to create VR content, we’ve built end of the year WebVR will be plug-and-play in Nightly A-Frame, a library of “building blocks for the VR channels of Firefox desktop and Android. It will fully Web” that enable developers to create responsive support the Oculus SDK. It will run at the native refresh VR experiences with simple markup, no WebGL rate of VR headsets, eliminating previous performance knowledge required. We’re very excited to ship it Magic Leap is a company bringing the VR and AR ceilings. It will be based on a new version of the WebVR by the end of the year. experience together API that will enable link traversal in VR. And it will be

The countdown to WebVR

www.fullengineeringbook.net The easy way to create for VR


HTML5 & CSS3

Genius Guide

“

Virtual reality consists of creating new worlds in which to immerse yourself and others within

”

enabled by default in iOS since version 8, developers can create VR experiences for iPhones using solutions like the WebVR Polyfill from Google engineer Boris Smus. Which VR hardware is getting you excited? All of it! There’s so much to choose from. Multiple companies approaching the market from very diferent angles means we have an amazing array of hardware coming, from low-cost mobile solutions to high-end room-scale rigs. I personally have a soft spot for the Vive’s full-positional tracking and motion control. Mice and keyboards are wonderfully eficient input devices, but they’re kinesthetically constrained. I want to design like how Jiro makes sushi, with fluid motion and freedom of movement. The hardware for that is going be a reality soon, and I cannot wait.

Finally, we are only at the beginning of what is a very exciting future for the web. Where do you think WebVR will be in 12 months time? You’ll put on your headset, and surf the web. Gliding from link to link, into experiences that are “worlds”, not “sites”. These experiences will satisfy new jobs to be done, emphasising what is uniquely awesome about VR: awe, immediacy, empathy, and so on. You’ll still use your phone and your laptop to book a flight. But you’ll preview the destination in VR. Meanwhile, native VR will be amazing, but WebVR will add an essential complementary parallel. Lower friction, more content, and truly connected with the rest of the digital world, not just the other handful of people who own the same headset as you. We’re extremely excited about the next 12 months. It’s going to get very, very interesting.

Essential VR Resources A COLLECTION THAT WILL MAKE YOUR VR BETTER

Cardboard Design Lab bit.ly/1X2cpU7 A set of intrinsic rules that you need to know to be able to respect physiologically and treat your users carefully. Google has regrouped some of these principles in an app so you can learn through this great immersive experience.

WebVR Information webvr.info This is a convenient website that has lots of links to information regarding the WebVR specification, how to try it out, and how to contribute to its formation. It’s a great quick stop for getting into the nitty gritty of the idea behind WebVR and why.


James Deeley Creative strategy director at Amaze Virtual Reality has attracted a lot of excitement and buzz recently. Yet, for it to be around for the long term, brands are going to have to start getting smarter in how they use it, particularly if it is to avoid being another ‘gimmick’. We all expect VR to have a big future in gaming, and in immersive brand and retail experiences, but to reach the everyday it will also need to ofer something for the home and contribute to the way in which we live our lives today, and also tomorrow. “The smart approach is to see VR as a part of a wider technology evolution, all built around the

individual, connecting to an ecosystem of devices, cloud platforms and intelligent spaces. “This ‘mixed reality’ will blend virtual reality with augmented reality, ambient and in-store technology and wearable devices. “We know that the next wave will move VR on from being just a ‘headset experience’ and extend it into the wider environment. This might be via the use of gloves, sensors and connected devices, afecting the way we interact and control our involvement, and that development has a real purpose beyond just the ‘wow’ factor. “The next leap forward will be to make the VR world live – using it to experience live events, to control perspectives and go deep inside stories and experiences. Then finally, VR will make it into the home. Like all truly vital technology, for VR to grow and become part of our everyday it needs to start to disappear, to be so simple to use and so beneficial that we don’t think twice about it.

3D User Interfaces: Theory and Practice bit.ly/1T3aBV7 This book addresses the critical area of 3D user interface design – a field that seeks to answer detailed questions that make the difference between a 3D system that is usable and efficient and conversely, one that causes user frustration, errors, and even physical discomfort.

Oculus Developer Center developer.oculus.com Signing up for an account here can give you access to the developer forums which contain tons of nuggets of information and discussion about VR, best practices, and shared experiences by other VR developers.


Tips & Techniques

Integrate payments with the Stripe API Learn how to develop a custom Stripe form into an online web store and handle the Stripe API with Node.js E-Commerce is huge, and everywhere, no retailer from before the time of the web hasn’t either felt its impact or been gobbled up by web-born goliaths that have adopted their business models for the internet era. E-commerce is also hard, sure, you pay for things online all of the time, but the credit card details aren’t going straight from us to the service you’re paying, often a payment gateway service is used somewhere along the line to process your credit card and pass along the information to the retailer that you just made a purchase from. If you’re the owner of a small web store, or just want to take payments for some reason or another on your own website, integrating with one of these payment gateways can be tough and complicated. Fortunately for us, there’s Stripe, a simple but powerful API that allows us to process and receive monies from card payments without too much hassle. In this tutorial, you’re going to take a demo web-store and implement Stripe.js and the Stripe API into it.

the project resources. Enter code/start and then run npm install to begin installing the Stripe Node.js library

1. Get a Stripe account

5. A home for the JavaScript

Before you kick this project of, you’re going to need to get ourselves a Stripe account. Head on over to dashboard.stripe.com/register and follow the on-screen instructions in order to get a Stripe account set up. Once you’ve received a confirmation email from Stripe come back here.

All of the code that the store uses to keep a track of an order is in the storeUI.js file in the scripts folder. You don’t need to do anything with this, it’s a helper library for the store, but you do need to initialise it, and you need a place to do that from. Add the following just after where you import the storeUI.js file into ‘index.html’ and then open core.js for editing.

4. Get the Stripe JS library Using Stripe has been made even simpler by the lovely developers over at Stripe who have put together a ton of neat libraries for us to use. You’re going to grab the Stripe.js library that will let us build what’s known as a custom forms which is a form like any other, but with Stripe integrated into it. Open ‘index.html’ and just after where you import jQuery at the bottom of the HTML document add:

www.fullengineeringbook.net <script src="https://code.jquery.com/ jquery-1.11.3.min.js"> <script type="text/javascript" src="https:// js.stripe.com/v2/"> <script src="scripts/storeUI.js">

7. Find the publishable Stripe key

In order to interact with the Stripe API, you need to get what’s called the “publishable key”. By including this key with each request you make to Stripe, the API can identify us and handle payments appropriately. You can find your publishable keys at dashboard.stripe.com/ account/apikeys. Use the TEST key for this tutorial and never share your secret keys with anyone.

8. Back to core.js

2. Grab the project resources We’re not going to build a web store from scratch because that’s not what this tutorial is about. In the FileSilo resources for this project, there is a prebuilt web store with all of the things you need to handle a basic ordering process. Download the demo files and move them into a folder of your choosing, keeping the directory structure intact.

3. Install Node.js dependancies Now go ahead and open up terminal (or command prompt if you’re on Windows) and you will need to change directory to the location where you just stored all


Once you’ve got your TEST publishable Stripe key, head back to core.js and just after where you initialised the store events, add Stripe.setPublishableKey();

function init(){ store = new store_events; Stripe.setPublishableKey('YOUR_TEST_ PUBLISHABLE_STRIPE_KEY'); }

<script src="scripts/core.js">
9. Create a card payment form 6. Initialise the store Our demo store is made up of a couple of forms and inventory items. You don’t want to concern ourselves with binding events and handling callbacks in core.js, so all of the logic is in storeUI.js - but it hasn’t been initialised yet. In the init() function of your core.js file add the following code:

function init(){ store = new store_events; } This will create all of the event listeners you’ll need.

You may have noticed that although you have some code to make a shopping cart, you don’t have any markup to take the users card details when they try to checkout. Let’s do that now. In index.html, just after the

10. Work with data-stripe Right now, the #card_creds form doesn’t do anything special with Stripe. In order to make Stripe recognise the form, you need to add data-stripe attributes to the elements that contain specific parts of the cards details so that they can be passed on to Stripe. For the credit card number you add datastripe=”number” to the input where you expect the user to add the card number, for the CVC (3 numbers on the back of the card) you add data-stripe=”cvc” and so on and so forth.

11. Set user’s security and liability Using the data-stripe attributes allows Stripe to strip out all sensitive data about the user before it ever hits the server. Cyber-crime is on the rise and you can’t all aford to have a security team working to ensure that all of the servers are impenetrable. By allowing Stripe to take sensitive payment data of of our hands before it ever hits the server, you never have to worry about the security of the users or the liability if ever you were to have a data breach.

processed. Once those details have been validated a one-time-use token will be returned to us. To test the code out, you can use any of the card details from stripe. com/docs/testing, so long as you’re using the TEST publishable API key.

order_form.addEventListener('submit', function(){ Stripe.card.createToken(order_form, function(status, res){ if(status !== 200){ alert("Something went wrong. Sorry"); order_form.reset(); } else { submitOrder(res.id, function(response){ store.closeForm(); store.showReceipt (response.thingsBought); }); } }); });

13. The order token We don’t want the users card details to go anywhere near the server because that opens up to a world of potential trouble (see the ‘Why tokens?’ boxout), but how is a payment processed? Simple, you can use the token you just received in the response from the Stripe API. Along with the customers order, you send the order


12. Test the cart

Please enter your card details
Card Number

Right now, if you add some items to the cart and enter your card details into the form, the page will reload. you need to prevent the submit event and work some AJAX magic with Stripe to get the card details of in a usable way. Add the following code to the addEvents function of core.js. Using the Stripe.js library, send of the card details the user has entered to the Stripe API to be

Store keys Instead of switching keys every time you want to deploy to your production environment, save them as environment variables. One for your development and one for your live platforms.

Left

Once our order has completed and our payment accepted, our store will generate an itemised receipt for our customer Top left

We don’t want to build a whole store, we wouldn’t have enough time to talk about Stripe! This tutorial comes with a demo store to get us on our feet quickly Top right

The Stripe API gives us a bunch of keys to use when accessing its API. You use the test key in this example so it doesn’t cost us any money, but you have to switch it over when you go live!


Tips & Techniques token to the own server, where you can request Stripe deduct a credit from the users balance. Before you do that, you need to sort out the customers order.

product-id'), price : thisItem.getAttribute('data-price') });

14. Tally up the order

payload.total += parseInt(thisItem. getAttribute('data-price')); }}

item purchased by the customer and returns an organised list.

17. Parse the request Before you send to the order to the server, you need to create a payload describing what they actually ordered that you can process server-side. In the empty submitOrder function of core.js add the following. First, it takes all of the items out of the cart and puts them into an array, then it gets the price of those items and creates a total in pence (assuming you’re using GBP) which you will ultimately charge to the user. This isn’t the most tamper-proof way of calculating price, but it’s good for demoing the power of Stripe.

function submitOrder(){ if(token === undefined){ throw "No Stripe card token has been passed"; } var items = document. getElementById('purchase_list'). getElementsByTagName('li'); payload = { items : [], total : 0 }; for(var g = 0; g < items.length; g += 1){ var thisItem = items[g];

15. Send the order to the server Now that you have the payload containing the total price and the items in the cart, as well as the stripe token we’ve acquired, it’s time to send it to the server. you can do this using a good ol’ fashioned jQuery AJAX request. Add the following code just after the last bit of code you added to submitOrder();

jQuery.ajax({ type : "POST", url : window.location.origin + "/order", data : { order : payload, stripe_token : token }, success : callback, error : function(err){ console.log(err); }, dataType : "json" } ) ;

On lines 71 and 72 of stripeServer.js,, parse the body of the AJAX request sent to the server to retrieve the order payload and Stripe token for the customer. Now that you have a Stripe token, you can charge the customers card (stored on the Stripe servers) using this token. you do this with stripe.charges.create(); This function takes two arguments. An option argument, which needs to contain the amount of monies being charged (in pennies, a currency and a payment source (our card token). The second argument is a callback to handle the response from the Stripe API.

stripe.charges.create ({ amount: price, currency: "gbp", source: card_token, description: "Customer cheese order" }, ...

18. Handle the Stripe response If something goes wrong, Stripe will pass an error back to the server, but if there is no error, everything has gone great, you’ve been paid! (although it may take up to 7 days for you to receive the money); Now you need to inform the user, which you do here with res.json. It’s at this point that you would write logic to set up a delivery or store the order in a database somewhere or maybe send a confirmation email, but that implementation is up to you and your (or your customers) needs.


payload.items.push({ productID : thisItem.getAttribute('data-

All in the platform

16. Receive the order

If you want put your store in an app, you don’t have to change much. Stripe has libraries for iOS and Android. If you’re running a Cordova app, use the same process, but whitelist stripe.com.

In the root of your project folder, open stripeServer.js. On lines 69-100 define a single endpoint, /order. This is where you will handle the data that has been sent from the demo store. On lines 37-67 you will have the sortOrder function which tallies up the amount of each

Top left

Each item in the cart has data-attributes on the element that keep a track of that items price and product reference. When you send this information, it would be prudent to check that the total sent is equivalent to the produce selected Top right

Once the order has been processed, send the client an object that contains an itemised list of the products you bought. This let’s you know for certain the exact quantity of produce purchased by the server Right

When you’re testing the code out, you don’t want to be using actual card details, what if you charge yourself £1,000,000 by accident. Stripe provides test details that will work with your test publishable key


... function(err, charge) { if (err && err.type === 'StripeCardError') {

HTML5 & CSS3

Genius Guide

Why tokens? So why are you using tokens instead of just handling card details ourselves? Surely you can better look after our own customers data? Well, no. Security is hard, no matter how hard you, as an individual try, it’s unlike you’ll ever be able to match the strength of security ofered by an enterprise-level payments platform. Stripe’s job is to keep their API running and their data safe, your job is to sell delicious cheeses. Let these guys take on the card stuf, it’s what they’re really good at. On a side note, say you do store card details on your service and you get hacked, you’re liable for that data’s security, not only does it suck being hacked, but if the data was stored poorly, you may be subject to legal action from your customers. Ouch. Is it worth it?

res.set(500); res.json({ status : "ERR", message : "Something has gone horribly wrong" }); } else { res.json({ status : "OK", thingsBought : itemisedItems }); } });

confirmed by Stripe the Node server sends a JSONencoded itemised list in its response. the helper library that’s been handling all of the store logic kicks in here again. Once that the confirmation has finally been received, it will reset and close the card details overlay and if you pass the itemised list that the server sends back, then it will generate a receipt to show the customer what they have ordered. This will happen in the callback you passed as part of the submitOrder function call, as we have shown below:

Detecting fraud Stripe uses machine learning algorithms to detect potential fraudulent purchases. If you know a payment was genuine you can tell Stripe and they’ll process the payment.

www.fullengineeringbook.net submitOrder(res.id, function(response) { store.closeForm(); store.showReceipt(response.thingsBought);

20. Square one 19. Generate a receipt On the client-side, the form will still be waiting for a response from the server. Once payment has been

So that’s the order process complete. Now you can show the customer what they’ve ordered and then you can let them continue on their way. In this case, you can now

reset everything when they close the receipt dialog, but on a real store, we would let them browse around the website or you can even view all of their orders in a dashboard somewhere if that’s what you want.

21. Prime time When you’re ready to take your new web store live, don’t forget to change the TEST publishable API key to the LIVE one. Otherwise, all of the orders that you end up taking won’t actually charge the people for any of the purchases that they make, regardless of the validity of their payment method.

Remembering your customers In this tutorial, you generate a token for each purchase you want to make, and seeing as the tokens are single-use only, it means that we’d have to get the user to enter their card details every single time they want to buy something. That is going to become a frustration for them very quickly. So, how do you store card details for the customer without storing card details? The Stripe API allows you to create a ‘Customer’ object that you can associate with card details by passing in the charge token before you process a payment. Though you can only use this token once to make a charge, you can access the customer any time you like and make a charge to them without them ever having to make a payment.


Tips & Techniques

Master responsive image techniques Learn how to use and srcset, and bring art direction to responsive images



DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-887

HTML5 & CSS3

Genius Guide

Ever since responsive web design became a thing designers and developers have been looking for better tools to manage imagery across many diferent clients and viewports. With the advent of the srcset attribute and picture elements, this is now achievable in modern browsers and responsive images are even starting to become possible on mobile devices, with Android 4.4.4 ofering good native support. For aging browsers, Scott Jehl’s picturefill JavaScript polyfill can be used to plaster over the cracks – although network performance will still be an issue. The pinnacle of this new feature set from HTML5 is the picture element, enabling creative teams finite control of how images are presented to their web browser – creative teams are finally able to give art direction on a per-client basis. This can be something that works as simple as serving diferent aspect ratios to mobile devices, to serving entirely diferent image compositions for diferent viewports. This tutorial will walk you through the process of crafting flexible images the old way, image swapping using srcset for diferent viewports and display capabilities, fully responsive images using picture, using picturefill the right way, and finally bringing all of these components together to produce an interactive demo that exploits the best that a picture has to ofer. Maximise your online real estate now.

2. Basic responsive images Responsive images will need to shrink with their containers. The code that we’re using below is a bit counter-intuitive because it suggests that it just limits the width of the image, but in efect it implies the image should be flexible in its width. These images are really flexible rather than responsive.

img { max-width: 100%; }

3. Change resolutions with srcset Modern browsers can make use of the srcset attribute that enables the browser to make a decision with regards to what image to actually display. The width specified after each additional image path corresponds to the width of the image.

4. See srcset in action Here’s a basic implementation of srcset on jsfiddle as a live demo (jsfiddle.net/aqx9aoat). The browser has chosen to display the 500px width image rather than the initial 1000px one. The browser is choosing which image to pick by itself here.

6. Responsive srcset behavior The sizes attribute also takes media queries, which allows developers to change the behaviour of images depending on the viewport. Here, 66vw is used whenever the viewport is wider than 499px, otherwise the image will display with 100vw.

7. Retina support with srcset Srcset enables developers to specify the use of hi-DPI imagery via the x descriptor. Unfortunately though, images with the x descriptor are fixed-width only (not flexible), which limits their usefulness. This is something that prove to be handy for making hi-res cropped background efects, however.


1. Basic image markup

Marking up a standard image hasn’t changed for a long time. The src attribute specifies the location of the image. The alt attribute is for supporting text that should be useful if the image can’t be found, or for the visually impaired who use screen readers.

5. Control srcset behaviour

Use calc in sizes

The sizes attribute can enable developers to control the amount of screen real estate the image will take up. The example code shown specifies that the image will take up 66 per cent of the viewport width as opposed to the preset value of 100vw.

The sizes attribute allows for using calc() just like CSS. This enables us to have finite control that wouldn’t be possible otherwise, like calc(100vw – 40px). It’s handy for keeping gutters on images.

Top left

When the user increases the width of their viewport, the browser loads the 800px version as it’ll be less stretched Top right

The browser has to decide which image to display based on the information provided which, in this example, is just the width descriptor Left

Due to the small viewport on page load the browser has chosen to load the 500px wide image, as it’s smaller in dimensions and file size


Tips & Techniques

8. Responsive art direction The picture element enables developers to specify multiple source elements and a fallback img, enabling media queries to be applied to each. The code shown below swaps out widescreen images for square ones – as this will be a better aspect ratio for mobile – at a 499px wide viewport.

9. Style picture elements This may also appear to be counter-intuitive, but the picture element can’t exactly be styled in the same way

as an image. The picture simply wraps an image, passing the right image path for any given media to the image element. Flexible images are also possible within picture elements, but they will first need to be marked up like the code as shown below:

picture img { max-width: 100%; }

10. Starting markup Earlier on, this tutorial briefly covered Retina image support using srcset and explained that Retina support only worked for fixed-width images. Picture can provide us with a way around that problem by making use of the media attribute. As you can see in the code below: catering for wide devices first, the fallback.jpg file will now be replaced with wide1200.png.

11. Responsive Retina images

wide800-2x.jpg 2x" />

12. Markup for responsive This final source caters for the smallest viewports and implements the same technique as the one in Step 11. The downside to using this approach is that a lot of markup is needed for one responsive image – each version will require its own source tag as well as a set of media queries.

13. Style picture elements Picture elements are essentially glorified spans – a display:block later and you’re able to add whatever styles that you want. The code shown below uses calc and margin to add gutters to the picture, as well as show a nice box shadow.

.album { display: block; width: calc(100% 40px); margin: 0 auto; box-shadow: #A39A9A 0 0 30px; position: relative; }


Comment sources With so many diferent sources required for each responsive image being implemented, it pays dividends to write HTML comments to help keep track of the images being sourced.

Top left

This client gets the wide image. We could have supplied a 2x variant as part of this step as a lot of modern clients are on 2x plus displays Top right

Widescreen images on mobile viewports can get very small when scaled proportionately. The picture element allows us to serve a cropped image Right

The medium Retina image should be served to higher-end tablet devices with Retina or hi-DPI displays, like Apple’s iPad, when they eventually support it


In this additional source the media attribute specifies that these images are only to apply to viewports between 501px and 800px. Srcset will then load the image that is found to be the most suitable to the client with either the 1x or 2x versions of wide800.

<script src="picturefill.js" async>


Tips & Techniques

Create animated infographics with Snap.svg

Take a static graphic and add interactivity and animation to create an exploded-view infographic




HTML5 & CSS3

Genius Guide

In the new responsive web world that designers have to inhabit, sizing graphics is of the utmost importance to us as web designers. Getting crisp graphics on both a phone and on a huge cinema display monitor is not just desirable, but essential. To that end most of us have switched to using SVG images for our icons and line art drawings, which are always crisp on every display. Not only that but the file size is often much smaller than a PNG image. When it comes to creating animated images or interaction with graphically rich content we will need a solution that can help us do this too. Thankfully Snap.svg comes to the rescue because it lets us use crisp SVG graphics but also adds the polish that clients have come to love for their shiny web apps. In this tutorial we are going to use Snap.svg to create one of those exploded-view images that you would find in Haynes’ car manuals but we’re going to dissect a mobile app. We’ll take a regular SVG created in Illustrator and add animations to this, then make some of the buttons on the interface work. These will drop pins onto a map and slide an of-canvas menu onto the screen. This provides a great introduction into how you can make your own graphically rich applications using Snap.svg.

centred on the page and a background image is placed in there so that all the vector lines and shapes have a background to stand out against.

3. Start up Snap.svg After the CSS styling in the head section, script tags are added with an onload function that detects if the page has finished loading. Once the page has been loaded up, two variables will be declared. One of these variables will hold a timer that waits a fraction of a second before starting the animation and another variable holds the Snap SVG file.

<script> window.onload = function () { var timer; var s = Snap(1280, 800); };

1. Start the project 4. Load an SVG file

5. Reference individual graphics Once the scene has finished loading up, we will need to do an important part of the tutorial – we need to reference individual graphic elements so that they can be animated or interacted with on the page. Here the variables will reference unique IDs and these IDs are the ones that you’d find on any regular HTML tag. They will be stored in a variable to be used later on.

var menu = f.select("#menu"), pin = f.select("#pin"), chatPin = f.select("#chatPin"), thumb = f.select("#thumb"), disc = f.select("#disc"),

6. More references Notice that each line of the code shown below has the variable that is then followed by the letter f. If you take a look at Step 4’s code, you will notice that the f included there appears inside the brackets of the function, and all of this code is in that function. The letter f simply stands for file and it is a reference to the SVG file that we had set to load from before.

header = f.select("#header"), icons = f.select("#icons"), base = f.select("#base"), baseText = f.select("#baseText"),


To start of the project, take the tutorial files from FileSilo and open the Start folder in a code editor such as Brackets. In the head section of the index.html page add a link as shown to the Snap.svg library. You can also download the library from snapsvg.io for reference.

<script src="js/snap.svg-min.js">

2. Style the SVG element Just after the Snap code library has been imported, the CSS styling for the SVG element is set. This is displayed,

Before the closing bracket of the onload function in the previous step, add the code shown here. This tells snap to load the scene.svg file. Notice the comment that states the ‘tutorial code goes here’ – this is where the rest of the tutorial code will go. Because once the SVG is loaded, the code between the curly brackets is called.

Coding Snap.svg Snap.svg uses JavaScript to manipulate the still SVG images that you import into it. The code adds animation and interactivity to the graphics for a rich user experience.

Snap.load("scene.svg", function(f) { //TUTORIAL CODE GOES HERE });

Left

In Illustrator you can see all of the graphics named in the layers panel, so make sure that you open up the layer to see the names In the background of the SVG element, a background image has been added through CSS Top left

In the background of the SVG element, a background image has been added through CSS Top right

After loading the graphic it is displayed over the top of the background image, but still needs a little work


Tips & Techniques 7. Last graphic references Here the last references are stored in variables and you may be wondering where exactly these names came from or how they got in the SVG file. When graphics are grouped together in Illustrator, they can be named in the layer panel, these names are applied as IDs when exported into SVG.

map = f.select("#map"), people = f.select("#peopleBtn"), chat = f.select("#chatBtn"), burger = f.select("#burgerBtn");

8. Display the SVG on the page The next line of code is quite an important line because this line displays the graphic on the screen. If you remember that s is the Snap reference, then append means to add to that, so we use the reference of f which is the SVG file. Save the page now and hit the ‘live preview’ in Brackets or view the page from a server to see the graphic.

s.append(f);

9. Clean up the graphic At present there are some pins floating in space and a menu that is obstructing the way of the main graphic. These will be important to us later but for now let’s make them invisible. Place the code here, just before the line

we added in Step 8 as this efect should be applied before the image is displayed.

menu.attr({ opacity:0 }); pin.attr({ opacity:0 }); chatPin.attr({ opacity:0 });

10. Hide ‘hit areas’ of buttons You can refresh the browser now and see the updates to the graphic from the previous step. There are some hit areas for buttons to hide the button icons, so those will need to be made invisible as well. Add this code that we’ve provided below immediately after the code from the last step.

people.attr({ opacity:0 }); chat.attr({ opacity:0 }); burger.attr({ opacity:0 });

11. Leave a pause Once the graphic is on the screen, the animation is ready to be applied but it should wait a little before starting – this is so that the user can see the graphic, then see it as it moves into position. Add the code here after the s. append(f); from Step 8. This code will set a timer to wait for 300 milliseconds.

timer = setTimeout(designIn, 300); function designIn() { clearTimeout(timer);

thumb.animate( {transform: "t0,-160"},1500, mina.backout ); disc.animate({transform: "t0,-150"},1100, mina.backout); header.animate({transform: "t0,-130"},850, mina.backout); icons.animate({transform: "t0,-100"},550, mina.backout); }

13. More animation The graphics that are at the bottom of the app will also need to be animated, and so does the map in the background. Add the following lines of code before the closing bracket that we showed you in the previous step. Now just save the file and view it in your browser to see all the elements animate into position on the screen.

baseText.animate({transform: "t0,-130"},850, mina.backout); base.animate({transform: "t0,-100"},550, mina.backout); map.animate({transform: "t0,-70"},450, mina. backout);

14. Move the thumb icon As it stands, the animation stops moving but it would be good if we could make the thumb continuously bob about in the graphic. Go back to the code added in Step 12 and amend the ‘thumb’ code as shown. This will call another function thumbUp when it has finished.

www.fullengineeringbook.net 12. Animate the graphics

Animating scale If you want to animate the scale of an image, then SVG is the perfect graphic to scale as it is a vector and it can be blown up in size without any loss of quality.

Top left

A little tidy up is required as some graphics aren’t needed until animation is applied to other elements Top right

The first graphic elements are animated into position, showing an exploded view of an app Right

Interactivity is added to the other icon but there needs to be a way to reset this so the icon goes away again


Add the code to finish the function from the previous step. These graphics are animated with a slight bounce to get them into the position we want. The t inside the transform means that they are transformed relatively from their current position. The timing of each is placed after this. Then just hit Save and view it in the browser to see the animation.

thumb.animate( {transform: "t0,-160"},1600, mina.backout, function(){thumbUp()} );

15. Move the thumb up The thumbUp function is added here and it needs to go just below the closing bracket of the designIn function.

HTML5 & CSS3

Genius Guide

Other ways to use Snap.svg Snap.svg is great at manipulating pre-made SVG images but it is also great at creating content from scratch, perfect for making basic geometric shapes like circles or rectangles. There is a great tutorial on this at the Snap.svg site snapsvg.io, but there are also some other great examples at websites like svg.dabbles. info that help to fill in some blanks in working with Snap.svg. Of course the perfect match for graphics is to create some graphics in your favourite vector illustration program, then add to it by creating dynamic masks with shapes in Snap.svg. An excellent example of this is the Cofee Maker demo that comes when you download the source code of Snap.svg, but bare in mind that this is a very advanced application!


This ‘thumbUp’ function is called after the thumb has moved into position and it moves it up a little higher with easing so that it slowly builds up speed and then subsequently slows down again.

function thumbUp() { thumb.animate( {transform: "t0,-210"},800, mina.easeinout, function() {thumbDown()} );

into the graphic and bounce onto the map. The pin was made invisible in Step 9. Save your code and view it in a browser to test the click.

popcorn.cue( 17.2, people.click(function () { pin.animate({opacity:1, transform: "t0,280"},900, mina.backout); });

16. Move back again Once the thumb has moved up, it calls the function thumbDown so now we will add that function below. Again this moves the thumb down and calls the thumbUp function that keeps the thumb bobbing up and down in a loop. Now just save this and view it in the browser, as we have done previously, to see the animation in action.

function thumbDown() { thumb.animate( {transform: "t0,-160"},800, mina.easeinout, function(){thumbUp()} ); }

Similar to the previous step, if the user clicks on the chat icon, the chat pin should drop onto the map and show the location of the chat. The code adds this on-click animation, and once this is done you can save the page and view it in a browser to test that the click is working.

chat.click(function () { chatPin.animate({opacity:1, transform: "t0,280"},900, mina.backout); });

Right back at the start there was a menu that was made invisible. Now let’s make the burger icon a button that can be clicked and this will bring the of-canvas menu into the app. Add this code below, which will animate this onto the screen. Then save this and try clicking the icon in the browser.

burger.click(function () { menu.animate({opacity:1, transform: "t150,-70"},900, mina.backout); });

19. Reset the pins When the user clicks either of the icons and the pins drop into position, they will stay there. It’s possible to only show one at a time by making the first pin animate back of when the other icon is pressed. Just add this line of code to the click function of Step 17 to do exactly that.

chatPin.animate({opacity:0, transform: "t0,0"},900, mina.backin);

17. Add interactivity It’s time to make the graphic interactive now. Adding the next set of code will make the icon of the person a button. Clicking on this button will make the pin animate

pin.animate({opacity:0, transform: "t0,0"},900, mina.backin);

21. Bring in the menu 18. Click the chat icon

}

disappear when the other icon has been clicked. This is a simple solution for what we wanted to achieve so save this, then just test this in the browser and only one pin will display at a time.

20. Adjust the second pin As in the previous step, the code here needs adding to the click function in Step 19. This will make the first pin

22. Remove the menu To get rid of the menu, it is as easy as letting the user click on the actual menu itself. Adding the following code will animate it back to the original position, while also taking the opacity down and making the menu invisible. Save this and view again in the browser to see and test all the functionality.

menu.click(function () { menu.animate({opacity:0, transform: "t0,0"},900, mina.backin); });


Tips & Techniques

Build with AngularJS

5 best libraries and tools

Learn everything you need to know to start building web apps with the framework Lodash

Start building START WITH THE DATA, FIND APIS, READ THE DATA THAT THEY PROVIDE AND THAT’LL GIVE YOU IDEAS

Structuring your app Package managers can simplify the finding, Organising an app is tricky in the beginning. AngularJS downloading and updating process of app allows for complete flexibility which also means that you dependencies, and there’s no good reason not have to figure out the best way. Think about it as to use them. You can install AngularJS with NPM, the something organic that can be modified down the line Node package manager, or with the help of Bower. and grow and change with your app. You might find that some packages that you want are Start of by putting all your files in the main directory not on NPM however it is the most reliable manager for and create a new subdirectory to group files together as you to use. Bower can be slightly less reliable but it does you progress. benefit from there being more front-end packages It’s better to structure your app in folders by feature available, as well as its use of a flat dependency tree, so rather than by type (for example as services, controllers, you are probably better of with using it as a manager templates and so on). That way it’s easier to locate your over NPM. code quickly, keep a flat structure, and stay DRY Remember to save all your dependencies in (don’t repeat yourself). It might feel your package file regardless of the package To Follow counterintuitive initially, but as manager that you use, so your app is Adventures In Angular applications grow over a certain size, easy to share or reinstall. @angularpodcast it’s quite dificult to find things if files Build Adventures in Angular is a weekly are organised by type. It’s very likely In AngularJS, modularity is a key podcast dedicated to all matters that code is going to be repeated so principle and you’ll soon find out that of the framework. Guests from try to avoid that as much as you can. there are many small files that you Ionic and GSAP have both Choose a naming convention and want to load. It’s not a good idea to appeared on the podcast make sure that you stick to using it. manually load the small files in your page recently. You are going to end up with a lot of files; – not to mention the performance issues that even small apps have quite a few files. If you could come up if your app ends up in production ensure that you organise your app in folders by looking like that. For these reasons it’s better to use a feature, it will help you a lot if you add a type sufix to the task runner or tool, like Grunt or Gulp, to help you run names such as example.controller.js. some tasks and optimise your workflow. Modularity is also quite important, although it’s not a requirement. You could potentially have everything The key tasks that you are going to want in your build under the main app module and it would work okay. But script will include: it would be easier to read and makes for a much – Diferent environments for development better structure if you just create one main module and and production then other modules to be shared across the app and – Watch files for change modules by feature. – Concatenate, mangle and minify The main benefit of this type of structure shines – Create source maps for easier debugging through on big apps; also it’s good to note that by having – Linting (especially for teams) this level of modularity, it’s very easy to reuse modules – Run tests on diferent apps.

lodash.com Lodash is a very useful utility library. It has an extensive documentation and it does all sorts of things for you. Lodash is focused on performance so it’s a good idea to use it instead of some slower AngularJS methods.

Angular UI angular-ui.github.io AngularUI is an amazing set of tools, frameworks and even directives to help you build your Angular apps faster.



UI Router github.com/angular-ui/ui-router UI Router is part of Angular UI and has become the de facto routing framework that everyone uses. It’s much more powerful than ngRoute – the one provided by Angular. It allows you to manage your application’s interface by states bound to named, nested and parallel views, providing a lot of flexibility.

UI Bootstrap angular-ui.github.io/bootstrap/ Another component of Angular UI is UI Bootstrap, a very useful set of AngularJS directives that mimics Bootstrap components. If you use Foundation there’s an unoficial port of UI Bootstrap called Angular Foundation.

John Papa’s Angular Styleguide github.com/johnpapa/angular-styleguide/ blob/master/README.md John Papa wrote an amazingly thorough and very opinionated style guide that has been improved upon by a good number of contributions. This is highly recommended reading.

HTML5 & CSS3

Genius Guide

Bootstrapping ANGULARJS IS NOT BASED ON CONVENTIONS LIKE OTHER FRAMEWORKS

Rafa Garcia-Lepper Lead front-end engineer

“AngularJS is an amazing framework for creating data-driven SPAs. Working with it is a lot of fun and I love that it encourages me to write better code.”

It’s not a steep learning curve for developers wanting to set it by passing an array as a second argument to the get to know Angular, but it becomes more challenging module method in the angular object angular. when an app grows over a certain size. For this module(‘exampleApp,[]);. You can then get this reason it’s better to stick to a series of module by omitting the second argument To Follow conventions. In AngularJS the best way of angular.module(‘exampleApp’);. Joe Eames working is by creating single Configuration @josepheames responsibility modules that will work In a configuration block you set Joe is a panelist in the JS Jabber together with other modules to elements like routes, exception and Adventures in AngularJS create an app, which is in itself a handlers, providers and constants podcasts and a great developer module. Then you just inject the which need to be there before the to follow. He is the organiser of services that the diferent modules app starts. ngConf, and active in provide, keeping your code tidy. sharing tips and advice. To bootstrap an app, all you need to Run block do is to declare a module, give it a name In a run block, you trigger logic that needs to and then declare all the other modules on happen when the app is starting. Things like which it depends. Then in the HTML you can load the authentication, translation or analytics, for example, will app in any element you want; AngularJS will replace belong in here. It’s better to not write the logic code anything inside it with the views of your app. inside the run block for testing. Rather, create factory A module is a collection of configuration and run services with the logic, inject them in the run block and blocks although you don’t actually need either. It sounds then invoke the required methods from it. confusing but to create a module all you need to do is to

www.fullengineeringbook.net To bootstrap an app… declare a module, give it a name and then

“

declare all the other modules on which it depends

Performance IT CAN BE EASY TO MESS UP THE DIGEST CYCLE Every model in AngularJS is represented as a $scope object and these will make use of an array called $$watchers, which can then be utilised to store functions. Every single time that $watch is called or a value is bound from the DOM (using ng-repeat, ng-class, ng-show and so on) a new function will be stored in $$watchers. Every single time that one of these values in the $scope object is modified, the digest cycle will go through the $$watchers array and it will then run all of the functions in it. If any of the functions in the array changes any watched value in the scope, then the cycle will run again.

It’s important for you to be aware of this issue and so, you should make sure that you avoid any of the unnecessary cycles by minimising the number of watched values. Filters can be a performance problem too because they are run twice with every digest cycle and because they only hide the filtered items using CSS, which means that the collection will stay in memory. Try not to use filters unless you really have to. Also, you’ll find that it’s faster to work with simple objects, especially with the data that comes from the backend. Try to make sure that the object has only the keys that are really necessary.

”

Security ANGULARJS INTRODUCES SOME RISKS WORTH NOTING

Avoid mixing server and the client templates In AngularJS, templates are just HTML files, but you can call a server-side file which will be processed and sent as HTML. The risk is clear as you are exposing some code that will be executed on the server, potentially introducing some unintended XSS vectors.

CSRF If there’s a cookie called XSRF-TOKEN, AngularJS will recognise it and automatically convert it into a request header X-XSRF-TOKEN. This will be sent on every request sent by $http for the server to validate the token.

The ngSanitize module This module changes how AngularJS encodes the output and creates a list of allowable HTML elements, stripping everything else out.


Tips & Techniques

Using a data-service ABSTRACT CRUD OPERATIONS INTO SERVICES SO THEY CAN BE ACCESSED

Inject the service in the controller, then in the activation function call the getExample function for the example data and wait for the promise.

To communicate with the backend, use a factory, inject $http and return an object exposing all the public methods.

Create a function getExample to call the service for the data and wait for the promise; next, set the data and resolve the promise.

Use $http to make a request to the API and use then and catch. Try to avoid anonymous functions to improve code readability.


Communicating with the backend When making requests to the backend, it’s tempting to do it from the controller, but it’s better not to do it and keep a separation of concerns. Otherwise your controller will become bloated very quickly and it will be dificult to test and maintain. You want to create a service that can be reused from other parts of the app. This is the best way to work with AngularJS in general, but it’s particularly useful when interacting with the backend so data can be cached and reused – this will make your app feel faster. Use a factory where you inject $http and create an object literal where you expose pointers to private functions and properties, similar to the revealing module pattern. Then use $http in the private functions for the CRUD operations and return it. This way the controllers remain oblivious to the logic. A controller – or any other consumer – will only need to know what service to get

“

data from and its interface. If you require some data in a controller for a view to work, load it in the resolve member of the state, and then inject it into the controller. Again if you have a factory you can inject it in the resolve and use all the exposed methods.

Work with directives Directives are reusable self-contained components created to add bits of enhanced HTML functionality that are used from the views. They can have a controller and a template and can be invoked from the HTML in four diferent ways: by custom element, attribute, class or by comment. Create one directive per file, and name the file after the directive; if it has a template file, put them together in a folder of the same name so it’s easy to find and maintain. Directives inherit their parent scope by default, so it’s probably a good idea to isolate the scope – but don’t do

Use element directives when they are a component, when you are actually creating a new HTML tag 40 HTML5 & CSS3 Genius Guide

”

it blindly. Make sure you learn about scopes in AngularJS first. If you need to manipulate the DOM at all, you need to do it from a directive inside the linking function. Angular also works nicely with jQuery. It comes with jqLite, so out of the box you’ll have a subset of the most common jQuery functionality available, but if you load jQuery it will overwrite and become available instead. Avoid invoking directives as classes or comments. Use element directives when they are a component, when you are actually creating a new HTML tag. Use attribute directives when they modify or add some behaviour to an existing element. The name of a directive should be in CamelCase exampleDIrective in JavaScript when you declare it, and it needs to be dash separated when invoked in the HTML . To get values into the directive isolated $scope, you can use custom HTML attributes and bind them to the scope object in the directive definition object. The keys of the scope object will be the HTML custom attributes – using the same CamelCase to dash rule. You can bind them as strings by making use of @, or to an expression using &. You can also use = to create a two-way data bound object.

HTML5 & CSS3

Genius Guide

Models, controllers and views IF YOU ARE NOT FAMILIAR WITH THE MVC PATTERN THIS MIGHT BE CONFUSING AT FIRST, BUT IT’S A LOT EASIER THAN IT LOOKS AngularJS is structured around data which should bloating the controller by using $scope methods come from services and you want to display that would be better of in a factory. your data in the views, so what you do is If you do this, don’t forget to capture Avoid use a controller. A controller is bound ‘this’ into a variable like vm, which ng-controller to a view and the data model is stands for View Model, so it doesn’t Ng-controller doesn’t represented as the $scope object. change by context. enforce one-to-one coupling, The $scope object is accessible from In the HTML you can display the it’s not reusable and it’s not the view so you can have any data elements in the model ($scope or flexible. Attach a controller by adding it to $scope. vm), all by using double curly braces to a template using a route It’s a good idea to avoid the $scope like this {{vm.example}}. If you decide definition or a directive. you don’t want to bother with the object though and to use controllerAs controllerAs syntax, $scope is implicit so that syntax instead. ControllerAs binds ‘this’ to the $scope object which will help you to avoid you can just use {{example}}.

Services LEARNING TO USE SERVICES IS KEY TO MASTERING ANGULAR In AngularJS there are services, providers, factories and constants that create a lot of confusion as they are all diferent types of services. They are all singletons, so just use factories, forget about the rest. One exception is in the config block, where only providers are allowed. Other than that, stick to factories. Put in services any logic that could be shared across the app. Then all you need to do when you need some functionality is to inject it. Dependency injection is a key feature of AngularJS and it’s really nice to work with. Make multiple small factories with one responsibility each. Services can be injected into other services so any functionality can be reused. This is a really nice way of working; it will keep your code clean and clearly defines the diferent parts of your app.

Register functions www.fullengineeringbook.net

EXECUTE ASYNCHRONOUS OPERATIONS WITH PROMISES, CHOOSE THE MOST APPROPRIATE TEST TOOL AND FIND OUT HOW TO ROUTE

Promises

Unit tests

AngularJS has a promise implementation by default exposed as the $q service, it’s also implicit as part of the $http service. It might be confusing at first. The basic way you use it is by creating a deferred object using $q.defer();, which you then use inside an asynchronous operation to resolve or reject the deferred object. Then you can return deferred as a promise. There are very few times when you are going to need to use $q.defer(). Mainly it will be when you need to wrap a jQuery plugin to work in Angular and you need to start a promise to replace the callbacks. Promises in $http are a bit diferent, but you’ll be safe just using then() and by remembering to always catch() rejected promises.

Jasmine is the most common testing framework for running unit tests in AngularJS. It’s the one used by the AngularJS core team, although you can use Mocha if you prefer it. To run tests with AngularJS you will need angularmocks.js, which is a tool provided by the AngularJS that is designed to create replicas of the objects called mocks. This makes it easier for you to decouple components and inject and mock AngularJS services in your tests by making use of ngMock.

Tests & tools Keep ESLint running in your code editor and keep a lint config file in the repository too, so that everyone in your team writes code in the same style. It’s also a good idea to lint your code as a build task, and even better to do it as a pre-commit Git hook to ensure a baseline of code sanity before running tests.

“

End to end Unit tests alone aren’t enough. If you really want to minimise risks you will need to run end-to-end tests in actual browsers. The AngularJS team provides a useful NodeJS program called Protractor to run end-to-end tests. It uses WebDriver for controlling web browsers and simulating user interactions.

Running tests Karma is framework agnostic and very configurable tool provided by the AngularJS team to run tests. It works well

with Grunt and Gulp, so it’s easy to run tests as part of your build process. If you want to learn more about testing in Angular, then we’d recommend you to read the book AngularJS Testing Cookbook by Simon Bailey, which gives you easy-to-follow recipes for testing out the diferent parts of your application.

Routing Ideally your app should be organised by feature modules, and every single module that needs a route will also have its own module. When you are working with a UI router, you will need to declare states instead of routes – a state may or may not have a route and you can also nest states. Declare the routes in the config block of each of your modules and then inject $stateProvider and $urlRouterProvider. Use $stateProvider to declare the diferent states, and $urlRouterProvider to declare the route alternatives. Give a name to the state and pass an object with the diferent parameters for it. If you find that you need to do things in-between the routes, then you can make use of the run block. You can also create links to states in your HTML by first utilising ui-sref as an attribute. Use $stateParams if you need to access the parameters of the routes, but keep in mind they are not inherited by nested routes.

It’s also a good idea to lint your code as a build task, and even better to do it as a pre-commit Git hook

”


Tips & Techniques

Develop apps with Facebook’s React Native framework Create a JavaScript-powered native cataloguing image app with the React library




HTML5 & CSS3

Genius Guide

So, you’ve been writing JavaScript for a little while now, you’d say you’ve become quite good at it, you’ve made websites, a couple of small libraries and even a few web apps. The thing is, no matter how awesome the web is (and it is fully awesome) the call of the native platform still beckons. You decide to give it a crack, but you’ve never written anything with Objective-C before – sure, there’s this new Swift thing that looks familiar, but the process of building an app is still foreign to you. We could try some transpilers, that is, write some apps in JavaScript and then have something like Titanium figure out what your code is trying to do, but that’s a painful process to get right. We could try out PhoneGap – that’s nice and familiar and you can get great results after some tweaking, but JavaScript optimisation is hard – especially when it’s inside a native wrapper. What are we to do? Wouldn’t it be great if we could write apps in JavaScript with our favourite IDE but have everything in our views be native – wouldn’t that be ideal? Well, that’s React Native – a supercool framework from Facebook that lets you write your app logic in familiar React.js syntax and then renders all of the view using native iOS/ Android elements. It’s not transpiling or reinterpreting your JavaScript code, it’s running it separately in the background. In this tutorial, we’re going to be making a catalogue app, that is, an app that shows us cats (see what we did there?), so let’s get to it!

Hit play and the app should run. The iOS simulator might throw an error so select ‘iOS simulator’ in the menubar and click ‘reset content and settings’ and hit play again.

6. Our bare-bones app In our iOS simulator, our app will now be open. Go back to the catalogue folder we created and open index.ios.js in your favourite IDE. This is the main entry point for React Native to run our app from. We’re using the virtual DOM to create elements, but instead of DOM elements, we’re using equivalent iOS elements.

var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', // alignItems: 'center', backgroundColor: 'white', }, }); AppRegistry.registerComponent('catalogue', () => catalogue);

7. Clear the house

10. Create list.js

This React Native project has one view, but we need two views for this tutorial: one for listing our categories, and another for viewing the photos in that category. Delete everything in index.ios.js and insert the following in its place to import the required modules for our project.

In index.ios.js we defined the List component as our first view. Create the file ‘list.js’ in our project folder and a file called ‘catViewing.js’. Import the following modules:

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, ListView, TouchableHighlight, NavigatorIOS, View, } = React; var CatViewing = require('./catViewing'); var List = require("./list")

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, ListView, TouchableHighlight, View, } = React; var cats = require("./cats"), thumbCats = []; var CatViewing = require('./catViewing');


1. Get React installed

React Native is a complicated piece of kit, so there are quite a few dependancies but thanks to homebrew, NPM and Node.js setting up React Native is simple. To install just run these commands in a terminal window:

brew install watchman npm install -g react-native-cli

2. Create a new project Now we have the React Native CLI tools installed, CD to a directory that you want to create your React Native project in and run ‘react-native init catalogue’. This will create a bare-bones project with everything we need.

3. Fix Xcode project/iOS simulator For some, the Xcode project might not work out of the box, Xcode can fix that for us. Open the Cat-alogue. xcodeproj file inside the folder you just created. Xcode will open. Click on the project tab on the left and select 8.0 from the Deployment Target drop-down menu.

4. Select device Look at the play button in the top left of Xcode, just to the right of it there should be a small icon with iPhone 4s or something similar, click it and select iPhone 5s or iPhone 6 (depending on your version of Xcode) from the dropdown that appears and hit play.

5. Fix errors If you get errors, the fix is simple. Click on the tabs showing the error and select the first fix that’s suggested.

8. Create a starting point We now have everything we need except for a view. Add the following code to index.ios.js, it uses the NavigatorIOS module to let us create views, this means we get a lot of things like back buttons and animations between views for free. The initialRoute property determines where our app should find the code for our first view.

var catalogue = React.createClass({ render: function() { return ( ); } });

9. Stylings Let’s create a simple stylesheet. React doesn’t use CSS, it uses a JavaScript polyfill to emulate a limited subset CSS with native components, and as such we define styles like so. AppRegistery exposes our React class to our native code, it’s our true entry point to the application.

just after that, we’re going to create the List class and all of the functions that it will use to build our view:

var list = React.createClass({ getInitialState : function(){ }, renderCatThumb : function(cat){ }, loadCat_egory : function(category){ }, render: function() { }, });

11. Find the cats module If we run our code, we get an error, this is because it can’t find the cats module we defined earlier. You can grab cats.js from FileSilo and add it to our project folder, it’s a

Learn once, write everywhere We’ve all heard of ‘write once, deploy everywhere’ but there’s rarely an instance where that actually works out. Facebook’s suggested philosophy is “learn once, write everywhere”. Once you’ve learned React, you can write it for any platform, rather than maintaining one codebase that has to accommodate everything.


Tips & Techniques really simple JavaScript module that contains URLs for the cat images we’ll be using.

12. Set our initial state We need to help React make sense of our data for iOS so we use a ListView to list categories and a ListView will only accept a DataSource object as an argument. Inside of getInitialState, add the following code to create an object for each of our categories for making a tab:

... for(var key in cats){ thumbCats.push({ image : cats[key][0], title : key }); }

render items, we’re going to need a function to define what each list item should look and how it works. We can do this in the renderThumbCat function. Here, we’re using React Native’s iOS analogous virtual DOM to express how the list elements should be laid out.

renderCatThumb : function(cat){ return ( {this. loadCat_egory(cat.title)}} underlayColor="rg ba(0,0,0,0.1)">

); },

15. JsCSS stylings Add some stylings or everything will be clumped together. We can do this with Stylesheet.create(). This is not CSS, but what Facebook calls JsCSS, a subset of CSS expressed as objects. Each object in styles can be thought of as a class name and each property is a styling. A key diference is that we separate stylings with a comma, not a semicolon.

16. Rendering var ds = new ListView. DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds. cloneWithRows(thumbCats), }; ...

{cat.title} Cats ); },

13. Render the thumb cats 14. The first render

Head over to the iOS simulator and hit Cmd/Ctr+R on your keyboard to render. We don’t need to recompile the app, because we’re using JavaScript to determine our views, we can rerender on-the-fly. If your keyboard did nothing you need to go to Hardware>Keyboard>Connect Hardware Keyboard in your iOS Simulator Menu bar.

17. Push a view to the stack Now we have a scrollable list of categories, but when we tap them, they highlight, but nothing happens. If we want to see the images in the category, we need to push a new view to our stack and pass the relevant images to it for loading. Add the following code to loadCat_egory() and then create the file catViewing.js in our project folder:


Now that we have a data source our ListView can use to

Is it honestly native? Yes! Facebook have yanked out the JavaScript engine from the WebViews and run it in a separate thread. Your app logic runs in JS but everything you see on the screen is completely native.

Top left

Historically, error messages have been obfuscated noise that are rarely any help. Fortunately, that’s not so much the case these days. The fix Xcode prescribes is spot on in this case Top right

Facebook doesn’t want your code to fail silently. It wants to get up in your face so you write better code, so here is what they’ve dubbed the ‘Red Screen of Death’ Right

This is how our app should look so far. Our categories for our ListView are being dynamically generated in JavaScript and then rendered with iOS native components


We’ve not had much to look at so far, but that’s about to change. We now have almost enough code to render our first view. Once every React Module has been loaded, the render function is the last function called and it will render the view. Now change your render function to the following:

render: function() { return (

... var catsToView = cats[category]; this.props.navigator.push({ title: category + " Cats", component: CatViewing,

HTML5 & CSS3

Genius Guide

JsCSS – WAT? Aligning objects on a screen is a tough business, just ask any iOS developer who’s done a lot of manual positioning, it can be a nightmare. Facebook looked around for a solution to aligning things intuitively and it found one, CSS! Problem is, implementing CSS for iOS was not a prospect they fancied much, instead, they opted to create a JavaScript subset of CSS styles that could be used to position native iOS elements in and around native iOS views so it has all the goodness of CSS and JavaScript and full speed of a native. One of the coolest things about JsCSS? It has Flexbox, not the full Flexbox, but something very close and easy to use. Check out the Facebook Developers YouTube channel for more information on React Native bit.ly/1AK9zmZ.

www.fullengineeringbook.net passProps: {catsToView}, }); ...

18. catViewing.js With loadCategory() we’ve passed everything we need to render our images, but where did we pass it to? What about the CatViewing class we’re about to create in catViewing.js? CatViewing works just the same as our list class worked, except instead of being a ListView, we’re using a ScrollView which gives us a little more flexibility when it comes to how we lay content out. Add the following code to catViewing.js to get started:

'use strict'; var React = require('react-native'); var { Image, PixelRatio, ScrollView, StyleSheet, Text, View, } = React; var CatViewing = React.createClass({ render: function() { }, }); module.exports = CatViewing;

19. Get our list of cats The first thing we want to do is get a reference for our list

of cats that we passed to the view from our List class. Each React class has a props object which we can access by using ‘this’. We don’t need many functions here for our CatViewing class, in fact we only really need one and that is a render(). So ammend render() to look like the following:

render: function() { var catsToShow = this.props.catsToView; return ( {catsToShow.map(createThumbRow)} ); },

20. Map our cats In our scrollView, we have mapped catsToShow to createThumbRow, but we haven’t written that yet! So the actual making of the createThumbRow is a very simple process – for each image we pass to it, it will create an instance of the Picture class we’re about to create. Picture is a very simple class, so it’s very similar to CatViewing in that sense, it only has a render function and all it does is take a wrap for an image in a view and then it will grab that image’s source. Just think of it as if you are wrapping an in a
and then setting the src attribute over in HTML.

var createThumbRow = (uri, i) => ; var Picture = React.createClass({

render: function() { return ( ); } });

21. Finish up We’re almost ready to view all of our cats. If you refresh the iOS simulator, we get a nice big error (we might even crash Xcode!) because we haven’t added styles for the Picture or CatViewing classes. But, that’s simple, if we just add the following after our Picture class closes, we’re all done. Now we can take our Cat-alogue, and put it wherever we want it to be.

var styles = StyleSheet.create({ contentContainer: { padding: 10, }, centering : { alignItems : "center" }, imageHolder : { width : 280, height : 280, marginBottom : 5 } });


Tips & Techniques

What’s new with

Modernizr? AFTER YEARS WITHOUT A MAJOR RELEASE, MODERNIZR 3 WAS PUBLISHED IN SEPTEMBER 2015, JAM-PACKED WITH NEW FEATURES AND IMPROVEMENTS


Why you need Modernizr THE SECOND MOST USED JAVASCRIPT LIBRARY ON THE WEB, AND WITH GOOD REASON, MODERNIZR HELPS YOU CREATE GREAT WEBSITES FOR BROWSERS OLD AND NEW If you have worked on a website in the last five years, you have undoubtedly run into Modernizr. Browsers add new features to the web all the time, but unless you are just making demos you probably aren’t that comfortable using them for quite a while. It can feel dificult to know when – if ever – you are actually able to deploy them into production and count on them to work. Modernizr takes the stress out of that decision by giving you an incredibly simple API to hundreds of diferent battle-tested feature detects. Can’t you just send a diferent site to basic browsers? In a few cases that makes perfect sense, but it adds a ton of work and headaches. If you assume that the client isn’t capable enough to render your latest and greatest simply because it happened to be made by Microsoft or Mozilla, prepare for a world of hurt. Those assumptions will inevitably come back to bite you once the browser has been updated. You need to actively check each and every new version of


every browser to make sure it hasn’t added or removed something you inferred was there just because of its name, company, or version. Yuck. A much simpler method is to use Modernizr. It checks for the actual HTML, CSS, or JavaScript feature you care about, and gives you a simple true or false result. The code you wrote to use the new and shiny will start working as soon as the feature is added to your user’s browsers, with no changes needed on your part. So feature detections are the way to go, but why should you use Modernizr instead of just rolling your own? Quite a few of the things Modernizr checks for seems very simple to test for yourself, but due to the fact that humans create our web browsers, there is an endless amount of quirks and oddities between them. Modernizr acts to clear house of these idiosyncrasies, collecting and sharing the issues so that you get tons of bug fixes for free! You don’t have to find out that Internet Explorer 11 parses preserve-3d but never

actually applies it, or that Chrome throws an exception for WebSQL only inside of Incognito Mode. You just get to write a simple if/else, and focus on the code you actually want to be writing. On top of that, Modernizr is 100 per cent open source. You can view the code for every feature detection on GitHub, complete with comments and explanation for why each part was added. Modernizr 3 builds on top of all of this, with dozens of new feature detections, reduced file size, custom builds, and much, much more. As well as the large selection of new features in Modernizr 3, the website has been given a revamp. This makes it easier to find the detects users need to add to their builds. The new site also allows for real-time search for detects on the download page and each detect now has a special comment with useful information including polyfills and links. Total browser support just got a whole lot easier.

HTML5 & CSS3

Genius Guide

What’s new? THE LATEST VERSION IS BIGGER AND BETTER. HERE’S WHY

Lean and mean feature detection machine From its inception Modernizr has had a core monolithic suite of feature detects. It turns out this is a terrible idea! Most websites never use a majority of the detects that were included. Even though it is a relatively small file, all those extra bytes add up, slowing down the load time for your site and making for some sad users. Modernizr 3 has done away with this by modularising every single

detect, allowing for 100 per cent custom builds tailored to your specific website. That means an even smaller file to include and faster loading site for all of your users. The downside of this is that there is no longer that single monolithic file to use when you are building your site, but keep reading to see how the Modernizr team has made it making your own custom build of version 3 a doddle.

Hundreds of new detects Between the last incarnation of version 2 and the new By adding a Service Worker and AppCache detect, 3.0, Modernizr comes with over 100 new you can check to see what the best way to feature detects, complete with make your website work ofline would be, Changes to documentation and polyfill information! make your touch interactions work detects While a full list is available at modernizr. properly across all browsers by A few detects have been com/download, some of the checking Touch and Pointer Events, or renamed since version 2. Make highlights include the industry’s most maybe reduce your @font-face sure to read the changelog on robust Flash (and Flash blocking) download size by checking out modernizr.com to see if your detect, functional tests for video and unicode-range. There are many more code will actually require audio autoplay (that means proper great features that have been added, so any updates. results – even on mobile!) and nearly a make sure to checkout the Modernizr dozen detects for new image, audio, and download page to read the documentation video formats and codecs. on all of them.

Patrick Kettner Lead Modernizr developer

“Modernizr 3 takes away of the guesswork of browser support, and lets me concentrate on writing code for the problems I actually want to be solving.”

Choosing the right build for your site


A perfect fit for the modern build toolchain MODERNIZR 3 INTRODUCES A NUMBER OF NEW WAYS TO INTEGRATE QUICKLY AND EASILY INTO YOUR EXISTING TOOLCHAIN Visiting the oficial website has always been the default way to get your copy of Modernizr, and with version 3.0 it is stronger and better looking than ever. The new site includes a number of improvements to make generating your custom Modernizr faster and easier. Powering the Download page, a new Universal Builder creates the exact same code as any of the other tools you can use to create your Modernizr. That means better consistency and fewer chances for bugs to creep in. The new site automatically creates a build for you every single time you change an option. That means that by the time you are ready to build, it has already been built for you. This process is kept snappy by using a Service Worker to cache all of the modules as you select them. That means that your build time actually speeds

up the more you use it, and keeps it working even if you are ofline! The constant build also gives you the ability to check on just how much bloat (or lack thereof) your build has, with the compressed and uncompressed file size listed on the left-hand side of the page at all times. Remember that every byte you add, every single one of your users has to download. Be kind to your network and theirs – keep it as small as possible. The site even has a fully responsive design, allowing you to generate your build or check the documentation on your mobile. But having to go to the site to recreate the build every single time you want to make a small change can quickly become tedious and boring. Its 2015 – robots should be doing boring junk like this. That is why version 3 has added new ways to integrate Modernizr into your build.

CUSTOM BUILDS SPEED THINGS UP AND MAKE USERS HAPPIER

It is super simple to create a custom build of Modernizr. Once you have a feature to detect (and not before – adding dependencies to your site before they’re needed is a sure-fire way to bog the site down) – head on over to modernizr.com/ download. From there you can search for and select any feature you want. You do not need to know the exact Modernizr term for what you are looking for, as the search box will scour documentation, caniuse, and many other sources in order to make it simple to find everything. Tapping on the detect will pop up its documentation, including a short description of the feature, any polyfills that are available, as well as links to in-depth resources like dedicated blog posts and specifications. Once you have selected everything you want, tap on the BUILD button to get a list of various ways to get the code. As we will explain later on, Modernizr 3 fits well into your modern build toolchain, so there are a number of options available. The Build option gives you the raw Modernizr file. Command Line Config will produce a JSON file thats used to power the Modernizr CLI tool. A Grunt Config can be downloaded as well to automate your Gruntmodernizr setup. Finally, if you want to test Modernizr results in the various browsers you support, try it out on CodePen. You may not even need to test for that feature any more!


Tips & Techniques Whether you Grunt your site or Gulp it, Modernizr can help

Jam with the console cowboys in cyberspace

Once upon a time, when dinosaurs roamed the earth, websites were written in notepad, uploaded to your FTP server and you were done. But the web has grown up quite a bit since the Jurassic period, and with it so has the way that sites are built. Ben Alman’s GruntJS was the first really popular JavaScript build system, and Eric “Contra” Schofstall’s Gulp quickly became extremely popular as well. There are a number of ideological diferences between the two, but the Modernizr team thinks both are great and has created tools to easily integrate it into either of them. Created by Modernizr team member Richard Herrera, both Grunt-modernizr and gulp-modernizr will search your code base for references to Modernizr’s feature detects and automatically generate a customised build with only the features you actually use. Rather than manually creating a new build every time you want to add something new, you just have to write your code as though it was there already and your build system will take care of the rest! You get all of the great benefits of developing with the gigantic full version of Modernizr with none of the performance concerns. Full documentation is available on npm and GitHub for both modules, but they are both very simple to add to an existing project. Here is an example of a Grunt configuration you can add to your existing Gruntfile:

Almost all of the tools that Modernizr 3 introduces are built upon the its npm package. It even powers the Modernizr website! The straightforward command line interface can take a JSON configuration file as input, and uses it to create your custom build.

npm install https://modernizr.com/ download?promises-unicoderange --save bower install https://modernizr.com/ download?promises-unicoderange --save

Thats it! Every time you run Bower or npm update, it will check to ensure you have the latest and greatest version modernizr --config config.json --dest of Modernizr, complete with all bug fixes and custom_modernizr.min.js performance improvements. The only caveat to using the download service is that if you ever want to add or You don’t have to generate the configuration by hand remove detects from your build, you will need to either – grabbing the build URL that is included by default update or remove the existing entry in your package/ in the header of all builds of Modernizr (like bower.json. Since the new dependencies modernizr.com/download?emoji) will would mean you are using a diferent Keep an eye take you to a version with all of your URL, you would end up with duplicate detects, already checked. From there on file size versions of Modernizr in your project. It’s all too easy to bloat your you can tap on the BUILD button Code it forward build by adding too many new and grab the generated Command So you have created your build of features – always remember to Line Config. Using the above URL, Modernizr, but now you have keep an eye on the overall file you get the following JSON file: { discovered that, horror of horrors, it size to make sure your "minify": true, doesn’t detect something you need! website stays fast. "feature-detects": [ How can you remedy that situation? The "test/emoji" Modernizr team has thought of this too, and ] created generator-modernizr-detect. Yet another } nodejs package, generator-modernizr-detect is a plugin for the popular Yeoman tool. It will ask you a few The tool works in Windows, Linux, and OS X, and can be questions to generate all of the scafolding you need to integrated into any system that has the ability to call ... create a new feature detect. Once you have created and “modernizr”: { command line programs. added it to your site, go ahead and create a Pull Request "parseFiles": true, But maybe your builds don’t ever change. Or maybe on GitHub to share your discoveries with the rest of the "customTests": [], you just don’t want to have you entire team install (or Modernizr community. Most of the detects that are "outputFile": "/my/awesome/project/ know how to use) the CLI tool. Can’t there just be a way maintained were contributed by folks outside of the modernizr-output.js", to download the prebuilt file? With Modernizr 3, there is! project, many with little to no open source experience. It "tests": [ is a great way to show of your research and knowledge "emoji" Npm and Bower, at your service to a kind and caring community that helps power a huge ], The days of downloading a script from a random place chunk of the web. "uglify": true on the web have long since passed. We have proper } ... dependency management in the JavaScript world Looking forward Version 3 is far from the end. Since its release in thanks to the likes of Bower and npm. Since Grunt/gulp-modernizr searches for September 2015, there have already been dozens of One of the most frequent requests the Modernizr references to the Modernizr detects, you improvements, with many more to come. One of the team has received is the ability to treat it like almost never need to actually include things that is quickly becoming the most requested is any other JavaScript dependency, and be the “tests” portion. If you ever want support for new module syntaxes. Between npm, ES7’s installable via one of these package Modernizr.on to force the inclusion of certain managers. But, due to its highly Modernizr 3 adds the idea of detects, you can always add them modular nature, it was simply not asynchronous feature detects. to that array. possible (let alone practical) to Check out the Modernizr.on API to If you really like the idea of the publish every possible react to feature detects that take Grunt and gulp versions, but use combination. It would require some extra time. one of the other build systems, nearly a centillion individual such as Broccoli, Brunch or Mimosa, packages! That didn’t stop the you can get the same results by Modernizr team – instead of registering creating a wrapper around the customizr and maintaining that number of modules, it npm package. has created a Bower and npm download service. Also created by Herrera, customizr is the abstracted As a result, what this means is that, rather than crawl-and-build mechanism that powers the Grunt and install a hosted package from Bower or npm like you gulp packages. If you prefer getting closer to the metal, normally would do (eg bower install modernizr), you and want to eschew the built-in automation of Grunt and can go ahead and install directly from the same gulp, Modernizr now includes a command line tool to The new modernizr.com has a brand new look, custom URL that is included by default in the header help get stuf done. and a ton of new features of every Modernizr build.



HTML5 & CSS3

Genius Guide

JavaScript modules, and tools like Browserify and Webpack, modularity has become a huge part of the JavaScript landscape. Modernizr’s internal modules will soon be updated to be compatible with these other syntaxes. This means that someday soon you won’t even have to build the bundled Modernizr file any longer. You will be able to just import or require each individual detect as you need them, like you would any other standard module. In a perfect world, all browsers will implement features as they are created, and tools like Modernizr will no longer need to be used in order to figure out what and

when you can use them. But today is not that day, and tomorrow likely won’t be either. Adding the latest version of Modernizr to your project can save hours trying to research and debug diferent ways to handle tiered browsing experiences. Version 3 has added a ton of new ways to easily integrate an updated version to your existing toolchain. Whether you grab it from the website as you always have, generate it via Grunt or Gulp, or download a prebuilt version through npm or Bower via the download service, Modernizr wants to make it as easy as possible to stop worrying about cross-browser issues, and start making the next amazing website.

Working with CSS MODERNIZR IS STILL THE SIMPLEST WAY TO STYLE YOUR SITE Since the very beginning, Modernizr has been a fantastic way to add functional if statements to your CSS. Rather than worrying about selector hacks or specificity bugs to make sure that browsers purvey the styles you intended, Modernizr adds a class for every feature detect to the root element. This means that you write clear and self-documenting CSS.

.cssgradients .header { background-image: lineargradient(cornflowerblue, rebeccapurple); } .no-cssgradients .header { background: url("images/glossybutton. png"); }

Working with JS QUICKLY QUERY THE RESULTS OF ANY FEATURE DETECTS if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience(); } Version 3 adds a few of new APIs that you can leverage on your code. Modernizr.on was added as a way to hook into all of the new asyncronous feature detects. Since the code you write may execute before the results of the detect are known, you can register a callback to run once Modernizr has finished.

Modernizr.atRule lets you check support for both prefixed and unprefixed @rules (e.g. @font-face, @ keyframes, etc).

if ( !(Modernizr.atRule(“keyframes”) ) { // load JS powered animation lib } Modernizr.prefixedCSS is similar to the older Modernizr. prefixed, but will return the (possibly) prefixed version of a value in kebab-case rather than prefixed’s camelCase

Sometimes Modernizr can clash with CSS you have created, or perhaps some included in a framework being used. That is why Modernizr has the classPrefix option. This can can be added or configured in any of the tools mentioned in this article, like so:

www.fullengineeringbook.net Modernizr.on(“videoautoplay”, function(supportsAutoplay) { if (supportsAutoplay) { //replace static image with video } });

Modernizr.prefixed(“backfaceVisibility”) webkitBackfaceVisibility Modernizr.prefixedCSS(“backfaceVisibility”) -webkit-backface-visibility

{ "classPrefix": "webdesignermag-", "feature-detects": ["css/gradients"] }

Now, rather than this

There are a few more, and some updates to older APIs as well. Check out the complete changelog on modernizr. com to see all of the changes.

“

It’s also a good idea to lint your code as a build task, and even better to do it as a pre-commit Git hook

” Five tools & resources

you get this

One final change with the CSS in Modernizr 3 is the no-js class. Previously, Modernizr would remove the no-js class from the root element if it existed, and then always add a js class. As of version 3, it will continue to remove the no-js class unless the enableJSClass option is false in your config. It will also only add the JS class if a no-js class is found. This lets you decide on whether or not a client has ‘enough’ JavaScript to really say it supports it.

Ryan Seddon’s guide to Modernizr 3

Building Resilient Web Apps – NPM blog

Modernizr GitHub source code

customizr

bit.ly/1IegIzt

bit.ly/1P6HFgh

bit.ly/1SikoG0

This short course in Modernizr 3 willl take you through the fundamentals in JS and CSS.

Patrick Kettner lays out the fundamental tools for keeping Modernizr compatible.

The entire library is available here on the GitHub repository, free for you to dip into.

You can try customising your own Modernizr build and exporting it without having to worry about optimisation.

bit.ly/1LxUIzM

How to use Modernizr Responsibly bit.ly/1GYl7Gh Discover how a responsible approach to Modernizr can improve user experience.


Front-end



52

Responsive design decoded Learn to build with the new Foundation 6

60

Is your content king? Make sure your design is content-led

66

Design aspect ratio-based layouts with HTML and CSS Build tile-based layouts to maximise your content

70

Make dynamic graphics with the p5.js library Create stunning visuals for interactive designs

74

Code 3D zoom effects with CSS Revamp the tired parallax scrolling feature

76

Form pop-up modal boxes with pure CSS Find new ways to present info on one page

www.fullengineeringbook.net 80

Build offline web apps with Service Workers

Create offline applications using Service Workers

84

Model a unique mobile 3D interface Integrate a bespoke browsing experience

88

Create an interactive mobile 3D interface Add interactivity to your orientation controls

92

Assemble full-screen navigation Create menu systems for websites and web apps


Front-end




HTML5 & CSS3

Genius Guide

5 new F6 features

New look

CHECK SOME OF THE EXCITING NEW ADDITIONS TO FOUNDATION

THE CREW BEHIND FOUNDATION 6 TELL US HOW IT ALL GOT STARTED

Half the filesize

The newest version of Foundation is here and, according to ZURB, the team behind the build itself, it’s a whole lot more than just a visual iteration, code restructure or even a simple change in version number. ZURB had tons of phone calls, conversations at meetups, and even sent staf on the ZURB World Tour to hear how people were using the past versions. From New York to Hong Kong to Ontario and Sydney people spoke about their love of rapidly prototyping with Foundation and their interest in how ZURB used it for production sites. From these conversations the team’s goals for the next version of Foundation would rely on getting people producing faster prototypes, so they can iterate quickly, and then taking those prototypes to production code that’s leaner and more maintainable. The biggest and most noticeable diference for Foundation 6 is that it’s now half the filesize of Foundation 5. Weighing in at 60KB CSS & 84KB JS the Foundation team has put tons of care and energy into producing a framework that’s as light as possible while still being a powerful foundation for any website. The ability to pare down the components to the ones you’ll use and a larger emphasis on more powerful Sass functions will help users decrease file size even more. A lean site will lead to a faster site which in turn will allow for more success for the Foundation community. The Foundation team made a big push for a more a11y-friendly framework in Foundation 5.5 and are continuing that work by re-coding every component with accessibility in the forefront of their minds. Every Foundation component uses accessibility standards and the team has been working with some killer a11y advocates to make sure they’re hitting the mark. All code snippets will come with attributes and roles along with instructions on how/why these things need to be used. This will help ensure that every website built on Foundation 6 will be able to be seen anywhere, on any device, by anyone. Foundation has always been very careful about the styles added to the framework with the goal that the base styles are to act as a wireframe rather than a final design. The team is doubling down on that efort and pulling more styles from components, so users can more easily style them to fit the brand of their work. The styles can be updated with variables in the Sass, but the team is standing firm that not every selector with every declaration gets a variable. What this means is that users will be able to write their own CSS and not just be hunting down and modifying theme variables for every style – the aim is styles and variables where they make sense, while avoiding abstractions. In Foundation 6, mixins with Sass have been made stronger to allow devs to build custom rows with any

More flexible Sass

The total filesize of every component and In Foundation 6 customisation is what it is class in Foundation 6 now weighs in at all about. The Sass mixins have been Use fewer divs 60KB CSS and 84KB JS, with plenty made stronger to allow devs to build for the grid of room to make them even smaller even more customised rows with Combine rows and columns in a when selectively removing any any number of columns they need. single div for a maxwidth centered unused components. So, if a designer or developer column, by using the following wants to use a four-column grid code example: inside a five-column grid inside a All code snippets will come with

. almost any grid can be created. But, instructions on how and why these don’t get too overexcited, a grid still elements need to be used. This will help needs to functional. ensure that every website built on Foundation 6 will be able to be seen anywhere, on any device, Foundation 6 will be ofering not only by anyone. Right to left the CSS versions and the regular Sass compatible versions of Foundation, but a Not everyone reads from left to souped-up stack complete with a right. Add the following for sites With the goal that the base styles custom static site generator that need it. Add dir=”rtl” to the are to act as a wireframe rather named Panini to help flatten files HTML tag and $globaltextthan a final design, the team pulled into single HTML documents. direction: rtl; in the settings to more and more styles from Panini is a Gulp-powered build components, so users can more make your site flip for rtl system that can do a lot. It can languages. easily style them to fit the brand of their compile Sass to CSS, combine JS into production work. one file and create production-ready code.

A11y friendly

Starter projects

Styled for ultimate simplicity


“

The biggest and most noticeable difference for Foundation 6 is that it’s now half the filesize of Foundation 5

”


Front-end stronger to allow devs to build custom rows with any number of columns they need. If a design needs a four-column grid inside a five-column grid inside a twelve, new mixins will make that super quick and easy. Users can still use the mixins for almost every component and rename the classes to match their necessary names. This means developers can convert presentational classes from prototypes to semantic markup and not need to import those classes into their final code. This has always been a great part about Foundation with Sass, but the team is taking care to make it even more powerful. Finally, Foundation 6 will be ofering not only the CSS versions and the regular Sass versions, but a souped-up stack complete with a custom static site generator named Panini to help flatten files into single HTML documents. Devs can spin up a browser sync server with tons of ways to optimise code with UNCSS and UglifyJS. This is the same stack ZURB uses to build for their client work and they are making it available for the first time to the Foundation community.

New desktop companion app Spin up projects with a single mouse click Foundation for Sites 6 comes with a new companion app, Yeti Launch (foundation.zurb.com/develop/ yeti-launch.html), that makes it dead simple to spin up Sass projects, compile them and upload them to Notable Code where you can get feedback directly on the site.

Modular JavaScript utilities Create your own JS plugins The utility libraries are publicly accessible so users can make their own amazing plugins.

Quick project starts Collaborate on responsive design prototypes

Spin up projects faster than ever before

Upload your responsive design web pages to easily get contextual feedback on any breakpoint

The new command-line tool (CLI) enables users to set up blank Foundation for Sites, Apps, or Emails projects with fewer dependencies than ever before. Users can also choose to install through NPM, Bower, Meteor, or Composer.

Stakeholders and collaborators can annotate and review coded webpages on any device. Take your Foundation projects from prototype to production with Notable (foundation.zurb.com/responsive-designcode-review).

50 building blocks and 15 new templates A growing library of resources

Flexible navigation patterns Customisable and modular navigation

Motion UI

There’s a new menu system that is completely customisable and modular.

Pop these premade components into your projects and save time and resources.

work with any JavaScript animation library. details of an efect, from what direction an Need more So what can the Motion UI library do for element slides, to how far it spins, to designers and developers? The most components? how intensely it shakes. Motion UI also A the bottom of every important thing is that it will make includes a large number of premade component, hidden away in the prototyping easy. When moving to a CSS classes in order to help you get documentation, you can find a production environment, the library up and running quickly. selection of building blocks that gives users total control over how It is worth noting that the library expand on that particular efects work. was designed specifically for use with component’s functionality At the very core of the library is a the Foundation frameworks, but it can or style. set of powerful transition and animation also be adapted to work with any Sass mixins, which work to give users framework’s animation library, such as complete freedom and absolute control over the Angular or React.


EASILY CREATE ANIMATIONS AND TRANSITIONS

This Sass library includes more than two dozen diferent built-in transition and animation classes for you to make the most of. Originally part of the Foundation for Apps code, ZURB has decided to make it its very own library. The updated version includes significantly more robust transition options, an animation queueing system, and flexible CSS patterns that can


HTML5 & CSS3

Genius Guide

Who’s using Foundation? THE POWER OF THE FRAMEWORKS HAS ATTRACTED SOME BIG NAMES. HERE’S WHAT THEY HAD TO SAY

Imran Oozeerally

Doug Macklin

Nick Pettit

Barclays

Golden State Warriors

Team Treehouse

“It was decided early on that the new site would be

“I have been using Foundation for several years now, not because I’m content to stick with what I know, but because it remains the best framework of its kind by a long shot. The ease of customisation and hassle-free setup it provides are unparalleled. The Foundation framework has not only helped me cut down my workflow time, but more importantly it inspired me to grow as a web developer. I studied Computer Science in college, but knew hardly anything about front-end web development prior to working in my current position. When I discovered Foundation, it made me want to improve my workflow and get up to speed with the changing landscape.”

“I personally prefer using Foundation because of its

mobile-first responsive. I did an assessment of the front-end frameworks available at that time and decided to use Foundation. I particularly liked Foundation’s grid system and general philosophy. The front-end was completed on schedule, integrated into CQ5, and released with great success. I believe that Foundation’s robustness was a big factor to the success of the project. In fact the modules built for the dotcom website are being used across various other Barclays projects. Thanks for producing this great framework, and keep up the good work!”

more robust grid system. When I design new web projects, I always start by thinking about the mobile experience before I move on to larger screen sizes, and I personally feel like Foundation has an edge with block grids and collapsible rows.”

www.fullengineeringbook.net The hassle-free

Prototype to production THE TENETS OF FOUNDATION 6 Foundation for Sites 6 is aimed at helping people get their projects from prototype to production. To make sure every decision was working towards that goal, the Foundation team came up with specific tenets that include the following: Prototyping in Foundation 6 should... s Get me running with minimal dependencies, but give me tools that modern sites need. s Be able to rapidly produce a proof of concept in code with easily readable presentational classes. s)BWFBCBTFTUZMFUIBUJTBTVOPQJOJPOBUFEBTUIF wireframes we’re replacing them with. s(JWFNFBDPNNPOSBOHFPGQMVHJOTUIBUDBOCF easily configured without writing JavaScript. Production in Foundation 6 should... sBe able to easily streamline code by using Sass mixins to create semantic classes. s-FUNFRVJDLMZQBSFEPXOUIFTUSFBNMJOFEŢJMFTJ[F by selectively importing the components I used. s#FTUZMFEUPNBUDINZDVTUPNEFTJHOTXJUIPVUUIF need to override code or change tons of variables.

Yeti launch

“

setup it provides is unparalleled

”

Once a site, app or email is uploaded to Notable Code, users can receive contextual feedback on SPIN UP FOUNDATION PROJECTS JOEJWJEVBMFMFNFOUTBUBMMEJŇFSFOUTDSFFOTJ[FT5IJT WITH THE PUSH OF A BUTTON hopefully means plenty of feedback from clients and Working with Sass and build systems is awesome, but stakeholders on actual elements and not just vague setting up a machine to work with them can be notes about pieces of a website. daunting. Some users really like the increased The app itself was created using Foundation for benefits a full web stack brings, but are Apps and wrapped with an Electron shell. simply not up for the challenge of This allowed the ZURB team to use web JS knows hopping into command line to set up technologies to rapidly prototype and breakpoints an entire build system. then take those straight to a native You can easily use JS to expose That’s why along with the launch app-like experience. the breakpoint of the current of Foundation for Sites 6, ZURB has Future versions will include the device by using the Foundation released a free Mac app (also ability to spin up templates and MediaQuery object: coming to Windows soon) to spin selectively import components, and Foundation.MediaQuery. up any Foundation website, email or in the very near future the current. app. This installs a new instance and app will be expanded to Windows. Yeti runs a build system to compile Sass, -BVODIXJMMCFQFSGFDUGPSOFXVTFSTUP Concatenate JS and even compress images. TQJOVQQSPKFDUTRVJDLMZBOEFWFOGPSNPSF Then it lets users take those projects and upload BEWBODFEVTFSTXIPXBOUUPRVJDLMZBOEFBTJMZ them into Notable Code, a new service to upload create a prototype and share it for instant feedback. prototypes and get contextual feedback straight on the (SBC:FUJ-BVODIBUhttp://foundation.zurb.com/ coded pages. develop/yeti-launch.html.


Front-end

Build your own JS plugin DISCOVER THE TECHNIQUES NEEDED TO CODE A CUSTOM ADD-ON Anyone who has ever needed to make a custom plugin for a web design knows it can be a pain. Even if you utilise a framework, there hasn’t been a lot of built-in support for layering over the top of it and creating whatever doodads and whizbangs you might want. Foundation 6 has solved this problem by ofering a plethora of public APIs to make it faster and simpler to integrate your own custom plugins. Part of the 50 per cent code reduction is due to separating out these common functions and these utilities. We’re going to show you how. What we’re doing: s Setting up a custom trigger for our element to fire, based on the user’s input. sGrabbing the index of the current card, we’ll need that going forward. sCalling on our Foundation.Motion library and animating the card out. For this demo, we used ‘slideOut(Left/Right)’ for swipe events and ‘scaleOutDown’ for button clicks. sOnce our animation is complete, fire our custom trigger and remove the card from the view as we don’t need it anymore. Finally, if we opted for modals, (we did), let’s invoke that modal’s destroy method and clean up our DOM structure a bit. Put it all together, and you’ve got yourself a custom-built plugin that works seamlessly within the Foundation framework. We save you time by providing utility functions. There are a quite a few we didn’t go over in this article, but information about how to use them can be found on our docs page. We’ve given designers a set of power tools to build their own plugins and functionality, and we can’t wait to see what you do with it. The JS utilities in Foundation 6 save you time and efort. Separating out the common functions into smaller utilities saves code and gives you power tools for your production. Foundation not only has very useful popular plugins for you to develop with, but also tons of tools to help you build your own. To view the full code for this plugin, follow this link: github.com/zurb/foundation-sites-6/blob/tutorial/ testing/js/swipin.js.

utilise this with:

$element.on('swipe swiperight swipeleft'); Foundation.util.motion.j is the file that is the JavaScript behind the Motion-UI library. It adds custom classes to add transitions to elements and move them ofscreen. We will utilise this with:

Foundation.Motion.animateOut($element, ‘animationClass’, function(){ //optional callback //do stuff }); This file is dependent on another helper file: foundation. util.animationFrame.js, which has one function – to utilise hardware acceleration to improve animation efects. This will be called with:

}; Plugin.prototype._events = function(){ //add event listeners }; //add logic functions here \/... Plugin.prototype.destroy = function(){ //remove event listeners //remove elements from the DOM Foundation.unregisterPlugin(this); }; Foundation.plugin(Plugin); These are the non-optional methods for each plugin, and naming conventions should be followed (otherwise Foundation._reflow() won’t work!). Everything else is completely up to you. Now that we know how to start a plugin, we can build our Tind...er, Card Swiping plugin, for succinctness and humour, we’re going to call it ‘Swipin’. We know how to build the skeleton of a plugin already, so let’s look at the _init function in detail.

Swipin.prototype._init = function(firstTime) { this.$element.addClass(this.options. containerClass); this.$cards = this.$element.find('.' + Foundation.util.triggers.js is an event listener/ this.options.cardClass); emitter helper file. This listens for click if(this.options.hasDetail && firstTime){ Custom events on: [datathis._makeModals(); columns close="idOfThingToClose"], } You can use the gridcolumn [dataif(this.$element.find('.' + function in order to create a open="idOfThingToOpen"], this.options. column class with a custom size: [databtnContainerClass).length){ @include gridtoggle="idOfThingToToggle"] this.options.hasBtns = true; column(4 of 5) makes an as well as listening for any other events } 80%wide column. if(!Foundation.MediaQuery. you may want to tap into. atLeast(this.options.unstackOn)){ Next up is foundation.reveal.js. We want this._stack(); details for our little image-filled cards, so let’s } programmatically create some modals that will open this._events(); when we click or tap on our cards. Reveal has its own }; dependencies as well, including foundation.util. Foundation.Move(timeOfAnimationInMS, $element, function(){ //apply animations/transitions here. });


Build a responsive card swiper We’ll start with some of the utility functions and existing plugins we’re going to want:

Foundation.MediaQuery This utility library has a few helper functions such as

Foundation.MediaQuery. atLeast('breakpointString'); as well as an event emitter that triggers when a breakpoint is hit. Foundation.util.swipe.js is a file in the JS folder that adds a swipe event emitter to jQuery elements. We will


sizeAndCollision.js, to properly size modal frames, detect collision events, and set the ofsets of the modal element. We’re going to create these on the fly with:

new Foundation.Reveal($element); and add a few elements within them. That covers the basic components we’re going to need, so let’s see how a plugin is built. The basic structure of each and every JS-based plugin is this:

function Plugin(element, options){ this.$element = element; this.options = $.extend({}, Plugin.defaults, this.$element.data(), options); this._init(); Foundation.registerPlugin(this); } Plugin.defaults = {}; Plugin.prototype._init = function(){ //do stuff this._events();

A few things that we did: sAdd the container class to the root $element for easy styling. sCreate a jQuery collection of our individual cards. s$IFDLBCPPMFBOUPTFFJGXFOFFEUPNBLFPVS modals, the ‘firstTime’ argument is passed from the constructor function’s call to _init(), we don’t want to make more modals when we reflow this plugin. sCheck the markup for a button container, if we have buttons, then we’ll need that boolean in our event handler. sCheck the size of the screen, if it’s below our ‘unstackOn’ threshold, we’ll stack our cards and add the ‘swipe’ event listener. So we know we can programmatically create plugins with our JS, let’s see what that looks like.

Swipin.prototype._makeModals = function(){ var _this = this,

HTML5 & CSS3

Genius Guide

New Foundation for Sites 6 JS Plugins Stick anything, anywhere (nearly) Make sticky sidebars that fix position as the page scrolls and can unstick when they hit other elements, or a sticky topbar navigation that follows users down the page. Items can stick to the top, bottom, left or right and anchor to any other element on the page. Simply add the .sticky class and [datasticky] to an element to create something that sticks. Sticky elements must be wrapped in a container, which will determine your sizing and grid layout, with [datasticky-container].

$modals = $modals.add(reveal.$element); // modal = '
', //declare our reveal markup a temporary variable closeBtn = '

Toggler – add and remove classes without writing JS Quickly prototype interactions by toggling classes onto any element using simple data attributes. To setup a class toggle, start by adding the attribute datatoggler to an element. The value of datatoggler is the class you want to toggle. Also give the element a unique ID so it can be targeted. Then, add datatoggle to any element, with the ID of the target as the value of the attribute. Now, any time you click on this element, the class will toggle on and of on the target.


One

Two

Three

Four

Expand!

No Thanks Yes Please

The Sass:

.swipin { position: relative; top: 50px; .thumbnail .button-group { margin-bottom: 0; margin-top: .25em;


Front-end .button { border: 1px solid #FEFEFE; border-radius: 0px; } } } .is-stacked .column { position: absolute; left: 0; width: auto; transition: transform .5s ease; transform: scale(0.6) translate(0px, -30%); } .is-stacked .column:first-child { transform: scale(1) translate(0px, 0); } .is-stacked .column:nth-child(2) { transform: scale(0.9) translate(0px, -10%); } .is-stacked .column:nth-child(3) { transform: scale(0.8) translate(0px, -20%);; } .is-stacked .column:nth-child(4) { transform: scale(0.7) translate(0px, -30%); }

$(this).css('z-index', '') .find('.' + _this.options.btnClass).show(); }); this.$element.removeClass('is-stacked') .trigger('unstacked.zf.swipin'); this.stacked = false; }; While our cards are unstacked we get:

}; Because the whole card has an event listener, we need to see if one of the buttons was clicked, and if it is then we will stop propagation so our event doesn’t bubble to our [data-open] listener and open our modal. If it wasn’t a button though, let’s allow that modal to open. Our swipe listener will look like this:

this.$cards.off('swiperight.zf.swipin swipeleft.zf.swipin') .on('swiperight.zf.swipin', function(e){ e.preventDefault(); _this._swipe($(this), 'Right'); }).on('swipeleft.zf.swipin', function(e){ e.preventDefault(); _this._swipe($(this), 'Left'); }); Which calls this:

Which, when stacked gives us:

The stack is simple, merely adding a class to the main element, setting a z-index so the cards stack correctly, and hiding buttons as we’ll be swiping now:

Swipin.prototype._swipe = function($card, dir){ var isYes = dir === 'Right'; this.dismissCard($card, isYes, 'slideOut' + dir); }; And this dismisses our card with the ‘slideout’ animation to the left or right. This function, is the bread and butter of this whole plugin. We wanted to make two common user interactions, click buttons and swiping right or left, and combine them in a responsive way with a recognisable layout.


Swipin.prototype._stack = function(){ var counter = this.$cards.length, _this = this; this.$cards.each(function(){ $(this).css('z-index', counter) .find('.' + _this.options.btnClass).hide(); counter--; }); this.$element.addClass('is-stacked') .trigger('stacked.zf.swipin'); this.stacked = true; }; The _unstack function is pretty similar:

Swipin.prototype._unstack = function(){ var _this = this; this.$cards.each(function(){

How to build with the Motion UI CHECK OUT FOUNDATION’S SASSBASED ANIMATION LIBRARY Motion UI ships with over two dozen premade CSS transition classes, which we used in the tutorial. However, if you want to streamline your CSS output, and create more fine-tuned efects, you can use Motion UI’s Sass mixins. First, comment out

@import motion-ui-transitions in app.scss to remove the pre-built classes. Next, add this code to your Sass file. We’ll replace our


Now we’re getting somewhere! Of course, though we have our cards and they stack nicely, we have to be able to do something with them. Let’s look at our click and swipe handlers…

Swipin.prototype._handleClick = function(e, $card){ var $target = $(e.target), isBtn = $target.hasClass(this.options. btnClass); if(isBtn){ e.stopImmediatePropagation(); var isYes = $target.hasClass(this.options. yesClass); this.dismissCard($card, isYes, this.options. animOut); }

basic slide with a custom hinge.

.hinge-in { @include mui-hinge( $from: right, $fade: true, $duration: 0.25s, $timing: easeInOut ); } .hinge-out { @include mui-hinge( $state: in, $from: right, $fade: true,

Swipin.prototype.dismissCard = function($card, isYes, animOut){ var trigger = (isYes ? 'yesplease' : 'nothanks') + '.zf.card', idx = this.$cards.index($card), _this = this; Foundation.Motion.animateOut($card, animOut, function(){ $card.trigger(trigger, [$card]).remove(); if(_this.options.hasDetail){ _this.reveals[idx].destroy(); } }); };

$duration: 0.25s, $timing: easeInOut ); } Lastly, in

plugin.js , replace the references to

slide-in and slide-out with hinge-in and hinge-out When you refresh the page and use the plugin, you’ll see the new efects in place. You can refer to Motion UI’s full documentation (at https://github.com/zurb/ motion-ui) to learn more about making use of the custom efects.

HTML5 & CSS3

Genius Guide

A look ahead at Foundation for Apps 2 WHAT DOES THE FUTURE HOLD FOR ZURB’S WEB APP FRAMEWORK? Last year ZURB launched Foundation for Apps, an Angular-powered framework that was primarily focused on creating fully responsive web apps. It includes a flexbox-powered grid built for flexible, responsive app layouts, in addition to a series of Angular directives for creating of-canvas panels, modals, notifications, and more. Foundation for Apps was created as a brand new framework, because the team at ZURB felt like Foundation 5, while an amazing tool for building websites, was not as great when it came to building web apps. Further, there were no existing solutions in the open source world for building fully-responsive web apps designed specifically for the browser. Much like how Foundation for Emails (previously known as Ink) is designed specifically for HTML email, Foundation for Apps is designed specifically with HTML apps in mind. The framework borrows fairly heavily from existing ideas in Foundation for Sites, but it also includes many unique components specifically designed for responsive web apps, including a flexbox-powered app grid, collapsible panels, flexible menu patterns, and responsive action sheets. The framework’s JavaScript is built on the

Angular framework, so it’s specifically designed with single-page apps in mind. Foundation for Apps also shipped with a small plugin called Front Router, which allows for the creation of Angular routes (URLs) directly within the HTML of each page. Version 1.0 of Foundation for Apps launched in December of 2014, and the Foundation team is already hard at work on Foundation for Apps 2, which is going to be powered by version 2.0 of the Angular framework. Foundation for Apps 2 features even more robust responsive layout options, a greatly improved visual style, and more powerful Angular components. Many ideas developed in Foundation for Sites 6 will also be ported to Foundation for Apps 2, ensuring it features all the latest improvements. Angular 2 is a drastic departure from Angular 1, so the JavaScript codebase will be overhauled to fit Angular 2’s new design patterns. The code will also be written in TypeScript, a new superset of JavaScript designed by Microsoft – it’s also the oficial language of Angular 2. Angular 2 is due to launch next year, and ZURB will be at the forefront of Angular 2 development with Foundation for Apps 2.

where they’re opened. Sone of the features in 2.0 include: s"GVMMZŢMFYJCMFHSJE— even on small screens! That means you can create any number of columns and have a fully flexible small grid. s#VJMUXJUI4BTT— This means you can wield the powers that come packaged with Sass including variables, mixins and partials! s/FXUFNQMBUJOHMBOHVBHFn*OLZ— Say goodbye to sifting through hundreds of pesky table tags. With Inky you can write tags like “” to spit out the six table tags needed to just get the skeleton of your email together. s)FMQGVM6*DPNQPOFOUT— Row, Columns, Callouts, Inline Lists, Vertical Lists, Block Grid and Thumbnails. s*OMJOFBMMPGUIFTUZMFT— There’s a handy Gulp task that inlines all your CSS from a remote stylesheet. s)BOEMFCBSTUPLFFQZPVPOUSBDL— We’ve included the support of Handlebars templates to keep you from repeating yourself! Things like the header and footer of your email can stay the same, allowing you to change only the content that matters! We’ve also packaged up a handful of battle-tested templates to get you up and running with Foundation for Emails 2.0! We’re really excited to share the workflow improvements with the world, and can’t wait to see what you can do with it.


“

Angular 2 is due to launch next year, and ZURB will be at the forefront of Angular 2 development

”

Responsive emails GET ALL-SCREEN FRIENDLY

Brandon Arnold Foundation Lead, ZURB ”We wanted to learn how people actually used Foundation, so we travelled around the world and hopped on hundreds of calls to actually watch how the community used the Framework and discussed what they needed from it. It was amazing!”

Responsive email design has been growing steadily in popularity, and it’s no surprise as to why: 47 per cent of email opens are actioned on a mobile device (litmus.com/blog/mobile-opens-hit-record-highof-47), and some brands see upwards of 70 per cent of their emails opened on mobile. Ensuring that emails looked good on any device was imperative, therefore ZURB created Foundation for Emails, formerly known as Ink, for our own emails. This was then later released to the general public as open source software. Foundation for Emails helps people build responsive emails that look great on all major email clients, especially Outlook! We took on the significant workload of figuring out all the diferent quirks in all the most popular email clients and devices in order to provide a framework for creating emails that just work, no matter

&YBNQMFDPEF

A better solution than this:


Front-end

Is your content king?


Content-led design is the future. Get ready for your brand to succeed with a seven-step plan


HTML5 & CSS3

Genius Guide

Why do you need content strategy? STOP! DON’T DESIGN A THING UNTIL YOUR CONTENT STRATEGY IS SOLID Design is content. Content is design; it’s time to get over the old ‘designers-don’t-do-words’ story. It’s time to get intimate with content, and embrace it as the first fundamental part of any design journey. But before we begin, let’s start by defining what a content strategy is. There are so many versions of this answer, but really every single one boils down to this: a content strategy is a road map. To make better design decisions, you need to know what content is needed for the business to fulfil its promise. For example, if your client wants to be the best online pet store, you’ll need to know what content the customers will be expecting and demanding from such a proposition first. Otherwise, anything you produce will fall on deaf ears – or worse, it’ll bug them so much, they’ll start spouting bad press about your brand. It really does happen, for something so seemingly small. So why do you need content strategy? It grounds you. It saves time. It saves money. It saves your sanity. When you start talking to your client about their business vision and the content they need to fulfil that promise authentically, you can start to have a conversation about the experience you’re creating, not simply whether the logo is in the right place or the right size. Imagine, a client/designer relationship where you’re both focused on the nuts and bolts of the content first, where the client doesn’t simply say they love it, like it, dislike it or hate it – they can articulate why it does or doesn’t fit. It’s time for some new thinking. And if you’re someone who’s serious about solving problems with your design, this is really, truly the new way to work.

Natasha Spice Designer at Folk @natashalindblum

“

Starting a project off with a content strategy means I can solve problems for real people. Designs can look and feel fantastic, whilst leaving the client and the end-user feeling empowered


” Five masters of content cartography THESE ORIENTEERS REALLY KNOW THEIR WAY AROUND THEIR BRAND VISIONS

airbnb airbnb.co.uk Airbnb’s content courses through the site. Belonging is everything, so customers feel at home anywhere in the world. Warby Parker warbyparker.com Everything feels like part of a whole. Consumer empowerment, the cool but not over-the-top previews. Shame they’re stateside though. Hatchet + Bear hatchetandbear.co.uk Homely, rustic, unique – Hatchet + Bear know themselves. They understand consistency of personality, which is why they’re always out of stock. Go Pro gopro.com Go Pro’s genius hinges on cleverly showcasing its users’ footage throughout the site experience – it’s marketing that makes itself. General Electric ge.com By creating content linked to vision, the story General Electric tells goes from boring to brilliant, fostering genuine community and action around a greater cause. HTML5 & CSS3 Genius Guide 61

Front-end

Getting started THE BASICS OF A KILLER CONTENT STRATEGY, IN LINE WITH YOUR BRAND VISION So, you’re about to design a website. Hold it. First, we need to hail back to the old school and draw up a scenario to really think about the process.

Case study

ASOS

asos.com

Most people are at least aware of ASOS in some capacity, even if they don’t fall into their 20-something demographic. It’s an online fashion superstore, fundamentally. But they are so incredibly good at seamlessly incorporating their content into design, product and messaging that it would be rude to leave them out of this feature. Flawless user experience and targeting means that their customers have literally no reason not to buy again, again and again. Everything is spot on, and laser-focused.

Let’s say Mr and Mrs Customer saunter up to you and say, “Hi, I’d like to buy a car.” And you say, “Sure, what kind of car do you want?” “Any will be fine,” they reply. “Four wheels and a chassis.” You nod. You head over to the garage, and after a few minutes, you pull up in a shiny new hatchback. They look plain-faced for a second.

They’re great at weaving stories through their products and collections, but notice that it’s never ever contrived; think the Festival Chic theme that takes control of their Women’s section. This is, once again, something that their customers genuinely want; it’s a style that meets their needs and ambitions at the current time in context with what’s happening in their customer’s worlds. It’s also a theme that is bound to be a big product seller for the company too.


“That’s not going to work,” Mrs Customer says. “Where will our five children sit?” Don’t clench your fists in fury just yet. You could have predicted this.

The user journey

They’re exceptional at picking partnership opportunities which feel ‘on-brand’ like Britain’s Next Top Model for example, and a variety of festivals – right now ASOS are working on connecting clientele with Glastonbury. Like their content, this is down to good old-fashioned research. The time, the place; the connection. These Every page is partnerships are tailored to the a landing page consumer’s needs to a hair’s width.

What does a typical user want to do? What are their goals in life, their gains and their pains? Put yourself in their shoes for a second. They might want to spend People won’t just be landing more time with the kids. They might on your homepage. Think about want to succeed in their job, or the multitude of ways a customer attain the perfect work-life balance. can come to the site. Each page Whatever it is, you need to find this think of. This is bigger than business. should be self-contained, goal out, and articulate exactly how The answers here will be more honest, self-explanatory and you can help them achieve it with your and more valuable than a dozen surveys. unconfusing. website. If content is king, then the Sure – they might not be as representative as customer is the supreme overlord of the a 10,000 strong body of consumer data, but it’s universe. You want them to provide the clicks. more specific. It’s real. But how do you get the kind of information to make All you need is a trend of five or six, and you can start this specificity happen? Everyone knows how annoying it to get a feel for a customer type and then following on can be to have some anonymous organisation cram a from this you can start to sense the kinds of content that survey down their throats for the chance to win x or y. might help them to achieve what the clients actually The problem here lies in the approach. Hell, we’re already want to achieve. Another benefit that can be gained here kicking it old school, so let’s just hang around for a while; is that you can gain useful, precise feedback on ideas the best way to find this information is to physically talk roaming uncharted territory. to people, face to face. Talk to your friends, neighbours, It’s a good idea to evaluate any existing content once family members, clients, and anyone you happen to be you’ve done this. This includes anything you or your chatting to through sheer serendipity. client may have already, but focuses more specifically on Ask them what makes them happy, sad; ask them your competitors. what would be their proudest moment if they had the Get a big list – brands whose products are similar, opportunity. Ask them what grinds their gears, and what whose audience is similar, whose mantras are similar – they’d like to have done as a kid. Everything you can


and pick them apart. You’ll usually find a hair’s width angle in the market that’s untapped by anyone. Learn it, own it, master it. This is yours. Write the user and competitor analyses down. Stick them on the wall. They’re your bible now.

Sitemapping Before you start writing any content, or drawing up any designs, you’ll need a comprehensive map of the pages you need, an idea of what they’ll contain, and how they’ll interact with each other. A logical sitemap enables you to maximise your user experience; to see the bigger picture ahead. It also makes it infinitely easier to delegate content generation tasks to freelancers when you’ve got every item of detail listed out. Moreover, the impact of call to actions can be clearly distinguished for an excellent site journey with admirable click-rates. This same concept is true when it comes to actually designing each page and page

HTML5 & CSS3

Genius Guide

Mobile and desktop are one thing, but when you’re ASOS, you’ve got a dragon’s wealth of content to deliver. And people want to read it. That’s why they span multiple channels – digital and analogue – ofering things like the ASOS magazine, which you get for free with ASOS Premium.

ASOS are adept in knowing their customer. This knowledge allows them to create content that is always relevant, useful, interesting and truly resonates culturally with their customers. This makes users want to ofer things like their phone number as they know it’ll be used to enhance their experience.


ASOS live and breathe omnichannel. The symbiotic relationship between content and design is wholly consistent everywhere – from the website to email messaging, to social media, and even their postal slips. This means that you always know where you are, and this builds excellent trust and usability.

component when the content’s in place. Here’s the slightly tricky part though. How can you design a website that melds seamlessly with its content if you don’t have the content itself, using just lorem ipsum to fill in the spaces? And how can you write excellent content when you’re unsure of its design context? The answer is simple: mock up the content yourself. It might not seem like it’s in your remit, and as far as finished products go, it’s not. But lorem ipsum is the mortal enemy of a content-first approach. If it’s an events page you’re drawing up, throw in the date, a title and a description. It doesn’t have to be good content; it doesn’t even have to be grammatically correct but it’s better

“

than using a placeholder when you have no idea what the finished product will actually look like. Leave the writing of any of the fancy stuf to your copywriter. This extra distance will make it easier for clients to see the whole picture, and get a better feel for the site in the lead-up to sign-of. It makes it a hell of a lot easier for your content writer to populate too. And finally, it makes it so much easier for you to design a site whose essence is there already. Another point is an important ‘don’t’. Don’t ever, under any circumstances allow the ‘luxuriousness’ of a brand to influence the readability of its content. Here’s an example. Let’s say your site’s a piece of high-shooting

A logical sitemap enables you to maximise your user experience; to see the bigger picture ahead

”

Plot an effective analysis You need a solid understanding of a number of things in your competitor analysis. This ranges from homepage meta descriptions and tone of voice, to content themes, objectives, and how efective these appear to be. When you’re confident in this, you can plot it and put this to use. You’ll need to select two scales, set against axes, eg in a cross-section of cosmetics brands, sustainability/technology vs. fun/professional. Put an X for each brand studied according to how they fare on these scales. Once you’ve plotted eight to 12 Xs, you’ll notice a significant gap in this spectrum. That’s the flavour your content needs to have to secure a space in the market.


Front-end

Finisterreuk.com is pretty minimal. Notice that only the boldest CTAs are present on mobile

www.fullengineeringbook.net Don’t fall into the ‘content dump’ trap. If it’s an important CTA, hero it on your homepage, even on mobile devices

You’ll never get it straightaway

contemporary art. It sells high-price-point goods to high-net-worth customers. The first temptation for many is to put on airs with the content. “But if it’s a luxury product, surely it’s got to sound luxury, right?” Wrong. Kind of. If your product or service is what your customers are looking for, don’t put them of with verbosity. Often, you’ll lose traction in your attempts to be descriptive. Keep sentences simple, and try to include just one concept in each. Use the active voice, and write as if you were having a conversation with your customer.

Start as close to the end as possible, and don’t waste your reader’s time The legendary American writer, Kurt Vonnegut, said to remember these two points. Ultimately, it boils down to a

“

Learning your customer takes time. You’ll need to use analytics to check how they’re interacting with few things. Research your customer content. You need to take this With this information to hand, next extensively. The more you know about information and constantly you’ll need a sitemap. As mentioned the customer, the greater clarity you’ll tweak and improve. earlier, this gives you a pragmatic have on the direction, themes and purpose knowledge of every pathway, every step, of your content. every call to action, and every goal within your Know their desires, their fears, their ambitions, their site. It naturally gives you a comprehensive list of every habits, their favourite brands, and more. Research these page too, so it’ll keep you and any content delegates brands – and other competitors – extensively. This sane and ordered when it comes to designing and includes any content you’ve done before. The more you populating the site. Remember that dropping in some know about them, the more likely it is that your content rough working copy gives the work some vibrancy. will find a home in the marketplace. With your themes and content/design relationship Looking at your own past content will assist you in bubbling along nicely, don’t neglect to check your identifying why things may not have worked so well readability. You can do test this out by using a number of previously, and might highlight ways you can specifically online sources – just look up Flesch-Kincaid, and aim for improve. This research stage is crucial, as it’ll define the a score of 65 in its Reading Ease results. Note that the parameters for your content to sit within. higher the score, the easier it can be understood and vice versa. Texts like Time magazine for example have a score of about 52 whereas the BBC News website comes up as 67.4 (bit.ly/1Hq0pmd). Remember: even the most elite, technical or hard-to-find products need to be accessible to an online reader. Okay. Now you can move past content strategy and start designing again.

With your themes and content/design relationship bubbling along nicely, don’t neglect to check your readability 64 HTML5 & CSS3 Genius Guide

”

HTML5 & CSS3

Genius Guide

to Desktop vs mobile Nine Follow SHOULD CONTENT DIFFER FROM DESKTOP TO MOBILE? YES. ABSOLUTELY

If your customer is looking for of-the-cuf, pass-the-time accommodate users’ stubby fingers. Similarly, but more to content – say they’re commuting on the Tube – then it’s do with software and download speed restrictions, there unlikely they’ll be viewing it on their PC device. Say are far fewer large graphics on a mobile site. It’s kind of they’re conducting some in-depth research like the distinction between a corner shop and Don’t for a paper: they won’t be doing it on a supermarket; one’s a little more forget buttons their smartphone. This kind of expensive, with a smaller range of Ban ‘Submit’ from your distinction is especially true for products available, but it’s super easy dictionary. Use CTAs which grab features like store finders. and requires much less efort. For the user attention and are relevant to Chances are, people are more other, the opposite is true. Both play what you want them to do. If you’re likely to use a smartphone for an important role in our lives ofering something for free, use viewing content when they’re on the Credibility or bust ‘get’. If you want to inspire go – so bringing it to the forefront for People online are sceptical about a purchase, say mobile is important. If you want to take everything, so make sure to include trust ‘purchase’. it one step further, great integration with indicators in your designs. And while you don’t map software means your customers will have to state them in your copy, just keep your trust know you’ve thought promises at the front of your mind. Place any trust about their journey. indicators somewhere that follows the eye so they feel Next, and unsurprisingly, mobile should be as minimal natural and unobtrusive. as possible. It’s pretty obvious that when you’re designing for 320 x 480, you can’t include half the stuf you would Where does site traffic come from? for 1920 x 1080 without sacrificing a scary chunk of usability. This is when your user journey from before comes in handy. Think back to their pains and gains. What content do they want? Boil every last speck of your site content down to the essence that drives your customer, and minimalism won’t be a problem. On a related note, there’s a lot less floating hypertext content on a mobile site, but that’s not because the links aren’t there. You’ll typically see a greater number of Source – Shopify, August 2014 buttons and bars which serve this linking function, to

THE ALL-IMPORTANT ACCOUNTS

Alistapart @alistapart For people who make websites – some fantastic resources and authors.

Ian Lurie @portentint Ian provides great tips for optimising everything to do with web and design.

Jonathon Colman @jcolman The content strategist at Facebook shares his thoughts and insights about everything you do.

Kristina Halvorson @halvorson

www.fullengineeringbook.net 50.3%

49.7%

Content Strategy for the Web contentstrategy.com @BrainTraffic Written by Kristina Halvorson and Melissa Rach, this is one of the best books about content strategy available today. It gives so much information and many tips to make what could be a complicated process very simple, and it gives some totally solid reasons to share with clients about why it’s best to get the content parts sorted first above all else. It’s a manual that provides you with the knowledge to deliver meaningful and efective content when and where it’s most relevant to your clientele. It also helps you understand processes, teaches you to make better decisions and plan for the long term.

Author of one of the most useful books on content strategy, Content Strategy for the Web, Christina knows her stuf.

The Content Marketing Institute @CMIContent As the name suggests, this Twitter account is more focused on content marketing, but still has some great resources and insights.

Melissa Rach @melissarach The co-author of Content Strategy for the Web, regularly posts about the latest content case studies. Melissa describes herself as a content nerd.

Contents magazine @contents A digital magazine dedicated to the art of content strategy & online publishing. It hasn’t been updated since 2013 but still divulges some must-know topics.

We Live Content @welivecontent This account shares timely and useful resources for content marketers and content strategy professionals. Something new appears daily.

Karen McGrane @karenmcgrane Karen is an experienced content strategist who on a good day makes the web more awesome. She is also the author of Content Strategy for Mobile.


Front-end

Design aspect ratiobased layouts with HTML and CSS Building tile-based UIs can be complex. Discover how to make this process easy and create responsive aspect ratio layouts




HTML5 & CSS3

Genius Guide

Traditional web builds assume content is flexible and likely content managed. Boxes change in height as the page resizes because they’re defined by a percentage width and their content. But this flexibility isn’t always an absolute requirement. We can craft more interesting layouts when content is well defined. Aspect ratio-based layouts prioritise proportion over content. In this sense the process is much more like editorial – with all of its pros and cons. The aspect ratio approach gives us more design control but it’s much more labour intensive to produce a good experience. If your client does not want to engage in editorial processes or requires flexible systems then steer clear! This approach is fantastic for scenarios where data is well defined or can be truncated without issue or where iconography is more important than text. Dashboard pages, widget collections and even some web applications are all digital experiences that could benefit from this approach. Here we’re going to cover how to semantically build aspect ratio-based layouts, approaches for dealing with overflowing content, and overcoming the issues with making aspect ratios work responsively.

1. Download files

3. Style aspect ratios We’re using the ratio data attribute we created as a selector (supported by IE9 and up). Set the height to 0 and control the size of the box with padding only. As we’re creating a square, the padding is equal to the width. We also hide any child content if it were to overflow.

.aspect[data-ratio="1:1"] { max-width: 100%; height: 0; padding-bottom: 100%; overflow:hidden; background: rgb(211, 22, 22); color: #fff; }

.aspect-content { margin: 20px; }

6. Add imagery Working with images in aspect ratios is tricky. We want the image to scale, but we don’t want to distort it. With this in mind, we will need to write markup that enables us to crop it if necessary.

Directions

4. Harder ratios Using 4:3 is a little more complicated because we have to do some maths to figure out this ratio. The way to calculate how much padding you need to give an element is by dividing the height by the width and multiplying by 100. So for example we would use in this case: 3 / 4 = 0.75 * 100 = 75.

.aspect[data-ratio="4:3"] { max-width: 100%; height: 0; padding-bottom: 75%; background: rgb(223, 28, 66); overflow: hidden; color: #fff; }

7. Style the image Here we position the image absolutely, relative to its parent container. We also tell it to fit its parent container with the max-width property and have it crop from the bottom right. We also want this image to sit behind everything, so give it a z-index of 0.

.aspect { position: relative; } .aspect img { max-width: 100%;


The ZIP file provided on FileSilo for this tutorial contains all the assets that we will be using along with a basic boilerplate setup. We’re going to use an npm package called http-server to serve our files.

2. Mark up aspect ratios

5. Style aspect content

The aspect ratio boxes don’t have any semantic value in this tutorial, so we’ve used
tags. They could be
tags if appropriate. We’re also using data attributes to semantically describe our ‘aspect’ element.

The content inside any given aspect box will look bad if it sits flush against the edges of the box. We can get around this by giving a margin to the .aspect-content div, which should wrap all written content in a given box.

Compress images The images provided in this tutorial are uncompressed – they weigh 4MBs each. Images can be compressed in Photoshop with the ‘save for web’ dialog or an npm module like imagemin.

Left

The image we’ve put in is far too large. Let’s make it fit our page better Top left

This is the aspect-ratio technique. The rest of the tutorial focuses on working with other ratios and content Top right

This is what you should see when serving the files from the start-here folder


Front-end position: absolute; right: 0; bottom: 0; z-index: 0; }

8. Content to the front We need to bring the content to the front so we’re giving it a higher z-index than the absolutely positioned image and we give it the lowest possible z-index for this efect.

.aspect-content { z-index: 1; position: relative; }

9. Link the boxes to other pages Here we take the 2:1 box and wrap it in an anchor element. In HTML5 this is valid so long as there isn’t an anchor within an anchor. We also give this anchor a class, which we will use to change styles specifically to this box.

10. Style directions We’re overriding the normal .aspect-content styles so the content area fills the box and resets margins. Flexbox brings the content to a vertical and horizontal centre.

.directions .aspect-content { width: 100%;

height: 100%; margin: 0; position: absolute; display: flex; align-items: center; justify-content: center; }

11. Animate hover on directions We want the hover state to change the entire tile as the area is clicked. We’ve created a cubic-bezier transition for a nicer animation and all attributes that change between normal and :hover states will animate using this.

.directions .aspect-content { color: rgb(55, 55, 55); background-color: rgba(255, 255, 255, 0.83); transition: all .5s cubic-bezier(0, 1.14, 1, 1); } .directions:hover .aspect-content { background-color: rgba(47, 47, 47, 0.8); color: #fff; }

12. Animate the image hover Fading the image out on hover will pull focus to the text and therefore the action of the box. We use the same animation and timing as the other hover efects on this element. The short duration is important because we’re used to state changing instantly on hover. Animations over .5s feel sluggish.

opacity:.5; }

13. Bring it together Now we’ve got the diferent aspect ratios and some styles together we need to pull it together. Because the aspect boxes are fully responsive we can simply wrap them inside a div that limits their width.

14. One half and one quarter The one-half class limits the width of its child elements to 50% and will try and float itself along side other content. It works for siblings like other grid systems, but you also nest them to get quarters.

.one-half { width: 50%; float: left; }


Avoid styling Large images with CSS styles on (like opacity) can take longer to render which makes animations slow. Try avoid applying styles to images and instead animate simpler elements.

Top left

Positioning the content over the image required both z-index and position-relative properties Top right

Flexbox works across evergreen browsers. For older browsers the text will just be aligned top left Right

Instead of modifying the image we simply use transparent backgrounds and animate the content that sits on top of it


.directions img { transition: opacity .5s cubic-bezier(0, 1.14, 1, 1); } .directions:hover img {

15. Going responsive Where we go responsive will depend entirely on the content you wish to place in the boxes and how you structured the one-half markup. You will have to resize

HTML5 & CSS3

Genius Guide

Changing aspect ratio sizes Unfortunately, aspect ratios don’t work across all screen resolutions so when we go responsive we may actually end up with a bad looking UI. There are a few options available to us to fix this problem: write JavaScript to group the elements diferently under diferent .one-half boxes, write JavaScript to modify the data-ratio attribute as required or write CSS to change up the aspect ratios themselves. These diferent approaches all have pros and cons. The upside of using this pure CSS solution is that it performs really well across all devices, but it also means that you have elements which say that they are 1:1 but in reality they will have many diferent aspect ratios as and when the page resizes.


your window and see where things break. In the build example provided there were adjustments needed to the one-half class at 1000px.

@media screen and (max-width:1000px) { .one-half {width:100%;} .one-half .one-half {width:50%;} }

16. 420px and below We also had to bring the nested halves back to 100% at 420px and below so all the content remained visible. In the build example there are 1:1 boxes inside the nested halves, so we’re still able to see two boxes in a portrait view on a mobile device.

@media screen and (max-width:420px) { .one-half .one-half {width: 100%;} }

17. Changing aspect ratio There was also a need in the example to modify the aspect ratios as the browser got smaller. This was because they became too large when the halves stacked. It feels counterintuitive to have a ratio of 1:1 look like 2:1, but this is the best performing solution.

@media screen and (max-width:1000px) { /* Make 1:1 become 2:1 */ .aspect[data-ratio="1:1"] { padding-bottom:50%;} /* Make 2:1 become 4:1 */ .aspect[data-ratio="2:1"] { padding-bottom:25%; }}

18. Aspect at tablet

The square aspect ratio had a lot of issues in the tablet/ large phone area of screen sizes. Similar to the above we’ve had to take it down to 3:2 at 850px and below and then bring it back to 1:1 at 600px and below.

@media screen and (max-width:850px) .aspect[data-ratio="1:1"] { /* Make become 3:2 */ padding-bottom:66.6%} } @media screen and (max-width:600px) .aspect[data-ratio="1:1"] { /* Make become 1:1 again */ padding-bottom:100%} }

{ 1:1

21. Finishing touches – styles { 1:1

19. Aspect at mobile At 420px and below, the 2:1 box (which was 4:1 at tablet) was looking a bit thin, even though all the content fit fine with the ratio. After some trial and error, we found that the 2:1 ratio worked better and it being the original ratio was an added bonus!

20. Finishing touches – markup Add another call-to-action tile to see how it works with your other tiles in the layout. In the example it sits within a nested one-half container. This is a fairly straightforward CTA as there isn’t much content here, it should just work with the responsive styles that have already been written.

Sponsors

View our list of sponsors

Here we’re using the :after pseudo element to place an image after our tile. Then we absolutely position it over the top. We need to make it clear that these tiles are CTAs on a web platform where users aren’t used to seeing them in action.

.sponsors .aspect:after { content: ''; width:13px; height:20px; background-image:url('./img/arrow.png'); position:absolute; right:20px; bottom:20px; transition: right .5s cubic-bezier(0, 1.14, 1, 1); }

22. Finishing touches – animation To make the hover state a bit more obvious we can change the ‘right’ property which we set up a transition for in the previous step. It’s fairly subtle but reinforces the notion that the user is interacting with an element that will take them somewhere.


Front-end

Make dynamic graphics with the p5.js library Create interactive drawings with HTML5 Canvas and p5.js, a JavaScript port of the popular open source Processing library



DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/nks-887

HTML5 & CSS3

Genius Guide

Since the early 2000s, the Processing library has been used by designers and artists as a creative coding environment to create stunning visuals with very few lines of code. The Processing library is actually a Java library and this is useful for creating interactive installations and prints. The p5.js project is a new initiative to bring the ease of Processing to the web by enabling designers and developers the same easy controls to draw to the Canvas element in HTML5. This means that live, interactive visuals can easily be created for just about any HTML5 capable browser, which is almost any browser from the last three or four years. The screenshots for this project do not do it justice as the project has to be interacted with in order to see it work properly. We are going to be creating an organic shape that is drawn pretty similar to an old spirograph, but it’s going to morph, change size, shape and colour based on the user’s mouse input. As the user moves their mouse, the shape ripples and changes to create a stunning interactive shape-shifting visual. With a little manipulation this could easily become a music visualiser!

1. Start the project Open up your web browser, type in p5js.org, click Download and then choose Complete Library. Once it has finished downloading, open the folder ‘emptyexample’ and copy the file p5.min.js into it. Open index. html in your code editor and change the script file to use the minified version.

bare-bones template ready for us to start with the coding process. Open this up in your code editor and you will see that there are two functions here. The first function, setup, is used to set all the things at the start of the project like background colour and size. The draw function is called every frame.

function setup() { // put setup code here } function draw() { // put drawing code here }

3. Edit the setup function In the setup function add the code that is presented below. This creates a new Canvas element to draw into and set this up to be the current width and height of the browser window. The background of the Canvas is set to black, and the Canvas itself is set to smooth, or antialias. This will ensure that the lines are crisp but not jagged at the edges.

createCanvas(windowWidth, windowHeight); background(0); smooth();

4. A new function

stroke(255, 255, 255, 28); ellipse(0, 0, 120, 80); }

5. Start the draw function Now inside the draw function, add the first line in the code below, which is the same as in the setup, for making the background a black colour. The diference here is that it is called every frame and therefore removes any drawing from the previous frame so that we end up with a new drawing every frame. The translate line moves the drawing point to the middle of the browser window.

background(0); translate(windowWidth/2, windowHeight/2);

6. Draw around a circle A ‘for’ loop is added here to create 720 ellipses. The ‘for’ loop increases by 0.5 every loop so it will draw 720 instances. The push line enables the drawing to rotate around the middle of the screen. The drawing position is then pushed out 200 pixels on the y axis.

for (var i=0; i<360; i += 0.5) { push(); rotate(radians(i)); translate(0, 200);

www.fullengineeringbook.net <script language="javascript" type="text/ javascript" src="p5.min.js">

2. Open sketch.js After installation, the app is usually extracted. The main code for our project will be found in sketch.js – this is a

In between the setup and draw function, add a new function as we have shown in this step. This code is called to draw an ellipse on the screen and we will be drawing a large number of ellipses later using this. The fill colour is turned of and the stroke is white but with a low opacity that is just over 10 per cent visible. The ellipse is drawn from 0, 0 pixels to 120, and 80 pixels on the x and y axis respectively.

Adding colour in p5.js Colour in p5.js follows a pattern of 0-255 to give 256 colours for each colour channel and this in turn will give around 16 million diferent colours! To get random colours, a random number in that scale can be created.

function drawEllipse() { noFill();

Left

The p5.js library can be downloaded from p5js.org where all documentation can also be found as well as some very useful example files to introduce you to some concepts. Also look out for the p5.js editor, available on Mac OS X and coming soon to Windows and Linux Top left

Once the core code is in place it can be run and you will see a circular pattern appear on the screen. Next we will make this modulate and change based on mouse position so that it is interactive with the user Top right

By adding some minimum and maximum values to the waves undulating around the shape, we can start to affect the interaction of the graphic in much more detail than we were able to previously


Front-end 7. Rotate again Now as the drawing point is 200 pixels out from the centre of the screen, p5 will draw an orbit around that point but first it will rotate again here. The whole drawing will be scaled but it will also be based on a sine wave that modulates between 1 and – 1 so that the result is a very organic shape.

rotate(radians(i*3)); scale(map(sin(radians(i*6)), 1, 1, 0.5, 1), map(sin(radians(i*3)), 1, 1, 0.5, 1));

numbers that draw the shape. Here the variables are added just above the setup function so that we can call them from any function that we want. The names are fairly self-explanatory, and you will also see them in action in the coming steps.

var var var var var var

scaleX; scaleY; min; max; radius; r, g, b;

8. Draw the ellipse

10. Scale based on position

Now as the drawing point is at the right place, the ellipse is drawn and the pop command places the drawing point back to the centre of the document. Save the file and view the index.html page in the browser to see the drawing of the organic shape in action. Now we are going to change the shape interactively based on the mouse movement of the user.

In the draw function add the following code at the top, and this code will set the values of scaleX to take the mouse’s x position. As it moves 0 pixels to the right-hand side of the screen, those values will be mapped onto a range of values from 1.5 to 11.5. The same thing will then happen with the y position of the mouse and the window height as well.

drawEllipse(); pop(); }

scaleX = map(mouseX, 0, windowWidth, 1.5, 11.5); scaleY = map(mouseY, 0, windowHeight, 1.5, 11.5);

12. Map other values Just below the code that was added in Step 10, add the code that we have included below. It looks very similar to our other pieces of code, but what’s diferent is that this time the position of the mouse on the x axis is mapped onto a range of numbers from just 0.1 to 0.5 and the y mouse is mapped onto 0.8 to 1.8. These positions will provide some subtle diferences in the drawing when they are applied in the next step.

min = map(mouseX, 0, windowWidth, 0.1, 0.5); max = map(mouseY, 0, windowHeight, 0.8, 1.8);

13. Scale again Just like we did in Step 12, locate the ‘scale’ line of code inside the ‘for’ loop. Here the min and max variables are added. Save this and view it in the browser to see how it adjusts the drawing on the screen. Remember that these numbers will be adjusted as the mouse moves around on the screen.

scale(map(sin(radians(i*scaleX)), 1, 1, min, max), map(sin(radians(i*scaleY)), 1, 1, min, max));

9. Add some variables In order to add interactivity to the screen, we will need some variables to dynamically control some of the

11. Amend the ‘for’ scale

14. Change colours


The nature of code Because p5.js is a port of Processing, most Processing code can quickly be adapted. Check out Dan Shifman’s eBook The Nature of Code (natureofcode.com/book) for more information.

Top left

A random colour is generated each time the browser is refreshed, this works well at setting an initial colour but what we really want to do is give the user a little more control over the colour that appears rather than giving them sporadic choices Top right

The colour is now adjusted so the height of the mouse in each third of the screen controls either red, green or blue and this provides a way of adding slightly more control over the colour on the screen Right

Now the radius of the overall shape has been changed so that it is affected by the mouse position on the y axis. The top of the screen makes the object smaller while the bottom of the screen makes it larger


Look inside the ‘for’ loop, further down in the draw function. Here you will see a line of code beginning with ‘scale’. Change the numbers from 6 and 3 to scaleX and scaleY as we have shown here. This means that the code will now take the mouse position for how the shape will be drawn. Save this now and try it out in your browser to see it in action.

scale(map(sin(radians(i*scaleX)), 1, 1, 0.5, 1), map(sin(radians(i*scaleY)), 1, 1, 0.5, 1));

In much the same way as the shape of our graphic can be altered based on where the mouse is, as we have shown in the previous steps, it is also possible to dynamically change the colour. In the setup function add these random numbers for the red, green and blue values. The colour values are measured from 0 (for darkest) to 255 (the brightest).

r = random(255); g = random(255); b = random(255);

HTML5 & CSS3

Genius Guide

Getting to know hello p5.js Starting with a new library can take a little getting used to and a lot of programming languages seem to start with a simple ‘hello world’. Taking this idea further, p5.js created a site called ‘hello p5.js’ (hello.p5js.org), which introduces the basic ideas in a very simple interactive video format. Live code can be seen running alongside the video as the presenters introduce the video. The video itself even has its green screen around the presenters removed live by code in the browser so that the power of what is available through p5.js can be clearly demonstrated. In the video you will see how a particle system is created, a flocking behaviour is added to it and then live windspeed data from New York afects the flocking!


15. Use the colour

In order to get those random colours working add the letters r, g and b to the stroke line which is located in the drawEllipse function. This means that when it draws the ellipse it will also make use of the random values. Save this now and test it in the browser to see how it works and looks. Each time you refresh the page a new colour will be used.

stroke(r, g, b, 28);

16. Colourful mouse moves Having to refresh the screen to change the mouse colour is okay, but we may also want to update the colour based on the screen position of the mouse. This colour efect is possible via an ‘if’ statement as we have shown in the code below, which divides the screen into three horizontal strips for RGB colour. In this step we have started of with the first third and mapped it to the red, giving it a random colour.

function mouseMoved() { if (mouseX < (windowWidth/3)){ r = random(255); //r = map(mouseY, 0, windowHeight, 0, 255); }

the screen. Keep in mind though that each third will afect a diferent colour.

else if (mouseX > ((windowWidth/3)windowWidth)){ b = random(255); //b = map(mouseY, 0, windowHeight, 0, 255); } else { g = random(255); //g = map(mouseY, 0, windowHeight, 0, 255); } }

Continuing on from what we’ve learned in the previous step, we can use the ‘if’ statement to take the last third of the screen and map that to a random blue colour. Then, we can also do the same for the green in the middle. Save all of this now and test it in the browser to see all of the random colours as the mouse moves around, all over

radius = map(mouseY, 0, windowHeight, 100, 350);

21. Set the radius 18. Slight change to the colour The random colour changes have worked well so far, but now we can specify that the colour now changes specifically based on how far down the page the mouse is. To do that we will need to revisit the ‘if’ statements that we have already used in Steps 16 and 17. First, comment out the random line and uncomment the line afterwards. Then, save this and test this change in the browser to see it all working.

//r = random(255); r = map(mouseY, 0, windowHeight, 0, 255);

19. Change the drawing radius 17. Green and blue changes

20. Update the radius

Now in the mouseMoved function, add the following line just before the closing bracket of the function. The y position of the mouse will decide how large the radius of the circle will be. Note that this will never be smaller than 100 pixels and never larger than 350 pixels, but you can change these values if you want them to be slightly larger or smaller.

Now we go back to the shape itself, it is possible to change how large the circle is drawn around the centre point. In the setup function add the radius value as shown here. This started of the project with an initial value of 150 pixels as the radius from the centre of the screen, but this can now be updated.

radius = 150;

In order for these radius values to actually be used, look inside the draw function and inside the ‘for’ loop is a translate line. Update the value of 200 to the radius variable. Now you can save the file and then refresh in the browser to see this in action. There will be a lot of changes now to the shape, size and colour.

translate(0, radius);

22. Fade out Finally it is possible to fade out the drawing from all of the previous frames. In the ‘draw’ function, comment out the background colour. So now we want to set the fill colour to black with a low opacity of around 10 per cent. Then, a rectangle is drawn over previous frames with the low opacity on top and this will cause the previous frames to fade out. Save and test this now to see the final efects in all their glory.

background(0); fill(0, 25); rect(0, 0, windowWidth, windowHeight);


Front-end

Code 3D zoom effects with CSS As seen on scholzandfriends.ch/de

Menu overlay The burger icon will reveal the menu. Clicking this brings a full-screen overlay so that the menu can be navigated.

Zooming 3D effect As the images move at different speeds, they create an effective effect that looks as though the camera is moving.


Image slider The initial content that covers the browser is a giant slider to move through projects with animated image effects.


Animated image

Full homepage

The background image is made of two images and move at different speeds towards the viewer for a parallax effect.

The homepage itself is much larger than shown here as it can be scrolled down to bring more content to the user.


HTML5 & CSS3

Genius Guide

Parallax scrolling on sites is getting to the point of being overdone; as soon as every site starts to have the same features it’s time to start looking to add a touch more originality into the design process. The Scholz & Friends site has taken the familiar paradigm of the parallax efect on images, but has done this with a diferent take. Parallax is usually done with images or content moving at diferent speeds as the user scrolls down the page, this was original and novel five years ago. Instead of doing it this way, the parallax efect on Scholz & Friends is actually a zooming efect, which gives the

impression that a camera is moving closer to the content. Not only that, but this also helps the user to focus on specific content, as the image is brought into the foreground. This gives a very unique look to the content and it provides a freshness that makes a subtle change from the scrolling efects that other sites employ. When content that you design looks just diferent enough from the competition it helps you to stand out as a designer and helps your clients stand out and every designer needs to remember that the success of their clients is ultimately a reflection of their own success.

Fresh paint on a familiar style What our experts think of the site

“Producing content for the image slider in the site requires a fresh approach, almost every site on the web has featured content displayed at the top of the site. To show off Scholz & Friends, a zooming effect was used on the images to freshen up the dated parallax look.” Mark Shufflebottom, professor of Interaction Design

Technique 1. Creating 3D zoom effects To create some of the 3D zoom efects found on the Scholz & Friends site, create a new HTML document and add this code to the body. This will display two images on the webpage.

image is just scaled up slightly so that it looks like the camera is zooming in on the image.

@-webkit-keyframes back { from {transform: scale(1);} to {transform: scale(1.2);} }

EXPERT ADVICE Controlling CSS keyframes As the 3D zooming parallax efect is the focus of this site it can be reproduced using HTML and CSS alone without any JavaScript. This is down to the use of CSS keyframes, which enable us to specify how something will look on frame one and in the final frame of animation. The duration is also controlled in ‘seconds’ as opposed to milliseconds in JavaScript. CSS keyframes normally loop, so in the workshop the animation takes place over six seconds and the default would be for it to start again and loop through. There are some commands that enable us to control exactly what happens with the keyframes and they can be set to play in reverse, play just once, loop a certain number of times or play back and forth. Using the animation fill mode, the keyframes can be set to forward, meaning they play once and hold on the final frame of animation. Set this to backward and they will play in reverse order. Change this to both and it will double the duration, playing it forward and backwards. Using the animation iteration count, the amount of times it loops can be controlled. This will reset on the first frame of animation so be careful of your content jumping back to the start.

animation-name: fore; animation-duration: 6s; animation-fill-mode: forwards; }


2. Wrap them up Now create style tags in the head section of the document and add the CSS rule for the wrapper. This holds both images and centres them on the page. As the images zoom in, the overflow is set to hidden.

5. No prefix code

Newer browsers that don’t require the vendor prefix should also be catered for, so here is the code for those. It’s slightly smaller because it doesn’t have -webkit- in front. Notice the keyframes have the label ‘back’ which is picked up in Step 3’s code.

@keyframes back { from {transform: scale(1);} to {transform: scale(1.2);} }

3. Position the background

6. Foreground image

The background image needs to be positioned absolutely so that each image can be overlaid on top of each other. The animation is going to be stored in keyframes with the title ‘back’. This should hold on the last frame of animation so the ‘forward’ animation fill mode is used.

The foreground image isn’t currently visible because the overflow is hidden. Adding this rule for it will position the foreground over the top of the background image and it aligns to the bottom of the background image, while being 100 pixels in from the left.

#bg { position: absolute; -webkit-animation-name: back; -webkit-animation-duration: 6s; -webkit-animation-fill-mode: forwards; animation-name: back; animation-duration: 6s; animation-fill-mode: forwards; }

4. Add keyframes Safari, Chrome and Opera use the webkit prefix on CSS so here the keyframes are added. As you can see the

#fg { position: absolute; bottom: 0; left: 100px;

7. Finishing the foreground As with the background image this is also being animated to zoom in. The remaining code for the foreground CSS rule sets up to run on keyframes that are labelled ‘fore’. It takes six seconds to run and will pause on the last frame of the animation like the background.

-webkit-animation-name: fore; -webkit-animation-duration: 6s; -webkit-animation-fill-mode: forwards;

8. First keyframes

The foreground keyframes animate two diferent properties at once. They increase the scale and move the image slightly to the left, this helps to give a 3D efect as this zooms in more than the background to make it look like it’s in front.

@-webkit-keyframes fore { from { transform: scale(1); left: 100px; } to { transform: scale(1.4); left: 40px; } }

9. Final keyframes Add the last keyframes to the CSS and then save the document. Opening this in your web browser will show you the efect running over six seconds and you will see the foreground and background moving separately to complete this 3D zoom efect.

@keyframes fore { from { transform: scale(1); left: 100px; } to { transform: scale(1.4); left: 40px; } }


Front-end

Form pop-up modal boxes with pure CSS Show new information in a modal box along with animation effects without loading a new page




HTML5 & CSS3

Genius Guide

Good design is always about presenting information in a way that is simple to understand. And yet, sometimes the amount of information causes a conflict with the need to present information in a way that is easy to comprehend and where the information is still complete. One option would be to separate content onto diferent pages, but this causes scope for unnecessary page loading and poor usability, especially where users are accessing the webpage through a slow internet connection such as via mobile data with poor reception. Modal boxes ofer a perfect solution to the problem by enabling additional information to appear on the page when they are clicked without the need to load a new page. Furthermore, modal boxes can be closed again in order to return the user to the original content without the need to reload. This tutorial looks at several options for how modal boxes can be developed with CSS to provide highly usable designs for websites and web apps that are easy to adapt for diferent types of content you may want to present. The functionality of these modal boxes will focus on easy access in a way that enhances the user experience of the webpage.

1. Get started

page. This will provide information needed by the reader to identify whether they want to read further.

3. Option navigation Next insert the available options that will provide the user with access to additional information. These options will be regular links contained inside a
container. Unlike regular tags that use their href to link to external pages, these links will link to ID components on this page using a # symbol in their href attribute preceding the ID name being linked to.

Alpha Bravo Charlie Delta Echo

4. Add modal boxes The modal boxes will all use
as their container element and will have an optional attribute of datatransition to specify the type of transition they will use to appear and disappear, providing a high degree of flexibility for individual sections.

5. Modal box content Insert content into each of the
containers. Each modal box will need the ability to be closed, which will be triggered by an tag linking to a blank ID using just # for its href. We also want to give this closing button a ‘data-button=”close’ attribute so we can style it later.

x
Bravo

Lorem ipsum dolor sit amet.

6. Initiate CSS styling The main HTML template content is now complete, but the additional CSS stylesheet resource file is still required to add the styling. Create a text file called ‘styles.css’, making sure that your text editor does not add .txt as a file extension. These also need attaching from the section of HTML document.

7. Style HTML body Don’t forget that the and elements on a webpage are set to a height of just one line by default, hence causing problems if we want to create a container that has a full webpage height. Solve this by setting the and elements to be full height in the CSS.


First, declare the main HTML page structure, including the head and body section within the HTML page. We will need a content container made from a div element with an ID called container to control page content flow.

2. Content overview With the main layout elements in place, we can insert the main content inside the container element. The page will have a descriptive title and introduction text to provide the main overview of the information contained on the

Multiple transitions Use data attributes to enable multiple transitions to be defined that can be easily added to individual modal boxes without having to overcomplicate your CSS.

Left

The navigation container and its options are now styled to appear separate from the main content and identifiable as buttons Top left

HTML elements in place with content added to article sections, but no styling yet Top right

Article sections acting as the modal box containers look like this without their styling


Front-end 9. Options container

html,body{ display: block; width: 100%; height: 100%; margin: 0; padding: 0; }

We want the options to stand out from any standard content on the page. You can do by styling the options container that was created with the
tag. This will be styled with a distinctive border and margin spacing to ensure it appears separate from surrounding content.

8. Style the container The container needs to be styled in a way so that it will stand out. This can be done by changing the main page background colour and positioning the container in the centre of the page. To do this, we need to update the , and container sections.

html,body{ font-family: "Trebuchet MS", Helvetica, sans-serif; background: rgb(21, 34, 47); } #container{ display: block; width: 1000px; height: 100%; background: #ccc; margin: 0 auto 0 auto; padding: 1em; }

“

nav{ display: block; padding: 1em; border: 3px solid #000; margin: 2em 0 2em 0; }

10. Option styles The option navigation elements need to appear like buttons, even though they are just link tags. This can be done through CSS by making these elements display as an inline-block, which enables us to apply sizing and padding to make them appear like buttons.

nav a { display: inline-block; padding: 1em; margin-left: 1em; font-size: 1.5em; border: 3px solid #fff; background: #333; color: #fff; }

nav a:hover{ border-color: #333; background: #fff; color: #333; }

12. Define modal boxes The modal boxes all use
elements as their containers, hence we can use CSS to define their default styles for width, height and positing. We want these elements to appear at pixel-specific locations on the screen so we use absolute positioning to allow attributes for top, left and z-index.

article{ display: block; position: fixed; z-index: 9999; left: 25%; top: 100%; width: 40%; height: 50%; padding: 2em 5% 0 5%; border-radius: 1em; background: #000; color: #fff; overflow: auto; }


Make full use of visual information without compromising on presentation

”

Top left

Define the style of the modal box to make it clearly stand out from the main page content Top right

Modal boxes can also use transitions to slide in from the side when links to their associated ID are clicked Right

Alternatively, the modal boxes will now fade into view using transition animations


13. Set transitions

11. Option hover

Good usability will make it easy for users to know which option they will select if they are to press on their trackpad or mouse button. We can apply the :hover property to the options so that they change colour when the user’s mouse pointer is placed over them, indicating which option is about to be selected.

Modal boxes need to be able to show transition from one CSS property state to another for the animation to be visible. To keep our CSS simple, set ‘all’ properties to be eligible for transition animations. You can add other properties later to trigger their animation sequence.

article{ padding-bottom: 1em;

HTML5 & CSS3

Genius Guide

-webkit-transition: all 2s; transition: all 2s; }

14. Target selector Now apply the ‘target’ selector to define the CSS states for elements that are selected via their ID. Elements will transition to this state when they are clicked on – ie this is the state that all modal boxes will appear as. The !important element ensures that these styles overwrite the previously defined styles for
elements.

:target { visibility: visible !important; left: 25% !important; top: 25% !important; width: 40% !important; height: 50% !important; opacity: 1 !important; }

15. Transition: fade Now that the modal boxes have the ability to transition from the default
settings to the :target settings, we can apply rules that will overwrite the default
settings through the data-transition attribute. Our first rule will let the modal box fade in and out of view.

Modal box usage in UX design Visual information often needs to take up a large amount of space in order to be fully useful. Check out Twitter, which uses modal boxes to display basic information about a person’s profile that are triggered when you click on a Twitter handle. Using text or thumbnails to trigger the presentation of the full image or video when clicked provides a way to make full use of visual information without compromising the presentation of the main page content. Forms can also provide users with complementary functionality such as search, registration and account logins. Or, modal boxes can be used with alerts and notices – automated appearances of information can be provided to show important information that the user must see. Similarly, modal boxes for tips are presented as a clickable options for requesting additional information – useful for enabling users to access more information when they want it.

www.fullengineeringbook.net [data-transition="fade"]{ left: 25%; top: 25%; opacity: 0; visibility: hidden; }

16. Transition: left The next transition we want to use is to let the modal box slide in from the left by placing the default position of the modal box as fully of the screen to the left. This means that it will move from this position to the centred position set in the :target when this element is selected for display.

[data-transition="left"]{ left: -100%; top: 25%; }

17. Transition: right We also want a transition efect to make the modal box slide in from the right by placing the default position of the modal box as fully of the screen to the right – ie 100 per cent of the screen width from the left.

[data-transition="right"]{ left: 100%; top: 25%; }

[data-transition="zoom"]{ visibility: hidden; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }

19. Style close buttons The modal boxes have an an element with an attribute of ‘data-button=”close”’ used to close the modal box. We will style this to appear in the top-right corner as a red circle – achieved by setting the border radius to be curved and for the element to float to the right.

article [data-button="close"]{ display: block; float: right; background: #c00; color: #fff; border: 3px solid #fff; border-radius: 1em; padding: 1em; text-decoration: none; }

18. Transition: zoom The final transition to add is the ability for a modal box to zoom in and out from the screen centre. This transition requires the default style to be of zero width and height. We’ll also add an opacity of zero so that the modal box will fade in and out of view as it sizes up or down.

20. Style images Now we change the colour of the close button by applying styles through the :hover selector that will trigger the change when the user hovers their mouse pointer over the close button.

article [data-button="close"]:hover{ background: #fff; color: #c00; border: 3px solid #c00; }

21. Image spacing Our modal box design makes use of an image to be displayed at the left of the text content. This image should be the height of the modal box – we can use CSS to set the image as 100 per cent of the modal box article

img{ display: block; float: left; height: 100%; }

22. Place a margin Make sure that there is a margin of one text character to the right of the image so the text isn’t too close to the image. Place a margin to the right of the image, so that the positioning of all elements in the modal box will take this into account.

article img{ margin-right: 1em; } article img{ display: block; float: left; height: 100%; }


Front-end

Build offline web apps with Service Workers Use the Service Workers API to create rich offline applications that were previously only possible with native code




HTML5 & CSS3

Genius Guide

Unless you have been under a rock (or at least of of Twitter for a while) you are likely to have heard that the hot new thing in web development is ‘progressive web apps’. Already being implemented by major websites like Flipkart, Facebook and Google, Progressive web apps basically mean a collection of new APIs that have very recently been added to some browsers that allow for authors to create rich, native-like experiences. The key bit that ties together most of these new browser APIs is Service Workers, and it will radically change the way that you go on to make websites in future. Introduced in Chrome version 40, Service Workers are a new type of web worker that act as a kind of proxy between your website and the network. That means with a little bit of JavaScript we will be able to intercept, modify and even respond to requests from our site without ever hitting the network! By using Service Workers, we can make web apps work 100 per cent ofline, allow for content sites to have fun and enjoyable ofline fallbacks, and supercharge the responsiveness of our site for everyone else. In this tutorial we will update an HTML5 podcasting app by adding a Service Worker to our site, include some tips to make your own upgrades easier and explain the common pitfalls that you can avoid.

file at the root of the site called sw.js (eg example.com/ sw.js) The location of the file is important (we will go over why that’s the case in Step 5).

navigator.serviceWorker.register('/sw.js') // .register() is async, and it // returns a promise .then(registration => { // we're installed! }).catch(err => { // there was some kind of error })

5. Pick a place to save Where the sw.js is loaded from is very important, and it should probably be /. That is because what the SW is able to control (and therefore make work ofline) is limited to it’s scope. That means that if you register example.com/js/sw.js, it will only be able to control any URLs that begin with example.com/js.

// control everything on the domain navigator.serviceWorker.register('/sw.js') // control everything served from /js navigator.serviceWorker.register('/js/sw. js')

3. Use Promises Service Workers are completely asyncronous, and so they use Promises everywhere. Promises are a new-ish browser API that makes it easier to reason about async code. If you haven’t brushed up on them before now, it would be a great time to do so – all new async APIs will be based on them.

functionReturningAPromise() .then((result) => { // All Promises have a `then` method // where can do something with the // result of the function }).catch((e) => { // Always make sure to define a catch // on your promise, otherwise you // won't know if there was an err })

6. Listen for fetch Now we’ll add some functionality by listening for the fetch event (fired for any network activity covered by the SW’s scope and this will include XHR, CSS and more). It will respond with data stored via the new Cache API if it exists. If it isn’t cached, that’s fine, we will just fire of a new fetch call.

self.addEventListener('fetch', ev => { ev.respondWith( caches.match(ev.request) .then(response => { return response || fetch(ev.request) }) )};


1. Get support

Service Workers aren’t supported everywhere yet, and won’t be for a while. So the first step whenever dealing with new APIs is to do an existence check. Tools like Modernizr make this easy for trickier APIs, but Service Workers are quite simple to check for without it

2. Create a Service Worker Let’s add a Service Worker. To start, we create a blank

4. HTTPS only

Let’s encrypt!

You can only register a Service Worker if the site is connected to HTTPS (or accessed via localhost). This is going to be true for most new browser APIs, so if you haven’t gotten a SSL cert for your site, now is a great time to do so,

LetsEncrypt.org is a safe and free new way to get and automatically renew SSL certificates, which are required for new browser APIs like Service Workers.

Left

For security’s sake, browsers will only let you register a Service Worker if the site is connected to over HTTPS Top left

Chrome’s internet connection error message shows up when the user is offline and no Service Worker has been registered. Our users can’t do anything in this case Top right

By using a fallback image we are able to ensure that even when resources aren’t cached or available, our users still get a visually pleasing experience


Front-end 7. Add responses You may have noticed that we never actually added to the Cache. Since Cache is not the same as the browser’s HTTP cache we have to manually add the responses as they come in. You may only want to do this for only certain items, though, otherwise none of your REST calls would ever update!

… let request = ev.request caches.match(request) .then(response => { return response || fetch(request) .then(response => { // only add JPGs to the Cache if (request.url.match('/jpg$') { cache.add(request); }

8. Prime the cache In addition to fetch, we can listen for the install event in order to fire some set-up code. This lets us prime the cache with a few entries for things we know are going to be requested, as well as any fallback content we may want to load later on.

self.addEventListener('install', event => { event.waitUntil( caches.open('cache-v1').then(cache => {

11. Disable for offline functions

return cache.addAll([ '/logo.svg', '/fallback.jpg', ]) }); ) })

Our app relies on audio files from outside sources. We can’t really presync every podcast ever, so when we go ofline we want to disable some functionality to prevent user confusion. In this case, we will hide the search button when we get an ofline event.

9. Fallbacks failing In our app, we are going to load a number of images, and on slow connections, they may take a long time to load. We can add a fallback to the fetch call that we just made, so that we can show our default image rather than an empty spot.

return fetch(ev.request) .then(response => { cache.add(ev.request); }).catch(err => { // reply with the precached image return cache.match('/fallback.jpg') })

let cL = document.body.classList let toggle = () => { // add the class “hideSearch” to the // body tag when nav.onLine is false cL.toggle('hideSearch', !navigator.onLine) } window.addEventListener('online', toggle); window.addEventListener('offline', toggle);

12. Alternate experiences One thing we are all trying to avoid is the dreaded user bounce rate. If the site is ofline, it’s more or less useless to the user. You can use Service Workers in creative ways to serve temporary content if a user navigates to a page that is not cache. For example, The Guardian ‘s website displays a crossword!

10. Keep our users in the loop Even though we are creating a great ofline experience, there are going to be some things that won’t work. Therefore, we want to make sure our users know that the app has gone ofline, in case they are unaware. Just how you show that information is up to you, the browser provides an easy way to check.

caches.match(request) .then(response => { if (response) return response; if (request.url.match('/article/') && !navigator.onLine) { // if the request isn't cached and we // are offline, serve this instead cache.match('/crossword.html') } )})


The UpUp API Hit the ground running with UpUp (talater.com/ upup) – a great library that provides a simple API for a lot of Service Workers as well as more common use cases.

let updateStatus = (event) => { // inform user of offline status } window.addEventListener('online', updateStatus); window.addEventListener('offline', updateStatus);

13. Communication is key Service Workers are like other web workers in that they have no access to the DOM, and run in a separate

Top left

Hiding features that will not work while users are ofline can reduce the frustration they feel during use. Just make it clear why the functionality disappeared! Top right

You can leverage Service Workers to delight users even when you can’t give them the content they wanted. The Guardian ’s site shows a crossword when offline! Right

Service Worker support is limited to the latest Chrome, Opera and Firefox versions. App cache, on the other hand, works almost everywhere

source: caniuse.com


HTML5 & CSS3

Genius Guide

App cache fallback If you are just using Service Workers to cache content, you can fallback to app cache. After checking that Service Workers aren’t supported, check for app cache:

if ("applicationCache" in window) {... Here is the tricky bit – app cache is added through the manifest attribute on a HTML element:

But you can’t add the manifest attribute via JS – it has to be there on page load. We get around this by creating a blank page that only has the manifest, then add it here via an iframe:

let iframe = document. createElement(“iframe”) iframe.src = "/cache. html" iframe.style.display = "none" document.body. appendChild(iframe)


thread to the rest of your code. That means that in order to communicate between your worker and your site, you need to use the postMessage API.

// sw.js self.onmessage = (message) => { // the string passed to the worker // exists on the `data` prop let msg = message.data; console.log('msg from the DOM ' + msg) } // index.js navigator.serviceWorker .controller.postMessage('HELLO WORLD!')

14. Share actions If you have a site open in multiple tabs, you can use the Service Worker to share actions across all of them through postMessage. This keeps our app in a consistent state across tabs, even if the user is only interacting with a single one.

let url = request.url; if (url.match(\/delete\/\d+)) { fetch(request).then(() => { self.clients.matchAll() .then(all => all.map(c => { c.postMessage("{delete:"+url+"}") )); }) }) }

15. Update caches

Eventually our cached content will be stale. When that happens, you will probably want to delete the old caches in order to let the server give us the updates. This is usually best done in the activate event, where you can register a function just like we did before for the fetch or install events.

event.waitUntil( caches.keys().then((names) => { return Promise.all( names.map((name) => { caches.delete(name); }) ); }) );

})

17. Update the Service Worker The process for updating your Service Worker is pretty simple, just change the file. When your site registers the Service Worker, the browser will always attempt to download it. If it has a single byte of diference from what it got last time, it will start using the new version after the page reloads – that’s unless you tell it otherwise.

self.addEventListener('install', (ev) => { // you can take control from the old // service worker immediately by // calling skipWaiting on “install” ev.waitUntil(self.skipWaiting()); });

16. Solve multiple issues

18. Debug your Workers

Let’s say we update our site’s layout and we want to delete the HTML and CSS, but we don’t want to lose any audio cached for playback. In this case, we should register multiple caches – one for the code and another for audio. Then we can invalidate them one at a time.

Since they’re so new, the tooling around Service Workers is not great yet. A lot of errors are often swallowed in ways that are pretty opaque. In Chrome, you have the ability to go to chrome://serviceworkerinternals to see more advanced options. The devtools team is working hard to make this better!

let whitelist = ['audio-cache'] caches.keys().then((names) => { return Promise.all( cacheNames.map((name) => { if (whitelist.indexOf(name) === -1) { return caches.delete(name); } })

19. Future support Supporting ofline is just the beginning for Service Workers. Background sync, which is used to update your app without the user even having it open; push notifications, which provides the ability to get the same native alerts apps have had for years; and much more is on the horizon and will soon be expected by users!


Front-end

Model a unique mobile 3D interface Build an augmented menu that hooks into the mobile’s device orientation controls to create a bespoke browsing experience with three.js




HTML5 & CSS3

Genius Guide

Creating compelling web experiences for mobile devices has come a long way, there are a whole raft of phone functions that designers can plug in to and access without the need for packaging up the mobile site as an app. In this tutorial what is being achieved with the native mobile web would have been pretty hard to conceive as an app going back just a few years, but now this is running purely as a mobile optimised website. The site itself will be in 3D and rendered by three.js but instead of this being rendered with the WebGL renderer, the scene will be rendered using the CSS3 renderer, giving us maximum compatibility with devices. Having 3D as part of the design is going to be an important part of the interface. In order to browse around the interface the user will need to rotate their phone and the display will update, placing them in the centre of an augmented interface. Moving the phone around becomes like moving a camera in the interface to explore the links that are on ofer to the user. This is made possible through the ‘Device Orientation Controls’ that come bundled with three.js and can turn our phone into something similar to an Oculus Rift. This is part of a two-part tutorial; creating the interface and get the device orientation working, we will focus on the interaction with the menu in the following pages.

<script src="js/CSS3DRenderer.js"> <script> var camera, scene, renderer; var circle1, circle2;

position: [ 0, 512, 0 ], rotation: [ Math.PI / 2, 0, Math.PI ] },{

4. Add each side 2. Set the scene The code now adds the init function, used to initialise the scene. A camera is created, the control system is initiated to run on the device orientation controls. The scene is created now that the camera and control system can work with. The final code starts an array and this contains an object.

function init() { camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); controls = new THREE. DeviceOrientationControls( camera ); scene = new THREE.Scene(); var sides = [{ url: 'img/scene-right.jpg', position: [ -512, 0, 0 ], rotation: [ 0, Math.PI / 2, 0 ] },{

3. Create the background

Each side has to be added so in total there will be six sides for this. If you wanted to create your own background, an image with a 90-degree field of view horizontally and vertically has to be taken that points at all six sides. It’s easier to create this with a 3D application as the rotation and field of view can be exact.

url: 'img/scene-base.jpg', position: [ 0, -512, 0 ], rotation: [ Math.PI / 2, 0, Math.PI ] },{ url: 'img/scene-front.jpg', position: [ 0, 0, 512 ], rotation: [ 0, Math.PI, 0 ] },{

5. Set up the cube Now as all six sides have been referenced in the array, a cube is created by making a new 3D object and this is added into the scene. A for loop is created to iterate through each position in the array and this will be used to display the images in the scene as a box.


1. Link the libraries

Open the ‘start’ folder in a code editor such as Brackets. In the body of the document, add the following code to link up the libraries. This uses the three.js library available from threejs.org. Following this is an opening script tag with some global variables that are needed in the project.

<script src="js/three.min.js"> <script src="js/DeviceOrientationControls. js">

To create the background for the 3D scene a skybox will be created, which is a large cube placed on the outside of all other objects. The code here is holding a reference to each of the sides, their individual position and rotation within the 3D scene in order to view the box correctly.

Overlapping sides

The skybox cube is really 1024 pixels by 1024 pixels but it has been set to display at 1026 by 1026 so that there is a slight overlap in all of the sides, as CSS 3D transformations are not as accurate as WebGL.

url: 'img/scene-left.jpg', position: [ 512, 0, 0 ], rotation: [ 0, -Math.PI / 2, 0 ] },{ url: 'img/scene-top.jpg',

Left

The tutorial uses the CSS3D renderer as part of three.js. This renders the display using standard CSS3D transforms, not WebGL, and ensures maximum device compatibility Top left

Adding the background images to the cube makes a 3D environment as the user moves their device around them Top right

Looking towards the floor shows the area that will contain an interactive Google Map later in the tutorial


Front-end url: 'img/scene-back.jpg', position: [ 0, 0, -512 ], rotation: [ 0, 0, 0 ] }]; var cube = new THREE.Object3D(); scene.add( cube ); for ( var i = 0; i < sides.length; i ++ ) {

6. Set each side Information from each array position is stored in the variable side. A new image element is created and given a specific width. A CSS3DObject is created and added.

var side = sides[ i ]; var element = document.createElement( 'img' ); element.width = 1026; element.src = side.url; var object = new THREE.CSS3DObject( element ); object.position.fromArray( side.position ); object.rotation.fromArray ( side.rotation ); cube.add( object ); }

7. Icon images Now that the background is in place, our attention will turn to creating icons that will sit in front of that. Another

array is created, but this time round there is much less information than before and that’s because the image needs to be stored for each of the icons that will be placed on the screen.

8. Iterate the icons Again a for loop is created to iterate through the images. A div element is created to hold each image within. The image is added using the JavaScript innerHTML command to create content inside of it. The image is given a unique id and the class of ‘pic’ that is used to style it later in the CSS. The source image is also added for the icon.

9. Handle the interaction A click handler is added for the picture and at the moment this simply returns the value of the id to the console log. In the second part of the tutorial, we will learn how this calls the correct content to load for each of the icons. The image is then added to a CSS3DObject for placing in the scene. Then the position of the icon is calculated around the camera.

pic.addEventListener( 'click', function ( event ) { console.log(event.target.id); }, false ); var object = new THREE.CSS3DObject( pic ); var phi = (Math.PI*2) / menu.length; phi = phi * i;

11. Add to the scene The final step is to tell the object to look at the vector position setup, then the icon is added into the scene. The closing bracket will now finish of the for loop. This will mean that all of the code that is inside of the for loop is applied to each image icon so that they are all positioned to orbit the camera.

object.lookAt( vector ); scene.add( object ); }

12. Interactive map This next block of code is to add an interactive Google Map to the page. Visit Google Maps and find a location you’d like to show, then click the menu button and from the slide-out panel, click the ‘share’ button. In the popup grab the embed code and paste the iframe into the third line of code shown here.

element = document.createElement( 'div' ); element.className = 'mapped'; element.innerHTML = ‘embed code here’; var elementWidth = 600; var elementHeight = 600;

13. Position the map There is a large red square on the floor of the 3D scene, which is part of the background images added earlier on. We are positioning the map to be 600 by 600 pixels so, in the embed code added from Google, change the width and height to 600 for both. The map is positioned further down away from the camera and then rotated toward the camera.


3D CSS transforms Anything can be displayed in the 3D scene that can be displayed on a regular webpage, such as video, maps, text and images, because the scene is all controlled with CSS 3D transforms.

Top left

Point the device towards the floor to reveal an interactive Google Map that shows the location of the event Top right

A circle is added to the scene and placed above the camera and can be seen by tilting the device upwards Right

Another circle is added and animation sets these circles to rotate around. If the aspect changes to landscape the scene automatically resets to fit the device window


10. Position the icon Using the code from the previous section each icon is positioned at equal positions around the camera. The 350 relates to the radius of the circle or how far from the camera the icons will appear. Once in position each icon is rotated to face the camera in the centre of the scene.

element.style.width = elementWidth + "px"; element.style.height = elementHeight + "px"; var cssObject = new THREE.CSS3DObject( element );

HTML5 & CSS3

Genius Guide

Know your three.js renderer Three.js is a 3D library that is more used for creating interactive WebGL experiences but it also comes with one or two extra renderers that ofer 3D interactive experiences for browsers that can’t display WebGL scenes. This list is small but some Android phone vendors such as Samsung have spotty support for WebGL across their product line, so it’s safer to use three.js’ renderer. This limits the development to creating content that is essentially just mapped onto flat planes, but with a little creativity this can still be very efective. Other renderers available include SVG and the Canvas renderer. SVG doesn’t really ofer any improvement over CSS but Canvas allows for 3D model formats to be loaded and displayed.

www.fullengineeringbook.net cssObject.position.y = -400; cssObject.rotation.x = -Math.PI/2; scene.add(cssObject);

animate(); }

init();

17. Update the screen display

20. CSS Body

The next element that is being added is a transparent PNG image with circular lines on it. This is added into the 3D scene and positioned above the camera while being rotated towards the camera. This will be animated to spin later on to provide some animation within the scene.

If the phone or tablet device is rotated from portrait to landscape or vice versa, the browser changes dimensions. In order to capture this, the onWindowResize function updates the aspect ratio of both the camera and the renderer so this will work on any size device with any size display.

Open the project.css file from the css folder on FileSilo. This is empty of all code, so add the code shown here for the body tag styling. This sets the background colour to white and sets the margins to zero, so that the scene fills the full browser display. The overflow is hidden and the font set to Helvetica or Arial.

15. A second circle

18. Animate the scene

Another circle is added and you will notice the pattern that a div element is created, inside here an image is placed. The div needs to be added as a CSS3DObject, this can be positioned and rotated to display correctly. Finally add the object to the scene to be displayed.

The animate function updates the screen’s display using the browser’s requestAnimationFrame command to update the screen at 60 frames per second, or as fast as the device can render it. The circles are rotated on the screen, the controls update and the scene is rendered or updated to display the view.

14. Add animated elements

16. Display the 3D scene The way the scene is to be updated is now set. Normally with three.js scenes this is the WebGL renderer but in this tutorial the CSS3D renderer is being used, for maximum compatibility. An event handler is registered to call the onWindowResize function if the screen changes and the animate function is used to update the screen.

renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window. innerHeight ); document.body.appendChild( renderer. domElement ); window.addEventListener( 'resize', onWindowResize, false );

function animate() { requestAnimationFrame( animate ); circle1.rotation.z += 0.001; circle2.rotation.z -= 0.002; controls.update(); renderer.render( scene, camera ); }

body { background-color: #ffffff; margin: 0; cursor: move; overflow: hidden; font-family: helvetica, arial, sans-serif; }

21. The menu items The next CSS rule sets the image icons that are displaying as the menu. This just sets the cursor to a pointer if the user has a cursor on rollover. This won’t be necessary for the majority of browsers as mobile and tablets don’t usually have mouse pointers!

22. Finish and save 19. Set it all up As we come to the end of the JavaScript code, the init() function is called which sets the scene up, placing everything in there and calling the scene to start rendering. After this the script tag is closed. Save this page now as all of theJavaScript code is added in here.

The size of the pictures is set here using the width and height properties. Without this the image icons are just too big on the screen, but it’s useful to have the images a little bigger as most mobiles and tablets have high-pixel resolution screens. Save the file and place on a server then connect with your mobile device.


Front-end

Create an interactive mobile 3D interface Part two of our tutorial takes an augmented menu that uses the mobile’s device orientation controls and adds interaction to create a fully working site experience




HTML5 & CSS3

Genius Guide

In part one of this tutorial (starting on page 84), a unique mobile augmented website menu was created. The site was created with the help of the three.js library and was rendered using the CSS3 renderer rather than the WebGL renderer to give maximum compatibility with devices. The 3D was an integrated part of the design as the user had to rotate their phone around them to display the interface, augmenting the site around them. This placed the user in the centre of the interface. The movement of the phone was created using the ‘Device Orientation Controls’ that come bundled with three.js and this sort of turned our phone into something similar to an Oculus Rift. Now, in this final part of the tutorial, the interface will be given some content so that it actually becomes useful. This content will be hidden from the user until they click on the appropriate icon in 3D space, at which point a 2D panel will slide in over the top of the existing 3D menu system. The animation in the panels,will be powered by the Animate.CSS library, which will slide on the new content. This gives us access to a quick way to create animated elements. Each panel will be colour-coordinated to match the icon that has been clicked and then the panel can be removed again by clicking a burger menu icon in the top left to take the user back to the experimental menu.

2. Content panels There are going to be four content panels in the project – these will appear when the user clicks on one of the icons in the menu inside the 3D scene. Add the code as we’ve below to the body of the page just above the script tags. This creates a top bar section and an area for text.

☰
Chat

Text here

Text here

3. Panel details You can fill the text with your own content or even images. You may notice that there is a strange code in the link tag, this is actually the code to create the three lines of the burger icon for the menu button. This will take the users back to the 3D menu screen.

☰
Arriving

Text here

Text here

appropriate icon the panel will slide in from the left. Clicking the burger icon will make it slide back to the left.

☰
Weather

Text here

Text here

5. Five into four Each panel will be styled up to match the colour of the icon using CSS code – the colour will be used to reinforce the selection made by the user. There are five icons and but only four panels. One icon is the logo of the website so that will not link anywhere, but it will orientate the user.

☰
Events

Text here

Text here


1. Pick up from part one

This tutorial picks up directly where it was left of at the end of part one (see page 87). First link up the animate. css library, available from daneden.github.io/animate. css, which we’ve already downloaded and put in the CSS folder. This will power the sliding on of popover content later on.

Positioning above The new panels added in this tutorial are positioned on a z plane above the background CSS panels so that they appear in front of the 3D scene as 2D panels.

4. Panel power The panels are constructed from regular HTML elements and will be hidden from the site using CSS. Then linking up the CSS Animate code when the user selects the

Left

The Animate.CSS library is used to create transitions in the app and slide the appropriate content over the top of the existing menu Top left

The HTML for the panel is created that forms the structure of the overlaid content that appears above the interface when the appropriate icon is clicked Top right

In the CSS the panels are styled to have individual looks so that each icon slides content over the interface in a similar colour scheme. This content hasn’t quite fully fallen into place in the image


Front-end 6. Responsive srcset behaviour Save the HTML document for now and open the ‘project. css’ file from the CSS folder. Add on the code in the next few steps to style the content in the panels appropriately. The first content merely creates the generic style for all of the panels that place this above the other content on the page.

7. Hide and seek When the App starts up the menu should be visible and nothing else. The hidden class is used to hide all the panels when the App first launches and then only as the user taps the device screen should it be visible to the user. The visible class was actually used during testing but is not used in the final site.

.hidden{ display: none; } .visible{ display: block; }

allows for the head section to have the right height for both of those elements.

.head{ height: 45px; }

9. Position the menu The link in the head section of the panels is the burger menu icon and here the code is floating that icon to the left of the screen. It’s given a slight padding around the top and left so it isn’t too close to the sides. The text decoration is set to none and ensures that the underline doesn’t appear below this.

.head a { display: inline-block; float: left; width: 10%; padding: 10px 0 0 10px; text-decoration: none; }

10. Lay out the heading 8. Break down the parts After the panel is styled up, each panel will have a head section that has a burger menu button to take users back to the menu and a heading so that they know they are seeing the right content on the screen. This CSS just

Now, turn your attention to the h2 heading tag, which is made to float to the right of the menu icon. The padding on this reflects the slightly diferent shape of the text and the icon, with there being less top padding on the text. The text is also aligned to the right so that the menu and heading are on opposite sides of the screen.

11. Paragraph settings Below the heading there is just a couple of paragraphs, but if this was your own design this could contain a variety of content, from images, video’s or anything else you wish to display on a HTML page. As there is only text in the example there is just a 5 pixel padding for the top and bottom and 10 pixels for left and right.

p{ padding: 5px 10px; }

12. Individual style Each panel shares the same generic styling that has been applied in the previous six steps. Now you need to concentrate on giving each panel a colour scheme that fits with the initial icon that it represents. Here the panel is given a light green background with dark green text and header.

13. Blue section As in the previous step, the styling is now looking at the individual panels. The second panel will be styled up with a light blue background, giving a darker blue colour for the text. The header panel of this is the reverse of that styling with a dark blue background and lighter text.

14. Third panel


Know your code HTML is the content of your website while CSS provides the way those elements are rendered by the browser giving a unique design. The JavaScript part of the site provides functionality.

Top left

The Animate.CSS library is used here, and this slides the content onto the screen with a bounce. Here the content is just about to bounce into final position Top right

As the weather icon is clicked you can see the panel just beginning to be animated into position and its transparency is just fading in here as well Right

When the user clicks on the burger menu in the top left of the panel the content slides back off the screen to the left as shown in this image. This allows the menu to be accessed again


.head h2{ display: inline-block; width: 70%; margin: 0; padding: 7px 10px 0 0 ; float: right; text-align: right; }

The third panel takes on purple characteristics for the colour scheme with lighter styling for the background and a darker header section on this panel. The colours help to reinforce to the user the icon that they’ve just clicked on to give them a way to orientate themselves in the mobile web site.

#info3.panel{ background-color: #d1b3ce ; } #info3 .head{ color: #eed8ec;

HTML5 & CSS3

Genius Guide

Using Animate CSS The Animate CSS library is a relatively lightweight library with the smaller version weighing in at only 52KB. This consists of one CSS file that has keyframes built for various CSS movement and animation. This saves us the time in the tutorial of having to put these together and it is always worth your while as a web designer to build on the shoulder of other libraries. When you can, don’t reinvent the wheel! To use the library, all that needs to happen is that the library is linked to your page, which we did in Step 1. Then, any content that needs to be animated must have the class ‘animated’ applied to it. Finally, an animation style should be applied as a class, such as ‘bounceInLeft’. This will immediately call the animation into efect.

www.fullengineeringbook.net background: #714c6e; } #info3 .head a{ color: #eed8ec; } #info3 p{ color: #584356; }

15. Final panel colours The final panel that is being styled up again reflects the colours of the icon used to access it from the original 3D menu created in part one of this project. This time the colour scheme is given an orange theme with light tints and dark shades used to create the panel. Save the CSS file and close it.

#info4.panel{ background-color: #f5c5a7 ; } #info4 .head{ color: #f5c5a7; background: #b65212; } #info4 .head a{ color: #f5c5a7; } #info4 p{ color: #b65212; }

16. Start the JavaScript All of the requisite elements are now in place for the design and content of the panels. It’s just a case of adding the desired functionality to make these panels work. In the JavaScript code locate the global variables on lines 56 and 57, then add this function below it. This is called into efect when the menu burger icon is pressed on the first panel.

function fade1(){ var change = document.getElementById( 'info1' ); change.classList.remove('bounceInLeft');

change.classList.add('bounceOutLeft'); }

17. Bounce around The next code is for the second panel and these series of functions take the ID of the relevant info panel then remove the class that has made them bounce onto the screen from the left. Once this is removed the code to make them leave is added and the elements bounce back out to the left.

function fade2(){ var change = document.getElementById( 'info2' ); change.classList.remove('bounceInLeft'); change.classList.add('bounceOutLeft'); }

18. Use Animate CSS The CSS styles that are being added and removed for these sections have not been created here – instead they are from the Animate.CSS library that was hooked up to our page in the first step of this tutorial. You can visit daneden.github.io/animate.css to see more styles.

function fade3(){ var change = document.getElementById( 'info3' ); change.classList.remove('bounceInLeft'); change.classList.add('bounceOutLeft');}

19. Customise the animation If you visit Dan Eden’s Animate.CSS site you can try out diferent animation styles before applying them to your

content. Find styles that work together and make sense with your functionality rather than choosing the most attention grabbing animation that you see.

function fade4(){ var change = document.getElementById( 'info4' ); change.classList.remove('bounceInLeft'); change.classList.add('bounceOutLeft'); }

20. Grab the link Following this you’ll need to scroll down through the code until you find the code that has the click function event listener on the pic variable. Inside this function, add the two lines of code in bold shown below. These lines check that the icon that has been clicked on is not the first icon, and if so it stores the current icon’s ID in the change variable.

pic.addEventListener( 'click', function ( event ) { console.log(event.target.id); if(event.target.id != "0"){ var change = document.getElementById( 'info'+event.target.id );

21. Finish the code Now continue with the following code that turns of the hidden property, and if it has been clicked on previously it removes the bounce out CSS. The bounce in animation is added to bring the panel onto the screen. Save this, upload it to a server and connect using your phone’s browser to see it all working.


Front-end

Assemble fullscreen navigation Use the full-screen features of CSS and JavaScript to create menu systems for websites and web apps




HTML5 & CSS3

Genius Guide

The web has transformed from a platform for the delivery of information and content to also being capable of delivering software applications. Web-based software applications have often been labelled as ‘not as good’ as their native counterparts – an attribute that is now more of an incorrect stereotype with the modern browsers now supporting HTML5. A big part of the problem that web applications face in their accusation of being a poorer equivalent of their native counterparts is based on psychology – people who make such accusations are often unaware that many apps they’ve download from their app store account are merely web apps wrapped by a native web view element. One of the features of HTML5 that can be used to condition users to take your web app more seriously is to display content in fullscreen – this is more relevant to the desktop where windows can clutter the screen, but are also relevant to mobile smartphones and tablets. Our example will create a menu page that provides the user with the option to access content in full-screen mode. A useful element for full-screen applications is the use of iframes, which are a good solution for the limitation of the browser exiting full-screen mode as soon as the user visits a new URL; iframe elements enable page changing without changing the current URL.

this to load the CSS stylesheet and JS code. This lets the resources to be reused by other pages if required.

<script src="controls.js" type="text/ javascript">

3. Page container Use the section to contain the visible content. We start this by placing the
page container inside the body; this will be used to allow the controlled layout of the content. Your page title and introduction content will go inside this.

4. Fullscreen: controls The controls to access the full-screen elements are placed as content inside the
container element. Each of these items have a [data-screen] attribute that stores the element ID of the item to open.

ability to contain these elements inside a container that has controls, such as to exit full-screen mode and/or switch to viewing other elements.

close <iframe src="http://www.monkey-x.com">

7. JavaScript selector functions With all of the HTML elements on the page, the next step is to start building functionality with JavaScript. Create a file called ‘controls.js’ and add the following functions to allow easy selection of HTML page elements.

$ = function(cssRule){ return document.querySelector(cssRule); } $$ = function(cssRule){ return document.querySelectorAll(cssRule); }

5. Fullscreen: elements Some elements will be displayed directly in full-page mode. These elements are to be added to the content inside the
container. We add a selection of images that will be selectable, as well as a number of iframe pages with ‘class=”fullscreen”’ to be called on later.

8. JS full-screen activation Our example will use a single function to activate any of the full-screen presentation of the elements passed to it. This allows the control of full-screen requests to be managed from one place, with it being easy to upgrade later if this is required.


1. Initiate HTML page

As with any webpage, there is a requirement to define the page’s HTML, head and body structure. Use the head section to contain any meta data such as the page title for SEO and accessibility that you may need.

<iframe id="screen1" class="fullscreen" src="http://www.nextpoint.co.uk"> <iframe id="screen2" class="fullscreen" src="http://www.blitzbasic.com">

2. Load resources

6. Fullscreen: containers

The HTML section should contain the links to any resources you are using for the page. We’re using

In addition, providing the ability to make elements directly display in full-screen mode, we also have the

Use iframe apps A problem with full-screen mode is that it closes when the user visits a new URL – this is solved by using iframes, enabling you to show diferent webpages without changing the URL.

Left

The HTML elements are on page, but without any styling to make the effect work – hence the content of other pages being visible Top left

The navigation screen has now been styled, complete with the hiding of elements that are to be opened for full-screen display Top right

Full-screen options are now added as buttons – it is their [data-screen] attribute that defines them as the controls to be searched for


Front-end function fullscreen(element){ if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } }

9. Controls: exit fullscreen There is a need to allow the user to exit full-screen mode from within the webpage. This is performed in a similar way to opening full-screen mode, but instead referencing the main document’s exitFullScreen() function.

function fullscreen_exit(){ if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen();

} }

});

12. Initialise styling 10. JS action listeners Controls that are responsible for activating full-screen presentation of other elements require their JavaScript listener to behave slightly diferently – instead of activating themselves, we use the [data-screen] attribute to reference the ID of the element to activate the full-screen presentation.

window.addEventListener("load",function(){ var screenTriggers = $$('[data-screen]'); for(var i=0; i
11. Attach fullscreen_exit() Looking back at Step 6, there are elements used as containers for presentation – complete with controls. Attach the previously created fullscreen_exit() function to elements with a [data-action=”exit”] attribute when clicked, in order for the user to exit full-screen mode..

Now that the JavaScript functionality is complete, the next stage is to start the definitions for the visual presentations. Create a file called ‘main.css’ and then insert the following CSS formatting for the main HTML and body containers.

html,body{ background: #000; padding: 0; margin: 0; font-family: monospace; height: 100%; }

13. Content container The content is contained inside the
element, which positions the content in the centre of the screen. We achieve this positioning by setting the left and right margins of
to auto, which will balance the margin spacing between both sides.

main{ display: block; width: 75%; margin: 10% auto 0 auto; background: silver; padding: 1em; }

www.fullengineeringbook.net About the exit plan Browsers provide a way to exit full-screen mode, but users will forget any notice they are shown. Make sure to add an on-page exit button to make it easy for users to exit fullscreen when they want to do so.

Top left

Other types of elements, such as video, can be made fullscreen if required Top right

Another website being shown in fullscreen through an iframe, enabling navigation without having to change the current URL Right

A website in full-screen display with the exit button bar placed at the top of the screen


window.addEventListener("load",function(){ var screenTriggers = $$('[dataaction="exit"]'); for(var i=0; i
14. Navigation styling

The full-screen options all have the [data-screen] attribute, hence why we use this in order to reference them; enabling us to change their element type from button if needed. Also apply colour, padding and transition properties.

HTML5 & CSS3

Genius Guide

Why fullscreen? The ability to ofer your website and web application users the option to view content in fullscreen allows your design to access maximum space for better usability. It could also provide focus on a single element on your page, for example with picture, video or content section. For web apps, it also has the psychological advantage of persuading users to think of your creation as an app, rather than as a website. This will then enables users to take your software more seriously as an app that they would actually want to use. With the latest features of HTML5 supporting ofline functionality and ofline data storage, the diference between the capabilities of native and web apps have become very blurred.

www.fullengineeringbook.net [data-screen]{ display: inline-block; padding 1em; font-size: 2em; background: #333; color: #fff; transition: background-color 1s; -webkit-transition: background-color 1s; }

15. Navigation hover effect In order to make sure that users can clearly identify that navigation elements can be interacted with, we will place an efect on each of the navigation items to slightly change their appearance when the mouse pointer is hovering over them. Changing the colour to become a lighter shade when it is hovered over gives the appearance of it lighting up.

[data-screen]:hover{ background-color: #777; }

16. Exit style Elements that have [data-action=”exit”] will need to have this displayed as a visible control. We will make this appear as a full-size red bar with white text that stretches across the full width of the screen. This element will also be 5% of the height of the full screen.

.fullscreen [data-action="exit"]{ display: block; width: 100%; height: 5%;

background: #c00; color: #fff; transition: background-color 1s; -webkit-transition: background-color 1s; }

17. Exit hover The exit option will also change appearance when the user hovers over it. This is achieved by using the :hover selector, in which we will change the background and text colours. With the background-color property being set as a transition in the previous step, the colour change will animate when the element is hovered over.

.fullscreen [data-action="exit"]:hover{ background-color: #fff; color: #c00; }

18. The iframe styling Container elements that contain an iframe element will be displayed to show them at full size. This needs to take into account the five per cent height of the exit option, hence the height of the iframe will be 95%.

.fullscreen iframe{ display: block; width: 100%; height: 95%; }

19. Hiding full-screen elements Full-screen elements use the class name ‘fullscreen’ and are hidden by default. Properties to ensure 100 per cent

width and height are set for when the elements are later displayed in full-screen mode – avoiding the need to repeatedly define this under the diferent browser vendor full-screen selectors.

.fullscreen{ display: none; width: 100%; height: 100%; }

20. Full-screen visibility Items that have been hidden from normal view need to become visible when the browser enters full-screen mode. This is achieved by using :fullscreen selector – although take note that diferent browser vendors use diferent versions and spellings for this selector.

.fullscreen:-webkit-full-screen{display: block;} .fullscreen:-moz-full-screen{display: block;} .fullscreen:-ms-fullscreen{display: block;} .fullscreen:full-screen{display: block;} .fullscreen:fullscreen{display: block;}

21. Finishing touch With everything complete, you are now free to make any additional styling required for your version of the full-screen menu tool. In this example, we add an underline style to the h1 element used as the visible page title.

h1{ text-decoration: underline;}


Developer



98

Be a jQuery code master Grasp the core tricks and techniques of jQuery

106 25 pro plugins Boost your website or app with these top add-ons

116

Produce a picture gallery with jQuery Manage user interactions for visual presentation

120 Code validation into forms with ngMessages Learn to create a form with reactive user feedback

124 Make drums with the Web Audio API Integrate a responsive drum kit with Web Audio

128 Get free web hosting with GitHub Pages Sign up and reap the benefits of GitHub hosting

www.fullengineeringbook.net 132 Manage JS with asynchronous tasks

Reduce JavaScript bloat in one fell swoop


Developer

be a www.fullengineeringbook.net

code master We reveal the core techniques for the library, integration with ES6 and cheat sheets for easy referencing


HTML5 & CSS3

Genius Guide

The current state of jQuery IT’S BEEN TEN YEARS SINCE INITIAL RELEASE, BUT WEB DEVELOPERS STILL NEED TO KEEP AN EYE ON JQUERY Falling victim of its own success in recent years, jQuery can sometimes be described as ‘not-cool’ – especially when used in the same sentence as libraries like Angular or React. JQuery doesn’t include a templating language or follow a MV* pattern, yet it’s still an incredibly useful library in the modern developer’s toolset. JQuery’s gentle learning curve can be a great introduction to JavaScript and since conception it’s become the go-to for a first ‘taste’ of JavaScript – a language that is leaving its browser only roots behind. The library enables complex topics to be introduced sooner and in bite-size chunks. The more experienced developer should remind themselves of jQuery’s own slogan which is ‘write less, do more’. This ease of use can, in the ‘real’ world of fast-paced deadline-driven development, be a lifesaver. How many of us can remember how to efectively traverse the DOM in vanilla JavaScript? Simplicity shouldn’t be a negative, the library is in use in over 65 per cent of the top one million websites (libscore.com/#jQuery) and this isn’t a coincidence. The library’s core is well-thought-out and the jQuery team has an incredibly methodical process to implementing new features – features that are introduced to improve the library with each release. Being designed from day one with extensibility in mind has meant that in the last ten or so years, thousands of plugins have been developed by a huge open source-based community; there is a jQuery plugin for almost all use cases now. Unfortunately though, some of these plugins that have been created may also generate some bad press due to the poor-performing and underdeveloped code involved. The saying ‘A poor workman blames his tools’ is true for all of these terribly written plugins and the developers that decide to actually use them. Knowledge within the open source community allows the cream to rise to the top and the jQuery community has published guidelines on extending the library. We have to thank jQuery’s popularity for kick-starting the vibrant JavaScript community we have today. There have been of-spin projects such as ‘jQuery Mobile’, which is an extension of the library to produce mobile and tablet-ready interfaces. Web developers can use an existing skillset to make advanced interfaces for the newest devices – devices that didn’t exist when it was initially released.

The library has enabled developers to work with the DOM API to build a far richer web than we had ten years ago – improving the end user’s experience, which should ultimately be the most important goal of any web project. The library will be a whopping ten years old in August 2016, making it the great grandfather of JavaScript frameworks – a proven and stable platform that has enhanced millions of websites. There was a time when people believed Facebook would start losing users as its popularity increased – this never happened because the platform worked whilst serving a purpose, like jQuery. Understanding, when enhancing an interface to improve the end user’s experience, is key and jQuery has been successfully doing this for nearly ten years. Newer libraries may introduce new features and paradigms; it may not be faster than its native counterpart functionality, yet jQuery’s dependable core and widespread knowledge base ensure that it stays production ready.

What’s up with v3? LEARN MORE ABOUT THE FIRST MAJOR RELEASE IN TWO YEARS Version 3 alpha is now out in the wild and comes in two flavours; much like the release of version 2 it drops support for Internet Explorer below version 9. There is however a ‘compat’ version if you want to support older browsers and utilise new features for your more up-to-date users. The only caveat here being that the compat version will be of a larger file size as well as being slower in real-use performance. When developers release a major version of any framework there is usually a queue of people complaining about breaking changes, and the jQuery team has worked hard to ensure this isn’t the case – almost all code should continue to work with zero changes. There are, however, changes that are a step in the right direction. In previous releases any jQuery methods that hide/show content (. hide(),.show(), .slideIn()) applied display properties directly to the element, sometimes adding display:block to elements and overriding display properties that should have been display:inline – this can cause a lot of layout issues. This is no longer the case and jQuery recommends to hide/show content using CSS classes with methods such as . toggleClass(). This increases performance by ensuring the change is rendered by the CSS render engine. Performance seems to be high on the agenda and whilst reworking the internals of custom attribute selectors (:visible, :hidden) they’ve noted speed increases of up to 17 times faster in execution. The underlying animation engine now utilises requestAnimationFrame meaning smoother animations, less CPU time and reduced battery drain on mobile devices – great if you’re using jQuery in PhoneGap or a Cordova application. Version 3.0 goes some way to futureproofing the library, ensuring that it’s keeping up with the latest standards (. deferred() is now Promises/A+ compliant for example). Along with the increase in performance, and when combined with the removal of deprecated functionality, jQuery v3 is another step forwards.


“

Daniel Jenkins Development lead

“JQuery’s easy-to-understand syntax allows me to introduce experience-enhancing features on websites quickly and efficiently that work across multiple web browsers and devices.”

The library is well-thought-out and the jQuery team has an incredibly methodical process to implementing new features

”


Developer

What’s in the core API? REMEMBERING THE CORE METHODS IS A BIG UNDERTAKING, SO HERE’S A LIST OF WHAT YOU SHOULD KNOW

selectors $(‘selector’)

Attributes & CSS

*

.attr()

api.jquery.com/all-selector/

api.jquery.com/attr/

Selects all elements.

Gets the attribute for the first selected element.

api.jquery.com/innerHeight/ Gets the height of first matched element, This will include the padding as well but does not include the border.

.innerWidth()

.class

Browser Events

.innerHeight()

.resize() api.jquery.com/resize/ Binds event handler on resizing.

event preventDefault()

api.jquery.com/class-selector/

.data()

api.jquery.com/innerWidth/

Selects all elements with the given class.

api.jquery.com/data/ Store data associated with matched element or return the first matched elements.

Gets the width of first matched element. This will include the padding as well but does not include the border.

.prop()

.outerHeight()

api.jquery.com/prop/

api.jquery.com/outerHeight/

.scroll()

Gets the value of a property for the first matched element or sets a property on matched elements.

Gets the height of first matched element. This will include the padding, border and optionally the margin.

api.jquery.com/scroll/

#id api.jquery.com/id-selector/ Selects a single element with the given id.

selector1, selector2, selector3

api.jquery.com/event. preventDefault/ If this method is called, then the default action of the event will not be triggered.

Binds event handler upon element scrolling.


bit.ly/1Cs2xEX

Selects the combined results of all the specified selectors.

.load()

.val()

api.jquery.com/val/

.outerWidth()

api.jquery.com/load/

api.jquery.com/outerWidth/

Binds event handler to JavaScript ‘load’ event.

bit.ly/207g9md

Gets the value of the first matched element or sets a value on the matched elements.

Selects all elements with the given tag name.

.addClass()

element

Gets the width of the first matched element. This includes padding, border and optionally the margin.

api.jquery/ready/

api.jquery.com/addClass/

.width() api.jquery.com/width/

bit.ly/207gbdS

Adds specified class to the matched elements.

Selects all direct ‘child’ elements specified by ‘parent’

.css()

parent > child

ancestor descendant bit.ly/1PPT039

api.jquery.com/css/

Gets the current computed width (in px) of the first matched element, or it will set the width on all of the matched elements.

Adds specified style property to the matched elements.

.offsetParent()

.on() api.jquery.com/on/ Attaches an event handler for one or more events.

.trigger()

Gets the closest ancestor element that is positioned.

api.jquery.com/trigger/

Determines if any matched elements are assigned to a specific class.

.position()

.blur()

api.jquery.com/position/

api.jquery.com/blur/ Binds to the form ‘Blur’ event.

.removeClass()

.hasClass()

:first

api.jquery.com/hasClass/

Selects the first matched element.

:last

api.jquery.com/removeClass/

Gets the current coordinates of the first matched element, relative to the ofset parent.

api.jquery.com/last-selector/

Removes specified class from matched elements.

.scrollLeft()

Selects the last matched element.

Specify function to run when DOM load is complete

api.jquery.com/offsetParent/

Selects all of the elements that are the descendants of the ancestor element.

api.jquery.com/first-selector/

.ready()

Executes matched events.

.change() api.jquery.com/change/ Binds to the ‘change’ event handler.

api.jquery.com/scrollLeft/

:first-child

.toggleClass()

bit.ly/1LXfv4A

api.jquery.com/toggleClass/

Selects all elements that are the first child of their parent.

Adds or removes a specific class from matched elements.


The current horizontal position of the scrollbar for the first matched element or sets horizontal position of the scrollbar for elements.

.focus() api.jquery.com/focus/ Binds or triggers to the form ‘Focus’ event.

HTML5 & CSS3

Genius Guide

runtime can continue while waiting on asynchronous tasks to complete. ES6 introduces the fetch() API, an extension of the XHR standard and it look similar to jQuery’s syntax:

fetch('/script.php') .then(function(data){ console.log(data) }).catch(function(){ console.log('error') }) There is the potential for future releases of jQuery to enable the fetch() API in browsers that support it. ES6 allows developers to work with JavaScript files as modules. On a website where jQuery is only required on one of the webpages, ES6 modules can help. Libraries such as RequireJS help to do this but incur browser load and performance penalties for the end user. Theoretically jQuery could be extended in ES6 when you do it like this:

jQuery and ES6

//script.js import * as $ from 'jquery'; //jquery.js module.exports = { $ : jQuery() }


TAKE A LOOK AT THESE ES6 FEATURES AND HOW JQUERY CAN USE THEM

ECMAScript 6 or ES6 is the name for the JavaScript wrote by developers utilising v1 of latest version of JavaScript, oficially the library works with the latest version of Extending launched in June 2015, it’s going to today’s browsers, and vice versa with take browsers a considerable jQuery code written in v2 and older You can make use of jQuery.fn. amount of time to implement all of browsers. This is no mean feat – it’s extend() ($.fn) to extend the the new features. Developers one of the main reasons the jQuery jQuery prototype and provide wishing to implement the code library still exists and has a massive yourself with new methods that now will need to use a compiler user base, a lot of logic happens can be chained of the jQuery() from ES6 into ES5 such as babel behind the scenes. As newer function. (babeljs.io) to ensure backwards features are introduced, jQuery takes compatibility. The current version of a logical approach to supporting them JavaScript (ES5) can turn developers with a with a good forewarning on sunsetting back-end mindset blue in the face with its lack of older functionality. certain language features. The release of ES6 is Asynchronous functionality is notoriously hard to designed to move JavaScript as a language towards a understand and recent versions have introduced the platform for building more complex applications; the latest standard of Promises. Many developers rely on creation of platforms like Node.js and PhoneGap have the library to send/receive data to the server, from the proven that JavaScript is an extensive language no browser using the $.ajax() wrapper. var request = $.ajax({ longer existing in just the traditional web browser url: "script.php", context. Smart TVs, mobile applications, websites, method: "POST", servers and many other platforms now depend on }); JavaScript, thus updating the language needs to be request.done(function( msg ) { controlled and ES6 goes a long way to becoming console.log(msg); backwards compatible. }); ES6 may not be production-ready today – unless the request.fail(function( jqXHR, textStatus ) { exact platform specifications are known, yet it contains console.log(‘error’); features the modern web developer will want to be }); aware of. Languages evolve and the technology that supports them does too, jQuery has a proven track JQuery’s recent implementation of Promises enables record of helping developers build interfaces for the developers to efectively ensure that the JavaScript widest level of support available. The majority of

This module pattern would enable jQuery to remove the method $.fn.extend() and allow plugin developers to still hook into the jQuery core. ES6 controversially introduces classes, constructors and extend into the language – something back-end developers will rejoice about. Regardless of opinion the new inheritance model could be put to good use with jQuery becoming class-based, with plugins extending the base jQuery class.

class pictureSlider extends jQuery { constructor() { this.slideSpeed = 5; this.touchEnabled = true; } //plugin code } There isn’t currently an ES6 implementation of the jQuery library, but as popularity increases the library will look to support it. A large community built on plugins using the current $.fn.extend() prototype makes picking one of the previous two examples for extending the library a logical move once browser support is ready. ES6 introduces many native APIs that jQuery has included workarounds for in previous releases such as new iterators (for + of) and common data-structures (.map). You can read more at ecma-international.org/ ecma-262/6.0/) for a full list of all the new ES6 features. ES6 will make a lighter and faster jQuery, ensuring that developers using the library can focus on writing code that is doing less behind the scenes and more for the end user.


Developer

“

JQuery provides a multitude of helpful functions, that should have been included in JavaScript from day one

”

A pro’s guide to the www.fullengineeringbook.net benefits of jQuery JQUERY HAS THE POTENTIAL TO TURN A GOOD DEVELOPER INTO AN EXPERT – FIND OUT HOW

Matt Leach Head of development, Thinking Juice

“Using jQuery was the first time I saw the web as more than a flat interface and a place to create experiences for users and customers, every time I use the library I learn something new.”


When looking to use web technologies for a project there are many factors involved in the decision-making process to consider, such as how long until the project needs to be delivered. Does the project need to support the latest browsers? Or even worse support the oldest of browsers? Does the project have to withstand being production-ready, bug-free and dependable? Multiple factors play a part, some that may not even be considered by the developer when embarking on a new project. Working with HTML and CSS can, for many, be an easy choice when it comes to building interfaces, yet the sheer number of JavaScript frameworks to choose from can be bewildering. Syntax aside, choosing the right framework takes a large amount of consideration. It’s the wider thought process of the entire project and the impact of decisions made early on that makes a good developer, great. Knowledge like this isn’t gained over night but practising, experimenting, making mistakes, learning and talking to peers can reduce the headaches along the way of mastering development.

Progressive enhancements JQuery was initially introduced to enhance the world of web development and, like all open source eforts, to enhance the framework user’s experience. In the real world these enhancements can be measured by trivial

elements such as allowing new features to be added to a website within tight timescales or ensuring a student can complete a task they set out to do. Take for example the blue chip world, a world that has inherently slow IT upgrade schedules with the majority of these users using much older versions of Internet Explorer, picking the right library helps to ease the pain of building features that are cross-browser compliant. Trying to write vanilla JavaScript for even basic use cases can be painful, taking the blue chip world for example try adding a class in jQuery:

$(‘#contact’).addClass(’sent’); The jQuery method has enabled this functionality in minimal code for working across multiple browsers. Now try writing that in native JavaScript:

document.getElementById(“contact”). classList.add("sent"); Now this is nearly double the length and works in modern browsers, looking back to older versions of IE this would cause an error. To ensure cross-browser compliance look at this code (and its length):

var d = document.getElementById("contact"); d.className = d.className + " sent"; One line of code may sufice if the project only uses JavaScript for this single action – loading in a library

HTML5 & CSS3

Genius Guide

5 jQuery features you need to know METHODS THAT ARE WELL WORTH USING

.promise() You can use this method to return a Promise object to observe when all actions of a certain type that are bound to the collection, regardless of whether it is queued or not, have finished.

.ajaxSetup() api.jquery.com/jQuery.ajaxSetup/ This little-known method allows variables to be predefined for all AJAX requests. For example using a defined URL route for all requests in an application could be set via:

$.ajaxSetup({ url : ‘/requestMe’ })

.grep() api.jquery.com/jQuery.grep/ Grep is a Unix command and jQuery provides this as a helper that is great for searching through arrays for specific values. would then be overkill. JQuery gives developers a set of tools that keeps all levels focused on the end goal.

Deadline-driven development

repeated more than once there is probably a way of automating that process. DRY (don’t repeat yourself) principles are abundant when it comes to writing eficient, human-readable code. Look at this code for changing an element’s state once interacted with:

var data = [0,1,2]; var filteredData = $.grep( [ 0, 1, 2 ], function( n, i ) { return n > 0; }, true );


Deadlines, much like taxes, are unavoidable in most walks of life, and a day-to-day occurrence. Known for causing many a grey hair, working smart can make the approach much more bearable. It’s all too common to see more junior developers looking at a current project or application and then announce ‘Hey, we should rewrite that in this cool framework’. This doesn’t mean they are incorrect and their enthusiasm shouldn’t be rewarded, but taking on board a new library has to be carefully considered. It needs to ensure a return on investment whether that’s personal or financial. There will be companies pushing products live with a new library, built by a freelance resource that their internal developers can’t support. In a development team, at crunch time, everyone will be expected to help and chances are nine out of ten developers in the team will be able to help iterate on any code wrote in jQuery. If written in the ‘cool’ framework the resource pool may be slightly smaller. When starting any project be aware that at some point in the future, other developers will have to support it.

How do the pros really use it? A skilful developer is someone that has not only mastered the art of writing code and logical thinking but the understanding that if something has to be

“

$(‘.btn’).addClass(‘in-use’); $(‘.btn’).attr(‘disabled’, true); $(‘.btn’).data(‘used’, true);

JQuery provides a smart developer the ability to chain these methods, using the prototype inheritance model (a paradigm widely used JavaScript):

$(‘.btn’).addClass(‘in-use’). attr(‘disabled’, true).data(‘used’,true);

The variable filteredData is now an array of any values greater than 0;.

.closest() api.jquery.com/closest/ This method traverses upwards from the current DOM element to a document’s root element. It accepts a jQuery object as an argument and if included when traversing, jQuery returns the first matching element.

.holdReady() JQuery provides a multitude of helpful functions, that should have been included in JavaScript from day one. Replicating functionality that other languages contain from the outset, a lot of very similar libraries exist purely to fulfil these tasks. Many JQuery utility methods are a secret toolset that a lot of developers don’t mention frequently. The jQuery library may not be the fastest or the lightest but a community of thousands can continue producing interfaces in an ever-changing world of technology. Being a good developer isn’t about being an early adopter it’s about writing well-formed code that works when required, whilst knowing the tools to get the best out of the platform.

Taking on board a new library has to be carefully considered. It needs to ensure a return on investment

”

api.jquery.com/jQuery.holdReady/ This is a relatively unknown method that holds or releases the .ready() function. Use cases for this may seem far-fetched, but there can be times where the DOM is ready but other functionality should happen first.

$.holdReady( true ); $.getScript( "myplugin.js", function() { $.holdReady( false ); });

$.merge() api.jquery.com/jQuery.merge Developers used to PHP (array_merge) will recognise this as a fast way of merging two arrays – this neat helper provides functionality that native JavaScript doesn’t provide.

var new_array = $.merge( [ 0, 1, 2 ], [ 2, 3, 4 ] )


Developer

Advanced jQuery REGARDLESS OF EXPERIENCE, THESE ADVANCED METHODS OF ARE DEFINITELY WORTH CHECKING OUT

Filters

Utilities

Deferred Object

AJAX

.eq()

inArray()

api.jquery.com/eq/

bit.ly/1MgB8c6

deferred.always()

api.jquery.com/jQuery.ajax/

Reduces the set of matched elements to the one at the specified index.

Searches for a specified value in an array and returns its index.

api.jquery.com/deferred. always/

Performs an asynchronous HTTP (AJAX) request.

jQuery.isArray()

jQuery.ajaxSetup()

jQuery.ajax()

.filter()

bit.ly/1GvAzz8

Adds handlers to be called when the deferred object is either resolved or rejected.

api.jquery.com/filter/

Determines whether the argument is an array.

deferred.done()

Reduces the set of matched elements to those that have matched the selector or pass the function’s test.

.jQuery. isEmptyObject() bit.ly/1Nyv0zh

.first()

Adds handlers to be called when the Deferred object is resolved.

Checks to see if an object is empty.

api.jquery.com/first/ Reduces the set of matched elements to the first one that is in the set.

api.jquery.com/deferred. done/

jQuery.isFunction() api.jquery.com/jQuery. isFunction/

api.jquery.com/jQuery. ajaxSetup/ Sets default values for any future AJAX requests.

jQuery.get() api.jquery.com/jQuery.get/

deferred.notify()

Loads data from the server using a HTTP GET request.

api.jquery.com/deferred. notify/

jQuery.getJSON()


.has()

jQuery.isNumeric()

deferred.progress()

api.jquery.com/jQuery. isNumeric/

api.jquery.com/deferred. progress/

jQuery.getScript()

Determines whether its argument is a number.

Specifies a function to run when DOM load is complete.

api.jquery.com/has/ Reduces the set of matched elements to those that have a descendant that matches the selector or DOM element.

api.jquery.com/is/

jQuery.makeArray()

Adds the handlers that will be called when the deferred object goes on to generate the progress notifications.

Checks against a selector and return true if at least one of these elements matches the selector.

api.jquery.com/jQuery. makeArray/

deferred.reject()

.is()

Converts an array-like object into a true JavaScript array.

bit.ly/1GIgIMT

api.jquery.com/last/

jQuery.merge()

Reduces the set of matched elements to the final one in the set.

api.jquery.com/jQuery. merge/

deferred.resolve()

.map()

Merges the contents of two arrays together into the first array.

api.jquery.com/deferred. resolve/

Parses each element in the current matched set, producing a new jQuery object containing the return values.

jQuery.now()

Rejects a deferred object and calls any failCallbacks with the given arguments.

.slice()

jQuery.parseHTML()

api.jquery.com/slice/

api.jquery.com/jQuery. parseHTML/

api.jquery.com/map/


api.jquery.com/jQuery.now/ Returns a number representing the current time.

Parses a string into an array of DOM nodes.

Loads JSON data from the server with a GET HTTP request.

bit.ly/1RdOJVI

.on() api.jquery.com/on/

Rejects a deferred object and calls any failCallbacks with specified arguments.

.last()

Reduces the set of matched elements to a subset specified by a range of indices.

api.jquery.com/jQuery. getJSON/

Checks if the argument passed is a JavaScript function object.

Calls the progressCallbacks on a deferred object along with the given arguments.

Attaches an event handler for one or more events.

.trigger() api.jquery.com/jQuery. getScript/ Loads a JavaScript file from the server using a GET HTTP request, then executes it.

.load() api.jquery.com/jQuery.load/

deferred. resolveWith()

Loads data from the server and places the returned HTML into the matched element.

api.jquery.com/deferred. resolveWith/

jQuery.post()

Resolves a deferred object and calls any doneCallbacks with the given context and args.

api.jquery.com/jQuery.post/ Loads data from the server using a HTTP POST request.

HTML5 & CSS3

Genius Guide

5 common mistakes to avoid A LITTLE KNOWLEDGE OF THE COMMON MISTAKES EVERYONE MAKES CAN HELP TO PRODUCE BETTER CODE

1. Relying on $(document).ready(); the browser’s cache, which would reduce bandwidth and Including JavaScript in the tags and then page-load time. waiting for jQuery to run when the DOM is fully loaded 3. Faster selectors can cause the end user a headache-inducing wait. With the introduction of CSS preprocessors, it’s become Executing JavaScript code when the browser has loaded a bit of an issue with overly specific CSS declarations yet the complete DOM is in itself inherently dificult and with jQuery – we find the opposite happening. Look at troublesome. Each browser tells JavaScript when the this navigation code: DOM is ready at a diferent time and jQuery has a
helpful method – .ready() – that does a
Home
$var syntax ensure the DOM is loaded before firing.
about
let others know it’s a jQuery meaning when the browser finds
tag it won’t do anything href='#contact'>contact able to access the element Any assets, photos, CSS and other
without having to search for JavaScript files, won’t execute until <script> the DOM again. this file is loaded. It’s considered best $('.nav-item').click(function(){ practice to place all JavaScript assets in //code to scroll to location the footer as JavaScript should enhance a }) page, not build the UI. If code is required to execute when all assets in the webpage are ready, it would be The lack of specificity here means that jQuery has to convenient to do this: traverse the whole DOM to find .nav-item – on big pages The code doesn’t get executed until the whole DOM is this can reduce performance greatly. It’s like going ready – large images slow down the time from page load shopping and having to look at every item in the shop to to the JavaScript firing. //code// find a specific item. You can increase performance by (function($) { increasing selector specificity:

$('#navigation').addClass('visible'); //execute other code $('#navigation').removeClass('visible'); Every time jQuery wants to alter the navigations class attributes, it has to traverse the whole DOM and find the element with the id #navigation, alter its class then continue processing the next line of JavaScript. Each time the $(‘selector’) is used, jQuery has to look for this element in the DOM. Assign the jQuery $(‘selector’) object to a variable increases performance, as a reference to that element is now available in memory.

var $navigation = $('#navigation'); $navigation.addClass('visible'); //execute other code $navigation.removeClass(‘visible');

5. Animating with jQuery When jQuery was initially released, its internal animation engine was one of the most ground-breaking features – since then browsers and CSS have moved considerably forward. Take this example of animating an element’s height for example:

www.fullengineeringbook.net //fire code })(jQuery);

Initialising any functions this way enables the JavaScript to execute when it’s possible. The end user will see the page being usable sooner – perceiving a faster load time. If specific code needs to ensure a certain element is completely loaded before being executed, use .load():

$(img).load(function(){ //execute code })

2. Hosting jQuery yourself When building a website that utilises jQuery it’s all too easy to download a copy of the library, place it in a local directory then load it in to the pages required.

<script src='/jQuery.js'> For every new visitor to a website they have to download this file from the server, which slows down the initial page load and introduces an extra drain on bandwidth. Reference jQuery from a CDN and the chances are that when someone visits the website, they will previously have visited a website that hosts jQuery with that CDN (Google for example) and already have jQuery stored in

Home

about

contact

<script> $('#navigation .nav-item'). click(function(){ //code to scroll to location })

$('.changeHeight').animate({ 'height' : 250 }, 650);

JQuery internally calculates the element’s height, then changes the height up to 60 times a second, causing the browser to redraw the DOM every single time it’s changed (60fps). CSS animations in modern browsers are handled using hardware Smooth acceleration and are processed by the auto heights GPU ensuring a faster experience over Adding the class .open to the CPU tasks like rerendering the DOM element will cause the GPU to for example. <script> $('.changeHeight').addClass('open');


Developer

www.fullengineeringbook.net discove r the top jquery add - ons for m ak i ng you ience r websites and apps A bet ter exper

Expert speaks Tam Hanna works with Symbian software products and a variety of coding languages. He reveals the best plugins for powering up jQuery


HTML5 & CSS3

Genius Guide

Tweak Photos
<script type="text/javascript"> $("#editor-window").imageEditor({ 'source': '/img/demo.jpg', "maxWidth": 500, "onClose": function () { } });

Plugin: Image Editor bit.ly/1hIv6c1 Category: Photo editing Users love to edit uploaded pictures on the web. Image Editor provides a svelte little GUI wrapper around the Camanjs filter library: it saves you from the hassle of coding a set of sliders, buttons and symbols which come together to make up a little editor.

Manage UIs bit.ly/1GK1Ub7 Tree views provide a way to manage complex user interfaces: if options are grouped up, the UI appears less daunting at first glance. EasyJSTree’s tree structures start out as a group of list tags, which are then spruced up by invoking the easytree() method on the mother element.

Getting started with the Image Editor plugin requires the embedding of four libraries and a picture box. Our test harness starts like this:

OnClose is invoked if the user clicks the close button below the image: you can use the various methods found in Canvas in order to obtain the results of the editing operation. Image Editor’s Save button compresses the picture into a file which is then served <script src="dependencies/jquery.min.js"> Other initialisation options include maxHeight, for the <script src="dependencies/jquery-ui.js"> maximum width of the image; remoteSave, where the <script src="dependencies/bootstrap.min. default save method is browser; remoteURL, for where js"> you want to send the image to; blockEnable, <script src="dependencies/caman. which should only be enabled if jQuery full.js"> Required BLOCKUI is enabled; blockMessage, a <script src="js/boostrapdependencies message that will be displayed in the image-editor.min.js"> libraries: the latest jQuery, jQuery callback after the save event. with a constantly growing provided to inform you about the most browsers pop up an alert dialog about In practice, images smaller than XGA tend to work well – keep in mind that Firefox is not multithreaded, which leads to resource competition between tabs. Keep in mind that the download is not complete and that’s because each of the libraries also expects its OTHER AUTHOR PLUGINS: resources to be in place for the GUI to work. This can be Ritchy Chen accomplished by extracting the individual archive’s rithychhen.com contents into the /dependencies folder. Plugin 1: Scrollbar Indicator Image Editor does its magic in a
tag, which is bit.ly/1LxgHeR populated at runtime via the imageEditor function. Our Plugin 2: Birthday Picker example loads the editing tools during page load – in bit.ly/1hIvnvy practical applications, starting the editor on demand might be more eficient:

Pop-up dialogs bit.ly/1MWNFGr Palm OS graced developers with the popup: a complex modal dialog which could be invoked to get a result. Prompt21 obviously was inspired by the golden oldie. Invoke the popup after calling the var p = $(“.popup”).prompt21(); method on it, and feast your eyes on a JSON object containing the values entered in the dialog’s widgets.


“

Image Editor does its magic in a
tag, which is populated at runtime via the imageEditor function

”

Tab bars bit.ly/1OHWpjG Tab bars are a classic: if there’s little screen real estate, multiply it by introducing some tabbing. TurboTabs expects you to feed it with a structure of
and
elements alongside a configuration object that can be set up via a tool on the plugin’s website. Your input will then be transformed into a svelte-looking and nicely animated tab bar.

Sticky cursors bit.ly/1RMbaSs Making a widget stick to the cursor is helpful when a drag-and-drop-like interface is to be implemented. ObeyCursor transforms this task into a no-brainer: simply configure a
tag of choice, and configure it with a call to the obeyCursor method:

<script type="text/javascript"> $(function() { $("#slave").obeyCursor(opts); });


Developer

Web Windows manager Our web app has been rendered in a little pop-up window. You can spruce up its looks by deploying your chosen GUI framework.

Users are free to change the desktop background to an image as they see fit.

Deskible’s start menu will remind users of classic versions of Windows 95 to 7. The ‘default’ items in our screenshot can be removed if desired.

A small clock located in the bottom-right corner of the screen can help your users to keep track of time.

www.fullengineeringbook.net Plugin: Deskible bit.ly/1PwPvyu Category: Window manager Ever found yourself sufering from MDI envy while working on a web app? This proof of concept creates a relatively full-featured Window Manager based on your favourite web technologies. It helps developers to create and manage a number of dynamic windows inside their web applications.

First download Deskible from GitHub. This must be done via the command line to satisfy the dependencies. Next, open index.html for the correct operation. As of this writing, the log-in window is not implemented – just click Login to move into the desktop environment. Start menu content is configured by startMenu array content declared in app.js. One example looks like this:

startMenu: [{ icon: 'book', label: 'Documentation', sub: [{ icon: 'wrench',


id: 'docu-setup', label: 'Setup and Layout', options: { tabs: false, content: { url: 'apps/documentation/setup.html' } } }, { Higher-level folders are created as simple array elements, while their subelement contains the actual content. Looking at /apps/examples/irc.html reveals that the IRC client consists of but the following line:

<iframe type="text/html" width="100%" height="100%" src="https://kiwiirc.com/ client" frameborder="0"/> Complex content is best created via an iframe: Deskible will load it as if it were found in a website, displaying content in the area decorated by the window manager’s widgets. A custom installation of Deskible starts by removing unneeded elements: for most applications, a YouTube player and an IRC client are overkill. Proceed to an iFrame-hostable web apps in the apps folder:

<script>

function tmgnBtnClicked() {alert ("Hello World!");} R:
U:
I:

Next, add the relevant entry to the start menu. Our resistance calculating widget will sit in Tamoggemon -> OhmCalc, accomplished via the following snippet:

startMenu: [{ icon: 'book', label: 'Tamoggemon', sub: [{ icon: 'wrench', id: 'ohmcalc', label: 'OhmCalc', options: { tabs: false, content: { url: 'apps/ohmcalc.html' } } },]}

HTML5 & CSS3

Genius Guide

Telephonic enforcer bit.ly/1VVXt3V Users hate sharing their phone number with random websites. This library contains a set of validation routines aimed at catching miscreants red-handed. Please keep in mind that MobilePhoneNumber does not check whether the user really owns the phone in question – it merely keeps honest people honest by not allowing them to enter malformed numbers.

Manage Cookies Plugin: CookieBar and js-cookie bit.ly/1LdDLxR and bit.ly/1av6HUb Category: Cookie management EU regulations have made cookie management dificult: as Google recently decided to require EU compliance in its AdSense program, developers need to conform to the regulations. Fortunately, a combination of these two cookie plugins makes compliance and data handling really, really easy!

Achieving compliance in itself is really easy: cookieBar is shipped with a stylesheet that contains the logic for a basic cookie bar that is easily dismissable by the user. Best of all, you don’t have to use any markup either! Start of by including the JS and the CSS file along with the main jQuery library:

with one provided by your legal department, and can also modify the styling to make the cookie bar blend in better or stand out more. In the next step, it is now time for us to actually persist some data. First of all, the cookies library must be included in the header:

<script src="js.cookie.js"> JQuery’s js-cookie plugin provides a bunch of helper methods for implementing a basic KV store – reading data from it can be accomplished like this:

$(document).ready(function() { if(Cookies.get('imagineCookie')===undefined) { alert("No cookie there yet"); } else { alert("Found: " + Cookies. get('imagineCookie')); } });

<script src="jquery-2.1.4.js"> <script src="jquery.cookieBar. Js-Cookie js"> For some quickfire github.com/js-cookie/js-cookie. It is written by one of the authors,

www.fullengineeringbook.net Protect your images bit.ly/1LdEGy9 Image theft happens more than you think. This little utility uses the HTML5 Canvas editing capabilities to stamp images with a watermark on the client’s browser – a feature which can also be used to frame images, thereby strengthening your website’s corporate identity. As with all other client-side security systems, be aware that sophisticated attackers are able to work around it with the most minimal of efort.

Saving data is then done via the set method. Cookies do not limit themselves to basic types: you can also persist JSON objects by passing them in.

Fagner Brack, and includes $(document).ready(function() { Displaying the actual bar can then be details on integration if(Cookies.get('imagineCookie')=== accomplished by invoking the with Angular. undefined) cookieBar() method. The plugin contains the { necessary logic to keep state: the user will not see alert("No cookie there yet"); the bar twice if he does not delete the cookie:

Cookies.set('imagineCookie', "Hello Cookie"); }

<script type="text/javascript"> $(document).ready(function() { $.cookieBar(); });

AUTHOR BOX: Carl Woodhouse

github.com/carlwoodhouse

Klaus Hartl

github.com/carhartl

Fagner Brack CookieBar provides a variety of methods to aid in the customisation process: you can replace the default text

“

github.com/FagnerMartinsBrack

JQuery’s js-cookie plugin provides a bunch of helper methods for implementing a basic KV store

”


Developer

Break and merge images

Find faces Plugin: Face detection

Plugin: ChunkIt bit.ly/1GK5ims Category: Image manager Breaking images down along rectangular patterns has always been popular – the Pet Shop Boys’ teaser for Love Etc in 2009 brought the design pattern to public attention. This plugin takes an image, renders it into a Canvas and then chops it down into tiny pieces which you can arrange to create psychedelic wallpaper designs.

ChunkIt does its magic by creating a structure of li tags contained in a ul tag: each one of them contains an tag which, in turn, contains its picture data as an inline image. Since browsers decorate list tags with all kinds of objects by default, we start out by declaring an embedded stylesheet which aims to calm these tendencies down.

<script src="jquery-2.1.4.js"> <script src="jquery.chunkIt.js"> <script> $( document ).ready(function() { $('#gridHouse').chunkIt({ imgURL : 'flowers.jpg' , cellsInRow:5, cellsInColum:5, shuffle:true}); }); The chunkIt() method takes a JSON object which configures the actual behaviour of the tiling engine. ImgURL is a URL to the image, while cellsInRow and CellsInColum decide the size of the result. Setting shufle to false arranges the
tags in line – you can always perform a correlation between their ID and the part of the image contained within. In the case of our example, the structure generated looks like this:

bit.ly/1jGT3BR Category: Image analysis Finding faces in pictures is important for multiple reasons: when digital cameras with the feature were first introduced, getting perfectly exposed portraits became so much easier. This plugin allows you to look for faces in image files provided by your users or a server of choice. Face detection is relatively ‘accepting’ of older jQuery versions – the plugin’s author specifies it with jQuery 1.11.1. We’ve used a recent edition for brevity reasons:

<script src="jquery-2.1.4.js"> <script src="ccv.js"> <script src="cascade.js"> <script src="jquery.facedetection.js">


In the next step, the actual instantiation of the plugin takes place. The invocation of chunkIt() does the actual work – expect the browser to stall for a bit of time:

“

. . .

Browser support

Finally, a
tag must be erected. ChunkIt will use it as the ‘mother tag’ for the generated structure:

ChunkIt uses HTML5
Canvas internally, and thus may not work on older versions ChunkIt should not be combined of browsers. Compatible with very large images: sizes that browsers include Chrome, IE9, are any larger than about 1600 x Firefox 12 and more. Read 1200 leads to long processing times. more at mzl. This is especially harmful on singlela/1W8UMkX. threaded browser such as Firefox: the entire browser window shuts down when the tesselation process is running.

The chunkIt() method takes a JSON object which configures the actual behaviour of the tiling engine 110 HTML5 & CSS3 Genius Guide

”

Face Detection expects to find its source picture in a tag. We have used an image provided by the developer here – feel free to swap out its URL to point to a photograph of choice:

Now let’s invoke the actual processing function. As with most other jQuery plugins, Face Detection takes an array of elements which permit you to customise plugin behaviour. Complete gets invoked once faces have been detected. The method is provided with an array of face objects, each of which exposes a group of properties containing further information about the detected face. Our code example restricts itself to outputting some data to the debugger’s console:

$('#picture').faceDetection({ complete: function (faces) { for(i=0;i
HTML5 & CSS3

Genius Guide

Responsive charts Plugin: chartist-js bit.ly/1GhA775 Category: Data visualisation Libraries that make diagrams come a dime a dozen: ultrasimple Canvas-based ones stand next to behemoths such as the fearfully complex D3.js. Chartist difers from its competitors in that it aims to combine the no-frills approach of Canvas-based renderers with the print-ready quality provided by SVG.

Even though Chartist can – in theory – also be used without jQuery, most developers will settle with an include structure similar to the following. At the time of writing, the recommended CDN contained broken code – our example contains a copy of the code which works on Firefox:

“

At the time of writing, the recommended CDN contained broken code ] }, { fullwidth:true

”

following version draws a significantly larger circle on top of each data point of our line chart:

function makeFancyChart() { }); var chartRef=new Chartist.Line('.ct-chart', } { . . . chartRef.on('draw', function (data) Chartist’s diagram methods tend to take a pair of {if(data.type==="point"){ parameters: the first variable contains the data to be data.group.append(new Chartist. displayed, while the second variable can provide Svg('circle', { you with a variety of display settings. Going cx: data.x, SMIL on to change the display to create a pie cy: data.y, support chart doesn’t require much extra efort Chartist.js supports all kinds of r: 20 animations: charts can be enriched }, 'ct-slice-pie')); function makePieChart() with marching ants and similar }}); { niceities. Sadly, this requires support } var data = { for SMIL – a feature sorely series: [20, 30, 55] Draw gets emitted every time a new missing in all versions of }; element is created: its type subattribute Internet Explorer. var sum = function(a, b) { provides information about the type of return a + b }; element at hand. new Chartist.Pie('.ct-chart', data, { Some features – axis labels are a common example – labelInterpolationFnc: function(value) { might be required in some jurisdictions like Austria, but return Math.round(value / data.series. are not considered important enough by the developers reduce(sum) * 100) + '%'; who pride themselves on the tiny 10KB total file size of } their product.

at all:

www.fullengineeringbook.net <script src="chartist.js"> <script src="jquery-2.1.4.js">

Our example contains a group of buttons which populate the
tag with various diagrams. First up is a humble line chart generated by makeLineChart:

function makeLineChart() { new Chartist.Line('.ct-chart', { labels:[1,2,3,4,5], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3]

}); }

OTHER AUTHOR PLUGINS: Gion Kunz

This example extends the diagram with custom labels created by an interpolation function. It uses data.series. reduce to obtain the sum of the entire dataset, which is then applied to a simple percentage calculation. Developers can use the events exposed by Chartist to modify the look of the resulting diagram. The

github.com/gionkunz Plugin 1: Accessibility for Chartist bit.ly/1GhD6MG Plugin 2: Point Labels for Chartist bit.ly/1NfSeKe

To follow

To follow

To follow

John Resig

JQuery Foundation

JQuery Plugins

@jeresig Two words: jQuery.daddy==John. Follow him to enrich your Twitter timeline with content more or less related to the big jQ!

@jquery The jQuery Foundation is the body which governs the jQuery product family. Follow the account for all the latest, oficial announcements.

@jqueryplugins_ This Twitter account provides a never-ending stream of interesting, weird and/or useful jQuery plugins for your perusal.


Developer

Tile interface Simply changing the background colour is but part of the solution; adding pictures makes your tiles look more natural.

By default, jsTiles renders its tiles right next to one another. Creating spacing is best accomplished via CSS attributes.

The black borders have the same width across all centre boxes: the width diferences in the middle are an optical illusion.

JsTiles is based on Bootstrap: the scaling behaviour of the boxes is determined by attributes taken from Bootstrap.

www.fullengineeringbook.net User avatar selection

Progress dots

bit.ly/1VWCIKO

bit.ly/1jGTzzS

Displaying faces next to comments adds to the perception of an active site or application. Tapatar simplifies the avatar procurement process: it provides a small widget where customers can select their avatar of choice by uploading a file from their desktop, logging in on Facebook or using the Gravatar database.

Waiting sucks. If the duration of a process is not known in advance, displaying a Windows Phone-inspired line of ‘marching ants’ is but a small acknowledgment of the user’s patience. ProgressDots lets you deploy a dotted line with but five lines of code:


$( '#progressBox' ).dottify({ dotSize: '28px', //set size of dot randomColors: true, //use random colors numDots: 7, //number of dots radius: '20%' //set dot corner radius });

HTML5 & CSS3

Genius Guide

Plugin: jsTiles bit.ly/1GhDhro Category: Tile manager Microsoft’s Windows Phone 7 introduced the world to the concept of the tile: ever since, the design paradigm got more and more attention. Implementing tiles looks simple at first glance, but tends to become tedious once attention is paid to details.

Getting started with jsTiles requires the presence of three support libraries: jQuery, jQuery Easing and Bootstrap. As you can see in the full code on FileSilo, Style.css and jstiles.js come from the jstiles distribution, while the remaining references come from support libraries. The following container is to be created:

Content

…

A superficial inspection of the code on FileSilo reveals that the tile management framework limits itself to the arranging of the individual elements; their design, layout and content lie in the responsibility of the developer. With that out of the way, the template must be configured:

var myTemplateObject = { myTemplate: { tilesNum: 6, rows: { 0: { rowClass: 'tl-row col-xs-12', start: '3', end: '5' } }, tiles: { 0: 'col-xs-6 col-md-3', 1: 'col-xs-6 col-md-3', 2: 'col-xs-6 col-md-3', 3: 'col-xs-6 col-md-3',

4: 'col-xs-6 col-md-3', 5: 'col-xs-6 col-md-3' } } } The most important part of the options array is the tilesNum property: it must match the number of the
tags in the container. Rows sets up the size of the individual rows, while tiles configure the individual tile widths. Js-tiles will need to work with Bootstrap: the class names used are taken from the template framework. Next up we’ll apply the generated configuration. In our example, the following bit of code shall sufice:

var opt = { templateObj: myTemplateObject, } $('#tiles-container').jstiles(opt); }); With that, our example is done. Js-tiles provides a variety of additional features for animation and card management: further information on these topics can be found in the documentation.

www.fullengineeringbook.net Keep headers on top Plugin: Headtacular bit.ly/1Lon5ld Category: GUI stack Keeping a header on top of scrolling content can turn out to be a daunting task. This plugin is a representative of the BYOS genre: the acronym stands for Bring Your Own Style, which means that it limits itself to the provision of display logic.

As always, our code example starts out by including both jQuery and the headtacular file. In the next step, shown below, you can now see that a little stylesheet has been generated for us:

<script src="jquery-2.1.4.js"> <script src="jquery.headtacular.js"> Headtacular permits you to use two styles: header is used when the user has not touched the scroll point, while header.is-stuck’s turn comes once scrolling has begun. In the next step, a small header – a b tag along with some text shall sufice – is created:

My Header and some text

“

Finally, the headtacular method must be invoked after the DOM tree has been initialised. In the case of our snippet, we pass in an object showing one of the supported options – as the plugin contains sensible defaults for all options, you can also call the method with an empty JSON object:

<script type="text/javascript"> $(document).ready(function() { var innerHtml="Lorem Ipsum sic . . .
"; for(i=0;i<12;i++){innerHtml+=innerHtml;} $( "#myFill" ).html(innerHtml); $('#myHead').headtacular({ scrollPoint: 1 }); }); The lorem ipsum code unfortunately bloats the page: an empty website does not flow over the screen and thus does not require scrolling.

The acronym BYOS stands for Bring Your Own Style, which means that it limits itself to the provision of display logic

”


Developer Timeline display

{'time': 1398706771300, 'category': 'pings', 'line': "fred", 'label': "two"}, ]; var options = {'categories': categories};

bit.ly/1NLSX96

Log file viewers benefit from a timeline view. This timeline plugin takes a dataset, which is displayed in a zoomable, double-clickable widget. The dots in the timeline are presented horizontally and they Each event is made up of three tuples: a can help users to visualise any graph Timeline lines Unix timestamp, a category (like colour patterns, as part of their log analysis. Its It’s important to specify your for example) and a line identifier data structure looks like this: lines because if you don’t, var categories = { which describes the timeline 'alarms': {'color': Timeline will automatically identify housing it. "rgba(255, 0, 0, 0.7)"}, your lines and plot them in the The Timeline plot uses the }; order in which the plugin finds options object that is passed in for var events = [ them (likely to be from configuration. The options object {'time': 1398706972000, bottom to top). currently supports attributes such as 'category': 'alarms', 'line': categories, lines, lineLabels and 12345, 'label': "one"}, sortLines.

“

This timeline plugin takes a data set, which is displayed in a zoomable, doubleclickable widget

Colour picker bit.ly/1ReHcpt

”

Integrating the colour picker is as easy as adding an input element to the site. A call to the jPipette() method then makes sure that everything is set up correctly:

Footer Testing a footer management plugin requires the presence of a footer – start out by creating the following example page, which self-populates with a bit of lorem ipsum and also contains a footer with some buttons:

<script src="jquery-2.1.4.js"> <script src="jquery.downboy.js"> <script> $( document ).ready(function() { var innerHtml="Lorem Ipsum sic . . .
"; for(i=0;i<7;i++){innerHtml+=innerHtml;} $( "#myFill" ).html(innerHtml); });

This is a footer


The creation of colour pickers have always turned out to be a nuisance, but you can easily rectify this problem in our example by making an open source colour picker for Windows Mobile. JPipette is a similar extension which lets users pick colours from an image on non-IE browsers.

$(document).ready(function(){ $('input').jPipette(); )}

DownBoy is ofered in two versions. If your footer goes by the name #footer, simply embed downboy.auto.*.js in order to put the element in its place. Developers working with a custom footer must instead deploy downboy.*.js, which requires the following bit of extra code to be used:

<script src="jquery.downboy.min.js"> <script> $(function() { downBoy('#myFooter'); // Run on load window.onresize = function() { // On Resize downBoy('#myFooter'); // Run Again }; }); Keep in mind that DownBoy can handle scrolling only if the DocType is set like this::

Plugin: jQuery.downBoy bit.ly/1PlZesf Category: Footer management

Tooltip windows sweefty.com/tinytip Forcing users to consult a manual is a sure-fire way to drive them straight to the arms of your biggest competitors. This plugin strives to increase discoverability by displaying tooltip windows with further information at strategic locations.


TinyTip difers from other products due to its flexibility. Tooltips can be styled via CSS; their appearance can furthermore be triggered by mouse-over, click and even certain custom gestures. One classic example involves complex tooltip windows which get spruced up visually via CSS-generated arrow shapes and/or custom background colours.

A footer can makes web apps look much more professional. Sadly, keeping content at the bottom of a page can be a bit of a daunting task for people who are not 100 per cent confident at working with CSS. This plugin wants to help you out here.

HTML5 & CSS3

Genius Guide


Rain effect bit.ly/1NLRfVa

Scrolling indicator bit.ly/1MHijDH

This plugin uses wave theory to render a line, This plugin treats your users to a progress Substitute which is then animated to simulate indicator informing them about how far raindrop impact seen from the side. they have already scrolled down the with icons For the scrolling indicator, it’s Daniela Harel and Gred McAusland’s page – coders working with Sublime possible that you may plugin is dificult to describe – take a Text will find the feature familiar right encounter roadblocks with the look at the examples by going to the away. The viewport difers from overview image. Should this URL above. classic IDEs in that you need to ever become a problem, feel provide the overview image. Virtual terminal free to substitute the bit.ly/1GK5Qso image with icons. This plugin simulates a Ubuntu-styled Circle calculations terminal window by displaying a set of span bit.ly/1MtzZye Waiting for Godot is normal nowadays: why not ease the elements according to a timing schedule. It is best suited to providing a visual guide for unsophisticated users wait by presenting your users with a snazzy little circular progress bar? This plugin saves you from having to deal working on a command-line system – be aware that the plugin cannot handle user interaction. with the sine, cosine and tangent as found in circles.

Superfast parallax bit.ly/1MtzLXU Research conducted by the Purdue University (docs. lib.purdue.edu/cgttheses/27/) has produced results that show that the presence parallax scrolling significantly increases user satisfaction. Bring a few svelte panoramic shots and this little plugin by Kaspars Jaudzems of Latvia can add the impressive scrolling efect to your web projects with minimal efort.

Creating and/or updating the widget is as easy as calling the circularloader function like this:

$("#divProgress").circularloader({ progressPercent: 35 })


Developer

Produce a picture gallery with jQuery Use jQuery for managing user interactions with CSS to support visual presentation




HTML5 & CSS3

Genius Guide

A JavaScript library that you can almost guarantee to be known by any web developer is jQuery. This is a favourite of many web developers for the simple reason that it helps to make writing code faster and easier – especially when first learning to write code in JavaScript. Much has changed in web development since jQuery’s first introduction – particularly in webpage animation, which was controlled almost entirely through JavaScript at the time of jQuery’s introduction. In the era of CSS3 with hardware-supported capabilities, it is easy to misuse jQuery with outdated techniques for visual presentation; certainly when it comes to working with designers, keeping your presentation inside CSS avoids scenarios where designers become restricted to when adapting your website design. This tutorial looks at how jQuery can be used to manage user interactions and eficient loading of image resources while keeping the presentation functionality within the control of CSS. This approach to using jQuery means that designers who don’t have JavaScript skills can still contribute to adapting the design of your website creations. Additionally, keeping your functionality separate from your design styling and content formatting reduces the risk of introducing faults that break your website when you are making updates.

1. Initiate HTML page

and JavaScript code. This allows these resources to be reused by other pages if required. See FileSilo for more information on where the jQuery library will be placed.

3. Gallery container Use the section to place the gallery content. The gallery template will consist of an article element used as a container for the diferent parts of the gallery – the navigation, details and picture display. These elements will be modified later by the jQuery JavaScript code.

"description":"A peacock standing outside.", "url":"img/image4.jpg" }, { "title":"The Guy", "description":"The guy.", "url":"img/image5.jpg" } ];

5. Wait until loaded 4. JQuery: data The first step in using the jQuery component is to create the file that the jQuery JavaScript code will be placed in – create this as ‘controls.js’. In this file, you should place the following data structure that describes where each gallery image can be found, as well as the title and description to display:

var pictures = [ { "title":"A Cottage", "description":"A little cottage.", "url":"img/image1.jpg" }, { "title":"A Horse", "description":"A horse eating hay.", "url":"img/image2.jpg" }, { "title":"Lake", "description":"Water flowing down lake.", "url":"img/image3.jpg" }, { "title":"Peacock",

It’s important to tell jQuery to wait until the page has loaded before we go on to trying to run any of the instructions – otherwise it will return errors to say it can’t find page elements. We do this by attaching a .ready listener to the page document – which will hold a function that contains our code.

$(document).ready(function(){ //.. place code from next step here });

6. Read picture data The first thing we want to do inside the function created in the previous step is to initiate the reading of the pictures’ data. We do this by selecting the pictures array with the jQuery $ selector and using jQuery’s .each functionality to loop through each of the data items.


As with any webpage, there is a requirement to define the page’s HTML, head and body structure. Use the head section to contain any meta data such as the page title for SEO and accessibility that you may need.

2. Load resources The section of your HTML should contain the links to any resources you are using for the page; in our example, we’ll be using this to load the CSS stylesheet

Easy to misuse Although jQuery exists to make programming easier, it’s easy to misuse it by not using it to its full potential – especially when the library costs over 200k to download.

Left

Images referenced in the JavaScript data is loaded with jQuery and placed in the
container – it looks messy without styling Top left

Images are copied to the
container to be used as thumbnails without needing to reload the images – this allows for fast loading pages Top right

Initial placement of HTML elements don’t appear by default, but are ready interactions from jQuery and styling from CSS


Developer var count = 0; $(pictures).each(function(){ //.. place code for next step in here });

7. Page container Use the section to contain the visible content. We start this by placing the
page container inside the body; this will be used to allow the controlled layout of the content. Your page title, description and index count will go inside this.

var img = $(document.createElement("img")); $(img).attr({ "src":this.url, "data-index":count, "title":this.title, "alt":this.description }); //.. code from next step goes here

$(img).appendTo("figure"); //.. code from next step goes here

9. Create thumbnails A thumbnail is required to show a selectable preview for navigating the gallery images. There is no need to reload images – jQuery can make a clone of each image and then append to the inside of the
container.

var thumb = $(img).clone().appendTo("nav"); //.. code from next step goes here

10. Thumbnail click reactions The thumbnail images we’ve cloned and appended to the
container need to react to any clicks received. We do this by attaching a bind event listener for “click” – which activates a function we declare as a reaction.

$(thumb).bind("click",function(){ //.. code from next step here }); count++;

8. Image to container After each image has been created as an element on the webpage, it will then need to be placed inside the location where we will store every single image. Our example will use the page’s first
element. The ‘figure’ part of this code is a CSS rule that defines how to find the location.

created in Step 7, jQuery can be used to find the image with the same index number as the thumbnail being clicked on – and this is because it has the same details by being a clone. Perform removeClass to take out “hidden”.

$('figure img[data-index="'+this. getAttribute("data-index")+'"]'). removeClass("hidden"); //.. code from next step goes here

13. Size up the height The thumbnail will also have copies of the title and alt attributes from the image it has been cloned from. This lets us easily place the image details inside the
and
elements. We set the content HTML by using jQuery’s $() with its .html() functionality, which will place text or HTML inside the selected element.

$('h3').html(this.getAttribute("title")); $('figcaption').html(this. getAttribute("alt"));

14. Initialise CSS 11. Hide images The first reaction we perform when a thumbnail click has been detected is to hide the images inside the
element being used as the gallery image container. We use the jQuery $ element finder with the CSS rule to find these – ‘figure img’. We loop through each element found and apply a function that will add a class called hidden.

At this point, the jQuery functionality is now complete, but will not function because it lacks the CSS styling. Create a CSS file called ‘styles.css’ and place the following initiation styling for the and elements.

html,body{ background: #000; padding: 0; margin: 0; font-family: monospace; height: 100%; }

www.fullengineeringbook.net Fast and easy JQuery helps to make writing code faster and easier by providing shorthand for common tasks in JavaScript such as referencing webpage elements and iterating through information – like with webpage elements that have been found.

Top left

Styling the page and container now shows the loaded images in some order within the gallery component Top right

Current picture information container now shows at the top of the gallery. The lack of the “hidden” class still means hidden pictures are visible Right

Pictures now have the “hidden” class defined via CSS, which shows the selected image


$("figure img").each(function(){ $(this).addClass("hidden"); }); //.. code from next step goes here

12. Show selected image

15. Gallery container

All images are set to hidden, so next we show the selected image. By using the data-index attribute we

The HTML we’ve created uses an
tag to contain the gallery content. We must use this to define the width,

HTML5 & CSS3

Genius Guide

What is jQuery? JQuery is a general purpose code library created to help make programming in JavaScript faster and easier. It is used by advanced JavaScript programmers as well as web designers who know the basics for tweaking jQuery code – as jQuery is often easier to understand than raw JavaScript. In addition to making JS faster to code, there are many website components that have been created with jQuery for purposes ranging from user interface animation through to searchable data tables and games creation, which often can be customised without advanced programming. JQuery is possibly the world’s most commonly used general purpose JS library, with it often being listed as a requirement for web development jobs.


positioning, background colour and padding. Positioning is centred with ‘auto’ for left and right margins.

article{ display: block; width: 75%; margin: 10% auto 0 auto; background: silver; padding: 1em; }

16. Information container The gallery uses a
element to contain the elements used to display information of the current picture. We will style this to show a dark transparent background with white text to ensure that the content stands out from the gallery picture being shown.

article div{ display: table-caption; position: absolute; top: 0; right: 0; z-index: 2; width: 75%; text-align: right; margin-left: 27%; background: rgba(0, 0, 0, 0.75); color: #fff; }

child images can be placed precisely in relation to it. We also want to set a width that the child images can be set in relation to – hence we can change the container size and have its images automatically change accordingly

figure{ display: table-cell; position: relative; width: 75%; margin-left: 25%; z-index: 1; overflow: auto; }

18. Image positioning The images inside the
container are to be set to be displayed from the same position – we can set them from the top left of the
container because of the relative positioning set in the previous step. A transition efect is also added for changing between pictures.

figure img{ position: absolute; top: 0; left: 0; transition: opacity 1s; width: 100%; z-index: 1; }

19. Hidden image property 17. Image container The gallery image container will be placed at the side of the thumbnails and will use relative positioning so that

The jQuery code is set to add a “hidden” class to images that are to be hidden from view, hence there needs to be a presentation rule set for this. By setting the opacity to 0

with the previous step’s transition rule, we will make images fade out when their status changes.

figure img.hidden{ opacity: 0; }

20. Thumbnail container The thumbnail container is to be positioned at the side of the main image spanning the full height of the gallery. We will also want to make sure that the thumbnail panel will enable scrolling to show any images that don’t fit onto the page.

nav{ display: inline-block; width: 100%; height: 100%; overflow: auto; background: #777; padding: 0; }

21. Thumbnail sizing Thumbnail images are to be stacked above each other – with their height not being a problem due to the
container having overflow: auto to allow for scrolling if required. These images were originally full-sized copies of the originals, but can be resized to be the same width as the container.

nav img{ display: inline-block; width: 100%; }


Developer

Code validation into forms with ngMessages Learn how to create a form with reactive user feedback using Angular and the ngMessages directive


Forms are the gateway between your website and the user’s life. Often forms capture sensitive data like your address, telephone number, card details and so on. Filling in forms is annoying, so as web developers we want to try and make this process as pain-free as possible. One way we can do this is to show helpful, timely messages to the user to let them know if they’ve made a mistake. These are essential to reducing


friction in forms and aiding understanding. We also want to try and make them as accessible as possible so we will include ngAria, too. Angular’s ngMessages module provides developers with an easy way to present messages to a user. It’s described by Angular as being “designed to handle the complexity, inheritance and priority sequencing based on the order of how the messages are defined in the template”. You could use ngIf to toggle the visibility of

messages but this can be complicated when there are many conditions. NgMessages was introduced in Angular 1.3 so it doesn’t work with Internet Explorer 8 or below. In this tutorial you’ll learn how to create a form and use Angular to validate it. Our example will be a registration form for the fictitious ‘Lace & Order’ shop. It’ll feature custom validation directives, default messages and utilise ngModel to its full ability.


HTML5 & CSS3

Genius Guide

1. Install Angular and modules First of we’re going to add ngMessages to our project and our preferred method of adding this in is to use Bower (go ahead and visit bower.io/#install-bower if you haven’t got it installed already). As well as the Messages module we’re also going to make use of the Animate and ARIA modules.

$ bower install angular-animate angular-aria angular-messages

2. Include script files Create a file called ‘index.html’ and then write the markup required for a skeleton HTML page (with the , and so on). Next we’ll import the JavaScript files that Bower had fetched for us just before the closing body tag. Even though we’re using the minified versions here, the browser will map to the full source files.

<script src="bower_components/angular/ angular.min.js"> <script src="bower_components/angularanimate/angular-animate.min.js"> <script src="bower_components/angular-aria/ angular-aria.min.js">

dependencies specific to the registration form.

Directive names

angular.module('formApp', ['register. module', 'ngAria', 'ngMessages', 'ngAnimate']);

In real-world applications you should always prefix your directive names with a couple of letters. This diferentiates them from standard HTML elements.

4. The register module When we write custom directives you’ll also have to add them as a dependency to this module. It’s easy to forget to do this and find yourself spending minutes figuring out why your directive isn’t working!

angular.module('register.module', [‘register.controller']);

5. Register controller The controller for our registration form is very bare bones. So what we’ll do is we’ll add some specific uses to it later (namely to add dynamic text). Behind the scenes it will do the internal wiring to ensure our form works as we expect it to.

(function() { 'use strict'; angular.module('register.controller', []) .controller('registerController', ['$scope', function ($scope) {}]); })();

6. Create the form tag

form tag. Ng-attr-novalidate is an Angular directive which will only apply the novalidate attribute if the expression evaluates to true. We want to disable the native HTML5 validation if the Angular app has successfully loaded.

8. First name input The first piece of data that we’ll capture from the user is their first name. NgModel is used to bind data to the input field. This means that when the data changes, the model is immediately updated. The rest of the markup is your regular HTML5.

First name:

www.fullengineeringbook.net <script src="bower_components/angularmessages/angular-messages.min.js"> <script src="scripts/app/app.js"> <script src="scripts/app/modules/ registerModule.js"> <script src="scripts/app/controllers/ registerController.js">

3. The formApp module The module that will contain all the application-wide dependencies is called formApp. As well as the Angular modules that we included in the previous step register.module is also included. This will include the

The form tag is going to do a lot of work for us. It’s going to be the root of our application and also the controller. NgSubmit is evaluated each time the form is submitted (either by the user clicking the submit button or by pressing the Enter key).

Register

7. The ng-attr directive A couple of other attributes need to be added to the

9. ngMessages first name Here’s our first example of ngMessages in action. Ng-messages takes an Angular expression which evaluates to a key/value object. This behaviour is just like a switch statement. In the example that we have here, the object evaluated is the $error property from ngModel in the firstName field.

Left

This is the page that will contain our form, there’s not much to it yet but the Angular’s ready to go Top left

The initial bit of information we’ll want is their name so we can address future communication Top right

With just a bit of markup and Angular’s inner wirings we’ve got a dynamic message box reacting to the input


Developer 10. ngMessages directive NgMessages does a great job of toggling specific messages but we also need to determine when to show them. Otherwise they’ll appear before the user has touched the form! The messages should only appear if the field is dirty (if it has been filled in) or the user submits the form.

Please enter your first name.

.error { color: #a94442; padding: 0.875em; background-color: #f2dede; width: 16em; border: 0.125em solid #ebccd1; transition: 0.5s linear opacity; opacity: 0; margin: 0; }

13. Submit the form To allow the user to submit the form we’re going to need a submit button! This calls the submit handler that was hooked up at the top of the form. However the user submits the form – be it by click, programmatically or pressing Enter – it calls the same function.

14. Telephone input Let’s take the concepts we’ve looked at and apply them to a new field, a contact number. This time ngPattern allows us to match what the user types to a regular expression. This regular expression checks that only numbers are typed.

You can chain properties together on the same error message to prevent repeating yourself.

Please enter your telephone number.

Please enter a valid telephone number.

16. Postcode input markup You wouldn’t think it but postcodes are actually quite hard to get right because there are so many variations. Nonetheless, we’re going to create a custom directive to try and validate one.

Postcode:


12. Style error messages

Our error messages deserve a bit of love so let’s apply some CSS to them. The most important parts to note are the opacity and transition properties. NgAnimate will use them in conjunction with other classes to ease them in rather than abruptly appearing.

Debugging $errors A useful way to get a quick understanding of an object in real-time is to output it onto the page:
{{form.postcode.$error | json}}
. This will show the object and format it as JSON.

Top left

The telephone error message is shown when the input doesn’t match a REG_EXP pattern using ngPattern Top right

The postcode validation error message appears when we input an incorrect postcode meaning our custom directive is working Right

The default messages are now included in the template unless they’re overridden by one further up in the markup


17. Postcode directive

Contact number:

15. Telephone error messages This time we’re going to use the same technique as before to show a message. As well as ‘required’ there will also be a ‘pattern’ property as ngPattern has been used.

Create a new file under directives called ‘postcode.js’. By requiring ngModel it’s passed as the fourth argument to the link function so that we can extend it. Remember to add it as a dependency of the registration module.

angular.module('postcode.directive', []) .directive('postcode', function() { return { require: 'ngModel', scope: { postcode: '=' },

HTML5 & CSS3

Genius Guide

Utilise ngMessage expressions NgMessages also supports dynamic messages, that is, if you don’t know the name of the message that might be fired you can check it with a message expression. In this example we’ve got an array in the controller called errorMessages which contains a list of objects. These objects represent diferent error states and their corresponding text.

link: function (scope, elm, attrs, ctrl) {} }; } );

return REG_EXP.test(value); } };

19. Include message template 18. Regular expression test

The custom validator is then added as another property to the $error object if it returns false. This means that it can be used within ng-message. We’re also going to use a template to fill in common error messages. This is included with ng-messages-include.

20. Custom message template Ng-messages-include looks for an element’s ID on the page. Angular recommends including templates as a script tag with a custom type so that it doesn’t end up being parsed by the browser. The downside of this approach is the generic wording although this could be paired with dynamic text.


Within the link function we’ll write the postcode validator. logic, which validates most UK postcodes. To register a new validator, add to $validators. Now close spaces and see if the string passes REG_EXP.

var REG_EXP = new RegExp(/^([g][i][r][0][a] [a])$|^((([a-pr-uwyz]{1} ([0]|[1-9]\d?))|([a-pr-uwyz]{1}[a-hk-y]{1} ([0]|[1-9]\d?))|([a-pr-uwyz]{1}[1-9] [a-hjkps-uw]{1})|([a-pr-uwyz]{1}[a-hk-y]{1} [1-9][a-z]{1}))(\d[abd-hjlnp-uw-z] {2})?)$/i); ctrl.$validators.postcode = function (value) { if (typeof value === 'string') { value = value.replace(' ', '');

What’s new in Angular 1.4? Angular 1.3 introduced ngMessages as an experimental module. This meant that developers were free to use it but breaking changes could be made to the API. The main change in 1.4 is that ngMessagesInclude was removed as an attribute on ngMessages. Instead it’s used on a ngMessage directive, like we’ve used in this tutorial. Angular 1.4 also introduced ng-message-exp and when-exp to evaluate expressions dynamically. Upgrading from 1.3 to 1.4 should be straightforward for most projects and you can find detailed migration information at docs.angularjs.

Please enter a valid postcode.

<script type="text/ng-template" id="defaulterror-messages">
This field is required.

This field is too short.

This field is too long.

Breathe life into ngMessages You can add a sense of momentum to your messages with ngAnimate. We’ve already installed and included this module. When ng-messages is shown, a class of ng-enter and ng-active is added – the former when it’s being inserted and the latter when it’s active. Our message boxes all have a class of ‘error’ so we’ll target this and change the opacity. The CSS transition property will then smoothly animate the box in and then out when it’s removed. You can use any sort of animation to be more creative here. .error { transition: 0.25s linear; opacity: 0; } .ng-enter .error, .ng-active .error { opacity: 1; }

org/guide/migration.


Developer

Make drums with the Web Audio API Use Web Audio sound buffers to create a drum kit that responds quickly and triggers sound in high-performance web apps


Quite some time ago now, us web developers got our eager mitts on the

HTML5 & CSS3 Genius Guide Volume 3

Recommend Documents

Please enter your card details

Please enter your card details

Directions

Sponsors

This is a footer

An error has occurred