All Blogs

Updates - Life, Tech, Travel, DevRel.

Updates - Life, Tech, Travel, DevRel.

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 -

%[https://twitter.com/arorachakit/status/1493511612912869376?s=20&t=UKfODsGfSRTah5b-J2kSSw]

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

%[https://twitter.com/arorachakit/status/1495740783751749635?s=20&t=SSaFUDLGckj0LDyE2A-dZA]

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:

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?

Free TailwindCSS UI-kits

Free TailwindCSS UI-kits

Tailwind is an amazing CSS framework and is growing at a rapid pace.
Here are some UI kits to help you make great designs.
<br/><br/>

1 - Tail-Kit

Tail-kit

Contains a lot of ready-to-use components with some templates! It's open-source! <br/>
Link -
Tail-kit

<br/><br/>

2 - Wicked Blocks

Wicked Blocks

Provides a variety of blocks like page sections, forms, navigation, and much more. This is a project by wickedtemplates. <br/>
Link - Wicked Blocks

<br/><br/>

3 - Tailblocks

Tailblocks

It gives you a good number of ready-to-use blocks made with TailwindCSS. The best part is, you can view the blocks with different colors and different devices on their website itself. <br/>
Link - Tailblocks

<br/><br/>

4 - Daisy UI

Daisy UI

Dasiy UI can be installed like any other dependency. It gives you bootstrap-like classes to use with your HTML. This makes it a lot cleaner because there are fewer classes present. It gives you multiple themes and is very to use. <br/>
Link - Daisy UI

<br/><br/>

5 - Tailwind Mobile

Tailwind Mobile

This provides you with neat components specifically for mobile development. It has both ios and material components for React, Vue, and Svelte. The docs are there just for React yet. Also good to go with cordova and capacitor. <br/>
Link - Tailwind Mobile

<br/><br/>

6 - VueTailwind

VueTailwind

You can use this as a dependency in your Vue project. It provides you custom vue components made with tailwind, which are customizable and have their own props too.
You can even build a custom theme before installing it. <br/>
Link - VueTailwind

<br/><br/>

7 - Kutty

Kutty

It is a tailwind plugin for building web applications. It has a set of accessible, reusable, and clean components. <br/>
Link - Kutty

<br/><br/>

8 - Lofi UI

Lofi UI

It's a little different, you can even get graphs and calendars here. <br/>
Link - Lofi UI

<br/><br/>

9 - Kometa UI Kit

Kometa UI Kit

Gives components and sections like blogs, stats, and more. It also provides the code in Vue and React along with HTML. <br/>
Link - Kometa UI Kit

<br/><br/>

10 - Treact

Treact

Treact gives you responsive pages and components built with Tailwind for React! <br/>
Link - Treact

<br/><br/>

11 - gust ui

gust ui

It has a different theme than what we usually see in other tailwind kits. It looks very clean and easy to use with a number of pages, elements, and components. You get the code in react along with HTML. You can even check the different screen looks on the website. <br/>
Link - gust ui

<br/><br/>

12 - Meraki UI

Meraki UI

This kit gives you a few important components which are responsive. The dark mode here is impressive. <br/>
Link - Meraki UI

<br/><br/>

Here is a Twitter thread on the same:

%[https://twitter.com/arorachakit/status/1440575554722271236]

Thank you for reading! I hope it was useful.

1 week of using Github Copilot

1 week of using Github Copilot

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.

pexels-andrea-piacquadio-3760809.jpg

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.

JWT, access token, and refresh token

JWT, access token, and refresh token

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.

What and Why - Moment.js?

What and Why - Moment.js?

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.

What is docker and why everyone is using it?

What is docker and why everyone is using it?

What is docker and why everybody is using it?
A thread.

"But it works on my machine!"
We all heard this, and we all face this problem in our daily lives. There are times when a few or lot of people are working on an application, and it often happens that it works on a machine and not on the other one.

Setting up an application on a new machine is always a pain, there are so many things involved. Even during running the tests, it happens a lot.
This is the easiest and most used way to explain what docker is and how it is beneficial.

I will try and explain it without using a lot of technical terms.
Docker is an open-source containerization platform. Docker uses a thing called containers. This is completely different than a Virtual Machine. A Virtual Machine comes with its own Operating System.

And for each app, you need a new virtual machine. On the other hand, docker containers can use the same host's kernel.

A container is something that is just bundled up with all the requirements for your application and can be shipped anywhere. It's an isolated environment for your application. It is a form of virtualization but has a lot more benefits. You can literally run it on any machine!

The other important thing to understand is docker image. A way to understand it is like classes and objects, where a class is an image and an object is a container. The images are used to run containers. Docker hub contains a lot of common images, you can even build your own.

Let's take an example to see what and how it all works. Consider you decided to go with MongoDB for your existing application. Now you will need to download and install MongoDB. You can set it up with a database and a password including some collections.

Now the other thing you can do is pull up the image for MongoDB from docker hub, and run a container with that using the same configurations you can do for a normal one. Now, this way you have MongoDB running on your machine without even installing it.

This comes to a lot more significance when you need multiple things like MongoDB. Maybe you need redis, a python env, nginx, and a SQL DB too! What you can do is, take all the images and build containers.

Docker gives you a tool named docker-compose to build and start multiple containers at once. You can define all the config in one file mentioning what all you need and booom! Use that anywhere. Use that on any machine and you don't need to do messy installation every time.

Docker gives a lot more features like volumes, networks, etc. Volumes are so that you can have a specific place at your machine to store your data. In our case may be to store the data for mongoDB, so that whenever we stop, delete or make a new container we can use the same data.

Docker allows you to even make different networks. So that one container can communicate with the other one easily. You can have multiple networks for a particular application regarding the needs.

Docker is a great solution. It can be a little tricky at the start but is of a great use. A lot and lot of companies and projects nowadays use docker to make everything better and easy!.
It's very exiciting. And as always - You cannot avoid it for long!

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.

Why javascript is a badass?

Why javascript is a badass?

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.

How to start a basic node and express server?

How to start a basic node and express server?

Node is easy to set up, you can start literally in 5 minutes!

  • Step 1

Download node on your machine from here. There is a difference between even and odd-numbered releases. Make sure you check that out!

  • Step 2

Get npm on your machine from here. NPM is a package manager, to install the dependencies for your project. There are times we need a lot of external packages to run our project. In this case, we need express!
There is another one named yarn, you can look over that too!

  • Step 3

Make a new folder named node_server, add a file named app.js in it. This will be your server file. After that run '*npm init' * from your terminal to get started. This will initialize your project, ask you for basic info. You can keep hitting enter for the defaults! <br/> <br/>
Now you should have a file named package.json created and it should look somewhat like this.
package.json
This is the file that maintains and stores a lot of information related to your app! The 'main' here should be your file name, the default is app.js and we created app.js in the previous step. Remember to change it if you choose another file name.

  • Step 4

Now we need express, which is a framework to use with node to make the work easier. Node is a runtime environment. To get express, run 'npm install --save express' <br/>
Now you will see a folder for node modules, it contains the dependencies.

  • Step 5

Make your app.js file like this!
app.js
Here we are getting express and configuring it in lines 1-3.<br/>
In lines 9-11 -> we are setting up *app.listen *with port 3000. So your server will run on port 3000. It takes a callback. <br/> <br/>
Lines 5-7 is a sample route. These routes are your endpoints, you can have different ones, i.e. get, post, put, etc. <br/> <br/>
What this means here is that, if you send a get request to localhost:3000/, once the server is running it will return "Hey".
It takes a callback and can have multiple middlewares.

  • Step 6

In your folder from your terminal run 'node app.js'. You should have your server running now. <br/>
Go to the browser and open localhost:3000.

And this is how you can get your server running in just a few steps. This is how a rest api works, you have endpoints set. And when you send a request to this from your front-end, it performs some logic and returns the response, maybe a login route, user list, menus, items, and so on!

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.

Front-end Vs Design

Front-end Vs Design

There is a misconception that frontend development is just about the colors, placing the buttons, etc. There is a huge difference between a design and a development. Let's look at it in more detail.

pexels-olia-danilevich-4974915.jpg

When we talk about design, it includes UX/UI. A designer is a person who designs a website or a web page without using code. The designer can use code too, like HTML CSS. Most of the designers know about basic HTML and CSS.

The designer uses tools like Figma, AdobeXD, etc for designing and prototyping. You can use these tools to design crazy-looking pages and decide the flow of the app. This plays an important role to make the experience of a website better.

pexels-picjumbocom-196644.jpg

Often these designs have a lot of functionalities. Consider navigating to a different page, consider a form you need to submit, or maybe send requests to your backend. Here comes the role of a frontend developer. The frontend developer is supposed to make the page functional. And this involves code.

Front-end development has evolved a lot and is still evolving. After all the frameworks we have like React, Vue, Angular, etc it is not the same as it was. There is a lot of powerful stuff you can do with these frameworks in no time which would take an eternity to do otherwise.

These frameworks provide a lot of crazy stuff. We have routers, we have state management, conditional rendering, component-based approach, etc. You can literally render a list of users with few lines of code. You can include a lot of other stuff like other libraries and packages.

Front-end is more about logic, you need to solve particular problems if you code the frontend. It might sound easy in the first place, but once you dig a little, you will find that it's a lot more than that. Even disabling a button is a task sometimes. Forms are crazy.

pexels-thisisengineering-3861958.jpg

There are times when you're building complicated stuff and you don't even care about the design a lot. There are several platforms that are only desktop versions. There are CRMs where you have so much logic to play with. Handling files, inputs, users and showing data accordingly.

Similarly, there are places where you need to focus a lot on UI/UX. Consider CRED, or a Portfolio website. Design is a very important part at places. The user behavior can be very much different depending upon the design, you need that button so good that a user clicks.

A front-end developer can know design, but it's not necessary to know it. It gives you an upper edge if you know it, similarly for a designer it's good to know the basics of the web.

Both design and development are related but different. You can be both or one.

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.

How to start a Flask Server in 7 minutes

How to start a Flask Server in 7 minutes

Flask is a micro python framework, which is used for the backend in web development. It is very easy to use and set up. The “micro” here means that it aims to keep the core simple but extensible. It is lightweight compared to other frameworks like Django.

Steps for starting the server

Step 1

Make a folder named flask_server on your machine and then open that into your code editor. Sounds easy right?

Step 2

Make an environment and activate it. Go to your terminal and type the following.

python3 -m venv venv
<br/>
. venv/bin/activate

Env

The first line here makes a virtual environment, which we need to have for all our dependencies. <br/>
The second step activates it.

Step 3

Add a file named app.py , which will be our server file and install Flask.

touch app.py
<br/>
pip3 install Flask

install_flask

The first step will add the file. <br/>
The second step will install Flask into your venv(virtual environment ). Make sure you do it inside the terminal once you activate the venv, in the previous step.

Step 4

Now, this is how our app.py should look.

In the first two lines, we import flask and initialize our app.<br/>
The last two are for running it in debug mode, and to run it on port 3000.

app

The main thing here is the @app.route, in which we specify the path and the type of request. The default is a GET request.

So, a request coming to port 3000/ will go through this route and execute the function below it, which is send_hi. And it returns 'hi'.

Step 5

Run the app.py file.

Go to your terminal and type,python3 app.py.

This should run your flask app at port 3000. You can go and check your browser at http://localhost:3000/.

You should see 'hi' over there.

Similarly, you can have different routes with more complexity. You can perform your logic, like adding to cart, placing an order, changing user, login, and so on.
conclusion

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.

An Introduction to Vue

An Introduction to Vue

If you're new to frameworks or haven't used one ever, this should give you a good overview of how frameworks make web dev easier.

Introduction

Vue is a progressive Javascript Framework and is very easy to learn. You can compare it with Angular or React. We write all the code for a component in a single file like react, without JSX. This makes it cleaner.

File Structure

A Vue file typically consists of three sections.

  • Template, where you write your HTML.
  • Style, where you write your CSS.
  • Script, where you put all your logic.

<br/>
Vue uses Declarative Rendering, and you can use interpolations inside your template part.
declrative rendering

You can use anything inside the '{{ }}', as far as it resolves to a string, number.

You can even use ternary.

{{}}

Let's look at each of the sections in a little detail ->

Template

In your template part, you can use a few directives provided by Vue to have conditional rendering, loops, etc. It's as easy as it looks ->
Template

It makes two-way binding very easy, we have a directive named v-model for it. Type in the input and see it change just below it.
binding

You can bind to the attributes of a normal HTML tag, with v-bind or just ':'. Let's see it in action ->
Binding

Style

The Style part is similar to what you do in a CSS file. Just a style tag similar to what we see of template and script. And you can write the way you write your CSS inside that.

Script

The script part is where you can play a lot and write your logic.
You can see a function named data in the above screenshots, it is used to store the properties.
<br/>

There are lifecycle hooks as in any other framework, like created, mounted, etc.
The image below should give you an application of created hook and an overview of how we write hooks. Just like functions.
created

The other main things you find in the script are:

  • methods
  • computed
  • watch

As the name suggests, you define all your functions in the methods part.
You can call the methods at any place, even in the template.
methods

Computed Properties:

These are the properties, which are written as functions.

A computed property is cached, which means if the dependencies of the properties don't change, it won't recompute.

An application would be, you wanna recompute the employees.
computed

Watcher

A watcher is used to perform any operation on the change of a particular property.

<br/>
The two more important things used with the Vue are: <br/>
Vuex and vue-router.

Vuex is the store like we have redux for react's state management and vue-router is the router to help us handle the front-end routing. <br/> <br/>

Frameworks built on top of Vue

Vue has some good frameworks built on it.

** Nextjs ** Developers can see ** Nuxtjs **, which is similar.

** Gridsome ** is Awesome.

There is a very powerful framework *** Quasar Framework ***.
Has everything you want from UI to plugins to extensions.

This was a quick intro to Vue.

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.

Full-Stack Web Journey Simplified

Full-Stack Web Journey Simplified

In this blog, I will try to explain to you the roadmap for becoming a full-stack developer in the simplest manner. I would recommend this blog to all those who are new to the web dev world or are having any confusion related to the journey.

I got this writing inspiration when I started exploring Twitter for a couple of weeks to see a lot of people are struggling with Full-Stack. So I thought of using my experience.

RoadMap:

  • HTML, CSS
  • CSS Frameworks
  • Javascript, jQuery
  • Git
  • Front-end Frameworks- Angular/Vue/React
  • Back-end Frameworks- Node/Flask
  • DataBases- MySql/MongoDB
  • Clouds- AWS/GCP

***Let's look at these skills in a little more detail, in a very uncomplicated way. ***

HTML/CSS

It is the most basic thing you will start with, and probably you already heard about it. HTML is a markup language. It gives a skeleton to your website. For example, where to have a paragraph, where to have a header, and so on.

Now there are a few complex elements, like tables and lists. You should learn those, a little. I would recommend you to spend not more than 5-6 days on HTML.

Now CSS, Cascading Style Sheets. It gives a way to style your website. There are multiple ways you can add CSS, you should definitely search for that. Also, there are ways you can style HTML elements, this gets as complex as you want. But a tip, it's not very much necessary to learn it all. You can just give some time to it, around a week should do! Trust me.

As you grow, you need to use these things on a daily basis. And it gets easier with time. Moreover, as you move forward with your journey, you get better tools and frameworks for all this. I don't mean in any ways that it is not necessary, but you should know when to move on to the next thing

CSS Frameworks

Here comes a little interesting part, this will make you feel that a lot of powerful tools are present out there. Don't get carried away though, not more than a week for this too.

These frameworks exist to help you with CSS. Very easy to use, they allow you to make your pages faster and in a neat manner. No one can or should use CSS everywhere possible and make the code complex. Use frameworks!

There are many frameworks present out there. You probably heard of bootstrap too! Most of the frameworks have built-in UI components, for example, you can get a code for a beautiful header, or a button, and so on.

You can try bootstrap for the first time, and then I would suggest you move on to tailwind. It is getting quite famous these days. After a little time, you should start using the frameworks in your projects. You will get more familiar as you use them.

Here is a link to my thread explaining more about CSS Frameworks

Memorizing everything is not required. You are always a Google search away.

Javascript and jQuery

Javascript is the most important and useful thing you will learn. It's everywhere! It is a scripting language, which helps you to make changes with the DOM(Document Object Model). You need to see this as well, quite easy to understand. Don't go deep.

The manipulation of a page is done using jQuery. It allows you to select elements in different ways, and manipulate the view of a web page. An example would be to open a dropdown with a click. This also can go as complex as possible. But again, jQuery isn't much used in unless exceptional cases as you will be using some sort of framework.

You need to learn Javascript nicely, the basics are just like any other programming language. if you're new to the coding world, you should probably give this part around two weeks, and try jQuery simultaneously. Here are some Basics of Javascript

You will pick up Javascript and get better day by day. As you will move to frameworks, it will be heavily used. There are some advanced concepts you should know while doing frameworks. Here is a link to them.

Git

It is a version control system. Now that wouldn't make you understand a lot. It allows you to track changes in your project. For complex projects, when multiple people are working together it is significant. You can know what others are doing and work seamlessly together. Just go through a basic guide, and start using git when you start working with CSS.

At this stage, just understanding the basics and you being able to create a repository and pushing the code is good enough. The concept of branches is a must. You should try using those. Use GitHub, GitLab, bitbucket, or anything you like.

You know a lot now. It's time to move to the amazing stuff. JavaScript Frameworks!!

Javascript Frameworks

Hearing a lot about Angular and React? Here they come.

Every company and every project is using some sort of front-end framework. These frameworks are a significant part of the full-stack journey, and even for front-end developers. Working on this makes you eligible for becoming a front-end developer.

The three of the most popular frameworks are Angular, React, and Vue- My personal favorite.

These frameworks allow you to have a component-based approach, you can create several components and use them at multiple places dynamically. Consider a user information page, you can use the same page for displaying the data of a thousand users. And yes, this all can happen without reloading the application. This is termed as SPA. These frameworks are not limited to this. They have a lot of features.

You can pick up any framework you like. Angular is a little strict and uses typescript a superset of javascript. For a component, you have a typescript file for your logic, an HTML file, a CSS, and a testing file. You shouldn't worry about the testing file as of now. I started with angular.

React uses JSX. I don't find it much pretty to use. But react is the hottest topic out there. And has very good community support. It is light and technically is a library.

Then comes Vue, which is similar to others. A component-based approach, in a very easy manner. I would say it is the easiest to learn. It is a little underrated.

You can use different dependencies as per the requirements, you will start using a package manager here like npm or yarn. Go for yarn, it's good in the long term. You can even use your CSS frameworks here, and much more. Remember, I mentioned earlier about you will get better tools for styling and stuff. These frameworks even have frameworks built on them.

React has a popular one named Material UI. You can see Next.js for SSG/SSR once you're done with react. This is not for styling, read about it. It will be fun.

Angular has one named Angular Material, which gives you all the major components for building UI. These components are highly customizable.

Vue has one named Quasar, it again you a lot of customizable components you can use. Just like Next.js, there is Nuxt.js. Again Nuxt is not for UI. And you should work on it after Vue.

Now for these frameworks, as I said are very important. You need a little more than a month if you're doing Angular and React. Angular is quite big. For Vue, you might be able to do it within a month. I would suggest taking a course for a framework on Udemy.

If you are done with one framework and want to use any other, that is not at all going to be difficult. You can start on another one even by documentation. You can try building projects and use Firebase while learning frameworks. It can help you with the deployment as well as a database. You can also make your deployments using AWS S3 Bucket or Netlify. YouTube them.

You're a Front-End Developer now! At this point, you've made your life very interesting and a door to a lot of opportunities is opened.

You can even start applying for front-end roles now. But don't stop learning, you're very close to becoming a full-stack developer.

Backend Frameworks

Now as there were front-end frameworks, there are back-end frameworks.

Consider an example, you want to retrieve some data from your database. Maybe you're using something like Firebase, you can do that directly from the front-end but it isn't highly customizable. Maybe you want to manipulate it or there is a different type of request you sent from your front-end and you want to handle it as you want. Here comes a backend framework. Helpful to make your own APIs and make your front-end to send requests to that.

Now, since you must be knowing a good javascript by now, you should start with Node.js(Runtime) and Express(Framework). You might be able to do the basics in a week, as it uses javascript. There are popular stacks like MEAN, MEVN, MERN, quite popular you need a google search here. Express is used with node, to make it easier.

Another easy backend framework you can try is Flask. It is a python framework. You'll need to learn python a little before starting this. Python is pretty easy and you will be good with it in no time. There is another popular one for python named Django.

The most important thing here to have good fundamentals is the flow of this communication. Front-End to Back-End to Database and then back again.

Databases

We need to store the data somewhere right? So there a lot of databases present out there. You might have heard of SQL. You can use any database with your application depending upon the requirements. SQL is a table-based structure, there is PostgresSQL, MySQL, and so on.

On the other side, MongoDB used with the above-mentioned stacks like MEAN, is document-based. If you're a fan of javascript by now, you will love this. There are a few more like this. You can see the data as you do in JSON. You will be familiar with JSON by know after using javascript and frameworks.

You will probably need to use a database while using a backend framework.

This all should take around three to four months of yours and yes you're a full-stack developer now. And with all information of famous tech out there.

Deployments and Cloud

You made a web application, but it needs deployment! There are a lot and lot of things you can do here. There are different cloud providers for this and other services.

The most used is AWS, Amazon Web Services. Amazon generates a hell lot of revenue from this. You'll probably need to know about the basics of the cloud to use this. There is Google Cloud Platform from Google and Azure from Microsoft.

You might even use Heroku or similar ones at first.

I would recommend AWS as it is widely used. You can try it, you'll probably start with EC2 for your backend deployment. EC2 is the heart of AWS. There are other services you can learn on the basis of your need. Don't worry a lot about this right now, it will be easier to understand as you move forward!

There is more stuff out there like containers, serverless, etc. which are quite interesting and the list is never-ending. You might've heard of docker, lambda.
Try not to spend endless hours on a particular thing. Full-stack Web Development is an amazing journey, a journey you will never regret! It's an interesting one, just start and you won't realize you are a full-stack developer in no time.

Thanks for reading, I hope you enjoyed reading it.

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