Innholdsfortegnelse for No. 253 i Web Designer

“The foremost reason for using Node.js is the ability to retain your existing JavaScript logic.” THE WEB DESIGNER MISSION “To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content” Bow down to the power of Node.js ode.js. You know the name, you know it’s popular with cool kids and you know you should be using, or at least learning to use, it. It will integrate perfectly with JavaScript code, well it is a JavaScript runtime, and make your builds faster and better. In this issue’s lead feature on page 40 we tell you why you need to get friendly with Node.js, what it can do, what it’s typically used for, how to install it, how to create and…

Web Designer’s latest digital addition to its burgeoning collection is The Developer’s Guide to JS. Check out how to get started with ES6, use Babel to compile code to work everywhere and get started with npm. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3D techniques to add interest to any project. Plus, check out Advanced Angular, 20 Quickfire HTML & CSS techniques and Amazing Websites and How to Build them Vol 03. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free Web Designer app and find them waiting for you as an in-app purchase.…

Polymer Summit 2016 polymer-project.org/summit Enjoy two days of talks, codelabs and sessions from the Polymer team. CSS Dev Conf 2016.cssdevconf.com The dedicated CSS conference returns with top industry talent including Trent Walton, Chris Coyier and Jonathan Snook. AppsWorld2016 tmt.knect365.com/apps-world Apps World brings the biggest players in the global technology ecosystem, including Facebook and Microsoft. droidcon London 2016 uk.droidcon.com Meet the Android community, hear expert speakers and find out latest Android advances. ng-europe ngeurope.org A two-day conference dedicated to Angular.js. Find out about the latest web and mobile app technologies…

“Make the homepage welcoming, palatable and absorbable” Do you remember? That house – maybe it was yours – where nobody used the front door and instead always entered through the garage? Nobody spent any time in the ‘front room’ and instead hung out at the kitchen table or a den buried deep down a hallway? Yeah, you remember. Well as it turns out, websites are a lot like that. People only use the front door – in this case your homepage – when they have to. That doesn’t have to be a bad thing, and of course, that doesn’t need to spell the end for front doors – er, homepages. It just means that we can be smart about where we put other doors, and how we can make sure…

Year 2006 No. of employees 0 Eric and Dustin meet for the first time as both work for the same agency Year 2011 No. of employees 0 Dustin and Eric work on video games that helps push them to go out on their own. Year 2014 No. of employees 2 Preparation begins for the big leap to start their very own venture called ANIMAL. Year 2015 No. of employees 3 Eric and Dustin finally fulfil their dream of working together as ANIMAL is founded. Year 2016 No. of employees 6 The agency website is complete giving ANIMAL a global presence and a fanbase. Year 2020 No. of employees 0 Humans Dustin and Eric figure out how to stop Windows auto-update from occurring somehow.…

As you look around the web it’s becoming increasingly difficult for web designers to make a splash as the user lands on the site. Many sites feature full browser imagery and there is a glut of full screen carousels. Large images make a big impact, there’s no denying that, but so can a logo, especially if that logo animates onto the page. If the logo is given a 3D appearance then it can stand out further and be made to react to the mouse movement in WebGL, giving smooth movement around the screen. In this tutorial we are going to do all of those, but take the concept one stage further. The logo will become a mask so wherever the logo is on the screen you will be able…

WHAT IS GREENSOCK? GreenSock (greensock.com) is a comprehensive animation library for the web. With no third-party dependencies required, it provides developers a platform that can handle basic tweening all the way to fully-featured timeline animation. On top of that it’s modular too, so there’s no need to bring in everything to tween something. WHY USE GREENSOCK? GreenSock can be particularly useful for development teams that need to get to grips with new tools quickly and also swiftly move on the mastery of those tools. The JavaScript API that GreenSock has is straightforward enough to understand and the documentation is very good. What makes GreenSock particularly brilliant is its CSS Plugin, which enables use of CSS syntax when defining animations. HOW TO USE GREENSOCK? GreenSock and its plugins can be downloaded…

Identifying a good plugin strategy Good plugins help you become more productive and can improve your work quality. Not all plugins are equal, with some suffering from issues such as installation difficulty, poor support and security concerns – consider these factors. While it’s good to have choice, there is temptation to pick more plugins than are necessary. The old saying of time being money comes to mind; if plugins are causing you to spend more time on tracking configuration issues and opening scope for support requests, they are increasing your costs. The best way to avoid these costs is to avoid having them in the first place – achieved by not installing plugins that don’t directly meet the project criteria. This is what’s called delivering the minimum viable product (MVP).…

With websites growing in complexity the need to build modular components is ever present. Without careful planning a simple form can quickly develop into a behemoth of duplicated markup and spaghetti code that becomes a nightmare to maintain. It’s not just a developer issue, either. Screen readers have a hard time working out anything that does not map to a regular HTML element. Common patterns like autocomplete fields can look nothing more than a few nested div tags. With Web Components you can encapsulate behaviour inside a custom element. This allows you to build an accessible, well-performing component once and reuse wherever you like. Unfortunately only Chrome and Opera support them out of the box, with other browsers requiring a polyfill. Polymer is a library from Google that not only…

“ Node.js is a very hip technology: adding it to your skill roster allows you to access a variety of cutting-edge technologies ” Tam Hanna Tam’s career has seen him wrestle with a variety of stacks and languages, being particularly impressed with Node.js. This issue he shows you how to install, what Node can be used for and how to implement it. He then shows you how to proceed to more advanced use cases. Page 40 Ralph Saunders Ralph delivers front-end excellence for global creative agency, Crowd. In this issue he reveals the secrets behind creating smarter CSS animation. Create complex effects, improve performance and join with JS. Page 66 Leon Brown Leon is a freelance web developer and trainer who assists web developers in creating efficient code for…

01. Femme Fatale Studio femmefatale.paris/en A classy dark palette combined with animated text and models to engage. 02. Converse Diamonds counterclimate.converse.com A video-based story that is interspersed with some impressive text effects. 03. Where’s Lolly icelolly.com/wheres-lolly/ Spot-on illustrations combine with video to create a location-based product game. 04. The Land of Clean paneralandofclean.com Animated landscapes made of vegetables, bread and cheese. Graphics Walls 2015 bit.ly/2bBqQNt Street art at it finest. This collection from YOK and SHERYO is beautifully crafted. Colour picker Odd but trendy bit.ly/2bBA1sA Typesetter Frontage Condensed bit.ly/2bBOPut This three-dimensional font is perfect for creating text with impact. Add some shadow for a touch of reality. WordPress Liv bahemian.com/demo/2016/liv/landing/ A stylish multitalented newspaper style theme that puts the story as the main focus. Comes in a light or dark…

“Finding out the user’s needs and motivations now helps guide me into the right track for my projects” I‘m an interactive designer and my goal has always been to create stunning and polished design experiences. Have my deliverables always been successful? No. Why? Because I didn’t test my concepts as much as I should have and, instead, I just made a lot of assumptions. In reality, I wasn’t designing for the real world. As a designer, it’s really easy to go with your gut, with your idea or be guided by your own personal experience. It’s so tempting to make assumptions when it comes to context that it often leads us to disappoint our users and make potentially dangerous design decisions. As confident as we can be, we never know…

1. Page structure The first step is to create the main document structure. The document consists of two sections – the head and body. The head section is used to load resources such as the CSS and JavaScript files. The body section is used to contain the page content elements, which will be created in the next step. 2. Content containers There are two content containers used in the example – the page content container and the loading screen container. The loading screen container has two span elements, which will be styled and animated in the CSS stylesheet to produce the loading animation. The main content is stored inside the <main> container. 3. Start the CSS Create a new file called ‘styles.css’. We start the CSS styling by defining the…

Tam Hanna CEO at Tamoggemon “ Node.js truly is a gift that keeps on giving. Whenever I need to bodge together a small server for some kind of network-enabled test gear shown in my new YouTube channel, I fall ” back on Node.js without hesitation WORK WITH NPM DEPLOY A SERVER FASTER APP BUILDS EASY EXTENDIBILITY WHYUSENODE.JS? The foremost reason for using Node.js is the ability to retain your existing JavaScript logic. If you’re an expert in programming JavaScript, learning more low-level languages like C can be a difficult and time-consuming process. Programmers trained in both languages would also appreciate Node.js: not having to rewrite logic which already exists on the client reduces the time required to complete the project. In addition to that, duplicating code implementing business logic is…

In modern web design we see many patterns emerge such as parallax scrolling, the one page long scroll or the hamburger menu icon. But one of the patterns we often see is the animated header that animates up when the user scrolls down the page. This pattern is seen a lot on mobile devices as it helps create more of the screen for the user and is much less obtrusive. As UX design cwontinues to be at the forefront of our thinking, these kinds of patterns can only be good for us going forward. So with this in mind, we are going to create a simple tutorial that demonstrates the animated header pattern when the page is scrolled down. We will be using CSS for the styling only, but we…

Some CSS properties lend themselves to animation more than others. Properties that lend themselves to good performance tend not to affect document flow and other elements. This can seem like everything at first – and it is true that a lot of CSS animation is about stretching a little into a lot – but thanks to the transform property it is possible to craft advanced animations that also perform well. POSITION ABSOLUTE It’s also possible to cheat performance (or get extra for free) by engineering elements out of the document flow if they’re going to be animated. This is solely the power of the position property and if wielded effectively can yield surprising results. Position absoluting elements relative to their containers will take them out of the document flow. This…

There’s more to animation than just the mechanics – it’s not just what’s happening, but how it happens that’s equally important. Out of the box CSS comes with some easing properties: ease-in, linear, ease-out, and ease-in-out. These easing properties control the progress of the animation against its timeline and are ultimately responsible for how any animation feels. The default easing properties are ubiquitous, but under scrutiny it becomes apparent how calculated they feel – the default easing that comes with CSS feels unnatural. With cubic bezier it’s possible to define animations that feel more dynamic. This can lead to creating motion that feels energetic or at the other end of the spectrum, vogue. 1. FAST EASE OUT It’s possible to create a fast ease out motion with cubic-bezier(.15,.43,.42,1). This is…

Locus Solus (www.locus-solus.it/en) is home to some wonderfully designed contemporary furniture and also happens to use GreenSock to execute the advanced animation on the page. There are a lot of passive animations going on here with the clock in the center; the background transitions; and the text transitions. When navigating to new pages there is a full-screen transition and scrolling pages that brings in elements in a unique way as well. GreenSock has been used to enable most of this, with some tactical usage of canvas and CSS transitions where appropriate. The scrubber on the clock is a canvas element and uses the canvas API, which is used to bring in arrows on hover. A telltale sign is that this element is slightly blurry in retina screens where the rest…

GREENSOCK SHOWCASE   greensock.com/examples-showcases The GreenSock showcase is a fantastic curated resource, showing the best of what’s possible with GreenSock when pushed to its limits. If nothing else, this resource will inspire developers AWWWARDS   awwwards.com Awwwards does what it says on the tin and gives websites awards on four criteria: Design, Usability, Creativity, and Content. The level of work here is extremely good. CODEPEN ANIMATION   codepen.io/tag/animation Codepen is home to all sorts of enterprising developers and their experiments. The animation tag is worth a browse occasionally as some of the mechanics of these can be particularly inventive. THAT’S NO MOON   codepen.io/bpmarkowitz/pen/fImhF This pen by Ben Markowitz is one such experiment. Here he’s used multiple HTML elements, 3D transforms, borders, and border-radius to create a 3D Death Star…

For many, React transformed how they approached JavaScript programming. React Native (RN) builds on these skills and brings them to iOS and Android. Unlike similar frameworks it doesn’t simply run React within a WebView, it translates code you write into the native equivalent. This makes it far more performant and more capable of hooking into native functionality but also requires slightly more upfront from the developer. RN is built and used by Facebook along with over 900 contributors. It’s well tested and trusted by many app development companies including SoundCloud, QQ and Discovery Channel to name a few. But why go native when we could build progressive web apps instead? The technology surrounding web apps is reaching parity with native apps. This is great news for open standards but some…

“When you are ready to purchase hosting, check that you have enough resources" Featured host: tidyhosts www.tidyhosts.com / 05603 674610 About us Tidyhosts has become a leading cloud hosting provider throughout the world. It boasts a feature-rich selection of services including domain registration, shared web hosting, WordPress hosting, hosted exchange email, cloud virtual servers and media streaming. Its passion and drive for success has gained a highly reliable and trusted reputation from its customers making us number one for hosting services. Founded in 2004 by three developers who wanted to build hosting infrastructure for developers, years on, the company has expanded to offer much more. What we offer • Domain names – Simple domain registration with a large choice of TLDs. • Shared web hosting – Includes one-click application installers…

Essential assets and templates Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP Tutorial project files All the assets you’ll need to follow our tutorials Plus, all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 103 Minutes of RWD videos from Pluralsight ( www.pluralsight.com ) • 17 Overlay AdSense-compatible ad templates from SparkleStock (www.sparklestock.com ) • 3 Responsive HTML/CSS templates • Custom Arter Sans font The home of great downloads – exclusive to your favourite magazines from Imagine Publishing Secure and safe online access, from anywhere Free access for every reader, print and digital Download only the files you want, when you want All your gifts, from all…

FULL-SCREEN SCROLLING Get vertical and horizontal full-screen scrolling with fullPage.js ADD ANIMATION TO WEB FORMS Code engaging UI elements to enhance the user’s experience WORK WITH WEB ANIMATION API Create dynamic animations with the assistance of JavaScript TWEET, REACH AND ENGAGE Learn how to implement and integrate Twitter into your projects Visit the WEB DESIGNER online shop at for back issues, books and merchandise ALL IN YOUR NEXT WEB DESIGNER Issue 254 on sale Thursday 13th October 2016…

Mural mural.co Remote working is the key here. Seamlessly work within the same space as if everyone was in the same room. Color Safe colorsafe.co Generate colour palettes for your projects that not only look good but are based on web accessibility guidelines UXPin uxpin.com Manage your entire UX process with this easy tool. Design, prototype and collaborate across one platform. UserTesting usertesting.com Customers count, and knowing how they work is critical to success. Get videos of people working to get essential insight. JustinMind justinmind.com Need prototypes? Get feature-rich design mockups and change them into fully functional UI prototypes.…

Fonts are far more than just complementary to your website, they’re an art themselves. Picking the right font can be a nightmare though, and with so many to choose from, not to mention so many nuances with each one, sometimes you might wish that you could just create your own. Luckily, creating your own font isn’t as hard as you may think, and can be achieved with either Photoshop or Illustrator, and a font-creating program such as FontCreator; others on the market include the likes of FontLab. Building a font simply relies on creating a defined look for the entire typeface, and following that cohesiveness through every character. You may wish to create something really outlandish and ambitious, or you could just create a Wingdings-style symbol font to add to…

Poor performance in web animation can be caused by many things, but realising animation boils down to a four step rendering process: Styles, Layout, Paint and Composite. In the styles process the browser calculates what styles need to be updated or applied to elements. Layout determines the positioning of elements (think box model). Paint starts drawing CSS effects that have been applied to elements – this happens in layers and to finish, the Composite process is where the new layers are drawn to the screen. The four step process can take a lot of time and the Paint process is the most expensive of the four. The secret to achieving 60FPS lies in giving the browser as much time as possible to complete those four steps and avoiding some of…

Keyframe animation as opposed to transition-based animation enables control of intermediate steps or waypoints along an animation sequence. This gives developers finite control over each step in a sequence, anabling anything from far more complicated transitions to entire advanced animation sequences. KEYFRAMES VS TRANSITIONS The fundamental difference between transitions and keyframes is that keyframes enable an animation to be broken down into multiple steps. In terms of animating interactions, transitions are great for animating between two states like: on and off; expanded and collapsed; as well as sliding and static. Keyframes enable animation between two states with extra states in-between. This makes keyframes useful for complex state transitions, like turning a login button into a login form on-click. Keyframes also enable developers to specify sequences of motion. An object may…

Web animation has slowly come back into fashion after the death of Flash and has been enabled by a standards-based technological progression in browsers. Unfortunately, consumers’ tastes have moved on since the old days, making it harder to create compelling animation. Here are some clichés and how to avoid them. TAKE CONTROL OF SCROLLING With the advent of parallax websites and scroll hijacking, a recent trend has emerged where every animation on a page is now controlled by scrolling. This can be an effective technique, but it often seems poorly applied. Animate-on-scroll sites have a mechanical feel to them, due to the nature of the interaction. The user is in control of the animation. Rather than being wooed by it they’re operating it. Additionally it’s tough to do animate-on-scroll sites…