DEV Community: Chakit

Portfolio

Chakit — Mon, 31 Oct 2022 12:26:38 +0000

Every time I decide to be consistent about content creation, I get (or make) opportunities to travel, explore, and network. It could be procrastination or a matter of priorities but if you are a devrel or wanna be a devrel, you already know how much networking is important for us.

Our role needs us to be social people, for our team and for the product we represent - being in the audience is as important as knowing to code.

The same thing happened to me till last November when I decided to build my own Portfolio - I was procrastinating, networking, traveling, and doing a lot of other things.

Chakit

@arorachakit

Alright, here it is - chakitarora.com

Made with @nuxt_js and @tailwindcss .
Feedbacks Appreciated. twitter.com/arorachakit/st…

07:13 AM - 06 Nov 2021

Chakit @arorachakit
After delaying it for two+ years, I am finally making my portfolio.

Here is a twist, I didn’t get the devrel role just by chance or luck. One of the reasons I could come across multiple opportunities is I have something that represents what I do and who I am.

That’s what lead me to where I am today - a PORTFOLIO.

Plenty of times I have heard people talking about advancing more skills, gaining more knowledge, doing this or that. However, there is a simple rule in sales - what connects is mostly, what sells. You might have a good stack but if you can’t show it, it’s almost useless while applying for jobs.

A portfolio is where you represent and show what you know, have built, are building, etc. It doesn’t have to be fancy - make it feasible and you are good.

As a developer, this should be your first step. Don’t repeat my mistake. I took more time than needed. We all have so much to show.

Let me get you on a secret. A portfolio doesn’t only help in getting jobs but also in building self-confidence.

Let me convince you a little more.

Why portfolio is important?

Proof of work -
We are in an industry where we can show what we have built, and how we have built it, and we have already made a good impression on the required audience. We are the people from where POW got its fame in recent years.
High sales -
If you are an independent developer, work on a few different projects at once, and want to close clients asap, a portfolio is your solution. You can show all your history, and impress your clients and it’s one link for all - saves time. After all, time is money.
Marketing -
It becomes a great tool to market your skills and creativity. The best part is what you can think of as a developer, no other developer can think the same. You will always have something unique to show.
Demand -
Portfolios are in demand nowadays. Let me remind you a bit about economics. You supply what a customer demands. Here recruiter is a customer and you are a supplier who needs to cater to their demands.
No FOMO -
Yes, you read it right. FOMO - fear of missing out. You will not go through this emotion every once in a while when you can apply to whatever opportunity that knocks on your door.

In this digital world, one thing is for sure, you won’t need a physical portfolio most time. You can check out my portfolio here chakitarora.com.

Why you should build in public?

Chakit — Tue, 09 Aug 2022 06:53:53 +0000

You must have seen the progress of Tesla and SpaceX in the past few years. We all have seen both of the companies going through ups and downs but what I found more interesting is the way Elon Musk decided to be open about both of the products with the media and customers.

Lesson?

He is building a brand where you and I can call ourselves a part of new inventions.

Elon Musk is a big name, let’s talk about something we all use and have fun while using it. At least, it is my favorite. Yes, Tailwind CSS by Adam Wathan. He also built the framework in public and shared the updates, use cases, and zero to one of the products with the community. I am following his journal to stay updated with all the new releases.

Lesson?

He wanted to share what he was building to get fast feedback, get fast users, and testers, and he did make a good community around the product too.

These are two examples I am mentioning from the thousands I see every day and I believe everyone should leverage the existing community they have or even build the community around the product they are building.

“Build in silence, shine in public” is now an outdated concept, and the new golden rule is “Build in public, Shine in public”.

7 reasons to build in public

1. Feedback:

You get constant feedback to improve the existing features, strategies, and designs, to do better overall.
You see what the audience likes, what you can do to retain the users, and how you can make it more about the user.
Once you are in build mode, you sometimes get stuck and don’t think out of the box. That’s where feedback helps. You see the problem and even the solution from a different mindset.
- Your cloudy judgments need a few eager tester products and building in public allow having that.

2. Personal Brand:

People see what you are building and you differentiate yourself as a unique brand.
Your hardships, challenges, and success become personal to the people around you - you stand out from everyone else.

3. Accountability:

Since, now, people are waiting and keeping tabs on you, it gets a little easy to be on track.
It pushes you to focus on the right things.
It pushes you to the work that needs to get done than the easy work you are doing because you are scared of the outcome.

4. Networking:

Your project and its progress attract the right kind of people, like, investors, recruiters, etc.
Your open journey gives different communities, investors, etc an opportunity to see your graph and a chance to trust you.
People like transparency and that’s how you network easily and more.
You meet people in the same & different fields, become friends & even find partners for future projects.

5. Hiring:

Talented folks come forward to work with you.
Hiring gets easy for your project.
You get plenty of options and a pool of talent to choose select.

6. Opportunities:

You open doors to opportunities when you take the step to connect with people globally.
You must have heard this - “there is a sort of luck you get when you put a lot of work into something”.
You get attention which means folks around you will talk about what you are building. Hence, more opportunities.

7. Documentation:

You get a good habit of documentation.
As developers, we all know, how important documentation is. From reading documentation to writing comments to understand better what the code is about. Documentation holds an important role.

There are plenty more reasons why you should build in public. However, above mentioned seven convinced me to share whatever I do professionally with the community.

Updates - Life, Tech, Travel, DevRel.

Chakit — Wed, 06 Jul 2022 08:22:35 +0000

Well, the purpose of this blog post is to share what I was up to for the past few months but before we dive into that, let me refresh your memory a little.

A few months ago, I took it upon myself to use Javascript in every place I could and I am still sticking to that - obviously, I am kidding. But it looks like Web3 is the new keyword and it has been making the online world crazy - at least that’s what seems.

What is important to understand is that Web3 is comparatively new, and exciting but complex and being a full stack developer is always an advantage even if/when you want to explore the Web3 ecosystem.

My thoughts on web3? I have some doubts but I am thrilled to see what it has for all of us developers.

I took a break and what I saw when I almost made a come back was that everyone was talking about web3, so I did what a sensible (and smart) developer would do. I signed up for the Goa conference, thanks to Francesco's giveaway. Are you joining? Drop a DM.

The last six months have been excitingly good. By the end of 2021, I planned to travel this year and that’s what I did.

Not only traveling in the real world -

Chakit

@arorachakit

Breaks are important!

I am taking a 10 days break, to work while travelling for a change!

In Jaipur today!

Will be travelling to Jaisalmer and Jodhpur next week!

#DigitalBanjara

09:04 AM - 15 Feb 2022

but also in the tech world - joined Storyblok as a DevRel.

Chakit

@arorachakit

Life Update -

Super happy to tell you all that I will be working as a Developer Relations Engineer 🥑 at @storyblok from the next month!

I am super excited to work with the team.
All set for the new journey 🚀
#DevRel

Thank you all for always supporting me.
(dm for pizzas)

12:42 PM - 21 Feb 2022

A secret - I have plans to travel more in the real world, to do some more adventures, and also to meet amazing people I got connected with over the months.

By the way - This Rajasthan trip was my first solo trip. I encourage everyone to travel solo.

Made a lot of friends
Stayed in hostels
Made and captured a lot of memories.
Visited - Jaipur, Jaisalmer, and Jodhpur!
Even camped in Thar Dessert!

I went to Rajasthan before starting as a DevRel. Let’s talk a little about DevRel as well.

A lot of you have asked me in the DM about the role of DevRel and well, you are in luck.

I am back with all the answers (hopefully) and this is the first question I’ll be replying to.

What is even DevRel?

The google definition describes it as a marketing body but we are way more than that. From understanding all the features of the product to being a connector between the developers and the product, from making tutorials to giving demos, from writing articles to managing the documentation, we do all of it.

A DevRel does a lot of tasks which vary according to the organization they are working with. Some of them are similar for all of us which are -

Managing community.
Hosting and participating in the conferences to make it easy for the developers working on the product.
Enhancing engagement between the external users or developers.

With the addition of the above-mentioned, work has gotten interesting which inspired me to explore some other frameworks that I normally don’t use like React, and Next.js - yes, yes, Vue is still my favorite. Since as a developer, you can never stop exploring what I already mentioned in one of my blogs - How to become a full-stack developer.

A few days ago, I watched Panchayat Season 2, and well, nothing. It was a nice series and a much-needed break from reality. Traveling, meeting new people, new work roles, trips, and traveling again do get a little overwhelming.

Let me share the list of things I did:

I was invited as a guest speaker at a webinar hosted by @girlcodeitpune on Full stack developer journey.

Girl Code It - Pune

@girlcodeitpune

Heyy folks👀

Hope you all are doing amazing:))💫

Are you interested to learn web development?👩‍💻

Don't know where to start? 🤷🏼‍♀️

Don't know what path you should follow for learning web development?🤷🏼‍♀️

03:38 AM - 15 Apr 2022
- It was the first online webinar I attended where I was the guest speaker - an exciting experience for me on an individual level.
- I gave my input about how one can start their journey, how management is necessary, how spending too much time is not necessary, why one should explore and try to build more projects, and how it is a never-ending journey.
I planned a trip to Kedarnath - a little difficult but mostly fun adventure. And yes, I covered a couple of other places during this journey like Rishikesh, Mussoorie, and Dehradun. Visited a couple of holy places as well. Look at this tweet.

Chakit

@arorachakit

Dropping some trip pictures! 🛣🏔

Picture 1 and 2 - Rishikesh
Picture 3 - Devprayag
Picture 4 - Sitapur (Near Sonprayag)

🕉

23:49 PM - 15 May 2022
Attended #ngindia conference and spoke about Storyblok right after coming from the Mountains.
- I got prepared for it under 2 hours in a cab journey - like I said exciting adventures.
- I met colleagues from Storyblok & some people from Twitter.
- It was a thrilling experience - it took a little time to get my screen displayed (we all know the connection issues during the conferences) but overall, it went well obviously.
  
  Chakit
  
  @arorachakit
  
  Got a chance the speak about @storyblok at #ngindia. It was an amazing experience 😁
  
  @geeknineseven
  
  12:42 PM - 28 May 2022
I attended a few other meetups like HackThisFall and met online friends.

Chakit

@arorachakit

The weekend was great, attended #hackthisfall Delhi on Saturday. It was a very fun and interactive meetup.

And it was super awesome to meet and interact with new and old tech friends.

@siddharth_hacks kudos to you for building such an amazing community!

04:00 AM - 30 May 2022
I recorded a podcast with Azure Developer Community about DevRel journey and what are the general skills required to be a DevRel.

Azure Developer Community

@azdevindia

Welcome to the Azure Developer Community's Tech podcast series
In this podcast Chakit Arora talking about his journey to working as Developer Advocate Engineer.

Listen this podcast at: bit.ly/azdevcast

#tech #azure #youtube #podcast lnkd.in/d-FWhQWc

14:08 PM - 23 Jun 2022

Just to add - I stayed in Delhi for a while and met a lot more online friends. This was one of the new years resolutions as well - to meet a lot of online friends.

And it doesn't end here, I even went to Pune. Too much travel in such a short span! Met more friends there!

The best thing that happened was that I felt more productive than ever. My productivity has increased over the months. With all the travel, I now like working from cafes and co-working spaces. Even now after coming back from all the trips & traveling, I go to a cafe thrice a week to work, to have a walk around, and it does help more than you think. I'd recommend you to give it a try as well.

What are my upcoming plans?

Awesome threads - I’ll be sharing my journey.
Blogs.
A lot of stories that I am excited to share.
Don’t worry, I haven’t forgotten about the Youtube channel - preparing a lot for that too. Stay tuned and subscribe if you haven’t already. Here is the link.
Going to attend conferences - might join React India Conference as well.

What’s up with you all?

Why javascript is a badass?

Chakit — Tue, 28 Jun 2022 05:58:20 +0000

Javascript has been making the web crazy and is a very essential part of our daily lives. It is already doing great stuff for a long time. If you are a web developer you have probably used nothing else more than javascript. But it is not limited, the future is very interesting.

Javascript was not meant to do all the stuff which we see it doing. It was just supposed to run in the browser. Frontend development itself evolved a lot. All the cool frameworks we see use a lot of javascript. And if you're a frontend developer, it's everything for you!

Nowadays, we see javascript running on the server-side. You probably know about node, which is around for a while now. Node helped developers to just know one language and code both frontend and backend. You can easily be a full-stack developer if you know javascript.

And this is a lot in demand. MERN, MEVN, and MEAN are quite popular and you can see a lot of people doing those. This has become the new basic, and we can see many major companies hiring for this. A huge number of projects depend on javascript!

This is something that is very common, but there is a lot more happening with javascript. This is all because of the popularity it gained over the years. Javascript is not limited to just the web. You can do a lot and lot more now!

Native Development: There are a lot of frameworks evolving that allow you to develop native android and ios applications. React native and vue native are examples of that. This makes it very easy for a web developer to even switch to native anytime.

You can even convert an existing web application to a native one with the help of Cordova and Ionic framework. This is really interesting and a lot of fun. You don't need to know java or Kotlin for making an Android or IOS app!

AR/VR: There is a lot going in this domain, it has been in hot topics for a while. And yes, it is possible with javascript. There is a lot of improvement happening every moment. The support is increasing day by day. So if you know javascript, you can probably try this too!

ML/AI: We have come far in this domain. TensorFlow js is a great and a very popular library for Machine Learning in javascript! There is a lot of new stuff happening in this domain as well, and very frequently.

It seems like a person can do many things and explore other popular domains with javascript. It's great to learn and again the scope is not limited. With all this happening, it can be assumed that the future of javascript is going to be great and very exciting.

Thank you so much for reading, I hope you liked it.
If you have any questions or suggestions, please leave a comment below or feel free to reach out.

What and Why - Moment.js?

Chakit — Sat, 30 Apr 2022 12:43:43 +0000

Moment js is a very significant javascript library and you're definitely gonna use it! If you're a javascript developer, this is for sure.

Let's take a look at what this library does and why is it important.

Moment js is used to parse, validate, manipulate and display date/time. In short, it's the way you can play with dates in javascript. Whenever I start a new project I make sure to install moment. It solves the problem of reading different sorts of stamps and display accordingly.

You can download moment directly if you're not using any package manager or you can use yarn or npm for adding it to the dependencies. It gives a lot of things to play with. Let's look at a few of them.

You can import moment like other dependencies and use it accordingly. Moment js creates a wrapper for the Date object. To get this wrapper object, simply call "moment()" and this will give a new object with the current date config.

You can pass different sorts of parameters to parse and get the object. For example moment("2021-10-25"), or maybe something like moment("10-25-2021", "MM-DD-YYYY") and so on. There are different use cases for every time. You can even parse the timestamps.

Now to get the information out of that object, there are a lot of things we can do. You can access even the milliseconds if in the object. Then there obviously day, month, hour, day and so on!

You can even manipulate the dates, which means that you can add or subtract the dates. Maybe add delivery time to current time and see by which time the food is gonna get delivered. This is just a use-case but this should give an idea of how powerful and useful it is.

We also have a lot of different ways in which we can display od see the dates. As there are different date formats and different use cases there are different ways. Maybe you want to show 25th October 2021, or October 25th, and so on!

We can even show the time passed, for example in a chat application we need to show when the recent message is delivered - a minute ago, a few seconds ago, and so on. Or in any other application where you wanna see the files uploaded time, as in a day ago, 10 days ago, and so on!

Moment can also be used for performing other operations which might be useful, like calculating the difference between 2 dates.
There can be a lot of places where this and similar stuff is useful.

Moment also helps in querying. There are different methods available to do this. For example isBefore, isAfter, isLeapYear, and so on! The names are self-explanatory. You can compare dates and use these kinds of different methods to get the other required information.

Moment can also help with the locale, you can change the dates you're using and get every other thing according to the country and timezone! This is a great advantage when you're building for multiple places.
There is a lot more! So make sure to check the documentation.

Thank you so much for reading, I hope you liked it.

If you have any questions or suggestions, please leave a comment below or feel free to reach out.

JWT, access token, and refresh token

Chakit — Sat, 30 Apr 2022 12:41:39 +0000

There is always a need for Authentication when building an application. And if you're a developer, you know how painful the authentication part can get. It takes a significant amount of effort to build this part if you're starting from scratch. Also, it is a little difficult to understand how it works at once. I still struggle every time I try to implement it.

Let's look at a way of implementing an access token and refresh token system using JWT.

JWT stands for JSON web token, and it consists of three main parts. A header, payload, and a signature. For a valid one, we need these three parts to be present in it. Usually, these tokens are created by using a library, be it for javascript or python.

Generally, during the creating of one token, we need to specify three things - The payload, a secret key, and the algorithm to create the token. The payload is the data we need in the token. There are a few general keys like 'sub', 'iat' (issued at), etc but it can be customized.

We need to specify the algorithm because there can be multiple of those, which can be used for the creation. The important thing is the secret key. Anyone can create a token with the same payload and algorithm. So to verify that it is created by our server, we need the key.

Now, let's see how the access token and refresh token works. So, once the user login we create a jwt as discussed above which works as an access token. It contains the user information in the payload. We send this to the front-end and store the access token there.

It can either be stored in localStorage or your store (redux, vuex or whatever). Now we send this token along with the requests to the backend, and for every secured route (the one which we need the user to be logged in) on our backend, we check this access token on our backend.

We check the expiry for that token on the frontend itself before sending the request to the backend. It can be set by us while creating. This part can be customized. This is generally intercepting your own request and checking. The access token is also added to the request in this step.

Now, for checking this access token on the backend, as mentioned before we decode it with the help of our secret key. Now if everything goes well, we allow that request. If it doesn't that means the token has been tampered with. We throw the user out in this case.

A refresh token is also created during the login, but we don't usually create a jwt for that. You can create it by any library or even use a simple uuid to create a unique token string. We store this along with the expiry of the refresh token in our database along with the user.

This refresh token is also sent to the frontend and usually store as a cookie, so it is by default sent to the backend with the requests. If the access token is expired (during the interception), we use this refresh token and validate with what is stored in our database.

We send the request to a refresh route created by us to check if it is a user's refresh token and not expired. If it is not expired we generate a new access token for that user as we did during the login and the process is the same again.
If it is expired, we log the user out.

So, most of the time we are using the access token to verify if the user is authenticated. But if the access token is expired, we use our refresh token to create a new access token.
There can be multiple approaches to this according to the need and comfort.

Thank you so much for reading, I hope you liked it.

If you have any questions or suggestions, please leave a comment below or feel free to reach out.

1 week of using Github Copilot

Chakit — Sat, 30 Apr 2022 12:39:27 +0000

Recently a lot of people got access to Github Copilot, I was one of those who got it. I was on the waiting list for a very long time, and trust me I was dying to use it after all the good stuff already heard.

Github Copilot is an AI pair programmer developed by Github and OpenAI. The deep neural network model for Copilot is trained on public code repositories on GitHub.
It helps you by giving suggestions for the code you might wanna write.

I am seriously amazed by the performance, it is just amazing. It is really smart and exactly knows what do you wanna write most of the time. You can just write a comment, hit enter and it will suggest you the code.
I am using it for over a week now and I find it really great. It picks up your coding style, your variables, and your way of writing. So, I was entering mock data into the database with a script. And I was hardcoding the data for it. I was making objects for the entries.

I was inserting those objects to MongoDB. Then using the inserted ones for further data. And I was shocked at how fast Copilot picked everything. After a few lines, I wasn't writing. I was just hitting tab, I was changing the variables name a few times. But that didn't bother me.

The other thing is that it was evening changing the numbers, if I had a cost somewhere for a certain size and I tried to change the size in another object, it automatically changed the cost. It was even suggesting me the units.
I was writing some pipelines for MongoDB, and I was using FastAPI. It even suggested to me the complete pipelines, with insertion, retrieval, and whatnot. This made me cry, haha!

The crazy thing is there were situations that require me to Google usually for the syntax because I don't remember the syntax but, it suggested me such a good piece of code using my variables and my style that didn't Google. This is such a great thing,

It even helped me with improving my own code, the suggested code was great and after a few suggestions, I had so much faith that I wasn't even checking the code thoroughly. I trust Github Copilot now and it is seriously reducing my efforts and making my work significantly faster.

Now the question arises, if this is a good thing or not. This is tricky, but I think it is good. People can have a lot of different perspectives. Some say creativity might end, that can happen. I am not really sure.
But one thing I am certain of is, it is a beginning of a new era. I wasn't believing this before using it, but I feel the power it has after using it. There are great things coming in near future and the future is bright!

Thank you for reading! Let me know if you liked it.

Add a headless CMS to React in 5 minutes

Chakit — Fri, 08 Apr 2022 10:39:23 +0000

In this short tutorial, we’ll look at how we can integrate Storyblok into a React application with the help of the new @storyblok/react, the official Storyblok React SDK. We will see how we get the data from Storyblok and how we enable Storyblok Bridge to preview live changes in the Visual Editor.

HINT: You can find the final code for this tutorial in this repo.

Requirements

Here are a few requirements to follow this tutorial:

Basic understanding of React and Javascript.
Node.js LTS version (npm or yarn installed).
A Storyblok App account for creating project in Storyblok.

Project Setup

Start by creating a new React Project.

npx create-react-app storyblok-react-boilerplate

Then install the package @storyblok/react. This is the only package needed for this tutorial.

cd storyblok-react-boilerplate
npm install @storyblok/react
# yarn add @storyblok/react

The package @storyblok/react allows us to set up everything. It helps us get the data from Storyblok, loads Storyblok Bridge for real-time visual updates, and provides us with a storyblokEditable function to link editable components to the Storyblok Visual Editor.

Once the packages are installed we can start our development server.

npm run start
# yarn start

It should open a tab in the browser automatically with the url http://localhost:3000, or we can manually go to the url after the project starts running. You should see this screen.

If you’re using Storyblok V2, you will need to setup the dev server with an HTTPS proxy. We will use port 3010, so the url to access the website will become https://localhost:3010/

HINT: If you don’t know how to setup an HTTPS proxy on macOS, read this guide.

Space Configuration

Now create a new space in the Storyblok App by clicking "+ Create New". Select the first option to start from scratch {1} and then give it a name {2}.

We will get a space with sample content already created for us. After this, we need to configure our Visual Editor to get the live preview of our website. For this, go to Settings {1} > Visual Editor {2}, and set the Location (default environment) {3} to https://localhost:3010/.

Now go to the Home Page from the Content section. You should already see our React app. Click on the Entry Configuration {1} and set the Real Path {2} to “/”. This will be useful later when we get the data depending upon the slug.

We can also see some of the components created for us on the right-hand side, which we will create later in our app.

Connect React to Storyblok

Connect the React Application to Storyblok with the help of the SDK. We use two things from the package in the index.js file storyblokInit and apiPlugin. We need to add the following code to the index.js file.

// index.js
...

import { storyblokInit, apiPlugin } from "@storyblok/react";

storyblokInit({
  accessToken: "YOUR_PREVIEW_TOKEN",
  use: [apiPlugin],
  components: {}
});

...

storyblokInit allows us to set up the connection with the space and also loads the Storyblok Bridge, which helps us to see the real-time changes when editing the content. The apiPlugin here helps us get the data. If you don't want to use apiPlugin, you can use your preferred method or function to fetch your data.

We have a components key here to declare all the React components that we need to create, according to the ones we have in our space. These components are dynamically rendered with the StoryblokComponent which we will see in a bit. We need to keep the names the same at both places for it to work while creating the components.

Get the preview token and replace the value at accessToken. To do this, go to Settings {1} > Access Tokens {2}, and copy the Preview access token.

To get data and dynamically load it, change the code of app.js to the following:

// App.js
import { useStoryblok, StoryblokComponent } from "@storyblok/react";

function App() {

  let slug =
    window.location.pathname === "/"
      ? "home"
      : window.location.pathname.replace("/", "");

  const story = useStoryblok(slug, { version: "draft" });
  if (!story || !story.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}
export default App;

Here we use useStoryblok after getting the slug, which helps us get the new story every time we change anything in the editor. It has three parameters, the first one being the slug. The second parameter is the apiOptions where we have all of the API options for getting the data, and the third one is the bridgeOptions which is optional for configuring the bridge.

Parameter	Description
slug*	The first parameter of type string. Slug of the required story
apiOptions*	The second parameter of type object, for configuring the API options
bridgeOptions	This is an optional parameter of type object, for customizing the bridge options.

We also see StoryblokComponent in action here. It can be used anywhere in the code to render the React components we created according to our space. We can pass the content for a story with blok prop. For this to work, it’s important to list them in storyblokInit.

In Storyblok, the content is structured as components. As we already have some components created in our space, let’s create those in our React app. This allows us to reuse the components dynamically.

Creating Components

When we create a new space, the default components are: Page, Teaser, Grid and Feature. Now create the mentioned components in our app.

In the components folder:

// Page.js
import { StoryblokComponent, storyblokEditable } from "@storyblok/react";

const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body
      ? blok.body.map((blok) => (
          <StoryblokComponent blok={blok} key={blok._uid} />
        ))
      : null}
  </main>
);

export default Page;

We also use a storyblokEditable function from the SDK. It allows us to mark the react component editable in the Visual Editor. With the help of this function, we can click the components in the Visual Editor and easily edit them. Hence we will use this for all the Storyblok components.

// Page.js
import { storyblokEditable } from "@storyblok/react";

const Teaser = ({ blok }) => {
  return <h2 style={{textAlign: 'center'}} 
    {...storyblokEditable(blok)} >{blok.headline}</h2>;
};

export default Teaser;

// Grid.js
import { StoryblokComponent, storyblokEditable } from "@storyblok/react";

const Grid = ({ blok }) => {
  return (
    <div style={{display: "flex", justifyContent: "space-around"}} 
      {...storyblokEditable(blok)} className="grid">
      {blok.columns.map((blok) => (
        <StoryblokComponent blok={blok} key={blok._uid} />
      ))}
    </div>
  );
};

export default Grid;

// Feature.js
import { storyblokEditable } from "@storyblok/react";

const Feature = ({ blok }) => (
  <div {...storyblokEditable(blok)} className="column feature" >
    {blok.name}
  </div>
);

export default Feature;

Now, just add these components in storyblokInit. It should look something like this:

// index.js
import { storyblokInit, apiPlugin } from "@storyblok/react";
import Page from './components/Page'
import Grid from './components/Grid'
import Feature from './components/Feature'
import Teaser from './components/Teaser'

storyblokInit({
  accessToken: "YOUR_PREVIEW_TOKEN",
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid
  }
});

And that’s all! You should be able to see your content in the Visual Editor, now that you’ve unlocked the power of live editing. You can start playing with the content and see live changes. It should look something like this:

Wrapping Up

In this tutorial, you saw an overview of how to create and integrate a React Application with Storyblok with the help of the official React SDK. Additionally, you learned how to use the data and enable the real-time Visual Editor.

Resource	Link
Demo Repository	https://github.com/storyblok/storyblok-react-boilerplate
React Docs	https://reactjs.org/docs/getting-started.html
Storyblok React SDK	https://github.com/storyblok/storyblok-react
Storyblok Visual Editor	https://www.storyblok.com/docs/guide/essentials/visual-editor
Storyblok JS Bridge	https://www.storyblok.com/docs/Guides/storyblok-latest-js
Storyblok React Hub	https://www.storyblok.com/tc/react

Node js behind the scenes!

Chakit — Tue, 22 Feb 2022 15:59:47 +0000

Let's see how Node js works behind the scenes.

There are a few things that we need to understand before diving deeper about node js.

Node js is a javascript runtime, that helps us to run javascript code on the server-side. It helps us to build largely scalable network applications.

Unlike other models, node is single-threaded. So, whatever request comes to the application, it is handled by just one thread. Being single-threaded, node js is still very much efficient and can handle concurrent requests. Let's look at what is blocking and non-blocking first.

Blocking and non-blocking - Generally, if we talk about other languages if anything comes to a thread, that thread is responsible for executing that complete operation. But, they are multi-threaded. So, every request goes to a new thread depending upon the number of threads.

Now, consider we have 5 threads in the system, and there are 6 requests. So the one request (the 6th one) will have to wait for a thread to get free. So, it is getting blocked because a thread can only be engaged to one operation at a time.

And node is single-thread. So every request has to be handled with that thread only. Node is event-driven and works on 2 concepts -
a. Non-blocking I/O
b. Asynchronous

Non-blocking I/O means that the main thread won't be blocked in any I/O operations and the server can handle concurrent requests.
Asynchronous means the use of callbacks. This is because we don't know the time any task will take. We will look at callbacks in a while.

Node js uses an event loop as it is event-driven, and it is literally the heart of node.
Now, this loop has different phases for different types of operations and functions.

And there is an event queue for registering callbacks associated with the phases.

When a request comes to the server, the single thread is responsible for communicating with the event loop and registering callbacks. Consider getting a request which needs to read a file from OS and another one that goes on another server or database.

Now, the thread first receives a request, a callback is registered and the thread is free for the other request. So instead of performing the actual operations, it queues and registers the callbacks.
Once the operation is completed the callbacks are called and the thread knows that the operation is completed. It sends back the response. It is not blocked by one request.

The question is what is responsible for performing the operations as the event loop is single-threaded?

Node uses a library called libuv. It is built in C and works with the OS and kernel. And this uses multiple threads accordingly and is responsible for performing a task.

So after the execution, be it file read or communicating to other server or database, callback is called!!

This is great for I/O tasks. This is very fast and super awesome when the stuff is asynchronous and not CPU intensive. Consider there is some operation that involves calculations, at this time the main thread is blocked.

But there is one more thing. With the event loop, node also manages a thread pool. And it contains worker threads. They are useful for performing CPU-intensive JavaScript operations. There are by deault 4 of those and that can be changed.

But, this is the major reason why it is not preferred for CPU-intensive operations. If there are requirements where we have a lot of CPU-intensive tasks, where we use complex algorithms we use languages like Java, Python, etc. We need multiple threads in these situations.

Node is very much effective for I/O like reading/writing files, reading/waiting for network data, etc. Node is easy to learn and helps in building highly scalable servers. Scalability is a true jewel of node environment.

Node is one of the most popular things people are learning. And node is used in building a lot of great products and applications. There are a lot of frameworks getting used with Node like Express, Loopback, Fastify, Nest, etc.

That's all for this blog, this was an overview of how it works behind the scenes. But you don't need to worry about this a lot as it is all happening behind the scenes.
Do check this blog if you want to set up a basic node and express server - https://hashnode.chakitarora.com/how-to-start-a-basic-node-and-express-server

You can find it in this thread as well -
// Detect dark theme var iframe = document.getElementById('tweet-1485215377072214016-991'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1485215377072214016&theme=dark" }

Thank you for reading. Let me know if you find it useful.
You can find me on twitter. I am quite active there and keep sharing my journey.