Magzter Gold (Sitewide Promotion)

Magzter Gold (Sitewide Promotion)

Digital Delivery

Web Designer November 1st, 2019 Digital Back Issue Cover

Web Designer (Digital)

(0)

Single Digital Issue

No. 293

$5.99

Powered By Zinio

Zinio

Satisfaction Guaranteed

Instant Start

Also available on ZINIO Unlimited logo

Get unlimited access to Web Designer (Digital) & 5000+ other magazines

1-month free trial

Renews at $8.99/month after trial.
Cancel anytime.

Get unlimited access to Web Designer (Digital) & 5000+ other magazines. Renews at just $8.99/month after trial. Cancel anytime.

Start Trial Learn more

50 Articles

Welcome to the issue

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 Arrivederci, ciao and goodbye It’s hard to believe, but after a blockbusting “ The aim of Houdini is to open up CSS and allow developers to apply polyfills further along the pipeline and speed things up. They also open up new opportunities to create effects not” previously possible 140+ issues of Web Designer, I’m finally having to say goodbye to the magazine that I have loved and cherished, and hopefully anyone who is reading (and has read the mag) has enjoyed. I have travelled from the bottom to the top, starting out as a staff writer back on Issue 147, before finally taking over…

Welcome to the issue

This issue’s panel of experts

Matt is a software engineer at Vidsy in London. In this issue he takes a look at Houdini – the magical collection of APIs that are set to revolutionise how developers and designers approach CSS. See how they work, what they’re capable of and how to start using them today. Page 46 “ The Houdini task force consists of representatives from organisations such as Apple, Google and Microsoft, and other members of the CSS Working Group” Richard Mattka Richard Mattka is an award-winning creative director specialising in innovative technologies, interactive experiences, web development and visual effects. This issue he delves into the world of WebXR to reveal more. Page 84 Mark Shufflebottom Mark is a professor of Interaction Design at Sheridan College. This issue Mark is creating an interactive, colour…

This issue’s panel of experts

What does the future hold for designers?

Designers, and we don’t specifically mean web designers, are all part of the tapestry of the web. Web designer has a broad remit, and can include UI/UX designers, graphic designers and 3D/animation artists. Why are we clarifying this? Because we are taking a look at 2019 AIGA Design Census, which includes a wide berth of design disciplines. So what is the AIGA Design Census? It is an annual report put together by AIGA, the professional association for design, and Google. Here’s a quick report summary where it reveals it will look ‘deeply at who’s designing today, the kind of work they’re doing and how they’re doing it, how much they’re getting paid, how satisfied they are, what they anticipate for the future, and so much more.’ The report goes on…

What does the future hold for designers?

Sites of the month

01. Solar Digital https://solar-digital.com A red overlay and sweet animated waves transition the user from one image to the next, and the next... 02. QI Catalog https://qodeinteractive.com/catalog A stylised bottom text navigation system reveals an image for each item as the user passes over the text. 03. ViiSUALiiZER https://boniver.withspotify.com Bon Iver and Spotify turn data into an interactive dot pixel animation that mesmerises and engages in equal amounts. It’s even better if you like them! 04. #24HourAce http://24hourace.gucci.com Gucci come up with another nod to webs past with garish colours and a selection of excess design elements. Graphics Logos and badges 2019 https://bit.ly/2lyi6y9 T-shirt illustrations, labels and patches from the talented hand of Alexander Shimanov. Colour picker No Sensibility https://bit.ly/2mIUjf6 Typesetter Campora https://bit.ly/2ndn0Rn Created by Chilean designer Salvador Rodríguez, Campora…

Sites of the month

Make your apps accessible to all

The ability to access, abbreviated as accessibility, refers to the design of products that can be used by people with disabilities. New government regulations mean websites and apps in the public sector must now be accessible to all. Making your app accessible means you must consider a range of challenges a customer may face, ensuring that as many people as possible can use it. For instance, those with impaired vision, motor difficulties, cognitive or learning difficulties as well as deafness or impaired hearing. Designing an accessible app means much more than simply making the design clearer. You must design an app that is adaptable to those throughout the spectrum and support those who need the apps extra, accessible functions. So what needs to be considered when designing an accessible app?…

Make your apps accessible to all

TOAST UI https://ui.toast.com/tui-chart In a nutshell, ‘TOAST UI Chart supports an easy way to draw various and essential charts on your web service’. It provides a host of chart types to visualise your data including Bar, Column, Line, Pie, Area, Bubble, Doughnut and many more. It offers support for legacy broswers (yes, IE) and guarantees a uniform look in any browser. Glide.js https://glidejs.com This is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast and designed to slide. Extend the power of the slider with your own custom plugins. augmented-ui https://augmented-ui.com A collection of CSS that enables users to create cyberpunk inspired UI for any size element, on any web page or app. Little effort is needed to create, and it is free to use. Loom https://bit.ly/2osKguJ…

TOP 5 Web conferences Nov & Dec 2019

Adobe Max https://max.adobe.com A creative conference by one of the biggest in the business. There are over 300 sessions and a host of inspiring industry speakers. Agile in the City https://agileinthecity.net This event focuses ‘on delivering practical, useful, engaging content to build your skills and celebrate your passion’. ffconf https://2019.ffconf.org A single day conference with eight sessions that see talks on community, performance, tools, debugging, IoT and Just JavaScript. Meaning 2019 https://meaningconference.co.uk Meaning is about connecting and inspiring people who believe in better business. See a host of industry experts deliver. dotCSS www.dotcss.io Touted as the ‘The world’s largest CSS conference’, expect top quality speakers presenting professional talks that will inspire.…

TOP 5 Web conferences Nov & Dec 2019

Quasar Framework https://quasar.dev Cutting straight to the chase, what is Quasar? It’s an “open-source Vue.js-based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours”. These flavours include Single Page Apps, Progressive Web Apps and Android and iOS apps. Quasar also has a host of features, including HTML/CSS/JS minification, ES6 transpiling and Code-splitting with lazy loading. React Bolt https://github.com/leonardomso/react-bolt A simple and robust boilerplate for your React projects. It features all the latest tools and practices in the industry including React, Redux with Redux Thunk, Babel and Webpack. Can I email www.caniemail.com For those familiar with the Can I use site you will have a good idea what to expect. For those who don’t, add in your tag or property and see which email…

TOP 5 Codepens November 2019

Fluid text hover https://codepen.io/robin-dela/pen/KKPYoBq Adds interest to headline typography with an interactive mask. On hover, watch as the background follows the cursor. Test Shader #1 https://codepen.io/AlainBarrios/pen/jJLVWv This effect is what a driver would see on a rainy night travelling along the motorway. Use the mouse to speed up/slow down. Arrowtrix https://codepen.io/faisal-jawed/pen/ZEzZjKJ Subtitled Matrix Arrows, this is the effect it’s recreating. Various-sized green arrows falling down the screen and fading out create depth. letter-v https://codepen.io/ruidovisual/pen/ZEzPPXr HTML and CSS create an undulating letter V with the lines rippling across the letter and changing colour to create realistic movement. State of my brain https://codepen.io/terabaud/pen/VwZRrRL Psychedelic shaders are the order of the day here. The colours change and patterns expand and grow. Play with the sliders.…

TOP 5 Codepens November 2019

Denim – A Data Deep Dive

“Fashion hub Lyst presents a rich digital report detailing the data captured around denim buying habits and worldwide search trends.” www.lyst.com/denim-report Designer: Drench www.drench-design.com Colours Tools jQuery, CSS3, Soundcloud Fonts Brown font by Aurèle Sack appears in its Regular and Bold forms for supplementary text paragraphs. Adieu font from Good Type Foundry is used in the Black style for lead paragraphs and titles.…

Denim – A Data Deep Dive

Build a text animation that reacts to page scrolling

1. HTML content The first step is to define the web page’s HTML. This step’s HTML defines the page document with its head and body sections. While the head section is used to load the external CSS and JavaScript resources, the body section stores the title element that will be used for the animation. 2. CSS: container elements Create a new file called “styles.css”. This step defines the visual presentation settings for each container used in the example. The HTML document and its body are set to use a minimum height that’s 8 times the height of the screen to guarantee scrolling ability. Meanwhile, the h1 element used for the title is set to display its text using fixed positioning to guarantee visibility independently of scroll position. 3.…

Build a text animation that reacts to page scrolling

“Inspired by retro RPG videogames, Front-end Developer Peter Oravec transforms his portfolio into an interactive fun quest” https://peteroravec.com https://peteroravec.com Colours Tools HTML5, jQuery, Phaser Fonts Press Start 2P by CodeMan38 is a bitmap font based on retro Namco arcade games and available via Google Fonts.…

Code a content popup lightbox UI component

1. Document initiation The first step is to initiate the document structure, which consists of the HTML document container storing sections for head and body. Firstly, the head section is used to load the external CSS and JavaScript resource created in steps 3 — 7. The body section is used to store the content elements created in step 2. 2. Body content The page body content is made from a list of anchor links and a collection of hidden sections. Each anchor link uses the data-popup attribute to reference the ID of the hidden section to display when clicked. This feature will be activated through CSS and JavaScript in the following steps. 3. Links and lightbox Create a new file called “styles.css”. This step sets the anchor…

Code a content popup lightbox UI component

Title Loans – Autonomy

“Autonomy demonstrates the ease of its microloan products with a minimal yet bold site that defies gravity” https://en.autonomy.finance https://redcollar.digital Colours Tools PHP, GSAP, Bitrix Fonts TT Travels font by TypeType is used exclusively in Regular, Bold and ExtraBold varieties.…

Title Loans – Autonomy

Create a changing link cursor UI feature

1. Document initiation The first step requires the structure of the web page document to be defined. An HTML container declares the document to store sections for head and body. While the head section is used to load the external Javascript and CSS, the body is used to store the page content elements defined in step 2. 2. Link list The example content consists of a list of links. Each link that is to have an icon uses the data-icon attribute to specify the name of the icon to display. This example sets the icon names as 1, 2 and 3 — which will be specified in the upcoming CSS presentation rules. 3. Cursor hover Create a new file called “styles.css”. The first set of CSS rules…

Create a changing link cursor UI feature

KINSTA: WORDPRESS HOSTING MADE EASY

“Kinsta boasts state-of-the-art technology to make your websites load at lightning speed” For artists and designers, having a strong online presence is vital in order to succeed in the ever-competitive creative industry. But while building a beautiful home in WordPress is easy, maintaining it online can be tricky for those unfamiliar with the ways of the web. Until now. Introducing Kinsta, a WordPress hosting service that makes managing your website a cinch. A highly affordable solution, equipped with all the latest web technologies, Kinsta not only helps WordPress websites deliver fast load times and have less downtime, it also takes tasks such as securing, caching and backing up your site off your hands, saving valuable time. And with Kinsta support staff being some of the most experienced WordPress developers in…

KINSTA: WORDPRESS HOSTING MADE EASY

One of the toughest and most coveted skills within any design discipline is the ability to predict the future. Not for forecasting the lottery numbers, although that would be a helpful trick, but in order to predict and influence the hottest style trends. This is useful for communicating effectively to audiences, capturing attention and appealing to those “fashionable” sensibilities that maybe instill trust in a message. Like much of the tech trade, web design as an industry is fixated on foretelling the next big thing, and that’s the premise behind Tarot-o-bot. An in-house project produced by Italian agency illo, the purpose was to celebrate their seven-year birthday and promote a big party being held in Turin. The theme was to be “Prediction”, and with seven years regarded as quite a…

Disciplined Freedom

The hugely beneficial exercise of finding time for in-house projects is a common practice for good web design studios. In illo’s case, the team describe a valuable feeling of being untethered and not restricted in terms of creativity, a time to freely express their own personality. “An important feature that defines these works is that we have total freedom during our creation process,” reveals Giovanna Crise, illo’s Brand Developer. “Normally we need to cross-reference with the client, who will have, of course, some restrictions, such as a style, a colour palette or a budget etc. Usually, with the client, there is also a strict and determined timeline, one we have to stick to and the work is then developed thanks to regular feedback. Instead, in a studio project, we set…

“One of the results we are most proud of is totally the predictions! We really enjoyed writing dozens predictions for Tarot-o-bot together – it was a beautiful occasion of team-building and to lough together wondering about impossible and funny Motion Design futures.” Animation Fixation Being a studio focused on motion design, animation was also a really important element for the illo guys. They wanted those kinds of details worked in and embedded too, beginning with the cards themselves. Each tarot was animated within a loop to provide additional movement during site navigation, with users revealing extra little nuggets of interaction as they browse. “For example, to find out which tarots have been drawn, users shake each card with a mouse-over action and then flip them by checking on the back…

Information as Art

Founded in 2011, The Visual Agency works in close collaboration with Density Design Lab. CEO Paolo Guadagni came up with the idea to create an agency that combines technical know-how and data-science with creative design. After getting a master’s degree in physics, Paolo started his working career as a programmer in the 1980s. After 12 years at Microsoft, he decided to start digital PR – the first internet PR agency in Italy. Paolo conceived the idea to create an agency specialising in infographics and data visualisation after meeting Professor Ciuccarelli, head of Density Design Lab at Politecnico di Milano. In November 2011, a few months after his encounter with Professor Ciuccarelli, Paolo founded The Visual Agency: a team of designers specialised in data and information visualisation. Initially part of Alchimia…

Information as Art

http://visualeyed.com Visualeyed is an online magazine offering a new perspective and inspiring new forms of visual communication in journalism. The magazine is conceived by Tommaso Guadagni, founder of Dalk (www.datatalk.it) – the first data-driven storytelling agency in Italy. Visueleyed hosts interactive articles designed by The Visual Agency, with a focus on environmental and social issues. Visualeyed periodically shares the most exciting data and visual journalism case studies published by the most relevant newspapers worldwide. Recent examples of content The Visual Agency created include “Satellites”. According to the Index of Objects Launched into Outer Space, there are more than 4,256 satellites currently orbiting our planet. Of those, only 1,419 are operative while the remaining 2,837 don’t return data to the Earth any longer and are therefore counted as space debris. The…

Data visualization for Corriere della Sera

www.corriere.it Since 2013 we have suggested content and designed cutting-edge visualisations on current affairs, politics and culture for one of Italy’s leading newspapers, the Corriere della Sera. The work includes the selection and suggestion of content to the editorial staff, the analysis of the data collected and the design of the visualisations on topical issues, politics and culture. A series of numerical correlations become the protagonists of a new way of presenting information, which involves the reader. The most advanced graphic design resources meet journalism, and the coordinates of a new aesthetic of knowledge are drawn, with a new idea of creativity. The visual data of La Lettura – a section of the Sunday insert of the Corriere della Sera – often includes infographics with each feature. In February of…

Codex Atlanticus

www.codex-atlanticus.it In 2019, on the occasion of the 500-year anniversary of Leonardo da Vinci’s death, The Visual Agency unveiled its collaboration with the Veneranda Biblioteca Ambrosiana – a renowned museum in Milan. The project was an innovative data-visualisation instrument that enables the general public to experience the Codex Atlanticus, one of da Vinci’s most celebrated masterpieces, without boundaries and in a way that has never been possible before. This self-initiated bilingual project in Italian and English offers a panoramic overview of the Codex Atlanticus combined with drill-down and analytical functions to explore this epic work in more detail. Rearranging and filtering the pages of the Codex uncovers insights into Leonardo da Vinci’s thought processes. Even though some of Leonardo’s legacy has been lost, the major part of his drawings and…

2011 November 17th, Paolo Guadagni founds The Visual Agency Number of employees: 2 2012 The Visual Agency team Matteo Bonera (Creative Director), Giulia De Amicis (Information Designer), Paolo Guadagni (Co-Founder), Francesco Roveta (Design Director) and Mir Shahidul Islam (CTO) begin work on its first data visualisation projects Number of employees: 4 2013 For the first time, a data visualisation is published in Corriere della Sera Number of employees: 6 2014 The Visual Agency rebrands itself and wins its first award Number of employees: 9 2015 The TVA Academy starts to teach training courses on data visualization Number of employees: 10 2016 Tommaso Guadagni launches visualeyed.com and TVA partners with parcodiyellowstone, a brand identity and web design studio Number of employees: 11 2017 The Visual Agency becomes Eni official supplier and…

“With the right tools to hand, developers can start creating innovative layout choices and themes without the heavy performance hit. Houdini will soon be helping spark fresh, creative approaches within web design.”Matt Crouch www.mattcrouch.net The world-famous Harry Houdini was known for his daring acts of escape. It seems fitting to use his name to describe a collection of APIs that do the same thing for CSS. The Houdini task force consists of representatives from organisations such as Apple, Google and Microsoft and other members of the CSS Working Group. They have been working on a set of APIs that give developers more direct access to the way the CSS engine works. Browsers are very good at abstracting complex styling tasks away from developers. It will split paragraphs of text on…

By default, all JavaScript running on a page will operate on the main thread. This means that it shares resources with the rendering of the user interface. Long-running code can end up blocking the main thread and slowing down the interface. Doing this too often makes for a bad user experience. In order to combat this, the concept of a web worker was introduced. Web workers operate on a separate thread — freeing up the main thread. If we know some JavaScript could take a long time to run, we can add it to a worker and keep the interface responsive. However, web workers are not cheap to create and are not designed to be used in large numbers. While the idea is a good one they would not be…

Properties and Values API

CSS custom properties — also known as “CSS Variables” — allow us to define a value in one place and use it elsewhere. For example, we could create custom properties to hold theme colours that elements further down the page could make use of. The problem with custom properties becomes apparent when we try to animate between them. As the property could refer to anything, the browser falls back to treating it as a string. As there is no way it knows how to animate between strings, it ends up jumping from one to the other. The Properties and Values API helps by providing types to custom properties. We can use JavaScript to register a property with the browser, which then takes care of the rest. The “registerProperty” method is…

Properties and Values API

The CSS Object Model (CSSOM) has been part of JavaScript for a long time. It allows us to extract the computed style of an element reading its “style” property or by using “getComputedStyle”. The former returns styles applied directly to that element, while the latter includes all styles including inherited ones. The value they return is always a string regardless of what was supplied originally. This makes adjusting these values buggy and inefficient for us as well as the browser as it needs to constantly convert back and forth between a number and a string. The Typed OM works similar to the CSSOM but also provides types for the values. There are two new ways of accessing them — the “attributeStyleMap” works like the “style” property, with “computedStyleMap” like “getComputedStyle”.…

Font Metrics API

It can be important to know exactly how much space some text will take up on screen. Perhaps it needs to fit inside a container or, for complex text like mathematical notation, where other elements need to go. This can, in part, be achieved through a

Font Metrics API

All browsers have layout algorithms in place to help position content. By default, all elements will be in flow layout. In Latin scripts such as English, any elements set as “inline” will flow left to right in the inline direction and any elements set as “block” will flow top to bottom in the block direction. While they work well, they make most websites look the same. To make a site stand out, we would need to use properties such as “position: absolute” and calculate offsets manually. A site such as Pinterest uses this approach to make its masonry-style layout, but it can cause performance issues on larger pages. The Layout API aims to avoid this problem by handing this logic to a worklet. It knows the desired dimensions of the…

UNA KRAVETS twitter.com/Una Una is the creator of extra.css — a library of small flourishes powered by the Paint API. SAM RICHARD twitter.com/snugug Sam regularly gives in-depth talks about Houdini and created the demo site houdini. glitch.me IAN KILPATRICK twitter.com/bfgeek Ian is an engineer working on Houdini in Blink. He welcomes feedback on the Chrome implementation. SURMA twitter.com/dassurma Surma is a developer advocate at Google and can be found discussing the performance benefits of Houdini. ROSSEN ATANASSOV twitter.com/cssrossen Rossen is an Edge developer and co-chairman of the CSS Working Group building Houdini.…

The penultimate step in the rendering pipeline is the painting phase. At this point, the browser knows exactly the content to show but not how it appears. The rendering engine will look at the styles applied to each element and adjust its instructions accordingly. While some styles are fairly straightforward, others allow functions to run that decide their appearance. For example “background” can take many functions, which include “url()” for images, “rgb()” for colours and “linear-gradient()” for a gradient effect. context used when drawing onto

Tutorial: Create a striped background

1. Set up the right environment The Paint API will not work when viewing files directly on our local machine. Create a directory and use npm’s package runner “npx” to generate a local server for the files instead. Once that’s up and running, we need to open the provided address in a browser that supports both the Paint API, typed OM and the Properties and Values API, which is currently only Chrome Canary with the experimental flag on. 2. Create a worklet All of the work for the Paint API happens inside a worklet. This will live in a separate file and is managed by the browser. We will also need to register the worklet with a name to make sure the CSS parser knows about it. We can do…

Tutorial: Create a striped background

Animation Worklet

“The WorkletAnimation interface works similar to the Web Animations API” There are already plenty of ways to create animations. CSS transitions and keyframe animations can move between two values and the Web Animations API in JavaScript that can help sync animations together using a single timeline. While these all have their own use-cases, by using an animation worklet we’re able to perform some extra tricks. Unlike the Paint and Layout APIs, the animation worklet is not applied through CSS, but instead through JavaScript. The WorkletAnimation interface works similar to the Web Animations API. Both take a target to animate and a set of keyframes to apply. In this case, we’re scaling an element to full size over 1 second. The first argument is the name of the animation worklet loaded…

Animation Worklet

4 ESSENTIAL RESOURCES TO CHECK OUT TODAY

IS HOUDINI READY YET? ishoudinireadyyet.com Keep up with support of all APIs across different browsers with this handy grid. CSS HOUDINI EXPERIMENTS css-houdini.rocks A collection of examples with interactive demos showing what Houdini is capable of. HOUDINI RELOADED spec.fm/podcasts/toolsday/215273 The team behind the Toolsday podcast discuss their experiences working with Houdini. CSS HOUDINI & THE FUTURE OF STYLING youtu.be/GhRE3rML9t4 Una shows how the APIs operate at a browser level in this talk from JSConf EU.…

Create an interactive WebGL header

Using WebGL’s filters has allowed many effects found in the special effects industry and games to come to the web. The power of these effects is that the filters themselves are small programs known as shaders using GLSL, the OpenGL Shader Language. These programs are based on the C programming language and are incredibly fast because it runs very low level on the graphics card. This tutorial will not focus on the famously difficult GLSL language, but rather on using Curtain.js to take a pre-built shader and interactive code, then apply it to a page design so that you can get all the benefit without spending months learning GLSL! This tutorial will focus on a web designer’s primary job of designing the page, creating a great user experience by laying…

Create an interactive WebGL header

Going down the rabbit hole

If for any reason you want to get into shaders, then a good place to start is somewhere like Shader Toy (www.shadertoy.com). The site has contributions of shaders that can be anything from full on 3D scenes to filters that effect images. This at least allows you to see what is possible. If this piques your interest then you might want to learn a little about how to make your own. A great interactive instructional guide is the Book of Shaders (https://thebookofshaders.com). This will take you through a self-paced guide, that allows you to write all the code within the site, giving you instant feedback on the results. This allows for experimentation without any set up.…

Going down the rabbit hole

Build a website with JAMstack

Traditionally when a user clicks onto a web page, a series of actions take place. The users browser sends a request to the website’s server. The server then runs through the backend code and generates the correct page for the user with any location based customisation, the latest news posts or any personal login data all ready to be shown (Welcome, you are logged in as). This data is sent back to the users browser and rendered as a web page. All this happens in less than a few seconds, assuming the server is configured correctly and not under heavy load, the front end pages have been optimised properly, none of the backend queries to fetch those news posts aren’t running slow. Quite a lot that could go wrong, and…

Build a website with JAMstack

What to do when a client prefers editing with WordPress

WordPress is still extremely popular, and many non technical content editors have been trained in the process of creating pages and posts using the WordPress interface. For that reason, there may be instances where a client would still want to use WordPress. Thanks to something called “Headless” WordPress, the ever popular content management system can be transformed into a headless CMS. This means that WordPress is still used as the content management system, in place of Forestry. To get started converting a WordPress website, the front end needs to be removed by replacing the theme with a blank theme containing only an empty index, and the minimum style.css showing information about the theme. An API is then used to feed a static site generator such as Gatsby.js. Netlify is connected…

What to do when a client prefers editing with WordPress

Create cool text effects with Blotter.js

Every element of design – typography, colours, images, shapes and patterns etc, carries a visual weight. Some elements are heavy and draw the eye, while other elements are lighter. Typography is one of the heavier elements that can be manipulated to evoke different moods and feelings in web users, particularly when type is distorted in some way. For instance, users are likely to be drawn towards squeezed, arched or warped text as compared to ordinary text. The implication is that, as a designer, you might be drawn to using cool text effects on some of your site’s elements such as headlines in order make your site unique, while in other cases, you might be interested in directing user attention to some parts of the site. The conventional way to achieve…

Create cool text effects with Blotter.js

Blotter materials – a shortcut to their application

Using the library for the first time can be quite daunting, especially if you’re not used to a lot of coding. It turns out there is a shortcut to easily test out the actual settings you require for any effect you’re exploring. Navigate to https://blotter.js.org/#/materials to view the five different types of Blotter materials. Select the Flies Material which we demonstrated in the previous steps. Observe that at the top right corner, a set of controls is provided to easily adjust the animation on the left side. Similarly, documentation is also provided for all properties that can be used with the material. It’s advisable to first interact with the various controls and thereafter, paste the values to your application as you improve your understanding of the different properties.…

Blotter materials – a shortcut to their application

Build an API-driven app – pt2

This is the second part of a two-part series on how to use your HTML, CSS and JavaScript skills to create a real mobile app for both Android and iOS using the Ionic framework. If you missed the first article you can still follow along because the first step will get you to the right starting point. In the first part we installed Ionic, created a blank template app, built up a basic mobile app that talked to a public API, and ran the app for testing purposes in your local browser. In this part we go through the process of building and deploying the app on your own Android or iOS device. Building and deploying the app involves using a number of tools that need to be downloaded and…

Build an API-driven app – pt2

Android Play Store release

The release process for an Ionic app is a discipline in itself. Often handled by product managers in bigger organisations, it requires specific knowledge of the Apple App Store and Google’s Play Store. We’ve covered the basics here to get you started. Releasing an app through the Android Play Store is a little easier than iOS. They don’t have a beta test platform – the expectation is that you pass around the app’s .apk file for test installing, and then once ready only use the platform to release to the public. Within the Play Store console, go to Releases. Here you can upload your APK file and set release notes and information. Once the release is set up, you can push it live. Note that Android do not approve every…

Android Play Store release

Apple App Store release process

Once you have built and tested your app locally, you will want to upload it to Apple’s App Store to either send it out for beta testing or full release. Apple have the Test Flight product, which is a very useful tool that gives clients the ability to test your app without instaling direct files. From within Xcode, use the Archive option to start the upload process. We recommend using the auto-signing option to simplify the process. Once your archive is created it will give you the option to upload it to your Apple account. Sign in via Apple Connect to either release the app to individuals via Test Flight or into the App Store itself. The Apple staff are very helpful in resolving any app approval issues. Quick tip:…

Apple App Store release process

Say hello to Google’s Native File System API

Given that the web traditionally is a place crawling with all kinds of miscreants, more than one web designer may well suffer from hypertonia while reading the title of this tutorial. Letting JavaScript code loose on a client’s workstation sounds like an incredibly stupid idea. But fret not. Google has taken measures to ensure that the native file system API cannot be abused excessively. Due to that, developers working on browser-based applications will be delighted to hear about the new-found possibilities. For the first time in the history of the web, JavaScript code running outside of Node.JS will be able to access the remanent storage of its host. This, of course, leads to a variety of fascinating options – for example, large artificial intelligence programs could store gigabytes’ worth of…

Say hello to Google’s Native File System API

On the art of API design

Getting an API design right on the first go is almost impossible. Problems usually only crop up once developers start to exercise the functionality in danger. As changing an already-released API (often called the binary break) leads to all kinds of bad blood, the facility of the Origin Trial has recently been introduced. It’s a new-fashioned way to test experimental APIs. In principle, a developer must sign his website up for testing the API, and is then provided with an unique ID. This ID is embedded in the HTML markup of the application served on this domain. From that point in time, the application can use the new-fashioned APIs. Information on this topic, as always, is available on GitHub via https://bit.ly/2mDYKra.…

On the art of API design

Why Android is problematic

Developing file managers and similar programs was simple in early versions of Android. As long as the program declared the relevant capability, the operating system got out of the way. Sadly, Google changed all of that by introducing the storage access framework (SAF for short) which brought along all kinds of restrictions. It also requires the use of the relatively complex class structure shown in the image accompanying this boxout. As if this weren’t enough, the user interface is also extremely confusing – the Chrome team even admit this openly in the web site of the native file system API. Yours truly sees these problems with pleasure. Developers have been complaining about the SAF, only to be ignored.…

Why Android is problematic

WEBXR UNIFYING REALITY TECHNOLOGIES

“As the pace of technology races along, it has become critical to unify approaches and standards, before fragmentation inhibits further growth. WebXR taps the power of the web along with the unification of these realities, under one philosophical umbrella.”Richard Mattka Creative Director | Designer | Developer twitter.com/synergyseeker WEBXR CHALLENGES PERFORMANCE AND SECURITY ARE CRUCIAL TO SUCCESS Convincing XR experiences depend on low latency, high precision and large amounts of data processed rapidly to render out scenes, anaimations and much more. Latency, which refers to the delay in communications between a user’s movement and what they see, has to be as low as possible. Ideally this should be in the range of 20ms or better to create the illusion of reality. If there is even a slight glitch or alignment issue,…

WEBXR UNIFYING REALITY TECHNOLOGIES

HOSTING LISTINGS

Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need. What we offer • Managed hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud…

HOSTING LISTINGS

COURSE LISTINGS

Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just 12 weeks • Part-time: Fit our curriculum around your life in 24 weeks 5 tips from the pros “Becoming part of this vibrant,…

COURSE LISTINGS

In This Issue

Description

Details

Reviews

Recent Digital Issues Browse all

Recent Web Designer Digital Issues Browse all back issues

Web Designer (Digital) Subscription August 1st, 2019 Issue

Web Designer (Digital) No. 286: $5.99

Web Designer (Digital) Subscription July 1st, 2019 Issue

Web Designer (Digital) No. 285: $5.99

Web Designer (Digital) Subscription June 1st, 2019 Issue

Web Designer (Digital) No. 284: $5.99

Web Designer (Digital) Subscription May 1st, 2019 Issue

Web Designer (Digital) No. 283: $5.99

Web Designer (Digital) Subscription October 1st, 2019 Issue

Web Designer (Digital) No. 292: $5.99

Web Designer (Digital) Subscription September 13th, 2019 Issue

Web Designer (Digital) No. 291: $5.99

Web Designer (Digital) Subscription September 5th, 2019 Issue

Web Designer (Digital) No. 290: $5.99

Web Designer (Digital) Subscription September 1st, 2019 Issue

Web Designer (Digital) No. 289: $5.99

Web Designer (Digital) Subscription August 25th, 2019 Issue

Web Designer (Digital) No. 288: $5.99

Web Designer (Digital) Subscription August 15th, 2019 Issue

Web Designer (Digital) No. 287: $5.99

Web Designer (Digital) Subscription August 1st, 2019 Issue

Web Designer (Digital) No. 286: $5.99

Web Designer (Digital) Subscription July 1st, 2019 Issue

Web Designer (Digital) No. 285: $5.99

Web Designer (Digital) Subscription June 1st, 2019 Issue

Web Designer (Digital) No. 284: $5.99

Web Designer (Digital) Subscription May 1st, 2019 Issue

Web Designer (Digital) No. 283: $5.99

Web Designer (Digital) Subscription October 1st, 2019 Issue

Web Designer (Digital) No. 292: $5.99

Web Designer (Digital) Subscription September 13th, 2019 Issue

Web Designer (Digital) No. 291: $5.99

Web Designer (Digital) Subscription September 5th, 2019 Issue

Web Designer (Digital) No. 290: $5.99

Web Designer (Digital) Subscription September 1st, 2019 Issue

Web Designer (Digital) No. 289: $5.99

Customers Also Viewed

Vogue Italia Magazine (Digital) Subscription April 1st, 2025 Issue

Vogue Italia Magazine (Digital)

(2)

12 Issues: $25.95

Medical Mysteries Magazine (Digital) Subscription April 27th, 2018 Issue

Medical Mysteries Magazine (Digital)

Medical Mysteries: $7.99

Chicago Magazine Subscription May 1st, 2025 Issue

Chicago Magazine

(64)

11 Issues: $13.90

Camper Trailer Australia (Digital) Subscription February 1st, 2022 Issue

Camper Trailer Australia (Digital)

Issue 166: $3.63

CQ Amateur Radio (Digital) Subscription October 1st, 2023 Issue

CQ Amateur Radio (Digital)

(2)

October 2023: $5.99

PC & Tech Authority (Digital) Subscription October 1st, 2018 Issue

PC & Tech Authority (Digital)

October 2018: $3.32

net (Digital) Subscription April 1st, 2019 Issue

net (Digital)

June 2020: $6.99

Smartphones for Seniors Magazine (Digital) Subscription December 30th, 2014 Issue

Smartphones for Seniors Magazine (Digital)

Smartphones for Seniors: $6.23

The Hackers Manual 2015 Magazine (Digital) Subscription October 27th, 2015 Issue

The Hackers Manual 2015 Magazine (Digital)

(1)

The Hackers Manual 2016: $6.23

Dolls Bears & Collectables (Digital) Subscription December 1st, 2017 Issue

Dolls Bears & Collectables (Digital)

Volume 23 Issue 3: $4.53

Vogue Italia Magazine (Digital) Subscription April 1st, 2025 Issue

Vogue Italia Magazine (Digital)

(2)

12 Issues: $25.95

Medical Mysteries Magazine (Digital) Subscription April 27th, 2018 Issue

Medical Mysteries Magazine (Digital)

Medical Mysteries: $7.99

Chicago Magazine Subscription May 1st, 2025 Issue

Chicago Magazine

(64)

11 Issues: $13.90

Camper Trailer Australia (Digital) Subscription February 1st, 2022 Issue

Camper Trailer Australia (Digital)

Issue 166: $3.63

CQ Amateur Radio (Digital) Subscription October 1st, 2023 Issue

CQ Amateur Radio (Digital)

(2)

October 2023: $5.99

PC & Tech Authority (Digital) Subscription October 1st, 2018 Issue

PC & Tech Authority (Digital)

October 2018: $3.32

net (Digital) Subscription April 1st, 2019 Issue

net (Digital)

June 2020: $6.99

Smartphones for Seniors Magazine (Digital) Subscription December 30th, 2014 Issue

Smartphones for Seniors Magazine (Digital)

Smartphones for Seniors: $6.23

Reviews