Inspecting Redux Stores in Production, without the Redux Devtools

Checking out the Redux Store of Soundcloud Redux Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things. When it comes to React apps that use Redux I like …

The Thistlegorm Project

One of the most famous wrecks to dive on is that of the SS Thistlegorm, a British merchant steam ship that was sunk by German bombers on 6 October 1941 near Ras Muhamad (Red Sea, Egypt). The University of Nottingham, Ain Shams (Cairo) and Alexandria University have joined forces to create a 3D model of …

Strategies for Derailing a React Conversation

Fun list tweeted just now by Redux creator Dan Abramov: Strategies for derailing a React conversation: HOC vs render props Is binding functions expensive CSS in JS PATENTS Redux Web Components class vs className <If> Size of node_modules Context I wonder which ones, if any, will matter in three years. Always keep questioning the status …

Rendering Sites Fullscreen in Safari on iPhone X / Introducing “User Agent Variables” (CSS Environment Variables)

What the …? By default, the new iPhone X in landscape mode will contain sites in the so called “safe area”, resulting in white bars being rendered on either side of the site (src). The color, white by default, can be tweaked by altering the background-color on the <body> element. Do note that it’s only …

Silex Routing vs Trailing Slashes

In Silex-based projects I always define my routes with a trailing /. When defining a route with a trailing slash, the router will respond to both the route without and with slash: $app->get(‘/hello’, …); will respond to http://localhost/hello but not to http://localhost/hello/ $app->get(‘/hello/’, …); will respond to http://localhost/hello and to http://localhost/hello/ Unfortunately this only works …

ESNext Proposal: The Pipeline Operator

The pipeline operator is essentially a useful syntactic sugar on a function call with a single argument. In other words, sqrt(64) is equivalent to 64 |> sqrt. This allows for greater readability when chaining several functions together. With the Pipeline Operator, one could rewrite this … let result = exclaim(capitalize(doubleSay(“hello”))); … to this (think Unix …

Masonry Layout with CSS Grid and grid-auto-flow: dense;

By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁‍♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …

Vertical margins/paddings and Flexbox, a quirky combination

In CSS, percentage-based paddings are – as per spec – calculated with respect to the width of an element. However, for flex items (e.g. items whose parent have display: flex; applied) that’s not always the case. Depending on which browser you are using the percentage-based padding of a flex item will be resolved against its …

Shipping ES6 ES2015 Modules to Browsers

UPDATE 2017.09.13: Deploying ES2015+ Code in Production Today also provides a good writeup on this subject. Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy. The modules Let’s take these 2 simple modules for example: // main.js import {x} …

What’s new in JavaScript? ES2017 Language Features

The ECMAScript 2017 Language Specification – the 8th edition of the spec – was officially released at the end of June by TC39. 💁‍♂️ ICYWW: Should we say ES2017 or ES8? → Say ES2017. Back in the day ES6 was (and still is) used a lot to refer to ES2015, but one should be referring …