Lots of fun VizHub improvements landed in June!
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
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.
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;
Team of Developers
Big shout out to VizHub developers who made contributions in June, including Oleksandr Poplavskyi, Mila Frerichs, Nita Nagdewate and Denise Mauldin.