net328 by borov665

BUILD A TIME-BASED LOGIN

Use CSS and SVG to code an animation based on the time

The voice of web design

Issue 328 : February 2020 : net.creativebloq.com

3D PARTICLE EFFECTS SECRET CSS TRICKS Create real-time, interactive sduwlfoh#hÄ¼hfwv#xvlqj#wkuhh1mv

Learn new properties you may not have used before

JAVASCRIPT

THE FUTURE OF FRAMEWORKS Find out how React, Angular and Vue.js are set to evolve as we move into a new decade

DEVELOP AN ACCESSIBLE MODAL PLAN FOR THE END OF YOUR PRODUCT OFFER STRATEGY AS A SERVICE

ISSUE 328

Welcome

WELCOME

EDITOR’S NOTE It’s hard not to feel a little reflective when

our latest issue to the exciting things coming up in

you’ve just waved goodbye to a decade. And it’s safe to say that, as far as the web goes, the 2010s

the future. First of all, Louis Lazaris rounds up the tools worth

were a bit of a mixed bag. Sure, we enjoyed the revolution that was HTML5, reshaped the online world with responsive design and broke free of formulaic web templates with CSS grid. But the internet’s rep also took a bit of a beating, thanks to the NSA, #gamergate, Donald Trump, Cambridge Analytica and so many other scandals. But when it comes to technology, I’m nothing if not an optimist and I’m confident that there are bright times ahead for the web. That’s why we’ve dedicated

adding to your workflow in 2020, whether they’re JavaScript libraries, CSS and HTML tools or testing tools. We also look at React, Angular and Vue.js and how they’re set to evolve over the next decade. On top of that, we’re offering up plenty of practical projects, including how you can build a time-based UI animation and add particle effects to 3D sites.

Josh Russell, Editor @JoshLRussell

FEATURED AUTHORS LOUIS L AZ ARIS

DARRYL BARTLE T T

AGA NAPLOCHA

JOE MACLEOD

Lazaris is a front-end developer, author and blogger who writes about front-end code on Impressive Webs and curates the Web Tools Weekly newsletter. He picks out some of his favourite tools for 2020 on page 60. w: impressivewebs.com

Bartlett is a web and mobile developer specialising in JavaScript, PHP, Swift and Kotlin. On page 68, he channels his inner net Nostradamus to tell you what you can expect in the future of the big three JS frameworks. t: @darrylabartlett

Naplocha is co-founder of The Awwwesomes and coding designer at Adobe and specialises in HTML, CSS and UX. Over on page 88, she shows you some useful CSS properties you may not have yet encountered. w: http://aganaplocha.com

Macleod is an author and the founder of andEnd, the world’s first business dedicated to helping companies end their customer relationships. He teaches you how to offer users satisfying endings on page 20. w: http://www.andend.co

february 2020 3

@netmag

Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200

/netmag

flickr.com/photos/netmag

netmag@futurenet.com

net.creativebloq.com

medium.com/net-magazine

EDITORIAL

Editor Josh Russell josh.russell@futurenet.com Group Editor in Chief Claire Howlett Senior Art Editor Will Shum

CREATIVE BLOQ

Editor Kerrie Hughes kerrie.hughes@futurenet.com Associate Editor Ruth Hamilton Operations Editor Rosie Hilder Senior Staff Writer Dominic Carter

CONTRIBUTIONS

Andrew Armitage, Darryl Bartlett, Mark Billen, Kyle Carpenter, Dominic Carter, Jo Cole, Matt Garbutt, Joshua Garity, David Gelb, Kevin Gordon, Steve Jenkins, Harriet Knight, Louis Lazaris, Oliver Lindberg, Joe Macleod, Richard Mattka, Tom May, Agnieszka Naplocha, Daniel Schwarz, Mark Shufflebottom, Jennifer Solloway, Kym Winters

PHOTOGRAPHY

All copyrights and trademarks are recognised and respected

ADVERTISING

Media packs are available on request UK Commercial Sales Director Clare Dove clare.dove@futurenet.com Advertising Sales Manager Michael Pyatt michael.pyatt@futurenet.com Account Sales Director Matt Bailey matt.bailey@futurenet.com Account Sales Director George Lucas george.lucas@futurenet.com Account Sales Manager Tom Walsh tom.walsh@futurenet.com

INTERNATIONAL

net is available for licensing. Contact the Licensing team to discuss partnership opportunities. Head of Print Licensing Rachel Shaw licensing@futurenet.com

PRINT SUBSCRIPTIONS & BACK ISSUES

Web www.myfavouritemagazines.co.uk Email enquiries contact@myfavouritemagazines.co.uk Tel 0344 848 2852 International +44 (0)344 848 2852 Group Marketing Director, Magazines & Memberships Sharon Todd

CIRCULATION

Head of Newstrade Tim Mathers 01202 586200

PRODUCTION

Head of Production US & UK Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby Digital Editions Controller Jason Hudson Production Manager Nola Cokely

MANAGEMENT

Chief Content Officer Aaron Asadi Chief Revenue Officer Zack Sullivan Commercial Finance Director Dan Jotcham Managing Director Prosumer Keith Walker Head of Art & Design Greg Whittaker

PRINTED BY

William Gibbons & Sons Ltd, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT

DISTRIBUTED BY

Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU www.marketforce.co.uk 0203 787 9001 ISSN 1355-7602

DISCLAIMER

All contents ÂŠ2019 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be used, stored, transmitted or reproduced in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office: Quay House, The Ambury, Bath BA1 1UA. All information contained in this publication is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any other changes or updates to them. This magazine is fully independent and not affiliated in any way with the companies mentioned herein. If you submit material to us, you warrant that you own the material and/or have the necessary rights/permissions to supply the material and you automatically grant Future and its licensees a licence to publish your submission in whole or in part in any/all issues and/or editions of publications, in any format published worldwide and on associated websites, social media channels and associated products. Any material you submit is sent at your own risk and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for loss or damage. We assume all unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions. We are committed to only using magazine paper which is derived from responsibly managed, certified forestry and chlorine-free manufacture. The paper in this magazine was sourced and produced from sustainable managed forests, conforming to strict environmental and socioeconomic standards. The manufacturing paper mill and printer hold full FSC and PEFC certification and accreditation.

february 2020

FEED

SIDE PROJECT

CLIENTS FROM HELL

BEYOND PIXELS

Daniel Schwarz runs down his learning resource for all things user experience

WORKSPACE

Andrew Armitage explains how A Digital enjoys incredible views while still being well connected

The latest in our series of nightmare clients How knitting helped Jenn Soloway transition from student to developer

VOICES FROM DESIGN TO STRATEGY

ESSAY

INTERVIEW TIPS FOR WEB DEVELOPERS

David Gelb on how designers and devs benefit from offering strategy as a service

Kevin Gordon offers top tips on interviewing for your dream job

VOICES

BEST OF BOTH WORLDS

Q&A

BIG QUESTION

INTERVIEW

Andreas Pouros on how you can perfectly synergise creativity and tech in web design

Our experts reveal how theyâ&#x20AC;&#x2122;ve harnessed their abilities for the benefit of society

february 2020

Variable fonts are reinventing web type. Jason Pamental talks benefits, adoption and how they will boost performance

Lynn Winter on running an event for project managers and filming the Super Bowl

Photo: TYPO Labs Workshop by Peter Constable

Joe Macleod tells us why you need to plan for the end for your product today

SAVE UP TO

SUBSCRIBE TO NET AND TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

TURN TO PAGE 16

to find out more about the savings on offer for subscribers

Contents REGULAR

GALLERY

Mark Billen runs down this month’s best sites, including DeNA’s AI-driven voice analysis project creating generative typographic art

REGULARS EXCHANGE

Torrey Podmajersky, Dave Bowers and Brett Harned share expert advice and tips

SHOWCASE DESIGN EXHIBIT

PROFILE

HOW WE BUILT

We showcase some of the month’s greatest design concepts and prototypes

Data-viz guru Nadieh Bremer discusses how she brings statistics beautifully to life

Watson/DG on crafting its magazine-style site for Once Upon a Time in Hollywood

FEATURES 50 INCREDIBLE DEV TOOLS 2020

Louis Lazaris scours the web for the 50 hottest scripts, plugins and tools to assist and delight front-end devs

THE FUTURE OF FRAMEWORKS

PROJECTS 68

Darryl Bartlett takes a look at the current status of Angular, React and Vue and what we can expect in 2020

PROJECT

CREATE PARTICLE EFFECTS WITH THREE.JS

Richard Mattka shows you how to create real-time, interactive particle effects in 3D using the popular three.js library

BUILD A TIME-BASED LOGIN

THE RISK OF IGNORING A11Y

DISCOVER SECRET CSS TRICKS

CODE ACCESSIBLE MODALS

Mark Shufflebottom on how you can make a unique animation based on the time Joshua Garity explores why a11y is often underemphasised and why that’s a mistake Aga Naplocha introduces you to some CSS properties you might not have encountered Daniel Schwarz shows you how you can develop accessible modals and dialogs

february 2020 7

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... TORREY PODMAJERSKY Based in the Greater Seattle area, Podmajersky is a UX writer at Google and author of the best selling book Strategic

Writing for UX. w: torreypodmajersky.com t: @torreybird

DAVE BOWERS Bowers is head of strategy at Likely Story, an award-winning strategic creative agency based in Manchester that’s focused on delivering digital, branding and storytelling. w: likely-story.co.uk t: @likelystorydave

BRETT HARNED Harned is director of education at TeamGantt, founder of the event Digital PM Summit, author of Project Management for Humans and podcaster at Sprints & Milestones. w: brettharned.com t: @brettharned

QUESTION OF THE MONTH

What’s the secret of writing text for reading on the web? Iyla Dillard, Sheffield, UK TP: As a UX writer, I don’t think I’m actually an expert on text that’s meant for reading. What I’ve practised is text meant for doing. It seems like a weird thing to say because isn’t all text meant for reading? The distinction I’d like to make is that some text inspires ideas, tells a story or conveys information. Reading that text is its own purpose, complete in itself. Text intended for doing, in contrast, isn’t meant to be remembered any longer than necessary. It is designed to be ephemeral. The text should be so easy to read, so scannable, so appropriate to that moment in the experience, the reader barely notices it. For this text-for-doing, I share ‘golden rules’ of usability and pre-defined voice in chapter 6 of my book Strategic Writing for UX. The usability rules include staying concise but also accessible, purposeful, conversational and clear. Torrey Podmajersky’s book teaches you how to write strategically for UX, using tools to build foundational pieces for UI text and UX voice strategy

Project management

OWNER AND MANAGER Can a project owner and a PM be the same person? If not, why not? What are the pitfalls to watch for? I am leading a highly complicated, year-plus-long project with 11 people from different departments on the team (all with different bosses). I do not have a PM on the team so I am taking the training myself. What are some tips to make this work?

Alicia Swinamer, California, US

BH: Anyone can be a project manager. In fact, there are many organisations

february 2020

Practical advice from industry experts

wkdw#grqġw#hpsor|#ru#fdqqrw#dļrug#SPv/# so they end up delegating the tasks to teams. This can be done in a number of ways but personally I do believe that designating one lead with the responsibility of planning, managing dqg#frppxqlfdwlqj#fdq#ehqhĽw#|rxu# team and your projects. The best thing you can do in this instance is develop a UDFL#pdwul{#wr#khos#|rx#ghĽqh#zkr#lv# responsible, accountable, consulted and informed at every step of your project +lqfoxglqj#SP#wdvnv#olnh#vwdwxv#xsgdwhv/# meeting facilitation, etc). Doing that will

Q&As

3 SIMPLE STEPS

Image courtesy of Pexels (pexels.com)

What books do you recommend for a newbie to user research?

Anyone can be a project manager, says Brett Harned

Haniya Morley, Dallas, US Oldies but goodies

DB: Some of the old UX research

books really stand the test of time. Observing the User Experience: A Practitioner’s Guide to User Research by Elizabeth Goodman

remains the absolute help you to distinguish roles and keep tasks on track.

but how to make the words dance to a vshflĽf#wxqh#lq#rughu#wr#phhw#vshflĽf#

In some ways, it’s almost perfect to be the project owner as well as the project manager. What you have to look out iru#lv#|rxuvhoi$#Zlwk#|rxu#SP#kdw#rq/# |rx#pxvw#vwd|#irfxvhg#rq#|rxu#ghĽqhg# project goals and the plan you’ve devised to meet them. With your project owner hat on, you have to be aware of your powers. Just because you like or dislike something, should you change the course of the work for your team? Quick! Put wkdw#SP#kdw#edfn#rqĩ#wkh#dqvzhu#lv#qr1# At the end of the day, no matter which hat you are wearing, stay aware of – and respect – your goals, scope and timeline and you should be able to keep things on track. But also be aware of how you communicate and how the decisions you make will impact your team because, in your position, what you say will typically be taken seriously. That leaves less room for discourse – and that can be problematic for team morale and their investment, which could eventually lead to project failure. It’s a lot to take on but you can do it with the right amount of time and focus.

business and user purposes. Hopefully they can show me this in a portfolio of real or student examples, where each example comes with information about its context. Of those people, I want the subset who want to make things and who can empathise with the people who will read those words. Hopefully I see this in their portfolio examples, with explanations of the goals, motivations and constraints that the users would encounter. Of that smaller subset, I want the people who enjoy collaborating with the other members of the creative, engineering and business teams. I would ideally see this in their resume, work experience and interview, when they talk about the parts they contributed to the work they’ve done, who they did it with and how those collaborations went. Even if it’s student work, they should be able to talk realistically about the trials and joys that group projects can bring. To reach these people, I’d post jobs on job boards and Slack groups like Content + UX. I’d also seek out meetup groups, organisers and local schools. I’d expect to have a lot of career and informational conversations, which would help me understand more about the available talent and help them in turn understand more about what I expect from the role.

UX writing

UX TALENT What’s your advice on hiring a UX writer?

Libbie Sinclair, Christchurch, New Zealand TP: First, I start with the people who not only understand how to use words

bible for anyone considering running user tests, whether they’re lab-based or run remotely – a little dry perhaps but certainly very informative and practical. Broader picture Beyond that, I always think it’s useful to see the broader picture and understand what makes people tick. Malcolm Gladwell’s books are great, lazy page-turners and have really helped me pick apart and contextualise all those anomalies in user behaviour. Learn from the masters Also, Don Norman’s Emotional Design helps us understand the levels on which design is perceived. In fact, anything by Neilsen/ Norman (http:// nngroup.com) is definitely worth a read if you’re practising UX and want to learn from the masters.

february 2020 9

Network

THE POLL

COOL STUFF

WHICH ANIMATION TOOL DO YOU USE?

WE LEARNED THIS MONTH OPEN SOURCE CODE WILL SURVIVE THE APOCALYPSE IN AN ARCTIC CAVE

Do you ever find yourself worrying

Actuate 5%

JavaScript 5%

Express Animate 10%

I do my own 5%

about the end of the world? Say goodbye to sleepless

nights – Norwegian archipelago Svalbard should give you some peace of mind as it’s home to

archives filled with rolls of

Armageddon-resistant code. https://netm.ag/2OG7ede MICROSOFT GIVES A PREVIEW OF THE FUTURE

GreenSock 15%

Velocity.js 5%

OF OFFICE DOCUMENTS WITH FLUID FRAMEWORK FOR THE WEB

Throughout 2019, Fluid Framework has been touted from various sources as being the future of web collaboration. Now, thanks to a preview, users can investigate for themselves exactly how the new Microsoft technology is set to shake things up in the Office world. https://netm.ag/2LaS7Gf HOW TO USE FOMO TO INCREASE CONVERSIONS

‘Fear of missing out’ is often viewed as being a negative strategy to implement when it comes to planning a marketing strategy. This article argues that if web designers remove the element of fear, it can lead to more engaging web and app design. https://netm.ag/34HIuXo

february 2020

ScrollMagic 10%

Anime.js 45%

From our timeline

Which web design tools are you experimenting with and why? Very impressed with @AppSupernova. Impressive tools and UI. Testing the code output to react. Continuing to spend more time in @InVisionApp #Studio as they continue to improve it. Love the simplicity for making animations which we are starting to implement on @sereneappcom @Benjieboo @webflow because it makes sooo much sense. @RedFoxBandit

#adobe #adobexd is doing very well, especially for the layout grid feature. @joaogdesignerr @DramaApp because of its new approach towards prototyping and interesting animation capabilities. @mikolajdobrucki Having success delivering website drafts for review inside

of @usepastel / we like it and clients like it. @John_Speed New @litmusapp for email development, game changer since their most recent update. @blackenedhonesty @InVisionApp‘s DSM is hard to beat when it comes to design system management that works both ways – as workflow integration and alignment for designers and devs alike (eg in @sketch), as well as *the* single source of truth documentation for all project stakeholders. @johoham

People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT

Daniel Schwarz runs down his learning resource for all things user experience

CLIENTS FROM HELL

After an extensive redesign project, a dev discovers all a client wants is a background-image changed

BEYOND PIXELS

WORKSPACE

How learning to knit helped Jenn Soloway transition from art student to website developer

Andrew Armitage explains how A Digital enjoys incredible views while still being well connected

february 2020 11

FEED Side project

UX TRICKS

Daniel Schwarz runs down his learning resource for all things user experience SIDE PROJECT OF THE MONTH

IN FO

DANIEL SCHWARZ Schwarz is a UX and UI designer, web developer and maker by background but an educator at heart. He now creates content for brands like InVision, UXPin and Adobe. w: https://uxtricks.design t: @mrdanielschwarz

Tell us what your side project does. UX Tricks creates ebooks that teach UX but customers can also read their ebooks online if they choose to create an account. Why did you create it? Design is what I know and love and if the web has taught me anything it’s that there’s always space in the market for more learning resources, despite there being loads of awesome resources out there already. That being said, there are a bunch of ways that I think UX Tricks is (or will be) better. What were you hoping to achieve? To offer a better a way to learn UX. First of all, learning any UX-related craft is more confusing today than ever before. There’s so much conflicting terminology and the fact you don’t need a qualification in order to enter the industry doesn’t do much to reduce the spread of misinformation. The fact that designers can’t even agree on UX vs UI is evidence of that. It’s a deeply confusing industry. The industry also changes really quickly. There isn’t only website design and app design; now there’s UX, UI, product and so on. Often enough even relatively seasoned designers aren’t even really sure of things like who does what and what order to do it in.

february 2020

As I said, there are a lot of terrific learning resources out there but if you’re using resources from different sources then the knowledge you’re acquiring is fragmented, inconsistent and incomplete. UX Tricks isn’t doing anything new but we’re attempting to do it better and we’re doing it all in one place. What technologies were used in building it? UX Tricks is built upon Shopify, even though it’s more of a content website than an ecommerce website. I enjoy hacking Shopify to make it work in ways that weren’t intended. The code stack is really simple: Liquid/HTML/CSS/JavaScript. Why complicate things? How has it been received? What users have seen, they’ve loved but I’m aware that our biggest mistake has been building UX Tricks privately. Publicly, users haven’t seen approximately 90 per cent of what we’ve been building but that’s about to change soon. As a business, UX Tricks is profitable and we’ve never had a complaint, so I guess we’re doing something right! What do you think you’ll do next with it? We have more content on the horizon but also more ways to consume it. We’re working on some webexclusive content and also ways to turn the ebooks into short book summaries (think Blinkist for learning UX design). We’re also working on some user-focused monetisation opportunities (eg advertising that leverages search intent instead of tracking cookies) and a variety of small but very awesome tools for designers that’ll complement the learning experience for those that enjoy reading on our website.

Feed

HOW TO

PITCH A WEBSITE REDESIGN A website redesign is obviously a

huge undertaking that demands a lot of planning if there is to be any hope of things going smoothly. So when it comes to pitching a redesign to a client or employer, you need to have a crystal clear

outline of the work involved. To offer some assistance, we asked

@netmag’s followers to share the

SHORT CHANGE

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients CLIENTS FROM HELL

I’ve done work for some of the world’s biggest brands. As you can imagine, it gets very stressful. To de-stress, I occasionally take small jobs from local businesses. This may be a bad plan for relaxation. A client needed a website for their shop. All I had to do was take their old site and rebuild it using their existing product database and all the designs and information they had already given me. Simple. It wasn’t that at all. I worked for 48 hours straight and presented a new site. The website had already garnered two sales (doesn’t sound much but this shop sold large machinery, so those two sales were worth over £20k) because in my sleep-deprived state, I built it on the live web-facing server. They hated it. To say I was a bit upset would be an understatement. The difference between their old site and my new one was like a 1980s Pinto vs a 2019 Ferrari.

Me: I’d like to understand what you don’t like about the new design. Client: Customers won’t buy from us if they see something different. Could you build a site that looks exactly like our old one but change the background to match your new one? I changed one line of code in their old website CSS to the new background image, uploaded it to their server and walked away £2,500 richer for my troubles. They are still a client of mine. A few months later I got a call from a competitor of theirs who wanted a new ecommerce site. I changed a few colours on my new version, added their logos and menu text, dropped in their database, zipped it up and sent it over. About 20 minutes of work and the easiest £5k I ever made.

clientsfromhell.net

basic factors web designers need to consider.

CONTENT AND PURPOSE

According to @aarmitage, answering questions related to content and purpose will make the pitch more palatable: “Will the content change? What needs to be migrated? How will content map across to the new design (structurally and visually)? And why the redesign? What’s letting the org/biz down so much [that they] have to throw everything away and start again?”

CUSTOMER NEEDS

Being customer focused, both with the client and their target users, is essential to @billyryanwill: “You need to make sure that you satisfy the requirements of both to create an end product.”

KEEP WHAT WORKS

A total overhaul isn’t always necessary. “Don’t throw out the good stuff,” says @chopsmcmutton. But on the other end of the spectrum, @trulyemma says: “A website is not your parents’ fridge door. You don’t get to keep something there that you made years ago just because you’re proud of it.”

february 2020 13

FEED Beyond pixels

STUFF I LIKE

KNITTING

The creative process doesn’t end with design: how learning to knit helped Jenn Soloway transition from student to dev BEYOND PIXELS

UX designer

w: www.melissahie.com

VSCO

Everyone has their favourite phone editing app but I’ve

used VSCO for as long as I can remember. Its UI is the best (aka simplest) out of all the ones I’ve tried. Sure, I occasionally have to go to Snapseed or Photoshop for more control but, for daily editing, VSCO is fine. https://vsco.co/

SOURCETREE

I am a designer by trade but I occasionally help out in front-end development (read: CSS) at my company when I can. Using Sourcetree has been vital in helping me organise my code and commits. It’s great for all user levels! https://sourcetreeapp.com/

TRANSFERWISE

These days our work is not limited by the boundaries of the country we live in. Sometimes I need to accept payment in different currencies and using TransferWise has helped me minimise the fees associated with cross-border transaction and currency exchange rates. https://transferwise.com/sg

february 2020

How measuring the size of your stitches gives you flexibility in needle size. When and how to adjust the pattern so the end result fits better. At the same time, I had started my career as not just a web designer but also a web developer. Here, too, I was learning about the creativity that goes into development: what the best way to construct this element is so it’s fast and accessible to users. How different units of measure interact to give your website a consistent, readable flow. When and how to sacrifice pixel-perfect design in the name of flexibility and vice-versa. My hobby as a knitter was paralleling the journey my career was taking, as I found a creative outlet in not just the design but also the making of a final product. Today, knitting remains a way for me to connect my passion for development with my background in design. Each stitch represents one square that builds on those next to it to create the whole. The same is true for web dev – whether that ‘stitch’ be measured in pixels, ems or a percentage.

PROFILE

MELISSA HIE

It’s the end of a productive day spent working up the template files for a client’s website. My fingers aren’t quite ready to call it quits and are performing a choreographed dance of knit-one purl-two. Beside me sits a tightly wound ball of yarn in a bowl with a single strand guided through a specially designed hole, giving me that one extra hand I need while my own are busy. There’s also a charted pattern – a grid of symbols with a key – wireframing the design. I first picked up a set of knitting needles as an undergrad art student, back when web dev and coding were not on my radar as career choices but something fun to mess around with. I lived north of Boston and envisioned being able to whip up an entire wardrobe of hand-knit garments for the low cost of Red Heart skeins found in the bargain bin. I bought a book that taught me the basics of knitting and declared myself ready to start authoring my own patterns and get to work. What followed were several years of horribly amateur stitches, incomplete projects and countless restarts as I fought my way through learning the ins and outs of working with yarn. I learned about the creativity that goes into development: what happens when you use a different fibre than the one the author suggests.

Soloway (@jennsuzhoy) is a front-end developer, designer and branding expert. Her mission: to build your best site ever.

feed 2 5 1

Andrew Armitage explains how his digital agency enjoys incredible views while still being well connected WORKSPACE Nestled among the fells of the Lake District National Park, we love being able to take advantage of having an adventure playground on our doorstep while working for clients such as James Cropper plc, the NHS and the globally recognised attraction Windermere Lake Cruises. Our studio on the edge of Kendal has been home to our team of six (not forgetting Jasper, the office dog) for the last three-and-a-half years. The open-plan space is bright and light with spectacular views towards the mountains – at least when it’s not raining! On most days, though, we’re fortunate to see incredible light across the landscape that has served as inspiration for both poets and artists for centuries [1].

Being based in a rural area means there aren’t many local meetups, so we’re pretty active in travelling to places like Manchester for events and often further afield to support our team’s development [2]. Despite our countryside location, we’ve got the West Coast Mainline only a few miles away and excellent broadband connectivity, so working with clients across the country and even a handful in Europe and the US isn’t a problem. Communication across our team is vital but having an open-plan studio means it only takes a few voices to raise the volume, so we added some acoustic panelling to soften the noise and separate our main workspace from our breakout/meeting area [3]. This has also enabled us to create more video

PROFILE

A DIGITAL

content and start our own podcast to capture some of the valuable conversations we have. Many of our sites are built on Craft CMS, which has become a speciality within the agency. We’ve found it provides an incredible level of flexibility for us as developers and our clients seem to appreciate how easy it is to use and customise. Our project for artisan food producer Hawkshead Relish was awarded Best Food and Drink eCommerce website at this year’s Northern eCommerce Awards [4]. We’ve not gone wild covering the studio walls because we want to ensure there’s plenty of space for flip charts and sticky notes for planning out new projects. Our three-metre glass whiteboard is brilliant for this but we’ve added a few prints where we can, with my personal favourite being the beautiful letterpress of Brooklyn Bridge by Cameron Moll [5]. Armitage is the founder of A Digital agency, which specialises in providing clients with websites and digital marketing. w: adigital.agency

february 2020 15

SUBSCRIBE TODAY

SAVE UP TO 77

ON YOUR ANNUAL BUNDLE

myfavouritemagazines.co.uk/net/promo20 2ÆªHU GRHV QRW DSSO\ WR TXDUWHUO\ RU PRQWK VXEVFULSWLRQV 16

february 2020

GREAT REASONS TO SUBSCRIBE O

Print edition delivered to your door

13 issues in a one-year subscription

iPad and iPhone edition download

Android edition download

Money-back guarantee

CHOOSE A PACKAGE PRINT EDITION

SAVE UP TO

12-month subscription (13 Issues)

PRINT & DIGITAL

SAVE UP TO

12-month subscription (13 Issues)

TERMS AND CONDITIONS: This offer is available to all new subscribers. Discount applies to annual print and print + digital bundle subscriptions only for ImagineFX, Computer Arts, 3D World and Net. Offer can only be redeemed online via the web link stated above. Prices and savings quoted are compared to buying full-priced print and print + digital bundles. You will receive 13 issues in a subscription year. You can contact us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. For full terms and conditions please visit: www.bit.ly/magterms. Offer ends 29/02/2020.

february 2020 17

Opinions, thoughts & advice

INDUSTRY INSIGHT

ESSAY

Joe Macleod tells us why he started focusing on the end of customer relationships and why you need to make an end for your product today

FROM DESIGN TO DIGITAL STRATEGY David Gelb on how designers and devs benefit from offering strategy as a service

INTERVIEW

Q&A

Variable fonts are reinventing type on the web. Jason Pamental talks benefits, adoption and how the concept will improve web performance

Digital strategist Lynn Winter discusses working with non-profits, running an event for project managers and filming the Super Bowl

Strategy is increasingly important to the success of digital projects, reflected by the fact that it is now a core service offered by many digital agencies. While much of the conversation around strategy has focused on the benefits that a clearly defined strategy can bring for agencies and their clients, it is also important to note what designers and developers stand to gain from being involved in strategy-led projects. From brainstorming with key stakeholders to information architecture planning, designers and developers can use a strategy definition period to get involved in a project more than ever before. It is for these reasons that designers and developers have increasingly come to appreciate the opportunities that a collaboratively defined strategy can bring. Letâ&#x20AC;&#x2122;s delve into the reasons why strategy has become such a crucial aspect of

Opinion

successful web design and explore the benefits that it can bring for designers and developers.

THE RISE OF STRATEGY

along from the design team to the development team without ever defining a clear strategy. Projects that begin with clear strategy often bring far better return on investment; team members are encouraged to avoid short-termism and create an optimised roll-out plan that takes into account a range of variables. Attention to detail is vital. Finally, it is very easy to overlook the fact that designers and developers enjoy working more closely with clients! This can bring better results in and of itself. From a client point of view, priorities are shifting from short to medium term, and a relationship that revolves around clear strategy definition serves mediumand long-term progression. Businesses are no longer just approaching agencies for individual projects. They are looking for a comprehensive digital presence and this requires an understanding of the business’s strategic intent and digital goals. To put it simply, projects based on a collaboratively defined strategy provide the best chance for designers and

developers to deliver rounded results and a clear return on investment.

HOW CAN YOU SAY NO? The collaborative definition of business strategy is being increasingly recognised by designers and developers as an effective – and very often essential – starting point from which to deliver a complete and successful digital experience for clients. Projects that begin with strategy definition are tailored carefully to the client’s objectives, audiences and KPIs, giving designers and developers the strongest possible platform from which to deliver an optimised and successful digital experience for end users. The benefits of this approach are clear to see for designers, developers and client teams alike. The real question, then, is how can anybody say no?

PROFILE

The role of a web design agency has come to include so much more than just the delivery of an impressive website. As the industry continues to evolve and companies increasingly shift their focus to providing a full digital experience, the many moving parts of a company’s digital footprint must be considered and addressed together in order to achieve the best results. A complete strategy-definition phase will consider factors including UX optimisation, social-media strategy and SEO, as well as stakeholder needs and wants, digital roadmapping, attitude to risk and roll-out planning. This will build a strategy that covers much more ground than the client’s new website. While the inclusion of discovery as a phase in digital projects is nothing new, providing discovery as a standalone service is. From a startup that needs detailed strategy in order to secure funding to an international business that needs to involve a high number of stakeholders in its conception and planning phase, a self-contained discovery process can be hugely helpful. Approaching a project in this manner gives designers and developers the strongest possible platform from which to build a website and provides them a complete understanding of their client’s needs and wants. When designers and developers are involved in defining a client’s strategy, they are able to build a strong and informed understanding of its business objectives, pain points and success criteria, as well as create accurate cost breakdowns and timelines for the project. Being more directly involved in strategy also ensures team members who have conventionally been involved in only their own phases of a project have ample opportunity to contribute throughout. This is in stark contrast to the alternative: starting a website build based solely on an initial brief and passing it

Gelb is managing director of JBi Digital, a digital experience agency. It has provided digital services for brands including Rolls Royce, Channel 4 and ITV. w: www.jbidigital.co.uk

february 2020 19

VOICES Essay

february 2020

Essay

INDUSTRY INSIGHT

TYING UP LOOSE ENDS Illustration by Kym Winters

Joe Macleod tells us why he started the world’s first business focusing on the end of customer relationships and why you need to make an end for your product today I used to stumble from one exciting project to another. Repeating time after time the same cycle of designing the beginning (on-boarding) and middle (usage) of the consumer experience. Then a blind spot emerged for me. At first it was more of a quirk I noticed. An insight as a result of a personal experience leaving a bad service. I wanted to end it but not in a dry, cold way by cancelling the subscription. I wanted emotional closure. I hated the service so much, it would not be complete without a satisfactory conclusion. An ending that was reflective, emotional and potentially revengeful. My understanding and vocabulary at the time – in 2004 – was limited. I wrongly thought the lack of endings was a consequence of some hard-nosed business logic. How wrong I was. This itch of an insight went on to gain momentum over the months and years of research. It turned into an obsession. I spent hours and hours delving into the spheres of sociology, psychology and consumer history. The blind spot evolved into an enormous hole of absent endings, centuries in the making.

A BRIEF HISTORY OF CONSUMER ENDS The plague arrived in Italy on a boat in 1347. (Wait, what? You’re going back that far? Yes. Stay with me.) Within three years it had decimated Europe, killing a third of the population. Out of this chaos arose new challenger religions. One was the Protestants, who had different ideas about how we should live our lives. Among these changes were three things that shifted attitudes about consumption, income and purpose. The first one was fasting. Most religions have a period of organised fasting in the religious calendar. But Martin Luther removed this early on in the Protestant religion. Fasting provides an opportunity for consumers to remove themselves from the abundance of life and reflect upon it. It is a powerful skill. Lost in the allure and speed of modern consumerism, we would do well to revisit this. Instead we have acceleration days like Black Friday. The second was jobs. In the dominant Catholic religion, there were three good jobs: a pope, a priest and a nun (that sounds like the beginning of a joke… focus, move

february 2020 21

VOICES Essay on). All other jobs were poorly thought of. In contrast,

the consumer experience. And this helps reveal issues

the Protestants believed any job – if done well, with thought and care – was a good job. It was the beginning

that you know little about in your business. How do your customers experience the data delation? How problematic

of career paths. If you thought LinkedIn or your education is the foundation of your career, then think again. The

is recycling your product? Issues like this rarely come up in normal product development.

Protestants started your career. You should bring this up at your next job interview (or maybe not).

2. ENDING TYPES

And lastly attitudes to investment changed. People were now free to invest in businesses. These three

Everything ends. Considering how it ends improves the chances you can prepare the best ending. There are seven

religious changes echoed through the centuries. Then

different endings commonly experienced by consumers.

they were energised by the Industrial Revolution. You see, the consumer lifecycle in pre-industrial times

Each one has dimensions that your product team will need to consider and create for.

was simple. And circular. The waste from the kitchen table was given to the animals. The waste from the

O Time out – eg two-week holiday, sell by date, one-year

animals was put on the land. The abundance and harvest from the land ended on the kitchen table. It was

software subscription. O Exhaustion / credit out – eg pay as you go, battery flat,

understandable, actionable and visible to pre-industrial consumers. The Industrial Revolution turned that in to

no gems in Clash of Clans O Task / event completion – eg parcel delivered, used

a linear narrative. And over centuries, we have split

disposable cup, game complete

beginning from end. The beginning of the consumer lifecycle got faster.

O Broken / withdrawal – eg broken contract, product broken, provider shut down

More emotional. More sophisticated. The end, in contrast, became more complicated. More distant. It faded in interest for the consumer and industry alike.

O Lingering – eg unused gym contract, old phones in draws, unused email accounts O Proximity – eg move outside covered area, items in loft, move from Apple to Android O Style – eg writing letters, Kindle, MySpace

What does this mean to you dear reader, centuries later, sitting in your office developing products? Design an end, save the world? Well, maybe. The problems of consumerism should be resolved inside the consumer lifecycle, regardless of sector – digital, service or physical product – in a bonding of consumer and provider. The end is key to achieving this. Absent in most consumer experiences, overlooked as something meaningful, a well-designed end can be powerful. Inspiring responsibility, reflection and action in the consumer.

HOW TO DESIGN AN ENDING In the work I have been doing over the last few years I have developed techniques, models and approaches that help create consumer endings. Some are based on the research from the Ends book, others on new work focusing on the application of better endings in industry. Much is on the andEnd website. Here are three I use in workshops when teaching companies about endings.

1. AFTERMATH TARGETS We often use targets in product development, such as growth targets or acquisition targets. These targets are focused on on-boarding and usage periods. Why don’t we target the end? The off-boarding? This would involve setting an ambition for the post customer experience – a sort of aftermath target to help companies see and target the best possible outcome for

february 2020

3. A GOOD ENDING… There are four broad characteristics of a good ending: O It should be something that is consciously connected to the rest of the experience. O Through emotional triggers, like the emotional triggers used in advertising and marketing. O These should be actionable by the consumer so they feel involved and have influence at the end of the consumer lifecycle. O This should be done in a timely manner so products, data and services don’t linger on in the background, lost in cupboards, bank accounts and old forgotten digital services we no longer use.

IN CLOSURE The end happens. Across all sectors. To all products. Consumers experience them. Designing them does not threaten a business: it improves it and makes it more resilient. I dare you to speak about it once today. See how adverse your product team or business is to the idea that your product will end someday, somehow.

PROFILE

BOTHERED?

Macleod is founder of andEnd, the world’s first business dedicated to helping companies end their customer relationships. He is also author of the book Ends. w: http://www.andend.co

THURSDAY 2 APRIL 2020 RICH MIX, SHOREDITCH, LONDON

The conference helping you build better JavaScript PHIL HAWKSWORTH PRINCIPAL DEVELOPER EXPERIENCE ENGINEER, NETLIFY

Are you being servered? – Exploring a “serverless” web

REMY SHARP FOUNDER, FFCONF RUNNER, JQUERY FOR DESIGNERS

EARLY BIRD TICKET PRICE £188 +VAT

SAVE £110! Only available until 5pm on 31 January 2020 (£298 +VAT thereafter)

Using a modern web to recreate 1980s horribly slow and loud loading screens

JEREMY KEITH WEB STUFF DO-ER, CLEARLEFT Closing keynote: Going Offline

Book now at generateconf.com HOSTED BY

#GenerateJS

VOICES Opinion latest developments. You wouldn’t want to be caught unstuck.

DURING THE INTERVIEW Be confident Don’t worry if you are nervous – that’s okay, it shows that you want the job but don’t let it overrule you. Focus on telling the interviewer about your experience and getting across everything that you want to say. Make notes beforehand and refer to them if needs be. Ensure you understand the question before responding. Do not be afraid to ask clarifying questions or for a question to be repeated. Don’t be afraid to pause and think

INTERVIEW TIPS FOR WEB DEVELOPERS Kevin Gordon offers top tips on interviewing for your dream job and presenting yourself in the best light Your CV is excellent and portfolio impressive. But how do you prepare for the all-important interview? Having had years of experience hiring developers, here are my tips on how to succeed.

PREPARATION Use visualisation techniques Think of examples of when you built something amazing. Actively visualise these examples before the interview, thinking about how you approached each stage of the process. When you go into the interview you will have these examples at the front of your consciousness, which will help you to formulate great responses to the questions asked using ‘real-life’ experience. Record yourself To prepare for an interview, record yourself speaking on a voice-recorder app or to camera. Doing this activates the same anxieties you might feel when under the pressure of an

february 2020

interview. By running through potential questions ahead of time, you can feel prepared and relaxed in the interview. Make something for the interview Candidates are often asked to provide a presentation for an interview. One candidate I met went one step further and built a demo app, bringing their presentation to life. This not only proves that you are serious about wanting the position, it also provides another opportunity to showcase your skill set. Going the extra mile means that after a long day of interviewing, the managers have something to remember you by and that helps you stand out from the crowd. Refresh your knowledge Brush up on your coding skills, re-familiarise yourself with your favourite IDE and check for the latest trends in your favourite programming language or development stack. Be confident that you are up to speed on the

time to consider and construct your answer. Answer at a gentle pace to give yourself time to give your best answer. Use the tools you’re given If there is a whiteboard in the room and you prefer to explain things visually, then draw the answer on their whiteboard. If you’re asked to complete a live coding test and the interviewer is giving you hints and tips, listen to them. If you’re given internet access, use it – you’ve been given it for a reason and the interviewer wants to see how you work. It’s okay to research an error message or check for a good piece of code on Stack Overflow, for example.

AT THE END OF THE INTERVIEW Ask questions An interview is both an opportunity for you to impress the interviewers and for them to impress you. If you are asked to move forward to the next stage, you want to be sure it’s the right role for you. Have at least one question about the role or company prepared as well as asking about next steps in the process. Be authentic If this is your dream job, tell the interviewer that. There is nothing wrong with showing your passion and enthusiasm for a role. Good luck with it all! PROFILE

CAREER ADVICE

I’ve seen a number of candidates run into an answer without thinking it through. Take

Gordon is the founder of Digital Technology Labs, which specialises in software development and web design, helping businesses get online. w: www.digitaltechnologylabs.com

SUBSCRIBE TODAY I« x ‫בבڟ‬ z( ³ à0 È¨ Á ‫ۏגד‬

myfavouritemagazines.co.uk ORDER HOTLINE: ‫ גגڷ‬٨‫׎‬٩ ‫ אדזא זגז גגב‬ nXz0³ «0 ¨0z x z( ç Á I«X( ç ‫ ז‬x Á ‫¨ו‬x z( ³ ÁÈ«( ç ‫ ׎׏‬x Á ‫¨א‬x ٨JxÁ٩ *Terms and conditions: Prices and savings quoted are compared to buying full-priced print and print + digital bundles from myfavouritemagazines.co.uk. Savings correct at point of print and subject to change. Dollar prices quoted are for the United States, other global territory dollar pricing may vary. You will receive 13 issues in a subscription year. You can contact us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14 day cancellation period unless exceptional circumstances apply. For full terms and conditions please visit: www.bit.ly/magterms.

february 2020 25

VOICES Interview

IN FO job: Web typography expert and design systems / operations consultant w: rwt.io t: @jpamental

february 2020

Interview

Jason Pamental Words by Oliver Lindberg

Photo: TYPO Labs Workshop by Peter Constable

Variable fonts are reinventing type on the web and 2020 could be their breakout year. Jason Pamental discusses benefits, adoption and a promising new concept that is set to massively improve the performance of web fonts

february 2020 27

VOICES Interview

Traditionally, typography on the web has been constrained by the need to balance it with performance. Variable fonts – which enable many different variations of a typeface in a single font – not only address the technical issue by using fewer files, resulting in faster load times, but also offer new creative opportunities (see our cover feature in net 318). Web design pioneer Jason Pamental is convinced that they are the future of type – and even design as a whole – on the web. “Performance is the first piece of design that a user encounters,” he explains. “We’ve had it drilled into us that we need the text to show up quickly on the screen, so people can start to interact. So we use fewer fonts and that gets passed off as good typography. But it’s not. Effective

february 2020

typography uses a whole range of weights, widths and implementations. It creates a strong contrast, visual interest and hierarchy. Variable fonts allow us to be more creative and intentional. They give us the ability to create a more compelling experience that’s tailored to what the user needs. The promise for design on the web is simply ground-breaking.” Since their introduction in late 2016, Pamental has been extensively researching, writing about and working with variable fonts, as well as spreading awareness at events and for in-house teams all over the world. After almost 25 years in the industry, he decided he wanted to have a bigger impact and improve typography on a broader scale rather than just one site at a time, so he quit his agency job and – realising variable

fonts’ potential – began to focus on them full-time. His work includes educational materials (for example, a guide for Mozilla’s MDN site), demos for Monotype and Type Network and a ton of resources on his own site. Pamental firmly believes that typography is the most foundational element of design and central to tying together brand, content and the user in a cohesive, engaging and usable experience. And so he is on a mission to help organisations, teams and type designers use variable fonts to unlock the full power of typography and make the web more readable and visually interesting. Browser support for variable fonts is now almost complete (with the exception of IE11 and a couple of Android browsers like Baidu and UC) and there are plenty of fonts to choose from. However, while they are perfectly safe to use in production, most applications so far have just been purely experimental. We haven’t quite reached that tipping point yet but recently there have been some noticeable commercial applications that suggest we’re getting there. Pamental last year worked with the digital services team of the State of Georgia to create a new typographic system for its web platform. It uses a variable font, while safely delivering the static web font version for all state employees, who are still on IE11. “We used CSS feature detection with @support to scope the use of the variable font,” Pamental explains. “Browsers that support it will load that asset instead of a static one.” The system has now been deployed to over 40 sites and is being viewed by millions of people a month. UX consulting firm Nielsen Norman Group, meanwhile, decided to use Source Sans Variable (an open-source font released by Adobe) on nngroup.com simply because it was faster. “They didn’t change anything about their design,” Pamental points out. “They just swapped in that asset because it decreased the page download size. Google has actually been doing this with Oswald, one of the top five web fonts and they didn’t even tell anybody! Google Fonts started serving a variable version of the font on sites with

Photo FITC Web Unleashed by Briande Rivera Simon

Interview

enough different weights to warrant it and they do that about 150 million times a day. It speeds up the performance without the need to change any of the CSS. The technology is really well proven in that respect.” Even though they don’t use them in production yet, a lot of companies are now in the habit of ordering variable fonts for their custom type. “I’ve just talked to a Fortune 25 healthcare company that’s getting custom type work done and they’ve got variable fonts,” Pamental reveals. “They don’t quite know what to do with them yet – hopefully, I can help them with that – but they had the foresight to learn enough about the format to get a variable version too.” While variable fonts are fast picking up momentum on the web, it’s important to realise they work in print as well (Adidas, for example, has used them for poster

“We use fewer fonts and that gets passed off as good typography. It’s not. Effective typography uses a range of weights and widths” designs and advertising). Previously, plugins had to be written to use them in traditional design applications but adoption is slowly changing here too: both InDesign and Sketch now support variable fonts. Pamental thinks these are market signifiers. “If people see applications supporting variable fonts, they’re more likely to try them,” he says. “The best way to work with them at the moment is in the browser but there are still plenty of

designers who aren’t ready for that. They need to be able to incorporate them into their design process, work with them in Sketch and Illustrator and then move into implementation on the web.” Awareness is one of the biggest challenges that stand in the way of widespread adoption. Pamental spoke at 20 events in 2019 and on average only half the attendees had ever heard of variable fonts. “Every article, podcast and conference talk helps but we also need readily available stuff,” Pamental says. “Google Fonts is now rolling out variable fonts in its API, so that you can start to use some really high-quality fonts through its service. If designers and developers have stuff they can experiment with that they know is going to work, it will spread awareness and increase adoption. That’s what Google Fonts did the first time round with web fonts and I

february 2020 29

Photo by Norman Posselt

VOICES Interview

february 2020

think that’s what’s going to happen this time with variable fonts too.” The design, technical and performance benefits are clearly a game changer but in his conference talks, Pamental now also covers how you can combine variable fonts with other CSS capabilities like custom properties, calculations and grid. “That’s where they’re getting even more exciting,” he enthuses. “It allows us to create a whole typographic system that scales. Instead of having a lot of fixed breakpoints, we can use maths. It works really well in design systems. We can quickly and easily tweak the system by reassigning a couple of variables. When we drop a component into a different part of a layout, for example, we might just need to change the low and high scaling values and everything still moves together. Another example is light modes, the ability to invert the contrast of the OS and all applications that support it. When we set text and background colours and use custom properties and a media query, we can invert that colour palette with two or three lines of variable assignments and that’s it!” This technique can improve both readability and accessibility (for example, for users who have low vision, light sensitivity or chronic migraines), which is another great benefit of incorporating variable fonts. “They allow us to fine-tune the typography or put the controls in the hands of the user to let them fine-tune it,” Pamental explains. “This is one of the things I’ve been playing around with more and more: what kind of controls can we create that would allow a user to request greater contrast. A surprisingly high number of people – around eight per cent – use some form of high-contrast mode in Windows when it’s available. That’s a signal. As a designer I want to make the system work for everybody but I can’t possibly know what everybody’s requirements are, so I want to design the system to have some flexibility and let the user select the light mode and the contrast level, while ensuring that the design’s integrity stays intact.” Pamental is also an invited expert on the W3C Web Fonts Working Group, which is currently tackling the performance

Photo FITC Web Unleashed by Briande Rivera Simon

Interview

“Variable fonts allow us to be more intentional. They give us the ability to create a more compelling experience that’s tailored to what the user needs” problem of serving web fonts. “One of the issues has been the amount of data that has to be downloaded,” Pamental points out. “So we’re working on an open standard called Progressive Font Enrichment, which is based on some work that Adobe, Monotype and Google have been doing. The idea is that when you view a page, the server will dynamically subset the font to download just the glyphs needed to render that page. When you then go to the next page on the website, it will serve only what wasn’t already delivered and patch the font file on your system. The more pages you access, the more of the font you end up downloading. Viewing a site will be faster to start with and get even faster with every subsequent

page view as less and less font data needs to be served. It’s going to make the performance question disappear because no one will ever have to load the whole font file. That’s a tremendous addition to our toolkit!” The solution would reduce the overall download from around 100kb to 200kb of font data for a Western language website to just 10kb to 20kb, while subsequent loads might only be three or four kilobytes. It becomes even more significant for Arabic and Asian sites that typically would need font files that can weigh in at 2.5MB or even 20MB for languages like Chinese, Japanese or Korean. Previously, these sizes have meant that some sites were simply not able to use web fonts and better typography but this could all change. Initial results look promising and Pamental is confident that we’ll see some improvements soon. Couple this new capability with variable fonts and the combination could end up having a significant impact on the design of Western and non-Western language sites alike. As Pamental writes in his newsletter: “After years of promise shackled to performance constraints, this will be nothing short of revolutionary.”

february 2020 31

VOICES Opinion KNOW THE CUSTOMER As more data becomes available to brands to learn about their customers, companies should consider investing in a tool to translate data into results. Integral to understanding a customer is a data management platform (DMP). DMPs collate data from first-, second- and thirdparty channels to create customer profiles representing their preferences and values. Through identifying the customer’s demographic and key interests from various data sources, brands can better understand what their audiences want. Website designers can capitalise on this to tailor the experience to individual visitors,

INDUSTRY INSIGHT

GET THE BEST OF BOTH WORLDS Andreas Pouros runs down how you can perfectly synergise creativity and technology in web design Web designers often don’t realise the best way to utilise data when building a site. They sometimes overcomplicate the results and try to appeal to too many audiences, creating a bland site. Or it’s the opposite: an idea dictates the design and ignores the data. It’s the classic conundrum: left brain vs right brain. The design process should marry innovative technology with creative bravery. Data should inform a creative brief to provide a brand experience that resonates with the customer and increases the rate of conversion.

EXTRACT RAW DATA

specific audience, brands are more likely to increase their conversion rate.

BE BRAVE AND CREATE A fully informed creative brief should now be available to designers. How they utilise this information is down to them but data should always be the starting point. The key to appealing to a specific audience is knowing what they want and being bold within that remit. The best way to do this is to ask where value can best be added in the customer’s journey. Employ DMP data to focus on why people visit your site and how you can differentiate your approach from competitors. Keep it simple. Make the path to purchase as seamless as possible and use bold and interesting imagery that resonates with your audience. Don’t be afraid if this brings you into uncharted territories. Embrace it. With systems in place that measure your site’s performance, you can identify areas to tweak and improve. In web design, you really do learn from your failures. Web designers should think of themselves as chefs. Extracting raw data is the equivalent of sourcing ingredients; analysing data using a DMP tells the chef what their customer’s favourite meal is and the modern twist that is given to the final dish is the bold, engaging and exciting website design.

PROFILE

Make sure you pick the right attribution system for your brand. Attribution has come a long way and now offers substantially

more insight into a customer’s route to sale on a website. Multi-touch attribution assigns value to every function on the website, highlighting the different areas that have influenced a purchase. As more purchases are conducted on mobiles than ever, it’s important to deploy a system that can track customers across various devices. Cross-device systems track data from a number of website sessions and devices to form a more cohesive image of customer interaction. The data gathered provides crucial context for website optimisation. Although this process is slower than traditional first-touch or last-touch attribution systems, the results are undeniably accurate and illustrative of a customer’s journey on a brand’s website.

as opposed to attempting to appease a broad audience. By appealing directly to a

february 2020

Pouros is the CEO of London-based Greenlight Digital, the largest independent digital marketing agency in the UK. w: www.greenlightdigital.com

Q&A like a really natural and familiar fit. Over the years, as I began to work with different types of clients in the for-profit space, I realised it was also important to me and my values. I want to help organisations that are working to make a difference, no matter how big or small they might be. The challenges that this community faces often come down to a matter of funding and resources. They’re game for new ideas and big changes but their marketing efforts are constrained by tight boundaries. What led you to found Manage Digital, the event for digital project managers? And do you think that there is potential to expand the event across other territories? In my early years in digital, I found it hard to find and connect with my community: digital project

Q&A

LYNN WINTER The digital strategist discusses working with non-profits, running an event for project managers and filming the Super Bowl IN FO job: Digital strategist w: lynnwintermn.com t: @lynnwintermn

Could you briefly introduce yourself? I started as a project manager at TPT, a local PBS affiliate in Minneapolis/St Paul. In 2008, I transitioned to digital and web full-time, helping non-profits build sites using open-source platforms. After I settled into my role, I began noticing parts of site creation where I could really add value to a project. I started learning more about content strategy, information architecture and user testing and became more involved in the build process itself. Two years ago, I made another jump and became a freelancer. I now work both as a digital strategist and project manager, primarily on site redesigns. How did you come to specialise in agencies who work with non-profits and what are the main digital challenges in this area? Because of my early experience working both at a non-profit and with non-profits, specialisation felt

managers. Then I had the pleasure of attending the second annual DPM Summit in 2014 hosted by the Bureau of Digital. This changed everything! Finally, I didn’t feel alone. The only challenge was that my connections weren’t local to Minnesota. After thinking about how to bring that community experience to my area for far too many years, I finally decided to create the annual Manage Digital conference in 2018 (http:// managedigital.io/). I don’t currently have expansion plans but the effort is still quite young! You’re also a camera operator for sports events, including the Super Bowl. How do you juggle the two careers and do you find that they inform each other in any way? How do I juggle them? Well, often not well. That has actually been a focus for me over the last two years. I have been working hard to find the right work/life balance for myself and my family. It’s often a constant struggle balancing the two, since they really are separate careers. One thing I have done is to only take work that I really enjoy or that will challenge me. That way, if I overbook myself for a given week, I still look forward to it and bring a good attitude. Of course, it helps to get paid to watch fun things like the Super Bowl and the NCAA Final Four! What excites you the most in the field of web design right now? I have been thinking a lot about how to channel my inner Marie Kondo. Less is really more these days and I want to take the spirit of her beliefs and infuse it into my client processes, user journeys and overall product with it. After all, we all hope that what we are doing will spark joy.

february 2020 33

VOICES Big question INDUSTRY INSIGHT

HOW HAVE YOU USED WEB DESIGN SKILLS FOR GOOD? Our panel of seven delve into the topic of philanthropy and reveal how they’ve harnessed their abilities for the benefit of society A ASHNI SHAH

CEO, Elixir Labs aashni.me

S UE JENK INS

Creative director at Luckychair

www.luckychair.com

One of the things I enjoy most about technology is how easy it is to combine with any other passion such as philanthropy. I’ve been using my web design skills at Elixir Labs – a non-profit – with a vision to enable social, environmental and economic good by partnering and empowering other non-profits and building technical solutions with them. We’re working on projects to combat slavery, make legal aid easier to access and empower women to support themselves and their communities.

ROB FENECH

Freelance web designer and developer

www.robfenech.co.uk

Before I became a freelancer, I worked for a big charity, Anthony Nolan. I saw that although they had a great IT team and marketing team, the digital side was still lacking. When I went freelance, I reached out to some small charities to see if they had the same issue and, of course, they did. So I started FreelanceFriday. The last Friday of every month I work with a small charity to help with their website or digital marketing, all pro bono. It gives a great feeling of satisfaction. 34

february 2020

Each year at my university, I have my undergraduate design students collectively design and build a website for a local non-profit organisation. In academia, we call this ‘service learning’ whereby students grow their skills working on a real-world UX design / development project under the teacher’s art direction, for the benefit of a company that also serves the community. One of our recent projects was creating a website for Jack Of Hearts PA, Inc, which supports families of paediatric cardiac patients. Each student designs and builds a sample homepage in WordPress, the client picks one and the class team-builds the site. Everyone grows!

NICK L E WIS

FRÉDÉRIC M A RCH A ND

fiasco.design

locomotive.ca

Creative technologist, Fiasco Design

President & co-founder, Locomotive

As part of a team at Fiasco, I recently helped the Changing Markets Foundation produce a digital experience to expose truths behind the farmed fishing industry (fishingthefeed.com). With the reach this digital platform allowed, Changing Markets Foundation gained over 80,000 petition signatures in just over a week. It’s important design is used for good to promote sustainable living practices. We have a duty as creatives to use our skills in this way, to help make a better world for everyone. COL IN MCDERMO T T

SEO director, Search Candy searchcandy.uk

It’s a fact of life that websites get hacked. But there are many thousands of non-techies out there who are completely unaware their site has been compromised – perhaps even serving malware or peddling links to pharmaceuticals or phishing sites. What I do is use search terms and operators to bring up hacked British websites and contact them to let them know what has happened. NHS sites, charities, schools and similar are my main focus. I never ask for cash and often have to deal with people who are confused and sometimes a bit angry. But it’s worth it to help people.

At Locomotive, first and foremost, we only take on projects and clients that really matter to us. We listen to our heart when it comes to finding the right fit and the right project. We’ve used design for good recently on the Editorial New variable font set, which is free for the community to try; it’s a digital showcase (and pro-bono project) in collaboration with Pangram Pangram Foundry (editorialnew.com). We’ve also worked pro bono with Design Canada, building the online destination for a documentary film celebrating the history of graphic design in Canada, a project we’re really proud of (designcanada.com).

SUSH K EL LY

Freelance designer/ developer

www.sushkelly.co.uk

When I heard my local community group had secured funding to do something ‘creative’ for the town, I quickly got on board. We took over an empty shop on the high street and developed a community art space for exhibitions, meetups and performances. I was entrusted with the full brand of the space, logos, colours, shop front, website and socialmedia branding. It was timeconsuming but so satisfying to see what a few locals can do when they club together.

RESOURCES DESIGNING FOR A CAUSE? A ONE-STOP GUIDE TO THE BEST VOLUNTEERING SITES

https://netm.ag/2OmliHs Finding organisations that can benefit from your design skills can be tricky. In this post, Graeme Fulton picks out the best sites to find volunteering and pro-bono opportunities.

THE DESIGNER’S GUIDE TO WORKING FOR NON-PROFITS

https://netm.ag/358sPQE Want to use your web design skills to make the world better? In this post by Gary Evans for Creative Bloq, industry experts offer tips for working with non-profits, from basic budgeting to ground rules.

$'9,&( 21 $&&(37,1* $ Ơ3266,%/< 352 %212ơ :(% '(6,*1 -2% )25 $ NON-PROFIT

https://netm.ag/32Z2Eug This query on Reddit came from a junior designer who was asked to do voluntary work and wasn’t sure how to respond. The answers offer practical and useful advice.

february 2020 35

NEVER MISS AN ISSUE!

#326 DEC 2019

Discover graphic JS libraries and create polished data viz and animations, learn the best Google tools and add top WebGL physics

SAVE UP TO #327 JAN 2020

Get to grips with the evolving accessibility landscape, understand aria-labels and unit test your React apps

% 77

ON YOUR ANNUAL BUNDLE SEE PAGE 16

GOT AN APPLE DEVICE? Download netâ&#x20AC;&#x2122;s digital edition for your iPad, iPhone or iPod touch

NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)

#321 AUG 2019

Discover the 10 best CSS frameworks, pick up secret skills for improving UX and create a neural net to predict user answers

CATCH UP ON ANY ISSUES YOUâ&#x20AC;&#x2122;VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS NETM.AG/NET-BACKISSUES

#325 NOV 2019

#324 OCT 2019

#323 SEP 2019

#322 SUMMER 2019

#320 JUL 2019

#319 JUN 2019

#318 MAY 2019

#317 APR 2019

Unify your UX across multiple platforms, discover whether PWAs or native apps are best and add physics to three.js sites

Create dynamic data-driven animations using p5.js, pick up new skills producing CSS art and build static sites using Jekyll

Become a hybrid by learning both design and development skills, grow your sideline and land your dream job

Take advantage of 19 innovative APIs, use colour theory to improve your user journey and strip distractions from your designs

Bring 3D to your sites using three.js, offer screen sharing with WebRTC and JavaScript and make empathy part of your UX design

Become more flexible by using variable fonts, combine AMP and PWAs to create friction-free sites and improve the UI of your forms

Get expert advice on increasing your income, spend more time on profitable tasks and build custom Gutenberg themes

Future-proof your mobile design, become a crack code splitter and utilise Unity to create sumptuous 3D web experiments

PREFER TO READ ON ANDROID, PC OR MAC? net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more

NETM.AG/NET-GOOGLEPLAY

NETM.AG/NET-ZINIO

GALLERY Inspirational sites MARK BILLEN

Billen is a freelance writer who has been writing about web design and technology for over 15 years.

Sensational design and superb development

w: markbillen.com t: @Mark_Billen

WORDPRESS, JQUERY, YOUTUBE

FISHING THE FEED https://www.fishingthefeed.com

Given the strong calls for ecological and environmental action in recent times, it seems the web is playing its part. A myriad of campaign sites are popping up, using engaging design techniques to convey complex issues. Fishing The Feed is a perfect case in point, produced by Bristol-based agency Fiasco Design for its client the Changing Markets Foundation. Its purpose is to highlight the unpalatable truth about farmed fishing practices and specifically how wild fish are processed into feed for reared seafood stocks. Single page in structure and built on WordPress, visitors are taken on a narrative journey across illustrated sections featuring MP4 video backgrounds. These provide looping animations or autoplay ‘poster’ scenes of boats, shoals of fish, alternative feeds and more as vertical scrolling

february 2020

delves further. Rather nicely this metaphor is emphasised with a depth gauge that can also be clicked to jump between each screen and the final ‘Info’ footer. Each section is not only succinctly described but also accompanied by further videos or embedded YouTube clips that underline the realities being confronted.

Inspirational sites

PIXI.JS, VUE, GSAP

DAPHNÉ LAUNAY – PORTFOLIO https://daphnelaunay.fr

Daphné Launay is a freelance art director based in Paris, France who also works across photography and video production. A graduate of the prestigious Gobelins, L’École de L’image school of visual communication and arts, she presents this slick new portfolio to showcase her formidable talent. Unsurprisingly, the site’s design is focused around images and a selection of viewport-wide photographs describes six core sections: Beauty, Work, Portrait, Fashion, Project and Outdoor. All hint to Launay’s style, with a shuffling carousel of examples to open. Circular ‘Enter’ hotspots trigger zooms on rollover; clicking on them navigates to the top of each subsection and the works within. When it comes down to actually displaying shots, there are some lovely transition effects to swipe between frames. The custom mouse pointer provides useful instruction on areas of interaction and it’s nice to see credits for Launay’s collaborators and the featured models. Colour is minimal and in a neutral #E0D8CE hue to help the flesh tones pop, while the magazinelike Alasar font styles the distinctive vertical headings. On other devices the portfolio maintains that look, optimising photo ratios and interactivity for smaller touchscreens rather well.

february 2020 39

GALLERY Inspirational sites

WEBFLOW, JQUERY, OPENRESTY

GLYPHY

https://www.glyphy.io Those of you familiar with Microsoft’s Windows operating system will hopefully remember fondly a utility called Character Map. It was essentially a single dialog box for users to quickly view all the characters within an installed font family. From here you could reference the keyboard shortcut needed to type them or copy each, ready for pasting. Glyphy is fundamentally an online equivalent, providing an oversized yellow and black character map for copying glyphs. It’s a gridded collection of nested <div> elements containing each ASCII character or symbol and inverting to add dynamism on rollover. Click a desired glyph – any glyph – and it is automatically copied to the clipboard for use in your projects. Very handy! Built by Overlay, based out of Brisbane, Australia, Glyphy is a noncommercial, in-house project doubling as a free resource. The footer text merely invites Glyphy fans to perhaps donate some hosting costs via buymeacoffee.com, while also asking for character requests to be added in due course. Rather brilliantly too, the app works seamlessly across desktop and mobile devices but obviously with one caveat. Some glyphs might paste and appear differently depending on the selected system font.

february 2020

Inspirational sites LOCOMOTIVE SCROLL, MODULARJS, POLYFILL.IO

FONTGRAPHY – DENA https://fontgraphy.dena.com/

Fontgraphy is an interesting technological campaign distributed

and use the data to match a font and generate a ‘style’ or image. These

by DeNA of Japan, partnering with font giant Monotype. This site isn’t mobile-

suggestions are then multiplied to signify ‘design x AI’ and arrive at a final

first but mobile only, delivering a

graphical output unique to that person.

sophisticated cross-modal app experience that marries design with

Apparently, this was accomplished by collecting voice data from 800

artificial intelligence. So if you visit the link in desktop browsers, a splash page

DeNA employees, tagging the various characteristics in order to let the AI

simply provides a 2D QR code to scan on your smartphone of choice.

system learn the various traits. So it’s pretty innovative stuff and a

From here fontgraphy requests microphone access and prompts for

vivid example of how this kind of tech is finding a place online, especially tied

a voice recording of “Please make

to the context of ecommerce. In this

my DeNA” after the countdown. The purpose is to showcase DeNA’s ability

case it’s for fonts but it isn’t a stretch to see how all sorts of products could be

to analyse human voice characteristics

marketed in this more personal way.

SI T E OF T HE MON T H

february 2020 41

GALLERY Inspirational sites GLSL, THREE.JS, WEB AUDIO API

RICHARD MATTKA – PORTFOLIO https://richardmattka.com

As an award-winning creative director, designer and developer, Richard Mattka has a decade of experience to showcase. His impressive skills, particularly within 3D graphical work, are presented tastefully in this new portfolio. Featuring music by Michael Vignola, alongside reel music credited to Arthur Basov, the site immediately sets a sultry, sci-fi tone with a planet-like WebGL orb. From this initial landing screen, we have links to six core sections spanning Work, Prototypes, Art, Press, Info and Reel. Click any and the orb expands to reveal two column rollover menus packed with jaw-dropping visuals for high-profile commercial projects and personal experiments. “The goal with my new portfolio was to create an experience that reflects my passions for digital art and effects, both in film and interactive,” Mattka explains. “Technically, my approach is not conventional, custom-creating much of the site, combining WebGL, three.js and GLSL together in some new ways to create something I hope is fresh and exciting. I made the site transitions between pages seamless to allow the music and visuals to be uninterrupted, as visitors explore my projects, prototypes, articles and artwork.”

february 2020

Inspirational sites

PHP, HTML5, SVG

MISATO TOWN

http://www.town.shimane-misato.lg.jp/misatoto The second Japanese pick this month and one that is a little mysterious. Truth be told, it’s very mysterious but so beautifully executed it proves impossible to ignore. Misato Town, it seems, is a richly illustrated virtual tour created as part of a rebranding process for Misato City in Saitama Prefecture, Japan. Built by renowned locals Shiftbrain, the agency has recently put its name to several partner programmes for promoting the region. Unless you speak and read Japanese however, the rest is difficult to interpret but not impossible thanks to the gorgeously charming SVG graphics. The illustration work is truly wonderful and highly stylised as you might expect, brimming with colour that floods the viewport. In many ways, it’s reminiscent of a Dream Car Collection project Shiftbrain produced for Toyota in 2015, taking inspiration perhaps from the JRPG video games the country is known for. This lavish visual work and art direction is then paired with some of the most impressive parallax scrolling you’ll find, powering that explorative aspect of the experience. Zooming and flying your perspective over Misato landmarks and through cute town houses or markets is brilliantly smooth, with the bonus of bidirectional control.

february 2020 43

Sublime design & creative advice

Dutch data-viz guru, Nadieh Bremer, discusses how she bring statistics to beautiful life, in a way that both entertains and informs

(CC BY 2.0 https://netm.ag/357TNs9)

PROFILE

Photo by Andreas Dantz via Flickr

THIS MONTH FEATURING...

DESIGN EXHIBIT Each issue we reveal your latest design work, exhibiting your fantastic concept sites, portfolio projects and prototypes. Show off your design skills and share work that hasn’t yet been developed into a full site or app If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com

HOW WE BUILT

Watson/DG reveals how it crafted a stunning magazine-style site to promote Tarantino’s Once Upon a Time in Hollywood

SUBSCRIBE TO NET AND TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

TURN TO PAGE 16

to find out more about the savings on offer for subscribers

Design exhibit

WARREN CHALLENGER

CURATED INTERIOR SHOP w: warch.studio

Most people’s homes start with blank interiors and it’s the furniture that fills the room with colour and warmth. The core idea behind the visual style of this website is the same; a blank canvas to let the products shine. Hopefully, this aesthetic will help customers imagine our products in their homes, inspire them and create room envy. Where possible, we let the customers’ interactions with the site dictate the visuals. In the main image, we’re displaying a yellow chair and the background changes to fit. If the customer chooses to view the green chair, the background colour will also change. The primary typeface is Larsseit, which lets the content breathe with plenty of space around each letter, is easy to read, feels safe and encourages the user to trust the website. We also have an Instagram feed driven by hashtags. Social integration is essential to conversion; there is no better reassurance than from other customers.

PROFILE I’m a freelance and contract digital designer who enjoys solving problems and creating enjoyable experiences. t: @warchstudio

CLOSE UP

MY MONTH What have you been working on/doing this month? I’ve been working on a variety of different projects. I’m currently coming to the end of designing a prescription website. I’m also halfway through a sleep aid product and about to start on a branding project for a paint company that is aiming to disrupt the current market with a manufacturer direct to customer model.

Above Immediate calls to action to get the customer looking and become inspired by our products

Above We use space between elements frequently in the designs to instil calm and allow the user to digest the content at a leisurely pace

Above Big visual cues to show the product library. The page would horizontally scroll through the categories

february 2020 45

SHOWCASE

Design exhibit

Right This is the

main page of the site. It contains buttons on all pages, the logo and social networks of the company. When you hover over a photo, it comes to the fore and turns colour

PROFILE I am an art director and a designer creating visuals for business. I am currently working in the creative areas of Web, print and identity. Insta: @baril_direction

MY MONTH What have you been working on/doing this month? This month, guys from a company that is engaged in 3D visualization for architectural structures for various purposes addressed me. Starting from private houses and interiors, ending with apartment buildings and public buildings, they asked me to design a site layout and a mobile version for them. They also need to update the logo so that it works organically with the new site design, but at the same time does not lose its recognition.

ALEXANDER BARIL

ARCHITECTURAL BUREAU

CLOSE UP

w: https://netm.ag/2LxXaB1

To start creating the concept of the site for the Architectural Bureau project, I decided to use current trends in design. Before getting started I set a task for myself to use typography, structure and colour. With this in mind I decided to pursue two goals: visual expressiveness and functionality. The site was supposed to be as convenient and understandable for the user as possible. In order to create a pleasant atmosphere of restrained intelligence, I chose a monochrome range, which gave an architectural elegance to the platform. By applying dynamic typographic composition on the main page, I achieved an image of architectural monumentality. However, I didnâ&#x20AC;&#x2122;t want to stay within the limits of monochrome, as this would be too boring. To add a little more depth to the design, when you hover over the photographs of projects, they switch to a coloured option.

february 2020

Above These are two pages of the mobile version; the menu and the main page of the site

Above Page showing project previews â&#x20AC;&#x201C; desktop and

mobile version. When you hover, the pics become colour

Design exhibit

KINNERET NETANEL

AD-TECH COMPANY

w: https://netm.ag/2ru6rTQ This design work actually holds a funny story, that tells us a lot about the relationship between designers and their non-designer bosses. I made this page while I was working on a redesign project for Adcore’s website, as I was the head of design in the company at the time. I received the UX instruction from my boss and started the design process, totally excited to create a fresh design for our old boring website. Myself and another colleague thought this design was beautiful but the boss didn’t like it and I had to start again. Despite that, I decided to save this design anyway to include in my portfolio. When I did include it, months later, it turned out that this thrown-away design was actually very popular online.

PROFILE I am a UX/UI designer based in Tel Aviv, Israel, specialising in digital designs for tech companies, but I really love to design everything from homes to clothing.

CLOSE UP

MY MONTH What have you been working on/doing this month? Last month was quite exciting for me since I just recently became a freelancer and I’m still adapting to this fun and intriguing lifestyle. The past month I designed two printed books and started UX and design for some new websites. I also started using InVision for prototyping and it’s a complete pleasure, you should really check it out.

Above The CTA (call to action) section – product shot, short text and a button to seal the deal

Above The design has proven very popular online, thanks to its blend of imagery and subtle colour palette

Above Netanel went for a clear and clean layout for the site’s redesign, drawing attention to key benefits and CTAs in the UI

february 2020 47

SHOWCASE

SurĽoh

PROFILE

NADIEH BREMER visualcinnamon.com

The Dutch data-viz guru discusses how she bring statistics beautifully to life, in a way that both entertains and informs Hailing from Abcoude, a small town

simply a joy to behold. Combining a keen understanding of statistics and the stories they can tell, her work pushes both the aesthetic and the communicative possibilities of this everevolving medium to reach new and exciting places. Illustrating everything from the differences between dogs and cats (for Google) to the absurd number of digital trackers that you gather when you browse the web (for the New York Times), her projects have won numerous awards and stand as an inspiration for anyone wishing to pursue data visualisation. In this interview, Bremer explains how she made the journey from astronomy to data viz, her go-to tools and how she sees the discipline developing in the future. Could you briefly introduce yourself to anyone who doesn’t know you? I focus on the ‘creative’ side of data visualisation. I custom-make each visual to fit the data, goal and topic and love to spend time experimenting with the design side of things to make the eventual visualisation look both visually pleasing while still being effective. I like to take on the bigger datasets to visualise – those that have a lot of diversity, so I can show context and other stories besides the main insight.

february 2020

Photo by Andreas Dantz via Flickr (CC BY 2.0 https://netm.ag/357TNs9)

near Amsterdam, Nadieh Bremer’s data-visualisation projects are quite

SurÄ˝oh

INFO Location: Abcoude, the Netherlands

Designing since: 2015 Areas of expertise: Data

visualisation, d3.js, data analysis, astronomy

Clients: Google, UNESCO,

Scientific American, The New York Times, Guardian US

Awards: Information is

Beautiful Awards (awards in 2016 - 2018), Malofiej (2017 & 2018), Best Data Visualisation at the 2019 World Digital Media Awards

february 2019 49

SHOWCASE

SurĽoh

I’ve been freelancing under the name of Visual Cinnamon for almost three years. I work mostly on pieces that are used for marketing – either internally or externally – used for articles (in print or online), press releases or maybe even some data art for in the office. In my free time I love to travel and see the world together with my boyfriend – whom I’ve been with since I was 17 – and read fantasy books, especially those by Brandon Sanderson. I sometimes have a manga phase again too, playing handheld Zelda games and watching blockbuster movies all cuddled up on our poofy couch. How was it that you originally got into data visualisation? My story starts with astronomy. I’ve always loved the topic and studied it fulltime for five years at university. But I also knew the next academic step wouldn’t make me happy. So after I graduated in 2011, I decided to join the new analytics department of Deloitte Consulting. The word ‘data scientist’ hadn’t even reached the Netherlands then, so I was a ‘consultant advanced analytics’. I was doing analyses on people and companies instead of stars. Different but still fun and a lot more diverse actually. Yet after about three years, I started to lose my passion for data analysis. I didn’t enjoy spending that extra hour making my predictive model just a tiny bit better. During a data-science conference in 2014, I saw the speaker Mike Freeman calling himself a ‘data-visualisation specialist’ on the first slide. And then it hit me like lightning: ‘You can do data viz as a separate thing?!’ I immediately knew that data viz was where my passion lay. I did enjoy spending extra hours after work trying to make that chart look more professional for the presentation the next day. I was always trying to find ways to incorporate d3.js-based interactive charts into the projects. In retrospect, it’s strange I didn’t realise it sooner. So what was it about data viz that struck such a chord? It combined the math/data/exact side that I enjoyed with the creative side that

february 2020

Google News Lab is the biggest project Bremer has worked on since starting to freelance. The article goes into the most popular questions that people have asked on Google to better understand their cats and dogs

I’d also always had. So from that conference onwards, I started to dedicate all of my spare time to learning more about data viz: reading books to learn about the best practices as well as doing personal projects to get better with d3.js. I also told my boss that I wanted to change from being a data scientist to a data-viz designer. Thankfully he was very understanding and helped wherever he could, in terms of including me on projects. And so, slowly, I started to become a data-visualisation specialist. You went freelance in 2017. How has your career developed since then? Going into freelancing is one of the best professional steps that I’ve ever taken; I’ve not regretted it for a single day. I’ve had the opportunity to work with clients I thought I could only dream about, such as Google, UNESCO and the New York Times. I’m also enjoying the wide breadth of clients and datasets I now get to work with, from small startups to big names and from magazines or nonprofits to corporates. I generally try to have three to four clients at the same time, so that I can switch between them throughout the week. I might be working on some

science-related research, cultural heritage and what people search online for about cats and dogs, all in the same week. I’m still keeping my fingers crossed that maybe the WWF, Disney or NASA/ESA will come knocking on my door at some point. What are your go-to tools? I use R to do my data preparation and analysis at the start of a project. This helps me build a mental model of what the data is about, where the interesting aspects to visualise are and how to restructure the data in a way that I need for the visual. I design using either plain pen and paper or with the Tayasui Sketches app on my iPad Pro and Apple Pen, so the designs really stay rough. From there, I then go to Visual Studio Code to program my data visualisation with d3.js and JavaScript. Depending on the amount of data to show or the complexity of interactions, I’ll create it with SVG for simpler things or HTML5 Canvas for larger visuals. On some rare occasions I might also create the visual with three.js if the data is really big. Finally, if the finished piece is going to be a static image, I’ll export the visual

SurĽoh

SPOTLIGHT

What’s on your desktop?

Nothing. I always keep my desktop free and move stuff that ends up there almost immediately to other folders. Olympic Feathers is a personal project Bremer created for the Data Sketches collaboration she did with Shirley Wu. It visualises all gold medal winners of the summer Olympics since the first games in 1896

I’ve made in JavaScript to Adobe Illustrator to add some final touches that are easier to do there than through code, such as a legend or annotations. That said, I’ve recently started to work with and enjoy Affinity Designer and might completely migrate to that for my vector work in future. What’s been your proudest career moment so far? Winning Best Individual at the Information is Beautiful Awards in 2017. Getting that kind of recognition when there were so many amazing people to choose from just blew me away. I didn’t see it coming and went on stage at the ceremony totally unprepared, overwhelmed and exceptionally honoured. It really boosted my selfconfidence, especially since starting out as a freelancer that year had been such a scary step. What are the biggest mistakes people tend to make when they are creating data visualisations? Not taking the time to think about the visual form they’ll put their data into. I see a lot of people who think that any chart form will work just as well – bar chart, line chart – as long as the data is

made visual. They just go straight from the data in a sheet to the ‘available chart list’. However, getting the basic chart form right is actually the most important factor in determining whether the visual will be effective. So take some time to think about your goal. What does this visual need to teach people and what is the best way to convey this? Even sketching out some very rough possibilities and trying different chart forms can make all the difference. What do you love most about your work and which parts are the least fun? What I love most is the designing of the visual and creating the static part through code. To build up the idea with the actual data, start to experiment with design ideas and see it slowly come to life. The least fun part – aside from reading and creating contracts – is making the visual work on both mobile and desktop: there’s such a giant difference in space available to work with! It puts a no-fun constraint on my creativity. I’m also quite bummed out when I need to compromise on a design idea I have because the browser can’t keep up

What’s on your desk?

My MacBook Pro and iPad, a 34” monitor, my cat on her pillow sleeping away, a big carafe with water and a holder with pens and such.

What’s on the walls?

My favourite two art pieces now are a generative design work by Matt DesLauriers and a hand lettering piece by Gemma O’Brien.

What will you do for lunch?

Take a thick slice of our home-baked bread with some butter and large chocolate sprinkles (typical Dutch) on the top.

What hours do you work?

I’m a morning person and try to stick to 8am-6pm. I hate it when I need to do calls after 6pm, which happens due to the Bay Area being nine hours behind the Netherlands.

What else do you do in the office? Pet my cat.

How often do you hang out with other designers?

I try and stay in contact through the digital channels (mostly Twitter and Slack) but I’m happy I also get to speak at conferences a dozen times per year so I can meet other people in my field again in real life.

Describe your working culture in three words Addicted, experimentation and order.

february 2020 51

SHOWCASE

SurĽoh

TIMELINE

Key dates for Nadieh Bremer SEPTEMBER 2005 Starts studying astronomy at the University of Leiden, Netherlands.

OCTOBER 2011 Graduates and begins work as a data scientist for Deloitte Consulting.

FEBRUARY 2013 Learns about the existence of d3.js and starts to learn JS, HTML and CSS to be able to work with it.

DECEMBER 2014 Realises that she loves data viz more than data science and so spends every free moment learning more about data visualisation.

Created for the Graphic Science page of Scientific American, this visual reveals the different seasonal patterns that appear when babies are born in the US

DECEMBER 2015 Begins work as a data-visualisation designer at Adyen.

APRIL 2016 Gives her first conference talk at an international conference.

JUNE 2016 Embarks on a year-long 12-projectbased data-viz collaboration with Shirley Wu called Data Sketches.

JANUARY 2017 Starts freelancing under the name Visual Cinnamon.

NOVEMBER 2017 Wins Best Individual at the 2017 Information is Beautiful Awards.

APRIL 2019 Finishes biggest freelance project to date, for Google News Lab, visualising the things people search for around their pets.

in terms of performance. And don’t get me started on browser bugs… Do you ever regret not becoming a fulltime astronomer? No, I only regret that I’m slowly losing my astronomy knowledge over time. But I truly knew staying in academics wasn’t for me because I really didn’t enjoy writing the papers, plus the fact I had to specialise and probably only a handful of people would then be able to understand what I was working on. I do still get excited though when I hear about astronomical discoveries in the news. And I can still talk for hours about why space is such an utterly amazing place. It’s probably why I still end up creating visualisations about astronomy topics every once in a while. How will data visualisation change over the next 10 years? I truly have no idea but it’s certainly getting bigger. Companies seem to understand more and more that data visualisation is a good investment and that if you want it done well, you need to

february 2020

hire an expert. The number of people wanting to work in data viz is also growing exceptionally fast, perhaps even faster than demand. So what would you like to see happen? Maybe in 10 years someone will have figured out how to do good data viz through AR/VR. I also hope that the general audience will have gained better graphical literacy through regular exposure to data visualisation in the news, at work and at school. What would you say most people do not know about you? That since June 2019 I’ve become completely addicted to roller skating. I’m now going to skate dance lessons and have joined a ramp skating group in Amsterdam called Chicks in Bowls. And I skate around my quiet village whenever the weather allows, trying new moves. Also, I’m 1.87m (6ft 1in) in height. So when I finally meet people in real life at conferences, I’m often told that ‘I look smaller in my Twitter profile photo’, which always makes me laugh.

The number one destination for web design news, views and how-tos Ecr Apc_rgtc @jmo bgpcar rm wmsp gl`mv ugrf msp uccijw uc` bcqgel lcuqjcrrcp

Graphic design

Art

Web design

www.creativebloq.com

Digital art

SHOWCASE

How we built

HOW WE BUILT

ONCE UPON A TIME IN HOLLYWOOD Watson/DG crafted a stunning magazine-style site to promote Tarantino’s latest flick. Hleb Marholin and Matt Grippi tell Tom May how they did it 1

CLOSE UP BRIEF Once Upon a Time in Hollywood is Quentin Tarantino’s latest film and is seen as a love letter to 1969 Los Angeles. As part of its marketing strategy, Sony Pictures needed an immersive, in-world way to promote it that felt authentic, not only to the director’s signature style but also to the nostalgic qualities of the decade the film is set in.

february 2020

(1) The homepage consists of a full-screen magazine cover wrapped in plastic, as it would appear on a newsstand. (2) Running your cursor over the page rustles the animated WebGL plastic cover. (3) A link to buy tickets to see the movie at a local cinema is included. (4) Rather than going for a traditional digital navigation, the team opted for an editorial-style table of contents, maintaining the illusion that this was a real 1969 magazine. This is accessed by clicking

the down arrow that appears inside the cursor. (5) The homepage also links to the movie’s Instagram, Facebook and Twitter accounts. Now all the social platforms have in-app browsers, Watson/DG created assets that naturally progress users from the social piece to the site experience, whether through a swipe-up interaction or a link out. Here the social assets were designed to be miniature versions of the site content, which intrigues users to follow through and keep reading.

How we built HLEB MARHOLIN

MAT T GRIPPI TIMELINE

Key dates in the Once Upon a Time in Hollywood project Marholin is a creative director at Watson/DG and was the lead designer on the Once Upon a Time site. w: watson.la

Grippi is a senior creative strategist at Watson DG and was the copywriter and editor for the Once Upon a Time project. w: watson.la

JANUARY 2019 Watson/DG receives the brief and begins ideating on how it can create a digital experience that still feels authentic to the 1969 setting.

FEBRUARY 2019 Thought the days of creativity in web design were dead? Then check out the incredible site Watson Design Group built to promote Tarantino’s

same time. No wonder that it quickly amassed a flurry of awards, from the likes of Awwwards and FWA. Here Watson/DG’s Hleb Marholin

latest movie (onceuponatimemag.com) and you’ll soon realise your mistake.

and Matt Grippi explain how they went about translating Tarantino’s

This wonderfully evocative website serves as an expansion of the nostalgia-drenched movie’s world, making you feel as if you’re flipping through an American print magazine straight out of 1969 as you explore its exclusive articles and content. Making inventive use of animated transitions and fluid navigation, the team pulled off an impressive trick, making the site feel both retro and modern at the

intoxicating celluloid vision into a website that both feels authentic and functions perfectly. So how did you come up with the idea of a 1969-style scrolling magazine for the site? MG: Once we’d been briefed on the film, we knew that a traditional marketing campaign wasn’t going to feel authentic. Tarantino had recreated the world of

Sends through its initial ideas to Sony, including rough comps and examples of how the magazine site could look.

MARCH 2019 The client signs off on the idea, giving Watson/DG the go-ahead to start writing and designing articles to go into the finalised site.

APRIL 2019 Initial script read and kick-off meetings.

MAY 2019 Watson/DG completes the initial draft of the articles, combining plot elements and interviews with world-building pieces and fake advertisements.

JUNE 2019 Hleb Marholin, the CD on the project, begins designing each individual page while developers and animators start working on how the mobile and web versions of the site will function.

JULY 2019 A physical print run of the magazine is greenlit, which requires the team to produce a quick redesign to meet the deadline of the film’s premiere.

JULY 2019 The print version of the magazine is approved by Tarantino’s team and released into select theatres across the US, as well as handed out to all attendees of the Hollywood premiere. Print magazines continue to be produced and handed out at screenings for the first few weekends of release.

JULY 2019

Above To create the physical incarnation of the magazine, Watson/DG split the web build into individual

The site version of the magazine goes live and is promoted through assets on the film’s social media accounts.

pages and tested out multiple paper and size combinations

february 2020 55

SHOWCASE

How we built

EVOLUTION (1) During the brainstorm processing, we went through a lot of old entertainment magazines from the era and tried to find a style that felt nostalgic and authentic without feeling too dusty or old-fashioned. Even though accuracy was a big priority, we didn’t want people to feel like this was an old cowboy movie; it’s still a bigbudget, exciting drama. (2) For the ‘Letter From the Editor’ page and the ‘$50 for a Haircut’ article, we used custom illustrations to make it feel authentic to the era. (3) The advertisements for in-world products were based on the style of authentic ads from 1969 and included tonguein-cheek original copy full of Easter eggs for hardcore Quentin Tarantino fans. (4) Each article featured original in-world copy and interviews with the characters, as well as photography and imagery that was exclusive to our site prior to the release of the film. (5) We also created a physical print run of the magazine to be handed out at the star-studded premiere and at 35mm screenings of the film across the country.

february 2020

How we built 1969 to an almost perfect degree and inserting any kind of modern aesthetics just felt wrong. We wanted the campaign to feel like a time machine that dropped audiences right back into the year that changed pop culture forever. In the film, the characters Rick Dalton and Cliff Booth interact with all sorts of real-life celebrities and historical figures from the era. We began brainstorming on what we could create to make these characters feel like they have always been a part of pop culture. Since they’re obsessed with staying relevant and keeping their careers afloat, we felt that a tabloid celebrity magazine would be the best way to expand on their stories and introduce the historical backdrop of the film without spoiling the plot for fans. How did you go about conveying the feel of print in a digital format? MG: Magazines have changed so much in the past 50 years, in the end all it took to make it feel like a classic magazine was to strip it down and focus on simplicity. We wanted it to feel like people were flipping through the magazine from cover to cover, which is why we made sure the entire site was accessible through scrolling. The oversized nature of the pages required users to scroll to see an entire article or image at once, so the scrolling felt natural to the user. It also made it feel more true-to-size of a real magazine, especially on desktop. The table of contents functioned as a navigation tool but the best way to explore the site was just by scrolling from page to page, seeing what caught your eye. When you read a magazine, you usually flip through pages until something is so interesting you stop to read it. We also made sure that the colour coding on each individual article made it feel like you were accessing different ‘pages’ even though the whole site was one long, flowing column. How much influence did Sony exert? MG: Overall, Sony gave us a huge amount of freedom to play around in this world from a visual and written standpoint. Tarantino’s script was so rich with details

Above In-world copy was generated for the magazine, in addition to photography and imagery that was exclusive to the site before the film’s release

february 2020 57

SHOWCASE

How we built

and backstory, it made it easy to get into the minds of these characters and expand on their relationship and world. How extensive or limited were the assets from the movie you were allowed to use? MG: We were given an exciting amount of photos to fill out the magazine with, which really took the idea to the next level. Beyond just being an in-world magazine, this could now also function as a first-look photo gallery for fans. Additionally, the film includes such a wide variety of sets, costumes and locations, it allowed us to vastly differentiate the kinds of articles we could write. It’s really amazing how many different stories can be made out of this one film. What technologies did you use to build the site and what were the biggest technical challenges you encountered implementing them? HM: The front-end is a single-page app built with Vue CLI, using HTML5, SCSS, webpack and JavaScript ES6. Animations were created with the GreenSock animation platform. There is no back-end technology since it’s purely a promotional site with limited need for updates; instead, we used a pre-render method that loads all app routes and saves the results to static HTML files. We used viewport units to create fluid page layouts. Using viewport units ensures that the design always appears as intended, which was definitely helpful in retaining the magazine design layout on different devices. To complete the experience, we added some WebGL effects using custom shaders rendered with three.js. Moving the cursor on the cover affects the light direction, causing a realistic, plastic reflection of light. Throughout the site, we added subtle metaball effects and liquid page transitions. You also created a physical print run of the site: how challenging was that? MG: The idea of actually producing a print magazine was something that was floating around since we started

february 2020

Above The beauty of the site is how it convinces you that you’re flicking through a magazine from the era of the film, from interviews with the characters to the shiny cover effect

the concept. We had to redesign the site for print, splitting the web build into individual pages and testing out multiple paper and size combinations before we found something we liked. It was really exciting to see fans and celebrities holding the magazine in press photos and social posts, proving that even a physical product can make it onto social media if you give fans a good reason to share it. As you’re based in Los Angeles, how did it feel personally, working on the website of a film that’s essentially Tarantino’s love letter to the city? MG: We were lucky to have a lot of LA locals and Tarantino fans in the office who could really dig into all of the details and locations from the film. One of our advertisements in the magazine guided

fans through a Sunset Strip takeover that Sony set up with billboards surrounding major historic landmarks from the film. Watching the movie became like a game of ‘I spy’ , with famous landmarks, restaurants and theatres around town. It was really exciting. What did you learn from this project that you’re likely to use on your future site builds? MG: We’re constantly working towards blending the digital and social experience together in innovative and exciting ways. This site allowed us to take a more editorial approach with our film marketing, giving us insight into how a text-based experience with large amounts of copy can still feel dynamic and engaging on a digital device.

GET NET FROM £2.10 PER ISSUE!

SAVE UP TO

Wklv#rļhu#lv#RQO\#dydlodeoh#yld#rxu#rqolqh#vkrs#

www.myfavouritemagazines.co.uk/digital Available on

iOS or

Android february 2020 59

FEATURES 50 incredible dev tools 2020

february 2020

50 incredible dev tools 2020

JAVASCRIPT UTILITIES

Louis Lazaris has scoured the web for the 50 hottest scripts, plugins and other awesome tools to assist and delight front-end web developers

fslightbox.js

https://fslightbox.com/

lightbox plugin that can display images, HTML5

video and YouTube embeds in an attractive and usable overlay. Offers React and Vue versions and the ability to upgrade from the free autoComplete.js is a customisable auto-suggest plugin for form fields built using vanilla JavaScript and tailored to offer speedy functionality

f you regularly write front-end code for web applications, then

you probably have your go-to set of tools: a boilerplate that serves as a skeleton. A UI library that helps you make things dynamic and interactive. A build process that might include one or more tools to scaffold out the files and directories you’ll need. You might even have a set of CSS and JavaScript utilities that you go back to time and again. Or maybe your tooling is a couple of blank files, your code editor and nothing more (which is absolutely fine, especially if you’re new to the scene). Whatever your toolset looks like, it’s always beneficial to take a peek at what’s out there and what’s new in front-end tooling. To that end, let’s roll out 50 of the most interesting and practical tools for you to consider for 2020. Most of these are pretty new, having been released at some point over the past year, while a few have been around for a little longer and have only started to gain traction during the last 12 months. Whatever the case, you’ll most definitely find something in this list you can use in a project soon!

A vanilla JavaScript

autoComplete.js

https://tarekraafat.github.io/ autoComplete.js/

A small library to add auto-complete functionality to a form field. Offers loose and strict search modes, customisable minimum number of characters before offering suggestions, optional callback functions and more.

AUTHOR LOUIS LAZARIS Lazaris is a front-end developer, author and blogger who writes about front-end code on Impressive Webs and curates Web Tools Weekly (https:// webtoolsweekly.com), a newsletter focused on web tools. w: impressivewebs.com t: @ImpressiveWebs

indigo-player

https://matvp91.github.io/ indigo-player/

A modular, easy-tocustomise JavaScript video player with advertisement support out-of-thebox so you can enable pre-roll, mid-roll or post-roll sponsors for embedded videos.

Simple-keyboard

https://virtual-keyboard.js.org/

An elegant, responsive virtual keyboard component that offers ready-to-use demos of both mobile- and desktop-style keyboards. The demo keyboards are gorgeous but you can also style one easily to suit your brand.

version if you want to get your hands on more features.

Rallax.js

https://github.com/ChrisCavs/ rallax.js

Parallax shouldn’t be used heavily but a simple dependency-free solution like this one is a good option. This has good performance and an easy-to-use API for starting effects, stopping, speeding up and the ability to chain .when() methods for queuing actions.

FrenchKiss.js

https://github.com/koalainteractive/frenchkiss.js

A super-fast internationalisation library with an extensive API. One example customisation it offers is the ability to deal with a language that has multiple pluralisation rules.

Simplekeyboard enables you to add a realistic keyboard to your apps that can be styled to suit your brand

february 2020 61

FEATURES 50 incredible dev tools 2020 instant.page One of the tools featured this year is instant.page (https://instant.page/), a way to preload links before a user clicks them, something that’s been trending. Here the creator, Alexandre Dieulot (@dieulot), tells us about the tool’s history as well as its future.

Moveable

https://daybrush.com/ moveable/

Make any element on the page draggable,

resizable, scalable, rotatable or even warpable (like the

perspective tool in a graphics editor). You can also enable grouping and snap-to-guides functionality.

Hotkey

https://github.com/github/ hotkey

Trigger an action on a specified element by means of a shortcut key, combination of keys or sequence of keys pressed by the user. The documentation has suggestions to ensure good accessibility.

Freezeframe.js

https://github.com/ctrl-freaks/ freezeframe.js/

Add play/pause functionality to animated GIFs on a page. Trigger play/pause via hover, click, touch

Moveable enables you to make any element on the page draggable, resizable, scalable, rotatable or warpable

february 2020

event or by an external element that serves as a play/pause button.

pagemap

https://larsjung.de/pagemap/

Add a scrollable ‘mini map’ to long web pages, similar to what you find in the Sublime Text code editor. It’s arguable whether this is more usable than a scrollbar but you could implement this with the scrollbar disabled for a native feel.

lax.js

https://github.com/alexfoxy/ laxxx

Vanilla JavaScript plugin to add responsive and mobile-friendly animations, transitions and parallax effects to pages while the user scrolls. Get started with the presets or create custom effects.

Why did you decide to build instant.page? Eight years ago I had ample free time to play around and I stumbled on the fact that a click was preceded by hovering over a link and that this delay could be used to preload the page. That’s a great idea, I thought. That’s why in 2014 I made InstantClick (http://instantclick.io/) – just-in-time preloading with Ajax and pushState, making a site into a single page application. instant. page is a ‘lite’ version of InstantClick that uses <link rel=”prefetch”>. There are similar solutions available, for example quicklink (https://github.com/ GoogleChromeLabs/quicklink) and Turbolinks (https:// github.com/turbolinks/ turbolinks). What sets instant.page apart? instant.page offers the best ratio of performance vs additional requests and it only takes the user a minute to implement. What’s the future of instant. page? Do you think it will one day be obsolete? Should browsers allow users to opt in to this sort of thing? I think it will still be relevant for years. It would be nice if it was an option in web browsers. But even then using instant.page on your site would be beneficial for most users that don’t have it enabled. You can enable instant.page for all sites in Chrome today with my FasterChrome extension (https://netm.ag/2sphe1N).

CSS & HTML TOOLS Project Wallace

https://projectwallace.com

This is a CSS analysis

tool with a dashboard that lets you track the

complexity of your code, including the number of lines of code, amount of selectors, quantity of declarations, specificity, use of !important, performance bottlenecks and more.

Project Wallace is a CSS analysis tool to track your code’s complexity. You can use it to keep tabs on a variety of concerns, such as bottlenecks

DebuCSSer

https://github.com/lucagez/ Debucsser

An unobtrusive CSS debugging tool that works as an option for manually adding an outline to one or more elements. Include the script, then hold the CTRL key to outline an element or CTRL-SHIFT to outline all.

Animated CSS Burgers

https://march08.github.io/ animated-burgers/

A small library of animated mobile hamburger menus that

50 incredible dev tools 2020

TESTING & DATA TOOLS

should satisfy your needs should you require a slightly different menu style in each project.

DropCSS

https://github.com/leeoniya/ dropcss

A fast JavaScript module that compares a page’s

of GraphQL schemas. GraphQL is a popular new technology that serves

HTML to the CSS, then

as a more efficient alternative to

returns the latter with unused code removed, saving valuable bytes in

using REST.

jsonbox.io

page load time. For more on unused CSS, see the accompanying box.

CSSFX

https://cssfx.netlify.com

Yet another useful and

unique set of plug-and-

play CSS animations and effects. This one includes a wide variety of effects – some require more than a single HTML element but they’re easy to add to a project.

CSS Grid Generator

https://cssgrid-generator. netlify.com/

For anyone first getting into the CSS Grid standard, having a visual helper will be a huge boost. This generator is a great way to learn the features and create practical grid code for all your layouts.

https://jsonbox.io/

For anyone Ľuvw# getting into the CSS Grid standard, a visual helper is a boost. CSS Grid Generator is a great way to learn the features

ARC Toolkit

https://paciellogroup.com/ toolkit/

Chrome extension by the Paciello Group that integrates with DevTools

to provide extensive accessibility testing as part of your development and testing workflow.

Free JSON storage that offers users the ability to

store, read and modify JSON data over HTTP APIs using various commands such as GET, POST, PUT and DELETE.

Accessibility Insights

https://accessibilityinsights.io/

A user-testing platform from Microsoft. Add a script to your page then replay user sessions to see how users interact with your site or app.

A Chrome extension, Edge add-on or native Windows app to run accessibility testing. You can do a quick test for the most common problems or show visual overlays on a page to examine colour contrast, ARIA landmarks and more.

GraphQL Editor

Measure

Clarity Dashboard https://www.clarity.ms/

https://graphqleditor.com/

This is a useful online editor that enables you to speed up the creation

Measure is Google’s tool for testing your site in a number of important categories, all from the one place

https://web.dev/measure/

This one is part of Google’s new developer hub, providing a one-stop online tool to test your content for vital concerns such as performance, accessibility, best practices and SEO.

Darkmode.js

https://darkmodejs.learn.uno/

There seems to be a dark mode craze lately. This project lets you add a dark mode toggle to pages, utilising CSS’s mix-blend-mode property to handle the dark/light modes.

february 2020 63

FEATURES 50 incredible dev tools 2020

MEDIA TOOLS

LIBRARIES &

Chart.xkcd lets you build dynamic JavaScript charts in a cartoony manner like the popular xkcd web comic

Chart.xkcd

https://timqian.com/chart. xkcd/

A quirky JavaScript charting library that generates charts in a sketchy or hand-drawn manner in the style of xkcd, the popular web comic. Might be a great option as part of an informal app design.

useAnimations

https://useanimations.com/

A collection of simple, customisable animated icons that you can plug into projects on mobile or web, offering a React version and the ability to edit the pre-made animations either in Lottie or Adobe After Effects.

Strikefree Music

https://strikefreemusic.com/

A growing library of audio clips you can use in things like videos and podcasts without fear of being penalised for copyright violations. You can optionally create your own custom beats or randomly select one thatâ&#x20AC;&#x2122;s already been created.

february 2020

ZapChart

https://zapchart.com/

A neat online tool to build shareable data in chart format. Just plug in the numbers for the x and y axes and this app will generate a bar chart downloadable as PNG or shareable via URL.

Developers are doing everything possible to shave e|whv#rÄź# their production builds. One way this is done is by means of tools that clean unused CSS

Static Site Boilerplate is a multifeatured toolset for building static sites that is full of features, including automated builds

Static Site Boilerplate

http://staticsiteboilerplate.com/

A non-opinionated and feature-rich toolkit for building static sites. Offers automated builds, a local dev server, production-level optimisations (such as code minification and image processing) and has support for a number of modern front-end technologies (Sass, ES6, etc).

Optimole

https://optimole.com/

An image optimisation service and CDN for WordPress. Includes features for serving deviceappropriate images with lossy or lossless compression, optional lazy loading and lots more.

Mixkit

https://mixkit.co/

A collection of HD videos and illustrations, filterable by categories and free to use anywhere in commercial and non-commercial projects, without attribution.

Base Web

https://baseweb.design/

A React-based UI framework with a vast suite of components that range from complex functionality like a payment card component (ie input mask for different credit card types) to low-level features such as FlexGrid and Layer for composing your layouts.

50 incredible dev tools 2020

FRAMEWORKS

Materialize

https://materializecss.com/

A responsive front-end framework with a slew of CSS and JavaScript components. Includes components for form features, layouts, mobile-specific and more – all based on Google’s Material Design.

Materialize is a nifty framework based on Material Design and offers users a merry medley of CSS and JavaScript components

Scene.js

https://scene.js.org

A JavaScript- and CSS-based animation library boasting an extensive API for controlling things like animation timing, transitions and effects. Want some more?

Scene.js is a JavaScript animation library with keyframing features to take care of timing, transitions and effects

Scene.js also includes keyframe and SVG-based features.

Quasar

https://quasar.dev/

A Vue-based UI library with components to help build single-page applications, progressive web apps, hybrid mobile apps and desktop apps with no unnecessary bloat.

Unused CSS

Today, developers are doing everything possible to shave bytes off their production builds. One way this is done is by means of tools that clean unused CSS, like DropCSS (https://github.com/ leeoniya/dropcss), featured in the main list of this article. DropCSS is one of the newest of such tools. One of the problems with these tools is that they are almost never perfect and require caution before using – especially on dynamic websites and apps. Chris Coyier wrote about this on CSS-Tricks (https:// css-tricks.com/heres-the-thingabout-unused-css-tools/). For example, a tool like this might incorrectly remove the styles for a dynamically generated modal window that only appears when the user clicks something. One way to resolve this problem is by using a CSSin-JS solution or any tool that incorporates styling at the component level. This way ensures there is no possibility of any unused CSS since all styles are part of a component. Another key point to mention here is that unused CSS should be near the bottom of your performance to-do list. Image optimisation, too many HTTP requests, lack of caching and so forth should all be handled long before you consider automating removal of unused CSS. And let’s not forget that unused CSS is only a problem on first load when the resources aren’t cached. Nonetheless, I consider this a decent microoptimisation that can help the performance of your site, even if only a small amount. With performance, every little bit counts but make sure you complete the big wins first!

REACT TOOLS

React Simple Img

https://react-simple-img.now. sh/

A lazy-loading image

solution for React projects that uses the

IntersectionObserver API and the new Priority Hints standard for an elegant image-loading solution.

React Animation https://nearform.github.io/ react-animation/

An easy-to-use animation library for React that lets you easily add unique pre-built animated effects to page elements based on content changes and loading or enables you to build your own.

React Redux Loading Bar

https://mironov.github.io/reactredux-loading-bar/

A progressive animated loading indicator bar for React projects, with the ability to add multiple loading bars on a single page that indicate

february 2020 65

FEATURES 50 incredible dev tools 2020

different items loading independently of each other.

react-imagemagnifiers

Resources

Twitter isn’t always the most encouraging platform but it can be useful if you follow the right people. I follow many front-end and full-stack developers and I particularly enjoy accounts that post quick coding tips and productivity suggestions, in addition to links to hot new tools. Here are a few of my favourites:

images on mobile or desktop, similar to the zoom feature available on shopping sites like Amazon, which enables you to drag while zooming to examine specific parts of an image.

RIFM

https://istarkov.github.io/rifm/

React component to convert any HTML form input into formatted input. For example, if a user types something in all lower case, you can force upper case (or just about any preferred format) as they type.

Wes Bos

@wesbos O Bos often posts little-known JavaScript tidbits and the occasional coding quiz. Many of the threads he starts are very useful and are a great complement to his

fantastic online courses.

Umar Hansa

@umaar O Hansa posts lots of great front-end resources, in addition to his regular Dev Tips (https:// umaar.com/dev-tips/), which are always in the form of an animated GIF. @iamdevloper O Okay, this one (intentionally misspelled: that’s not a typo) is just for humour! I don’t know who runs it but it’s great if you love programming humour and developer memes.

february 2020

An extension pack for Visual Studio Code that

remotely by SSHing into any folder

I Am Devloper

https://marketplace. visualstudio.com/ items?itemName=ms-vscoderemote.vscode-remoteextensionpack

enables you to use VSCode’s full set of features

A set of responsive React components to magnify and zoom in to high-res

Remote Development

https://github.com/ adamrisberg/react-imagemagnifiers

WORKFLOW AND MORE

in a container, remote machine or Windows Subsystem for Linux (WSL for short).

Fabulous

https://marketplace. visualstudio.com/ items?itemName= Raathigeshan.fabulous

This lets you edit CSS Properties in a sidebar in VSCode. Will display CSS from different sources including CSS-in-JS libraries, .scss files, <style> blocks in the HTML and

styles tied to library components (Angular, Svelte, Vue).

packtracker.io https://packtracker.io/

A tool that tracks and analyses your webpack

bundle on every commit. Helps to avoid oversized assets, npm package overuse and redundant content to ensure better overall app performance.

Flutter

https://flutter.dev/

Google’s UI development toolkit for creating natively compiled apps for web, desktop and mobile. Produces an app for all platforms from a single codebase, offering a flexible UI to boot.

Flutter is Google’s UI development toolkit for building cross-platform apps from a single codebase

50 incredible dev tools 2020

Packem

https://packem.github.io/

A JavaScript module bundler that purports to

be twice as fast as its main competitor, Parcel. Still in

alpha at the time of writing but a

promising tool that could be your go-to bundler in the coming months.

Pika

https://www.pika.dev/

A multi-featured toolset that includes npm stats, package search, a CDN and Pika Web. The latter lets you add dependencies to a project directly in the browser without webpack, Browserify, etc.

Commento

https://commento.io/

A lightweight, ad-free, privacy-focused commenting system you can embed in your web pages, usable via their cloud service or self-hosted. Includes Akismet spam detection, sticky comments, voting, Markdown support and more.

Packem is a JavaScript module bundler that’s focused on faster bundling. Only available in alpha at the time of writing, it’s definitely one to keep your eye on

Just

https://microsoft.github.io/ just/

A build task library with an easy-to-use API to

compose chained, parallel or nested tasks during your build process.

Git History

https://githistory.xyz/

Easily browse any file’s history on GitHub, GitLab or Bitbucket. Just select a file URL then replace github.com with github.githistory.xyz and an animated, visual history of the file will display.

Sublime Merge

www.sublimemerge.com/

A fast, search-friendly Git client (Mac, Windows, Linux) from the makers of Sublime Text. Offers syntax highlighting, integrated merge tool, side-by-side diffs and more.

RIFM is a React component to convert any HTML form input into formatted input. For example, if a user types in all lower case, you can force upper case

The front-end tools landscape is huge and changing constantly, so I hope this collection of libraries, scripts, modules and workflow helpers inspires you to check out some of the stuff available. It can be tough to dig around for something that’s functional and has staying power but I hope this list provides a variety of selections that are practical, easy to get started with and well maintained. Now that you’re well equipped, get out there and build something awesome!

Commento is a privacy-focused, ad-free commenting system that you can self-host and embed in pages

Sublime Merge is a fast, searchfriendly native Git client from the makers of Sublime Text

february 2020 67

FEATURES The future of frameworks

The future of

frameworks Darryl Bartlett takes a look at the current status of Angular, React and Vue and what we can expect from them in 2020

ack in 2005, a new scripting language called Mocha was created by a guy named Brendan Eich. Months after being renamed to LiveScript, the name was changed again to JavaScript. Since then, JavaScript has come a long way. In 2010, we saw the introduction of Backbone and Angular as the first JavaScript frameworks and, by 2016, 92 per cent of all websites used JavaScript. Fast-forward to 2020 and we are blessed with a number of frameworks and libraries to help us with development. In this article, we are going to have a look at three of the main JavaScript frameworks (Angular, React and Vue) and their status heading into the next decade.

february 2020

The future of frameworks

AUT HO R DARRYL BARTLETT Bartlett is a web and mobile developer specialising in JavaScript, PHP, Swift and Kotlin. He is a published author and is currently heading up a team of developers working on a group messaging app. t: @darrylabartlett

february 2020 69

FEATURES The future of frameworks

ANGULAR

AngularJS was released in 2010 but by 2016 it was completely rewritten and released as Angular 2. Angular is a full-

REACT

React was initially released in 2013

VUE

blown web framework developed by Google, which is used by Wix, Upwork,

by Facebook and is used for building interactive web interfaces. It is used by

The Guardian, HBO and more.

Netflix, Dropbox, PayPal and Uber to

an ex-Google employee. It is used by

name a few.

Xiaomi, Alibaba and GitLab. Vue managed to gain popularity and support from

Pros

O Has exceptional support for TypeScript

O React uses the virtual DOM, which has

O MVVM enables developers to separate their work on the same app section

a positive impact on performance O JSX is easy to write

using the same set of data O Excellent documentation

O Updates don’t compromise stability

Cons

O Has a bit of a learning curve O Migrating from an old version can be difficult. Updates are introduced quite regularly meaning developers need to adapt to them

What’s next?

In Angular 9, Ivy is the default compiler. It’s been put in place to solve a lot of the issues around performance and file size. It should make applications smaller, faster and simpler. When you compare previous versions of Angular to React and Vue, the final bundle sizes were a lot a bigger when using Angular. Ivy also makes Progressive Hydration possible, which is something the Angular team showed off at I/O 2019. Progressive Hydration uses Ivy to load progressively on the server and the client. For example, once a user begins to interact with a page, components’ code along with any runtime is fetched piece by piece. Ivy seems like the big focus going forward for Angular and the hope is to make it available for all apps. There will be an opt-out option in version 9, all the way through to Angular 10.

february 2020

Cons

O One of the main setbacks is the fact you will need third-party libraries to create more complex apps O Developers are left in the dark on the best way to develop

What’s next?

At React Conf 2019, the React team touched on a number of things they have been working on. The first is Selective Hydration, which is where React will pause whatever it’s working on in order to prioritise the components that the user is interacting with. As the user goes to interact with a particular section, that area will be hydrated. The team has also been working on Suspense, which is React’s system for orchestrating the loading of code, data and images. This enables components to wait for something before they render. Both Selective Hydration and Suspense are made possible by Concurrent Mode, which enables apps to be more responsive by giving React the ability to enter large blocks of lower priority work in order to focus on something that’s a higher priority, like responding to user input. The team also mentioned accessibility as another area they have been looking at, by focusing on two particular topics – managing focus and input interfaces.

Vue was developed in 2014 by Evan You,

developers in a short space of time and without the backing of a major brand.

Pros

O Very light in size O Beginner friendly – easy to learn O Great community

Cons

O Not backed by a huge company, like React with Facebook and Angular with Google O No real structure

What’s next?

Vue has set itself the target of being faster, smaller, more maintainable and making it easier for developers to target native. The next release (3.0) is due in Q1 2020, which includes a virtual DOM rewrite for better performance along with improved TypeScript Support. There is also the addition of the Composition API, which provides developers with a new way to create components and organise them by feature instead of operation. Those developing Vue have also been busy working on Suspense, which suspends your component rendering and renders a fallback component until a condition is met. One of the great things with Vue’s updates is they sustain backward compatibility. They don’t want you to break your old Vue projects. We saw this in the migration from 1.0 to 2.0 where 90 per cent of the API was the same.

The future of frameworks

Building a project in Angular, React and Vue Left Now Angular has Ivy as its default compiler, developers can use Progressive Hydration to load components’ code piece by piece

How does the syntax of the frameworks compare? All three frameworks have undergone

changes since their releases but one thing that’s critical to understand is the syntax and how it differs. Let’s have a look at how the syntax compares when it comes to simple event binding: Vue: The v-on directive is used to attach event listeners that invoke methods on Vue instances. Directives are prefixed with v- in order to indicate that they are special attributes provided by Vue and apply special reactive behaviour to the rendered DOM. Event handlers can be provided either inline or as the name of the method. <template> <button v-on:click=”clickHandler”>Click me</ button> </template> <script> export default { name: “HelloWorld”, methods: { clickHandler: function() { console.log(“I was clicked!”);

} };

}

</script> React: React puts mark up and logic in JS and JSX, a syntax extension to JavaScript. With JSX, the function is passed as the event handler. Handling events with React elements is very similar to handling events on DOM elements. But there are some syntactic differences; for instance, React events are named using camelCase rather than lowercase. function Button() { function clickHandler(e) { console.log(“I was clicked”); } return <button onClick={clickHandler}>Click me!</button>; }

Angular: Event binding syntax consists of a target event name within parentheses on the left of an equal sign and a quoted template statement on the right. Alternatively, you can use the on- prefix, known as the canonical form.

All three frameworks have undergone changes since their releases but one thing that’s critical to understand is the syntax

A basic chat app for users to have private conversations. Data is stored using Firebase

Back in issue 326, I wrote a tutorial on how to build a one-to-one chat application with Angular. Since then I have built out the project in both Vue and React to see how it would compare. Versions used O Angular: 8.3.5 O React: 16.11

O Vue: 2.6.10

Stability

All three frameworks were capable of creating the app without any issues and were all very stable versions. Even if I enhanced the app by adding things like group chat, I believe they would still all be as stable as each other.

Differences

The main changes were the syntax and the structure. A lot of it is down to the developer and what they are comfortable with. I also don’t think there was a lot a difference in terms of time. The flexibility in structure with React and Vue wasn’t really an advantage, I did prefer the structured nature of Angular; however, some people may prefer that flexibility. Angular had its own Firebase solution called AngularFire but, again, this didn’t have any bearing on time.

Size

The file size with Angular was larger than React and Vue. I don’t think this is a huge problem because of web speeds today and all three frameworks are constantly looking at optimising their solutions.

Support

During points of the project, I decided to do some research on particular areas that people may struggle with. In all cases, I found answers on Stack Overflow and on dedicated forums.

february 2020 71

FEATURES The future of frameworks

@Component({

selector: “app-click-me”,

template: ` <button (click)=”onClickMe()”>Click me!</

button> `

}) export class ClickMeComponent { onClickMe() { console.log(“You clicked me!”); }

}

Popularity and market share

Right While Vue.js

falls a way behind in terms of Google search trends, it ranks highly on GitHub as the most starred of the three frameworks

Let’s begin by looking at an overall picture of the three frameworks

Job searches: At the time of writing, React

in regards to the rest of the web by examining stats from W3Techs

and Angular are quite closely matched in terms of job listings on Indeed with Vue a

(w3techs.com). Angular is currently used by 0.4 per cent of all websites, with a

long way behind. On LinkedIn, however, there seems to be more demand for Vue

JavaScript library market share of 0.5 per cent. React is used by 0.3 per cent of all websites and a 0.4 per cent JavaScript library market share and Vue has 0.3 per cent for both. This seems quite even and you would expect to see the numbers rise.

developers. Here are some statistics from a few of the major job websites:

Google trends: Over the past 12 months, React is the most popular in search terms, closely followed by Angular. Vue.js is quite a way behind; however, one thing to remember is that Vue is still young compared to the other two.

Right React dominates, both

in terms of Google search volume and Indeed developer vacancies in the US and UK

february 2020

Indeed

React Developer: 14,689 (US), 3,812 (UK) Angular Developer: 13,096 (US), 2,820 (UK) Vue Developer: 2,187 (US), 976 (UK)

Worldwide – LinkedIn

26,646 – React Developer 28,466 – Angular Developer 45,434 – Vue Developer

Stack Overflow: If you look at the Stack Overflow Developer Survey results for 2019, React and Vue.js are both the most loved and wanted web frameworks. Angular sits down in ninth position for most loved but third most wanted. GitHub: Vue has the most number of stars with 153k but it has the least number of contributors (283). React on the other hand has 140k stars and 1,341 contributors. Angular only has 59.6k stars but has the highest number of contributors out of the three with 1,579.

The future of frameworks

Everyone has their perspective about which to use but it comes down to the size of a project and which one makes you feel most comfortable

Below is a list of resources that will help you keep up-to-date with the latest JavaScript framework developments in 2020.

NPM Trends: The image above shows stats for the past 12 months, where you can see React has a higher number of downloads per month compared to Angular and Vue.

Mobile app development

based on the MVVM pattern. It is used by several big companies like Microsoft,

One main focus for the big three is mobile deployment. React has React Native,

Netflix and LinkedIn.

which has become a popular choice for

Meteor: A full-stack JavaScript platform

building iOS and Android apps not just for React users but also for the wider

for developing modern web and mobile applications. It’s easy to learn and has a

app development community. Angular developers can use NativeScript for native apps or Ionic for hybrid mobile apps, whereas Vue developers have a choice of NativeScript or Vue Native. Because of the popularity of mobile applications, this remains a key area of investment.

very supportive community.

Other frameworks to look out for in 2020 If you want to try something new in 2020, check out these JavaScript frameworks. Ember: An open-source framework for building web applications that works

Above Ember is an open-source framework for building web applications used by companies like Microsoft, Netflix and LinkedIn

Resources

Conclusion

All three frameworks are continually improving, which is an encouraging sign. Everyone has their own perspective and preferred solution about which one they should use but it really comes down to the size of the project and which makes you feel more comfortable. The most important aspect is the continued support of their communities, so if you are planning to start a new project and have never used any of the three before, then I believe you are in safe hands with all of them. If you haven’t had a chance to learn any of the three frameworks yet, then I suggest making it your New Year’s resolution to start learning. The future will revolve around these three!

Comparison of the usage statistics of Angular vs. React vs. Vue.js https://w3techs.com/technologies/ comparison/js-angularjs,js-react,jsvuejs O A great resource for checking out the current usage statistics for Angular, Vue and React on the web. You will also find a lot of statistics revolving around other web technologies as well.

Angular blog https://blog.angular.io/ O Angular’s official blog contains the latest news and tips from the team. React blog https://reactjs.org/blog/ O The official React blog is the place to get news on upcoming releases.

Vue.js News https://news.vuejs.org/ O All the latest news and tutorials from the Vue team. JavaScript Conferences 2020 https://confs.tech/javascript O Conferences are one of the best places to discover the latest in JS. This site contains a list of the main conferences around the world in 2020. And don’t miss GenerateJS, net’s dedicated JavaScript event on 2 April (https://generateconf.com)!

Right Meteor is a full-stack JavaScript platform for

developing modern web and mobile applications. It’s a good framework to start with as it’s easy to learn

february 2020 73

NEWSLETTER TODAY! GET NEWS, TIPS & INSPIRATION WEEKLY

https://netm.ag/subscribe

NOW!

Tips, tricks & techniques

THIS MONTH FEATURING...

THE RISK OF IGNORING ACCESSIBILITY

CREATE PARTICLE EFFECTS WITH THREE.JS

DISCOVER SECRET CSS TRICKS

BUILD A TIME-BASED ANIMATED LOGIN SCREEN

CODE ACCESSIBLE MODALS

PROJECTS three.js

A B O U T T HE A U T H O R

RICHARD MAT T K A w: richardmattka.com t: @synergyseeker job: Creative director, designer, developer areas of expertise: Shaders, VFX, WebGL

THREE.JS

CREATE PARTICLE EFFECTS WITH THREE.JS Richard Mattka shows you how to create real-time, interactive particle hļhfwv#lq#6G#xvlqj#wkh#srsxodu#wkuhh1mv#oleudu| Particles can add incredible realism and interest to a 3D scene. Whether it’s falling snow, red glowing embers rising from the flames or ambient dust to accentuate volumetric lighting, particles are absolutely vital. In this article, we’ll explore one technique for adding real-time particles to a three.js scene using WebGL. You’ll learn how to use the PointMaterial and Points object to efficiently create thousands of particles. You’ll have them moving and reacting to the mouse as well.

accelerated experiences right in the browser. Whether your goal is mobile or desktop, WebGL’s got you covered.

UNDERSTANDING WEBGL

PARTICLE EFFECTS

WebGL enables you to render incredible 3D scenes combining graphics shaders and interactivity all inside an HTML <canvas> element. WebGL is a web standard, which means you can create GPU-

february 2020

UNDERSTANDING THREE.JS

Created by Ricardo Cabello and maintained by an army of incredible devs, three.js is the world’s most popular open-source 3D library for the web. It’s blazingly fast, easy to learn with extensive documentation and examples, making it an excellent choice for WebGL development.

Particle effects can be made in a variety of ways. You can use fragment shaders directly to write high-end animations in GLSL that integrate with your scene. You can use vertex shaders as well

three.js to manage vast numbers of particle positions at high speed. Both are advanced techniques but get fantastic results. You can also create individual particle objects such as spheres, add them to the scene and manage their motion in a more manual way. You could combine image layers and sprites to always face the camera and combine all the above. For this tutorial, the approach we are going to use leverages the built-in three.js PointsMaterial and BufferGeometry. By using a single geometry for each ‘cloud’ of particles, we dramatically reduce the

number of draw calls and processing time to create a great result. Using this technique means we don’t need to code GLSL; we can use built-in optimised features and easily add interactivity to our particles.

here: https://github.com/mrdoob/Three.js/. If you want to load GLTF models, you may also want to get the

CREATE PARTICLES WITH THREE.JS

GLTF loader found in the repo as well or whichever loader type you might like. However, loading models

In this tutorial, we’ll use three.js to render our 3D

is optional for this tutorial.

graphics in WebGL. The material and mesh types are include with three.js, so you won’t need anything

Note: This code has been tested on the latest

extra to get started. You can grab some simple 3D models if you like to decorate your scene and optional sprite images for your particles but none of that is required to create the particle effect. So let’s jump in and get started!

“WebGL enables you to render incredible 3D scenes combining graphics shaders and interactivity inside a <canvas> element” SET UP A WEB SERVER

It’s a good idea to run web-based code on a web server, either locally or remotely. If you don’t, you may run into cross domain or origin restrictions when loading assets. You can use simple tools like MAMP (https:// www.mamp.info/en/) for both Windows and Mac, that install with a few clicks. You can also check out the three.js How To Run Things Locally docs here: https:// threejs.org/docs/#manual/en/introduction/How-to-runthings-locally.

STEP 1: GET THREE.JS

Before starting the tutorial, you’ll want to download the latest version of three.js from the repository

Above Particle effect from CERN BigBang Project by the Google Cultural Institute

release of three.js v111.

STEP 2: GET THE HTML READY

To begin, you need to set up a basic HTML file with some simple CSS to ensure it fills our screen. Also add the three.js library and the model loader if you wish to load models. Start by adding the following code to a new HTML file: <!DOCTYPE html> <html> <head> <title>WebGL Particles</title> <style> html, body { margin: 0; padding:0; overflow: hidden; } </style> <script src=”libs/three.min.js”></script> <script src=”libs/GLTFLoader.js”></script> </head> <body> <script> // JAVASCRIPT CODE GOES HERE </script> </body> </html>

STEP 3: CREATE GLOBAL VARIABLES

We’ll need a variable for the camera, a scene and renderer for the 3D scene. We’ll need the clock class to know how much time has passed between each frame. We’ll also need a two-part (Vector2) variable to hold our mouse position. Add the following code first between your JavaScript script tags:

february 2020 77

PROJECTS three.js var camera, scene, renderer; var mouse = new THREE.Vector2(); var clock = new THREE.Clock();

STEP 4: CREATE A 3D SCENE

Next, set up the three.js scene. This will be the container for all your objects. You can also set a default background colour using a hex value for the colour of your choice. scene = new THREE.Scene(); scene.background = new THREE.Color( 0xbfd1e5 );

STEP 5: ADD A CAMERA

To see the scene, add a camera. Use a PerspectiveCamera for a 3D scene. The first attribute is the field of view. The second is the aspect ratio, which should match the aspect of the visible window. The third and fourth parameters are for near and far clipping planes. Use the position property to set the location of the camera in the scene. camera = new THREE.PerspectiveCamera( 35, window. innerWidth / window.innerHeight, 1, 2000 ); camera.position.set( 0,100,50 ); scene.add( camera );

STEP 6: SORT THE RENDERER

Create the renderer next, which handles drawing the scene to the HTML canvas element. You can define the pixel ratio and size so it adapts to the screen space. In this example we are also turning on shadows to allow casting of shadows in the scene. renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild( renderer.domElement );

STEP 7: ADD LIGHTS

To make a scene look 3D, you need some type of directional lighting. Typically you should use an ambient light to control the overall light and at least one directional or spot type light to cast some shading and shadows in your scene. You can add a directional light with shadows turned on using the following code: light = new THREE.DirectionalLight( 0xddeeff,.5 ); light.position.set( -10,50,10 ); light.castShadow = true; light.shadow.camera.right = 50;

february 2020

Top Rain particles falling towards the camera against a dark sky can be achieved with this tutorial Above Snow particles would enhance this winter scene as they fall past the camera

light.shadow.camera.left = - 50; light.shadow.camera.top = 50; light.shadow.camera.bottom = - 50; light.shadow.mapSize.width = 2048; light.shadow.mapSize.height = 2048; scene.add( light );

STEP 8: ADD POINTS GEOMETRY

Next, create a BufferGeometry to hold the many vertices that will be used to position each point in our particle system. Apply some random values to the position of each particle and push it into the vertices array. Use the following code to do this: var geometry = new THREE.BufferGeometry(); var vertices = []; var materials = [], parameters; for ( var i = 0; i < 1500; i ++ ) { var x = Math.random() * 60 - 30; var y = Math.random() * 60 - 30; var z = Math.random() * 60 - 30; vertices.push( x, y, z ); }

STEP 9: SUPPLY VERTICES TO THE BUFFER GEOMETRY

Now that you have an array of vertices (positions in 3D space), you can apply them to the geometry you are creating. We are making our own custom

three.js

ESSENTIAL RESOURCES

BE INSPIRED Fragment Shader effects Fragment Shaders are blazingly fast for creating post-

processing effects and animations. They are complex to write, using a language called GLSL, but the results can be

Above You can now see your particles rendering to the screen. No animation

yet but it works!

stunning. Shadertoy features thousands of examples you can explore. One great example is by Sjeiti, featured here. https://www.shadertoy.com/view/MlKSWm

geometry with this technique, which will hold our particle positions. geometry.addAttribute( ‘position’, new THREE. Float32BufferAttribute( vertices, 3 ) );

STEP 10: LOAD A PARTICLE TEXTURE

You have lots of options here – you can load many particle images to use. These will essentially work as sprites that will be small and always face the camera. So using a small square image that fades nicely works well. The sprite asset is included in the source code for this tutorial. var texture = new THREE.TextureLoader().load(“assets/ images/sprite1.png”);

STEP 11: CREATE POINTS MATERIAL

Next, create a new PointsMaterial, which is a special three.js material for our particles. You can define the size of the points, the texture, blending mode and opacity. Use an opacity of less than 1 to make our particle more transparent. You can also set its colour. For this example, we’re aiming for particles that look like snow. material = new THREE.PointsMaterial( { size: 1.0, map: texture, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, opacity:.5} ); material.color.setRGB( .7, .7, .9 );

STEP 12: POINTS OBJECT

Create a new Points object, combining our geometry and new material. You are creating a new type of custom mesh using a PointsMaterial as our material and our buffer geometry as the definition of the mesh vertices.

Vertex Shader effects To handle high volumes of particles, Vertex Shaders can be used with instanced geometry to render out particles extremely efficiently. Bruno Imbrizi has provided a fantastic walkthrough on this technique that is well worth exploring if you are interested in this approach. https://tympanus.net/codrops/2019/01/17/interactive-particles-withthree-js/

Particle libraries There are numerous libraries in various stages of development. These can rapidly speed up development timelines. Pixi.js, for example, has several 2D particle libraries that work well. For three.js, one excellent library is three.proton, which is based on the Proton particle engine. It combines mesh, sprite, point and custom renderers, along with a few emitters. https://a-jie.github.io/three.proton/

february 2020 79

PROJECTS three.js var particles = new THREE.Points( geometry, material );

IN-DEPTH

THREE.JS OVERVIEW In order to dive deeper into three.js, visit its online

documentation here: https://threejs.org/docs/. There are

plenty of examples to inspire and help get you started. But for now, here’s a little primer on what it all means. What is a scene?

STEP 13: RANDOMISE ROTATION OF PARTICLES AND ADD TO SCENE

Add a little code to randomise the rotation of the particles object and then add it to the scene. particles.rotation.x = Math.random() * 6; particles.rotation.y = Math.random() * 1; particles.rotation.z = Math.random() * 1; scene.add( particles );

STEP 14: MAKE MORE PARTICLES

A scene is the primary container that we place our 3D objects in, along with lights and cameras.

Clone the particles you made and apply some more

What is a 3D camera?

random rotation to get it oriented in a new way. Add that new Points object to the scene as well. You can

Three.js has different camera types, including a Perspective

camera, which we will use for 3D, and an Orthographic camera,

repeat this for as many particle groups as you want in the scene. You can vary their material, size and

used for rendering 2D scenes or UI elements.

style as well.

What is a renderer? The renderer handles the display of the 3D scene using WebGL. It

particles2 = particles.clone(); particles2.rotation.x = Math.random() * 6;

targets an HTML <canvas> element to draw into. You will call the renderer to render each frame of your scene.

What is geometry? Geometry defines the vertices or ‘points’ of an object. Faces created by connecting these vertices are also defined. Geometry can be defined manually or with built-in primitives such as Planes or Spheres. It can also be loaded from external 3D model files. What is a material? Materials are used to add texture to the faces of an object’s geometry. Attributes include things such as texture maps, colour and opacity. What are meshes? A mesh is the combination of geometry and material. The mesh object is what we would typically think of as a physical object because it now has enough information to be seen.

particles2.rotation.y = Math.random() * 1; particles2.rotation.z = Math.random() * 1; scene.add( particles2 );

“To make the scene interactive, we can adjust the camera position in order to react to the mouse” STEP 15: ADD AN ANIMATION LOOP

To test out our particles so far, we can quickly add a simple animation loop and render out the scene. Use the following code to create this new function and call it the first time to start the loop. The requestAnimationFrame function will continue to call the animate function, optionally at 60 frames per second. It also will automatically pause calls, when the browser window is not active. We also get the amount of time that passed between animation frames from the three.js clock class. To render the scene we simply pass the scene and camera to the renderer.render function. function animate() { requestAnimationFrame( animate ); var d = clock.getDelta(); // render scene

february 2020

three.js

}

renderer.render( scene, camera );

// call animate first time animate();

STEP 16: ANIMATE THE PARTICLES

Next, iterate the scene objects and if it’s an instance of our particles (Points), then apply some ambient rotation. You could do this in a variety of ways, such as adjusting the scale and position of the points. For now we’ll rotate them around the z-axis, using the time delta we stored as d to see how it looks. for ( var i = 0; i < scene.children.length; i ++ ) { var object = scene.children[ i ]; if ( object instanceof THREE.Points ) {

}

object.rotation.z += .1* d;

STEP 17: UPDATE CAMERA USING MOUSE

To make the scene interactive, we can adjust the camera position to react to the mouse. With the particles moving and the camera moving as well, it will make the scene really come alive. Add this code to make the camera update its position based on the mouse position. You’ll add code in the next step to update the mouse variable when the mouse moves over the screen. camera.position.x += (mouse.x*.03 - camera.position.x) * .05; camera.position.y += (mouse.y*.03 - (camera. position.y-30)) * .05;

STEP 18: UPDATE MOUSE WHEN THE MOUSE MOVES

In order to get the mouse updating, we need to listen for the movement of the mouse and update the x and y values of our mouse variable. Use the following code to do this: window.addEventListener(“mousemove”, mouseMove); function mouseMove(e){ var x = (e.clientX - window.innerWidth/2); var y = (e.clientY - window.innerHeight/2); mouse.x = x; mouse.y = y; }

STEP 19: ADD GROUND PLANE

Next add a plane to the scene to create a ground. Orient it to be perpendicular to the camera and a little below. Make it large enough to cover the field of view.

Top right An empty snowy scene, all ready for your imagination to fill it Above Winter scene complete with particles for snow

var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(2000,2000), new THREE.MeshPhongMaterial( {color:0xddffff}) ); ground.rotation.x=Math.PI/180*-85; ground.position.y=-15; ground.receiveShadow = true; scene.add(ground);

STEP 20: ADD TREE MODELS

To complete our wintery scene, you could import some simple tree models and place them through your scene. You could load in some other wintery assets like snowballs to roll around and make snowmen, some ice sculptures and more. You could easily adapt the size and look of the particles to simulate rain, by making them smaller and adding more of them. You could also create ambient dust by adjusting the size and density of the points. Experimenting with colour and motion will give you a variety of results you can use as well.

february 2020 81

PROJECTS CSS

View source files here! All the files you need for this tutorial can be found at https://netm.ag/380dap2

A B O U T T HE A U T H O R

MARK SHUFFL EBO T T OM w: webspaceinvader.com t: @webspaceinvader job: Professor interaction design areas of expertise: HTML, CSS, JavaScript

CSS

BUILD A TIME-BASED ANIMATED LOGIN SCREEN

Pdun#Vkxŀherwwrp harnesses the power of CSS to access graphics inside

an SVG scene and create a unique mood animation based on the time Grabbing your users’ attention is essential if you want to make your page stand out and, if it’s done correctly, it’s something that will actually enhance the users’ experience. This in turn will build positivity towards your brand. In this tutorial, we are going to explore creating an interactive login screen that takes the user’s time of day and creates a unique page design. The user’s attention will be focused in this case by changing the mood of the scene based the time of day. The sun or moon will be animated into the sky depending on the current time; these subtle changes go a long way in telling the user their experience matters.

february 2020

The main graphic in this page is an SVG image and, as this is just an XML file, the graphic elements inside of this can be manipulated through CSS. A tint will be adjusted to change the feel of the time and the sky will be transformed through the use of a background gradient. The added advantage of an SVG is that, as it is a vector image, it scales perfectly to any screen size. To get started with this project, open the start folder in your code IDE and you will see that there is some basic HTML structure in the index.html page. Let’s move into the design.css file and incorporate the background gradients that will be added depending on what time it is.

CSS .day-back { background: linear-gradient(0deg, rgb(174, 229, 225)

34%, rgb(111, 174, 219) 100%); } .rise-back {

background: linear-gradient(0deg, rgba(247, 222, 114, 1) 45%, rgba(255, 169, 168, 1) 60%, rgba(78, 147, 146, 1) 80%, rgba(25, 61, 87, 1) 100%); }

.night-back { background: linear-gradient(0deg, rgba(15, 72, 92, 1) 0%, rgba(28, 148, 159, 1) 56%, rgba(24, 57, 86, 1) 100%); }

These three classes all have a time associated with them, so the correct gradient can be dropped onto the body element to create the background. The day-back class is added by default, so if it happens to be daytime – the time most users will use the service – there won’t need to be any change to the background.

“The main graphic in this page is an SVG image and, as wklv#lv#mxvw#dq#[PO#Ľoh/#wkh# judsklf#hohphqwv#lqvlgh#ri# wklv#fdq#eh#pdqlsxodwhg# wkurxjk#FVVĤ

IN-DEPTH

CREATE YOUR OWN SVG IMAGES Scalable vector graphics (SVGs) can be created in any vector

drawing package. For this tutorial, the landscape scene was created in Adobe Illustrator. In this case all of the graphics are just placed on one layer. Any graphic element that is named in Illustrator gets that name as an ID when it is exported as an SVG image. If it has an ID, it can be accessed through code, which means it can be manipulated in any way, giving the designer the power to modify the image at runtime in the browser. As all the

content here is on one layer, open the Layers panel and click the

arrow next to Layer 1. This shows the individual graphics on that layer; find the layer you need to name and assign a unique name. To export as an SVG, go to File > Save As. Choose SVG instead of the default AI, then choose the location and save. It’s useful

to save with the Responsive option as it automatically fills the container holding it on the web page and will resize without you having to write any additional code for the image. You can also take a preview at the SVG code if you are trying to get the option that gives you the smallest file size.

Next is the CSS for the sun, which is just a square div that is given 50% round corners. This turns it into a circle – just add a background colour and you have an instant sun! There’s a three-second transition on this so it can move into place with an arc motion; this helps it look like the sun or moon moves into the sky based on the time. Notice the transform-origin is offset to the right so it rotates from a point outside the sun. This creates the arc movement to rise into the sky. #sun { height: 100px; width: 100px; background-color: #f4f2d5; border-radius: 50%; position: absolute; top: 20%; left: 50%; transform-origin: 0% 400px; transition: transform 3s ease, background 3s ease; transform: rotate(-70deg); }

february 2020 83

PROJECTS CSS Switch over to the main.js file now. A number

RESOURCES

GET THE LOWDOWN ON CSS GRADIENTS CSS gradients have been around for some time now but it

of global variables need to be declared here. These variables grab references to elements from the document – you can think of it as the screen display. These elements are those that need to be updated with CSS classes or have some movement added to them. The most important task here is of course to grab the time from the user’s computer. The hour of the day is stored in the variable hourNow.

can be confusing to create them and there is always the problem of whether to still include browser prefixes or not. That

let today = new Date(); let hourNow = today.getHours();

information. Here are some useful resources that will help you get the most out of gradients.

let welcome = document.getElementById(“welcome”); let timeslot = “”, bd = document.body;

really comes down to how much backwards compatibility you need, so checking your sites analytics will give you that

let svg = document.getElementById(“svg”); let sun = document.getElementById(“sun”);

Once this time is known, a welcome message is added based on what part of the day it happens to be. If you uncomment the hourNow variable you can change the time from there to test different times by changing the number; this just overrides the time

ģWkh#vxq#lv#fkdqjhg#wr#d# prrq#e|#vlpso|# fkdqjlqj#wkh#frorxu#wr#d# oljkw#eoxhĤ

CSS Gradient https://cssgradient.io/ The easiest way to create any gradient is to do so visually. This online gradient creator will help you put the colour stops in and then specify the direction for a linear gradient or whether you want to have a radial gradient. Once done, the CSS can be copied and pasted right into your own code.

from the user’s computer and is useful for checking the appearance of morning, noon or night without having to wait! Just remember to comment this out again when you want it to read the user’s actual time.

Copy CSS to Clipboard If you use Adobe XD as your design software then there is a very handy plugin available called Copy CSS to Clipboard. Once installed, just go to the Plugins menu with the element selected. Choose Copy CSS to Clipboard and then you can paste the gradient into your CSS code. You’ll also get width and height information but you can just delete that.

//hourNow = 7; if (hourNow >= 5 && hourNow < 12) welcome.innerHTML = “Good Morning, welcome to”; if (hourNow >= 12 && hourNow < 18) welcome.innerHTML = “Good Afternoon, welcome to”; if (hourNow >= 18 || hourNow < 5) welcome.innerHTML = “Good Evening, welcome to”;

MDN CSS Gradients https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/ Using_CSS_gradients For those of you who are CSS purists, then of course you should refer to a guide such as the Mozilla Developer Network’s resource on CSS gradients. This will enable you to code your own gradients from scratch. You’ll never be at the mercy of any software and, of course, you can wow your friends with your CSS wonders.

The next part of this is to detect whether this is daytime, sunrise, sunset or night. This is completed in the following if statements. The gradient background is changed based on this; daytime will use the default, sunrise and sunset will use the same one as each other and night will change to a darker gradient. if (hourNow >= 6 && hourNow < 9) { timeslot = “sunrise”; bd.classList.remove(“day-back”);

february 2020

CSS

};

bd.classList.add(“rise-back”);

if (hourNow >= 9 && hourNow < 16) timeslot = “day”; if (hourNow >= 16 && hourNow < 18) { timeslot = “sunset”; bd.classList.remove(“day-back”); bd.classList.add(“rise-back”);

} if (hourNow >= 18 || hourNow < 6) {

timeslot = “night”; bd.classList.remove(“day-back”);

}

bd.classList.add(“night-back”);

To move the sun, a slight pause has to be added through a setTimout command. All this does is pause for half a second (500 milliseconds). The angle of the sun is worked out and the sun is moved between a -70 degree and 70 degree angle. The pause enables the animation to be added to the sun. During nighttime, the hour angle is slightly more complex because of hitting midnight, so there is a different offset for before and after midnight. The sun is changed to a moon by simply changing the colour to a more appropriate light blue. let pause = setTimeout(() => { if (timeslot == “sunrise” || timeslot == “day” || timeslot == “sunset”) { let angle = -70 + ((hourNow - 6) * 12); sun.style.transform = ‘rotate(‘ + angle + ‘deg)’; } if (timeslot == “night”) { let angle; if (hourNow >= 18 && hourNow <= 23) { angle = -70 + ((hourNow - 18) * 12); } else if (hourNow >= 0) angle = -70 + ((hourNow + 5) * 12); sun.style.backgroundColor = “#eafdff”; sun.style.transform = ‘rotate(‘ + angle + ‘deg)’;

} }, 500);

The final section of code adds a listener to the SVG that just checks to see if it’s finished loading. When it has finished loading, access is available to any of the IDs in the SVG. Towards the back of the image is a red tint over the mountains, which needs to be visible only on sunrise and sunset. Therefore, if it happens to be day or night, that tint is made invisible so it doesn’t affect the mountains with a red glow. svg.addEventListener(“load”, function () { let svgDoc = svg.contentDocument; let mt = svgDoc.getElementById(“mountTint”);

if (timeslot == “day” || timeslot == “night”) mt.style. opacity = 0; }, false); Save all your files and test this page in your web browser and based on the current time, the login screen will be changed and animated to match the position of the sun or moon. Don’t forget that you can test different times by using the hourNow variable and setting other times.

Top Taking the time from the morning, the scene is transformed into a sunrise, the sun animates low in the sky to reflect the early time Middle As the day

progresses a regular scene emerges with the sun higher in the sky and a daytime background

Above Sunset enables a similar set up to sunrise in the graphics but the difference here is the position of the sun

february 2020 85

PROJECTS Accessibility

ACCESSIBILITY

THE RISK OF IGNORING ACCESSIBILITY

Joshua Garity explores why accessibility so often gets underemphasised in developers’ skillsets – and why that’s a huge mistake of the world around you and providing the same opportunities to others that are often ignored. As tech advances, it opens the possibilities of creating experiences for all. Although it may seem overwhelming keeping up with it all, think about how your users feel when you deny them the ability to interact with a product or service. Uber made accessibility a priority with its signlanguage initiative (https://netm.ag/2PuCsTE). It found that unemployment or underemployment in this community was close to 70 per cent. Its programme empowers deaf or hard of hearing individuals to not only use the service but also become a driver. With increasing popularity of augmented reality (AR) and the lowering cost of technology, we are nearing an explosion of solutions that were never before possible. Craig Smith wrote a great piece a couple of years ago about Apple’s ARKit and the opportunity to build AR-driven solutions to increase education for those that live on the autism spectrum. I highly recommend you check it out (https:// netm.ag/350OYRo).

PROFILE

When bringing up accessibility, many involved in the web design and app development industry may not fully understand what that suggests. Especially those relatively new to the field. That’s not for lack of need or interest but more relative to the lack of importance placed on it by employers or clients early in our careers. As a junior level designer or developer, we’re often tasked with just getting work done. We aren’t typically involved in strategic decisions at that stage of our career. As we progress, our expertise expands and the size of projects and clients grows as well. What doesn’t necessarily grow is that leadership guiding us toward time spent learning what accessibility means to our customers or how it is changing due to cultural transparency and decreasing cost. We need to pay attention to it to do it well. Accessibility is more than alt tags, tab indexes and button sizes on touch screens. It’s more than having a larger font for an ageing demographic to read your content. Accessibility is more than a design choice or feature. It’s about understanding the needs

february 2020

Garity is the founder of both UX Triggers and Candorem, which is a 75-time award-winning UX creative agency based out of Wisconsin, in the United States. w: www.candorem.com

Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes

PROJECTS CSS

View source files here! All the files you need for this tutorial can be found at http://bit.ly/36dUAbl

A B O U T T HE A U T H O R

AG A NAP L OCHA w: http://aganaplocha.com t: @aganaplocha job: Co-founder of The Awwwesomes / Coding designer at Adobe areas of expertise: HTML, CSS, web design and UX

CSS

DISCOVER SECRET CSS TRICKS

Want to explore every nook and cranny of CSS properties? Aga Naplocha introduces you to some lesser-known examples you might not have used

Even if you’re familiar with CSS and building beautiful layouts, you can still discover new CSS properties and features. By using them you have more influence on how the content behaves on the website, as well as having more freedom in terms of how you apply creative techniques to elements such as photography. In this tutorial, we are going to dig into some lesser-known properties. When experimenting with them, please bear in mind that mentioned features are not supported by all the browsers, so it’s worth checking them out on https://caniuse.com/. Let’s dive into some short and concise examples!

WHAT YOU WILL NEED:

O Your favourite web browser and developer tools – I recommend using Firefox or Google Chrome as they support all the features I use in this tutorial. O A code editor. O Assets such as images and fonts (you can download

february 2020

them from my repository: http://bit.ly/netmag2019-CSS-tricks).

TYPOGRAPHICAL DECORATION

There are several CSS properties that help us to enhance how the text is presented on the web. Text-stroke We’re familiar with text stroke (outline) from Adobe Illustrator or vector-drawing applications. We can apply the same effect using the text-stroke property. It’s good to know you can animate text-stroke with CSS but only the stroke colour – the stroke width isn’t. footer h3 { /*more styles in style.css*/ /*...*/ -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #000; }

CSS

IN-DEPTH ::first-letter This pseudo-element applies styles to the very first letter of the block-level element. Thanks to that we can introduce effects that are familiar to us from print and paper magazines. p.intro:first-letter { font-size: 100px; display: block; float: left;

}

line-height: .5; margin: 15px 15px 10px 0 ;

CSS is a great tool to express your artistic and creative side. I

gave a talk at JSConf.Asia called ‘artistic.css’ about how design movements shape the current state of CSS.

Sometimes you might have an impression that every website looks the same – most of them are based on a 12-column grid

and three boxes. Why can’t we draw inspiration from fields or areas that go beyond digital design? Have we forgotten about the

Gradient text Finally we can apply gradient to our text without any complicated methods. Let’s find out how can we introduce this eye-catching effect on our website. h2.contact-heading {

}

GET CREATIVE WITH CSS

-webkit-text-fill-color: transparent; -webkit-background-clip: text; background: radial-gradient(#ffbc00, #ff65aa);

CONTENT CONTROL

Thanks to the following properties, we can enjoy greater control over how the text or images will behave depending on whatever size or proportion their container is.

print or editorial design that we all love? Why can’t we break old habits and try new CSS properties that open a whole new world of endless possibilities? Actually, we can!

In my talk I cover properties such as masking, clipping and transforms in order to explore visual styles that go way beyond

the ones you are familiar with. It’s amazing that we have so many possibilities for building our layouts and it’s easy as pie to do so. When talking about print, a great source of inspiration for me is the collage technique. For creating them I use masking and clipping in CSS. What’s so powerful about masking is its ability to apply the same properties as for background-image – we can define its position, size and repetition. On the other hand, we have clipping, which is similar to chopping pieces of paper. To find out more about the intersection of CSS code with Bauhaus, De Stijl, anti-design aesthetics and much more, I recommend watching my talk and follow the CSS experiments you can use on your website: https:// www.youtube.com/watch?v=aQBYAkaABkU&t=1863s

Line-clamp This property truncates text at a specific number of lines. We need three properties to make it work. The display property needs to be set to -webkit-box or -webkit-inline-box, -webkit-box-orient set to vertical and overflow set to hidden, otherwise the content won’t be clipped. p.shortened { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } Column-count Thanks to this property, a browser evenly distributes the content in a specified number of columns.

During my talk you can see some demos with mask-composite property and blend-modes to make a collage-like effect

.outro { column-count: 2; }

february 2020 89

PROJECTS CSS Character unit

IN-DEPTH

LEARN ABOUT TYPOGRAPHY Variable fonts are a hot new thing happening on the web and

We can limit our text width or height depending on the character unit. As Eric Mayer points out (https:// netm.ag/34QEc02), the ch unit represents the width of the character ‘0’ (zero) in the current font, which is of particular use in combination with monospace fonts. It changes as the font family changes. We can treat it a bit like an x-height but the ch is based on the width of the 0 character instead of x.

in graphic design in general. Variable fonts are packed into one file – all the different styles for a font are in a single file. You

h2.contact-heading { /*more properties in the CSS file*

smaller than the sum of all the styles and there are less HTTP requests) but you can also play with medium states thanks to the

}

have bold, medium, light and italics included. Not only does it have a better influence on performance (a variable font’s file size is

… max-width: 8ch;

interpolation of curves called masters. If you’d like to find out more about web typography, I totally

Word break tag <wbr>

recommend to subscribe to Jason Pamental’s newsletter called

Web Typography News (https://rwt.io/newsletter) – or read the interview with him on page 26. It’s also fun to check out Mandy

Michael’s playful examples on Variable Typography (https:// codepen.io/collection/XqRLMb/). Michael explores new and exciting creative opportunities for storytelling, design and expression in ways standard fonts could never provide. She presents the demos focused on designing web typography to adjust to various inputs, situations or events, which might enable us to modify our fonts to aid in storytelling or achieve improved readability and legibility in different situations, environments or on larger or smaller screens. If you’re also into technical and design details, you should consider playing with the Glyphs app. With Glyphs you can create fonts on your own – not only traditional fonts but also colour and variable fonts, which makes it much more fun. There are plenty of tutorials that will help you to dive into the application (https:// glyphsapp.com/tutorials).

Although this tutorial is based around CSS tricks I also want to mention one HTML tag: <wbr>. This is an HTML element that defines a word break opportunity – a position within text where the browser may break a line. In might be handy in some situations – it can be used when a word is pretty long and we’re afraid that the browser would break the word in wrong places, for example a telephone number. <wbr>+0043<wbr>234-343<wbr>234-234<wbr> Object fit If you wonder whether we can control image behaviour depending on the size of the container, I recommend you check out the object-fit property. This one defines how the content of an <img> or <video> should be resized to fit its container. We have four options: fill, contain, cover and scale-down. For instance, with the cover value, the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. .object-fit { object-fit: cover; height: 400px; width: 100%; }

DECORATIVE AND CREATIVE ELEMENTS

You have to see Michael’s CodePen with literally growing letters. She used the variable font Decovar and CSS animations

Let’s move on to adding some new elements and colours to our website.

Conic-gradient If you have ever wondered whether you could create a pie chart only using CSS, the good news is you actually can! And the solution for this brings us to the conic-gradient function. It creates an image

february 2020

CSS

consisting of a gradient with set colour transitions rotated around a central point (rather than

Change the Text Selection colour ::selection is a pseudo-element that overrides at the

radiating from the central point as you’d find with a radial-gradient).

browser-level to replace the text highlight colour with a colour you choose. The colour can be seen

.piechart {

background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px;

once you select the content with the cursor. ::selection { background-color: #f3b70f;

Above right CSS counters let you adjust the appearance of content based on its location in a document, offering a handy hack for styling numbered lists

}

Styling numbers in a numbered list To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document. To use CSS counters:

@support Whenever you want to use a CSS property not supported by all browsers, there is a feature query called the @support rule. This enables you to check the browser support for CSS property: value pairs. The code included in the @support block will be rendered only if these conditions are true. If the browser doesn’t understand @support, it doesn’t generate a given part of the code either.

O The counters’ value can be increased or decreased by counter-increment O We can display the value of the counter by using the counter() or counters() function from within a content property.

@supports (text-stroke: 4px navy;) { .example { text-stroke: 4px navy; } }

ol.numbered-list > li:before { content: counter(li); position: absolute; box-sizing: border-box; width: 45px; height: 45px; background: #f3b70f; border-radius: 50%; } ol.numbered-list li { position: relative; left: 0px; list-style: none; counter-increment: li; }

Although some properties may still experience problems with the browsers’ compatibility, don’t hesitate to play with them. While your browser support may be limited now, these will likely become mainstream practices in the future. It is just a matter of time. If you would like to ensure these effects only load on browsers that can render them, use the @supports rule to wrap the styles. If you would like further inspiration, Jen Simmons and Mozilla launched a new YouTube channel of videos about web design and development, including tools and techniques, what’s new and best practices. Additionally, you can also find out how to test colour contrast and simulate colour blindness using Firefox DevTools.

}

Above left While data visualisation libraries like d3.js offer comprehensive charting functionality, for simple pie charts why not try CSS?

february 2020 91

PROJECTS Modals

View source files here! All the files you need for this tutorial can be found at https://netm.ag/2LgBaKT

A B O U T T HE A U T H O R

DANIEL SCHWARZ

w: https://uxtricks.design t: @mrdanielschwarz job: Creator of UX Tricks areas of expertise: Product design, UX and design tools

MODALS

CODE ACCESSIBLE MODALS

Daniel Schwarz walks us through the method of developing accessible modals/dialogs using modern front-end techniques

‘Modals aren’t accessible’ is a claim that I’ve never really understood because nothing is accessible until made to be so. Not even colours. I’ll concede in saying that modals have never really been accessible right out of the box, however coding them isn’t as difficult as it’s made out to be. And now, unfortunately, modals have a bad reputation because of this ‘modals aren’t accessible’ claim, when in reality it sits idly between myth and excuse. Regardless, we now have a semantic HTML element for modals (<dialog>), a JavaScript API (https://netm.ag/2OrAQee) to make them functional and even a CSS pseudo-element (::backdrop) that we can style. Let’s take a look at the implementation as we create an accessible multi-link menu modal. Warning: this technique is experimental, lacks

february 2020

complete browser support and is subject to change. But don’t worry, we’ll also be writing fallback code! HTML <dialog> requires three considerations: the HTML, the CSS and, finally, the JavaScript. We’ll start with the HTML.

STEP 1: MARK UP THE MODAL IN HTML

Firstly, the semantic <dialog> element is used to mark up the modal. Typically, modals are semantically separate from content, so they would normally appear as a direct child of the <body>. <body> <main> <button id=”trigger”>Show modal</button> </main> <dialog id=”modal”>

Modals

</dialog> </body>

Whenever the <dialog> element lacks web browser support, it simply falls back to behaving like a regular <div> element, so it’s fine to use <dialog> even when it’s not being supported. Note: the href attribute is required in order to make the links focusable for non-mouse users. When there’s no suitable value for the href attribute, use href=”javascript: (or even better, the much more semantic <button> element).

IN-DEPTH

WHY USE MODALS? Why are modals used?

One of the reasons why modals are favoured is because they

can act as an extension of the main document, meaning that we don’t need to maintain an extra web page that wouldn’t contain any content other than what we’d be displaying in the modal anyway. Why force the user to load a web page when it’s not needed? That being said, if the user does need to return to a modal after having already moved onto a new web page, by default this state isn’t recoverable, so that’s something to be taken into

consideration. One solution is to leverage JavaScript’s History API

(https://developer.mozilla.org/en-US/docs/Web/API/History_API/), but if not, ask yourself this vital question:

For further reading on this, check out Mozilla’s reference page on the <dialog> element (https:// developer.mozilla.org/en-US/docs/Web/HTML/Element/ dialog/).

STEP 2: TRIGGER THE MODAL WITH JAVASCRIPT

Next, we need to show the modal upon the click of a trigger. Notice how we’re making sure that showModal() is supported first. If it isn’t, then we reveal the modal by adding a class. If it is, then the open attribute is added to <dialog>. (function() { var trigger = document.querySelector(“#trigger”); var modal = document.querySelector(“#modal”); trigger.addEventListener(“click”, function() { if (typeof modal.showModal === “function”) { modal.showModal(); // results in <dialog open> } else { modal.classList.add(“open”); // results in <dialog class=”open”> } }); })();

Will users want to ‘go back’ to this web page with an open modal? If there’s a chance they might and you’d rather not make the code

any longer than it already is, then consider not using a modal at all and instead creating another step in the user flow that involves the user navigating to another web page. Modals are typically better suited for swift actions or skipping levels in the navigation.

“Whenever the <dialog> element lacks web browser support, it simply falls back to behaving like a regular <div> hohphqw/#vr#lwġv#Ľqh#wr#xvhĤ

Surprisingly, the outcome of using <dialog> is a fully functioning modal. Although we can use CSS to style it, which we’ll do shortly, no CSS is required to show or even align it.

STEP 3: STYLE THE MODAL WITH CSS

Let’s bring it to life with some CSS: /* fallback */ #modal.open:not([open]) {

Above showModal() is all that’s needed to show a modal

february 2020 93

PROJECTS Modals top: 0; left: 0;

IN-DEPTH

right: 0;

MODAL FORMS A debatable case for modals is the use of forms within

modals. At first it certainly does sound like a horror story – after all, the thought of filling out a form and then accidentally

dismissing it is enough to send someone into total meltdown. It’s

happened to me a couple of times and admittedly I totally freaking lost it. So exactly what do we need to consider when using forms inside modals?

bottom: 0; z-index: 999;

display: block; position: fixed;

} #modal.open, /* fallback */

#modal[open]::backdrop { backdrop-filter: blur(5px);

background: rgba(0, 0, 0, 0.5);

} #modal div.content { display: grid; grid-gap: 1rem;

O Maintain correct tab order (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_ attributes/tabindex)

O Ensure that the main document is not focusable O Don’t mess with CSS overflow:, to avoid ‘cut off’ O Disable esc-to-dismiss and click-backdrop-to-dismiss Personally, forms inside modals is where I typically draw the line. Even if they’re totally usable and accessible, users don’t know this if they’re using the website/form for the first time. Modals of this kind can make users feel anxious just by existing, slowing them down as they become more occupied with avoiding accidental interaction than focusing on the task at hand. In any case, I’d recommend using modals with caution.

Top Bootstrap’s modal forms can be dismissed by accidentally clicking on the backdrop or accidentally hitting the esc key

“Because dialogs are essentially overlays, ensure that the main document is rendered inactive until the xvhu#zlvkhv#wr#uhwxuq#wr#lwĤ 94

february 2020

}

grid-template-columns: repeat(2, 1fr);

When the open attribute and ::backdrop pseudoelement isn’t supported, we need to style the modal manually using the .open class. When it is supported,

the <dialog> is shown pre-styled (minus any aesthetic styles we’ll want to add). When supported, backdrop-filter: assigns a filter to the backdrop that isn’t inherited by its child elements (making it easy to apply an Apple-like background blur effect) and of course ::backdrop is for styling the backdrop itself (unless you happen to be alright with its default styling).

STEP 4: SWITCH FOCUS TO THE MODAL

Because dialogs are essentially overlays, we need to ensure that the main document is rendered inactive until the user wishes to return to it. For mouse users, this experience is the default; however, nonmouse users and those that navigate using assistive technologies will become stuck (focused) on the modal’s trigger. This means that we need to shift focus to an interactive element (typically the first interactive element) within the modal. When showModal() is supported, this happens by default but, when it’s not, we need to do it programmatically with JavaScript. } else { modal.classList.add(“open”); document.querySelector(“#modal .content a:firstchild”).focus(); } Note: ensure that you don’t overwrite the default outline: style, as this is used to indicate focus for non-mouse users.

Modals STEP 5: TRAP FOCUS

Next, we need to ensure that non-mouse users remain ‘trapped’ within the modal until they wish to leave it. Otherwise, they may abruptly ‘unfocus’ from the modal accidentally, despite it still (undesirably) blocking the view of the main document. This is most conveniently handled by the aria-modal attribute: <dialog aria-modal=”true”>…</dialog> Although, in cases where aria-modal is not supported, we need to instead use aria-hidden as a fallback for describing what is and isn’t focusable when the modal is and isn’t visible.  <dialog aria-hidden=”true”>…</dialog> } else {

… document.querySelector(“main”).setAttribute(“aria-

hidden”, “true”); document.querySelector(“#modal”).setAttribute(“ariahidden”, “false”); }

STEP 6: RETURN FOCUS

Finally, when the user is ready to return to the main document, we need to return focus to the modal’s trigger, as this is what the user was focused upon before they triggered the modal. function closeModal() { if (typeof modal.close === “function”) { modal.close(); // removes the open attribute } else { modal.classList.remove(“open”); // removes the .open class } trigger.focus(); } document.querySelector(“#closeModal”). addEventListener(“click”, function() { closeModal(); }); Since we’d also want to facilitate easy dismissal, ensure the modal can be dismissed using the esc key. This is the default behaviour when the showModal() is supported, so the following snippet is a fallback: document.addEventListener(“keydown”, function(event) { if (event.keyCode == 27) {

closeModal();

} }, true); This also works: <dialog> <form method=”dialog”> <button>Close</button> </form> <dialog>

Top Styling the modal is super easy when <dialog> is supported Above aria-label is being communicated by Apple VoiceOver

STEP 7: SCREEN READER ALERTS

The <dialog> element requires an aria-label attribute and value so screen readers can announce how the user interface has changed for those with visual impairments, although aria-labelledby (https:// netm.ag/33GjTkt) works fine too. The value of aria-label is only announced once the modal is visible. In cases where <dialog> is not supported, the role=”alertdialog” attribute works as a fallback. Without it being present, the value of aria-label will be completely ignored. <dialog role=”alertdialog” aria-label=”Please do something”></dialog> Now try it for yourself!

february 2020 95

HOSTING PARTNERS

Key hosting directory

FEATURED HOST

Netcetera provides hosting

“We have several servers from Netcetera and the network connectivity is top-notch – great uptime and speed is never an issue. We would highly recommend Netcetera” Suzy Bean

Offering reliable website

from one of the most energy-

hosting, dedicated servers,

efficient datacentres in Europe,

co-location and cloud solutions,

all powered by green energy.

Netcetera has a large portfolio

It offers everything from reliable

of green, zero-carbon solutions

low-cost hosting for a single site

for businesses of all sizes.

right through to complex cloud

Customers can choose from its

racks and managed IT solutions.

fully managed cloud servers,

One of its most popular products

Linux and Windows for SMBs

is its Managed Cloud, designed

and a fully managed cloud

to help SMBs get the most from

solution for WordPress websites

their website, on their own cloud

to help them utilise cloud

server. Server monitoring comes

technology without any hassle.

as standard for Netcetera’s Cloud

And with server monitoring as

and Dedicated server clients

standard and a full migration

– something it believes should

service available, Netcetera

be included in the price of the

has made the switch to better

hosting it provides.

hosting really easy.

CONTACT 03330 439780 / SALES@NETCETERA.CO.UK

WWW.NETCETERA.CO.UK WHAT NETCETERA OFFERS O Managed hosting: a full range of solutions for

EXPERT TIP

CLOUD TECH TIP... If you’re going to fully utilise cloud technology, before deciding on a service provider ask whether monitoring comes as standard and whether management is included in the price. A fully pdqdjhg#forxg#fdq#pdnh#|rxu#exvlqhvv#ľ|>#dq# underutilised cloud will be a waste of money.

a cost-effective, reliable, secure host.

O Dedicated servers: single server through to a full rack, with free setup and generous bandwidth.

O Cloud hosting: Linux, Windows, hybrid and private cloud solutions with support and scalability features.

O Data centre co-location: from quad-core up to smart servers with quick set up and all fully customisable.

Advertisement 1&1 INTERNET

THENAMES

businesses, developers and IT professionals to succeed online.

certificates, business email, WordPress hosting, Cloud, VPS

With a comprehensive range of high-performance and affordable

and dedicated servers. Part of a hosting brand that started in

internet products, 1&1 offers everything from simple domain

1999, it is well established, UK based, independent and its mission

registration to advanced ecommerce packages.

is simple: ensuring your web presence “just works”.

1&1 Internet is a leading hosting provider that enables

0333 336 5509

TheNames.co.uk offers great value cPanel web hosting, SSL

WWW.1AND1.CO.UK

0370 321 2027

CATALYST2

BLACKNIGHT

Catalyst2 has built a stable, reliable and well-supported

name registrar, providing innovative solutions to more than

hosting platform for organisations across the UK. Catalyst2

84,000 customers in 130 countries, with dedicated servers and

specialises in very high-availability hosting and exceptional

colocation, a comprehensive range of web hosting plans, domain

customer support. Contact the team today for a quote.

registration, email and productivity tools. ISO 27001 certified.

0800 107 7979 SALES@CATALYST2.COM

+353 59 9183072

As one of the UK’s most experienced hosting companies,

WWW.THENAMES.CO.UK

Blacknight is the leading Irish web hosting company and domain

WWW.BLACKNIGHT.COM

HEART INTERNET

ADVERTISE HERE!

Internet focuses on designers, developers and technically-

500,000 customers.

Would you like to promote your hosting business and services to our audience of professional web designers and developers? If so, please call or email George as below.

+44 (0) 330 660 0255

REASONS TO ADVERTISE

As one of the UK’s leading web hosting authorities, Heart adept businesses. It builds on its four tenets – speed, reliability, support and security – to create award-winning solutions for over

WWW.HEARTINTERNET.UK

O Reach professionals: 75% of readers are working in or seeking work in the web industry

O Variety of projects: future projects include mobile apps, web apps and CMS-driven sites

O Home workers: 51% have a personal website under development

CONTACT +44 01225 687 311 / GEORGE.LUCAS@FUTURENET.COM

NEXT MONTH

THE ULTIMATE UI DESIGN GUIDE Learn top UI design techniques and discover the latest tools for creating great interfaces

PLUS Create agile design systems that evolve with your site

Split RGB channels in your animations to create video effects

Learn how to ace your first project management role

ISSUE 329 ON SALE 23 JANUARY PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT

myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO

net.creativebloq.com

9000

9001