netの June 2016 の目次

STUFF I LIKE SARA SOUEIDAN Frontend developer www.sarasoueidan.com DECKSET Using markdown is the quickest way for me to create slides, and Deckset allows me to do exactly that. Although it is missing many customisation features, it helps me focus on the actual writing process, which is great when I’m short on time. www.decksetapp.com MOLESKINE TIMEPAGE This is a calendar app, but instead of the usual grid format, it’s arranged into a timeline that shows events as a continuous flow. The app has a sleek UI and nice interactions. Plus, new features are added with every update, such as the latest monthly heat map view. netm.ag/timepage-280 PAYDIRT There are quite a few invoicing and time tracking apps, but most are packed with too many features. Paydirt is the simplest I have…

Could your website survive without a homepage? Based on today’s user behaviour, I’d venture to guess the answer is yes. Over the years, how we use websites has evolved. We need to start designing homepages that work for our product and its users, rather than simply copying trends. It’s easy to follow the same homepage design pattern as the latest hot, new startup. It’s also lazy. In 2015, we saw the prevalence of responsive design and its impact: large hero areas above the fold, with single calls to action, rows of three words or phrases explaining the product, a fullbleed value proposition, and then a grid of interchangeable media or products. Change the logos on these homepage designs and I’d bet users would barely notice that the exact same website…

ANNA DAHLSTRÖM Anna is a Swedish UX designer in London. She’s the founder of Glimt, and likes fika and flexible working www.annadahlstrom.com t: @annadahlstrom RAILS, SASS, LOTS OF COFFEE WWW.LOLCOLORS.COM MacKenzie Child www.mackenziechild.me LOL Colors is a personal project by MacKenzie Child, who designed, coded and launched the colour palette collection site in just 24 hours as a challenge to himself. For now everything is curated by Child himself, but there is the potential to open it up for others to add their own palettes. It was this possibility that prompted Child to base the site on Rails instead of something like WordPress. The site works seamlessly from the big screen to the small screen, and I picked it for its simplicity and appealing design, combined with the curated angle. Although…

www.epic.net INFO Location: Liège, Belgium Established: 2009 Areas of expertise: UX and UI, branding, interactive, motion design, illustration, digital strategy Clients: Red Bull Media House, Crop Trust, UPS, EXKi, Studio 100 Awards: Five FWAs, nine Awwwards Site of the Day, CSS Design Awards Best Belgian Design Agency 2015 EPIC launched in 2009 with one clear aim: keep the studio small but think big when it comes to clients and quality. Together, the four founders had everything they needed to lead the studio to success – Hugues Lismonde covered backend development, Benoît Rondeux was a pro in project management, Morgan Leidgens brought business savvy to the table and Karim Maaloul had a background in web design and interactive animation. With the exception of Leidgens (who runs his own company), the founders…

ABOUT THE AUTHOR DEMIAN BORBA w: adobe.ly/xd t: @demianborba job: Product manager, Adobe areas of expertise: Design thinking, mobile development, community engagement q: what’s the last lie you told? a: “Honey, you can invite your mom to visit us!” (When I was planning a surf trip to Mexico) Exclusive offer! save 15% on Adobe cc Exclusive discount for new Creative Cloud subscribers See page 102 for details VIDEO Demian Borba has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/adobevid-280 You start with research. Then you move to pen and paper, and later transfer your thoughts to a design tool. To come up with the best flow, you export all your assets and bring them into another tool to build a prototype. From there, you share or…

ABOUT THE AUTHOR Mobile UX Neil Turner w: uxforthemasses.com t: @neilturnerux job: UX designer areas of expertise: UX design, UX research, agile UX q: what is the last lie you told? a: That the tooth fairy is real (sorry, should have had a spoiler alert) RESOURCE For lots more insights, tips and advice for designing mobile interfaces that are comfortable to use, take a look at the excellent Designing for Touch by Josh Clark: netm.ag/clark-280 My wife and I bought some new cutlery a few years ago. It’s a great looking set: big, chunky handles with sharp lines cut from gleaming stainless steel. It looks great on the table, but we never actually use it. Not because it’s too fragile or too nice to use every day (like the niceness will…

ABOUT THE AUTHOR Carl Schooff w: www.greensock.com t: @greensock job: Geek ambassador, GreenSock areas of expertise: GSAP, HTML5, training, support q: what is the last lie you told? a: The lima beans were delicious! RESOURCE Sara Soueidan presented a fantastic overview in the November 2015 issue of net. Find the online version of ‘Supercharge SVG animations with GSAP’ at netm.ag/soueidan-280 View source files here! You’ll find demos for all the gems listed here at greensock.com/gems As GreenSock’s geek ambassador I spend my days helping users tackle their animation challenges in our support forums and through in-person training. I love seeing animators reach those A-ha! moments when they discover a GSAP feature that solves a common obstacle. The following gems usually take beginners a while to stumble into, but once mastered, can…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine PM SUPPORT I’ve seen too many times what happens when a client insists that it doesn’t need the services of a project manager – the end result is rarely pretty or what was desired. I also know from painful experience what it’s like to suffer from the overload of too many projects running concurrently and little support from ‘upstairs’ – burnout is only just around the corner. Chris Perry, Riyadh, SA net: This comment refers to ‘Project managers are badass’ (netm.ag/gertz-280), an article we published recently by Rachel Gertz. Take a look at our Medium channel (medium.com/netmagazine) for more articles from net magazine. NEW CODERS Adobe’s Aga Naplocha asked for advice on how to introduce beginners to coding without frightening them (netm.ag/coders-280). Here’s what…

What we think (1) This handbook offers back-to-basics advice for working with HTML typography in email (netm.ag/type-280). (2) Peer into the mind of influential designer Aaron James Draplin as he reveals the thought processes behind his work in this amusing book (netm.ag/draplin-280). (3) Sara Wachter-Boettcher and Eric Meyer explain how to adjust your design work for the stressed or time-pressed (netm.ag/life-280). (4) Freelancers and creative entrepreneurs can take their careers to the next level with this roadmap to success (netm.ag/creativetruth-280). (5) Become the master of your inbox with Polymail, an email productivity app that lets you schedule, snooze and even unsend your emails (netm.ag/polymail-280). (6) Plan your website in the real world before you dive into code with these UX Flowchart Cards (netm.ag/flowchart-280).…

In September 2014 I joined the software team of an NGO working at the intersection of tech and public health. By then the Ebola outbreak in West Africa had reached epidemic proportions, with thousands of cases reported. One month before, the outbreak had reached Nigeria, where the NGO had provided phones and a custom Android application that helped reduce the reporting time for suspected cases from 12 hours to almost nothing. Now it was the time to bring that expertise and those tools to the most affected countries: Guinea, Sierra Leone and Liberia. THE CHALLENGES The Ebola virus is non-airborne and contagion requires direct contact with the bodily fluids of an infected individual. To control the outbreak, infected persons must be isolated and everybody who has come into contact with…

PAUL IRISH Frontend developer, Google www.paulirish.com For the web, latency is the most influential network variable; while throughput/bandwidth drops considerably on 3G and 2G, changing it doesn’t impact web performance as much. 150ms is a decent figure for ‘typical’ mobile latency, but you should test 300ms as ‘typical slow’ as well. How? In the Chrome DevTools, hop over to the Network Panel. On the top toolbar you can choose a throttling preset, or define your own custom preset. ZENO ROCHA Developer advocate, Liferay www.zenorocha.com It’s very easy for us to forget about other users’ network conditions when we’re at work with our fibre optic internet, but performance matters. I use Chrome DevTools to emulate different network conditions. You don’t have to install anything and it doesn’t affect traffic from other…

BREWERIES PROFILES CHRIS ROBINSON Chris is a freelance web designer and frontend developer based in Hertfordshire w: www.thelonelypixel.co.uk t: @lonely_pixel AIDEN BENNET T Aiden is a frontend web developer at Aiir, a platform for radio station sites and apps w: www.aiir.com t: @AidenLBennett COLE HENLE Y Cole is a bearded socialist, teacher, father of two, and technical director at Mud w: www.ournameismud.co.uk t: @cole007 BRIEF This month we’d like you to design a website for a brewery. Tap into the artisan craft beer trend, embrace old fashioned ales or branch out into something new altogether – it’s up to you. Just make sure you capture the imagination of your beer-loving audience. CHRIS ROBINSON PEBBLETONS An innovative split-screen design enables this site to promote two different products at once Pebbletons is an established brewery and a well-known…

BROWSER SUPPORT We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported. EXCLUSIVE VIDEOS Look out for the video icon throughout our tutorials. This issue, Demian Borba has created an exclusive screencast to complement his article on Adobe Experience Design: take a look to see how this new tool helps you design, prototype and share your digital experiences without breaking your stride.…

ABOUT THE AUTHOR Alex Pate w: www.alexpate.uk t: @alexjpate job: Frontend engineer, Pusher areas of expertise: SVGs, Sass, building tools q: what is the last lie you told? a: That I was going to get this article finished by December Exclusive offer! Pusher: Tw o months free Pusher helps you build real time apps quickly and easily See page 96 for details RESOURCE Vault is heavily based on Primer, a tool created by the team at Rareloop. For a PHP take on pattern libraries, check it out: github.com/rareloop/primer A fresh project; a fresh slate. A chance to put the new tools and techniques you’ve learnt since the last development cycle into practice. This is the project that will be hyper-organised. This is the project where repetition will become a thing of…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... CARL SMITH Carl is a partner at Bureau of Digital, where he helps digital agencies w: devianthippie.com t: @carlsmith LORNA MITCHELL Lorna is a PHP and API specialist, open source project lead and trainer w: www.lornajane.net t: @lornajane MEG LEWIS Meg is a designer and founder of collaborative workspace Ghostly Ferns w: darngood.co t: @darngooood JOE LEECH Joe is a user experience and product design consultant and writer w: mrjoe.uk t: @mrjoe QUESTION OF THE MONTH Lumen or Slim framework? José Borges, Albufeira, PT LM: I love microframeworks; they are such a lightweight basis for simple web applications and APIs. In PHP we have some great choices, including Lumen (lumen. laravel.com) and Slim (www.slimframework.com), but also Silex from the Symfony project (silex.sensiolabs.org). My recommendation is definitely to try Slim.…

One of the best things about the current web design scene is how much more of a role is played by colour. The days of web-safe colours are gone, and we can focus on colour as a crucial design tool. Here are a few things to keep in mind as you choose colours for your projects: First, go for colour contrast. Multiple system settings, plugins and glare protectors mean users today have total control over how their screens look – so it’s vital to keep contrast in our designs. But there’s another reason why this is key: colour-blindness. There are plenty of types of this common impairment, and the more contrast between content and background colours, the less likely it is viewers will become unable to see content. Second, stray…

ABOUT THE AUTHOR NADIEH BREMER w: www.visualcinnamon.com t: @NadiehBremer job: Data visualisation designer, Adyen areas of expertise: Data visualisation, D3.js q: what’s the last lie you told? a: I said I couldn’t join friends for dinner due to work, but I just really wanted to read the new fantasy novel by Brandon Sanderson View source files here! All the files you need for this tutorial can be found at netm.ag/D3git-280 RESOURCE One of the best books for learning D3 is Scott Murray’s Interactive Data Visualization for the Web, and it’s available online for free! netm.ag/scott-244 D3.js has taken over the world of interactive data visualisation. An enormous number of examples can be found, each showcasing its own fun and useful twist on the library. You see, D3 is not a charting…

ABOUT THE AUTHOR CLAY TON HUNT w: www.programmingfromscratch.com t: @ClaytonHunt_104 job: Software consultant areas of expertise: C#, JavaScript q: what is the last lie you told? a: I spent a bit more on my Surface Book than I was willing to admit at the time FACT FILE Jasmine documentation The documentation for Jasmine also forms the tests that verify the framework is working. Each piece of Jasmine’s library is demonstrated and verified at the same time. Mocha Growl Using a growl reporter, Mocha can notify you of test results with a toast notification. This means you can minimise the browser window running the tests while you work. CONCLUSION Both libraries are perfectly equipped for testing your JavaScript. Recently I switched from Jasmine to Mocha. However, after writing this I think Jasmine…

ABOUT THE AUTHOR KATIE FENN w: www.katiefenn.co.uk t: @katie_fenn job: Senior UI developer, Sky Betting & Gaming areas of expertise: JS, CSS, PHP, test-driven development, React q: what’s the last lie you told? a: ‘Pluto is not a planet’ VIDEO Katie Fenn presented ‘Chrome DevTools: Front to Back’ at ScotlandJS 2015. In it, she explored some of the features from this article, as well as introducing some new ones: netm.ag/scotlandjs-280 Chrome Developer Tools offer a wealth of features to help you debug your websites. You can access them by clicking the hamburger menu in the top-right of your screen and going to ‘More tools > Developer tools’. Within the DevTools you’ll find a number of different tabs, including Sources (which deals with information about scripts), Console (an interactive command-line) and Network…