VizHub Changelog June 2020

By Curran Kelleher
Published: June 16, 2020

Lots of fun VizHub improvements landed in June!

Manage Collaborators

Add real-time collaborators.

Presence Avatars

You can see little avatars for other people editing in real time.

Mobile Optimizations

Improved layout for home page on mobile.
Before (that up arrow, when clicked, put the UI into a broken state).
Don’t show up arrow on mobile (no strong use case).

Also, a minor bug was fixed for mobile where the “Close Editor” button was not doing anything. Now, clicking “Close Editor” on mobile closes the active file (on desktop, it only hides the sidebar).

Link to Line Number

Click a line number & copy the URL to link to line number!

Don’t wrap JS code. As I wanted to demo something – I found myself wishing that the code did not wrap. Use case: show just enough horizontal code to tweak a single variable. All else should just go off the screen rather than wrap.

Before – wrapping enabled on JavaScript.
After – wrapping disabled on JavaScript (everything else still wraps!).
Home page unfurls!
Search for users.
Before & after – fall back to username if full name is not defined (in collaborator UI as well).

System Font Stack

Now VizHub uses a system font stack for both body copy and code. Though thoughtfully applied custom fonts are cool and look nice, they are not a defining factor. VizHub was loading 3 custom fonts (Poppins, Inter, and Ubuntu Mono with Ligatures), and this was causing performance problems. There was a noticeable flash of the UI where the font changed after loading. Since we are striving to make VizHub lean and functional software, it just doesn’t make sense to pull in the extra KBs. This is especially for the mobile use case, where data is at a premium.

The actual system font stack in use in VizHub is a hodge podge of mixed bags so to speak. It’s a system font stack inspired by what’s currently in use by system-font-adherent giants such as GitHub and Twitter. VizHub includes the addition of Ubuntu and Ubuntu Mono – favorites for Ubuntu users! Also special emoji fonts because 🤷

font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace

Team of Developers

Big shout out to VizHub developers who made contributions in June, including Oleksandr Poplavskyi, Mila Frerichs, Nita Nagdewate and Denise Mauldin.