Innholdsfortegnelse for No. 258 i Web Designer

“ Keeping up to date with what’s available to you as a developer is vital. It means that you can improve your workflow, create features and more” 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” Welcome to the new web The web never stands stills and the very reason for this is the ever-evolving specifications, technologies and tools. At the core of all web design are the stalwarts HTML and CSS. When these get updates, things really start to change. In this issue’s lead feature (page 40) we take a closer look at how CSS4 is evolving and what changes have been made to the HTML5 specification. Find out what new selectors…

We are Maav   bit.ly/2jQsavL Complete with a video header (among other options), this is minimalist, clean and classy. Great for showing off projects Muscat   asianitbd.com/wp/muscat A single-page theme focused on business. Neatly constructed sections are perfect for adding custom content Look webdesign-finder.com/look Full width sections, big bold images, contemporary fonts and fine layout and typography make this a fashionable theme Fluke bit.ly/2jrfeiN Simple but classic colour palette and serif fonts combine to provide the framework for a collection of classy imagery Piñata bit.ly/2j0oebT A collection of customisable homepages with simple but effective layouts, including Shop, Blog and Fullscreen…

“NativeScript provides direct access to each and every native platform API on both iOS and Android” When it comes to building an app, it is often a case of ‘which platform do we prioritise?’ The problem with taking on more than one platform at once – Android and iOS, for example – is that you might as well be starting two projects at once. Budgets are rarely infinite, so a choice of ‘either/or’ often needs to be made, usually on the basis of what skills you and your team have. The problem here is that as soon as you make this choice, the impact your application can have is dramatically reduced: Apple estimates that there are more than one billion iOS devices in use globally, while Android blew past that…

Year 2005 No. of employees 3 Andy, Rich and Jeremy take the plunge and get Clearleft off the ground in 2005. Year 2007 No. of employees 6 To help popularise usability testing, Clearleft create Silverback,. Year 2012 No. of employees 11 Clearleft designs Channel 4 News’ responsive website and iOS apps. Year 2013 No. of employees 15 Clearleft renovates a derelict building in Brighton’s famous Lanes. Year 2014 No. of employees 17 Clearleft’s graduate internship scheme concludes with the launch of Chüne. Year 2015 No. of employees 23 Staff past and present celebrate the company’s 10th birthday.…

I›n the past, new standards specs have been huge documents taking so long to compile that by they time they were released, things were already feeling dated due to the pace at which our industry moves. Now that they are incremental releases, however, it means that new features can be adopted by browser vendors more quickly, so that we don’t have to wait so long to use the latest feature. With all major browsers now being ‘evergreen’ (yes, even Microsoft), the days of having to support age-old browsers should be a thing of the past. An evergreen browser constantly auto-updates itself to fix security flaws and maintain the latest standards. This means that a user would have to go to some lengths to have an out-of-date browser. Keeping up to…

“THE NEW CSS MODULES ENHANCE THE LANGUAGE WITH CAPABILITIES THAT DEVELOPERS HAVE BEEN PREVIOUSLY LACKING. VARIABLES IN PARTICULAR ARE SO POWERFUL AND FLEXIBLE THAT YOU MIGHT ALREADY BE USING THEM WITH ONE OF THE NUMBER OF FRAMEWORKS – SUCH AS SASS AND LESS – THAT FEATURE THEM AS A MAIN SELLING POINT.”MIKE BABB WEB DEVELOPER MIKEBABB.COM 1. Get yourself some images We are going to be need small and large versions of an image, in both PNG and WebP formats; PNG should be straightforward, but if your graphics editor doesn’t export WebP, you can use a grunt task to convert JPEG to WebP: grunt-cwebp from www.npmjs.com/package/grunt-cwebp (also available as a gulp package). 2. Mobile browsers <picture> gives us the option to use an entirely different image based on screen size.…

As our webpages and web apps become more complex, our style sheets also become larger and harder to maintain. One of the many tools we can use to help us maintain and manage our CSS is a preprocessor called Sass (Syntactically Awesome Style Sheets). Sass files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. That’s why you need some sort of tool to help you translate .scss files into .css, and we’ll take a look at one of those throughout the tutorial. There are a few CSS preprocessors available; these include Less, PostCSS and Stylus. However, in this tutorial we will be focusing on learning the basics of Sass and we’ll see how Sass can help you…

“The future of WebGL is looking look good, with the growing popularity of libraries like three.js and Babylon.js, along with the game engine PlayCanvas, which are regularly releasing new versions with ever more features. The next iteration of WebGL (WebGL 2.0) is imminent and will add many new powerful core features” As you really should know by now, with universal support since way back in early 2014 (practically the age of dinosaurs in web development terms), WebGL is the incredibly powerful plug-in-free, native JavaScript API that gives the developer access to fast, in-browser 2D and 3D rendering, and general-purpose programming on the GPU (GPGPU). Use cases abound: games, experiences, apps, webpage header, data visualisation, product visualisation, music videos and much more. The power of WebGL comes from shaders, small(-ish) programs…

Huge assets Textures and 3D models, in particular, can be huge, leaving the user staring a blank screen or loading icon for some time. Where possible, use a library that supports glTF, and streaming or progressive loading. glTF will minimise the file size, whereas streaming will allow assets to be partially rendered as they are received. Alternatively, render models first and textures later, load models in sections, or use simplified models as placeholders while waiting for the more detailed model to load. Fallback Some WebGL features are browser specific, so if certain capabilities or extended features are critical, it is important to check for them (with getParameter and getSupportedExtensions) and provide a fallback if they’re not working. If WebGL is likely to fail, three.js is a good option as it…

Vaadin’s architecture looks complex at first glance: the best way to think about it is that it involves a two-tier system. The user’s browser runs a traditional AJAX client, which is connected to a backend running on the developer’s server – the similarities to VNC and the X Window System protocol found in various Unix workstations are intended. Developers who own a significant amount of Java code or who have a strong dislike for JavaScript can profit greatly from this situation. The server is a Java applet which gets run inside an application server such as Apache Tomcat – when done right, engine code feels no difference to a traditional execution environment. Vaadin’s power lies in the high-performance GUI stack. As shown in the architecture overview on this page, developers…

“When you are ready to purchase hosting, check that you have enough resources” 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 and a choice of Windows or Linux.…

“ Incremental releases mean that new features can be adopted by browser vendors more quickly, so that we don’t have to wait so long to use them ” Paul Thomas Paul is the senior developer at creative Bristol agency Green Chameleon. This issue he focuses on the latest developments in CSS4 and HTML 5.1. He reveals how to use the most useful selectors, along with CSS variables, advanced animation and the HTML 5.1 you need to use. Page 40 Carl Bateman Carl is the founder of WebGL Workshop and Khronos London Chapter lead. He is an experienced developer and this issue he talks about the current state of WebGL, best practices, what’s up with 2.0 and shows cutting-edge examples. Page 72 Matt Crouch Matt is a front-end developer based in…

01. ACSL acsl.co.jp Get interactive and guide a drone through a digital landscape 02. UpToTab uptotab.com A simple illustrated platform game with a dislike for Flash 03. Wheelchair Dance wheelchair-dance.com Engaging interaction between the user and the on-screen video 04. 21st Century Gold Rush huff.to/2ifeZUb Animated golden flecks come together to create faces before being blown away Graphics Vector Animals bit.ly/2jv3UlM Design student Daniel Swainson brings together a collection of vector animals with impact. Choose from Wolf, Lion and Fox Colour picker Download Lassie Come bit.ly/2iuP4IN Typesetter MTT Milano bit.ly/2jUP1GF Inspired by the Milanese typographic heritage and the Futurist movement that developed it, this font is fashionable and readable. Word Press ForIT forit.iondigi.com Bright appealing palette and crisp graphics come together offering a contemporary theme for all screens…

“It’s vital that each touch point has the customer experience at the forefront for any decision that is made” E Commerce as a fast-paced, ever-changing industry is continuing to grow and develop across all sectors. With advancements in technology carving out the trends, eCommerce brands’ future processes are being mapped out for them – and early adoption should be a priority. 2017 is no exception in this sense. We have seen progress of eCommerce capabilities via social media platforms, initial testing of delivery by drone and the use of chatbots – with rumours of AI in the works. However, this isn’t something that the majority of brands can keep up with and in reality, the key takeaway from these developments is customer expectation. We are privy to huge amounts of…

1. Initiate document The first step is to initiate the HTML document. This consists of the HTML document container, which includes sections for the head and body. The head section contains descriptive information and links to external resources – in this case the CSS stylesheet. The body section will be populated with the visible content in the next step. 2. Navigation content The menu is made from a navigation container that stores a series of links. The first link in this container will be the hamburger icon; a link that will reference the navigation container. The hamburger icon has three span elements, which will be styled to show as the hamburger bars in a later step. 3. Start the stylesheet The HTML markup is now complete, so create a new…

Negation :not has been around since CSS3, but now it can accept multiple selectors as an argument, keeping our code more readable and concise. Matches This is the opposite to the :not selector and can also take multiple selectors as an argument. It’s not that different to the current selector syntax, but improves readability and maintainability. Relational There’s a chance this might not make it in (currently in Editor’s Draft) due to its complexity to implement. It’s the long-awaited ‘parent selector’ that will allow us to style an element based on its content, rather than just the other way around. Case Sensitivity You may find that due to developer inconsistencies, you have elements you want to style that have attributes with unknown or mixed case. You can now match attributes…

Sometimes it can be difficult to make a dynamic page on the frontend while maintaining an easy-to-use edit screen, particularly if you’re splitting your content into HTML blocks for use with Bootstrap or other gridding tools. Putting HTML directly into your edit screen can get unwieldy, and if non-developer clients need to edit it they’ll be mired in confusing code. Using shortcodes to take the place of your HTML can tidy it up a little, but there’s always the danger one tag will go missing, or the client will want to reorder the blocks. There are many plugins on the market that help customise WordPress that will blend dynamic front-end display with a sleek and accessible admin panel. One good solution comes bundled with ACF (Advanced Custom Fields) Pro –…

Adding WebGL to a webpage is as simple as adding a <canvas> element (which is where WebGL renders to). The three.js JavaScript library will even do it for you if you wish. Since <canvas> is a standard HTML element, WebGL elements can be freely mixed with other HTML elements and have a lot of flexibility with styling. Teapot Test (bit.ly/2jEnqt5) is a simple yet excellent example displaying a teapot against background text. Safari in Safari (bit.ly/2jEhJey) provides an introduction to 3D content on the web with the help of the Safari compass. It demonstrates using CSS styling to resize on mouse-over. Making life even easier, SketchFab facilitates the embedding of 3D models into Facebook, while the glTF WordPress Plugin (bit.ly/2ikpytW) allows the embedding of 3D models into WordPress. Check out…

Making the most of the following steps in this tutorial requires an understanding of some basic tenets of computer science: by default, an image is but a selection of points containing colour information. When this kind of representation is stored in a file, this is called a bitmap. Bitmaps can be processed using a method called compression: a compression process c(bmp) usually, but not in all cases, returns a smaller version of the file passed in. The difference between the processes shows up when the process is reversed during a step called decompression: d(c(bmp)) always returns image data. We will call this bmp’ in the steps for this tutorial. Lossless compression formats satisfy the condition bmp==bmp’ – when the image is decompressed, its contents are exactly the same as they…

Check out the latest digital additions to Web Designer’s burgeoning collection. Amazing Websites and How to Build Them Vol 04 brings together another collection of great-looking sites and picks out quick techniques to learn. The Web Apps Handbook Volume 2 and The Developer’s Guide to JS select the best tools and methods to build apps with web technologies and show how to get started with ES6 and NPM. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick the best animation and 3D-related techniques to add interest to any project. Head to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.…

Digital Thinkers   bit.ly/2iDE3qU Inspirational talks about UX/UI design, VR, Semiotics and wearables. Plus VR and data visualisation workshops. Reasons.London   reasons.to Design, Code, Create & Come Together… Reasons gathers the best speakers from design and code to inspire attendees. FITC Amsterdam X fitc.ca/event/am17 Designers, developers, motion graphics artists, digital artists and makers should attend. Mobile World Congress mobileworldcongress.com The world’s largest gathering for the mobile industry with inspirational speakers. UXCamp bit.ly/2iDDUE2 UX Camp will ensure that you get to learn about the hottest UX topics and learn something to make you even better.…

WHAT’S IN <picture> Use entirely different image sources for a range of situations using the <source> element. Art direction via media queries. Different image formats depending on support (eg WebP for Chrome). Can be used in conjunction with srcset. <details> / <summary> These two elements work in conjunction. The text within <summary> is always displayed and when clicked, the remaining text within the <details> block is shown. <menuitem> Used in conjunction with <menu type=”context”> it can add functionality to the browser’s context menu. It can be one of theses types: command, checkbox, radio. requestAnimationFrame() API This has been the go-to method of creating browser-optimised animations for quite some time, but it now makes its way into the spec, cementing its place as the best method to use. history.scrollRestoration Traversing the…

Most transition effects on the web involve sliding content onto the screen, fading content and scaling content, but at the heart of all of these transitions is the basic underlying page division. Every designer can see that the rectangular div or image is present in the effect. The Aquarelle library changes that as there is a true rippling distortion to the content as well as a very organic spread with the mask as the content is revealed. Aquarelle itself refers to a style of painting that uses very thin, transparent layers of watercolour and is also the Italian word for watercolour. This makes it the perfect effect to use if your client’s site has the subject of watercolour painting, or you can turn down the rippling distortion so that you…

“JAVASCRIPT IS ONE OF THE MOST FLEXIBLE LANGUAGES OUT THERE. WHILE THAT MAKES IT GREAT FOR A BEGINNER, OVER TIME LARGER PROJECTS WILL NEED DIFFERENT STRUCTURES TO STAY MANAGEABLE. KEEPING CODE AS SIMPLE AND MODULAR AS POSSIBLE HELPS TO USE THAT FLEXIBILITY AS AN ADVANTAGE.”Matt Crouch Developer at Cinolla mattcrouch.net 5 REASONS TO LOOK AFTER YOUR CODE HELP FUTURE MAINTAINERS OUT BY KEEPING YOUR CODE IN CHECK 1. Smoother refactoring The ecosystem on the web is constantly changing. When a framework or third-party plug-in needs to be updated, a monolithic codebase can cause these changes to become cumbersome to implement and risky to deploy. With modularisation, issues can be isolated and fixed in place rather than bringing down an entire site. 2. More portability When a complex feature gets developed,…

VANILLAWEBGL VS LIBRARY PROS • With no bulky library file to download, vanilla WebGL will be smaller with little, if any, superfluous code while being faster. • Vanilla WebGL is not tied to a library’s way of doing things, making it easier to tweak code to improve performance. CONS • The developer must have a good understanding of geometry, vectors and matrices as well as the intricacies of GLSL. • Everything is set up ‘by hand’ so can be time-consuming and fiddly with a steep learning curve and hard to maintain. PROS • Development is easier and faster thanks to complexity being hidden and common features (vectors, matrices, lights, cameras, etc) being available ‘out-of-the-box’. CONS • The developer is locked in to the way the library developer does things; it…

Performance desktop vs mobile Vendors implement WebGL differently on mobile and desktop. So, apparently correct code may render differently over platforms or, worse, cause a device to run hot and drain its battery. For instance, Windows devices use ANGLE to translate WebGL shaders to HLSL. Consequently, valid code may appear buggy due to the differences between HLSL and GLSL. For instance, HLSL only supports line widths of 1. Therefore, it’s important to write conformant code and test on multiple physical platforms to ensure that code is rendering correctly. Beware SIMD in DIY shaders When writing shaders, bear in mind that GLSL uses the Single Instruction, Multiple Data (SIMD) model: a single instruction is performed on multiple data simultaneously. Hence, a branching ‘if’ statement will cause the shader to be rerun…

“Europe’s #1 developer boot camp, running highly selective classes of our offline course every six weeks, and a remote course every 12 weeks” 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 including ThoughtWorks and Deloitte Digital. What we offer • On-site:…