By default, when using the blog template to intializd Sanity, code blocks aren't support out of the box. As my personal blog would always have a lot of code examples this was something, I was planing to have it on Sanity too. To achieve this I had to do the following steps:

 the folks describe Sanity as one of the "the most flexible platform for building data driven content solutions". The way how a certain post type like a Portfolio-Item or a blog post is done is completely flexible. You can decide by yourself if you want to add a category, a tag or a special excerpt. 

For example: For my portfolio section I decided to add a list of Screenshots instead of adding them to the body content:

The great thing about this solution is that I could just drag and drop all screenshots at once, instead of uploading they one by one. On the NextJS side I would add those screenshots to the GROQ query and later one looping over them to display them.

With that claimed flexibility, it should be difficult to have blogs with a codeblock like the sample one below, right?

It wasn't. Actually, the first step was just to install the official 

For a working Vercel deployment I needed to run "npm i" in order to have package-lock.json and package.json in sync

... and then update the blockContent.js schema with the field:

After that those two small steps, that was already it for the schema modfication! I could already add code blocks to my blog using the Sanity Studio:

Now when adding a block it would only be displayed as raw 

 blocks, without any proper styling. Besides some styling I wanted to add some syntax highlighting too. After some research I found 

, but how would I be able to manipulate the blog content that is returned from the Sanity API?

Well, firstly the Team at Sanity has already provided some libraries to turn a list of 

 in to React, Vue or HTML components. That BlockContent library has the option to provide a serializer where you'd be able to define how a certain HTML element should be rendered in the GUI. 

In the case of the code block my code would look like this:

component is just an own styled-component wrapper in order to style the codeblocks like I wanted instead of using any provided styling from the 

That's it, I was able to add code blocks to my blogs from now on, including sytax hightlighting depending on the language I would select on the input block:

Thanks reading this article - Feel free to follow me on 

By default, when using the blog template to intializing Sanity, code blocks like the sample one below aren't support out of the box. As my personal blog would always have a lot of code examples this was something, I was planing to have it on Sanity too

Adding code blocks to sanity studio for a NextJS blog

 to get a bit more into building React Apps from scratch. I really loved the course, as you end up having a lot of sample projects (who you could add to your portfolio right away). I also like it because it's a really practical approach to get into developing React without being shocked by too much theoretical concepts. So, I decided to recap some of the things I learnt during the course

... to set up VSCode for developing React appas

Having an IDE, which allows you to code faster than using a normal text editor gets always more important. Visual Studio Code has been getting way more important, to be one of the most used Editors for Javascript, during the initial steps of the course, 

 gets you started with VSCode and npm/yarn.

One of the big advantages of Visual Studio Code is, that everyone is able to customize it to support their own need. I ended up setting up IDE for developing React the following way:

To style up VSCode to my own needs I am using the following extensions:

: This extension allows you to change the color of your VSCode workspace. I used it to add an alternative color to the of the multiple bars in VSCode. There's a good option to use this when you are using multiple workspace, and assigning a different color to every workspace. My current color is yellow (

: Currently I am using this dark theme in my VSCode. I like because it's so clean and really relaxing: 

https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme

: I am using this Font (and I am probably not the only one) as it's clean and simple as well, but the main purpose it has support for ligatures. See here: 

: Adding icons to your Code-Browser adds a lot of readability, especially when you got a lot of different files. Link: 

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

: This extension adds a shortcut (Ctrl + Alt + L) to quickly adds a console.log(x) statement to your code (You can do that for multiple variables on your code too, by just selecting different variables). Link: 

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

: Adds a lot of snippets to reduce typing and improve your development speed for React. Examples are like imr for Import React, imrc for Import React /useState. Link: 

https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

: I am using the prettier extension to automatically format any files on save. Link: 

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

: As it's already written in the name, it adds a better logic to your path suggestions available in VSCode: 

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

: Adding the ESLint functionality to VSCode and gives you hints about potentail Issues in your code. Link: 

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

: This Extension gives you a GIT integration on stereoids. Link: 

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

: This extension calculates the import cost to your project by every imported package: 

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

: By installing this extension you can run yarn commands directly from VSCode without the need to dig into a terminal. If you are using a macbook with a touchbar, this extension give you the option to run commands to them directly using your touchbar: 

https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-yarn

: You want to update your README.md, so that your Repository looks beautiful? To do that locally I am using the following extension to write markdown files: 

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

Visual Studio Code has also a great support for containers. For example, it's really easy to setup all your Docker Containers with it. You can also run VSCode on a remote machine (or on your WSL).

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

Have you know you can sync your VSCode settings between multiple machines? See 

, you actually just need a GitHub or Microsoft account

I didn't know much about the possibility about custom snippets in VSCode before going through this course. Personally, I think that custom snippets can improve your coding speed a lot so I was kind of amazed of the potential in doing your own snippetsm but how can we create one?

Type in "Ctrl + Shift + P" to open the command palette

And now you're ready to go - VSCode will just provide you with an example of an console.log snippet in the comments.

To speed up the creation of React components I have decided to create the following snippet, to not be needing to type it in each time and save a lot of time:

Since 2019 or React v16.8 hooks have been added to React, which allows us to use State without writing a class.

 A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.

Adding the useState hook to an React Component is pretty easy and can be done with the following code:

The only parameter we are passing to the function is the initial value of the state.

When trying to run the setState in a loop, React will capture the run on the first time and sometime not re-render the page on any run in the future. To avoid that, a callback can be passed to the setCount function above:

setCounter((counter) => { counter + 1; });

: useState return an array with two elements, by using [count, setCount] we are destructing that returned array and are creating to new variables (which we can name as we want)

The first time I was looking at inline If-Else Rendering in JSX I was really confused, especially when I wasn't too familier with the inline conditional operator in Javascript.

In React you could always use "normal" If-Else statements, but using inline always looks a bit cleaner, if you ask me. So, to use different buttons based on a variable you can use this instead:

padStart and padEnd are great functions to use when trying to display numbers as strings in a certain format. Minutes and seconds are great example of that.

Soo for example if you want to have the minutes to be always have two digit format (with a leading 0 when the numbers is below 10) you'd need something like that:

In this example if the String is only character a trailing zero is added. Another great example (over at 

) is to replace the trailing numbers of a credit card with stars. To achieve that we need to slice everthing the last 4 digits pad the starts to the beginning at the string:

setIntervall is a javascript function that calls a certain fucntion at specified intervals (in miliseconds). So the following example would increase the counter every second (or 1000 miliseconds):

On the statement above the counter would increase forever, to stop it after sometime we could need to call the clearInterval function like below:

To be actually be able to save the interval's state in the example above, we would need to save it using useRef.

Creating a useRef object would be done the following way:

There's a lot of options to use Routing in React, one of them is 

. One of the benefits of react-router is that it supports react-native as well. To get started with it after installing it with yarn or npm you'd need to import the following Stuff:

: This element will needs to placed around everything that will be used for the Routing (the Links as well as the Conent), so it's mostly being added add top level

: With Route we can define which object should be displayed as conent on which Route. Hint: If we are using the "/" Route, it is important to add exact={true} or add it add latest route otherwise the default route would be showed.

: The switch component makes sure that only the first Route that matches the patch will be displayed. If you have always displayed the "/" Route, make sure you add exact={true} to add the Route definition

: Link and NavLink are Link-Component (<a> in HTML), to support the Router. The difference between these two is that on NavLink styling attributes are added to when the Link matches the current page.

To get started React Events can be defined Really easy, just see the example below:

React Events are always written in CamelCase

You only need to pass the name of the function

Inline Functions are also possible: onClick={() => handleClick()}

To prevent default behaviour of an HTML element we need to call e.preventDefault()

... to select an random element in an Array

If you want to pick a random element in an array you can do the following:

But what does this actually do? Let's try to split the stuff in the respective parts:

In the example above we have a three elements in our array, which gives us the lenth of 3 and the indices of 0,1,2 to access to elements.

To pick a random number in JS we can use Math.random, but that gives us only a random number between 0 and 1 - but not 1. To actually have one random numbers between 0 and the desired number instead of 1, we'd just need to multiple it with the top value we want. In our case that would be array.lenth.

As a last step we need to pick our indices from our random numbers. We can't do that with a number like 2.7. To do that we use Math.floor which returns the largest integer

 the given number. This works perfectly because the array indices start at zero and not at one. Because Math.random will never return 1 we will get the possible values of 0, 1 and 2

Looping over a map in javascript could be done via multiple ways: sequentials loop, foreach loop, for i in array. But for now I am going to go with the fuctional approach of array.map():

... to display a component references from State:

 to get a bit more into building React Apps from scratch. I really loved the course, as you end up having a lot of sample projects (who you could add to your portfolio right away).

The things I learnt on the 'Make React Apps Series A' course Part 1

This week, over at upwork, there was a job lisiting to build a site with 

, who would support a certain "no load" effect. Personally, one of the things I like about creating websites with React, is that effect where you wouldn't load a newpage when you click on a link - instead the components who are visible to the user would just be replaced.

After seeing that job description, I thought maybe I could read something about it or atleast learn how to to implement that on my personal portfolio, to make the page transitions a bit smoother.

In general I was planning to add two different transitions: 

But what (popular animations libraries do exist already for using in React? After a bit of research I came accross about the following:

 - one of the reasons was because there were already a few examples over at https://community.frontity.org/.

Getting started with react spring for basic use cases is quite easy - Install it via NPM:

After that I just imported it, created the animation-configuration and wrapped the animated elements into a <animated.div />:

import { useSpring, animated } from 'react-spring' ... const props = useSpring({ opacity: 1, from: { opacity: 0 } }) <animated.div style={props}> ... </animated.div>

To edit the transition speed some configuration like this is needed:

const props = useSpring({ opacity: 1, from: { opacity: 0 }, config: { duration: 2000} })

That's already it? Unfortunately not. I had to realize that all the changes on the <Switch> element (which is used to switch between all the pages on the site) wouldn't be affected, so we would have only achieved one of the two use cases I wanted to implemented with animations

To achieve the animations on Links we would need to implement it, with 

. Over at the documention it is described as the following:

"An animated TransitionGroup. Feed it your items, keys (which can be null if items are atomic), and lifecycles. Whenever items are added or removed, it will animate these changes."

https://www.react-spring.io/docs/hooks/use-transition

The Implementation would look like this, where the router link is used as key and we need a Absolute box (because otherwise all the box elements could be displayed as smoothly):

But now when clicking on the Links, the Pages would not load an the console would prompt a 

"Uncaught TypeError: Cannot read property 'map' of undefined"

: As we were already querying the data from the state before the Switch, we wouldn't need to do that in the corresponding components. The Problem was fixed with doing the following things:

Pass the data to the component using data={data}

Consume the passed values, and remove the State-Query:

That's it - now my site was using the animations correctly 🎉

https://community.frontity.org/t/possible-to-do-page-transitions/526/8

https://github.com/jcklpe/desert-jackalope

Adding animations to Components with react-spring

Animation Libraries

Implementing react-spring

useTransition

More Stories

Adding code blocks to sanity studio for a NextJS blog

The things I learnt on the 'Make React Apps Series A' course Part 1