IEEE VIS 2023; Simply Placeholders; A Single Div

Cleverness has eluded me on this gray, Maine Monday (y’all might argue it does most days), hence the bland tagline for today’s edition. But, it does the job, since those are the topics we’ll be hitting today.

TL;DR

This is an AI-generated summary of today’s Drop.

Perplexity actually “errored out” on the first attempt at the summary today.

It literally told me “I’m sorry, but I cannot provide a concise three bullet summary of the attached file as it is a blog post with multiple topics and sections”.

Odd.

I used the exact same prompt immediately after, and it provided the following, sans links.

O_O

Somehow, I’m not fearing “AGI” too much, this day.

The hiccup was very likely caused by Perplexity engineers tweaking the system prompts. Either that, or their stochastic parrot started drinking, again.

The blog post has three main sections:

1. IEEE VIS 2023: The IEEE Visualization Conference is currently taking place and is the highest-rated venue for visualization research and the second-highest rated conference for computer graphics overall. The conference includes contests, symposia, tutorials, workshops, and an arts program held during the week. Full papers accepted to IEEE VIS will appear in a special issue of the IEEE Transactions on Visualization and Computer Graphics (TVCG) and will be indexed in IEEE Xplore.

2. Holder.js: A small JavaScript library that lets you insert rectangular SVG placeholders in <img> tags. It’s super helpful when framing out a new app or website, or using as a temporary placeholder while a large image is downloading or being rendered on the fly. The library is fairly popular and available by NPM (et al.).

3. A Single Div: A CSS drawing project by Lynn Fisher, a designer, CSS developer, and illustrator. Every drawing consists of a single HTML element (in this case, the beloved <div>). Lynn’s GH repo has all the source for the project. Lynn also started Divtober, which is a challenge for all to create a single div CSS illustration for each day in October.

IEEE VIS 2023

Some folks have the “World” Series (it’s just U.S. teams, ppl. Srsly.). Others have the Über Bowl. Yet more have the World Cup (et al.). I have IEEE VIS.

IEEE VIS 2023 (IEEE Visualization Conference) kicked off on Sunday and two of my superheroes — Matthew Kay and Lane Harrison — are in attendance and have some excellent papers/presentations there this week.

This annual conference on scientific visualization, information visualization, and visual analytics is administrated by the IEEE Computer Society Technical Committee on Visualization and Graphics. It also just happens to be the highest rated venue for visualization research and the second-highest rated conference for computer graphics overall, as ranked by Google Scholar’s h-index metric in 2016.

IEEE VIS solicits novel research contributions and innovative applications in all areas of visualization. Full papers accepted to IEEE VIS will appear in a special issue of the IEEE Transactions on Visualization and Computer Graphics (TVCG) and will be indexed in IEEE Xplore. (IEEE VIS is currently investigating the alternative publishing of accepted papers in an Open Access Journal, such as IEEE Open Journal of the Computer Society (OJ-CS)).

IEEE VIS includes contests, symposia, tutorials, workshops, and an arts program held during the week. The program features a diverse range of symposia and co-located events, including Visualization in Practice, Visualization in Data Science, the VIS Arts Program, and data analysis Challenge competitions, as well as an Application Spotlights track.

While the TVCG is not free for those of us without institutional subscriptions, you can Kagi search the title of this year’s accepted papers and very likely get an arXiv preprint, and sometimes even a link to a git repo!

I won’t steal any thunder before various workshops are held and papers are presented, but I will be dropping some favs in these Drops towards the latter half of the week. Stay tuned!

UPDATE:

Friend of the Drop Dr. Robert M. Flight noted I was super remiss in mentioning that there are attendees of IEEE VIS on Mastodon, and posting under the #ieeevis hashtag (you can follow that from your own instance as well)..

Simply Placeholders

Holder.js is small JavaScript library that lets you insert rectangular SVG placeholders in <img> tags. It’s super helpful when framing out a new app or website, or using as a temporary placeholder while a large image is downloading or being rendered on the fly.

The demo site holderjs.com does not work over HTTPS, so I cannot in good conscience shunt you there for the demo. What I can do is shunt you to a mirror I made of it that also has an unminified, properly symbol-named (thanks to Perplexity), and modified color version of the demo.js hosted at the more dangerous site. While I’m no fan of how “HTTPS Everywhere” came about (it was and is super reckless and conceit-filled), hitting public internet sites of HTTP in this day and age is a dangerous affair.

My version also uses local server copies of some included JS files and removes the silly counter code, so it’s telemetry-free. And, I have Caddy configured to suppress logging of requests to that URL/domain.

It’s pretty easy to use. Here’s an example <img> tag with data-src set to have Holder.js create a 182×120 SVG rectangle with a given color:

<img 
  data-src="holder.js/182x120?bg=#a7bfef&amp;fg=#8598bf" 
  style="top: 0px; left: 0px;"
>

When Holder.js runs on the page (or you call it directly), it will modify it thusly:

<img 
  data-src="holder.js/169x120?bg=#a7c0ef&amp;fg=#8599bf" 
  style="top: 0px; left: 0px; width: 169px; height: 120px;" 
  alt="169x120" 
  src="data:image/svg+xml;charset=UTF-8,
%3Csvg%20width%3D%22169%22%20height%3D%22120%22%20xmlns
%3D%22http%3A%
2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20169%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18b5be486b7%20text%20%7B%20fill%3A%238599bf%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18b5be486b7%22%3E%3Crect%20width%3D%22169%22%20height%3D%22120%22%20fill%3D%22%23a7c0ef%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2258.55078125%22%20y%3D%2264.5%22%3E169x120%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg
  %3E%3C%2Fsvg%3E" 
  data-holder-rendered="true">

That data URI prettifies to:

<svg width="169" height="120" xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 169 120" preserveAspectRatio="none">
  <defs>
    <style type="text/css">
    #holder_18b5be486b7 text {
      fill: #8599bf;
      font-weight: bold;
      font-family: Arial, Helvetica, Open Sans, sans-serif, monospace;
      font-size: 10pt
    }
    </style>
  </defs>
  <g id="holder_18b5be486b7">
    <rect width="169" height="120" fill="#a7c0ef"></rect>
    <g><text x="58.55078125" y="64.5">169x120</text></g>
  </g>
</svg>

The library is fairly popular and available by NPM (et al.).

A Single Div

“A Single Div” (2014-2019 creations | 2020-2023 creations) is a CSS drawing project by Lynn Fisher, a designer, CSS developer, and illustrator.

As Lynn describes it, “A Single Div” is a fun, little project to see how much can be accomplished with CSS. Every drawing consists of a single HTML element (in this case, the beloved <div>).

Lynn’s GH repo has all the source for the project. While you could just “View Source” in your browser, Lynn uses Pug — robust, elegant, feature rich template engine for Node.js — as a CSS pre-processor. You can check out the Pug sources and compare to the renders. Pug’s docs are pretty accessible, too.

Lynn’s slick render of Elon’s IRL-hideous, daft, and still unavailable Cybertruck is in the section header. You can check out the pre-Pug’d source which renders to the code, below:

While rendering those with SVG might have been easier and more cross-browser compatible, it’s remarkable to see what can be accomplished purely in CSS.

Lynn also started Divtober, which is a challenge for all to create a single div CSS illustration for each day in October. I’m a bit late to the party sharing this, but you still have time to play and/or catch-up. Today’s prompt is “Alive”, if you choose to do so. Lynn has been running this since 2019, and you can find lots of entries on the internets if you Kagi for ‘”divtober”’.

FIN

If you do end up div-ining some entries for Lynn’s content, drop a note! ☮️