Índice para May 2020 em net

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… CHRISTIAN HEILMANN A developer evangelist, presenter and JavaScript lover living and working in Berlin, Christian is principal program manager for browser tools at Microsoft. w: christianheilmann.com t: @codepo8 SHANE MIELKE Shane is a freelance creative director, designer and front-end developer. His handbook for digital creatives, Launch It, is available now. w: www.shanemielke.com t: @shanemielke * QUESTION OF THE MONTH How do you decide whether to become a generalist a specialist, or somewhere between the two? Fern Wicks, Southampton, UK SM: Specialising and focusing on specific project types, skills and tools in a quest for mastery is a great strategy for many people. But I believe that everyone who does choose to specialise should frame that focus relative to what will ultimately be the duration…

That following grids, trends, or using templates is always a bad idea. Know your audience and understand your business maturity. You’d be surprised at how much you overcomplicate things for no reason. @iamlucid Designers that know a little about the web and expect things to be changed quickly just because they change their mind. @jordanairwave The single page continuous scroll page. Some person thought that it was a good idea to make things appear and disappear from the DOM depending on your scroll position. Also, fooling people that a page has a certain dimension and then keep adding to it. @Siderite [That] everything. should be reachable in three clicks. @daaazzle That ‘number of pages’ has any relationship to a web project’s scope, complexity or cost. @blucube “It needs to be…

LISI LINHART Lecturer and front-end engineer w: lisilinhart.info SVGSUS Svgsus is an incredibly handy tool for Mac OS X that enables users to search through their locally stored folders of SVG icons and then quickly copy and paste whichever ones they need. This makes the whole process of inlining SVG icons into web projects much easier. http://www.svgs.us WAVE ACCESSIBILITY TOOL WAVE is a nifty tool that checks the accessibility of a site. You can install it as a browser plugin and test any site with it. It gives you visual feedback on where your accessibility might go wrong and how to fix it. https://wave.webaim.org COLOR HUNT Color Hunt gives you a simple four-colour palette and you can also search for palettes by colour (red, green, blue, etc). I prefer this colour…

SALLY LAIT Senior engineering manager, Monzo sallylait.com Whenever I notice I’m feeling low on positive energy, I try to be mindful of the factors that could be contributing to it. Very often a change of scenery not only helps with restoring my energy and inspiration but also gives me some perspective to help identify the root causes of why it’s been happening. Anything from a quick walk to working in a different location helps me but it also can be a sign that I need to book a holiday and get away from it all for a bit longer! NATHAN AKRILL UK lead front-end developer, Crowd thisiscrowd.com When I need to get in the zone and focus, I like to change my go-to music to one without lyrics – and…

If you haven’t had the pleasure of viewing developer Diana Smith’s ‘Francine’, an impeccably detailed baroque-style portrait, you can see it at https://diana-adrianne.com/purecss-francine. Prepare to be blown away by the sheer power of CSS (and the obscene talent of Smith). That is, if you happen across it in a more recent version of Chrome. While Francine was only ever intended as a fun side project designed to push the limits of what we know of CSS, it’s also a fantastic demonstration in code degradation and browser compliance – loaded up in Safari, we’re dealt an image missing many of the finer details and occasionally bearing some rather unsettling curvature. Going further back and viewing in varying versions of Internet Explorer, Francine begins to resemble some kind of neo-cubist experimental piece. Could…

Sometimes browsing a website that has only been partly optimised will result in a white flash of unstyled content loading when a page is viewed. This is also referred to as a flash of unstyled content (FOUC). After the flash, the styled content quickly loads but the experience is jarring to a user and can make the website feel unfinished. This is caused when ‘critical CSS’ is deferred by accident to attempt to prevent render-blocking. Critical CSS are the styles needed to render the page correctly when a user first loads the page. Once critical CSS has been identified, it should be made exempt from any deferring techniques and allowed to block the DOM. How do you get your critical CSS? You need to examine the above the fold content…

The biggest difference between native AR and web AR is how you access the experience. With native, the user needs to download an app first, however with web AR, all you need is the browser (Chrome/Safari). Development With native AR, you need a codebase for each platform (ARKit, ARCore etc), but when it comes to web AR, you can use just the one codebase. Maximum reach: Web AR: 2.9 billion devices ARKit (iOS): 1.1 billion ARCore (Android): 0.5 billion Source: ARtillery Intelligence’s AR Global Revenue Forecast (https://arinsider.co/2019/07/09/ar-revenues-to-reach-27-4-billion-by-2023/) Experience With native, it’s more tailored towards a particular OS, whereas with web AR, you can only really create one experience for everyone. This isn’t always a bad thing; however you don’t get full access to the device’s computing power. Let’s have a…

As part of the tutorial code, we have included some code that makes use of intercepting the link to an anchor on the page. The code then smoothly animates the transition of the page down to this – because it is handled by the animation it provides a way to create a more seamless experience for the user. The buttons are doing the work, hence a cognitive offload for the user, with a pay off that the animation between states occurs. To add to this, the browser’s history is also updated so that if the user clicks the back button it continues to work as expected. There are many other solutions to this problem and many scrolling libraries that can also be used just to make it even easier. MoveTo.js…

MATT CROUCH Crouch is a front-end software engineer who works with people to make sure that their content is accessible to everyone. On page 58, he takes a closer look at the latest HTML tags you should be using now. w: www.mattcrouch.net ADAM KUHN Kuhn is a front-end developer at Kong Inc, frequent CodePen contributor and creative code enthusiast with a passion for animation and pizza. He gives you an insight into CSS Feature Queries and how they work. w: https://codepen.io/cobra_winfrey JOE FORD Ford is a senior developer at Tillison Consulting and has a passion for PHP, WordPress and Laravel. On page 76, he offers up a host of solutions to optimise and speed up your WordPress-based site. w: https://tillison.co.uk MARK SHUFFLEBOTTOM Shufflebottom is professor of interaction design at Sheridan College. He explores…

Can you tell me what accessibility tools are in Edge DevTools? Simon Minter, Oxford, UK Chromium features CH: Now Edge is built on Chromium, its DevTools offer familiar Chromium features for assessing accessibility, such as the Accessibility pane and the Audits tab. Webhint extension The Edge DevTools team has also been a major contributor to webhint, an open-source project that offers devs customisable hints for improving accessibility (and other key areas in web development). Webhint is available as a VS Code extension, a browser extension and a CLI tool, so you can get key accessibility insights during development, debugging and deployment. Screen readers The Edge DevTools team has also contributed more than 100 changes back into Chromium to improve the accessibility of the DevTools themselves. Now, developers using the DevTools…

* BEYOND PIXELS A couple years ago, I co-founded a creative digital studio, Fathom, in Sacramento, CA. Of course, bootstrapping a new firm involves plenty of stress, but thankfully we’re based in one of the most productive agricultural valleys in the US. When not pushing pixels and hacking on software projects, I need to get away from my screen and dive into the garden. I’ve slowly converted my 1/8th of an acre suburban lot into a food forest. What started as a single planter box for fresh tomatoes has turned into a year-round quest to increase food production of our little land footprint, while learning about the natural world in a new way and designing a space that is both calming and functional. Being surrounded by lush greenery is always…

January 2020 saw the release of the first Microsoft Edge browser to be powered by Google’s Chromium engine, which joined Chrome, Samsung Internet and Opera in the list of Chromium-powered browsers. According to Statcounter, this means 70 per cent of users are now using Google-powered browsers. SO, IS GOOGLE’S DOMINANCE A BAD THING? Browser ‘monoculture’ has been a topic of heated debate within the developer community, ever since the days of Internet Explorer’s dominance in the early 2000s. The argument goes that if usage of a browser becomes so prevalent, developers stop coding for any other browsers and over time standards erode and the dominant company can create its own ecosystem, locking users into their products and opening the doors to potentially harmful abuses of its position. Supporters of the…

3 WAYS TO STAY CREATIVE WHEN YOUR ENERGY SLUMPS https://netm.ag/2v83dqw + Are clients, deadlines and admin draining your spirit? Pete Sena has studied, collected and mashed up left and right brain creative techniques. Here, he suggests three ways to get your creative juices flowing again. REKINDLE YOUR PASSION FOR WEB DESIGN https://netm.ag/3bgCf0v + Do you find passion for your work an important part of your career? In this post for Smashing Magazine, Jeremy Girard shares his moments of burnout in his career and what you can do to avoid them. 20 WAYS TO OVERCOME CREATIVE BLOCK https://netm.ag/31v0Qu9 + It’s great working in a creative industry but can be tricky to stay inspired all the time. In this post, Tom May asks leading designers how they beat creative block. Follow these…

INFO Location: Amsterdam, Netherlands Established: 2008 Team size: 34 Expertise: Campaign and experience, product and platforms, innovation Clients: Heineken, Uber, Puma, Scotch & Soda Awards: 139 www.superherocheesecake.com Founded in 2008, Superhero Cheesecake doesn’t just have a brilliant name, it has done some quite brilliant work too. Teaming up with global brands and creative studios across the planet, it’s won more than 130 awards for its projects, which range from experiential websites to AR installations, data visualisations to online games. And through passion, pride and plenty of elbow grease, it continues to dazzle clients and the community. We chatted to design director Massimo Meijer and senior visual designers Alicia Goodmanson and Joao de Almeida about some of their latest work, how seriously we should take AR, and where the studio is…

PageSpeed is a complex topic and is becoming more and more desirable in the field of web development. Here are a few resources to help you get ahead. web.dev https://web.dev/fast This Google website is full of fantastic guides going deeper into the subject than this tutorial has space to do. Cloudflare www.cloudflare.com/en-gb Cloudflare contains various tools for speeding up a website, from a content delivery network, to attack prevention and caching, even the free tier will take a huge amount of load off a server. Breeze https://wordpress.org/plugins/breeze This is a multipurpose caching plugin for WordPress made by the hosting provider Cloudways. This plugin contains all the main tools that are needed to optimise a modern WordPress website with minimal bloat. BunnyCDN https://bunnycdn.com A content delivery network that works great with…

Here are some useful resources to assist you with building amazing web AR applications. 8th Wall Docs www.8thwall.com/docs The number-one place to help you learn more about building AR apps with 8th Wall. A-Frame https://aframe.io/docs/1.0.0/introduction A-Frame can be used for both AR and VR applications. Read through the official documentation to expand your knowledge even further. Poly by Google https://poly.google.com If you are unable to create your own assets, then check out Poly by Google to find 3D models for your projects. In most cases you will need to convert the file to a GLB file, which you can find information about inside the 8th Wall documentation. 8 Web AR Examples Where Brands Offered a Memorable Immersive Experience www.wowso.me/blog/webar-examples Check out these examples that show off how web AR can…

When Auto-Animate was first released by Adobe XD, tons of designers went in and crafted animations. Once designers get familiar with the Auto-Animate feature, they can start exploring other complex animations that can be achieved using XD. There are lots of websites and experienced designers who have created tutorials for most of these animations. They can get you started with the basics and then you can customise based on your needs. The best way to follow recent updates in Auto-Animate is to go to the XD website where XD evangelists post a lot of tutorials on new developments. Let’s XD https://letsxd.com/prototyping This is a wonderful resource that introduces you to basic prototyping in Adobe XD. Also, there is a series that is going to add more transitions into your designs.…

Most of the animation that takes place in this tutorial is linked to the scrolling and movement through the page. Moving elements like this is known as parallax scrolling because the elements move at different speeds, giving the illusion of depth. The effect comes from games and cartoons and is a simple way to get attention as each element has its own speed. Initial implementations of this on the web required some heavy lifting from the browsers but this is much better now. Another option to consider when trying to create a unique user experience is moving the content in different directions – rather than just have it move up and down at different speeds, the content could move sideways at different speeds. A great library that offers these kinds…

DON’T TELL ME YOU MISS ME: 3 BETTER APPROACHES TO USER RETENTION + Few things are more off-putting than the reek of desperation. But if your site is running a retention campaign, that’s how you might be coming across. To stop putting people off, this article outlines three strategies for inviting back former visitors. https://netm.ag/2SD8tM5 FREE FONT DESIGNED TO MAKE IT EASIER FOR DEVS TO READ CODE + Scrawling through lines of code can be a taxing process, but the process can be made easier with a developer-friendly font. And few come more friendly than JetBrains Mono, a free font designed for straightforward parsing. It even includes a bunch of multilingual options. https://netm.ag/37HbaAH DIGITAL TRENDS 2020: EVERY STAT YOU NEED TO KNOW ABOUT THE INTERNET + Want to know how…

#330 APR 2020 Unleash the potential of HTML, CSS and JS to build powerful sites and improve UX performance with Google’s PageSpeed Insights SAVE UP TO 60% ON YOUR ANNUAL BUNDLE SEE PAGE 6 #329 MAR 2020 Get the best out of UI elements, turn them into reusable components and build effective design systems #324 OCT 2019 Become a hybrid by learning both design and development skills, grow your sideline and land your dream job #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…

Senior visual designer What’s on your desktop? A folder named Desktop and a screenshot of a Tardigrade. What’s on the walls? A project road map, 40+ devices for all our testing needs, a neon sign and lots of drunk (slightly regretful) photo booth pics from various nights out. What will you do for lunch? We’re fancy and get a catered lunch. Some highlights from today’s menu are sweet potato, chicken and rice, with a salad of couscous, baked cauliflower, feta and other yummy things. What hours do you work? Hmmm, it depends on the project. Sometimes when we’re working with American clients we might need to have later meetings, so we’ll start a bit later that day. Monday, we’re punctual for our team weekly stand up. On Fridays, we finish…

Adobe XD is known for its very large user base and it has an ever-growing list of plugins and integrations that aim to make the tool better than its competitors. Below are a couple of plugins that make a designer’s life easier by increasing productivity and reducing time-consuming tasks. These might also be really helpful for creating transitions. Artboard Plus www.producthunt.com/posts/artboard-plus This is an incredibly useful Adobe XD plugin. It keeps all the artboards and designs organised so that they are in a structured format. This life much easier when you have tons of artboards and it’s practically impossible to create transitions or prototype modes between them. You can also sort your artboards and create them in a grid, which really speeds up the entire process. Tiled plugin Tiled plugin…