Sommaire pour December 2019 de net

We’re told that only a bad worker blames their tools. While this is certainly true – as many people have whipped up masterpieces with HTML and pure CSS as have knocked up bug-ridden calamities using power tools like React – it doesn’t mean there isn’t value in adding more utilities to your metaphorical toolbox. After all, how many of us have been saved from a DIY disaster after finding the perfect-sized screwdriver head or realising we had the right type of wall plugs squirrelled away? Evidently then, it’s worth adding new libraries, plugins and widgets to tackle niche problems and come up with specific tailored solutions. That’s why we’re looking at great tools that can put more power into your design and development. First off, we explore graphic JavaScript libraries…

Tell us what your side project does. Roots (https://rootspodcast.design) is a podcast that tells the stories of Filipino designers around the world. I like to think of every episode as the origin story of each designer. Guests talk about their career journeys, quirks, hobbies, techniques, life aspirations and whatever makes them tick. Listeners get to dive deep into each guest’s journey and feel like an insider in their lives. Why did you create it? When I was a student, I participated in community events in the local web design and user experience scene. That meant getting access to amazing individuals who were really passionate about what they were doing. I met Filipino designers face-to-face, had dinner with them and heard their inspiring stories. I felt so privileged to experience this.…

At its core, being successful in user experience or creative design requires an innate curiosity about causality: essentially, ‘if someone does this, they expect that to happen’. The first time I recognised this was while playing sports-focused games like Gameday, Madden and NCAA Football with friends. We would choose teams, recruit new players, manage our teams, try and meet coaching goals. In some later versions, you could even manage the back office of a franchise, setting ticket prices, selecting food options and even relocating to a new state. My love for data was born. Some of my best memories growing up were spending time with my friends competing against each other. The laughter, frustration and bonds that were formed will stay with me forever. I realised how much I truly…

PHP, JQUERY, THREE.JS EVOLVE PROJECT https://www.evolve-h2020.eu While the EU might be a rather touchy subject on UK shores, the show must rumble on in Brussels. This engaging website highlights the EVOLVE Project, an initiative born out of the European Union’s Horizon 2020 programme, that hopes to consolidate big data systems. In order to illustrate its current testing across multiple pilot domains, visitors are invited to interact with and explore seven miniature 3D environments. Realised in WebGL and specifically employing three.js, these translucent and rotatable scenes reveal clickable hotspots that describe the project’s role in each scenario. Be it agricultural production, maritime surveillance or indeed satellite imaging, EVOLVE compellingly explains its benefit in light of our swelling data demands. HTML5, CSS3, THREE.JS OZWEEGO 2048 https://hypebeast.com/2019/8/ozweego SITE OF THE MONTH Footwear fanatics…

CLOSE UP (1) The homepage sets the stage for the PICTURESTART brand, with ambient motion graphics created from archival film leaders. The site’s design and navigation takes inspiration from film leaders, TV test patterns and other visual ephemera from the technology of filmmaking. (2) The homepage is a navigational hub with the site’s four key pages listed in short, punchy sentences. (3) Each page is framed with four colour slivers from the site’s other pages, enabling the user to navigate seamlessly around an endless shifting canvas. (4) A traditional menu complements the colour bar system, giving users a familiar method for navigating the site. (5) On interior pages, the PICTURESTART logo reduces to the burst icon, which reveals the logotype on hover. (6) Image-use restrictions necessitated a creative solution for…

Jenkins is the longtime editor of Web Designer magazine with a love of HTML, CSS and design. He is currently submerging himself in the world of infographics. Working on the web usually means you will be working with Google in some shape or form. Which browser is streets ahead of the competition? Google Chrome of course. So designers and developers need to think about how their project will work with the browser. How will it look? What technologies does it support, how secure is it and how will it perform? All valuable considerations. Fortunately, Chrome provides tools to ensure any site or app will be at its best. DevTools enable designers and developers to gain insight into a web page: you can manipulate the DOM, check CSS, experiment on designs…

Following our piece in net 325, in this article we’ll continue to explore physics engines and look at how you can create a 3D physics scene using three.js and ammo.js. Over the steps you’ll learn how to render a physics simulation with both soft body and rigid body physics. THREE.JS 3D FOR THE WEB Three.js is an open-source 3D library created by Ricardo Cabello. It is feature-rich, flexible and has excellent performance, making it a great choice for WebGL development. WHAT ARE PHYSICS ENGINES? Physics engines are simulations that emulate the physical world. They compute how particles collide, water flows and buildings crumble. You’ve seen physics engines at work in virtually any video game you’ve played and in many visual effects for film. For the web, we are interested in…

Social validation (also known as social proof) is a measurement of how much and how well a product is publicly endorsed by its customers. Authentic social validation, which is the most valuable kind of social validation, is when customers aren’t incentivised to offer their endorsement. People (even if we don’t consciously realise it) both rely on and are influenced by social validation when deciding to invest money or energy in a product. Watching what others do and say and using what we’ve learned during these observations to make similar decisions is simply a part of human psychology. Throughout both childhood and adulthood, it’s how we learn what’s okay and what isn’t okay, what to do and what not to do. We do it every single day. But what counts as…

Prototyping is one of the most important processes in the design life cycle and it plays a vital role in development by helping designers and dev teams with workflow maintenance. There have been some major changes in the prototyping landscape recently: designers are spoilt for choice. Just like many other disciplines, there is no single design and prototyping tool that can achieve everything. Different stages require a unique set of tools. Gone are the days when designers used to rely solely on Photoshop and Sketch. Though they are great UI design tools, they do not have the capabilities for quick user flows and wireframes. Now with the growing amount of interactions in designs – such as animations, gestures and voice control – it’s tough to find a tool that can…

I used to work as a content manager for a small web design company. We were often sub-contracted by a local branch of a major advertising agency for smaller jobs. This story comes from one of those. The project had a rocky start. They wanted us to make a basic website and a fully functional app “like Facebook” to be completed in three weeks. Their budget was €500. We had meetings with the client’s designer and project managers who were supposed to give us materials. They got them to us… two weeks AFTER the deadline we’d been given. My bosses could tell I was frustrated and gave me the website project to keep me on. It meant I didn’t have to touch the ‘Facebook app’, so I was happy with…

Improved agility, better customer experience, reduced costs. These are the top three benefits fuelling organisations’ sustained interest in artificial intelligence (AI) and machine learning (ML), according to Gartner’s report Five Questions for a Successful AI Project (https://netm.ag/2Mk87pa). And with a recent report from Capgemini showing that nearly half of UK office workers are optimistic about the impact automation technologies will have on the workplace of the future (https://netm. ag/35oTrhB), it’s no surprise these benefits are already starting to build AI’s reputation. However, AI and ML are the latest buzzwords that can easily be dismissed for fear of being introduced for the sake of it or with the wrong intention. That’s why it’s important to understand more about this technology and how to implement it quickly and cost-effectively, so you can…

If you’re looking for a home for your WordPress website, you’re going to need a quality web-hosting service. And if you’re not particularly au fait with the ways of the web, this can be incredibly confusing, not to mention costly, if you choose the wrong service provider. But it doesn’t need to be. Kinsta is a high quality, reliable WordPress web-hosting service that offers affordable plans for a wide range of requirements. So whether you’re a budding designer wanting to launch your first online portfolio or a web pro wanting advanced features to take your site to the next level, Kinsta has you covered. Packed with an extensive toolset, Kinsta pulls ahead of its competitors with a number of key features, including lightning-fast architecture, a high-security network and free site…

https://currents.activetheory.net As a phenomenon often unseen, it’s easy to be unaware that currents are actually integral to nature. This incredibly accomplished experience from the brilliant team at Active Theory highlights why we should care about currents, blending science with digital art. Built principally as a WebVR experiment for Oculus Quest, it can also be enjoyed in regular 2D desktop and mobile browsers. The result is equally engaging and features impressive GLSL work to render an awesome tide of particles that animate and swirl with bewildering diversity. Each pattern signifies the invisible forces of the currents within our oceans, using molecular physics to tell a story. It all culminates to form hypnotic visuals that make viewers feel like they are swimming through space. This is heightened by a superb voice narration…

Google Chrome Developers https://netm.ag/32gJWPj If you want the latest news about what’s happening in the Chrome development universe, this channel is a must. There are hundreds of videos covering PWAs, what’s new, JavaScript, the Chrome Developer Summit and more. Google Design https://netm.ag/33whSHX This channel is here to give designers (and anyone else that happens to be interested) an insight into Google’s design guidelines, assets, resources, events and job opportunities (design.google). The videos are focused around all aspects of design and are speaker led. Google Webmasters https://netm.ag/31fWepZ Getting a site seen is crucial to success and this channel provides the information and tools to help you understand and improve your site in Google Search. Get Google Search news, learn about SEO and JavaScript, get short SEO snippets and see what users…

Here are some resources to help you build your own chat applications for the web. Firebase documentation https://firebase.google.com/docs You should take some time to learn Firebase through the documentation provided on its website. Udemy: Build a Slack App https://www.udemy.com/build-a-slack-chat-app-with-react-reduxand- firebase If you are looking to build a group messaging app then you should try looking at this course by Reed Barger, which walks you through building a Slack-style app using React, Redux and Firebase. OneSignal https://onesignal.com Take your chat application one step further by providing web notifications for your users when they receive a message. OneSignal provides a great notification service for all platforms and there is a free tier. Angular Material https://material.angular.io A suite of pre-built UI components based on Google’s Material Design specification. This includes things like buttons, progress bars and tabs.…

Social validation comes in many forms. Small forms, big forms, even hidden forms that we sometimes unknowingly participate in. Social share counts One of these forms is the social share count. Now, what makes you share an article? Its usefulness? The fact you agree with it? Your interest in it? Probably all of the above, right? But what about the fact that many others before you have also shared it? It’s typical herd mentality – we want to be part of the cool crowd and we also want to let others know that we’re a part of it. It’s a small win but every little helps. Digital word-of-mouth recommendations Remember when voice assistants like Amazon Alexa, Google Assistant and Apple’s Siri became all the rage because someone in the family…

When Auto Animate first appeared, many designers crafted some amazing examples of what it could do and shared their work online, which makes it easy for fresh designers to try the new feature. Here are a few resources that are useful for getting you started with Auto Animate. XD Guru https://www.xdguru.com/xd-animation-templates/XD Guru is a wonderful resource for anything related to Adobe XD components such as templates, UI kits, courses and tutorials. You’ll also find collections relating to dashboards, logins and ecommerce. On top of this, it has a vast community page where you can ask questions, solve issues, start discussions and showcase your work. The best part about the link here is that it has ready-made Auto Animate templates that can be downloaded for free. This way you can understand…

From our timeline Is dating a website relevant and how might ‘newness’ be best communicated in design? It’s an interesting challenge within a world and web that craves the ‘new’ constantly. Websites are often ‘dated’ purely by the content, with the design itself placed more by style perception and maybe what’s fashionable? @Mark_Billen A dated website is one that no longer represents ease of use and struggles to deliver what the user is looking for. Newness is best communicated via iterations rather than significant change, making the UX of adapting more user friendly; users shouldn’t have to relearn, just adapt. @PaulWritesCode I’d say that if your content is of a timely or date-sensitive nature, such as news, new products, events, or if it’s important to show a company is ‘active’,…

My house has a basement we used for many years as a repository for unused objects and I started to think about it in a different way three years ago while looking for an office to rent. After looking at some spaces, I realised none of them were the way I wanted them, unless I put a lot of work into them. I love interior design almost as much as digital design, so my husband and I decided to take on the challenge of designing my working space. It was very hard work but I couldn’t be more satisfied with the result. The studio is quite silent and far enough from the house, as I live on the third floor, that it ended up being a great place to work…

Here at Cogent, Umbraco is our choice of content management system (CMS), which powers over 700 of our client’s websites, from simple blog sites to installations that control hundreds of websites with complex extended functionality. Umbraco provides flexibility and scalability, meaning it is an ideal CMS for most web projects. Clients can start with a simple website and, as their business grows, they can add functionality to their site without accumulating technical debt. FEATURES AND BENEFITS •Umbraco is free: it costs nothing to build a website. Umbraco only charges for its cloud services and some optional licensed packages. There are lots of built-in features that make Umbraco ideal for developers and editors alike. People can be allocated to select user groups; this gives them specific permissions that control what pages…

Could you briefly introduce yourself to anyone who doesn’t know you? Hi, I’m Pablo, a designer from Mexico who’s travelling the world, giving workshops and writing comics. You’re a writer, illustrator and designer. Do these passions reinforce each other or fight for attention in your mind? I think everything is connected somehow. Art, science, design, butts. It’s not apparent when you see the pieces by themselves but when you’re creating something, you start to understand how all the different dots connect. I will be first to admit that I’m not the best at any of the many things that I try doing. But it’s not in the individual parts that I find strength; it’s in the combination of many practices. I may not be the best UI designer but I’m…

Senior developer advocate for Microsoft, Holland is a big fan of sarcasm and JavaScript, the latter of which makes him the perfect person to assess the various frameworks available. t: @burkeholland They say that a picture is worth a thousand words. Coincidentally, that’s about how many lines of code it takes to create that picture in a web browser. Fortunately, the browser offers several high-powered drawing APIs and surfaces. Most notably, these are the canvas element and scalable vector graphics (SVG). Both of these features are now available in almost all desktop and mobile browsers but the APIs required to use them are rather low level and ‘low level’ typically translates into a lot of tedious and redundant code just to do simple things. Since writing tedious and redundant code…

Marmoset https://netm.ag/2BeLTzK Code on screen is not the most attractive or exciting visual. Marmoset is here to make that code a little bit more exciting. It’s simple to use; add your code, select an angle, zoom in/out, choose a filter, add effects and hit save. LambdaTest Screenshots https://netm.ag/2q5YvHc Web pages need to work across all major browsers, browser versions, operating systems, mobile devices and resolutions. LambdaTest helps with this by taking screenshots across more than 2,000 real browsers running on real operating systems on cloud-connected machines. Checkbot https://netm.ag/2B8UrrV This extension is a website auditor that tests hundreds of pages at once for SEO, speed, security issues, broken links, HTML/JavaScript/CSS errors and much more. The free option checks 250 URLs per site on as many sites as you want. META SEO…

In this tutorial, we will be developing a simple chat application using Angular and Firebase, where users will be able to send each other private text messages. To get started, download the project files (https://github.com/darryl-bartlett/Chat1to1Angular). FIREBASE SETUP AND CONFIGURATION Head over to firebase.google.com and sign up for an account if you don’t already have one. Create a new project inside the dashboard, go to ‘Firebase > auth’ and then enable email/password. You will also need to set up a Firestore database in test mode to write data. You will have been given some configuration details when you set up a new project. You will need to add these inside the environment.ts file. COMPONENTS AND SERVICES There are three components, one for login, one for signup and one for the dashboard.…

Technology is not gender neutral. From the average smartphone to seat belts and airbags, so much of the world around us has been designed and created to suit the average man. And the websites we visit on a daily basis are no different. It’s relatively easy for me to sign up for a website. No matter what information they ask for I can answer easily, quickly and without feeling anxiety or even fear. I see myself in their registration process and products. But unfortunately, for many web users out there, the opposite is true. What about those who are transgender? Or those who are non-conforming? One little question can be such a big deal. And for some people, a very simple process becomes complicated and often uncomfortable. There have been…

Adobe XD has a wonderful repository of Adobe XD UI kits, icon sets, plugins, app integrations and more. These are made by companies and individuals who want to help new designers get ahead by using existing designs and tweaking them. Here are a couple of plugins that are essential for every designer. Rename it https://renameit.design/This is a wonderful plugin that enables designers to group and batch the layers and respective artboard names efficiently. Designers have many options for all the selected layers. A few examples include editing all the available layers to have a common name or inserting a kind of custom variable metadata such as height, width or a known sequence. Data Populator https://www.datapopulator.com/This plugin performs a task that needs no introduction. Most of the time, when designers have…