New WebKit Features in Safari 12.1

Jonathan Davis – Web Technologies Evangelist for Apple – has done a writeup on the new features that have landed in Safari 12.1, which is included with macOS Mojave 10.14.4 and iOS 12.2. This release delivers web platform features that improve website integration with the operating system, new real-time communication capabilities, more compatible encrypted media […]

quicklink – Prefetch links (during idle time) based on what is in the user’s viewport

Great little piece of JavaScript which prefetches links, but only when the browser is idle (and when the user is on a “fast” connection). Uses the aforementioned Intersection Observer to detect which links are in-view. Install it per NPM and call its quicklink(); method – for example after the DOM has loaded – to initialize […]

Sticky Events – Events for position: sticky;

Sticky Events is a library that can listen for events on elements that have position: sticky; applied. It’s an abstraction built on top of the IntersectionObserver, and provides one with three types of events: StickyEvent.CHANGE: Fired when an element becomes stuck or unstuck StickyEvent.STUCK: Fired only when an element becomes stuck StickyEvent.UNSTUCK: Fired only when […]

Scroll to the future – CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.

Very in-depth article on Evil Martians’ team blog on scrolling: We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Subjects tackled are styling of scrollbars, position: sticky, IntersectionObserver, Smooth […]

Lazy Loading images with IntersectionObserver

Smashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded […]

Scrollama – Scrollytelling with IntersectionObserver

Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. The code that accompanies the markup pictured above: // instantiate the scrollama const scroller = scrollama(); // setup the instance, pass callback functions scroller .setup({ container: ‘.scroll’, // wrapping container step: ‘.scroll__text .step’, // all steps graphic: ‘.scroll__graphic’, […]

Using Intersection Observers

With the Intersection Observer coming to Firefox, a nice article covering it appeared on Mozilla Hacks. The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. To use it, create a new instance […]