2019-05-01+web+designer+uk.pdf
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View 2019-05-01+web+designer+uk.pdf as PDF for free.
More details
- Words: 30,368
- Pages: 100
0
1
I
oe li a B ild ites
r at
FOR TODAY’S DESIGNER
ll Si el a a Git ub
ISSUE 286
ow
t l
i hs a i a r S c Re og itio A I
Meta Welcome
Welcome THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cuttingedge features and techniques vital to building future-proof online content
Y
Steven Jenkins Editor
Tools you can trust
ou need to design a new site and app for your latest client. What tools are you going to use? Every designer has their go-to collection, but there are always new tools and frameworks appearing on the web that will make your design life easier and more productive. As the web evolves, so should your arsenal of tools. This issue we bring you a host of the latest, greatest and newest tools that you should add to you current collection. Carl Cahill (page 46) has put together a list that will improve any designer’s workflow. Included in the lineup are some big hitters. Check the new features, and find a host of tools that you might well never heard of — but you will be glad you have after
Highlight
trying them out. Whatever type of designer you are, we can guarantee you will find something to add to your creative collection. Building great mobile user experiences needs the right tools, but tools are not the complete picture. We take a closer look (page 84) at how PWA’s (Progressive Web Apps), SPA (Single Page Apps) and Performant Design can combine to help you build a native-like web experience. Plus, we have tutorials on how to build a free dynamic site fast with the help of static site generator Jekyll, CMS Siteleaf, and use Github to host the site for free. Learn how to use the Speech Recognition API to allow users to input text into forms via voice, and animate SVG with CSS and more. Enjoy.
“
PWAs & SPAs give developers the capability to elevate web performance, while Performant Design gives designers the tools to craft engaging app-like user experiences
”
“
A digital consultant kicks off the project and helps to define what success looks like
”
IE Digitial has been around since 1994, and is still going strong 25 years later. Web Designer decided we needed to talk to them
Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.creativebloq.com
FREE – with your latest issue
143
Designerresources Asset s – 24 AI Dice Art Photoshop actions and 10 Inception Photoshop actionsfromSparklestock(bothworth$14) – 109 Abstract Smoke art brushes from Sparklestock (worth $6) – Tutorial files and assets
www.filesilo.co.uk/webdesigner welcome ________________________________________________ 3
Meta Contributors Future PLC Richmond House, 33 Richmond Hill, Bournemouth, Dorset, BH2 6EZ
Editorial Editor Steve Jenkins
This issue’s panel of experts Welcome to that bit of the mag where we learn more about the featured writers and contributors…
[email protected] 01202 586233
Art Editor Andy Salter Acting Editor in Chief Claire Howlett Senior Art Editor Will Shum Production Editor Elizabeth Wood Contributors Damian Rees, Mark Billen, Leon Brown, David Howell, !ƏȸǼ!ƏǝǣǼǼًxƏȸǸ³ǝɖǔˢƺƫȒɎɎȒȅًhȒɀƺȵǝIȒȸƳً³ɖɀǝkƺǼǼɵً xƏɎɎ!ȸȒɖƬǝًÁƏȅRƏȇȇƏًxɖɀɎƏǔƏkɖȸɎɖǼƳɖًxǣɎƬǝnƺȇɎȒȇ Cover Images ɯɯɯِǕȸƏȵǝǣƬƳȒȅƺِƬȒȅًɯɯɯِɎƺɴɎɖȸƺɀِƬȒȅ Photography hƏȅƺɀ³ǝƺȵȵƏȸƳ ǼǼƬȒȵɵȸǣǕǝɎɀƏȇƳɎȸƏƳƺȅƏȸǸɀƏȸƺȸƺƬȒǕȇǣɀƺƳƏȇƳȸƺɀȵƺƬɎƺƳ
Carl Cahill Carl Cahill is an awardwinning creative. Formerly creative director at digital agencies, Carl has won a plethora of industry accolades including Creative of the Year at the Wirehive Awards. This issue, he reveals the latest features of the big-hitter design tools, and a collection that you need to try today. Page 46
Finding the right tool is not so much about your own “skill level but what your project needs. Be comfortable with a variety of tools, and know their feature strengths ” Matt Crouch
Mark Shufflebottom
Matt is a software engineer at Vidsy. In the final part of his React Redux series, he takes a look at how Redux Form provides a framework for producing complex forms with validation and formatting hooks. Page 72
Tam Hanna
Mark is a professor of Interaction Design at Sheridan College. Mark is exploring the latest Speech Recognition API in order to create new ways of inputting text content into forms by converting your voice to text. Page 56
Sush Kelly
Tam is haunted by his experiences working on avionics where a single mistake can end careers. He considers unit testing of paramount importance, and always has an eye open for new frameworks. This issue it’s Jest. Page 78
Joseph Ford
Making a choice on what blogging platform to use can be tough. Sush Kelly — freelance developer — shows you how you can combine GitHub, Jekyll and Siteleaf to produce a fast and free content managed website. Page 66
Mark Billen
Joe has been building websites his whole life, and he now runs Corebyte Ltd, a small web development company in Southampton. This issue he shows you how to animate SVG elements with the power of CSS. Page 62
4 __________________________________________________experts
Mark is a freelance writer who has been writing about web design and technology for over 15 years. In this issue he takes a peek at some of the best-looking sites on the web and gives you a little insight into how they were made. Page 16
Kurtuldu and Lenton Mitch Lenton and Mustafa Kurtuldu combined to bring this issue’s look at mobile web options. Mitch is a digital product designer specialising in user experience and Mustafa is a design senior advocate at Google. Page 84
David Howell David is a journalist with over 20 years’ experience in publishing and runs his own business, Nexus Publishing. In this issue he takes time out to talk to the talented team at Birmingham-based agency IE Digital. Page 38
Follow us! Facebook: www.facebook.com/ WebDesignerUK Twitter: twitter.com/ webdesignermag
Advertising xƺƳǣƏȵƏƬǸɀƏȸƺƏɮƏǣǼƏƫǼƺȒȇȸƺȷɖƺɀɎ Commercial Director Clare Dove [email protected] Senior Advertising Manager Mike Pyatt ȅǣƬǝƏƺǼِȵɵƏɎɎ۬ǔɖɎɖȸƺȇƺɎِƬȒȅ 01225 687538 Account Director George Lucas [email protected] International Licensing áƺƫ(ƺɀǣǕȇƺȸǣɀƏɮƏǣǼƏƫǼƺǔȒȸǼǣƬƺȇɀǣȇǕِ!ȒȇɎƏƬɎɎǝƺnǣƬƺȇɀǣȇǕ ɎƺƏȅɎȒƳǣɀƬɖɀɀȵƏȸɎȇƺȸɀǝǣȵȒȵȵȒȸɎɖȇǣɎǣƺɀِ Head of Print Licensing Rachel Shaw [email protected] Subscriptions 0ȅƏǣǼƺȇȷɖǣȸǣƺɀ[email protected] ÈkȒȸƳƺȸǼǣȇƺۭƺȇȷɖǣȸǣƺɀ0344 848 2852 ɮƺȸɀƺƏɀȒȸƳƺȸǼǣȇƺƏȇƳƺȇȷɖǣȸǣƺɀ+44 (0) 344 848 2852 ȇǼǣȇƺȒȸƳƺȸɀۭƺȇȷɖǣȸǣƺɀwww.myfavouritemagazines.co.uk RƺƏƳȒǔɀɖƫɀƬȸǣȵɎǣȒȇɀSharon Todd Circulation Head of Newstrade Tim Mathers Production Head of Production Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby Digital Editions Controller Jason Hudson Production Manager Nola Cokely Management Brand Director Matthew Pierce !ǝǣƺǔ!ȒȇɎƺȇɎ ǔˡƬƺȸ Aaron Asadi !ȒȅȅƺȸƬǣƏǼIǣȇƏȇƬƺ(ǣȸƺƬɎȒȸ Dan Jotcham RƺƏƳȒǔȸɎۭ(ƺɀǣǕȇGreg Whittaker Printed byáǣǼǼǣƏȅJǣƫƫȒȇɀً¨זאǼƏȇƺɎƏȸɵ«ȒƏƳً Willenhall, WV13, 3XT Distributed by xƏȸǸƺɎǔȒȸƬƺً!דǝɖȸƬǝǣǼǼ¨ǼƏƬƺً!ƏȇƏȸɵáǝƏȸǔً London, E14 5HU www.marketforce.co.uk Tel: 0203 787 9001 ISSN 1745-3534 áƺƏȸƺƬȒȅȅǣɎɎƺƳɎȒȒȇǼɵɖɀǣȇǕȅƏǕƏɿǣȇƺȵƏȵƺȸɯǝǣƬǝǣɀƳƺȸǣɮƺƳǔȸȒȅ ȸƺɀȵȒȇɀǣƫǼɵȅƏȇƏǕƺƳًƬƺȸɎǣˡƺƳǔȒȸƺɀɎȸɵƏȇƳƬǝǼȒȸǣȇƺٮǔȸƺƺȅƏȇɖǔƏƬɎɖȸƺِ ÁǝƺȵƏȵƺȸǣȇɎǝǣɀȅƏǕƏɿǣȇƺɯƏɀɀȒɖȸƬƺƳƏȇƳȵȸȒƳɖƬƺƳǔȸȒȅɀɖɀɎƏǣȇƏƫǼƺ managed forests, conforming to strict environmental and socioeconomic ɀɎƏȇƳƏȸƳɀِÁǝƺȅƏȇɖǔƏƬɎɖȸǣȇǕȵƏȵƺȸȅǣǼǼǝȒǼƳɀǔɖǼǼI³!٢IȒȸƺɀɎ³ɎƺɯƏȸƳɀǝǣȵ !ȒɖȇƬǣǼ٣ƬƺȸɎǣˡƬƏɎǣȒȇƏȇƳƏƬƬȸƺƳǣɎƏɎǣȒȇ ǼǼƬȒȇɎƺȇɎɀ۰זאIɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳȒȸȵɖƫǼǣɀǝƺƳɖȇƳƺȸǼǣƬƺȇƬƺِǼǼ ȸǣǕǝɎɀȸƺɀƺȸɮƺƳِzȒȵƏȸɎȒǔɎǝǣɀȅƏǕƏɿǣȇƺȅƏɵƫƺɖɀƺƳًɀɎȒȸƺƳًɎȸƏȇɀȅǣɎɎƺƳȒȸ ȸƺȵȸȒƳɖƬƺƳǣȇƏȇɵɯƏɵɯǣɎǝȒɖɎɎǝƺȵȸǣȒȸɯȸǣɎɎƺȇȵƺȸȅǣɀɀǣȒȇȒǔɎǝƺȵɖƫǼǣɀǝƺȸِ IɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳ٢ƬȒȅȵƏȇɵȇɖȅƫƺȸדזזזא٣ǣɀȸƺǕǣɀɎƺȸƺƳǣȇ 0ȇǕǼƏȇƳƏȇƳáƏǼƺɀِ«ƺǕǣɀɎƺȸƺƳȒǔˡƬƺيªɖƏɵRȒɖɀƺًÁǝƺȅƫɖȸɵً ƏɎǝ ÈِǼǼǣȇǔȒȸȅƏɎǣȒȇƬȒȇɎƏǣȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇǣɀǔȒȸǣȇǔȒȸȅƏɎǣȒȇȒȇǼɵƏȇƳ ǣɀًƏɀǔƏȸƏɀɯƺƏȸƺƏɯƏȸƺًƬȒȸȸƺƬɎƏɎɎǝƺɎǣȅƺȒǔǕȒǣȇǕɎȒȵȸƺɀɀِIɖɎɖȸƺƬƏȇȇȒɎ ƏƬƬƺȵɎƏȇɵȸƺɀȵȒȇɀǣƫǣǼǣɎɵǔȒȸƺȸȸȒȸɀȒȸǣȇƏƬƬɖȸƏƬǣƺɀǣȇɀɖƬǝǣȇǔȒȸȅƏɎǣȒȇِçȒɖ ƏȸƺƏƳɮǣɀƺƳɎȒƬȒȇɎƏƬɎȅƏȇɖǔƏƬɎɖȸƺȸɀƏȇƳȸƺɎƏǣǼƺȸɀƳǣȸƺƬɎǼɵɯǣɎǝȸƺǕƏȸƳ ɎȒɎǝƺȵȸǣƬƺȒǔȵȸȒƳɖƬɎɀٖɀƺȸɮǣƬƺɀȸƺǔƺȸȸƺƳɎȒǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇِȵȵɀƏȇƳ ɯƺƫɀǣɎƺɀȅƺȇɎǣȒȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇƏȸƺȇȒɎɖȇƳƺȸȒɖȸƬȒȇɎȸȒǼِáƺƏȸƺ ȇȒɎȸƺɀȵȒȇɀǣƫǼƺǔȒȸɎǝƺǣȸƬȒȇɎƺȇɎɀȒȸƏȇɵȒɎǝƺȸƬǝƏȇǕƺɀȒȸɖȵƳƏɎƺɀɎȒɎǝƺȅِ ÁǝǣɀȅƏǕƏɿǣȇƺǣɀǔɖǼǼɵǣȇƳƺȵƺȇƳƺȇɎƏȇƳȇȒɎƏǔˡǼǣƏɎƺƳǣȇƏȇɵɯƏɵɯǣɎǝɎǝƺ ƬȒȅȵƏȇǣƺɀȅƺȇɎǣȒȇƺƳǝƺȸƺǣȇِ XǔɵȒɖɀɖƫȅǣɎȅƏɎƺȸǣƏǼɎȒɖɀًɵȒɖɯƏȸȸƏȇɎɎǝƏɎɵȒɖȒɯȇɎǝƺȅƏɎƺȸǣƏǼƏȇƳٖ ȒȸǝƏɮƺɎǝƺȇƺƬƺɀɀƏȸɵȸǣǕǝɎɀٖȵƺȸȅǣɀɀǣȒȇɀɎȒɀɖȵȵǼɵɎǝƺȅƏɎƺȸǣƏǼƏȇƳ ɵȒɖƏɖɎȒȅƏɎǣƬƏǼǼɵǕȸƏȇɎIɖɎɖȸƺƏȇƳǣɎɀǼǣƬƺȇɀƺƺɀƏǼǣƬƺȇƬƺɎȒȵɖƫǼǣɀǝ ɵȒɖȸɀɖƫȅǣɀɀǣȒȇǣȇɯǝȒǼƺȒȸǣȇȵƏȸɎǣȇƏȇɵٖƏǼǼǣɀɀɖƺɀƏȇƳٖȒȸƺƳǣɎǣȒȇɀȒǔ ȵɖƫǼǣƬƏɎǣȒȇɀًǣȇƏȇɵǔȒȸȅƏɎȵɖƫǼǣɀǝƺƳɯȒȸǼƳɯǣƳƺƏȇƳȒȇƏɀɀȒƬǣƏɎƺƳɯƺƫɀǣɎƺɀً ɀȒƬǣƏǼȅƺƳǣƏƬǝƏȇȇƺǼɀƏȇƳƏɀɀȒƬǣƏɎƺƳȵȸȒƳɖƬɎɀِȇɵȅƏɎƺȸǣƏǼɵȒɖɀɖƫȅǣɎ ǣɀɀƺȇɎƏɎɵȒɖȸȒɯȇȸǣɀǸƏȇƳًƏǼɎǝȒɖǕǝƺɮƺȸɵƬƏȸƺǣɀɎƏǸƺȇًȇƺǣɎǝƺȸIɖɎɖȸƺ ȇȒȸǣɎɀƺȅȵǼȒɵƺƺɀًƏǕƺȇɎɀًɀɖƫƬȒȇɎȸƏƬɎȒȸɀȒȸǼǣƬƺȇɀƺƺɀɀǝƏǼǼƫƺǼǣƏƫǼƺǔȒȸ ǼȒɀɀȒȸƳƏȅƏǕƺِáƺƏɀɀɖȅƺƏǼǼɖȇɀȒǼǣƬǣɎƺƳȅƏɎƺȸǣƏǼǣɀǔȒȸȵɖƫǼǣƬƏɎǣȒȇɖȇǼƺɀɀ ȒɎǝƺȸɯǣɀƺɀɎƏɎƺƳًƏȇƳȸƺɀƺȸɮƺɎǝƺȸǣǕǝɎɎȒƺƳǣɎًƏȅƺȇƳًƏƳƏȵɎƏǼǼɀɖƫȅǣɀɀǣȒȇɀِ
IɖɎɖȸƺȵǼƬǣɀƏȵɖƫǼǣƬ ƬȒȅȵƏȇɵȷɖȒɎƺƳȒȇɎǝƺ nȒȇƳȒȇ³ɎȒƬǸ0ɴƬǝƏȇǕƺ ٢ɀɵȅƫȒǼيIÈÁ«٣ www.futureplc.com
!ǝǣƺǔƺɴƺƬɖɎǣɮƺ Zillah Byng-Thorne zȒȇٮƺɴƺƬɖɎǣɮƺƬǝƏǣȸȅƏȇ Richard Huntingford !ǝǣƺǔˡȇƏȇƬǣƏǼȒǔˡƬƺȸ Penny Ladkin-Brand Tel גגڷ٢٣גגאאגגדאא
Meta
C ntents Inside issue 286
Cutting-edge features, techniques and inspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…
[email protected]
s
@WebDesignerMag swww.creativebloq.com
08 Digital trends 2019 Web Designer takes a look the Design Trends 2019 report from Adobe
11
Cover focus
How personal is personalisation? UX Director Damian Rees asks — does personalisation enhance or detract?
12
Webkit: The best must-try resources out there Discover the libraries and frameworks you need
16
Lightbox A showcase of inspirational sites and the techniques used to create them
30 Tribal quest Discover how makemepulse created a nomadic online experience filled with technical magic
36 Back issues Catch up on any issues of Web Designer that you’ve missed by downloading a digital edition
38 Design values IE Digital is building digital experiences that connect clients in the charity, health and education sectors. Find out more
46 35 Hot design tools An essential collection of tools for today’s designer. Discover the features and highlights to help build better designs
84 Go native Build better web apps with the help of PWAs, SPAs and performant design
46
92 Hosting Listings An extensive list of web hosting companies. Pick the perfect host for your needs
94 Course listings Want to start learning? Check out what courses are out there with this list
98 Next month See what’s in the next issue of Web Designer
6 ________________________________________________ contents
16
20
TUTORIALS
FILESILO 96 Get the latest must-have resources and videos
56 Build a voice controlled UI Find out how to use the new Speech Recognition API to convert speech to text
s "* %JDF BSU 1IPUPTIPQ BDUJPOT Inception-style Photoshop actions and 109 Abstract smoke art brushes from Sparklestock
62 Animate SVG with CSS Use the power of CSS to add dynamism to SVG designs
66 Code a fast, free site
56
Build with static site generator Jekyll, CMS Siteleaf and get free hosting with GitHub
70 Code smart text effects with CSS Introduce simple but creative type
72
Capture data with Redux How to use Redux to store and maintain the validation state of form data
78 Test your JavScript Finding the right JavaScript unit testing framework is not easy. Try easy-to-use Jest
66 Visit the Web Designer online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials
DIGITAL EDITION 70
72
Do you want to get your hands on a digital edition? Head to your preferred app store, download, install and purchase the issue of choice Google Play — bit.ly/2wetvGp iTunes — apple.co/2igtBYq
Subscribe today and save 38
bit.ly/2sGwB3h
contents _________________________________________________ 7
News CONTACT US AT: [email protected] | @WebDesignerMag
Header
The tools, trends and news to inspire your web projects
What are the digital trends coming your way? Adobe recently released its Digital Trends 2019 report. Web Designer takes a look.
D
ata, AI, CX and personalisation are all elements that can help build a brand, but how important are they? How can they help in 2019? Adobe’s report offers 49 pages of insight and information, and here, we pick out the highlights to enjoy and absorb. Over 12,500 marketers, creatives and IT professionals were surveyed for the report. Of these, over 55 per cent of marketers were going to prioritise better use of data, and all surveyed were looking to take greater control of customer privacy. Some of the key insights from the reports revealed this — ‘companies that are succeeding are delivering first-class, personalised customer experiences built on a foundation of integrated marketing and CX technology’. More interestingly, ‘the most dominant theme emerging from this year’s research is the importance of customer data’.
According to the report, larger organisations regard data-driven marketing focusing on the individual as the most exciting opportunity. Perhaps more exciting is the future of AI in the creative industry. The report states that ‘AI has gained significant traction in the last year, but there are still significant barriers preventing organisations from reaping the benefits’. Alongside the respondents that were excited about the prospects of AI, there were a smaller percentage who were cautious — and an even smaller percentage who were afraid and angry. But it seems there is some way to go in convincing many of the larger organisations surveyed. Several reasons were included — for some there was no perceived need, for others a lack of knowledge on how they can use AI, and some had yet to have assessed how they could use AI. Perhaps it’s time to jump onboard AI and discover the benefits.
So what else does the report tell us? Unsurprisingly, the right technology underpins success. “We have invested an increasing amount in building the right stack over the last couple of years. We’re using our dollars effectively, putting money towards the evolving media platforms that drive the most return, and leveraging data to make smart decisions,” Visa CMO Lynne Biggar said when interviewed for the report. The report reveals that almost two thirds of organisations have little to no cloud-based technology. Elsewhere, creatives — who were a greater portion of respondents than any other business function — state that ‘standout content and campaigns’ were the number one priority for 2019. Other areas that needed focus were ensuring high-quality experiences on any device or channel. Sadly, attracting and retaining creative talent wasn’t highly important for 2019. You can get the full report at https://adobe.ly/2NPe1z8
STAT ATTACK MOBILE SEARCH As expected, Google has top spot — but who comes next?
Google
95.20%
Everyone uses Google — well, almost…
Baidu
%
1.45
The most popular Chinese search engine
Yahoo
%
1.02
The once-massive search engine is still hanging on
Bing
0.82%
creativebloq.com In-depth tutorials, expert tips, cutting-edge features, industry interviews, inspiration and opinion. Make sure to get your daily dose of creativity, design and development.
Microsoft’s entry to search can’t match Google
Shenma
%
e today and save
44%
https://bit.ly/2qLxVl4
8 _____________________________________________________ news
0.33
A mobile-first search engine for China
Source: gs.statcounter.com (correct as of February 2019)
Header Inspiration
Sites of the month
02.
01.
03.
01. Les Ensembliers
04.
ensembliers.com No simple rollover effects here. Choose a link and admire the full-screen show.
02. Borraginol town borraginol.com/town Illustrated animations bring to life scenes with smart pop-ups for more information.
03. Oranjbitter oranjebitter-rotterdam.nl image-splitting kaleidoscope-style effects grab the users’ attention and keep them engaged.
04. Shallou allyourdays.com Animated text effects and subtle but smart image effects add ambience and interest.
Graphics
Colour picker
Typesetter
WordPress
bit.ly/2Hr6ntC
bit.ly/2EVaYBc
bit.ly/2THCCLr
janice.neptunetheme.com
The classic tall font now has lower case
A clean, simple classic blog style with
characters, making it even more desirable
plenty of home page layout options.
OZ
Blooming brilliant
Freelancer illustrator André Ducci has a style that is hard to resist. Check out his gorgeous illustrations.
#CFC9A9
Bebas Neue Pro
Janice
than before.
#A1AB90
#768DEA
#7866D4
#434A74
inspiration ______________________________________________9
HEAR FROM THE PROS SIGN UP TO THE
NEWSLETTER TODAY!
Get weekly news, tips & inspiration
SIGN UP NOW! bit.ly/2KI5b7Y
Header Comment
How personal is personalisation? Does personalisation enhance or detract from the user experience?
A
Damian Rees Founder & UX director experienceux.co.uk
It’s easy to see why there’s a high demand for personalisation. But, the reason all of these examples work, is because the context of use matches the user need and the design intent
h, personalisation, a mainstay of most digital project briefs. Ubiquitous in the agency world and almost as misunderstood as UX itself. Ask anyone working in a digital agency what it is and you’ll likely get a nod of recognition but difficulty in pinning it down. All they know is the client wants it, so they’re delivering it. I believe that personalisation is something designed and implemented by the website, app or software — as opposed to customisation, which is a set of choices given to users to personalise their own experience. So why is personalisation regularly on the agenda? Is it something that users expect? Or is it simply that personalisation works? When you dig deeper into the topic, it becomes clear that it isn’t a given and it doesn’t always work. In fact it can have a negative impact on the user experience. Let’s explore the reason it’s so popular lately. Done well, personalisation can provide a streamlined experience, allowing users to cut through irrelevant content. It can reduce cognitive load and decision fatigue by only showing useful information and choices. Take for example Thread, where users input personal information such as clothing sizes, body shape, and style. Thread then cuts out anything that doesn’t fit, literally, to serve up a streamlined, personalised fashion experience. As well as improving the user experience, good personalisation can make an encounter more immersive. The Xbox racing game Forza populates the racetrack with AI cars that use game data from friends’ driving performances to create their own ‘drivatars’. So, rather than driving against randoms, it feels like I’m racing against (and beating!) my friends, even though they’re not currently playing with me. It’s easy to see why there’s a high demand for personalisation. But the reason all of these examples work is because the context of use matches the user need and the design intent. They’re designed specifically to enhance user experience and assist in reaching goals better, faster or more enjoyably. Often, the true intent of personalisation is simply to sell more. It’s to satisfy a business need, rather than a user-led need. Or, it is implemented poorly and doesn’t account for the complexities of human behaviour. Netflix is touted as a great example of personalisation. But is it? I find it frustrating. If I watch one comedy, afterwards that’s all I’m recommended. The personalisation algorithm simplifies my complex interests down to my history of previous clicks. Very has stated a desire to become ‘the world’s best personalised shopping experience’. How does this vision manifest? If you visit their website and look at Ted Baker clothing, all you’ll see is Ted Baker products on the homepage when you return. Is that really the best we can do? Reducing complex human beings down to their last set of choices as an accurate prediction of what they want seems short-sighted. It’s the equivalent of walking into a bookstore and all the shelves being covered up except for cookery books because I watched an episode of MasterChef recently. I am all for personalisation, for the right reasons. But when it becomes an add-on to every project in a desperate need to keep up with the Jones’ there’s very little value in it. I believe it is your job as a designer of digital experiences to question these personalisation briefs. Why is it required? What’s the business case? What’s the user need? What do we mean by personalisation? How can we really enhance the user experience? If you’re not satisfied by the answers, take a stand. If you don’t, who will?
comment ______________________________________________ 11
webkit
Glide glideapps.com
Discover the must-try resources that will make your site a better place
Do you want to quickly build an app that is free, as well as easy to customise and share? Glide uses data — specifically a spreadsheet — as the basis for the creation of an app.
To get started with a new app, simply sign in with your Google account, then select a sheet from your Google Drive, and you’re well on your way to building an app.
HTML Graph
Character design
codepen.io/YusukeNakaya/pen/vvPqeZ
codepen.io/akhil_001/pen/xBLeme
A simple animated pie chart graph that reminds us of Pacman. Makes good use of the transform and animation properties. Modify to get different animations.
Built with CSS variables, the cute character’s colour can be changed to suit your hearts desire. Click and choose another colour to suit your taste.
TOP 5
Codepens
Be inspired for your next project by these codebases
12 _____________________________________________ resources
Header Resources CONTACT US AT: [email protected] | @WebDesignerMag
iro.js
Handtrack.js
iro.js.org
victordibia.github.io/handtrack.js/#
A low friction API that offers support for hex, rgb, hsl and hsv colour formats. Simply move the controllers to select a colour and copy the code.
This library allows for prototyping realtime hand detection within the browser. Try out the demo and play with the threshold or see the library in action.
Boilerform
Animated CSS burger
boilerform.design
march08.github.io/animated-burgers
This is a HTML and CSS boilerplate to help take the pain away from working with forms. Check out the pattern library to see the different input options and copy the code.
Browse this small selection of animated burger menu options, and find the one you would like to use in your project. Get the HTML/CSS or code for React.
Tribute to Ken Perlin #3
Pseudo 3D text
PICKER RING
codepen.io/soju22/pen/ywXrQx
codepen.io/funxer/pen/KBmRoZ
codepen.io/rpsthecoder/pen/PLbmyN
A shifting ball of circles and bubbles that allows users to interact with the cursor. A host of controls are available to customise the appearance.
A floating, dot-matrix style 3D text that slowly moves around and hypnotises the user. Add your own, and then run it to see the new text in action.
A colourful icon-driven selector that looks great, and is also really simple to use too. Drag the red arrow to the preferred option to see the title change.
resources ______________________________________________13
24 – 25 APRIL 2019 BOOK YOUR TICKET www.generateconf.com
INTERESTED IN SPONSORING GENERATE? Please contact Michael Pyatt, Advertising Manager [email protected] | + 44 (0)122 568 7538
Brought to you by
Combining the authority of net magazine, Creative Bloq and Web Designer magazine, this unmissable event brings together a community of like-minded individuals, comprising of web designers, web developers, graphic designers and creative minds for two days of education, inspiration and networking. 2019 Speakers and Sessions Include Josh Clark Keynote AI is your new design material
Miriam Suzanne Workshop Advanced CSS for Modern Applications Dynamic CSS: Layouts & Beyond
Jim Kalbach Workshop Design & Innovation Sprints
Sophia Prater Workshop Object-Oriented UX: Simplify your pixels and your process UX for Lizard Brains
Sam Richard Design System Magic with Houdini
And many more!
www.generateconf.com
#generateconf
DGTL.TRI
Designer:
tri.redcollar.digital
16 ������������������������������������������������ lightbox
Red Collar redcollar.digital
LightBox
Red Collar promotes a series of web design and development workshops and talks with this eye-catching digital flyer
Colours
#F3130B
#F5B509
#3873FF
#E5E7E5
Tools Three.js, GSAP, Skrollr
Fonts
Montserrat Medium and Black fonts, designed by Julieta Ulanovsky and available via Google Fonts is used exclusively throughout the site.
lightbox�������������������������������������������������17
Above
Heads of the various invited speakers are swapped in when the pointer hovers on each scheduled talk. Below
The colour theme of blue, red and yellow is central, with the browser filled at the scroll mid-point. Bottom
As the single page scrolls vertically, a series of themed animations are drawn from the fly motif below.
18 ________________________________________________ lightbox
LightBox g DGTL.TRI
Create an interactive text fuzz effect Make use of the CSS hover selector for applying a fuzz animation to hovered text 1. Initiate HTML document The first step is to initiate the HTML document. This consists of a container for the HTML which is used to store the head and body sections. While the head section includes the external CSS and Javascript files, the body section will be used to store the visible content created in step 2.Fuzz <script src='code.js' type='text/ javascript'> *** STEP 2 HERE
using the 'fuzz' class. Each element found is referenced by a 'for' loop to apply the code defined in step 4. window.addEventListener('load',function(){ var nodes = document.querySelectorAll('. fuzz'); for(var i=0; i<nodes.length; i++){ *** STEP 4 HERE } });
4. Javascript: text clone Each item found in step 3 will have a replica of its text content inserted. This step creates the container for this text, as well as copying the text into this element and inserting it into the parent element. The copied element will be used later by the CSS as the fuzz effect. var newNode = document.createElement('span'); newNode.innerText = nodes[i].innerText; nodes[i].appendChild(newNode);
2. Body content
5. CSS: fuzz elements
The visible page content consists of three heading tags that each have the 'fuzz' class applied to them. Additionally, two of the headings have an additional colour class, which will be used to apply further properties that complement the standard fuzz settings. While headings are used in this example, the effect will work with any element type.
Create a new file called 'styles.css'. This step sets the parent fuzz element to use relative positioning, with the child element created in step 4 to use absolute positioning placed in the top left corner. The child element is also set with a default colour and invisible opacity by default.
3. Javascript: search Create a new file called 'code.js'. This step tells the browser to wait until the page has loaded, upon which an instruction is set to search the page for elements
.fuzz{ position: relative; } .fuzz > *{ position: absolute; top: 0; left: 0; opacity: 0; text shadow: 0 0 10px rgba(0,0,0,1); }
6. Hover interactions Two alterations are required when a hover interaction is detected over the fuzz elements. While the parent has opacity set to display with semi-transparency, the child element is set to trigger the 'fuzzAnim' animation. This animation is set to last three seconds, repeating infinitely until the parent element is no longer hovered. .fuzz:hover{ opacity: .5; } .fuzz:hover > *{ animation: fuzzAnim 3s linear infinite; }
7. Fuzz colours Elements using the colour classes will have some additional settings applied. Firstly, the parent element needs to have a colour defined for its text,. Secondly, the child element created in step 5 needs an updated colour for the defined text shadow used for the fuzz effect. Other colours can be set using the same combination of settings. .fuzz.red{ color: red; } .fuzz.red > *{ text shadow: 0 0 15px red; } .fuzz.blue{ color: blue; } .fuzz.blue > *{ text shadow: 0 0 15px blue; }
8. Fuzz animation The animation referenced in step 6 is defined using the keyframes feature. This step defines the properties at specific points throughout the animation. Movement is controlled using margin positioning. As animation transitions are automatically handled by the browser, but with a requirement to snap movement, specific frames are applied to keep the elements in position when required. @keyframes fuzzAnim { 0%{margin: 0; opacity: 0;} 1%{margin left: .5em; opacity: 1;} 25%{margin left: .5em; opacity: 1;} 26%{margin: 0; opacity: 0;} 50%{margin top: 0; opacity: 0;} 51%{margin top: .25em; opacity: 1;} 75%{margin top: .25em; opacity: 1;} 76%{margin top: 0; opacity: 0;} 100%{margin: 0;} }
lightbox________________________________________________ 19
2019 wishes
20 _______________________________________________ lightbox
Designer:
2019.lesanimals.digital/en
Les Animals lesanimals.digital
LightBox
Lyon —based digital studio Les Animals ushered in 2019 with a beautiful interactive New Year card celebrating space.
Colours
#18605C
#CC9495
#7A5539
#FFFDB6
Tools WebGL, GSAP, Matter.js
Fonts
Catamaran font designed by Pria Ravichandran, available through Google Fonts, is used in Bold across the most prominent headings.
Roboto font by Christian Robertson, also available via Google Fonts, is used in Light and Black varieties on text.
1
I
oe li a B ild ites
r at
FOR TODAY’S DESIGNER
ll Si el a a Git ub
ISSUE 286
ow
t l
i hs a i a r S c Re og itio A I
Meta Welcome
Welcome THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cuttingedge features and techniques vital to building future-proof online content
Y
Steven Jenkins Editor
Tools you can trust
ou need to design a new site and app for your latest client. What tools are you going to use? Every designer has their go-to collection, but there are always new tools and frameworks appearing on the web that will make your design life easier and more productive. As the web evolves, so should your arsenal of tools. This issue we bring you a host of the latest, greatest and newest tools that you should add to you current collection. Carl Cahill (page 46) has put together a list that will improve any designer’s workflow. Included in the lineup are some big hitters. Check the new features, and find a host of tools that you might well never heard of — but you will be glad you have after
Highlight
trying them out. Whatever type of designer you are, we can guarantee you will find something to add to your creative collection. Building great mobile user experiences needs the right tools, but tools are not the complete picture. We take a closer look (page 84) at how PWA’s (Progressive Web Apps), SPA (Single Page Apps) and Performant Design can combine to help you build a native-like web experience. Plus, we have tutorials on how to build a free dynamic site fast with the help of static site generator Jekyll, CMS Siteleaf, and use Github to host the site for free. Learn how to use the Speech Recognition API to allow users to input text into forms via voice, and animate SVG with CSS and more. Enjoy.
“
PWAs & SPAs give developers the capability to elevate web performance, while Performant Design gives designers the tools to craft engaging app-like user experiences
”
“
A digital consultant kicks off the project and helps to define what success looks like
”
IE Digitial has been around since 1994, and is still going strong 25 years later. Web Designer decided we needed to talk to them
Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.creativebloq.com
FREE – with your latest issue
143
Designerresources Asset s – 24 AI Dice Art Photoshop actions and 10 Inception Photoshop actionsfromSparklestock(bothworth$14) – 109 Abstract Smoke art brushes from Sparklestock (worth $6) – Tutorial files and assets
www.filesilo.co.uk/webdesigner welcome ________________________________________________ 3
Meta Contributors Future PLC Richmond House, 33 Richmond Hill, Bournemouth, Dorset, BH2 6EZ
Editorial Editor Steve Jenkins
This issue’s panel of experts Welcome to that bit of the mag where we learn more about the featured writers and contributors…
[email protected] 01202 586233
Art Editor Andy Salter Acting Editor in Chief Claire Howlett Senior Art Editor Will Shum Production Editor Elizabeth Wood Contributors Damian Rees, Mark Billen, Leon Brown, David Howell, !ƏȸǼ!ƏǝǣǼǼًxƏȸǸ³ǝɖǔˢƺƫȒɎɎȒȅًhȒɀƺȵǝIȒȸƳً³ɖɀǝkƺǼǼɵً xƏɎɎ!ȸȒɖƬǝًÁƏȅRƏȇȇƏًxɖɀɎƏǔƏkɖȸɎɖǼƳɖًxǣɎƬǝnƺȇɎȒȇ Cover Images ɯɯɯِǕȸƏȵǝǣƬƳȒȅƺِƬȒȅًɯɯɯِɎƺɴɎɖȸƺɀِƬȒȅ Photography hƏȅƺɀ³ǝƺȵȵƏȸƳ ǼǼƬȒȵɵȸǣǕǝɎɀƏȇƳɎȸƏƳƺȅƏȸǸɀƏȸƺȸƺƬȒǕȇǣɀƺƳƏȇƳȸƺɀȵƺƬɎƺƳ
Carl Cahill Carl Cahill is an awardwinning creative. Formerly creative director at digital agencies, Carl has won a plethora of industry accolades including Creative of the Year at the Wirehive Awards. This issue, he reveals the latest features of the big-hitter design tools, and a collection that you need to try today. Page 46
Finding the right tool is not so much about your own “skill level but what your project needs. Be comfortable with a variety of tools, and know their feature strengths ” Matt Crouch
Mark Shufflebottom
Matt is a software engineer at Vidsy. In the final part of his React Redux series, he takes a look at how Redux Form provides a framework for producing complex forms with validation and formatting hooks. Page 72
Tam Hanna
Mark is a professor of Interaction Design at Sheridan College. Mark is exploring the latest Speech Recognition API in order to create new ways of inputting text content into forms by converting your voice to text. Page 56
Sush Kelly
Tam is haunted by his experiences working on avionics where a single mistake can end careers. He considers unit testing of paramount importance, and always has an eye open for new frameworks. This issue it’s Jest. Page 78
Joseph Ford
Making a choice on what blogging platform to use can be tough. Sush Kelly — freelance developer — shows you how you can combine GitHub, Jekyll and Siteleaf to produce a fast and free content managed website. Page 66
Mark Billen
Joe has been building websites his whole life, and he now runs Corebyte Ltd, a small web development company in Southampton. This issue he shows you how to animate SVG elements with the power of CSS. Page 62
4 __________________________________________________experts
Mark is a freelance writer who has been writing about web design and technology for over 15 years. In this issue he takes a peek at some of the best-looking sites on the web and gives you a little insight into how they were made. Page 16
Kurtuldu and Lenton Mitch Lenton and Mustafa Kurtuldu combined to bring this issue’s look at mobile web options. Mitch is a digital product designer specialising in user experience and Mustafa is a design senior advocate at Google. Page 84
David Howell David is a journalist with over 20 years’ experience in publishing and runs his own business, Nexus Publishing. In this issue he takes time out to talk to the talented team at Birmingham-based agency IE Digital. Page 38
Follow us! Facebook: www.facebook.com/ WebDesignerUK Twitter: twitter.com/ webdesignermag
Advertising xƺƳǣƏȵƏƬǸɀƏȸƺƏɮƏǣǼƏƫǼƺȒȇȸƺȷɖƺɀɎ Commercial Director Clare Dove [email protected] Senior Advertising Manager Mike Pyatt ȅǣƬǝƏƺǼِȵɵƏɎɎ۬ǔɖɎɖȸƺȇƺɎِƬȒȅ 01225 687538 Account Director George Lucas [email protected] International Licensing áƺƫ(ƺɀǣǕȇƺȸǣɀƏɮƏǣǼƏƫǼƺǔȒȸǼǣƬƺȇɀǣȇǕِ!ȒȇɎƏƬɎɎǝƺnǣƬƺȇɀǣȇǕ ɎƺƏȅɎȒƳǣɀƬɖɀɀȵƏȸɎȇƺȸɀǝǣȵȒȵȵȒȸɎɖȇǣɎǣƺɀِ Head of Print Licensing Rachel Shaw [email protected] Subscriptions 0ȅƏǣǼƺȇȷɖǣȸǣƺɀ[email protected] ÈkȒȸƳƺȸǼǣȇƺۭƺȇȷɖǣȸǣƺɀ0344 848 2852 ɮƺȸɀƺƏɀȒȸƳƺȸǼǣȇƺƏȇƳƺȇȷɖǣȸǣƺɀ+44 (0) 344 848 2852 ȇǼǣȇƺȒȸƳƺȸɀۭƺȇȷɖǣȸǣƺɀwww.myfavouritemagazines.co.uk RƺƏƳȒǔɀɖƫɀƬȸǣȵɎǣȒȇɀSharon Todd Circulation Head of Newstrade Tim Mathers Production Head of Production Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby Digital Editions Controller Jason Hudson Production Manager Nola Cokely Management Brand Director Matthew Pierce !ǝǣƺǔ!ȒȇɎƺȇɎ ǔˡƬƺȸ Aaron Asadi !ȒȅȅƺȸƬǣƏǼIǣȇƏȇƬƺ(ǣȸƺƬɎȒȸ Dan Jotcham RƺƏƳȒǔȸɎۭ(ƺɀǣǕȇGreg Whittaker Printed byáǣǼǼǣƏȅJǣƫƫȒȇɀً¨זאǼƏȇƺɎƏȸɵ«ȒƏƳً Willenhall, WV13, 3XT Distributed by xƏȸǸƺɎǔȒȸƬƺً!דǝɖȸƬǝǣǼǼ¨ǼƏƬƺً!ƏȇƏȸɵáǝƏȸǔً London, E14 5HU www.marketforce.co.uk Tel: 0203 787 9001 ISSN 1745-3534 áƺƏȸƺƬȒȅȅǣɎɎƺƳɎȒȒȇǼɵɖɀǣȇǕȅƏǕƏɿǣȇƺȵƏȵƺȸɯǝǣƬǝǣɀƳƺȸǣɮƺƳǔȸȒȅ ȸƺɀȵȒȇɀǣƫǼɵȅƏȇƏǕƺƳًƬƺȸɎǣˡƺƳǔȒȸƺɀɎȸɵƏȇƳƬǝǼȒȸǣȇƺٮǔȸƺƺȅƏȇɖǔƏƬɎɖȸƺِ ÁǝƺȵƏȵƺȸǣȇɎǝǣɀȅƏǕƏɿǣȇƺɯƏɀɀȒɖȸƬƺƳƏȇƳȵȸȒƳɖƬƺƳǔȸȒȅɀɖɀɎƏǣȇƏƫǼƺ managed forests, conforming to strict environmental and socioeconomic ɀɎƏȇƳƏȸƳɀِÁǝƺȅƏȇɖǔƏƬɎɖȸǣȇǕȵƏȵƺȸȅǣǼǼǝȒǼƳɀǔɖǼǼI³!٢IȒȸƺɀɎ³ɎƺɯƏȸƳɀǝǣȵ !ȒɖȇƬǣǼ٣ƬƺȸɎǣˡƬƏɎǣȒȇƏȇƳƏƬƬȸƺƳǣɎƏɎǣȒȇ ǼǼƬȒȇɎƺȇɎɀ۰זאIɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳȒȸȵɖƫǼǣɀǝƺƳɖȇƳƺȸǼǣƬƺȇƬƺِǼǼ ȸǣǕǝɎɀȸƺɀƺȸɮƺƳِzȒȵƏȸɎȒǔɎǝǣɀȅƏǕƏɿǣȇƺȅƏɵƫƺɖɀƺƳًɀɎȒȸƺƳًɎȸƏȇɀȅǣɎɎƺƳȒȸ ȸƺȵȸȒƳɖƬƺƳǣȇƏȇɵɯƏɵɯǣɎǝȒɖɎɎǝƺȵȸǣȒȸɯȸǣɎɎƺȇȵƺȸȅǣɀɀǣȒȇȒǔɎǝƺȵɖƫǼǣɀǝƺȸِ IɖɎɖȸƺ¨ɖƫǼǣɀǝǣȇǕnǣȅǣɎƺƳ٢ƬȒȅȵƏȇɵȇɖȅƫƺȸדזזזא٣ǣɀȸƺǕǣɀɎƺȸƺƳǣȇ 0ȇǕǼƏȇƳƏȇƳáƏǼƺɀِ«ƺǕǣɀɎƺȸƺƳȒǔˡƬƺيªɖƏɵRȒɖɀƺًÁǝƺȅƫɖȸɵً ƏɎǝ ÈِǼǼǣȇǔȒȸȅƏɎǣȒȇƬȒȇɎƏǣȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇǣɀǔȒȸǣȇǔȒȸȅƏɎǣȒȇȒȇǼɵƏȇƳ ǣɀًƏɀǔƏȸƏɀɯƺƏȸƺƏɯƏȸƺًƬȒȸȸƺƬɎƏɎɎǝƺɎǣȅƺȒǔǕȒǣȇǕɎȒȵȸƺɀɀِIɖɎɖȸƺƬƏȇȇȒɎ ƏƬƬƺȵɎƏȇɵȸƺɀȵȒȇɀǣƫǣǼǣɎɵǔȒȸƺȸȸȒȸɀȒȸǣȇƏƬƬɖȸƏƬǣƺɀǣȇɀɖƬǝǣȇǔȒȸȅƏɎǣȒȇِçȒɖ ƏȸƺƏƳɮǣɀƺƳɎȒƬȒȇɎƏƬɎȅƏȇɖǔƏƬɎɖȸƺȸɀƏȇƳȸƺɎƏǣǼƺȸɀƳǣȸƺƬɎǼɵɯǣɎǝȸƺǕƏȸƳ ɎȒɎǝƺȵȸǣƬƺȒǔȵȸȒƳɖƬɎɀٖɀƺȸɮǣƬƺɀȸƺǔƺȸȸƺƳɎȒǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇِȵȵɀƏȇƳ ɯƺƫɀǣɎƺɀȅƺȇɎǣȒȇƺƳǣȇɎǝǣɀȵɖƫǼǣƬƏɎǣȒȇƏȸƺȇȒɎɖȇƳƺȸȒɖȸƬȒȇɎȸȒǼِáƺƏȸƺ ȇȒɎȸƺɀȵȒȇɀǣƫǼƺǔȒȸɎǝƺǣȸƬȒȇɎƺȇɎɀȒȸƏȇɵȒɎǝƺȸƬǝƏȇǕƺɀȒȸɖȵƳƏɎƺɀɎȒɎǝƺȅِ ÁǝǣɀȅƏǕƏɿǣȇƺǣɀǔɖǼǼɵǣȇƳƺȵƺȇƳƺȇɎƏȇƳȇȒɎƏǔˡǼǣƏɎƺƳǣȇƏȇɵɯƏɵɯǣɎǝɎǝƺ ƬȒȅȵƏȇǣƺɀȅƺȇɎǣȒȇƺƳǝƺȸƺǣȇِ XǔɵȒɖɀɖƫȅǣɎȅƏɎƺȸǣƏǼɎȒɖɀًɵȒɖɯƏȸȸƏȇɎɎǝƏɎɵȒɖȒɯȇɎǝƺȅƏɎƺȸǣƏǼƏȇƳٖ ȒȸǝƏɮƺɎǝƺȇƺƬƺɀɀƏȸɵȸǣǕǝɎɀٖȵƺȸȅǣɀɀǣȒȇɀɎȒɀɖȵȵǼɵɎǝƺȅƏɎƺȸǣƏǼƏȇƳ ɵȒɖƏɖɎȒȅƏɎǣƬƏǼǼɵǕȸƏȇɎIɖɎɖȸƺƏȇƳǣɎɀǼǣƬƺȇɀƺƺɀƏǼǣƬƺȇƬƺɎȒȵɖƫǼǣɀǝ ɵȒɖȸɀɖƫȅǣɀɀǣȒȇǣȇɯǝȒǼƺȒȸǣȇȵƏȸɎǣȇƏȇɵٖƏǼǼǣɀɀɖƺɀƏȇƳٖȒȸƺƳǣɎǣȒȇɀȒǔ ȵɖƫǼǣƬƏɎǣȒȇɀًǣȇƏȇɵǔȒȸȅƏɎȵɖƫǼǣɀǝƺƳɯȒȸǼƳɯǣƳƺƏȇƳȒȇƏɀɀȒƬǣƏɎƺƳɯƺƫɀǣɎƺɀً ɀȒƬǣƏǼȅƺƳǣƏƬǝƏȇȇƺǼɀƏȇƳƏɀɀȒƬǣƏɎƺƳȵȸȒƳɖƬɎɀِȇɵȅƏɎƺȸǣƏǼɵȒɖɀɖƫȅǣɎ ǣɀɀƺȇɎƏɎɵȒɖȸȒɯȇȸǣɀǸƏȇƳًƏǼɎǝȒɖǕǝƺɮƺȸɵƬƏȸƺǣɀɎƏǸƺȇًȇƺǣɎǝƺȸIɖɎɖȸƺ ȇȒȸǣɎɀƺȅȵǼȒɵƺƺɀًƏǕƺȇɎɀًɀɖƫƬȒȇɎȸƏƬɎȒȸɀȒȸǼǣƬƺȇɀƺƺɀɀǝƏǼǼƫƺǼǣƏƫǼƺǔȒȸ ǼȒɀɀȒȸƳƏȅƏǕƺِáƺƏɀɀɖȅƺƏǼǼɖȇɀȒǼǣƬǣɎƺƳȅƏɎƺȸǣƏǼǣɀǔȒȸȵɖƫǼǣƬƏɎǣȒȇɖȇǼƺɀɀ ȒɎǝƺȸɯǣɀƺɀɎƏɎƺƳًƏȇƳȸƺɀƺȸɮƺɎǝƺȸǣǕǝɎɎȒƺƳǣɎًƏȅƺȇƳًƏƳƏȵɎƏǼǼɀɖƫȅǣɀɀǣȒȇɀِ
IɖɎɖȸƺȵǼƬǣɀƏȵɖƫǼǣƬ ƬȒȅȵƏȇɵȷɖȒɎƺƳȒȇɎǝƺ nȒȇƳȒȇ³ɎȒƬǸ0ɴƬǝƏȇǕƺ ٢ɀɵȅƫȒǼيIÈÁ«٣ www.futureplc.com
!ǝǣƺǔƺɴƺƬɖɎǣɮƺ Zillah Byng-Thorne zȒȇٮƺɴƺƬɖɎǣɮƺƬǝƏǣȸȅƏȇ Richard Huntingford !ǝǣƺǔˡȇƏȇƬǣƏǼȒǔˡƬƺȸ Penny Ladkin-Brand Tel גגڷ٢٣גגאאגגדאא
Meta
C ntents Inside issue 286
Cutting-edge features, techniques and inspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…
[email protected]
s
@WebDesignerMag swww.creativebloq.com
08 Digital trends 2019 Web Designer takes a look the Design Trends 2019 report from Adobe
11
Cover focus
How personal is personalisation? UX Director Damian Rees asks — does personalisation enhance or detract?
12
Webkit: The best must-try resources out there Discover the libraries and frameworks you need
16
Lightbox A showcase of inspirational sites and the techniques used to create them
30 Tribal quest Discover how makemepulse created a nomadic online experience filled with technical magic
36 Back issues Catch up on any issues of Web Designer that you’ve missed by downloading a digital edition
38 Design values IE Digital is building digital experiences that connect clients in the charity, health and education sectors. Find out more
46 35 Hot design tools An essential collection of tools for today’s designer. Discover the features and highlights to help build better designs
84 Go native Build better web apps with the help of PWAs, SPAs and performant design
46
92 Hosting Listings An extensive list of web hosting companies. Pick the perfect host for your needs
94 Course listings Want to start learning? Check out what courses are out there with this list
98 Next month See what’s in the next issue of Web Designer
6 ________________________________________________ contents
16
20
TUTORIALS
FILESILO 96 Get the latest must-have resources and videos
56 Build a voice controlled UI Find out how to use the new Speech Recognition API to convert speech to text
s "* %JDF BSU 1IPUPTIPQ BDUJPOT Inception-style Photoshop actions and 109 Abstract smoke art brushes from Sparklestock
62 Animate SVG with CSS Use the power of CSS to add dynamism to SVG designs
66 Code a fast, free site
56
Build with static site generator Jekyll, CMS Siteleaf and get free hosting with GitHub
70 Code smart text effects with CSS Introduce simple but creative type
72
Capture data with Redux How to use Redux to store and maintain the validation state of form data
78 Test your JavScript Finding the right JavaScript unit testing framework is not easy. Try easy-to-use Jest
66 Visit the Web Designer online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials
DIGITAL EDITION 70
72
Do you want to get your hands on a digital edition? Head to your preferred app store, download, install and purchase the issue of choice Google Play — bit.ly/2wetvGp iTunes — apple.co/2igtBYq
Subscribe today and save 38
bit.ly/2sGwB3h
contents _________________________________________________ 7
News CONTACT US AT: [email protected] | @WebDesignerMag
Header
The tools, trends and news to inspire your web projects
What are the digital trends coming your way? Adobe recently released its Digital Trends 2019 report. Web Designer takes a look.
D
ata, AI, CX and personalisation are all elements that can help build a brand, but how important are they? How can they help in 2019? Adobe’s report offers 49 pages of insight and information, and here, we pick out the highlights to enjoy and absorb. Over 12,500 marketers, creatives and IT professionals were surveyed for the report. Of these, over 55 per cent of marketers were going to prioritise better use of data, and all surveyed were looking to take greater control of customer privacy. Some of the key insights from the reports revealed this — ‘companies that are succeeding are delivering first-class, personalised customer experiences built on a foundation of integrated marketing and CX technology’. More interestingly, ‘the most dominant theme emerging from this year’s research is the importance of customer data’.
According to the report, larger organisations regard data-driven marketing focusing on the individual as the most exciting opportunity. Perhaps more exciting is the future of AI in the creative industry. The report states that ‘AI has gained significant traction in the last year, but there are still significant barriers preventing organisations from reaping the benefits’. Alongside the respondents that were excited about the prospects of AI, there were a smaller percentage who were cautious — and an even smaller percentage who were afraid and angry. But it seems there is some way to go in convincing many of the larger organisations surveyed. Several reasons were included — for some there was no perceived need, for others a lack of knowledge on how they can use AI, and some had yet to have assessed how they could use AI. Perhaps it’s time to jump onboard AI and discover the benefits.
So what else does the report tell us? Unsurprisingly, the right technology underpins success. “We have invested an increasing amount in building the right stack over the last couple of years. We’re using our dollars effectively, putting money towards the evolving media platforms that drive the most return, and leveraging data to make smart decisions,” Visa CMO Lynne Biggar said when interviewed for the report. The report reveals that almost two thirds of organisations have little to no cloud-based technology. Elsewhere, creatives — who were a greater portion of respondents than any other business function — state that ‘standout content and campaigns’ were the number one priority for 2019. Other areas that needed focus were ensuring high-quality experiences on any device or channel. Sadly, attracting and retaining creative talent wasn’t highly important for 2019. You can get the full report at https://adobe.ly/2NPe1z8
STAT ATTACK MOBILE SEARCH As expected, Google has top spot — but who comes next?
95.20%
Everyone uses Google — well, almost…
Baidu
%
1.45
The most popular Chinese search engine
Yahoo
%
1.02
The once-massive search engine is still hanging on
Bing
0.82%
creativebloq.com In-depth tutorials, expert tips, cutting-edge features, industry interviews, inspiration and opinion. Make sure to get your daily dose of creativity, design and development.
Microsoft’s entry to search can’t match Google
Shenma
%
e today and save
44%
https://bit.ly/2qLxVl4
8 _____________________________________________________ news
0.33
A mobile-first search engine for China
Source: gs.statcounter.com (correct as of February 2019)
Header Inspiration
Sites of the month
02.
01.
03.
01. Les Ensembliers
04.
ensembliers.com No simple rollover effects here. Choose a link and admire the full-screen show.
02. Borraginol town borraginol.com/town Illustrated animations bring to life scenes with smart pop-ups for more information.
03. Oranjbitter oranjebitter-rotterdam.nl image-splitting kaleidoscope-style effects grab the users’ attention and keep them engaged.
04. Shallou allyourdays.com Animated text effects and subtle but smart image effects add ambience and interest.
Graphics
Colour picker
Typesetter
WordPress
bit.ly/2Hr6ntC
bit.ly/2EVaYBc
bit.ly/2THCCLr
janice.neptunetheme.com
The classic tall font now has lower case
A clean, simple classic blog style with
characters, making it even more desirable
plenty of home page layout options.
OZ
Blooming brilliant
Freelancer illustrator André Ducci has a style that is hard to resist. Check out his gorgeous illustrations.
#CFC9A9
Bebas Neue Pro
Janice
than before.
#A1AB90
#768DEA
#7866D4
#434A74
inspiration ______________________________________________9
HEAR FROM THE PROS SIGN UP TO THE
NEWSLETTER TODAY!
Get weekly news, tips & inspiration
SIGN UP NOW! bit.ly/2KI5b7Y
Header Comment
How personal is personalisation? Does personalisation enhance or detract from the user experience?
A
Damian Rees Founder & UX director experienceux.co.uk
It’s easy to see why there’s a high demand for personalisation. But, the reason all of these examples work, is because the context of use matches the user need and the design intent
h, personalisation, a mainstay of most digital project briefs. Ubiquitous in the agency world and almost as misunderstood as UX itself. Ask anyone working in a digital agency what it is and you’ll likely get a nod of recognition but difficulty in pinning it down. All they know is the client wants it, so they’re delivering it. I believe that personalisation is something designed and implemented by the website, app or software — as opposed to customisation, which is a set of choices given to users to personalise their own experience. So why is personalisation regularly on the agenda? Is it something that users expect? Or is it simply that personalisation works? When you dig deeper into the topic, it becomes clear that it isn’t a given and it doesn’t always work. In fact it can have a negative impact on the user experience. Let’s explore the reason it’s so popular lately. Done well, personalisation can provide a streamlined experience, allowing users to cut through irrelevant content. It can reduce cognitive load and decision fatigue by only showing useful information and choices. Take for example Thread, where users input personal information such as clothing sizes, body shape, and style. Thread then cuts out anything that doesn’t fit, literally, to serve up a streamlined, personalised fashion experience. As well as improving the user experience, good personalisation can make an encounter more immersive. The Xbox racing game Forza populates the racetrack with AI cars that use game data from friends’ driving performances to create their own ‘drivatars’. So, rather than driving against randoms, it feels like I’m racing against (and beating!) my friends, even though they’re not currently playing with me. It’s easy to see why there’s a high demand for personalisation. But the reason all of these examples work is because the context of use matches the user need and the design intent. They’re designed specifically to enhance user experience and assist in reaching goals better, faster or more enjoyably. Often, the true intent of personalisation is simply to sell more. It’s to satisfy a business need, rather than a user-led need. Or, it is implemented poorly and doesn’t account for the complexities of human behaviour. Netflix is touted as a great example of personalisation. But is it? I find it frustrating. If I watch one comedy, afterwards that’s all I’m recommended. The personalisation algorithm simplifies my complex interests down to my history of previous clicks. Very has stated a desire to become ‘the world’s best personalised shopping experience’. How does this vision manifest? If you visit their website and look at Ted Baker clothing, all you’ll see is Ted Baker products on the homepage when you return. Is that really the best we can do? Reducing complex human beings down to their last set of choices as an accurate prediction of what they want seems short-sighted. It’s the equivalent of walking into a bookstore and all the shelves being covered up except for cookery books because I watched an episode of MasterChef recently. I am all for personalisation, for the right reasons. But when it becomes an add-on to every project in a desperate need to keep up with the Jones’ there’s very little value in it. I believe it is your job as a designer of digital experiences to question these personalisation briefs. Why is it required? What’s the business case? What’s the user need? What do we mean by personalisation? How can we really enhance the user experience? If you’re not satisfied by the answers, take a stand. If you don’t, who will?
comment ______________________________________________ 11
webkit
Glide glideapps.com
Discover the must-try resources that will make your site a better place
Do you want to quickly build an app that is free, as well as easy to customise and share? Glide uses data — specifically a spreadsheet — as the basis for the creation of an app.
To get started with a new app, simply sign in with your Google account, then select a sheet from your Google Drive, and you’re well on your way to building an app.
HTML Graph
Character design
codepen.io/YusukeNakaya/pen/vvPqeZ
codepen.io/akhil_001/pen/xBLeme
A simple animated pie chart graph that reminds us of Pacman. Makes good use of the transform and animation properties. Modify to get different animations.
Built with CSS variables, the cute character’s colour can be changed to suit your hearts desire. Click and choose another colour to suit your taste.
TOP 5
Codepens
Be inspired for your next project by these codebases
12 _____________________________________________ resources
Header Resources CONTACT US AT: [email protected] | @WebDesignerMag
iro.js
Handtrack.js
iro.js.org
victordibia.github.io/handtrack.js/#
A low friction API that offers support for hex, rgb, hsl and hsv colour formats. Simply move the controllers to select a colour and copy the code.
This library allows for prototyping realtime hand detection within the browser. Try out the demo and play with the threshold or see the library in action.
Boilerform
Animated CSS burger
boilerform.design
march08.github.io/animated-burgers
This is a HTML and CSS boilerplate to help take the pain away from working with forms. Check out the pattern library to see the different input options and copy the code.
Browse this small selection of animated burger menu options, and find the one you would like to use in your project. Get the HTML/CSS or code for React.
Tribute to Ken Perlin #3
Pseudo 3D text
PICKER RING
codepen.io/soju22/pen/ywXrQx
codepen.io/funxer/pen/KBmRoZ
codepen.io/rpsthecoder/pen/PLbmyN
A shifting ball of circles and bubbles that allows users to interact with the cursor. A host of controls are available to customise the appearance.
A floating, dot-matrix style 3D text that slowly moves around and hypnotises the user. Add your own, and then run it to see the new text in action.
A colourful icon-driven selector that looks great, and is also really simple to use too. Drag the red arrow to the preferred option to see the title change.
resources ______________________________________________13
24 – 25 APRIL 2019 BOOK YOUR TICKET www.generateconf.com
INTERESTED IN SPONSORING GENERATE? Please contact Michael Pyatt, Advertising Manager [email protected] | + 44 (0)122 568 7538
Brought to you by
Combining the authority of net magazine, Creative Bloq and Web Designer magazine, this unmissable event brings together a community of like-minded individuals, comprising of web designers, web developers, graphic designers and creative minds for two days of education, inspiration and networking. 2019 Speakers and Sessions Include Josh Clark Keynote AI is your new design material
Miriam Suzanne Workshop Advanced CSS for Modern Applications Dynamic CSS: Layouts & Beyond
Jim Kalbach Workshop Design & Innovation Sprints
Sophia Prater Workshop Object-Oriented UX: Simplify your pixels and your process UX for Lizard Brains
Sam Richard Design System Magic with Houdini
And many more!
www.generateconf.com
#generateconf
DGTL.TRI
Designer:
tri.redcollar.digital
16 ������������������������������������������������ lightbox
Red Collar redcollar.digital
LightBox
Red Collar promotes a series of web design and development workshops and talks with this eye-catching digital flyer
Colours
#F3130B
#F5B509
#3873FF
#E5E7E5
Tools Three.js, GSAP, Skrollr
Fonts
Montserrat Medium and Black fonts, designed by Julieta Ulanovsky and available via Google Fonts is used exclusively throughout the site.
lightbox�������������������������������������������������17
Above
Heads of the various invited speakers are swapped in when the pointer hovers on each scheduled talk. Below
The colour theme of blue, red and yellow is central, with the browser filled at the scroll mid-point. Bottom
As the single page scrolls vertically, a series of themed animations are drawn from the fly motif below.
18 ________________________________________________ lightbox
LightBox g DGTL.TRI
Create an interactive text fuzz effect Make use of the CSS hover selector for applying a fuzz animation to hovered text 1. Initiate HTML document The first step is to initiate the HTML document. This consists of a container for the HTML which is used to store the head and body sections. While the head section includes the external CSS and Javascript files, the body section will be used to store the visible content created in step 2.
using the 'fuzz' class. Each element found is referenced by a 'for' loop to apply the code defined in step 4. window.addEventListener('load',function(){ var nodes = document.querySelectorAll('. fuzz'); for(var i=0; i<nodes.length; i++){ *** STEP 4 HERE } });
4. Javascript: text clone Each item found in step 3 will have a replica of its text content inserted. This step creates the container for this text, as well as copying the text into this element and inserting it into the parent element. The copied element will be used later by the CSS as the fuzz effect. var newNode = document.createElement('span'); newNode.innerText = nodes[i].innerText; nodes[i].appendChild(newNode);
2. Body content
5. CSS: fuzz elements
The visible page content consists of three heading tags that each have the 'fuzz' class applied to them. Additionally, two of the headings have an additional colour class, which will be used to apply further properties that complement the standard fuzz settings. While headings are used in this example, the effect will work with any element type.
Create a new file called 'styles.css'. This step sets the parent fuzz element to use relative positioning, with the child element created in step 4 to use absolute positioning placed in the top left corner. The child element is also set with a default colour and invisible opacity by default.
Fuzz Text red
Fuzz Text blue
Fuzz Text
3. Javascript: search Create a new file called 'code.js'. This step tells the browser to wait until the page has loaded, upon which an instruction is set to search the page for elements
.fuzz{ position: relative; } .fuzz > *{ position: absolute; top: 0; left: 0; opacity: 0; text shadow: 0 0 10px rgba(0,0,0,1); }
6. Hover interactions Two alterations are required when a hover interaction is detected over the fuzz elements. While the parent has opacity set to display with semi-transparency, the child element is set to trigger the 'fuzzAnim' animation. This animation is set to last three seconds, repeating infinitely until the parent element is no longer hovered. .fuzz:hover{ opacity: .5; } .fuzz:hover > *{ animation: fuzzAnim 3s linear infinite; }
7. Fuzz colours Elements using the colour classes will have some additional settings applied. Firstly, the parent element needs to have a colour defined for its text,. Secondly, the child element created in step 5 needs an updated colour for the defined text shadow used for the fuzz effect. Other colours can be set using the same combination of settings. .fuzz.red{ color: red; } .fuzz.red > *{ text shadow: 0 0 15px red; } .fuzz.blue{ color: blue; } .fuzz.blue > *{ text shadow: 0 0 15px blue; }
8. Fuzz animation The animation referenced in step 6 is defined using the keyframes feature. This step defines the properties at specific points throughout the animation. Movement is controlled using margin positioning. As animation transitions are automatically handled by the browser, but with a requirement to snap movement, specific frames are applied to keep the elements in position when required. @keyframes fuzzAnim { 0%{margin: 0; opacity: 0;} 1%{margin left: .5em; opacity: 1;} 25%{margin left: .5em; opacity: 1;} 26%{margin: 0; opacity: 0;} 50%{margin top: 0; opacity: 0;} 51%{margin top: .25em; opacity: 1;} 75%{margin top: .25em; opacity: 1;} 76%{margin top: 0; opacity: 0;} 100%{margin: 0;} }
lightbox________________________________________________ 19
2019 wishes
20 _______________________________________________ lightbox
Designer:
2019.lesanimals.digital/en
Les Animals lesanimals.digital
LightBox
Lyon —based digital studio Les Animals ushered in 2019 with a beautiful interactive New Year card celebrating space.
Colours
#18605C
#CC9495
#7A5539
#FFFDB6
Tools WebGL, GSAP, Matter.js
Fonts
Catamaran font designed by Pria Ravichandran, available through Google Fonts, is used in Bold across the most prominent headings.
Roboto font by Christian Robertson, also available via Google Fonts, is used in Light and Black varieties on
text.
lightbox_________________________________________________21
Top
Making a comment on how 'space' informs design, the site spans three stages initiated by holding the spacebar. Above
Dragging the viewer pane over to the right offers an alternate subversive view of each WebGL scene. Left
The final screen underlines the agency’s preference for digital space with the same 'fragmented' rollover text effect.
22________________________________________________ lightbox
Li htBox 2019 wishes
Build a 3D box inspector Create a 3D overlay effect to allow website visitors to inspect content such as pictures 1. Initiate page The first step is to define the web page as a HTML document. The initial element tells the browser to treat the content as HTML5. The second HTML tag element represents the page document. This element stores the head section used to include the external CSS and Javascript resources, along with the body section. Visible content is placed inside the body. 3D Box Viewer <script src='code.js' type='text/ javascript'> *** STEP 2 HERE
2. Body content The page’s body content consists of a container element used to store the box, indicated with the application of the associated class name. The box has four children — each being an empty div element to be used by the CSS to create the visible sides of the 3D box.
3. CSS: container Create a new file called 'styles.css'. This step defines the how the container is presented to match the full browser window. A background image is set to display through the visible area of the box, while the perspective sets the size for the 3D position settings defined in upcoming steps. .container { width: 100vw; height: 100vh; margin: 0; perspective: 400px;
background: url(image.jpg); background-size: cover; }
4. Box settings The box element acts as a container to control each of the box’s side panels so that they don’t need to be calculated individually. This step applies the transformation settings to treat the box with 3D position calculations. The default transform is set with translate settings to position the box in the required x,y,z co—ordinates. .box { position: absolute; transform-style: preserve-3d; transform: translateZ(26vw) translateX(42vw) translateY(25vh); }
5. Box panels Each child of the box is presented with a set of shared settings – primarily sharing the same size, border and colour. As the box panels are dependent on ability to be placed at specific locations, absolute positioning is applied in order for the panels to be placed using pixel co—ordinates. .box > *{ position: absolute; box-sizing: border-box; width: 200px; height: 200px; border: 5px solid black; background: linear-gradient(grey,white); }
.box > *:nth-child(2){ transform: rotateY( -90deg) translateZ(100px); } /*top panel*/ .box > *:nth-child(3){ transform: rotateX( 90deg translateZ(100px); } /*right panel*/ .box > *:nth-child(4){ transform: rotateX(-90deg) translateZ(100px); }
7. Javascript: boundaries Create a new file called 'code.js'. Javascript is used to apply updates to the box in response to mouse movements. An event listener is applied to the window that will trigger execution of code each time mouse movement is detected. This step uses the position of the cursor to calculate the box’s x and y co—ordinate translation within a specified boundary. window.addEventListener('mousemove', function(e){ var x = 10+(e.clientX/20) if(x > 49)x = 49; if(x < 35)x = 35; var y = 20+(e.clientY/30) if(y > 50)y = 38; if(y < 20)y = 20; *** STEP 8 HERE });
6. Panel position
8. Translation update
With the panels now set with visible styling, the last step is to apply their unique 3D placement settings. Each child of the box is used as a vertical or horizontal side panel, hence the use of transform to apply 3D rotation a z co—ordinate positioning. Each element is referenced using their index positioning via the nth—child selector.
The visual update to the box is applied using the transform style, with translation of x, y and z co— ordinates. First, an array is defined to store each of these translate settings, followed by a search for the box element. The settings are then applied to the box’s transform style by converting the array into a string with each item separated by a space.
/*right panel*/ .box > *:nth-child(1){ transform: rotateY( 90deg) translateZ(100px); } /*left panel*/
var translate = [ 'translateZ(26vw)', 'translateX('+x+'vw)', 'translateY('+y+'vh)' ]; var boxNode = document.querySelector('.box'); boxNode.style.transform = translate.join(' ');
lightbox________________________________________________ 23
Adult Swim Singles
24________________________________________________ lightbox
adultswim.com/music/singles-2018
LightBox Designer:
Active Theory
activetheory.net/home
Adult Swim releases a new music track release every week with accompanying WebGL animal masks and visualiser effects
Colours
#1F3DB2
#BBB029
#C3126B
#2C7768
Tools jQuery, GSAP, WordPress
Fonts
Letter Gothic font designed by Roger Roberson for Adobe Fonts styles the extremely minimal amount of typography throughout.
lightbox________________________________________________ 25
Top
The brightly designed 3D masks have an origami-like folded quality and can be dragged to navigate. Above
A main menu, accessible in the top left, provides a floating grid of 3D tiles for quickly switching songs. Right
Optimised for Chrome and Firefox, the site has a custom embedded audio player for listening to each track.
26________________________________________________ lightbox
LightBox g Adult Swim Singles
Create a simple ripple effect An animation effect for confirming button interactions that’s ideal for UX design and user experience 1. Document initiation The first step is to initialise the web page as a HTML document. This HTML describes the page as the HTML document container, which stores the head and body sections. While the head section is used to include the external Javascript and CSS resources, the body section is used to store the content elements created in step 2. Ripple Button *** STEP 2 HERE
2. HTML buttons Each button is made from the HTML button tag with the effect being applied via the ripple class. These additional options will be defined within the CSS to apply colour, size and text shadow. HTML’s ability to apply more than one class to an element allows for a small number of classes to produce many presentation combinations.
and then transparent again. The result of this gradient combination is a circular pattern that fades in and out of transparency — like a ripple. With a default background size much bigger than the button, the applied transition results in the background being animated to this size to this state after being clicked.
.ripple:active { background-size: 0; transition: 0s; opacity: .25; }
6. Additional properties .ripple { position: relative; background: transparent radial-gradient (circle, transparent 1%, rgba(255,255,255,.5) 10%, transparent 1%) center; background-size: 2000%; background-position: center; transition: background 1s, opacity 1s; font-size: 1em; opacity: .75; color: #fff; }
5. Activate ripple While the hover selector sets the button to appear fully visible whenever hovered over by the mouse pointer, the active selector triggers the ripple effect when the button is clicked. With the transition and background set up in step 4, this step resizes the base image and sets the transition for immediate activation upon releasing the button. The button is also set to be semi transparent when held by the mouse pointer. .ripple:hover{ opacity: 1; }
The additional properties available to apply to the ripple buttons are defined in this step. When applied to a button’s class list within the HTML, the extra classes will work as an extension to the properties defined by the ripple class. The result of this extension allows ripple buttons to appear with different sizes, colours and text shadows. .big{ font-size: 2em; } .red{ color: red; } .shadow{ text-shadow: 2px 2px 2px black; }
7. Shared button styles All buttons are set to share common properties for consistency regardless of whether they are set to use the ripple effect or not. This step sets all buttons to have a thin border and padding that’s proportionate to their font size. No colour is applied to the border, meaning that it will inherit the colour used for the button text. button { border: .1mm solid; padding: 1em; }
3. CSS: body initiation Create a new file called “styles.css”. This step applies a background image to cover the document body so that the ripple effect can be demonstrated over visible background content. With the image being placed to enhance the visibility of the ripple effect, you have the choice to skip this step for real projects. body{ background: url(‘image.jpg’) black; background-size: cover; }
4. Initiate ripple The ripple effect is based on a circular background gradient, set to be coloured from transparent to white
lightbox________________________________________________ 27
andreceive
WIRELESS With a subscription to Web Designer you’ll... - save money off the cover price - never miss an issue - receive 13 issues a year
WORTH
£35 IT’S EA OR CALL: 0344 848 2852 AND QUOTE HP19
SUBSCRIBING FROM OVERSEAS? VISIT BIT.LY/2MCDARC 28______________________________________________subscribe
PLUS with your subscription you have access to 900+ FREE RESOURCES from previous issues with FileSilo. See page 96
CHOOSEYOURPACKAGE!
*
PRINTEDITIONONLY
ONLY
£29.50
PRINT&DIGITALBUNDLE
SIX-MONTHLY
6 months of Web Designer g in print, p , plus headphones
ONLY
£34.50 SIX-MONTHLY
6 months of Web Designer g in p print and digital, plus headphones
* OFFER NOT AVAILABLE FOR DIGITAL EDITION ONLY PACKAGE Terms and conditions: This offer entitles new UK Direct Debit subscribers to pay just £29.50 every six months plus receive KitSound Harlem Wireless Headphones. Gift is only available for new UK subscribers and is subject to availability. Please allow up to 60 days for delivery. In the event of stocks being exhausted we reserve the right to replace with items of similar value. Prices and savings quoted are compared to buying full-priced print issues. You will receive 13 issues in a year. Your subscription is for the minimum term specified and will expire at the end of the current term. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. UK calls will cost the same as other standard fixed line numbers (starting 01 or 02) or are included as part of any inclusive or free minutes allowances (if offered by your phone tariff). For full terms and conditions please visit: www.bit.ly/magterms. Offer ends April 30th 2019.
subscribe _____________________________________________29
PROJECT NAME
Nomadic Tribe 2019.makemepulse.com
AGENCY
makemepulse makemepulse.com @makemepulse
PROJECT DURATION 3 months NO. OF PEOPLE INVOLVED 6 NAMES & POSITIONS
Louis Ansa Creative director
Manon Jouet Art director
Pierre Lepers Lead developer
Dorian Lods Developer
Florentin Monteil Developer
Juliette Desbois Producer
30 �����������������������������������������design diary
T
MArking the LAteSt inStALMent oF itS in-house ‘wishes’ project, we discover how agency makemepulse wove a nomadic new year story experience brimming with technical magic
he notion of a ‘vanity project’ in professional terms could be frowned upon too easily on the surface. If you Google its general definition, you’ll find that Urban Dictionary.com uses a home improvement analogy to explain the phenomenon. But rather nicely, it also shoots a hole through how it might be to apply instead to web design. While true that undertaking an optional non-commercial project for yourself is likely costly, when it’s do-it-yourself it’s not all that ‘vain’ at all. Plus, as our story this time illustrates, some artistic narcissism and self-indulgence can be much more outward looking. Several years ago now, the interactive production company makemepulse mused on how they might create such an opportunity between the work it predominantly performs for clients and partners. Given their focus areas of real-time 3D, WebGL and WebVR, Virtual, AI, Big Data, plus Augmented and Mixed Reality too, the team understands that when content is interactive, it’s engaging. By creating emotional connections through digital experiences, the results are memorable, personalised and continuous across every screen. “There’s a rhythm to the way we work and the stuff we make,” begins Antoinne Ughetto, CEO and head of innovation. “So we gathered everyone in the team to brainstorm on ambitions, projects and technologies. It was such a mess, but we managed to find an angle and we created what became the first of many makemepulse wishes side-projects.” This in-house initiative would not only be a way of
gathering everyone around something that personal ‘heart and soul’ could go into, but also invest in the future. “Creating this kind of project allows us to build something together, empowering the team building,” says creative director Louis Ansa. “It is an opportunity for us to experiment on both creative and technical sides and try new methods, new technologies that resonates with subsequent clients.” Fast-forward to 2019 and makemepulse wishes’ fourth edition. We sat down with the guys to discover how Nomadic Tribe came into formation.
MAkE A WIShES Meanwhile, of course, most will testify that the previous ‘wishes’ projects hadn’t taken place within a black box. Past releases were always for public consumption and served as hugely influential calling cards. Gradually becoming signature makemepulse projects within the industry, everybody had expectations for what was next. “For the previous four editions of the makemepulse wishes, we got many awards such as Site Of The Day, Site Of The Month on FWA and Awwwards among others, but that wasn’t all,” Ansa continues. “This year, makemepulse is slowly but surely shifting the company focus towards an even more creative process.” Adding more designer staff to its creative team to support their development core, the company is always looking to inject extra flavour and storytelling talent. In line with this, they opted to change the wishes process to use a smaller technical team for kick-starting the project and brainstorming the first ideas.
design diary ������������������������������������������31
TRIBAL QUEST
“We thought of the previous editions and even though we wanted to keep the same freshness and playfulness to it, we wanted to think differently and spend way more time on concept and research. Acknowledging this, we created the initial brief which we used as a starting point to brainstorm on concepts.” From here the brief was simple — make it creative and amazing, telling a story. With this in mind, it fell to Ansa and art director Manon Jouet to narrow down the early direction and sharpen the approach. “It seemed like a better way of focusing on the simple, strong messages we wanted to convey and support with this year’s makemepulse wishes.”
SiTe HigHligHT
“The standout feature of this project is without a doubt the choice of art direction. We feel that most WebGL productions nowadays look alike and everything is slowly shifting toward a merged style and trend. We decided to aim for something different and new, a comic book-inspired outlined 3D render style.” Louis Ansa - Creative director
32 ������������������������������������������design diary
MOEbIUS TRIP A research period yielded global ideas between the two, which were pitched during a presentation to identify the best. Three were favoured before a developer co-worker was invited to join in with the writing of a more precise, practical pitch deck. This document described each lead in terms of concept, storyline, user flow and interaction, as well as both creative and technical moodboards “Our three concepts were about a scientific drawing, a tarot game and a tale. The tale concept was about a mysterious tribe living on islands, moving from one to another every year, doing their duty. In this imaginary world, those folks were living in harmony with nature and they could actually communicate with it. Every island they were living
on, they were dedicated to help the ecosystem heal and become as strong as it once was. Every New Year’s Eve they had to bid farewell to it and fly toward new lands.” The team saw this as a particularly nice metaphor for makemepulse as an agency and the synergy with working with partners to creating rich and meaningful experiences. With a rough story set, a subsequent drive for inspiration landed on a love for comic-book art and a certain legendary figure. “We went to comic book stores to ask for recommendations and advice as we looked for hidden gems. As huge fans of the work of Jean Girault, aka Moebius, we realised that his comics fit our story and mind-set. We bought some of his comic books, including The World Of Edena, that we literally fell in love with.” From here, the team started gathering all kind of references relating to islands, tribes, plants and even birds before moving into design.
SCENE STEALING The design stage of Nomadic Tribe was divided into three main parts, with the first being the draft, then the art direction and finally the production of the website itself. Within the initial phase there was a focus on story development before work on conceptualising user experience and interactive mechanics. “We started by writing the story detailing the tribe, the island and their relationship, but quickly we wanted to draw and start sketching some shots, some concepts. I cannot say how
TRIBAL QUEST
eNgagemeNT ParTy We ended up modelling things, texturing them, animating them, changing the model and tweaking the elements many times,” Louis Ansa recalls when quizzed on Nomadic Tribe’s toughest moments. “It was without a doubt the main challenge we encountered between the design and the technical team, but luckily we ended up smoothing things over and finding our specific workflow. The texturing was a huge part of the project, and in my opinion it really adds something to the project.” This work would finally lead on to the actual production of the assets and also the excitement around undertaking the first phases of prototyping. The team were hugely anticipating that, and seeing how concept interactions would play out in reality, especially with engagement so important to the brief. “The main interactions of Nomadic Tribe are dragging your cursor to bloom a flower, clicking on hotspots to activate crystals and click-holding to make the birds fly faster. We put a lot of effort into those, as they were very engaging in terms of emotional connection with the user. The first flower had several versions and types of user feedback, the crystal had different ways of animating, the clouds and particles were added, removed then added again in the birds scenes, etc.”
design diary ����������������������������������������� 33
TRIBAL QUEST
SouNd develoPmeNT A standout feature in its own right, the audio work for Nomadic Tribe is crucial, elevating the experience. The sound effects, music and narration track really heighten the immersion and amounted to a project in itself. “Once we had enough materials and a definitive script for the narrative voiceover, we worked with Loïc from Press Play On Tape, a talented sound designer we always work with on our productions,” begins creative director Louis Ansa. “It is always a pleasure to partner with him and luckily for us, he is also a huge fan of Moebius’ work!” That working knowledge and creative kinship for what makemepulse were proposing meant Loïc came on board immediately. He would end up giving the team valuable input into finding the right voice actor to play the tribe member narrating. His efforts would produce a beautiful multilayered soundtrack for the experience that was more flexible than most. “Let me explain the difference with a regular soundtrack,” Ansa continues. “He had to design a soundtrack with several layers that all loop perfectly and stack together so we can activate them when the user triggers the next scene. We ended up achieving this wonderful sound creation with the original soundtrack, sound design for every element and also the actor’s voice. We were blown away by how it gave so much personality to our scenes.”
34������������������������������������������design diary
TRIBAL QUEST
many iterations we did, but I remember doing some scenes over and over, slowly but surely setting the style of the project.” With the story originally split between five scenes — The Flower scene, Farewell, The Island, Sea and New Land — the decision was made to make it more concise. The sketching of styleframes to establish moods and colours, then shadowed development of 3D prototypes, which revealed exactly how ‘tricky’ emulating Moebius’ style would be for browser-based rendering.“ “Once we were happy with our sketches and overall visual direction we started to design the scenes. At the same time, we quickly set up our cameras and very low poly elements for the developers to start building up the structure of the experience. The 3D process had been a back and forth workflow that gave us headaches more than we would admit. The intention was to start building the scene with very low poly scenes, then model assets in a separate file and, one by one, replacing the low poly ones with the final ones.’ “After replacing those, we would export the assets and directly paint on them using powerful software called Substance Painter, which allows designers to directly paint on 3D models. The last part would be to animate the elements with the texture on it and hand it over to the developer team.”
OPTIMAL OPTICS The two main challenges were to respect the look and feel of the original design while bringing life to complex scenes involving lots of different animation techniques. An in-house engine called NanoGL has been heavily customised by makemepulse to provide that very ability to quickly prototype effects and animations. “The main goal here being able to combine and reuse those effects in order to speed up integration process of assets,” explains lead developer Pierre Lepers. “Almost all elements in the scenes are rendered using the same modular material which acts as an empty shell in which various modifiers can be added to obtain the render we want. Two categories of modifiers are involved; effects and deformers, with the former letting us control the actual rendering of elements. The base colour came from a texture, a solid colour, vertex colours, or more complex procedural effect.” “For each case, the appropriate effects can be added and combined without having to rewrite specific GLSL (OpenGL Shading Language) from scratch. The same way that we can add cel-shading, paper grain, outlines and colour correction on per-object basis.” The latter uses the same modular system, and would let the developers combine deformation effects on meshes, be it for skin, morph targets or procedural animations — such as wind effect on vegetation, spline deformation for the flowers etc. “It sounds really technical and deep, but it’s the kind of stuff we do at makemepulse,” enthuses
Ughetto. “We have to make things in the most optimised way possible as we want our experiences to be visible on all devices. The goal of our team is to make magic, creative ideas possible, and that’s what we have tried to achieve again on this project.”
JOURNEY’S END According to Louis Ansa’s own recollections, the final weeks of Nomadic Tribe’s three-month production were intense. “The core of the experience was there, and we were so deep into the project that we had to focus and remind ourselves to try to take a step back to see the big picture and prioritise tasks.” Time was growing short, with everyone keen to add further details, small interactions and polish things over and over. The team had to sacrifice on some details to focus on the compatibility of the experience. “That’s why we spent the last two
weeks working hard on making the mobile experience smooth. A lot of the 3D models, interactions and interfaces were slow or just okay, so we pushed it further to upgrade the experience and bring it as high as the desktop one.” That attention to performance is exemplified by moments such as the birds scene, inspired by Hayao Miyazaki’s Studio Ghibli film Spirited Away. Garnering particular praise from the community since Nomadic Tribe went live, the team employed similar motion tricks here to illustrate speed in an epic, exhilarating way on every device. “Our target audience was very broad and we made the experience easy to use for a big variety of users,” Ansa concludes. “More specifically, we are talking to the digital agencies, studios and talents. We had a very warm welcome from everyone, and it was a huge success for the team as people found it poetic and different from the actual trends.”
design diary ����������������������������������������� 35
NEVER MISS AN ISSUE! Issue 284
Think fonts, think colours, think design, responsive layouts, manage Redux with Immutable.js, get productive with npm and optimise your SEO
Issue285
Prototype with Adobe XD, 20 top UX tools & resources, how to sketch and storyboard, design UX-friendly forms and wireframe with Sketch
GOT AN APPLE DEVICE?
SAVE UP TO 57% WITHA DIGITAL SUBSCRIPTION SEEPAGE28
Download Web Designer’s digital edition for your iPad, iPhone or iPod touch
apple.co/1hsGYgl 36___________________________________________ back issues
Issue 279
Pro tips to build animation for the web, 23 ways to make your app shine, work with variable fonts and what’s new in Node 10
CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS bit.ly/2rh73Xk
Issue 283
Issue 282
Issue 281
Issue 280
JAVASCRIPT 2019 – 25 frameworks, tools and APIs, WordPress 5, CSS liquid effects, build a webVR scene and React & Redux
What you need to know to become a CSS pro: animation, Grid, Sass, optimisation, methodologies, hot new properties and APIs
Design, develop and create with top Google tools, add glitch effects with CSS, animate with GSAP and code UX patterns
30 best HTML, CSS and JS APIs and elements, research your keywords, interactive JS charts and What is the Web of Things?
Issue 278
Issue 277
Issue 276
Issue275
What’s new in JavaScript, say hello to Google Flutter, build with CSS Grid, work with WebRTC and create patterns with CSS
Hot new CSS properties for today, build interactive 3D, streamline your design workflow with Sketch and code a real-time React app
Build your own augmented reality app, get started with three.js, power up with Sass and Stylus and generate web components
50 must-try tools for designers and developers, how to add awesome audio, Progressive Web Apps and interactive images
PREFER TO READ ON ANDROID, PC OR MAC? Web Designer magazine is also available on Google Play and Zinio
tinyurl.com/yalm3wul
bit.ly/2xPbv4p back issues___________________________________________ 37
WHO IE DIGITAL
WHAT Consultancy, Website Design, Mobile Apps, Web Development, Digital Services, Responsive Design, Research, Brand Strategy, Visual Identity, Messaging, Brand Architecture, Naming, User Experience, Information Architecture, User Interfaces, GDS, Agile, Drupal and Open Source
WHERE Aquinas House, Warstone Lane, Birmingham B18 6NG
WEB www.iedigital.co.uk
KEY CLIENTS FPA University of Nottingham Solicitors Regulation Authority (SRA) SVP (St Vincent de Paul Society) Career Ready
38___________________________________________________profile
WITH 25 YEARS OF EXPERIENCE, IE DIGITAL HAS BEEN ACTIVE IN THE DIGITAL COMMUNICATIONS SPACE SINCE THE VERY BEGINNING. THEY DESIGN ENGAGING DIGITAL EXPERIENCES THAT CONNECT THEIR CLIENTS IN THE CHARITY, HEALTH AND EDUCATION SECTORS TO A DIVERSE AUDIENCE, FROM VOLUNTEERS AND DONORS, TO STUDENTS AND CLINICIANS.
profile___________________________________________________39
De si gn Va lue s
I
E’s MD Ollie Leggett founded the agency in 1994. Originally hailing from Cheshire, he relocated to Birmingham City University for a BA in Visual Communication. Having qualified with a PGCE, Ollie worked as an art and design teacher (GCSE) and a lecturer in graphic design up to degree level, before deciding to return to practicing his subject by starting his own design business. Ollie had a passion for helping values-driven clients in the charity, health and education sectors to connect with their audiences and gain access to the industry’s best creatives – something that back then was all-too-commonly only possible for big business. By 2002, Ollie had recognised that digital platforms were becoming one of the essential expressions of a brand. Also, he was fed up of seeing their work butchered by techies. IE bought a digital agency with shared values to become the agency they are today. One of the first orders of business, when Ollie set up IE, was the question of what to call his new company. Ollie takes up the story: “IE is the abbreviation for the Latin id est, meaning ‘that is’ or ‘in other words.’ When IE Design Consultancy was founded in 1994, we weren’t thinking about domain names. The other IE, Microsoft’s Internet Explorer, launched version one at around the same time, and few people had any idea of what the internet was about to become!” He continues, “For many years we used the URL iedesign.co.uk, and a few years ago we took the decision to split our web presence across two websites – iedigital.co.uk and iebrand.co.uk – each focused on one of our specialisms. “As a brand consultancy, we always advise our clients to only change their name if they can’t afford not to. If, for example, the name has become a liability or detracts from what you do. The IE name has served us well, and we hold the trademark on our beautiful logo, so we’ve no plans to change.” Understanding how the internet was about to transform brand communications was a central
As its platform of choice, the Drupal 8 CRM can be seen in action across many of the sites IE Digital has created.
40 __________________________________________________profile
component of what IE has become. Is its own website a critical component of its brand? “IE’s website is our shop front, so it’s a crucial tool for bringing new business our way,” said Ollie. “As a digital agency, a beautiful-looking, engaging website is an absolute must, and we launched the current version in January 2017. “The website is home to a selection of in-depth client case studies to show off our work. We also publish regular blog posts, feature an extensive list of our clients, and show the exceptional team at the heart of IE. “Keeping the site up-to-date with quality case studies is the job of our Head of Marketing, who works closely with our digital consultants and the brand team to publish a selection of powerful work. The whole team is encouraged to contribute articles to the blog, from the Managing Director and consultants to designers, developers and the customer support team. We also publish many downloads that act as lead generation tools, such as our Website Brief Template.” Gaining new clients can be tackled from many angles. Ollie outlined IE’s approach: “Many of our clients come to us via word of mouth,” he said. “Past and present clients recommend us to their peers in other organisations or get back in touch when they change roles. “The rest of our business generally comes via the website, or off the back of events we’ve attended. We often attend conferences – generally sector-focused – where we’ll have a speaking slot to present a case study alongside a client. These are a great way to position ourselves as experts and thought leaders. We regularly hear from people who’ve listened to us at these events and returned to us a few years later with a project.
Founder and MD, Ollie Leggett using IE Digital’s most essential piece of cutting-edge technology.
De sign Val u e s The offices of IE gham. Digital in Birmingham hat a creative This is wh landsca looks like.
,(VSHRSOHDUHRXUPRVW LPSRUWDQWDVVHWVRZHWDNHRXU WLPHZKHQZHUHFUXLW:HORRN IRUSHRSOHZKRVKDUHRXUYDOXHV DQGKDYHDVWURQJZRUNHWKLF :HDOVRDVNHYHU\QHZUHFUXLW WRFRPSOHWHDEHKDYLRXU DVVHVVPHQWWRRO'L6&ZKLFK KHOSVXVWREDODQFHWKHWHDP XQGHUVWDQGRQHDQRWKHUDQG LPSURYHFRPPXQLFDWLRQ
OLLIE LEGGETT FOUNDER AND BRAND CONSULTANT
“All of the above get us invited to respond to project briefs, and more often than not we’ll either win the work or come a very close second. We scan the market for tender notices and occasionally respond to these, but we’re really selective. Without any prior relationship with the client, we need to be able to make a solid case for why we should go for a blind tender. So we’ll only select ones where we believe we’re absolutely the best agency for the job, with the case studies and experience to back it up. We’ll never produce speculative creative work for a pitch though – our consultancy process is far too important to just blindly submit designs without the insight and stakeholder research to back it up.” Web Designer asked Ollie if he could point to a piece of work that encapsulates the IE design philosophy. “The Sexwise website is a great example of our work,” he explained. “This was a new campaign brand created for the sexual health charity FPA and funded by Public Health England. “It’s a great example of our three core sectors overlapping, because they are a health charity, with an educational remit. IE created the brand as well as the mobile-first website, all informed by rigorous research. We loved working with FPA, and the relationship is still going strong. We’ve continued to make incremental improvements to the Sexwise site based on user data. Also, we’ve since rebuilt the FPA’s main website too. Lastly, Sexwise has been shortlisted for a couple of awards, which is the icing on the cake!” How an agency approaches each piece of work can take many forms. IE has a structured approach that Ed Wilkinson, IE’s Digital Services Director, outlined: “On a typical project, we involve individuals with a breadth of experience, covering different areas of expertise. A Digital Consultant kicks off the project and helps to define what success looks like, creating user journeys based on the client’s goals.
To reach its core demographic, the s to work flawlessly on mobile devices.
sexwise.fpa.org.uk exual health charity FPA needed a distinctive brand and mobile-friendly website for its new campaign, funded by Public Health England. IE Digital created everything from the campaign’s name, the tone of voice and messaging, to the QHZ ORJR DQG YLVXDO LGHQWLW\ LV ZDV EURXJKW WR OLIH RQOLQH with a mobile-friendly Drupal 8 website. IE carried out extensive stakeholder research and PDSSHG WKH XVHU MRXUQH\V IRU YDULRXV XVHU SHUVRQDV H ZHEVLWH GHVLJQ WRRN D PRELOH˳UVW UDSLG SURWRW\SLQJ DSSURDFK WR FUHDWH DQ LQWXLWLYH XVHU H[SHULHQFH H ˳QDO site was built in Drupal 8 and looks beautiful on all devices, especially mobiles. H FULWLFDO SLHFH RI IXQFWLRQDOLW\ ZDV WKH FRQWUDFHSWLRQ FRPSDULVRQ WRRO H GL˲HUHQW W\SHV RI FRQWUDFHSWLRQ FDQ EH ˳OWHUHG E\ PHWKRG W\SH DQG H˲HFWLYHQHVV DV ZHOO DV ZKHWKHU WKH\ SURWHFW DJDLQVW 67,V DQG WKH H˲HFW WKH\ KDYH RQ SHULRGV $OWHUQDWLYHO\ GL˲HUHQW FRQWUDFHSWLRQ RSWLRQV can be compared side-by-side. Sexwise is a highly credible brand, and the website UHFHLYHV WUD˵F IURP RYHU H[WHUQDO UHIHUUHUV LQFOXGLQJ numerous NHS and health organisations, and charities. H VLWH UHFHLYHG D PHQWLRQ RQ %%& 5DGLR )RXUːV Woman’s Hour programme, and the brand enabled FPA to partner with PHE on their Protect Against STIs campaign. $IWHU RQO\ D \HDU WKH ZHEVLWH UHFHLYHV F XVHUV SHU PRQWK DQG JURZLQJ 2YHU SHU FHQW RI WKH VLWHːV WUD˵F LV IURP D SKRQH RU WDEOHW
profile___________________________________________________ 41
De si gn Va lue s
An entirely new visual identity was created by IE to herald the arrival of the new University College of Osteopathy
UNIVERSITY COLLEGE OF OSTEOPATHY (AND UNIVERSITY COLLEGE
OF OSTEOPATHY CLINIC) uco.ac.uk
I
( 'LJLWDO GHVLJQHG DQG GHYHORSHG WZR QHZ PRELOH˳UVW Drupal websites for the newly renamed University &ROOHJH RI 2VWHRSDWK\ 8&2 DQG LWV FOLQLF ,Q LWV FHQWHQDU\ \HDU WKH IRUPHU %ULWLVK 6FKRRO of Osteopathy had been awarded Taught Degree Awarding Powers to become the only degree-awarding osteopathic institution in Europe. With a new name, brand and visual LGHQWLW\ ˌ FUHDWHG E\ ,( ˌ WKH 8&2 DOVR QHHGHG DQ improved web presence. ,W TXLFNO\ EHFDPH FOHDU WKDW WKH 8&2 FOLQLF ZHEVLWH VKRXOG EH D GLVWLQFW DQG VLJQL˳FDQW ZHEVLWH SURMHFW LQ LWV RZQ ULJKW VR ,( UHFRPPHQGHG VSOLWWLQJ WKH SURMHFW LV resulted in separate wireframes and visual designs and a XVHU H[SHULHQFH WDLORUHG WR WKH YHU\ GL˲HUHQW XVHU MRXUQH\V of students and patients. ,QIRUPHG E\ VWDNHKROGHU UHVHDUFK WKH 8QLYHUVLW\ &ROOHJH website focused primarily on the user journey of a SURVSHFWLYH VWXGHQW VKDULQJ WKH EHQH˳WV RI FKRRVLQJ WKH 8&2 WR VWXG\ FRXUVH GHWDLOV DQG LQIRUPDWLRQ RQ ZKDW OLIH could be like as a professional osteopath. We gave pride of place to the voice of the students – showing what life at 8&2 LV OLNH WKURXJK WHVWLPRQLDOV SKRWRJUDSK\ DQG YLGHR Meanwhile, the clinic website communicates clear messaging on its pricing, convenient opening times and location, with clear calls to action to book an appointment. %RWK VLWHV ZHUH EXLOW LQ 'UXSDO DQG ZHUH IXOO\ RSWLPLVHG IRU PRELOH H\ VKRZHG R˲ WKH EHDXWLIXO QHZ 8&2 YLVXDO LGHQWLW\ DQG SKRWRJUDSKLF DVVHWV FUHDWHG E\ ,(
42___________________________________________________profile
“This leads to the development of the site’s structure and wireframes to create a seamless experience for the end user. A digital designer then shares web trends for the client’s sector and the current design landscape and gathers feedback from the client on their visual likes and dislikes, before bringing the project to life and creating the overall look and feel of the product. “Once the client’s happy with the designs, we move to the most time-consuming phase, which is frontend and backend development of a responsive, templated website – usually in our preferred CMS, Drupal 8. For our more agile projects, we’ll go through a series of sprints, involving a cycle of prototyping, development, testing and refinement. Depending on the client, this might also include integration with other systems, including CRM, payment systems, etc. “Our project manager keeps the client informed at every stage and makes sure everything is on track in the studio. We have daily standup meetings to ensure that everyone knows what’s expected of them, and regular client progress updates. “With the development complete, we train the client team in the new CMS and hand the site over for acceptance testing, and to add content. We resolve any issues in a secured testing environment before deploying the site using Pantheon’s cloud-based hosting platform. Then we have a final snagging period to address any niggles. A project typically lasts
from three to six months, but this can vary a lot based on both the functional requirements for the site and the level of user research and testing involved.”
D
rupal 8 is IE’s CMS of choice. Ed explained what other applications and services are in their toolkit: “On the design side, we use tools that help make sharing and collaboration between our clients, consultants, developers and designers as comfortable as possible. We mainly use Sketch for our website and web app designs, and share internally and externally using InVision – which our clients love. There’s still a place for Adobe Photoshop though, and of course, our brand team makes heavy use of the Adobe Suite of software. “HTML, CSS and JavaScript are the fundamental building blocks for websites, so unless there is a paradigm shift with internet browsers, these will continue to be the underlying technologies for a long time to come. Users expect faster loading, instantly accessible websites, so ‘lean’ websites are becoming more commonplace, with initiatives like Accelerated Mobile Pages. “Things like jQuery is being phased out in favour of ‘vanilla JavaScript,’ and frontend JavaScript frameworks like VueJS, React and Angular. These JavaScript frameworks are all currently working to
De sign Val u e s
AGENCY BREAKDOWN Front-end Developer
Web Developer
Web Developer
Web Developer
Head of Development
Project Manager
Digital Consultant
Head of Support & Senior Digital Consultant
Digital Services Director & Senior Digital Consultant
TIMELINE 1994
Ollie Leggett founds IE. No of Employees: 1
Head of Marketing
Director of Finance and Operations
Designer
Brand Consultant & Senior Designer
Creative Director & Brand Consultant
Managing Director & Brand Consultant
Digital Designer
Customer Service Engineer
1999
IE creates its own first website, built in Macromedia Flash. No of Employees: 4
2002
IE merges with a small digital consultancy to provide website and multimedia services for clients. No of Employees: 6
Web developer Fran Garcia with Frontend developer Joëlle Symons checking their latest build.
componentise mark-up, styling and functionality to help with reusability, maintainability, and consistency. “These frameworks mostly require developers to know ES6, the latest version of JavaScript, so whereas jQuery made it easier to write JavaScript, with less understanding of the language itself, these frameworks generally push developers to really understand how JavaScript works. Generally, we think these technologies will continue moving in the direction of web components, and this will help with the quality of websites that are produced and create efficiencies for developers. “Also, we’ve started working with service workers, which enable us to create websites with offline functionality and bespoke caching, to deliver a less interrupted and faster experience for mobile users. We’ve also taken a liking to VueJS that we use to build websites that have a lot of interactive components. We find it easy to work with, and it allows us to create engaging user interfaces. “Building responsive websites has become second nature to us at IE Digital, as for most digital agencies. We frequently design sites with a mobile-first or content-first approach. This means considering intermittent internet connections, users’ data allowance, page load speed and other important factors that can affect a mobile user’s experience. We address these challenges by including app-like functionality into our websites and web apps and
2004
To formalise the merger, IE registers as a private limited company. No of Employees: 7
2009
IE builds its first Drupal website for Christian charity BMS World Mission. No of Employees: 10
Back in the nineties Flash was a big deal. And, it was the software that IE used to build its first website
2010
IE nails its colours to the mast, specialising in the Charity, Health and Education sectors. No of Employees: 10
2010
IE decides to build a team of brand and digital consultants – not sales/ account managers. No of Employees: 10
2015
Current IE management team is established. No of Employees: 20
2019
Ten years ago IE built its first site using the open source content management system Drupal
IE celebrates 25 years, and will move to a new purpose-built studio in Birmingham’s Jewellery Quarter later in the year. No of Employees: 17
profile___________________________________________________ 43
De si gn Va lue s
tal.co.uk WEB w w w.iedigi e Leggett FOUNDERS Olli D 1994 YEAR FOUNDE PLOYEES CUR R ENT EM LUPLQJKDP8. LOCATION(S)%
6(59 ,&( 6
& Development Website Design Q Mobile Apps WHPV Q%HVSRNH6\V Q UX & UI 'HVLJQ G9LVXDO,GHQWLW \ Q%UDQGLQJDQ Q
$ 'LJLWDO FRQVXOWDQW NLFNV RII WKH SURMHFW DQG KHOSV WR GHILQH ZKDW VXFFHVV ORRNV OLNH FUHDWLQJ XVHU MRXUQH\V EDVHG RQ WKH FOLHQWV JRDOV 7KLV OHDGV WR WKH GHYHORSPHQW RI WKH VLWHV VWUXFWXUH DQG ZLUHIUDPHV WR FUHDWH D VHDPOHVV H[SHULHQFH IRU WKH HQG XVHU
The entire IE team goes camping and canoeing in the Wye Valley every summer.
ED WILKINSON DIGITAL SERVICES DIRECTOR
44 __________________________________________________profile
Frontend developer Joëlle Symons being briefed by Digital Services Director Ed Wilkinson.
De sign Val ue s
PUBLIC HEALTH ENGLAND
P
XEOLF+HDOWK(QJODQG 3+( FRPPLVVLRQHG,( Digital to design and build a ‘kitemark’ system WRGULYHXSKHDOWKFDUHSURIHVVLRQDOFRQ˳GHQFH in health apps. HPDUNHWZDV˴RRGHGZLWKRYHUPRELOH DSSVFODLPLQJWREHQH˳WKHDOWKDQGZHOOEHLQJZKLFKWKH public was mostly eager and willing to embrace. However, healthcare professionals were understandably FDXWLRXVDERXWUHFRPPHQGLQJDQGHQGRUVLQJVSHFL˳F DSSVH1+6QHHGHGWRZLQWKHFRQ˳GHQFHRIFOLQLFLDQV WRUHDOLVHWKHSRWHQWLDOKHDOWKEHQH˳WVDQG˳QDQFLDOVDYLQJV promised by new technology. $VSDUWRI:RUNVWUHDPRIWKH1DWLRQDO,QIRUPDWLRQ %RDUG 1,% ,('LJLWDOZDVWDVNHGZLWKKHOSLQJ3+(SXW an assessment process in place for health apps. IE held co-creation workshops with key stakeholders from bodies LQFOXGLQJ0+5$+6&,& 1+6'LJLWDO 1+6(QJODQG DQG1,&(,(WRRNDQ$JLOHDSSURDFKWRWKHSURMHFW DQGIROORZHGWKH*RYHUQPHQW'LJLWDO6HUYLFH *'6 Design principles. We performed digital consultancy and systems analysis for PHE to design a peer review process, including online self-assessment forms for completion by app developers. We built a web-based demo system, which PHE used at health conferences to gain industry feedback, and following a series of rapid prototyping and user testing VSULQWVZHFRPSOHWHGWKH%HWDVHOIDVVHVVPHQWVHUYLFHDQG Alpha phase for the ‘expert community’ assessment phase.
IE Digital understood the core drivers behind the process for PHE that resulted in a valuable resource for NHS commissioners.
Web developer Eli Stone and Head of Development Nathan Powis debating the merits of tabs versus spaces.
try to offer the best experience possible if a user has a slow connection or has gone offline.” reating the dynamic content and communications platforms brands now demand has meant ensuring IE has the best talent to deliver these world-class projects. “Call us big headed, but we’re pretty confident we’ve got the best people in the industry,” Ollie told Web Designer. “Because IE Digital is only as good as its people, our studio is full of some of the industry’s best digital consultants, UX/UI designers, web developers and project managers – all under one roof. “IE’s people are our most important asset, so we take our time when we recruit. We look for people who share our values and have a strong work ethic. We also ask every new recruit to complete a behaviour assessment tool, DiSC, which helps us to balance the team, understand one another and improve communication. “Our team are often graduates – though not exclusively – and they usually have previous agency experience. We believe in investing in the next generation of consultants, designers, and developers, so where possible, we also bring people in via the IE Academy – a recruitment and training programme for newly graduated developers. “Also, once we’ve found these rare individuals, retaining them is vitally important, so we’ve worked hard to put together a benefits package that rewards people’s contributions to our success. We offer competitive salaries, flexible hours, paid overtime, a sabbatical after five years’ service, team away days and time off for community projects.”
Being established for a quarter of a century, Ollie concluded by outlining what the future holds: “This year the agency turns 25 years young, so we’ll be celebrating all the amazing people and projects that have brought us to where we are now. “Looking to the next 25 years, we’re planning to keep growing the business organically. We’re working on gaining a foothold in the arts and culture sector, which will fit with our values-driven client portfolio, and often overlaps with charity and education. “We’re excited about moving to a new purposebuilt studio later in the year, which will become IE’s permanent home. However, we won’t be moving very far; we’ll still be based in Birmingham’s Jewellery Quarter, which is a thriving community of creative businesses, from agencies to silversmiths. “In terms of upcoming projects, we’re thrilled to be working to create the brand and website for a really ground-breaking sustainability initiative. Another exciting project in development is the phased launch of the new legalchoices.org.uk, which offers consumer advice to help with decisions about legal issues and lawyers. Also, we have some really exciting charity rebrand and website projects coming up too. “Last but not least, we’re always working on living out our company values to make a difference and enjoy the ride. So, as usual, we’ll have our summer team away day, canoeing along the River Wye, and other social activities to look forward to.” For the past 25 years, IE Digital has been helping values-driven brands to navigate the digital landscape and engage with their audiences. Experienced in interpreting user needs, IE helps its clients to solve problems, using the best tools for the job to create innovative digital experiences.
profile___________________________________________________45
DISCOVER A COLLECTION OF THE LATEST AND BEST TOOLS AND LIBRARIES THAT WILL POWER UP PROJECTS
46 _________________________________________________feature
Finding the right tool is less about your own skill level, and more about ɯǝƏɎɵȒɖȸȵȸȒǴƺƬɎȇƺƺƳɀ٫X˾ȇƳǣɎǣɀ best to be comfortable with a variety of tools, know their feature strengths and understand what can be utilised ɎȒȵȸȒƳɖƬƺɵȒɖȸȵȸȒǴƺƬɎƺǔ˾ƬǣƺȇɎǼɵ and top its truest output
Carl Cahill Founder & Creative Director of OutRoared http://outroa.red
feature _________________________________________________ 47
35 HOT NEW DESIGN TOOLS
InVision Studio Q invisionapp.com/studio
Many UI designers will love InVision Studio, especially if you’re already using InVision with tools like Sketch, as there’s quite a bit of crossover in features. However, Studio’s power lies in the prototyping department. This new tool by InVision is paving the way to be the only UI tool you’ll need, and will help you create beautiful interactive interfaces with a bucket-load of features. Features — like rapid prototyping, responsive and collaborative design, and working with design systems — are just the start of a suite of elements that are all available in one place. Rapid prototyping will allow you to create complex and imaginative transitions, enabling you to really achieve the level of animation you desire. Simply work out how you want to your UI to look at the start of its transition, and then
48 _________________________________________________feature
design the end result. InVision Studio works the rest out for you. On top of that, you can create these custom animations and transitions from a number of gestures and interactions like swiping, clicking, hovering etc. When you’re all done, export your prototypes through InVision and invite people to collaborate. You can view your project on its intended platform — a great way to explore and test your design. Clients will then be able to comment right onto the design, seeing away all those horrible emails filled with bulleted amendments to be made. Thank goodness! To top that, you can stop thinking about creating numerous artboards for multiple devices — responsive design can be achieved with a single artboard. This timesaver gives you space to think so much more about your design!
3 KEY FEATURES
1
RESPONSIVE BY DESIGN InVision Studio boasts its ‘best-in-class’ layout engine, allowing you to quickly and easily design, adjust and scale your vision to fit any screen or layout automatically.
2
PROTOTYPING Creating fluid interactions exactly how you want them is insanely good. Your prototypes will be high-fidelity, and you have an incredible amount of control over your animations and transitions.
3
COLLABORATE Studio’s connection to the entire InVision platform means instant collaboration for your whole team. Share components and designs with other designers and receive pinned comments from clients.
35 HOT NEW DESIGN TOOLS
Sketch Q sketchapp.com
Sketch is a popular tool within the design community, allowing you to create hi-fi interfaces and prototypes. One of the great features is Symbols, where you can design UI assets and elements for reuse. This helps create design systems and keep your interfaces consistent. Sketch is one design tool that is wonderfully simple to use, and is a highly trusted, frequently used asset much loved by designers. You can easily export your design into a clickable prototype and work with vector drawings and graphics. If you are an InVision user, make sure you check out the Craft plugin.
KEY FEATURE
SYMBOLS
Symbols are reusable assets which can be used dynamically. Perfect for buttons and form elements.
Adobe XD Orion Icon Marvel Q adobe.com/uk/products/xd.html
Q orioniconlibrary.com
Q marvelapp.com
Hype
Adobe XD offers the best environment for digital projects under the Adobe Creative Cloud collection of design tools. If you’re a keen Adobe user and new to XD, you may not find the interface very ‘Adobe’-like to begin with. However, it does stack up to the other leading tools out there. It is a jump if you’ve been designing in Photoshop for a while too, but very worth it for UI design.
Let’s jump to something a little different — but one for the armoury. Most of us will know that brilliant icon sets can always be hard to find. Even using the best stock libraries, icons can be a long old slog to find something you like. Not to mention that Font Awesome is wearing you down. If that’s the case, check this tool out! It is super helpful to find the right icons and to top it all, you can then manipulate the style of your icon, including choices of solid, line, colour and flat icons. Every icon is SVG and vector format with a bunch of controls to build your perfect set. Have a play — you will love it.
We’re back onto design tools, and Marvel is another one that’s great for producing quick ideas, refining an interface to how you want it to look and building prototypes. Marvel, as with many of the other applications, offers a really neat way of building pages, allowing you to simulate your design through a prototype. There are some wonderful integrations with Marvel for inserting your designs into your project workflow. It’s all online too, so no need for downloading applications.
Hype is an incredible application that will allow you to export stunning interactive and animated html5 layouts. This incredibly easy editor provides you with the functionality to breathe life into your designs. Static design is left far behind when using this, and it allows for incredible possibilities.
KEY FEATURE
ASSETS Control a library of assets that you can collaborate on with teams. ‘Change one, change them all.’
KEY FEATURE
COLLECTIONS Build collections for different projects where you can never forget what icons you used and how they were styled.
Q tumult.com/hype/pro
KEY FEATURE
PHYSICS Animate elements with natural movements and collisions without keyframes or code.
KEY FEATURE
USER TESTING This is new for most design tools, and definitely something to keep an eye on. Easily capture user tests in one place.
feature _________________________________________________49
35 HOT NEW DESIGN TOOLS
Figma Q˾ǕȅƏ٫ƬȒȅ
Figma is another design tool that allows you to quickly compose and design interfaces. The Figma platform prides itself on being a collaborative tool, whereby multiple users can work simultaneously on a project. This is very effective when you have multiple stakeholders in the project that are involved in shaping the outcome. It’s the kind of tool that would be ideal if you have a live project where a developer, copywriter and designer would need to work on something at the same time.
KEY FEATURES
MULTIPLAYER EDITING See how multiple designers can all design at the same time in the browser.
MockFlow Q ȅȒƬǸ˿Ȓɯ٫ƬȒȅ
MockFlow is a suite of applications that are helpful for a number of tasks in a project process. The Wireframe Pro app is a good prototyping alternative for you to use, especially if you are testing out some new ideas. If you’re happy to create wireframes alone, then take a look at MockFlow. It’s great for working on initial ideas and allows you to build basic layouts quickly, which is sometimes all you need to get thoughts into a presentable matter.
KEY FEATURES
SITEMAP
Sitemaps made fun and visual are always a plus!
Balsamiq Q balsamiq.com
If rapid wireframing is what you’re looking for then Balsamiq is a strong suggestion. You can quickly develop a structure and layouts for your projects with ease. Drag and drop elements make life easier, and you can link buttons to other pages. By wireframing, you can quickly start to plan your interfaces and share them with your team or clients. Sometimes simplicity is all you need and the apple polish is not necessary to convey your idea.
KEY FEATURES
UI COMPONENTS & ICONS Use a suite of ready-to-go assets to build quickly
Flinto Q˿ǣȇɎȒ٫ƬȒȅ
KEY FEATURES
AUTOMATIC ANIMATED TRANSITIONS
Design transitions between screens using Flinto’s Transition Designer.
50 _________________________________________________feature
Flinto is a design tool that allows you to create unique interactions within your designs. You can utilise a number of gestures, and make easy transitions by designing the before and after states. Flinto simply works out the differences and animates for you. That’s super helpful! Bear in mind that this is iOS only, but it will feel familiar when you start using it. There’s documentation online to help you on your way, and importing from Sketch is straightforward too.
35 HOT NEW DESIGN TOOLS
Proto.io Q proto.io
Proto.io is a top application that allows for the inception of lifelike prototypes that begin with rough ideas and end at fully fledged designs. The tool also provides you with a range of possibilities for your projects, including detailed and custom vector animations. You can start by developing initial ideas with a hand-drawn style, then work them into wireframes, and finish them off with a high-fidelity prototype. The Sketch and Photoshop plugins help if you want to design using other tools, but Proto. io handles the end-to-end design process well.
Other features — user-testing, for example — will help validate your designs. This is an all-in-one solution with a great number of trusted brands already using it. There are a bunch of great demos to start playing with, and you can really see just how easily this end-to-end solution could replace a number of tools currently in place. Proto.io has recently included an expanse of new features that compare nicely with many of the better prototyping tools. This includes some tasty features such as assets managers, along with developer guides and the ability to record your prototype.
3 KEY FEATURES
1
ANIMATION TIMELINE Taking control of transitions and animations in your design will really help achieve custom effects. The timeline will give you that opportunity.
2
SHARING It’s so simple to share your prototype with Proto.io. It’s great to see a community of Proto.io users sharing their work, and providing insightful ideas and suggestions. With your projects, sending a direct link to your project couldn’t be any simpler.
3
USER TESTING ‘Isn’t this what prototyping is all about?’ Test your prototypes all in one place, but also utilise a number of user testing partners for some serious testing.
feature __________________________________________________51
35 HOT NEW DESIGN TOOLS
Zeplin zeplin.io
12
Zeplin is a tool that fits in the post-design and pre-development stage alongside prototyping. It allows you to take your design and prototypes and hand them over to developers who are making sure that your ideas are executed well. It’s worth ensuring that you need it first. You can upload your Sketch, Photoshop, XD and Figma files to Zeplin and it will create an environment for developers and designers to send over the project without the tedious task of creating guidelines. This is wonderful for bigger product teams.
key feature
exPort sPeCs,Assets And Code sniPPets You can get all the specs, codes snippets and exportable assets you need from design files.
uXPin uxpin.com
16
Described as the ‘end-to-end’ UX platform, UXPin is really another design tool, but with a powerful ability to create design systems. This tool benefits larger design teams that need to work off the same styles and guides. It can save you time with product development when collaboration is key. key feature
ConditionAl interACtions, vAriAbles,exPressions Again, making the design more dynamic with wonderful logic.
Principle principleformac.com
18
Interaction design is what Principle is great for, especially with mobile applications. Tweaking and polishing animated interactions is a breeze with Principle. You can look at individual assets and how they independently animate, right down to timings and easing. This is another Mac-app only but lovely to use. key feature
AnimAtions Another lovely timeline display for animations. Principle was one of the early animation adopters.
ProtoPie protopie.io
19
‘Boost Sketch Capabilities.’ Anima is an awesome plugin if you want to start using Sketch for more sophisticated prototyping. For many Sketch users, this can be the missing piece to create really nice transitions and more complex UI animations.
This tool allows you to create complex interactions and get close to your design’s ideal end function. Perhaps the stand-out feature is the ability to control the sensors of smart devices in your prototype, such as tilt, sound, compass and 3D Touch sensors. Depending on your project, this is a great tool for those that want to encompass native app features. It’s easy as pie and no code is required.
key feature
key feature
Add video And AnimAtions to sketCh Oh yes! This tool really does add glitter to Sketch, unlocking the full potential for amazing prototypes.
sensors It’s beyond gestures — start playing with native sensors!
anima animaapp.com
13
Justinmind justinmind.com
14
This tool will help with prototyping, integrating with other tools like Sketch and Photoshop. You can choose your interactions and gestures to help assemble your prototype. It also contains UI kits, so you can put together screens quickly. key feature
resPonsive Simple and clean to see how your design will expand and contract through screen sizes.
atomic atomic.io
15
Previously, Atomic was just another interactive design tool that was used to create form elements you can actually type into. However, it seems like they have something on the horizon and have changed their directions. One to keep an eye on.
key feature
dAtA Import data and populate your designs. Let’s hope they keep this.
52 ��������������������������������������������������feature
fluid fluidui.com
you need but May have never heard of axure axure.com
17
Axure has always been one of the best wireframing tools on the market, great for complex projects that require dynamic data. With Axure, you can really focus on mocking up projects that are both technical and require key attention on structure and data.
20
Fluid is an easy and intuitive tool for building rapid prototypes and working up designs. It packs some nice out-of-the-box assets to get you going with rapid prototypes. Once you’ve upgraded, it’s really easy to assemble your own symbols with your own preferred UI assets.
key feature
sPeed Very fast UI design, with available assets for both high and low fidelity prototypes.
adobe Comp adobe.ly/2O5atZz
21
Adobe Comp is a nice addition for those that find themselves creating a concept on the go. Got a tablet with a smart pencil? This will be worth the download, in case in a moment of inspiration you want to conceptualise a layout.
key feature
key feature
dynAmiC Content Many other tools fall short of this type of dynamic data and content driven UI.
dynAmiC Content Get your Apple pencil ready, as this will help you quickly illustrate interfaces you want to get down on the screen.
35 HOT NEW DESIGN TOOLS
3 KEY FEATURES
Origami Studio QȒȸǣǕƏȅǣ٫ƳƺɀǣǕȇ
Being built and used by designers at Facebook would suggest that this must be a great tool. You’d be right. There’s a wonderful amount of features with Origami, including adding rules and logic to your interactions. How many times have you wanted a button to display or do something differently because of something else? There’s an opportunity to create a true-to-form prototype with Origami, though it’s very technical and requires some learning.
However, it’s perfect for developers and designers working together. Origami claims to be ‘a perfect companion to Sketch’ and will allow you to copy anything from Sketch and paste native layers into Origami Studio. You can then quickly adjust, add behaviour and animate your design. Block out a few days for this one, but the time could be worth it. This tool could really be something, and you know you can’t ignore something that has been built by Facebook. Right?
1
BUILD INTERACTIONS There’s an insane amount of control and possibility with building interactions in Origami. If you imagine how you would independently create a horizontal scroller in your prototype, you’d be scratching your head in most tools. Not here.
2
ADD LOGIC Again, most design tools don’t have this kind of power. You can create interactions and simply insert ‘or’ statements to help change the flows of your design. Great if you’re technically minded.
3
TIMED ANIMATIONS You’re not fixed to transitions — you can create a number of looping and timed animations with your design. Let’s say you want something to happen or repeat when you load a screen up; you can use this feature to achieve this.
FlowMapp
Adobe Capture ProCreate Q adobe.com/uk/products/capture.html
Q procreate.art
FlowMapp is an online tool for creating visual sitemaps and user flows, helping you effectively design and plan user experience with your projects. If you need to involve more thought around user flows, then this tool is worth a look.
Adobe Capture is useful to have if you want to quickly snap and create colour palettes, or trace vector lines from a photo. You can then quickly transfer your captures to other Adobe tools by using Adobe Cloud libraries.
Do you have an iPad Pro? This app is easily one of the best drawing apps out there. Typically, it can be used for rough sketches with clients to explain ideas or even to mock up and start off illustrations.
KEY FEATURE
KEY FEATURE
KEY FEATURE
SITEMAPS Create beautiful visual sitemaps that are adaptable for creating userflows.
SHAPE Feel like it’s just easier to draw a shape on paper that you want vectorised? Use Capture to help transform it.
EXPORT TO PSD Take your illustrations further and export a fully layered PSD. Super useful.
Q˿ȒɯȅƏȵȵ٫ƬȒȅ
feature _________________________________________________ 53
35 HOT NEW DESIGN TOOLS
TOOLS TO TWEAK YOUR PROJECTS Text Block
Q textblock.io
A javascript tool for adjusting size, leading and grades to cast continuously responsive typography.
Grid Lover Q ǕȸǣƳǼȒɮƺȸ٫ȇƺɎ
Fiddle with the font size, line height and scale factor sliders — then watch the typography dance.
Lunar Popup Q lunar.atomui.com
KEY FEATURES
MIXED DISCIPLINE DESIGN
Switch between vector, pixel and export modes.
Every Popup is beautifully designed, coded in html/css and seamlessly animated — ready to use on your website.
Material Design Q ȅƏɎƺȸǣƏǼ٫ǣȒٱƳƺɀǣǕȇ
Material Design is a visual language that synthesises the classic principles of good design with the innovation of technology and science.
ǔˡȇǣɎɵ¨ǝȒɎȒ QƏǔ˾ȇǣɎɵ٫ɀƺȸǣǔ٫ƬȒȅٱƺȇډǕƫٱȵǝȒɎȒ
Looking for an alternative to Photoshop or Illustrator? This is one for the pros, as Affinity pretty much covers everything and works superbly on desktop and devices. You’ll soon realise that this is PS and IA in one, and offers a great deal of features and power to enable you to create superb designs.
!ǼȒɖƳˢƏȸƺ!ȒǼȒɖȸ Q ƬǼȒɖƳ˿Əȸƺ٫ƳƺɀǣǕȇٱƬȒǼȒȸ
View a number of colour combinations in situ. This is super helpful in finding accessible colour combinations.
HTML Templates
Q htmltemplates.co Here’s a bucket load of html templates to get you kickstarted with quick projects.
Primer Q primer.style
GitHub fan? Use these Resources, tooling and design guidelines to produce stuff for GitHub.
Grid
QǕȸǣƳ٫ȅƏǼɮƺȇ٫ƬȒ Here’s a great Grid cheatsheet to speed up development. Simply click on your layout element and paste in your code.
Design DB Q ƳƺɀǣǕȇƳƫ٫ƬȒ
Shortcut your way into a design with loads of accessible design files and UI elements.
54__________________________________________________feature
£5
*
BIG SAVING SAVINGS ON OUR BEST-SELLING MAGAZINES SAVE
SAVE
SAVE
85%
83%
83%
SAVE
SAVE
SAVE
82%
83%
80%
For great savings on all of our magazines, see the entire range online
myfavouritemagazines.co.uk/spring192
Order Hotline 0344 848 2852 *TERMS AND CONDITIONS: The trial offer is for new UK print subscribers paying by Direct Debit only. Savings are compared to buying full priced print issues. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. Full details of the Direct Debit guarantee are available upon request. UK calls will cost the ɀƏȅƺƏɀȒɎǝƺȸɀɎƏȇƳƏȸƳˡɴƺƳǼǣȇƺȇɖȅƫƺȸɀ٢ɀɎƏȸɎǣȇǕȒȸא٣ȒȸƏȸƺǣȇƬǼɖƳƺƳƏɀȵƏȸɎȒǔƏȇɵǣȇƬǼɖɀǣɮƺȒȸǔȸƺƺȅǣȇɖɎƺɀƏǼǼȒɯƏȇƬƺɀ٢ǣǔȒǔǔƺȸƺƳƫɵɵȒɖȸȵǝȒȇƺɎƏȸǣǔǔ٣ِIȒȸǔɖǼǼɎƺȸȅɀ ƏȇƳƬȒȇƳǣɎǣȒȇɀȵǼƺƏɀƺɮǣɀǣɎيƫǣɎِǼɵٖȅƏǕɎƏȇƳƬِ
ǔǔƺȸƺȇƳɀבɀɎxƏɵِחא
Tutorials
Build a voice controlled UI The Speech Recognition API has landed in browsers, allowin ng you to convert speech to text for easy input into forms. Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 56__________________________________________________tutorial
Tutorials
W
e’ve seen many new APIs added to the web over the last few years that have really enabled web content to have the same kind of functionality as many apps have had for some time. A relatively new API is the Speech Recognition API which as you can probably guess, lets you use your text as an input onto the page. It requires a click to start the service and again to stop. A great case for this might be in allowing accessibility among your users, giving voice input as an alternative to clicking. If your analytics show that you have a lot of mobile browsing, then think how much easier it would be to speak into your phone than using the keyboard. There have been predictions that screen-based interfaces might start to disappear within ten years. At first this might sound like science fiction, but as users get more and more comfortable with speech as input through the likes of Alexa and Siri then it stands to reason that this will become pervasive as an input method. The tutorial here will get you up to speed on speech input and then use that to leave product reviews on a site.
1. Start the project From the project files folder, open the ‘start’ folder in your code IDE and open the ‘speech.html’ file to edit. All the CSS for the project is written as that isn’t the focus of the speech API, so add the link shown here to get the Noto Serif typeface and link up the CSS file.
2. Add the content The first elements of this will be to have a wrapper in which to hold all of our on-screen content. The first element in here will be a hidden message that tells the user if the Speech API is supported in the browser. This will only be seen if it isn’t. Then a heading tells the user that the form elements that follow will be used for their message.
4
<span id=”unsupported” class=”support hidden”>Speech API Not Supported Your Message:
3. Choose the results When using the Speech API there are two ways to display the content. In one, text displays when the user has stopped speaking and the ‘listening’ button is clicked off. The other shows words on screen as spoken. This first radio button allows for the final speech result to be shown. <span>Results:
4. Radio two The second radio button is added here and this one allows the user to select the text to be displayed as
they speak. These radio buttons will be picked up by the JavaScript later and used to control the speech input, but for now this allows the user to have an interface to control that.
5. Display the text The text that the user speaks into the page will need to be displayed on the screen. Here the text-area is added that has the id of ‘transcription’ — this will be targeted so that the user’s speech ends up here. There’s also a clear button to remove the text.
6. The last interface 5
The final interface elements are added to the screen now. The speech button enables and disables the speech, so it must be clicked before speaking. Clicking again stops it. As this is a relatively new interaction, the log underneath will tell the users what to do.
7. Add Javascript Now add the script tags before the closing body tag. This is where all of the JavaScript will go. The first two lines grab the page elements with the matching ID and store them in a variable. The transcription is the text result of the speech. The log will update the user with how to use. it <script> var transcription = document.getElementById (‘transcription’); var log = document.getElementById(‘log’);
8. Variable results Using the next few variables, more interface elements are cached into them. The speech button will become a toggle, letting users switch speech on and off., monitored by a Boolean, true/false variable. The clear-all button will delete unsatisfactory speech results.
Keep the user informed
As users are not familiar with text input, make sure you keep users informed on the screen with instructions for usage.
58tttttttttttttttttttttttttttttttttttttttttttttttttttutorial
var start = document.getElementById (‘speechButton’); var clear = document.getElementById (‘clear-all’); var speaking = false;
9. Is it supported? The first thing our code will do is find out if this speech feature is supported by the user’s browser. If this result comes back as null then the if statement throws up the hidden message, while simultaneously taking the start button away from the interface to stop the speech input. window.SpeechRecognition = window. SpeechRecognition || window.webkitSpeechRecognition || null; if (window.SpeechRecognition === null) { document.getElementById(‘unsupported’). classList.remove(‘hidden’); start.classList.add(‘hidden’); } else {
10. Start the recognition The speech recognition is started as the ‘else’ for the speech recognition being available. The continuous input is started as that is the default on the radio buttons. The ‘onresult’ function will handle the results of the speech input. This will be added into the transcription’s text field. var recognizer = new window.
SpeechRecognition(); recognizer.continuous = true; recognizer.onresult = function(event) { transcription.textContent = ‘’; for (var i = event.resultIndex; i < event. results.length; i++) {
11. Final or interim? The if statement now checks to see if the user wants to display the text as they are talking (interim) or only after they finish speaking (final). You will notice that if it’s interim, each word gets added to the text with the ‘+=’, while the final just dumps the whole text in there. if (event.results[i].isFinal) { transcription.textContent = event. results[i][0].transcript; } else { transcription.textContent += event. results[i][0].transcript; } } };
12. Handling errors As with most JavaScript APIs there is an error handler that will allow you to decide what to do with any issues that might arise. These are thrown into the ‘log’ div to give feedback to the user, as it is essential that they are aware of what might be going on with the interface. recognizer.onerror = function(event) {
Tutorials Build a voice controlled UI
Riding the new wave At the moment, browser support is still low for speech recognition. Checking the stats for this on Can I Use — caniuse. com/#search=speech —shows that there is only around 65 percent of browser uptake at the moment, and that is mainly confined to Chrome and Opera. This means that the Speech Recognition API is still very much in the experimental zone for your project. That doesn’t mean you should avoid this, as being on the crest of a new way to input for the web will allow you to be ahead of the curve, keeping your skillset at the forefront of what employers will be looking for. Your sites will be even more accessible and better equipped as further mobile support comes on board for this service.
log.innerHTML = ‘Recognition error: ‘ + event.message + ‘
’ + log.innerHTML; };
log.innerHTML = ‘Recognition error:
’ + ex.message; }
13. Start speaking!
15. Click to stop
The event listener here is started when the user clicks the button to start speaking. If the user is not speaking, then the button changes colour to show speaking has started, the variable for speaking is set to true and the ‘interim’ radio button is checked to see if this is the user’s choice for input.
Now when the user clicks to stop talking, the speech recognition is stopped. The button is changed back to green from red while talking. The user interface is updated so that the user is informed that the service has stopped. The speaking variable is set to false, ready to let the user speak again.
start.addEventListener(‘click’, function() { if (!speaking) { speaking = true; start.classList.toggle(‘stop’); recognizer.interimResults = document. querySelector(‘input[name=”recogniti on-type”][value=”interim”]’).checked;
} else { recognizer.stop(); start.classList.toggle(‘stop’); log.innerHTML = ‘Recognition stopped
Click to speak’; speaking = false; } });
16. Clear the text The final code for this section is just a clear button to remove the speech input text in case it is wrongly interpreted. Save the file and test this in your browser. You will be able to click the button to speak into the computer and see the results. clear.addEventListener(‘click’, function() { transcription.textContent = ‘’; }); }
14. Take the input The ‘try and catch’ statement now starts the speech recognition and tells the user that they should start speaking and that when they are done, ‘click again to stop’. The catch will pick up the error and throw that into the ‘log’ div so that the user can understand what might be wrong. try { recognizer.start(); log.innerHTML = ‘Start speaking now
Click to stop’; } catch (ex) {
16
tutorial ttttttttttttttttttttttttttttttttttttttttttttttttt 59
Tutorials Build a voice controlled UI
17. Add purpose Now as you have a working example, there needs to be some purpose to the interface, so let’s make this so that users can input reviews. Save the page and then choose Save As, with the new name of ‘reviews.html’. Add the following HTML elements just after the line. Product Reviews
18. Total Submission The previous code will hold the reviews. The user will need to submit their speech input, so add the submit button right after the ‘clear text’ button, which will be around line 28 in your code. Then you can move down to the JavaScript for the next step.
19. New interface elements At the top of your Javascript add the new variables to hold the references to the new interface elements that have just been added. These will provide you with a way to submit and display the results on the screen within the ‘reviews’ section of the page. var submit = document.getElementById(‘submit’); var review = document.getElementById(‘reviews’);
20. Submit the entry Now the code here will handle when the user
21
60 ttttttttttttttttttttttttttttttttttttttttttttttttttutorial
18
clicks the submit button, place this right before the ‘clear’ button code, which should be around line 88 in your code. First, a paragraph tag is created and the speech input is subsequently added into this. This will then be added into the ‘review’ section. submit.addEventListener(‘click’, function() { let p = document.createElement(‘p’); var textnode = document.createTextNode (transcription.value); p.appendChild(textnode); review.appendChild(p); let today = new Date(); let s = document.createElement(‘small’);
21. Final Submission The date is added so that the review is timestamped into the document. Finally a horizontal rule is added to show where each review ends, then the text is cleared ready for new input. Save the page and test this. You will see that you can now submit your speech into the page as reviews. For persistence you would need to use a database to store these results. textnode = document.createTextNode(today); s.appendChild(textnode); review.appendChild(s); let hr = document.createElement(‘hr’); review.appendChild(hr); transcription.textContent = ‘’; });
The number one destination for web design news, views and how-tos. Get Creative Bloq direct to your inbox with our weekly web design newsletter
Graphic design
Web design
3D
Digital art
www.creativebloq.com
Tutorials
Add animation While it can sound intimidating, you can get started in SVG animation with less knowledge than you think
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 62__________________________________________________tutorial
Tutorials
2
W
hen it comes to animating with SVGs, one major turn-off can be the idea of getting bogged down in JavaScript libraries. However, this doesn’t have to be the case. CSS can handle selecting individual paths within an SVG to create effects. Just knowing the basics can mean that it’s possible to turn flat, cliched icons into something a little more impressive. So perhaps it’s time to run through the fundamental steps of SVG optimisation and animation. When integrated into different designs, it doesn’t take long to realise that the possibilities are endless.
1. Create and save First, create an SVG to work with. For this tutorial, we will be using a simple graphic made in Illustrator. When using Illustrator to export an SVG reduce the size of the artboard to fit the graphic, then click ‘Save As’. Select SVG from the ‘save as type’ dropdown menu, then ‘SVG code…’ on the SVG Options dialogue. 4
2. Optimise for the web Cutting out unnecessary tags will make the image easier to deal with. This can be done manually by copying the code to your favourite editor and removing empty tags and metadata. Alternatively, a fantastic resource called SVGOMG at jakearchibald.github.io/svgomg will do this automatically. Paste the code into the ‘Paste markup’ area on the SVGOMG interface, then copy the image again using the button on the bottom right.
which will hold the SVG that we’ll be animating. To liven the page up, use a second, static, SVG as a background on the body tag.
5. Place the SVG We’re using our animation to make the introduction at the top of the page more interesting. Paste the optimised SVG code into the second column on the page. If using bootstrap, give the SVG the class ‘img-fluid’ to make sure it scales on mobiles.
3. Set up a HTML Document
6. Add classes to the SVG
Open your code editor of choice and set up a blank HTML document. We will write the CSS animation in a file called main.css, so create this too. To keep things focused on the animation, we’ve pulled in the CSS-only version of Bootstrap 4.1.3.
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
4. Build the layout Let’s build the bones of our layout and make a space for our SVG. We’ve added a header and two columns: one on the left for some text, and one on the right, 5
<svg> <path class=”rectText” d=”...” vectoreffect=”non-scaling-stroke” strokewidth=”.470476156” font-size=”12” fill=”#fff”
Don’t overdo it
While animation and movement can liven up a page, giving it the wow factor, be careful not to distract attention away from important parts of the user flow. Sublety is key
tutorial �������������������������������������������������63
Tutorials Add animation to SVG with CSS
9
fill-rule=”evenodd” stroke=”#fff” strokelinecap=”round”/>
7. Initial states Selecting our SVG elements in CSS is the same as any other element. We use our classes to select those elements within the SVG. Both parts of our SVG will start as hidden when the page loads, so let’s use CSS to set both element’s opacity to 0. path.rectText { opacity:0; } rect.rectBackground{ opacity: 0; }
8. Declare the animations 10
We need to declare the name and keyframes for each animation so that CSS knows what we want to do when we ask it to perform an effect. I’ve chosen textDraw and rectFade, as they describe each animation. rectFade will be a simple two-step animation. textDraw will have an extra middle step. @keyframes textDraw { 0%{} 50%{} 100%{} } @keyframes rectFade{ from{} to{} }
9. Assign animation and properties
13
We add the rectFade animation to the rectBackground element and give it a duration of one second. An easeOut cubic bezier is being used to give it a smoother feel. We add “forwards” so that the element keeps the properties of the last keyframe when the animation ends. rect.rectBackground{ opacity: 0; animation: rectFade 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; }
10. The rectangle animation With just two keyframes, all we need to do for our rectangle is set a start and finish set of attributes. Let’s start with a 1% width and finish on 100% to give an ‘expanding to the right effect.’ We can also set opacity: 1 to the last keyframe so the shape fades in at the same time. @keyframes rectFade{ from {
64 �������������������������������������������������tutorial
Tutorials Add animation to SVG with CSS
The next level Once you’ve mastered this form of SVG animation using just CSS, you’ll be able to apply it to many areas of your design. Limitations will start to pop up when you want a more complex way of triggering the start of the animation — creativity may also lead you to require more advanced functionality. This is a fast-growing area of web design and many options exist. Anime.js is a JavaScript animation library with an array of features and fantastic documentation. It works with CSS and SVGs in a similar way to what we’ve covered, making it the logical next step following this. Others include Lottie by Airbnb, which lets you export animations from Adobe After Effects and use them on a webpage with SVGs.
width: 1%; } to { width:100%; opacity: 1; } }
11. The text animation We’re going to create a line-draw effect on our text then use a fill to fade in. To set up the text animation we give it our ‘textDraw’ with a four second duration. The cubic bezier has been modified on this step to give it a slightly different pace of movement. path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; }
12. Delay the start Our text needs to run just as the rectangle has finished fading in. Because the rectangle has a one second duration, delay the start of the text animation by that time.
Your values will be different to mine depending on the SVG you are using. To find your value, use your preferred developer tools and increase ‘stroke-dasharray’ from 0 until the entire shape is covered by one stroke. path.rectText { opacity:0; stroke-dasharray: 735; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
14. First line drawing keyframe Now we have our one very large stroke that covers the entire text path, let’s offset it by its own length to effectively push it away. Using ‘stroke-dashoffset’ for the same value as our dasharray should do it. Let’s set this in our first keyframe. We’ll also make the shape fill transparent and set the stroke to white if it isn’t already.
No Illustrator, no problem
If you don’t have Illustrator on hand to create your SVGs, don’t worry. A free alternative is available called Inkscape. It has all the essentials, which can be used to follow this tutorial. Inkscape adds a lot of unneeded data to the file, so use SVGOMG to strip this out.
opacity: 1; }
15. Draw the lines Our middle keyframe appears at 40% through the animation. We bring the stroke-dashoffset back to zero so the dash covers the entire path. We can re-add the transparent fill at this stage to make sure the fill only appears once the drawing is complete. 40%{ stroke-dashoffset: 0; fill:rgb(255, 255, 255, 0.0);
0%{ fill:rgb(255, 255, 255, 0); stroke:#fff; stroke-dashoffset: 800;
}
16. Fill in the shape For the last part of the animation, we will fill the shape in white. All we need to do for the last keyframe is raise the alpha value of the fill colour. This creates the fade-in effect of the fill.
path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
100%{ fill:rgb(255, 255, 255, 1); stroke-dashoffset: 0; opacity: 1;
13. Emulate line drawing To get our line drawing effect we will use the ‘stroke-dasharray’ and ‘stroke-dashoffset’ parameters.
14
}
tutorial �������������������������������������������������65
Tutorials
Code a free site fast with Jekyll & GitHub Learn how to bring together static site generator Jekyll, CMS Siteleaf and get free hosting with GitHub
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 66 _________________________________________________tutorial
Tutorials
T
his tutorial is for people who have heard of JAMstack and are interested to see what it can do, or perhaps run a Wordpress blog and are sick of updates and potential hacking via malware. A basic knowledge of terminal is good. You should be able to follow along, as the commands are fairly simple. Sites on GitHub Pages are powered by Jekyll behind the scenes, so used along with GitHub Pages it creates a way to host and manage your website for free. This tutorial is for a Mac. Jekyll on Windows is possible, but not officially supported. For Windows, hop over here for help getting Ruby set up: jekyllrb.com/docs/installation/windows/ After completing this tutorial, you will have set up a GitHub pages account, created a Jekyll blog and published both by pushing through your terminal, as well as using Siteleaf for a real CMS experience. This tutorial is focused on connecting the three technologies as a platform to build your own site.
<meta charset='utf-8'> Home My first static Site!
4a
4. Clone Wars!
1. Install Ruby
5. Set up GitHub pages
Ruby should be installed by default on a Mac. Let’s check by typing ruby —v in your Terminal.
You need to turn on GitHub Pages, so go into Settings and select your master branch of the repo. You will now be able to see this at ‘username.GitHub. com/repo—name’.
2. Create a repository on GitHub If you already have a Git account head over to GitHub and create yourself a repo that is named with the following format: your—username.GitHub.io. It is really important that you get this name right!
3. Add some content Let’s create an index.html file so we can clone down the folder and get working with Jekyll. Click add file in your new repo and type the following code.
4b
The last step for connections will be to clone your GitHub Pages site down. We now have the link up ready so let’s get going with Jekyll. Move to the folder you are going to use for your site and type ‘git clone’ followed by the clone url from GitHub.
5
6. Set your custom domain (optional) If you have a personal domain name you can link this to your GitHub Pages site. To do this first add your domain to the GitHub Pages account in settings. Now go to your domain manager and create a CNAME record (or amend it) to point at your GitHub pages domain.
6
1
Getting to grips with Git
Git can be quite intimidating, but once you know a few commands it is a tool/facility you really can’t do without. We only use the bare minimum in this tutorial, you can learn more at GitHub.com
2
3
tutorial _________________________________________________ 67
Tutorials Code a free site fast with Jekyll & GitHub
10
11
12
14a
7. Install Jekyll
11. Frontmatter
Now we can actually get Jekyll running in the site. Make sure you are in the directory you cloned down and simply type ‘gem install jekyll bundler’. Your computer will go and grab all the needed dependencies to run a site.
Frontmatter is a snippet of YAML () at the top of a file. Jekyll uses it to hold variables. Look in the about.md file, and you can see that we set the title there.
8. Serve locally and build There are two main commands you will use with Jekyll: ‘serve’ and ‘build’. To run your site locally, type ‘jekyll serve’ in your command line. This will run a version on http://127.0.0.1:4000 that you can preview your changes on. NB if you already have gem and other dependencies installed on your machine, this command may fail due to a mismatch in dependency versions. In this case try ‘bundle exec jekyll serve’ instead. It runs the same, but with the word build compiles the site.
9. Get a headstart
14b
Jekyll — old faithful
Jekyll is one of the founding static site generators, launched in 2008. It is still the most popular, largely because of the adoption by GitHub. More recently generators such as Hugo, Eleventy and Gatsby mean there are more choices than ever.
68 _________________________________________________tutorial
Copy in the files supplied with this tutorial at this point to give you a basis to work from, or download them here: GitHub.com/maxray/jekyll/archive/ master.zip This will give us a homepage, blog list and the assets structure for the site. Refresh your page at http://127.0.0.1:4000 and you will see we now have some basic pages to build from. Let’s have a quick overview of how the Jekyll site works.
12. Liquid tags Liquid is a templating language that uses objects, tags and filters. We use the object tag surrounded by {{ }} to do this. If you look in the layouts/default.html file you can see how we output the Frontmatter from the previous step.
13. Building up pages We build pages in a similar way to how you might build a WordPress theme. We use includes for often used parts, for example the navigation, html for templates and, in this case, markdown files for posts.
14. Navigation Rather than a static navigation, we use the power of config files to separate the content from the template. Navigation.html has liquid tags for a loop through the navigation.yml file. We can just enter whatever pages and links we want now without going back to the template.
10. First stop — configuration
15. Blog list template
Open _config.yml in your text editor and add your own details. One key area to check is to set your base url. This is the folder that your site is loading in.
To create a list page, again we use liquid tags to give us the logic to loop through all the files in the ‘posts’ folder.
Tutorials Code a free site fast with Jekyll & GitHub
JAMstack Sites ‘Modern web development architecture based on client—side JavaScript, reusable APIs, and prebuilt Markup.’ — jamstack.org You may be familiar with the term LAMPstack to describe a traditional suite of technologies used for building a website. With the JAMstack, we don’t refer to specific databases or Operating Systems but instead the three areas that come together. It’s a new way of building websites and apps that can give performance gains and also improve the security of your site. So why would you consider using a JAMstack approach over a traditional website? s*NQSPWFEQFSGPSNBODF Pre—built HTML and assets and no databases make it perfect for using a CDN resulting in super quick page loads. s4FDVSJUZ JAMstack websites are incredibly secure, there are no databases to worry about or in the case of WordPress plugins to update or be exploited. s$PTU As you can see in this tutorial you can run a website for the cost of a domain name.
16. Styling it up
18
GitHub pages renders the sass files for us, so you can just build out as you normally would and then push your changes to master to publish them. No gulp files or Webpack here, just nice lean styles.
17. Push to master Now that we have a working local site if we commit this and push it back to our repo GitHub Pages will render the site for us. If you have never pushed a GitHub repo then it is worth reading up a little bit for the purposes of this example type:
git add --all git commit -m ‘First commit to jekyll site’ git push -u origin master
18. Set up a free Siteleaf account You may want to just use a standard content management system to blog. Some designers prefer it to a text editor. Siteleaf offers a free account for developers, and this will give you interfaces to use.
19. Connect to your repository After signing up for an account, you can then connect your repository to Siteleaf. Choose the repository and branch you set up earlier.
20. Test updates via the CMS Now you have everything set up, try editing a post in Siteleaf. You’ll see how it syncs back to the GitHub repo, updating your website.
19
20
21. Pull down changes If you now run ‘git pull’ in your terminal window, you will see the changes you made in the CSS updated into your local folder. You now have a two-way connection for developing your site locally or using a browser based CMS tool.
tutorial _________________________________________________69
web workshop
Code smart text effects with CSS Inspired by middlechildphilly.com/menu
Attention Grabbers Rollover links are a great way to grab the attention of the user. Always try to do something unusual and original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation. It’s a delight to the user.
Rollover effect
Happy service
Animated menu
A lot of the links on the site have a fun rollover effect, where each letter splits apart and rotates slightly through animation. The underline also animates off to the right.
The smiling face logo at the top of the page looks towards your mouse to see where you are moving. This is also the main interaction, but larger on the landing page.
Clicking the animated burger icon brings an overlay in from the top, while each navigation element drops into place one at a time.
Rollover menu
Always available
Each menu item on screen changes and highlights as the user rolls over. The picture to the left of it changes and updates accordingly.
Keeping customers in touch is key for a business. The floating ‘Call us’ button will open Facetime and connect users immediately.
70 ____________________________________________ workshop
Code smart text effects with CSS DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
Rising high What our experts think of the site
Bringing together many quirky effects allows the Middle Child site to show off it’s playful character while still providing a professional website for the catering company. The site’s playful image is engaging and elevates this against other catering sites. Mark Shufflebottom , Professor of interaction design
Technique 1. Rollover text effect One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags. Breakfast
2. Create CSS Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available. html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: grid; height: 100%; }
3. Position the word The ‘word’ class centres the word in the grid. Any text that is given the ‘word’ class can have this applied. The ‘up’ class is going to be applied to every other letter and these will move upwards.
4
.word { font-size: 3em; margin: auto auto; } .word .up { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; }
4. Up and over Now the ‘down’ class shares very similar settings to the ‘up’ but the hover shows the movement upwards for the ‘up’ rollover. Upwards is also rotated slightly to enhance the look. .word .down { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; } .word:hover .up { transform: translate3d(0px, -8px, 0px) rotate(12deg); color: #058b05 }
5. Hovering down When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans. .word:hover .down { transform: translate3d(0px, 8px, 0px) rotate(-12deg); color: #058b05; }
6. Automatic for the people It’s a bit of a hassle to have to put every letter in alternating spans with different classes, so we’ll automate the process by getting JavaScript to query the selector and take each letter. Here the ‘str’ variable grabs the current letter as it loops through the text. <script> var elements = document.querySelectorAll (‘.word’); for (var i = 0, l = elements.length; i < l; i++) { var str = elements[i].textContent; elements[i].innerHTML = ‘’;
7. Add alternating classes Now another loop places each letter in its own span element and adds either the ‘up’ or ‘down’ class to the spans. If you look at this in the browser you will see the text split by each letter up and down, while rotating slightly. for (var j = 0, ll = str.length; j < ll; j++) { var spn = document.createElement(‘span’); elements[i].appendChild(spn); spn.textContent = str[j]; let pos = (j % 2) ? ‘up’ : ‘down’; spn.classList.add(pos); } }
7
workshop ______________________________________________71
Tutorials
Capture visitor data Learn how to use the existing structure of Redux to store and maintain the validation state of form data
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 72 __________________________________________________tutorial
Tutorials
G
etting data out of a React form is not a straightforward task. The most common approach is to use controlled components – fields that have their values written to component state, which would then pass the state back when the form submits. While this approach works, it can get complicated very quickly. Having to write change handlers for each field is one thing, but other features such as validation or formatting have to be done separately and updated in parallel. One of Redux’s great benefits is that there is one application-wide state accessible anywhere it is needed. If we were able to access the form data at any point in the application, it opens up many different possibilities for future interactions. Redux Form is a package that supplies all this behaviour in one place. By hooking into an existing Redux store, form components write their data to the store as it changes. The package also takes care of making sure that data is validated and formatted correctly. The form will not submit if it is not. In this tutorial, we create the final piece of our Photo Share application, making a page the user can update their username on. By writing a custom component, the form can show validation feedback at the right time without having to deal with lots of event listeners.
2
4
1. Install dependencies Before we get started, we need to make sure all the project’s dependencies are ready to go. Aside from the usual React and Redux, this also includes the ‘reduxform’ package that is in charge of all the form logic we are going to use. Open up a couple of command line windows and install the dependencies for both the React app and the backend server. They both need to be running at the same time. > > > >
cd app yarn && yarn start cd server yarn && yarn start
2. Add to root reducer All of the benefits of Redux Form will happen in its own slice of the state. This is created by including the provided form reducer inside the ‘combineReducers’ method from Redux. Open up the root reducer at reducers/root.js. Import Redux Form’s form reducer and include it alongside the rest of the existing ones. import { reducer as formReducer } from 'redux form'; const rootReducer = combineReducers({ [...] form: formReducer, });
3. Build out the form We are going to be making the form that lets the user edit their username. Head to /user in the browser to see where this form will go. The form component itself lives inside components/ forms/User/User.js. Add an outline of the form to the existing User component there. This will be enhanced with Redux Form throughout the rest of the tutorial. return ( );
4. Connect the form to Redux With the form in place, we now need to hook it up to the store. Redux Form uses a higher-order
component to link the two together. The ‘reduxForm’ function takes a set of configuration options and returns a component. This component can be wrapped around our form to initialise a connection between them. Update the default export to use this function. The name we pass in is a unique reference to this form inside the Redux store. export default reduxForm({ form: 'user' }) (User);
Keep forms separate
It may be tempting to have submission logic and other Redux data source inside the same file as the form itself, but keeping them separate makes things clearer and more straightforward to test.
tutorial _________________________________________________ 73
Tutorials Capture visitor data with Redux Form
5. Convert to Field By default, Redux Form cannot see any form elements. It uses the special component that renders its own elements with the necessary checks and hooks required to make everything work. Replace the element with the component from the Redux Form package. The ‘component’ prop defines an element to render. Any other prop is then passed to that component.
6. Pass submission function Forms in React will always submit their values using a passed ‘onSubmit’ prop. These forms are no different, but require a slightly different method in order to hook into the Redux Form ecosystem. By passing them a ‘handleSubmit’ prop, Redux Form wraps its own behaviours around the function. Use this prop to submit the form instead.
Validate with props
Rules can be applied directly on the component itself using the ‘validate’ prop. This can be useful for common repeated rules, such as if a field is required.
10
74 __________________________________________________tutorial
7. Handle form submission The form isn’t currently passed this submit function yet. Open up the container at components/ container/UserForm/UserForm.js and add it in. As the container is connected to the store, we can use our existing thunk-based approach to submit the data. Hook up ‘handleSubmit’ to call the ‘submitUser’ thunk action.
export const submitUser = values => (dispatch, getState) => { dispatch(submitUserStart()); const user = getCurrentUser( getState()); return axios .patch(`http://localhost:3001 /users/${user.id}`, values) .then(({ data }) => dispatch( submitUserSuccess(data))) };
9. Update local username handleSubmit(values) { return this.props.submitUser(values); } render() { return ( ); }
8. Create submitUser action The submitUser function itself is similar to the existing submitComment action creator. We get the current user ID and submit a PATCH request to the backend to update the username. Once that’s successful, we dispatch an action to let the rest of the application know. Open up actions/user/user.js and add the action creator.
Even though we have changed our username on the form, it still has the old username at the top of the page. When the form successfully submits, we dispatch our own ‘SUBMIT_USER_SUCCESS’ action containing the new username. We can pick this up in a reducer and update the data. Open up reducers/user/user.js and add a case to handle this action. case SUBMIT_USER_SUCCESS: return state.set('name', action.payload.name);
10. Create a custom component While our input works, it does not yet have any styles. Instead of applying some directly to each field we would make, we can use the power of React components to our advantage. By using a shared component across all test inputs, any updates we make will benefit every field that uses it.
Tutorials Capture visitor data with Redux Form
When is best to validate? Form validation is useful when performed in the right way. Having feedback displayed on each keystroke can distract the user rather than aid them. Similarly, waiting until submission can be too late if the form has many fields that may need correcting. It is generally better to wait until the field loses focus before displaying any issues. For smaller forms such as a log in, it may be more efficient to wait until the user submits. Most importantly, any validation should be clear as to what the user must do to fix it. For complex rules, such as an enforced password strength, the displayed error could show more granular detail that is updated on each keystroke. With Redux Form, validation is constantly happening whenever the content changes. We can decide the conditions on which to show it to the user — whether that is on blur or on submit.
Add a generic input inside the component at components/presentational/TextInput/TextInput.js.
11. Make use of new input With the component ready to go, we can now add it to the form. Redux Form’s component takes care of much of the heavy lifting, including passing the ‘onChange’ and ‘value’ props. Back inside components/form/User/User.js, replace the existing input – label included – with the custom component.
12. Setup validation No user can be without a username. We want to catch when the user tries to submit the form with a blank field. Redux Form takes a validation function that is constantly checked every time the values change. It provides any error messages that we need to show. Add the
‘validate’ function as part of the setup to the form.
14
export default reduxForm({ form: 'user', validate })(User);
13. Define required rule The function receives the values from the form as an argument. We can check the values and apply some rules to what they should be, and return an object containing any violations using the field’s name as the key. Check the name field and return an error if it isn’t set. export const validate = values => { const errors = {}; if (!values.name) { errors.name = 'Required'; } return errors; };
14. Show validation error The component picks up the error from the validation function and passes it to the component as an ‘error’ prop. We can then show this to the user so they know why they can’t submit the form. Back inside components/presentational/ TextInput/TextInput.js add the error underneath the input. Check if the field is invalid first using the ‘invalid’ boolean prop also passed down.
const showError = invalid; [...] {showError && <span className=' text input__error'>{error}}
15. Hide error until touched If we refresh the page, we can see the field already says ‘Required’ even though we haven’t had a chance to add anything to it yet. We should wait until there’s some kind of interaction first. Redux Form provides a selection of status props to the input component alongside ‘invalid’, including ‘dirty’, ‘visited’ and ‘touched’. These can all be used to signify interaction. Update the ‘showError’ check to see if the field has been touched. const showError = invalid && touched;
16. Enable touched prop 13
By default, Redux Form will not mark any field as touched. We need to define what ‘touched’ means before it has any effect. Add ‘touchOnBlur’ to the form setup inside components/form/User/User.js. The other option is ‘touchOnChange’, which will only mark it as touched as soon as the field value is updated. export default reduxForm({ form: 'user', touchOnBlur: true,
tutorial _________________________________________________ 75
Tutorials Capture visitor data with Redux Form
Alternatives to Redux Form While Redux Form is great at managing large forms alongside Redux, it is a heavy tool that may be excessive for smaller applications. What alternatives are there that can help construct forms? The similarly named React Redux Form is another tool that keeps form data in sync with Redux. Reducers are set up for each form with components binding their values to their data. While functional, this package is now in maintenance mode and will not get any new features. When working with lots of smaller forms, it may not make sense to connect them to the Redux store. Formik is a tool that uses supplied React components to contain the state of the store. Other components link their inputs to the state without having to manually create handlers. Other configuration, such as validation, are passed through as props.
validate })(User);
17. Handle submit failure If we try and save our username as ‘Lauren’ nothing happens. We cannot have two users with the same username and Lauren is already taken. We should surface that error on the form for the user. Forms managed by Redux Form will also be given an ‘error’ prop. Show this value after the <Button> component. {error && {error}}
export const getInitialValuesForUserForm = state => ({ name: state.user.name });
20. Pass initial values to form To keep everything separated, the initial values need to get passed to the form container before hitting the form itself. Use the mapStateToProps method inside components/container/UserForm/UserForm.js to insert the values, then pass it to the form itself.
18. Return a SubmissionError If the ‘handleSubmit’ promise rejects, the form will be told the submission failed. Right now we ignore submission errors, so the promise resolves instead. Redux Form provides a special ‘SubmissionError’ throwable error that can reject the promise and provide the reasons why back to the form. Update the ‘submitUser’ action creator promise inside actions/user/user.js to throw this error if unsuccessful. The ‘_error’ property will apply this error to the form. .catch(() => { dispatch(submitUserError()); throw new SubmissionError({ _error: 'Could not save details' }); });
19. Generate initial values This form initialises with a blank field. As users will already have a username, it makes sense to pre—fill this field with this data. As this data already lives in Redux, we can use a selector to pull it out for the form. Make sure the keys of the returned object match up to the field names and Redux Form does the rest. Open up selectors/user/user.js and create that selector.
76__________________________________________________tutorial
[…]
export const mapStateToProps = state => ({ initialValues: getInitialValuesForUserForm(state) });
21. Allow reinitialisation The existing username still doesn’t appear if we land on this page first. When the form initialises, the username is undefined. It only comes through once the username has loaded in asynchronously. In order to update the form for this situation, we need to add a final piece of configuration to the form’s options. This would allow the form to reinitialise when the initial values update. Reopen components/forms/User/User.js and add ‘enableReinitialize’ to the options. export default reduxForm ({ enableReinitialize: true, form: 'user', validate, 19
Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes
Tutorials
Test your JS with the Jest framework Finding the right JavaScript unit testing frameworks is not easy. But Jest is different. Find out how to use it today
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 78__________________________________________________tutorial
Tutorials
C
lassic JavaScript testing frameworks saw the light in a different time and age: Addy Osmani had barely started work on his collection of objectoriented programming patterns, while large frameworks such as Angular or React were unimaginable. Back then, ‘simple’ case-based comparative engines worked well enough — checking the output of a computational engine or a bit of glue code does not require much thinking. The Jest developer team is a strict adherent to the idea of zero configuration. This makes the framework easy to bring up as long as a package manager like NPM or YARN is available. Another aspect is the wide-ranging extensibility, which makes adding new functionality to the framework a breeze. Finally, Jest integrates itself into various version control systems like Git and Mercurial. This process is beneficial in that it provides Jest with an overview of commits and eliminates unneeded test runs. Surprisingly, all of this does not come at a significant price in terms of performance. Comparative evaluations attest the product to have market-leading performance — the times of limiting unit test scope due to CPU constraints should be over for Jest users.
1. Install YARN While Jest can also live inside a NPM environment, all of the documentation is based on YARN. Fortunately, adding the product is easy on Unixoid operating systems — the developer team provides a wellmaintained package repository. Users with a non-Ubuntu operating system should look at the installation page shown in the figure and found at YARNpkg.com/lang/en/docs/ install/#debian-stable. tamhan@tamhan-thinkpad:~$ curl -sS dl.YARNpkg.com/debian/pubkey.gpg | sudo apt-key add tamhan@tamhan-thinkpad:~$ echo 'deb dl.YARNpkg.com/debian/ stable main' | sudo tee /etc/apt/sources.list.d/YARN.list tamhan@tamhan-thinkpad:~$ sudo apt-get update && sudo apt-get install YARN
2. Create a project YARN and NPM behave similarly when package management is concerned. In both cases, a new
1
project must be generated — after that, the Jest-related components can be added. Simply follow the steps outlined — the default values provided by the wizard are acceptable.
{ . . . 'devDependencies': { 'Jest': '^24.1.0' }, 'scripts': { 'test': 'Jest' }
tamhan@TAMHAN14:~/YARNspace$ YARN init YARN init v1.13.0 question name (YARNspace): Jesttest question version (1.0.0): . . . success Saved package.json Done in 7.82s. tamhan@TAMHAN14:~/YARNspace$ YARN add --dev Jest YARN add v1.13.0 . . . ٽڃ[email protected] Done in 8.61s.
}
4. Perform a dry run At this point in time, YARN is ready to run. Enter YARN test to invoke the element added to the script tag above, and feast yourself on the error shown in the figure. Jest finds test files by analysing the file names — if no matching file is found, test case execution terminates with an error.
5. Write some logic…
3. First test! While Jest can be run from the command line, opt for build flow integration. YARN-based projects offer an option that contains a package.json file, which is to be modified as outlined in the code snippet accompanying this step. 4
Writing unit tests — logically — requires code to be tested. Create two simple mathematical functions and a string returner, which are to be placed in the file tam.js and look like the code with this step. function sayHello() { return 'Hello'; } function add(a, b)
Modern Unix, beware Very recent versions of Ubuntu (around 17.xx) face issues when installing YARN. Further information and advice on mitigation can be found by examining the issue at github.com/ YARNpkg/YARN/issues/2821.
tutorial _________________________________________________79
Tutorials Test your JS with the Jest framework
8
7. Understand the situation at hand
{ return a+b; } function divide(a,b) { return a/b; } module.exports = sayHello;
6. ...and test it A look at the error output shows that Jest uses the expression ‘**/��tests��/**/*.[jt]s?(x),**/?(*.)+(spec|test). [tj]s?(x) ‘ to find test candidates. Thus, a smart test file would be called tam.test.js — for now, the simple content shown in the code accompanying this step shall suffice.
const tam = require(‘./tam’); test(‘Checks if Tam is friendly’, () => { expect(tam()).toBe('Hello'); });
Floating point trouble
If you ever find yourself wanting a specific precision, feel free to use dedicated maths libraries. These products use integers to emulate floating numbers – a slow but arbitrarily accurate process.
80 �������������������������������������������������tutorial
Jest expects test cases to be provided in dedicated files. Due to the product being targeted at modern object-oriented code bases, the code to be tested usually comes in the shape of a module. The actual value comparison is then performed using matchers that are similar to other frameworks.
8. Run the test Finally, order another execution of the test cases via the YARN package manager. It will yield the results shown in the accompanying figure — as our test case is simple, execution is accomplished quickly. tamhan@TAMHAN14:~/YARNspace$ YARN test YARN run v1.13.0 $ Jest PASS ./tam.test.js
9. Structured test execution Some tests can only be run after a more or less elaborate set-up routine has run its course. Jest accomplishes this via the before and after function. A beforeEach call runs before each test case. A beforeAll method is run once the test suite starts up. beforeEach(() => { initializeCityDatabase(); }); afterEach(() => { clearCityDatabase(); });
beforeAll(() => { return initializeCityDatabase(); }); afterAll(() => { return clearCityDatabase(); });
10. A surprising situation Now that our strings check out, it is time to test the arithmetic functions. For that, the exports of tam.js need to be adjusted. The following two test cases are ready to fail, with the result shown in the figure. module.exports.add = add; module.exports.divide = divide; const tam = require(‘./tam’); test(‘Checks if we can add’, () => { expect(tam.add(2,2)).toBe(4); }); test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)).toBe(0.333333333); });
11. Account for imprecisions Like most other programming languages, the JavaScript runtime uses floating number mathematics. This means that non-integer numbers cannot always be expressed with infinite accuracy. Working around the problem requires the use of a different matcher. When dealing with floating numbers, using toBe is generally not advised.
Tutorials Test your JS with the Jest framework
Harness the power of the command line Jest tests can also be run outside of a package manager. In this case, the Jest command line utility must be used — it can only be run when installed globally using either NPMs or YARN’s global install feature. Once installed, visit Jestjs.io/docs/en/cli. Jest’s developer team provide command line users with dozens of options intended to tailor execution scope to the needs of the task at hand. Entering ‘Jest --findRelatedTests path/to/fileA.js path/ to/fileB.js’ runs only those tests which touch the content of the files passed in as arguments. In addition to that, the command line tool can even analyse local repositories and run only these tests affected by currently uncommitted code.
test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)). toBeCloseTo(0.333333333); });
12. Run just one Should you ever feel like running one test, feel free to use the test.only function. It informs the runner that all other test cases are to be ignored — helpful and time-saving as your unit test suites grow.
of required attributes. Jest’s logic takes the snapshot’s contents and performs an analysis against the object returned — errors will be raised if a mismatch is detected. For the following steps, start out by placing the code shown next to this step inside of tam.test.js.
const user = { createdAt: new Date(), id: Math.floor(Math.random() * 20), name: ‘Tam HANNA’, }; expect(user).toMatchSnapshot(); });
it(‘is a small test’, () => { 14
test.only(‘this will be the only test that runs’, () => { expect(true).toBe(false); });
13. Understanding snapshots As JavaScript object orientation entered mainstream developer conscience, more and more code adopted OOP principles. Sadly, verifying the correctness of objects gets tedious quickly — checking each and every member’s value by hand leads to long and difficult-to-handle test code.
14. Content analysis Think of snapshots as a template containing a set
tutorial ������������������������������������������������� 81
Tutorials Test your JS with the Jest framework
15. Find the snapshot file
15
When Jest encounters a new snapshot-related object, the runner generates an additional snapshot file and displays the message shown in the figure accompanying this step. As our object contains a randomly generated value, subsequent executions of the test suite will (usually) fail with date and ID mismatches. tamhan@TAMHAN14:~/YARNspace/__snapshots__$ ls tam.test.js.snap // =============== FILE gedit tam.test.js.snap =============== // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = ` Object { 'createdAt': 2019-03-07T09:03:37.980Z, 'id': 12, 'name': 'Tam HANNA', } `;
16. Limit analysis accuracy One way to work around the problem involves the use of ‘scoped’ matchers. They differ from their normal colleagues in that they accept any value of a given type — in our case, both createdAt and id should be handled by these smart elements. expect(user).toMatchSnapshot({ createdAt: expect.any(Date), id: expect.any(Number), }); });
17. Update the snapshot file Sadly, running the program in the current state does not improve our situation. This is logical, as the snapshot files are still out of date. Simply enter ‘YARN test -u’ and look at the updated contents. The -u command can also be used to update outdated snapshots in general — keep in mind that Jest will consider whatever values it may find during the test execution. // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = `
Object { 'createdAt': Any, 'id': Any, 'name': 'Tam HANNA', } `;
18. Create a configuration file Jest is not limited to working with the default environment settings. Invoking Jest --init from inside the YARN environment launches the set-up wizard shown in the figure accompanying this step. It allows you to set up various options related to the test execution environment.
19. Async waiting JavaScript unit test frameworks usually have a hard time running unit tests against asynchronous code. Jest stands out in that it accommodates waiting for you — in the example below, the done callback can be used to ‘wait’ for a result: test(‘the data is peanut butter’, done => { function callback(data) { expect(data).toBe(‘peanut butter’); done();
} fetchData(callback); });
20. Use mock functions Another extremely useful feature involves the use of mock functions. They can be submitted in place of a callback, and return data about the invocations.
const mockCallback = Jest.fn(x => 42 + x); forEach([0, 1], mockCallback); // The mock function is called twice expect(mockCallback.mock.calls.length).toBe(2); // The first argument of the first call to the function was 0 expect(mockCallback.mock.calls[0][0]).toBe(0);
21. Learn more Jest is an extremely complex framework which can not be covered in a single issue of Web Designer. Visit Jestjs.io/docs/’Jestjs.io/docs/ on a non-Mozilla browser to find out more about the possibilities related to frameworks such as React. 18
82��������������������������������������������������tutorial
MASTER ARCHVIZ WITH 3D WORLD We uncover the latest trends and key techniques
SUBSCRIBE to receive KitSound Harlem Wireless Headphones!
VI O RAININ WI H HI I U
www.bit.ly/3dworld-app PRINT www.myfavouritemagazines.co.uk/3dwsubs NEWSSTAND FOR IOS
Issue 246 on sale now
84 _________________________________________________feature
s the wait for a solution that combines the discoverability and frictionless entry of the web with app-like performance and user engagement finally over? For many years, native apps have had the edge when it comes to delivering well-performing, engaging user experiences. Yet app stores present a barrier to entry that fails to match the much broader reach of a search-driven mobile web. Progressive Web Apps (PWAs) and Single Page Apps (SPAs) give developers the technical capability to elevate web performance, while Performant Design principles give designers the tools to craft engaging app-like user experiences that exceed all expectations of what’s possible on today’s web. The web has a number of key advantages that line up with the shortfalls of native apps, one being the capability of search engines to search content rather than simply the name of the brand as in the App Stores. But even with its frictionless barrier to entry, the web has traditionally found it difficult to rival native apps in terms of where users like to spend their time.
Evidence of a swing away from native towards the web is popping up all over the digital landscape (pwastats.com). Major brands are recognising a need to improve their mobile offering and face a decision on whether to invest more in their native app or to concentrate their efforts on either improving their responsive site or opting for a hybrid web app solution like PWAs. Flipkart (.flipkart.com) saw a need to reach potential customers in cities where less phone storage is not unusual. In removing the requirement to download an app, 60 per cent of customers who had previously uninstalled the app returned to use the Flipkart PWA (bit.ly/2vOsG53). Brands choosing to invest in the mobile web are also seeing a positive increase in metrics of user interaction and engagement. Tinder’s PWA saw load times cut in half (bit.ly/2pTSw7R) compared to its native app, resulting in longer session times, more messages and more swiping. So what is it about PWA and Single Page Apps that has seen them enjoy such gains in the realm of performance and user engagement, compared to native apps and responsive web design?
feature _________________________________________________85
oogle’s endorsement of web-based applications goes back over a decade. In 2009, VP of engineering Vic Gundotra heralded the web as “the dominant programming model of our time” ( ly/2U9SnYF) in relation to HTML’s ability to match previous advantages of hardware-based development. This backing continued to 2016 where Google’s platform refurbishment took the form of pushing Progressive Web Apps (PWAs), user experiences they claim are reliable, fast and engaging (bit.ly/1nlXeEV). So what do they have to offer?
Service workers enabled Konga to send 63 per cent less data for initial page loads, and 84 per cent less data to complete the first transaction
Service workers are JavaScript written client-side proxies that give developers more control of the cache. By pre-caching certain resources, it eliminates dependency on the network, allowing the app to load from the user’s home screen instantly, even in uncertain network conditions. Security has historically been a trump card of enclosed native applications. If web apps were to ever rival native in this trait, the user must be offered a secure connection wherever they choose to browse, hence why HTTPS is a requirement of PWA. Again, signs of heavy Google-endorsement are clear to see. Its search algorithm will prioritise HTTPS over sites with a Secure Socket Layer (SSL). Only secure mobile sites are candidates for Accelerated Mobile Pages (AMP) (bit.ly/2VldGGR), and since Chrome 56, a ‘not secure‘ label appears next to any URL that is not served over HTTPS. This gives the web a visible layer of trust that is otherwise hidden in native apps — an edge set to become increasingly important to today’s users seeking understanding and control of the flow of personal data.
86 _________________________________________________feature
Service workers and modern development processes pay dividends when it comes to improving a web app’s first page load. But where PWAs really come into their own is in the loading of subsequent pages. The service worker caches the app shell and other assets on install, instantly displaying content to users while they browse rather than making a request for new content on each following page load. This brings page load times down to insignificance. A recent report from Mobify (bit.ly/2UdeNIA) states the median successive page load time for a PWA is 1.4 seconds. The industry average is 6.2 seconds.
Progressive web apps can be installed to a user’s home screen without going through an app store. These installed apps then adopt features that make them indistinguishable from a native app. They load from an app icon into a rich full-screen experience without the distracting omnibox or browser controls, allowing designers to build in their own app-style navigation (bit.ly/2zILXJO) exclusively for this immersive experience.
With the help of a web app manifest file, PWAs appear in all the areas you’d expect a native app to appear. This includes the app launcher, settings app and task switcher. Any links to the website from external sources open in the installed app, and even users signed up for push notifications, can access those in the same places as their other app notifications.
Gmail is one of the most—used single page web w applica ations
ack in the web’s early days, it was normal for Multiple Page Applications (MPAs), built-in static HTML and server-side technology like PHP, ASP and Python, to drive user navigation through multiple client/server requests. As user experiences have grown in complexity, so have the demands they put on the servers. One of the web’s earliest forays into Single Page Apps (SPAs) came in the early 2000s with AJAX. This allowed web pages to run multiple updates without reloading, reducing the number of requests servers were processing and users were waiting on. After that came a string of JavaScript frameworks including JQuery and Backbone.js, a move away from JavaScript entirely with Flash and Silverlight, before coming full circle in 2010 with the release of the robust Angular.js and later React.js. The common idea across all these evolutions was that a web ‘page‘ could hold more conversations with its users outside of the standard web of hyperlinks to additional pages. Today, Single Page Apps dominate our most used web applications — Facebook, Twitter, Gmail and Google Docs to name but a few. These richly interactive apps are a far cry from the hyperlinked HTML documents of the past, and show how SPAs can deliver complex, highly performant experiences to web users.
Since HTML, CSS and script files are downloaded and parsed just once throughout the app’s lifespan (only data is transmitted back and forth,) users transitioning between ‘pages‘ in Single-Page PWAs can do so much faster than in a multi-page solution. By
reducing the number of ‘white flash‘ interruptions for the user where no content is visible, SPAs have more control to smooth out page transitions and maintain user attention, providing visual continuity and positive feedback to their interactions.
One benefit to operating under a single server request is that the same data existing between two pages/states can be displayed instantly without interruption. An app-like sticky header is a common way web apps maintain user context through persistent UI. We also see this in commerce PWAs, where a user transitioning from a list of products to a single product in full detail can see the product name and image from the previous page. Reusing product data in this way, instead of displaying a black screen while that data is fetched and rendered, creates a faster, smoother loading experience for the shopper.
The Debenhams PWA is able to take data, such as product name, from the listing page and immediately display it on the product detail page while the other assets are loading.
Whether it be finding a specific piece of information or browsing multiple information sets, most users arriving at a site are looking to complete a task quickly, especially on mobile. For every two additional seconds of load time, the number of users leaving the site (bounce rate) goes up to 50 per cent, and for every extra second it takes for a page to load, the number of users reaching the end of that task (conversion rate) falls by 12 per cent. The combination of faster load times, fewer server request interruptions and increased visual continuity means that users in SPAs take less time to move through and complete tasks faster than in MPAs.
feature _________________________________________________ 87
This demo of SVGOMG shows 60 per cent + savings from optimising artwork markup.
ith PWA and SPA, developers have the technical tools to deliver fast and engaging web experiences, rivalling their native counterparts. But there exists a missing piece of the puzzle, a catalyst that can propel a high-performing web app to a hyper-performant, best-in-class user experience. This ingredient is found through considering performance a fundamental principle of the UX and visual design process. This is Performant Design. A delay between 300 and 1,000 milliseconds makes the user feel like a machine is working, but they begin to mentally context-switch above 1,000 milliseconds. Anything that provides the content faster will result in a more positive engagement.
Load times can be significantly reduced by Lazy Loading offscreen elements. This deconstructs the initial payload to render content that is in view first. Images and other heavy elements load later in the sequence, or as the user scrolls. Lighthouse is a Google tool full of actionable insights that help designers and developers optimise performance in fine detail across the loading spectrum.
Downloading custom fonts cost around 200–500ms on 3G connections. Letting the device handle font rendering by using system fonts ensures text loads instantly, and using variable fonts offers typographic variation without forcing the user to
88 _________________________________________________feature
download fonts in multiple weights. Check out variable fonts in action at v-fonts.com.
Exporting vector icons and illustrations often adds a lot of unnecessary bloat to the file. This can be cleaned up considerably, reducing a site’s image payload and giving the user quicker access to key icon-based navigation and signposting. Coming from Google’s Development Team, SVGOMG is a useful tool to help optimise SVGs.
The task of optimising images is a job that holds space in both the design and development process. The art of image optimisation comes from the human eye judging the compression tool’s impact on image quality. Several algorithms and rendering techniques can significantly reduce the size of an image in ways that are invisible to the naked eye. The Google Chrome team introduced Squoosh to help in both these processes. This powerful web-based image compression tool puts high-resolution visual comparison to the forefront, while giving users access to all the complex behind the scenes compression options.
Delays of less than 100 milliseconds still feel instant, but anything above that is perceptible. When it comes to optimising speed, it’s what the user perceives that really matters, which is what makes designing for those in-between states integral to delivering hyper performance.
Squoosh demonstrates how huge file savings can come without compromising image quality.
Content placeholders, or skeletons, are used to construct a preloaded version of a page while content is loading. They not only prevent jagged and disruptive ‘reflows’ — where rendered elements are pushed out of view by subsequent items loading in their place — they can also make users believe the page is loading quicker than it really is. When implementing skeleton screens, content should be rendered as soon as it is ready, rather than blocking it until everything is ready to show. Which works best? Which one feels faster? An app where the user has no indication when the content is coming? Or one that uses staggered loading animations, skeleton screens, frosted images and metadata on content? These two examples may take the same amount of time to load, but the user perception of length is completely different. Using a spinner shows no indication of when the page will be finished loading. Brief animations, on the other hand, can mask the loading transition and imply that the system is ‘progressing ‘ rather than ‘processing.’ We all want to see reaction to our actions, and it’s no different on the web. Smooth scrolling, silky animations and tap feedback states all help to increase a user’s perception that the experience is responding immediately to their touch. Considering tap, hover, loading and passive states all help to simulate a performant experience, Google’s Material Design (material.io/design/interaction/states.html) provides guidance of how to effectively craft all these states. Today’s user is impatient, and the more you make them think, the more likely they are to go elsewhere to get the job done. Clarity and simplicity are therefore key components of any highly performant web experience.
When motion is used effectively it helps inform users and guide the their next step.
feature _________________________________________________89
PERFORMANT DESIGN IS FOR EVERYONE As you might expect, accessibility principles will improve the overall usability of any web app that incorporates them
Q MINIMUM TAP TARGETS Ensuring a minimum tap target of 44—52px ensures enough space is present between tappable elements, reducing the margin for errors and time spent correcting them. Q MINIMUM FONT SIZE Easily readable text ensures quick processing and faster task completion for users. Google’s recommendation for body text is 16pt, a requirement echoed in their Lighthouse rankings when penalties are applied to web apps with too much text below 16pt. Q COLOUR CONTRAST Text and symbol clarity is also important. Google includes it in the Lighthouse accessibility audit. Web apps that fail to apply clear contrast between text and background colour see penalties in their lighthouse score, and slow users down in their attempt to process and proceed with the relevant information.
Tools to help test contrast ratios in PWAs are now part of Chrome DevTools.
Financial Times (https://app.ft.com/index_page/home) is one of the highest profile responsive PWAs, allowing desktop readers to consume articles offline and on the go.
Emphasised call to action (CTA) buttons allow friction-heavy user flows. GooglePay allows users to move forward quickly in their task with shoppers to complete multiple checkout steps in a confidence. Paying careful attention to CTA size, single tap, while one-tap sign in gets users into their colour, placement and microcopy helps make the account in the same way. key actions more obvious and reduces thinking Results from early adopters show that removing time. Patterns first seen in native apps, such the the interruption of login screens and checkout floating action button and fixed header bar, get forms, along with the mental friction of the user moving quickly and translate well to any remembering and entering information, speeds up performant web app. task completion and improves engagement. A general rule of navigation is ‘out of sight, out of mind’. Patterns such as a Bottom Navigation Bar and Tabs successfully put primary user actions front and centre, while the traditional Today’s user spends around six hours a day ‘hamburger’ menu has a lower engagement rate. online with an average of 6.5 connected devices Facebook found that by moving from a per person. Not only is it fundamentally important Digital Wallets like hamburger menu to a tabbed approach improved to design for a number of different devices, but to Google Pay can distill complicated checkout engagement, satisfaction, revenue and perception design for areas of low and no connectivity. flows down to a single of speed. Users often take multiple sessions to complete ‘Pay’ button. Having a strategy of the type of content you a task, and delivering performant experiences on want to promote is important, and simply treating all each device ensures that entire process is smooth and navigational items as equal will result in a decrease of satisfying. engagement in the areas that you want to improve. Spotify Desktop supports PWAs and designing performant found that by reducing the number of options in the tab bar to responsive PWAs without the bloated code commonly five increased the reach of Spotify’s programmed content — a associated with responsive websites, means designing mobile great example of how promoting certain navigation items over first. This brings the essentials to the forefront, adding more others can focus the user’s experience. items only when the user agent can handle it. Service Workers allow PWAs to stand up when the network connection goes down. This opens the door to craft offline user experiences by use of clear network status messaging and disabling elements that would otherwise derail Digital wallets like GooglePay and upcoming automatic sign-in the experience. API both leverage data stored on the device to simplify
y using the Performant Design techniques mentioned above, designers can take control of user perception and ultimately make the web feel faster and more engaging. If the latest updates from Chrome Dev Summit are anything to go by, it’s that it’s the web, not native apps that continues to monopolise momentum
90 _________________________________________________feature
— at least within the Google development team. Progressive Web Apps are becoming the flagship of mobile web development, and as the technology moves forward, their ability to benefit larger screens looks set to open the gates for a wave of PWA across all screens. As this wave gathers
momentum, Single Page Apps gives developers the ingredients to accelerate PWAs with app-like instant transitions. Add frictionless user experiences through Performant Design, and therein lies a recipe for hyper-performant, best-in-class web experiences that should excite any web designer or developer.
Special offer for readers in North America
SAVE 30% When you subscribe PLUS you’ll receive The 100 Best Typefaces Ever e-book!
FREE
resource downloads eve y issue
+44 (0) 344 848 2852 2QOLQHDW myfavouritemagazines.co.uk/WCUEB 2UGHUKRWOLQH
*Terms and conditions
This is a US subscription offer. 30% saving refers to the USA newsstand price of $14.50 for 13 issues at $188.50, compared with $132 for a subscription. You will receive 13 issues in a year. Please provide a valid email address to receive your e-book. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. Full details of the Direct Debit guarantee are available XSRQ UHTXHVW 8. FDOOV ZLOO FRVW WKH VDPH DV RWKHU VWDQGDUG À[HG OLQH QXPEHUV VWDUWLQJ RU DUH LQFOXGHG DV SDUW RI DQ\ LQFOXVLYH RU IUHH PLQXWHV DOORZDQFHV LI RIIHUHG E\ \RXU SKRQH WDULII )RU IXOO WHUPV DQG FRQGLWLRQV SOHDVH YLVLW ELWO\PDJWDQGF 2IIHU HQGV 0D\
Expires May 2019
Get your listing in our directory To advertise here call the ads team on 01225 442244
HOSTING LISTINGS Featured host: Netcetera netcetera.co.uk 03330 439780
About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT
infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.
What we offer
sData centre colocation –
sManaged hosting – A full
range of solutions for a costeffective, reliable, secure host. sCloud hosting – Linux,
Windows, Hybrid and Private Cloud Solutions with support and scalability features.
5 tips from the pros 1. Reliability, trust & support Reliability is a major factor when it comes to choosing a hosting partner. Netcetera guarantees 100 per cent uptime, multiple internet routes with the ability to handle DDOS attacks, ensuring your site doesn’t go down when you need it.
2. Secure and dependable Netcetera prides itself on offering its clients a secure environment. It is accredited with ISO 27001 for security along with the options of configurable secure rackspace available in various configurations.
3. 24/7 technical support Netcetera has a committed team of
“
Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK
”
Single server through to full racks with FREE setup and a generous bandwidth. sDedicated servers – From
QuadCore up to Smart Servers with quick setup and fully customisable.
knowledgeable staff available 24/7 to provide you with assistance when you need it most. Our people make sure you are happy and your problems are resolved as quickly as possible.
Testimonials Roy T
4. Value for money We do not claim to be the cheapest service available, but we do claim to offer excellent value for money. We also provide a price match on a like-for-like basis, as well as a price guarantee for your length of service.
5. Eco-friendly Netcetera’s environmental commitment is backed by use of eco-cooling and hydroelectric power. This makes Netcetera one of the greenest data centres in Europe.
92__________________________________________________ listings
“I have always had great service from Netcetera. Their technical support is second to none. My issues have always been resolved very quickly” Suzy B
“We have several servers from Netcetera and their network connectivity is top-notch, with great uptime and speed is never an issue. Tech support is knowledgeable and quick in replying. We would highly recommend Netcetera”
Steve B
“We put several racks into Netcetera, basically a complete corporate backend. They could not have been more professional, helpful, responsive or friendly. All the team were an absolute pleasure to deal with, and nothing was too much trouble, so they matched our requirements 100 per cent”
Supreme hosting
SSD web hosting
cwcs.co.uk 0800 1 777 000
bargainhost.co.uk 0843 289 2681
CWCS Managed Hosting is the UK’s leading hosting specialist. They offer a fully comprehensive range of hosting products, services and support. Their highly trained staff are not only hosting experts, they’re also committed to delivering a great customer experience and are passionate about what they do.
Since 2001, Bargain Host have campaigned to offer the lowest possible priced hosting in the UK. They have achieved this goal successfully and built up a large client database, which includes many repeat customers. They have also won several awards for providing an outstanding hosting service.
sColocation hosting sVPS s100 per cent network uptime
Budget hosting
UK-based hosting hetzner.com +49 (0)9831 505-0 cyberhostpro.com 0845 5279 345 Cyber Host Pro are committed to providing the best cloud server hosting in the UK; they are obsessed with automation. If you’re looking for a hosting provider who will provide you with the quality you need to help your business grow, then look no further than Cyber Host Pro.
Hetzner Online is a professional web hosting provider and experienced data centre operator. Since 1997, the company has provided private and business clients
sShared hosting sCloud servers sDomain names with high-performance hosting products as well as the infrastructure for the efficient operation of sites. A combination of stable technology, attractive pricing, flexible support and services has enabled Hetzner Online to strengthen its market position nationally and internationally.
Agency hosting specialist nimbushosting.co.uk 02031266781
sDedicated/shared hosting sColocation racks sSSL certificates
Nimbus Hosting have partnered with agencies to develop our revolutionary platform STORM. With a team dedicated to outstanding support, our 5-star Google reviews truly speak for themselves. Join the thousands of agencies and freelancers who are benefitting from a control panel that speeds up your website developement as well as your client’s websites. Supercharge your digital projects today with STORM.
sCloud VPS servers sReseller hosting sDedicated servers
s TFDPOE 8PSE1SFTT JOTUBMM s %FQMPZ EJSFDUMZ GSPN (JU)VC s &BTZ UFBN NBOBHFNFOU
Cluster web hosting Flexible cloud servers fasthosts.co.uk 0808 1686 777
All-inclusive hosting
6,CBTFEBOEPQFSBUJOHGSPN dedicated UK data centres. Fasthosts keep over 1 million domains running smoothly and safely each day. Services can be self-managed through the Fasthosts Control Panel.
1and1.co.uk 0333 336 5509
operates across ten countries. With a comprehensive range of highperformance and affordable products, 1&1 offers everything from simple domain registration to award-winning website building tools, eCommerce packages and powerful cloud servers.
sDedicated servers sCloud servers sHosted email
1&1 Internet is a leading hosting provider that enables businesses, developers and IT pros to succeed online. Established in 1988, 1&1 now
sEasy domain registration sProfessional eShops s)JHIQFSGPSNBODFTFSWFST
elastichosts.co.uk 020 7183 8250 ElasticHosts offer simple, flexible and DPTUFŇFDUJWF DMPVE TFSWJDFT XJUI high performance, availability and scalability for businesses worldwide. Their team of engineers provide excellent support 24/7 over the phone, by email and with a ticketing system. s Cloud servers with any OS s Linux OS containers s 24/7 expert support
listings__________________________________________________
Get your listing in our directory To advertise here call the ads team on 01225 442244
COURSE LISTINGS Featured:
Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders
About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their
full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England.
“
No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks
” .
What we offer s 'VMMUJNF Fast-track your career in just 12 weeks
s 1BSUUJNF Fit our curriculum around your life in 24 weeks
5 tips from the pros (FU TUBSUFE XJUI DPEJOH The best way to know if coding is for you is to just try it! We recommend the free, online JavaScript track of Codecademy to get you started with the basics. %P ZPVS SFTFBSDI Make sure you read plenty of student reviews to make sure you’re applying somewhere reputable. Read their blog and have a look at their social channels. 5ISPX ZPVSTFMG JO Once you’ve decided it’s right
for you, set aside a few evenings each week to really start making progress! If coding is for you, this should be fun. #F QSFQBSFE We’ll be with you every step of the way when you apply. Make sure you go through all the materials we recommend and ask for help if you’re stuck. (FU TPDJBM With Northcoders, you’re not just on a course, you’re part of a community that will stay with you long after you graduate. Make the most of it!
Becoming part of this vibrant, caring community was something I hadn’t expected before the course, but now I couldn’t be without it. To be a Northcoder is to be enlightened, inspired and supported
Joanne Imlay
Northcoders delivered their part of the bargain in spades. They provided tremendous assistance in turning me into the full product – a well-rounded, capable future tech employee – and they have the contacts to deliver the opportunities for such people.
Primary school teacher to software developer at Careicon
Joe Mulvey Maths teacher to software developer at Auto Trader
94 _________________________________________________ listings
WE GOT CODERS
UDEMY udemy.com
wegotcoders.com [email protected]
Twitter: @udemy Facebook: udemy
We Got Coders is a consultancy that provides experts in agile web development, working with startups, agencies and government. Take one of their 12-week training courses that covers all that is required to become a web developer, with highly marketable full-stack web development skills.
The inspiration for Udemy began in a small village in Turkey, where founder Eren Bali grew up frustrated by the limitations of being taught in a one-room school house. Realising the potential of learning on the internet, he set out to make quality education more accessible. Udemy is now a global marketplace for learning and teaching online. Students can master new skills by choosing from an extensive library of over 40,000 courses, including HTML, CSS, UX, JavaScript and web development.
sClassroom-based training sReal-world work experience sEmployment opportunities
FUTURELEARN
40,000+ courses: There is a course for every designer and dev. Self-paced learning: Learn how to code at your own pace.
THE IRON YARD theironyard.com Twitter: @TheIronYard Facebook: TheIronYard The Iron Yard is one of the world’s largest and fastest growing in-person code schools. It offers full-time and part-time programs in back-end engineering, front-end engineering, mobile engineering and design. The Iron Yard exists to create real, lasting change for people, their companies and communities through technology education. The in-person, immersive format of The Iron Yard’s 12-week courses helps people learn to code and be prepared with the skills needed to start a career as junior-level software developers.
futurelearn.com [email protected] Choose from hundreds of free online courses, from Language & Culture to Business & Management, Science & Technology to Health & Psychology. Learn from the experts. Meet educators from top universities who’ll share their experience through videos, articles, quizzes and discussions.
sLearn from experts sFree courses sAll-device access
GYMNASIUM
thegymnasium.com [email protected] Gymnasium offers free online courses, designed to teach creative professionals in-demand skills. Courses are all self-paced and taught by experienced practitioners with a passion for sharing practical lessons from the design trenches.
12-week code school: Learn the latest skills from industry pros. Free crash courses: One-night courses, the perfect way to learn.
sGain real-world skills sGet expert instruction sCareer opportunities
listings__________________________________________________95
Free with your magazine Essential assets and resources
Exclusive video tutorials
Tutorial project files
Get textures, fonts, backgrounds and more
Learn to code/create with HTML, CSS & JS
$OOWKHDVVHWV\RX·OOQHHG to follow our tutorials
Plus all of this is yours too… $OOQHZWXWRULDOILOHVWRKHOS\RX PDVWHUWKLVLVVXH·V+70/&66 and JavaScript techniques $,'LFH$UW3KRWRVKRSDFWLRQV IURP6SDUNOHVWRFN ZRUWK (sparklestock.com ,QFHSWLRQVW\OH3KRWRVKRS actions from Sparklestock ZRUWK $EVWUDFWVPRNHDUWEUXVKHV IURP6SDUNOHVWRFN ZRUWK
Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets
Free for digital readers too! Read on your tablet or download on your computer
The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital 'RZQORDGRQO\WKHILOHV you want, when you want All your gifts from all your issues in one place
Get started Everything you need to know about accessing your FileSilo account.
Unlock every issue
Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine.
gifts from more than 70 issues Access our entire library of resources with a money-saving VXEVFULSWLRQWRWKHPDJD]LQH²WKDW·VPRUHWKDQ IUHHUHVRXUFHV
You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices.
Over 70 hours of video guides
More than 400 tutorials
Over 2500 creative assets
Let the experts teach you to create and code
Get the code you need to get creative
Templates, fonts, textures and backgrounds
Head to page 28 to subscribe now
,I \RX KDYH DQ\ problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below:
[email protected]
Already a print subscriber? +HUH·VKRZWRXQORFN)LOH6LORWRGD\« 8QORFN WKH HQWLUH :HE 'HVLJQHU )LOH6LOR OLEUDU\ ZLWK \RXU XQLTXH :HE ,' ² WKH WHQGLJLW DOSKDQXPHULF FRGH SULQWHG DERYH your address details on the mailing label of your subscription copies, also found on any renewal letters.
More th han 00 re easo ons s 90 o sub bscriibe to
More added every issue
NEXT MONTH THE FUTURE OF HTML TODAY Why you need to be working with web components and how to build your own
INTRODUCE SCROLL EFFECTS WITH SAL.JS Create performant and lightweight solutions for animating elements on scroll
STOP THE SPAM, STOP THE BOTS
Employ the power of Google reCAPTCHA to help detect unwanted intrusions
BUILD A 3D LANDING PAGE
Learn how to utilise WebGL and Three.js to create impressive home pages to engage users
Visit the WEB DESIGNER online shop at ALL IN YOUR NEXT
WEB DESIGNER myfavouritemagazines.co.uk
Issue 287 on sale
for the latest issue, back issues and specials Tuesday 30 April 2019
SUBSCRIBE TODAY Go to pa e 28 to learn more 98 __________________________________________next month
More Documents from "MarianAlexandru"
2019-03-01 Global Traveler.pdf
December 2019
0
2019-06-01_all_about_history.pdf
December 2019
3
2019-05-01+web+designer+uk.pdf
December 2019
1
National_geographic_history_issue_1_-_2015_usa.pdf
December 2019
2
Your Message:
3. Choose the results When using the Speech API there are two ways to display the content. In one, text displays when the user has stopped speaking and the ‘listening’ button is clicked off. The other shows words on screen as spoken. This first radio button allows for the final speech result to be shown.
<span>Results:
4. Radio two The second radio button is added here and this one allows the user to select the text to be displayed as
they speak. These radio buttons will be picked up by the JavaScript later and used to control the speech input, but for now this allows the user to have an interface to control that.
4. Radio two The second radio button is added here and this one allows the user to select the text to be displayed as
they speak. These radio buttons will be picked up by the JavaScript later and used to control the speech input, but for now this allows the user to have an interface to control that.
5. Display the text The text that the user speaks into the page will need to be displayed on the screen. Here the text-area is added that has the id of ‘transcription’ — this will be targeted so that the user’s speech ends up here. There’s also a clear button to remove the text.
6. The last interface 5
The final interface elements are added to the screen now. The speech button enables and disables the speech, so it must be clicked before speaking. Clicking again stops it. As this is a relatively new interaction, the log underneath will tell the users what to do.
7. Add Javascript Now add the script tags before the closing body tag. This is where all of the JavaScript will go. The first two lines grab the page elements with the matching ID and store them in a variable. The transcription is the text result of the speech. The log will update the user with how to use. it <script> var transcription = document.getElementById (‘transcription’); var log = document.getElementById(‘log’);
8. Variable results Using the next few variables, more interface elements are cached into them. The speech button will become a toggle, letting users switch speech on and off., monitored by a Boolean, true/false variable. The clear-all button will delete unsatisfactory speech results.
Keep the user informed
As users are not familiar with text input, make sure you keep users informed on the screen with instructions for usage.
58tttttttttttttttttttttttttttttttttttttttttttttttttttutorial
var start = document.getElementById (‘speechButton’); var clear = document.getElementById (‘clear-all’); var speaking = false;
9. Is it supported? The first thing our code will do is find out if this speech feature is supported by the user’s browser. If this result comes back as null then the if statement throws up the hidden message, while simultaneously taking the start button away from the interface to stop the speech input. window.SpeechRecognition = window. SpeechRecognition || window.webkitSpeechRecognition || null; if (window.SpeechRecognition === null) { document.getElementById(‘unsupported’). classList.remove(‘hidden’); start.classList.add(‘hidden’); } else {
10. Start the recognition The speech recognition is started as the ‘else’ for the speech recognition being available. The continuous input is started as that is the default on the radio buttons. The ‘onresult’ function will handle the results of the speech input. This will be added into the transcription’s text field. var recognizer = new window.
SpeechRecognition(); recognizer.continuous = true; recognizer.onresult = function(event) { transcription.textContent = ‘’; for (var i = event.resultIndex; i < event. results.length; i++) {
11. Final or interim? The if statement now checks to see if the user wants to display the text as they are talking (interim) or only after they finish speaking (final). You will notice that if it’s interim, each word gets added to the text with the ‘+=’, while the final just dumps the whole text in there. if (event.results[i].isFinal) { transcription.textContent = event. results[i][0].transcript; } else { transcription.textContent += event. results[i][0].transcript; } } };
12. Handling errors As with most JavaScript APIs there is an error handler that will allow you to decide what to do with any issues that might arise. These are thrown into the ‘log’ div to give feedback to the user, as it is essential that they are aware of what might be going on with the interface. recognizer.onerror = function(event) {
Tutorials Build a voice controlled UI
Riding the new wave At the moment, browser support is still low for speech recognition. Checking the stats for this on Can I Use — caniuse. com/#search=speech —shows that there is only around 65 percent of browser uptake at the moment, and that is mainly confined to Chrome and Opera. This means that the Speech Recognition API is still very much in the experimental zone for your project. That doesn’t mean you should avoid this, as being on the crest of a new way to input for the web will allow you to be ahead of the curve, keeping your skillset at the forefront of what employers will be looking for. Your sites will be even more accessible and better equipped as further mobile support comes on board for this service.
log.innerHTML = ‘Recognition error: ‘ + event.message + ‘
’ + log.innerHTML; };
log.innerHTML = ‘Recognition error:
’ + ex.message; }
13. Start speaking!
15. Click to stop
The event listener here is started when the user clicks the button to start speaking. If the user is not speaking, then the button changes colour to show speaking has started, the variable for speaking is set to true and the ‘interim’ radio button is checked to see if this is the user’s choice for input.
Now when the user clicks to stop talking, the speech recognition is stopped. The button is changed back to green from red while talking. The user interface is updated so that the user is informed that the service has stopped. The speaking variable is set to false, ready to let the user speak again.
start.addEventListener(‘click’, function() { if (!speaking) { speaking = true; start.classList.toggle(‘stop’); recognizer.interimResults = document. querySelector(‘input[name=”recogniti on-type”][value=”interim”]’).checked;
} else { recognizer.stop(); start.classList.toggle(‘stop’); log.innerHTML = ‘Recognition stopped
Click to speak’; speaking = false; } });
16. Clear the text The final code for this section is just a clear button to remove the speech input text in case it is wrongly interpreted. Save the file and test this in your browser. You will be able to click the button to speak into the computer and see the results. clear.addEventListener(‘click’, function() { transcription.textContent = ‘’; }); }
14. Take the input The ‘try and catch’ statement now starts the speech recognition and tells the user that they should start speaking and that when they are done, ‘click again to stop’. The catch will pick up the error and throw that into the ‘log’ div so that the user can understand what might be wrong. try { recognizer.start(); log.innerHTML = ‘Start speaking now
Click to stop’; } catch (ex) {
16
tutorial ttttttttttttttttttttttttttttttttttttttttttttttttt 59
Tutorials Build a voice controlled UI
17. Add purpose Now as you have a working example, there needs to be some purpose to the interface, so let’s make this so that users can input reviews. Save the page and then choose Save As, with the new name of ‘reviews.html’. Add the following HTML elements just after the
line.
18. Total Submission The previous code will hold the reviews. The user will need to submit their speech input, so add the submit button right after the ‘clear text’ button, which will be around line 28 in your code. Then you can move down to the JavaScript for the next step.
19. New interface elements At the top of your Javascript add the new variables to hold the references to the new interface elements that have just been added. These will provide you with a way to submit and display the results on the screen within the ‘reviews’ section of the page. var submit = document.getElementById(‘submit’); var review = document.getElementById(‘reviews’);
20. Submit the entry Now the code here will handle when the user
21
60 ttttttttttttttttttttttttttttttttttttttttttttttttttutorial
18
clicks the submit button, place this right before the ‘clear’ button code, which should be around line 88 in your code. First, a paragraph tag is created and the speech input is subsequently added into this. This will then be added into the ‘review’ section. submit.addEventListener(‘click’, function() { let p = document.createElement(‘p’); var textnode = document.createTextNode (transcription.value); p.appendChild(textnode); review.appendChild(p); let today = new Date(); let s = document.createElement(‘small’);
21. Final Submission The date is added so that the review is timestamped into the document. Finally a horizontal rule is added to show where each review ends, then the text is cleared ready for new input. Save the page and test this. You will see that you can now submit your speech into the page as reviews. For persistence you would need to use a database to store these results. textnode = document.createTextNode(today); s.appendChild(textnode); review.appendChild(s); let hr = document.createElement(‘hr’); review.appendChild(hr); transcription.textContent = ‘’; });
The number one destination for web design news, views and how-tos. Get Creative Bloq direct to your inbox with our weekly web design newsletter
Graphic design
Web design
3D
Digital art
www.creativebloq.com
Tutorials
Add animation While it can sound intimidating, you can get started in SVG animation with less knowledge than you think
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 62__________________________________________________tutorial
Tutorials
2
W
hen it comes to animating with SVGs, one major turn-off can be the idea of getting bogged down in JavaScript libraries. However, this doesn’t have to be the case. CSS can handle selecting individual paths within an SVG to create effects. Just knowing the basics can mean that it’s possible to turn flat, cliched icons into something a little more impressive. So perhaps it’s time to run through the fundamental steps of SVG optimisation and animation. When integrated into different designs, it doesn’t take long to realise that the possibilities are endless.
1. Create and save First, create an SVG to work with. For this tutorial, we will be using a simple graphic made in Illustrator. When using Illustrator to export an SVG reduce the size of the artboard to fit the graphic, then click ‘Save As’. Select SVG from the ‘save as type’ dropdown menu, then ‘SVG code…’ on the SVG Options dialogue. 4
2. Optimise for the web Cutting out unnecessary tags will make the image easier to deal with. This can be done manually by copying the code to your favourite editor and removing empty tags and metadata. Alternatively, a fantastic resource called SVGOMG at jakearchibald.github.io/svgomg will do this automatically. Paste the code into the ‘Paste markup’ area on the SVGOMG interface, then copy the image again using the button on the bottom right.
which will hold the SVG that we’ll be animating. To liven the page up, use a second, static, SVG as a background on the body tag.
5. Place the SVG We’re using our animation to make the introduction at the top of the page more interesting. Paste the optimised SVG code into the second column on the page. If using bootstrap, give the SVG the class ‘img-fluid’ to make sure it scales on mobiles.
3. Set up a HTML Document
6. Add classes to the SVG
Open your code editor of choice and set up a blank HTML document. We will write the CSS animation in a file called main.css, so create this too. To keep things focused on the animation, we’ve pulled in the CSS-only version of Bootstrap 4.1.3.
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
4. Build the layout Let’s build the bones of our layout and make a space for our SVG. We’ve added a header and two columns: one on the left for some text, and one on the right, 5
<svg> <path class=”rectText” d=”...” vectoreffect=”non-scaling-stroke” strokewidth=”.470476156” font-size=”12” fill=”#fff”
Don’t overdo it
While animation and movement can liven up a page, giving it the wow factor, be careful not to distract attention away from important parts of the user flow. Sublety is key
tutorial �������������������������������������������������63
Tutorials Add animation to SVG with CSS
9
fill-rule=”evenodd” stroke=”#fff” strokelinecap=”round”/>
7. Initial states Selecting our SVG elements in CSS is the same as any other element. We use our classes to select those elements within the SVG. Both parts of our SVG will start as hidden when the page loads, so let’s use CSS to set both element’s opacity to 0. path.rectText { opacity:0; } rect.rectBackground{ opacity: 0; }
8. Declare the animations 10
We need to declare the name and keyframes for each animation so that CSS knows what we want to do when we ask it to perform an effect. I’ve chosen textDraw and rectFade, as they describe each animation. rectFade will be a simple two-step animation. textDraw will have an extra middle step. @keyframes textDraw { 0%{} 50%{} 100%{} } @keyframes rectFade{ from{} to{} }
9. Assign animation and properties
13
We add the rectFade animation to the rectBackground element and give it a duration of one second. An easeOut cubic bezier is being used to give it a smoother feel. We add “forwards” so that the element keeps the properties of the last keyframe when the animation ends. rect.rectBackground{ opacity: 0; animation: rectFade 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; }
10. The rectangle animation With just two keyframes, all we need to do for our rectangle is set a start and finish set of attributes. Let’s start with a 1% width and finish on 100% to give an ‘expanding to the right effect.’ We can also set opacity: 1 to the last keyframe so the shape fades in at the same time. @keyframes rectFade{ from {
64 �������������������������������������������������tutorial
Tutorials Add animation to SVG with CSS
The next level Once you’ve mastered this form of SVG animation using just CSS, you’ll be able to apply it to many areas of your design. Limitations will start to pop up when you want a more complex way of triggering the start of the animation — creativity may also lead you to require more advanced functionality. This is a fast-growing area of web design and many options exist. Anime.js is a JavaScript animation library with an array of features and fantastic documentation. It works with CSS and SVGs in a similar way to what we’ve covered, making it the logical next step following this. Others include Lottie by Airbnb, which lets you export animations from Adobe After Effects and use them on a webpage with SVGs.
width: 1%; } to { width:100%; opacity: 1; } }
11. The text animation We’re going to create a line-draw effect on our text then use a fill to fade in. To set up the text animation we give it our ‘textDraw’ with a four second duration. The cubic bezier has been modified on this step to give it a slightly different pace of movement. path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; }
12. Delay the start Our text needs to run just as the rectangle has finished fading in. Because the rectangle has a one second duration, delay the start of the text animation by that time.
Your values will be different to mine depending on the SVG you are using. To find your value, use your preferred developer tools and increase ‘stroke-dasharray’ from 0 until the entire shape is covered by one stroke. path.rectText { opacity:0; stroke-dasharray: 735; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
14. First line drawing keyframe Now we have our one very large stroke that covers the entire text path, let’s offset it by its own length to effectively push it away. Using ‘stroke-dashoffset’ for the same value as our dasharray should do it. Let’s set this in our first keyframe. We’ll also make the shape fill transparent and set the stroke to white if it isn’t already.
No Illustrator, no problem
If you don’t have Illustrator on hand to create your SVGs, don’t worry. A free alternative is available called Inkscape. It has all the essentials, which can be used to follow this tutorial. Inkscape adds a lot of unneeded data to the file, so use SVGOMG to strip this out.
opacity: 1; }
15. Draw the lines Our middle keyframe appears at 40% through the animation. We bring the stroke-dashoffset back to zero so the dash covers the entire path. We can re-add the transparent fill at this stage to make sure the fill only appears once the drawing is complete. 40%{ stroke-dashoffset: 0; fill:rgb(255, 255, 255, 0.0);
0%{ fill:rgb(255, 255, 255, 0); stroke:#fff; stroke-dashoffset: 800;
}
16. Fill in the shape For the last part of the animation, we will fill the shape in white. All we need to do for the last keyframe is raise the alpha value of the fill colour. This creates the fade-in effect of the fill.
path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
100%{ fill:rgb(255, 255, 255, 1); stroke-dashoffset: 0; opacity: 1;
13. Emulate line drawing To get our line drawing effect we will use the ‘stroke-dasharray’ and ‘stroke-dashoffset’ parameters.
14
}
tutorial �������������������������������������������������65
Tutorials
Code a free site fast with Jekyll & GitHub Learn how to bring together static site generator Jekyll, CMS Siteleaf and get free hosting with GitHub
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 66 _________________________________________________tutorial
Tutorials
T
his tutorial is for people who have heard of JAMstack and are interested to see what it can do, or perhaps run a Wordpress blog and are sick of updates and potential hacking via malware. A basic knowledge of terminal is good. You should be able to follow along, as the commands are fairly simple. Sites on GitHub Pages are powered by Jekyll behind the scenes, so used along with GitHub Pages it creates a way to host and manage your website for free. This tutorial is for a Mac. Jekyll on Windows is possible, but not officially supported. For Windows, hop over here for help getting Ruby set up: jekyllrb.com/docs/installation/windows/ After completing this tutorial, you will have set up a GitHub pages account, created a Jekyll blog and published both by pushing through your terminal, as well as using Siteleaf for a real CMS experience. This tutorial is focused on connecting the three technologies as a platform to build your own site.
<meta charset='utf-8'>Home
4a
4. Clone Wars!
1. Install Ruby
5. Set up GitHub pages
Ruby should be installed by default on a Mac. Let’s check by typing ruby —v in your Terminal.
You need to turn on GitHub Pages, so go into Settings and select your master branch of the repo. You will now be able to see this at ‘username.GitHub. com/repo—name’.
2. Create a repository on GitHub If you already have a Git account head over to GitHub and create yourself a repo that is named with the following format: your—username.GitHub.io. It is really important that you get this name right!
3. Add some content Let’s create an index.html file so we can clone down the folder and get working with Jekyll. Click add file in your new repo and type the following code.
4b
The last step for connections will be to clone your GitHub Pages site down. We now have the link up ready so let’s get going with Jekyll. Move to the folder you are going to use for your site and type ‘git clone’ followed by the clone url from GitHub.
5
6. Set your custom domain (optional) If you have a personal domain name you can link this to your GitHub Pages site. To do this first add your domain to the GitHub Pages account in settings. Now go to your domain manager and create a CNAME record (or amend it) to point at your GitHub pages domain.
6
1
Getting to grips with Git
Git can be quite intimidating, but once you know a few commands it is a tool/facility you really can’t do without. We only use the bare minimum in this tutorial, you can learn more at GitHub.com
2
3
tutorial _________________________________________________ 67
Tutorials Code a free site fast with Jekyll & GitHub
10
11
12
14a
7. Install Jekyll
11. Frontmatter
Now we can actually get Jekyll running in the site. Make sure you are in the directory you cloned down and simply type ‘gem install jekyll bundler’. Your computer will go and grab all the needed dependencies to run a site.
Frontmatter is a snippet of YAML () at the top of a file. Jekyll uses it to hold variables. Look in the about.md file, and you can see that we set the title there.
8. Serve locally and build There are two main commands you will use with Jekyll: ‘serve’ and ‘build’. To run your site locally, type ‘jekyll serve’ in your command line. This will run a version on http://127.0.0.1:4000 that you can preview your changes on. NB if you already have gem and other dependencies installed on your machine, this command may fail due to a mismatch in dependency versions. In this case try ‘bundle exec jekyll serve’ instead. It runs the same, but with the word build compiles the site.
9. Get a headstart
14b
Jekyll — old faithful
Jekyll is one of the founding static site generators, launched in 2008. It is still the most popular, largely because of the adoption by GitHub. More recently generators such as Hugo, Eleventy and Gatsby mean there are more choices than ever.
68 _________________________________________________tutorial
Copy in the files supplied with this tutorial at this point to give you a basis to work from, or download them here: GitHub.com/maxray/jekyll/archive/ master.zip This will give us a homepage, blog list and the assets structure for the site. Refresh your page at http://127.0.0.1:4000 and you will see we now have some basic pages to build from. Let’s have a quick overview of how the Jekyll site works.
12. Liquid tags Liquid is a templating language that uses objects, tags and filters. We use the object tag surrounded by {{ }} to do this. If you look in the layouts/default.html file you can see how we output the Frontmatter from the previous step.
13. Building up pages We build pages in a similar way to how you might build a WordPress theme. We use includes for often used parts, for example the navigation, html for templates and, in this case, markdown files for posts.
14. Navigation Rather than a static navigation, we use the power of config files to separate the content from the template. Navigation.html has liquid tags for a loop through the navigation.yml file. We can just enter whatever pages and links we want now without going back to the template.
10. First stop — configuration
15. Blog list template
Open _config.yml in your text editor and add your own details. One key area to check is to set your base url. This is the folder that your site is loading in.
To create a list page, again we use liquid tags to give us the logic to loop through all the files in the ‘posts’ folder.
Tutorials Code a free site fast with Jekyll & GitHub
JAMstack Sites ‘Modern web development architecture based on client—side JavaScript, reusable APIs, and prebuilt Markup.’ — jamstack.org You may be familiar with the term LAMPstack to describe a traditional suite of technologies used for building a website. With the JAMstack, we don’t refer to specific databases or Operating Systems but instead the three areas that come together. It’s a new way of building websites and apps that can give performance gains and also improve the security of your site. So why would you consider using a JAMstack approach over a traditional website? s*NQSPWFEQFSGPSNBODF Pre—built HTML and assets and no databases make it perfect for using a CDN resulting in super quick page loads. s4FDVSJUZ JAMstack websites are incredibly secure, there are no databases to worry about or in the case of WordPress plugins to update or be exploited. s$PTU As you can see in this tutorial you can run a website for the cost of a domain name.
16. Styling it up
18
GitHub pages renders the sass files for us, so you can just build out as you normally would and then push your changes to master to publish them. No gulp files or Webpack here, just nice lean styles.
17. Push to master Now that we have a working local site if we commit this and push it back to our repo GitHub Pages will render the site for us. If you have never pushed a GitHub repo then it is worth reading up a little bit for the purposes of this example type:
git add --all git commit -m ‘First commit to jekyll site’ git push -u origin master
18. Set up a free Siteleaf account You may want to just use a standard content management system to blog. Some designers prefer it to a text editor. Siteleaf offers a free account for developers, and this will give you interfaces to use.
19. Connect to your repository After signing up for an account, you can then connect your repository to Siteleaf. Choose the repository and branch you set up earlier.
20. Test updates via the CMS Now you have everything set up, try editing a post in Siteleaf. You’ll see how it syncs back to the GitHub repo, updating your website.
19
20
21. Pull down changes If you now run ‘git pull’ in your terminal window, you will see the changes you made in the CSS updated into your local folder. You now have a two-way connection for developing your site locally or using a browser based CMS tool.
tutorial _________________________________________________69
web workshop
Code smart text effects with CSS Inspired by middlechildphilly.com/menu
Attention Grabbers Rollover links are a great way to grab the attention of the user. Always try to do something unusual and original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation. It’s a delight to the user.
Rollover effect
Happy service
Animated menu
A lot of the links on the site have a fun rollover effect, where each letter splits apart and rotates slightly through animation. The underline also animates off to the right.
The smiling face logo at the top of the page looks towards your mouse to see where you are moving. This is also the main interaction, but larger on the landing page.
Clicking the animated burger icon brings an overlay in from the top, while each navigation element drops into place one at a time.
Rollover menu
Always available
Each menu item on screen changes and highlights as the user rolls over. The picture to the left of it changes and updates accordingly.
Keeping customers in touch is key for a business. The floating ‘Call us’ button will open Facetime and connect users immediately.
70 ____________________________________________ workshop
Code smart text effects with CSS DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
Rising high What our experts think of the site
Bringing together many quirky effects allows the Middle Child site to show off it’s playful character while still providing a professional website for the catering company. The site’s playful image is engaging and elevates this against other catering sites. Mark Shufflebottom , Professor of interaction design
Technique 1. Rollover text effect One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags.
2. Create CSS Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available. html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: grid; height: 100%; }
3. Position the word The ‘word’ class centres the word in the grid. Any text that is given the ‘word’ class can have this applied. The ‘up’ class is going to be applied to every other letter and these will move upwards.
4
.word { font-size: 3em; margin: auto auto; } .word .up { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; }
4. Up and over Now the ‘down’ class shares very similar settings to the ‘up’ but the hover shows the movement upwards for the ‘up’ rollover. Upwards is also rotated slightly to enhance the look. .word .down { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; } .word:hover .up { transform: translate3d(0px, -8px, 0px) rotate(12deg); color: #058b05 }
5. Hovering down When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans. .word:hover .down { transform: translate3d(0px, 8px, 0px) rotate(-12deg); color: #058b05; }
6. Automatic for the people It’s a bit of a hassle to have to put every letter in alternating spans with different classes, so we’ll automate the process by getting JavaScript to query the selector and take each letter. Here the ‘str’ variable grabs the current letter as it loops through the text. <script> var elements = document.querySelectorAll (‘.word’); for (var i = 0, l = elements.length; i < l; i++) { var str = elements[i].textContent; elements[i].innerHTML = ‘’;
7. Add alternating classes Now another loop places each letter in its own span element and adds either the ‘up’ or ‘down’ class to the spans. If you look at this in the browser you will see the text split by each letter up and down, while rotating slightly. for (var j = 0, ll = str.length; j < ll; j++) { var spn = document.createElement(‘span’); elements[i].appendChild(spn); spn.textContent = str[j]; let pos = (j % 2) ? ‘up’ : ‘down’; spn.classList.add(pos); } }
7
workshop ______________________________________________71
Tutorials
Capture visitor data Learn how to use the existing structure of Redux to store and maintain the validation state of form data
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 72 __________________________________________________tutorial
Tutorials
G
etting data out of a React form is not a straightforward task. The most common approach is to use controlled components – fields that have their values written to component state, which would then pass the state back when the form submits. While this approach works, it can get complicated very quickly. Having to write change handlers for each field is one thing, but other features such as validation or formatting have to be done separately and updated in parallel. One of Redux’s great benefits is that there is one application-wide state accessible anywhere it is needed. If we were able to access the form data at any point in the application, it opens up many different possibilities for future interactions. Redux Form is a package that supplies all this behaviour in one place. By hooking into an existing Redux store, form components write their data to the store as it changes. The package also takes care of making sure that data is validated and formatted correctly. The form will not submit if it is not. In this tutorial, we create the final piece of our Photo Share application, making a page the user can update their username on. By writing a custom component, the form can show validation feedback at the right time without having to deal with lots of event listeners.
2
4
1. Install dependencies Before we get started, we need to make sure all the project’s dependencies are ready to go. Aside from the usual React and Redux, this also includes the ‘reduxform’ package that is in charge of all the form logic we are going to use. Open up a couple of command line windows and install the dependencies for both the React app and the backend server. They both need to be running at the same time. > > > >
cd app yarn && yarn start cd server yarn && yarn start
2. Add to root reducer All of the benefits of Redux Form will happen in its own slice of the state. This is created by including the provided form reducer inside the ‘combineReducers’ method from Redux. Open up the root reducer at reducers/root.js. Import Redux Form’s form reducer and include it alongside the rest of the existing ones. import { reducer as formReducer } from 'redux form'; const rootReducer = combineReducers({ [...] form: formReducer, });
3. Build out the form We are going to be making the form that lets the user edit their username. Head to /user in the browser to see where this form will go. The form component itself lives inside components/ forms/User/User.js. Add an outline of the form to the existing User component there. This will be enhanced with Redux Form throughout the rest of the tutorial. return ( );
4. Connect the form to Redux With the form in place, we now need to hook it up to the store. Redux Form uses a higher-order
component to link the two together. The ‘reduxForm’ function takes a set of configuration options and returns a component. This component can be wrapped around our form to initialise a connection between them. Update the default export to use this function. The name we pass in is a unique reference to this form inside the Redux store. export default reduxForm({ form: 'user' }) (User);
Keep forms separate
It may be tempting to have submission logic and other Redux data source inside the same file as the form itself, but keeping them separate makes things clearer and more straightforward to test.
tutorial _________________________________________________ 73
Tutorials Capture visitor data with Redux Form
5. Convert to Field By default, Redux Form cannot see any form elements. It uses the special component that renders its own elements with the necessary checks and hooks required to make everything work. Replace the element with the component from the Redux Form package. The ‘component’ prop defines an element to render. Any other prop is then passed to that component.
6. Pass submission function Forms in React will always submit their values using a passed ‘onSubmit’ prop. These forms are no different, but require a slightly different method in order to hook into the Redux Form ecosystem. By passing them a ‘handleSubmit’ prop, Redux Form wraps its own behaviours around the function. Use this prop to submit the form instead.
Validate with props
Rules can be applied directly on the component itself using the ‘validate’ prop. This can be useful for common repeated rules, such as if a field is required.
10
74 __________________________________________________tutorial
7. Handle form submission The form isn’t currently passed this submit function yet. Open up the container at components/ container/UserForm/UserForm.js and add it in. As the container is connected to the store, we can use our existing thunk-based approach to submit the data. Hook up ‘handleSubmit’ to call the ‘submitUser’ thunk action.
export const submitUser = values => (dispatch, getState) => { dispatch(submitUserStart()); const user = getCurrentUser( getState()); return axios .patch(`http://localhost:3001 /users/${user.id}`, values) .then(({ data }) => dispatch( submitUserSuccess(data))) };
9. Update local username handleSubmit(values) { return this.props.submitUser(values); } render() { return ( ); }
8. Create submitUser action The submitUser function itself is similar to the existing submitComment action creator. We get the current user ID and submit a PATCH request to the backend to update the username. Once that’s successful, we dispatch an action to let the rest of the application know. Open up actions/user/user.js and add the action creator.
Even though we have changed our username on the form, it still has the old username at the top of the page. When the form successfully submits, we dispatch our own ‘SUBMIT_USER_SUCCESS’ action containing the new username. We can pick this up in a reducer and update the data. Open up reducers/user/user.js and add a case to handle this action. case SUBMIT_USER_SUCCESS: return state.set('name', action.payload.name);
10. Create a custom component While our input works, it does not yet have any styles. Instead of applying some directly to each field we would make, we can use the power of React components to our advantage. By using a shared component across all test inputs, any updates we make will benefit every field that uses it.
Tutorials Capture visitor data with Redux Form
When is best to validate? Form validation is useful when performed in the right way. Having feedback displayed on each keystroke can distract the user rather than aid them. Similarly, waiting until submission can be too late if the form has many fields that may need correcting. It is generally better to wait until the field loses focus before displaying any issues. For smaller forms such as a log in, it may be more efficient to wait until the user submits. Most importantly, any validation should be clear as to what the user must do to fix it. For complex rules, such as an enforced password strength, the displayed error could show more granular detail that is updated on each keystroke. With Redux Form, validation is constantly happening whenever the content changes. We can decide the conditions on which to show it to the user — whether that is on blur or on submit.
Add a generic input inside the component at components/presentational/TextInput/TextInput.js.
11. Make use of new input With the component ready to go, we can now add it to the form. Redux Form’s component takes care of much of the heavy lifting, including passing the ‘onChange’ and ‘value’ props. Back inside components/form/User/User.js, replace the existing input – label included – with the custom component.
12. Setup validation No user can be without a username. We want to catch when the user tries to submit the form with a blank field. Redux Form takes a validation function that is constantly checked every time the values change. It provides any error messages that we need to show. Add the
‘validate’ function as part of the setup to the form.
14
export default reduxForm({ form: 'user', validate })(User);
13. Define required rule The function receives the values from the form as an argument. We can check the values and apply some rules to what they should be, and return an object containing any violations using the field’s name as the key. Check the name field and return an error if it isn’t set. export const validate = values => { const errors = {}; if (!values.name) { errors.name = 'Required'; } return errors; };
14. Show validation error The component picks up the error from the validation function and passes it to the component as an ‘error’ prop. We can then show this to the user so they know why they can’t submit the form. Back inside components/presentational/ TextInput/TextInput.js add the error underneath the input. Check if the field is invalid first using the ‘invalid’ boolean prop also passed down.
const showError = invalid; [...] {showError && <span className=' text input__error'>{error}}
15. Hide error until touched If we refresh the page, we can see the field already says ‘Required’ even though we haven’t had a chance to add anything to it yet. We should wait until there’s some kind of interaction first. Redux Form provides a selection of status props to the input component alongside ‘invalid’, including ‘dirty’, ‘visited’ and ‘touched’. These can all be used to signify interaction. Update the ‘showError’ check to see if the field has been touched. const showError = invalid && touched;
16. Enable touched prop 13
By default, Redux Form will not mark any field as touched. We need to define what ‘touched’ means before it has any effect. Add ‘touchOnBlur’ to the form setup inside components/form/User/User.js. The other option is ‘touchOnChange’, which will only mark it as touched as soon as the field value is updated. export default reduxForm({ form: 'user', touchOnBlur: true,
tutorial _________________________________________________ 75
Tutorials Capture visitor data with Redux Form
Alternatives to Redux Form While Redux Form is great at managing large forms alongside Redux, it is a heavy tool that may be excessive for smaller applications. What alternatives are there that can help construct forms? The similarly named React Redux Form is another tool that keeps form data in sync with Redux. Reducers are set up for each form with components binding their values to their data. While functional, this package is now in maintenance mode and will not get any new features. When working with lots of smaller forms, it may not make sense to connect them to the Redux store. Formik is a tool that uses supplied React components to contain the state of the store. Other components link their inputs to the state without having to manually create handlers. Other configuration, such as validation, are passed through as props.
validate })(User);
17. Handle submit failure If we try and save our username as ‘Lauren’ nothing happens. We cannot have two users with the same username and Lauren is already taken. We should surface that error on the form for the user. Forms managed by Redux Form will also be given an ‘error’ prop. Show this value after the <Button> component. {error &&
export const getInitialValuesForUserForm = state => ({ name: state.user.name });
20. Pass initial values to form To keep everything separated, the initial values need to get passed to the form container before hitting the form itself. Use the mapStateToProps method inside components/container/UserForm/UserForm.js to insert the values, then pass it to the form itself.
18. Return a SubmissionError If the ‘handleSubmit’ promise rejects, the form will be told the submission failed. Right now we ignore submission errors, so the promise resolves instead. Redux Form provides a special ‘SubmissionError’ throwable error that can reject the promise and provide the reasons why back to the form. Update the ‘submitUser’ action creator promise inside actions/user/user.js to throw this error if unsuccessful. The ‘_error’ property will apply this error to the form. .catch(() => { dispatch(submitUserError()); throw new SubmissionError({ _error: 'Could not save details' }); });
19. Generate initial values This form initialises with a blank field. As users will already have a username, it makes sense to pre—fill this field with this data. As this data already lives in Redux, we can use a selector to pull it out for the form. Make sure the keys of the returned object match up to the field names and Redux Form does the rest. Open up selectors/user/user.js and create that selector.
76__________________________________________________tutorial
[…]
export const mapStateToProps = state => ({ initialValues: getInitialValuesForUserForm(state) });
21. Allow reinitialisation The existing username still doesn’t appear if we land on this page first. When the form initialises, the username is undefined. It only comes through once the username has loaded in asynchronously. In order to update the form for this situation, we need to add a final piece of configuration to the form’s options. This would allow the form to reinitialise when the initial values update. Reopen components/forms/User/User.js and add ‘enableReinitialize’ to the options. export default reduxForm ({ enableReinitialize: true, form: 'user', validate, 19
Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes
Tutorials
Test your JS with the Jest framework Finding the right JavaScript unit testing frameworks is not easy. But Jest is different. Find out how to use it today
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 78__________________________________________________tutorial
Tutorials
C
lassic JavaScript testing frameworks saw the light in a different time and age: Addy Osmani had barely started work on his collection of objectoriented programming patterns, while large frameworks such as Angular or React were unimaginable. Back then, ‘simple’ case-based comparative engines worked well enough — checking the output of a computational engine or a bit of glue code does not require much thinking. The Jest developer team is a strict adherent to the idea of zero configuration. This makes the framework easy to bring up as long as a package manager like NPM or YARN is available. Another aspect is the wide-ranging extensibility, which makes adding new functionality to the framework a breeze. Finally, Jest integrates itself into various version control systems like Git and Mercurial. This process is beneficial in that it provides Jest with an overview of commits and eliminates unneeded test runs. Surprisingly, all of this does not come at a significant price in terms of performance. Comparative evaluations attest the product to have market-leading performance — the times of limiting unit test scope due to CPU constraints should be over for Jest users.
1. Install YARN While Jest can also live inside a NPM environment, all of the documentation is based on YARN. Fortunately, adding the product is easy on Unixoid operating systems — the developer team provides a wellmaintained package repository. Users with a non-Ubuntu operating system should look at the installation page shown in the figure and found at YARNpkg.com/lang/en/docs/ install/#debian-stable. tamhan@tamhan-thinkpad:~$ curl -sS dl.YARNpkg.com/debian/pubkey.gpg | sudo apt-key add tamhan@tamhan-thinkpad:~$ echo 'deb dl.YARNpkg.com/debian/ stable main' | sudo tee /etc/apt/sources.list.d/YARN.list tamhan@tamhan-thinkpad:~$ sudo apt-get update && sudo apt-get install YARN
2. Create a project YARN and NPM behave similarly when package management is concerned. In both cases, a new
1
project must be generated — after that, the Jest-related components can be added. Simply follow the steps outlined — the default values provided by the wizard are acceptable.
{ . . . 'devDependencies': { 'Jest': '^24.1.0' }, 'scripts': { 'test': 'Jest' }
tamhan@TAMHAN14:~/YARNspace$ YARN init YARN init v1.13.0 question name (YARNspace): Jesttest question version (1.0.0): . . . success Saved package.json Done in 7.82s. tamhan@TAMHAN14:~/YARNspace$ YARN add --dev Jest YARN add v1.13.0 . . . ٽڃ[email protected] Done in 8.61s.
}
4. Perform a dry run At this point in time, YARN is ready to run. Enter YARN test to invoke the element added to the script tag above, and feast yourself on the error shown in the figure. Jest finds test files by analysing the file names — if no matching file is found, test case execution terminates with an error.
5. Write some logic…
3. First test! While Jest can be run from the command line, opt for build flow integration. YARN-based projects offer an option that contains a package.json file, which is to be modified as outlined in the code snippet accompanying this step. 4
Writing unit tests — logically — requires code to be tested. Create two simple mathematical functions and a string returner, which are to be placed in the file tam.js and look like the code with this step. function sayHello() { return 'Hello'; } function add(a, b)
Modern Unix, beware Very recent versions of Ubuntu (around 17.xx) face issues when installing YARN. Further information and advice on mitigation can be found by examining the issue at github.com/ YARNpkg/YARN/issues/2821.
tutorial _________________________________________________79
Tutorials Test your JS with the Jest framework
8
7. Understand the situation at hand
{ return a+b; } function divide(a,b) { return a/b; } module.exports = sayHello;
6. ...and test it A look at the error output shows that Jest uses the expression ‘**/��tests��/**/*.[jt]s?(x),**/?(*.)+(spec|test). [tj]s?(x) ‘ to find test candidates. Thus, a smart test file would be called tam.test.js — for now, the simple content shown in the code accompanying this step shall suffice.
const tam = require(‘./tam’); test(‘Checks if Tam is friendly’, () => { expect(tam()).toBe('Hello'); });
Floating point trouble
If you ever find yourself wanting a specific precision, feel free to use dedicated maths libraries. These products use integers to emulate floating numbers – a slow but arbitrarily accurate process.
80 �������������������������������������������������tutorial
Jest expects test cases to be provided in dedicated files. Due to the product being targeted at modern object-oriented code bases, the code to be tested usually comes in the shape of a module. The actual value comparison is then performed using matchers that are similar to other frameworks.
8. Run the test Finally, order another execution of the test cases via the YARN package manager. It will yield the results shown in the accompanying figure — as our test case is simple, execution is accomplished quickly. tamhan@TAMHAN14:~/YARNspace$ YARN test YARN run v1.13.0 $ Jest PASS ./tam.test.js
9. Structured test execution Some tests can only be run after a more or less elaborate set-up routine has run its course. Jest accomplishes this via the before and after function. A beforeEach call runs before each test case. A beforeAll method is run once the test suite starts up. beforeEach(() => { initializeCityDatabase(); }); afterEach(() => { clearCityDatabase(); });
beforeAll(() => { return initializeCityDatabase(); }); afterAll(() => { return clearCityDatabase(); });
10. A surprising situation Now that our strings check out, it is time to test the arithmetic functions. For that, the exports of tam.js need to be adjusted. The following two test cases are ready to fail, with the result shown in the figure. module.exports.add = add; module.exports.divide = divide; const tam = require(‘./tam’); test(‘Checks if we can add’, () => { expect(tam.add(2,2)).toBe(4); }); test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)).toBe(0.333333333); });
11. Account for imprecisions Like most other programming languages, the JavaScript runtime uses floating number mathematics. This means that non-integer numbers cannot always be expressed with infinite accuracy. Working around the problem requires the use of a different matcher. When dealing with floating numbers, using toBe is generally not advised.
Tutorials Test your JS with the Jest framework
Harness the power of the command line Jest tests can also be run outside of a package manager. In this case, the Jest command line utility must be used — it can only be run when installed globally using either NPMs or YARN’s global install feature. Once installed, visit Jestjs.io/docs/en/cli. Jest’s developer team provide command line users with dozens of options intended to tailor execution scope to the needs of the task at hand. Entering ‘Jest --findRelatedTests path/to/fileA.js path/ to/fileB.js’ runs only those tests which touch the content of the files passed in as arguments. In addition to that, the command line tool can even analyse local repositories and run only these tests affected by currently uncommitted code.
test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)). toBeCloseTo(0.333333333); });
12. Run just one Should you ever feel like running one test, feel free to use the test.only function. It informs the runner that all other test cases are to be ignored — helpful and time-saving as your unit test suites grow.
of required attributes. Jest’s logic takes the snapshot’s contents and performs an analysis against the object returned — errors will be raised if a mismatch is detected. For the following steps, start out by placing the code shown next to this step inside of tam.test.js.
const user = { createdAt: new Date(), id: Math.floor(Math.random() * 20), name: ‘Tam HANNA’, }; expect(user).toMatchSnapshot(); });
it(‘is a small test’, () => { 14
test.only(‘this will be the only test that runs’, () => { expect(true).toBe(false); });
13. Understanding snapshots As JavaScript object orientation entered mainstream developer conscience, more and more code adopted OOP principles. Sadly, verifying the correctness of objects gets tedious quickly — checking each and every member’s value by hand leads to long and difficult-to-handle test code.
14. Content analysis Think of snapshots as a template containing a set
tutorial ������������������������������������������������� 81
Tutorials Test your JS with the Jest framework
15. Find the snapshot file
15
When Jest encounters a new snapshot-related object, the runner generates an additional snapshot file and displays the message shown in the figure accompanying this step. As our object contains a randomly generated value, subsequent executions of the test suite will (usually) fail with date and ID mismatches. tamhan@TAMHAN14:~/YARNspace/__snapshots__$ ls tam.test.js.snap // =============== FILE gedit tam.test.js.snap =============== // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = ` Object { 'createdAt': 2019-03-07T09:03:37.980Z, 'id': 12, 'name': 'Tam HANNA', } `;
16. Limit analysis accuracy One way to work around the problem involves the use of ‘scoped’ matchers. They differ from their normal colleagues in that they accept any value of a given type — in our case, both createdAt and id should be handled by these smart elements. expect(user).toMatchSnapshot({ createdAt: expect.any(Date), id: expect.any(Number), }); });
17. Update the snapshot file Sadly, running the program in the current state does not improve our situation. This is logical, as the snapshot files are still out of date. Simply enter ‘YARN test -u’ and look at the updated contents. The -u command can also be used to update outdated snapshots in general — keep in mind that Jest will consider whatever values it may find during the test execution. // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = `
Object { 'createdAt': Any, 'id': Any, 'name': 'Tam HANNA', } `;
18. Create a configuration file Jest is not limited to working with the default environment settings. Invoking Jest --init from inside the YARN environment launches the set-up wizard shown in the figure accompanying this step. It allows you to set up various options related to the test execution environment.
19. Async waiting JavaScript unit test frameworks usually have a hard time running unit tests against asynchronous code. Jest stands out in that it accommodates waiting for you — in the example below, the done callback can be used to ‘wait’ for a result: test(‘the data is peanut butter’, done => { function callback(data) { expect(data).toBe(‘peanut butter’); done();
} fetchData(callback); });
20. Use mock functions Another extremely useful feature involves the use of mock functions. They can be submitted in place of a callback, and return data about the invocations.
const mockCallback = Jest.fn(x => 42 + x); forEach([0, 1], mockCallback); // The mock function is called twice expect(mockCallback.mock.calls.length).toBe(2); // The first argument of the first call to the function was 0 expect(mockCallback.mock.calls[0][0]).toBe(0);
21. Learn more Jest is an extremely complex framework which can not be covered in a single issue of Web Designer. Visit Jestjs.io/docs/’Jestjs.io/docs/ on a non-Mozilla browser to find out more about the possibilities related to frameworks such as React. 18
82��������������������������������������������������tutorial
MASTER ARCHVIZ WITH 3D WORLD We uncover the latest trends and key techniques
SUBSCRIBE to receive KitSound Harlem Wireless Headphones!
VI O RAININ WI H HI I U
www.bit.ly/3dworld-app PRINT www.myfavouritemagazines.co.uk/3dwsubs NEWSSTAND FOR IOS
Issue 246 on sale now
84 _________________________________________________feature
s the wait for a solution that combines the discoverability and frictionless entry of the web with app-like performance and user engagement finally over? For many years, native apps have had the edge when it comes to delivering well-performing, engaging user experiences. Yet app stores present a barrier to entry that fails to match the much broader reach of a search-driven mobile web. Progressive Web Apps (PWAs) and Single Page Apps (SPAs) give developers the technical capability to elevate web performance, while Performant Design principles give designers the tools to craft engaging app-like user experiences that exceed all expectations of what’s possible on today’s web. The web has a number of key advantages that line up with the shortfalls of native apps, one being the capability of search engines to search content rather than simply the name of the brand as in the App Stores. But even with its frictionless barrier to entry, the web has traditionally found it difficult to rival native apps in terms of where users like to spend their time.
Evidence of a swing away from native towards the web is popping up all over the digital landscape (pwastats.com). Major brands are recognising a need to improve their mobile offering and face a decision on whether to invest more in their native app or to concentrate their efforts on either improving their responsive site or opting for a hybrid web app solution like PWAs. Flipkart (.flipkart.com) saw a need to reach potential customers in cities where less phone storage is not unusual. In removing the requirement to download an app, 60 per cent of customers who had previously uninstalled the app returned to use the Flipkart PWA (bit.ly/2vOsG53). Brands choosing to invest in the mobile web are also seeing a positive increase in metrics of user interaction and engagement. Tinder’s PWA saw load times cut in half (bit.ly/2pTSw7R) compared to its native app, resulting in longer session times, more messages and more swiping. So what is it about PWA and Single Page Apps that has seen them enjoy such gains in the realm of performance and user engagement, compared to native apps and responsive web design?
feature _________________________________________________85
oogle’s endorsement of web-based applications goes back over a decade. In 2009, VP of engineering Vic Gundotra heralded the web as “the dominant programming model of our time” ( ly/2U9SnYF) in relation to HTML’s ability to match previous advantages of hardware-based development. This backing continued to 2016 where Google’s platform refurbishment took the form of pushing Progressive Web Apps (PWAs), user experiences they claim are reliable, fast and engaging (bit.ly/1nlXeEV). So what do they have to offer?
Service workers enabled Konga to send 63 per cent less data for initial page loads, and 84 per cent less data to complete the first transaction
Service workers are JavaScript written client-side proxies that give developers more control of the cache. By pre-caching certain resources, it eliminates dependency on the network, allowing the app to load from the user’s home screen instantly, even in uncertain network conditions. Security has historically been a trump card of enclosed native applications. If web apps were to ever rival native in this trait, the user must be offered a secure connection wherever they choose to browse, hence why HTTPS is a requirement of PWA. Again, signs of heavy Google-endorsement are clear to see. Its search algorithm will prioritise HTTPS over sites with a Secure Socket Layer (SSL). Only secure mobile sites are candidates for Accelerated Mobile Pages (AMP) (bit.ly/2VldGGR), and since Chrome 56, a ‘not secure‘ label appears next to any URL that is not served over HTTPS. This gives the web a visible layer of trust that is otherwise hidden in native apps — an edge set to become increasingly important to today’s users seeking understanding and control of the flow of personal data.
86 _________________________________________________feature
Service workers and modern development processes pay dividends when it comes to improving a web app’s first page load. But where PWAs really come into their own is in the loading of subsequent pages. The service worker caches the app shell and other assets on install, instantly displaying content to users while they browse rather than making a request for new content on each following page load. This brings page load times down to insignificance. A recent report from Mobify (bit.ly/2UdeNIA) states the median successive page load time for a PWA is 1.4 seconds. The industry average is 6.2 seconds.
Progressive web apps can be installed to a user’s home screen without going through an app store. These installed apps then adopt features that make them indistinguishable from a native app. They load from an app icon into a rich full-screen experience without the distracting omnibox or browser controls, allowing designers to build in their own app-style navigation (bit.ly/2zILXJO) exclusively for this immersive experience.
With the help of a web app manifest file, PWAs appear in all the areas you’d expect a native app to appear. This includes the app launcher, settings app and task switcher. Any links to the website from external sources open in the installed app, and even users signed up for push notifications, can access those in the same places as their other app notifications.
Gmail is one of the most—used single page web w applica ations
ack in the web’s early days, it was normal for Multiple Page Applications (MPAs), built-in static HTML and server-side technology like PHP, ASP and Python, to drive user navigation through multiple client/server requests. As user experiences have grown in complexity, so have the demands they put on the servers. One of the web’s earliest forays into Single Page Apps (SPAs) came in the early 2000s with AJAX. This allowed web pages to run multiple updates without reloading, reducing the number of requests servers were processing and users were waiting on. After that came a string of JavaScript frameworks including JQuery and Backbone.js, a move away from JavaScript entirely with Flash and Silverlight, before coming full circle in 2010 with the release of the robust Angular.js and later React.js. The common idea across all these evolutions was that a web ‘page‘ could hold more conversations with its users outside of the standard web of hyperlinks to additional pages. Today, Single Page Apps dominate our most used web applications — Facebook, Twitter, Gmail and Google Docs to name but a few. These richly interactive apps are a far cry from the hyperlinked HTML documents of the past, and show how SPAs can deliver complex, highly performant experiences to web users.
Since HTML, CSS and script files are downloaded and parsed just once throughout the app’s lifespan (only data is transmitted back and forth,) users transitioning between ‘pages‘ in Single-Page PWAs can do so much faster than in a multi-page solution. By
reducing the number of ‘white flash‘ interruptions for the user where no content is visible, SPAs have more control to smooth out page transitions and maintain user attention, providing visual continuity and positive feedback to their interactions.
One benefit to operating under a single server request is that the same data existing between two pages/states can be displayed instantly without interruption. An app-like sticky header is a common way web apps maintain user context through persistent UI. We also see this in commerce PWAs, where a user transitioning from a list of products to a single product in full detail can see the product name and image from the previous page. Reusing product data in this way, instead of displaying a black screen while that data is fetched and rendered, creates a faster, smoother loading experience for the shopper.
The Debenhams PWA is able to take data, such as product name, from the listing page and immediately display it on the product detail page while the other assets are loading.
Whether it be finding a specific piece of information or browsing multiple information sets, most users arriving at a site are looking to complete a task quickly, especially on mobile. For every two additional seconds of load time, the number of users leaving the site (bounce rate) goes up to 50 per cent, and for every extra second it takes for a page to load, the number of users reaching the end of that task (conversion rate) falls by 12 per cent. The combination of faster load times, fewer server request interruptions and increased visual continuity means that users in SPAs take less time to move through and complete tasks faster than in MPAs.
feature _________________________________________________ 87
This demo of SVGOMG shows 60 per cent + savings from optimising artwork markup.
ith PWA and SPA, developers have the technical tools to deliver fast and engaging web experiences, rivalling their native counterparts. But there exists a missing piece of the puzzle, a catalyst that can propel a high-performing web app to a hyper-performant, best-in-class user experience. This ingredient is found through considering performance a fundamental principle of the UX and visual design process. This is Performant Design. A delay between 300 and 1,000 milliseconds makes the user feel like a machine is working, but they begin to mentally context-switch above 1,000 milliseconds. Anything that provides the content faster will result in a more positive engagement.
Load times can be significantly reduced by Lazy Loading offscreen elements. This deconstructs the initial payload to render content that is in view first. Images and other heavy elements load later in the sequence, or as the user scrolls. Lighthouse is a Google tool full of actionable insights that help designers and developers optimise performance in fine detail across the loading spectrum.
Downloading custom fonts cost around 200–500ms on 3G connections. Letting the device handle font rendering by using system fonts ensures text loads instantly, and using variable fonts offers typographic variation without forcing the user to
88 _________________________________________________feature
download fonts in multiple weights. Check out variable fonts in action at v-fonts.com.
Exporting vector icons and illustrations often adds a lot of unnecessary bloat to the file. This can be cleaned up considerably, reducing a site’s image payload and giving the user quicker access to key icon-based navigation and signposting. Coming from Google’s Development Team, SVGOMG is a useful tool to help optimise SVGs.
The task of optimising images is a job that holds space in both the design and development process. The art of image optimisation comes from the human eye judging the compression tool’s impact on image quality. Several algorithms and rendering techniques can significantly reduce the size of an image in ways that are invisible to the naked eye. The Google Chrome team introduced Squoosh to help in both these processes. This powerful web-based image compression tool puts high-resolution visual comparison to the forefront, while giving users access to all the complex behind the scenes compression options.
Delays of less than 100 milliseconds still feel instant, but anything above that is perceptible. When it comes to optimising speed, it’s what the user perceives that really matters, which is what makes designing for those in-between states integral to delivering hyper performance.
Squoosh demonstrates how huge file savings can come without compromising image quality.
Content placeholders, or skeletons, are used to construct a preloaded version of a page while content is loading. They not only prevent jagged and disruptive ‘reflows’ — where rendered elements are pushed out of view by subsequent items loading in their place — they can also make users believe the page is loading quicker than it really is. When implementing skeleton screens, content should be rendered as soon as it is ready, rather than blocking it until everything is ready to show. Which works best? Which one feels faster? An app where the user has no indication when the content is coming? Or one that uses staggered loading animations, skeleton screens, frosted images and metadata on content? These two examples may take the same amount of time to load, but the user perception of length is completely different. Using a spinner shows no indication of when the page will be finished loading. Brief animations, on the other hand, can mask the loading transition and imply that the system is ‘progressing ‘ rather than ‘processing.’ We all want to see reaction to our actions, and it’s no different on the web. Smooth scrolling, silky animations and tap feedback states all help to increase a user’s perception that the experience is responding immediately to their touch. Considering tap, hover, loading and passive states all help to simulate a performant experience, Google’s Material Design (material.io/design/interaction/states.html) provides guidance of how to effectively craft all these states. Today’s user is impatient, and the more you make them think, the more likely they are to go elsewhere to get the job done. Clarity and simplicity are therefore key components of any highly performant web experience.
When motion is used effectively it helps inform users and guide the their next step.
feature _________________________________________________89
PERFORMANT DESIGN IS FOR EVERYONE As you might expect, accessibility principles will improve the overall usability of any web app that incorporates them
Q MINIMUM TAP TARGETS Ensuring a minimum tap target of 44—52px ensures enough space is present between tappable elements, reducing the margin for errors and time spent correcting them. Q MINIMUM FONT SIZE Easily readable text ensures quick processing and faster task completion for users. Google’s recommendation for body text is 16pt, a requirement echoed in their Lighthouse rankings when penalties are applied to web apps with too much text below 16pt. Q COLOUR CONTRAST Text and symbol clarity is also important. Google includes it in the Lighthouse accessibility audit. Web apps that fail to apply clear contrast between text and background colour see penalties in their lighthouse score, and slow users down in their attempt to process and proceed with the relevant information.
Tools to help test contrast ratios in PWAs are now part of Chrome DevTools.
Financial Times (https://app.ft.com/index_page/home) is one of the highest profile responsive PWAs, allowing desktop readers to consume articles offline and on the go.
Emphasised call to action (CTA) buttons allow friction-heavy user flows. GooglePay allows users to move forward quickly in their task with shoppers to complete multiple checkout steps in a confidence. Paying careful attention to CTA size, single tap, while one-tap sign in gets users into their colour, placement and microcopy helps make the account in the same way. key actions more obvious and reduces thinking Results from early adopters show that removing time. Patterns first seen in native apps, such the the interruption of login screens and checkout floating action button and fixed header bar, get forms, along with the mental friction of the user moving quickly and translate well to any remembering and entering information, speeds up performant web app. task completion and improves engagement. A general rule of navigation is ‘out of sight, out of mind’. Patterns such as a Bottom Navigation Bar and Tabs successfully put primary user actions front and centre, while the traditional Today’s user spends around six hours a day ‘hamburger’ menu has a lower engagement rate. online with an average of 6.5 connected devices Facebook found that by moving from a per person. Not only is it fundamentally important Digital Wallets like hamburger menu to a tabbed approach improved to design for a number of different devices, but to Google Pay can distill complicated checkout engagement, satisfaction, revenue and perception design for areas of low and no connectivity. flows down to a single of speed. Users often take multiple sessions to complete ‘Pay’ button. Having a strategy of the type of content you a task, and delivering performant experiences on want to promote is important, and simply treating all each device ensures that entire process is smooth and navigational items as equal will result in a decrease of satisfying. engagement in the areas that you want to improve. Spotify Desktop supports PWAs and designing performant found that by reducing the number of options in the tab bar to responsive PWAs without the bloated code commonly five increased the reach of Spotify’s programmed content — a associated with responsive websites, means designing mobile great example of how promoting certain navigation items over first. This brings the essentials to the forefront, adding more others can focus the user’s experience. items only when the user agent can handle it. Service Workers allow PWAs to stand up when the network connection goes down. This opens the door to craft offline user experiences by use of clear network status messaging and disabling elements that would otherwise derail Digital wallets like GooglePay and upcoming automatic sign-in the experience. API both leverage data stored on the device to simplify
y using the Performant Design techniques mentioned above, designers can take control of user perception and ultimately make the web feel faster and more engaging. If the latest updates from Chrome Dev Summit are anything to go by, it’s that it’s the web, not native apps that continues to monopolise momentum
90 _________________________________________________feature
— at least within the Google development team. Progressive Web Apps are becoming the flagship of mobile web development, and as the technology moves forward, their ability to benefit larger screens looks set to open the gates for a wave of PWA across all screens. As this wave gathers
momentum, Single Page Apps gives developers the ingredients to accelerate PWAs with app-like instant transitions. Add frictionless user experiences through Performant Design, and therein lies a recipe for hyper-performant, best-in-class web experiences that should excite any web designer or developer.
Special offer for readers in North America
SAVE 30% When you subscribe PLUS you’ll receive The 100 Best Typefaces Ever e-book!
FREE
resource downloads eve y issue
+44 (0) 344 848 2852 2QOLQHDW myfavouritemagazines.co.uk/WCUEB 2UGHUKRWOLQH
*Terms and conditions
This is a US subscription offer. 30% saving refers to the USA newsstand price of $14.50 for 13 issues at $188.50, compared with $132 for a subscription. You will receive 13 issues in a year. Please provide a valid email address to receive your e-book. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. Full details of the Direct Debit guarantee are available XSRQ UHTXHVW 8. FDOOV ZLOO FRVW WKH VDPH DV RWKHU VWDQGDUG À[HG OLQH QXPEHUV VWDUWLQJ RU DUH LQFOXGHG DV SDUW RI DQ\ LQFOXVLYH RU IUHH PLQXWHV DOORZDQFHV LI RIIHUHG E\ \RXU SKRQH WDULII )RU IXOO WHUPV DQG FRQGLWLRQV SOHDVH YLVLW ELWO\PDJWDQGF 2IIHU HQGV 0D\
Expires May 2019
Get your listing in our directory To advertise here call the ads team on 01225 442244
HOSTING LISTINGS Featured host: Netcetera netcetera.co.uk 03330 439780
About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT
infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.
What we offer
sData centre colocation –
sManaged hosting – A full
range of solutions for a costeffective, reliable, secure host. sCloud hosting – Linux,
Windows, Hybrid and Private Cloud Solutions with support and scalability features.
5 tips from the pros 1. Reliability, trust & support Reliability is a major factor when it comes to choosing a hosting partner. Netcetera guarantees 100 per cent uptime, multiple internet routes with the ability to handle DDOS attacks, ensuring your site doesn’t go down when you need it.
2. Secure and dependable Netcetera prides itself on offering its clients a secure environment. It is accredited with ISO 27001 for security along with the options of configurable secure rackspace available in various configurations.
3. 24/7 technical support Netcetera has a committed team of
“
Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK
”
Single server through to full racks with FREE setup and a generous bandwidth. sDedicated servers – From
QuadCore up to Smart Servers with quick setup and fully customisable.
knowledgeable staff available 24/7 to provide you with assistance when you need it most. Our people make sure you are happy and your problems are resolved as quickly as possible.
Testimonials Roy T
4. Value for money We do not claim to be the cheapest service available, but we do claim to offer excellent value for money. We also provide a price match on a like-for-like basis, as well as a price guarantee for your length of service.
5. Eco-friendly Netcetera’s environmental commitment is backed by use of eco-cooling and hydroelectric power. This makes Netcetera one of the greenest data centres in Europe.
92__________________________________________________ listings
“I have always had great service from Netcetera. Their technical support is second to none. My issues have always been resolved very quickly” Suzy B
“We have several servers from Netcetera and their network connectivity is top-notch, with great uptime and speed is never an issue. Tech support is knowledgeable and quick in replying. We would highly recommend Netcetera”
Steve B
“We put several racks into Netcetera, basically a complete corporate backend. They could not have been more professional, helpful, responsive or friendly. All the team were an absolute pleasure to deal with, and nothing was too much trouble, so they matched our requirements 100 per cent”
Supreme hosting
SSD web hosting
cwcs.co.uk 0800 1 777 000
bargainhost.co.uk 0843 289 2681
CWCS Managed Hosting is the UK’s leading hosting specialist. They offer a fully comprehensive range of hosting products, services and support. Their highly trained staff are not only hosting experts, they’re also committed to delivering a great customer experience and are passionate about what they do.
Since 2001, Bargain Host have campaigned to offer the lowest possible priced hosting in the UK. They have achieved this goal successfully and built up a large client database, which includes many repeat customers. They have also won several awards for providing an outstanding hosting service.
sColocation hosting sVPS s100 per cent network uptime
Budget hosting
UK-based hosting hetzner.com +49 (0)9831 505-0 cyberhostpro.com 0845 5279 345 Cyber Host Pro are committed to providing the best cloud server hosting in the UK; they are obsessed with automation. If you’re looking for a hosting provider who will provide you with the quality you need to help your business grow, then look no further than Cyber Host Pro.
Hetzner Online is a professional web hosting provider and experienced data centre operator. Since 1997, the company has provided private and business clients
sShared hosting sCloud servers sDomain names with high-performance hosting products as well as the infrastructure for the efficient operation of sites. A combination of stable technology, attractive pricing, flexible support and services has enabled Hetzner Online to strengthen its market position nationally and internationally.
Agency hosting specialist nimbushosting.co.uk 02031266781
sDedicated/shared hosting sColocation racks sSSL certificates
Nimbus Hosting have partnered with agencies to develop our revolutionary platform STORM. With a team dedicated to outstanding support, our 5-star Google reviews truly speak for themselves. Join the thousands of agencies and freelancers who are benefitting from a control panel that speeds up your website developement as well as your client’s websites. Supercharge your digital projects today with STORM.
sCloud VPS servers sReseller hosting sDedicated servers
s TFDPOE 8PSE1SFTT JOTUBMM s %FQMPZ EJSFDUMZ GSPN (JU)VC s &BTZ UFBN NBOBHFNFOU
Cluster web hosting Flexible cloud servers fasthosts.co.uk 0808 1686 777
All-inclusive hosting
6,CBTFEBOEPQFSBUJOHGSPN dedicated UK data centres. Fasthosts keep over 1 million domains running smoothly and safely each day. Services can be self-managed through the Fasthosts Control Panel.
1and1.co.uk 0333 336 5509
operates across ten countries. With a comprehensive range of highperformance and affordable products, 1&1 offers everything from simple domain registration to award-winning website building tools, eCommerce packages and powerful cloud servers.
sDedicated servers sCloud servers sHosted email
1&1 Internet is a leading hosting provider that enables businesses, developers and IT pros to succeed online. Established in 1988, 1&1 now
sEasy domain registration sProfessional eShops s)JHIQFSGPSNBODFTFSWFST
elastichosts.co.uk 020 7183 8250 ElasticHosts offer simple, flexible and DPTUFŇFDUJWF DMPVE TFSWJDFT XJUI high performance, availability and scalability for businesses worldwide. Their team of engineers provide excellent support 24/7 over the phone, by email and with a ticketing system. s Cloud servers with any OS s Linux OS containers s 24/7 expert support
listings__________________________________________________
Get your listing in our directory To advertise here call the ads team on 01225 442244
COURSE LISTINGS Featured:
Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders
About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their
full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England.
“
No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks
” .
What we offer s 'VMMUJNF Fast-track your career in just 12 weeks
s 1BSUUJNF Fit our curriculum around your life in 24 weeks
5 tips from the pros (FU TUBSUFE XJUI DPEJOH The best way to know if coding is for you is to just try it! We recommend the free, online JavaScript track of Codecademy to get you started with the basics. %P ZPVS SFTFBSDI Make sure you read plenty of student reviews to make sure you’re applying somewhere reputable. Read their blog and have a look at their social channels. 5ISPX ZPVSTFMG JO Once you’ve decided it’s right
for you, set aside a few evenings each week to really start making progress! If coding is for you, this should be fun. #F QSFQBSFE We’ll be with you every step of the way when you apply. Make sure you go through all the materials we recommend and ask for help if you’re stuck. (FU TPDJBM With Northcoders, you’re not just on a course, you’re part of a community that will stay with you long after you graduate. Make the most of it!
Becoming part of this vibrant, caring community was something I hadn’t expected before the course, but now I couldn’t be without it. To be a Northcoder is to be enlightened, inspired and supported
Joanne Imlay
Northcoders delivered their part of the bargain in spades. They provided tremendous assistance in turning me into the full product – a well-rounded, capable future tech employee – and they have the contacts to deliver the opportunities for such people.
Primary school teacher to software developer at Careicon
Joe Mulvey Maths teacher to software developer at Auto Trader
94 _________________________________________________ listings
WE GOT CODERS
UDEMY udemy.com
wegotcoders.com [email protected]
Twitter: @udemy Facebook: udemy
We Got Coders is a consultancy that provides experts in agile web development, working with startups, agencies and government. Take one of their 12-week training courses that covers all that is required to become a web developer, with highly marketable full-stack web development skills.
The inspiration for Udemy began in a small village in Turkey, where founder Eren Bali grew up frustrated by the limitations of being taught in a one-room school house. Realising the potential of learning on the internet, he set out to make quality education more accessible. Udemy is now a global marketplace for learning and teaching online. Students can master new skills by choosing from an extensive library of over 40,000 courses, including HTML, CSS, UX, JavaScript and web development.
sClassroom-based training sReal-world work experience sEmployment opportunities
FUTURELEARN
40,000+ courses: There is a course for every designer and dev. Self-paced learning: Learn how to code at your own pace.
THE IRON YARD theironyard.com Twitter: @TheIronYard Facebook: TheIronYard The Iron Yard is one of the world’s largest and fastest growing in-person code schools. It offers full-time and part-time programs in back-end engineering, front-end engineering, mobile engineering and design. The Iron Yard exists to create real, lasting change for people, their companies and communities through technology education. The in-person, immersive format of The Iron Yard’s 12-week courses helps people learn to code and be prepared with the skills needed to start a career as junior-level software developers.
futurelearn.com [email protected] Choose from hundreds of free online courses, from Language & Culture to Business & Management, Science & Technology to Health & Psychology. Learn from the experts. Meet educators from top universities who’ll share their experience through videos, articles, quizzes and discussions.
sLearn from experts sFree courses sAll-device access
GYMNASIUM
thegymnasium.com [email protected] Gymnasium offers free online courses, designed to teach creative professionals in-demand skills. Courses are all self-paced and taught by experienced practitioners with a passion for sharing practical lessons from the design trenches.
12-week code school: Learn the latest skills from industry pros. Free crash courses: One-night courses, the perfect way to learn.
sGain real-world skills sGet expert instruction sCareer opportunities
listings__________________________________________________95
Free with your magazine Essential assets and resources
Exclusive video tutorials
Tutorial project files
Get textures, fonts, backgrounds and more
Learn to code/create with HTML, CSS & JS
$OOWKHDVVHWV\RX·OOQHHG to follow our tutorials
Plus all of this is yours too… $OOQHZWXWRULDOILOHVWRKHOS\RX PDVWHUWKLVLVVXH·V+70/&66 and JavaScript techniques $,'LFH$UW3KRWRVKRSDFWLRQV IURP6SDUNOHVWRFN ZRUWK (sparklestock.com ,QFHSWLRQVW\OH3KRWRVKRS actions from Sparklestock ZRUWK $EVWUDFWVPRNHDUWEUXVKHV IURP6SDUNOHVWRFN ZRUWK
Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets
Free for digital readers too! Read on your tablet or download on your computer
The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital 'RZQORDGRQO\WKHILOHV you want, when you want All your gifts from all your issues in one place
Get started Everything you need to know about accessing your FileSilo account.
Unlock every issue
Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine.
gifts from more than 70 issues Access our entire library of resources with a money-saving VXEVFULSWLRQWRWKHPDJD]LQH²WKDW·VPRUHWKDQ IUHHUHVRXUFHV
You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices.
Over 70 hours of video guides
More than 400 tutorials
Over 2500 creative assets
Let the experts teach you to create and code
Get the code you need to get creative
Templates, fonts, textures and backgrounds
Head to page 28 to subscribe now
,I \RX KDYH DQ\ problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below:
[email protected]
Already a print subscriber? +HUH·VKRZWRXQORFN)LOH6LORWRGD\« 8QORFN WKH HQWLUH :HE 'HVLJQHU )LOH6LOR OLEUDU\ ZLWK \RXU XQLTXH :HE ,' ² WKH WHQGLJLW DOSKDQXPHULF FRGH SULQWHG DERYH your address details on the mailing label of your subscription copies, also found on any renewal letters.
More th han 00 re easo ons s 90 o sub bscriibe to
More added every issue
NEXT MONTH THE FUTURE OF HTML TODAY Why you need to be working with web components and how to build your own
INTRODUCE SCROLL EFFECTS WITH SAL.JS Create performant and lightweight solutions for animating elements on scroll
STOP THE SPAM, STOP THE BOTS
Employ the power of Google reCAPTCHA to help detect unwanted intrusions
BUILD A 3D LANDING PAGE
Learn how to utilise WebGL and Three.js to create impressive home pages to engage users
Visit the WEB DESIGNER online shop at ALL IN YOUR NEXT
WEB DESIGNER myfavouritemagazines.co.uk
Issue 287 on sale
for the latest issue, back issues and specials Tuesday 30 April 2019
SUBSCRIBE TODAY Go to pa e 28 to learn more 98 __________________________________________next month
Product Reviews
18. Total Submission The previous code will hold the reviews. The user will need to submit their speech input, so add the submit button right after the ‘clear text’ button, which will be around line 28 in your code. Then you can move down to the JavaScript for the next step.
19. New interface elements At the top of your Javascript add the new variables to hold the references to the new interface elements that have just been added. These will provide you with a way to submit and display the results on the screen within the ‘reviews’ section of the page. var submit = document.getElementById(‘submit’); var review = document.getElementById(‘reviews’);
20. Submit the entry Now the code here will handle when the user
21
60 ttttttttttttttttttttttttttttttttttttttttttttttttttutorial
18
clicks the submit button, place this right before the ‘clear’ button code, which should be around line 88 in your code. First, a paragraph tag is created and the speech input is subsequently added into this. This will then be added into the ‘review’ section. submit.addEventListener(‘click’, function() { let p = document.createElement(‘p’); var textnode = document.createTextNode (transcription.value); p.appendChild(textnode); review.appendChild(p); let today = new Date(); let s = document.createElement(‘small’);
21. Final Submission The date is added so that the review is timestamped into the document. Finally a horizontal rule is added to show where each review ends, then the text is cleared ready for new input. Save the page and test this. You will see that you can now submit your speech into the page as reviews. For persistence you would need to use a database to store these results. textnode = document.createTextNode(today); s.appendChild(textnode); review.appendChild(s); let hr = document.createElement(‘hr’); review.appendChild(hr); transcription.textContent = ‘’; });
The number one destination for web design news, views and how-tos. Get Creative Bloq direct to your inbox with our weekly web design newsletter
Graphic design
Web design
3D
Digital art
www.creativebloq.com
Tutorials
Add animation While it can sound intimidating, you can get started in SVG animation with less knowledge than you think
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 62__________________________________________________tutorial
Tutorials
2
W
hen it comes to animating with SVGs, one major turn-off can be the idea of getting bogged down in JavaScript libraries. However, this doesn’t have to be the case. CSS can handle selecting individual paths within an SVG to create effects. Just knowing the basics can mean that it’s possible to turn flat, cliched icons into something a little more impressive. So perhaps it’s time to run through the fundamental steps of SVG optimisation and animation. When integrated into different designs, it doesn’t take long to realise that the possibilities are endless.
1. Create and save First, create an SVG to work with. For this tutorial, we will be using a simple graphic made in Illustrator. When using Illustrator to export an SVG reduce the size of the artboard to fit the graphic, then click ‘Save As’. Select SVG from the ‘save as type’ dropdown menu, then ‘SVG code…’ on the SVG Options dialogue. 4
2. Optimise for the web Cutting out unnecessary tags will make the image easier to deal with. This can be done manually by copying the code to your favourite editor and removing empty tags and metadata. Alternatively, a fantastic resource called SVGOMG at jakearchibald.github.io/svgomg will do this automatically. Paste the code into the ‘Paste markup’ area on the SVGOMG interface, then copy the image again using the button on the bottom right.
which will hold the SVG that we’ll be animating. To liven the page up, use a second, static, SVG as a background on the body tag.
5. Place the SVG We’re using our animation to make the introduction at the top of the page more interesting. Paste the optimised SVG code into the second column on the page. If using bootstrap, give the SVG the class ‘img-fluid’ to make sure it scales on mobiles.
3. Set up a HTML Document
6. Add classes to the SVG
Open your code editor of choice and set up a blank HTML document. We will write the CSS animation in a file called main.css, so create this too. To keep things focused on the animation, we’ve pulled in the CSS-only version of Bootstrap 4.1.3.
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
4. Build the layout Let’s build the bones of our layout and make a space for our SVG. We’ve added a header and two columns: one on the left for some text, and one on the right, 5
<svg>
Don’t overdo it
While animation and movement can liven up a page, giving it the wow factor, be careful not to distract attention away from important parts of the user flow. Sublety is key
tutorial �������������������������������������������������63
Tutorials Add animation to SVG with CSS
9
fill-rule=”evenodd” stroke=”#fff” strokelinecap=”round”/>
7. Initial states Selecting our SVG elements in CSS is the same as any other element. We use our classes to select those elements within the SVG. Both parts of our SVG will start as hidden when the page loads, so let’s use CSS to set both element’s opacity to 0. path.rectText { opacity:0; } rect.rectBackground{ opacity: 0; }
8. Declare the animations 10
We need to declare the name and keyframes for each animation so that CSS knows what we want to do when we ask it to perform an effect. I’ve chosen textDraw and rectFade, as they describe each animation. rectFade will be a simple two-step animation. textDraw will have an extra middle step. @keyframes textDraw { 0%{} 50%{} 100%{} } @keyframes rectFade{ from{} to{} }
9. Assign animation and properties
13
We add the rectFade animation to the rectBackground element and give it a duration of one second. An easeOut cubic bezier is being used to give it a smoother feel. We add “forwards” so that the element keeps the properties of the last keyframe when the animation ends. rect.rectBackground{ opacity: 0; animation: rectFade 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; }
10. The rectangle animation With just two keyframes, all we need to do for our rectangle is set a start and finish set of attributes. Let’s start with a 1% width and finish on 100% to give an ‘expanding to the right effect.’ We can also set opacity: 1 to the last keyframe so the shape fades in at the same time. @keyframes rectFade{ from {
64 �������������������������������������������������tutorial
Tutorials Add animation to SVG with CSS
The next level Once you’ve mastered this form of SVG animation using just CSS, you’ll be able to apply it to many areas of your design. Limitations will start to pop up when you want a more complex way of triggering the start of the animation — creativity may also lead you to require more advanced functionality. This is a fast-growing area of web design and many options exist. Anime.js is a JavaScript animation library with an array of features and fantastic documentation. It works with CSS and SVGs in a similar way to what we’ve covered, making it the logical next step following this. Others include Lottie by Airbnb, which lets you export animations from Adobe After Effects and use them on a webpage with SVGs.
width: 1%; } to { width:100%; opacity: 1; } }
11. The text animation We’re going to create a line-draw effect on our text then use a fill to fade in. To set up the text animation we give it our ‘textDraw’ with a four second duration. The cubic bezier has been modified on this step to give it a slightly different pace of movement. path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; }
12. Delay the start Our text needs to run just as the rectangle has finished fading in. Because the rectangle has a one second duration, delay the start of the text animation by that time.
Your values will be different to mine depending on the SVG you are using. To find your value, use your preferred developer tools and increase ‘stroke-dasharray’ from 0 until the entire shape is covered by one stroke. path.rectText { opacity:0; stroke-dasharray: 735; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
14. First line drawing keyframe Now we have our one very large stroke that covers the entire text path, let’s offset it by its own length to effectively push it away. Using ‘stroke-dashoffset’ for the same value as our dasharray should do it. Let’s set this in our first keyframe. We’ll also make the shape fill transparent and set the stroke to white if it isn’t already.
No Illustrator, no problem
If you don’t have Illustrator on hand to create your SVGs, don’t worry. A free alternative is available called Inkscape. It has all the essentials, which can be used to follow this tutorial. Inkscape adds a lot of unneeded data to the file, so use SVGOMG to strip this out.
opacity: 1; }
15. Draw the lines Our middle keyframe appears at 40% through the animation. We bring the stroke-dashoffset back to zero so the dash covers the entire path. We can re-add the transparent fill at this stage to make sure the fill only appears once the drawing is complete. 40%{ stroke-dashoffset: 0; fill:rgb(255, 255, 255, 0.0);
0%{ fill:rgb(255, 255, 255, 0); stroke:#fff; stroke-dashoffset: 800;
}
16. Fill in the shape For the last part of the animation, we will fill the shape in white. All we need to do for the last keyframe is raise the alpha value of the fill colour. This creates the fade-in effect of the fill.
path.rectText { opacity:0; animation: textDraw 4s cubic-bezier(.56,-0.04,.32,.7) forwards; animation-delay: 1s; }
100%{ fill:rgb(255, 255, 255, 1); stroke-dashoffset: 0; opacity: 1;
13. Emulate line drawing To get our line drawing effect we will use the ‘stroke-dasharray’ and ‘stroke-dashoffset’ parameters.
14
}
tutorial �������������������������������������������������65
Tutorials
Code a free site fast with Jekyll & GitHub Learn how to bring together static site generator Jekyll, CMS Siteleaf and get free hosting with GitHub
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 66 _________________________________________________tutorial
Tutorials
T
his tutorial is for people who have heard of JAMstack and are interested to see what it can do, or perhaps run a Wordpress blog and are sick of updates and potential hacking via malware. A basic knowledge of terminal is good. You should be able to follow along, as the commands are fairly simple. Sites on GitHub Pages are powered by Jekyll behind the scenes, so used along with GitHub Pages it creates a way to host and manage your website for free. This tutorial is for a Mac. Jekyll on Windows is possible, but not officially supported. For Windows, hop over here for help getting Ruby set up: jekyllrb.com/docs/installation/windows/ After completing this tutorial, you will have set up a GitHub pages account, created a Jekyll blog and published both by pushing through your terminal, as well as using Siteleaf for a real CMS experience. This tutorial is focused on connecting the three technologies as a platform to build your own site.
<meta charset='utf-8'>
My first static Site!
4a
4. Clone Wars!
1. Install Ruby
5. Set up GitHub pages
Ruby should be installed by default on a Mac. Let’s check by typing ruby —v in your Terminal.
You need to turn on GitHub Pages, so go into Settings and select your master branch of the repo. You will now be able to see this at ‘username.GitHub. com/repo—name’.
2. Create a repository on GitHub If you already have a Git account head over to GitHub and create yourself a repo that is named with the following format: your—username.GitHub.io. It is really important that you get this name right!
3. Add some content Let’s create an index.html file so we can clone down the folder and get working with Jekyll. Click add file in your new repo and type the following code.
4b
The last step for connections will be to clone your GitHub Pages site down. We now have the link up ready so let’s get going with Jekyll. Move to the folder you are going to use for your site and type ‘git clone’ followed by the clone url from GitHub.
5
6. Set your custom domain (optional) If you have a personal domain name you can link this to your GitHub Pages site. To do this first add your domain to the GitHub Pages account in settings. Now go to your domain manager and create a CNAME record (or amend it) to point at your GitHub pages domain.
6
1
Getting to grips with Git
Git can be quite intimidating, but once you know a few commands it is a tool/facility you really can’t do without. We only use the bare minimum in this tutorial, you can learn more at GitHub.com
2
3
tutorial _________________________________________________ 67
Tutorials Code a free site fast with Jekyll & GitHub
10
11
12
14a
7. Install Jekyll
11. Frontmatter
Now we can actually get Jekyll running in the site. Make sure you are in the directory you cloned down and simply type ‘gem install jekyll bundler’. Your computer will go and grab all the needed dependencies to run a site.
Frontmatter is a snippet of YAML () at the top of a file. Jekyll uses it to hold variables. Look in the about.md file, and you can see that we set the title there.
8. Serve locally and build There are two main commands you will use with Jekyll: ‘serve’ and ‘build’. To run your site locally, type ‘jekyll serve’ in your command line. This will run a version on http://127.0.0.1:4000 that you can preview your changes on. NB if you already have gem and other dependencies installed on your machine, this command may fail due to a mismatch in dependency versions. In this case try ‘bundle exec jekyll serve’ instead. It runs the same, but with the word build compiles the site.
9. Get a headstart
14b
Jekyll — old faithful
Jekyll is one of the founding static site generators, launched in 2008. It is still the most popular, largely because of the adoption by GitHub. More recently generators such as Hugo, Eleventy and Gatsby mean there are more choices than ever.
68 _________________________________________________tutorial
Copy in the files supplied with this tutorial at this point to give you a basis to work from, or download them here: GitHub.com/maxray/jekyll/archive/ master.zip This will give us a homepage, blog list and the assets structure for the site. Refresh your page at http://127.0.0.1:4000 and you will see we now have some basic pages to build from. Let’s have a quick overview of how the Jekyll site works.
12. Liquid tags Liquid is a templating language that uses objects, tags and filters. We use the object tag surrounded by {{ }} to do this. If you look in the layouts/default.html file you can see how we output the Frontmatter from the previous step.
13. Building up pages We build pages in a similar way to how you might build a WordPress theme. We use includes for often used parts, for example the navigation, html for templates and, in this case, markdown files for posts.
14. Navigation Rather than a static navigation, we use the power of config files to separate the content from the template. Navigation.html has liquid tags for a loop through the navigation.yml file. We can just enter whatever pages and links we want now without going back to the template.
10. First stop — configuration
15. Blog list template
Open _config.yml in your text editor and add your own details. One key area to check is to set your base url. This is the folder that your site is loading in.
To create a list page, again we use liquid tags to give us the logic to loop through all the files in the ‘posts’ folder.
Tutorials Code a free site fast with Jekyll & GitHub
JAMstack Sites ‘Modern web development architecture based on client—side JavaScript, reusable APIs, and prebuilt Markup.’ — jamstack.org You may be familiar with the term LAMPstack to describe a traditional suite of technologies used for building a website. With the JAMstack, we don’t refer to specific databases or Operating Systems but instead the three areas that come together. It’s a new way of building websites and apps that can give performance gains and also improve the security of your site. So why would you consider using a JAMstack approach over a traditional website? s*NQSPWFEQFSGPSNBODF Pre—built HTML and assets and no databases make it perfect for using a CDN resulting in super quick page loads. s4FDVSJUZ JAMstack websites are incredibly secure, there are no databases to worry about or in the case of WordPress plugins to update or be exploited. s$PTU As you can see in this tutorial you can run a website for the cost of a domain name.
16. Styling it up
18
GitHub pages renders the sass files for us, so you can just build out as you normally would and then push your changes to master to publish them. No gulp files or Webpack here, just nice lean styles.
17. Push to master Now that we have a working local site if we commit this and push it back to our repo GitHub Pages will render the site for us. If you have never pushed a GitHub repo then it is worth reading up a little bit for the purposes of this example type:
git add --all git commit -m ‘First commit to jekyll site’ git push -u origin master
18. Set up a free Siteleaf account You may want to just use a standard content management system to blog. Some designers prefer it to a text editor. Siteleaf offers a free account for developers, and this will give you interfaces to use.
19. Connect to your repository After signing up for an account, you can then connect your repository to Siteleaf. Choose the repository and branch you set up earlier.
20. Test updates via the CMS Now you have everything set up, try editing a post in Siteleaf. You’ll see how it syncs back to the GitHub repo, updating your website.
19
20
21. Pull down changes If you now run ‘git pull’ in your terminal window, you will see the changes you made in the CSS updated into your local folder. You now have a two-way connection for developing your site locally or using a browser based CMS tool.
tutorial _________________________________________________69
web workshop
Code smart text effects with CSS Inspired by middlechildphilly.com/menu
Attention Grabbers Rollover links are a great way to grab the attention of the user. Always try to do something unusual and original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation. It’s a delight to the user.
Rollover effect
Happy service
Animated menu
A lot of the links on the site have a fun rollover effect, where each letter splits apart and rotates slightly through animation. The underline also animates off to the right.
The smiling face logo at the top of the page looks towards your mouse to see where you are moving. This is also the main interaction, but larger on the landing page.
Clicking the animated burger icon brings an overlay in from the top, while each navigation element drops into place one at a time.
Rollover menu
Always available
Each menu item on screen changes and highlights as the user rolls over. The picture to the left of it changes and updates accordingly.
Keeping customers in touch is key for a business. The floating ‘Call us’ button will open Facetime and connect users immediately.
70 ____________________________________________ workshop
Code smart text effects with CSS DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
Rising high
Bringing together many quirky effects allows the Middle Child site to show off it’s playful character while still providing a professional website for the catering company. The site’s playful image is engaging and elevates this against other catering sites. Mark Shufflebottom , Professor of interaction design
Technique 1. Rollover text effect One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags.
Breakfast
2. Create CSS Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available. html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: grid; height: 100%; }
3. Position the word The ‘word’ class centres the word in the grid. Any text that is given the ‘word’ class can have this applied. The ‘up’ class is going to be applied to every other letter and these will move upwards.
4
.word { font-size: 3em; margin: auto auto; } .word .up { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; }
4. Up and over Now the ‘down’ class shares very similar settings to the ‘up’ but the hover shows the movement upwards for the ‘up’ rollover. Upwards is also rotated slightly to enhance the look. .word .down { display: inline-block; transform: translate3d(0px, 0px, 0px) rotate(0deg); transition: all 0.5s ease-in-out; } .word:hover .up { transform: translate3d(0px, -8px, 0px) rotate(12deg); color: #058b05 }
5. Hovering down When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans. .word:hover .down { transform: translate3d(0px, 8px, 0px) rotate(-12deg); color: #058b05; }
6. Automatic for the people It’s a bit of a hassle to have to put every letter in alternating spans with different classes, so we’ll automate the process by getting JavaScript to query the selector and take each letter. Here the ‘str’ variable grabs the current letter as it loops through the text. <script> var elements = document.querySelectorAll (‘.word’); for (var i = 0, l = elements.length; i < l; i++) { var str = elements[i].textContent; elements[i].innerHTML = ‘’;
7. Add alternating classes Now another loop places each letter in its own span element and adds either the ‘up’ or ‘down’ class to the spans. If you look at this in the browser you will see the text split by each letter up and down, while rotating slightly. for (var j = 0, ll = str.length; j < ll; j++) { var spn = document.createElement(‘span’); elements[i].appendChild(spn); spn.textContent = str[j]; let pos = (j % 2) ? ‘up’ : ‘down’; spn.classList.add(pos); } }
7
workshop ______________________________________________71
Tutorials
Capture visitor data Learn how to use the existing structure of Redux to store and maintain the validation state of form data
Subscribe today Go to page 28 to learn more
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 72 __________________________________________________tutorial
Tutorials
G
etting data out of a React form is not a straightforward task. The most common approach is to use controlled components – fields that have their values written to component state, which would then pass the state back when the form submits. While this approach works, it can get complicated very quickly. Having to write change handlers for each field is one thing, but other features such as validation or formatting have to be done separately and updated in parallel. One of Redux’s great benefits is that there is one application-wide state accessible anywhere it is needed. If we were able to access the form data at any point in the application, it opens up many different possibilities for future interactions. Redux Form is a package that supplies all this behaviour in one place. By hooking into an existing Redux store, form components write their data to the store as it changes. The package also takes care of making sure that data is validated and formatted correctly. The form will not submit if it is not. In this tutorial, we create the final piece of our Photo Share application, making a page the user can update their username on. By writing a custom component, the form can show validation feedback at the right time without having to deal with lots of event listeners.
2
4
1. Install dependencies Before we get started, we need to make sure all the project’s dependencies are ready to go. Aside from the usual React and Redux, this also includes the ‘reduxform’ package that is in charge of all the form logic we are going to use. Open up a couple of command line windows and install the dependencies for both the React app and the backend server. They both need to be running at the same time. > > > >
cd app yarn && yarn start cd server yarn && yarn start
2. Add to root reducer All of the benefits of Redux Form will happen in its own slice of the state. This is created by including the provided form reducer inside the ‘combineReducers’ method from Redux. Open up the root reducer at reducers/root.js. Import Redux Form’s form reducer and include it alongside the rest of the existing ones. import { reducer as formReducer } from 'redux form'; const rootReducer = combineReducers({ [...] form: formReducer, });
3. Build out the form We are going to be making the form that lets the user edit their username. Head to /user in the browser to see where this form will go. The form component itself lives inside components/ forms/User/User.js. Add an outline of the form to the existing User component there. This will be enhanced with Redux Form throughout the rest of the tutorial. return ( );
4. Connect the form to Redux With the form in place, we now need to hook it up to the store. Redux Form uses a higher-order
component to link the two together. The ‘reduxForm’ function takes a set of configuration options and returns a component. This component can be wrapped around our form to initialise a connection between them. Update the default export to use this function. The name we pass in is a unique reference to this form inside the Redux store. export default reduxForm({ form: 'user' }) (User);
Keep forms separate
It may be tempting to have submission logic and other Redux data source inside the same file as the form itself, but keeping them separate makes things clearer and more straightforward to test.
tutorial _________________________________________________ 73
Tutorials Capture visitor data with Redux Form
5. Convert to Field By default, Redux Form cannot see any form elements. It uses the special
6. Pass submission function Forms in React will always submit their values using a passed ‘onSubmit’ prop. These forms are no different, but require a slightly different method in order to hook into the Redux Form ecosystem. By passing them a ‘handleSubmit’ prop, Redux Form wraps its own behaviours around the function. Use this prop to submit the form instead.
Validate with props
Rules can be applied directly on the
10
74 __________________________________________________tutorial
7. Handle form submission The form isn’t currently passed this submit function yet. Open up the container at components/ container/UserForm/UserForm.js and add it in. As the container is connected to the store, we can use our existing thunk-based approach to submit the data. Hook up ‘handleSubmit’ to call the ‘submitUser’ thunk action.
export const submitUser = values => (dispatch, getState) => { dispatch(submitUserStart()); const user = getCurrentUser( getState()); return axios .patch(`http://localhost:3001 /users/${user.id}`, values) .then(({ data }) => dispatch( submitUserSuccess(data))) };
9. Update local username handleSubmit(values) { return this.props.submitUser(values); } render() { return ( ); }
8. Create submitUser action The submitUser function itself is similar to the existing submitComment action creator. We get the current user ID and submit a PATCH request to the backend to update the username. Once that’s successful, we dispatch an action to let the rest of the application know. Open up actions/user/user.js and add the action creator.
Even though we have changed our username on the form, it still has the old username at the top of the page. When the form successfully submits, we dispatch our own ‘SUBMIT_USER_SUCCESS’ action containing the new username. We can pick this up in a reducer and update the data. Open up reducers/user/user.js and add a case to handle this action. case SUBMIT_USER_SUCCESS: return state.set('name', action.payload.name);
10. Create a custom component While our input works, it does not yet have any styles. Instead of applying some directly to each field we would make, we can use the power of React components to our advantage. By using a shared component across all test inputs, any updates we make will benefit every field that uses it.
Tutorials Capture visitor data with Redux Form
When is best to validate? Form validation is useful when performed in the right way. Having feedback displayed on each keystroke can distract the user rather than aid them. Similarly, waiting until submission can be too late if the form has many fields that may need correcting. It is generally better to wait until the field loses focus before displaying any issues. For smaller forms such as a log in, it may be more efficient to wait until the user submits. Most importantly, any validation should be clear as to what the user must do to fix it. For complex rules, such as an enforced password strength, the displayed error could show more granular detail that is updated on each keystroke. With Redux Form, validation is constantly happening whenever the content changes. We can decide the conditions on which to show it to the user — whether that is on blur or on submit.
Add a generic input inside the component at components/presentational/TextInput/TextInput.js.
11. Make use of new input With the component ready to go, we can now add it to the form. Redux Form’s
12. Setup validation No user can be without a username. We want to catch when the user tries to submit the form with a blank field. Redux Form takes a validation function that is constantly checked every time the values change. It provides any error messages that we need to show. Add the
‘validate’ function as part of the setup to the form.
14
export default reduxForm({ form: 'user', validate })(User);
13. Define required rule The function receives the values from the form as an argument. We can check the values and apply some rules to what they should be, and return an object containing any violations using the field’s name as the key. Check the name field and return an error if it isn’t set. export const validate = values => { const errors = {}; if (!values.name) { errors.name = 'Required'; } return errors; };
14. Show validation error The
const showError = invalid; [...] {showError && <span className=' text input__error'>{error}}
15. Hide error until touched If we refresh the page, we can see the field already says ‘Required’ even though we haven’t had a chance to add anything to it yet. We should wait until there’s some kind of interaction first. Redux Form provides a selection of status props to the input component alongside ‘invalid’, including ‘dirty’, ‘visited’ and ‘touched’. These can all be used to signify interaction. Update the ‘showError’ check to see if the field has been touched. const showError = invalid && touched;
16. Enable touched prop 13
By default, Redux Form will not mark any field as touched. We need to define what ‘touched’ means before it has any effect. Add ‘touchOnBlur’ to the form setup inside components/form/User/User.js. The other option is ‘touchOnChange’, which will only mark it as touched as soon as the field value is updated. export default reduxForm({ form: 'user', touchOnBlur: true,
tutorial _________________________________________________ 75
Tutorials Capture visitor data with Redux Form
Alternatives to Redux Form While Redux Form is great at managing large forms alongside Redux, it is a heavy tool that may be excessive for smaller applications. What alternatives are there that can help construct forms? The similarly named React Redux Form is another tool that keeps form data in sync with Redux. Reducers are set up for each form with components binding their values to their data. While functional, this package is now in maintenance mode and will not get any new features. When working with lots of smaller forms, it may not make sense to connect them to the Redux store. Formik is a tool that uses supplied React components to contain the state of the store. Other components link their inputs to the state without having to manually create handlers. Other configuration, such as validation, are passed through as props.
validate })(User);
17. Handle submit failure If we try and save our username as ‘Lauren’ nothing happens. We cannot have two users with the same username and Lauren is already taken. We should surface that error on the form for the user. Forms managed by Redux Form will also be given an ‘error’ prop. Show this value after the <Button> component. {error &&
{error}
}export const getInitialValuesForUserForm = state => ({ name: state.user.name });
20. Pass initial values to form To keep everything separated, the initial values need to get passed to the form container before hitting the form itself. Use the mapStateToProps method inside components/container/UserForm/UserForm.js to insert the values, then pass it to the form itself.
18. Return a SubmissionError If the ‘handleSubmit’ promise rejects, the form will be told the submission failed. Right now we ignore submission errors, so the promise resolves instead. Redux Form provides a special ‘SubmissionError’ throwable error that can reject the promise and provide the reasons why back to the form. Update the ‘submitUser’ action creator promise inside actions/user/user.js to throw this error if unsuccessful. The ‘_error’ property will apply this error to the form. .catch(() => { dispatch(submitUserError()); throw new SubmissionError({ _error: 'Could not save details' }); });
19. Generate initial values This form initialises with a blank field. As users will already have a username, it makes sense to pre—fill this field with this data. As this data already lives in Redux, we can use a selector to pull it out for the form. Make sure the keys of the returned object match up to the field names and Redux Form does the rest. Open up selectors/user/user.js and create that selector.
76__________________________________________________tutorial
[…]
export const mapStateToProps = state => ({ initialValues: getInitialValuesForUserForm(state) });
21. Allow reinitialisation The existing username still doesn’t appear if we land on this page first. When the form initialises, the username is undefined. It only comes through once the username has loaded in asynchronously. In order to update the form for this situation, we need to add a final piece of configuration to the form’s options. This would allow the form to reinitialise when the initial values update. Reopen components/forms/User/User.js and add ‘enableReinitialize’ to the options. export default reduxForm ({ enableReinitialize: true, form: 'user', validate, 19
Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes
Tutorials
Test your JS with the Jest framework Finding the right JavaScript unit testing frameworks is not easy. But Jest is different. Find out how to use it today
DOWNLOAD TUTORIAL FILES filesilo.co.uk/webdesigner 78__________________________________________________tutorial
Tutorials
C
lassic JavaScript testing frameworks saw the light in a different time and age: Addy Osmani had barely started work on his collection of objectoriented programming patterns, while large frameworks such as Angular or React were unimaginable. Back then, ‘simple’ case-based comparative engines worked well enough — checking the output of a computational engine or a bit of glue code does not require much thinking. The Jest developer team is a strict adherent to the idea of zero configuration. This makes the framework easy to bring up as long as a package manager like NPM or YARN is available. Another aspect is the wide-ranging extensibility, which makes adding new functionality to the framework a breeze. Finally, Jest integrates itself into various version control systems like Git and Mercurial. This process is beneficial in that it provides Jest with an overview of commits and eliminates unneeded test runs. Surprisingly, all of this does not come at a significant price in terms of performance. Comparative evaluations attest the product to have market-leading performance — the times of limiting unit test scope due to CPU constraints should be over for Jest users.
1. Install YARN While Jest can also live inside a NPM environment, all of the documentation is based on YARN. Fortunately, adding the product is easy on Unixoid operating systems — the developer team provides a wellmaintained package repository. Users with a non-Ubuntu operating system should look at the installation page shown in the figure and found at YARNpkg.com/lang/en/docs/ install/#debian-stable. tamhan@tamhan-thinkpad:~$ curl -sS dl.YARNpkg.com/debian/pubkey.gpg | sudo apt-key add tamhan@tamhan-thinkpad:~$ echo 'deb dl.YARNpkg.com/debian/ stable main' | sudo tee /etc/apt/sources.list.d/YARN.list tamhan@tamhan-thinkpad:~$ sudo apt-get update && sudo apt-get install YARN
2. Create a project YARN and NPM behave similarly when package management is concerned. In both cases, a new
1
project must be generated — after that, the Jest-related components can be added. Simply follow the steps outlined — the default values provided by the wizard are acceptable.
{ . . . 'devDependencies': { 'Jest': '^24.1.0' }, 'scripts': { 'test': 'Jest' }
tamhan@TAMHAN14:~/YARNspace$ YARN init YARN init v1.13.0 question name (YARNspace): Jesttest question version (1.0.0): . . . success Saved package.json Done in 7.82s. tamhan@TAMHAN14:~/YARNspace$ YARN add --dev Jest YARN add v1.13.0 . . . ٽڃ[email protected] Done in 8.61s.
}
4. Perform a dry run At this point in time, YARN is ready to run. Enter YARN test to invoke the element added to the script tag above, and feast yourself on the error shown in the figure. Jest finds test files by analysing the file names — if no matching file is found, test case execution terminates with an error.
5. Write some logic…
3. First test! While Jest can be run from the command line, opt for build flow integration. YARN-based projects offer an option that contains a package.json file, which is to be modified as outlined in the code snippet accompanying this step. 4
Writing unit tests — logically — requires code to be tested. Create two simple mathematical functions and a string returner, which are to be placed in the file tam.js and look like the code with this step. function sayHello() { return 'Hello'; } function add(a, b)
Modern Unix, beware Very recent versions of Ubuntu (around 17.xx) face issues when installing YARN. Further information and advice on mitigation can be found by examining the issue at github.com/ YARNpkg/YARN/issues/2821.
tutorial _________________________________________________79
Tutorials Test your JS with the Jest framework
8
7. Understand the situation at hand
{ return a+b; } function divide(a,b) { return a/b; } module.exports = sayHello;
6. ...and test it A look at the error output shows that Jest uses the expression ‘**/��tests��/**/*.[jt]s?(x),**/?(*.)+(spec|test). [tj]s?(x) ‘ to find test candidates. Thus, a smart test file would be called tam.test.js — for now, the simple content shown in the code accompanying this step shall suffice.
const tam = require(‘./tam’); test(‘Checks if Tam is friendly’, () => { expect(tam()).toBe('Hello'); });
Floating point trouble
If you ever find yourself wanting a specific precision, feel free to use dedicated maths libraries. These products use integers to emulate floating numbers – a slow but arbitrarily accurate process.
80 �������������������������������������������������tutorial
Jest expects test cases to be provided in dedicated files. Due to the product being targeted at modern object-oriented code bases, the code to be tested usually comes in the shape of a module. The actual value comparison is then performed using matchers that are similar to other frameworks.
8. Run the test Finally, order another execution of the test cases via the YARN package manager. It will yield the results shown in the accompanying figure — as our test case is simple, execution is accomplished quickly. tamhan@TAMHAN14:~/YARNspace$ YARN test YARN run v1.13.0 $ Jest PASS ./tam.test.js
9. Structured test execution Some tests can only be run after a more or less elaborate set-up routine has run its course. Jest accomplishes this via the before and after function. A beforeEach call runs before each test case. A beforeAll method is run once the test suite starts up. beforeEach(() => { initializeCityDatabase(); }); afterEach(() => { clearCityDatabase(); });
beforeAll(() => { return initializeCityDatabase(); }); afterAll(() => { return clearCityDatabase(); });
10. A surprising situation Now that our strings check out, it is time to test the arithmetic functions. For that, the exports of tam.js need to be adjusted. The following two test cases are ready to fail, with the result shown in the figure. module.exports.add = add; module.exports.divide = divide; const tam = require(‘./tam’); test(‘Checks if we can add’, () => { expect(tam.add(2,2)).toBe(4); }); test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)).toBe(0.333333333); });
11. Account for imprecisions Like most other programming languages, the JavaScript runtime uses floating number mathematics. This means that non-integer numbers cannot always be expressed with infinite accuracy. Working around the problem requires the use of a different matcher. When dealing with floating numbers, using toBe is generally not advised.
Tutorials Test your JS with the Jest framework
Harness the power of the command line Jest tests can also be run outside of a package manager. In this case, the Jest command line utility must be used — it can only be run when installed globally using either NPMs or YARN’s global install feature. Once installed, visit Jestjs.io/docs/en/cli. Jest’s developer team provide command line users with dozens of options intended to tailor execution scope to the needs of the task at hand. Entering ‘Jest --findRelatedTests path/to/fileA.js path/ to/fileB.js’ runs only those tests which touch the content of the files passed in as arguments. In addition to that, the command line tool can even analyse local repositories and run only these tests affected by currently uncommitted code.
test(‘Checks if we can divide’, () => { expect(tam.divide(1,3)). toBeCloseTo(0.333333333); });
12. Run just one Should you ever feel like running one test, feel free to use the test.only function. It informs the runner that all other test cases are to be ignored — helpful and time-saving as your unit test suites grow.
of required attributes. Jest’s logic takes the snapshot’s contents and performs an analysis against the object returned — errors will be raised if a mismatch is detected. For the following steps, start out by placing the code shown next to this step inside of tam.test.js.
const user = { createdAt: new Date(), id: Math.floor(Math.random() * 20), name: ‘Tam HANNA’, }; expect(user).toMatchSnapshot(); });
it(‘is a small test’, () => { 14
test.only(‘this will be the only test that runs’, () => { expect(true).toBe(false); });
13. Understanding snapshots As JavaScript object orientation entered mainstream developer conscience, more and more code adopted OOP principles. Sadly, verifying the correctness of objects gets tedious quickly — checking each and every member’s value by hand leads to long and difficult-to-handle test code.
14. Content analysis Think of snapshots as a template containing a set
tutorial ������������������������������������������������� 81
Tutorials Test your JS with the Jest framework
15. Find the snapshot file
15
When Jest encounters a new snapshot-related object, the runner generates an additional snapshot file and displays the message shown in the figure accompanying this step. As our object contains a randomly generated value, subsequent executions of the test suite will (usually) fail with date and ID mismatches. tamhan@TAMHAN14:~/YARNspace/__snapshots__$ ls tam.test.js.snap // =============== FILE gedit tam.test.js.snap =============== // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = ` Object { 'createdAt': 2019-03-07T09:03:37.980Z, 'id': 12, 'name': 'Tam HANNA', } `;
16. Limit analysis accuracy One way to work around the problem involves the use of ‘scoped’ matchers. They differ from their normal colleagues in that they accept any value of a given type — in our case, both createdAt and id should be handled by these smart elements. expect(user).toMatchSnapshot({ createdAt: expect.any(Date), id: expect.any(Number), }); });
17. Update the snapshot file Sadly, running the program in the current state does not improve our situation. This is logical, as the snapshot files are still out of date. Simply enter ‘YARN test -u’ and look at the updated contents. The -u command can also be used to update outdated snapshots in general — keep in mind that Jest will consider whatever values it may find during the test execution. // Jest Snapshot v1, goo.gl/fbAQLP exports[`is a small test 1`] = `
Object { 'createdAt': Any
18. Create a configuration file Jest is not limited to working with the default environment settings. Invoking Jest --init from inside the YARN environment launches the set-up wizard shown in the figure accompanying this step. It allows you to set up various options related to the test execution environment.
19. Async waiting JavaScript unit test frameworks usually have a hard time running unit tests against asynchronous code. Jest stands out in that it accommodates waiting for you — in the example below, the done callback can be used to ‘wait’ for a result: test(‘the data is peanut butter’, done => { function callback(data) { expect(data).toBe(‘peanut butter’); done();
} fetchData(callback); });
20. Use mock functions Another extremely useful feature involves the use of mock functions. They can be submitted in place of a callback, and return data about the invocations.
const mockCallback = Jest.fn(x => 42 + x); forEach([0, 1], mockCallback); // The mock function is called twice expect(mockCallback.mock.calls.length).toBe(2); // The first argument of the first call to the function was 0 expect(mockCallback.mock.calls[0][0]).toBe(0);
21. Learn more Jest is an extremely complex framework which can not be covered in a single issue of Web Designer. Visit Jestjs.io/docs/’Jestjs.io/docs/ on a non-Mozilla browser to find out more about the possibilities related to frameworks such as React. 18
82��������������������������������������������������tutorial
MASTER ARCHVIZ WITH 3D WORLD We uncover the latest trends and key techniques
SUBSCRIBE to receive KitSound Harlem Wireless Headphones!
VI O RAININ WI H HI I U
www.bit.ly/3dworld-app PRINT www.myfavouritemagazines.co.uk/3dwsubs NEWSSTAND FOR IOS
Issue 246 on sale now
84 _________________________________________________feature
s the wait for a solution that combines the discoverability and frictionless entry of the web with app-like performance and user engagement finally over? For many years, native apps have had the edge when it comes to delivering well-performing, engaging user experiences. Yet app stores present a barrier to entry that fails to match the much broader reach of a search-driven mobile web. Progressive Web Apps (PWAs) and Single Page Apps (SPAs) give developers the technical capability to elevate web performance, while Performant Design principles give designers the tools to craft engaging app-like user experiences that exceed all expectations of what’s possible on today’s web. The web has a number of key advantages that line up with the shortfalls of native apps, one being the capability of search engines to search content rather than simply the name of the brand as in the App Stores. But even with its frictionless barrier to entry, the web has traditionally found it difficult to rival native apps in terms of where users like to spend their time.
Evidence of a swing away from native towards the web is popping up all over the digital landscape (pwastats.com). Major brands are recognising a need to improve their mobile offering and face a decision on whether to invest more in their native app or to concentrate their efforts on either improving their responsive site or opting for a hybrid web app solution like PWAs. Flipkart (.flipkart.com) saw a need to reach potential customers in cities where less phone storage is not unusual. In removing the requirement to download an app, 60 per cent of customers who had previously uninstalled the app returned to use the Flipkart PWA (bit.ly/2vOsG53). Brands choosing to invest in the mobile web are also seeing a positive increase in metrics of user interaction and engagement. Tinder’s PWA saw load times cut in half (bit.ly/2pTSw7R) compared to its native app, resulting in longer session times, more messages and more swiping. So what is it about PWA and Single Page Apps that has seen them enjoy such gains in the realm of performance and user engagement, compared to native apps and responsive web design?
feature _________________________________________________85
oogle’s endorsement of web-based applications goes back over a decade. In 2009, VP of engineering Vic Gundotra heralded the web as “the dominant programming model of our time” ( ly/2U9SnYF) in relation to HTML’s ability to match previous advantages of hardware-based development. This backing continued to 2016 where Google’s platform refurbishment took the form of pushing Progressive Web Apps (PWAs), user experiences they claim are reliable, fast and engaging (bit.ly/1nlXeEV). So what do they have to offer?
Service workers enabled Konga to send 63 per cent less data for initial page loads, and 84 per cent less data to complete the first transaction
Service workers are JavaScript written client-side proxies that give developers more control of the cache. By pre-caching certain resources, it eliminates dependency on the network, allowing the app to load from the user’s home screen instantly, even in uncertain network conditions. Security has historically been a trump card of enclosed native applications. If web apps were to ever rival native in this trait, the user must be offered a secure connection wherever they choose to browse, hence why HTTPS is a requirement of PWA. Again, signs of heavy Google-endorsement are clear to see. Its search algorithm will prioritise HTTPS over sites with a Secure Socket Layer (SSL). Only secure mobile sites are candidates for Accelerated Mobile Pages (AMP) (bit.ly/2VldGGR), and since Chrome 56, a ‘not secure‘ label appears next to any URL that is not served over HTTPS. This gives the web a visible layer of trust that is otherwise hidden in native apps — an edge set to become increasingly important to today’s users seeking understanding and control of the flow of personal data.
86 _________________________________________________feature
Service workers and modern development processes pay dividends when it comes to improving a web app’s first page load. But where PWAs really come into their own is in the loading of subsequent pages. The service worker caches the app shell and other assets on install, instantly displaying content to users while they browse rather than making a request for new content on each following page load. This brings page load times down to insignificance. A recent report from Mobify (bit.ly/2UdeNIA) states the median successive page load time for a PWA is 1.4 seconds. The industry average is 6.2 seconds.
Progressive web apps can be installed to a user’s home screen without going through an app store. These installed apps then adopt features that make them indistinguishable from a native app. They load from an app icon into a rich full-screen experience without the distracting omnibox or browser controls, allowing designers to build in their own app-style navigation (bit.ly/2zILXJO) exclusively for this immersive experience.
With the help of a web app manifest file, PWAs appear in all the areas you’d expect a native app to appear. This includes the app launcher, settings app and task switcher. Any links to the website from external sources open in the installed app, and even users signed up for push notifications, can access those in the same places as their other app notifications.
Gmail is one of the most—used single page web w applica ations
ack in the web’s early days, it was normal for Multiple Page Applications (MPAs), built-in static HTML and server-side technology like PHP, ASP and Python, to drive user navigation through multiple client/server requests. As user experiences have grown in complexity, so have the demands they put on the servers. One of the web’s earliest forays into Single Page Apps (SPAs) came in the early 2000s with AJAX. This allowed web pages to run multiple updates without reloading, reducing the number of requests servers were processing and users were waiting on. After that came a string of JavaScript frameworks including JQuery and Backbone.js, a move away from JavaScript entirely with Flash and Silverlight, before coming full circle in 2010 with the release of the robust Angular.js and later React.js. The common idea across all these evolutions was that a web ‘page‘ could hold more conversations with its users outside of the standard web of hyperlinks to additional pages. Today, Single Page Apps dominate our most used web applications — Facebook, Twitter, Gmail and Google Docs to name but a few. These richly interactive apps are a far cry from the hyperlinked HTML documents of the past, and show how SPAs can deliver complex, highly performant experiences to web users.
Since HTML, CSS and script files are downloaded and parsed just once throughout the app’s lifespan (only data is transmitted back and forth,) users transitioning between ‘pages‘ in Single-Page PWAs can do so much faster than in a multi-page solution. By
reducing the number of ‘white flash‘ interruptions for the user where no content is visible, SPAs have more control to smooth out page transitions and maintain user attention, providing visual continuity and positive feedback to their interactions.
One benefit to operating under a single server request is that the same data existing between two pages/states can be displayed instantly without interruption. An app-like sticky header is a common way web apps maintain user context through persistent UI. We also see this in commerce PWAs, where a user transitioning from a list of products to a single product in full detail can see the product name and image from the previous page. Reusing product data in this way, instead of displaying a black screen while that data is fetched and rendered, creates a faster, smoother loading experience for the shopper.
The Debenhams PWA is able to take data, such as product name, from the listing page and immediately display it on the product detail page while the other assets are loading.
Whether it be finding a specific piece of information or browsing multiple information sets, most users arriving at a site are looking to complete a task quickly, especially on mobile. For every two additional seconds of load time, the number of users leaving the site (bounce rate) goes up to 50 per cent, and for every extra second it takes for a page to load, the number of users reaching the end of that task (conversion rate) falls by 12 per cent. The combination of faster load times, fewer server request interruptions and increased visual continuity means that users in SPAs take less time to move through and complete tasks faster than in MPAs.
feature _________________________________________________ 87
This demo of SVGOMG shows 60 per cent + savings from optimising artwork markup.
ith PWA and SPA, developers have the technical tools to deliver fast and engaging web experiences, rivalling their native counterparts. But there exists a missing piece of the puzzle, a catalyst that can propel a high-performing web app to a hyper-performant, best-in-class user experience. This ingredient is found through considering performance a fundamental principle of the UX and visual design process. This is Performant Design. A delay between 300 and 1,000 milliseconds makes the user feel like a machine is working, but they begin to mentally context-switch above 1,000 milliseconds. Anything that provides the content faster will result in a more positive engagement.
Load times can be significantly reduced by Lazy Loading offscreen elements. This deconstructs the initial payload to render content that is in view first. Images and other heavy elements load later in the sequence, or as the user scrolls. Lighthouse is a Google tool full of actionable insights that help designers and developers optimise performance in fine detail across the loading spectrum.
Downloading custom fonts cost around 200–500ms on 3G connections. Letting the device handle font rendering by using system fonts ensures text loads instantly, and using variable fonts offers typographic variation without forcing the user to
88 _________________________________________________feature
download fonts in multiple weights. Check out variable fonts in action at v-fonts.com.
Exporting vector icons and illustrations often adds a lot of unnecessary bloat to the file. This can be cleaned up considerably, reducing a site’s image payload and giving the user quicker access to key icon-based navigation and signposting. Coming from Google’s Development Team, SVGOMG is a useful tool to help optimise SVGs.
The task of optimising images is a job that holds space in both the design and development process. The art of image optimisation comes from the human eye judging the compression tool’s impact on image quality. Several algorithms and rendering techniques can significantly reduce the size of an image in ways that are invisible to the naked eye. The Google Chrome team introduced Squoosh to help in both these processes. This powerful web-based image compression tool puts high-resolution visual comparison to the forefront, while giving users access to all the complex behind the scenes compression options.
Delays of less than 100 milliseconds still feel instant, but anything above that is perceptible. When it comes to optimising speed, it’s what the user perceives that really matters, which is what makes designing for those in-between states integral to delivering hyper performance.
Squoosh demonstrates how huge file savings can come without compromising image quality.
Content placeholders, or skeletons, are used to construct a preloaded version of a page while content is loading. They not only prevent jagged and disruptive ‘reflows’ — where rendered elements are pushed out of view by subsequent items loading in their place — they can also make users believe the page is loading quicker than it really is. When implementing skeleton screens, content should be rendered as soon as it is ready, rather than blocking it until everything is ready to show. Which works best? Which one feels faster? An app where the user has no indication when the content is coming? Or one that uses staggered loading animations, skeleton screens, frosted images and metadata on content? These two examples may take the same amount of time to load, but the user perception of length is completely different. Using a spinner shows no indication of when the page will be finished loading. Brief animations, on the other hand, can mask the loading transition and imply that the system is ‘progressing ‘ rather than ‘processing.’ We all want to see reaction to our actions, and it’s no different on the web. Smooth scrolling, silky animations and tap feedback states all help to increase a user’s perception that the experience is responding immediately to their touch. Considering tap, hover, loading and passive states all help to simulate a performant experience, Google’s Material Design (material.io/design/interaction/states.html) provides guidance of how to effectively craft all these states. Today’s user is impatient, and the more you make them think, the more likely they are to go elsewhere to get the job done. Clarity and simplicity are therefore key components of any highly performant web experience.
When motion is used effectively it helps inform users and guide the their next step.
feature _________________________________________________89
PERFORMANT DESIGN IS FOR EVERYONE As you might expect, accessibility principles will improve the overall usability of any web app that incorporates them
Q MINIMUM TAP TARGETS Ensuring a minimum tap target of 44—52px ensures enough space is present between tappable elements, reducing the margin for errors and time spent correcting them. Q MINIMUM FONT SIZE Easily readable text ensures quick processing and faster task completion for users. Google’s recommendation for body text is 16pt, a requirement echoed in their Lighthouse rankings when penalties are applied to web apps with too much text below 16pt. Q COLOUR CONTRAST Text and symbol clarity is also important. Google includes it in the Lighthouse accessibility audit. Web apps that fail to apply clear contrast between text and background colour see penalties in their lighthouse score, and slow users down in their attempt to process and proceed with the relevant information.
Tools to help test contrast ratios in PWAs are now part of Chrome DevTools.
Financial Times (https://app.ft.com/index_page/home) is one of the highest profile responsive PWAs, allowing desktop readers to consume articles offline and on the go.
Emphasised call to action (CTA) buttons allow friction-heavy user flows. GooglePay allows users to move forward quickly in their task with shoppers to complete multiple checkout steps in a confidence. Paying careful attention to CTA size, single tap, while one-tap sign in gets users into their colour, placement and microcopy helps make the account in the same way. key actions more obvious and reduces thinking Results from early adopters show that removing time. Patterns first seen in native apps, such the the interruption of login screens and checkout floating action button and fixed header bar, get forms, along with the mental friction of the user moving quickly and translate well to any remembering and entering information, speeds up performant web app. task completion and improves engagement. A general rule of navigation is ‘out of sight, out of mind’. Patterns such as a Bottom Navigation Bar and Tabs successfully put primary user actions front and centre, while the traditional Today’s user spends around six hours a day ‘hamburger’ menu has a lower engagement rate. online with an average of 6.5 connected devices Facebook found that by moving from a per person. Not only is it fundamentally important Digital Wallets like hamburger menu to a tabbed approach improved to design for a number of different devices, but to Google Pay can distill complicated checkout engagement, satisfaction, revenue and perception design for areas of low and no connectivity. flows down to a single of speed. Users often take multiple sessions to complete ‘Pay’ button. Having a strategy of the type of content you a task, and delivering performant experiences on want to promote is important, and simply treating all each device ensures that entire process is smooth and navigational items as equal will result in a decrease of satisfying. engagement in the areas that you want to improve. Spotify Desktop supports PWAs and designing performant found that by reducing the number of options in the tab bar to responsive PWAs without the bloated code commonly five increased the reach of Spotify’s programmed content — a associated with responsive websites, means designing mobile great example of how promoting certain navigation items over first. This brings the essentials to the forefront, adding more others can focus the user’s experience. items only when the user agent can handle it. Service Workers allow PWAs to stand up when the network connection goes down. This opens the door to craft offline user experiences by use of clear network status messaging and disabling elements that would otherwise derail Digital wallets like GooglePay and upcoming automatic sign-in the experience. API both leverage data stored on the device to simplify
y using the Performant Design techniques mentioned above, designers can take control of user perception and ultimately make the web feel faster and more engaging. If the latest updates from Chrome Dev Summit are anything to go by, it’s that it’s the web, not native apps that continues to monopolise momentum
90 _________________________________________________feature
— at least within the Google development team. Progressive Web Apps are becoming the flagship of mobile web development, and as the technology moves forward, their ability to benefit larger screens looks set to open the gates for a wave of PWA across all screens. As this wave gathers
momentum, Single Page Apps gives developers the ingredients to accelerate PWAs with app-like instant transitions. Add frictionless user experiences through Performant Design, and therein lies a recipe for hyper-performant, best-in-class web experiences that should excite any web designer or developer.
Special offer for readers in North America
SAVE 30% When you subscribe PLUS you’ll receive The 100 Best Typefaces Ever e-book!
FREE
resource downloads eve y issue
+44 (0) 344 848 2852 2QOLQHDW myfavouritemagazines.co.uk/WCUEB 2UGHUKRWOLQH
*Terms and conditions
This is a US subscription offer. 30% saving refers to the USA newsstand price of $14.50 for 13 issues at $188.50, compared with $132 for a subscription. You will receive 13 issues in a year. Please provide a valid email address to receive your e-book. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. Full details of the Direct Debit guarantee are available XSRQ UHTXHVW 8. FDOOV ZLOO FRVW WKH VDPH DV RWKHU VWDQGDUG À[HG OLQH QXPEHUV VWDUWLQJ RU DUH LQFOXGHG DV SDUW RI DQ\ LQFOXVLYH RU IUHH PLQXWHV DOORZDQFHV LI RIIHUHG E\ \RXU SKRQH WDULII )RU IXOO WHUPV DQG FRQGLWLRQV SOHDVH YLVLW ELWO\PDJWDQGF 2IIHU HQGV 0D\
Expires May 2019
Get your listing in our directory To advertise here call the ads team on 01225 442244
HOSTING LISTINGS Featured host: Netcetera netcetera.co.uk 03330 439780
About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT
infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.
What we offer
sData centre colocation –
sManaged hosting – A full
range of solutions for a costeffective, reliable, secure host. sCloud hosting – Linux,
Windows, Hybrid and Private Cloud Solutions with support and scalability features.
5 tips from the pros 1. Reliability, trust & support Reliability is a major factor when it comes to choosing a hosting partner. Netcetera guarantees 100 per cent uptime, multiple internet routes with the ability to handle DDOS attacks, ensuring your site doesn’t go down when you need it.
2. Secure and dependable Netcetera prides itself on offering its clients a secure environment. It is accredited with ISO 27001 for security along with the options of configurable secure rackspace available in various configurations.
3. 24/7 technical support Netcetera has a committed team of
“
Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK
”
Single server through to full racks with FREE setup and a generous bandwidth. sDedicated servers – From
QuadCore up to Smart Servers with quick setup and fully customisable.
knowledgeable staff available 24/7 to provide you with assistance when you need it most. Our people make sure you are happy and your problems are resolved as quickly as possible.
Testimonials Roy T
4. Value for money We do not claim to be the cheapest service available, but we do claim to offer excellent value for money. We also provide a price match on a like-for-like basis, as well as a price guarantee for your length of service.
5. Eco-friendly Netcetera’s environmental commitment is backed by use of eco-cooling and hydroelectric power. This makes Netcetera one of the greenest data centres in Europe.
92__________________________________________________ listings
“I have always had great service from Netcetera. Their technical support is second to none. My issues have always been resolved very quickly” Suzy B
“We have several servers from Netcetera and their network connectivity is top-notch, with great uptime and speed is never an issue. Tech support is knowledgeable and quick in replying. We would highly recommend Netcetera”
Steve B
“We put several racks into Netcetera, basically a complete corporate backend. They could not have been more professional, helpful, responsive or friendly. All the team were an absolute pleasure to deal with, and nothing was too much trouble, so they matched our requirements 100 per cent”
Supreme hosting
SSD web hosting
cwcs.co.uk 0800 1 777 000
bargainhost.co.uk 0843 289 2681
CWCS Managed Hosting is the UK’s leading hosting specialist. They offer a fully comprehensive range of hosting products, services and support. Their highly trained staff are not only hosting experts, they’re also committed to delivering a great customer experience and are passionate about what they do.
Since 2001, Bargain Host have campaigned to offer the lowest possible priced hosting in the UK. They have achieved this goal successfully and built up a large client database, which includes many repeat customers. They have also won several awards for providing an outstanding hosting service.
sColocation hosting sVPS s100 per cent network uptime
Budget hosting
UK-based hosting hetzner.com +49 (0)9831 505-0 cyberhostpro.com 0845 5279 345 Cyber Host Pro are committed to providing the best cloud server hosting in the UK; they are obsessed with automation. If you’re looking for a hosting provider who will provide you with the quality you need to help your business grow, then look no further than Cyber Host Pro.
Hetzner Online is a professional web hosting provider and experienced data centre operator. Since 1997, the company has provided private and business clients
sShared hosting sCloud servers sDomain names with high-performance hosting products as well as the infrastructure for the efficient operation of sites. A combination of stable technology, attractive pricing, flexible support and services has enabled Hetzner Online to strengthen its market position nationally and internationally.
Agency hosting specialist nimbushosting.co.uk 02031266781
sDedicated/shared hosting sColocation racks sSSL certificates
Nimbus Hosting have partnered with agencies to develop our revolutionary platform STORM. With a team dedicated to outstanding support, our 5-star Google reviews truly speak for themselves. Join the thousands of agencies and freelancers who are benefitting from a control panel that speeds up your website developement as well as your client’s websites. Supercharge your digital projects today with STORM.
sCloud VPS servers sReseller hosting sDedicated servers
s TFDPOE 8PSE1SFTT JOTUBMM s %FQMPZ EJSFDUMZ GSPN (JU)VC s &BTZ UFBN NBOBHFNFOU
Cluster web hosting Flexible cloud servers fasthosts.co.uk 0808 1686 777
All-inclusive hosting
6,CBTFEBOEPQFSBUJOHGSPN dedicated UK data centres. Fasthosts keep over 1 million domains running smoothly and safely each day. Services can be self-managed through the Fasthosts Control Panel.
1and1.co.uk 0333 336 5509
operates across ten countries. With a comprehensive range of highperformance and affordable products, 1&1 offers everything from simple domain registration to award-winning website building tools, eCommerce packages and powerful cloud servers.
sDedicated servers sCloud servers sHosted email
1&1 Internet is a leading hosting provider that enables businesses, developers and IT pros to succeed online. Established in 1988, 1&1 now
sEasy domain registration sProfessional eShops s)JHIQFSGPSNBODFTFSWFST
elastichosts.co.uk 020 7183 8250 ElasticHosts offer simple, flexible and DPTUFŇFDUJWF DMPVE TFSWJDFT XJUI high performance, availability and scalability for businesses worldwide. Their team of engineers provide excellent support 24/7 over the phone, by email and with a ticketing system. s Cloud servers with any OS s Linux OS containers s 24/7 expert support
listings__________________________________________________
Get your listing in our directory To advertise here call the ads team on 01225 442244
COURSE LISTINGS Featured:
Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders
About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their
full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England.
“
No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks
” .
What we offer s 'VMMUJNF Fast-track your career in just 12 weeks
s 1BSUUJNF Fit our curriculum around your life in 24 weeks
5 tips from the pros (FU TUBSUFE XJUI DPEJOH The best way to know if coding is for you is to just try it! We recommend the free, online JavaScript track of Codecademy to get you started with the basics. %P ZPVS SFTFBSDI Make sure you read plenty of student reviews to make sure you’re applying somewhere reputable. Read their blog and have a look at their social channels. 5ISPX ZPVSTFMG JO Once you’ve decided it’s right
for you, set aside a few evenings each week to really start making progress! If coding is for you, this should be fun. #F QSFQBSFE We’ll be with you every step of the way when you apply. Make sure you go through all the materials we recommend and ask for help if you’re stuck. (FU TPDJBM With Northcoders, you’re not just on a course, you’re part of a community that will stay with you long after you graduate. Make the most of it!
Becoming part of this vibrant, caring community was something I hadn’t expected before the course, but now I couldn’t be without it. To be a Northcoder is to be enlightened, inspired and supported
Joanne Imlay
Northcoders delivered their part of the bargain in spades. They provided tremendous assistance in turning me into the full product – a well-rounded, capable future tech employee – and they have the contacts to deliver the opportunities for such people.
Primary school teacher to software developer at Careicon
Joe Mulvey Maths teacher to software developer at Auto Trader
94 _________________________________________________ listings
WE GOT CODERS
UDEMY udemy.com
wegotcoders.com [email protected]
Twitter: @udemy Facebook: udemy
We Got Coders is a consultancy that provides experts in agile web development, working with startups, agencies and government. Take one of their 12-week training courses that covers all that is required to become a web developer, with highly marketable full-stack web development skills.
The inspiration for Udemy began in a small village in Turkey, where founder Eren Bali grew up frustrated by the limitations of being taught in a one-room school house. Realising the potential of learning on the internet, he set out to make quality education more accessible. Udemy is now a global marketplace for learning and teaching online. Students can master new skills by choosing from an extensive library of over 40,000 courses, including HTML, CSS, UX, JavaScript and web development.
sClassroom-based training sReal-world work experience sEmployment opportunities
FUTURELEARN
40,000+ courses: There is a course for every designer and dev. Self-paced learning: Learn how to code at your own pace.
THE IRON YARD theironyard.com Twitter: @TheIronYard Facebook: TheIronYard The Iron Yard is one of the world’s largest and fastest growing in-person code schools. It offers full-time and part-time programs in back-end engineering, front-end engineering, mobile engineering and design. The Iron Yard exists to create real, lasting change for people, their companies and communities through technology education. The in-person, immersive format of The Iron Yard’s 12-week courses helps people learn to code and be prepared with the skills needed to start a career as junior-level software developers.
futurelearn.com [email protected] Choose from hundreds of free online courses, from Language & Culture to Business & Management, Science & Technology to Health & Psychology. Learn from the experts. Meet educators from top universities who’ll share their experience through videos, articles, quizzes and discussions.
sLearn from experts sFree courses sAll-device access
GYMNASIUM
thegymnasium.com [email protected] Gymnasium offers free online courses, designed to teach creative professionals in-demand skills. Courses are all self-paced and taught by experienced practitioners with a passion for sharing practical lessons from the design trenches.
12-week code school: Learn the latest skills from industry pros. Free crash courses: One-night courses, the perfect way to learn.
sGain real-world skills sGet expert instruction sCareer opportunities
listings__________________________________________________95
Free with your magazine Essential assets and resources
Exclusive video tutorials
Tutorial project files
Get textures, fonts, backgrounds and more
Learn to code/create with HTML, CSS & JS
$OOWKHDVVHWV\RX·OOQHHG to follow our tutorials
Plus all of this is yours too… $OOQHZWXWRULDOILOHVWRKHOS\RX PDVWHUWKLVLVVXH·V+70/&66 and JavaScript techniques $,'LFH$UW3KRWRVKRSDFWLRQV IURP6SDUNOHVWRFN ZRUWK (sparklestock.com ,QFHSWLRQVW\OH3KRWRVKRS actions from Sparklestock ZRUWK $EVWUDFWVPRNHDUWEUXVKHV IURP6SDUNOHVWRFN ZRUWK
Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets
Free for digital readers too! Read on your tablet or download on your computer
The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital 'RZQORDGRQO\WKHILOHV you want, when you want All your gifts from all your issues in one place
Get started Everything you need to know about accessing your FileSilo account.
Unlock every issue
Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine.
gifts from more than 70 issues Access our entire library of resources with a money-saving VXEVFULSWLRQWRWKHPDJD]LQH²WKDW·VPRUHWKDQ IUHHUHVRXUFHV
You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices.
Over 70 hours of video guides
More than 400 tutorials
Over 2500 creative assets
Let the experts teach you to create and code
Get the code you need to get creative
Templates, fonts, textures and backgrounds
Head to page 28 to subscribe now
,I \RX KDYH DQ\ problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below:
[email protected]
Already a print subscriber? +HUH·VKRZWRXQORFN)LOH6LORWRGD\« 8QORFN WKH HQWLUH :HE 'HVLJQHU )LOH6LOR OLEUDU\ ZLWK \RXU XQLTXH :HE ,' ² WKH WHQGLJLW DOSKDQXPHULF FRGH SULQWHG DERYH your address details on the mailing label of your subscription copies, also found on any renewal letters.
More th han 00 re easo ons s 90 o sub bscriibe to
More added every issue
NEXT MONTH THE FUTURE OF HTML TODAY Why you need to be working with web components and how to build your own
INTRODUCE SCROLL EFFECTS WITH SAL.JS Create performant and lightweight solutions for animating elements on scroll
STOP THE SPAM, STOP THE BOTS
Employ the power of Google reCAPTCHA to help detect unwanted intrusions
BUILD A 3D LANDING PAGE
Learn how to utilise WebGL and Three.js to create impressive home pages to engage users
Visit the WEB DESIGNER online shop at ALL IN YOUR NEXT
WEB DESIGNER myfavouritemagazines.co.uk
Issue 287 on sale
for the latest issue, back issues and specials Tuesday 30 April 2019
SUBSCRIBE TODAY Go to pa e 28 to learn more 98 __________________________________________next month
2019-03-01 Global Traveler.pdf
December 2019 0
2019-06-01_all_about_history.pdf
December 2019 3
2019-05-01+web+designer+uk.pdf
December 2019 1