Innholdsfortegnelse for No. 265 i Web Designer

“Make it run fast and fluid – 60fps, all the time. Around 50% of the work is making sure it runs and looks good everywhere. But it’s worth it” 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 Add wow to the web with 3D 3D was touted as the next big thing for the web back as far as we can remember – 2012. But technology and browser support rarely catch up until years later. Finally, the web has caught up and 3D environments are now a permanent part of the internet. This makes now the perfect time to jump in and start mixing up your designs with 3D. In our latest…

Need an instant hit of Web Designer? Check out our digital specials. The Web Apps Handbook Volume 2 and The Developer’s Guide to JS reveal the best tools and methods to build apps with web technologies and learn how to get started with ES6 and npm. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3D-related 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 04. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.…

Reasons to: reasons.to A three-day conference/festival of design and code. It brings together a host of top-class speakers on many subjects. Generate London www.generateconf.com Get ready for a conference packed with insight, inspiration and practical take-aways. Design Matters designmatters.io Aimed at the design community. Discuss what’s new in digital design, get inspired, meet new people and have fun. React Boston www.reactboston.com A two-day, single-track conference all about React. Join them for a weekend of high-quality content and more. Web Expo www.webexpo.net Fancy visiting Prague and getting to see some great speakers? Then this is the web conference for you. Airport Distance Map bit.ly/2f3ejoC A combination of HTML, CSS and JS allow users to drag markers to get distances. Pattern bit.ly/2tZarMl Animated patterns morph into new animated patterns, creating a continually…

1. Page structure The first step of this tutorial is to create the HTML document template. This consists of the HTML container, which stores the head and body sections. The head section is responsible for loading external CSS and JavaScript resources, while the body section will display the visible HTML content. The display content is applied to the body section in step 2. 2. HTML content The visible content consists of two content containers. The first, main, is where the page content is to be placed. The second container has an ID to be referenced for CSS styling and stores two span elements that will make the loading bar. The span elements will function as the background and foreground of the loading bar. 3. Start the CSS With the HTML…

1 Why are you doing it? Let’s start from the beginning. Everyone’s doing things for a reason. Would you like people to experience what you imagined? Play with it? Maybe surprise them and show them something they’ve never seen before? You just want to try it? There’s no wrong answer, and the reason will shape the result. 2 It should feel good Whenever someone mentions the ‘look and feel’ of an experience, the look is easy to describe, and in most cases it’s a straightforward plan: make it pretty. The feel is more ephemeral – it’s somewhere between high frame rate (keep 60fps!), fluid animations (a lot of easing, follow rules of physics or break them on purpose) and general consistency of the experience. You’re making a small world, so…

“As part of Cartelle, we recently launched the new interactive WebGL homepage for Fornasetti.com. Visitors can travel down an infinite 3D tunnel wrapped in their latest patterns Johnny Slack – Cartelle co-founder” The most recent work at johnnyslack.co is a ten-part series that uses only real-time waveforms to animate natural forms in WebGL. Each piece is made with three.js and uses vertex animations to manipulate 3D geometry. By passing a variety of curves, waves and algorithms through a selection of organic models, animations are created in real-time. This allows for lightweight load-times and also the ability to easily interact with the animations at run-time.…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner One of the main reasons to include WebGL on your HTML page is so that the graphics you display can be interactive for your users. If the content isn’t going to do anything on the screen or doesn’t change in any way, then it’s far easier to display an image instead. In this tutorial the 3D content on display is going to be an interactive scene that is a little like the kind of thing that can be found in our sister magazine How It Works but the big difference here is that instead of it being just an illustration, it will be interactive with the user being able to control what happens in the scene. The model will spin around slowly so it can be…

1. CAPTURE A PAGE PROFILE All modern browsers will record a profile of a page. Chrome has a separate profiler for JS, Firefox has a ‘JS flame chart’ under the Performance tab, and Safari records everything in ‘Timelines’. These can be used to see what’s being called when and why. To test specific issues, start recording, perform the slow action, and stop recording. After a few seconds, the tools will show a chart with details. 2. ISOLATE WHAT’S CAUSING THE ISSUE Each browser will display a slightly different version of a flame chart. These show small coloured blocks that stack on top of each other. Each block will represent a function call that happened during the recording. Long blocks are a cause for concern, as these took the longest to…

One of the more extensive sets of changes in npm5 focuses around the implementation of caching. By way of background, npm supports caching packages locally to avoid repeatedly transferring the same data over the network when installing modules. Fundamentally, caching has been completely rewritten from the ground up in version 5. The npm team believe that this should improve performance noticeably. That said, it’s a breaking change which means old caches are discarded and must be redownloaded, so you might not notice the impact straight away. Also new is a process whereby cache entries are integrity-checked and will be automatically redownloaded if found to be corrupted. If you’ve been using npm for a while, you might have encountered the occasional need to clear your cache to resolve module install issues,…

To understand the purpose of the new lock file functionality, you need to consider that npm install using package.json does not always produce the same result. npm takes package.json, containing top-level dependencies and semantic version requirements (eg ‘greater than version 1.0.0’) for your code, and creates a node_modules tree which includes all resolved subdependencies with exact versions. The exact node_ modules output may differ based on several factors, such as a new version being released of a package for which you specified a semantic version range. There are times when you want to guarantee that the exact same versions of packages are used throughout your dependency tree. For example, if you’re running production deployments, this can be important to mitigate risk of each deployment differing slightly, and if you’re working…

The npm team is working to take a structured approach to developing new features and changes, with a high level of transparency and community review. This is done through an RFC (request for comments) process. While npm has always been open source, this formalised approach has been brought in because the popularity of the tool demands some very well-documented specifications. The RFC process is fairly straightforward. When a change is proposed, one of the npm engineering team will draft an RFC document detailing the problem statement, background, possible solutions, and specifics of the proposed approach. Once this has been reviewed by the engineering team internally, the document is posted to GitHub for community review. It should be available for at least two weeks to provide ample time for comments to…

“Europe’s #1 developer boot camp, running highly selective classes of our offline course every six weeks, and a remote course every 12 weeks.” Featured: Makers Academy www.makersacademy.com Twitter : @makersacademy Facebook: MakersAcademy About us Makers Academy is a fully immersive, 12-week computer programming boot camp. With their help, you will learn the principles of software craftsmanship and they’ll also help you get your first job. They’re Europe’s number-one developer boot camp, running highly selective classes of the offline course every six weeks, and a remote course every 12 weeks. They take a ‘learn by doing’ approach, through project-based work. Students are encouraged to work in pairs on coding challenges, with weekly tests, culminating in a final project. They help set up job interviews via their network of hiring partners…

01. Viva Le Vevo parall.ax/viva-le-velo Gorgeous illustrations of the world’s greatest bikes with their history 02. Tubelectric www.tubelectric.com.ar/home A boring subject matter made engaging with a few simple animations 03. Team Alpine Matmut Challenge bit.ly/2hg0kws A fun 3D driving game with simple controls 04. Pet Camp bit.ly/2vkPcEL Cute illustrations and pop-up info boxes tell users what’s happening at Pet Camp Graphics Atari Baby bit.ly/2uQ4wWY Beautifully crafted Japanese-style graphics and robots. What more could you want? Colour picker literateakihabaraota bit.ly/2hg08gR Typesetter Blunt bit.ly/2vXjwSW A new bold headline typeface, designed to be an alternative to overused headline typefaces such as Impact. Includes four weights, each with matching italics. WordPress CityLister bit.ly/2tQuiJa Looking to create your own listings directory? This theme is a great starting point to help you rival the big boys.…

“Getting the build in the hands of the end users is invaluable” Prototyping is a process that has existed since the inception of ‘product design’. In the world of web and application development, the idea of prototyping is not new either. Many developers have created beta releases of their builds, to sense-check functionality and to help validate the project for additional funding or client sign off. The idea of interactive prototyping, however, is a step even before that, utilising the designs to feign a user experience without a single line of code being written. In the world of rapid and agile development cycles, this has become a necessary step to ensure time is not wasted developing an idea that would never satisfy the end user. When sending through a set…

1. Initiate HTML The first step is to initiate the HTML, which includes the definition of the page document and its visible content. The document’s head section contains links to external CSS and JavaScript resources, while the body section is used to contain visible content. This example has a special div element with a ‘rain’ class applied, which will be used in step 2. 2. JavaScript content population Create a new file called code.js to store the JavaScript code. To avoid unnecessary HTML clutter, JavaScript is used to populate the ‘rain’ class element defined in step 1. The code creates 30 span elements inside the ‘rain’ class element, each containing unique inline styling for horizontal and vertical positioning. The number of span elements generated can be altered by changing the…

2011 After Createful is founded, the agency releases the first mobile app for Lush Cosmetics. No. of employees: 3 2012 Createful moves into its first office at the enterprise Pavilion at the Arts University, Bournemouth. No. of employees: 3 2012 The Pronto to-do and reminder app wins FWA app of the day. No. of employees: 3 2012 Createful is awarded Best Employer award at the ‘Open 4 Business’ awards. No. of employees: 4 2012 The Wedding Planner for iPad app wins a Silver Lovie award in the Utilities and Services category. No. of employees: 4 2013 Createful moves to a new, larger office space in central Bournemouth. No. of employees: 6 2014 A new brand website is launched for the fashion brand Animal. No. of employees: 7 2014 The Colourless…

Search Engine Optimisation (SEO) is the practice of making websites as search engine friendly as possible, so when users are searching for terms that are relevant to your business, your website will appear higher in the list of results. You can’t pay for this as it’s organic – it’s a mixture of skill, relevancy and some would say black magic! Naturally, people will be better in certain areas of SEO than others, although each of us will always benefit from ongoing improvement, understanding and refinement. It takes resourcefulness, dedication, persistence and creativity to hit the top spots; this is particularly relevant with the ever-changing nature of the Google algorithm and the need to keep up to date and informed. The following will help you to have a better understanding of…

Yarn is another package manager, developed by Facebook. It aimed to solve some of the perceived shortcomings of npm – notably performance and security. For most users they’ll appear similar, since Yarn uses the same package.json file and can install any package from the npm registry (or Bower, for that matter). However, there are some fundamental under-the-hood differences. Facebook cited scalability and support for fully-offline environments as key reasons for the creation of Yarn. The npm5 release closes the gap between npm and Yarn, in particular with its substantial improvements to performance and improved support for offline caching. However, several benchmarks have found that Yarn continues to outperform npm for package install. If you want to try out Yarn, you can (ironically) install it using npm: npm install –g yarn…

01 Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine. 02 You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices. 03 If you have any problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below. filesilohelp@futurenet.com…

“A large website build project will typically touch nearly every department in the agency” Creating a great website that fulfils all the requirements and objectives is a very, very difficult thing to do. It relies on a lot of best-practice and many of the common pitfalls being avoided. One of these key pitfalls is attitudinal. At any stage of the process, it is not helpful at all to think as websites as a ‘product’. In fact, it is really harmful. For us, it is a multifaceted communication tool. In terms of guiding our staff, we encourage a spirit that attacks these projects with a can-do attitude but also a knowledge that it is not a simple challenge. When we receive inbound requests from potential clients, it is fair to say…

“ We basically got facts and numbers about the airport and got to work with that ” BRUSSELS AIRPORT IN NUMBERS  brusselsairportinnumbers.be by THREE-SIXTY MEDIA (DEVELOPMENT) three-sixty.be BBC (DESIGN) bbc.be PROJECT STATS PROJECT DURATION 1 month, 3 weeks NO OF PEOPLE INVOLVED 8 NAMES & POSITIONS Team Three-Sixty: – (Front-end) Development & Design/UX consultancy: • Michael Vleminckx Lead front-end developer • Niek van der Laak Concept, UX • Jurgen van Laetem Digital project management Team BBC – Concept, Project Management & Design: • Mieke Verelst Project management • Dave Lesy Art director • Ben Van Looy Front-end development advisor • Gerrit Janssens Web copy TOTAL MAN-HOURS 175 EXPECTING SOME OF THE BUSIEST FLIGHT TRAFFIC DAYS ON RECORD, THE CONTROLLERS OF UK AIRSPACE ISSUED A STARK WARNING RECENTLY. If our skies…

Masking has been used in design and print for centuries and has been achievable using graphics programs such as Photoshop for almost as long as CSS has been around. However, masking on the web has been a whole other story, but we’re finally getting natively supported – by the browser’s rendering engine and implemented in CSS – masking on the web! The new support in CSS is implemented using two new methods: masking and clipping. They will both ‘mask’ an image by using different code and in different ways. Due to them being separate properties, browser support differs for each property. At the time of writing clip-path has wider browser support. In the tutorial we’ll be masking a YouTube video using SVG. We’ll be using a (well known) hack to…

DON'T SWEAT THE SMALL STUFF. WHILE MICROIMPROVEMENTS CAN HELP SHAVE OFF A COUPLE OF MILLISECONDS IN PLACES, TRY AND KEEP A HEALTHY BALANCE BETWEEN PERFORMANCE AND CODE MAINTAINABILITY.MATT CROUCH FRONT END DEVELOPER Q HOW CAN I USE JS TO IMPROVE THE PERFORMANCE OF MY SITE? At a time where the majority of web browsing is done on a phone or tablet, performance is critical. Not everybody has the latest device, and each delay and stutter could cost a customer. Thankfully, there are plenty of ways to use JavaScript to stop this happening. KEEP IT PASSIVE Jagged scrolling is a clear sign something is up. In some cases, the browser is being forced to wait because of listeners applied to the page. Events such as ‘wheel’ or ‘touchmove’ are able to…

In days gone by, using modules and libraries for web development required manually downloading.zip files, placing their contents in the correct directory, and referencing them in your own code. As projects became larger, and dependency lists grew, this became more and more cumbersome to manage. Problems emerged collaborating and sharing projects, with large numbers of files needing to be distributed. Also particularly problematic was maintaining the correct versions of dependencies – worse still if you had a dependency on a specific version or were impacted by breaking changes. npm is one of a number of JavaScript package managers (Bower and Yarn being other options), which works with Node.js. If you’ve developed in Java, you may have used Maven to perform similar functions. As a package manager, it removes much of…

“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 it a highly reliable and trusted reputation from its customers, making it the 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 –…