Índice para February 2020 em net

It’s hard not to feel a little reflective when you’ve just waved goodbye to a decade. And it’s safe to say that, as far as the web goes, the 2010s were a bit of a mixed bag. Sure, we enjoyed the revolution that was HTML5, reshaped the online world with responsive design and broke free of formulaic web templates with CSS grid. But the internet’s rep also took a bit of a beating, thanks to the NSA, #gamergate, Donald Trump, Cambridge Analytica and so many other scandals. But when it comes to technology, I’m nothing if not an optimist and I’m confident that there are bright times ahead for the web. That’s why we’ve dedicated our latest issue to the exciting things coming up in the future. First of all,…

* SIDE PROJECT OF THE MONTH Tell us what your side project does. UX Tricks creates ebooks that teach UX but customers can also read their ebooks online if they choose to create an account. Why did you create it? Design is what I know and love and if the web has taught me anything it’s that there’s always space in the market for more learning resources, despite there being loads of awesome resources out there already. That being said, there are a bunch of ways that I think UX Tricks is (or will be) better. What were you hoping to achieve? To offer a better a way to learn UX. First of all, learning any UX-related craft is more confusing today than ever before. There’s so much conflicting terminology…

Your CV is excellent and portfolio impressive. But how do you prepare for the all-important interview? Having had years of experience hiring developers, here are my tips on how to succeed. PREPARATION Use visualisation techniques Think of examples of when you built something amazing. Actively visualise these examples before the interview, thinking about how you approached each stage of the process. When you go into the interview you will have these examples at the front of your consciousness, which will help you to formulate great responses to the questions asked using ‘real-life’ experience. Record yourself To prepare for an interview, record yourself speaking on a voice-recorder app or to camera. Doing this activates the same anxieties you might feel when under the pressure of an interview. By running through potential…

Web designers often don’t realise the best way to utilise data when building a site. They sometimes overcomplicate the results and try to appeal to too many audiences, creating a bland site. Or it’s the opposite: an idea dictates the design and ignores the data. It’s the classic conundrum: left brain vs right brain. The design process should marry innovative technology with creative bravery. Data should inform a creative brief to provide a brand experience that resonates with the customer and increases the rate of conversion. EXTRACT RAW DATA Make sure you pick the right attribution system for your brand. Attribution has come a long way and now offers substantially more insight into a customer’s route to sale on a website. Multi-touch attribution assigns value to every function on the…

CLOSE UP (1) The homepage consists of a full-screen magazine cover wrapped in plastic, as it would appear on a newsstand. (2) Running your cursor over the page rustles the animated WebGL plastic cover. (3) A link to buy tickets to see the movie at a local cinema is included. (4) Rather than going for a traditional digital navigation, the team opted for an editorial-style table of contents, maintaining the illusion that this was a real 1969 magazine. This is accessed by clicking the down arrow that appears inside the cursor. (5) The homepage also links to the movie’s Instagram, Facebook and Twitter accounts. Now all the social platforms have in-app browsers, Watson/DG created assets that naturally progress users from the social piece to the site experience, whether through a…

Back in 2005, a new scripting language called Mocha was created by a guy named Brendan Eich. Months after being renamed to LiveScript, the name was changed again to JavaScript. Since then, JavaScript has come a long way. In 2010, we saw the introduction of Backbone and Angular as the first JavaScript frameworks and, by 2016, 92 per cent of all websites used JavaScript. Fast-forward to 2020 and we are blessed with a number of frameworks and libraries to help us with development. In this article, we are going to have a look at three of the main JavaScript frameworks (Angular, React and Vue) and their status heading into the next decade. ANGULAR AngularJS was released in 2010 but by 2016 it was completely rewritten and released as Angular 2.…

Particles can add incredible realism and interest to a 3D scene. Whether it’s falling snow, red glowing embers rising from the flames or ambient dust to accentuate volumetric lighting, particles are absolutely vital. In this article, we’ll explore one technique for adding real-time particles to a three.js scene using WebGL. You’ll learn how to use the PointMaterial and Points object to efficiently create thousands of particles. You’ll have them moving and reacting to the mouse as well. UNDERSTANDING WEBGL WebGL enables you to render incredible 3D scenes combining graphics shaders and interactivity all inside an HTML <canvas> element. WebGL is a web standard, which means you can create GPU-accelerated experiences right in the browser. Whether your goal is mobile or desktop, WebGL’s got you covered. UNDERSTANDING THREE.JS Created by Ricardo…

Grabbing your users’ attention is essential if you want to make your page stand out and, if it’s done correctly, it’s something that will actually enhance the users’ experience. This in turn will build positivity towards your brand. In this tutorial, we are going to explore creating an interactive login screen that takes the user’s time of day and creates a unique page design. The user’s attention will be focused in this case by changing the mood of the scene based the time of day. The sun or moon will be animated into the sky depending on the current time; these subtle changes go a long way in telling the user their experience matters. The main graphic in this page is an SVG image and, as this is just an…

When bringing up accessibility, many involved in the web design and app development industry may not fully understand what that suggests. Especially those relatively new to the field. That’s not for lack of need or interest but more relative to the lack of importance placed on it by employers or clients early in our careers. As a junior level designer or developer, we’re often tasked with just getting work done. We aren’t typically involved in strategic decisions at that stage of our career. As we progress, our expertise expands and the size of projects and clients grows as well. What doesn’t necessarily grow is that leadership guiding us toward time spent learning what accessibility means to our customers or how it is changing due to cultural transparency and decreasing cost.…

* CLIENTS FROM HELL I’ve done work for some of the world’s biggest brands. As you can imagine, it gets very stressful. To de-stress, I occasionally take small jobs from local businesses. This may be a bad plan for relaxation. A client needed a website for their shop. All I had to do was take their old site and rebuild it using their existing product database and all the designs and information they had already given me. Simple. It wasn’t that at all. I worked for 48 hours straight and presented a new site. The website had already garnered two sales (doesn’t sound much but this shop sold large machinery, so those two sales were worth over £20k) because in my sleep-deprived state, I built it on the live web-facing…

* BEYOND PIXELS It’s the end of a productive day spent working up the template files for a client’s website. My fingers aren’t quite ready to call it quits and are performing a choreographed dance of knit-one purl-two. Beside me sits a tightly wound ball of yarn in a bowl with a single strand guided through a specially designed hole, giving me that one extra hand I need while my own are busy. There’s also a charted pattern – a grid of symbols with a key – wireframing the design. I first picked up a set of knitting needles as an undergrad art student, back when web dev and coding were not on my radar as career choices but something fun to mess around with. I lived north of Boston…

INFO job: Digital strategist w: lynnwintermn.com t: @lynnwintermn Could you briefly introduce yourself? I started as a project manager at TPT, a local PBS affiliate in Minneapolis/St Paul. In 2008, I transitioned to digital and web full-time, helping non-profits build sites using open-source platforms. After I settled into my role, I began noticing parts of site creation where I could really add value to a project. I started learning more about content strategy, information architecture and user testing and became more involved in the build process itself. Two years ago, I made another jump and became a freelancer. I now work both as a digital strategist and project manager, primarily on site redesigns. How did you come to specialise in agencies who work with non-profits and what are the main…

* WORDPRESS, JQUERY, YOUTUBE FISHING THE FEED https://www.fishingthefeed.com Given the strong calls for ecological and environmental action in recent times, it seems the web is playing its part. A myriad of campaign sites are popping up, using engaging design techniques to convey complex issues. Fishing The Feed is a perfect case in point, produced by Bristol-based agency Fiasco Design for its client the Changing Markets Foundation. Its purpose is to highlight the unpalatable truth about farmed fishing practices and specifically how wild fish are processed into feed for reared seafood stocks. Single page in structure and built on WordPress, visitors are taken on a narrative journey across illustrated sections featuring MP4 video backgrounds. These provide looping animations or autoplay ‘poster’ scenes of boats, shoals of fish, alternative feeds and more…

Back in issue 326, I wrote a tutorial on how to build a one-to-one chat application with Angular. Since then I have built out the project in both Vue and React to see how it would compare. Versions used • Angular: 8.3.5 • React: 16.11 • Vue: 2.6.10 Stability All three frameworks were capable of creating the app without any issues and were all very stable versions. Even if I enhanced the app by adding things like group chat, I believe they would still all be as stable as each other. Differences The main changes were the syntax and the structure. A lot of it is down to the developer and what they are comfortable with. I also don’t think there was a lot a difference in terms of time.…

Fragment Shader effects Fragment Shaders are blazingly fast for creating postprocessing effects and animations. They are complex to write, using a language called GLSL, but the results can be stunning. Shadertoy features thousands of examples you can explore. One great example is by Sjeiti, featured here. https://www.shadertoy.com/view/MlKSWm Vertex Shader effects To handle high volumes of particles, Vertex Shaders can be used with instanced geometry to render out particles extremely efficiently. Bruno Imbrizi has provided a fantastic walkthrough on this technique that is well worth exploring if you are interested in this approach. https://tympanus.net/codrops/2019/01/17/interactive-particles-withthree-js/ Particle libraries There are numerous libraries in various stages of development. These can rapidly speed up development timelines. Pixi.js, for example, has several 2D particle libraries that work well. For three.js, one excellent library is three.proton, which…

Scalable vector graphics (SVGs) can be created in any vector drawing package. For this tutorial, the landscape scene was created in Adobe Illustrator. In this case all of the graphics are just placed on one layer. Any graphic element that is named in Illustrator gets that name as an ID when it is exported as an SVG image. If it has an ID, it can be accessed through code, which means it can be manipulated in any way, giving the designer the power to modify the image at runtime in the browser. As all the content here is on one layer, open the Layers panel and click the arrow next to Layer 1. This shows the individual graphics on that layer; find the layer you need to name and assign…

Even if you’re familiar with CSS and building beautiful layouts, you can still discover new CSS properties and features. By using them you have more influence on how the content behaves on the website, as well as having more freedom in terms of how you apply creative techniques to elements such as photography. In this tutorial, we are going to dig into some lesser-known properties. When experimenting with them, please bear in mind that mentioned features are not supported by all the browsers, so it’s worth checking them out on https://caniuse.com/. Let’s dive into some short and concise examples! WHAT YOU WILL NEED: Your favourite web browser and developer tools – I recommend using Firefox or Google Chrome as they support all the features I use in this tutorial. A…

Variable fonts are a hot new thing happening on the web and in graphic design in general. Variable fonts are packed into one file – all the different styles for a font are in a single file. You have bold, medium, light and italics included. Not only does it have a better influence on performance (a variable font’s file size is smaller than the sum of all the styles and there are less HTTP requests) but you can also play with medium states thanks to the interpolation of curves called masters. If you’d like to find out more about web typography, I totally recommend to subscribe to Jason Pamental’s newsletter called Web Typography News (https://rwt.io/newsletter) – or read the interview with him on page 26. It’s also fun to check…

A debatable case for modals is the use of forms within modals. At first it certainly does sound like a horror story – after all, the thought of filling out a form and then accidentally dismissing it is enough to send someone into total meltdown. It’s happened to me a couple of times and admittedly I totally freaking lost it. So exactly what do we need to consider when using forms inside modals? • Maintain correct tab order (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) • Ensure that the main document is not focusable • Don’t mess with CSS overflow:, to avoid ‘cut off’ • Disable esc-to-dismiss and click-backdrop-to-dismiss Personally, forms inside modals is where I typically draw the line. Even if they’re totally usable and accessible, users don’t know this if they’re using the website/form…

* WORKSPACE Nestled among the fells of the Lake District National Park, we love being able to take advantage of having an adventure playground on our doorstep while working for clients such as James Cropper plc, the NHS and the globally recognised attraction Windermere Lake Cruises. Our studio on the edge of Kendal has been home to our team of six (not forgetting Jasper, the office dog) for the last three-and-a-half years. The open-plan space is bright and light with spectacular views towards the mountains – at least when it’s not raining! On most days, though, we’re fortunate to see incredible light across the landscape that has served as inspiration for both poets and artists for centuries [1]. Being based in a rural area means there aren’t many local meetups,…

If you regularly write front-end code for web applications, then you probably have your go-to set of tools: a boilerplate that serves as a skeleton. A UI library that helps you make things dynamic and interactive. A build process that might include one or more tools to scaffold out the files and directories you’ll need. You might even have a set of CSS and JavaScript utilities that you go back to time and again. Or maybe your tooling is a couple of blank files, your code editor and nothing more (which is absolutely fine, especially if you’re new to the scene). Whatever your toolset looks like, it’s always beneficial to take a peek at what’s out there and what’s new in front-end tooling. To that end, let’s roll out 50…

Twitter isn’t always the most encouraging platform but it can be useful if you follow the right people. I follow many front-end and full-stack developers and I particularly enjoy accounts that post quick coding tips and productivity suggestions, in addition to links to hot new tools. Here are a few of my favourites: Wes Bos @wesbos • Bos often posts little-known JavaScript tidbits and the occasional coding quiz. Many of the threads he starts are very useful and are a great complement to his fantastic online courses. Umar Hansa @umaar • Hansa posts lots of great front-end resources, in addition to his regular Dev Tips (https://umaar.com/dev-tips/), which are always in the form of an animated GIF. I Am Devloper @iamdevloper • Okay, this one (intentionally misspelled: that’s not a typo) is…

Below is a list of resources that will help you keep up-to-date with the latest JavaScript framework developments in 2020. Comparison of the usage statistics of Angular vs. React vs. Vue.js https://w3techs.com/technologies/comparison/js-angularjs,js-react,jsvuejs • A great resource for checking out the current usage statistics for Angular, Vue and React on the web. You will also find a lot of statistics revolving around other web technologies as well. Angular blog https://blog.angular.io/ • Angular’s official blog contains the latest news and tips from the team. React blog https://reactjs.org/blog/ • The official React blog is the place to get news on upcoming releases. Vue.js News https://news.vuejs.org/ • All the latest news and tutorials from the Vue team. JavaScript Conferences 2020 https://confs.tech/javascript • Conferences are one of the best places to discover the latest in…

In order to dive deeper into three.js, visit its online documentation here: https://threejs.org/docs/. There are plenty of examples to inspire and help get you started. But for now, here’s a little primer on what it all means. What is a scene? A scene is the primary container that we place our 3D objects in, along with lights and cameras. What is a 3D camera? Three.js has different camera types, including a Perspective camera, which we will use for 3D, and an Orthographic camera, used for rendering 2D scenes or UI elements. What is a renderer? The renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. You will call the renderer to render each frame of your scene. What is geometry?…

CSS gradients have been around for some time now but it can be confusing to create them and there is always the problem of whether to still include browser prefixes or not. That really comes down to how much backwards compatibility you need, so checking your sites analytics will give you that information. Here are some useful resources that will help you get the most out of gradients. CSS Gradient https://cssgradient.io/ The easiest way to create any gradient is to do so visually. This online gradient creator will help you put the colour stops in and then specify the direction for a linear gradient or whether you want to have a radial gradient. Once done, the CSS can be copied and pasted right into your own code. Copy CSS to…

CSS is a great tool to express your artistic and creative side. I gave a talk at JSConf.Asia called ‘artistic.css’ about how design movements shape the current state of CSS. Sometimes you might have an impression that every website looks the same – most of them are based on a 12-column grid and three boxes. Why can’t we draw inspiration from fields or areas that go beyond digital design? Have we forgotten about the print or editorial design that we all love? Why can’t we break old habits and try new CSS properties that open a whole new world of endless possibilities? Actually, we can! In my talk I cover properties such as masking, clipping and transforms in order to explore visual styles that go way beyond the ones you…

‘Modals aren’t accessible’ is a claim that I’ve never really understood because nothing is accessible until made to be so. Not even colours. I’ll concede in saying that modals have never really been accessible right out of the box, however coding them isn’t as difficult as it’s made out to be. And now, unfortunately, modals have a bad reputation because of this ‘modals aren’t accessible’ claim, when in reality it sits idly between myth and excuse. Regardless, we now have a semantic HTML element for modals (<dialog>), a JavaScript API (https://netm.ag/2OrAQee) to make them functional and even a CSS pseudo-element (::backdrop) that we can style. Let’s take a look at the implementation as we create an accessible multi-link menu modal. Warning: this technique is experimental, lacks complete browser support and…