Collective #492
Publikováno: 14.2.2019
WebBluetooth * Ludwig * CSS Scroll Snap * instant.page * Intro to Font Metrics * To Grid or to Flex?
Collective #492 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: Florian Monfrini
Smooth animations on scroll and modern typographic elements made us chose Florian Monfrini’s website as inspiration for this week.

Meet The #1 WordPress Popup Plugin
Build Popups in the same place you build your website, so your site design remains consistent and you are able to get more conversions.

An Introduction To WebBluetooth
Read all about WebBluetooth which makes it possible to create PWAs that can control your lights, drive a car or even control a drone.

Announcing the #StateOfCSS 2019 Survey
Read about the launch of the first ever State of CSS survey. By Sacha Greif.

MIDI CITY 2000
An interactive art experiment where MIDI songs become cities. Made by Monica Dinculescu.

To Grid or to Flex?
Michelle Barker’s tips on how to pick the best layout method for the job: grid or flexbox.

Bluetooth Anywhere
The folks at de Voorhoede made some experiments to see if it’s possible to control a device over Bluetooth, from a JavaScript app, on iOS and Android.

Pure CSS Still Life – Water and Lemons
Ben Evans created this absolutely incredible CSS only artwork.

Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom
Nolan Lawson shares how he built a carousel with native browser APIs.

Making Future Interfaces: Inline SVG
A fantastic video by Heydon Pickering on inline SVG, how to hand code SVG, and how to make generative art with SVG and JavaScript.

Intro to Font Metrics
An article by Weston Thayer where he takes a look at font metrics.

How I got rid of the new sponsored Facebook posts
Maurizio Carboni shares how he wrote a script that descrambles the DOM structure created by Facebook to confuse AdBlockers.

instant.page
Instant.page preloads a page right before a user clicks on it and thereby helps to make a page feel more “instant”.

Ludwig
Ludwig is a toolbox by Uber that allows to train and test deep learning models without the need to write code.

Solar System 3D Animation (Pure CSS)
A fantastic demo by Fabricius Seifert.

Understanding Service Workers and Caching Strategies
Aayush Jaiswal’s guide will help you understand service workers and when to use which caching strategy.

Constructable Stylesheets: seamless reusable styles
Jason Miller writes about Constructable Stylesheets which are a new way to create and distribute reusable styles when using Shadow DOM.

Tips for making interactive elements accessible on mobile devices
Ire Aderinokun covers some of the new Web Content Accessibility Guidelines that relate to interactive elements on a web page.

CSS Scroll Snap – How It Really Works
Learn how to use CSS Scroll Snap in this article by Itzik Pop.

Miu Miu Twist
A great little pixel art promo game.

Uppy
In case you missed it: Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application.

Free Font: Karton
A decorative typeface made by Elena Voynova.

Rainbow Tunnel
A mesmerizing demo by Tiibiix.

SVG Filter Effects: Conforming Text to Surface Texture with <feDisplacementMap>
Learn how to make text conform to the texture of a surface using feDisplacementMap in this fifth article of our SVG Filter series.
Collective #492 was written by Pedro Botelho and published on Codrops.