D3 in Depth has dedicated a chapter to rendering geographic information. D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser. D3 in Depth: Rendering Geographic Information →
CSS Variables and Reduced Motion
Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting –duration to 0 it basically …
Theming with CSS Custom Properties (CSS Variables)
Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed. :root { –column-bg: #ae0001; –menu-bg-hover: #680001; –active-item: #D3A625; –active-item-text: #680001; –hover-item: #BE0002; –text-color: #FFFFFF; –active-presence: #00FFBA; …
Continue reading “Theming with CSS Custom Properties (CSS Variables)”
Uber Visualization Nights: deck.gl
Every Solar Eclipse Happening in your Lifetime
The Washington Post has created a nice article on the upcoming solar eclipse that will cross the United States On Aug. 21, a total solar eclipse will be visible from the contiguous United States. It’ll be the first to traverse coast to coast in nearly a century. There will be 69 total solar eclipses visible …
Continue reading “Every Solar Eclipse Happening in your Lifetime”
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} …
Luke Skywalker’s Landspeeder™ Kid Electric Car
Luke Skywalker’s Landspeeder™ by Radio Flyer is modeled after the sand-pocked and sun-faded X-34 craft from Star Wars: A New Hope. With seats for 2 riders, an interactive dashboard with lights and real movie sounds, and a 5mph driving speed, this speeder provides a truly galactic driving experience. For a whopping $499 this baby can …
Continue reading “Luke Skywalker’s Landspeeder™ Kid Electric Car”
Detect unnecessary renders in React with why-did-you-update
why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same. Installation per npm, of course: npm install –save-dev why-did-you-update No need to adjust all your components either, why-did-you-update works by patching React itself: import …
Continue reading “Detect unnecessary renders in React with why-did-you-update“
sw-toolbox – A Collection of Tools for Service Workers
Service Worker Toolbox provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources that you don’t want precached. The code itself is very readable I must say: importScripts(‘sw-toolbox.js’); toolbox.precache([ ‘/css/app.css’, ‘/img/logo.png’ …
Continue reading “sw-toolbox – A Collection of Tools for Service Workers”
CSS is simple, but not easy
Good observation by Jeremy Keith, after having attended (the magnificent) CSS Day: Unlike a programming language that requires knowledge of loops, variables, and other concepts, CSS is pretty easy to pick up. Maybe it’s because of this that it has gained the reputation of being simple. It is simple in the sense of “not complex”, …