DEV Community: Abhii

Understanding DNS: The phonebook of Internet

Abhii — Sat, 18 Feb 2023 15:28:05 +0000

👋 Hey there!

Have you ever wondered how your computer finds a website on the internet? 🤔 That's where DNS comes in - it's like the phonebook of the internet!

DNS stands for Domain Name System, and it's a crucial component of the internet that allows your device to find and communicate with other devices on the internet. Here's how it works:

🌐 Websites and devices on the internet are each assigned a unique IP address, a string of numbers that identifies them on the network.
📚 But, IP addresses can be hard to remember, especially since they look something like this: 216.58.194.174.
🔍 That's where DNS comes in - it allows us to use human-friendly domain names, like www.google.com, instead of remembering a bunch of numbers.
🔗 When you type a domain name into your browser, your device sends a request to a DNS server to find the IP address associated with that domain name.
📶 The DNS server responds with the IP address, and your device can then connect to the website or device.

So, in essence, DNS acts as a translator, converting human-friendly domain names into machine-friendly IP addresses.

But, how does your device know which DNS server to send the request to? 🤔 Well, your internet service provider (ISP) typically provides you with a default DNS server to use. However, you can also choose to use a different DNS server, such as Google's public DNS or Cloudflare's DNS.

DNS is a critical part of the internet infrastructure, and it's important to understand how it works. Without DNS, you'd have to remember the IP addresses of every website you visit, which would be a huge headache!

In conclusion, DNS is like the phonebook of the internet, translating human-friendly domain names into machine-friendly IP addresses. It's a crucial part of how the internet works, and understanding it can help you troubleshoot internet connection issues and make informed choices about your internet service. Thanks for reading, and happy surfing! 🌊🏄‍♀️🏄‍♂️

I made a basic search-bar using JS

Abhii — Sun, 18 Jul 2021 06:38:16 +0000

I created a basic search bar using JS and here is how it looks.
So, whenever a keyup occurs inside the search box, our function searches for the item in our list.

Things you should know

Basic JS
onKeyUp
forEach method
DOM Manipulation

You can see the live demo here

The Code

Github Repo

Feel free to fork or clone the repo.

amdhanwate / search-bar-using-js

Thank you!

What, according to you, is the ideal flow of a Full-Stack Project?

Abhii — Sun, 11 Jul 2021 16:50:23 +0000

Ummmm.... I don't know where to start 😢

I have an idea in mind to develop a full stack application and as usual I started working on it without any prior plan. So here I am, stucked, thinking that I should have planned it before, decided if I would be working on Frontend first or the backend or whether I should have designed the layout, decided the theme/colors for my project.

TBH I haven't thought this before writing this post and now I'm frustrated. And hence..., I'm here asking my fav community How do they plan their fullstack projects beforehand to ensure the smooth flow of the project development.

Tech Stack to be used

- Frontend:

1. HTML/CSS/JS
2. Bootstrap

- Backend:

1. Python (To scrape data)
2. Django and Django Rest Framework (To create API)

And once again thanks to this ever helping community of developers who are always ready to help and encourage everyone. ❤️

.parent .child vs .parent > .child css selector

Abhii — Thu, 08 Jul 2021 15:15:46 +0000

Introduction

The .parent .child selector

The .parent > .child selector

After words

styles.css

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #fff;
}
.parent .child {
    background: darkblue;
    margin: 1rem;
}
.parent>.child {
    background: brown;
}

index.html

<div class="parent">
    <div class="child">This is brown</div>
    <div class="one">
        <div class="child">This is yellow</div>
    </div>
</div>

<div class="parent">
    <div class="one">
        <div class="child">Why is thid yellow?</div>
    </div>
</div>

Inspiration

Reveal navbar on scroll

Abhii — Tue, 06 Jul 2021 18:22:08 +0000

Intro and Motivation

DesignCourse's Gary Simon just released a tutorial on the topic that sounds like the title of this blog (I'm not sure if my writing is eligible to be called as a blog 😁)

After I watched that, I thought of recreating it and here I'm showing it to you all.

Let's Start

I'm sure you can write some markup and a lots of the lorem text. So we'll jump right to my javascript logic.

The pre-requisites

window.pageYOffset : It basically returns the position of scrollbar. Check out More on pageYOffset
Basic JavaScript
Basic Logical Resoning
Some time

The Logic

When the user scroll's down the navbar must hide itself and when the user starts to scroll up it must reveal itself back.

So let us have some variables,

lastScroll - Stores the just previous scroll position
currentScroll - Stores the currenrt scroll position

If differnce between currentScroll and lastScroll is positive, it means that user has -- SCROLLED DOWN -- and therefore we will hide the navbar.

Similarly, If differnce between currentScroll and lastScroll is negative, it means that user has -- SCROLLED UP -- and therefore we will reveal the navbar

We will also need some css classes to help us perform the magic,

.scroll-up - what happens after user scrolls up
.scroll-down - what happens after user scrolls down

.scroll-up

header.scroll-up{
    transform: translateY(0);
}

.scroll-down

header.scroll-down{
    transform: translateY(-100%);
}

The Code

You can also find the code on GitHub

amdhanwate / reveal-unreveal-on-scroll

Reveal and unreveal the navbar depending upon user's scroll behavior

After words

Do tell me your thoughts on this and I welcome all type of criticism (I don't know the spelling) which would help me become a better developer after all.

Also, a BIG thanks to our developer community for always helping and encouraging everyone around.

I hope you wait for my next article..

Can script tag have both src and content?

Abhii — Sun, 11 Apr 2021 13:45:11 +0000

You wanna be a software engineer at Google?
Sorry, this is not the part of our discussion today 😁

Can <script> tag have both src and content both?

Well the answer is Yes!! But the rendering is browser specific.

Many of the modern browsers don't run content at all when the script tag has src. If the injection is unsuccessful the browser will log the error as net::ERR_ABORTED 404 (Not Found) and if it is successful it will execute the src script.

According to html.spec.whatwg.org

For the Content model of script tag:

If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

Many programmers tend to put the content inside script and then use DOM methods to get the content as string and then eval it. But this is not a good idea and hence must not be used.

So, What must be the content of the script which has src attribute?

HTML5 Draft specification suggests that <script> elements with src attribute must only include commented out code which gives the documentation of the script.

Again, there's a catch here as well. The following script will produce syntaxError:

<script src="main.js">
    var example = 'Consider this string: <!-- <script>';
    console.log(example);
</script>

I know it's weird but it is JavaScript after all.

The reason for the error is that browser does not find the closing tag for the <script> tag as </script> is considered to be the closing tag for <script> on line:2

What is going on here is that for legacy reasons, "<!--" and <script> strings in script elements in HTML need to be balanced in order for the parser to consider closing the block.

To avoid such issues we can escape the <script> string as <\script> and thus our problems would be solved.

Wrapping up

Yes, <script> tag can have both src and content where content shall only include the commented out code that provides the documentation about the src used.
While using <script> as string always use escape sequence to avoid unnecessary problems. <script> string must be escaped as <\script> and </script> string as <\/script>

That's all for today! Hope you enjoyed the article and gained some
insights on the topic.
Or, Did I made you more confused? 😄

Thank You!!

What are some projects I can do to make myself hireable as a full stack web developer?

Abhii — Thu, 08 Apr 2021 20:29:59 +0000

Functional Components in React

Abhii — Wed, 07 Apr 2021 07:50:29 +0000

I started learning React yesterday and hence I thought I'll write articles about what I learned each day.

What are components in React?

Short answer: Components are independent and reusable block of code and return html using render() function.

Suppose we have the following UI:

So we will have components for each like Navbar component, sidebar component, component for article and footer.

React allows us to write components in two ways:

Functional components
Class Components

Writing your first React component

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Functional Components in React</title>
</head>

<body>
<div id="root"></div>

// Babel (To render JSX), React and ReactDOM
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<script type="text/babel">
  function SayHello(){
    return (<h1>Hello, World!</h1>);
  };

  ReactDOM.render(
      <SayHello />,
      document.getElementById('root')
  );
</script>
</body>
</html>

Understanding above code:

We have a simple html document with div with id as root and some script files:

Babel (used to render jsx)
React and ReactDOM

In our inline script, we wrote our first functional component.
Function SayHello() returns jsx and thus we used imported babel.

Now, we render this JSX into out html with the help of render() function from ReactDOM.
render() accepts two arguments: render(WHAT TO RENDER, WHERE TO RENDER).

Hence our functional component SayHello() renders Hello, World! into the div with id as root.

Points to remember:

Start component name with CAPITAL letter. (Capital CamelCase is preferred)
Your component cannot return multiple elements. Therefore make sure to bind all of them into a single parent element. e.g.

<div>
 <h1></h1>
 <p></p>
</div>

Okay, that's all today. Hope you liked the article and would also like to hear from you to improve my ways of writing these articles.
Don't forget: I'm Noob writer after all 😁

Some Links to learn React:

#0 Hello World of DATA STRUCTURES

Abhii — Mon, 14 Dec 2020 10:11:23 +0000

According to wikipedia,

In computer science, a data structure is a data organization, management, and storage format that enables efficient access and modification.

In simple terms, it is a way of writing data which helps to manage, organise or modify data.

Arrays

Arrays are the most basic data structures.
Elements in array are stored in contiguous memory location.
Elements can be accessed with the help of their index.

We will be implementing our code in C++. Since logic is same for most of the languages you will only need to change the syntax to implement it in any other language.

Advantages of Arrays

Easy and random access to array elements.
Sorting of data can be done easily and in less code.
Traversal through array is easy.

Disadvantages of Arrays

Array size once specified cannot be changed.
Insertion and deletion is hectic as we have to move the elements to manage the continuous memory indexing.

Array declaration in C++

// Array declaration by specifying size
int arr1[5];

// Array declaration by specifying user defined size
int s = 5;
char arr2[s];

// Array declaration by initializing elements
float arr3[] = { 11.2, 34.5, 89.5, 32.09}

// above is same as "float arr3[4] = { 11.2, 34.5, 89.5, 32.09}"

Accept elements from user in Array

int size, arr[size]; 

cout<<"Enter size of array: ";
cin>>size;    //prompt user to enter size of array

for (int i = 0; i < size; i++){
    cin>>arr[i];
}

Insert at beginning of Array

void insertAtBeginning(int arr[], int size, int beg){
    if (isFull()){
        cout<<"Array is Full!";
    }

    else if (isEmpty()){
        arr[0] =  beg;
    }
    else{
        int arrSize = sizeof(arr[0])/sizeof(arr);
        for (int i = 0; i < arrSize; i++){
            arr[arrSize] = arr[arrSize - 1];
        }

        arr[0] = beg;
    }
}

NOTE: Henceforth, only the algorithm will be discussed and it is expected that reader implements the algorithm by writing his own code.

Insert at position in Array

First get the element to be inserted.

Then get the position at which this element is to be inserted.

Then shift the array elements from this position to one position forward, and do this for all the other elements next to pos.

Insert the element at the given position like int[pos] = element

Hope your element is inserted at proper position.

Insert at End

Oh c'mon... I know you can do it without the algorithm.

Delete the element from the Array
You can delete element either by getting it's position or by getting it's value
Delete element by Position

Get the position of element to be deleted.

Loop through the array from the position to end and moving each element one index down.

NOTE: Various testcases are ignored and are expected to be done by the reader.

Delete element by Value

Get the value to be deleted.

Loop through the array and search for the value. Remember to keep track of count/position.

Once element is found, break the loop.

Loop through the array from the position to end and moving each element one index down.

Update the value in Array

Dude...!! Seriously?!!
Just arr[pos] = newValue AS SIMPLE AS THAT.

Here are some problems to practice

Write a C++ program to find the second lowest and highest numbers in a given array.
Write a C++ program to arrange the numbers of a given array in a way that the sum of some numbers equal the largest number in the array.
Write a C++ program to find the number of pairs of integers in a given array of integers whose sum is equal to a specified number.
Write a C++ program to find and print all common elements in three sorted arrays of integers.

Find more at W3Resource

Enough theory now.. Just go around and mess with the stuff.
KEEP PRACTISING. STAY SAFE AND KEEP CODING!!

DEV Community: Abhii

Understanding DNS: The phonebook of Internet

I made a basic search-bar using JS

The Code

Github Repo

amdhanwate / search-bar-using-js

Thank you!

What, according to you, is the ideal flow of a Full-Stack Project?

Tech Stack to be used

- Frontend:

- Backend:

.parent .child vs .parent > .child css selector

Introduction

The .parent .child selector

The .parent > .child selector

After words

Reveal navbar on scroll

Intro and Motivation

Let's Start

The pre-requisites

The Logic

The Code

You can also find the code on GitHub

amdhanwate / reveal-unreveal-on-scroll

Reveal and unreveal the navbar depending upon user's scroll behavior

After words

Can script tag have both src and content?

So, What must be the content of the script which has src attribute?

What are some projects I can do to make myself hireable as a full stack web developer?

Functional Components in React

What are components in React?

Writing your first React component

Understanding above code:

Points to remember:

#0 Hello World of DATA STRUCTURES

Arrays

References