getButterfly Logo

Web Insights – Your JS/CSS/UI/UX Digest #10

Our new digest series aims to provide web designers and developers with a single location to discover the latest and most significant stories on the web, while sipping a hot coffee.

If you’re like us, you spend hours every day browsing through hundreds of sites and articles, hoping to stumble across relevant news stories.

We search through hundreds of posts on blogs, social media, and news channels, to deliver the most essential stories of the day. Our content covers quality news, fresh tools and apps, case studies, code demos, inspiration posts, videos and more.

The Story of CSS Grid, From Its Creators
The story behind the CSS Grid spec, and the more than 20-year process that led to today.
javascript

HEAD: Everything To Go In Your HTML’s ‘head’
Starts from the usual basics (title, charset, etc.) but works up to a significant number of meta and link tags useful in various situations.
tutorial

Saying Goodbye to Firebug
The popular webdev tool Firebug surely inspired Chrome’s DevTools but has now reached end-of-life. Here’s a look back at what it brought us during its 12-year lifespan.
javascript news

Chrome Dev Summit 2017 Keynote
Ben Galbraith, leader of the Chrome Web Platform team, and Dion Almaer, Google Engineering Director, discuss the state of Chrome and the Web Platform today.
news

Fast By Default: Modern Loading Best Practices
Addy Osmani runs through loading best practices for diagnosing and making real-world sites load ‘instantly’. Filmed at the Chrome Dev Summit 2017.
news

accessibilityjs: A Client-Side Accessibility Error Scanner
GitHub uses this for scanning for inaccessible elements within its interfaces during development.
javascript tutorial

CKEditor 5 Rich Text Editor Released
javascript news

Alt-texts: The Ultimate Guide to ‘alt’ Attribute Text
tutorial

Building an Elegant Progress Ring with SVG
… and then using it as a Web Component or in Vue or React.
javascript tutorial

Animating a Blur Efficiently
javascript tutorial

My Approach to Using z-index
A recommendation to categorise all uses of z-index as either local or global.
javascript tutorial

Thoughts on Tabbed Interfaces
The art of creating an accessible tabbed component, and whether you should.
javascript tutorial

How to Build a Grid Inspector
A fun little project that aims to leave you with a better understanding of how the devtools Grid Inspector tool works.
javascript tutorial

Detect Supported Audio Formats with JavaScript
javascript tutorial

Creating Component Variants with Scoped CSS Variables
javascript css tutorial

A Look Back at the History of CSS
css

Building a Modern Mobile Media Experience
Francois Beaufort and John Pallett review best practices for mobile web media, including playback controls, pre-loading, autoplay and offline.
video

Axis-Praxis: OpenType Variable Fonts in the Browser
A web tool for playing with Variable Fonts.
tutorial

SVG Regular Polygon Generator
tutorial

SQIP: An SVG-based ‘Low Quality Image Preview’ Technique
Generate tiny SVG-based placeholders on the server side.
tutorial

Monopoly Board Created with CSS Grid
css tutorial


Leave a Reply

Subscribe to our mailing list