Indholdsfortegnelse for October 2018 i net

Whether you’re a fresh-faced freelancer cutting your teeth on your first commercial project or one of the industry’s leading lights with decades of experience, it’s important to be able to take a step back occasionally and plot out the path along which you’d like your career to progress. In light of this, we’ve decided to focus this issue on growing your professional skills and standing. That’s why Tom May has dug out his magnifying glass and is scrutinising the subject of specialising versus tackling the full stack, looking at whether it’s better to narrow your focus or become a versatile jack of all trades. And that’s only the half of it: elsewhere, we take a look at how you can make your way as a solo developer in the competitive…

I’m an IT admin for a small company but I’ve got a pretty solid background in web design, so people ask me to do small jobs for them. One of our elderly staff members runs a company that provides first-aid training to young adults. She wanted to know if I’d redesign it for her. I sent her 10 different example designs to choose from and she picked one she liked. She said that we’ll catch up again once she returns from vacation to sort out payment and transfer of ownership. Two weeks pass and her vacation ends. Another week passes and she still hasn’t spoken to me. And another. And another. Eventually some six weeks later she catches me in the car park as I’m leaving for the day. Client:…

What first attracted you to working for an augmented reality company? The effect that AR has on people. When you show AR to somebody for the first time, the effect is almost always of pure awe. I remember the first app I saw: an AR colouring book. It was one of the ones where you draw a dinosaur or a fairy with the colours you want and then, through an app on your phone, it comes alive in front of you with a cool animation and those same colours you chose. When I saw that, I wanted to be a child again, use AR to play and discover what else I could do with it. AR struck me as the kind of tech that could be both useful and fantastic…

★ ANIMATION, PARALLAX, WEBGL, REACTJS EWZ ANNUAL REPORT https://www.ewz.ch/gnb/de/startseite/ss2/clever-parkieren.html KiloKilo, an interactive agency from Switzerland, has made possibly the most impressive corporate report I’ve seen. EWZ is committed to environmentally friendly energy and its new site is a world of discovery covering its innovations. Users are greeted with a large chunk of rock that can be zoomed into and explored. The sounds complement the visualisations perfectly. Car horns, dogs barking and children playing suggest a future that is not far away from the present, while a horizontal scroll takes you through the city of the future as if it’s a platform game. The illustrations have fantastic detail, with blur adding depth of field and focusing the users’ eyes on the buildings, mountains, wind farms and even elephants that underpin the…

In these days of relatively low-cost design tools and hyper-connectivity, it’s easier than ever to establish and expand a business. There are clear strategies available for building a business, growing from a role as a freelancer in a company of one to managing multiple employees as a boutique agency. The good news is that opportunities for smaller, boutique agencies are growing. With the reach that the web affords, it’s possible to establish a small, focused agency that can take on larger projects that have the potential for growth. Even if you’re starting out solo or in a partnership, it helps to plan ahead, getting the foundations for growth in place so that you’re all set to go should the work come flooding in. It’s all about the clients It’s clearly…

Working remotely has become much more common in web development over the last few years. Before version control, working remotely on the same development project would have been an absolute nightmare. Developers would have had to send files to each other (probably through email), pasting in their own code before sending it back. There was no real way to track what had been added and when. Thankfully, version control has arrived and made development on all fronts a lot more manageable. Web projects have become much easier to implement and manage, especially when it comes to working in a remote development team. You no longer have to worry about the current version of a website being overwritten – each team member is free to work on any file at anytime…

In this two-part tutorial, we’re going to show you how to progressively enhance your site or web app with a service worker to give you faster loading times and offline support. In part one, we’ll learn about service worker registration and set up a bare bones worker that will cache and serve our static assets, delivering a huge performance boost on subsequent loads. Next issue, in part two, we’ll learn how to cache dynamic API responses and give our demo app full offline support. You’re going to need recent versions of Node.js and npm installed on your computer. CLONE THE DEMO APP We’ve knocked up a demo app that we will use as the basis for this tutorial. You can clone the project here: https://github.com/danielcrisp/will-it-rain-today The app is a fun…

Graphic shaders enable a wide range of effects by working directly with the graphics hardware of devices. They are highly efficient, executing on the GPU. They are powerful for web and game development because they run in real-time, without needing to pre-render, which means they are reactive and potentially interactive. In previous articles, you learned what shaders are, how to get them into your 3D Web code and created many of your own. You learned about post-processing, animations, cool effects and blurs and more. This tutorial continues by showing you how to manipulate the vertices of 3D objects using the vertex shader. Combined with fragment shaders you’ll gain some cool effects you can use right away. SETUP A BASIC HTML PAGE For your vertex displacement project, start by setting up…

★ QUESTION OF THE MONTH Can UIs both respect user conventions and be visually enticing and original? Dee Pattinson, Hertfordshire, UK HP: There’s no harm in breaking conventions so long as you’re breaking the right ones. When you’re flouting convention arbitrarily just to attract the attention of other designers, you’re not doing right by your users. But some conventions are just conventional wisdom and ought to be challenged. Do different if (and only if) it means doing better. But be aware that an objectively poor pattern that’s well established will be easier to use than a better pattern that’s unfamiliar, at least to begin with. So it’s important to over-communicate new ideas and possibly provide alternatives and fallbacks (see the ‘Offer choice’ principle: inclusivedesignprinciples.org/#offer-choice). In general, users are interested in…

From our timeline What’s the most annoying web design trend? Aggressive pop-ups / interstitials that ask you to subscribe to a newsletter or similar. Also: too many different fonts on one page, dodgy transitions, intrusive chat facilities. @Designer_Webs Pretending Brutalism is a legitimate digital design movement. @jordanmoore Cookies pop up followed by newsletter pop up, followed by ‘follow us’ pop up, followed by ‘please disable ad blocker’ pop up, followed by a captcha that takes 20 ticks. @robbydesigns Too much JavaScript, too [much] code causing poor performance and complexity in maintenance. @mnemonicCloud Asking for permission to use notifications and location as soon as I land on the page, whole page adblock disable requests and pop ups when my mouse leaves the page… to name a few @jacknevdev Grey font colour…

After eight years of renting studios in shared offices, in summer 2012 we bit the bullet and bought our own place on Middle Street in Brighton. The building already had a long heritage serving the local digital community in its former guise as the pioneering Brighton Media Centre. But the place had fallen into disrepair, providing us with the perfect blank canvas to create our dream office. The first thing we did was knock out a huge hole between the first and second floors in order to create an atrium. (1) As well as letting the light flood in, we wanted to connect the two spaces and avoid the challenges of splitting the team between multiple floors. Next, we knocked out the back wall and installed large patio doors. This…

Cassidy Williams’ career path is a great example of the importance of networking and the opportunities that can come your way if you put yourself out there and create a personal brand. It’s an especially inspiring story for young women wanting to get into the tech world, women who Williams is very active in supporting. Straight after graduating from Iowa State University, Williams joined a New York startup as a software engineer and developer evangelist and was featured as one of ‘35 Women Under 35 Who Are Changing the Tech Industry’ in Glamour magazine. Two years later, she moved to the West Coast and, this February, Amazon approached her to head up its developer voice programs. “I’m basically the person between the third-party developers and the Amazon product teams,” she…

CLOSE UP (1) The home page is designed to lead users to the content they seek quickly but also draw their attention to other areas; for example, visitors looking for information on opening times would also see which services are being conducted. (2) All pages are modular, allowing editors the flexibility to add content components and control the layout. The landing pages present content drawn from several sources, so performance and flexibility were key considerations. (3) Events and services are presented in either calendar format or lists, with the ability to drill down for further detail, such as what the choir was going to be singing, further information about the musicians and the ability to listen to samples of recordings of that music. (4) With tourists trying to get information…

littlethunder.co A boutique experience design business based in Belfast, Little Thunder was founded in 2013 by designers Gaby Muldoon and Tim Potter. Over its half a decade history, the company has grown from a two-man team to a digital agency that now has a rapidly expanding team of designers, developers and animators. As the company has grown, its client base has expanded from a local focus based largely in Belfast to an international focus with clients further afield. Little Thunder now counts Electronic Arts (EA), Visa and PwC as clients and it’s a measure of the esteem in which the company is held that many global businesses now pay a retainer to secure its services. Muldoon and Potter graduated from Belfast School of Art’s interaction design programme in 2004 and…

GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, Three.js, iOS games, interactive installations, Unity, openFrameworks, Processing and many others. The graphics pipeline Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline: vertex shaders and fragment shaders. These are the core of the OpenGL Shading Language and the WebGL graphics pipeline. Fragment shaders This shader, which is typically the last in the pipeline, instructs each fragment or pixel which colour it should be. It does this by setting a value for fragColor in…

The IntersectionObserver API is a promising and exciting new web API that tackles one of the most common issues for web developers: detecting the visibility of elements when they come into view. This API helps simplify the problem by providing a more modern solution for detecting element intersections. IntersectionObserver has many use cases for implementing deferred functionality, including lazy loading images, as well as triggering animations and transitions. According to specs, “The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.” This modern web API allows you to observe and trigger a callback function when an element is visible in the viewport or intersects with another element. Some of the previous difficulties developers…

Tell us what UX Overflow does. UX Overflow (http://uxoverflow.com) is a free public platform for designers to find answers: from sharing the best user experience research practices and prototyping tools to career advice and book recommendations. All designers are welcome, from those who are just starting out to seasoned unicorns. Why did you create it? Compared to software developers who have StackOverflow as the go-to website for code-related answers, designers only seem to have private Slack groups, tons of comments in Medium articles and somewhat difficult to follow Twitter threads – knowledge is spread all over the place so we have to repeat ourselves over and over again. The idea came to my mind during my interview for BlocThinking podcast run by brilliant chaps Jonathan Gall and Werner Puchert (http://bit.ly/2JZfn6K).…

I’ve always loved the outdoors. Growing up in a small village in the West Country, it’s no wonder why, as there is little else to do as a child than go out and explore. I was never great in school but I’ve always been a keen learner. I kept myself busy in my younger years, mostly with sports and outdoor activities, including the Scouts, which played a large part in my appreciation for the outdoors. Since getting into the digital sector after university, I’ve found an appreciation for creativity in the coded form. The ever-changing nature of technology means there’s always something new to learn and ever-increasing challenges to face. However, like many in similar fields of work, I get bogged down in too many hours on screen. After a…

In an age of all-encompassing, world-dominating multinationals, business might appear to be a brutal, dog-eat-dog affair but there’s no rule book that states that you can’t adopt a different, less competitive approach. Running a business doesn’t have to be ‘me, me, me’ – focused solely on you and your product. In fact there’s a great deal to be said about celebrating the work of others, even your competitors or those who work in adjacent industries. In my article ‘Share’ (Issue #298) I explored content strategy and content marketing. As I noted: “your product is an extension of you and your values. By sharing content focused around your values and interests you can raise awareness of your brand and – as a welcome by-product – drive a few sales in the…

Agencies and website owners can be slow to adapt to changes in technology, often because the latest fad can fall out of favour as fast as it emerges. The newest software isn’t always best. Instead, we have a tendency to rely on more tried and tested solutions, which aren’t always the fastest and therefore don’t always deliver the best user experience. Even so, there are several ways any site could improve its speed and, therefore, UX. Here are some techniques you could try. JAVASCRIPT FRAMEWORKS Using a JavaScript framework is one way that web apps can be built for speed. The approach has risen in popularity over the last few years in particular and wider industry support exists for most packages. With this approach, the site is typically built as…

It’s a perennial question in the web industry. Should you specialise in one specific language, discipline or methodology or offer a broad range of design and development skills? There’s no simple answer that applies to everyone. But there are some clues as to which route might suit you better personally. We speak to experts across the sector to get their advice on how to choose the best path for you. Find work There are many obvious benefits to being a specialist, believes designer and developer Matt Wiggins. “You get to master the skills you love and, if you’re good enough, people will seek you out for these abilities,” he says. But there’s also a downside. “Frankly, it’s going to be harder to get a full-time job,” he explains. Wiggins offers…

Continually http://continual.ly Designed by the team that built Typecast, Continually is a tool that’s designed to get you more qualified leads. Using chatbots and machine learning, Continually allows you to respond to prospective leads automatically, out of hours and across time zones. It’s like your virtual, always-on PA. Nice! SuperBooked https://superbooked.com Currently in beta, SuperBooked – the brainchild of noted web-wranglers Dan Mall and Philip Zaengle – is designed to help you find work with a little help from your friends. Built on the idea that the best opportunities come from the people you know, SuperBooked connects you to work through people you trust. fullstory https://www.fullstory.com Although not a lead generation tool per se, fullstory captures page insights from your site, helping you design a more enticing proposition. It helps…

Here is a list of resources that will help you on your way with learning and discovering more about version control, GitHub and working within a remote development team. GitHub Guides https://guides.github.com There is no better place to learn about GitHub than from the official guides homepage, especially if you are new to GitHub or version control in general. GitHub Desktop https://desktop.github.com If you don’t like working with the command line, then GitHub offers a piece of software with a great UI that allows you to manage your GitHub repositories. Guide to remote development teams. https://x-team.com/remote-team-guide X-Team offers several great guides on the best ways to manage and communicate when working in a remote development team. A visual guide to version control https://betterexplained.com/articles/a-visual-guide-toversion-control If you are completely new to version…

In most companies, accessibility is an afterthought because of the perceived additional cost. But accessibility is only expensive if it’s not included from the beginning and it has far more benefits than are immediately obvious. BEYOND PERMANENT DISABILITY We are implored by the W3C to create websites that are perceivable, operable, understandable and robust. Some features are easier to convince engineers and designers to implement because they’re relatable: Combining colour and other sensory features with non-sensory elements (like text or icons); Ensuring that there is sufficient contrast between text and background colours; Using sans serif fonts that are legible and comfortable to read. However, a few other things are really difficult to get people to implement because they assume the use cases are only for disabled users: Supporting navigation with…

You are using Three.js as the WebGL renderer in this tutorial. If you are not familiar with Three.js, here is a quick primer. The scene The scene is a container object that encapsulates the other objects and elements that we wish to show. Camera Three.js has a few different camera classes, 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. Typically you will call the renderer to render each frame. Materials Three.js comes with several materials such as Normal, Basic and Shader. Materials are used texture the faces of an object’s geometry. Attributes include textures maps,…