Conversation
Plots are exported at ~1500x1500, and the page now ships 100+ of them. Re-encoding the notebook's PNG output as quality-85 WebP cuts the image payload from 8.5 MB to 2.6 MB with no visible loss. Filenames keep the MD5-of-base64 scheme so unchanged plots keep their URLs. image_from_cell now also returns the pixel dimensions, which the template uses to reserve layout space.
Every plot image but the first one now loads lazily and decodes off the main thread, so a visit only fetches what the reader scrolls to. The width/height attributes come from the rendered image, which keeps the cards from collapsing and reflowing as images arrive. Also adds alt text, which the images never had.
The whole point of the site is lifting a snippet into your own notebook, which until now meant selecting the pygments markup by hand. One delegated click handler covers all 101 panels and falls back to a "Press ⌘C" hint where the clipboard API is unavailable. Also drops the $.bigfoot() call: the library was never loaded, so it threw on every page load.
The heading already carried a deep link, but it was a Font Awesome icon and Font Awesome is not loaded, so it rendered as nothing. A muted # after the title is visible without competing with the heading.
og:image pointed at a cover.png over plain http, so previews were insecure-mixed-content at best. It now points at the banner over https, with the large-image Twitter card, matching twitter:* tags, a canonical URL, and a description that names the libraries the page actually covers.
Ten file-folder tabs wrapped to two ragged lines and broke the metaphor. Chips wrap cleanly instead: all libraries fit one line at 1200px and up, and stack tidily below that. Also fixes the hvPlot label casing.
The R highlight branch compared the display name against the slug, so it never fired and R code was highlighted as Python. col-xs-12 is a no-op in Bootstrap 4, letting code panels overflow on phones; col-12 is the correct class.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
Ten libraries made the per-card
nav-tabsrow wrap into two ragged lines that read as broken layout. The selector is now a compact pill row: one line at 1200px+, tidy wrap below, active pill in the code panel's#202020so the control visually binds to its output. Two latent template bugs fixed in passing: R code has never been syntax-highlighted (the lexer branch compared display name against slug and never fired), and Bootstrap 3'scol-xs-12(a no-op in Bootstrap 4) let code panels overflow ~50px on phones.Stacked on #29 (
perf-ux).Files to review (3):
web/css/custom.css(start here).library-pillsblock: chip sizing, white-on-gray inactive chips, dark active chip. Scoped by class so it can't leak into the navbar.templates/t_index.htmlnav-tabs→nav-pills library-pills; slug comparison for the R highlight branch;col-xs-12→col-12.render.pyhvplot (Bokeh)→hvPlot (Bokeh).Reviewer notes
FALSEnow gets keyword classing from the R lexer.