0% found this document useful (0 votes)
533 views100 pages(FreeCourseWeb - Com) Net - March.2020
Uploaded by
Manuel CastroCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
533 views100 pages(FreeCourseWeb - Com) Net - March.2020
Uploaded by
Manuel CastroCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 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
[email protected]
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
