Wavethrough – Stealing data from remote sites through (fake) wav files

Jake Archibald discovered a really nice browser bug (which is fixed by now) by which he was able to steal data from remote sites by loading it in as a (fake) wav file. The exploit works as follows: Make a request to evil-script, using a Content-Range header to suggest there’s more data to be loaded …

The Layouts of Tomorrow

With CSS Grid being available, Max Böck set out to find himself a layout challenge: I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight. He settled on the “Digital Walls” shot (pictured …

React Native at Airbnb

Gabriel Peal, Android developer at Airbnb: In 2016, we took a big bet on React Native. Two years later, we’re ready to share our experience with the world and show what’s next. The result is a 5-part series of posts: Part 1: React Native at Airbnb Part 2: The Technology Part 3: Building a Cross-Platform …

How Apple can fix 3D Touch

Eliz Kılıç writes down something that’s been bothering me too: Apple introduced 3D Touch and its new related interactions Peek and Pop in 2014. It’s been almost 4 years since its first introduction, yet people don’t know/use 3D Touch. Why would they? Even tech-savvy users don’t know which buttons offer 3D touch. Let alone regular …

Rearrange / Animate CSS Grid Layouts with animate-css-grid

In a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this – e.g. Isotope – don’t play nice with CSS Grid. Installation per NPM/Yarn: yarn …

Switching PHP versions with Laravel Valet

⚠️ Running Valet 2.x with a PHP version lower than 7.1 won’t work, until this issue is resolved. You can still switch to that version for use on the CLI. You just won’t be able to use it with Valet 2.x ℹ️ UPDATE 2018.10.23: Freek has developed some handy aliases to easily switch PHP versions. …

Siema – Lightweight and simple carousel with no dependencies

Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling.It is 100% open source and available on Github. It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project. I especially like the fact that …

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 …

Responsive UIs in React Native

On the web it is – by now – obvious that you make your website responsive (*). Using a listener listening to the change event of the Dimensions API, it’s also possible to implement this kind of behaviour in React Native. import {Component} from "react"; import {Dimensions} from "react-native"; export default class LogDimensionChanges extends Component …

Dynamic Bézier Curves

Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through …