Scribd Logo
Upload

Welcome to Scribd!

  • (FreeCourseWeb - Com) Net - March.2020

    Uploaded by

    Manuel Castro
    49 views100 pages

    Original Title

    [ FreeCourseWeb.com ] net.March.2020

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    49 views100 pages

    (FreeCourseWeb - Com) Net - March.2020

    Uploaded by

    Manuel Castro

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 100
    SPLIT RGB CHANNELS Manipulate the RGB channels of awebcam feed with shaders PLAN WEARABLE UI Build better user interfaces for watchOS The voice of web design BUILD A BETTER DESIGN SYSTEM Tsstie 329 = Marth 2020 perfect component library for your products “THE ULTIMAT Learn top UI techniques and discover the latest tools for XY creating great interfaces Uae AY 5 AEN cS aa sy Na design EDITOR’S NOTE You can add the most innovative functionality and harness the most dynamic frameworks but a site is nothing without a well-designed user interface. Your latest project may have powerful, efficient engineering under the hood but if the dashboard is more Ford Model T than Tesla, you can’t be surprised if users would rather take someone elses site for a drive. Good user interface design is fundamental 0 effective web development and yet it can be easy ta overlook. For that reason, welve dedicated this Issue to covering the guiding principles and latest developments ia UL Kicking off our ultimate UL design guide, we look at how you can get the best but of elements like typography, colour palettes, buttons and finks and curn chem into consistent, reusable components. Then, a8 your projects and Interfaces grow, Nick Babich shows you how to build an effective design system and inject increasing precision into your design pipeline. ‘We also have lors mare: we show how to apply video textures to 3D objects, splita webcam feed into RGB channels and design for watchs. Josh Russell Editor @loshi Russe FEATURED AUTHORS DANIEL SCHWARZ Nick BABICH 2» BRETT HARNED RICHARD MATTKA net march2020. 3 EDITORIAL Esto Josh Russel ash ussell Group Esto in Chie Clare Howlett Seri CREATIVE BLOQ stor Meri Hughes kercrusneic {sore Calter Ruth Hamilton persion: £33 Rosle Hilder Serr “rt rer Domini Carter CONTRIBUTIONS ak Biller, Kyle Carper Domini Carter Jo Cole, Bratt Harned, Harte Kight, da 5 ay, Daniel Scar, Mark Shueboter, Sen Steers ym Wnt PHOTOGRAPHY A coprights and traders are ecogrised and respected ADVERTISING Commerc Sales Decor hare Dov le doe utr ing sles Manage Michal Pyalt meey . Account Sal Matt Bailey to nf D recor George Lucas soos. NTERNATI rng eam to dacuseparnersyp opportunity retisavalale Forlcensing Contact eas of Print csrsing Rachel Shaw icesing turret PRINT SUBSCRIPTIONS & BACK ISSUES wee, mall enquiries co" Suk TAL 88 285) Intemational 4 (01344 968 285 ‘Group Marketing Director Magazines Marbesips Sharan Tedd CIRCULATION Tim Mathers 1202 586200 DUCTION ‘onoger Car SettslvrtsingPxeeicon Mreger Hanne Cresby Jof Pract on US 8 UK Mark Constanee Poet Pr itl EstoneCentrolertason Hudson Proc MANAGEMENT Nola Cokely or Dan Johar rie Content Officer Aaron Asad Chit cor Zack Slivan Cos p oracor Prosuryr Keith Waller Hof Mi & Design Greg Whittaker PRINTED BY idan, wun 2x DISTRIBUTED BY ac. London, Ek SHU ives 0203 7979 aeetforce S Church 51385-7602 DISCLAIN hae & net march 2020 US tac (eg 1 your web business andjalimg projects from good to great.» a8 time-intensive administration and access management. Baal from long working nights with cold pizza. Your BiGilernative: The IONOS Partner Program for agencies, developers and designers. www.ionos.co.uk/partner-program ‘ 2s bas cain CONTENTS: Issue 329: March 2020 : net.creativeblog.com WD A BETTER SKAST © FEED SIDE PROJECT R Alvaro Montara on his library for putting ‘gamepad functionality in the hands of devs CLIENTS FROM HELL 3 The latest in our series of nightmare cients BEYOND PIXELS 1% Blly Mores charos naw fching improved his ‘mental health, creativity and productivity © VOICES TRY YOUR HAND AS PM 18 Brett Harned on how to prepare for your rst turn as project manager ESSAY 20 Dale Murray examines proprietary coud services clash with GDPR ‘SHOW, DON'T TELL 24 Beople see stats more than ever before [Adam Lee acks whother that's changed the way we discuss insight SMOOTH WEBSITE MIGRATION 32 [Andrew Armitage on the things to consider wen migrating site ta a new platform gaa 33 BIE Spittel explains why she's an a mission to teach cade ina non-intimidating way BIG QUESTION 34 (ur experts predict how theirjobs wil change by 2030 6 net march 2020 WORKSPACE 5 Ben Steers shows us around the Fiasco Design workspace, a place for ‘Wooden Pencils, bikes and a big gold thumbs-up INTERVIEW 26 © Fortine srnes with ner thougnts to fashioning interactive clothing, Charlie Gerard shares her side projacts SNL Sea NPR eels SEN PCI Non GALLERY 38 Mark Billen uns down the months best sites, including Runway Palette, a project leveraging TencorFlaw ‘oanalyse fashion © FEATURES AU BUILD A PERFECT CU) ts 0 DL} Ce ee eee Penner tea et eracst ee a * ADD VIDEO TEXTURES TO 3D OBJECTS 76 Richard Mattka shows you how ta use videa as textures fo your 3D objects, create 360 video and apply a varity of effec REGULARS EXCHANGE 08 Pamela Pavilscak, | Cornolius and Torrey Padmajersky share expert advice and tips ® SHOWCASE PROFILE Stink Studios original sin, HOW WE BUILT 52 Red Collar on how is in-house project draws attention to marine conservation PROJECTS RGB SPLITCHANNELEFFECT 82 Mark Shufflebottom uses = ait the RGB channels af a webcam fa PURPOSEFULHEROHEADERS 86 Daniel Schwarz shows you how to put purpose aver form when designing headers DESIGN WEARABLE APPS 92 ‘Vamsi Batehu onthe best practices for creating watch0S: pos net march 2020 7 EXCHANGE netmag@futurenet.com THIS MONTH FEATURING... PAMELA PAVLISCAK The subtitle of your book, ‘Building Products with Confidence and Clarity’, seems like the opposite of the maxim ‘Fail fast, fail often’. Is it and, by extension, is that old slogan past its sell-by date? Digby Bard Chrst2hure, New Zealand Jc:"The concept of ‘fail fast, fail often’ isn’t expired. It has been misunderstood or, at the very least, taken too literally. And it’s not at all in opposition to building with, clarity and confidence. ‘Too many people interpret ‘fail fast’ to mean pursuing ideas with recklessness because failure is okay. Some even celebrate spectacular failures as a form of progress. That way of thinking isa disaster. ‘What people should be doing is running lots of little . experiments to see what works. If something works you keep doing it. If something fails ie’s nota catastrophe; i?s a learning experience. These small tests are the exact thing that build clarity on what works and what doesn’t and give you the confidence to isa keop going Emavianal design 8 net march 2020 SUCCESS STORIES What's really good example of site or app that gets emotional design right? Shola Mendez, Manchester, UK P: Cate, creativity and connection are the core characteristics of emotionally intelligent design. So'm tempted to say ‘TikTok because it encourages creativity. However, while there’s some level of care by including a digital wellbeing setting that limits use to two hours, it still has many of the same issues you see ‘with other social media apps because it encourages social comparison rather than authentic connection. Aside from apps and sites, here's alot of interesting ‘experimentation with wearables that convey or adapt to mood. Startups SHORT-SIGHTED STARTUPS ‘You must meet many would-be startup founders. What ate the mistakes people 1ake when Introducing themselves? Jo Frederick, Boston, US JC: The number one mistake Lsee is people in love with their solution instead OTKTOK Make Your Day eal People, Real Vide. ofa problem. Nothing is more irritating than someone more fascinated with the technology they ate using ta solve a problem than the problem itself [Not long ago someone was pitching me aan idea to track real-world advertising effectiveness. They would track a phone's location and know when it as in proximity of a billboard or other advertisement and then assume (Keyword: assume) the phone’s owner had seen the ad. They went on and on about GPS aceuracy, data science and algorithms. When I asked: “Who is this, for? What problem does it solve? they said: ‘I’m not sure yet but some big advertising company will want it’. Not being able to clearly articulate how this technology solves a specific problem for a specific group of people is like a hhammer looking for a nail. These people sometimes get lucky. But, looking at the history of successful companies, the people who set out to solvea problem have a much better track record. Emotional design THE FUTURE OF TECH Are you optimistic or pessimistic about ‘he role of cechnalogy in our lives in the 20208 and beyond? How can web designers, significantly influence this direction? PP: Right now, we're seeing what happens when design hasn't fully considered emotion. Some of our most problematic experiences lack emotional intelligence, from unsatisfying interactions with chathots to apps that congratulate when they should console. Other experiences have been (maybe inadvertently) designed for negative ‘emotion by optimising for engagement. Now we see Twitter and Instagram experimenting with ways (o mitigate tha by removing likes. [My prediction is that in the next two years, we are going to see a growing awareness of the emotional dimensions of experience. Partly because we'll begin ‘0 appreciate the negative dynamic embedded into product design but also because emotional artificial intelligence ~ and maybe mixed reality (KR) too ~ will nudge us to pay attention to ‘emotion, Of course, that technology has alot of shortcomings and we'll have to {decide how it could help or harm. Emotional design MORE FROM EMOJIS How ean emojis be made to work better? PP: Emojis and reaction GIFs can fill in gestures and expression missing from ‘online communication. That's a positive. The downside is that emojiscan seem ‘overly reductive or automatic in how we use them. Emotions online take on their ‘own shape, often exaggerating trivial, ‘moments and minimising big feelings. Emojisare a part of that cultural shift, "Sy 3 SIMPLE STEPS ea Dy -Bel=- a) Ce Col Pe ent ssa ote) Eetiag ce Se ey eres peeeetene pen ete eet ears Reed od cent or) reer ed foo err eee aod Seta eee eat net march 2020 9 UTR Pa WHAT WILL BE THE BIGGEST WEB DESIGN CHALLENGE IN 2020? THIS MONTH Ayer: 4 “ of People, projects & paraphernalia NSE CUT Saas ena tee B BEYOND Pi Ally Mor mental FEED re GAMECONTROLLER.JS Alvaro Montoro on his library for putting gamepad functionality in the hands of developers ico lem \o- ALVARO MONTORO 12 net march 2020 ‘Tell us what your side project does. GameContoller JS (hers./netm aga Bus is a JavaScript library that enables developers to manage gamepads inall modern browsers. ts goalisto remove the initial complexity ofthe original web API Why did you create it? While searching fora web API integrateina different project, 1 was surprised to find that there was a standard Gamepad API. Tenjoy playing games and ic had his cool faetor that made it fun co leaea, After getting the first snippets working from scratch, | realised that every step inthe pracess required many repetitive tasks and, although not excessively complex, it was going tobe difficult co ‘maintain, Buildings lbeary to simplify che interface was natural move and italmast happened without even realising ‘What were you hoping to achieve? Ache beginning, developing the library a personal and learning challenge but soon T cameo the realisation that | not only wanted ta be the developer of the library but also one of the users. And after seeing how repetitive and tedious some of the steps were, the goal in mind soon became simplicity ‘The simpler and easier to use that the library was, che vas more of| better it would be for ather developers (and myself) to ‘build inceresting projects with i ‘What technologies were used in building i? The core ofthe brary is the Gamepad API and its extensions (like the game controller vibration). Itwas Dulle using Vanilla JS in an attempt ro keep it free of ‘other libraries or plugin dependencies and also as light as possible (the current version is around 6K2), How has itbeen received? The frst people that tied the library ~and gave the thombs up~ were my four-year-old and rwo-year~ ‘ld childcen. They are still too litle to play games like Guitar Hero or Dance Dance Revolution but they enjoy pretending to play with the drums and guitars. They |wore excited when I used the library tobuild simple versions of those games they could play with the ollers connected to the browser. Received warmly by the developer community, ‘GameContrellerS is fairly recent but already several projects started linkingit asa dependency to build ‘web games with gamepad support ‘What do you think you'll do next with it The Gamepad APIis an actively evolving document, ‘which means that GameController JS has tobe updated often to keep up with the new changes. The libeary needs some polishing, expanding t vo include functionality and extensions and adding eustem JavaSeript events, ‘As mentioned before, the next step would be for me to become a user ofthe library and build a version of 4 game like DDR with open and accessible features to make it available for everyone. tia a aN ONS Oe ee RECS anonymous accounts of nightmare clients Eerie nerve cer eh nt conn re Peer pe nner an ont rreas sonar ene Pree perapiereere eens Pein penetra por Pr cherec mts ‘7 Perera | 8) Fae hepsi reeecioehieon enstCMm mn enh is ® = DESIGN FOR DARK MODE though dark made ts mare than But there anything in particular sshen desigingfor dare made? We hough it woul be useful to shee me gh onthe station the help of @astmag’s folwers CONSIDER DEPTH ‘There's alot mere to dark made lotto says: “Darker shades hould be your furthest shouldbe lighter MAKE IT ACCESSIBLE th 2 many we features, the pronity of ark made nauld be accessibility, This subject was the most provalet pie ‘allowers, with both @KSRupral ard @LieHamburger putting cessilty and egy on apa. @mrdaneeehwar feature for Pro’ users KEEP IT RELEVANT Just because big brands ae raling out darkmade, dace have to get caught upin the trend designing for dark mode,” advise ou net match 2020 13 ts e _ Cae sizzy Sees Seer ee ar ae FISHING Ally Morris shares how fishing has been beneficial to his mental health as well as his creativity and productivity Sarat toga bak alake witha flask of teaanda pint of mmaggetsis.agreat way to recharge the batters anc gat some perspective 'saperfectantidote tothe day Running a busy design and web development ‘agency for over ten yearsisan incredible privilege Tabeable to work every day doing something arding but overseeing a smal busine 47 job. With anever- encing to-do ist and expectations constantly drawing me towards ‘doing more’ or working onger hours, finding any sortofheadepace inthis cay pressures ace ‘can sometimes feel ik ee! ising is as far removed from my day job asitcan be. fis tangible and low tech and forme that sa huge attraction, lenjoy the simplicity of fiching with arod snd ine trying tocutwita aig fish tafall forthe trap Ihaveset out cal for my wellbeing. mystery ta whats going on under the although Ihave influence over ‘suchas location orbit choice fortune tillplaysa partin my success. When tak Tenjy the connection with the natural worl he time to nate, ‘which stimulates allmy senses. The sound of ish breaking the surface ofthe water, the smellof wet leaves underfaoto the sight af early morning ‘ist slowiy rising from the ake. You can'thelp but eelinspree Ihave racently read Alex Saojang-Kim Pang’s bbaok Rest which opaned my ey to theinfhuence that proper esthas on our ereatvty Many ofthe ‘mast bilant and creative figures thatha were wellknown for spending resting and allowing their minds just to wander. trl Darwin, Beethoven and Charles Dickens (coname just three|allhad strict rautines where 24 waUld purposefully take time outta thine and contemplate their werk When we chaaseto in nature, switch off, cur subeanecioue minds become active andi is during these times wecanoften salve the Impossible’ problems orcome up with new ideas. Toten fel guity when turnoff my seen afterall that 0-2 list doesn't get done oni own. But taking purposeful time aut land hopefully catching some fist) can actually Increase my productivity ane quality of workin gr» Sop sranerncncayan Media fsbo co FIASCO DESIGN Ben Steers shows us around the creative design agency, a place for Wooden Pencils, bikes and a big, * Fiasco Design isa creative design agency based in Bristol, UK, New in our tenth year, ‘we've been very fortunate to work. ‘with some fantastic brands over ‘he years including Just Eat, National Trust and UWE Bristol. Our stadia is partafa larger co-working space called Gather Round, which myself and Fiasco co-founder, Jason Smith, er up in 209. The space isin an old industrial building, therefore the loolcisa mix of industrial and Now York loft apartment, with exposed brick walls, 4m-high ceilings, steel workand contemporary furniture. The vision was fora mixed-use ¢o-working space for creative individuals and businesses, There's a mix of open-plan workspace, private studios, meeting rooms, old thumbs-up ‘nooks and places for people ta gather and share ideas. Our studio isa large open-plan space, with two banks of six desks split between directors accounts and creative lending itself wo 0 ‘our collaborative style of working Being home toa variety of creative businesses means we have ‘wealth of talent and opportu for collaboration, right on our doorstep. ’s an exciting, lively space with a vibrant community of friendly, like-minded people. OurDRAD Pencil needs no introduction 1). Any designer strives for one of these. We wen ‘ours for our work on the Pelican [Books website in 2016, It naw takes pride of place on our shelves The GE Smith Sample Book is beautifully designedand a constant source for paper stock inspiration We've had our copy fora \while now and often use it when, deciding on the right stocks for print. Wealso have the Pantone Poctable Guide Scudio,a collection ofeight Pantone graphics guides Te’snot cheap butit's a good investment, We've had our case for over five years now and it’san essential part of life inthe studi, In 2017 our sister company, Thread, puton atworday design {fostival As partofthe event, we {designed a bike in collaboration ‘with Temple Cycles o). The result \wasa single-speed commuter bike in brand coloursand accompanying vinyl graphics. thing of beauty ‘We have an award scheme for the Fiasco team. At the end of each month, everyone votes on who deserves the Good Job Buddy Award ~a golden thumbs up Praise for 3 job well done. OL cfFaseo Desig as wal aoa Se Gath Roun Wa) tcrartaassson ng space. met march 2020 15 SUBSCRIBE TODAY SPLIT RGB CHANNELS | PLAN WEARABLE Ty (om BUILD A BETTER TET. sscnssren 9 THE ULTIMATE PUTAS | MAG ‘Net kasi he ) THE ULTIMATE /*Z Met. weve) Offer does not apply to quarterly or 6-month subscriptions 46 net march 2020 GREAT REASONS ‘wrt TO SUBSCRIBE Y=4° e Print edition delivered to your door e 13 issues in a one-year subscription \ e iPad and iPhone edition download e Android edition download e Money-back guarantee cs esol fi} TI TE settee reac COE rsa: (anc Net wi) Net 2 ° UTA s Lg SAC IGN GUID . ‘2-month subscription (13 Issues) Pony rds proprietary cloud services c oer err othing, Charlie Gerard eae TRY YOUR HAND AS PROJECT MANAGER Brett Harned on how to prepare for your first turn as project manager Whether itis something you accept ‘oF nat, you are a project manager Sure, you may identify as a designer, developer, content strategist or any of the many folesand titles there are in our industry but, asa human being, you are a project manager. Thinkeabout the most basic things you do in life and you can apply project management to them: making dinner, moving, attending a conference, evena night outwith friends ‘or a vacation, In all of those scenarios, you're required to estimate, plan and ‘communicate, And it’s not that hard. Just because you have those innate PM. skills itdoesn’tmean you're excited~or ‘even ready ~ to manage a project. And that’s fair! But sometimes you have to take on the role while also producing threatening the digital sovereignty that the principles ‘of GDPR seeks toensure, Dousersofthesecloud services still have full control and ttanspatency over their customers? data? What's ‘moto, can you ensure digital sovereignty for your awn, customers if you are using proprietary software that inherently limitsyour control overthe data, interfaces, source cade or jurisdiction? I would argue not. Thankfully though, there isan alternative OPEN FOR BUSINESS Open sourceiskey todecentralisingtheweb and taking back contrlofdatafrumthebigtech firms. Governmental institutionsand companiesin Europe risk losing control fof their data, By companies urilising open-source projects and government institutions funding open~ source projects, we ean remove the dependencies on large US firms that consume huge volumes of private data asa business model Open source isnota new idea. Open-source software (where the source code is released under a license in ‘which the copyright holder grants users the rights to study, change and distribute itis often developed in a collaborative publicmanner. The main barrier to open source adoption over the years has been its historic reputation ~iethat the open-source commanityis made upof individual developers coding from thelr mums? ‘pasements ~ but, in 2029, things have changed ‘Today, open source sig business. Microsoft acquired GitHub in 2018 for $7500; IBM bought Red Hat last year for $34bn, Most of the software we use today has some element of open sourcewithin i, in fact Linux servers have been in use for many years. fyou havean Android phone or a WordPress website, they are running on ‘open source. So how does open source enable businesses to be digitally sovereign? ‘@ Transpazency: Only open souece can guarantee full control and transparency over their application and its data ‘© Froadom of choice: With open source thereis no vendor lock-in. You have freedom of choice with who you host youirdatawith. Youare free tomavebetween vendors fr support yourself. You have a choice to host on premise or in the coud. ‘© Standardisation: Providing standard open-source software for standard services and problems means ‘hat we reduce the effort needed when it comes ta providing ‘commodity’ services. {© Shared knowledge: By building open communities around software, weare sharing knowledgeand stills that reduce these pockets of proprietary knowledge. ‘ security: You have visible access to the eode base ta run your own security audits or compliance checks, 22 net march 2020 A FRESH LOOK AT OPEN SOURCE For organisations of all sizes, there are ample reasons to1ake another lookat what open-source soktions could bring to the table. For growing organisations, open source enables you to scale up without simultaneously scaling up costs on user licences, The first stop isto audit the systems you currently nave = or plan to have ~ chat hold or process customer data. Then look atthe alternative solutions available, including open-source options. Get invelvedwith some relevant open-source communities to ensure that the solution you are considering has an active, stable community behind it that has lots of traction and is ‘updating regulary. ‘CRM data is the heart ofany organisation and a good place to start for most. With open-source CRM, ‘organisations can ensure theiedataiscompletely within their control and maintain their digital sovereignty, ‘Next, organisations could lock at utilising open-source solutions for groupware services such as email and document storage (thus, side-stepping proprietary cloud solutions such as Google Drive). Things like analyties, security ~ basically anything that consumes, stores ot processes customer data ~ should also be considered. European organisations and public institutions need to-assess their IT strategy and look at opportunities to fembed open source to meat the following objectives: (© Maximise innovation through these ofopen source forcontributing to open source ‘© Fully assess the daca security and privacy risks to individual citizens or customers ‘© Reduce the dependencies they have on singularlarge Us vendors Ata government level, we shouldn't be funding the ‘evelopment of proprietary software and creating ‘dependencies that we can't easily escape. If, instead, government funding was devoted ta investing in op Source projects, public money would be spent for public {g00d, providing mare control and removingour growing ‘dependencies on overseas tech giants. Digital sovereignty is something that can stil be achieved in Europe. Asa regulatory powerhouse, GDPR \wasa great stride in the direction of digital sovereignty ‘but much still needs tobe done. Europe should be looking at open source not only to reduce its total cost of ‘ownership but alsoas an enabler of digital sovereignty and data privacy.) uray CED of Sales ands responsible fo he company states roth plarsanaincseves adnan esac ONS eel esa Visit blacknight.com/dedicated #CLOUD #DEDICATED #COLOCATION 7 Kno FU Taking care of business since 2003 Cent eC) Leno Pome ol Taal see ete leg SHOW, DON’T TELL People see stats (both accurate and inaccurate) more than ever before. Adam Lee asks whether that has changed the way we discuss insight ‘We're approaching a tipping point in terms of understanding data, which is awesome. Data practitioners have worked hard to demonstrate that data and Insight aren't just mountains of intangible numbers or impenetrable reports, We've fought to take the data ro the people! We've shown the power that can exist in insight, when the data story is told in an engaging and relevant way. We're also sesing publicawareness of data grow. Using NOW Corpus, the online news keyword analysis tool, wecan see thatthe use ff the torm data’ in the news has grown 70 percentsince oo (from 21 timespermilion words to 429 times per million). With that growth of awareness can come fear and nervousness ofthe pervasivenessof data and itsuses, And some of that fear is well-founded Sowe have tobe data advocates ina manner thacis both engaging and eehical, ‘What does that have to do with dara and insight in experimentation? Well, explanations ofexperimentation run therisk ‘ofheing focused on statistical rigourand data 2h net march 2020 Utiven logic, especially ifyou'rejusttellinga client about an outcome. This ean make experimentation appearhardertounderstand than i needs to be and therefore harder to demonstrate the commercial value ef Intuen, itcanbecome easy forstakeholders to view experimentation asa nice-to-have but not as a critical part in organisational evolution, And then... we're asked to tell clientshow much thar'sworth, Which means we've now got ta devise and present a story ‘hat isnot onlyengagingand ethical butalso commercially convincing Well, why shouldn't we be asked to? The client has heen asked to pay a lor of money forthese services, How much that’s worth is an incredibly tough question to answer. Sometimesa rate card figutejustdoesnt give ‘he context needed, TRANSPARENCY IS KEY It's time to show the workings. Be clear and ethical about what significances and Liketthoodsmean, model any potential gains responsibly and ensure chat any effective {decay is alwaysin place. Deliver a truesense of what success and risk could mean. (A 80 per cent likelihood of ane outcome ceurting does not mean the ather outcome will ever hhappen. Say thisoverand over Print banners) Clacity is critica Language like ‘win; ose} ‘success? and “failuto’ makes ic immediately difficult to showwidervalueand makeitveryeasy tostip into the “tell tap", You'll find i near Impossible to talk about a “lasing” test in positive terms. This shouldn't be the case, Experimentation delivers knowledge youcan show, Winningand losing can beaclosed loop but knowledge grows. Knowledge expands. Showing yourthinkingaroundthesituation will enable you toexpand on those tsts that Aidn’t performasexpected and highlightany positives that have arisen as a result. For example: "Thechangeen thispartof thesite ‘may not have resulted in the outcome expected but the behaviour wo're seeing suggests thac if we considered thisas parcot a change to your media strategy, that may havea powecfulimpact” USE THE DATA ‘This isn't spinninga bad result Is setting expectations and showing benefit in a way thatenablesclientstograsp thevalueof what you're sharing ~ which goes for any knowledge-generacing discipline. {Use data and insight (from all of your connected disciplines) to show what the potential opportunity looks like. Evidence ‘your success with previous clientsand show how you usedataandinsighein order to make things happen. ‘This approach meons youdevelop the value of knowledge (no matter if you've ‘won’ or ‘tas’, Discussionsbecomemore collaborative and wide-ranging. By showing this, you become more successful at_gaining stakeholder trust Showing the most powerful thingspossible~ the‘so what’ and the‘what next ~ gains the belief of the client in the ability to deliver on an ineteasingly broad scale In 2020, that’s our challenge: to show, not tll, exaetly how insight and opeimisation can reach outside of the boundaries of experimentation. BL peste sonmartemon of arn frcere nate sey women SPL AGE CHANNELS | PLAN WEARABLE Te aD BUILD A BETTER TRET. tscisisis 0 THE ULTIMATE /-Zy if? ORDER HOTLINE: Wi VOICES aired my eter front and deloper apne iryy arene | { > Pee i vi Charlie Gerard Words by Oliver Lindberg From flying drones with her thoughts to fashioning interactive clothing, creative technologist Charlie Gerard gives us an insight into her many side projects and explains how front-end devs can get started with machine learning Charlie Gerard is fascinated with human-computer interaction, in particular how you can use web {ectinologies in unusual ways outside of the browser. She realised that if there's an API or JavaScript framework, youdon’t actually have touse devices as they were intended but instead you can hack them and build your oxn prototypes. For her first side projec, she controlled a Sphero robotic ball with a Leap Motion and a sprinkle of Node,js in order to make it move with hand gestures. It eventually led her to wow conference audiences around the world with a talk about controlling ¢hings with the brain using)S. “Twas researching other devices I could buy and came across brain sensors,” Gerard remembers. “Ibecame interested in neurotechnology and it really opened 28 net march 2020 uupa world forme. Thad absolutely no idea that you could just buy abrain sensorand that asadev [could build something with it As soon as I discovered that, Thad to tell people.” Gerard learned that some sensors like the NeuroSky giveyou access to raw data, which can be used for machine learning, Others give you access to mental commands or facial expressions, making it possible tointeract with awebinterface {hough eye movernents. At the time there ‘wasn’t aJavaScript framework to use with the Emotiv Epoc sensor, so to build an. interface, Gerard wrote her own open= source JavaScript framework, based on the sensor's C+ SDK, as well asa Node, js. adil-on. It enabled other developers to play around with chis technology without having to learn C+ or Java. The ‘experiments she built with it include a brain keyboard (ook right or left to highlight a letter, blink to select and display icin the input field), pushing a three js 3D cube and even flying a mini rone with mental commands. Gerard became more interested in ‘machine learning and found it wasn't as scary sit seems. “AC frst thought only data scientists would understand,” she ‘explains, “But understanding the basics ‘doesn’t actually take that long. It's about coming upwith an idea and starting with a small goal, then divinga bit deeper.” Front-end developers can try out ‘machine learning through open-source JavaScript libraries such as mis.js and Tensortlow.j, developed by Google. The latter currently offers three features: using a pre-trained model, transfer learning and defining, training and runninga model entirely in the bowser, all in JavaScript (for a more detailed ‘explanation, it's worth having a read of Gerard's SmashingMagaine article: wna. Stuashinamagozinecony/2019/oa/machine- learning=front-end=develapers~ tensa). “Go in steps, use a pre-trained model first and then combine it with custom training data before doing everything in thebrowser,” Gerard advises, “It requires a bit of knowledge and the taining can takealot of ime. Doing allin Javascript js interesting if you wanted to visualise the training processand how the accuracy of the predictions change over time but ‘you probably would fallback to Python it you were building something for prodiction because t's faster. Soit's still ‘very early stages for web developers. Most of hem are building experiments to learn more about machine learning but now more and more peopleare joininigbecause they realise it’s doable in JavaScript.” For one of her creative coding experiments, Gerard added detection model PoseNet, which recognises body shapes in images and videos, to ‘TonsorFlowjs so that she could play VR game Beat Saber inthe browser just with her hand movernents- without the need for expensive equipment. She also protetyped a gesture recognition system ore coe Image. toFloat() .div(t#.scalar(127)) sub( Coren a ostne edevdevenarle with an Arduino microcontroller and ‘TensotFlow jsto play Street Fighter with body movements. The latter combines machine learning with another one of Gerard’s passions: hardware. And this features quite heavily in her projects, for example when she built wearable interfaces in JavaScript to use clothes as an input device. "I came acrosscond thread, which is embedded with steel,” Gerard explains, “If you attach a microcontroller, you can got data from it just as if you plugged in a wire. So when your body comes in contact with the read, you can use that as an input. It's really flexible and easy toworkwith. You an sew i inta clothes, a pill ‘ora couch ~ anywhere that you have fabric a towel SCL erenn ee ~ and make them interactive, You could ‘even embed itall around your house and create your own way of interacting with interfaces or devices without having to pick up your phone Gerard builds her prototypes in her persot doesn’t 1 time to learn technologies she ‘touseat work, A senior front= end developer by day, she's had roles at ThoughtWorks, the Now York Times and most recently Atlassian, where she focused on improving the user experience of project management software Jira. Now she's about to join Netlfy in Amsterdam, Astonishingly, Gerard ~ also a Google developer expert ~ only moved into web five years ago. Having started out in advertising as a digital producer (a type of project manager) at a fow agencies in Paris and Sydney, she worked with developers at a time when 3D realised she was more excited about the interfaces they were building than her ‘own job, so she decided to quit and enrol imar2-week General Assembly bootcamp, development me to the browser via WebGL, She net march 2020 29 D> Iewasone of the best decisions of her life “Initially, [tried tolearn tocode by myself after work,” she remembers, “But when you don't know anything about an area, you don’t even know what to Google. 1 knew what HTML was but I didn't know how to add JavaScript to a website. I thought if the bootcamp didn’twork out, 1 could always go back to my job as a project manager. At least I would better understand what my developers were doing. But I really iked that feeling of writing a piece of code and it does something in frontof you, [still feel that with hardware now. | loved it and never went back.” While the problems Gerard solves in her side projects are often harder than the ones at work, whenever she writesa blog post or speaks at conferences, her goal is to demonstrate that nothing is inaccessible. “I'm really excited about that,” sheexplains. “The research papers I read to inspite me to build something are really hard to understand. They're written ina very scientific way but they're needlessly complicated. You could break it down and make it so much easier. Anybody can come up with a good idea and build something interesting if they know that a certain technology is accessible. Otherwise you just fel blocked by thinking it’s too hard and you're not leven going to try.” ‘And so there's seemingly no limit to Gerard’s side projects. There's always something new todiscover. She maintains alistof potential prototypes she wants to work on (for example, interacting with the electrical signals in plants) and researches a wide range of topics. “I like tomix more than justtech, so1den'tonly read news about front-end development and JavaScript. | follow what research centres like the MIT Media Lab or Disney's labs do. I spend a lot of time exploring their projects and if they're not open source, they at least give me an idea of hat researchers are looking inte. I then thinkabout a way to makeit happen with web technologies. If there's a project about interactive textiles, | think about hhow to build something that’s a bit more helpful to people with motion impairments, for example, lalways try to 30 net march 2020 find a different angle and that usually leads me to the next thing.” ‘When Gerard bought her second brain sensor, it was entirely open source, exposing her to a lot of raw data. She realised she couldn't really do anything with it until she knew more about ‘machine learningand so that has become her focus over the last year. She's currently looking into different kinds of data that can be used for machine learning, For her Beat Saber experiment, she used camera data, while her Street Fighter demo used accelerometer and gyroscope data, Now she’s exploring sound. “If you build a spectrogram out of sound data, you can see the difference in patterns between when you're speaking, knockingon adooror chopping carrots. As microphones are all around us, in laptops, phonesandsmartwatches, youcan build software to recognise these patterns without changing your hardware and buying expensive smart devices for your home. So you could automatically Pause your TV when your phone is ringing ‘or pause a video on your iPad when you're ‘cooking and the system hears the sound of chopping.” As usual when tinkering with new technology, Gerard not only notes the ‘oppostunities but also the limitations. For example, to work with machine learning data, you need lots of samples and it’s lmmportant that you check their quality “When you train your algorithm, remember itsjust apiece code," Gerard advises. “It's not actually smart. It'sgoing to find pattems but you might notalways understand why it’s predicted someching, ‘Thereisalot of trial and error. Sometimes ‘you may have ta go back and, far example, check your data is labelled correctly to reguide the algorithm.” ‘The more Gerard looks into new types cof human-computer interaction, the more she finds keyboards and phones to be quite restrictive. “There are so many ways that you could make your house adapt ‘more to the way you live your life,” she points out. “You could make your environment alot more playfulanda lot smarter than it is now. I'm endlessly fascinated by coming up with creative ways of doing things that we didn’t know wecould do. Making adeviceworl for you is so much mote exciting than just learning how to use it.” SMOOTH SITE MIGRATION Andrew Armitage shares the key things to consider when migrating a website to a new platform ‘Website migration projects are full of promise. Switching toa new platform is a chance to address the drawbacks in your legacy site and breathe new life and enthusiasm into your digital strategy. ‘Sowhat are someot the things you shoul consider to ensure a suecessful migration? WHY MIGRATE? ‘Theremaybe several reasons for migrating to a now platform, Identifying specific goals will impact on the platform you choose and your approach todevelopment, as well as providing a measure for the project's success. Simply switching your website to new technology isn'ta fix for ‘poor process; it won't suddenly enable you to write more blog posts but ie may make the process more efficient. 32, net march 2020 Choosinganew platform ésn’ceasy. There will be opinions from other developers for colleagues and the matketplace is littered with technical terms beyond the knowledge of most of those responsible for making the buying decision. Howover, most migration projects have a core set of generic requirements: the future road map of the replacement platform, performance and security, affordable cost of ownership and eace of use KEEP THE GOOD STUFF ‘The users of a platform in a migration project will primarily be those publishing and managing content on the site. I's natural during any discovery process to 'want to explore things that aren't working with the platform. However, i's equally Important to exposeany positive feedback The last ching you want to learn during the ‘development phase in a migration is that ‘one of the best features of the old site ‘won't exist in the new one. AUDIT EVERYTHING Is easy to get excited about the ‘opportunities a migration project provides but everything on the legacy site still needs to be auclted; content, connections to third-party tools, Analytics or Tag Manager setup, reporting, search engine visibility and performance. Only once all these are fully understood will it be possible to determine the scope of the project and define the success eriteria SEARCH ENGINE VISIBILITY Poventially the most crucial aspect ‘of a migration project is maintaining search-engine visibility. While there is ‘opportunity to improve SEO-friendiiness in a migration, existing page titles and ‘oseriptions shoukin't be overlooked and ‘any new markup should at least mirror ‘existing heading, structures. Setting up redirects with a 301 status (permanently moved) where pages have moved t0 a new URLiscommon practicebut few migrations ‘consider image searches, which can drive significant volumes of traffic. Bor other pages, setting a 410 (gone) status instead ‘of a default 404 (not found) can improve the visitor experience, although there's no indication this impacts on the wider ranking of your sie PREPARE TO GO LIVE During the closing stagesof the migration, performance tests should benchmark ‘current page load speeds and search indexing so you can measure the technical success of the migration. Prior to the new site going live, pause any ad campaigns and update target URLs to avoid ads being suspended, Tools such as Google Search Console will help monitor page indexing going forwards but ideally URL redirsets should be checked daily following the launch to give the best chance of staying ‘one step ahead of Google's crawlers. Arg thers ofA Dpto whe spc ‘amigo tates tCoft CS ox we but seb cps and recive dpe aa, ead TB isro em neteamentec LI SPITTEL The teacher, podcaster and speaker is on a mission to teach code ina way that’s not intimidating Could you introduce yourself to anyone who doesn’t know you? Hil 'm Al, Lwork asa lead instructor at General ‘Assembly, where I teach new programmers tobe software engineers. Lalso havea blog geared towards new programmers ~ welegrncod com ~ and I co-host the Ladybug Podeast, ve also been a software engineer at a couple of startups. Outside of work 1am digital nomad, so [travel alot and live aut of Airnbs with mydog Bia ‘You're known for your passion for teaching code. ‘Where does that passion come from? ‘My passion for teaching code comes from two angles First, learned how to code in computer science 101 class in college, which was lot later than a lt of ry poers. Loved it initially but when [took mare advanced classes [really struggled because of the teaching styleand the expectation of pre-cellage computer science, which I didn't have access to sgrowingup, Second, | studied education in college and would ‘have minored init f Thad’t left school early co become a software engineer, which isa whole ifferent story. ove how practical and comparatively aceessible bootcamp education is versus college and 1'm really glad Thave the chance to teach at one. ‘What led you to write your new ebook and why should people downloa 1 gee questions all day every day asking for my advice fn learning to code and L wanted a way to put all my thoughts in ane place. I wrote about a the things I wish I knew before learning to code. [talk about factors like finding. learning path; the science behind learning anything new; how challenging itis; the softer skills ike networking and working past impostor syndrome. hope it motivares new programmers to stick with it, while aso giving ‘experienced programmers some coos to empathise with newer programmers and whae it is that chey're eoing chrough Your blog posts have attracted more than a million eyeballs, What's your secret to attracting an audience with your writing? | write my blog posts for my past self: the gil who was struggling in a computer science classroom and who fetta lot of impostor syndrome at my first programming job. Even though most of my posts are technical, [try to break down concepts and jargon, write ina conversational tone and appeal to multiple learning styles. think that being open about my struggles and using my Ceaching backround to make ‘resources that are educationally solid is something ‘that resonates with people, ‘What have been the best and worst things about working as a digital nomad? The best part is defintely being able to live in different cities all over the country. get to see different sights, get local food and meet new people all the cine. When Tm ina city long-term, I never see all the sights because I'm free to ge to them any time; there's more pressure to visit things when 'm only in the ety for a limited time. The hard partis having to figure ‘everything out all over again when | move somewhere: here t0 eat, where co walk my dog, who to hang out with and so on. I's a fun adventuce for sure but the goal isto find my dream city to settle down in ‘What's exciting you most inthe field of web design right now? Tam really excited about WebAssembly: Love building art with code and I think WebAssembly willbe huge for making that more performant, plus having some language comperition on the front-end will bea welcome change. net march 2020.33 OTT HOW DO YOU EXPECT YOUR JOB WILL CHANGE BY 2030? Our panel imagines what the web design and development world will look like a decade from now BEN g ) iinonau I nen ss taper nding With the se nvetualrealityand augmented realty limagine that by 2030 websites and beowsars willhave begun to adapt the technology for ‘ur daly intemnet usage. This means I'd then be coating 20 representations of wabsltes for people to suff. Ths could nave load of practical uses, such asin retail with customers being able to see the clathes they are shopping for an madels of themselves. This technology isnt quite there yet but | think could be in the next couple of years ALLL ASTELL Founder, Manage My Website 7 A decade is a long time in web design. | started specialising in Squarespace 10 years ago when WordPress was king, soit was a struggle to persuade clients to go down this unknown route. Now Squarespace has millions of customers. Facebook is now for the ‘oldies’, when 10 years ago we youngsters were trying it out for the very the first time. What's next and will my ageing brain be able to cope? Who knows but I'm excited to find out. 34 net march 2020 KIM MAIDA Head of developer relations, Butho Developer relations — or “DevRel’ - is a new-ish function for forging connections between companies and the developer community. [A DevRel team interacts with the community at live events and online to build trust in a company or product.] By 2030, | would expect to see more specialisation. If you want to build products devs want, you need experts in strategy, technical sk marketing and product engine

    You might also like