A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “React Native Parallax Scroll Header with Tabs”
At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini. CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to …
Continue reading “Demystifying the future of CSS with sparkles of JS”
<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 …
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 …
Continue reading “Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS”
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); …
Continue reading “Destructuring arrays in PHP: Practical examples”
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 …
Continue reading “What the React Native docs forgot to tell you about animations”
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. …
Rachel Andrew: An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed …