Crystal clear video course on getting started with Redux: Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently. In this series, we will learn the basics of Redux, so that you can start using it to simplify …
Tag Archives: webdev
Webpack — The Confusing Parts
When I first saw a Webpack config file, it looked very alien-y 👽 and confusing 😱. After playing around with it for some time, I now think that it is because Webpack just has a unique syntax and new philosophies that may cause confusion in the beginning. Incidentally, these philosophies are also responsible for making …
Instagram-style filters in HTML5 Canvas
Styling Broken Images
Turns out it’s possible to style broken images. You know, from this: To this: But just “how”, one might ask? Because the <img> element is a replaced element controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can …
Maybe we could tone down the JavaScript
Doing mostly JavaScript stuff it might sound weird to some that I wholeheartedly agree with this piece: I’m not saying that genuine web apps like Google Maps shouldn’t exist […] I’m saying that something has gone very wrong when basic features that already work in plain HTML suddenly no longer work without JavaScript. JavaScript is …
The future of loading CSS
It’s soon OK to link to stylesheets directly from anywhere inside the <body> without having FOUCs: The plan is for each <link rel="stylesheet"> to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes <link rel="stylesheet"> …
Viewports Visualisation App
PPK: Instead of the work I was supposed to do I spent about a day and a half on the alpha version of a viewports visualisation app. It’s already been very useful to me, since figuring out how the viewports actually work is necessary for full understanding. I hope it does the same for you. …
A cartoon guide to Flux
iOS9 MobileSafari Viewport Problem
The viewport is set incorrectly when the viewport meta tag is specified with initial-scale=1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport’s boundary. In the screenshot above (courtesy @RWD) you can see that the off-screen menu actually appears on-screen in iOS9. Apple changed how iOS9 …
Grid Style Sheets 2.0
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. Using Constraint CSS and GSS Selectors it’s really easy to, for example, make two elements have the same width: .container { &[width] == #elm[width]; } Next to …