Innehållsförteckning för November 2019 från net

The internet is rarely lauded as a unifying force these days, at least not without significant shavings of irony heaped on top. Having helped Brexit shake British democracy to its foundations, flooded our consciousness with divisive alt-facts and empowered reactionary voices to silence those they disagree with, the web hardly feels like it has lived up to its remit of bringing us all together. And yet from #MeToo to Black Lives Matter, there have also been occasions when the internet has brought different voices together, enabling them to speak a single truth. This gives us a glimpse of what the technology can still achieve. In recognition of this, we’re looking at how you can use the web to present a united front. Joshua Garity shows how to offer a consistent…

Where can I get a live brief for honest, useful feedback on my data visualisation work? Hobby projects are nice but don’t teach me everything. Rob Sutcliffe, Reading, UK Join the society + NB: To get started, I can highly recommend joining the Data Visualization Society (www.datavisualizationsociety.com/). It started up a few months ago and already there are more than 3,000 members, from all parts of the data-viz world. Slack feedback + There’s much happening on in the Data Vizualization Society, from blog posts to data-viz challenges, but it also has a Slack group that is super prolific. For example, there’s a specific channel there where you can post your visual and ask for feedback. I’ve found that there are always people around that want to help and you can…

SIDE PROJECT OF THE MONTH Tell us what Paper Trails does. Paper Trails is a web app for creating high-quality custom map prints of your adventures, trips or sporting achievements using recorded GPS data from Strava, GPX or KML files. A customer visits the website, picks a theme, adds their activity and customises the colours, layout and information on the print. Many activities can also be combined on the same map. Swimming, running, hiking, cycling – anything you can record using a GPS device. Why did you create it? As keen runners, cyclists and adventurous guys, we realised there wasn’t anything like Paper Trails out there – at least nothing with the features, customisation and value we (and people like us) wanted. Being brothers with complementary skills, it was pretty…

BEYOND PIXELS Create space. Find a balance. What’s the focus of this piece? These are just some of the talking points I address when designing – and when I’m beat-making. Beat-making is sort of a modern term for producing instrumental music, usually associated with hip-hop and rap. I began making beats around the age of 13. At the time, I was an aspiring rapper and what better way for a broke 13-year-old rapper to get instrumentals than to create them himself? I quickly found myself being pulled into the almost endless possibilities of musical expression in what now would be a pretty basic drum machine. Nevertheless, adulthood and responsibilities started creeping into the picture and I ended up in another professional creative space as a front-end developer. Only recently did…

SAVE 70% ON YOUR ANNUAL BUNDLE SUBSCRIPTION WITH OUR EXCLUSIVE CODE* myfavouritemagazines.co.uk/net/code19 * Offer does not apply to digital only subscriptions and print only subscriptions GREAT REASONS TO SUBSCRIBE Print edition delivered to your door 13 issues in a one-year subscription iPad and iPhone edition download Android edition download Money-back guarantee CHOOSE A PACKAGE PRINT EDITION ONLY DIGITAL ONLY TERMS AND CONDITIONS: This offer is available to all new subscribers. Applies to print + digital bundle subscriptions only for Imagine FX, Computer Arts, 3D Artist, 3D World, Net and Web Designer. Voucher code db70crv provides a 70% discount on print + digital bundle subscriptions only. The code can only be redeemed online via the web link stated. Prices and savings quoted are compared to buying full-priced print + digital bundles.…

Domains sit at the core of any organisation’s identity and are vital when tackling online brand protection. They are key to building your brand and fostering and maintaining customer trust. As a result, any damage to your domain in the form of abuse or an attack can have a negative impact on your organisation. ONLINE THREATS RISE The MarkMonitor 2019 Global Business Survey recently revealed the perilous landscape brands are currently contending with. According to the findings, nearly half of marketing, legal and IT decision makers have seen a rise in brand abuse, while 62 per cent of brands say they have been affected by online crime in the last year. This included phishing (28 per cent), false association (13 per cent), brand/logo confusion (13 per cent), keyword hijacking (13…

Could you briefly introduce yourself to anyone who doesn’t know you? I’ve been building things on the web professionally for over 20 years, first as a front-end developer, then as a technical director. The kinds of infrastructure constraints and complexity I found made me think about simplification. Now I work at Netlify, an all-in-one platform for automating modern web projects, in the developer experience team. What drew you to work at Netlify? I started spotting advantages in pre-rendered site architectures on client projects. Often more complexity was being proposed than was necessary. It became a passion point for me and I started talking about the approach at conferences around 2012. Netlify was one of the companies creating the tooling to enable this approach and elevate it beyond what you used…

Accessibility refers to the design of products that can be used by people with disabilities. New government regulations mean that websites and apps in the public sector must now be accessible to everyone. In the digital age, mobile apps have become a widely popular platform for businesses to connect with their customers. Whether this is via a business, educational or entertainment app, the platform allows a more convenient, on-the-go approach in comparison to the likes of a website. Making your app accessible means you must consider the range of challenges a customer may face, ensuring that as many people as possible can use it. This includes those with impaired vision, motor difficulties, cognitive or learning difficulties, as well as deafness or impaired hearing. Designing an accessible app means much more…

WEBGL, GSAP, JQUERY RICK AND MORTY https://www.rickandmorty.com For those that aren’t already fans, Rick and Morty is an American animated sci-fi sitcom created by Justin Roiland and Dan Harmon. Originating as a spoof of Back To The Future, it was commissioned for Cartoon Network’s Adult Swim. This new promotional site for the show was crafted by Californian agency Active Theory, leveraging modern technologies to forge a distinctly Flash-like experience. The result is a UI that evokes not just Rick and Morty’s cartoonish style but also its madcap, comedic world. After a familiar preloaded intro, visitors are presented with a richly illustrated elevator shaft of content split over sections. Episode videos are followed by a carousel of licensed products to purchase, links to downloadable games, news items and even a gallery…

If you are working for the web, you’ve probably heard about React Native. This open-source framework, sponsored by Facebook, uses React design patterns, as well as JavaScript language to compile native apps for iOS, iPadOS and Android from one source code. If you’ve ever played with React.js, you will feel comfortable with React Native, as it looks and behaves the same. React Native is also a JavaScript-based component framework but no HTML elements are accepted for rendering; only other native components are valid. Therefore, instead of rendering a <div> with a <p> and a <input> element with JSX, you will be rendering a <View> with a <Text> and a <TextInput>. For styling components, you still use CSS and the layout is defined through Flexbox. Managing props, state, hooks and even…

We’ve covered the three most important recent solutions for creating cross-platform apps today using JavaScript and some of the well-known frameworks: React, Angular and Vue. But there are other names worth a mention in this list, all of them open-source and suitable for native-app development for store or enterprise distribution only. Xamarin It’s Microsoft’s solution to multi-platform app development. Instead of JavaScript, we use C# and .NET and develop and design screens using Visual Studio. Today, it can create apps for Android, iOS, Windows and macOS, sharing some code and some screens via the user interface kits of each OS. Flutter The recent platform from Google for creating iOS, Android and web apps. Instead of JavaScript, we use Dart and define the user interfaces in a JSON-like declaration within Dart.…

Matter.js + A solid 2D physics engine that covers rigid body simulations, elastic collisions, comped joints and much more. http://brm.io/matter-js Planck.js A JavaScript port of Box2D, a popular 2D physics engine. http://piqnt.com/planck.js P2.js An easy to use physics engine for 2D from the creator of the cannon.js 3D physics engine. https://github.com/schteppe/p2.js 3D physics engines Although there are many excellent choices, I found these three engines work great with three.js and are relatively easy to use. Cannon.js A super lightweight JavaScript 3D engine that includes cloth simulations, rigid bodies and constraints. This engine is fast, accurate and easy to use. https://schteppe.github.io/cannon.js Oimo.js A JavaScript port of OimoPhsyics originally created for ActionScript 3.0. This engine is lightweight and very performant. https://github.com/lo-th/Oimo.js Ammo.js Ammo is a direct port of the Bullet physics engine,…

+ Here are a few settings you can leverage to make the most of statically typed JavaScript. No implicit ‘any’ types In TypeScript, you don’t have to write a lot of extra code. If you write plain JavaScript in a .tsx file, it’ll likely compile just fine. That’s because TypeScript infers types. If it can’t make an accurate inference, it assigns the type any. There’s a problem with that though: any could literally be anything. So to trigger a warning when this type is used, create a new file at the root of your project called tsconfig.json and add these configuration options: Also, don’t assign the type any to something deliberately either… instead, if you have failed other options, take a look at the unknown type, which is a bit…

From our timeline When lacking inspiration for a project what do you do to kickstart your creative flow? I go for a walk in the countryside and enjoy the colours of nature. I am so lucky to live on the edge of town. @PaulWeaverMedia LSD @_asheridan I look at people talking about their civic tech / nonprofit / art projects and think about if there’s anything that overlaps with something I’m curious about and want to learn. I have fun working when I’m really clear on what the goal is but not 100% sure how to get there. @marktnoonan A trip to the toy store @bursts [There are] numerous ways to kickstart inspiration. Checking out creative sites such as Dribbble always helps me. Going for a walk or listening to…

CLIENTS FROM HELL I was a programming student studying software engineering. Part of our requirements to graduate was to spend a semester in a team completing a project for a real client. I had some experience with mobile applications and tried to secure a project in line with my skills. I joined up with some similarly skilled students to give us the best chance of doing great work on an app. We were all pretty excited about the task. The client we were matched with wanted to create the next big social networking phone app. After a lot of collective eye-rolling, we started trying to gather requirements. Client: The last students said there was only two weeks’ worth of work left on the app, so it should be easy for…

For artists and designers, having a strong online presence is vital in order to succeed in the ever-competitive creative industry. But while building a beautiful home in WordPress is easy, maintaining it online can be tricky for those unfamiliar with the ways of the web. Until now. Introducing Kinsta, a WordPress hosting service that makes managing your website a cinch. A highly affordable solution, equipped with all the latest web technologies, Kinsta not only helps WordPress websites deliver fast load times and have less downtime, it also takes tasks such as securing, caching and backing up your site off your hands, saving valuable time. And with Kinsta support staff being some of the most experienced WordPress developers in the industry, there’s very little risk of anything going wrong. So whether…

BRAND NEW FEATURE COMING SOON! We’re excited to announce that we’re bringing you a brand new opportunity to show off your work in net! Our new feature format – the Design Exhibit – will offer you the chance to show off your concept sites, portfolio projects and prototypes. This is a great opportunity to reveal your design skills without necessarily needing to have had them developed into live commercial sites. If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com…

It’s fair to say that as users quickly adapt to emerging technology, their expectations of being delivered immediate access to products and services across all platforms has transformed into more of a standard than an outlier. In the simplest context, we can look at how web design and development has changed and how it was influenced by advances in technology. If any of you were unlucky enough to be working in web development in the 1990s or, more reasonably, the early 2000s, you may remember that it was very much a wild west scenario. Standards weren’t even part of a real conversation at that point. If it displayed on your computer that was all that mattered. In hindsight, maybe that’s where the phrase ‘it works on my machine’ that developers…

+ Be sure to dive deeper into three.js by visiting the online documentation here: https://threejs.org/docs/. There are plenty of great examples, code and extensive documentation to get you going and inspired, beyond the basics. Scene A scene is the primary container that we place our 3D objects in, along with lights and cameras. 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. 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. Geometry Geometry defines the vertices or ‘points’ of an object. Faces created by connecting these vertices…

As a small child, did you ever fall victim to the airplane game? The airplane game was when a supposedly responsible ‘adult’ (I’m not bitter, you’re bitter) would scoop nasty vegetables onto a spoon and fly them through the air and we would have to gobble them up before the ‘plane’ flew away. Faster than we could say: ‘wait, are those Brussels sprouts?’, we had already been coaxed into something that we’d normally be less than motivated to do. It’s manipulation at its finest. And what about this one: ‘Let’s see who can tidy up their toys the fastest’? Adults often entice young children to do things that they normally wouldn’t want to do by turning it into a fun game. Gamification (as we call it) works by distracting the…

+ Gamification can result in positive change. It can boost the user’s experience (and as a result, conversion rates) after encouraging users to pursue an otherwise boring user flow. Gamification can also make education more engaging and, although I hate to say it, it makes kids eat their vegetables! So why do addictive products continue to exist if there are so many ways to practice ethical gamification in digital design? Two reasons: greed and a lack of sustainability. Gamification can certainly result in high revenues, more often than not at the expense of the user’s wellbeing. When nature is free and brings about an abundance of physical and mental health benefits, in many countries it’s normal for people to spend hours and hours on social media and playing games to…

QUESTION OF THE MONTH Can you advise on the best accessibility testing tools when building locally (apart from the WAVE browser plugin)? Annemarie Parsons, Cardiff, UK ID: While such tools cannot replace testing with actual users, they are very helpful and many browsers now come with their own accessibility testing tools that enable you to see if you are heading in the right direction. Firefox now has an Accessibility Inspector that enables you to view a site as the accessibility tree sees it. Chrome also shows the accessibility tree and you can run an Accessibility Audit that helps identify potential accessibility problems on a site. Additionally, the Chrome colour picker will help identify colour contrast issues. So you can do a lot of testing by simply making use of the…

WORKSPACE We are Tribe, a brand new two-man studio based in Bangor, just 20 minutes from Belfast, Northern Ireland. We rent our space from Boom! Studios, which is a crafted, social enterprise that provides a vibrant workspace and head-space for the local creative industry. Northern Ireland is home to a wide range of creative arts and industries. From first-rate film and television productions, such as Game of Thrones and The Fall, to the thriving games industry, the creative sectors play a big role in the economic development and growth of Northern Ireland and we hope to add to that. Our name, Tribe, comes from our ethos of creating a connection with our clients. We don’t believe our service stops after we get paid. We are committed to maintaining a long-lasting…

As web developers, we should always be ambitious about the solutions we design and develop from scratch but also be conscious that there’s no point in ‘reinventing the wheel’ when perfectly good solutions already exist. Clients usually have third-party systems in place for all kinds of business-critical services such as CRM, marketing automation and recruitment. It’s our job to understand where those systems end and where the system that we’re developing begins. Crucially, we need to plan how data flows between those systems to get them working seamlessly together. In other words: how to integrate the systems. Every integration project is different and the complex ones always have a number of moving parts that aren’t always under our control. In short, they are predictably unpredictable. Having a rock-solid process in…

PWAs are the current design pattern to create high-performant, offline, installable apps using just the web stack: HTML, CSS, JavaScript and browsers’ APIs. Thanks to the service worker and the web app manifest specs, we can create a first-class app experience after installing for Android, iOS, iPadOS, Windows, macOS, Chrome OS and Linux. After it is installed, the app’s window will just look like any other app in that particular operating system. To create PWAs, we can use any architecture: from server-side, vanilla JavaScript, React, Vue, Angular or other client-side frameworks. It can be a single-page application or a multi-page web application and we define how are we going to support users while offline. In this approach, we don’t need to package and sign the resources of our app: we…

NativeScript is less well known than React Native but it competes in the same field: native iOS and Android apps from JavaScript and web frameworks. It’s sponsored by Progress, a company known in the web field for some products, such as KendoUI or Telerik components. It lets you use JavaScript or TypeScript and an XML user interface file to create native apps. It also supports Angular and Vue right out of the box, so it’s a great solution for developers used to these frameworks. The advantages of NativeScript are clearer when you use Angular or Vue. For Angular, you create the same components you are used to but using XML instead of HTML for the template, including all data bindings. In the XML, instead of a <div> with a <p>…

In this article, we’ll explore the power of physics engines and how you can create a 3D physics scene using three.js and ammo.js. You’ll learn how to render a physics simulation with rigid body physics and complex collisions. WebGL enables you to render animations, 2D and 3D scenes, shaders and complex imagery, all inside an HTML <canvas> element. Running in parallel with physics engines, these renders can emulate realworld interactions, making it incredibly powerful when it comes to real-time experiences. WebGL is a web standard, designed and maintained by the non-profit Khronos Group. This means that you can create GPU-accelerated experiences right in the browser, without the need for third-party plugins. This runs beautifully on desktop machines and mobile devices. THREE.JS 3D FOR THE WEB Three.js is an open-source 3D…

Writing unit and integration tests and using TypeScript are great ways to improve the robustness of your code. They also help other developers understand the intent of what you’ve written. However, none of these practices are useful if developers are able to submit pull requests that don’t follow these guidelines. In this article, we’re going to take a look at a tool that will further improve the code quality on projects by stopping commits and pushes to your online repository until the guidelines you set out have been followed. INTRODUCING HUSKY Husky is a tool that ‘hooks’ into your Git settings. It will run a predefined command each time you attempt to perform an action like git commit or git push and will stop the commit or push if those…

STEP 1: START THE REVOLUTION We’re going to look at replacing the mouse pointer with either text or an image, depending on where it is. Then if it’s off to the home section, changing the size of the circle. STEP 2: ESSENTIAL CSS The essential interactions take place by changing CSS classes. Here the cursor alternates between a large and small size and there is also a show and hide class to toggle the visibility of the text and icon. STEP 3: CREATE THE FUNCTIONALITY In the JavaScript, the first part is setting up a reference to the various elements on the screen that will be manipulated. These are stored in variables for easy access, including the size of the window and half of the circle’s width. STEP 4: MOVE…

As designers, there is always the question of what prototyping tools you should use for your project. There is lots of software out there for tasks like wireframing, prototyping and building complex interactions; however very few tools are capable of handling all of these. Framer is one tool that has all these functions, making designers’ lives easier. Though there is a learning curve, it is worth it because Framer greatly speeds up the process of creating tiny animations and interactions. The latest iteration, Framer X, goes much further than its previous version and other tools in bridging gaps between interaction design and actual development. One of the primary changes is that Framer X uses React and JavaScript instead of using CoffeeScript for developing micro-interactions and animation. This helps deliver faster…

+ Code overrides are one of the most powerful functionalities of Framer. Put simply, code overrides help the design components communicate with one another. This can be achieved by writing code snippets and attaching them to any design element like a frame or stack. This will help in overriding the actual properties such as width, colour, background, opacity and fills. Also, this can be used to animate the elements, for example hover animations, rotation or movement. You can apply the code override to the components on the canvas by using Override, found within the Properties panel on the right-hand side. If you’d like to discover a bit more about code overrides, here is a useful resource to read for learning how to use them: https://bit.ly/2YDuYAk In this example, the author…