I'm a technologist living in beautiful Bergen, Norway. I currently hack at code, infrastructure and processes at 

. Technology and specifically anything related to the internet matters a big deal to me, but when I log off most of my time is spent with my family. We have a young girl 👶, a baby boy and a husky 🐾. Some times I publish open source software and some rare times I blog on this space or Medium.com.

Raymond Julin | Technology and thoughts

Learn how to embed Mermaid.js based diagrams in Sanity.

While you can easily create diagrams using a million different tools and then embed them as images in Sanity, it means that both any updates requires a roundtrip and a lot of boilerplate. Most likely, this will drive you away from using small diagrams in places where they might make sense.

Mermaid.js is a tool that lets you define diagrams in 

 with a plaintext format that is then rendered to SVG. This is neat for a few different reasons:

Mermaid syntax is terse, meaning you can pack a lot of diagram info in a comprehensible amount of text.

Using plain text also makes it very easy to quickly make changes to the diagram.

Mermaid support some interactivity on the diagrams. That would have been a lot more work using a different tool

Theme support. You can define themes to make all diagrams fit your design

I've created a Sanity plugin that will give you a mermaid schema type that will make it easier to work with diagrams in the Studio. It will give you live preview of the final diagram so you can create quickly.

Now lets add it to our schema, either as part of a document or block content, or both:

What this gives you is an object with a text field inside in the content model, but with a more fancy input component. Here's a GIF showing the plugin in action:

Now you can use the multiple diagram types Mermaid supports: flowchart, sequence, class  and state diagrams, gantt and dreaded pie charts.

Now you can configure your frontend to enable rendering the diagrams. As my blog is built on Gatsby and thus React that is what I'll cover. You have two options when it comes to rendering the diagrams. Either client side with Mermaids default approach of turning any HTML element with the class 

 into a diagram. The diagrams end up as SVG with an inline 

 tag. Unfortunately it has direct access to the DOM so you can't use it to render SVG markup as a string for server side rendering or static generation. It does offer a mermaid.cli that will allow you to create a .svg using Node, but it does so with Puppeteer and exporting of the browser SVG. Not great for build performance.

Lets focus on client side rendering. Its likely that will suffice for your needs.

Assuming you've set up Mermaid on block text we need to create a serializer for the 

 package and a component that can safely render diagrams. We will use React.lazy with Suspense and an SSR check to not render diagrams on the server. 

Next you need to import and start Mermaid. The following component should take care of safely rendering Mermaid in a React context. I'll most likely package this as a helper later.

Well thats it. You should now have a powerful way of adding diagrams to your site with little effort. Make sure you read through the 

Mermaid manual to see the syntax for the different diagram types

I hope this helps you add diagrams on your sites when it makes sense.

Drawing diagrams in Sanity with Mermaid.js

As a big surprise I found a new version of the iTerm2 macOS terminal replacement waiting for me when I returned from my summer holiday. The release packed a number of big features, like a minimal UI theme, a magic global status bar and finally a 

The UI looks a lot more modern now. Bezels and borders tuned down and an experience that is even more content centric. I mean, tell me this doesn't look quite good!?

The rainbow colored line is the status bar that displays the current working directory, git status, process info and finally CPU + mem usage. You can tweak it with a number of ready-to-go components, this is just the stuff I decided to throw in there to start with. You can also build your own components by utilising the new API.

Anyway, enough free advertisment of iTerm2, lets get to briefly exploring that API.

If you do much of your work in a terminal, like me, you likely have some steps to take to start working on a project. I like to close everything up after work as I'm a one-laptop type of person and thus use it for different purposes after work. So every morning I go through a number of steps to get started: Open a terminal with some splits and run different processes in each. Open a few tabs for different services that I work on in conjunction. Its not that the steps are long, but from time to time I forget to start one service for example.

Lets see how we can automate these steps quite succinctly. I'll use what I believe is a common scenario as an example:

Split a tab vertically and run an API on one side and a frontend on the other side

Open one tab in the API directory and one in the frontend directory

Run git status in both to give me a glimpse of any unfinished work

When the frontend is ready, open my preferred working browser on the correct page

I also run some databases on a docker host with random ports and my real life script polls docker for the management ports to open that interface in a browser as well, but for brevity I'll skip those steps. There is a docker-py package that is fairly straight forward to use for this scenario.

iTerm2 has a tutorial you should check out as well

, and you might want to use the built-in functionality to generate the script file, which will place it inside the Application Data for iTerm2 and also make it accessible through the iTerm2 menu. I prefer to keep my scripts 

 and version controlled there, so I opted to install the required dependencies from pip and just create it myself. If you do so as well, first install the dependencies using 

I'll leave you with the code with comments as its fairly clear and understandable:

In order to run this you can stuff the file anywhere and just run it (

) or you can store it where iTerm2 wants you to and run it through the menu.

I always have an open terminal so I just run the script by hand at the start of the day. However, you can also register script functions with iTerm2 itself and actually add a button to that new status bar that will call the function. For a number of scripts that might be the right approach to take.

Explore the full API docs to get a grasp of what you can do with this toolbelt. One neat thing I can imagine is being able to configure an output matcher on a session that has a running script. You might have started this long running job you can't really stop midway and its producing a lot of garbage that you now want to filter but its too late to pipe it to a logfile via grep. You could write a function that does this with arguments for what to grep that will actually connect to the session and filter the text output as iTerm2 renders it.

I'm just happy that I could whip this up fairly quickly and save myself a few key strokes every day. Happy hacking!

Exploring the iTerm2 Python API

For our halloween party we went all out on decorating the flat. Why host a halloween party if you dont go the mile, eh? We of course had a jack-o-lantern, we cut a ton of small black bats that fly across our walls, and there were blood trails on the floors, and hand imprints in blood on the bathroom. The highlight for me however was creating an interactive Stranger Things lightning installation.

My initial plan was to use just components I had lying around from years back; Specifically a handful of Particle Core devices. The neat thing about the cores is that they are basically arduinos with onboard wifi, meaning it’s relatively easy to use the vault of resources and libraries that exist for arduino, while also making your component usable without cables for communication. Controlling individual leds are done with ease using these tiny computers; You simply plug a LED and a resistor to one of the 8 digital outputs and to ground, and then you can set HIGH/LOW to that port to flip the light on and off. But while I could get 8 LEDs this way with ease, I needed some new tricks to get up to the 29 LEDs I wanted. While there are techniques, like 

, and approaches, like using 4 particle cores, that would have worked, I found a local shop that sold 1 meter 

Before building the LED strip I got help in painting the letters on a big piece of paper from a paper roll. With the letters in place we would be able to measure and plan the wire lengths needed.

With the letters in place the next step was some hours of grunt work soldering everything together.

Neopixels only require 3 connections: 1 digital out, 5V power and ground. The strip works out of the box, but you can also cut it up into 60 individual LEDs just using scissors, and then re-solder all the LEDs with wires of your desired lengths. I cut of 29 LEDs and measured the distance between each letter and started soldering! Soldering short wires is a bit tedious work, and you probably need a pair of tweezers to get the work done. Clearly the neopixels are far easier to use if you don’t require readjusting the distance. I just had prototyping wires lying around, so I cut a bunch of them to suiting lengths and started soldering the 168 joints.

With the hardware seemingly under control I started looking into the code. I spend day in and out in JavaScript land, so I really wanted to do this using the excellent johnny-five library. While there is a really good option for controlling neopixels with an arduino using the node-pixel library, it did not support the particle core, or alternatively I would have had to use a secondary controller device running a custom firmware. In the end I accepted reality and decided on plain c/c++ with the 

 for each specific LED, and when you have set all the LEDs to the colour you want you call 

. One of the big selling points of the Particle devices are that they are cloud connected by default, and its really easy to register a function call that will be exposed through an API for remote control. We can set up a function to light up a specific LED quite easily:

I placed the LED strip under the paper alphabet in order to test a single LED to make sure it would look alright. The result was pleasing. Since this would be used for a party, the room would be quite dark, so the lights would really be visible.

With everything apparently working it was just a matter of mounting everything and writing the actual code for the project. The approach was rather straight forward: Register a cloud function in the particle cloud that would take in a word, or sentence. Loop over each character in the word, find the corresponding LED position in the strip, and add that number to a list while adding a 

 before and after the input. Then in the 

function I would pop the first item from the list of leds to be lit, and loop over all the LEDs in the strip and either set it to off, or if it matched the id to be lit call on a function that generated a random RGB colour. 

You can get the full source code on my Github

Using particle you get a simple — yet great— mobile application for controlling the cloud functions, and for accessing some general information about your core. In the end I didn’t have time to build the web app I planned for controlling the lights, but using the iOS app we could pass the phone around in order to type with the lights.

Here it is, on the wall, working great. It was a fun project and now I’m thinking about what other things I should do with the particle cores now that I’ve dusted them and peaked my interest.

👋🏼 I'm Raymond.

Recent posts

Drawing diagrams in Sanity with Mermaid.js

Exploring the iTerm2 Python API

Making a Stranger Things lights decoration