Adding codeblocks was a pretty painless experience, although the syntax highlighting was a little more complicated. In this article, I'll walk through the steps to add this to your Sanity+Next.js site.

This way of syntax highlighting is based on prismjs and this is a way to do server side syntax highlighting, which means no heavy js-libraries for the client to load! 

This example is at work in this blog, and this whole blogs' code is available on GitHub 

For the Sanity schema, this needs to be present, accompanied with the Sanity/code-input -plugin.

Optional: withFilename and highlightedLines

And finally, component looks like this in it's purest form, with some tailwindCSS you can remove yourself.

That  was the simples way to add code blocks in your React website using Sanity CMS. 

Next, let's look at adding syntax highlighting, and line highlighting.

For syntax highlighting we are going to be using 

Next, you have to import the package, and use the 

 component in your code. If you copied the prior 

There you go! Now you can highlight the lines of code in your sanity studio (by clicking the line numbers), and you'll have nicely styled syntax highlighting on your site!

Best part is, this works with server side rendering! 

Here's some further resources to maybe help, if this article won't work for you:

Code line highlight with prism-react-renderer

Another way to add prism-react-rerenderer

There are different libraries which handle syntax highlighting:

, which completely failed on me when I first gave it a try.

, which this is based on, but go look to see how it works.

 - a really popular way to do this. Probably can find React-specific helper-libraries for this too.

Thank you for reading, hope this was useful to you!

Code blocks in Sanity

In this post I’ll walk through the few key (in my opinion) things an online store should have going for it. Nothing too serious, just wanted to showcase my designs :D. Nevertheless, I think some these points are valid!

For a brand like the one pictured above, that is positioned towards the young who wear streetwear-clothing, the website has to be appealing. The classic; grid of items on a white background won’t do anymore. A brand wants to say something more to actually be differentiated from the rest.

For me, this design project was definetly a passion project, since a dream of mine has for long been to launch my own clothing/apparel brand. This project was to be the website for that brand, but other things (namely, web-development) swept me away from focusing on it. Now, I’d like to add this project to my portfolio as a showcase of my design skills and little bit of backgroung on the choises made while designing. Also, I’d like to talk about why responsivity and good UX 

 why it matters for a brand in a high-competition market.

 why simplicity and good UX help in getting an user through from initial load to conversion.

 your website should be fast. But why, and 

“Nobody likes boring websites.” is an absolutely false statement in most cases. Being boring as a website is a win for you and your business 9 times out of 10. Why? Because then your product is the eye-catcher. Keeping this in mind, you can approach building a brand website a little differently. There truly is no need for complex animations, bandwith-sucking videos and heavy campaign images on your site. Those things, although they bring a 

 experience for the user. And honestly, what is more important than as-perfect-as-possible User Experience (UX) in todays internet where the slightest delay in getting something done is annoying to almost everyone. That is why low…

…matters. Interaction cost is defined as the 

Sum of all efforts that the user must deploy

 in interacting with a site in order to reach their goals. Now, even though I just talked about the use of heavy videos, animations, large unoptimized images etc, they don't strictly affect interaction cost. But they do affect in the sense that it is 

Consider the website I imagined for a brand: the user has to open the site → find a product they like → add it to cart → fill in their information → confirm their information and order details → get the order details in their email.

The above has interaction cost, but how much it is is ultimately a sum of two metrics: the amount of steps + the time it takes to accomplish those tasks. From this we can identify a clear bottleneck for interaction cost on this type of website: you can’t remove steps after a certain point. We can’t remove the confirmation of the details, because that would result in unnessecary errors in orders. If we add an sign in function to the store, it would eliminate the information filling for recurring users. However, this doesn’t impact the ones most likely to abandon their cart, the first time users. For them, there is a couple of methods for keeping them in the order flow.

 - The experience of ordering a item must be simple to understand, clear and helpful. Using tried-and-tested methods for making form filling a little bit more enjoyable, making buttons clear in their purpose, nudging the user in the right direction while they fill forms, navigate the site etc.

 - Making the website fast will really pay off in the long run. I cannot count the times I have clicked a link on an article or a store, and then backed off because the loading times were so long. Eliminating this from your stores website will absolutely get users actually browsing through the site, and ultimately might end up in higher conversion rates.

So, here was a few ideas to make your site a bit more user-friendly. 

If this post resonated with you, and if you are considering starting your own eCommerce website, email me! Also give this article a share!

Showcase: Why your website should care about interaction cost

The quest for a useful password generator

I had a problem. I wanted to make my passwords in my native language finnish. This meant coming up with words and phrases every time I wanted a memorable and secure password. That was way too tedious for way too long, so I wanted to come up with a way to make finnish passwords automatically, no thinking needed.

I went on a quest to look for a solution, which as it turned out, did not exist. So, I decided to build it myself. 
This website is definitely not finished yet. I’m planning on making it a browser extension, and in the near future I need to fix some functionality problems in it. Also, I’ll make it into a PWA by making it offline usable. (Update: It is now! Thanks to 

) generates a password. Mainly, it generates either a random string of characters and numbers, or a random string of finnish words. That can be further enforced by adding special characters to the final password.

All of the randomness is being made with the 

, and the frontend is built with with React using Vite. 

In the above image you can see the strength indicator paired with some additional time-to-crack info in the popover. 

 of course. The components are a delight to work with, since they're built with great thought put in to them. 

I am not sure if generating passwords this way is secure or wise. But I’m willing to bet that this is secure enough for most things I will be using it for.

It is a WIP and a lot of things are yet to be implemented. At this stage it covers most of my password needs though. Progress is to be made!

4.4.2023 - UI reworking and passphrase support 

Thanks to some great critisism, I added passphrases to the site. Now anyone can actually remember these passwords.

 library to the newer, more actively maintained 

. This helped quite a lot in measuring the strength, since it provides a Finnish dictionary, and also additional performance improvements.

Speed Index is back to 2,4s, since I've added more functionality, but it actually loads to interactive faster!

20.3.2023 - PWA and some added functionality

It's now a PWA! Try it out, and add to your mobile devices home screen.

Added numbers in the password, since most sites require numbers too in their passwords. Makes it quite a lot harder to read, but worth the trouble IMO.

Performance increases! Less blocking scripts, more loaders. On mobile, I got 

 speed index down to 1,8s - 2,0s from nearly 4 seconds.

Get special characters to the random password string. Now it only has characters and numbers.

Enable a service worker update interval, to prompt users to update.

If I start to need some added functionality, like automatic password-field filling, I'll make it into an browser extension.

DWE

Creating a password generator

The quest for a useful password generator

Looking elsewhere

What does it do?

Built using Radix UI

What to learn from this

Updates

Older Posts

Code blocks in Sanity

Showcase: Why your website should care about interaction cost