This tutorial will help you transform an app that doesn’t work offline into a PWA that works offline and shows an update available icon. In this article, Jad Joubran will show you a step-by-step tutorial for adding a service worker to an existing one-page website. You will learn how to precache assets with workbox, handle dynamic caching as well as handle updates to your PWA. Follow along and see how you can also apply these techniques on your website.
Read more…
For the past few months, Cory Shaw has been building a software-as-a-service (SaaS) application, and throughout the development process he’s realized what a powerful tool Slack (or team chat in general) can be to monitor user and application behavior. After a bit of integration, it’s provided a real-time view into our application that previously didn’t exist, and it’s been so invaluable that he couldn’t help but write up this show-and-tell.
Read more…
Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image, while remaining more digestible compared to a typical video. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage. With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser. Today, Ayo Isaiah will show you how to convert animated GIFs to video files and examine how to properly embed these video files on the web so that they act just like a GIF would.
Read more…
The Server Timing header provides a discrete and convenient way to communicate backend server performance timings to developer tools in the browser. Adding timing information to your application enables you to monitor back-end and front-end performance all in one place. Over the years developer tools have been improved to help us troubleshoot these sorts of performance issues in the front end of our applications. Browsers now even have performance audits built right in. This can help track down front end issues, but these audits can show up another source of slowness that we can’t fix in the browser.
Read more…
In this article, William Lim describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described here. A good understanding of this effect is very helpful for building or designing any website that has fixed elements.
Read more…
The Beacon API is a lightweight and efficient way to log information from a web page back to a server. It is used for sending small amounts of data to a server without waiting for a response. Think of it like a postcard sent home when on vacation. You put a small amount of data on it, put it in the mailbox, and you don’t expect a response. In this article, Drew McLellan will help you find out how that can be used and what makes it so different from traditional Ajax techniques.
Read more…
We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, Rachel Andrew decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it!
Read more…
When it comes to performance, what works in the browser doesn’t necessarily suit Node.js. So, how do we make sure a Node.js implementation is fast and fit for purpose? Node is a very versatile platform, but one of the predominant applications is creating networked processes. In this article David Mark Clements is going to focus on profiling the most common of these: HTTP web servers.
Read more…
Since last year, it has been possible to add Siri support to an app if it fits into one of Apple’s pre-defined use cases. Adding Siri support to an app has a lot of steps, with a lot of configuration. But the code needed to handle the requests is fairly simple. In this article, Lou Franco will take you through the steps of setting up a extension on Apple’s developer website and of adding the Siri extension code to the app. Find out if SiriKit will work for you and how to use it.
Read more…
Manually clicking through different browsers as they run your development code, either locally or remotely, is a quick way to validate that code. However, it’s not a solution for testing the full breadth of your site’s code base on the assortment of browsers and device types available to your customers. That’s where automated testing really comes into its own. In this article, Jason McConnell provides an overview of the concepts, technologies and coding techniques involved with running test scripts against browsers automatically using WebDriverJS on Windows 10 and Microsoft Edge.
Read more…
