Tabla de contenidos para April 2020 en net

Over the last 26 issues, steering net has brought me a huge amount of pride and joy. We’ve explored a wide range of topics, including AI, CSS grid, JS frameworks, three.js, UI, UX and so much more. However, all good things must come to an end and this will be my last issue as net’s editor. But there’s plenty of good news: for the gadget inclined among you, I’ll be taking the helm as editor of T3, so I hope we see each other there! And I’ll be leaving all of you in the most capable hands: Steve Jenkins, editor of net’s erstwhile sister title Web Designer, will be taking up the reins and bringing his 20 years of web design expertise to future issues. And we’ve pulled out all…

THIS MONTH FEATURING… J CORNELIUS Cornelius is the founder and president of Nine Labs, a digital product strategy, design and experience consultancy operating in Atlanta and New York City. w: www.ninelabs.com t: @jc LARA HOGAN Hogan is a management/leadership coach and trainer at Wherewithall. She is also the author of the bestselling book Resilient Management. w: resilient-management.com t: @lara_hogan QUESTION OF THE MONTH How do you foster good communications between design and development when they often speak a different language to each other? Sush Kelly, Birmingham, UK LH: In the multitude of skills that factor in to being a solid cross-functional communicator, there’s one big one we often overlook: figuring out what our colleagues primarily care about. By default, we each tend to communicate clearly about what we think is most important…

+ EVERYTHING YOU NEED TO KNOW ABOUT GREEN UX While you merrily browse the internet and shop online, it can be easy to forget that your actions take their toll on the real world. Fortunately it isn’t a complete lost cause. This article takes a look at how UX designers can create sustainable, accessible sites that will contribute towards a positive change. https://netm.ag/30rt08K + NAVIGATING THE WEB WITH A GAMEPAD Chances are you use a mouse, touchpad or keyboard to make your way around the web. But what if you fancy something different and have a spare gamepad to hand? This tutorial shows you how to connect a gamepad to your computer and then convert it into an intuitive net navigation tool. https://netm.ag/35Uh9kN + DARK ISN’T JUST A MODE Dark…

Pretty much every website will incorporate a button in one shape or form, whether it’s asking users to click ‘add to basket’ when making purchases or to sign up to push notifications. But how do you go about designing a button that visitors can click with confidence? We asked @netmag’s followers to share their thoughts on the best way to achieve this. KEEP IT SIMPLE Okay, so it may sound like button design 101 but @DastardlyBeard makes the very good point that a button should always lead to the location that people want to go. “Don’t overthink the rest. If you have done the right job of understanding what people are trying to do, the button is just a well-placed signpost.” MAKE THEM ACCESSIBLE In terms of accessibility, @liamthorpeyoung says:…

MARK BILLEN Billen is a freelance writer who has been writing about web design and technology for over 15 years. w: markbillen.com t: @Mark_Billen GATSBY JS, GSAP, CSS TEAMGEEK – YEAR IN REVIEW (2019) https://2019.teamgeek.io It’s always wise to take stock every so often and reflect on your achievements. This is essentially what this in-house creation by South African branding agency TEAMGEEK does – it’s a charming retelling of what the agency got up to in 2019. The content is mainly imagery, with team photos and project screenshots floating through the viewport. Caption text provides the context, while a bevy of the year’s most fashionable UI effects delights the eye. All linked to an endlessly elegant scroll, the parallax clash of headers and <img> elements is a highlight. Rendered in New…

What’s on your desktop today? I rarely sit at my desk, preferring instead to sit on a sofa out of the way. On my desk are a few wires, a bottle and Post-it notes. Three little things that make your life worthwhile. A seat on the train, plugging in a USB cable first time, coffee. What do you have on the walls? At work, nothing. At home, I have the worst wallpaper in the universe. What will you do for lunch? Usually something from Tesco, although I was drinking Huel [a nutritionally complete, powdered food] for a bit. When at home, I tend to eat something that’s homemade. What hours do you work? It varies. I do more when working from home but an office day is 7am-4pm. I don’t…

The Lean Web https://leanweb.dev/ebook Chris Ferdinandi has written an excellent book that describes how you can apply sensible design principles to make robust websites. Even better, you can read the whole thing online for free. Resilient Web Design https://resilientwebdesign.com I’ve written a book too! Resilient Web Design examines in detail the history of the web’s layers. The book is actually a website that works offline. It’s yours for free and can be accessed in various ways. Stimulus.js https://stimulusjs.org This JavaScript library describes itself as: “A modest JavaScript framework for the HTML you already have”. It’s designed to enhance your existing markup by layering behaviour on top of that solid baseline. TurboLinks https://github.com/turbolinks/turbolinks TurboLinks is a drop-in script for adding Ajax page transitions to websites. Provide the user experience of a…

ABOUT THE AUTHOR BEN READ t: @muzzlehatch_ job: Developer areas of expertise: JavaScript, React and UX FOR MORE REACT TESTING TIPS, CHECK OUT NET 327 https://netm.ag/issue327 In net 327, we walked through how to use the React Testing Library to write basic unit tests for React components (https://netm.ag/issue327). In this article we’re going to dive deeper and demonstrate how to write tests for some code that fetches data from an API. I hope you’ll learn some more things to help you ensure that all of your code is production-ready, which will give you and your stakeholders more confidence when publishing new code. DECIDE WHAT TO TEST Before we even begin writing tests, it’s good to take some time to decide what needs to be tested. We need to set clear…

JEREMY KEITH Keith is one of the founders of the splendid design agency Clearleft and the author of various books. On page 60, he shows you how HTML, CSS and JS fit together and how to use the best tool for the task at hand. w: adactio.com ADDY OSMANI Osmani is an engineering manager working on Google Chrome; he leads teams working on tools to measure site performance. Who better to run you through boosting your PageSpeed Insights score on page 68? w: https://addyosmani.com ROB SANDBACH Sandbach is managing director of Indiespring, a digital agency based in Manchester. On page 20, he outlines how the UK should leverage both its soft and hard skills to remain competitive overseas. w: https://indiespring.com MARK SHUFFLEBOTTOM Shufflebottom is a professor of interaction design at Sheridan College. He…

Aside from your own book, are there any complementary resources that can help me be a better manager? Bryan Bowes, Leeds, UK LH: For sure: I include links to additional complementary resources, including free worksheets and tools, in my newsletter. In the meantime, I recommend checking out the following: 1. Book Switch: How to Change Things When Change Is Hard by Chip and Dan Heath, explains how to create change when you have few resources and no title or authority to back you up. 2. Manager toolkit Wherewithall’s New Manager Toolkit (https://wherewithall.com/tools/#care) is a physical set of tools and plans for action, designed to equip new managers with everything they need to do in their first 30 days. 3. Start pack One-to-ones are vital to building trust but what are…

BEYOND PIXELS You can say that art is everywhere. However, whether you see it every day in your life or not genuinely depends on your perspective. For me, it intertwines around the front-end layer of your digital screens. My professional life revolves around email. I work with the presentation layer – the one that most consumers see and interact with in their daily lives. Holistically, everything visual is built around a foundation (a MIME type to start with), especially when you are working on large-scale email marketing platforms where logic and data interlace together. Taking the time to build something from nothing (I do a lot of hand coding) is precisely why my figure drawing and digital art are such important hobbies to me. I technically started as a child…

Landing your first role as a designer can be challenging but in this article I’ll give you the best advice I can about how to kick-start your experience design career. Whether you’re wondering where you go after walking out of the union building for the last time or you have a couple of years of design experience, I’ve made a list of five essential areas that are invaluable to propelling your career forwards. GET OUT THERE If you take nothing else away from this article, don’t ignore this: you need to be the first name on someone’s brain list when an opportunity explodes. And there are specific ways to worm your way into people’s brains. First things first, get on board with the User Experience Professionals Association (UXPA) and Interaction…

CHRISTOPHER SAICH Digital director, YCS Digital (part of the Chemistry Works) ycsdigital.com One tool that’s made a massive difference to our work is www.invisionapp.com. It’s a great solution for bringing apps or websites to life when you’re working in the prototype stage of a project. When we need to move from wireframes to the design layout, InVision helps us demonstrate the functionality of the prototype to clients, ensuring they fully understand the website’s or app’s abilities. This saves so much time when looking to gain that important approval and can be shared across the board with ease. DANA JAMES MWANGI Founder and branding and website strategist, Cheers Creative cheerscreative.com It’s easy to get overwhelmed with the millions of apps out there. What’s been most helpful to me recently is a…

If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com PROFILE In my job I love to find ways to help users solve their problems and achieve their goals by creating clear and understandable UI designs. I believe design has to be aesthetical and intuitive. Insta: @shapiro_ann MY MONTH What have you been working on/doing this month? This month I’m working on several projects as a UI designer, my day job. The main project that I am currently working on is a website for a cyber security startup. It’s really interesting and complicated, so that’s good. Before this I was working on a website for an Industry 4.0 company and a website for a sport startup, of which I am really proud of the finished…

The technique that best matches the layered nature of the web is progressive enhancement. This is an approach that encourages you to think about delivering your core content with the lowest possible baseline. This ensures that it’s available to the widest possible audience. Once you’ve done that, you are then free to be able to enhance your offering with more and more powerful features. There’s a common misconception that progressive enhancement means building for the lowest common denominator. That’s not quite right. Progressive enhancement means starting from the lowest common denominator. Once you’ve got your baseline in place, there’s no limit to what you can add on top. In fact, this approach enables you to use the latest and greatest APIs – even if they aren’t widely supported in browsers…

ABOUT THE AUTHOR RICHARD MAT TKA w: richardmattka.com t: @synergyseeker job: Creative director, designer, developer areas of expertise: Shaders, VFX, WebGL Artificial intelligence has become part of nearly every aspect of our lives, from content-aware fills for video and photos, facial recognition to unlock your phone and even recommendations for your mobile coffee order. The field is growing so rapidly, it’s becoming increasingly difficult to nail down a definitive definition. Machine learning, deep learning, natural language processing (NLP), computer vision, voice recognition and speech synthesis… all these and many more fall under the umbrella of artificial intelligence. IBM, Google, Amazon and many others have created API endpoints for developers to integrate and start leveraging AI in their own projects. AI trained on millions of data sets and models are at your…

ABOUT THE AUTHOR MARK SHUFFLEBOT TOM w: webspaceinvader.com t: @webspaceinvader job: Professor interaction design areas of expertise: HTML, CSS, JavaScript Early examples of internet maps were nothing more than static images placed on pages, but the promise was that these would eventually be interactive. MapServer and Esri’s ArcIMS are two early examples of interactive maps but were extremely slow and served up pixelated images. The main problem was that the maps were being drawn dynamically and so ran into speed and scalability challenges. Fast forward to 2004 and Google Maps offered ‘pre-baked’ images and used AJAX to speed up the process of serving image tiles as the user scrolled. No page refresh was required. In this tutorial, we will explore using the free OpenStreetMap, initially through leaflet.js and then through eeGeo,…

The hardest part of finding out what to test is knowing what your code actually does. This becomes harder the more time that passes between when you write tests to when you write the actual code. So I recommend writing tests alongside the component or even before you write your component. When you’re doing this you’ll be more clearly able to think about all of the different outcome possibilities your code offers: what variables might change? What different return values are possible? I’ve used an API call in this example because there’s plenty of variety in what can happen but I’ve still missed out one valuable test: can you spot which test I haven’t done?…

Full Stack Radio is fantastic – @adamwathan. Meaning to have a listen to No Plans to Merge – @calebporzio and @DCoulbourne. @wearethreebears UX Podcast @mummymeg Presentable by the master @veen and The Design Jones @TheDesignJones both amazing. @Benjieboo North Meets South (@northsouthaudio). @michaeldyrynda and @JacobBennett‘s fortnightly bants always have a tidbit that’s priceless; especially from the perspective of web development management. @adamwathan’s @fullstackradio is more technical, but I always walk away from it having learnt something. @frontendben The Sideman Designer by @tomjepsoncrtv is always worth a listen:) @myfirstraygun ShopTalk Show – Dave and Chris are really easy and interesting to listen to. They cover a wide range of topics. Also Syntax – Scott and Wes cover a wide range of topics. @jordanairwave We’re big fans of Your Undivided Attention by…

DANIEL VINNICOMBE UI designer w: https://orsolo.com FIGMA If I had to pick one, I’d say that this is probably my favourite design tool at the moment. Being able to access a design tool on the browser has been absolutely awesome and it means that I can share work with anybody collaboratively whatever computer they happen to use. https://figma.com REFACTORING UI Adam Wathan and Steve Schoger’s online book, Refactoring UI, has been a great asset and is useful for all levels of design and even development. It covers everything from typography, colours and how best to approach web design. https://refactoringui.com/book/ LYFT COLORBOX This colour tool enables you to create custom colour palettes online. It’s great when you’re looking to start something new and you want to quickly try out different shades. It…

The global market for outsourcing is increasingly growing. For a relatively low cost, you can offshore the development of your website or app to a competent coding team in a faraway destination. The main driver for this is obviously to keep costs down. Getting work from talented offshore developers for a low cost is an alluring proposition for any business and often they can deliver great results. However, while offshore development teams are able to build exactly what you ask for if you provide them with very specific requirements, their skills don’t usually extend beyond coding. In many ways consultancy, creative thinking and strategic input are far more critical to the ultimate success of your website or app than the code alone. The UK is world-renowned in both the creative…

#329 MAR 2020 Get the best out of UI elements, turn them into reusable components and build effective design systems #328 FEB 2020 Incredible dev tools to use in 2020, learn how React, Angular and Vue.js are set to evolve and build a time-based UI animation #327 JAN 2020 Get to grips with the evolving accessibility landscape, understand aria-labels and unit test your React apps #326 DEC 2019 Discover graphic JS libraries and create polished data viz and animations, learn the best Google tools and add top WebGL physics #325 NOV 2019 Unify your UX across multiple platforms, discover whether PWAs or native apps are best and add physics to three.js sites #324 OCT 2019 Become a hybrid by learning both design and development skills, grow your sideline and land…

INFO Location: Holywell, Wales, UK Designing since: 2000 Areas of expertise: Web design, front-end development, ecommerce Clients: Dawsons, Bettys, Charlotte Tilbury www.dan-davies.co.uk In these efficient days of UX-driven minimalism, websites and apps are a lot easier for the average consumer to use. But have we lost something along the way? For most web designers of a certain age, the answer is an unqualified ‘yes’. Get them talking over a drink or two and you’ll soon hear them lamenting the decline of visual inventiveness in web design and waxing nostalgic about the more experimental and print-influenced approaches of earlier times. But rather than complaining, Dan Davies, a web designer and front-end developer from North Wales, actually decided to do something about it. Supported by fellow North Walian and designer, author and…

(1) The original artwork was supplied by the graphic designer from Solar. This was very appealing but not really suitable for online use. (2) We placed this artwork aside and based the design on our own ideas. We wanted a horizontal orientation anyway, so that became our starting point. (3) We discovered that the feel of the Solar festival was conveyed best through photography, so we brought that into the site in place of illustration. (4) A menu is often a resting point on a website. We wanted the experience to continue, so we started testing with parallax features. (5) We built three parallax scenes that randomly appear when the user toggles the navigation. Each scene was created in Photoshop, animated with After Effects and built with GreenSock Animation Platform…

I reckon that about 90 per cent of the DOM scripting I’ve done has come down to some combination of querySelector (‘find stuff’) and addEventListener (‘do stuff to it’). Even though there’s universal support for both of those methods in modern browsers, there’s still no harm in doing a bit of feature detection before using them: Or, if you don’t like having all your code indented within curly braces like that, you can use feature detection to tell older browsers when to bail. If either querySelector or addEventListener aren’t supported, use a return statement to exit: The same goes for any other JavaScript APIs you use in your code: geolocation, notifications, the Cache API, local storage, fetch… you can use feature detection to ensure that older browsers won’t choke on…

The map can be further customised to create something special for your visitors because there are themes built into the eeGeo maps. Firstly, the time of day can be simulated by adding the following line to your JavaScript code anywhere after the map is defined: Moving to the night theme will give you the most dramatic change as streetlights will turn on and office blocks have lit windows, not to mention everything turning to a dark blue. Other times of day include: Dusk, Dawn and the default of Day. To further enhance the map, try adding some weather conditions: The default condition is the regular Clear, but you can mix it up with Overcast and Rainy. To finish with, you can also set the season to Spring, Summer, Autumn and…

ABOUT THE AUTHOR MATT CROUCH w: https://mattcrouch.net t: @mattcrouchuk job: Software engineer at Vidsy areas of expertise: React, CSS-in-JS and accessibility Collecting data can be very useful for any project but making use of that data is more important. If figures and values are presented in a spreadsheet, for example, it can be difficult to tell what – if any – significant information it holds. Victory is a library that can build charts in a declarative manner. It can respond to state changes and animate to show any new data. Unlike other libraries such as D3.js, it does not need direct control of the DOM. In this tutorial, we will be creating a pie chart and a line chart using Victory. These will display the output for a simulated status dashboard.…