Drop #240 (2023-04-13): Offline Edition
Discover more from hrbrmstr's Daily Drop
Drop #240 (2023-04-13): Offline Edition
👀 (VS Code) Observable Notebooks; ➕ MDN (Plus); 📵 Take A Walk On The Offline Side
Today is an infrequent travel day for your friendly neighborhood, hrbrmstr. The internet was on 🔥 again yesterday, so I had less time to devote to Drop prep than I normally do, which means I'm putting the finishing touches on today's edition sitting on the 🚊 Amtrak Downeaster (Dover, NH → Boston leg). I've complained about this particular commute before, so the TL;DR is that the internet connectivity along this particular stretch is abysmal.
As such, I rely heavily on my system-local cadre of resources to Get Stuff Done™ (when I am in such a mode…normally I try to sleep the segment away). It also means I go through my “offline checklist” which entails (amongst other non-digital things):
cloning any new repositories I've been mainly using via various git web interfaces
issuing fresh pulls of already cloned repos
ensuring I've got a fresh cache of devdocs.io
updating MDN docs to the latest version
verifying I had Google Apps offline enabled
double-checking that I'm running the full Language Tool Docker container (I lean pretty heavily on Language Tool since being stuck in long covid land)
force-updating all daily/nightly/insider apps I use (e.g., VS Code, RStudio, Quarto, etc.)
a few more items, but this list is already long enough
When I'm done tweaking this edition, I'll be hacking on the Observable version of my nascent solar system plot. That situation inspired me to dedicate this issue to providing some resources and guidance on how to:
use Observable offline (outside of Quarto),
access MDN resources site offline, and
an intro to how to enable offline access for (almost) any web thing you create.
Let’s dig in!
👀 (VS Code) Observable Notebooks
The online nature of the ObservableHQ platform is simultaneously a massive strength, and a bitter weakness. It's great being able to import dependencies from other notebooks and machinate remote data sources with ease and grace. But, none of that will be happening on my train ride, since I won't even be able to access it.
Thankfully, I can still crank on my side project this morning thanks to two of Gordon Smith's VS Code extensions (the VS Code Marketplace links, below, have GH repo links):
The Observable JS extension is a clever tool that enables us to work with reactive programming using, well, observables. I think all readers know about ObservableHQ by now (either from my ramblings or visiting links to it from an increasing number of sources). Still, there’s room for one more (nerdy) TL;DR:
"observables” are a type of data stream that can be used to handle asynchronous events, from a single finite operation like an HTTP request to multiple repeatable actions. They truly help simplify how to add interactivity to any web thing you create and publish.
With Gordon's extensions, you get all the benefits of in-browser ObservableHQ notebooks right in local VS Code. If you've prepared properly and copied over all the notebook dependencies you use, these local OJS notebooks will let you work on them interactively (vs the “edit/render” idiom of Quarto), and sans internet access.
The screenshot in the section header is my solar system notebook that is actually animating those planets (no GIFs for YOU on Substack). When I make an edit — say, to change the min/max animation speed — the changes take effect immediately, just like they do on ObservableHQ.
In fact, the extension supports all the things!:
The screencap is the “.omd” mode, which is great if you have more markdown/HTML than code (say, writing a tutorial). There is another “.ojs” mode where it's a tad more like Observable itself (or what you might see from my Quartize Chrome extension), forcing you to use the html and md tag functions for that content. For Jupyter fans(/monsters), the “.ojsnb” format gives you the silly, separated code blocks you know and oddly love.
You can quickly import any ObservableHQ notebook via a quick command palette incantation and start working offline immediately.
Oh, and all these entities are as easily embeddable as their ObservableHQ counterparts. Observable's runtime is pretty dope.
If you're frustrated by the ObservableHQ interface but still 💙 Observable, you should 100% give these extensions a go. I really don't like coding in webpages. Despite VS Code being an Electron app (i.e., it's really just a web page), it's far from the same idiom as Observable or Jupyter, so my brain just works better in it than on the web.
Programming note: On review, the next two sections ended up (to me) sounding like an advertisement for MDN Plus. I'm not going to edit it any further. But — suffice it to say — I don't shill anything, and the sole purpose for the inclusion of these resources is how valuable the offline content portions are, and how spiffy their tutorials are. Apologies if it appeared to be shill-y.
➕ MDN (Plus)
MDN Web Docs is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript, along with Web APIs. The site further provides an extensive set of learning resources for beginning developers and students, and has a mission to provide a blueprint for a better internet and empower a new generation of developers and content creators to build it.
Now, why I will never use any local app from Mozilla (ever), MDN gets a dedicated place in my “Frontend” Arc Space, and is a site I reference quite a bit throughout the week. I know it's a resource tens (if not hundreds) of thousands of folks rely on as a learning and reference resource since it's well crafted and free. While Mozilla's foundation has some coin, I'm a believer in supporting things I use, and I'm and “MDN Plus” supporter for three reasons:
to help ensure the content is available to others who cannot afford to pay for access to it
the content makes it possible for me to be a better technologist (that word shows you how old I am)
it gives me access to MDN Offline
If you have MDN Plus, you can enable offline access via — https://developer.mozilla.org/en-US/plus/settings.
This is the entire, extensive suite of MDN documentation stored locally on your system, including search (just like devdocs.io). You can also have it auto-update, and notify you when new documentation is available.
As noted earlier in the week, you're going to need to do more with frontend technologies as you produce new content, and MDN is one of the best resources for that.
📵 Take A Walk On The Offline Side
For those who just want to start riffing from code this is a link to the “personal greeting” source project.
“Client-side storage” is an MDN resource that explains client-side storage in web development. The article explains how modern web browsers support various ways for websites to store data on the user's computer with their permission and retrieve it when necessary (my “localforage” WebR experiment covered this, too).
Offline storage allows developers to persist data for long-term access, save sites or documents for offline use, retain user-specific settings for their site, and more. You can store pretty much any asset/data on the client-side, which speeds up access and makes it usable without a network connection.
This tutorial is a step-by-step guide to getting started with client-side storage. It suggests making local copies of the index.html, style.css, and index-start.js files into a new directory on the local machine. While this will make me sound like Captain Obvious, the HTML file defines a website with a header and footer, and the JavaScript file contains code to interact with the local storage API.
You'll learn:
how to use the
localStorageAPI to store and retrieve datahow to use
sessionStorageto store data for a single sessionstorage options — such as IndexedDB and Web SQL Database,
There are also links to further resources for learning more about client-side storage.
You might also be interested in reading the web.dev post — “Create an offline fallback page” — to grok just how much users appreciate having something besides a browser error page when they visit your site.
FIN
As expected, I'm now fully connectionless with 30m left in the commute. So, time to hack on my offline solar system demo and wait til I get settled in to hit "publish". ☮