Forem: Aniket Singh

2024: Unwrapping My Year of Change and Adventure

Aniket Singh — Mon, 06 Jan 2025 11:06:41 +0000

Before we dive into the activities I undertook in 2024, let's take a step back and revisit the resolutions I set for myself in 2023. 🔄 I had been working with my first company for 2.6 years, a place I joined right after graduation. This journey taught me a lot about collaboration, adapting to new trends, and continuous learning. 🎓💼

Working with a company for such a long period, you naturally form personal connections with your team members. This makes the decision to leave quite challenging. However, I realized that growth often requires change, be it in terms of salary or work culture. So, I made a resolution in 2023 to find a new job by the end of the year. 💡🎯

Yes, you heard it right! Even though I work in tech, changing jobs required me to hit the books again. I had to brush up on data structures, system design, and solve machine coding puzzles. So, I began my prep, solving questions on platforms like CodeChef, GeeksforGeeks, LeetCode, and reading through various system design articles. 📚💻

Simultaneously, I started applying for jobs and attending interviews. Although the rate of receiving interview calls was only 20%, I remained undeterred. I knew that every 'no' was one step closer to the 'yes' I was working towards.

Initially, I stumbled and fell at every interview I attended. It was disheartening, to say the least. 😔 The failures bred self-doubt, making me question my abilities. After all, how could someone who had worked on production-level apps for 2.5 years fail? What was I doing wrong? 🤔

However, after the initial few interviews, I decided to turn my failures into lessons. I started maintaining notes on the areas that needed improvement. These notes were a reflection of my shortcomings in the interviews. 📝💡

These notes turned out to be a game-changer! They helped me identify my weak spots and work on them. With every interview, I was learning, growing, and inching closer to my goal. And sure enough, after a few more interviews, I managed to crack a few companies! 🎉💼

Finally, I decided to go with the company I'm currently with. It was a journey filled with ups and downs, but every stumble was worth it. So here's to embracing failures, learning from them, and turning them into stepping stones towards success! 🚀🌟

With a few months left before joining the new company, and after the whirlwind of job-switching hustle, I decided it was time for a breather. 🍃 So, I packed my bags and set off on a trekking adventure with my ex-manager. 🎒👟

The experience was nothing short of surreal. 🏞️ Being amidst nature, away from the chaos of the city, felt like a balm to my soul. Every step I took, every trail I followed, brought a sense of calm that's hard to find in our everyday lives. 🌳🌲

The rustling leaves, the chirping birds, the cool breeze - it was a symphony of nature that played the perfect background score to our adventure. 🍂🐦🌬️

After a rejuvenating 10-day trip, it was time to get back to the grind and kickstart the onboarding process at my new company. 📝💼 With a new company comes new tools to learn, and this time it was TypeScript. Having worked with JavaScript for two years, picking up TypeScript was a breeze for me. 💻🚀

Upon joining, I was assigned a project that required me to learn the AntD Design system. This was a new territory for me, and I had to learn it on the go while implementing it on the frontend. 🎨🖥️

I dove right in, and with time and the guidance of senior engineers, I gained a good grasp of AntD. In this project, I also got the opportunity to work with monorepos and follow atomic design principles for a scalable frontend architecture. 🧩🔬

Every day brought new learnings and challenges, but with each one, I grew not just as a professional but also as an individual. So here's to embracing new tools, learning on the go, and turning challenges into opportunities for growth! 🌱🌟

In the past, I had worked with startups, where the approach to project management was quite unconventional. However, in my new role, we used more structured tools like JIRA for task management and Sentry for alerting. 📋🔔

Working with these tools not only streamlined our processes but also significantly boosted our productivity. 🚀💼 It made tackling issues easier and more efficient, allowing us to focus on what truly mattered - creating and innovating. 💡🎯

Lately, I've also incorporated AI tools into my workflows. I've been using Cursor for writing code, Claude for resolving tech doubts, and GPT for proofreading and copywriting. 🖥️🤖

Being passionate about writing, I've also managed to secure 2-3 paid gigs for tech writing. 📝💰 A big shout-out to the dev.to platform for providing such opportunities! 🙌🎉

Over time, I've come to realize the importance of extending our software services by building a SaaS product. 🌐💻 Building a successful SaaS requires understanding and knowing your audience. To achieve this, I've embarked on a journey of personal branding. 🚀🎯

I've secured a domain name for my portfolio site, created an Instagram page dedicated to tech content, and started posting regularly on LinkedIn and Twitter. 🌐📸💼

I built a SaaS product, and although it didn't work out as planned, the journey was filled with invaluable lessons. 📚💡

In my current organization, we have a book club that has encouraged me to delve into the world of books. 📚💡 I took this path and ordered a few from a long list of recommendations.

As we step into 2025, let's make it a year of enriching our minds with more books, 📚 rejuvenating our souls with more trips, 🌍 giving our dreams another shot with more SaaS ventures, 💻 and focusing on real connections by spending less time on social media. 📵 Here's to a year of growth, exploration, and mindful living! 🌟🚀 Let's make every moment count! 💫

So, there you have it - my 2024 wrapped up! 🎁🎉 A year full of ups and downs, but with plenty of moments to cherish at the top.

Mobile Web Woes: Navigating Common CSS and Font Issues 📱🔧

Aniket Singh — Sat, 09 Sep 2023 13:34:19 +0000

Introduction 🚀

Ah, the joys of web development! Everything looks perfect on your desktop browser, but then you switch to mobile, and suddenly it's like you've entered a parallel universe. Weird vertical scrolls, fonts that refuse to load on the first render, and those pesky extra scroll glitches. 🤦‍♂️

But fear not, fellow developer! We've got the solutions to these common mobile web development issues. Let's dive in!

1. The Mysterious Case of the Extra Vertical Scroll 📜

Problem: You've set your div to take up 100vh, but on mobile, you're still getting some unexpected vertical scrolls. Why? Mobile browsers like Chrome and Safari introduce extra UI elements that can mess with your perfect layouts.

Solution: Dynamically set the body height based on the window's inner height.

function setBodyHeight() {
    document.body.style.height = `${window.innerHeight}px`;
}

useEffect(() => {
    window.addEventListener('resize', setBodyHeight);
});

useEffect(() => {
    setBodyHeight();
}, []);

Explanation: By setting the body's height to the window's inner height, we ensure that our page takes up the exact height of the visible viewport, regardless of any browser UI elements.

2. The Font Loading Fiasco 🅰️

Problem: You're using custom fonts, but during the initial render, the browser's default fonts load instead. This can lead to a jarring experience for users.

Solution: Preload your fonts!

<link rel="preload" as="font" href="YOUR_FONT_PATH_HERE" crossorigin>
<link rel="preload" as="font" href="YOUR_SECOND_FONT_PATH_HERE" crossorigin>

Explanation: By preloading fonts, you're telling the browser to fetch them early in the loading process. This ensures that by the time your content renders, your custom fonts are ready to be displayed. Storing assets in a CDN like Cloudinary can further speed up this process.

3. The Horizontal Scroll Sneak Attack 🚫

Problem: You've set your website to be 100vw width with no extra horizontal scrolls. It works on desktop, but some mobile browsers ignore the overflow property on the body, leading to unwanted horizontal scrolling.

Solution: Use a wrapper for your body content.

<body>
    <div class="WholeBodyWrapper">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </div>
</body>

.WholeBodyWrapper {
    overflow-x: hidden;
    position: relative;
    height: 100%;
}

Explanation: By wrapping the entire content of the body and setting the overflow property on the wrapper, we ensure that the overflow rule is respected, even on mobile browsers that might ignore it on the body element itself.

Conclusion 🎉

Mobile web development can be tricky, but with the right tools and knowledge, you can navigate these common pitfalls with ease. Remember, the key is to test, adjust, and test again. Happy coding! 🚀

I hope this blog post serves as a helpful guide! Remember to replace the placeholders in the code snippets with your actual paths or values.

Building and Deploying Nodejs Backend on AWS using Serverless Framework

Aniket Singh — Sun, 07 May 2023 10:10:01 +0000

What is serverless computing?
Serverless computing is a cloud computing model where the cloud provider dynamically manages the allocation and scaling of computing resources for running application code, allowing developers to focus solely on writing and deploying code without worrying about the underlying infrastructure. In simpler terms, it's a way of running code without having to worry about the servers on which it runs.

What is server-based computing?
In a traditional server-based architecture, the developer would need to provision and manage virtual machines, operating systems, web servers, and other infrastructure components required to host and run their application. This approach requires a significant investment in time and resources to set up and maintain, and can be expensive to scale and secure.

Server	Serverless
A server does not scale up or down. Its capacity cannot be exceeded, and its resources stay available even if they’re not being used (being effectively wasted).	Serverless systems automatically scale server instances up and down to handle the load. I just wanted to let you know that you do nothing to achieve this behavior.
A server requires maintenance. If you run a server, you might have to monitor it, install software, install patches, tune it, and perform other operations. You have to figure out how to deploy your code to it.	Serverless system require no maintenance. The cloud provider handles all these details of managing the underlying hardware. You just write and deploy code using tools provided by the cloud vendor.
A server has some ongoing cost associated with it. Typically costs are paid on an hourly, daily, or monthly basis just to keep the server up and running, even if it’s not being used.	Serverless systems are billed per function invocation. When you deploy code to a serverless backend, you will be charged for resources uses (invocations, memory, bandwidth). If you use nothing, you are charged nothing.
A server allows you to deploy services that run on an ongoing basis. You can typically log in and run whatever programs you want, whenever you want, for as long as you want.	Serverless systems are event-driven by nature. You deploy code that runs in response to events that occur in the system. These can be things like database triggers that respond to changes, or HTTP requests that serve an API. Code does not run outside of the context of handling some event, and it is often constrained by some time limits.
Monolith Architecture	Microservice Architecture
Example - AWS EC2	Example - AWS Lambda

Okay! We will be developing two node API's for better understanding of the process.

Project Requirements:-

Steps:-

1) Initialize Node.js project

npm init -y

2) Install serverless and serverless-offline libraries

npm install -g serverless
npm install serverless-offline --save-dev

3) Execute the below command from your project directory terminal

serverless create --template aws-nodejs

After following the above steps, your project directory will look something like this

4) Delete handler.js file and make a folder named api.
5) Inside api folder, create two files named calculator.js and sayHello.js
6) copy and paste the below codes in their respective file.

sayHello.js

module.exports.sayHello = (event, context, callback) => {
    const response = { statusCode: 200, body: 'Go Serverless!' };
    callback(null, response);
  };

calculator.js

module.exports.calculator=(event,context,callback)=>{
    const payload=event.queryStringParameters
    console.log(payload.action)
    if(payload.action==="add"){
        const add=Number(payload.num1)+Number(payload.num2)
        const response={
            statusCode:200,
            body:JSON.stringify({data:add})
        }
        callback(response)
    }

}

Now, you might be thinking what is event, context and callback? 🤔 Don't worry I got you covered 😎.

Event: In AWS Lambda, an event is a trigger that initiates the execution of a Lambda function. An event can come from various sources, such as an API Gateway HTTP request, a file upload to an S3 bucket, or a message in an Amazon Simple Queue Service (SQS) queue.

Context: The context object is an input parameter passed to a Lambda function at runtime, providing information about the execution environment and resources available to the function. The context object includes details such as the AWS request ID, function name, version, and memory size, and can be used by the function to interact with other AWS services and resources.

Callback: A callback is a function that is passed as an argument to the Lambda function and is called by the function when it completes its execution. The callback function allows the Lambda function to return data to the calling code or to report errors or exceptions that occurred during execution. The callback function typically has two arguments: an error object and a data object, which the function can use to communicate the results of its execution back to the calling code.

Now our two API's are ready, it's time to configure our functions in serverless.yml file so that they can be deployed to AWS without any hassle.

What is serverless.yml file?
The serverless.yml file is a configuration file used by the Serverless Framework to define and deploy serverless applications on various cloud platforms, such as AWS, Azure, and Google Cloud Platform. The serverless.yml file contains the application's infrastructure as code, including the services, functions, resources, and plugins required to run the application.

The serverless.yml file typically includes the following sections:

service: Defines the name and description of the serverless application.
provider: Defines the cloud provider and its specific configuration options.
functions: Defines the serverless functions, their code, and their configuration options.
resources: Defines the additional resources required by the application, such as databases, queues, and buckets.
plugins: Defines the plugins required by the application to extend the Serverless Framework's functionality.

By defining the application's infrastructure in a serverless.yml file, developers can easily deploy, manage, and version their serverless applications using the Serverless Framework's CLI. The serverless.yml file also provides a reusable and portable way of defining serverless applications, allowing developers to deploy their applications on multiple cloud providers with minimal changes to the configuration file.

Now since you know what's the purpose of serverless.yml file, copy and paste the below configuration in your serverless.yml file.

service: serverless-blog
frameworkVersion: "3"

provider:
  name: aws
  runtime: nodejs18.x
  region: ap-southeast-1

plugins:
  - serverless-offline

functions:
  hello:
    handler: api/sayHello.sayHello
    events:
      - http:
          path: /hello
          method: post

  calculataor:
    handler: api/calculator.calculator
    events:
      - http:
          path: /calculator
          method: get
          request:
            parameters:
              querystrings:
                action: true
                num1: true
                num2: true

Let's deep dive into each and every thing mentioned in the configuration file:

1) service: The name of your service.
2) frameworkVersion: Framework version of serverless-lambda
3) provider: In our case, we are using AWS and our functions will be deployed in the ap-southeast-1 region.
4) plugins: If you are using some dev dependencies or external tools make sure to mention that in this section. In our case we are using serverless-offline library as dev-dependency for local testing.
5) functions: In this section, we list our all functions that we want to deploy on AWS.

i) `hello` and `calculator` are the name of the functions that will be visible on AWS under lambda service.

ii) handler: It is the path where a particular function is defined. Example, in `api` folder we have `sayHello.js` file and in sayHello.js, we have `sayHello` module defined. Hence the handler is `api/sayHello.sayHello`

iii) http: It denotes that we are going to use Lambda proxy, you can refer AWS and serverless docs if you want some other proxies.

iv) path: It is the route on which we will be invoking that function. Example:- https://dev.to/calculator.

v) method: API methods like GET, PUT, POST etc.

vi) request: If you are using GET request then you have to define the query parameters in the style mentioned above.

So, Yes! That's it. It's time to test our API's.

7) Run the below command in your project directory terminal

serverless offline --httpPort  4000

After successful building you will get the following URL's:
http://localhost:4000/dev/hello
http://localhost:4000/dev/calculator

Let's test and See the Output:

Yay! We did it 🤝.

Time for final deployment 👨‍💻!

8) Run the below command from your project directory terminal

serverless deploy

If everything goes well, you will see API Gateway URL's on your terminal.

Once you run serverless deploy a cloudformation service is created by AWS with resources such as API gateway, AWS Lambda, S3 bucket, etc based on your yml configurations. Cloudformation gives developers an added advantage to just focus on code and not worry about the resource creation.

To Lean more about serverless - https://www.serverless.com/

If you reached till here, I bet you learned something new today!
Keep Learning, Keep Sharing! 😉

Debugging Web Applications.

Aniket Singh — Sun, 19 Mar 2023 12:17:18 +0000

Hey readers 👋 , welcome back to yet another blog on a very interesting topic in which many beginner-level web developers struggle 😢.

Debugging is a very important skill in software engineering, many software engineers spend a lot more time in debugging than actual coding. Trust me debugging doesn't mean that you are not a good software engineer or you didn't write clean code, well in fact if taken in a positive way it means that you are aware of the product which you are developing fully and know the edge cases also of that product 😎.

Prevention is better than cure, well this quote fits in the software industry too meaning if we find and prevent bugs early in the development or testing phase then the risk of application breaking in production may reduce.

Bugs don't have to be only code related, they can be functionality bugs also for example you are clicking a button and the behavior of that button is something else rather than what you expected.

Let's discuss various debugging tactics 😉:-

✨Debugging frontend with border CSS property:-

Consider below HTML code

<div className={classes.CheckContainerOne}>
   <p>Hey I am Here!</p>
</div>

Now, in this case, we want the p tag to be vertically and horizontally centered into its respective div which is CheckContainerOne, To make the content center to its div we need to first assign a height and width to the div and then flex it.

Check the below CSS for the same.

.CheckContainerOne{
  height: 50vh;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

Output 1:

From the above output, we cannot predict whether our content is centered or not, so how can we check it? Well just give a border to the div and then see the magic 😁.

.CheckContainerOne{
  height: 50vh;
  width: 50vw;
  border: 2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

From this, we can easily say 'Yes! our div is now centered' 🤝.
In this scenario, some developers prefer using background-color instead of border and it depends 😒. From the above trick, you can also check whether your div is properly placed at the right location or not.

✨Inspecting elements using the browser inspect tool:

<div className={classes.BorderContainer}>
   <p>Inspect Me!</p>
 </div>

 .BorderContainer{
  width: 50vw;
  height: 50vh;
  border: 2pz solid blue;
}

There is an issue in the above CSS code but you didn't notice it during development and you are wondering why the CSS is not being reflected on the frontend 🤔. Well, don't worry I got you covered 😎.
Follow the below steps:-

Right-click on the web page and choose inspect.
Once you click on inspect, you will see below screen

Now select the element where you think is an issue and see the CSS code on the right side. You can also select the div from the inspect tool HTML view.

From the above image, we can see that our border property is invalid, now we got the culprit and can fix it.

If you are working with any modern framework or library on the frontend then you might have used some UI library like react-date-picker etc. In the library, you might want to tweak some CSS to fit in with your website theme. To override CSS styles of the UI library you have to write the same CSS classes in the root CSS file called index.css or sometimes the library itself provides a JSON which contains the classes which you can override. Now there can be a case that the class is not overridden and the CSS is not applied, in this case, you can use the above trick to check whether the class is added or not.

✨Debugging using console.log()

<div className={classes.ButtonContainer}>
    <button type="button" onClick={checkFunction}>Check Value</button>
 </div>

const checkFunction=()=>{
  console.log("This is working")
}

You might have done the above thing many times, but why do we do it? Well, we just want to check whether we attached the event listener properly and to the correct element or not.

There are certain situations where we are not getting the expected value, check below code:

const checkFunction=()=>{
    let a=7;
   if(true){
    let a=5
   }
   console.log(a)

  console.log("This is working")
}

Now some people might think that the a value will be 5 but it's not and you try to console the a value at a different line in the code.
If you are a react js developer then printing state and ref values every time is pretty normal. Not all local variables in react components are accessible in JSX, especially if you are changing it in runtime and if it didn't get updated you tend to console it in JSX.

✨Debugging Backend Code:
Every backend developer sometimes gets frustrated about why data is not coming to the backend and due to this, they start blaming frontend developer that probably you have not sent the data in a proper format. Well, why play the blame game here? you can just console the body of the request using req.body and check whether data is coming or not.

Well, now that backend developers say that my req.body is empty that means there is an issue on the frontend. You as a frontend developer can debug using the network tab of the browser.
How can I access the network tab?
Follow the below steps:-

Right Click on the web page and click on inspect.
Go to the network tab.

Something like the below will be your screen:

On the network tab, you can check your payload, request headers, the response from the server, and all the requests which you are sending from frontend.

✨Experimenting with styles in the browser:-
If you don't want to directly code the css instead you want to first experiment with different styles then you can do this using the inspect tool of the browser.

See the below video for reference:
Inspect Tool

✨Using Browser call stack to debug:
You can also track the function calls, variable environments, and their values with the help of the call stack in the browser. I don't use it much.

Things to follow, Things to avoid in CSS!

Aniket Singh — Fri, 25 Nov 2022 11:39:21 +0000

Hey readers 👋, before starting to explain things let me first introduce myself so that you can gain some trust in what I am saying and why I am saying it. I am a self-taught developer currently working at a startup whose projects majorly involve building complex web3 and web2 products. We give the utmost importance to UX/UI in our projects.

My role at the organization involves developing the front end of the applications. Yes, I am responsible for centering a div in the middle of a page 😅. My work consists in developing UI screens with adding more interactivity with some cool animations. Here animations don't mean hover and active effects but making a line move around the four divs in a jig-saw manner and a lot more.
Trust me, front-end development is not an easy task 😥 . But don't be afraid of it, it's interesting too 😊.

I primarily use ReactJS for the front-end side of applications. Even though you use any libraries or frameworks like Vue, Angular, Svelte, etc under the hood it's all about HTML, CSS, and Javascript. The reason being JSX is all about the Syntactic way of writing HTML only. To override the default classes of a library you should know CSS.

Pro Tip:- Never start your web development journey with libraries of JS and CSS like react, angular, bootstrap, Bulma, etc.

Until now you must have got little sense of "Why HTML and CSS are so much important?", let me be brief now. See when you work at a web agency or a startup where you have to build websites from scratch with the designs that the designer provided to you, you have to be pixel-perfect in your work because every time the designer will not ask you for the same edits. As we all know how much creative designers are, and that's not the actual problem because they are meant to be creative and your job as being frontend engineer is to transform their imagination into code. This is where the core HTML and CSS knowledge comes into the picture.

Whenever a design is provided to you, your mind should start thinking about how should I structure this. Should I use flex or grid? All these decisions become easy when you have in-depth knowledge of HTML and CSS.

Good Practises ✅

🎇 Short-hand properties.

margin-right:20px;
margin-left:10px;

Instead, you can follow this:-

margin:0 20px 0 20px;

Aliasing:-

margin:top right bottom left;

✨ CSS variables.

font-size:16px;
color:red;

Now Imagine a case where your application is fully developed and its codebase is quite large, the client wants to change the color of the text from red to green and reduce the font-size a little bit.

Now, will it be a good idea to go through each CSS file and do the changes? Not at all, at least to me.

In index.css of your react application you can do something like this:-

:root{
   --black:#000;
   --X-large:18px;
   }

Now go to any css file and do this:-

  font-size:var(--X-large);

Now even if the client wants to change anything, you have to tweak only one index.css file that's it.

🎆 Global styling.

You might be doing something like the below in your CSS files:-

*{
   margin:0;
   padding:0;
}

Instead of this, you can simply add the above code in index.css of your react application and all the changes will be applied to each component.

✨ Class Naming Conventions.

Always make sure to follow standard naming conventions. The organization you are working in might have a dev guide related to this, if not then you can tell everyone to follow a common naming convention, like giving class names in PascalCases.

.ClassContainer{
  margin:2px 0 2px 0;
}

🎆 Debugging with borders.

If you are not sure how much space a container is taking in a page or where is this container placed?
Just add a border to that container, and it will solve your problems.

    <div class="container">
        <h1>Hey There!</h1>
    </div>

.container{
  border:2px solid red;
}

🎇 Browser Compatibility.

Not all CSS properties and their values are supported in browsers and also the look of certain HTML elements gets changed when viewed on browsers like safari.
So it's better to do a compatibility test of CSS properties using caniuse and also build custom components for HTML elements.

🎇 Understanding Box Model.

It is important to know the CSS Box model, it will help you to adjust spaces between elements, inside of elements, and their borders.

✨ When to use percentages? When to use px?

  <div class="container">
     <div class="InnerContainer">
         <p>Hey There!</p>
      </div
  </div>

.container{
  width:900px;
  height:900px;
}
.InnerContainer{
 .width:80%;
}

Suppose you have a condition just like above, where there is one parent container named "container" and its child container named "InnerContainer", so what you can do is give a constant width to the parent container and make the child container width in percentage. Now what will happen is that the child container will take 80% of 900px, and on smaller devices, you can just reduce the size of the parent container and the child container will automatically take up the required size because it is in percentages. This is not only valid till only two containers, but you can nest till any number of containers, just give the constant width to the outermost container and rest percentages.

Bad Practises ❌

🎆Using !important.

Try to avoid using !important it will work in some cases but there will be a possibility that it can break things as well. In the rarest cases, you can use it.

🎆 Using Positions.

I am not a fan of using positions in some cases just because it becomes too static in the sense you have to manage it on each small device size. Instead, you can go with flexbox if it suits your need.

Hope you liked the Blog 😁 , See you next time 👋.

Data is Everything!

Aniket Singh — Sat, 05 Nov 2022 10:32:52 +0000

We live in a world where "data" is given more priority than others 🙄, and that's a fact 😎! No one wanted to share about "what they are doing", "where they were last night," etc. just because of privacy reasons 😤. Isn't data privacy something that everyone should understand? 🤔 And what will happen if we lose it? "If we are connected to the internet, then we start to lose our privacy," said one of the senior developers.

The major source of income for big tech giants like Google, Amazon, Meta, etc. comes from our data alone. Curious to know how? continue reading below 🙂. Well, we have been discussing so far "data" and "data privacy", Let's decode both.

What is data?

Data is a collection of raw, unorganized facts and details like text, observations, figures, symbols, images and descriptions of things, etc.

What is data privacy?

Data privacy generally means the ability of a person to determine for themselves when, how, and to what extent personal information about them is shared with or communicated to others.

Do you have any idea how data was handled in the web1 world, where all of these things were not happening? Check it out.

What is web1?

Web1 was introduced when the internet was born. At that time the main purpose of websites was to show static content in the form of blogs, newsletters, and articles.
All the websites were internally linked using hyperlinks.

Since there were no user interactions with the websites, the businesses used fewer data overall. "No user interactions" in this context refers to the inability of users to add data to websites, give reviews on items, or express their liking. In a nutshell, we may state that "data privacy was the center of the Web 1 universe. 😉"

The big picture of Data Privacy comes in the web2 world.

What is web2?

Web2 was introduced in order to bring interactiveness to websites and also users can perform certain actions.
Big tech giants like Google, Amazon, Microsoft, etc are currently ruling the web2 world.

Social networking platforms like Instagram and Twitter and e-commerce websites like Amazon and Flipkart spring to mind when we talk about web2. Every day, these business servers receive millions of Terabytes of data uploads.

What actual data gets uploaded to their servers 🤔 ?

The servers of Twitter and Instagram save your photographs, comments, likes, dislikes, messages, and a variety of other things.
The servers of Flipkart and amazon save your reviews, ratings, purchases, and many other things.

More than 300 million photos get uploaded per day. Every minute there are 510,000 comments posted and 293,000 statuses updated.

Well did I told you that they track your web activity too 🤨? How?

Assuming you've made the decision to get some sneakers from Amazon, you head there to look for them. bought it. Google now suggests some sneakers from a different brand when you start searching for anything else. This is nothing more than a few machine learning algorithms that use information from your online browsing.

Is data that important to a company?

Indeed, from a business standpoint, they were interested in learning things like "Are people content with our product? ", "Which product is trending on our platform? ", "reviews linked to a product? ", etc.

There are several businesses that utilize user data for marketing, financial, and healthcare analysis.

Future of Data - Alternative data 😎!

What is Alternative Data?

Alternative data is defined as non-traditional data that can provide an indication of future performance of a company outside of traditional sources, such as company filings, broker forecasts, and management guidance.

Want to know more about alternative data 😄?
Check out Proxycurl now!

Web1 vs Web2 vs Web3

Aniket Singh — Fri, 22 Jul 2022 14:42:49 +0000

✨ Web1 ✨:-

Web1 was introduced when internet was born. At that time the main purpose of websites was to show static contents in the form of blogs, newsletters and articles.
All the websites were internally linked using hyperlinks.
A user was able to only consume the information not interact with it in web1.
HTML and CSS were used to built websites in Web1.

✨ Web2 🎇

Web2 was introduced in order to bring interactiveness to websites and also user can perform certain actions.
Big tech giants like Google, Amazon, Microsoft are currently ruling the web2 world.
Now you may be confused that how these big tech giants are ruling the world, well let me decode it.
Let's suppose you open instagram.com and logged in into your account.
On the instagram home screen you see the posts of the followers which you follow.
In the instagram feed section, you get to see the posts according to your interests.
Now the thing here is that you are not controlling what you are seeing in your feed, its instagram who is controlling what and how to display the posts to your feed.
So thats how our user data and activity is stored on instagram servers and based on the data, instagram is recommending the posts to us.
So in short terms, a central entity called instagram who is controlling the user data in web2 and thats how web2 is lead by the tech giants.
HTML, CSS, Javascript, ReactJs etc are the libraries/frameworks used to build websites in web2 world.
And don't forget we are living in web2 world so take care of your data.

🎆 Web3 🎇

Web3 is the term which is currently booming a lot.
In web3 each user is its own boss, which means instead of a central entity ruling the data of the users, here each user can monitor the activity going on and they are highly interconnected.
In web3 world, we mostly deal with transactions which means whatever actions we perform on the web is recorded in the public ledger as a transaction and everyone can see the transaction details.
Web3 contains many topics like NFT, DeFi, Blockchain, Smart Contracts and we will cover this topic separately in future blogs.

So I hope you got a high level view of how web1,web2 and web3 works 🤞.
See you in the next blog 👋.

ALL ABOUT OPEN SOURCE

Aniket Singh — Sat, 20 Feb 2021 14:35:32 +0000

What is Open Source?

Open Source software is the software whose source code is freely available under some licensing conditions so that we can provide some extra features to the current version, find bugs and report some issues. With the help of Open-Source software, we can read its source code and if needed we can implement its some part into our project under some licensing conditions. Open Source is not only related to software but also is more related to programming languages, projects and some well-known High leveled Design Systems.

Open Source Software.

Here is the list of Some Popular Open-Source Projects:-

Mozilla Firefox
Mozilla Firefox is a customizable internet browser and free open-source software. It offers thousands of plugins that are accessible with a single click of your mouse.
LibreOffice
LibreOffice is a complete office suite that offers presentations, documents, spreadsheets, and databases.
GIMP
Another of the best open software source examples that are worth mentioning is the photo editing tool GIMP.
VLC Media Player
VLC Media Player is one of the most popular open-source software examples that you can use for free.
Linux
According to a Stack Overflow survey, 83.1% of developers claimed that Linux is the most wanted platform. Linux is one of the most user-friendly open-source software on the market. It is most commonly used on Android devices and desktops.
GNU Compiler Collection
GNU Compiler Collection is a collection of compilation tools for software development in the C, C++, Ada, Fortran, and other programming languages.
Python
Python is common programming and scripting language used by custom software developers.
PHP
When talking about the best open-source software examples of 2021, we shouldn’t miss PHP.
MySQL:
MySQL is an open-source relational database management system.

Nowadays open source practices are becoming very popular, developers are outsourcing their project to the world so that his/her project gets proper shape as per their needs. There is also a scenario that every person on this planet does not know each tech-stack that exists so if he/she wants to add some extra feature to his project which they might not know then they can approach a person who knows the field and can do the required changes. Many big organizations/companies like Netflix, Linux foundation, etc are making their project open source so that they get ample amount of suggestions, improvements, and bug fixes from experienced developers.

What is git?

Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all to be merged into one source. Git is the main root of the version control system and many company's/organizations use it on their platform for project tracking.

What is GitHub?

GitHub is a website for hosting projects that use git.

Various Platforms for Open-Source projects:-

GitLab
Gitlab is an open-source, powerful, secure, efficient, feature-rich, and robust application for handling software development and operations (DevOps) lifecycle. This is possibly the number one alternative for Github, as it supports group milestones, issue tracker, configurable issue boards and group issues, moving of issues between projects, and more. It also supports time tracking, powerful branching tools and protected branches and tags, file locking, merges requests, custom notifications, project roadmaps,
issues weights, confidential and related issues, burndown charts for project and group milestones.
Bitbucket
Bitbucket is a powerful, fully scalable, and high-performance development platform designed for professional teams. Education users and open source projects get free Bitbucket accounts and many other features. You can easily import your GitHub repositories to Bitbucket in 6 simple steps and supports third-party integrations. It has remarkable features such as Bitbucket pipelines, code search, pull requests, flexible deployment models, diff view, smart mirroring, issue tracking, IP whitelisting, and branch permissions for safeguarding your workflow.
Beanstalk
Beanstalk is a powerful, secure, high-performance, and reliable platform for managing source code repositories. Beanstalk designed to improve your development workflow using features such as code review, issue tracker, repository statistics, release notes, notifications, email digests, compare view, and a full history
of commits and files, and so much more.
Launchpad
Launchpad is a fully free, well-known platform for building, managing, and collaborating on software projects, built by Canonical, the makers of Ubuntu Linux. It has features such as code hosting, Ubuntu package building and hosting bug tracking, code reviews, mail listing, and specification tracking. Furthermore, Launchpad supports translations, answer tracking, and FAQs.
GitBucket
GitBucket is an open-source, highly pluggable Git platform that runs on JVM (Java Virtual Machine). It comes with features such as a repository viewer, issues tracker, pull requests, documentation, and wiki, as well as a plugin system to extend its core features.

To get into the world of open source, you should know at least one programming language, knowledge in the sense you should be able to solve complex problems using the language. And the second most required thing is learning git and GitHub, there are lots of resources available on the internet regarding the same. Learning doesn't mean only watching the tutorial videos, you must have a habit of "coding-along" while learning.

Now that you have learned and implemented one programming language and git/GitHub, it's time now to look for some beginner-friendly repositories in which you can make your hands dirty by making some good contributions and applying the knowledge you have gained. There are two ways in which you can find repositories.

Using the GitHub search feature.

Here you can write your programming language name on the place where I have marked with red and hit enter then Github will list all the repositories that use the particular language.

2.Google it.
You can use google search by just typing "Beginner friendly repositories for "[it's just a demo sentence].

Note:- In the above sections, I have just guided you for searching for a project related to your language, but for finding the relevant organization you need to hustle more as it requires a decent amount of searches in finding perfect-fit organizations related to your tech-stack/language.

After you found the matching repositories/organization related to your tech-stack/language then setup the code-base on your local machine and start understanding it. If you are finding any difficulty in setting up the code-base then you can contact the maintainer/mentor of the repository regarding the same. But before approaching any maintainer regarding the doubt, firstly you should see for the errors you are getting on the internet and if you
are not able to tackle it then you can approach the maintainer.

After you get familiar with the code-base try to search for the issues that have a "good-first-issue" label on them, the meaning of the label is that even the beginner having the basic knowledge of the tech-stack can work on the issue. If you found some extra bug or wanted to add some extra feature then you can create an issue by yourself, but make sure that you check all the issues first to ensure that there is no such issue created first.

Open source is not about just coding, you can work on improving the documentation[Readme. md] also of the project. Documentation is also equally important as coding as it guides the collaborators step by step about the project and "How you can contribute to it".

If you get stuck on solving some issues, you can take help from other developers using the IRC channel/slack of the organization. The biggest advantage of open source is that the community is there to help you at each stage of your development.

Good practices for contribution:-

Always raise an issue first before creating a PR directly.
Always make your own branch for making changes and then create a PR from your branch.
Always be concise about your doubts.
Be humble while asking your doubt and be patient till your doubts are resolved.
Always follow the code of conduct and contributing guidelines of the project.
If you are creating an issue then be descriptive about the issue, add some images related to your fixes, etc.
During creating a PR, provide a proper description of the changes you have made with screenshots if necessary.

Making your first contribution:-

Fork the repository. open your cmd.
git clone https://github.com/YOUR-USERNAME/repository-name.git
cd repository-name.
i. git remote add upstream [URL of mail repository]
ii. git pull upstream

4.git checkout -b "branch_name"
i. git pull upstream branch_name

5.Make your changes.

6.git add . // it adds all files

7.git commit -m "commit-message"

8.git push -u origin

9.create a pull request

10.open pull request.

Wait for your PR to get reviewed and merged. Congratulations 👏🥇 you wrote a line of code that is going to be used by hundreds or thousands of people, this feeling can not be expressed as it has its own importance.

Even though your PR gets merged but it's your responsibility to stay in touch with the project and the maintainers, help other peers who are facing
an issue.

Open Source Programs:-

Advantages of open source contribution.

Ability to work with a large code-base.
Grow your network.
Habit of writing efficient and precise code.
You can add your contributions to your resume.
Improves problem-solving skills.
Get to learn something new.

GIL in Python

Aniket Singh — Sun, 07 Feb 2021 08:59:54 +0000

What is Threading?

Threading in python is used to run multiple threads (tasks, function calls) at the same time. This means that your program will have two things happening at once. Threading is a feature usually provided by the operating system. Each thread has its own memory space.

Python code without thread.

#Program for time estimation of a function without threads.
#import time module
import time

#initializing start variable with time in seconds before the code execution
start = time.perf_counter()


def do_something ():
    print ('Sleeping 1 second')
    time.sleep(1)
    print ('Done sleeping')

#If we call the do_something() once it will take 1.01 seconds for execution.    
do_something()

#But if call the do_something() twice, it will take upto 2.02 seconds for exection.
#The program runs synchronously.
do_something()

finish = time.perf_counter ();
print ('Finished in' + str(round(finish-start,2)) + ' seconds')

Python code with thread.

#Program for time estimation of a function with threads.
#import module
import time
import threading

start = time.perf_counter()

def do_something ():
    print('Sleeping 1 second....')
    time.sleep(1)
    print ('Done sleeping...')

#Assigning thread to each function for parallel execution.
t1 = threading.Thread(target = do_something)
t2 = threading.Thread(target = do_something)

#Telling our OS to execute the threads
t1.start()
t2.start()

t1.join()
t2.join()

finish = time.perf_counter()

#Because of threads process gets completed in 1.02 seconds
print ('Finished in' + str(round(finish-start,2)) + ' seconds')

In threading, the operating system actually knows about each thread and can interrupt it at any time to start running a different thread. Threading runs on a single processor and therefore only runs one at a time.

What is Concurrency?

The dictionary definition of concurrency is simultaneous occurrence. Concurrency is great for IO-bound operations such as for reading a file or communicating over a network. If many threads start executing simultaneously then we can say that it is concurrent.

Process vs Thread

What is Multithreading?

In multithreading, the concept of threads is used. Multithreading is defined as the ability of a processor to execute multiple threads concurrently.

GIL[Global Interpreter Lock]

The Python Global Interpreter Lock or GIL, in simple words, is a mutex (or a lock) that allows only one thread to hold the control of the Python interpreter. This means that only one thread can be in a state of execution at any point in time.
The impact of the GIL isn’t visible to developers who execute single-threaded programs. This means that in python only one thread will be executed at a time. The performance of the single-threaded process and the multi-threaded process will be the same in python and this is because of GIL in python. Python has a reference count variable that keeps track of the number of references that point to the object. When this count reaches zero, the memory occupied by the object is released.

Generators in Python

Aniket Singh — Sun, 24 Jan 2021 07:28:46 +0000

Yield

Yield is a keyword in python which is used to throw[return] a single value from a list at a time to a calling function, whenever a function encounters a yield keyword it pauses the execution of the function and throws specified values by maintaining the local memory.

# Function which yields the numbers.
def normal_yield ():
    yield 1
    yield 2
    yield 3

# iterate over the numbers
for value in normal_yield() :
    print (value)

Whenever calling function execution stops, then control passes to the next line below the yield keyword in the called function.

# Program to count numbers 1 to 10.
def number_count ():
    # value initialization.
    i = 0
    # infinite loop.
    while True:
        yield i
        # after function called, flow execution starts from here.
        i = i + 1

# Priting the values.
for count in number_count ():
    if count > 10 :
        break
    print (count)

Iterators

We can also iterate through the list using the next() iterator function after the list is yielded. Although 'for in' loop is much more convenient than the next() method in case of execution time.

def square_number (nums):
    for i in nums:
        yield (i*i)

#variable holding the yielded number
my_nums = square_number ([1,2,3,4,5])

#iterating using the next() functions
print (next(my_nums))
print (next(my_nums))
print (next(my_nums))
print (next(my_nums))
print (next(my_nums))

Generators

Generators are like the normal python functions which we define, but if the function contains the 'yield' keyword in the definition then the function becomes a generator function. Yield is a keyword that makes the generator function.

def compute ():
    i=0
    while True:
      yield i
      i = i + 1

for check in compute ():
    if check % 2 == 0:
        print(str(check) + " is Even")
    elif check > 10:
        break

Return vs Yield

1. Return

Whenever a function runs, the return statement has to wait for the process to complete and after the function execution comes to an end it returns the whole variable or list to the calling function. This takes some time for execution as well as occupies the memory for the whole list. The next time we want to execute the same function then it will run from the beginning.

def square_numbers (nums):
    result = []
    for i in nums:
        result.append (i*i)
    #return has to wait to process the above statements.
    return result
my_number = square_numbers ([1,2,3,4,5])
print (my_number)

2. Yield

If the function encounters yield keyword it pauses the execution and sends the value to the calling function with keeping local memory as it is, after the calling function executes its task the process returns to the next line of yield in the function definition. With this, the execution speed is maintained as well as it also takes very little space in memory.

def number_square (nums):
    for i in nums:
        yield (i*i)
numbers = number_square ([1,2,3,4,5])
for value in numbers:
    print (value)

Advantages of Generators:

Works in a better way with large sets of data as generators throw only one value at a time instead of returning the whole list like a return.
Return statement consumes lots of space in memory and also takes more time for execution while generators don't.
Return allows the function to execute from the beginning while yield only executes the statement below it and maintains local memory for variables.

Disadvantage of Generators:

The only disadvantage of generators is that they are not commonly used and are less popular.

Hactoberfest2020

Aniket Singh — Sat, 17 Oct 2020 04:29:28 +0000

Completed #hacktoberfest2020!
This was my first time experience with #hacktoberfest.
Being a beginner I learned a lot about how to contribute and the importance of #opensource contribution.
I came across many good repositories that enhanced my knowledge and taught me a lot.
Thank you DigitalOcean, GitHub, and DEV Community for giving developers such a great platform, it was really helpful.