Table of contents for No. 293 in Web Designer

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

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

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…

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

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

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

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

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…

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…

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

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

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

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…

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…

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

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

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…

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…

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…

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 <canvas> element. The “measureText” method gets the text width and not much else. It has inconsistent support, requires a <canvas> tag and ultimately may not accurately reflect the end result on screen. The proposed solution is document based and introduces two new methods for measuring text. “measureElement” measures the content of an element on the page. The “measureText” measures the text using the styles defined without an element. It won’t be affected by other styles cascading into it. “The “measureText” method gets the text…

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 <canvas> elements, by using instructions such as “moveTo” and” fillRect” to start building up the image that CSS can make use of. There are some differences between this context and that used for <canvas> elements. For example, there are no image data or text methods…

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…

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

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

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…

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…

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

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

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…

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…

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…

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…

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

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…