Innholdsfortegnelse for August 2018 i net

We asked the @netmag followers how they manage a client who wants to fill their site with horrendous graphics and terrible colour schemes. FOCUS ON GOALS “I shift the conversation from their personal tastes to the aesthetic preferences of their target audience. I also emphasise the project’s goals so the client understands this is not about them but more about increased sales and brand presence,” says @LuckychairNews. WALK THEM THROUGH GOOD SITES “Design is about perspective – if a client has poor taste, it’s usually because they’re uneducated about good design. It’s our job to educate them. Looking at successful websites and apps to walk through why they’re successful can often help as the proof of the pudding is in the eating,” says @McKay_1988 BUILD MUTUAL TRUST “Usually we try…

INFO job: Founder and production director at Clearleft w: clagnut.com t: @clagnut Typography on the web has come a long way. About a decade ago it was still woefully underused and done very poorly. Text wasn’t very readable online and the same typefaces were used over and over again. People were throwing their hands in the air, claiming you couldn’t do typography on the web well. But there’s one man that has been trying to convince people otherwise and that man is Richard Rutter, co-founder of influential UX consultancy Clearleft. Now there’s a real surge of excitement about web typography and he’s at the centre of it. One of the biggest game changers right now is the advent of variable fonts, a technology that enables a single font file to behave like…

INFO job: Writer, designer and educator w: tinybooks.org t: @fehler One of the biggest challenges in business – especially when you’re running a company on top of another job – is finding time to get everything done. Following through on strategic goals requires time and time can often seem in short supply. Managing distractions is critical if you’re to get everything done that you need to. Unfortunately we live in a world filled with interruptions. Smartphones might be very empowering but they can also be incredibly distracting. One of the unfortunate by-products of having a computer in your pocket or on your wrist is it can feel as if your mind is being pulled in a thousand directions at once. While useful, notifications, if they’re not controlled, interrupt your flow. Getting into…

PWA Builder http://pwabuilder.com/ Microsoft tool to create PWAs from websites compatible with all the platforms and also to package a PWA launcher for the Microsoft Store. Service Workers Recipes https://serviceworke.rs List of recipes and snippets to apply to service workers. App Manifest Generator https://app-manifest.firebaseapp.com/ A very useful online tool that will enable you to generate the web app manifest and all icon versions. Workbox https://developers.google.com/web/tools/workbox Framework to code PWAs and service workers with a simple to use API. Lighthouse https://developers.google.com/web/tools/lighthouse/ Open-source tool to report on your PWA’s performance and certain metrics to assess the effectiveness of the app-like experience it creates. Sonar Whal https://sonarwhal.com/ Open-source linter for the web platform that includes PWA checks. PWA Logo https://webmaxru.github.io/progressiveweb-apps-logo/ The PWA logo was generated and voted for by the community and as…

An important and often difficult part of the agile process is finding tools that can successfully provide quantitative measurements while also providing qualitative testing. Below are some of the best resources we’ve found that provide both in an intuitive way for your customers and your team. If you are unsure of something, go here for help. Hotjar https://www.hotjar.com Hotjar helps designers and developers understand their web and mobile site visitors through heatmaps, session recordings, incoming feedback, surveys and a whole lot more. Design Kit http://www.designkit.org/ The Design Kit, create by Ideo.org through a Kickstarter campaign, comes with 57 design methods, the key mindsets that underpin how and why IDEO.org believes design can change lives and a full slate of worksheets and case studies from projects that show human-centred design in…

TensorFlow.js Project Homepage https://js.tensorflow.org This is the best place to start; it’s full of tutorials and documentation to help get you on your way. There is also a bunch of really exciting demos to show you some of the amazing possibilities, including a webcam controller and a scavenger hunt using a camera. Machine Learning Crash Course https://developers.google.com/machine-learning/crash-course If you are unfamiliar with machine learning, then Google offers a great crash course that will help you get up to speed. 2018 TensorFlow Dev Summit www.youtube.com/watch?v=YB-kfeNIPCE Watch the Machine Learning in JavaScript video from the 2018 Dev Summit on YouTube, where Nikhil Throat and Daniel Smilkov discuss TensorFlow.js and its possibilities. AngularFirebase https://angularfirebase.com/lessons/tensorflow-js-quick-start/ If you are familiar with Angular, then this is a good resource to learn about training a basic model…

Traditionally, when a user visits a site, some code where the website lives kicks into action, getting data from a database, inserting it into templates and stitches page pieces together before sending that code down to the user. This can take quite a bit of time. A static site generator does all of this before the user gets to the website. Because of this they can be a lot faster and a lot less prone to security risks (because there’s no code running behind the scenes on the server). They allow us to have a website with dynamic content (blog posts, pages, products, or any other class of content) which might need extra pages for archives, categories, and a way of making & saving drafts. Static Sites can be hosted…

ABOUT THE AUTHOR AHMED ABUELGASIM w: hungryphilomath.com job: Front-end developer, Potato London areas of expertise: CSS, JavaScript, Angular In this tutorial we will take a look at ways of changing the CSS styles of elements, as well as seemingly styling their parents, depending on the number of elements. We will also see how to change the layout of elements based on their quantity, creating more adaptive layouts that make better use of space. Lastly we will cover the use of CSS counters to display an element’s index within a set inside it, as well as displaying the total count inside the parent. All of this will be achieved with pure CSS only, without the need for JavaScript or frameworks, leading to simple and more efficient code. SINGLE ELEMENT SELECTORS CSS3 only…

SIDE PROJECT OF THE MONTH INFO SEAN CATANGUI job: Sean is an artist who works primarily with graphic design and computer programming. His practice aims to explore the boundaries of digital and generative art. w: http://reallyfrom.com t: @_catangui Tell us what Really From does Really From is an interactive audiovisual album. It’s sorted into five pieces that each consist of interactive generative animations and a song. Rather than have the audio influence the visuals, I invite the user to ‘dance’ along and control what they see with either a mouse or a MIDI controller. Why did you create it? This project was an opportunity for me to explore my full range of artistic expression – my background is equal parts music (jazz saxophone and piano) and mathematics. Visually I was very inspired…

BEYOND PIXELS It was love at first smell. The freshly cut pine wafted to my six-year-old nose. I made a simple wooden trivet: two stout blocks connected by four spindly dowels. I cut, drilled, glued and painted. I loved it. It was the full-body experience that got me – the smell of pine and the odour of drilling, the heft of the wood in my hand. But I also loved the process: I fashioned the parts I needed, built the piece and gave it a presentable finish. My mum used this simple, awkward trivet for almost everything that came out of her oven. These days, I lead a team of designers creating digital products. I can’t say whether my woodworking has influenced my design career but the creative process underlays…

I once believed that UX was a catchall improvement for everything. That was until I started working with small businesses – where brand recognition and volume of traffic is lower, navigation, content and audience segments are simpler and objectives are easier to distil – and it became clear that the balance of return on investment against the cost of UX as a percentage increase in sales was negligible. UX increases performance by increments: where traffic is high this generates considerable revenue on low percentage increases but drop that traffic to less than 5,000 visits a month and the sums just don’t add up. Unfortunately, the catch-22 is that small businesses, a valuable part of our community, need to grow online and so still need to offer a relatively sleek experience…

INFO job: Interactive artist w: marpi.pl t: @marpi_ How did you become an interactive digital artist and what do you like about this work? It has been a really long journey through a variety of media, roles and countries. And what I’ve finally found with interactive art, installations and the whole event space is that it’s about forging a direct connection with people. It’s about seeing people interacting with something I made, their reactions, the way they discover it or how they find ways to use it to create something themselves. I like that art finally not only cares about the viewers but it responds to user testing. Who are your typical clients? I don’t have clients any more, not in the typical sense. That’s been the biggest shift and…

LEON BROWN Developer and author of e-learning content at nextpoint.co.uk. Leon makes complicated concepts easy to understand and fun to learn. t: @_LeonBrown SITE OF THE MONTH BOOTSTRAP, CSS, HTML5 VILLAGE SOFTWARE https://villagesoftware.co.uk The new website for Village Software uses a clean and modern-looking theme that manages to present software engineering as a relatable concept to non-developers. With its purpose being to market the company’s services to other businesses, the website is tasked with promoting the benefits of using bespoke software systems, via a format that’s easy to understand even for people who don’t possess a technical background. Managing director Jonathan Read describes the website as a platform for sharing knowledge and expertise, an exercise that leads to awareness and confidence of the business within its target sectors. This focus on…

What’s on your desktop? A mess of papers, post-its, pens, notebooks, glasses and the occasional coffee stain or two! Little things that make your life worthwhile Websites: Medium, Dragon Age Wiki (Fandom), Behance Apps: Messenger, Google Books, YouTube Audio: A lot of different music. I couldn’t possibly name only a few! Reading: The Witcher series by Andrzej Sapkowski, Susan Weinschenk What do you have on the walls? More messy papers – just vertically instead of horizontally! What will you do for lunch? Eat far more unhealthily than I should and probably top it off with a soda What hours do you work? 8-4 What else do you do in the office? Well it’s an office, so I work! Never too busy to goof around with my crazy colleagues, though How…

Hundreds of big and small companies have already jumped into PWAs, so it’s a good idea to test drive some of them to understand the full experience. Here are some to explore: In case you’re wondering, the reason why some companies are only delivering PWAs to mobile devices or Android is because it was the only platform available up until just a few months ago. So if you want to try them on the desktop or another platform, you might want to change the user agent before installing using handy tools such as Chrome DevTools simulator. Most of these companies are releasing reports about what they gained after moving into PWAs. These are definitely well…

ABOUT THE AUTHOR DARRYL BARTLETT w: bartlettdarryl.com t: @darrylabartlett job: Front-end developer areas of expertise: JavaScript, PHP, mobile development On 30 March of this year, Google announced that TensorFlow would be making its way to the web in the form of TensorFlow.js. Web developers can now create machine-learning experiences directly in the browser without the end user having to install any drivers or software. Developers can also share their creations with just a link like any other standard website or web app. One of the great things about machine learning coming to the browser is that web experiences are very interactive, so that users will be able to be fully engaged in their machine-learning experiences. Browsers also have access to many sensors like GPS, accelerometers and cameras and the data that comes…

ABOUT THE AUTHOR BENJAMIN READ w: deliciousreverie.co.uk t: @muzzlehatch_ job: Designer and developer areas of expertise: JavaScript, React and UX YOU WILL NEED Acomputer with an internet connection (obvs) Acode editor (Atom or VS Code) Acommand line shell / terminal Arecent version of Node.js installed (you can download & install from AWordPress site to get content from. If you don’t have one, you can use the platform orthisHeroku build pack: GETTING STARTED USING WORDPRESS WordPress comes out-of-the box with the REST API and that is what we’re going to use to query your data. So we don’t really need anything else! Our display site is totally separate from our content site, so we won’t need a theme or any other customisation outside a few (optional) plugins. Although of course you can…

Although we can’t apply CSS styles to an element based on its number of children, we can cheat and use the first child’s ::before pseudo-element positioned to take up the full size of the parent, thereby appearing to change its style. This is achieved by giving the parent position: relative and the ::before element position :absolute and z-index: -1 to prevent it from overlaying the other elements. Any CSS property that can be set on ::before elements can therefore seemingly be applied to their parent, using any valid selector. We can hence target the ::before element of an item that is first and also third from last, which only applies to a group of three, changing its appearance and even displaying text inside it using the content property.…

Dan Evans, Dublin, Ireland JB: Sam Harris’s Waking Up podcast (https://samharris.org/podcast/) covers science and tech. It’s especially amazing because of the guests who take part. Almost tech, but actually more science, is The Infinite Monkey Cage (https://www.bbc.co.uk/programmes/b00snr0w/episodes/downloads) with Professor Brian Cox and Robin Ince, which is well-informed, intelligent and fun. Other podcasts I highly recommend are the long-running industry news podcasts from Leo Laporte, This Week in Tech (twit.tv/shows/this-week-in-tech) and This Week in Google (https://twit.tv/shows/this-week-in-google). As a true crime junkie, I love Serial (serialpodcast.org) and S-Town (stownpodcast.org). Whenever I’m travelling I listen to Adam Buxton’s podcast (http://adam-buxton.co.uk/podcasts) because they’re always really entertaining with great guests having a relaxed chat. COOL STUFF WE LEARNED THIS MONTH GRID TO FLEX If you want to use CSS Grid but need to support IE11…

Multi-disciplinary designer at Frequency Design https://www.frequency.ie CODEKIT CodeKit is like a Swiss Army Knife for Mac that compiles and processes a huge list of languages including Sass, Less, JS and Haml. It also optimises images to squeeze every last byte out of JPEG, SVG and PNG files. And the changelogs are very funny! https://codekitapp.com TOWER GIT Let’s face it: the command line is not pretty. Tower provides the best visual interpretation of repository management, particularly when commits and revisions become complex, making it less of a chore and almost fun! https://git-tower.com/mac/ CODA BY PANIC SOFTWARE Most developers’ editor of choice is Sublime Text but for me it’s always been Coda. A comfortable UI is hugely important when you’re staring at something for hours every day. Coda both looks and does…

‘Oh, that’ll take months to replace.’ ‘We can’t touch that… [in a whisper]… we really don’t know what it does, let alone how it works.’ I’ve lost track of the number of times clients have said these kinds of things to me. But all is not lost. You can innovate with your existing tech solutions; you don’t have to throw everything away and start from scratch. Imagine this scenario – quite a few years ago, a factory created piecemeal systems to support its internal functions, such as finance, manufacturing, dispatch, marketing and dealing with visitors. As customers’ expectations have grown, its website has not been kept in check. Now more than half of the business’s traffic comes from mobile or small-screen devices but the website does not properly adapt. And…

KRISZTINA TOTH Full stack web machinista krisztinatoth.com When a potential client contacts me, the tone of their first message is often decisive. Going beyond basic politeness, I look for people committed to their goals, with a clear vision of what they want to accomplish. I instantly reject the ‘I could do it myself but don’t have the time’ type. As for the project itself, I only take assignments that advance my skills. I draw the line at copy-paste sites and ‘coming soon’ pages because even though they’re easy money, they offer no professional or personal development. RANJIT SIHAT Graphic designer inmotiondesigns.co.uk Being asked to use images where the copyright is held by someone else is a deal-breaker for any contract. The relationship between client and designer should be based on…

DESIGN MEETUPS PROFILES NEIL QUINN Neil is a designer at Polleni, an agency specialising in graphic and web design. w: www.polleni.com t: @polleni_agency JAKE HINDS Jake is creative designer at Bopgun, working on clients like Innocent and The Economist. w: bopgun.com t: @bopgun TIM BREEZE Tim is a freelance graphic designer and frontend developer based in the West Midlands. w: https://tim-breeze.com t: @tim_breeze BRIEF This month we would like you to design a website for a regular local web-designer meetup. We would like your site to prioritise all the important information such as dates, times and location, as well as using an impactful visual design that will entice new attendees to join. NEIL QUINN WEB HEROES A pop-art-inspired social-networking site that enables attendees to keep in touch Web Heroes is a website for a local web…

BRIEF OpenActive uses data to help get people active. It required an updated website that could provide tools and resources to help members use that data, as well as grow its community and keep it informed. Imaginate Creative was brought on board to develop a site that would tick all the boxes. CLOSE UP 1) A new identity was created to accompany the website, which enabled several colour pathways to be used within printed collateral and user journeys on the site. (2) This project embraced atomic design theories and, as such, it was decided that the style guide would be built from the ground up to meet the needs of the site as it was developed. (3) To ensure new site development and community tooling stays on brand, a pattern…

To create successful PWAs, we need to embrace the P in PWA: progressive. This basically means that our app won’t look or act exactly the same on every platform. We will instead be enabling abilities based on feature queries but there are also intrinsic differences between platforms that are essential to understand. That won’t require a user agent sniffing or creating different versions but it will require adding in some code that will be used only for some platforms. For Android, we need to define a meta tag in your HTML matching the “theme_ color” in the web app manifest that will be used while your PWA works within the browser’s context. On Windows 10, we might have access to some WinRT APIs based on how the app was published…

Amnesty International USA (AIUSA) adds new features to its website in one- or two-week sprints. This gives it the ability to break down complex features into smaller pieces that can be implemented, measured and iterated upon quickly. AIUSA then uses a polite smiley face button by Hotjar [https://www.hotjar.com] to get instant feedback from customers right when they have something to say. “If we push something live and users don’t like it, we’ll hear about it almost right away. It’s become a major tool in our arsenal to tell us how we are doing as new features and content are added to the website.” Gabriel Dekoladenu, junior web developer at Amnesty International USA Another tool it has seen success with is the User Testing service at https://www.usertesting.com. AIUSA regularly uses the…

ABOUT THE AUTHOR RICHARD MAT TKA w: http://richardmattka.com t: @synergyseeker job: Interactive director, designer, developer areas of expertise: Shaders, VFX, WebGL The Web Audio API enables developers to load external sounds, create new ones and generate amazing effects. Using the analyser node of the audio graph, sound data can be extracted in wave or frequency data sets. Shaders enable a wide range of visual effects by working directly with the graphics hardware of devices. You can create stunning real-time animations powered by sound! SET UP THE BASIC HTML Start by setting up the HTML page, including a place for your vertex and fragment shaders and a ‘container’ for your canvas. This tutorial will use the WebGL library three.js to handle drawing to the canvas. Add a reference to the three.js library. You…

The Web Audio API provides a powerful system for controlling audio on the web, enabling you to choose audio sources, add effects, create visualisations and much more. The Web Audio API processes operations inside an Audio Context, which is modular in its design. Basic operations are performed with audio nodes, which are linked together to form an audio routing graph. This design provides the flexibility to create complex audio functions with dynamic effects. Audio nodes are linked into chains by their inputs and outputs. They typically start with one or more sources, which can be connected to each other, to effects and analysers. They can then be connected to destination nodes to output to speakers. Analyser node Using the API’s analyser node means that you can extract time, frequency, wave…

CSS counters can be used to determine the quantity of any set of elements that can be targeted with CSS. To use a counter, first initialise it in the parent using counter-reset: boxes where boxes can be any name you like. Then add counter-increment: boxes to the selector that matches the elements you want to count. For instance, we can show the element count concatenated with text in each element’s ::after pseudo-element: We can also show the total count in the parent using the ::after element of the last child, positioned absolutely to appear inside the parent. To handle pluralisation we can show different messages based on element quantity by adding a singular case message to :only-of-type::after, and a plural case to :nth-of-type(n+2):last-of-type:: after, which matches elements that are last…

FEATURED HOST “We have several servers from Netcetera and the network connectivity is top-notch - great uptime and speed is never an issue. We would highly recommend Netcetera”Suzy Bean EXPERT TIP CLOUD TECH TIP… If you’re going to fully utilise cloud technology, before deciding on a service provider ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; anunderutilised cloud will be a waste of money. Netcetera provides hosting from one of the most energy-efficient datacentres in Europe, all powered by green energy. It offers everything from reliable low-cost hosting for a single site right through to complex cloud racks and managed IT solutions. One of its most popular products is its Managed Cloud, designed to help…