Innholdsfortegnelse for No. 267 i Web Designer

“While original responsive design would adapt to different device resolutions, this time we have to adapt to different user space” 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 It’s time to join the reality revolution It’s rare that web design truly hits a revolutionary period. A period when things really are going to change. But, that is what is happening right now. It’s all still in the browser, but VR and AR are adding new realities, new dimensions and new experiences for users. WebVR is a little ahead of WebAR, but both have matured enough to be considered realistic options when building new experiences. Our lead feature (page 42) this issue gives…

01. Kikk Festival www.kikk.be/2017 The homepage graphics are gorgeous and smart, hiding subtle little animations. 02. Thomas St. John www.thomasstjohn.com/Home A subtle undulating background image slowly reveals its true identity on scroll. 03. USA Today redesign usatoday.geex-arts.com Who doesn’t love a redesign? GEEX’s prototype adds animation and more. 04. Fonterra bit.ly/2yutwna Take a trip round the animated globe. Pick a location and find out its story. Graphics Monstrum bit.ly/2fAwV08 Cute, quirky and colourful little monsters created with Adobe Illustrator by the hand of Silvia Galimberti Colour picker Rio bit.ly/2wmaxKS Typesetter Biker New bit.ly/2xITdmx Retro, inline, flourishes, shadows and several variations for a rough worn look to oppose the clean and simple option WordPress Surfing Showcase bit.ly/2yIhGGV This is not a fullscreen theme – this is an all-screen theme with a…

“In general, it’s a good idea to use large text fields and give specific instructions on what information is required to be filled in” In the UK, there are 2.7 million colour-blind people, 70 per cent of the population wear glasses and the number of people in Britain aged 85 or older is expected to more than double in the next 25 years. Further to this, 1 in 30 suffer with sight loss and 10 per cent of the UK population have dyslexia, 4 per cent of which are deemed severe cases. These statistics prove that visually impaired user groups actually make up a huge part of the population and designers need to begin to champion accessible and inclusive digital design in order to avoid alienating or providing a poor…

It’s fair to say The A-Z of London was a unique online project, as the web element was just a small facet within a broader campaign. Even then, a great deal of the work was realised by the 26 animated vignettes that would represent every featured word. At the heart of that design and illustration work was senior creative Milo Targett, who spearheaded the conceptual effort from the earliest point with an open mind. “It really helps if I’m as uncritical of what I’m doing as possible at the initial concept stage and therefore anything goes,” Targett explains. “By the end of the day I take a look at what I have and start trimming most of it away, hopefully ending up with a few good ideas that I can…

http://cazcabel.com Tasked with creating a grungy and rustic site that allowed the team at Cazcabel to tell the story of the legend behind the drink, Don Cazcabel, we began working away to create a site that would help them deliver that message. We started off with sketches, then wireframes, before designing the pages. It was important to get the client on board early on so no time was wasted. We like doing sites like this in which you can visually do interesting things rather than something more corporate. We came up with a series of cool smoke page transitions and a uniquely engaging homepage that hooks the user from the start and engages them into the story. The whole site loads dynamically without excessive wait-times, giving it a real cinematic…

“With current graphics processing capabilities, more and more experiences and games, such as No Man’s Sky, are moving into procedural generation” As with any emerging technology, there are multiple platforms and devices supported at any given time. While competition is good for the market, the fragmentation is a bit problematic for people using it. From currently available ones, we have: HTC Vive – room scale, spacious, two controllers; Oculus Rift – generally set up in smaller spaces, great Touch controllers; Google Cardboard – cheapest and simplest way to experience VR using a phone; Google Daydream – similar to Cardboard in some ways, but with software and hardware updates including one Bluetooth controller; Samsung Gear VR – also phone based, no controller but a button on the side for interaction. The…

HARDWARE Mobile devices come in all shapes and sizes. Designers must consider that many users will be using smaller screens. When designing for smaller screens, ensure your typefaces are clear, easy to read and employ a high-contrast colour scheme. COGNITIVE LOAD One of the main arguments for AR interfaces is that they will lessen the cognitive load for users. UX designers must live up to this by using AR sparingly to add value, rather than overwhelm with unnecessary information or unclear on-screen prompts. USER COMFORT UX designers are used to designing for screens, meaning that a main design consideration will be wrist/eyestrain, and designing to minimise this. With AR, designers will also need to consider minimising other physical discomforts such as cramp, fatigue and muscular strains. ENVIRONMENT Considering the mobile…

The power of ARKit on iPhone devices is here and already the World Brush App is setting a high standard by having the ability to paint on anything and save those paintings in situ. With different brushes, widths and colours, it takes doodles and places them in the world. 1. GETTING STARTED When the app starts for the first time, it gives specific instructions on its usage. All paintings are anonymous so you have complete artistic freedom to do whatever you like. Realising that this could be a problem for some individuals, there is an ability to report abusive images. 2. CALIBRATING THE DEVICE In order to see the world around you and find objects, the phone has to be held still for a short amount of time; this screen…

Parallax graphics The images and text in the centre of the screen scroll up at different speeds in a very subtle parallax style. Sliding call to action The Buy Now bar slides in as the user scrolls the page to this section. The panel slides in from the left, but the actual content of the panel slides in from the bottom of the panel. Animated steam As the coffee maker becomes visible, some very subtle steam is animated puffing out of the coffee pot, giving a very realistic appearance. New content expands As new content starts to become visible on the screen, the width of this element expands outward to give it more prominence within the design. Main menu As the user starts to explore the site, the main menu…

Often, it’s the simplest effects that look the most striking, and neon text is one such project that’s a lot easier to make look realistic than you think. While this entire tutorial only uses one stock image, your brain tricks itself into seeing this as a real, functioning neon sign: and that’s the power of Photoshop’s layer styles. But more than that, the fact that this entire project is build from scratch – from the font to the colours of the glow, to the eventual animation – simply means that there’s a lot of scope for creativity. You can choose exactly what you want every part of this effect to look like. This tutorial is applicable if you’re just wanting to make the font, or you’re looking to animate the…

WEB ANIMATIONS API Animation on the web has always been possible through the use of Flash, jQuery, CSS or SMIL. The Web Animations API aims to achieve a mixture of all of these by using the power and simplicity of CSS animations and the flexibility of Javascript to interact with elements on the page, including SVG, leaving the browser to deal with performance. Whether you’re animating in CSS or Javascript, they will both harness the power of the same underlying engine. COMPLEX ANIMATION For simple animations the Web Animations API in Javascript is sufficient and although it is capable of complex animations there are a number of libraries you can use to speed up your workflow and again easier cross browser support. The standard is GSAP; having been around for…

We’ve focused on cross-browser compatibility, but of course in reality what you’re really looking for is cross-platform compatibility – that is, your site should work across desktop, tablet and mobile, regardless of the user’s choice of browser. Cross-browser compatibility will get you a good part of the way there, since if your page loads correctly on Safari and Chrome mobile, most of your users will get something. But without some up-front planning, it might not look great on mobile. You also need to think about the other attributes of mobile devices that will become apparent when testing – screen size is the most obvious example. To be truly effective in mobile browsers, you may want to think about developing a responsive design from the start. Frameworks such as Bootstrap can…

It’s very helpful to be able to tell what features are or aren’t available in a user’s browser so you can present a different experience if key capabilities are missing. You can implement this type of ‘feature detection’ yourself by testing for particular properties of built-in objects. However, this can rapidly become confusing, and there’s an easier way. Modernizr, available at https://modernizr.com, is a library that simplifies feature detection to a standard set of conditions. Of course, if you know or suspect a particular feature may not be available, you have a couple of options. You could try using one of the many polyfills we’ve mentioned, or use a polyfill combinator such as https:// polyfill.io to automatically detect and apply the polyfills that are needed. However, you could easily take…

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

ZOX bit.ly/2fObit8 This ain’t no one-trick pony. It hosts a collection of featured layouts that give users an abundance of news in one hit. Boal boal.nanoagency.co Plenty of white space gives this theme a more serene and classy look and feel. Neat sections help the hierarchy. News bit.ly/2wv2hIw Big hero image takes centre stage, ensuring that the reader knows what to focus on. Stacked stories and sections add gloss. Journal bit.ly/2xdoLxg This theme follows the more traditional blog style. A lead story is the focus, with sections following the same format. Viseo bit.ly/2kl1CrJ Headed up by the classic full-width slider, the theme continues with plenty of white space and stories in a grid.…

When a project such as The A-Z of London draws to a close, there’s obviously a process of delivery involved. This completion phase can vary according to the type of work undertaken, but very rarely is it the final word when it comes to fulfilling a service. In the case of Animade’s involvement in this particular project, there wasn’t much ‘aftercare’ necessarily required but more a period of mutual reflection and evaluation. “Once we’ve received sign-off from the client and everyone is happy, we then render out the approved project files and deliver them to the client,” begins senior account manager Heather Graham. “But although the project has come to an end, we like to offer a retro meeting to our clients, accompanied by coffee and croissants, where we chat…

2010 After thinking about it for some years, and researching how a studio should be run, Ian starts Supremo. No of employees: 0 2012 Freelancing at Supremo, Ian works for high profile clients such as the BBC, Sony and JWT. No of employees: 0 2014 Time to take the plunge. Ian stops working in-house and begins to develop Supremo into a studio. No of employees: 0 2015 Expansion is needed at Supremo. School friend and developer Mike Strand joins Supremo as partner. No of employees: 0 2015 Supremo hires their first member of staff, and moves into first office in Manchester city centre. No of employees: 1 2016 Launch of Type Terms, goes viral with 120k visitors in six weeks, Jeffrey Zeldman tweets about it. No of employees: 2 2017…

“Virtual reality has had a colourful history – from the beginnings in science fiction, through the early prototypes, up till now, where finally anyone can buy it and use it. On that journey, the web is an obvious destination, the same way it democratised every new medium before it.” MARPI Director of web and experiential design at Obscura Digital WebVR is an extremely interesting technology, a browser API that’s currently blooming, simultaneously with the arrival of all the new VR headsets in the last year or so. Originally started at Mozilla, it is now getting a big push from Google, and more recently by members of Microsoft and Apple teams. The technology itself has a great premise of democratising the fragmented and walled-off world of VR app stores – it…

AR.JS github.com/jeromeetienne/AR.js Who wants efficient augmented reality for the web? We all do and that is what AR.js brings to the table. Find out more about how the platform works via GitHub. Plus, check out Jerome’s Twitter account @jerome_etienne for his latest thoughts and updates. ARGON www.argonjs.io Argon is a JavaScript framework that allows users to add AR content to web apps. Originally created to work with the Argon browser, the platform is now aimed at all browsers. In development is integration with Mozilla’s A-Frame framework. THREE.AR.JS github.com/google-ar/three.ar.js This is a helper three.js library for building augmented reality that runs in WebARonARKit and WebARonARCore. What are these? They are apps for Android and iOS that enable developers to build augmented reality experiences using web technologies. AWE awe.media Awe is a…

“THE CSSVR PROTOTYPE TRIES TO ABSTRACT AWAY THE HARDWARE COMMUNICATION AND RENDERING COMPLEXITIES, ALLOWING DEVELOPERS TO BUILD VR EXPERIENCES USING BASIC HTML AND CSS. TO SIMULATE THIS, THE PROTOTYPE EXPOSES A NEW MEDIA TYPE TO ALLOW STYLE RULES TO BE TARGETED AT DEVICES THAT SUPPORT VR.” BIO:KEITH CLARK - FRONT-END DEVELOPER I enjoy pushing the boundaries and exploring what can be achieved in a web browser. I’ve pioneered techniques like CSS parallax, created 1k JavaScript games and, back in the day, I brought CSS3 selectors to IE. github.com/keithclark/cssvr  | keithclark.co.uk/articles/css-vr/ Q. What was your thinking behind bringing CSS into the VR sphere? A. CSS already provides most of what we need to create interactive 3D experiences — transforms can position content in 3D space, pseudo-classes allow elements to be styled…

If you are a local business that wants to get noticed in search, you have to understand what local SEO is and why it’s so beneficial. Without an understanding of localised SEO, your business will not be able to take advantage of the local online demand for your products or services. As mobile usage increases so does the importance of local SEO – mobile users tend to search for nearby business on the go and require an instant solution. We can benefit from all that local buying intent, by understanding where the ideal customers are looking and how we can get in front of them. During this tutorial I will help you to have a better understanding of how you can ultimately improve your local rankings, boost your visibility and…

1 IT’S VECTOR SVG uses a coordinate plotting system to plot points and connect them to draw lines, shapes or paths. Vector graphics are drawn using mathematics meaning they’re sharp and crisp, not pixelating like other image formats making them great for logos, icons and illustrations. SVG has a number of other features, too – with filters, patterns, gradients and masking and the ‘viewBox’ property for framing the scene – and they’re all animatable. SVG is extremely versatile and supported by all browser’s going all the way back to IE9. 2 IT’S RESOLUTION INDEPENDENT AND RESPONSIVE Due to the vector nature of SVG the image is resolution independent. The image looks crisp on any display from the beautiful ~285 ppi pixel density displays found on new smart phones to the…

Filters in SVG are usually created inside the ‘<defs>’ element and given an ID for referencing later, this can be as an attribute on an SVG element or defined in CSS. Filters in SVG are powerful and can be used to produce some truly stunning effects! In order to use a filter in SVG we use the ‘<filter>’ element. Inside of this element we have a number of tools available to us; Blend, Colour Matrix, Component Transfer, Composite, Convolve Matrix, Diffuse Lighting, Displacement Map, Flood, Gaussian Blur, Image, Merge, Morphology, Offset, Specular Lighting, Tile and Turbulence. These are called filter primitives. An SVG filter is made up using a number of these filter primitives. A filter primitive has one or two inputs and one output. For the input we have…

SVG allows us to create icons in a file format that is resolution independent, which is awesome, but due to the limitations of the HTTP protocol we don’t want to make another file request for every icon in our website, this will soon be changing with the HTTP/2 protocol. In order to avoid having to make a separate request for each icon we can go back to our old friend the sprite, except this time in SVG. To create a sprite in SVG we use the ‘<symbol>’ tag and apply an ID for referencing later and the ‘viewBox’ attribute for defining the canvas size. Inside of the symbol icon we create our shapes, text and any other elements that make up our icon. Inside of the symbol tag we can…

CSS Lodge https://css-tricks.com/lodge/svg/ The CSS lodge has a great in depth video course called Everything You Need To Know About SVG. MDN https://mzl.la/2d4y4Jm MDN has an SVG element reference which covers the syntax for everything in SVG. CodePen Posts http://bit.ly/2fMRsez CodePen is a great resource for learning as well as experimenting. The CodePen community has produced a number of great blog posts about SVG. GreenSock https://greensock.com/learning The GreenSock website has an entire section dedicated to learning, featuring a number of tutorials to help get you started. YouTube and Vimeo Many of the wonderful conferences from all around the world post videos of the talks a few months after the event.…

With not only a large number of browsers to test with, but also different devices (desktop, tablet, mobile, etc), it would simply be impossible to perform thorough testing manually on a complex site. Fortunately there are a great set of tools which can automate the repetitive work for you. However, before you head off to start automating, there’s a little more to consider. There’s an overhead in setting up automation tests, which may not be worthwhile for smaller sites. It’s worth familiarising yourself with the tooling, but give some thought on a case-by-case basis to whether it makes sense to invest your time in this way.…

You’d be forgiven for thinking that web standards are reasonably close to set in stone – after all, we’re now on HTML 5.2, right? So we just need to build with this in mind? However, it’s actually browsers rather than standards that really dictate what works on the web. New browser versions are released all the time, and with four major browser makers continuously updating and upgrading their offerings, it’s not surprising that it can be very difficult to keep pace with the latest standards and features. Fortunately, there are a number of resources out there which can help you keep ahead of the curve. At the forefront of these is https://caniuse.com, which documents browser support for web features. Furthermore, http://html5please.com will not only support you in keeping track of…

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

AngularConnect www.angularconnect.com Two-day, multi-track conference featuring the world’s leading Angular experts, including the core Angular team at Google. FFCONF 2017.ffconf.org Eight carefully curated sessions for an audience that cares about the future of the web. Speakers to be revealed. JS Kongress 2017.js-kongress.de Located in Germany, the two-day conference topic is the future of JavaScript. Discover and discuss the latest issues. HalfStack halfstackconf.com This is a one-day, single-track conference that is taking place in a pub in Shoreditch. Get along and make new friends. dotCSS 2017 www.dotcss.io Dubbed ‘the largest CSS conference in Europe’, this two-day event has top-class speakers and is in Paris.…

1. Initiate document The first step is to define the page document. This consists of an HTML container, which itself contains a header and body container. While the header is used primarily to include the external CSS and JavaScript resources, the body section will be used to store the visible content elements created in step 2. 2. Visible content The visible content consists of two links that trigger the opening and closing of the effect, along with the content container that has the effect applied to it. This container has an ID attribute assigned as ‘effect’, allowing it to be referenced via HTML links. A class is also set to ‘tiled’, as well as two child div containers, the first of which is where you put your text content. 3.…

1. THE WORLD As with traditional web design, there are rules that should be followed in order for the experience to make sense. Even if you’re breaking some of the rules on purpose, consistency and logical navigation are the key. That gets so much more complicated in VR – there’s still a lot experimental research going into what a ‘website’ looks like, how a ‘link’ works and how other visitors might look to you. 2. INTERACTION Continuing on the UX theme, it’s not just mouse click any more. There’s a variety of controllers, and ways to interact. For the best results it’s good to use simple physics – pressing, pushing, lifting, things that feel natural. And similarly to other projects, it’s always very beneficial to test with a wide variety…

THREE.JS threejs.org The leading WebGL engine on the web, it’s a perfect solution for building WebVR experiences with basic JavaScript knowledge. One of the most powerful parts of it is the wide selection of demos and examples – every major part of the framework has a clearly written sample, providing a perfect starting point for any project. It also has a growing community with questions to any potential problems already answered on Stack Overflow. A-FRAME aframe.io A-Frame is an open-source web framework for building virtual reality. Built on top of a three.js engine, A-Frame lets you create 3D content in a similar way to building HTML website. With full support from Mozilla team and WebVR community, A-Frame is the easiest point of entry to creating VR on the web. Similar…

A combination of AR and VR, mixed reality (MR) uses next-generation technology to overlay virtual objects in a real-time setting, allowing users to interact with them. Mixed reality was really thrust into the mainstream following the launch of Microsoft HoloLens and then Apple’s developer platform ARKit and Google’s ARCore. As a result, there is an increasing demand from consumers for this type of technology and experts are now predicting that the sector could be worth almost £120 billion in a few years’ time. Developers can build MR experiences with a few lines of code, which can be accessed across mobile, tablet, desktop and head-mounted displays to reduce constraints and extend audience reach. Industry-leading businesses are already exploring MR after realising the benefits to connect, interact and sell to customers in…

WebVR is finding more and more uses as designers and developers turn to this technology to create everything from web games to interactive experiences for National Geographic. Mozilla’s A-Frame library is the go-to framework as they’ve made it so easy to set up your WebVR scene. It simply becomes a case of adding some custom HTML tags to the page and you are away. Powering A-Frame is the Three.js library and it’s completely possible to create a scene using that, but A-Frame’s power and ease of use is that it has built-in support for mobile accelerometer/ gyroscope control of the VR scene. Placing the phone inside a cardboard headset or slightly more polished plastic VR lens headset easily turns the mobile device into a fully-featured VR device. Creating interactions is…

Left navigation Clicking here triggers functionality to scroll left through the content tiles. This will be activated through an event listener. Another collection This is a link to another collection of content banner tiles. This could be stored on the same page or a different page. Content tile This is HTML content assigned to a section container. The use of a container allows for easy control for sizing and positioning. Picture tile Another section container used to present a picture. This could either be from an img element or through a CSS background style. Right navigation Clicking here triggers functionality to scroll right through the content tiles. This will be activated through an event listener. Less is more “It can be tempting to fit as much content as possible into…

HOW TO USE IT There are a number of ways to use SVG on the web; browser support is very good with support only lacking in IE8 and below, and really early versions of the Android browser. It’s safe to use it, so we should be using it! By using SVG you’re sending the instructions of how to draw something to the browser instead of the drawn thing itself. THE IMAGE TAG You can embed an SVG image into the page the same way you do any other image using the HTML image tag; Embedding the image into the page this way will assume the size of original SVG file unless you specify a width and height attribute in HTML or via CSS. Using the image tag is good for…

Responsive Huggy Laser Panda Factory http://bit.ly/2yDDC6i This animation created by Sarah Drasner is an animated interactive SVG built like lego blocks the design re-organises itself on a larger viewport. Become a Traveler Today http://bit.ly/2xFquzx This animated SVG was created by Jose Aguinaga, the whole of the outside is constantly spinning with the planes and ballon moving at a faster rate. Motion for the web http://bit.ly/2xANm2k Created by LegoMushroom, this animation is the demo used to show off mo.js the animation framework. Tram House http://tram-house.com/ The Tram House website makes great use of SVG and GSAP to provide an absolutely delightfully interactive website.…

SARAH DRASNER https://twitter.com/sarah_edo Sarah has given a number of workshops and talks about SVG but more specifically SVG animation. CHRIS GANNON https://twitter.com/ChrisGannon Chris is an animator, illustrator and interactive designer and creates a lot of amazing work in SVG. SARA SOUEIDAN https://twitter.com/SaraSoueidan Sara is a freelance front-end developer and speaker with an extensive knowledge of SVG. CHRIS COYIER https://twitter.com/chriscoyier Chris is the creator of CSS Tricks and CodePen but recently he’s been focusing on SVG. GREENSOCK https://twitter.com/greensock GreenSock are the creators of GASP and provide a number of tools for working with SVG.…

There was a time in the past when web standards were a mess, with numerous features either supported by some browsers but not others, or differing greatly in their implementation. In 2017, thankfully the picture is a lot better, and there’s a strong focus on adhering to a consistent set of web standards from all major browser makers. You’d be forgiven, therefore, to ask whether you really need to test in multiple browsers these days, or if you can safely assume that what works in one will work on another so long as you write standards-compliant code. The short answer is: yes, you still need to do this. For all the focus on web standards, they can’t cover every edge case, and so subtle differences in feature implementation will still…

“THERE’S AN OVERHEAD IN SETTING UP AUTOMATION TESTS, WHICH MAY NOT BE WORTHWHILE FOR SMALLER SITES” BROWSER SHOTS  http://browsershots.org It sounds simple, but BrowserShots is an awesome way to check the basics. It’s an online service that will quickly take screenshots of your site in a range of browsers and versions of your choosing, to check that things look okay. You can also play around enabling and disabling JavaScript and Flash. Best of all, it’s free. This gets you off to a good start, and is fine for simple content pages, but for interactive sites you’ll need to go a little further and use another tool to test your functionality. SELENIUM  www.seleniumhq.org If you’re thinking you may want to delve into automated testing, Selenium is one of the most popular…

1 VALIDATE YOUR CODE You’re much more likely to experience weird behaviours between browsers if your code isn’t strictly valid, so check it with https://validator.w3.org to make sure it’s standards-compliant. 2 FAIL GRACEFULLY Design your site with the view that not all functionality will work. It’s often healthy to check how it renders without JavaScript or styling enabled, to see if the user can at least tell what’s happening based on content alone. 3 KNOW YOUR AUDIENCE Make sure you understand the browsers and devices you’re targeting. Is your page mostly for mobile users? Are you working within a company who still use legacy browsers? Test accordingly. 4 CONSIDER USING A FRAMEWORK If you use a well-established framework, whether for styling (eg Bootstrap) or a JavaScript framework (eg Angular, React),…

When developing simple web projects that involve user interaction, how best to manage changes of state in CSS becomes food for thought. When the user expands an accordion or toggles a menu, how should the CSS style changes be applied? One popular solution involves stateful classes, a naming convention which uses class names such as “is-active” or “is-expanded” as style hooks. These stateful classes would typically be managed in JavaScript. Download the mock Android App from Filesilo and open the ‘website-template’ directory in your text editor and you can see this for yourself in ‘dev/js/main.js’. One thing you may notice here is that there’s lots of duplicate code snippets all triggering very similar class toggles. Presumably, if this project were to grow in size, so would the amount of duplicates.…

TEN OF THE BEST NEW HTML APIS Find out how to build in the browser with essential new codebases VOICE-POWERED TO DO LISTS Create a reminder/to-do list using speech to record new items and display on screen CREATE ANIMATED TEXT EFFECTS Add interest and engagement to titles with smart animations ALL IN YOUR NEXT WEB DESIGNER Issue 268 on sale Thursday 16 November 2017 Visit the WEB DESIGNER online shop at future myfavouritemagazines.co.uk for the latest issue, back issues and specials…