Innholdsfortegnelse for No. 251 i Web Designer

“ JavaScript can now be used to make entire applications, be run on a server and power 3D games right inside the browser” 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 to the core JavaScript, it’s everywhere, and ES2015, or ES6 (you choose), is finally taking over from its predecessor ES5. It’s the incarnation of the web’s favourite programming language that developers have been waiting for. In our lead feature on page 40 we take a look at what ES6 has to offer, why you need it and how to start using it in your projects now. The big browser vendors, on desktop at least, now provide impressive support, but mobile…

Web Designer’s latest digital additions to our burgeoning collection include 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. Don’t forget CSS Style Secrets and jQuery Genius Guide. Get to grips with the core API, find out how jQuery works with ES6 and learn advanced jQuery methods. 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.…

Cascadiafest 2016.cascadiafest.org CascadiaFest is a three-day event. It has a host of speakers working with cutting-edge CSS, JS, browsers and Node.js. UX and digital design week bit.ly/1oiNLiJ Running from 15 to 21 August with lectures and workshops from respected studios. Web Summer Camp 2016.websummercamp.com This hands-on event offers workshops on PHP, eZ Publish, UX and content. NebraskaJS Conference 2016 nejsconf.com A single-day conference based in Nebraska with a focus on web development and JS. React Rally reactrally.com If you are fan of React then this two-day event is for you. Hear from the best and brightest minds in the React community.…

1.Create HTML foundations The page is initialised with the creation of the HTML document structure. This consists of the head section and the body section. The head section is used for containing non-visible definitions such as page description details and references to external CSS and JavaScript files. The body section is where the page content is stored – to be defined in the next step. 2.Make the ‘explosive’ items The explosive items consist of a container that uses a class called ‘explosive’, with two inner element containers. The first inner element will be used to store the visible content, while the second element will be used to store so-called particles for use in the explosion effect. Our example shows how more than one explosive element can be placed on the…

With a concrete concept under the hood the next phase was for De Lorenzis to work his design magic. What colours were to be used? What fonts were to be used? How would the navigation work? These were all areas that needed to be considered to ensure a coherent and ultimately complete user experience. “This phase was entirely designed by me. When I analysed the two main colours of the video (red and blue), I decided to use black for the whole project and I highlighted the text contents in white. By doing that I gave a monochrome language that matched perfectly with the colours of the video. The first feature I designed was the browser menu: I created a sandwich menu that immediately inspired me to utilise the letters…

We had the exciting opportunity to collaborate at the London Design Festival’s Digital Weekend, working with the Met Office, to pose the question what does the ocean around the UK sound like? And how do we bring this data to life in a beautiful way? Our solution was Flip-Dot – a low-resolution electromagnetic display. The distinctive ‘click, click, click’ noise the discs make as they turn over and hit the magnet fit beautifully with the theme. Away from the traditional weather forecast, the Met Office is a hive of activity. They have an open data resource called Datapoint that captures real-time data from a surprisingly vast network of sensors. One of the biggest tests was to create a generative wave form that represents a real wave at different buoy…

The last major change to JavaScript happened way back in 2010. Before then, the language was mostly concerned with multi-coloured cursor trails. Progress was very slow bringing new features into the mix, with browser vendors creating their own flavours of JavaScript, such a JScript. Fast-forward to today and the web is a different place. JavaScript can now be used to make entire applications, be run on a server and power 3D games right inside the browser. Needless to say, the language needed to catch up. After much back and forth the standards body behind ECMAScript – the standardised language of which JavaScript is based – began work on the specification for what was at the time called ES-Harmony, which eventually changed to ES6, and then officially became ES2015 when it…

CSS animations are a lot of fun; and the beauty of them is that through many simple properties, you can create almost anything. CSS animations are a great way to add additional polish and refinement to your site without disrupting the normal document flow, and CSS3 gives us many ways to dynamically transform our content quickly and easily through 2D and 3D transforms. One CSS effect somewhere in-between is the CSS flip effect, whereby there’s content on both the front and back of a given container. So in this tutorial we’re going to be building two basic card flip animations using CSS. The idea is that we have two videos playing on a webpage and when the user hovers over the videos, it flips to reveal additional content. Throughout the…

“The most exciting area of HTML5 game developer today are the .io games. Agar.io and Slither.io have defined a whole new genre of massively multiplayer games. When developers of this kind of game get their hands on 3D WebGL engines, there are going to be some pretty amazing games released. EXPERT COMMENT Dave Evans CTO and cofounder of PlayCanvas playcanvas.com  @daredevildave THE CURRENT STATE OF HTML5 GAMES Browser gaming has had a tough few years but 2016 has proved a boom year for HTML5 games In 2010 Steve Jobs dealt a blow to Flash when he declared that it wouldn’t be supported on iPhones and iPads. The following years saw a decline in the browser gaming space as HTML5 struggled to provide a satisfactory alternative to the Flash…

React is a great framework and has some good ideas for separating component properties and component state. Redux describes itself as “a predictable state container for JavaScript apps”, it can be used with other JS frameworks but React is its number one use case. Facebook introduced a concept for an application architecture called Flux. It’s the same architecture that it uses itself so, if done right, it’s scalable to large teams and large applications. Redux is a partial implementation of Flux and is currently the most popular option for state management. Reasons for this include its consistency, there’s a predictable way to write and store data so it’s easy to debug. It also enables time travel and who wouldn’t want that as a feature? Redux has three principles: there is…

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 • 82 Minutes of beginner PHP videos from Web Mentor (www.webmentor.org) • 20 Social media banners and 8 identity and branding mockups from SparkleStock (www.sparklestock.com) • Three responsive web templates 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 your…

01. Clipper Style clipperstyle.com A video and animation extravaganza using engagement to sell the product. 02. Resn resn.co.nz The unusual is no stranger to Resn and its new site is an experience to behold. 03. WebGL Strikes Back hoth.ultranoir.com Real tech (WebGL) with a Stars Wars theme. Play it and destroy the Empire! 04. The Age of Aerospace theageofaerospace.co.uk A collection of videos, commentary and interactions to keep the viewer interested. Graphics SKULLS behance.net/gallery/38545493/SKULLS A personal project from talented designer Mat Szulik combining style and panache. Colour picker Book An Autobiograph bit.ly/29wXWd4 Typesetter Rift bit.ly/29d6oBx The idea for the Rift font type was inspired by the titles and lettering on campy science-fiction posters from a bygone era. The beautiful font re-creates the tall, geometric type that is rooted in the…

1.Work with HTML foundations Initialise the main structure of the HTML document by defining the HTML container with its head and body section. The head section contains elements that define the document’s description information along with the style sheet to load. Meanwhile, the body section is used to store the main content, which is defined in the next step. 2. Add icon links and content Icon links are made from a single anchor <a> that has a unique ID and a link that references its ID. The associated content is placed in an <article> container that are placed immediately after their associated icon links. A technique to define this relationship will be used with only CSS selectors – meaning no need for JavaScript. 3. Initiate CSS With all of the…

Year 1998 No. of employees 3 Found by Nick Howe, Nick Bentley and Pete Thomas over a few beers in Liverpool. Year 1999 No. of employees 3 Launched a range of furniture including cardboard shelving at 100 per cent design Year 2000 No. of employees 3 In their second year of being found, Uniform is featured in Design Week’s ‘ones to watch’. Year 2002 No. of employees 5 Designed Mixmag’s club of the year and featured in a Sky documentary on club culture/design. Year 2003 – 2007 No. of employees 17 Focused growth on CG and worked with leading architects on projects across the globe. Year 2008 No. of employees 24 Produced the launch film and imagery for The Shard in London, Europe’s tallest building. Year 2010 No. of employees…

Maps have been delivered throughout the web for a long time and most web teams have implemented basic mapping, if only to display the surrounding geography of a particular location. With accurate, interactive JavaScript-powered maps just an API away, stylistic maps often take a backseat on the contemporary web. Stylistic maps have also been quite difficult to get right historically – trading detail and accuracy for file size, legibility and aesthetics. However, with the evergreen browsers now having good support for SVG, crafting crisp and clear stylistic map experiences is easier than ever before. Using contemporary techniques it’s possible to deliver less functional but more engaging map experiences. Some of the best uses of stylistic maps involve displaying simple information in relation to geography. This could be the locations of…

In principle, jQuery provided developers with an ability to perform asynchronous programming via its Deferred object. With advances in web technologies however, this has rendered its API now partially obsolete – both the ES2015 and the Promises/A+ specification have created its own versions of the Deferred object and these have offered a slightly different syntax for use in some situations. In particular, the behaviour of the then() function was modified in the case of exceptions. While an exception thrown in this method can be utilised to block callback execution in older versions, it can also now get transformed into a rejection value. This is something that is best demonstrated in the following snippet provided by the jQuery team: While earlier versions of jQuery would terminate execution after emitting one…

J Query’s flexible selector system lets developers pose ‘stupid’ questions to the framework – the range of possible bloopers ranges from nonsensical ones like the offset of a window mentioned in the documentation to ones which simply cannot be fulfilled for logical reasons (a good example being the infamous $(“#”)). While past versions of jQuery reacted to such input by returning either an empty collection or a structure containing ‘inert’ values, jQuery 3.0 will flag such errors mercilessly. The mere act of opening such a file in the web browser yields an error message if the console is open – in the case of our snippet (see FileSilo), Firefox will display something similar to ‘Error: Syntax error, unrecognised expression: #’. Even though this change – admittedly – is something that…

Firebase is a backend as a service (BaaS) from Google that provides a complete backend for your app. Any time the data changes on the server, it will automatically get pushed to the frontend. Its free tier, Spark, allows you to host all of your front-end code and database on its servers. These limits are generous and will be more than enough for this project. Firebase version 3 has many new features and enhanced native app support, but the API has undergone some changes. We are going to be using the Vue.js framework to handle our data. Vue is a lightweight but powerful alternative to AngularJS, that shares many features like two-way data binding, filters and element repeating. If you’ve used Angular before then it will feel familiar. The final…

greenwichpeninsula.co.uk/vision At Uniform, we have long been interested and invested in the future of the property and place sector. When innovative property developers Knight Dragon approached us with its key London project, Greenwich Peninsula, we set ourselves the challenge of bringing one of the largest regeneration projects in Europe to life. The solution uses a simple, tactile and ubiquitous medium: paper. Evoking architecture, flexibility and craft, paper is less concerned with realistic representations than with articulating an idea in an original and memorable way, and this is something that perfectly suits the visionary nature of the Greenwich Peninsula. We scoured the biggest and best cities in the world as inspiration for the perfect aesthetic to capture the unwritten story and character of each district. This ground-breaking content formed the basis…

With England doing surprisingly well in the Ashes in 2016, the Uniform cricket fans wanted a more interesting way to bring the essential test data from Trent Bridge to life. These days the sound of leather on willow has been replaced by the tapping of nails on keyboards and all you’ve got to look forward to is the low buzz of your smartphone reporting another Aussie batting collapse. Howzat! is an interactive desktop wicket that wirelessly connects to cricket news sites and constantly checks for the latest score. When a wicket falls at Trent Bridge, Howzat’s stumps will tumble. We wanted to create an object that gave a more tangible real-time update on the score than push notifications and live feeds, and focused on the data that really matters –…

All the elements that make VR work are available in your mobile device, hence why Google started the cardboard project a few years ago. All a VR headset is really, is a screen and an accelerometer to know which way the screen is pointing. The problem has always been, how to make it stereoscopic and that’s where head mounts with lenses come in. What does VR mean for the web designer though? Mozilla, the folks behind Firefox, have been working hard with Ricardo Cabello, the creator of three.js, to bring WebVR to fruition through their A-Frame library. This enables web designers to add a few simple tags to a page and it outputs a WebGL scene that can be rendered on two sides for stereoscopic display and sense the accelerometer…

Pro Widely understood JQuery can be considered the bread and butter of web frameworks: most, if not all, web developers have used it at least once during their career. Deploying the full version of jQuery provides minimal friction – everything will be just as it has always been. Readers might scoff at the thought that developers could forget that their product is based on the light version – given that a famous arms company once lost days tracing down a problem caused by an oscilloscope not being connected to the DUT, so reducing potential for wetware issues always is worthy. Decreased coupling Ted Faison introduced coupling mathematics to common developers. Reducing the amount of external libraries always is a good thing: if your developers find themselves adding an extra framework,…

1. Return a Promise Let’s enlist the help of Matz. Having stumbled across ancient literature, our old friend found a way to multiply himself and levitate around mountainous areas. Levitation can take a bit of time – our Matz method models this by returning a Promise, which gets resolved once the levitation has been completed. 2. Resolve Promises Given that we always need resources, it’s time to send a few Matz doubles on a long trip. The landing can be awaited comfortably via the jQuery when method – it executes its success method only when all Promises passed in have successfully been resolved and have completed their work. 3. Find out failures Not every Promise gets fulfilled. JavaScript Promise objects can fail for a variety of reasons – the modifications…

The appearance of subpixel rendering techniques and the advent of ever-more complex layouting schemes has led browser vendors to adopt floating-point calculations in their layout engines for quite some time. So far, jQuery turned out to be the bottleneck – its width() and height() functions insisted on rounding computed values before returning them. JQuery 3.0 solves this problem. Analysing this new behaviour is best accomplished by creating the following div structure. Its container is 200px wide, while the inner elements take one third of the width: Arithmetics tell us that each box should have a width of 66.666 periodic pixels: due to rounding errors inherent in floating number presentation, a bit of rounding is to be expected. JQuery 3.0 lets us verify this behaviour by dumping the result of the…

“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…