netの March 2016 の目次

PICTURE PROCESSOR Thanks to the release of Google Cloud Vision API, it’s now possible for developers to build powerful applications that can understand the contents of a picture. By making its Deep Learning algorithms available to the public, Alessandro Vitale explains how Google opened up the playing field for startups to come in and monetise the service. netm.ag/cloudvision277 SEARCH BARS SOLVED The usefulness of hamburger icons fires up some heated opinions from web pros, but when it comes to UX it’s a bad idea to hide search bars inside them. Dan Bayn explains that, by using the search box to suggest main navigation pages, devs can make hub pages both discoverable and responsive. netm.ag/search277 CONVERTING COPY Copy can make or break your web conversions, as this article exploring PeopleSpark’s staggeringly…

When you see the San Francisco-based rock band Happy Fangs play live, you might guess that some of these rockers are also designers. We take the stage wearing geometric war paint. Our amplifiers all repeat one stark chevron pattern. All our instruments and attire – even my water bottle – are black and white. This kind of consistency doesn’t happen by accident. Our guitarist Michael Cobra runs his own agency, Cobra Creative. Our drummer Jess Gowrie makes her own fibreglass drum sets for a living. And when I’m not singing or writing songs for Happy Fangs, I’m designing a luxurious living space for the future of online education – a site called MasterClass (masterclass.com). In Happy Fangs, we focus on the visuals just as much as the music. So when…

BUILDING A DEVICE LAB $3 WEB TRUMPS €19 GOING RESPONSIVE $18 OZO $60,000 CODECODE NINJA $10PM MASTERING RESPONSIVE WEB DESIGN £31.18 What we think (1) Destiny Montague and Lara Hogan explain how making a device lab can give you valuable user experience insights (netm.ag/devicelab-277). (2) The perfect gift for geeky friends, Web Trumps turns web and app companies into 32 uniquely designed cards (netm.ag/webtrumps-277). (3) Karen McGrane highlights why responsive design makes good business sense and shows you how to implement it from concept to launch (netm.ag/responsive-277). (4) Capable of capturing 360-degree videos, the OZO camera is a revolutionary step for VR production, and a snip at 60 grand (netm.ag/ozo-277). (5) CodeCode Ninja uses specially designed flash cards to sharpen your development skills (netm.ag/ninja-277). (6) Ricardo Zea pushes your HTML…

Your newest teammate has just pulled the codebase onto their machine for the first time. Unfortunately for them, everyone is away at meetings and won’t be available to answer questions until the end of the week. Now what? When someone joins a team, they already need to deal with HR and get to know their new teammates. Add to that the daunting nature of learning a new codebase, and the first several weeks on a new team are difficult at best. It’s in everyone’s favour to optimise the onboarding process. From a financial perspective, every minute a developer isn’t contributing code is costly. From a developer’s perspective, every minute they’re not shipping code is unproductive. So how do we make onboarding more effective in less time? Let’s do what we…

AUTHOR DAN CORK Dan (@dancork) is a developer at Hungry Geek, the engineering team at Holiday Extras. He is passionate about CSS and UI development dancork.co.uk ILLUSTRAT0R MAKERS COMPANY Makers Company is a studio of makers, artists and designers based in Cape Town, South Africa. It aims to create work that is honest, inspiring and fun themakers. company On my way to Berlin last September, I was greeted with a smirk when I told a colleague I was heading to a conference on the sole subject of CSS. “Cascading Style Sheets? I thought they were dying out!” he exclaimed. Frontend development has been through a transformation in the past decade. The skillset required to work in the browser now includes accessibility, performance and a range of JavaScript application frameworks such…

One development I believe we’ll see accelerating considerably in 2016 is the emergence of fully-fledged, endto-end digital prototyping tools. Who knows? 2016 may even see the rise of one tool to rule them all. New tools are arriving constantly. More importantly, we’re seeing these tools widening and deepening their capabilities. InVision, for example, already offers design prototyping tools, design communication and project management capabilities. The team recently incorporated moodboarding and are hard at work adding advanced animations for web and mobile design. The result? A single tool that handles the majority of frontend design requirements. The growing maturity of InVision is representative of this sector, which is driven by a desire to develop a tool that manages the frontend, UX design process from within a single application. In many ways…

ABOUT THE AU THOR PAM SELLE w: thewebivore.com t: @pamasaur job: Software engineer areas of expertise: Building software, generally on the web q: what’s your most impressive hidden talent? a: My fingers are doublejointed (well, technically hypermobile), which freaks people out FACT FILE HOW NEW IS AURELIA? Although Aurelia first entered beta in November 2015, it isn’t as new as it may seem: author Rob Eisenberg has said that it’s the sequel to the Durandal framework (durandaljs.com). DATA FLOW IN ANGULAR 2 In Angular 2, data flow is managed through Observables, a proposed type in ES2016, and polyfilled using the RxJS 5 library. For Angular users, it represents a shift from largely objects and binding to observing streams of data. VERDICT Angular 2 and Aurelia might have a lot in common…

One of the key parts of generating data from a set of values is interpolating between the given initial values. This interpolation returns a new set of values that are dependent on the initial ones. A linear interpolation can be expressed as: This just says that any point on the segment can be expressed as a weighted average of the borders from that segment. Let’s suppose we want to segment a line in two equal parts. The first thing to do would be to generate the weights ( t ) for each required point. To do this we divide 1 by the total number of segments required (the result is 0.5). This ratio is then multiplied by index positions for each point expected (0, 1, 2). This results in the…

@netmag /netmag +netmagazine netmag@futurenet.com net.creativebloq.com UX FOR KIDS Adobe web designer Aga Naplocha asked her Twitter followers for their advice on teaching the concept of UX to children (netm.ag/twitter-277). Here are some of their ideas: @aganaplocha I need your help! How do I explain what UX is to 8-year-old children learning how to code in Scratch? @DesignUXUI UX is making sure your guests are happy. @Hellchick “I make it so that you’re not confused when you use something, or use the menu in your game.” @GaryRae You could use a hopscotch as an example of good UX. It’s obvious where you’re going, how to get there, and what to do next. @katecaldwell I loved @monteiro’s chair example. [netm.ag/chair-277]. @askehansen ‘Good UX is placing the light switch right next to the…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... STEPHANIE RIEGER Stephanie is a designer at yiibu, a small user experience consultancy w: stephanierieger.com t: @stephanierieger NICOLÁS BEVACQUA Nicolás is a JavaScript consultant, blogger and author w: bevacqua.io t: @nzgb ADRIAN HOLOVATY Web developer Adrian co-created the Django framework w: holovaty.com t: @adrianholovaty LARA SCHENCK Lara is an independent WordPress developer and teacher based in NYC w: notlaura.com t: @laras126 QUESTION OF THE MONTH Could (and should) healthcare providers use IoT devices to monitor populations, as a basis for preventative care? Andy Owen, London, UK SR: Connected and sensor-enabled devices that monitor a person’s health are growing in popularity. It’s likely we will see more of them in the future, as they have the potential to greatly improve health and reduce the cost of delivering care. There are however…

SARAH RICHARDS Content strategist sarahjrichards.com MINDFULNESS DAILY Working in content can be really emotional – people get very attached to their copy, and so on – so I practice mindfulness to keep calm and focused. This app sends me reminders and has some good guided practice. Even using the 15 second pause can make a difference. www.mindfulnessdailyapp.com POETICA Poetica brings Google Docsstyle collaborative editing to my WordPress drafts: I love it for getting feedback on my writing. Its markup tools look and feel like writing on paper, which makes my inner editor very, very happy. Far superior to just tracking changes. poetica.com BLINKIST I’d read 24/7 if I could get away with it. Blinkist takes a book and boils it down to the salient points. I use the audio function…

Mobile has changed the world. Everyone on the planet is getting access to the internet, many for the first time. In India over six million internetconnected smartphones are sold each month. That means each year the equivalent of the entire UK population is getting connected, in that one country alone. The way people are using their devices in India is similar to the way the younger generations do in the UK. Huge amounts of time is spent inside apps. The companies building these apps are now building their own content discovery and distribution platforms to rival the reach and scalability of the web. At the same time, native platforms are incorporating more of the core strengths of the web – most recently, the ability to link to content – directly…

MARGOT VAN DER KROGT Host, CreativeMornings creativemornings.com/ams Meetups should be about bringing communities together. In an increasingly digital world, CreativeMornings embraces the traditional ‘tribal’ campfire, connecting likeminded creative people by way of an inspirational talk and free coffee. My advice? Make sure people know what they’re getting and don’t try to do too much. Keep it simple. In an eventsaturated city like Amsterdam, it’s important to do this one thing and do it well. RICHARD WIGGINS Founder, MK Geek Night mkgeeknight.co.uk From my experience, the hardest thing is to find a suitable venue. Look for somewhere that reflects the vibe you are trying to achieve; a good location with proximity to public transport can be key too. If you need sponsorship, you’ll need to be cheeky and ask, and make…

This month... SUPERMARKET SITES PROFILES JENNA HUSSE Y Jenna is a UI and UX designer working at Hertfordshire-based agency Daymedia w: jennahussey.co.uk t: @jhussey2 SEAN O’BRIEN Sean is a designer at True Digital, Bristol. Clients include npower, Fuller’s and Bob Martin w: truedigital.co.uk ADRIAN SPIEGELT Adrian is a 16-year-old designer currently working at UX agency COBE in Munich w: adrianspiegelt.com t: @adrnspg BRIEF This month, we’d like you to mock up the homepage of a supermarket’s site. As well as aesthetics, think carefully about what information visitors will expect to see and how easy it will be to order the products they want. JENNA HUSSEY SHOPBUY This shopping site offers two modes, catering to impatient shoppers and determined browsers alike Although the experience of online grocery shopping differs from in-store shopping, there are similarities in…

What’s on your desktop today? A MacBook Pro, a Cinema Display, a Stripe-branded Moleskine notebook and three little adorable woolly Yoshis. What three things make your life worthwhile? Websites: Dribbble, Twitter, GitHub Apps: Sketch, Terminal, Slack Bands: Bonobo, Editors, Boards of Canada What do you have on the walls of your office? A single lovely poster of Bob Dylan by Milton Glaser. What will you do for lunch? Either the most boring sandwich ever or a super-fancy restaurant! What hours do you work? 9am to 6pm. What’s so good about being based where you are in Belgium? The calm, the nature, the authenticity. How often do you hang out with other designers? I usually meet a few people when I’m travelling to San Francisco, but otherwise I almost never attend…

ABOUT THE AUTHOR MUSTAFA KURTULDU w: getmdl.io t: @mustafa_x job: Design advocate, Google areas of expertise: UX design, HTML, CSS q: what’s your most impressive hidden talent? a: The ability to sleep through an earthquake (magnitude 7.6) VIDEO Mustafa Kurtuldu has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/MDLvid-277 View source files here! All the files you need for this tutorial can be found at: netm.ag/materialgit-277 Material Design Lite (www.getmdl.io) is a frontend template that enables you to easily add a Material Design look and feel to your projects. MDL was designed for static websites, as we wanted it to be framework and toolset agnostic. However, this doesn’t mean you can’t customise it for your own needs – MDL is just the starting point. In…

ABOUT THE AU THOR DANIEL HOOPER w: principleformac.com t: @danielchooper job: Founder, Principle areas of expertise: Interaction design, software engineering q: what’s your most impressive hidden talent? a: I knit View assets here! All the assets you need for this tutorial can be found at: netm.ag/assets-277 As designers, we often have new ideas that can be challenging to explain. We’ve tried hand-waving, whiteboards and special effects software, but these approaches tend to require a lot of work. They also often leave the interactive side of things up to developers to figure out, and they have enough to do as is! Showing off interactive designs makes you look like a rockstar, and helps your clients and coworkers understand new ideas more quickly. They will also make you a better designer; you’ll be…

ABOUT THE AU THOR EVA FERREIRA w: evaferreira.com.ar t: @evaferreira92 job: Web designer, speaker and professor areas of expertise: CSS, HTML, SVG, JavaScript q: what’s your most impressive hidden talent? a: Hiding silly jokes in the source code of my sites VIDEO Eva Ferreira has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/CSSvid-277 View assets here! All the assets you need for this tutorial can be found at: netm.ag/CSScode-277 It’s 2015 and we no longer need to design rectangles inside rectangles! This is one of the greatest times for CSS. There is no longer any need for us to stick to rectangle-based websites; we now own the necessary tools to play with layout, and enjoy great levels of browser support at the same time. In this…

For 3D applications like three.js and Pixi.js that are based on OpenGL, shaders represent one of the most powerful tools a developer has to generate complex effects on images and geometries. For WebGL, shaders are separated into two categories: Vertex shaders: Responsible for modifying the geometry sent to the graphics card Fragment shaders: Perform operations over the pixels drawn from the rasterised geometry Since Pixi is based on the idea of having hardware acceleration for sprite animations, most of the effects can be achieved by generating custom fragment shaders that will be applied over the sprite. The application will take care of the vertex shader and the developer can create any filter or effect without thinking about vertices and transformations. Pixi implements the fragment shaders as abstract filters (see GitHub…

On OS X and Linux it is very simple to make scripts executable by themselves so you can use them as real Terminal commands. For example, rather than having to call Let’s see how this can be done. First, we remove the js -suffix from the script file. Next, we put all our scripts into a single folder: for example, bin in our home directory. They will share a single package.json file and thus also the node_modules folder. Then we add the so-called shebang line to the scripts. The very first line of each script should read: This line tells the shell which program should execute the script. Additionally, we should make the script file executable: Finally, we should tell the shell where the scripts are located. We add the…

It’s very useful to discuss what projects each of you are working on. You’ll often find your skills complement those around you. @JaredRigby Get drunk, often. @Dorkfeatures Find a common ground, try to make a genuine connection before selling yourself :) @rem_ram Isn’t networking really just being friendly and open with people? @matthamm Engage in conversation and don’t spend all your time pitching AT people. Talk TO them. @DowsonCreative Make a point of seeking out people you’ve only spoken to on Twitter, but never actually met. @nonswearyphil Build your network before you need it – help others achieve their goals rather than looking for what you can get. @dw_interactive Sell to the people behind the person you’re networking with. Become their friend (not just a provider) and they’ll recommend you.…

What is the best way to find clients with serious attitude and respect for a designer’s work? Aga Naplocha, Warsaw, POL LS: In my experience, it comes down to budget. More money means more risk, so your clients (and you) will take the relationship more seriously. DOUBLE YOUR RATE Save up a few months’ living expenses and experiment with your pricing and process: appearing busy and expensive is attractive. Use any client-less time for blogging and public projects. TALK TO PEOPLE I’ve never gotten client work from a job board, and I’ve also never had a bad client. My best projects have come from referrals from real people. Talk about what you do and be stoked about it. INVEST IN CONFERENCES Pick a conference and set aside the cash. What…

DIGITAL SUMMIT PHOENIX DATE: 8-9 FEBRUARY 2016 LOCATION: ARIZONA, US This two-day event covers everything from digital strategies and content marketing to UX, analytics and social media. Speakers include Melanie Deziel, Cliff Seal, Tony Quiroz and Eve Mayer. digitalsummitphoenix.com FORWARD 4 DATE: 8-13 FEBRUARY 2016 LOCATION: CALIFORNIA, US Five days of workshops on topics including advanced JS, the IoT and algorithmic art, with the Web Technology Summit conference right in the middle, on the 10th. Speakers include Kassandra Perch, Douglas Crockford and Sarah Drasner. www.jfokus.se IOT TECHEXPO DATE: 10-11 FEBRUARY 2016 LOCATION: LONDON, UK Bringing together key industries from across Europe, IOT TechExpo is two days of toplevel content and discussion, “where the world becomes the web”. Catherine Mulligan, Charles Ewen and Lauren Sager Weinstein will be speaking. www.iottechexpo.com RUBY…

WHO TO FOLLOW New ideas and tools can come from a whole range of places. @SaraSoueidan: “I follow people and trends, read about basic concepts, but only learn what I need, when I need it.” @Tevko offered some helpful suggestions for hearing about the latest developments: “Follow tech people, read tech mags, work in coworking places and best, attend tech meetups.” JUST DO IT A lot of out followers suggested just getting stuck in. “Learn by doing. Pick a project and build something. Learning is limited without a goal,” says @MartinDarksnow. Don’t go overboard, though. @katymoe suggests, “With each new project try one new framework/technique and keep everything else to what you know.” DON’T BURN OUT “It is easy to get overwhelmed by new things coming up every month,” warns…

With ECMAScript6 becoming a ratified standard, we opened the gates to get support for the newer features of the language in all browsers. The support numbers are extremely encouraging and there is no doubt amongst browser-makers that the changes to the language are something to support. ES6 allows us to build huge applications. The syntactic sugar of classes allows developers who are used to other languages to use it in a way they are comfortable with, and the introduction of constants and block level scoping allows us to create less memory-intensive apps ready for low-end IoT and mobile devices. This means a lot of the tooling we use now (like libraries) will eventually fade out, as they aren’t needed as much any more. For developers, this means we have to…

ABOUT THE AU THOR JESSICA LORD w: www.jlord.us t: @jllord job: Engineer, GitHub areas of expertise: Node.js, JavaScript, HTML, CSS q: what’s your most impressive hidden talent? a: Drawing straight lines (I went to architecture school) Atom is a text editor developed by GitHub and open sourced in early 2014. Since then Atom has grown to more than 500,000 monthly users. Out of the box Atom is Git-aware, includes Markdown previews, auto complete and more. It is designed to be hackable to the core. In addition to being open source, Atom is built using web technology: JavaScript, HTML and CSS. This makes Atom’s core and extensibility options accessible to a wide range of developers. In this article I’ll share ways in which you can extend and customise Atom, from managing packages…

Clip-path and CSS Shapes can help us build creative layouts. Although they can yield amazing results, the limited browser support for these new properties might deter some developers from implementing them in production. Here, I would like to share some tools that will help you tackle this issue. CSS Shapes CSS Shapes are currently supported in Webkit and Blink browsers (Chrome, Opera and Safari). If you want to use this property, don’t forget to add the -webkit- prefix in order to reach the Safari browser. For full browser support I’d suggest adding the Shapes polyfill, but bear in mind this will disable the :hover functions on the shapes you create. Clip-path The clip-path property is currently supported in all major browsers (with the exception of Edge). Clip-path requires two different…

ABOUT THE AUTHOR HECTOR ARELLANO w: miaumiau.cat t: @hector_arellano job: Developer, Firstborn areas of expertise: JavaScript, WebGL q: what’s your most impressive hidden talent? a: I’m a good parent! RESOURCE To learn how to use Pixi. js to deliver interactive content across different devices and browsers, check out this tutorial by Mat Groves: netm.ag/pixitut-277 Download the files here! All the files you need for this tutorial can be found at netm.ag/pixigit-277 For the Fuel Up for Battle web app (www.fuelupforbattle.com), a gaming promotion for Firstborn’s client Mountain Dew, we created a digital hub that featured exclusive video content around the Call of Duty universe. To create a more personalised video experience, we integrated a photo of the user into a series of background images as if it was part of the…

ABOUT THE AU THOR TAE WON HA w: taewon.de t: @hataewon job: Developer, TNG Technology Consulting areas of expertise: Java, JavaScript, OS X development q: what’s your most impressive hidden talent? a: I am a very good assistant when cooking. Chopping onions, garlic RESOURCE The Node.js website provides detailed documentation for the API. A separate section lists the features of ES6 that ship with Node.js by default nodejs.org/en/docs Download the files here! All the files you need for this tutorial can be found at netm.ag/nodegit-277 Have you seen your developer friends scripting like magicians on Terminal, and wished you could do so yourself? Using Node.js, and with a basic knowledge of JavaScript, you can become a script magician too. Node.js liberated JavaScript from the browser. With it, it became possible to…

JavaScript, and therefore also Node.js, is single-threaded. This poses a serious problem for server-side apps, since any long-running operations, especially I/O operations, will block the whole app for some time. That’s why JavaScript has an event loop model that solves this problem by using callbacks. For example, to test whether a file exists, then to read and then to write a new file, we would write: The nesting of multiple callbacks is known as ‘callback hell’. For small scripts that are written to complete one task, we don’t mind when an operation blocks the execution of the script, so we can use the synchronous versions of the functions above: For a server-side app code like this would be suicidal, but for scripting purposes it’s better and easier. Node.js offers synchronous…