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 →
Tag Archives: link
Create interactive SVG maps in React with
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
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”
CSS Utility Classes and “Separation of Concerns”
Haha, now this sounds all too familiar: Over the last several years, the way I write CSS has transitioned from a very “semantic” approach to something much more like what is often called “functional CSS.” The author lists 5 stages: Phase 1: “Semantic” CSS Phase 2: Decoupling styles from structure Phase 3: Content-agnostic CSS components …
Continue reading “CSS Utility Classes and “Separation of Concerns””
Removing that ugly :focus ring (and keeping it too)
Update 2021-01-28: Nowadays we can use :focus-visible for this; No JavaScript needed! David Gilbertson: You click a button and see a blue border telling you that you’ve clicked on something that you know perfectly well you’ve just clicked on — because you just clicked on it. So it’s clear: the outline must go. But hold on a …
Continue reading “Removing that ugly :focus ring (and keeping it too)”
CSS Grid Highlighter for Google Chrome
Basecamp Employee Handbook
For over 10 years, we didn’t have a handbook. In those 10 years, when a new person joined the company, they were expected to figure things out for themselves. But when we grew from a company of 10, 20, 30 employees to a company of over 50, our “introduction by immersion” style stopped working. New …
Expo – Easily build apps with React Native
From time to time I’ve seen good things about Expo fly by on the Twitters, which piqued my interest: Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. Expo apps are React Native apps which contain the Expo SDK. The SDK is a …
Continue reading “Expo – Easily build apps with React Native”