Sommaire pour March 2017 de net

CSS WRITING MODES Here’s a cool fact: you can make text run vertically on your page using just one line of code and a little-known CSS property. Jen Simmons follows up this tasty morsel with a lesson on CSS Writing Modes, which should help you understand CSS Grid and Flexbox properly. netm.ag/modes-290 STRUCTURAL FAILINGS Hiring big in-house design teams is all the rage these days, but if you get it wrong, that’s an expensive mistake. Peter Merholz recently noted that not all companies are seeing a return on their investment, and in this interview he explains the structural failings that can limit the potential of your design team. netm.ag/failings-290 MEANINGFUL PROBLEMS If you like the idea of using your talents to solve the world’s major problems rather than tweaking interfaces…

Side project of the month INFO job: Software builder w: www.nashvail.me t: @NashVail net: What is Chronus (netm.ag/chronus-290)? NV: Chronus is a Google Chrome new-tab extension that helps you control the time you waste online. It keeps a list of websites you think you should be spending less time on, and whenever you’re on one of them, a timer in the background updates every second. Chronus replaces Chrome’s default new-tab page with a bar graph, with each bar representing the aggregated time you have ‘wasted’ on a particular day. The goal is to keep the current day’s bar shorter than the previous, decreasing the time you waste online. Chronus also shows quotes such as ‘Wasting time is the subtlest form of suicide’ to keep you motivated. ‘Chronos’ was the Greek god…

As well as being the world’s largest democracy, India has both the world’s fastest growing economy and markets for online content. According to Internet Live Stats, India has more than 462 million internet users at present, which is about 13.5 per cent of the global internet population. The overwhelming majority of them are on mobile, with leading sites like Facebook, Reddit, Quora and so on featuring India as one of their top countries in terms of usage. People might think that 462 million is a lot, but that’s only about 34 per cent of India’s population. That leaves a whole lot of room for growth. According to Akamai, by 2020 India will have around 730 million internet users, with 75 per cent of growth coming from rural areas, mostly on…

MATTHEW SMITH Matthew is the founder of Really Good Emails, a site dedicated to showcasing and creating discussion around the best product emails w: www.reallygoodemails.com t: @whale CSS, GIFS, WEB FONTS WWW.UBER.COM netm.ag/ubercode-290 Uber has long stood out for having a versatile set of consistent base templates for emails heading to both customers and drivers. That doesn’t mean it isn’t taking exciting chances – for example with this fantastic app announcement campaign. Pretty much everything in the design is a GIF, but they’re all so seamlessly integrated, it feels like magic. Everything in this email is geared toward showing off new features and giving a preview of how the Uber app looks, functions and feels. The use of brand web fonts makes the email feel consistent with the app and web…

ABOUT THE AUTHOR MARCO SORS w: www.web-expert.it t: @MarcoSors job: Frontend developer areas of expertise: HTML, CSS, JavaScript q: what’s your biggest fashion faux pas? a: Trying to do a fashion haircut alone, I made a triangular hole in the back of my head by mistake View source files here! All the files you need for this tutorial can be found at netm.ag/CSSpen-290 Are you bored of visiting, designing and developing two-dimensional web pages? Do you think it’s time to start experimenting with three-dimensional transformations? Then you’re reading the right article. In this tutorial I will show you how to create scenes with interactive elements positioned in three dimensions using the matrix3D() CSS property. The aim is to offer those who interact with your page the impression of depth typical of…

ABOUT THE AUTHOR LUIS RODRIGUEZ w: www.uxcodeline.com t: @UXCodeLine Job: UI and UX designer and developer Areas of expertise: Service design methods, screenwriting and emerging technologies q: what’s your biggest fashion faux pas? a: Once, seven of us all wore the same outfit to work: black trousers and beige dress shirts. Worst thing, our shirts matched the office wallpaper View source files here! All the files you need for this tutorial can be found at netm.ag/botfiles-290 In the mid-2000s virtual agents and customer service chatbots received a lot of adulation, even though they were not very conversational, and under the hood they were merely composed of data exchanges with web servers. Almost a decade later, chatbots are the latest form of artificial intelligence to cause a stir in the tech scene.…

@netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine BEHIND THE COVER This was a fun creative brief. I started with thumbnail pencil sketches, which then developed into larger sketches trying out different perspectives of a city scene, keeping in mind the need to show the brands clearly and to make room for a nice big headline. I also tried a few variations on how the main headline could work. A lot of the rough stage is spent taking these sketches into the computer and fiddling about with them. From approval of a rough version, I sketched the scene out in a finalised, neater pencil drawing and inked the linework in pen. This inkwork was then scanned into Photoshop, coloured and shaded, and texture was added there too. Elly Walton, UK TO XIC WEB net:…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... VARYA STEPANOVA Varya specialises in open source UI components and libraries w: varya.me t: @varya_en ADA ROSE EDWARDS Ada is a senior engineer and web developer advocate at Samsung w: ada.is t: @lady_ada_king QUESTION OF THE MONTH Are there any tools or sites that will help me get a pattern library set up quickly? Nicola Walton, Leeds, UK VS: I usually start with SC5 Style Guide (netm.ag/sc5-290), to which I contribute. It’s a KSS-based generator; it parses CSS (Sass or Less) code and makes a documentation website automatically. For me, it also works as a development playground. This way I ensure that the resultant style guide is a part of development process. I have also been building more JavaScript-focused solutions. For this, I use…

BEYOND PIXELS Drawing defined who I was for a long period. It was my goal in life for some time to become a professional animator; to join a studio in Japan and draw anime and other cartoons I used to love to watch back then. Today, drawing is a great activity for when I need to really de-stress – one that’s even more powerful than exercising or cooking. When I draw, I enter a trance. I literally feel an energy flowing through me, into my pen and onto the paper in front of me. I went as far as calling my drawings ‘my babies’ when I was younger. They are a part of me. Drawing enables me to explore myself in ways I can’t normally. I detach from the world…

DEVNEXUS 2017 DATE: 22-23 Feb 2017 LOCATION: Oxfo rd, UK An epic 14-track conference connecting developers from all over the world and promoting open source values. devnexus.com MOBILE+WEB DEVCON DATE: 1-3 MAR 2017 LOCATION: SAN FRANCISCO, US This event aims to help you master iOS, Android and web. One day of labs precedes the two-day conference, with tracks on mobile, development and the IoT. They even throw in breakfast. netm.ag/devconf-290 GENERATE DATE: 27-28 APR 2017 LOCATION: New york, US Covering the tools and topics at the cutting edge of the web industry, Generate will help you boost your skills and become a better designer or developer. www.generateconf.com DEVIT DATE: 20-21 MAY 2017 LOCATION: THESSA LONIKI, GR DE Vit describes itself as a ‘360-degree web development conference’, covering frontend, backend, devops…

ANNA DEBENHAM Frontend developer, Snyk www.maban.co.uk A lot of different people have inspired me at various stages of my career. Over the past few months, I’ve been looking up to Lara Hogan’s work in particular. She manages lots of people as part of her work as an engineering director at Etsy, and has published an incredible book, Demystifying Public Speaking, based on her years of speaking experience. Plus she can lift some really heavy stuff, and I love how she celebrates achievements with doughnuts. INAYAILI DE LEÓN PERSS ON Lead web designer, Canonical www.yaili.com There are a few design studios that I’ve been following from the early days of my career whose work I admire and who are excellent at sharing knowledge, be it through writing or speaking. Clearleft and…

TRADESPERSON ALAN REED-OSBORNE Alan is principal designer at Design Reborne. He is passionate about art, motion and tech w: www.designreborne.com t: @designreborne OLLIE WELLS Ollie is head of digital and UX at digital marketing agency upriseVSI w: www.uprisevsi.co.uk t: @olliewells CERVEN COTTER Cerven is a multi-disciplinary creative with over 16 years’ diverse experience. w: www.cervencotter.com t: @cervencotter BRIEF This month we’d like you to design a website for a tradesperson. They might be a builder, an electrician or a plumber, or work in any similar trade. You may wish to include client testimonials, examples of previous work and appointment-booking facilities. ALAN REED-OSBORNE RUSTIX A site that uses well-chosen images to convey a sense of expert craftsmanship Rustix is an established business producing high-grade handmade woodwork products for your home or business. When visiting the site, users…

What’s on your desktop? Bee and PuppyCat wallpapers, plus a ridiculous number of screenshot files. My physical desk is similarly dorky with a This is Fine plushie, some coloured markers and a GitHub notebook. What do you have on the walls? At work, lots of memes. I’m planning to put up user journey posters that we created in a recent design sprint. At home, nerdy posters related to video games, comics and cats. What hours do you work? I show up at Etsy around 10.30am and leave around 6.30pm. I also write on the train and work on game development several hours per week. What else do you do in the office? A lot of the things I do outside of the computer involve facilitating communication between people. It’s important to…

At BuzzFeed we think of design as a flexible practice that we can adapt to the needs of a project or team. In other words, we have tools like A/B testing, user research, coded prototypes and design sprints at our disposal, but we’re inconsistent in when we apply those tools because not every project requires everything in our toolbox. That sort of consistency is not important to us. Instead, we’ve developed an abstracted version of a design process: Define, explore, refine, build, learn. We try to be aware of this throughout the life of a project, so we can make sure we’re using the right tools and creating the right artefacts at the right moments. We look for ways to reduce the number of decisions a designer would need to…

ABOUT THE AUTHOR STEVE KINNEY w: www.stevekinney.net t: @stevekinney job: Director of frontend engineering, Turing School of Software & Design areas of expertise: JavaScript, Electron, Ember, React q: what’s your biggest fashion faux pas? a: JNCO Jeans View source files here! Find the starter for this tutorial at netm.ag/lilygit-290, and a completed example at netm.ag/lily2git-290 VIDEO Steve Kinney has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/electronvid-290 Electron is a runtime framework for building cross-platform desktop applications using web technologies. If you’ve ever used Atom, Visual Studio Code, Slack or Brave, then you’ve used an Electron application. It’s used in some fairly large and ambitious applications, but it’s easy to get started with. In this tutorial we’re going to build a simple text editing application…

ABOUT THE AUTHOR TOM KRCHA w: xd.adobe.com t: @tomkrcha job: Senior product manager, Adobe XD areas of expertise: Design, development, community engagement q: what’s your biggest fashion faux pas? a: A fluorescent green sweater Adobe XD first launched in March 2016 to help designers design, prototype and share their mobile apps and websites in a single workflow. Anyone can share and vote on any changes to the tool (adobexd.uservoice.com), and since March, we’ve released nine monthly updates that have added more than 50 new features based on user feedback. From the very moment we started working on XD, our goal has been to rethink how even basic features could be reinvented to enable a much faster design process. We call it ‘designing at the speed of thought’. In this tutorial we’re…

‘Matrix’ is a mathematical word for a rectangular array of numbers, symbols or expressions. Matrices have many different applications in science and maths – for example in the computer graphics field they’re used for linear transformations and projecting 3D images onto a 2D screen. That’s exactly what the matrix functions do: matrix() allows us to create linear transformations in 2D, while matrix3d() lets us create the illusion of three dimensions in two dimensions using CSS. In this way we can rotate, scale, skew and flip objects along the X, Y and Z axes at the same time, thus giving the viewer the perception of 3D space. A simple example of matrix3d scale transformation is shown below. As you can see, it’s an array composed of 16 values: A must-read if…

Strong AI (also known as ‘a machine with a mind’) is a hypothetical artificial intelligence that could perform any intellectual task a human being can. Examples lie in serious scientific research and include the work of Alan Turing, Ben Goertzel, Nils John Nilsson and Monica Anderson. These projects are made up of very deep and complex logic – for example, neural networks. To even attempt to describe them here would be futile, but I highly encourage you to research them. Weak AI (also known as narrow or applied AI) refers to software that uses AI to solve specific problems or tasks. These are bots in the mainstream that are currently attracting conversation and rising in popularity. Examples include: Weather These are mostly about users typing in their location and finding…

contact us To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “The comprehensive Reseller control panel has helped me push things forward. I don’t have to ask; I can just hop in and get it done myself.” Matt Wall, Director, Somewhat Media expert tip FUTURE GROWTH IS KEY When you are looking for a web host, always choose a provider that has the ability to grow with you. Your needs today are likely to change, so selecting a provider with the flexibility and scale that can support your growth is key.…

All designers are UX designers – design without considering the end user isn’t design, it’s just decoration. But ‘UX’ suggests you’re involved in research/ feedback/planning/iterating and always being a user advocate @ajdf Research, documentation, design, prototyping, testing, iteration @westleyknight Buzz words and +10k salary @myfirstraygun Wireframes, prototypes, user flows, TESTING @ResWebDes It doesn’t mean very much at all, but mostly a misunderstanding of the individual focuses of design team members. Or a recruitment buzzword @madebysheppar It gets me mad, that’s what! ALL designers should have the user’s experience as a priority as a given @maxray The one who changes ‘how things work’ to ‘how things should work’, from the user perspective @Kolett__ Someone who takes requirements and ideas, moulds them to an experience framework, then hands over to interface designers…

What are the tools and resources for beginners and what should we keep in mind when building for virtual reality experiences? Sigmar Sommer, Aruba, AW AE: My advice for beginners looking to start exploring virtual reality is as follows: TRY A-FRAME In my opinion the best place to start is with A-Frame (aframe.io), A-Frame lets you start building VR experiences using pure HTML to describe 3D shapes. An example in JSBin that you can edit right now is at netm.ag/vr-290. EXPLORE PLAY CANVAS Another good place to start is Play Canvas (playcanvas.com). The cloudbased game development platform has recently updated its editor to enable WebVR development. TARGET MOBILE Most VR users will be using Google Cardboard or GearVR. Dynamically load your content as it is needed, and start rendering within…

With so many frameworks, tools and techniques out there, no one can know it all. We asked the @netmag followers how they decide on technologies to keep up with, and which new ones to learn WHATEVER FITS Don’t get bamboozled by buzzwords. “Talking about the latest ‘thing’ in articles and at conferences is great, but doesn’t always translate to client work,” says @Ally__Baird. @maxray agrees; he chooses “anything that will make my job more consistent”. In a similar vein, he says: “You have to temper the use of new tech with what is appropriate on live client work.” @frontendben reckons the technologies to keep up with are the ones that will pay the bills. LOOK AT THE HARDWARE “Hardware progression is a great compass to go by,” says @tomWilderspin. “More…

VAIDEHI JOSHI Software engineer, Imprint vaidehi.com BRAIN.FM If I really need to get things done, I put on headphones and listen to song or a playlist on repeat. Brain.fm does that for you, using an AI engine that composes all the music. I choose my mood and how long I want to listen for. I always seem to get more work done when I use it. www.brain.fm ZEPLIN If it were up to me I’d avoid writing CSS at all costs, but as a full-stack engineer it’s part of my job. Zeplin makes it less painful. Our designers upload their specs, and we get everything we need – hex colours, dimensions – all down to the pixel. zeplin.io SLEEP CYCLE This app analyses your sleep using your phone’s mic, then…

Much is made of the speed at which the web industry evolves. For many it seems overwhelming and unsustainable, but at UXPin speedy product development is an absolutely crucial part of our overall strategy. The task of optimising for speed while maintaining quality is a difficult one. On the surface these are the exact opposites. However, if you run a welloptimised product development process, speed and quality can be unified and become your competitive advantage. Because fast development is so important at UXPin, we’ve assigned objective key results (OKRs) to it. First, we agreed that we want to have at least one marketable update every four weeks. Second, we want to see an improvement in the NPS and customer satisfaction (Csat) scores, while decreasing the number of bugs filed by…

My UX journey started with minimal knowledge and experience. During my journey to learn more about what UX meant, I discovered the importance of being empathetic in design. I think empathy and self-awareness are some of the most important non-technical skills designers (and humanity in general) need to develop. Empathy comes into play when we think about who we’re designing for and what their environment and life might be like. Self-awareness is useful in growing as a designer because we have to know what we’re good at and what we’re not good at in order to become better. On my team at Google I work with many different types of designers, covering everything from visual to interaction to motion. In order to stay efficient, we maintain open and constant communication…

One of the first questions developers ask when a new library or framework comes out is: Who is using this in production, at scale? For Electron, the answer is extensive. It began life as Atom Shell – the foundation of GitHub’s Atom text editor. Since then, a number of notable companies have begun using Electron. The Slack desktop application for macOS, Windows and Linux is built using Electron. This wasn’t always the case. The Windows and Linux versions have been Electron apps for a while, but it just recently ported its Mac application. Additionally, Microsoft has released Visual Studio Code, an open source IDE for macOS, Windows and Linux. Many web applications have Electron-based counterparts available for download. The list includes blogging engines like Ghost and WordPress, project management software…

ABOUT THE AUTHOR NISHANT TOTLA w: www.nishanttotla.com t: @nishanttotla job: Software engineer, Docker areas of expertise: Container orchestration, distributed systems q: What’s your biggest fashion faux pas? a: Wearing some extremely tight pants that got torn while stepping out of a car Let’s say there’s a web designer called Bob. He’s talented and makes highly attractive and detailed websites. He also maintains several public websites. His laptop is configured to use the complex modern web frameworks and other intricate dependencies these websites need, but he has consistently struggled to deploy them to production servers. For his first few websites, he set up his server machines manually – a painful process that took several hours. If he ever had to make updates to the setup, he’d have to do everything from scratch,…

If you need to put a series of elements on the same tridimensional plane, you can use the perspective CSS property. This property gives an element a 3D effect by changing the distance between the Z axis and the viewer. The power of the effect is dictated by the value. If you use a small number, the vanishing point will be further away and the visual effect will be stronger. If you use a large number, the vanishing point will be closer to the viewer and the effect will be softer. The perspective property doesn’t involve directly how the element is rendered, but creates a three-dimensional space for its child elements. You can find a nice explanation in this article by David DeSandro: netm.ag/desandro-289.…

ABOUT THE AUTHOR KEVIN LAMPING w: www.klamp.in t: @klamping job: Frontend consultant areas of expertise: CSS, JavaScript, frontend testing q: what’s your biggest fashion faux pas? a: If you ask my wife, it’s any time I dress the kids Over the past several years, I’ve noticed the term ‘visual regression testing’ cropping up in web development conversations more and more. And for good reason. It promises to provide tremendous value for those who are tired of manually checking their sites for style issues. With this growing popularity, it seems like every month there’s a new tool released, each promising to provide awesome visual regression testing automation. Unfortunately, I’ve found most to be more dream than reality, the truth being that these types of tests are deceptively complicated. There are, however, a…

Aspects of traditional design are very much present in the overall experience of conversational UIs, but they are still based on people’s expectations when using a chat application: bot and user avatars, dialog and link bubbles, primary and secondary user input containers and card-based design. When matched with the right UI design, benchmark bots are able to create an elevated perception of value for their product or service. Colour palette The types of colour used will impact any user’s ability to connect with your brand, as well as affecting the usability of the structure and content, and the readability of your bot’s responses. Typefaces Never an easy part of the design process, your choice of typeface should be influenced by the voice and tone characteristics you’ve established. Every typeface has…