JSUI – A tool for visually organizing, creating and managing JavaScript projects.

Highly interesting tool by Kitze: 🗂 Organize & group apps 🤖 Generate new apps 🔍 Search apps & preview files 🏃‍♂️ Quick actions ✅ Run scripts 🗄 Manage dependencies 🔌 Apply plugins 📄 Generate files This will surely help out developer starting with JavaScript based projects. More features are tweeted out regularly on JSUI’s Twitter …

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 …

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 …