Forem: Khansa Mueen

HTTP VS HTTPS – WHICH IS BETTER?

Khansa Mueen — Wed, 26 Oct 2022 10:43:02 +0000

In our daily lives, we deal with HTTP and HTTPS quite a bit, but many people are unaware of the differences.

A QUICK introduction to HTTP vs HTTPS.

The majority of computer users only see that their browser is alerting them that their program is not secure and that a hacker might be attempting to steal their crucial data. As a result, users flee at speeds that break Usain Bolt's record.
But we can avoid this. At this point, HTTP is replaced with HTTPS. And that's what we're going to talk about today.
This article will walk you through the process if you're considering upgrading to the HTTPS protocol but are unsure how it will impact your website.

We will discuss the security, performance, and search engine optimization (SEO) advantages of HTTP and HTTPS.

We'll also examine the differences between the HTTP and HTTPS protocols for data transmission over the internet and the crucial function of SSL certificates.

In addition, we'll go over the advantages and disadvantages of each protocol to assist you in deciding whether to switch.

A quick difference:

Hypertext Transfer Protocol is known as HTTP. It is the protocol that makes it possible for various systems to communicate with one another and exchange data and information over a network.

But HTTPS, which stands for Hypertext Transfer Protocol Secure, is another story. HTTPS works to secure data transmission between web servers and browsers even though it performs many of the same tasks as HTTP.

A digital security protocol called HTTPS protects connections by encrypting and validating data using cryptographic keys. By obtaining a Secure Sockets Layer (SSL) or Transport Layer Security (TLS) certificate, websites can use HTTPS and have a secure domain most frequently.

Remember that although though TLS is rapidly replacing SSL as the preferred protocol for HTTPS, most SSL certificates still support both protocols.

How HTTP Works

HTTP uses plain text to deliver data. For instance, if your bank's website is utilizing HTTP and you were to access it, a hacker might be able to do so and read whatever information you provide.
HTTPS is useful in this situation. To enable users to submit data securely, several businesses have adopted HTTPS.
Here is an example of an HTTP request 👇.

How HTTPS Works

In order to establish a secure connection, HTTPS employs a secure protocol that encrypts your data.
The best approach to have HTTPS on most websites is to obtain an SSL (Secure Sockets Layer) or TLS (Transport Layer Security) certificate.

Currently, SSL is capable of supporting TLS due to its advancement. So, you are not need to obtain a TLS certificate.
Here is an example of an HTTPS request 👇.

HTTP vs HTTPS: Which One Is Better for My Site?

Actually, there is no right response.

Everything relies on the kind of website you manage and the data you use. For instance, the security requirements for a straightforward portfolio website and an eCommerce site with membership features and electronic payment systems are different.

However, HTTPS is quickly becoming the norm for all websites, therefore it doesn't matter if your site handles sensitive data. Additionally, having an SSL certificate enabled on your website has a lot of advantages.

When choosing between HTTP and HTTPS, take into account the following criteria.

Conclusion

As developers, HTTP and HTTPS play a crucial role in daily operations. Much of our work is made possible by the interaction between the browser and the server.

You will win their trust and give them a better user experience by protecting your users' data as much as you can to prevent information theft.

Cheat sheet for React Part I (Updated August 2022)

Khansa Mueen — Thu, 18 Aug 2022 17:53:00 +0000

Would you like to learn React as rapidly as possible?

In order to offer you a thorough review of every React topic you'll need to understand in 2022, I've put together a really handy cheatsheet.
If you liked it, wait for my next article. The good news is that it is beginner-friendly and I covered a really simple concept.

The Game begins here!

Create a React App

Create React App provides a pleasant learning environment for React and is the easiest approach to begin constructing a new single-page application in React.

// Create a new app
npx create-react-app hello-world

// Run the created app
cd hello-world
npm start

// http://localhost:3000

Components

Components are self-contained and reusable pieces of code. They perform the same job as JavaScript functions, except they act independently and return pseudo_HTML syntex. Components are classified into two types: class components and function components. This course will focus on function components.

Functional Component

There is no need to import. React from the word'react' (since React 17).JSX must be returned if the first letter is uppercase.

// React Component
function App(){
  return <h1>Hey, I'm Functional Component</h1>
} 

export default App;

Two ways to import Component

Separate files will be created for each component. Each component must be exported and then imported.

function Card(){
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card

This component may be imported in the following ways; you can also alter its name during importing.:

import ICard from './Card'

function App(){
    return <ICard/>
}

or name export...

export const Card = () => {
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card

This component may then be imported.

import {Card} from './Card'

function App(){
    return <Card/>
}

Nested Components

A component that is nested is a subcomponent of the component it contains. Relative to that parent, the child component is positioned and shown.

// Arrow function shorthand component
const User = () => <h1>Khansa</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello!</h1>
}

// Function component
function App(){
  return (
      <>
          <Message />
          <User />
      </>
  )
}

Some JSX Rules Are here

It is a JavaScript syntactic extension. We advocate utilising it alongside React to specify how the user interface should appear.

parent element

Return just one element (only one parent element)

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with React fragment. 
return (
   <React.Fragment>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </React.Fragment>
)

// valid with fragment as Well. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)

// Noted the parenthesis for multi-line formatting

Instead of class, use className.
Explanation: The only reason it uses className instead of class is that class is a reserved term in JavaScript, and since we use JSX in React, which is an extension of JavaScript, we must use className instead of class attribute.
Also, all attribute names must be in camelCase.

// not valid
return (
    <div class="card">
        I'm Card..
    </div>
)

// valid
return (
    <div className="card">
         I'm Card..
    </div>
)

Close every element is important as well..

return (
    <img src="image.jpg" />
    <input type="text" placeholder="write your name..." />
)

JSX Elements

Like standard HTML components, React elements are written in the same way. Any legitimate HTML element may be written in React.

// valid
const input = <input type="text" />
// valid as well
<h1>I am Header</h1>
<p>I am paragraph </p>
<button>I am button</button>

JSX Functions

All of your primitives may be passed in JSX functions.

// JSX Functions
const name = "khansa";
const age = 22;
const isHuman = true;
return (
<h1>My name is {name}. I am {age} year's old.</h1>
);

JSX Conditional rendering

By utilising an if statement alone:

import React from "react";
export default function Weather(props) {
  if (props.temperature >= 20) {
    return (
      <p>
        It is {props.temperature}°C (Warm) in {props.city}
      </p>
    );
  } else {
    return (
      <p>
        It is {props.temperature}°C in {props.city}
      </p>
    );
  }
}

by utilising an ternery operator

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman ? <h1>My name is {name}. I am {age} year's old.</h1> : <p>I'm not here</p>}
);

By utilising an Truth value or && operator

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman && <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

By utilising an || oprator

const name = "khansa";
const age = 22;
const isHuman = false;
return (
{ isHuman || <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

Properties

The component's input values come from properties. When rendering the component and setting the state, they are utilised (discussed shortly). The component's properties should be regarded as immutable after they have been instantiated.

<User firstName="Khansa" lastName="Mueen" age={22} pro={true} />

Default Props value

The value attribute on form elements will take precedence over the value in the DOM during the React rendering process. You frequently want React to specify the initial value for an uncontrolled component, but let future updates uncontrolled.

const User = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

User.defaultProps = {
    name: 'Khansa',
    age: 22,
}

List Using Spread Operator

export const SpreadData = () => {
 const users =   ["khansa", "Mueen", "Arshad"]

 const data = [...users, "Moiz"]

  return <div>Users data is: {data}</div>;
};

List Using Map

On websites, menus are typically displayed using lists, which are used to display facts in an organised fashion. Lists in React can be built similarly to how lists are created in JavaScript.

const users = [
  {id: 1, name: 'khansa', age: 22},
  {id: 2, name: 'Arshad', age: 33},
  {id: 3, name: 'Mueen', age: 47},
]
function App(){
    return (
        users.map(person => {
            return <Person name={person.name} age={person.age}/>
        })
    )
} 

const Person = (props) => {
  return (
      <h1>Name: {props.name}, Age: {props.age}</h1>
  )
}

Props object destructuring

import React from "react"
import Card from './component/Card'

function App(){
    return(
    <div className = "App">
    <Card title="React Course" duration = "1 day"/>
    </div>
    );
}
export default App;

Conclusion

These are really basic concepts that I have covered for newcomers and I must finish the following section shortly. For additional updates, ping me on Twitter.

Why Everyone Is Obsessed With Career Path In Software Developments: Expectations vs. Reality

Khansa Mueen — Mon, 08 Aug 2022 10:23:00 +0000

The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. -Steve Jobs

Opportunities in the field of software development are expanding at the same rapid rate as technology itself. Management positions are readily available to talented programmers who seek to cultivate their interpersonal interactions and soft skills.
There are a plethora of options to enter the software development industry. Some people fall into programming midway through their careers, while others discover their affinity for coding in a middle school workshop or college group.

However, all prospective programmers ultimately need to ask themselves the same question: How can I turn my enthusiasm for coding into a career? It doesn't matter how your introduction to software development occurs.

We have you covered, so don't be concerned.

This article will cover the career path for software developers, get you ready for the workplace, and demonstrate how to be successful in this field.

Will the world ever be ruled by a typical career path for software developers?

Let's start by being clear that there isn't just one type of job description for someone who works in software development. The specifics of your allocated function and its tasks will vary greatly based on your company, the sector you work in, and your professional goals, even though all developers do have a common set of essential duties. As with all careers, getting the best out of a career in software development means you need to be educated and well prepared.

Software development may be broadly divided into four groups: front end, back end, full stack, and mobile development. In the Stack Overflow poll of professional developers conducted in 2022, 43.38% identified as back end professionals, 46.82% as full stack, 25.96% as front end, and 12.46% as mobile developers.

What speciality should you choose then? Your choice is yours to make. We'll talk a little bit about each of these four domains and the coding abilities you'll need to be an expert in them below.

Front End Developer

Front-end programmers must have a great sense of aesthetics. All elements of a website or app that consumers can see and interact with are created by these aesthetically inclined developers. Consider a site as a whole; the front would include the interior design and furniture.

Front end developers focus on the aesthetics and functionality of websites. Designers are now tasked with equally optimizing websites for computers, tablets, and smartphones, which has made the profession more challenging over time.

Front end developers do this by deciding on the appearance, feel, and functionality of a website using the "building block" languages of web development: HTML, CSS, and JavaScript. Although some ardent programmers refuse to employ libraries to speed up their creation process, the majority of front end developers make use of preset packages and tools that facilitate site customization and maintenance.

Despite this, front end engineers cannot succeed without the assistance of a strong group of back end developers.

Back End Developer

Front-end developers are in charge of the inside wiring, insulation, and pipes, while back-end developers build the "appearance" of a house. Backend engineers provide any proprietary software that their company might require, in addition to the computation-based logic that underlies a website.

These experts make sure that end users receive the information and resources they need as soon as possible. The server and the database are the two parts that make up the back end.

The server is in charge of responding to client queries, whereas the database is in charge of storing permanent information (such as user profiles or product listings). For instance, when a user tries to sign into their profile, the server receives the request through a login portal, pipes the user's authentication data to the database, and checks it against a list of accounts.

Backend programmers interact directly with data, APIs, and other back end procedures. The position calls for a high level of technical proficiency and familiarity with multiple back end programming languages.

Full Stack Developers

Full stack developers do everything, as the term implies. Due to their significant front and back end programming training, these adaptable specialists can switch between the two specialties with ease.

The phrase "full stack" in the development community refers to the whole set of languages, frameworks, and technologies utilised to support a company website. In a functioning system, the front and back ends are intrinsically intertwined; when a user interacts with a feature on the front end, the back end ought to respond to their requests right away.

Full stack developers should have a comprehensive grasp of how a complete operation runs since they are jacks-of-all-trades. They could, however, have greater expertise in one area of study than in another.

What if I'm not interested in leading people?

You're in luck though, as a career in development starts at such a high pay level, allowing you to be recognised for your contributions alone and yet have a fulfilling job. Despite this, there are increasing job prospects for programmers in today's tech-driven environment. Leading to senior management and executive-level jobs, many development occupations proceed linearly up the software developer career ladder.

Having stated that, not everyone may be suited for managerial positions. Some programmers detest the thought of being a manager. Others might like the addition of a managerial position to their list of personal challenges.

Conclusion

At the conclusion of the article, I wanted to recommend a podcast video that has many answers to queries that worry developers.

BUN IS A LIGHTWEIGHT ALL-IN-ONE JAVASCRIPT RUNTIME.

Khansa Mueen — Fri, 08 Jul 2022 10:46:07 +0000

Most likely, you've run into a JavaScript bundler before. This is relatively well handled by tools like Rollup or Webpack, but something amazing is on the horizon.

Let me introduce you to Bun, a bundler you should be familiar with if you plan on developing JavaScript in the near future.

Jarred Sumner, a former frontend programmer at Stripe, developed the project Bun, which calls itself "experimental software." The MIT licence makes it open source. Yesterday, Sumner unveiled Bun's public beta, calling it

“an incredibly fast all-in-one JavaScript runtime.”

He claimed on Twitter that it can bundle more than a million lines of JavaScript every second.

Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

PLEASE ELABORATE ON BUN:

A contemporary JavaScript runtime similar to Node or Deno is Bun. It was created from the ground up with three key objectives in mind:

quick start (It considers the edge).
higher standards of performance (expanding the engine's JavaScript Core).
as a fantastic and comprehensive tool (bundler, transpiler, package manager).

LET'S DISCUSS ITS PERFORMANCE ⚡

Instead of the V8 engine, which is usually regarded as being quicker, JavaScript Core from WebKit is used. Additionally, the author of Bun stated that ZIG, a low-level programming language comparable to C or Rust, lacks concealed control flow, making it considerably easier to build quick applications.

For developers, the presentation on the official website checks a lot of boxes. Similar to Deno,Bun also takes JavaScript and TypeScript with automated transpilation. The React JSX (JavaScript XML) syntax is also translated by Bun. Both CommonJS and EcmaScript modules (ESM) are supported for Node.js module resolution, although ESM is utilised internally because it is the web standard.

However, this implies that a lot of npm packages function. Using bun:ffi, native code may be invoked from Bun JavaScript (foreign function interface). Also included is a SQLite database engine.

“Most of Bun is written from scratch including the JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more,” states the description.

STARTING OUT WITH BUN:

Run this install script in your terminal to install bun. From GitHub, Bun is downloaded.

curl https://bun.sh/install | bash

And it will display some output similar to this:

StatusCode        : 200
StatusDescription : OK
Content           : #!/bin/bash

                    # Reset
                    Color_Off=''

                    # Regular Colors
                    Red=''
                    Green=''

                    # Bold
                    BWhite=''
                    BGreen=''

                    Dim='' # White

                    if test -t 1; then
                        # Reset
                        Color_Off='\033[0m' # Text Reset

                        # Regular Colo...
RawContent        : HTTP/1.1 200 OK
                    Transfer-Encoding: chunked
                    Connection: keep-alive
                    x-origin-cache: HIT
                    access-control-allow-origin: *
                    x-proxy-cache: MISS
                    x-github-request-id: CC28:9668:148223F:1576AA7:62C7E60C
                    ...
Forms             : {}
Headers           : {[Transfer-Encoding, chunked], [Connection, keep-alive], [x-origin-cache, HIT],
                    [access-control-allow-origin, *]...}
Images            : {}
InputFields       : {}
Links             : {}
ParsedHtml        : mshtml.HTMLDocumentClass
RawContentLength  : 4906

The HTTP server designed by Bun is based on web standards such as Request and Response.

// http.js
export default {
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
};

Run it through with a bun:

bun run http.js

Then, in your browser, navigate to localhost:3000.
Additional samples may be found by reading the documentation.

That's all:
Please hit the clap symbol a few times if you appreciated this article and want to help us spread the word 😊

Missing Introduction To React

Khansa Mueen — Fri, 24 Jun 2022 15:37:09 +0000

React is a popular, high-performance UI library created and maintained by Facebook. React is used to build single-page applications and can be used to build mobile applications as well. But that doesn't make it cool. Because it's cool, it's popular. Most React introductions skip the "why" and immediately start giving you examples of how to utilise React.

It has an approachable core concept that can be learned in an afternoon, but it takes years of practice to master. That's great. The official documentation contains many tools to help you get started if you want to dive in and start experimenting with React right now.

This article is for those who are curious about why people react. Why does React function the way that it does?

WHY REACT?

React is frequently utilised to design UI for single-page applications (SPA). It is advantageous for desktop and mobile apps alike. Facebook, Bloomberg, Airbnb, Instagram, and Skype are just a few of the websites that use the React Native framework, which is based on React JS. React is a well-liked substitute for building UI applications quickly since it is community-driven.

React can be used with any JavaScript framework, but it's often paired with another framework called Flux or Redux. These frameworks help make React easier to use when building large applications.

It is easier to live when UI components aren't aware of the network, business logic, or app state. Render the exact same info every time when given the same props

React drastically altered how JavaScript libraries operated when it was initially released. React opted to separate view rendering from model representation while everyone else was promoting MVC, MVVM, etc. Flux is a whole new architecture that React introduced to the JavaScript front-end ecosystem.

THE VIRTUAL DOM

Every DOM item has an equivalent "virtual DOM object" in React. A representation of a DOM object, similar to a thin copy, is a virtual DOM object. It’s faster than the real DOM, and it's used to render applications before sending them to the browser. It's also used to calculate the differences between the old and new DOM, so you can update only what has changed.

LET'S DISCUSS HOW VIRTUAL DOM GENUINELY SPEEDS UP PROCESSES.

A virtual DOM is constructed and is seen as a tree whenever something new is introduced to the programme. A node in this tree represents each component of the programme. Therefore, a new Virtual DOM tree is constructed whenever the state of any element changes. The former Virtual DOM tree is then compared to the new Virtual DOM tree, and any differences are noted. The optimal technique to make these modifications to the real DOM is then determined. Only the changed items will now be shown once again on the page.

DECLARATIVE PROGRAMMING

Declarative programming is a way of specifying what you want the computer to do rather than how. Often, we specify how in imperative programming, but it can be useful to specify what as well. For example, when we build an app with React and define a button using JSX and HTML-like syntax:

jsx
Click Me!

We are describing the title of the button (“Click Me!”) and its purpose (to click). We don't need to tell React how to “click”—React does that for us. This makes our code easier for humans to understand because it focuses on what should happen rather than how it should happen (which may be complicated).

UNIDIRECTIONAL DATA FLOW

Unidirectional data flow is a concept that comes with React. It's super important and you should read this section if you want to understand why React is as fast as it is. It's easy to get confused with unidirectional data flow because it doesn't seem like much when compared to other models. The main idea behind unidirectional data flow is that there are only two directions for your application's state: up and down the component hierarchy, but not back up again (the same direction).

Unidirectional data flow helps achieve several goals. First, it makes reasoning about your application much easier; because all actions happen within one direction, you don’t have to worry about how multiple components will interact together or whether some event might cause an unexpected side effect somewhere else in your app. Additionally, unidirectionality makes debugging easier because you can easily trace how each piece of information got into the state at any given time.

Finally—and perhaps most importantly—unidirectionality helps improve performance by allowing React to optimize its rendering process based on what parts of the DOM need updating after an event occurs; if something changes somewhere high up in your tree where few elements depend on its value (such as another component), then those elements won’t re-render themselves unnecessarily when they only care about their direct parents!

REACT’S FUNCTIONAL PARADIGM

React has a functional paradigm, which means that it encourages the use of functions instead of objects. Unlike other popular frameworks, React doesn’t have any built-in state management. Instead, it relies on you to manage your own state and use immutability to prevent code from breaking when data changes. This may not sound like much now, but as you progress through this course, you will learn how to use these features in much more detail.

STATELESS COMPONENTS

Stateless components are easier to test, reuse and reason about. They're also easier to refactor, understand and debug.

HIGHER-ORDER COMPONENTS

Higher-order components are a way to reuse code by wrapping a component with additional functionality. HOCs are often used to implement stateful behaviour that is not available in a component itself and can be helpful for mocking out APIs or managing complex state. HOCs can also be used as a mechanism for implementing React's Context API.

IT SEEMS LIKE REACT IS THE RIGHT CHOICE FOR YOUR PROJECT BECAUSE IT BRINGS SEVERAL BENEFITS OVER USING OTHER UI LIBRARIES.

It seems like React is the right choice for your project because it brings several benefits over using other UI libraries.

• It's a JavaScript library, so you won't have to learn another language to use it.
• React has a small footprint and is easy to integrate into your project.

However, there are some things that make React less than ideal:

• The size of the community behind it is smaller than that of Angular or VueJS, though this doesn't really affect performance or ease of use (unless there are bugs in the code).
• It was initially developed by Facebook for internal use, so its design decisions may not be optimal for everyone else (though these issues will probably be fixed as more people contribute to the project).

Consider the following example:
The idea is to have the properties available on the component's interface but stripped off for the component's consumers when wrapped in the HoC.


export function withTheme<T extends WithThemeProps = WithThemeProps>(
    WrappedComponent: React.ComponentType<T>
) {
    // Try to create a nice displayName for React Dev Tools.
    const displayName =
        WrappedComponent.displayName || WrappedComponent.name || "Component";

    // Creating the inner component. The calculated Props type here is the where the magic happens.
    const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
        // Fetch the props you want to inject. This could be done with context instead.
        const themeProps = useTheme();

        // props comes afterwards so the can override the default ones.
        return <WrappedComponent {...themeProps} {...(props as T)} />;
    };

    ComponentWithTheme.displayName = `withTheme(${displayName})`;

    return ComponentWithTheme;
}

CONCLUSION

There really is a lot to like about React. In addition to being used in production by Facebook, Instagram and their other services, React has also been adopted by Netflix, Yahoo! and others. With that kind of support behind it, React is sure to be around for years to come.

That's all

I appreciate your patience in reading thus far. Please hit the clap symbol a few times if you appreciated this article and want to help us spread the word let's get together. Stay up to date by following me on Linkedin.

Wait, what is this Web 5 stuff?

Khansa Mueen — Mon, 20 Jun 2022 16:29:36 +0000

At Consensus 2022, Jack Dorsey said that TBD, Block's Bitcoin division, is working on a new internet vision dubbed web5. Thanks to this potentially revolutionary technology, users will be able to take control of their own data rather than handing it over to third parties. According to TBD's mission statement,

"We believe in a decentralized future that returns ownership and control over your finances, data, and identity. Guided by this vision, TBD is building infrastructure that enables everyone to access and participate in the global economy."

Reactions to the introduction of the web5 standard

The crypto community has had a lot of fun dissecting what happened to web4, and there have been a lot of funny comments on Crypto Twitter. Snoop Dog even stated that he is currently working on Web6, to which TBD responded, "cool, we got five on it." However, not everyone in the crypto community thinks the statement is a joke. Many proponents of a decentralized internet-based exclusively on Bitcoin exist, which is unsurprising. Victor Zhang, the author of TokenScript and the founder of SmartToken Labs, told CryptoSlate exclusively,

"The "web5" Jack wants to make is nothing new… It is still an application-centric framework. Can be considered as web2.5 😂"

On the other hand, some community members tend to feel that the technology underpinning web3 and web5 can coexist; perhaps the future is web8, with both operating simultaneously? Matt Huang, Paradigm's co-founder, called for a shift away from such disputes, saying,

"The web2, web3, web5 skirmishes are a distraction. Build from first principles and not through analogy… crypto unlocks possibilities that our 2022 minds cannot fully fathom. Embrace that uncertainty and potential toward a better future!"

Web 5.0 - The Symbiotic (Intelligent/Emotional) Web

To put it another way, the Internet of Things (IoT) implies that everything in your life, and I mean everything, may talk to each other about you, in front of your face, behind your back, and without regard for your feelings. With a focus on selling, buying, and persuading you. It was funny to wake up to a robot in the guise of a kitty cat, but Web 5.0 would go much farther. The Intelligent Web foreshadows what is to come with the emergence of smart devices that forecast your requirements based on your patterns without requiring many hints. Symbiotic web algorithms will be able to analyze evidence on a more complicated emotional and cognitive level. This is the Web, which coexists with daily life in a seamless manner, working without thinking and naturally engaging with our actions.

What Exactly Is Web5?

We may not be able to be certain just yet.

After reading Jack Dorsey's tweet and the presentation pack from TBD, a business unit within Block (formerly known as Square), it sounded eerily similar to the approach that the W3C (World Wide Web Consortium) has been working on for some time, as well as the Avast (formerly, Evernym) team's philosophy:

The twin pillars of verifiable credentials and DIDs (decentralized identifiers) are a requirement for a user-controlled, largely privacy-protecting, self-sovereign solution for digital identity.

So, what's the mechanism?

Web5 Wallet is a decentralized online platform that employs decentralized IDs, verifiable credentials, decentralized web nodes (DWNS), and decentralized web apps (DWAS). Finally, the platform aspires to provide consumers with two use cases: "own their data" and "control their identity"

TBD used an example to show how people may utilize Web5 to manage their identities. Consider Alice, who uses a digital wallet to protect her identity, data, and permissions for external apps and connections. Consider a case in when Alice signs into a decentralized social networking program with her Waller.

She no longer must establish a profile on the app because she is connected to it via her decentralized identity. She may also keep track of all her connections, postings, relationships, and other information in her DWNS. DWNS is a private data storage system that allows you to store both public and encrypted data. She has complete control over her identity, as she may switch between apps at any time.

Users controlling their data is the next use case. Consider Bob, a music fan who "hates having all of his personal data locked up with a single provider." This means he'll have to rebuild his playlists in various music applications repeatedly. So, what's the answer? Bob can store his info in his DWNS rather than in several applications. As a result, he may allow any music app access to his preferences and settings. This allows consumers to carry their tailored music experience with them wherever they go while maintaining control over their data.

Conclusion

"WWWW" isn't the only way to describe the internet. Web 1.0, 2.0, 3.0, and subsequent functionalities may be used in digital databases. Using these materials from different times does not make a website outdated. It's just as vital to know what was significant in the past as it is to know what is important now. Before 2001, most websites were static (according to the Web 1.0 idea). They served as "business cards," as well as web (hyper) boards that displayed specialized content. They were frequently inefficient and out of touch. Furthermore, Apps are always talking with one another via the Internet. The paper network has been replaced by the data network.

Web 3.0, meanwhile, is a semantic realm where artificial intelligence and human intelligence coexist. Web 4.0, on the other hand, is a mobile environment where people, as well as physical and interactive things, collaborate to create new values. Finally, web 5.0 is a sensory emotional region that converts the network from an "emotionally deficient" world to one with a rich experience.

That's all

What are the benefits of learning programming languages?

Khansa Mueen — Sun, 12 Jun 2022 13:27:45 +0000

I’d want to know why you’re reading this post before we go into depth about it. There might be a variety of causes for this, including the following:

You’re a non-programmer curious about how things function in today’s technological world. You’re interested in technology and considering pursuing a career in it.
You are a novice who has recently entered this area and is unsure whether you made the right decision in picking this career. You may find it frightening, annoying, or even enjoyable.
You’re an experienced programmer who wants to know how far you’ve gone and what changes you’ve seen since starting out in this area.

There are several causes for this, some of which are enumerated in this article.

Increased ability to communicate programming ideas.
A better foundation for selecting acceptable languages
Improved capacity to pick up new languages
Realizing the importance of implementation
Ability to create new languages has increased.

Increased ability to communicate programming ideas.

The study of programming languages aids in the development of the ability to express programming ideas.

Dijkstra has expressed it this way:

The tools we use have a profound (and devious!) influence on our thinking habits, and, therefore, on our thinking abilities.

That is the instruments employed to articulate one’s thoughts limit one’s ability to think.

The expressive capacity of language influences the depth to which we can think. It covers the types of algorithms you can create. Learning new languages broadens the scope of software development thought processes since such constructs may be mimicked.

A better foundation for selecting acceptable languages

Studying programming languages also aids in the selection of the appropriate language for a specific job.

According to Abraham Maslow,

“To the man who only has a hammer in the toolkit, every problem looks like a nail.”

That is, if your only tool is a hammer, you will tackle every situation as if it were a nail. Some programming languages are better suited to certain tasks than others.

Improved capacity to pick up new languages

Good programmers don’t simply know how to code; they also know how to wrap their heads around a difficult problem and write effective code to solve it. While most programming languages can perform most tasks, each has its own set of advantages and disadvantages. Knowing various languages is beneficial since you may not be able to get the same outcomes with each one. You will have a larger knowledge base and be more likely to be able to solve issues faster and more effectively if you study additional languages.

Acquisition of the syntax and semantics of different programming languages, as well as knowing diverse design techniques, aids in the learning of new languages.

Realizing the importance of implementation

Understanding implementation concerns may sometimes lead to a better understanding of why languages are constructed the way they are. This, in turn, leads to effective language usage. Row vs. column-major is one such example. If a programmer understands that two-dimensional arrays are stored column-wise (column-major) in FORTRAN (whereas they are stored row-wise in most other languages), he will process it column-wise, making it more efficient.

Recursion works in the same way. If a programmer understands how recursion works and how much recursive programs cost, he may utilize that knowledge to create more efficient programs.

Furthermore, certain defects can only be detected and repaired if the programmer is familiar with technical details.

Ability to create new languages has increased.

Learning a variety of programming languages allows one to have a better understanding of the advantages and disadvantages of various language features as well as the challenges that these characteristics might cause. As a result, if one has to create a new language for any reason, this knowledge will be useful.

You Enjoy It More

Depending on your work duties, you may find yourself doing the same (or similar) tasks every day, which may soon get tedious. Knowing various languages, on the other hand, may keep your mind awake and your job duties diverse because you’ll be able to concentrate on multiple tasks at once. You’re more likely to appreciate the task you’re doing and have more fun doing it if you have fresh possibilities and challenges.

Learning a programming language is like learning a foreign language in that after you’ve mastered the second, the third and fourth are considerably simpler. This is because you spend time learning how to learn when learning the second language, and this process gets simpler with practice. You begin to see parallels across languages, which aids in the learning process and the retention of new knowledge. It’s not as difficult as it may appear.

Whether you want to uncover the secrets of the universe, or you just want to pursue a career in the 21st century, basic computer programming is an essential skill to learn. — Stephen Hawking

That’s all
I appreciate your patience in reading thus far. Please share this message with others so they can find their way as well.

Twitter | LinkedIn | GitHub are all places where you can find me.

Have fun Programming ❤.

Which is preferable: JSX or HTML?

Khansa Mueen — Mon, 30 May 2022 11:52:30 +0000

Let's start with a definition of HTML and JSX.

HTML is fantastic. The standard language for documents that govern the structure of a web page is Hypertext Markup Language (HTML). It regulates how material is displayed online and sets the structure of webpages. What you're looking at right now is HTML code, which your browser has read and processed. HTML, however, is not a programming language.

JSX, on the other hand, stands for JavaScript Syntax Extension or, as some prefer to call it, JavaScript XML.

It was built as syntactic sugar for React.createElement(). It is a JavaScript plugin that allows developers to build HTML directly within JavaScript. So, when you write JSX, you're actually writing JavaScript and HTML at the same time. Instead of HTML, let's speak about JSX. We'll go through the fundamentals of JSX, go over the key distinctions between JSX and HTML, and wrap up with some commonly asked concerns concerning common JSX difficulties.

HTML is the most fundamental building component of the Internet. It establishes the significance and organization of web content. An HTML element is distinguished from other text in a document by "tags," which are the element name surrounded by "" and ">". JSX, on the other hand, is a syntactic extension to JavaScript and is neither a string nor HTML. JSX simplifies the creation and addition of HTML in React.

The Primary Distinctions Between HTML and JSX

The following are some of the differences between HTML and JSX:

1. In JSX, you must return a single parent element.
One of the most significant distinctions between HTML and JSX is that with JSX, you must return a single parent element, or the code will fail to compile. Many developers use <div> ...</div>, however "fragment", < >...</>, is a superior option that many people choose since it makes the code more understandable. You don't have to return a single parent element in HTML, so you may do whatever you want.

You can see that JSX isn't compiling since there isn't a parent element in this case.

Because there is a parent element in this case, JSX is compiling (fragment).

2. In JSX, you can use JS straight away.

It's feasible to write JavaScript natively in JSX. This may be accomplished by enclosing the JavaScript in curly braces {...}. To integrate JavaScript in HTML, you'll need a script element or an external JavaScript file:

  export const Article() {
  return (
    <>
      <div>This is Khansa's Article</div>
      <div>Hello There!</div>
      <p> Add two values together, then multiply them. </p>
      Result: {100 + 20 * 2}
    </>
  );
}

3. In JSX, self-closing tags are used.

In JSX, tags can self-close. That is, <div></div> can be used as a <div/> and <span></span> may be used as a <span/>. You don't want to, but it's a possibility.

In HTML, self-closing tags can shut without the slash before the right angle bracket, so <br /> might be interpreted as <br>. In JSX, however, you must add the slash. This should remind you that JSX is strongly reliant on HTML 4 syntax.

You can see that JSX is failing to compile since there is no forward slash before the line break tag's right-angle bracket.

And you can tell that JSX is compiling since the line break tag has a forward slash in it.

4. Adding style to an element requires a separate syntax.

HTML → <div style='border: 1px solid black; width:'100px' height: '100px' '/>

JSX → <input style={{border: '1px solid black', width: '100px' height: '100px' }}/>

There are a few things to keep in mind. To begin, instead of using quotations to surround all of our styles, we use double curly brackets. The outermost set of curly brackets represents a JavaScript variable, whereas the inner set represents a JavaScript object. The object we're utilizing is a collection of key-value pairs that specify the style of the element. The object values are enclosed in quotes in the JSX, and each property is separated by a comma.

Note: You should avoid using inline style in plain HTML if you don’t want to harm your website’s SEO.

Finally, the conclusion is
Because the JSX component represents HTML, you may combine numerous components to create a more complicated HTML page.
The fact that JSX appears like HTML does not make it any less of HTML in fact, you may still build standard functions by passing the HTML-like syntax.

To summarise, JSX is not HTML or a template engine.

That's all!
Thank you for taking the time to read my article :)
see you soon!

The useEffect hook in React 18 has a peculiar behavior.

Khansa Mueen — Wed, 25 May 2022 16:02:53 +0000

As we all know, The useEffect hook is called after the screen is rendered. A flickering effect will occur if the client notices the mutation.
Alternatively, We can emulate the componentDidMount lifecycle function by using the useEffect Hook and providing a callback code.

So, what kind of changes are we going to talk about now?

When a component mounts in Strict mode, react developers have altered how useEffect behaves.

Take a peek at the Strict mode.

With React 16.3, strict mode was added as a tool for detecting code patterns that might cause problems with React’s (then experimental) concurrent rendering APIs.
There is no apparent UI when is applied to a React component like Fragment.It causes additional tests and warnings to be performed on its offspring.

Is strict mode supported by React?

The React StrictMode component may be thought of as an utility component that helps developers to code more quickly and alerts them to any questionable code that has been mistakenly added to the application.

The React application applies extra behavior to all of the components it wraps around (only in DEV mode). For example, when executed in “strictmode,” React will purposefully double-render components to flush out any dangerous side effects.

Because of the most recent version, several amazing new modifications have occurred.

StrictMode gains an extra feature with the introduction of React 18 to ensure compatibility with the reusable state. When StrictMode is enabled, React purposefully double-invokes effects for newly mounted components (mount -> unmount -> mount). React, like other strict mode behaviors, will only perform this for development TS.

What changes have been made to useEffect?

You’ll need to change your code now that useEffect is called twice during mount.
No changes are necessary if the useEffect has dependents. If you’re using useEffect for an on-mount effect, you’ll need to use the useRef hook.
For instance:

If you’re using useEffect for unmount cleaning, you should be alright if the setup function is included within the same useEffect.

Effects fire twice in React 18’s Strict Mode, which simulates unmounting and remounting the component in development mode. Each component is mounted, then unmounted, and lastly re-mounted.

There’s a reason React introduced reusable state.

The React team is working on a new offscreen feature that will let us enable things like tabbed containers and virtualized lists, as well as take use of new browser APIs like content-visibility. The component may be attached and unmounted multiple times to do this.

Disabling strictMode

If your app’s double invoking effects are creating serious problems, you can disable StrictMode until you can fix them.

There is currently no way to keep the old behaviour - enabling it will cause duplicate invoking effects.
Before we wrap up…

Thank you for sticking with me this far! Let’s get together. You may remark on my Linkdin profile.

That’s all I’ve got for now. Soon, I’ll be back with my next piece. Please take care of yourself till then.