Clearing tabs: npx, Mermaid, diagrams, hugo and fountain pens

I’m having real trouble “clearing my tabs.” I have this rule that every time I learn something new, I leave it open as a tab on my Mac, phone or iPad. I’m probably right now at over 100 unposted items, so it is pretty out of control. I think I’m changing my strategy to just trying to clear all the tabs on a single device once a week.

So in reverse tab order, here are the many things that I see this week that are living on my main Mac:

  1. Npm install -g vs npx. I’ve been perennially confused by which command to use, but the simple idea is that if you are going to reuse the utility, then you need to do a npm install -g which means install for all users. If it is just for your local development project, then you can do npm install without the g. So, what’s the point of npx it stands for npm execute, and what it means is that if you just need it occasionally, it will go out to the Internet download the module, and execute it but it won’t leave anything permanent. Most of the time I use npm install -g in a script to have it around.
  2. Mermaid as a better description language. The DOT language that graphviz uses is pretty clunky, but Mermaid is a much simple language and more expressive, you can make flowcharts, you can add font-awesome icons and the syntax is very Markdown like.
  3. Using Mermaid in Jupyter. What is super cool is that you can use Mermaid in Jupyter pretty easily, the trick is that there is a free Mermaid rendering service, you feed it a base64 encoded text document and it produces an image, this is way nicer than using Python Graphviz, you literally feed it a text string and get back an image. Really cool.
  4. Diagramming beyond Graphviz Dot and Draw.io with diagrams. Thanks to a wowchemy, I learned about Mermaid. I had previously been using Graphviz and the Python support to do charting for things like patents, but it felt so 1980s particularly with the need to use raw HTML tables to make complex objects. Fortunately, there are quite a few tools I’ve found. For instance, diagrams is a command-line tool that ingests a zillion formats (include dot) and produces an image. The basic idea is that you run diagram watch in the background and any time you create a file of whatever type, it will produce the SVG or JPG automatically. This is not particularly graphical but is really nice if you are doing large-scale document production and want to use to do “diagram as code” or better yet “diagram as description” easily. Turns out that there are lots of formats other than Mermaids like for instance Sequence Diagrams that are used for user interactions, so Diagrams can consume them all.
  5. Mermaid diagrams in GitHub through mermaid marked code blocks. OK, this is a bit of a niche use case, but if you want a nice diagram in your GitHub repo, there is no way to get it. Git flavored Markdown (GfM) does not support graphing languages like Mermaid, but you can sort of getting there if all your users use Google Chrome, Firefox, or Opera and are willing to load a browser add-in. That sounds like a small universe, but there it is, this browser extension turns code blocks that have a mermaid type into flow charts.
  6. From vim preview markdown. OK, so this led me down the rathole of how you can look at Markdown visually from inside Vim. Mermaid has a plug-in that claims to do this, but it doesn’t work. I found that markdown-preview is really powerful. First I found vim-markdown-preview which supports basic markdown, but markdown-preview handles Ktext, Planuml, Mermaid, and dot even, so it is really nice. So with Ctrl-S you can run a preview window and Ctrl-P toggle preview on and off. It even handles table of contents by detecting [[toc]] and it detected looking for a uml code block and it handle math using the Katex syntax which looks like $\sqrt{3x-1}$ so between dollar signs and finds mermaid code blocks too and js-sequence-diagrams by look for sequence-diagram code blocks and flowchart format by looking for flowchart blocks and finally good old dot with dot code blocks. It works well for editing, but for users, you still need a way to show these blocks properly which is where tools like diagram come in handy.
  7. Wowchemy Hugo. Wow the miracles of wandering around, needed to get a site going for Grace and I’ve been using Themefisher Hugo fonts which is a bit of pain with documentation and other issues, but looking at the Academia theme (super powerful), there is both a Themefisher port and then Wowchemy (looks like a great one-man band) port. That one is fantastic as he actually supports widgets. The document is a little confusing as are all Hugo themes right now but the basic idea is that you have a series of widgets that you can turn on and off, each page on your site lives in a directory ./content/name-of-your-page-dir so for instance, the home page is in ./content/home and then you get a series of widgets that are separate markdown files in that directory. And it even bundles the Netlify CMS in it (which is a pain to work mainly because Netlify Identity doesn’t work, you need to toggle it on and off). You can turn anything on by adding active=true in the yaml files so it is a nice way to turn things on and off. Finally, you can add new pages (which they call a landing page) just by editing ./config/_default/menu.yaml which is really pretty simple. You can even make a slide deck online.
  8. Great fountain pens and fixing the TWBSI 530. I have a fountain pen and have been doing more writing and finally got it going. This is a $50 pen and I got it years ago, but never really figured out how to make it work. The confusing part is how to load the ink, I couldn’t figure out the graphics on the one-page sheet, but you basically dip the nib into the ink and then turn the back of the thing. Of course, I took the whole thing apart, and then it wouldn’t go back together so it leaks. Philip at TWBSI is so amazing, I send an email and then literally one minute he is later and tells me I have probably cracked something in the assembly, one $4 PayPal later and the replacement part is on the way. Wow, that is soooo great! I had first gotten it because of great reviews (which they still have with the current Diamond 580, I have the 530). The thing by the way writes superbly. I have the fine nib and once the leak is fixed, it is going to be my daily driver. As a technical aside, this doesn’t have an ink cartridge, so you need ink to go with it, I got a fancy Japanese ink and it really easy, just stick the nib in and turn the back. These things are called demonstration pens because you can see the ink inside which is pretty cool.
  9. Buyers guide to fountain pens. So now of course I want to get a really nice fountain pen for less than $100, there are quite a few review sites, but it is hard to know what a good one is as the prices literally range from $15 to $1,000. I have previously used Jetpens.com or Pen Chalet when I was really into this and got some great ones, but it is literally raining pens. The Lamy Studio is a good example of a super sleek modern pen and the Diplomat Optimist is a so-called professional pen that is simple with etched lines and it is cartridge base so easier to fill. And for $40, you can get a pen made by Sailor in Kobe Japan, the Nagasawa Original Profit Jr. Skeleton which uses Sailor ink cartridges, or if you want an American-made one, you can get the Karas Kustoms which makes conventional pens, and the Fountain pen version for $70.
  10. The high-end pen market (under $200). The LAMY 2000 is one of the most iconic pens of all time from Bauhaus, Germany (just go one size smaller on the nib as it is very wet and broad). AND of course from Japan, there is the Sailor Pro Gear Slim with 14K nibs (and if you morecolors, they make the Nagasawa stationary brand like the Nagasawa Original Pron Gear Slim as well (like the Nagasawa Original Profit Skeleton which is a demonstrator/clear pen). More expensive is the Pilot Custom 823 has been called the ultimate writes pen and a great graduation gift too which is the classic Japanese pen with gold nib literally. Or you can get an Italian pen that is displayed at the MoMA as well called the Aurora Hastil (note the LAMY 2000 ad copy says it is also there, but no one can find it), although there is the Platinum Pen Mechanical Pencil and Ball Point Pen
  11. Picking the right nib. Most nibs are rounded, but you can also get a calligraphy or stub nib which gives those cool wide vertical strokes and narrow horizontal ones. The common nib is 1.1mm or Medium but Japanese nibs tend to be smaller since their characters are finer. Technically speaker a medium nib will give you 0.75mm for medium Western or 0.5mm for Japanese (so a Japanese medium is a Western fine). The basic pro of a broader nib is that the ink looks better but you have to use high-quality paper (why use a fancy pen on crappy paper I guess would be the main point). Finally nibs can be very firm (like the Lamy steel nibs) so they don’t have variations, but gold nibs tend to have some line variation which is pretty. As a final point, the nib sizing is based on where the nibs are sources, so the Lamy 2000 as an example is a Western size with firm flexibility which is good to know.
  12. Pen convertor which means that you can use it a bottle as well. The cartridge is the easiest to carry and not messy, but if you want just about any ink, then you do not get all the zillions of bottles so you have a converter which you plugin where the cartridge goes, and then with a piston converter, you stick the nib into the ink then either rotate or if it is a squeeze one, then fill it. And of course, some pens are just designed to use ink with a builtin piston or vacuum mechanism

I’m Rich & Co.

Welcome to Tongfamily, our cozy corner of the internet dedicated to all things technology and interesting. Here, we invite you to join us on a journey of tips, tricks, and traps. Let’s get geeky!

Let’s connect