Sommaire pour October 2019 de net

What data viz books would you recommend? Koustav Pal, Michigan, US For beginners + NB: My favourite for beginners is The Functional Art by Alberto Cairo. It covers many topics and you can make better data viz right after reading it. For intermediate + At intermediate level, I highly recommend Edward Tufte’s books, especially The Visual Display of Quantitative Information. They’re from the previous century but still gold. To learn D3.js specifically, check out Interactive Data Visualization for the Web by Scott Murray. For inspiration + For data viz inspiration, I like the books of Sandra Rendgen, including Understanding the World and those of Manuel Lima, such as Visual Journalism. If you’d like to learn more, you can find my full review of data viz books here: https:// www.visualcinnamon.com/resources/learning-data-visualization/books…

Info job: Valkhof is a UX developer who creates tools for developers and designers to make them happier, more productive and better at their job at Firstversionist, which he started this year. w: kilianvalkhof.com t: @kilianvalkhof SIDE PROJECT OF THE MONTH Tell us what Superposition does. Superposition (https://superposition.design) is a free desktop app that parses the styling of a website and creates ‘design tokens’. These are things like the colours, fonts and spacing you use in your design. Once the design tokens are parsed, you can export them to code (CSS, SCSS or JavaScript) or use them directly in Adobe XD (Sketch and Figma are coming soon). You can also copy directly by clicking on them. Why did you create it? Design systems help improve the design process. Unfortunately they’re out…

Print edition only Save up to 29% 12-month subscription (13 Issues) PRINT & DIGITAL BUNDLE Save up to 61% 12-month subscription (13 Issues) myfavouritemagazines.co.uk ORDER HOTLINE 0344 848 2852 *TERMS AND CONDITIONS: This offer entitles new subscribers to receive their first 5 issues for £5 for UK readers, 5 issues for €5 and 5 issues for $5 for overseas readers. After these issues, standard subscription pricing will apply – please see online for details. The biggest savings are compared with the overseas RRP. For all savings details see online offer page. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point…

David Dylan Thomas, a content strategist at Philadelphia-based experience design firm Think Company, first discovered his interest in cognitive biases when he saw Harvard professor Iris Bohnet give a talk called ‘Gender Equality by Design’ (netm.ag/bohnet) at South by Southwest in 2016. “It was the first time I really saw the connection between hiring bias – around gender and race – and pattern recognition,” he says. “Iris explained that this bias doesn’t always come from someone who is overtly sexist or racist but from people who have seen the same pattern all their lives. They almost can’t help but keep thinking in this pattern when they decide to hire somebody. It’s just stuck in their head. When I learned that something as evil as racial or sexual bias could be…

What’s on your desktop? We hot-desk at the office, so I travel light – just my MacBook Pro, reusable cup, notebook and water bottle. At home: a Wacom tablet (which I use instead of a mouse), a clunky old Apple monitor that serves as my second screen and (usually) a cup of tea. Little things that make your life worthwhile Websites: CSS Tricks, CodePen, Twitter Apps: VS Code, Illustrator, Spotify Audio: Vampire Weekend, Laura Marling, The Guilty Feminist podcast What’s on your walls? In my home office: gorgeous gold and cream wallpaper covered in safari animals, a set of retro 1980s-style prints by James White (AKA Signalnoise) and a signed Bat For Lashes poster. What will you do for lunch? The office has a pretty decent canteen, so usually I’ll…

ANASTASIA KASHKINOVA Kashkinova is a UI/UX designer and developer with five years of experience. On page 60, she shows you how you can follow in her footsteps and become a hybrid who both designs and develops. w: anastasia-kas.com RUTH HAMILTON Hamilton spent three years on the net team before becoming deputy editor of Creative Bloq. She reveals how to turn your side project into a major revenue stream on page 68. w: ruthemilyhamilton.wixsite.com/portfolio Richard Mattka Mattka is an award-winning designer and developer specialising in VFX. On page 76, he shares how you can animate 3D objects in-browser using three.js and GSAP. w: richardmattka.com t: @synergyseeker RAZVAN CREANGA Creanga is CEO and co-founder of hackajob, a company that promotes meritocracy in recruitment. He offers up this expertise on page 20, where he explains how…

HOWIE DEAN Creative director w: www.skywire.co.uk FIGMA What Google Docs did for the common ‘office’ document, Figma does for design. In terms of features (and even UI) it reminds me of Sketch, with one major bonus: live collaboration with multiple people – kind of like InVision and Sketch rolled into one. https://www.figma.com/ PRINCIPLE When I need to make an interaction demonstration without the interaction, Principle lets me create videos from Sketch files to illustrate the user journey, add in videos and demo scrolling content blocks. It’s also recently added support for Figma and a dark mode. https://principleformac.com ANIMA APP Anima makes creating dynamic interactive prototypes a doddle. A Sketch plugin makes the addition of videos and animation easy and I can also handoff code to developers in pure HTML, JS or…

Finding your perfect job isn’t easy. People often assume that if they brush up their CV, get in touch with a recruitment agency or set their LinkedIn to ‘open to opportunities, ’ the offers will start rolling in. But what if there was more that you could do in order to stand out from the crowd? I believe in hiring based entirely on skills, not CVs. How does this work? Let me fill you in… STRENGTHS FIRST The problem with traditional CVs is that they don’t always provide a clear picture of what you’re actually capable of. For example, you may be a JavaScript developer who also has experience working with iOS or you could be familiar with a wealth of popular platforms, yet your CV may tell an entirely…

Goodger is a midweight designer at ShopTalk London. He took the role of lead designer on the Bull’s-Eye site build. w: shoptalklondon.com Wilkinson is a junior designer based at ShopTalk London, where he has been working since September 2018. w: shoptalklondon.com CLOSE UP (1) The main part of the homepage is a dynamic video that greets the user with a insight into the brand’s ethos. It begins with a dramatic and panoramic Western scene of an American longhorn bull charging at a fence and powering through it. The action then switches to two friends enjoying Bull’s-Eye’s BBQ sauce on their outdoor barbecue and a final product shot. (2) The addition of an easily accessible navigation allows for a user friendly experience. The five main sections are ‘Our Products’, ‘BBQ Recipes’, ‘BBQ Tips’,…

1 Tap into natural passions Side projects give you space to explore interests that aren’t satisfied by your day job. So figure out what you’re passionate about and build a sideline around that. If your project isn’t motivated by genuine interest, chances are your enthusiasm is going to wane pretty quickly. 2 Start small It’s sensible to build up your sideline slowly. Not only does that reduce the risk of negatively impacting your finances or day job, it also gives you a chance to gauge whether the project you’ve picked really has legs. 3 Embrace the unknown It may seem scary but don’t be afraid of doing something totally different. Side projects are the perfect place for you to flex new muscles and learn new skills. Natural enthusiasm for the…

+ There are many time management tools available, collected together in this list for you to investigate. Some of these are not for everyone but perhaps a few might be useful to you. Pomodoro Technique https://en.wikipedia.org/wiki/Pomodoro_ Technique • A technique to turn working time into single-focus blocks, which ensures you get enough breaks to keep your mind fresh. Flowtime Technique https://netm.ag/2GDXQlM • A modification on the tenets of the Pomodoro Technique, doing away with the strict timers but keeping breaks and time tracking. Toggl https://toggl.com/ • A time-tracking application. Zapier https://zapier.com/ • Helps with connectivity between other apps and services. IFTTT https://ifttt.com/ • Another tool for harmonising work between apps and devices. Trello https://trello.com • A project management tool that focuses on lists of items. Basecamp https://basecamp.com • A project management tool that helps collaboration throughout the…

+ While working on this tutorial, I relied on several open-source libraries to make things easier. If you’d like to find out more about these or maybe use them in your own projects, please check out the links below and show the original content authors some love. I’ve also included some of the articles that I found useful when learning about service workers, in case you’d like to do a bit of further reading: JSON Server https://github.com/typicode/json-server A simple REST API to work with in development. Dexie https://dexie.org/ The nicest way to use IndexedDB that I’ve found so far. Parcel https://github.com/parcel-bundler/parcel Lets you jump in and start coding without spending ages setting a build process up. Workbox https://developers.google.com/web/tools/workbox/ Takes all of the headache out of caching logic and integrates easily…

THIS MONTH FEATURING… NADIEH BREMER Bremer is a freelance data visualisation designer and artist. She frequently uses storytelling techniques for complex data and static visualisations. w: visualcinnamon.com t: @NadiehBremer HEYDON PICKERING Pickering is a freelance inclusive design consultant. He wrote Inclusive Design Patterns and his drawing of a ‘crocoduck’ is part of the W3C HTML spec. w: www.heydonworks.com t: @heydonworks QUESTION OF THE MONTH Do you have to be a data scientist to work with data viz? Where do I start? Lee Warrick, Florida, US NB: Definitely not! People come to data viz from all directions. Yes, there are data scientists but also many people with a design background. In fact, I’ve heard of people from the most diverse backgrounds taking up the disciplines. The most important skill that I think you need…

GOOGLE CHROME UPDATE + The latest version of Chrome 76 (at the time of writing) brings a number of improvements but perhaps the most useful is the management of Google Accounts on Chromebook. Found under Google Accounts in Settings, you can more easily login to your accounts and see which ones you are using on your device and across Chrome and Play Store apps. https://netm.ag/2Zaf8S8 APPLE RELEASES SIXTH DEVELOPER BETA BUILDS + Apple has released the sixth beta builds of iOS 13, iPadOS 13, watchOS 6, and tvOS 13. Builds of each OS can be downloaded from the Apple Developer Center (https://developer.apple.com/) by those taking part in the testing program. A public beta is typically available shortly after the developer version, via the Apple Beta Software Program (https://beta.apple.com/sp/betaprogram/). https://netm.ag/2Msv5Nn ADOBE…

We read a lot about what an important role prototypes play in the design process but when you go to use one, you discover that there is a vast range of choices out there, with people all using different options. So exactly how are you supposed to decide what is best for you? To get some clarity, we decided to ask @netmag’s followers ‘What are the tools and techniques you use to help create a prototype that ensures you get the end product that you want?’ and see what they thought. PLAN OUT WIREFRAMES @HeX_Productions says: “If we’re talking about websites, we always use Adobe XD to plan out wireframes and to make sure that everything flows well and all pages are mapped out effectively. Then it’s all about team…

Today’s young people are growing up in a radically different world. They are more plugged in than ever, emulating the adults around them who work, relax and socialise online. Once they reach working age, this is unlikely to change. New technologies, such as artificial intelligence (AI), virtual reality and cloud computing, will radically alter our workplaces, including the types of roles available and skills needed. To equip the next generation to deal with these changes, there has been a big push on teaching coding within schools. At the start of this year, The Institute of Coding, supported by the UK government, announced £5m in funding for six universities to launch local digital skills initiatives. This in itself has proved controversial: OECD education chief Andreas Schleicher recently hit the headlines after…

CLARE CRYER Web officer, Harrogate Borough Council www.harrogate.gov.uk I’m a fan of Jadu Continuum CMS. It’s a sophisticated, yet simple to use platform from which non-technical authors can easily publish information. It’s continuously updated so there’s no need to upgrade. Maintenance is iterative and ongoing and therefore disruption is kept to a minimum. The platform also has a big focus on accessibility, which is our main priority. We pride ourselves on our website being 100 per cent AA and AAA compliant and the Jadu CMS plays a big part in that. RASHID MOHAMMED Developer, Blue Digital www.bluedigital.co.uk WordPress is customisable, very extensible and suitable for users of all levels. For these reasons, it is the go-to CMS for most web projects we work on. The front-end can be customised with…

Billen is a freelance writer who has been writing about web design and technology for over 15 years. w: markbillen.com t: @Mark_Billen HTML5, NODE.JS, NGINX EVA ttps://www.canyouhelpme.lv Enticing new developer talent is a big challenge for the digital industry. As a result, agencies are using increasingly inventive ways to attract interest and build pools of prospective candidates. This is the aim of EVA, a microsite from Latvia’s Scandiweb – an ecommerce development firm claiming to have the world’s most certified Magento team. Effectively a recruitment casting call, the site takes the form of a mysterious chat client pleading for the help of IT students. By clicking or tapping a series of multiple-choice responses, visitors engage with EVA’s robotic avatar and answer a developer question to progress. Neatly simulating the conversation threads…

css-irl.info CSS Grid is quite simply the biggest story in web design right now. Giving developers the tools to build complex layouts with relatively little code, it represents a revolutionary step forward in providing control over layout behaviour, in a responsive world. There is, of course, a learning curve involved. Which is why we had to have Michelle Barker as one of the key speakers at our forthcoming Generate CSS conference (on 26 September in Shoreditch, London). A Mozilla Tech Speaker, author of the CSS {In Real Life} blog and passionate advocate for CSS Grid, Barker’s talk will identify the most common issues designers face in adopting it and how to overcome them. Read on, as she reveals how she fell in love with CSS, discusses her work at Mud…

w: richardmattka.com t: @synergyseeker job: Creative director, designer, developer areas of expertise: Shaders, VFX, WebGL WebGL is a JavaScript API that enables you to create interactive 2D and 3D graphics in a web browser. It enables complex images, animations and physics simulations, all inside an HTML <canvas> element. It is a web standard designed and maintained by the non-profit Khronos Group, which means you can create GPU-accelerated experiences right in the browser, without the need for thirdparty plugins, unlike the previous media days of Flash. Users now have instant access to beautiful experiences right in their browser and right in the palm of their hand. In this article we’re going to be exploring how to create a 3D scene in WebGL using three.js, the world’s most popular WebGL 3D library. You’ll…

w: jeffreyleesmith.com t: @jeffreylees job: Web consultant areas of expertise: Content creation and strategy, project management, full stack PHP development Everyone has too many things to get done. There are, in any given person’s life, an almost endless amount of tasks, projects and things to do. They range from the boring (routine work tasks, mowing a lawn or doing homework) through the fun (a date, a game, playing with the kids) to the original (a challenging new project at work, a senior thesis or planning a party). No matter what, though, you can create more free time if you think carefully about managing your time. Time management is almost no one’s favourite topic to discuss. It brings to mind schedules and lists, often triggers yawns and perhaps causes some of us…

w: http://mstrutt.co.uk t: @_mstrutt job: Senior developer at Potato (https://p.ota.to) areas of expertise: JavaScript, HTML, CSS In this tutorial, we’ll use a contacts app as an example for how to implement offline data storage. We’ll then look at using background sync to handle failed network requests and available methods to keep the user informed. For data-driven apps using a service worker, IndexedDB is great. We’ll also use Dexie for IndexedDB’s power in a promise-based interface. In order to keep the multiple JavaScript contexts in sync, we’ll use a shared setup file for the database. In dexie-setup.js, we define the Object stores and versions we need. Let’s add a new store for our app: const db = new Dexie(‘pwa-tutorial’); db.version(1).stores({ contacts: ‘id, name, email, phone’ }); We have one version to start…

contact us FEATURED HOST “We have several servers from Netcetera and the network connectivity is top-notch – great uptime and speed is never an issue. We would highly recommend Netcetera” Suzy Bean EXPERT TIP CLOUD TECH TIP… If you’re going to fully utilise cloud technology, before deciding on a service provider ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; an underutilised cloud will be a waste of money. Netcetera provides hosting from one of the most energyefficient datacentres in Europe, all powered by green energy. It offers everything from reliable low-cost hosting for a single site right through to complex cloud racks and managed IT solutions. One of its most popular products is its Managed…