In this overview of WebXR technologies and the Babylon.js framework, we’ll embark on a journey through the past, present, and future of mixed reality both on the web and on immersive headsets. We’ll inspect the underpinnings of WebXR and the most important aspects of the WebXR Device API before turning our attention to Babylon.js, a framework for building immersive applications in JavaScript for web, mobile, and headset. This tutorial is geared toward web and JavaScript developers who build web applications but are looking to dip their toes into immersive experiences.
Read more…
Being able to run Google’s Lighthouse analysis suite programmatically provides a lot of advantages, especially for larger or more complex web applications. Using Lighthouse programmatically allows engineers to set up quality monitoring for sites that need more customization than straightforward applications of Lighthouse (such as Lighthouse CI) allow. This article contains a brief introduction to Lighthouse, discusses the advantages of running it programmatically, and walks through a basic configuration.
Read more…
Splitting colors into three levels (palette, functional, and component) can help you be more adaptive to changes and new requirements while working on a project. In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite useful: a palette (or scheme), functional colors (or theme), and component colors (local scope).
Read more…
With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substantially reduce the time and work that goes into building a dashboard.
Read more…
Which aspects should we take into consideration when designing and developing for reading? How can we create accessible, comfortable, inclusive experiences for all readers, including the most challenged and those affected by dyslexia? In this article, Edoardo Cavazza will cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and putting into practise what we learned from doing scientific researches.
Read more…
Every month, we present an overview of things the Smashing team has been working on — all in one place. We organized Smashing Meets on three days — events that were open to everyone in the web community. With sessions on performance, CSS, GraphQL, and creative courage, we made sure to leave plenty of time for Q&A, networking, competitions and prizes. The past few weeks have been quite challenging: COVID-19 crisis, #BlackLivesMatter, and so many other ongoing issues taking place all over the world. Here’s what’s been happening on our end in the meantime.
Read more…
A desk is an essential piece of equipment for a web designer. Without it, you’d end up working from wobbly tables at cafes or staring down at your lap all day — uncomfortable options, to say the least. Then again, your desk could also cause you discomfort if you sit in it the wrong way or for too long. Rather than feeling like your desk is a torture device, Suzanne Scacca shares some pointers for enjoying the time you spend there.
Read more…
Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. In this tutorial, Blessing Krofegha will show you what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a YouTube-like skeleton screen UI using React Loading Skeleton. Then, you can experiment on your own with the skeleton screen React package of your choice.
Read more…
React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. The example below shows a counter whose state is managed using the useState() hook. Each time you click on the button, we make use of setCount() to update the value of count by 1. In this article, Adeneye David Abiodun covers the rules of React Hooks and how to effectively start using them in your projects. Please note that in order to follow this article in detail, you will need to know how to use React Hooks.
Read more…
In this article, Chidi Orji will create a set of API endpoints using Express from scratch in ES6 syntax, and cover some development best practices. Find out how all the pieces work together as you create a small project using Continuous Integration and Test-Driven Development before deploying to Heroku.
Read more…
