A rather geeky/technical weblog, est. 2001, by Bramus
Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages: To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; …
Continue reading “pagemap, a mini map navigation for web pages”
One of the features that shipped with Chrome 76 is “Paint Holding”. It’s a technique that removes the “flash of white” – e.g. the white page you briefly see while the browser is loading the next page – when navigation between two pages on the same origin, thus delivering a smoother experience to the user. …
Harry Roberts has done an extensive write-up on Time To First Byte (TTFB), an often overlooked metric when it comes to measuring the performance of websites. While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one. To see what happens during your TTFB, …
Continue reading “Time to First Byte: What It Is and Why It Matters”
ally.jsally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the “web platform” should’ve provided itself, so JavaScript applications can be made accessible more easily. An example of the things provided by ally.js is ally.maintain.tabFocus …
Continue reading “Making accessibility simpler with ally.js“
Una Kravets implemented “Save For Offline” on her blog, using Service Workers. She described the reasoning, process, and code to implement. With “Save For Offline”, if someone is reading your blog on the subway, and loses their Internet connection, they won’t lose their place. If they accidentally click and the browser refreshes, they won’t lose …
Continue reading “Implementing “Save For Offline” with Service Workers”
With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you: …
Continue reading “Why You Should Be Excited About Native CSS Variables”
When requesting a high-resolution image with the Android Google+ app, one no longer gets the full version sent over. Instead, one gets a low-resolution version which is then processed by RAISR: RAISR, which was introduced in November, uses machine learning to produce great quality versions of low-resolution images, allowing you to see beautiful photos as …
Continue reading “Saving bandwidth through machine learning”
Jeremy Keith wrote a book, “Resilient Web Design”, on how to build a web that lasts: With a title like Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book. […] You won’t find any code in here to …
From the folks over at Tumblr: Add support for Apple’s Live Photos in web browsers. Install it using npm, or include the dist file: npm install –save laphs You can make Laphs work with existing elements: <img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/> <script>LivePhotos.initialize();</script> Or, alternatively, directly create new instances: const livePhoto = new LivePhotos.LivePhoto(el, options); Laphs: Live …