Escolar Documentos
Profissional Documentos
Cultura Documentos
AL
FREE 72 MINUTES
33
TO F
RI
TUES O
OF HTML VIDEOS
RT G
PE PA
EX
GENERATION
A fast track guide to the framework
Welcome Highlight
to the issue
THE WEB DESIGNER MISSION
To be the most accessible and
inspiring voice for the industry,
offering cutting-edge features
and techniques vital to
building future-proof Steven JavaScript has
developed far
enough that mostly
online content Jenkins jQuery isnt really
needed anymore
Digital pioneers wild tell us
they are heading to the frontier
of digital design
Page 36
CSS is growing up
Many of us have
C
SS was a sensitive soul, once an Element Queries, how to build with the Web Animations
awkward teenager, but now, with the API and how to speed up your website with Critical CSS.
help of browser support, it is starting While CSS is bigging itself up JavaScript frameworks been using variables
to grow and realise its potential. have been building in abundance. There is no shortage
Our latest lead feature (page 44) of them, in fact, and with so many its hard to decide in CSS for a few years
takes a closer look at the latest tools which one to use. Help is at hand on page 66. We take a
and rules that are taking the king of look at the features of the more popular frameworks, through the use of
styling forward to a brave new era. The Angular, React, Ember, Meteor, plus a few up-and-coming
darling of the moment CSS Grid is here. We take options, and help you choose the right one for your
preprocessors like
a look at positioning and ofer a host of useful
tips and tricks to get more from the spec.
projects. Talking of JS frameworks we show you how to
install and get started with the popular Vue.js on page 74.
Sass and LESS, but
Discover the benefits that Custom Properties, or Elsewhere learn how to utilise React to build a now we can use them
CSS Variables if you prefer, will bring to your dashboard application, find out whats new in Angular 4
coding. Plus, find out what you can do with CSS
@WebDesignerMag
in native CSS
Visit our blog for opinion, freebies & more www.gadgetdaily.xyz
Assets
troubleshooting from Pluralsight (www.pluralsight.com)
16 Orange and Teal Photoshop actions
70 vintage wood textures
Tutorial files and assets
www.filesilo.co.uk/webdesigner
meta _________________________________________________________________________ 3
<meta>
contributors
Editorial
Editor Steve Jenkins
Welcome to that
steve.jenkins@futurenet.com
% 01202 586233
Designer Harriet Knight
bit of the mag Production Editor Rachel Terzian
Photographer James Sheppard
where we learn Senior Art Editor Will Shum
Editor in Chief Amy Hennessey
more about the Contributors
Mark Stuckert, Arabella Lewis-Smith, Annie Hall, Mark Billen,
featured writers Leon Brown, Deutsch, wild, David Howell, Steven Roberts,
Mark Shuflebottom, Sarah Maynard, Simon Jones, Tam Hanna,
Jemmima Knight, Matt Crouch
and contributors Advertising
Digital or printed media packs are available on request.
Commercial Sales Director Clare Dove
Advertising Manager Mike Pyatt
% 01225 687538
michael.pyatt@futurenet.com
implementation Licensing
Web Designer is available for licensing. Contact the licensing
bunch of exciting Steven is a front-end developer from Teesside. In this article hell be taking
a look at whats new, upcoming and exciting in CSS. He ofers top tips on
Subscriptions
For all subscription enquiries:
new features on using CSS Grid, how to use Custom Properties (aka CSS Variables), work
webdesigner@servicehelpline.co.uk
%
%
0844 848 8413
Overseas +44 1795 592 878
the horizon
www.imaginesubs.co.uk
with the Web Animations API & peek inside CSS Element Queries. Page 44 Head of subscriptions Sharon Todd
FileSilo.co.uk
Assets and resource iles for this magazine can
be found on this website.
Register now to unlock thousands of useful iles.
Mark Shufflebottom Tam Hanna Simon Jones Support ilesilohelp@futurenet.com
Mark is a Professor of Tam has an ambivalent Simon likes his code quick,
Circulation
Interaction Design at relationship with JavaScript clean and maintainable, Circulation Director Darren Pearce
and is always interested which means modularity
Sheridan College of
in new frameworks and well-defined design
% 01202 586200
Advanced Learning near
Toronto. Mark is exploring the promising to streamline the principles. Frameworks help Production
power of AR.js to bring development process. This bring these benefits to the Head of Production US & UK Mark Constance
issue he gets up close and web. In this issue he helps Production Project Manager Clare Scott
augmented reality through Advertising Production Manager Joanne Crosby
WebRTC and WebGL to the personal with the JavaScript you decide which is the best Digital Editions Controller Jason Hudson
browser. Page 54 framework Vue. Page 74 framework for you. Page 66 Production Manager Nola Cokely
Management
Finance & Operations Director Marco Peroni
Creative Director Aaron Asadi
Art & Design Director Ross Andrews
Matt is a front-end
developer based in London.
In this issue, Matt takes a
beginner-friendly look at
Leon is a freelance web
developer and trainer who
assists web developers in
creating efficient code for
web skills?
Were always looking for the
React and how to make a projects. This issue he hottest web-design talent. Email
dashboard application you reveals a host of techniques,
can use to keep up to date as seen in the top-class webdesigner@imagine-publishing.co.uk
with important statistics websites featured in our
within a project. Page 86 Lightbox. Page 14
with examples of your creative work.
4 __________________________________________________________________________meta
<meta>
inside issue 262
contents
Cutting-edge features, techniques and inspiration for web creatives
Chat with the team and other readers and discuss the latest tech, trends and techniques. Heres how to stay in touch
webdesigner@imagine-publishing.co.uk @WebDesignerMag www.gadgetdaily.xyz
11 Fantasy UX
Lead designer at Sequence, Mark Stuckert,
talks fantasy inspiration for real-world UX
14 Lightbox
A showcase of inspirational sites and the
techniques used to create them
28 Walking on water
Discover how creative agency Deutsch
delivered a serious message via an engaging
digital experience
36 Wild design
With an insatiable appetite to discover the
frontier of digital design, Web Designer simply
had to talk to prospective pioneers wild
44
44 New-generation CSS
Work with CSS Grid, code Custom Properties
and build with the Web Animations API
92 Course listings
Want to start learning online? Check out what
courses are out there with this list
94 Hosting listings
An extensive list of web hosting companies.
Pick the perfect host for your needs
36 14
98 Next month ProFile: wild Lightbox: Three Cents
Whats in the next issue of Web Designer? Pioneering folk at the frontier of digital design Selling through illustration and animation
6 __________________________________________________________________________meta
FileSilo
96 Get the latest must-have resources and videos
Visit the WEB DESIGNER online shop at
myfavouritemagazines.co.uk
A comprehensive collection for the latest issue, back issues and specials
of free designer resources!
72 minutes of troubleshooting
video guides from Pluralsight
96
<tutorials>
Web gurus take you step-by-step
70 vintage wood textures through professional techniques
16 Orange and Teal PS actions
54 Code augmented reality markers
Learn how augmented reality can be achieved in the
browser using native web technologies
Never
miss an issue
Subscribe
Turn to page 34 now
66
Which front-end framework do you need? We help you decide USA readers turn to
page 85 for an
exclusive offer
web workshop
<header> 52 Animate multiple elements
tram-house.com
Introduce multiple animations across a single page
The tools and trends to
inspire your web projects 58 Code draggable navigation
poligraph.live
08 The current state of Let the user take control
meta _________________________________________________________________________ 7
News
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
N hamstrung by browser
support. Until the moment
that major browser vendors
decide to ofer/include support for a new
feature, it is efectively a plaything. You can
This is a typical scenario and one that all
designers and developers have to contend
with continuously.
Here we take a quick look at the current
state of browsers and see what their latest
list at developer.mozilla.org/en-US/
Firefox/Releases/53. Safari 10.1 has support
for Custom Elements, the Gamepad API
and CSS Grid. Check out more at apple.
co/2o8cqdp. If looking for a specific
Designer? Then check our digital
specials. The Web Apps Handbook
Volume 2 and The Developers
Guide to JS reveal the best tools
and methods to build apps with
try a feature out, but using it in production versions have to ofer designers and feature, for example WebGL, the best place web technologies and learn how to
is still a no-no. CSS Grid is a good example developers. Lets start with everyones to find out if support exists is the popular get started with ES6 and NPM.
of how the process works. Firefox and favourite, Microsoft Edge. The latest version Can I Use site over at caniuse.com. Dont forget Animate with
Chrome have ofered full support since the at the time of writing (this applies to all Adoption of a specification by the HTML & CSS and 3D and the
beginning of March 2017, and Safari 10.1 browsers in the article) is 15. So, what does browser vendors is when it becomes a Web. We cherry-pick a collection
introduced it at the end of March 2017, this have included in the latest version? reality. But, this still doesnt solve the old of the best animation and 3D-
around the same time as Opera 44. Notable additions are preview support for issue of whether you should wait for total related techniques to add interest
Microsoft Edge 15 does ofer support, the new Payment Request API, added support or simply start using a feature to any project.
but for an older specification. On mobile support for CSS Custom Properties (aka when the major browsers have support. Plus, check out Advanced
Chrome for Android it is fully supported CSS Variables) and WebRTC 1.0 enabled by Does anyone still consider IE11 when Angular, 20 Quickfire HTML & CSS
and so is Safari on iOS. The actual CSS Grid default. Find out more at bit.ly/2q4Xnzu. thinking of support? Its not hard to guess Techniques and Amazing Websites
specification had a working draft as far The latest version of Chrome includes full what the most popular browser is Google and How to Build them Vol 04.
back as 2011, but with support now (almost) screen for progressive web apps, Firefox Chrome. When it comes to worldwide How can you get your hands on a
universal it is quickly being adopted by includes JSON Viewer enabled by default usage it is streets ahead. According to Web Designer digital edition? Head
StatCounter, Chrome has over 53% market to bit.ly/1hsGYgl, download the
When it comes to worldwide usage share for all devices. Change this to desktop free Web Designer app and find
and mobile and it is still much the same. them waiting for you as an
it is streets ahead. Chrome has over Safari comes in a distant second with 12%, in-app purchase.
8 _______________________________________________________________________header
Header
Inspiration
01.
01.
03.
03. I Buongiorno
ibuongiorno.com/en
A vertical and horizontal scrolling
experience guides the user to tell its tale.
#96Cb65
#63A765
#3C8E8b
#E26DAA
header_______________________________________________________________________ 9
Header
Resources
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
Insight Stash
insightstash.com
Every site needs feedback. Giving the
user what they want means that more
people will visit, use and appreciate your
site and ultimately come back. This Prepack SmartPhotos.js CSS Peeper
software uses a familiar and intuitive prepack.io appleple.github.io/SmartPhoto csspeeper.com
interface to help build surveys, polls and Prepack is a tool to help you optimise An easy-to-use responsive image viewer A Chrome extension with a touch of
testimonials. Users can customise the your JavaScript code. Currently in especially for mobile devices. Features style, its purpose is to Extract CSS and
look by uploading their own custom CSS early-stage development, help out intuitive gestures and ofers accessibility build beautiful styleguides. A viewer
files and include their own branding. and tell them what you think. from keyboards and screen-readers. that allows designers to focus on design.
10 _____________________________________________________________________header
Header
Opinion
Real-world UX and
fantasy inspiration
Mark Stuckert explains how fantasy is evolving to outrun real-world UI
Mark Stuckert Lead designer thesequencegroup.com
D
esigning UI for the real world is focal point, it will relate to the story and have a
no easy challenge. You need to consider purpose so looking good is a key concern.
easy-to-use navigation, functionality, While art is an obvious inspiration, we also pull
readability and a lot from real-world technology places you
more. But when it comes to designing UX for sci-fi and dont expect! I prefer using a lot of older, industry-
fantasy, we are swamped with a realm of possibilities. specific references and operating systems as
The diferences between fictional and real-world UX inspiration. For example, I use reference images from
are huge. When we have a scene that needs to be software used by the US Air Force and NASA. These
filled with fantasy UI, we can just fill it. The images are programs that arent consumer-facing and appear
dont have coding behind them. Unlike real-world UX, complex to average audiences. I even turn to some
it doesnt require any practical purpose, it just needs operating systems for inspiration, including macOS,
to look good. iOS, early versions of Windows and really old Xerox
Our biggest challenge now is that audiences are so interfaces. Older legacy examples are busy and
desensitised to UI if the smallest detail isnt believable, complex; they easily amalgamate into a sci-fi setting.
they are easily pulled out of the story. From phones to When creating the UI, we likewise think about the
consoles, daily life at the ofice and even self-service at overall shape of what were trying to build. In some
the supermarket, audiences know what is believable sci-fi universes, a futuristic shape can have a lot of
and what is not. Compared to 15 years ago, viewers are extraneous angles, edges, details and other random
far more easily pulled out of the fantastical experience. bits. In others, like Ex Machina and Batman V
Our team has a lot of experience in designing UI/UX Superman, the interfaces look like a Dieter Rams
for motion comics, art and animation. Its really version of macOS or Windows. Its about what works
important for us, and anyone creating concepts for in that world. In animation, its about how the little
the fantasy and sci-fi landscape, to make sure UI aligns assets interact and make the whole screen feel both
with that world. If Im watching an animation and the alive and realistic.
screen flashes downloading virus, Im immediately That said, if you look at an actual computer screen
pulled out of the experience because it is inherently theres probably not much animating or blinking you
unbelievable in any context. In addition, if we were to have to dramatise it for film and cinematics. Another
create UX for a real-world setting such as live action option is creating a hyper-minimal interface, which
with flesh and blood actors overly fantastical UI can means you dont necessarily need a lot going on.
break that experience. You need to consider each In short, we no longer need to sell the
medium diferently when computer-ness of technology in
Our biggest challenge now is that
designing UI. Nowadays we fantasy and sci-fi, unlike when
even have to avoid HTML code desktop computers were first
as hacking text. Audiences are
just too easily pulled out of the
audiences are so desensitised to UI if emerging and many people didnt
have a working knowledge of them.
illusion from these small, yet the smallest detail isnt believable, Our target audiences all know about
header_______________________________________________________________________11
Header
Resources
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
Mobile
Web Video
Playback
bit.ly/2qJIu8u ReactXP stylelint Barba.js
How do you create the best mobile media microsoft.github.io/reactxp stylelint.io barbajs.org/index.html
experience? This in-depth guide from This is a library for building cross- A modern CSS linter to help you enforce A small (4.4kB minified and gzipped),
Google Developers delves into a host of platform apps. It enables developers to consistent conventions and avoid errors flexible and dependency-free library that
techniques that will help ensure that the share most of their code between web, in your stylesheets. Use via a host of helps you create fluid and smooth
video experience on mobile is spot on. iOS, Android and Windows. plugins for most tools and text editors. transitions between your sites pages.
12______________________________________________________________________header
Header
Opinion
A
nnie: Data-driven design often and so on. It would be dangerous to assume
gets a bad rep in industry that just because were communicating through
discourse Googles 41 shades a screen, we lose visitors desire for clean,
of blue testing is a well-cited attractive and easy-to-follow design.
example. However, theres no getting away from Beautiful, imaginative and innovative design
the fact that digital product design must be transforms an intelligent digital experience from
user-centric. The most commonly agreed stat one of function to an enriching and joyful
suggests we have 50 milliseconds to make a experience. Great design aims to make you feel
positive impression on a web visitor and that something and the experience should
cant be achieved by design alone. ultimately influence the choices you make.
If a user has to wait or work too hard to find Design is the reason a customer will select your
what theyre looking for, if theres too many product or service, because they have enjoyed
clicks between making a decision and acting on the journey that got them to the choice.
it, or the landing page simply doesnt seem to Brands that invest in design are more
match the search they entered to get there attractive and ultimately sell more products,
youve already lost them. because by owning a beautifully designed
And your users arent the only people product, customers feel it says something
who will punish you for getting this wrong. about them. Everyone enjoys beautiful design,
Google will too. Google wants to whether its a shirt, book sleeve
header______________________________________________________________________ 13
Three Cents
threecents.gr
Designer: Red Collar Digital redcollar.digital
Distinctively rustic in design, this
promo site for a line of boutique
beverages blends illustrations with
subtle scrolling effects
Development technologies WordPress, jQuery, WooCommerce, PHP
14____________________________________________________________________ lightbox
LightBox
Three Cents
#FFFFFF #ADC7D2
Above Above
Rukola font designed by Nikola Giacintov styles the Futura BK Book by Neufville Digital and Linotype is used
#EED9BA #D1E6EF
distinctive script typeface that appears throughout the site across all the sites remaining paragraph text
lightbox ____________________________________________________________________ 15
LightBox
Three Cents
Above
Scrolling down the page brings into focus the individual flavours using subtle circular animations and random floating bubbles, which reveal elements of the background
Above Above
Smart and simple animations turn the bottle illustrations into The crisp, clean product photography provides a tempting insight into what the Three
real-life product photography Cents product range has to offer
16____________________________________________________________________ lightbox
LightBox
Three Cents
lightbox ____________________________________________________________________ 17
Alcanyte
alcanyte.io
Designer: Hailiax hailiax.io
This dynamically animated call to arms
hopes to connect non-profit organisations
with digital designers seeking professional
work experience
Development technologies HTML5, jQuery UI, Modernizr, SoundCloud
18____________________________________________________________________ lightbox
#89FFFF #4668B4
Above
#F472C6 #2B2529
Josefin Sans font by Santiago Orozco for Google Fonts is the only typeface used, in Thin and Light weights
lightbox ____________________________________________________________________19
LightBox
Alcanyte
Above
The central line graphic comes to life on hover as a simple animation that encourages the user to play the background video
Above Above
Whats that song? Head to SoundCloud to discover more about the soundtrack Click, hold and drag to induce a wobble effect to the selected background element
20 __________________________________________________________________ lightbox
LightBox
Alcanyte
1. HTML document template These set the default size, fonts and colours to use to 6. Sizing and positioning
Start the project by defining the HTML document ensure that the content is fully visible without default The button requires its text content to be presented
template. This is made from markup for defining the border spacing. at a bigger size than the main content. This can be
HTML document container, which is responsible for html,body{ guaranteed by using a font-size set using em, hence
containing the head and body sections. The head display: block; it will always be three times bigger than the defined
section contains descriptions of the document such width: 100%; content size. A margin is also used to automatically
as the title, as well as links to external resources such height: 100%; place the button in the horizontal middle of the screen.
as the CSS file. The page body is where the visible margin: 0; .big{
content is placed in step 2. padding: 0; font-size: 3em;
<!DOCTYPE html> font-family: Helvetica, sans-serif; }
<html> background: #000; .centered{
<head> color: #fff; margin: 0 auto 0 auto;
<title>Play Button</title> } }
<link rel=stylesheet type=text/css
href=styles.css /> 4. Article containers
</head> An important part of the presentation is how each
<body> content section uses an article to contain each separate
*** STEP 2 part of the content. These articles are set to the full size
</body> of the screen using the vw and vh measurements. This
</html> is important to make sure that no presentation content
is visible when the play button area is being displayed,
2. Visible content and vice versa.
The visible content is made from two articles one for article{
storing the play button, and the other for storing the display: block;
content that the play button links to. The play triangle width: 100vw;
is made from the HTML symbol code ►, which height: 100vh;
allows for better scalability and faster loading than overflow: auto;
using an image. The button link references the transition: top 1s;
corresponding article ID content. }
<article>
<a href=#content class=big centered 5. Button styles
button>Play ►</a> The button is displayed as a padded block through
</article> the use of border and padding styling. A transition
<article id=content> rule is also applied so that the hover selector triggers
<h1>Content</h1> an animated change in colour when the button is
</article> hovered by the user, to indicate its interactivity. A
display of inline-block is used to allow padding
3. CSS initiation without forcing the element to stretch across the
Now that the HTML is complete, a new file called fully available space.
styles.css should be created to store the CSS .button{
presentation rules. Start this file with rules for the display: inline-block;
HTML document and body content containers. padding: .5em;
text-decoration: none;
border: 1px solid;
Avoiding color: #fff;
annoyances
As well as directing users to a content
}
transition: background 1s, color 1s;
.button:hover{
presentation, this is an alternative to the
increasingly common yet annoying auto background: #fff; Above
play of video and presentations. color: #000; Recreate cursor actions with fingers on mobile
}
lightbox ____________________________________________________________________ 21
MORE SMART SERIES
seedsandsupply.com/mss
Designer: MEFILAS Inc
The background text keeps the
user engaged while waiting for the
main product image to slide in
from the top of the page
Development technologies HTML, CSS, JavaScript, jQuery
22 ___________________________________________________________________ lightbox
#BEA47D #FFFFFF
Above
The animated background text is powered by images. The only font
#000000 #E0D4C2
used throughout the page is Oswald by Vernon Adams
lightbox ___________________________________________________________________ 23
VOL.4
vol4.co
Designer: VOL.4 (in-house)
This minimalist calling card for
LA-based agency VOL.4 uses colour
flipping and floating text animations
to notable effect
Development technologies HTML5, CSS3, JavaScript, Cloudflare
24___________________________________________________________________ lightbox
#E73D1A #FFFFFF
Above
The only font used on the modicum of text found throughout the
#111111 #2341BE
site is Akzidenz-Grotesk BQ Medium Extended, by H. Berthold
lightbox ___________________________________________________________________ 25
LightBox
VOL.4
Create an animated
colour palette selector
Use JavaScript and CSS to change your webpage colour palette in response to user interactions
1. HTML document template container to cover the full screen without border spacing. values correspond to the options in the drop-down
The first step is to initiate the HTML structure of the Default font and colour settings are also set in this stage. menu defined in step 2.
webpage. A head section is used to contain document html,body{ [data-palette=1]{
description information and links to resources such as display: block; background: #fff;
the CSS stylesheet. The body section will contain the width: 100%; color: #000;
visible content. The HTML content will be placed inside height: 100%; }
the body section in step 2. Take note how the body margin: 0; [data-palette=2]{
container also has a data-palette attribute describing padding: 0; background: #9C27B0;
the default palette to use. font-family: Helvetica, sans-serif; color: #FFEB3B;
<!DOCTYPE html> background: #fff; }
<html> color: #000; [data-palette=3]{
<head> } background: #9E9E9E;
<title>Palette Change</title> color: #E91E63 }
<link rel=stylesheet type=text/css 4. Palette initiation
href=styles.css /> The changing colour feature is made possible through 6. JavaScript event listener
<script type=text/javascript src=code. the data-palette attribute applied to the document body Finally, create a new file called code.js to store the
js></script> in step 1. This attribute can be applied to any element to JavaScript interaction code. First, the JavaScript waits for
</head> control a specific area of the page. The default palette the page to load before applying an event listener to the
<body data-palette=1> settings make sure that a transition of one second is drop-down list defined in step 2. This allows for the value
*** STEP 2 applied and the background and colour changes so that of the drop-down menu to be applied to the data-palette
</body> they appear animated. attribute applied to the body hence triggering the CSS
</html> [data-palette]{ presentation when it is changed.
transition: background 1s, color 1s; window.addEventListener(load, function()
2. Control and content } {
The webpage consists of a drop-down list of available document.querySelector([name=palet
colour palette options, along with a visible content 5. Palette definitions te]).addEventListener(change,
section. The drop-down list will be used as a control to The final part of the CSS is to define the colours for each function(){
trigger JavaScript functionality that will in turn trigger available palette option. The diferent palettes are document.body.setAttribute(data-
changes via the CSS style rules. This approach is highly identified by the data-attribute value options for 1, 2 palette, this.value)
useful for maintainability hence keeping functionality to and 3 are defined in this example, but you can use text });
JavaScript and visual presentation within CSS. names and other numbers too. Take note how these data });
<select name=palette>
<option value=1>Palette 1</option>
<option value=2>Palette 2</option>
<option value=3>Palette 3</option>
</select>
<article>
<h1>In a galaxy far away...</h1>
</article>
3. CSS initiate
With the page HTML now complete, the next step is to
create a new file called styles.css. This file is initiated with
a set of rules to set the HTML document and body
UX and visuals
This type of feature can be used as both a visual
efect and also to help visually impaired people
such as for colour blindness.
26___________________________________________________________________ lightbox
SAN FRANCISCO
9 JUNE 2017
www.generateconf.com
PROJECT
THE HIDDEN
DANGERS PROJECT
WEB
HIDDENDANGERSPROJECT.COM
AGENCY PERSONNEL
DEUTSCH MENNO KLUIN
EXECUTIVE CREATIVE
DIRECTOR
WEB
DEUTSCH.COM ALIZA ADAM
VP, INTERACTIVE
DESIGN DIRECTOR
PROJECT DURATION
7 MONTHS ALEX MILLER
SENIOR INTERACTIVE
DESIGNER
PEOPLE INVOLVED
LAUREN BROOKS
28 UX DESIGNER
WalkinG
on Water
Creative agency Deutsch describes how its talented team negotiated any hidden creative
dangers when it came to delivering an engaging digital experience for WATERisLIFE
I
n this increasingly cynical world of fake news and and digital technologies can also be utilised to do just
inwardly looking social media, some might be that, delivering engaging ways to educate on a global
forgiven for questioning certain causes. It seems scale. Charities are developing innovative methods to
that everywhere we look these days, the zeitgeist not merely appeal to our wallets for handouts, but
is one of gloom and doom, with a prevalence for spread the word on quite complex issues and make us
dramatic, attention-grabbing headlines. So pause long enough to think. Of course, the most
against that kind of sensationalist backdrop, how might efective campaigns speak to the next generations, and
charitable and humanitarian issues find a space to raise often kids who are excited by advancements in stuf like
awareness and maybe, just maybe, write good news virtual reality. Thats really the thinking behind the
stories in the process? Well, thankfully, cutting-edge web Hidden Dangers Project and the terrific work that the
organisation WATERisLIFE is doing to communicate a creative agency with ofices in LA and New York. Twitter with Hashtag Killer and even constructed a
the importance of clean water. Placing the lives of No strangers to devising compelling campaigns for book from water filter paper with The Drinkable Book.
children in Southeast Asia at its heart, the campaign high-profile commercial brands, the team would Point being, every project and campaign has never
illustrates how polluted water in the rivers, so embark on a seven-month project with a weighty shied away from innovation and fresh thinking when
essential to local people in such communities, puts conscience to consider. We discover how Deutsch spreading the word on the worlds water crisis. But as
young lives at risk. The beautiful oficial site at negotiated any hidden dangers of its own Deutsch was aware of almost immediately, nothing
hiddendangersproject.com highlights the unseen to wow browsers and headsets alike. stands still when it comes to efective communications
risks or monsters lurking below the surface with a and the challenge of capturing busy modern minds.
Pokmon-style narrative. Supplemented by a CROS SING THE STREAM S One of our biggest hurdles in teaching future
downloadable VR game for Oculus generations about proper water sanitation and
Rift, the experience can be In terms of projects, from the outset there was hygiene is no longer just a language or awareness
deployed in classrooms nothing typical about Hidden Dangers for client barrier, the team begins. To truly engage with
everywhere to entertain and WATERisLIFE, or WiL for short. Previously the charity children on a personal level and capture their
teach. To deliver such an has employed traditional storytelling techniques such imaginations, we knew we had to create an
ambitious vision, WATERisLIFE as the film 4 Year Olds Bucket List to bring poignant educational experience that would mimic their
enlisted the services of Deutsch, stories to the fore. They hijacked social memes on surrounding environments and accurately teach
them about the dangers of the water they use around the world. In addition to the educational about eight years now and there is a lot of shared
daily; all while keeping them entertained. So how VR game, which continues to travel around schools trust, admits executive creative director, Menno
is such a thing achieved in 2017? Well, you might in America and abroad, the campaign consists of a Kluin. So only at key moments would we share
think the concept of a pioneering educational VR three-minute docu-short illustrating the charitys updates with the client. The conversation with the
game set in the remote jungles of Thailand to be a impact in a remote Thai village as well as the client is mostly around if the messaging is correct,
tad ambitious. Youd be right, and Deutsch knew website itself. but other than that they place trust in us to do what is
that to realise such a thing would require some right by them and the project. Such a position makes
backup. Production partners would be brought on FLUID FOUNDATION S sense when dipping into new technological waters of
board in the shape of studios NTROPIC (ntropic. course, but it did ofer useful creative fluidity when
com) and m ss ng p eces (mssngpeces.com), As with many agency-client arrangements, this interpreting the earliest brief. When the creative
adding the invaluable VR directorial expertise of particular project had its roots in an already team approached us with the initial idea and
Tucker Walsh and Ray Tintori. The Hidden established working relationship. However, although tasked us with expanding it to a digital
Dangers campaign was always going to be a we often hear that such closeness implies tight space, it was clear that
multifaceted efort, supporting the fundraising collaboration with constant consultation, Deutsch there were a lot of
eforts of WiL that drive clean water initiatives and enjoyed more freedom to get the job done. Weve directions we could take
the distribution of clean water filtration straws had a working relationship with WATERisLIFE for it, explains Alex Miller,
We added CSS with the real-world environment brought to life mood to match the documentary video and
in film and VR, the site would need to transport convey that this idea revolved around a polluted
details that would visitors with an inventive use of front-end standards.
We started to look at ways we could execute that
river. We then designed and illustrated additional
assets to bring the underwater world to life,
bring our underwater idea and felt that the best way to create a rich simultaneously working with our developer to
environment to life
experience for users would be to illustrate our own really bring out the details with motion. We added
underwater environment and animate it using subtle CSS details like floating particles, swimming fish
senior interactive designer on the project. We CSS animation, Miller continues. This would give and floating trash that would bring our underwater
started brainstorming ideas with the focus on users more context and visual reinforcement for environment to life.
building a relationship between the users and the the information we were presenting to them, in a
villagers, to demonstrate just how much clean water more user-friendly way. GO WITH THE FLOW
can make an impact. We knew almost immediately Visual reinforcements would be particularly
that we wanted an underwater aspect to the user crucial, not least in quickly capturing eyes and Such a rich visual journey, especially one involving
journey, and with so much of the story being about imaginations but also ensuring consistency of so much water, would still need to be mindful of flow.
whats in the water, it only made sense that we experience. Here the team could count on a Telling a meaningful story with these assets had to
explored that territory further. cross-pollination of assets from the VR, print and revolve around certain narrative rules to hang
film production happening alongside. Our creative together, as UX designer Lauren Brooks describes.
DIVING INTO THE DESIGN team had started working with Juan Carlos Paz, an We did a lot of sketching and user flows to
illustrator who was helping create the monsters for understand a series of questions: How can we best
Hardly surprising then that a website for a the VR game and some print pieces. So we already guide the user through the experience of life on the
WATERisLIFE campaign would want to put water had a great starting point for the site. We knew a river? Whats the best way to introduce the Hidden
firmly up front. With a message so intertwined dark interface with bright UI would give us the right Dangers monsters, as well as the VR experience?
There was a lot to say, but we wanted to keep it the works so that the site felt very integrated with partners like m ss ng p eces, who directed the
simple too, so there was quite a bit of back and forth and cohesive. docu-short, and NTROPIC, who developed the VR
before we settled on the high-level flow. game, is extremely important to ensure we can
Those cognitive challenges and issues of usability, KEEPING IT RUNNING execute on the overall creative vision and deliver
general navigation and so on would of course be an experience people will never forget.
joined by the practicalities of making it all just work. Anyone looking at and interacting with hidden Certainly if the online industry reception is
In terms of back-end development slog, the team dangersproject.com will admire the sense of anything to go by, forgetting hiddendangersproject.
admits that significant efort was minimal thanks to cohesion achieved in just 31 weeks. The launched com wont be happening anytime soon. The Deutsch
the emphasis on serving the front-end. Here it was website does an enviable job of conveying the team are understandably very proud of the
much more a case of ensuring that the various emotive message that purveys each channel of the recognition the work continues to garner since
visual efects, animations and transitions were campaign, particularly the short film. At the same time going live. More crucially, the URLs success is
synchronised for maximum impact. The back-end however, it manages to seamlessly handle such a perhaps measured best as a fundraising tool for the
architecture is composed of a Node.js web server weighty cause with the playfulness that children client and one that must be kept afloat 24/7. Were
with Reacts JavaScript framework built on top, everywhere can identify with. Around launch time, it currently hosting HiddenDangersProject.com since
starts Aliza Adam, VP and interactive design director. was therefore important to get the timing and we built it in-house, so theres no hand-of on this
The site is primarily front-end though, and we put a marketing just right to capitalise on related initiatives one. Weve been really lucky in winning The FWA Of
lot of focus into the finesse of the smallest details. and leave a lasting impression. We mostly rely on PR The Day, a CSS Design Awards Site Of The Day, and
Making transitions smooth between looped video and donated media to get the project out there, an Awwwards Site Of The Day, so our most recent
to underwater worlds, creating motion on Menno Kluin explains. We launched the Hidden upkeep is adding the win banners to our site. The
hovers, lighting efects when the user was at the Dangers Project prior to World Water Day and site is also a portal for donations at any time for
top of the river, plunging the user into the next Discovery and Time for Kids have been very helpful WATERisLIFE, so ensuring this component is
story when they were at the bottom of the river, in spreading the project. Also, combining resources constantly up and running is really important for us.
83%
Never miss an issue
13 issues a year and youll be sure
to get every one
design
web wild.as
key clients
Google Creative Lab
Red Bull
Sid Lee
As a small group of designers, developers, producers and explorers, wild has Wieden + Kennedy
become a preeminent design agency. Their insatiable appetite to discover
the frontier of the digital landscape makes them pioneers that others follow Sherpa
36 _________________________________________________________________pro file
The level of concentration is
intense on a typical day at wild
ild is Matthias Mentasti (creative inside Austria, where we continue to work with a to draw onto. One day Matthias drew a big bear with
pro file_________________________________________________________________ 37
Konterball Konterball allowed wild to flex their WebGL
muscles with addictive effect
konterball.com
Konterball is a ping-pong game we developed in can be played with Google Cardboard, HTC Vive, we launched the project. Konterball was well
WebGL together with Google Creative Lab for Occulus Rift or just using your phone/desktop. received and the new Google WebVR
the launch of the latest Google Chrome. Chrome We started developing simple prototypes in Experiments Platform was picked up by the
is one of the first browsers to natively support WebGL to find the best game mechanic. likes of Techcrunch and Product Hunt.
WebVR, which massively lowers the barrier of At the same time, we explored various visual We also open sourced all the code on GitHub
entry for VR experiences. styles. After the game mechanic was working for people to be able to browse through and
Now you dont have to download a clunky well, we went on to develop various game learn from it. You can play the game by yourself
app, as VR can be experienced directly inside of modes and integrate animations and transitions. or with friends in VR space in real-time by using
the browser just like the regular web. The game After an extensive testing and fine-tuning phase, a websocket connection, which is a lot of fun.
who has heard about us or has seen our work so its convinced that it can be an amazing project. And if somebody on a project who can do specific things
pretty important. For us its more important to keep we do get started we want to deliver the best better than ourselves in order to push the project to
it up-to-date to showcase the range of our projects possible output. It often starts with just a random the next level.
rather than making it Matthias continued: Weve
extremely fancy. We prefer a We are not afraid to get somebody had WebGL shader
clean minimalistic agency site
and would like for the projects on a project who can do specific things developers, amazing
copywriters, illustrators, film
to speak for themselves. better than ourselves in order to push makers or composers come
As a relatively new agency
wild has continued to use an
the project to the next level in before and it was always an
amazing experience. Not only
array of techniques to gain new clients. We did a idea and develops into more than what the client have we that way created beautiful work together,
few pitches recently where we were invited to asked for in a positive way. Another way to get work weve also made new friends. It has happened more
participate, said Matthias. We want to make sure to which can be a lot of fun is through collaborating than once that one of these people would later
only put time and efort into a pitch if were with other people. We are not afraid to get reach out to us and in turn, we would work on a
INDUSTRY INSIGHT
Thomas Lichtblau
Creative Director and Co-founder
38 _________________________________________________________________pro file
AGENCY
BREAKDOWN
2x Tech Director
1x Creative Director
1x Art Director
1x Designer
2x Senior Developers
1x Junior Developer
1x Project Manager
1x Social Media Manager
pro file_________________________________________________________________ 39
The people that are wild (L-R): Thomas Ragger (Partner/Technical Director),
Melissa Graf (Producer), Max Hermetter (Senior Developer), Thomas Lichtblau
(Partner/Creative Director), Moriz Bsing (Senior Developer), Thomas Strobl
(Partner/Technical Director), Manuel Haring (Art Director) and Matthias Mentasti
(Creative Director/Partner)
as hover states in the navigation or particle reacting met. Since were still quite small, usually one or two projects: regular websites and microsites, which go
to your mouse. Send A Message (sendamessage.to) of our founders (one tech, one art director) will take anywhere from 6-12 weeks and longer ongoing
as an internal project, brings across our attitude the lead on the project, said Thomas Strobl. projects like bigger e-commerce and platform
and weirdness very well which often results in That means doing the initial client solutions and collaborations with start-ups, as well as
making something that is a lot of fun, a bit random communication, working out scope, budget and ongoing social media management.
but looks beautiful. timeline. Once the project goes into production, one For shorter timelines, we usually have UX, design
People seem to like it, they sent out 300K partner will always stay on as the main point of and development (alpha, beta) phases. Most of the
messages already not a bad result for a one-week contact for the time always goes
project. For Konterball (konterball.com) we could
have just made a fun, nice looking minimal
project. We will
hand of day-to-day
I guess we do go into fine tuning all
the details,
ping-pong game but then we added a rainbow tasks to our project overboard sometime. animations, hovers
mode (press R) and had a composer create a
custom soundtrack which is now available on
manager, do tech
direction and
But thats the point; we and transitions in
the end as well as
Spotify. I guess we do go overboard sometime. But oversee want to have fun creatively testing on all
thats the point; we want to have fun creatively and development and platforms to make
release something thats flawlessly programmed so the same goes for art direction and design. sure the quality of the site is up to our standards. For
as a user you can just lean back, enjoy the A project team usually consists of one dev, one longer timelines, we work in continuous sprints
experience with all its little details. As a relatively designer and a project manager plus additional between UX, design, development but also here fine-
compact team, developing eficient working specialists for things like WebGL shader tuning should never be left out.
processes has been vital to ensure deadlines are development if needed. We have two types of Each agency will have their own preferred toolset
40_________________________________________________________________pro file
wild extensively
used WebGL to deliver
delicate interactions
Falters InFerno
falter.wild.plus/#en
For Falters Inferno we worked with Salon Alpin project, we spent about two full weeks just on
an Austrian animation studio who had fine-tuning but I think the effort has paid off.
already developed an amazing short film for People really liked it and even though Falter is
Austrian newspaper Falter. We wanted to bring only available in some parts of Austria, over
their animation alive digitally and somehow 200k people from around the web visited the
that enables them to achieve the vision they have transform the linear narrative into a non-linear experience which by the way wasnt advertised
for their clients. Thomas Lichtblau outlined whats in interactive story. anywhere at all.
the wild toolset: We mainly use Dropbox for To do that, we brought all different animation We also won three Gold Lions at Cannes and
file-sharing rather than bespoke server solutions. layers into WebGL and added custom WebGL site of the year on Awwwards. Our favourite
Adobe for anything design and animation related Shaders and subtle interactions which you can prize was the Webby. We went to the award
although we are switching to Sketch now for app trigger by moving your mouse or interacting ceremony in NYC and were amazed to meet
design in specific and Webstorm/Sublime for with touch. We optimised the experience to Action Bronson and Jessica Alba in person.
development. To be honest we dont really focus on perform especially well on mobile and focused Taking a selfie with Action is my favourite
the tools so much since often they are mainly based on making it as seamless as possible. For this memory from that trip.
on personal preference.
I think JavaScript has developed far enough that
mostly jQuery isnt really needed anymore. As for TIMELINE
the development of the web in general, we have
Year Year Year Year
seen great progress over the last few years and 2014 2015 2016 2017
really anything is possible on the web now No. of employees No. of employees No. of employees No. of employees
especially looking at WebGL and WebVR. 4 5 8 10
We recently worked on a really interesting project
wild works on Al Gores We hire our first Falter wins a Webby We launch our first
using WebVR which the new version of Chrome
climate change site. He employee, talented and SOTY at Awwwards. WebVR game
supports natively. WebVR makes VR accessible to broadcasts live to the web coder and good We build the Red Bull Konterball with
anyone with a browser and it allows your friends to for 24 hours straight. friend Max. Mindgamers platform. Google Creative Lab.
pro file__________________________________________________________________ 41
join into the same virtual space and interact with explained: Social media is a really important topic together in a sense.
you. We think that this technology can become for us. We recently started developing bigger social Working for an agency like wild isnt all about
really interesting. media campaigns as an efort to communicate with technical skill. What is vital is the design sensibilities
Also, we love working with React and React the audience on a broader level. It must be treated you bring to the team. Thomas Ragger explained:
native. Its one framework we can use throughout as an equal digital touchpoint of a brand. We dont The most important thing for us is personality for
mobile, web and desktop development, that all our see it only as an opportunity to drive trafic to the people to fit in with wild. We dont mind if youre not
developers know clients site, but as the best coder or designer in the world yet. Most of
esKapIsmus
bergluft.hervis.at/chapter/1
110% is an Austrian monthly magazine. They sunrise. After a few hours of walking through
wanted to bring their print edition into digital. the snow we had finally reached the peak and
We developed a custom module system so had an amazing ski run downhill. To finish off,
theyre able to show integrated video content, we received an amazing meal at a local
audio quotes, and 360-degree and panoramic restaurant at the bottom of the mountain.
images. The whole website was developed as a Experiencing this through the web is not
reusable framework which allows future quite the same, but it still gets close to getting
editions to be released in a much shorter time across the vibe of this amazing tour. The next
frame. But what got us really excited about the edition will be about running so be sure to look
project were the content shoots. out for it. Funnily enough, our whole company
For the first edition, we had to hike to the top is participating at the Vienna marathon and is
of the mountain together with a small film crew equally afraid of it so we think this topic might
and a photographer which meant having to get be one that you might prefer experiencing from
up really early just to get that perfect morning the comfort of your living room couch!
42 _________________________________________________________________pro file
INDUSTRY INSIGHT
Thomas Ragger
Tech Director and Co-founder
wild.as
Founders
Matthias Mentasti, Thomas
Lichtblau, Thomas Strobl,
Thomas Ragger
Year founded
2014
Current employees
10
Locations
Vienna
Services
Strategy
Creative Art Direction
App, Web and VR Development
pro file_________________________________________________________________ 43
GET T
ILO
ON FILES
HI
S FEATUR
DE
ES
FULL CO
file
er
sil gn
o.c
o.uk/webdesi
NEW
GENERATION
44 ________________________________________________________________ feature
NEW GENERATION CSS
CSS, just like every programming language, is media queries, aiding in responsive design and
always evolving as the web adapts and changes.
CSS is maturing as it comes out of its awkward
teenage years and into its twenties, with full spec
the implementation of custom user settings.
Speaking of media queries, well also be looking
at the current state of Element or Container
BROWSER SUPPORT
Browser support for CSS Grid is getting better
implementation blunders out of the way and Queries, which allow elements to be targeted with and better, with the current versions of all
a bunch of exciting new features on the horizon. queries instead of the viewport. This enables us, major desktop browsers currently supporting
CSS Grid has already started to gain traction. for example, to detect the width of an element and it. Edge, however, only currently supports an
It has been the centre of attention lately, so some apply certain styles at diferent widths. This is an older version of the specification requiring
of the other new features have been left feeling a interesting topic with a couple of JavaScript prefixes. The new specification is currently
little neglected. One of these is CSS Variables or libraries already ofering support. in development and will hopefully be in the
Custom Properties. Many of us have been using Animation is another area well be covering with new update, and you can keep up to date with
variables in CSS for a few years through the use of the new Web Animations API, which aims to create the progress here on the Edge Development
preprocessors like Sass and LESS, but now we can a simple way to create animation in the browser, Roadmap (srt.lt/b4P0T2). It would seem mobile
use them in native CSS, allowing these variables to unifying all of the animation tools currently used to support has sneaked in almost undetected, with
be updated on the fly with JavaScript or inside interact with elements in the DOM. the latest updates to Chrome on Android, iOS
Safari and Firefox for Android all adding support
CSS GRID CSS GRID HAS SOME POWERFUL POSITIONING for CSS Grid.
feature ________________________________________________________________ 45
new generation CSS
46 ________________________________________________________________ feature
NEW GENERATION CSS
Queries library but requires a set width to be used. EQCSS PROS AND CONS The downsides to using EQCSS is that this isnt
/* Using EQCSS */ EQCSS (elementqueries.com) is a great library something native to the browser, so using it
@element .box and (orientation: landscape) that adds a collection of new ways to approach requires an extra script being loaded into the
{ responsive design. When combined with page and if youre a fan of squeaky clean markup
$this { Flexbox and Grid new possibilities are created EQCSS wont be your best friend.
display: inline-lex; and truly dynamic, modular elements are Other libraries (CSS-Element-Queries for one
} written as a result. Browser support for the srt.lt/Bz9f) are trying to achieve the same thing
$this .image-container { plugin is IE9+ but can support IE8 using an using a diferent syntax and diferent extra markup,
margin-right: 1rem; extra polyfill. but still require the use of external resources.
margin-bottom: 0;
}
}
/* Using Element Queries */ PLANNED SUPPORT
.box[min-width~=400px] { When asked about native support for Element
display: inline-lex; Queries, the CSS Working Group on Twitter
} (@csswg) recently said Not currently, no.
.box[min-width~=400px] .image-container { Nobodys solved the architectural issue or
margin-right: 1rem; attempted to re-architect their engine around
margin-bottom: 0; such a dependency yet.
}
feature ________________________________________________________________ 47
NEW GENERATION CSS
CSS SCROLL SNAP POINTS SCROLL SNAP POINTS AIM TO TAKE SCROLL MANIPULATION AWAY
FROM JAVASCRIPT AND IMPLEMENT IT NATIVELY IN CSS
Anyone who has tried to create some kind of scroll The scroll-snap-type property currently accepts scroll-snap-type: mandatory;
locking, snapping or manipulating will know how three values; none (the default value), mandatory scroll-snap-destination: 100% 0%;
tricky it can be. Until recently JavaScript was the and proximity. The mandatory value will force the scroll-snap-points-y: repeat(100%);
only option but always seemed produce a mixture scroll inside the snap container to the nearest snap }
of success and choppy or questionable point, proximity will snap but in a much more .carousel__item {
performance from device to device. Using this new relaxed manner. Both the scroll-snap-destination width: 100%;
property, carousels or sliders and other scroll and scroll-snap-points-y are applying the same height: 100%;
manipulation techniques can be easily created and value: both apply the scroll snap points to 100% of }
controlled using CSS. the height of the elements inside the scroll snap
Due to varying implementations of the container (defined by the scroll-snap-type)
specification multiple properties are required to property, along the Y (vertical) axis. Combined with
experiment with this new CSS. The main new the vh and vw properties fullscreen elements can
properties required to experiment with this new easily be created.
feature are: .carousel {
scroll-snap-type: mandatory; width: 100vw;
scroll-snap-destination: 100% 0%; height: 100vh;
scroll-snap-points-y: repeat(100%); overlow-x: hidden;
48 ________________________________________________________________ feature
NEW GENERATION CSS
BROWSER SUPPORT
impeccable CSS Almanac making it well worth
adding to your bookmarks.
In development
12+
39+ 9+
Above: When the user scrolling has stopped the browser will automatically scroll to the closest snap point
feature ________________________________________________________________ 49
NEW GENERATION CSS
WEB ANIMATIONS API WHETHER YOURE ANIMATING IN CSS OR JAVASCRIPT, THEY WILL BOTH HARNESS
THE POWER OF THE SAME UNDERLYING ENGINE
There are so many methods out there when it call takes two parameters; an array of keyframes });
comes to animating on the web, from the old and the timing properties for the animation. If The new API keeps the benefits gained from CSS,
days of Flash through to JavaScript with jQuery, youve written CSS animation before this will like hardware acceleration, and adds more
.animate(), then CSS3 and SVG and the look really familiar. tools such as variables, finer controls and
animate tag, birthing libraries like Velocity element.animate([ playback controls.
and GreenSock. { transform: rotate(0) },
The Web Animations API hopes to achieve a { transform: rotate(360deg)} KEYFRAME EFFECTS
mixture of all of these libraries and tools by ], { The new KeyframeEfect property in JavaScript
using the power and simplicity of CSS animations duration: 5000, adds more power to the API, allowing for
and the flexibility of JavaScript to interact with iterations: Ininity, animations to be modular and easily reused. The
elements on the page, including SVG, leaving the direction: normal, property takes three parameters; an element, an
browser to deal with performance. ill: forwards, array of keyframes and timing properties. All of
Basic usage of the API requires the use of delay: 100, these can be mixed into as many KeyframeEfect
.animate inside of JavaScript. The .animate easing: linear properties as you want.
CREATE A SIMPLE LIKE ANIMATION USE THE WEB ANIMATIONS API TO CREATE A SIMPLE SVG ANIMATION
The animation well be creating will consist of four animation as Custom Properties, we can then pull { transform: scale(1) },
keyframes, increasing and decreasing the scale and them out in the JavaScript and use them in our { transform: scale(0.8), ill:
changing the colour of the SVG. We can also use animation. To do this we need to set them as colourInactive },
JavaScript to retrieve the values of Custom variables in JavaScript. { transform: scale(1.2) },
Properties set in the CSS. Although this animation var getCustomProperties = window. { transform: scale(1), ill: colourActive
could be created in CSS well be using JavaScript to getComputedStyle(document. }
familiarise ourselves with the Web Animations API. querySelector(html)); ];
var colourInactive =
01. HTML AND CSS SETUP getCustomProperties.getPropertyValue(-- 04. SET UP THE TIMING PROPERTIES
The HTML and CSS is really simple. Its just a button colour-inactive); Now we have our variable containing our
containing an SVG and some CSS to apply some var colourActive = keyframes we need to create another variable
basic styling including some Custom Properties. getCustomProperties.getPropertyValue(-- containing our timing properties. The duration is
<a class=button> colour-active); set in milliseconds, the number of iterations, the
<svg class=heart> fill (which controls what happens when the
<path d=...></path> 03. SET THE KEYFRAMES animation is finished) and the easing, which we
</svg> Next well create a variable containing the will set in cubic-bezier to give us greater control
</a> keyframes for our pop animation; well do this using over the easing.
:root { the transform: scale() property. By shrinking the var timingPop = {
--colour-inactive: #a4a4a4; element slightly first and then pushing it over the duration: 750,
--colour-active: #ff4848; } initial size and back down, were creating an iterations: 1,
animation that expresses joy and seems happy ill: forwards,
02. GET OUR CUSTOM PROPERTIES IN JS when coupled with the animated colour change. easing: cubic-bezier(.61,-0.4,.69,1.32)
By setting the colours were going use in the var keyframesPop = [ }
50________________________________________________________________ feature
new generation CSS
5 key
propertieS
.animate()
The simplest way to create an animation is to call
CrtiCal CSS: what & why?
SPEED UP YOUR WEBSITE WITH CRITICAL CSS
Critical CSS is a way of reducing the number of
render blocking elements in order to render the
page as quickly as possible.
Render blocking is caused when the browser
eSSential reading
Critical Rendering Path
This free, in-depth course from Google covers
.animate() on an element. has to wait until all of the CSS files in the <head> of every aspect of web performance, covering
the document have downloaded before rendering exactly how the browser renders the page
timeline the page. This is so that the browser and how to optimise your code.
The player timeline allows for the current time of can accurately calculate the layout. So large CSS srt.lt/S8j6
an animation to be either written or read using files can significantly slow down the page.
.currentTime(), allowing multiple animations to Critical CSS is a way of optimising the critical
be synced or staged. rendering path or, to put it another way,
prioritising the display of elements. This is
ControlS and Play-StateS achieved by inlining the styles for elements
Play-states can be detected and triggered that will be seen first (the above-the-fold
using .pause(), .play(), .cancel() or .finish(), content) into a <style> tag in the <head> of the
allowing animations to be user controlled or document. The remaining CSS is then loaded Understanding Critical CSS
chained together. asynchronously into the page with JavaScript. This article written by Dean Hume on
There are a number of ways to achieve this: Smashing is an in-depth look at Critical CSS,
PlayBaCk rate it can be done manually, or by using build including tutorials to get you creating faster
A separate control for the speed of playback allows tools such as Gulp and Grunt (github.com/ rendering pages in no time.
for fine-tuning an animation without changing the addyosmani/critical). srt.lt/WtE6a1
easing or duration properties using animation.
playbackRate = .25.
feature _________________________________________________________________ 51
web workshop
Animate multiple
elements simultaneously
As seen on tram-house.com
Side scrolling
The sites home page is side
scrolling with the user still scrolling
downwards to move the content
on. Page elements animate onto
the screen from the sides as the
user moves through.
Home link
As with any project, using
the logo takes the user
back to the home page. As
other content loads it will
cover the existing design,
so its important to ensure
users can get back to the
main content.
52
Animate multiple elements simultaneously
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
EXPERT ADVICE
A
tram-themed website for an upcoming instead of vertically. Animation of typography and
Include or exclude music? apartment development might seem a images feature strongly as the user scrolls and elements
The inclusion of music on sites is a
tricky bone of contention with web
little odd when you first visit this site, are brought together into a well-designed site that
designers and users alike. Suddenly but the sites aim here is to take the entices the user to interact at diferent stages.
having music blasting out of your essence of memories of trams and what they evoke, One of the best uses of interactions on the site is the
speakers, especially in a work using that as a theme. The site claims that the tram taps act of getting the user to move a key into a lock. A strong
environment, can be shocking. Try
into memories from our childhood, a hark back to metaphor for what the overall purpose of the sites goals
and keep the music subtle and
unintrusive, but always let the user halcyon days. The tram is about movement as well and are, selling apartments! Aesthetically this has a bold use
decide if it should be there. the site is an endless movement of our dreams about of imagery with the site using a distinguished hipster
kind and joyful life. gentleman throughout to add character to the many
The site asks the user to scroll down as normal, but as areas and later with some unexpected animation thats
soon as they do the site starts to scroll horizontally definitely worth checking out.
53
Tutorials
Code augmented
reality markers
Augmented reality can be achieved in the browser using native web
technologies, detecting markers and displaying content
A
ugmented reality has been around for <script src=js/ColladaLoader.js></script> artoolkitMarker, lastTimeMsec;
a while now and it isnt anything new, <script src=vendor/jsartoolkit5/build/ var model, tube1, tube2, mid, details,
however with the support of WebRTC artoolkit.min.js></script> pulse;
(Real-Time Communication), access to <script src=vendor/jsartoolkit5/js/ var loader = new THREE.ColladaLoader();
the phones camera can now be realised on Android artoolkit.api.js></script>
devices and on desktop. At present, iOS cant support <script src=threex-artoolkitsource.js></ 4. Load the model
this as it hasnt been implemented in the WebKit browser script> Before the scene is set up the model will be loaded so
that powers Safari, but it is in development and you can <script src=threex-artoolkitcontext.js></ that it can be displayed when markers are detected. This
check the status of it here bit.ly/2qadVFS. If you do script> is scaled down by 10 to fit exactly onto the AR marker.
have an iOS device though you dont have to miss out, <script src=threex-armarkercontrols.js></ The model is 10cm for the width and height, so the
as you can still use the webcam on your desktop script> marker is 1cm which translates to 1 increment in Three.js.
computer. An important note to get this working on the <script>THREEx.ArToolkitContext.baseURL = loader.load(model/scene.dae,
mobile Chrome browser is that the content must be /</script> function(collada) {
served by a secure socket layer over https rather than model = collada.scene;
standard http. Desktop currently works with regular 2. CSS styling model.scale.x = model.scale.y = model.
http though. In the head section of the page, add some script tags scale.z = 0.1;
In this tutorial an augmented reality marker is going and just drop in the style rules here for the body and details = model.getObjectByName(details,
to be placed in front of the camera. This will be picked the canvas element, to ensure they are placed correctly true);
up by the browser and AR.js, and content will be on the page without the default margins added by
mapped over the top in 3D, sticking to the AR marker. the browser. 5. Fix some display issues
The idea here is that you might want to create a simple body { Still inside the Collada loading code, once the model is
3D rsum, maybe even adding some of your core skills, margin: 0px; loaded there will be a couple of tubes that spin around
and then the AR marker could be printed on your overflow: hidden; so they are found in the Collada scene. The first tube is
business card. } found and its material is grabbed. Here the material is set
Because you can walk around the marker, this is great canvas { to just render on the inside of the model, not the outside.
for content that you might want to see from diferent position: absolute; tube1 = model.getObjectByName(tube1,
angles think of a certain Swedish furniture manufacturer top: 0; true);
giving you animated steps that can be viewed from any left: 0; var a = tube1.children[0].material;
angle! There are so many possibilities that this can be } a.transparent = true;
useful for. a.side = THREE[BackSide];
3. Global variables a.blending = THREE[AdditiveBlending];
1. Add the libraries In the body section of the page, add some script tags
From the project folder, open the start folder in your where the remaining JavaScript code for this tutorial will
code editor and then open up the index.html file ready go. There are a number of variables that are needed; the Blend modes
for editing. At this stage the libraries need to be linked up first line is for Three.js, the second for the AR.js, the third Blending modes change the way that certain
and as this is doing a lot, there are a lot of libraries! These for the model and then a variable to load the model. coloured pixels blend with pixels that are located
are in three sections for Three.js, JSARToolKit, then the var renderer, scene, camera; below them. Additive blending makes all dark
pixels transparent while adding light to the
Three.js extension for the ARToolKit and marker. var arToolkitContext, onRenderFcts,
bright pixels.
<script src=js/three.js></script> arToolkitSource, markerRoot,
Top left
The library AR.js has been downloaded and put into
folders for you with all the dependencies, including
the Three.js library
Top right
If the transparency and additive blending is not enabled,
the model looks like this when loaded and displayed on
top of the AR marker not very exciting and barely visible!
Left
Experimenting with the lighting colours can give some
different tints. Here a bright, light-blue colour has been
applied to the direction light. Try experimenting with the
colour of both lights
55
Tutorials
Code augmented reality markers
a.opacity = 0.9; the fastest render speed to the content, and the created it has to be added into the scene to be used.
background alpha value is set to transparent so that This camera will auto align with the position of the
6. Repeat the fix the camera image can be seen behind this. webcam or phone camera through AR.js.
As in the last step, this same principle is repeated for the function init() { camera = new THREE.Camera();
second tube and the blending mode, similar to those renderer = new THREE.WebGLRenderer({ scene.add(camera);
found in After Efects and Photoshop, is set to be an alpha: true
additive blend. This enables the outside of the pixels to }); 12. Set up AR.js
have a softer transition to the camera image. renderer.setClearColor(new THREE. Now AR.js is set up so that it takes the webcam as
tube2 = model.getObjectByName(tube2, Color(lightgrey), 0); its input, it can also take an image or a prerecorded
true); renderer.setSize(window.innerWidth, video. The AR toolkit is told to initialise and if its
c = tube2.children[0].material; window.innerHeight); resized it will match the same as the renderer on the
c.transparent = true; document.body.appendChild(renderer. HTML page.
c.side = THREE[BackSide]; domElement); arToolkitSource = new THREEx.
c.blending = THREE[AdditiveBlending]; ArToolkitSource({
c.opacity = 0.9; 9. Create the scene display sourceType: webcam,
The renderer is made to be the same size as the });
7. Final fix browser window and added to the Document Object arToolkitSource.init(function onReady() {
The last model is a spinning circle just at the middle of Model of the page. Now an empty array is created that arToolkitSource.onResize(renderer.
the design. This follows the same rules as before but will store objects that must be rendered. A new scene is domElement)
doesnt render the back of the object, just the front. The created so that content can be displayed inside of this. });
opacity of each of these materials has been set to 90% onRenderFcts = [];
just to make it slightly softer. Once the model is loaded scene = new THREE.Scene(); 13. Keep it together
the init function is called. Because resizing is something that happens a lot with
mid = model.getObjectByName(mid, true); 10. Light up mobile screens, as the device can easily rotate to the
b = mid.children[0].material; To be able to see content in the scene, just like in the point that it re-orientates, the browser window is given
b.transparent = true; real world, lights are needed. One is an ambient grey an event listener to check for resizing. This resizes the
b.blending = THREE[AdditiveBlending]; light while the directional light is a muted blue colour AR toolkit.
b.opacity = 0.9; just to give a slight tint to the 3D content on display in window.addEventListener(resize, function()
init(); the scene. {
}); var ambient = new THREE. arToolkitSource.onResize(renderer.
AmbientLight(0x666666); domElement)
8. Initialise the scene scene.add(ambient); });
The init function is set up and inside here the renderer var directionalLight = new THREE.
settings are created. The renderer is using WebGL to give DirectionalLight(0x4e5ba0); 14. AR renderer
directionalLight.position.set(-1, 1, The AR.js needs a context set up, calling the Three.JS
1).normalize(); extension to do so. Here it takes the camera data file,
Included marker scene.add(directionalLight); which is included in the data folder, and detects at 30
In the project files folder is the file marker.pdf. If frames per second with the canvas width and height
you print this, you can place either your webcam
or a phone camera from the webpage to look at
11. Lights, camera, action! set up for it.
With the lights added to the scene, the next part to set arToolkitContext = new THREEx.
this so that it will display the 3D content.
up is the camera. As previously with the lights, once ArToolkitContext({
Top left
Enabling the webcam in step 12 means that both desktop
webcam and the phones camera can be used to view
the content
Top right
The diferent parts of the model are set to animate in
step 17 and here the tubes and discs are spinning while
the hexagon model in the centre moves up and down
Right
This is the image that will be detected by the camera as
an AR marker; as you can see it shares some similarities
with a QR marker, which you might be familiar with
56
Tutorials
Code augmented reality markers
57
web workshop
Create a draggable left and
right navigation panel
As seen on poligraph.live
Display the news
When the user clicks the news
icon a bubble pops up with the
facts summarised, and theres
also a link so the user can see
the article for themselves.
Timeline of events
As the user drags, the
relevant days of the week
are on display showing
when the news story
came out and when it
was contested.
58
Create a draggable left and right navigation panel
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
EXPERT ADVICE
T
here has been no end of controversy facts by some of the largest global news outlets. The
Function follows theme following the election of President site was created by Camilla Ploug and Martin Furze who
As this site is named The Poli-Graph
it sticks fairly rigidly to a polygraph
Trump to the White House. One of the have day jobs as art directors, but they represent no
for the sites theming. Using the biggest areas of pontification has been organisation with this production.
polygraph idea for the news around the subject of fake news, with even the President Using the polygraph theme users get to browse the
checking means that the graph itself himself claiming that news outlets are making stories up. facts of President Trump in a timeline representing the
becomes the navigation, and
Simultaneously there have been a number of facts graph line from a polygraph. Over the top of this is a
therefore the functionality follows
out of the concept. This even claimed by the President that have later been disputed, fantastic PNG image with Trumps head, Photoshopped
dictates how the site content will leading to a cat-and-mouse game of fact checking that up with Pinocchio styling to show the extent of his lies.
look as the user browses the news. seems to constantly pervade our news feeds. While this project is just a bit of fun, it does show some
Into this space comes the hilarious website, The very disturbing realities about the state of the world in
Poli-Graph, which aggregates disputed President Trump which we live.
Technique <script>
var drag = document.getElementById(drag);
1. Create the draggable timeline var absRight = window.innerWidth - 3000;
The poligraph.live site has a draggable timeline that drag.style.left = absRight + px;
enables the user to drag a graph line back and forth. To function startMoving(evt) {
recreate this efect, add the CSS on FileSilo to your evt = evt || window.event;
page to hide the overflow content on the x axis to stop var posX = evt.clientX;
left to right scroll bars. var divLeft = drag.style.left;
divLeft = divLeft.replace(px, );
2. Draggable area var diffX = posX - divLeft;
The draggable area is styled up now. Its been created
much wider than the screen at 3,000 pixels wide. This is 5. Move the mouse
so that it can be dragged left and right. The background When the mouse is pressed on the draggable div, the
image is placed in to fill the background, and the cursor function here is added to it. This works out the position of
changes to a pointer when the mouse is over this. the div by taking its current position and taking of the
#drag { current position of the mouse. The if statements stop it
position: absolute; being dragged too far left and right.
width: 3000px; document.onmousemove = function(evt) {
height: 300px; evt = evt || window.event;
background: url(img/line.png) no-repeat; var posX = evt.clientX;
cursor: pointer; } var newX = posX - diffX;
if (newX > 0) newX = 0;
3. HTML content if (newX < absRight) newX = absRight;
The HTML part of the code is very sparse, it really is just drag.style.left = newX + px;
a nested div tag. The outer div is named container and }
the inner element is drag. There are mouse events on }
here for mousedown and mouseup to handle the
mouse being pressed. 6. Release the mouse
<div id=container> Once the mouse is released the mousemove function
<div id=drag onmousedown=startMoving(); is wiped out so that it doesnt keep firing. Save the
onmouseup=stopMoving();></div> document and try the page in your browser so that
</div> you can see the draggable content. To improve this you
could add an event listener to check for the browser
4. Add the functionality resizing and update the absRight variable with the
Before the closing HTML tag on your page, add the script new window width.
tags and enter the code here. The main part of this is to function stopMoving() {
work out the screens width and then take the 3,000- document.onmousemove = function() {}
pixel width of the draggable div of this. This sets up how }
much we can then drag in each direction. </script>
59
Tutorials
S
ocial media is a huge part of our internet in CSS Classes, a shared and a unique class with spaces
identity, so most websites have links to Click the Custom Links dropdowns on the left-hand side. between, eg social-button facebook-button,
your sites of choice in a header, footer or Add each social media link by inserting the URL and social-button twitter-button. Do this for each link and
sidebar. Engaging your audience and name into the fields provided and click Add to Menu after then click Save Menu.
encouraging them to click on these links, let alone each one. You should end up with a list on the right-hand
drawing attention to them in the first place, can be a side. To reorder the list simply drag and drop.
tricky business. In this tutorial, well cover how to make
icons that stand out, using just the tools that WordPress
provides for us. You dont even need to know any coding,
just be a copy-paste master!
Were opting for moderately sized buttons that will look
great on mobile and desktop, with subtle hover states, 6. Assign the menu to a location
coloured backgrounds, gradients, and even support for IE Assign the new menu to a theme-defined location at the
9+ (with a graceful IE8 fallback). By using WordPresss bottom of the menu edit page by selecting one of the
powerful menu, a plugin and customisation tools, we can 3. Set email mailto link Display Location options. Alternately put the new menu
accomplish this all through the Admin panel without For an email link, you can use the mailto link. Instead of a into a widget by going to Appearance>Widgets, drag a
digging into background code. Theres no need to crack URL, in the URL box type mailto:example@email.com, Custom Menu widget into the sidebar and select the
open your theme, and all the changes made will be saved with your contact address instead. When clicked on, this name of your new menu.
in the WordPress Admin panel. link will open a visitors email client, with your email
This tutorial breaks down into three easy steps: set up automatically in the To field.
a menu, install the FontAwesome icon font using a plugin,
and add CSS to the customisation panel. If youre
CSS-savvy, you can easily scale these buttons to be
smaller, larger, and change the icon and background
colours to match your theme.
Left
Adding a title will, by default, add a small hover state that
shows the title so users know what to expect when
clicking the link
Top left
Check the Open link in a new tab option to turn on the
target=_blank attribute for links, so clicking them will not
take users away from your main site
Top right
Adding classes will give us something easy to hook onto
with CSS later. Make sure theres a space between each
class, and use something memorable
61
Tutorials
Code social media buttons for WordPress
8. Default menu display 10. Align buttons side by side background colour change. This continues on from the
Your new menu should now appear in your layout in the Start by adding styles for all the buttons as a basis for last steps additions.
area you selected. It will currently be in the style of the customising each individual link. This code will start by #menu-social-media-menu .social-button > a {
other menus, with text and not icons. The generated aligning your buttons side by side. Depending on your [...]
markup, depending on your theme, will look similar to this theme you may need to make adjustments. transition: all 0.2s;
(additional IDs and classes added by WordPress have #menu-social-media-menu .social-button { border-radius: 100%;
been omitted for clarity). display: inline-block; }
<ul id=menu-social-media-menu box-sizing: border-box; #menu-social-media-menu .social-button >
class=menu> padding: 0; a:hover {
<li class=social-button facebook-button><a border: 0; transform: scale(1.2);
title=Find us on Facebook target=_blank } background: #ccc;
href=URL>Facebook</a></li> }
<li class=social-button twitter-button><a
title=Follow us on Twitter target=_blank 13. Add icon placeholder
href=URL>Twitter</a></li> Now create the placeholder for the icon using the :after
[...] pseudo class. This will create a fake element using CSS
</ul> that overlays your buttons, similarly to a div that we can
style and add the icon to.
#menu-social-media-menu .social-button >
a:before {
11. Turn text into button shapes content: \f00d;
Add block and background to the anchor links with width font-family: FontAwesome;
and height settings to make the base shape. Use a tall line font-size: 14px;
height and hide the overflow to hide the text out of the transform: rotate(0.001deg); /* IE Fix */
viewport while still making it available to screen-readers. color: #000;
9. Start styling Add a margin to put some space between buttons. position: absolute;
You can now add CSS to your theme files, or in #menu-social-media-menu .social-button > a { width: 30px;
WordPress 4.7 and above, you can add CSS via the display: block; line-height: 30px;
Additional CSS theme options. Go to background: #555; text-align: center;
Appearance>Customise in the Admin panel and open the height: 30px; }
Additional CSS tab. CSS saved here will apply only to this width: 30px;
theme, and will not edit your theme files. overflow: hidden;
line-height: 200px;
margin: 0px 3px;
FontAwesome is }
position: relative;
an icon font
They scale to any size, big or small! They are great
for all screen types: desktop and mobile. Theyre
12. Add some style
Give your buttons some panache! Set the border
also tiny in file size so they load faster than
images and can be recoloured with CSS! radius to 100% to make circles. Transition and transform
can give your hover states a bit of a zoom and
Top left
The list of FontAwesome icons is available at
fontawesome.io/icons. There are many icon types
available, not just social media logos
Top right
Use the search function to refine the view to a
specific icon or scroll down to Brand Icons to see
all site brand logos
Right
Click the icon to expand the full view. The unicode code
that you need for CSS is in the grey bar just under the
different sizes
62
Tutorials
Code social media buttons for WordPress
Gradient backgrounds
with CSS3
Creating gradient backgrounds can
be time-consuming and require a lot
of maths. Thankfully, tools exist to
generate backgrounds for us!
Google CSS gradient generators for
a selection. For this tutorial, we used
the generator at colorzilla.com/
gradient-editor. It provides an easy
UI to choose your colours, lets you
add and remove stops, and outputs
code thats compatible with many
recent browsers. It even provides IE
support, for those versions that are
capable (with some limitations). Its
important to always provide a
backup colour for browsers that do
not support it, and you can always
check caniuse.com/#search=linear-
gradient to see which browsers it
will work best on.
14. Get social icon unicode content: \f09a; /* Facebook icon */ 007bb6; /* LinkedIn */
Go to fontawesome.io/icons and search the name of top: 2px; d93175; /* Instagram */
each social network. Click the relevant icon and make a font-size: 12px; cb2027; /* Pinterest */
note of the Unicode code. This is the characters position } 6c469b; /* Email */
in the font file, and the CSS will use it to display the
character as the icon. 18. Set up individual button style 20. Instagrams gradient
Use each social medias brand colours to add some Using CSS3 gradients, we can emulate the Instagram
15. Set up individual icon style colour to your buttons. Start by making a new rule for brand gradient. As gradients are not supported in all
For each button copy the following code and create a each of the links, similarly to the way we added the icons browsers, its important to provide a backup colour. Try
rule for each, then change the class each time to match to the :before element. Copy the following code for each this code as your instagram background; the first line is
the unique ones previously set when the menu was button and amend the facebook button class to the your backup colour.
created. For example, for this part there will be six unique one for each. background: #d93175;
versions of this rule, with the facebook-button class #menu-social-media-menu .social-button. background: -moz-linear-gradient(45deg,
diferent for each. facebook-button a { #ffd521 10%, #f50401 50%, #b900b4 85%);
#menu-social-media-menu .social-button. background: #HEX /* see next step */ background: -webkit-linear-gradient(45deg,
facebook-button a:before { } #ffd521 10%,#f50401 50%,#b900b4 85%);
/* icon here */ background: linear-gradient(45deg, #ffd521
} 19. Add colour to your buttons 10%,#f50401 50%,#b900b4 85%);
Replace HEX inside each buttons rule above, using the
16. Add icons to CSS codes below. Each of these is a sites main brand colour 21. Final word
Fill out all six button rules with the following. Use the (or a theme-fitting colour in emails case), place one into For the finishing touches, make sure your :hover status is
unicode from fontawesome.io/icons and overwrite the each of the rules you set up in the previous step, eg at the end of your CSS so it overwrites your button
content attribute for each button. Make sure to include background: #3b5998; for Facebook. colours. If you feel like the left-hand correlation of blue is
the backslash before each unicode so CSS knows to 3b5998; /* Facebook*/ too much, use the menu tool to reorder your menu and
escape the code and display the icon, otherwise it will 00aced; /* Twitter */ alternate the blue buttons with other colours.
display the code itself.
#menu-social-media-menu .social-button.
facebook-button a:before {
content: \f09a; /* Facebook icon */
}
63
web workshop
Create an interactive
navigation display
As seen on ivanaivazovsky.life
Less essentials
Less essential features
are placed in a location that
doesnt obstruct the main
content, but are still easily
noticeable and accessible.
Navigation links
These are the page
navigation links that
alter the page
background when the
user hovers the mouse
pointer over them.
Page background
The background image
is set to cover the full
area of the page. It is
sized to cover the
full area using
background sizing.
64
Create an interactive navigation display
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
<comment>
I
ts annoying for users to click on a link only to Another user experience design issue that using What our
find that the webpage isnt of interest. Not the page background can address are interpretation experts think
of the site
only does this waste time, but also data which issues such as dyslexia. In these cases, the saying a
is always going to be a concern for mobile users picture speaks a thousand words comes in very
who are paying for their data usage. handy by allowing you to communicate additional As an accessibility asset
With space often limited, especially on mobile devices, information to the user without overloading them with The use of visual design to reduce written
it is beneficial to provide additional information about too much text. communication can help to make your
content being linked to from page navigations in a way As with any efect that combines text with background website more accessible to people who
that doesnt require additional space. Using the page images, make sure that your text remains readable at all have difficulty in reading text. Visual
background is a good way to achieve this; using a picture times. This can be achieved by placing a semi- communication will benefit many people
that communicates the theme of the link provides the transparent colour on your navigation links. Also consider who have difficulties interpreting text.
user with an opportunity to gain insight before UX readability for issues such as colour blindness that Leon Brown, web developer and e-learning content
committing to loading the page. afect how users are able to interpret coloured text. creator at Nextpoint
65
Which front-end frameWork?
wh i c h
front-end
framework? for many web developers frameworks are a must, yet
the ever-growing list of options can be mystifying. we
take a look at the features of some popular front-end
Javascript frameworks, and how to make the best
choice for your proJect
66________________________________________________________________ feature
Which front-end frameWork?
FRAMEWORKS: SIMPLIFY YOUR WORKFLOW frameworks can help you develop better, faster
code. but is it worth the efort to learn one?
When we talk about front-end frameworks, no longer have to worry about implementation improved code organisation and reuse, while
fundamentally were thinking of collections of details for simple things like manipulating the helping to enforce good design patterns.
tools and libraries that aim to simplify web DOM. Frameworks also generally focus around There are downsides to framework use,
development practices. Youve probably heard of component-driven development, which can make a however. Each comes with its own learning curve
some of these or used them already; Angular and huge diference to the maintainability of a page. and often an opinionated design, which forces
React are currently the most popular. For many years, jQuery was the go-to developers to adhere to design patterns that the
The strongest argument for the use of abstraction solution for web developers. However, framework author considers correct. For many the
frameworks is looking at the problems that exist in as app complexity has increased, the need has learning curve will be overcome quickly through
vanilla web development: convoluted code, lack emerged for more extensive rethinks of how we improved productivity. But perhaps the biggest
of modularity and a great deal of time devoted to develop for the web. As a result, there is now a watch-out when adopting frameworks is how
building basic functionality. Frameworks solve this proliferation of front-end frameworks, each with a quickly the marketplace is changing. Its possible
by ofering a layer of abstraction between the code diferent opinion on how things should be done. to learn a framework then find it discontinued or
written by a developer and that which is rendered Along with Angular and React, we also have redesigned, as many found with AngularJS. You
by the browser, providing simplified ways of Backbone, Ember, Vue and more. In spite of their need to be prepared to keep up with the latest
achieving common requirements. Essentially, you diferences, ultimately each of these will ofer releases, updating code when needed.
A HISTORY OF THE WEB amazingly, the world wide web is only 26 years old. its come a tremendous way, and a look at its
history helps understand why we need frameworks to manage the increasing complexity of apps
2009
node.Js
2010
knockout.Js
2010
backbone.Js
Server-side JavaScript rapidly
gains ground after the release IF YOURE SLIGHTLY BEWILDERED BY THE WIDE RANGE
of Node
OF WEB FRAMEWORKS, TOOLS AND LIBRARIES, THE
GOOD NEWS IS THAT IT ISNT JUST YOU. THERES A
HUGE AMOUNT OF CHOICE OUT THERE. RESEARCH AND
2010
angularJs
EXPERIMENTATION WILL HELP YOU FIND ONE THAT
The first release of Angular, which
would quickly become one of the
2011 2012 SUITS YOUR STYLE THE BEST, AND YOULL QUICKLY SEE
most popular frameworks on the web ember.Js meteor.Js GREAT IMPROVEMENTS IN PRODUCTIVITY.
Simon Jones
Software engineering director
feature ________________________________________________________________ 67
Which front-end frameWork?
IN ANGULAR 4?
After a bumpy ride moving from
post a comment and view existing ones
68________________________________________________________________ feature
Which front-end frameWork?
tip
<form #form=ngForm (ngSubmi history, but includes handlers for the bootstrap brings the components of
t)=handleSubmit(form)> submission event we created in the Bootstrap 4 to Angular, so you can have
<input class=text- last step. When the comment box the best of both worlds.
field type=text generates this event, we call the
[(ngModel)]=comment STYLING handleComment function. seMAntic ui
name=comment/> Weve skipped details of the CSS semantic-ui.com
<input class=text- styling in this tutorial, but you can
modify each components CSS
09. THE FINISHING TOUCHES Angular integration is still in development, but
submit type=submit The only thing left to do is this will be exciting when ready. Semantic UI
file alongside its HTML
value=Submit /> create the handleComment introduces some very interesting concepts to
to achieve the
</form> desired look. function. This will call the enable UI layouts to be created with natural-
</div> addComment method of the language HTML and JavaScript syntax.
</div> CommentHistory component that we
already created: ionic FrAMework
We already know that {{instruction}} displays text handleComment (comment) { ionicframework.com
from a variable. But we also have a form element this.commentHistory.addComment(comment); Ionic is focused on mobile app development,
that calls the handleSubmit function when the } and can be used to create some truly
Submit button is clicked. We also have an input impressive experiences. It also comes with a
field with some unusual syntax. [(ngModel)] However, we must also explicitly allow the parent wide range of plugins to maximise the user
enables two-way data binding, which enables us to component access to the childs functions, which is experience on mobile devices.
read and modify the text in the field by modifying done by adding an @ViewChild statement:
the comment variable. @ViewChild(CommentHistoryComponent)
private commentHistory:
07. GENERATE EVENTS CommentHistoryComponent;
We want our CommentBox to generate an event We can then finish up by defining the title variable,
when a comment is submitted, which the parent and thats it! The basics of your page should now
component can use to update the history box. In be working. If youre still running the Node server,
the TypeScript, well define a component output: you should have seen your changes refresh
@Output() submission: EventEmitter<string> = automatically as you went along.
feature ________________________________________________________________ 69
Which front-end frameWork?
CREATE A SIMPLE
PAGE WITH REACT
Lets create the same comments page we built in
Angular, but this time using React
React has seen an incredible surge in popularity
since its release, and is focused first and foremost
on creating high-performance, component-based
user interfaces. The main purpose of React is to
bind HTML elements to data, updating the
elements when the data changes without reloading
the page. Usually, React development is done with
JSX syntax, an extension of JavaScript that enables
HTML to be embedded directly in the script.
70 ________________________________________________________________ feature
Which front-end frameWork?
FRAMEWORK...?
handleSubmit when submitted, so lets create that commentsList} />
function within the CommentBox class: </div>
handleSubmit(event) { );
event.preventDefault(); }
If were talking technicality, React might not if (this.state.text.trim() != ) { We also need a submitComment function. Youll
be considered a framework as such. Its this.props.onChange(event); notice that the CommentHistory component
fundamentally a library for front-end } gets its list of comments from the state of the
development, so other technologies are this.setState({text: }); } App component, so our submitComment function
required for a complete development toolset. With this we use the state of the component, which will update this state based on the onChange
However, when developers refer to React, we talked about in the last step, to both read the event it receives.
theyre often referring to a stack of libraries and comment that was entered, and reset it to empty. submitComment(event) {
tools that together ofer a distinct development We also raise an onChange event that the parent this.setState({
experience. As such, a common decision for component can react to. commentsList : this.state.commentsList.
developers is between Angular, React or some concat(event.target.dataset.value)
other framework. 07. BIND EVENT HANDLERS });
Theres a small nuance to the way JavaScript }
Please feel free to leave me a comment handles the this object, which requires us to do
below... some extra work here. Essentially, this wont work 09. THE FINISHING TOUCHES
<div className=Text-entry> in the event callback unless we explicitly bind it. Now our app is ready. All thats left to do is
<form onSubmit={this.handleSubmit} There are a few ways to do this, but Reacts initialise the commentsList variable in the state
data-value={this.state.text}> recommended approach is to do so in a using the App components constructor:
<input className=Text-field constructor that is called when the component constructor(props) {
onChange={this.handleChange} type=text is created: super(props);
value={this.state.text} /> constructor (props) { this.state = {
TIP
<input className=Text-submit type=submit super(props); commentsList: [..., ..., ...]
value=Submit /> this.state = { }
</form> text: }
</div> } If youre still running Node,
</div> this.handleChange = this. ES6 you should once again see
); handleChange.bind(this); ES6 is the latest JavaScript your page refreshing live as
} this.handleSubmit = this. implementation. Additions such as you make changes. From here
class syntax and arrow functions
handleChange(event) { handleSubmit.bind(this); you can experiment perhaps
help make React code
this.setState({text: event.target.value}); } more concise and try to implement functional Like/
} readable. Dislike buttons, comment deletion
Most of this is self-explanatory, but the interesting 08. BRING IT TOGETHER and more.
parts are the data-value={this.state.text} and Now our components are built, we can
value={this.state.text} attributes, and the modify the main App component to display them:
handleChange function. These enable us to link render() {
the state of the component to the input, and return (
store it as a data attribute of the form. Well use <div className=App>
this later. <div className=App-header>
<h2>Welcome to my React comments page</h2>
06. GENERATE A SUBMIT EVENT </div>
Much as with Angular, we need our React <CommentBox onChange={(event) => this.
component to generate an event when the Submit submitComment(event)} />
button is clicked. Weve told the form to call <CommentHistory comments={this.state.
feature _________________________________________________________________ 71
Which front-end frameWork?
WHO ELSE TO CONSIDER Angular and React arent the only options on the
table. So what else might we consider?
EMBER
emberjs.com
METEOR
meteor.com
VUE
vuejs.org
A framework for creating The fastest way to build The progressive
ambitious web applications JavaScript apps JavaScript framework
Ember aims to provide a complete solution for Meteor is a full-stack framework, and like Ember, Vue was created by a single developer who had
client-side development, and takes a strongly is highly opinionated. It comes with a front-end worked for Google on AngularJS. His objective was
opinionated approach in doing so. While it doesnt rendering system called Blaze, which can be to build something that delivered its strengths
have the backing of a single major company like swapped out for Angular or React if you so desire. while remaining lightweight and less opinionated.
Google or Facebook, its nonetheless used on many Blaze uses a templating system, Spacebars, In a short space of time, its activity on GitHub had
popular sites, including LinkedIn, PlayStation Now which is similar to Handlebars but takes advantage surpassed other popular frameworks and libraries.
and Apple Music. of some of Meteors more powerful features. The One of the key attractions to Vue for many
Ember uses the Handlebars templating engine, templates are very close to HTML, which makes developers is its simplicity and straightforward
which provides the ability to embed expressions in them immediately readable. Many find that this learning curve. Its close enough to regular
the HTML to dynamically change what is displayed. sits in a sweet spot, ofering a gentler learning JavaScript that there is no need to learn complex
Ember places heavy emphasis on components, curve than Angular yet a more structured code syntax specific to the framework, and it also comes
using Handlebars to describe their appearance and style than React. Blaze also integrates very well with very strong documentation.
JavaScript to implement behaviour. with other JavaScript tools and libraries such as Vue ofers strong performance, outperforming
Ember may be a particularly good choice for jQuery, and will not have issues with changes both Angular and React in many benchmarks. This
developers who like their frameworks prescriptive they make to the page. is in part because it implements a similar virtual
and all-inclusive, and who lack the inclination to Meteor and Blaze may be particularly good DOM to React (and in fact Ember), enabling only
piece together libraries from multiple sources. choices for full-stack development, especially the components that need changing to refresh.
Many find its learning curve to be challenging, and where a database is required, since they ofer Its apparent that Vue comes with a very fresh
it may be quicker to put together smaller pages in particularly powerful integration between DOM approach to the problems facing developers, and
something like React. Ember has, however, found and data sources. Its also become a highly has learned from the journeys of both Angular and
particular popularity with developers using Rails popular choice to combine Meteor with React, React. Overall, it may be a good choice for those
for their backend, perhaps because Rails itself and the developers behind Blaze indicate that new to developing with frameworks, who may not
ofers a similarly opinionated design philosophy. closer coupling of the two is likely in the future. benefit from all the features of larger frameworks.
72 ________________________________________________________________ feature
Which front-end frameWork?
MAKING THE RIGHT CHOICE there are a lot of options out there,
but how do we pick the right one? WHAT DOES THE
FUTURE HOLD?
You might be able to get an initial feel for these preference, and these are the two best-known
frameworks by looking at the code samples and frameworks for a reason. Vue, however, is a relative
deciding for yourself whether their design newcomer that has rapidly gained a significant
philosophy is useful or absurd. However, it can be following and is well regarded by its users. frameworks are certainly here to stay,
dificult to see all the benefits and pitfalls until you A significant factor in considering a framework
but expect some changes in how we
start spending time working with them.
Looking back at the pages we built in this article,
should also be longevity. React, Vue and Angular
are all seeing an active increase in usage, indicating
work with them
the React code is concise and very readable for this that theyre likely to be around and improving for
simple scenario, thanks to JSX. Many feel that it has some time to come. If you pick one of these three,
a simpler learning curve as a result. Angular, youre likely to be in safe hands. Conversely,
meanwhile, enforces more structure and design older frameworks seeing a drop in interest, such
discipline, which can be powerful for large-scale, as AngularJS, may be coming towards the end of
complex applications. The distinction is personal their life.
POPULARITY angular and vue have been the popular searches over the last two years
100
The challenges in web development that
frameworks have emerged to solve arent
going away. Web apps continue to grow in
Angular 2+ complexity, especially with the proliferation of
progressive web apps. Meanwhile, HTML and
75 JavaScript continue to evolve but retain many
of the same fundamental limitations that have
Vue
existed for decades. In some places, theres an
undertone of frustration emerging within the
React
50 web community. Some argue that things have
become too divergent, and that many
Ember
frameworks introduce complexity unnecessary
AngularJS
for the majority of users. Its likely that well
Backbone
25 start to see more done without frameworks,
Knockout
which may start to reverse this. Modularity and
Meteor templating, which are some of the leading
benefits of frameworks, are now part of the
0 Source: Google Trends HTML specification. When the web
Jan15 Aug15 Mar16 Jan17 components specification is implemented
across all browsers, developers will find less
GITHUB STARS stars are efectively a like and demonstrate the popularity of the repository reason to move to the likes of Angular.
Where frameworks remain in use, were likely
to see an increased focus on lightweight
AngularJS 55,576
footprints and performance optimisation.
Backbone 26,262 Theres growing realisation that these are
Knockout 8,153 important considerations, and many newer
Ember 17,804
frameworks highlight them as key selling
points relative to the heavyweights. We may
Meteor 37,261
also see some consolidation of frameworks (or
React 65,620 at least convergence of styles and patterns), to
Vue 51,988 bring more standardisation and help reduce
the risk that particular frameworks fall out of
Angular 2+ 23,646
Source: GitHub favour over time.
0 70k
feature ________________________________________________________________ 73
GETTING STARTED WITH VUE.JS
Vue.js
MVVM frameworks can be found in abundance. Sadly, many
if not most burden developers with a variety of custom
syntaxes and DSLs. Vue.js takes a refreshingly approach
74 _____________________________________________________________________feature
GETTING STARTED WITH VUE.JS
feature_____________________________________________________________________ 75
GETTING STARTED WITH VUE.JS
gRIDDIE-gO-ROuND!
TODOMvC A lA vuE vuejs.org/v2/examples/grid-component.html
BIND TO svg vuejs.org/v2/examples/todomvc.html The above-mentioned component system can
vuejs.org/v2/examples/svg.html A somewhat simplistic task-managing application be used to create well-designed widgets. One of
Vue.js is one of the few data binding frameworks specification called TodoMVC can be considered a the most impressive ones involves the spawning
that does not limit itself to classic DOM benchmark for the performance of various of a simple Excel-like grid, whose design is
elements. This is best demonstrated in this little frameworks while its practical value is limited, the modified via CSS. Be aware that the program is
example, which creates a diagram made up of an results obtained are interesting. Vue.js's preferred not interactive adding click-handling logic
SVG polyline that has its control points example takes up but 120 lines: a value that does would be a job for someone seeking to learn
connected to data stored in the back-end. not pale in comparison to its competitors. more about Vue.
76_____________________________________________________________________feature
GETTING STARTED WITH VUE.JS
REDUCES
REDUNDANCY!
When applied correctly,
BEWARE OF THE DATA ATTRIBUTE NORMAL INVOCATION REQUIRED using components provides
When using Vue.js's component system, Keep in mind that the component framework of a significant reduction in
the data parameter must always take the form Vue.js is not working outside of designated code complexity: if you find
of a function that returns a new instance for working areas. Due to that, the last act in the life
yourself cutting and pasting
every element. This is important, as the function of our little example involves the creation of an
gets invoked once for each component empty Vue instance. large blocks of mark-up, keep
instance: if a new instance of the backing store Its sole parameter contains a reference to this facility in mind!
is not returned for every element, the widgets the parent element that is to be targeted in
will share state and emit all kinds of odd our app example, it is but a div containing the
program behaviour. template invocations.
feature_____________________________________________________________________ 77
GETTING STARTED WITH VUE.JS
self-hosted?
Obtaining resources from a
content delivery network can
be problematic; if the Vue
developer team changes a
few APIs, your application
RUN THE VUE! might break.
Getting started with Vue can be a daunting process. Let us take it step by step
The following steps guide you through the creation <input type="checkbox" id="checkbox" be ensured by using documentReady or jQuery, a
of a simple program which demonstrates some of v-model="item.done"></input> simple way involves arranging the individual
the key aspects of the Vue.js framework! <span>{{ item.text }}</span><br> elements as shown in the skeletal outline
</template> accompanying this step.
<script src="vue.js"></script>
make state management easier. Vuex.js is two properties each. This is best accomplished by <script src="vuex.js"></script>
unproblematic just be careful to make sure it gets the code snippet here using JSON syntax to create <script>
included after the main Vue framework. objects inline might not be a best practice, but makes window.app = new Vue({
<html> life easier for small test programs. el: '#workSpace',
<head> window.app = new Vue({ data: {
<title>VueTodo</title> el: '#workSpace',
</head>
<body>
<script src="vue.js"></script>
data: {
taskfield: [
{ text: 'Check in for flight', done: true
5 RUN THE PROGRAM With this out of the way,
open the file in a supported browser of choice.
The three to-do items declared will show up. As an
<script src="vuex.js"></script> }, added challenge, wire up a button with the code
{ text: 'Download files', done: true }, accompanying this step due to the reactivity,
}
]
pushing an element into the taskfield will lead to the
updating of the rendered view.
function runner(){
to populate them. In the case of our to-do list, we }); var anO=new Object();
furthermore create a template object which is bound anO.text = "Undone item";
to an element in the back-end via the v-for attribute.
<div id="workSpace">
<template v-for="item in taskfield">
4 PLACE THE CODE CORRECTLY Vue instances
can be created only when the work area DOM
elements have raised successfully. While this can also
anO.done = false;
app.taskfield.push(anO);
}
78_____________________________________________________________________feature
CREATE THE IMPOSSIBLE
w w w. p h o t o s h o p c r e a t i v e . c o . u k
Available
from all good
newsagents and
supermarkets
ON SALE NOW
Striking imagery Step-by-step guides Essential tutorials
PHOTO EDITING DIGITAL PAINTING PHOTO ART TOOL GUIDES BEGINNER TIPS
facebook.com/PhotoshopCreative twitter.com/PshopCreative
Developer tutorials
Whats new in
Angular 4?
Theres been some fundamental changes to how Angular
works. See how they can benefit your application!
W
{common,compiler,compiler-
development releasing increasingly Now we have a package manager we can use it to install cli,core,forms,http,platform-browser,platform-
frequent updates, its important for Angular and the Angular CLI (command-line interface). browser-dynamic,platform-
any developer or team to be aware You can find the latest CLI documentation at angular.io/ server,router,animations}@latest typescript@
of the latest features and deprecations. This is the first docs/ts/latest/cli-quickstart.html. Among other things, latest --save
major version release since the adoption of semantic it gives you the ability to easily generate new projects Windows:
versioning by the Angular team. So dont worry, you didnt and components. > npm install @angular/common@latest @
miss 3.0! There were two major updates to be released $ npm install -g @angular/cli angular/compiler@latest @angular/
and these were both rolled up to version 4.0. $ ng new my-first-angular4-app # Angular CLI compiler-cli@latest @angular/core@latest @
The Angular team are calling it an invisible makeover, commands use 'ng' angular/forms@latest @angular/http@latest @
because most of the changes are in the background $ ng serve -open # This command will angular/platform-browser@latest @angular/
rather than with core coding functionality. An important bootstrap your app and launch it in the platform-browser-dynamic@latest @angular/
change is the move to Ahead-of-Time compilation as browser platform-server@latest @angular/router@latest
standard, which has the potential to drastically improve @angular/animations@latest typescript@latest
performance when used correctly. TypeScript 2.1+ is also 3. Check versioning --save
now supported, which gives us access to all the new If youve not seen an Angular project before, take time to
features of ES2015. familiarise yourself with the file structure generated by 5. Download tutorial app
Thats not to say there arent also any useful changes the CLI. You can get information on each of them in the From now on well be working with an Angular 2 example
to the basics; some useful new template-binding syntax Project File Review section of the CLI Quickstart page on app that you can download from the tutorial file share.
enables us to simplify our code by adding an else option Angular.io. For our new project, our package.json should Note that this app has been created purely for illustrative
to ngIf and the ability to assign local variables within list version 4.0.0 Angular packages. If so, skip to step 5. purposes. Once youve downloaded the app Flower Shop
an ngFor. In this tutorial well show you how to utilise "dependencies": { into your root directory, install dependencies and launch
some of these new features as well as demonstrate "@angular/common": "^4.0.0", in the browser.
some of the powerful performance-enhancing, under- "@angular/compiler": "^4.0.0", $ npm install
the-hood changes. "@angular/core": "^4.0.0", $ ng serve --open
"@angular/forms": "^4.0.0",
1. Node and npm "@angular/http": "^4.0.0", 6. Upgrade Flower Shop to 4.0
Starting from scratch, we can use the Angular CLI to build "@angular/platform-browser": "^4.0.0", Execute step 6 within the flower-shop directory. For our
our Hello World app in the latest version. If you want to "@angular/platform-browser-dynamic": "^4.0.0", Flower Shop app, we have some UNMET PEER
update an existing app, skip to step 4. If you havent "@angular/router": "^4.0.0" [...]} DEPENDENCY errors after upgrading.
already, get Node, which comes with npm and can be
downloaded from nodejs.org. If youve got Node already, 4. Upgrade to Angular 4
check youve got at least Node 6.9.x and npm 3.x.x from
the command line.
If you have an existing Angular app with 2.x versions
listed in your package.json, its really easy to update to
Angular vs AngularJS
Angular 1.x is now known as AngularJS, and
$ node -v version 4 for most cases. We just need to install and
Angular 2+ is simply referred to as Angular. Be
v6.10.2 update the relevant packages from the command line. wary as some third-party tutorials and libraries
$ npm -v Mac: may not have updated their use of these terms.
3.10.10 $ npm install @angular/
Left
Download and install Node.js by following the instructions in the wizard.
Node comes pre-packaged with npm (node package manager)
Top left
Hello World app generated simply by using the Angular CLI command
ng new test-app and launched in the browser using ng serve --open
Top right
A tutorial app created for illustrative purposes, launched in the browser
using ng serve --open
81
Developer tutorials
Whats new in Angular 4?
9. Check versions
Our custom modal component also needs updating
to a more recent version, so be sure to update it
with npm.
$ npm install ngx-modal@latest --save
Top
Our custom modal module needs renaming to match new versions of
angular naming conventions
Above
Our build should succeed now that weve corrected our dependency
version discrepancies
Right
Make sure all third-party and custom-dependency versions are up to date!
Use @latest or one of the stated valid install target version numbers
82
Developer tutorials
Whats new in Angular 4?
Animations
One of the changes in
4.0 is to strip out the
animations module from @
angular/core. Its large and
therefore an unwelcome
bulk in your build unless
youre using it. Its easy to
add back in if you do need
it though, just import it
like any other Angular
module. Import the new
BrowserAnimationsModule
from @angular/platform-
browser/animations into
your root ngModule. The
best place to learn how to
use animations in Angular,
and how to select the
right one for your use
case, is to use the live
example feature at bit.
ly/2q2shvj. A powerful
feature of Angulars
animations module is its
slick handling of state
transitions. Its certainly
worth experimenting
with try adding an
animation to our
Flower Shop app!
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"src/app/app.module.ts",
"src/main.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
83
Developer tutorials
Whats new in Angular 4?
Top
Using the AoT Angular compiler we can see errors before we ship our
app to the browser. In this example weve forgotten to assert type for
our item parameter
Above
Our email validator easily recognises only valid email addresses and will
only enable the Submit button when one is entered into the form
Right
Titlecase pipe applied to flower description text forces the first letter of
each word to be capitalised. Unfortunately this has also been applied to
the possessive s on FriendS!
84
Special offer for readers in North America
Quote
+44 (0)1795 592862
Order hotline
Online at www.imaginesubs.co.uk/wed
USA3
*Terms and conditions
for this
This is a US subscription offer. You will actually be charged 80 sterling for an annual subscription. This is equivalent to
$105 at the time of writing, exchange rate may vary. 6 free issues refers to the USA newsstand price of $14.99 for 13 issues being $194.87, compared
with $105 for a subscription. Your subscription starts from the next available issue and will run for 13 issues. This offer expires 31 July 2017.
exclusive
offer!
Developer tutorials
Create a dashboard
app with React
Make the most out of reusable components to create a
highly flexible data visualisation screen
fter you have covered the basics of with the Widget className and will scope the styles to
A
/* in one window */
creating a web application with React, it > yarn install that component.
can be hard to know what advantages it > yarn start import ../styles/Widget.css;
provides over updating the page using /* in another window */
something like jQuery. > yarn serve 4. Add heading and content
Component creation is a significant bonus. The ability Each widget will need a short description of what data it is
to create self-contained, reusable components means 2. Add the first widget showing. To keep things customisable, we will pass this in
you can keep code smaller and more organised. If To start things of, we will render a simple component as a property or prop to the component when we
components are set up well enough, they can be on the page. With Babel set up, we can write use it.
dropped in where necessary with no additional setup components using ES2015 classes. All we need to do As for the content, React supplies a special children
required at all. is import them when we need to and Babel with prop, which will contain the content entered between a
In this tutorial, we will be making a dashboard Webpack will do the rest. components opening and closing tags.
application that keeps an eye on important support Open up /src/components/App.js and add the import Replace the placeholder <p> in the render function
metrics. The screen is split up into a grid, which can be to the top of the page. Then, inside the render function, with the following. The Loading component will come
customised to show diferent visuals depending on the place the component inside the container <div>. into play later on.
data it needs to show. import Widget from <div className=header>
By making a generic widget component we can chop ../components/Widget; <h2>{this.props.heading}</h2>
and change the display without afecting any of the [] {this.props.loading ? <Loading />:}
underlying code. Wrapping these in a container <div className=App> </div>
component allows us to control the source of that data <Widget /> <div className=content>
separate from its display. </div> {this.props.children}
We will be making use of CSS Grids a new way of </div>
displaying content in defined blocks. While its syntax is
not a focus of this tutorial, you may find it useful to have 5. Let the widget span the grid
an understanding of how it works beforehand (see page In addition to the stylesheets we import, we can also
44). Browsers that do not support it will display in a single create React styles dynamically based on the props
column, much like when using a smaller screen. passed through.
To span columns and rows with CSS Grid use the
1. Download the dependencies grid-column and grid-row properties. We can pass
After getting the project files we need to pull down all the through colspan and rowspan props to alter this per
required packages we need for the project. These include
files from create-react-app, which deals with the build
process for us. 3. Style a widget box Use curly brackets
We also need to run two servers one that provides On this project, Webpack is set up to pick up CSS imports.
Curly brackets should surround any numbers
hot reloading for the page and another that provides This means we can import CSS files like we did with being passed through in props directly, as
some fake data to test with. JavaScript in the previous step, which allows us to otherwise they may be evaluated as strings by the
Enter the following on the command line while inside create separate files for each component. Add the recipient and fail any of its type checks.
the project directory: following import to the top of Widget.js. This will link up
Left
With the CSS Grid specification, layout elements such as
gutters will be applied regardless of any styling applied to
child elements
Top left
When importing CSS with Webpack, styles can be scoped to
just the component in question to avoid them leaking to other
parts of the page
Top right
In future versions of React, PropTypes will no longer be part
of the React directly. Instead they will need to be imported as
a separate package
87
Developer tutorials
Create a dashboard app with React
Top left
The NumberDisplay component is a presentational
component, as it has no internal state and relies wholly
on the props passed to it
Top right
ListWidget uses CSS Flexbox styling to make the most of
the space available. When spanning multiple rows, this
allows more items to be displayed
Right
We can use the @supports syntax in CSS to detect
whether or not the browser supports grid layouts. If not,
we default to the single-column view
88
Developer tutorials
Create a dashboard app with React
Using create-react-app
Getting development environments
set up can be tricky to set up for
every project. There are many
React boilerplates that have all the
necessary tools in place to start
your next project from.
Facebook has released
create-react-app, which
will instead generate a new
project based on the latest best
practices and includes Webpack,
Babel and the testing tool Jest from
the outset.
The advantage over traditional
boilerplate projects is that it
equates to a single dependency,
which keeps things simple while a
project is young. Once a more
complicated setup is required,
running the eject command splits
things out with helpful comments
to know what each piece does.
To find out more, check out the
GitHub project at: github.com/
facebookincubator/create-react-app
10. Convert to NumberWidget NumberWidgetContainer and pass it a URL to load min: resp.data.min,
At the moment, there is quite a lot of code used to show data from. max: resp.data.max,
something that will not change across widgets. We can import NumberWidgetContainer from value: resp.data.value
make a special component to encapsulate all of it. That ../components/NumberWidgetContainer; });
way we only need to import NumberWidget. [] })
Replace the Widget and NumberDisplay imports at the <NumberWidgetContainer href=
top of App.js with NumberWidget. Make sure to also http://localhost:3001/tickets/open 15. Add in a List Widget
replace them in the render method. heading=Open Ticket Total /> The groundwork we have done for NumberWidget can
import NumberWidget from be applied to other types of widgets too.
../components/NumberWidget; 13. Fetch data on load ListWidgetContainer can be passed the same props
[] Over its lifetime, a React component will call many as NumberWidgetContainer, but will render a list of
<NumberWidget diferent methods depending on what point its at. The values instead.
heading=Open Ticket Total componentDidMount method will be called when a Import ListWidgetContainer alongside the rest, and
max={9} value={5} /> component first renders, which makes it an ideal place to place the component just above
fetch data. NumberWidgetContainer in the render method.
11. Show a progress bar Add the following to componentDidMount in import NumberWidgetContainer from
Inside NumberWidget.js there are a couple of methods NumberWidgetContainer.js. This will call the fetchData ../components/NumberWidgetContainer;
that help us to render things under certain conditions. We method now and every minute after that. We will fix the []
can call these in the render method and they can return TypeError in the next step. <ListWidgetContainer
what we need to output. this.getData().then(_ => { href=http://localhost:3001/stats/top
Inside showProgress() add some code that works out if this.interval = heading=Top Ticket Answerers
we should render a progress bar. We need a minimum, setInterval(this.getData, 60000); rowspan={3} />
maximum and a value at the very least. });
if (this.props.min !== undefined && 16. Display list items
this.props.max !== undefined && 14. Update the state With the data supplied in the sortedItems variable as an
this.props.value !== undefined) { Each component can have its own internal state, which array, we can iterate over the results and render a
return <Progress min={this.props.min} holds information about itself at any given moment. We separate component for each.
max={this.props.max} can pass this state as props for other components to use. To do this we can use the map method on the array
value={this.props.value} />; Make the request to the supplied href prop URL using prototype. This creates a new array of components that
} the AJAX module Axios and update the state with the React will render.
return null; values supplied. These will automatically be passed to Inside the ListDisplay component in showWidget, add
NumberWidget, which will then update itself. the map function to create new ListItems.
12. Add a Container component this.setState({ loading: true }); {sortedItems.map((item, index) =>
Manually adding data isnt going to be much help to us. return axios.get(this.props.href) <ListItem key={item.label}
We can add a container around NumberWidget that will .then(resp => { label={item.label} value={item.value}
supply it with fresh data from our server. Inside App.js, this.setState({ min={min} max={max} />)}
replace what we added in step 10 with the loading: false,
89
Developer tutorials
Create a dashboard app with React
Using Container
components
There are many React patterns
that if followed can help develop
stable, more reusable
components. One of the most
common is the container, or
smart component pattern.
Instead of coupling a
component with the logic of
fetching its data, we can get
the data elsewhere and pass
it through props. The
container component has no
visuals and will only render
the other component that makes
use of the data.
This means if the format of the
fetched data has changed, we can
fix the container without having
to touch the inner component,
which could be in use in multiple
places across the application.
Separating the concerns of
these components makes them
easier to use elsewhere in a
project, as well as more simple to
unit test.
17. Sort data by value 18. Add a Graph widget 20. Regenerate when
We should avoid relying on data being sorted at the Graph widgets can display large sets of data clearer props change
source to ensure we provide useful information to the than the number or list widgets. It uses a library called The React wrapper for Chart.js will update when its props
user. We can use a sorting function to do this inside the Chart.js with a React wrapper that updates as props change, but as the state holds the set up, we do not
sortListItems method. change. Switch back to App.js, import update those values directly.
Array sorting functions take two values and compare GraphWidgetContainer and add it to the render function componentWillReceiveProps is another lifecycle
them. Apply this to sortedItems and return it to sort its under the existing widgets. method that will fire when a components props will
content in descending order. import GraphWidgetContainer from update. Sometimes this can fire when values have not
return sortedItems.sort((a, b) => { ../components/GraphWidgetContainer; changed, but a quick check for that can protect against
if (a.value > b.value) { [] unnecessary updates.
return -1; <GraphWidgetContainer Call generateDatasets if the data has
} else if (a.value < b.value) { href=http://localhost:3001 changed.
return 1; /tickets/progression if (this.props.data !== nextProps.data){
} heading=Tickets Over Time this.generateDatasets(nextProps);
return 0; colspan={2} rowspan={2} /> }
});
19. Prepare data for display
Chart.js takes data in a specific format. In this case, 21. Add remaining widgets
the datasets array is a collection of points used to Finally, all that is left to do is add in some more data. With
draw a line. the flexibility we have created from the various widgets,
We will use state to hold all the configuration data for we can add in whichever widgets are necessary.
Chart.js and update it with the datasets fetched from the Fill in the remaining gaps on the page. Play around
URL, which arrive in a diferent format. with the types, row and column spans, and positions of
Open up GraphWidget.js and loop over the props in widgets to suit the data best.
generateDatasets to update the state. <NumberWidgetContainer href=
props.data.forEach(function (data) { http://localhost:3001/tickets/today
datasets.push({ heading=Tickets Opened Today />
label: data.label, <NumberWidgetContainer href=
data: data.data, http://localhost:3001/tickets/urgent
fill: false, heading=Tickets Marked Urgent />
borderColor: data.color, <NumberWidgetContainer href=
pointRadius: 0, http://localhost:3001/stats/response
pointHitRadius: 10 heading=4 Hour Response %
}); colspan={2}/>
}, this);
90
Discover another of our great bookazines
From science and history to technology and crafts, there
are dozens of Future bookazines to suit all tastes
Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com
+44 (0)1225 687832
COURSE LISTINGS
Featured:
Makers Academy
www.makersacademy.com
Twitter : @makersacademy
Facebook: MakersAcademy
About us
Makers Academy is a fully immersive,
12-week computer programming
remote course every 12 weeks. They
take a learn by doing approach,
Europes #1 developer
boot camp, running highly
selective classes of our
boot camp. With their help, you will
learn the principles of software
through project-based work. Students
are encouraged to work in pairs on offline course every six
craftsmanship and theyll also help you
get your first job. Theyre Europes
coding challenges, with weekly tests,
culminating in a final project. They help
weeks, and a remote course
every 12 weeks
number-one developer boot camp,
running highly selective classes of the
ofline course every six weeks, and a
set up job interviews via their network
of hiring partners including
ThoughtWorks and Deloitte Digital.
.
What we offer
On-site: Remote:
12 week full-time coding 12 week full-time coding
course from the on-site course remotely from home
campus in London
Richard Watkins Ina Tsetsova: Hannah Carney
Science teacher to junior developer Email campaign manager to 3D designer to junior developer at
at Shift graduate software developer at Play Consulting
Makers Academy was frustrating and ThoughtWorks Makers Academy not only focuses on
daunting but amazing and I wouldnt I found a really nice community and your learning for code, but they also
change any of it. I landed the job 28 Ive met really cool people. I got a job focus on your well-being. Work feels
days after finishing the course. quicker than I expected. like fun and Ive finally found a job I love.
92
Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com
+44 (0)1225 687832
WE GOT CODERS
UDEMY
www.udemy.com www.wegotcoders.com
hello@wegotcoders.com
Twitter: @udemy We Got Coders is a consultancy that
Facebook: udemy provides experts in agile web
development, working with startups,
The inspiration for Udemy began in a agencies and government. Take one of
small village in Turkey, where founder their 12-week training course that covers
Eren Bali grew up frustrated by the all that is required to become a web
limitations of being taught in a developer, with highly marketable
one-room school house. Realising full-stack web development skills.
the potential of learning on the internet,
he set out to make quality education Classroom-based training
more accessible. Udemy is now a Real-world work experience
global marketplace for learning and Employment opportunities
teaching online. Students can master
new skills by choosing from an
extensive library of over 40,000 FUTURELEARN
courses including HTML, CSS, UX,
JavaScript and web development.
93
Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com
+44 (0)1225 687832
HOSTING LISTINGS
Featured host: Netcetera
www.netcetera.co.uk
0800 808 5450 Premier provider of
About us
data centre colocation, cloud
Formed in 1996, Netcetera is one of infrastructures. A state-of-the-art data hosting, dedicated servers
Europes leading web hosting service
providers, with customers in over 75
centre environment enables Netcetera
to ofer your business enterprise-level and managed web hosting
services in the UK
countries worldwide. colocation and hosted solutions.
As the premier provider of Providing an unmatched value for your
data centre colocation, cloud hosting, budget is the driving force behind our
dedicated servers and managed web customer and managed infrastructure
hosting services in the UK, Netcetera services. From single server to fully
ofers an array of services designed to customised data centre suites, we focus
more efectively manage IT on the IT solutions you need.
94
get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com
+44 (0)1225 687832
www.cwcs.co.uk www.bargainhost.co.uk
0800 1 777 000 0843 289 2681
CWCS Managed Hosting is the UKs Since 2001, Bargain Host have
leading hosting specialist. They ofer a campaigned to ofer the lowest possible
fully comprehensive range of hosting priced hosting in the UK. They have
products, services and support. Their achieved this goal successfully and built
highly trained staf are not only hosting up a large client database which includes
experts, theyre also committed to many repeat customers. They have also
delivering a great customer experience won several awards for providing an
and are passionate about what they do. outstanding hosting service.
elastichosts.co.uk
www.fasthosts.co.uk 020 7183 8250
0808 1686 777 All-inclusive hosting operates across ten countries. With a ElasticHosts ofer simple, flexible and
UK based and operating 24/7 from comprehensive range of high- cost-efective cloud services with
dedicated UK data centres. Fasthosts performance and afordable products, 1&1 high performance, availability and
keep over one million domains running ofers everything from simple domain scalability for businesses worldwide.
smoothly and safely each day. registration to award-winning website Their team of engineers provide
Services can be self-managed through www.1and1.co.uk building tools, eCommerce packages and excellent support 24/7 over the phone,
the Fasthosts Control Panel. 0333 336 5509 powerful cloud servers. email and ticketing system.
1&1 Internet is a leading hosting
Dedicated servers provider that enables businesses, Easy domain registration Cloud servers with any OS
Cloud servers developers and IT pros to succeed Professional eShops Linux OS containers
Hosted email online. Established in 1988, 1&1 now High-performance servers 24/7 expert support
95
Free with
your magazine
Essential assets Exclusive Tutorial Plus, all of this
and templates video tutorials project files is yours too
Get textures, fonts, Learn to code/create with All the assets youll need All-new tutorial files to help you
backgrounds and more HTML, CSS, JS & PHP to follow our tutorials master this issues HTML, CSS
and JavaScript techniques
72 minutes of expert HTML/CSS/JS
troubleshooting videos from
Pluralsight
(www.pluralsight.com)
16 Orange and Teal Photoshop
actions from SparkleStock
(www.sparklestock.com)
70 vintage wood textures
Get started
Everything you need to
know about accessing
your FileSilo account
Unlock
every
issue
myfavouritemagazines.co.uk
WEB DESIGNER
Issue 263 on sale
for the latest issue, back issues and specials Thursday 22nd June 2017