Recently I landed a gig at a company to help their team out with their React work (using Redux). This list of tips – save for number 10 – resonates quite well with what I’ve been introducing there: Plan 1 day of training per developer dedicated to Redux Integrate Redux-dev-tools as early as possible Use …
Puppeteer – Headless Chrome Node API
Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome. const puppeteer = require(‘puppeteer’); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(‘https://example.com’); await page.screenshot({path: ‘example.png’}); browser.close(); })(); Puppeteer – …
Electron Webpack Dashboard
Ken Wheeler, who also created the aforementioned webpack-dashboard, has now created an Electron based version: The original webpack-dashboard, was fun and people seemed to like it. Unless they were on Windows, or used a weird terminal set up, or if they just wanted more. The original dashboard felt like working at NASA. 50 years ago. …
Create interactive SVG maps in React with react-simple-maps
react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson. react-simple-maps → Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation: How to create pure react SVG maps with topojson and d3-geo → Mapping Tutorial: Combining Victory Charts and React-Simple-Maps →
The Difference Between Explicit and Implicit Grids
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to …
Continue reading “The Difference Between Explicit and Implicit Grids”
AR.js: Efficient Augmented Reality for the Web
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 …
Continue reading “Masonry Layout with CSS Grid and grid-auto-flow: dense;“
Morphing Page Transition
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect. <div class="content …
How to use Redux in highly scalable JavaScript applications
Alexis Mangin: I have recently worked on the first version of a React-Native mobile app for one of my clients, which desired to architecture the app in a scalable way for a painless experience to add new features later. I believe we should always think about app architecture that way as it can always scale …
Continue reading “How to use Redux in highly scalable JavaScript applications”