Innholdsfortegnelse for No. 245 i Web Designer

“ES6 looks to have been accepted in most areas and runtimes. Support isn’t totally there yet, but the most useful features are already supported ” 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” JavaScript is everywhere Back in 1995 Brendan Eich could have never envisaged how big JS was to become in one short decade. It took him ten days to complete and it now rules the web. Web developers and designers cannot look anywhere when it comes to building/coding and not find a JS framework or library ready to lend a hand. This issue we have dedicated a large part of Web Designer to the ubiquitous language. We kick off with…

“Microsoft Edge is built on a new evergreen rendering engine, and goes beyond web browsing with features like Web Note and Cortana. All new work is focused on Microsoft Edge, but Internet Explorer 11 will continue to receive security updates and minor compatibility fixes. Microsoft Edge can fall back to Internet Explorer 11 for sites that need backward compatibility with older web technologies, including ActiveX, Java and Silverlight.”…

1.Define the HTML Our markup starts with a simple HTML structure with some basic CSS styling, most importantly setting the link display property as inline-block. This current static state is essentially what non-JS capable browsers and search engines will see. We then include jQuery alongside the Bez plugin by Robert Dallas Gray (github.com/rdallasgray/bez). 2. Work with SVG For the slanted clipping effect we need an SVG and note the two links shown on FileSilo, each with its own mask. On top, there is the slanted stroke drawn within a vector application. You can choose an angle of your choice, but be sure to note it. The initial position of the stroke is at the left side with a negative margin of half its own size. 3. The final SVG This…

The web has come a long way in the last five years, in fact it has come a long way in the last five months. VR anyone? This is going to be the big tech this year and who’s the big player? The Oculus Rift. Where did it start? Kickstarter. Five years ago and the concept of crowdfunding was pretty much unheard of. Asking the public to fund your ideas over the internet seemed liked a surefire way of publicly ridiculing yourself, but it’s actually turned into a multimillion-dollar business. The prevalence of both Kickstarter and Indiegogo has offered secure platforms for budding entrepreneurs to connect with millions of potential buyers and the results have been startling. Some of the biggest advancements in technology have come into fruition thanks to…

Gusto didn’t leave the launch details to the last minute, as the team was well prepared. But, as web and digital director Daniele Milana explains there were a few issues that needed ironing out before the big day could happen: “The website’s main struggle was to make it useable from any device and support. The usability was very varied across all of the different browsers, and we wanted to avoid all the imperfections linked to these differences. “It was difficult to keep all the animations and effects on the same level. One of the most visible examples is the slider on the homepage: the 3D effect was not easy to replicate on devices and browsers, but with very accurate work we reached a great result. “For the launch, we prepared…

The world’s foremost authority on science, Stephen Hawking, and his publisher, Penguin Random House, sought to translate his best-selling books, A Brief History of Time and The Universe in a Nutshell, into an interactive and educational mobile application that makes the laws of time and space not only accessible, but engaging and fun. By taking an “easy-to-use, difficult-to-master” approach, we took our extensive history in game design (400 and expanding!) and used it as our North Star during development because casual games have clear appeal to kids and adults. We applied game mechanics like “mastery” to motivate users to master specific concepts, just like they might want to master levels in a game. We also made a deliberate departure from the more typical dark palette and highly rendered graphics we…

While the standard has been set in stone since June 2015, ES6 support in the various JavaScript environments (web browsers, server-side engines) can vary from adoptions to areas of concern with the new features. PROS Cleaner code A lot of the focus behind ES6 was to make life a lot easier for developers, providing them with several syntax improvements that lead to cleaner code. It also provides more alternatives for iteration, better object-orientated syntax, string concatenation and other improvements. Faster code Certain ES6 features are based off of techniques that are already in use. In general, a natively supported implementation of a technique is usually faster compared to the same approach being written in normal JavaScript, as the environment can also optimise execution. Easier coding All the additional syntax and…

JavaScript.com javascript.com This website is not to be mistaken for the official home of JavaScript, although it has been turned into a decent place to stay updated on all things related to it. For those who are new to JavaScript it contains an online interactive tutorial that’ll get you coding within your browser. The Resources page lists websites that will help further your JavaScript knowledge at different skill levels and the News page contains curated quality blog posts from the community. You can even contribute to these by submitting a story. JavaScript Weekly javascriptweekly.com JavaScript Weekly is a newsletter available on the web or delivered via email that covers JavaScript. It’s a very popular newsletter with some top developers endorsing it and the content is curated by Peter Cooper (@peterc)…

As a developer it can sometimes be daunting with the amount of new libraries, updates and platform changes that seem to occur on an almost hourly basis. There is an expectation that to stay relevant in the industry knowledge of everything is required. This simply isn’t true or possible, especially when projects sit across multiple tech stacks and each language has its own paradigms/best practices. Change is a good thing: without change the world would have no modern medicine, computing technology and the list goes on. Almost everything we know about or possess in the modern world is driven by change. The world of JavaScript has moved on considerably from simple event handlers. It may now be the only programming language (HTML and CSS are markup) used to build complex,…

PROS Efficiency Sharing code between the client and server side reduces the amount of code written in an application. It ensures developers can focus on introducing new features and driving the project forwards. Ease of debugging Having one unified codebase reduces the amount of time spent looking for a specific issue root cause. If a team has separate front and backend teams, working between the two to find the cause of an issue can be fairly time-consuming. Training Learning a new language is not a task for you to take lightly. Reducing all development to be written in one language is not only cost-effective, but it’s also human-friendly. Investing some time to become an expert in one language will then enable your upskilling to be much faster. CONS Maturity The…

To get access to FileSilo, please visit www.filesilo.co.uk/webdesigner 01 Follow the instructions on-screen to create an account with our secure FileSilo system, or log in and unlock the issue by answering a simple question about the magazine. You can access the content for free with your issue. 02 If you’re a print subscriber, you can easily unlock all the content by entering your unique Subscriber ID. You can find this on all correspondence from Imagine Publishing, including the clear plastic envelopes your magazine gets delivered to your door in every month. 03 You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you use a desktop to download content, as you may not be…

“Node.js has seen a big jump in support for the most commonly used ES6 syntax, as the long-term support release (4.2) has jumped from 16 (v0.12) to 49 per cent” David Boyer JavaScript is everywhere. And this issue we dedicate a whole 35 pages to it. We kick off with two features that look at ES6 and ES7 and how they can and will work for you now and in the future. Plus, we have a collection of tutorials that look at Babel, Angular 2.0 and npm. Page 38 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks ranging from the commonly used to the arcane. This issue he delves into the world of Node package manager and gives you the low-down on how to use…

Web Designer’s latest digital addition to our burgeoning collection is CSS Style Secrets. Whether it’s adding animation, effects, 3D or discovering what’s happening with CSS4, CSS Style Secrets has it all. Get your hands on this comprehensive collection of tips, tricks and techniques now. Don’t forget The Art of Responsive Design and The Web Apps Handbook. You’ll be able to get an insight into how to build apps with HTML, CSS and JavaScript as well as learn about how to create using the most popular libraries out there, including PhoneGap. Plus, check out Web Design Superstars, 225 Best Web Tools and Resources and Amazing Websites and How to Build them Vol 02. But how can you get your hands on a Web Designer digital edition, you ask? Simply head to…

CSS Hat 2 csshat.com Get the CSS code quickly and easily for individual layers in a design without the hassle of having to hand code. Pictura pictura.madebysource.com Quickly get the image you want to add to a design. Pictura searches, locates and lets users utilise images from Flickr. Velositey bit.ly/1NkejnP Need to create a prototype quickly? This extension allows for quick creation and is compatible with Bootstrap. Flaticon flaticon.com You are almost guaranteed to need an icon at some point. Use this plugin to quickly find the ideal option. Composer jasonforal.com/composer Working with multiple layers can be time-consuming. Improve your workflow with multilayer renaming and more.…

Eugenio, CMS manager “I would definitely take home Gara: it is a legendary model – I think you can really see it from the design. It is like a time machine that brings you to the beginning of the last century, yet it looks modern and is comfortable.” Lucrezia, social media manager “I really love the colours and the vintage look of Darsena. I love both the Man and Lady versions, but maybe I would find myself more comfortable on a Man one: I love its details.” Vanessa, production manager “I am the sporty one so my favourite is Zerodue. What I like the most is the adventurous approach – you can really feel the passion, the dynamism and the wind blowing in your hair.” Angelica, project manager “Going around…

Year 1996 No. of employees 3 Focus was on Flash animation and media expansion to digital marketing events. Year Early 2000s No. of employees 20-30 Youth and family became a large focus, with clients including Disney and Kraft. Year 2005-2007 No. of employees 40-50 Investment in mobile development helps launch Smashing Ideas’ UK office. Year 2008-2009 No. of employees 50 Our first apps get into the Top 10 charts. We are nominated for a Primetime Emmy. Year 2010-2011 No. of employees 60 ePublishing group is launched and we are acquired by Bertelsman. Year 2012-present No. of employees 75+ We work on BLE, integration, connected smart products and VR platform among others.…

JavaScript only existed in web browsers in the early days. Initially it was only within Netscape Navigator, but soon Microsoft adopted it as well (at the time, called JScript). In today’s landscape, JavaScript is widely supported through almost all browsers and due to competition between those browsers, performance has been pushed forward significantly. TO THE SERVER There have been previous attempts at getting JavaScript established as a server-side language, but it wasn’t until the release of Node.js did it really start to catch on. Benefiting from the performance strides in the web browser domain, Node.js was created to live on the V8 engine, which also powered JavaScript for the Google Chrome browser. The current stable version of Node.js also supports a decent amount of the ES6 standard giving you more…

ESLint eslint.org Provides static code analysis for your JavaScript, ensuring that you’re not making syntax mistakes. Visual Studio Code code.visualstudio.com An open-source editor that provides support for debugging Node.js applications within the editor. Atom atom.io Another open source editor that has a huge amount of packages available for adding further features. JSCS jscs.info Code style checker for JavaScript, ensures you properly format code and can enforce usage rules. Gulp gulpjs.com Enables you to automate and improve the workflow of your project. Tasks can be defined to check code, run optimisations, organise files and much more. npm npmjs.com Manages JavaScript modules and applications for you. It installs them so that they are globally available or locally for a single project to use. Karma karma-runner.github.io Karma will help you run test code…

AngularJS CLIENT-SIDE FRAMEWORK FOR CREATING DYNAMIC USER INTERFACE APPS angular.io AngularJS is a very popular web application framework, created by Google, for building client-side focused, JavaScript-based, dynamic UIs. Through the use of declarative HTML tags and application code, Angular allows you to quickly put together complex interactions that update the data displayed as it changes. This helps improve your separation of application logic and presentation code. While the 1.x version proved very popular at the time, other frameworks have entered the fray since, offering alternative approaches to the same goal and improvements in various aspects. However, version 2 is nearing release (currently beta) which is seen as a significant improvement and worthy of consideration once it sees a stable release. Having built up a large community, there is no end…

There will never be a single developer that writes efficient, accurate and error-free code first time, every time. JavaScript (especially client side) is rather forgiving when debugging, yet every issue should be seen as a cognitive experience and be rewarded with the knowledge on how/why it occurred. Ensure you inspect The first telltale sign that’ll let you know when a client-side application has thrown an error will be viewing the ‘console’ tab from within your browser’s respective ‘inspector’. Access the inspector with Cmd/ Ctrl+Alt+i for Chrome, Firefox and Safari, and Shift+F12 for Internet Explorer. A code syntax-related error will be represented by a description of the error, the problematic file and the line number of the error – click the error to be shown in browser in the incorrect syntax.…

Isomorphic JavaScript describes the proces of one codebase that executes on the client or on the server side, and it can then be deployed to any platform or device. The reality of moving a complete development team and tech stack to JavaScript alone is now a reality, but how does an isomorphic application work? Isomorphic JavaScript applications can enable the client and server to render the same code. Using a reactive programming paradigm that updates variables automatically, this data can flow between client and server side without requiring extra work from the end user or from the developer.…

Node.js Documentation nodejs.org Head directly to the Node.js documentation for the best place to digest the documentation and features of this superhero framework. The documentation on the site is very much unlike others. It goes a long way to decipher the reasoning behind the framework as well as looking at how the community has evolved over time. With many people wishing to contribute and help push the project forward it also provides a focal point for all further efforts on developing the library. Twitter bit.ly/wd-hash-js Follow the link and then head on over to Twitter to jump onto the #JavaScript hashtag. The microblogging platform does a great job of inadvertently grouping a massive wealth of growing resources related to JavaScript. Along with keeping an eye on the hashtag, follow some…

The box model and the way layouts are constructed on the web hasn’t really changed all that much since IE7. Modern responsive layouts are usually constructed through a series of floats and percentages, enabling developers to realise complex layouts and designs. There are some rough edges with this method though. Concepts are often produced with sibling elements of equal height, content vertically centred within containers, and proportional layouts that need to change proportions and be flexible for content. Crafting and managing a webpage like this used to require JavaScript, ingenuity and a lot of patience. Thankfully, flexbox has arrived and sets out to solve these problems. It makes realising layouts that used to be considered fiddly, difficult or even impossible, possible and easier. Browser support for flexbox is now very…

What browser do you use? Chrome? Firefox? Safari? Internet Explorer? If you are a web designer or web developer then the chances are you are using Chrome, Firefox and maybe Safari on your favourite device. What about Internet Explorer you ask? Designers and developers only know too well why they don’t use IE. But, before we rant about the hate-inducing qualities of the browser it is still worth noting that it is still the second most popular browser across the world according to StatCounter (gs.statcounter.com). In North America, nearly 23 per cent of the population use a version of IE. Finally, this is all set to change. Microsoft’s decision to stop supporting Internet Explorer 8, 9 and 10 means that web developers have been rejoicing everywhere. Why has it taken…

01. Creogram creogram.com Clearly focused colour coordination with great use of animation and direction. 02. #hue hue.pl Big images, bold colours and neat touches. 03. SmartSMS smartsms.nikoland.ru Engaging and relevant animation coupled with split-screen presentation. 04. Huffington Post huff.to/1Kl4UQ5 A series of stories that take the art of storytelling on the web to new levels. Graphics Tales from the Smith bit.ly/1RR7AtV Art in the style of comic book covers, from the hands of the very talented Billy Butcher with words from Mr Robert Smith. Colour picker Movie Diamonds are F bit.ly/1V4Zyv2 Typesetter DIN 2014 myfonts.com/fonts/paratype/din-2014 A contemporary version of the well-established DIN typeface. Devinyl myfonts.com/fonts/nootype/devinyl/ A monolinear typeface family mixing a host of different styles. Themematic Mega Pholio demo.meydjer.com/megapholio Got a portfolio of work to show off? This theme does…

“97 per cent of UK developers have dealt with late payments” By the very nature of their work web developers have to be extremely flexible but at the same time adhere to strict deadlines. However, new research reveals that their clients are, by contrast, typically tardy when it comes to paying for their services. Data from FreeAgent reveals that 97 per cent of UK developers have dealt with late payments from clients, with nearly two thirds (59 per cent) waiting three months or more to finally be paid. Almost one in five (19 per cent) said they wrote off an unpaid debt worth £1,000 or more for work they had completed. Don’t panic, there is light at the end of the tunnel. There are steps that can be taken to…

1.File creation It all starts with the final size of the preloader element you wish to create. You can then create a new composition within After Effects to these dimensional specifications and at 25 frames per second. Here we’ve used a dark blue colour (#060216) for the background, instead of using a black, as it adds intensity. Begin then by drawing a circle of any colour in the middle of the screen. 2. Trapcode Mir plugin Select your circle, and on the Effect menu, choose the TrapCode>Mir plugin you will need to have preinstalled. This will automatically create centred white waves. On Shader, you can refine the general aspect while Draw>Points will draw it with multiple points. Then simply follow the specifications as shown within the Geometry & Fractal panel.…

WebGL in the browser Three.js is a JavaScript library for drawing WebGL-based 3D graphics in the browser. Crucially it simplifies the process, drawing to <canvas> using renderer and scene objects. Download the library at threejs.org or link to either the versions via the CDN: Set the scene Three.js relies on three things, a scene, a camera and then a renderer. The first two are initiated as follows, with any one of a number of cameras being passed. The four attributes will define the field of view, aspect ratio (width/height typically), as well as the near and far clipping planes: Define the renderer After creating a new renderer instance, setSize(width, height) is used to set dimensions. This is the space where the app is drawn and most often this is maximised…

The visual concept for any project has a massive influence on how a product is perceived and goes a long way in making a website a success. The history of Olmo was an important part of the online experience and helped shape how the frontend looked and operated as UI/UX designer Sebastiano Pierotti explains, “The first part in our approach was to do some deep research into bike history and analyse the social impact the bike had in those years. “The Futurism movement had a lot of influence, with the avant-garde movement being popular in Italy. It proposed an entirely new concept of life, made of movement, modernity and power. So we worked, always keeping in mind that if we wanted to give the users that impression, we had to…

“ES6 (AKA ES2015) BRINGS NEW FEATURES AND SYNTAX IMPROVEMENTS THAT WILL AID DEVELOPERS IN WRITING CLEANER, MORE READABLE CODE.” When the ES6 standard was signed off, JavaScript environment could start to safely add support for the changes with the knowledge that the standard would no longer be changed. Although various ES6 features had already worked their way into several browsers, official support could now be added or previously hidden support (behind command flags) could now be exposed. While this increased the amount of ES6 features covered, there is still some way to go as far as web browsers are concerned. This doesn’t mean that you can’t take almost full use of ES6 right now. Babel, a JavaScript compiler, will take your ES6-based JavaScript and convert around 77 per cent of…

It’s important to remember that the ES2016 standard is a work in progress. There are five stages for proposed changes to the language that need to be gone through in order to make it into the final standard. Stage 0. Strawman – Initial proposals will be made for the purpose of gaining input from others. Stage 1. Proposal – At this point a case is made for its inclusion into the next standard, potential challenges identified and the shape of the solution suggested. Major changes can be expected of anything at this stage and there is little guarantee that it will make it through. Stage 2. Draft – The suggestion is far more detailed at this point with the syntax and semantics defined using the formal specification language. At this…

“Whilst trying to keep up to date with technology keep an open mind and stay connected with your own interests/goals. I’ll usually wait for a library to experience some ‘road tests’ before investing in them and always build a proof of concept to validate it’s the right tool for the job.” What is the difference? WEB TERMINOLOGY CAN BE DAUNTING, SO GAIN AN UNDERSTANDING OF CLIENT AND SERVER-SIDE JARGON Client-side web programming is mostly to do with building the user interface of an application and handling a user’s interactions. The code is run on the user’s device by the web browser (client). Traditionally client-side developers are known as front-end developers and require a deep knowledge of graphic and interaction design. Server-side programming refers to dynamic content generation and runs on…

Forever GitHub.com/foreverjs/forever Forever is an npm package written by NodeJitsu’s Charlie Robbins that enables any script to run forever. It’s a process supervisor written in Node.js that is simple and easy to use. The tool is great for keeping Node.js projects up and running when they throw an error, logging the error and then restarting the application. Forever can also be used programmatically, enabling developers hosting their own Node.js apps to write deployment pipelines that easily stop and start as required. Browserify browserify.org Browserify is a module that enables the require() method of Node.js to be used in the browser or in the command line. Although not strictly command line-based it enables client-side JavaScript to follow the CommonJS module system, keeping everything organised and clean. Browserify enables the tens of…

An important npm package, node-inspector creates a link between the JavaScript executing in a Node.js application and the Inspector toolkit built into desktop web browsers. Node-inspector currently only works with Chrome and Opera browsers (other browser users should potentially look into using a text editor with node debugging built in – like Atom as we have previously discussed. To install node-inspector (Node.js required) enter in a command/terminal prompt (git-bash provides a UNIX-like interface for Windows users): If you run into ‘eacces’ errors rerun the installer with ‘sudo’. Now navigate to the directory of the app that you want to debug, and then run the following command (swap index.js for the filename that will bootstrap your app): This will log out a few lines of debugging information, the most important will…

In the beginning websites were built using HTML and CSS, languages that describe markup and layout of a webpage. The web evolved to using dynamic server-side languages such as PHP/Python to generate custom HTML markup and present that to the client. Client-side interaction was kept to a minimum until the widespread adoption of AJAX. This enabled the client to reopen the conversation with the server and load more dynamic content into the existing webpage, updating content without the need to rerender the complete page. The trend of single-page apps has caused the framework’s client side to share a large amount of the responsibilities that server-side languages have traditionally been used for, from dynamic templating to business logic. Shared responsibilities The extra responsibilities inherited by client-side apps have come at a…

Unless you have been under a rock (or at least off of Twitter for a while) you have heard that the hot new thing in web development is ‘progressive web apps’. Already being implemented by major websites like Flipkart, Facebook and Google, Progressive web apps basically mean a collection of new APIs that have very recently been added to some browsers that allow for authors to create rich, native-like experiences. The key bit that ties together most of these new browser APIs is Service Workers, and it will radically change the way that you make websites. Introduced in Chrome version 40, Service Workers are a new type of web worker that act as a kind of proxy between your website and the network. That means with a little bit of…

Featured host: 1&1 Internet www.1and1.co.uk 0333 336 5509 “With a comprehensive range of high-performance and affordable products, 1&1 offers everything” About us 1&1 Internet is a leading hosting provider that enables customers to assert their web presence and succeed online. With a comprehensive range of high-performance and affordable internet products, 1&1 offers everything from simple domain registration to award-winning website building tools, advanced eCommerce packages, powerful cloud servers and more. Established in 1988, the company now operates across ten different countries with over 7,000 employees worldwide. Small and medium businesses, web developers, IT professionals and all other users can count on 1&1’s cutting-edge technology, top levels of internet security and 24/7 expert support to provide everything required for online success. What we offer • Quick and easy domain registration for…