Side-channel attacking browsers through CSS3 features

Ruslan Habalov and Dario Weißer found a way to read contents from an iframe, using CSS3: Accessing the DOM of an iframe that includes a cross-origin resource is forbidden by default. However, the content of the iframe was displayed in the same context as the rest of the site so we wanted to verify if …

Awesome Talks

Great site developed by Sara Vieira (@NikkitaFTW): Awesome Talks is an awesome list of tech talks to watch that is constantly updated by the community and is a great way to find an interesting talk to watch during downtime. The talks are categorised, and one can submit talks themselves (if they’re on YouTube that is). …

React Native Parallax Scroll Header with Tabs

Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling. Essentially, everything but the header is put into a scrollview. In order to keep elements ‘fixed’ (i.e. the tab bar), I use the transform property with a translateY that is set to …

Unicode Patterns with <css-doodle />

<css-doodle /> is a web component for drawing patterns with CSS. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself. Combine <css-doodle …

Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS

Handcrafted recreation of an 18th-century oil painting using just HTML and CSS. Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish: Chrome only though: Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything …

Destructuring arrays in PHP: Practical examples

Being more focussed on JavaScript nowadays, I kinda forgot that it’s possible to destructure arrays in PHP ever since the release of PHP 7.1. Frank de Jonge provides us with some practical examples such as this simple one: // JavaScript let options = {enabled: true, compression: ‘gzip’}; let { enabled, compression } = options; console.log(enabled); …

What the React Native docs forgot to tell you about animations

Good article by Karen de Graaf to use along with the React Native docs on Animations Unfortunately React Native’s documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. That’s why I wanted to give you a quick overview of the things I think need a …

“last 2 versions” considered harmful

When using babel-preset-env with the list of supported browsers set to “last 2 versions” – which I am doing used to do – you’re basically supporting browsers that are dead or have no users. Take Internet Explorer for example. It’s been replaced by Edge and will never have any new versions after Internet Explorer 11. …