DEV Community: Pranav

How to Learn Backend Development as a Frontend Developer ?

Pranav — Sat, 30 Oct 2021 05:37:52 +0000

In today’s world, most frontend developers want to transition in becoming a full-stack developer and the best way to become a full-stack developer is to learn about Backend Development. We’ll give you a practical and hands-on breakdown of what you should be doing to become good at backend development.

HTML, CSS & JavaScript

As we are assuming that you are already a frontend developer you might be good at HTML & CSS. You may not be a master in JavaScript but you might know enough JavaScript to survive the frond-end tasks. As a front-end developer, you might have mostly used JavaScript to fetch the data from an API and show them in your web application.

Learn About APIs

You might have an overview of how an API works you create a get or post request in your JavaScript you magically get the data in JSON or XML format to your JavaScript which you now cleanse and make it appear in the HTML so that the user can now see the data, but have you ever considered what happens on the other side. The API also has a logic for it running on a remote computer in a server farm (most likely), once you send a request it fetches the data from a database or has to run logic to get the requested data and them package it into a JSON or XML and then send it to the computer which has requested.

What exactly is a backend?

Backend itself is a computer that is running a script, you might be wondering how is it different from the script that you are running on the client computer. Here’s the difference on the client side the script is running inside a browser that could be Chrome, Edge, or Firefox, where the access to OS level is denied and it’s restricted to a certain set of actions as well, but in the case of the script running of the backend server, it has access to complete OS level scripts and APIs. Your backend computer can open a port from the script that it’s running and respond to the API requests from that port itself.

Step 1: Choose and Learn a Backend Programming Language

Now that we have established the base required to start with the backed in Step 0. Now it’s time to pick a language and get a good grip on it to write the backend scripts for your application. As you are transitioning from front-end you have a good understanding of JavaScript, then the best option would be to learn Node.js. Node is not a programming language but a runtime that gives JavaScript the superpower to access the whole Operating System and other parts of the computer. There are also many other languages that you can choose from. Here’s a good list of languages that you can consider, in the case where you don’t want to learn Node for the backend.

Rust
Go
C# (Pronounced as C Sharp)
Java
Python ## Step 2: HTTP / DNS / Networking This is the most crucial part that will determine your power as a backend developer. You must have a good understanding of HTTP protocol and how it’s everywhere on the internet. You must also learn about DNS (Domain Name System) and DNS Lookup which is the process of obtaining the IP address from the given domain name, and a bit of Networking basics will surely separate you from the rest backend developers, as you can now swiftly understand how the architecture of the internet is and functions.

Step 3: Learn about Databases

The database is like the backend to the backend that you building because that’s the place where all the data that you collect or send is stored, if your website does not have a database, then your website is most probably a static website where the content is already preserved in the HTML document itself. There are two different types of databases currently and even to use them you must be familiar with a different language called SQL (Structured Query Language) (pronounced as Sequel) to communicate with the database, as mentioned the two types of database are SQL and NoSQL Databases, even though they are a lot different on how they store and share data, but they do the same thing at the end of the day. So you can choose anything between the two and start building a database.

Step 4: Build a lot of Applications

Now that you learned all the different chunks to build your backend, now it’s time to get in the action and build as many projects as you can and experiment with different ways you can build. Building applications will strip the fear and bring in the confidence that you can make a backend on your own.

Step 5: Deployment

Deployment is a different part of the whole system of backend technologies, now that you built your applications it’s time to host them and get to the internet. Many beginners tend to go down the rabbit hole of SaaS hosting services like Heroku and Vercel, instead, you must pick an IaaS (Infrastructure as a Service) like Amazon Web Services, Google Cloud Platform, and Microsoft Azure. Now when you pick an IaaS you’ll have the raw infrastructure as you have to manage all the steps and setups to host, you’ll get a very good idea of IP address, security issues, and Port numbers, and you can manage the whole deployment pipeline by yourself.

Step 6: Web Security

Now that you can build and host your backend server it’s time to get the knowledge of the different kinds of security vulnerabilities. When it comes to web security, you mostly have to worry about data validation, as always said “You can never trust User’s Data”. You must be aware of different attacks which are possible when don’t validate the user’s data. You can also consider sandboxing your backend so that you can prevent any kind of leaks or bugs that may affect the entire application.

Conclusion

Completing all the steps may take a lot of time, It mostly comes the how much time you can give and how structured are you while learning all the stuff. It may take from 2 – 6 months to get all the steps right if you followed them. If you want to learn all this in a structured way you should consider taking our Full Stack Learning Path.

Bootstrap versus Tailwind CSS

Pranav — Tue, 19 Oct 2021 02:33:02 +0000

Writing the complete CSS styling for your web app is a little tardy. In the age of CSS frameworks, it's a no-brainer to use them, but there are a lot of frameworks, and as a beginner, it's tough to figure out to choose which one from the vast available options. The two most popular frameworks are Tailwind CSS and Bootstrap. We'll closely analyze both of them to help you out to pick one for your next project.

When you should not use any CSS Framework

As a beginner, you'll find the frameworks to feel very attractive. You want to add them to your tech collection, but first, take a step back and assess your CSS skills, whether you'll be able to write CSS without any help. You know all the CSS required to build a well-looking website, build some basic flexible layouts, use grid layouts, and build some basic responsive layouts to support different devices. If you can't do them well, you are too early for the party. If you follow any tutorial that says to learn a CSS framework after learning HTML, then the tutorial way of teaching is probably wrong.

You need to have a solid understanding of the CSS before playing with any of the CSS Frameworks so that you'll be able to work with any one of the frameworks in the future with a minimal learning curve.

Tailwind CSS versus Bootstrap

If you have read the description about the frameworks on their home pages, you might get the fundamental difference between them. If you haven't, no problem, you'll get a sound understanding of the differences and similarities here. The significant difference is that Bootstrap is a UI (User Interface) Toolkit, which means it has pre-built components like an accordion, modal, and navbar that can be copied and pasted as code directly to your website code. On the other hand, Tailwind CSS is a utility-first framework which means that it will restrict CSS in such a way that you get outstanding defaults out of the box so that you don't need to write 15 lines of CSS to get a good looking box. Tailwind also helps us maintain consistency much more manageable than what you can achieve on plain CSS. Just add a class name of add a class name of p-4 you get a padding : 1rem; to your element. As Tailwind restricts the values of the numerical properties to a much smaller domain, it helps us to maintain symmetry effortlessly.

Tailwind's Just In Time Compiler

‌The developers are very excited about the Tailwinds Just In Time compiler as it allows us to write custom numerical values in the class names themselves. This is a good feature, but if you are using Tailwind only because of JIT, you might consider shifting to writing plain CSS because both are the same. Even if writing in Tailwind reduces the syntax when you start writing those arbitrary values, it's easier in the CSS world to maintain them than in the Tailwind CSS.

Which one to choose?

Well, there is no perfect answer for this question as such. It boils down to the developer preference. Suppose you want to bootstrap a website at the weekend. In that case, it's logical to go with Bootstraps. It saves you a ton of time making responsive user interfaces for your website as it already has the pre-made components for you, starting with a header, sidebar, accordion, cards, and footer as well. If you don't have the same old formal components, you can go for Tailwind CSS. If you want to build custom and yet symmetrical and build them with speed, then Tailwind should be your default choice. For that matter, Tailwind also released its set of components, but they are paid as of now. They are called Tailwind UI.

If you have a lot of time and want full control over the design. In that case, going with the plain CSS shouldn't be a problem at all, because ultimately, you want to build better layouts for the users so that the application becomes intuitive enough that it also saves a lot of time navigating through the website. If you can build everything just with plain CSS and you are comfortable and happy with that, then there's no point in scouting for Frameworks that suits you.

How to test your code as a Developer?

Pranav — Tue, 19 Oct 2021 02:24:53 +0000

Testing your code is very important before deploying your code to production. By testing your code every time you ship, you can easily eliminate security and application bugs, then spend hours debugging after shipping to the production.

Static Testing

Let's start from the bottom of the pyramid of testing. The first one is Static Testing. The compiler itself performs this test for statically typed languages like Rust, C, and C++. To know more about static and dynamic types of languages, see here. Static testing can't be found or done well when you come to languages like JavaScript and Python. In the case of JavaScript, you can migrate your codebase to TypeScript to get Static Testing to a certain extent. TypeScript is highly recommended when you are building large projects as it enforces good practices and discipline to the codebase.

Unit Testing

Unit is the small part of the whole. Similarly, the unit here refers to a function in the more extensive codebase that you are writing and maintaining. Rigorously testing a particular function is called unit testing. So the next question is, how do you write unit tests to your code? Technically, there are libraries for unit testing each function of your code, but how they work is the bigger question.

Let's take an example of a function that finds whether a given number is prime or not. Now that you have written the code for the function, it's time to check whether the function works appropriately or not, so how do you do that? Well, you already know in some cases what will be the expected output of the function. You know that when you give 2,3, or 5, that output should be prime. So if you have a set of computed answers already, you can cross-check and evaluate whether the function is working appropriately. From the largest website like WolframAlpha or a graphing website like Desmos, the developers of this website have unit testing operations to test the code before every push to the production so that nothing gets broken when the end-user accesses the website.

Integration Test

The term integration test might be a little intriguing at the start but is very simple regarding how it works. Well, some functions need to work flawlessly when put together, like checking the whole login functionality or something which can't be completed in a single function. Till now, we have discussed three testing methods, and all of them are tested at the code level by another code.

End to End Testing

End to End testing is also called E2E testing. With this, we complete the pyramid of testing. So the tests that we have done will check whether the code that we have written works perfectly and fetches us our desired outputs, but then how would you check whether the UI of the code is functioning and generating the desired output for the user. This is where the End to End testing comes into play.

E2E testing considers your whole application as a black box and simulates a user's behaviour and checks for a given behaviour that the given output is correct or not. These include logging into the application, or creating a new account, checking the display of the graphs, and the most important and delicate part, "the payment gateway". All the tasks mentioned above are high-level and are very important for them to function as required. With the help of the simulation that E2E offers, you can do that.

The amount of time testing takes

According to the pyramid, you can see that the amount of time the testing takes in each stage increases with the stage level. At the bottom is the static testing, which is handled by the compiler itself for typed languages, and in the case of unit testing, you need a runner, and a library like Jest or mocha would do the job for JavaScript.

Conclusion

Testing is your code is a horrifying experience as a beginner, but it finally pays off in the end. You don't need to debug your applications in production anymore and give bug-free code to the end-user, which is the ultimate goal of any developer. ‌It's never wrong to learn to test, but in fact, it's essential to have minimum tests before passing them to your colleagues or getting ready for the production as well.

You can watch the video on Codedamn YouTube Channel.

Networking Basics for Web Devs

Pranav — Fri, 15 Oct 2021 13:11:46 +0000

HTTP Fundamentals

The first and the most important thing is HTTP Fundamentals. This is also the first thing you will learn if you follow Codedamn's full-stack learning path to learn web development.

The protocol is the fundamental way computers contact and shares information in the first place. Understanding what protocol means is a must in terms of networking.

IP Addresses

When you learn HTTP, the next thing you'll come across is IP (Internet Protocol)addresses, which is also covered in the learning path. It's intuitive to understand this term, as it is simply a group of numbers to identify the computer in a network uniquely.

Port Numbers

The term networking itself means forming many relations. As such, port numbers are also very much related to the IP addresses in the networking aspects of the computer architecture. Port number set up a point of interaction between the client computer and the server you are connected to. You can learn more about port numbers in our HTTP Fundamentals Course.

DNS

After the series of outages from the unicorn companies, it's no doubt many of you might have heard the term DNS which stands for Domain Name System. In short, it's the phone book of the internet to access the web pages. It's the client computer that finds the IP address for a given domain name with the help of the DNS. Once you get the overview of what DNS is, you can go through the process of DNS Lookup. It's the process of how your computer gets the IP address and the long path that requests travel to get the IP Address.

You must also be familiar with the different types of records of the DNS. The most common and essential records that you must know are A, CNAME & TXT. Below is the list of the records in the DNS:

CLI Related Tools

It's always handy to know command-line tools to access the network rather than taking the help of online websites. Tools like nslookup quickly help us find the different records for the DNS with just one single command, you have to learn the command once, and you can now access them directly from the command line.

The lsof command-line tool, which means list open files, is another handy tool to find out which processes listen to a particular port.

Virtual Private Cloud

You might have heard of VPN (Virtual Private Network), which is not related to what we are about to discuss, as you may have heard VPN is for privacy so that your ISP and others won't be able to track your internet usage. Virtual Private Cloud may be a little similar to that, but it's for keeping your architecture like Codedamn. We use it for masking our Redis, EC2, and Lambda Functions from the internet so that they are not vulnerable to all the scripts on the internet.

Subnet and Route Tables

Knowing about subnet and route tables is essential for creating your own Virtual Private Cloud while using a cloud provider like AWS.

You can also learn about Classes on the IP address and the new IPv6 format for taking a deep dive into the networking world.

Conclusion

There is always so much to learn either in the networking or the development world. New things come. There are so many advancements. As a human being, you can't know everything that exists. Pi shaped learning is essential in any field it may be. So when it comes to networking, learning about IP, ports, and DNS and its records is a good start for you as a beginner. You can also learn about how DNS caching works and debug using CLI tools for the networks that you have made. ‌

‌‌You can watch the YouTube video here.

Google Core Web Vitals Explained

Pranav — Sun, 03 Oct 2021 08:16:43 +0000

If you are a web developer, you should understand the concept of core web vitals very well because there are parameters that help make your website more performant and faster and all the best practices to optimize your website perfectly.

Google Web Vitals

There are many web vitals defined by google, and they have handpicked some of them and gave them the name core, and hence they are called core web vitals.

The three core web vitals are Cumulative Layout Shift, Largest Contentful Paint, and First Input Delay. These are mostly the guidelines that google follows to evaluate your website as software. And if the tests are passed then, that's a thumbs up from google.

1) Cumulative Layout Shift

Cumulative Layout Shift is the metric to measure the unexpected layout shifts within the viewport that occur during a page's entire lifecycle. This metric states the visual stability of the webpage as it also determines the User Experience for the most part. It's essential to understand the metrics unit, the unit of CLS is not in seconds because it's not measured in time. It measures the change in the viewport size or the shift of elements on the page. The lower the value, the better the score for this web vital.

2) Largest Contentful Paint

This metric delivers the time. It says how fast the largest part of your page gets loaded. Let's say you have a small web page with a heading, paragraph, and an image that takes most of the web page. As the web page's largest part is the image, Google tracks the load of the image to determine the Largest Contentful Paint of the website. You can see in the below image what is the largest part of the web page in each loading phase.

Its best in the LCP is in the range from 0 - 2.5 seconds. Also, Largest Contentful Paint and Cumulative Layout shift are somewhat interconnected. If you add the image to the web page dynamically, which takes a lot more time to load than the static pages, it affects both the values. After all, there is a cumulative shift in the user interface without any user input, which is unexpected for the user. The user experience of the web page is torn apart at the start itself.

3) First Input Delay

Once the server responds with the necessary file to load your website, the first page that your web browser renders is the index.html page, and this HTML page might need some resources like CSS files, JavaScript files, or .wasm in some cases. If you are not familiar with how the HTML document is mounted on the browser, it is done by a single thread, and this thread is often referred to as UI thread or the main thread of the website. So, when the additional resources are fetched from the network, the process is asynchronous, which means the UI thread is not blocked. But once the downloading of the JavaScript files is completed, it must be executed. The execution of JavaScript blocks the main thread of the website.

The longer the JavaScript takes to complete its execution, the longer your page will be unresponsive and the larger the penalty you face for more prolonged inactivity. The phase of the loading is measured as the first input delay by google. It's measured in seconds as it's a time metric. This is the most important metric of all the three that we have discussed because the whole interactivity of the page depends on the output reaction of your application. The FID value should be under 100 ms to maintain better responsiveness of your website.

Conclusion

As mentioned in the above image, our website passes the Core Web Vitals assessment from the data collected over the previous 28 days. Our website is well under the maximum value that google puts in. The core web vitals play an essential role in determining the overall score of the website. Well, there is room for improvement on each page of the website. If you are aiming for the highest score possible on your website's main pages, that's enough.

Google also uses the Core Web Vitals as one of the Ranking factors of the SEO of your website, so make sure if you have a website than to maximize your core web vitals till the possible extent. There are a lot of factors that might affect the core web vitals, but the most important being the code of your website, which should be properly maintained to score an extra mile in the Page insights meter.

You can watch the full YouTube video here.

5 Google Tips and Tricks for Power Developers

Pranav — Thu, 23 Sep 2021 04:52:43 +0000

Google is what makes developers more productive daily. It's good to know some tips to google faster and make you a more productive and awesome developer. Here are the five tips for you.

1) Search for a File Extension

Sometimes we don't want to see a webpage when we come to google to get an image or a pdf file. In that scenario, it's good to mention filetype: pdf. Then Google will only show the pdf files for you. This will save you some friction when searching for a specific file extension. The extension could be any known extension like jpg, png, svg, pdf, doc, etc.

2) How to even Google in the first place?

Writing the correct words and sentences is essential to get the desired results from any of the search engines, for that matter. So unless you have a specific error that you can copy & paste to get the solution for that, you can't type a complete paragraph and expect results because it's not always possible to get the desired results. When keywords come in, you have to use the most eligible keyword for that search when you search for a solution or a new topic that you want to understand.

If you are looking for a library to perform network requests in react, then what should your search query be. Well, you might be thinking I'll directly search for How do I perform network requests in react, but are you sure that this result will only give you react libraries that will help you perform network requests.

The fewer sentences and more keywords get you the best results. As in the previous case, you should search like React network request libraries, react HTTP request library, fetch alternatives in react.

Because it's easy for Google's algorithm to map your keywords to the pages which have the most forwarded and backlinks for that particular keywords, and as it is based on the number of people who visited it, you'll get more and better results on the top instead of in the middle. But when searching for a console error, it is better to copy-paste the error and search because google indexes the most searched sentences.

3) Exact text match search

When you surely need a keyword mentioned in the searched pages, then you can do it by wrapping that keyword in double-quotes, i.e. ".
For example, if you want to search for hoisting in js, there may be a chance that you get search results related to flag hoisting so you can make the js into "JavaScript" so that now you most probably will get pages that have hoisting related to JavaScript. Exact text match must only be used in required cases because using the quotes will filter Google's ranking system and only return the results with that particular keyword. So it's not always preferred to use the exact search until it's necessary.

You must clearly understand the context before using the quotes in your search query.

4) Site-specific Search

For specific tasks, you only want to trust a single source lets you only want the answer from StackOverflow for your error and filter out all other sites in the search results. Well, you can do that by mentioning the site name like site:stackoverflow.com before or after your search query. By doing this, you'll only get the results from your desired website, and Google will filter out all other search results for you.

This is not used in many cases, but this can also be helpful for you if you want to check whether your blog is appropriately indexed by google or not so that you can access your ranking from Google's side.

5) Filter results by the time

You might be maintaining a legacy codebase, and you want the search results from a particular time. This is also possible and can be done easily in the google search bar without touching the filter queries beneath the search results header.

Using the header could be a good thing in some cases to get results from the past week or 24 hours to get the latest news. But what will you do if you mention a range for the queries, so you only search results from a specific period? Then you can use the .. (double dots). So now you can mention it like PHP Error 2000..2005

By using the .., you will now get the results published from that period. This will save you the time of using the time filter while searching for legacy queries.

Conclusion

You might think that these feel absurd or not useful to you at any point in time, but when you try using these features combined, you'll feel the power of how to control the search queries like a pro and never have to scroll again to find the perfect result for your query anymore. This will only make you a better developer and a googler. You won't lose your developer skills by becoming better at googling. This will save you some time while debugging grave errors.

5 Ways to make money as a Developer

Pranav — Thu, 23 Sep 2021 04:45:58 +0000

Paid Content Creating

Creating content is the appropriate way to elevate or bringing up a brand. Many companies/publications pay you for writing content for their blog, domain, or website. If you are a very good content / technical writer, you can earn up to $300 per article as a developer.

You have to reach out to the publications, whether it could be emailing or messaging them in any way possible. Digital Ocean and Log Rocket are some of the companies that publish articles regularly. Reach out to the companies and write an article that is particular to your domain. This is an easy way to make money without coding all the time.

Selling Interactive Courses Online

You might be wondering what interactive courses are. Let me explain. Well, you all know what courses are on an upper level. They consist of videos and videos and videos, which you can play all day long. These courses don't offer any medium of interactivity as it's one-way communication.

Okay! But where do interactive courses exist? Fear not, Codedamn has launched its creator panel, where you can build your interactive courses, and your learners can now write, run & debug their code from the browser itself. Visit creator.codedamn.com and signup for free to start your journey as an instructor. You can also host them on white-label domains, your course your website.

This is the best way to generate passive income in the long run, as it does not require your attention all the time.

Brand Building and Sponsorships

If you are a person who is mostly into content creating and want to build a good subscriber base and brand for yourself, you should most probably be an active YouTuber or Twitter. For the most part, you can expect any kind until 6 - 12 months have passed, but you can increase your brand value by partnering with other companies or brands that need growth. Look out for brands that'll sponsor your video. Building a good brand for you takes time, and you have to spend time for the community joining live sessions, interacting.

Once you get a good base as a YouTuber, you can now get a chance to explore the sponsorships on your channel and can also tweet about them.

Mentoring other developers

This is something a developer who is still on the journey can also do. You can guide the beginners on the correct path and fill their knowledge gaps. This is similar to trading time for money because mentoring is mostly charged on a time basis. You can only earn when you invest your time. So mentoring is most likely active income, which you have to make actively. This is not a good choice in the long run as this requires a lot of time and energy from the mentor, which may not be possible all the time.

Start Freelancing

Freelancing is a very good way to start your journey as well. You can start with platforms like Fiverr and Upwork and start freelancing on a small project, and once you get a good grip and your name is around the platform, and you have good reviews, you'll probably get bigger projects and can earn a good chunk of money. Read more about freelancing on this blog.

Conclusion

There are fundamentally two ways to gain income, i.e. active and passive ways to get your income. Mostly, everyone starts with active ways and then builds passive ways. Building a passive stream of income takes time and effort. You'll generate enough money to stop the active ways and improve your passive income.

Web Apps versus Mobile Apps

Pranav — Thu, 23 Sep 2021 04:42:06 +0000

Are web apps killing mobile applications? Is pursuing the web better than choosing mobile applications. Is it the end of mobile apps here? Let's answer these questions throughout this blog.

Web Apps

Let's set the tone clear here. You might be thinking that web apps mean websites. Hmm, well, in this context, you're mistaken. Here web apps mean those mobile applications that are built using web technologies like ionic or react native. Right now, web apps mean they generally run as an app on the mobile with the help of the mobile browser. This means web developers can build a website and web apps using the same tech stack, which saves them a lot of time to build again for mobile. When a new feature gets rolled out for the application, it's simultaneously accessible on the computer and mobile. That's a huge pro for developers and users.

Cons of Web Apps

Even with the rapid performance improvement, the browsers make, in no time soon, you'll be able to run a 3D game with 60 FPS on mobile smoothly than that of a natively coded application. Here, the example of Safari on the iPhone would give you an idea as the safari browser can run only with the help of an API called WebKit, limiting your application's performance when it comes to the phone.

The second con of the web apps would be support for Native APIs. Let's take the example of Ionic here. Ionic provides native support for developers on the mobile by interfacing with the native APIs of the mobile with their medium called capacitor, which acts as the middle man between the code you have written and the Native APIs. In this case, Ionic needs to update regularly, which can't be possible all the time because new native APIs get added on recent updates to the phone. You may lose the connectivity to the native APIs as the capacitor can't access the newly added APIs.

How React Native Works?

As discussed above with ionic, it's almost similar in the case of React for mobile apps. As the code is written in JavaScript and bridge (react-native) helps the mobile understand the code that we have written, and with the help of the native UI and module, React Native constructs the User Interface and the application's functionality. The difference here is some code can be directly understood by the Native API, so that the bridge has no role to play, but that's not the case every time. The bridge is still an active layer that converts the JS code to the native code, as a translation of the bridge also comes at the cost of the application's performance.

Progressive Web Applications

You might be wondering are PWAs not native apps, yes you are right. Progressive Web Applications are run out of the browser as a normal web application but gives you more features and access to some native support. PWAs are also made completely using HTML, CSS, and JavaScript. But PWAs work extremely well in Android phones, the problem comes when we are talking about iPhones as apple started the support of PWAs in 2017 where as google started them in the year 2013, and the iphone's browser Safari can't give you as much access the androids browser chrome does.

If you want to focus on building performant mobile applications then it's better to try out languages like kotlin and swift which have first-class support for the operating system.

The Suggestion

If you are already a web developer who also wants to run your applications on mobile, then there is no harm in choosing to build PWAs or use Ionic and React Native.

But if you are not a web developer and want to learn web development for building mobile applications, then that's the wrong choice. You should take another route to learn Kotlin, Dart, or Swift to develop your mobile applications. But going to build in the native languages comes at the cost of production because you need two teams to build the same applications, one for Android and the latter for the ios, but that's okay if you want to build high-performance apps. Suppose you don't know anything about web development and want to develop high performant mobile apps. In that case, it's better to directly learn about the native support stuff than to have web dev as an intermediate. Still, if you already know about web development and its basics, the faster route would be using PWAs or Ionic or React Native.

Before learning about mobile applications or building them, choose wisely because your journey as a developer also matters when building the product. It's just not about the product. It's also about the journey of building the products matters.

The Ultimate Full Stack Developer Tech Stack | 2021

Pranav — Thu, 23 Sep 2021 04:39:44 +0000

The primary technologies for any developer would be HTML, CSS & JavaScript. It is assumed that you understand what the three of them are.

1) NEXT.JS

If you are a React Developer, you need to learn Next.JS, a server-side rendering framework. This will make your website performant, faster, and robust, but overall, Next.JS has a great developer experience. This might be opinionated if you are a Vue.JS developer, then you can consider Nuxt.js

2) Tailwind CSS

Tailwind CSS is again opinionated. It reduces the possibility of values you can create so that you can make a better layout faster by writing less CSS. Tailwind has pretty discrete values so that you can write p-1 for padding 0.25rem. This helps us in maintaining sane layouts, padding & borders. This is mostly recommended for developers who want to focus on the logic and not on the interface as it helps us create better UI's faster with less code to debug.

3) TypeScript

For anyone working with mid to large-sized projects, it's vital to use TypeScript over JavaScript as maintained, and refactoring the code becomes much easier. TypeScript is generally considered as the superset of JavaScript. Some developers may think it's absurd and a setback in your learning journey to use TypeScript over JavaScript because JavaScript offers dynamic capabilities. Still, TypeScript enforces discipline to the code, which is very much required while writing and maintaining a more extensive codebase.

4) GraphQL

GraphQL changes the way you send and get data from HTTP requests. It's a whole new way to interact with the data as GraphQL brings in the schema. Schema also helps in easing the data validation process, which if you want to do the data validation more seriously, you should use joi library. When you combine TypeScript with GraphQL, you get access to libraries like graphql-codegen, where we can generate static types for the front-end. So that now the front-end code also knows which types to expect from the API calls, this eases the process of identifying and maintaining when you have many endpoints for your API.

5) MongoDb + Mongoose + Mongoose-tsgen

Well, you all might be familiar with MongoDB, a NoSQL database to store your data, and mongoose to connect the database with TypeScript. You might be wondering then what's the need for the mongoose-tsgen. Well, it's similar to GraphQL-codegen, which helps in generating types for TypeScript so that your code knows which types to expect from the database. Using mongoose-tsgen, it's hassle-free, and you'll also have easily manageable types.

6) Jest + Cypress

Now you got a pretty good tech stack for building the project. Now it's time to test your application before shipping it to the end-user thoroughly because you don't want your code to be buggy and vulnerabilities. Jest and Cypress are a good combination. Jest is a runner for the most part and does not have heavy lifting, and with the help of cypress, you can conduct end-to-end testing for your application which is a vital part to avoid any bugs in your production. If a testing pipeline is in place, there is no need to test it manually. The rest is taken care of by the pipeline. You can learn about cypress in this Codedamn course.

7) Prettier & ESLint

Prettier and ESLint are very good utilities that help you as developer dependencies. They help us save a lot of dev time by structuring the file and finding linting issues in the code. This also helps another developer working on your code save time as well, as everything will be configured from them since the start.

8) GitHub Actions

GitHub Actions is for creating the CI / CD pipeline for your codebase, and knowing the basics of GitHub is also essential before you move on the explore GitHub Actions. So once you set up the GitHub actions and push the new code to the repository, you can now sit back relax as the code is built, tested, and deployed by the GitHub actions itself.

9) AWS Lambda

For starters, AWS Lambda is a good choice to learn on the architecture side so that you can host your database or GraphQL there. You can choose EC2 when the database has to handle a lot of transfer, but as a beginner, AWS Lambda works for you as it is stateless and server less.

10) Serverless

The mention of serverless brings us to our next technology, serverless, which is a command-line tool that helps us manage the Lamba very efficiently. You don't need to master this, but getting to know how it functions can reduce the amount of time you spend managing and scaling your cloud architecture. You have to understand how to configure your infrastructure as a code.

Infrastructure as a code is highly important because if anything goes wrong with the existing architecture, you can redeploy your architecture from your code. You need to have a good understanding of the infrastructure as a code.

11) Vercel

If you are using Next.js for your front-end application, then no doubt you should highly consider deploying your codebase in Vercel. There is no better way to deploy your Next.js code than Vercel because Vercel owns and manages the Next.js framework itself, so who will know better than Vercel to configure its framework.

12) Web Security (bcrypt & OAuth)

Web Security is the vital part for your application to be secure and safe for all the users. You should know about bcrypt, which is used as a password hashing tool and OAuth for logging in with third-party APIs like Google & Twitter for your application. Above all this, following the standard web security protocols and knowing about the OWASP's top ten vulnerabilities and how you can avoid them is good enough.

Conclusion

The following list of technologies sums up the full stack developers' tech stack. There might be some alternatives for the technologies mentioned above, and it's only up to the user to choose them. A healthy competition between services is required to provide and improve the existing services. But, each technology has a vital role from the development to the production cycle, so it's necessary to have a basic understanding of all the above to maintain and easily develop new features for your current and subsequent application.

5 Predictions for NEXT JS 12

Pranav — Mon, 20 Sep 2021 02:39:54 +0000

1) Support for Rust Language

Next.JS can bring support to the Rust Language for the compilation part. Most probably, you won't need to code in Rust. It will be present in the Next.js core to speed up the compilation as Rust is used in SWC, a new TypeScript compiler, and as the author of SWC is an employee of Rust. This connects a lot of Dots. So Rust will have some role to play in the Next.JS soon.

2) useSWR Library from Next.js

useSWR library is similar to React Query Library, which helps developers easily fetch data over HTTP requests. Even useSWR being compact does not have all the features available in React Query, and useSWR has released its first stable version, 1.0.0. There is a chance that they will release this grandly in the Next.js 12 conference as well.

3) Create a Page without JavaScript

Well, this may sound ironic to many developers as Next.JS itself is a JavaScript Framework. Next.JS released this as an experimental feature with'unstable_runtimeJS' flag. This will reduce the JavaScript runtime on the browser, leading to new heights in performance for static pages.

4) Pragmatic Incremental Static Generation

You might have heard about static generation. It's a way to generate an HTML Blog on the server every x minutes so that you can serve the page much faster. Now think about the x minutes. Let's say you have updated your blog post now. Your server won't edit the post immediately as it has to wait till the x minutes to pass. This is not a good case of Server Side Generation for your performance and validity of the page. So incremental Static Re-Generation is triggered when the page undergoes any change.

5) Live Collaboration Power to Vercel Deployment

If you were present at the Next.js 11 Conference, you might have heard of Next.js Live, which has given us Live collaboration power to help you complete team designs, front-end and back-end engineers to brainstorm and work simultaneously. They might roll out new features on the collaborative part.

BONUS: Next.JS Edge

In one of the ticket colors, the Vercel team tease about Edge computing. Next.js bundles and computation are mostly run on edge computing anyways. They also have lambda's at the edge support as well. They might be opening server-less functions to everyone, which will speed up server-less operations a lot. This is interesting, but we are not entirely sure about it. But we can expect that when it comes to edge computing, they might also release native support to an already existing database.

Conclusion

This is the second time Next.js is hosting the worldwide conference, and as Next.js is very performant and has good developer experience, its usage is growing high as days pass. The Next.js team is doing its best to deliver new features at minimal intervals. We can't be sure of all the features they are about to ship, but features will surely bring new performance charts.

A guide for Open Source Development for Beginners

Pranav — Mon, 20 Sep 2021 02:25:29 +0000

Open Source Development as a Beginner

As a beginner, you must first have a solid understanding of the language you are learning. You must have a clear-cut vision of what you want to do after learning the language. If not, then what's the point in learning the language. Beginners mostly upload their small projects into GitHub and share the link all around the internet for people to react and review the code that you have written, that's not wrong, but that's not what open source development is.

What actually Open Source Development means?

Open source development means contributing to an already existing open source project that necessarily needs to be a big project. It might be yours, but you can't quite achieve this feat as a beginner because your project needs to have many issues and contributors to call it an open-source project.

So basically, Open source development means contributing to a medium to large scale project. When it comes to code-related development, as a beginner, you can't write or path the existing code without having a good understanding of their codebase. So when you start writing code for an open-source project, it's vital to have a solid understanding of their codebase beforehand.

Contributing to big open source projects as a beginner

If you are a beginner and are currently getting used to build your projects and learning, you should not even think about contributing to big open source projects. If you try to contribute to a big project first, you have to get a good grasp on their codebase, and as a beginner, you won't be able to understand all the libraries or the code written by others. This limits your growth as a developer as it's eats your time to learn new things, so it is not advised to jump right into a big open source project for contributing.

3 Steps for getting into Open Source

1) Don't jump right into open source development
As a beginner, you must be selfish and build your projects. That is how you understand the essence of building projects and maintaining them on your own. Once you start building your projects, you'll come across many libraries or tools that you can integrate into your code for ease of use. ‌
‌In this step, you can upload your code to GitHub, but that does not mean that you have started your open source journey. It's just for maintaining your code.

2) Learn about different Technologies
If you plan to contribute to big open source projects, you should understand all the most popular technologies used by big open source projects. First, you need to understand the package manager & different libraries that are used in most of the projects.

For example, you are creating a dashboard app. Go ahead and clone some dashboard apps available on GitHub and now go through them and understand how they perceived and solved the problems after you get a solid understanding of how to create the dashboard app. Now it's time for you to build one on your own because you have to be selfish in the first few months of your learning to learn better.

3) Search for some open source projects
When searching, the project need not be a project which has 20K stars or 100 contributors. You can start with relatively small projects. You can find some good open-source projects from the libraries that you use for building your project. As now you have a good understanding of how the library works, you can read the source code of that library and add your own feature or add some cool customizability to the project.

The library need not be a huge one. As said earlier, the less popular the library, the easier it can be for you to read the project's code. So choose wisely.

Few developers start finding typos and make a pull request for typos and then proudly say that they have contributed to a vast open source project, but that does not do any good to you as a developer. It does not matter whether you have pushed into Babel, react, or any other open-source development. What matters is the code that you have pushed to the repository.

Benefits of Open Source

There are a lot of benefits for working as an Open-Source Developer

You'll, by default, understand how security / API keys are stored and how not to show them on your code.
You'll get to know a lot of best practices for uploading your code. If you are not following any, the code maintainers will tell you to make the necessary changes. It's a win-win for both yourself and the code maintainers.
You are working on real-world applications, and you'll get to know real issues, pull requests & reviews for a project.
Open source is boundary less when you are working with mid-sized to large-sized projects.
All the small projects you make, like tic-tac-toe or login forms, are not considered open-source projects. They are just learning pathways for you. If you can maintain a good open-source project, you can start a utility project that will undoubtedly interest some developers worldwide.

How to build YouTube like website with AWS ?

Pranav — Mon, 20 Sep 2021 02:14:30 +0000

How does video processing work?

First things first, you have to get your videos ready in a particular video format because the web does not support the wide variety of formats available in the wild.

Let's say you shoot your video at 4K 60 FPS. So the video takes over 4 Gigabytes per 10 minutes. Let's say your videos are made in .mp4 format. Well, the first step is done.

Uploading to cloud

Amazon Web Services offers a lot of services, but right now, we are interested in S3. S3 bucket provides an immense amount of data storage capability. So S3 can handle a lot of data transactions with the process going haywire. So we have found out a server to store our data.

There is no restriction to stick to AWS S3. There are many more cloud providers that offer this feature.
So once we have our signed S3 URL, you can upload your video data to the S3 bucket.

Working of SQS

Amazon SQS stands for Simple Queue Service‌. SQS is a fully managed message queuing service that enables you to decouple and scale microservices, distributed systems, and server less applications. SQS is preferred because it is highly reliable and scalable for receiving tons of data every second.

Working of Cloud Watch

Amazon Cloud Watch helps us set certain alarms. Let's say we keep an alarm when our SQS query is greater than 0 queries.

So now the alarm is responsible for launching the AWS EC2 machine with the help of Amazon AGS (Auto Scaling Groups), and the EC2 launched using a snapshot/template. Therefore when a new query is registered in the queue, the Cloud Watch Alarm triggers and fires up an EC2 machine.

Now when the EC2 machine has launched, it has two jobs.

First job of Cloud Watch Alarm

When queue > 0 in the Amazon SQS

The first job is to read the SQS queue's message and start processing the first message in the queue. The first message contains the location file for the video file from the S3. Now the Job of the EC2 Machine is to process the video file. The video is processed using FFMPEG convert into three resolutions, say 1090,720,480 and upload them back to the Production S3 buckets and update the database.

Now, we use Amazon Cloud Front as the CDN to securely access the video files from the S3 bucket and deliver them.

Second job of Cloud Watch Alarm

When queue = 0 in the Amazon SQS

So now the queue is zero. The Amazon ASG tries to downscale the EC2's as there are no videos to process. Hey, but what if ASG tries to downscale when a video is processing? That's when locking and unlocking the EC2 machine can prevent descaling when a video instance is running.

Cost to make video delivery infrastructure

You may be thinking that this architecture may cost heavily, but it's not true. S3 does not charge for ingress & first download of the data & the first upload from the EC2 instance, so technically, there is no limit for the data you upload to your S3 bucket. Now comes the paying part. Cloud Front charges $0.085 per GB, and S3 charges 0.023 for the data transfer after that.

Data streaming and storage cost for 10 GB = $1.08

Implementing this level architecture will be a little complex compared to the Amazon media package, but it will be 20 times cheaper than its price.

Hope this tutorial gave you an abstract idea about how to create a scalable video architecture.

Watch the full Video on Codedamn YouTube Channel.