DEV Community: Awais Butt

Vue.js Framework

Awais Butt — Mon, 19 Dec 2022 06:44:58 +0000

Vue.js is a popular JavaScript framework for building web applications. It is designed to be lightweight, easy to learn, and easy to use.
One of the key features of Vue.js is its reactive components, which allow you to declaratively render dynamic content in your application. Vue.js uses a virtual DOM (a lightweight in-memory representation of the actual DOM) to optimize updates to the DOM, which makes it fast and efficient.
Vue.js also has a rich ecosystem of tools and libraries that you can use to build your applications, including the Vue CLI (command line interface) for scaffolding projects, Vuex for state management, and Nuxt.js for server-side rendering.
To get started with Vue.js, you'll need to have a basic understanding of HTML, CSS, and JavaScript.

Installation

There are several ways to install Vue.js and start using it in your projects. Here are a few options:

1. CDN

You can include the Vue.js library in your HTML file by adding a script tag to the head of your HTML file:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
This will give you access to the Vue.js library and you can start using it in your JavaScript code.

2. npm

If you're using a build tool like Webpack or Browserify, you can install Vue.js using npm, the package manager for JavaScript:
npm install vue
You can then import Vue.js in your JavaScript code:
import Vue from 'vue'

3. Vue CLI
If you want to create a new Vue.js project, you can use the Vue CLI (command line interface). First, you'll need to install the Vue CLI globally:
npm install -g @vue/cli
Then, you can create a new Vue.js project by running the following command:

vue create my-project

This will create a new directory called my-project with a basic Vue.js setup, including a development server and a build pipeline. You can then navigate to the project directory and start the development server by running:

cd my-project npm run serve

This will start the development server and open a new browser window with your Vue.js app running.

Regardless of which method you choose, you'll need to have Node.js and npm installed on your machine in order to install and use Vue.js. If you don't have these tools already, you can download and install them from the Node.js website (https://nodejs.org/).

Here is a simple example of the structure of a Vue.js application:

This Vue.js component has a template that includes an h1 element with a dynamic message and a button with a click event handler. The script section defines the component's data and methods. The data contains the message and a counter variable, and the method increments the counter when the button is clicked. The style section includes any styles that should be applied to the component.

To use this component in your application, you would need to import it and include it in a parent component's template. For example:

This parent component imports the MyComponent and registers it as a local component using the components option. It then includes the element in its template, which will render the MyComponent component.

Why React is popular ?

Awais Butt — Tue, 06 Dec 2022 12:54:18 +0000

React is a popular JavaScript library for building user interfaces (UIs) because it makes it easy to create reusable UI components. This allows developers to create complex UIs by combining and composing individual components, which can improve code reuse and maintainability.

Another reason for React's popularity is its ability to efficiently update and render components based on changes in data. This makes it well-suited for building dynamic, data-driven UIs, such as those commonly found in single-page applications (SPAs).

React also has a large ecosystem of third-party libraries and tools that make it easy to develop and deploy React applications, as well as a strong community of developers who contribute to and support the project.

Overall, React's features and ecosystem make it a popular choice for building modern web applications.

Javascript frameworks

Awais Butt — Mon, 05 Dec 2022 12:41:07 +0000

There are many popular JavaScript frameworks, and the most popular ones may vary depending on the specific use case and the preferences of the developers. Some of the most popular JavaScript frameworks include:

React

A popular and widely-used library for building user interfaces, developed and maintained by Facebook.
Angular: a powerful framework for building single-page applications, developed and maintained by Google.

Vue.js

A progressive and versatile framework for building user interfaces, developed and maintained by an active community.

Ember.js

A popular framework for building ambitious web applications, developed and maintained by a dedicated team.

Meteor

A full-stack JavaScript platform for building real-time web and mobile applications, developed and maintained by the Meteor Development Group.
These frameworks are used by many developers and companies around the world to build a wide variety of web applications, from simple to complex. They are constantly evolving and improving, and new frameworks are also emerging to meet the needs of the developers and the changing landscape of the web

CSS Grid and Flexbox

Awais Butt — Fri, 01 Apr 2022 18:13:57 +0000

Grid

CSS Grid Layout is a two-dimensional grid-based layout system with rows and columns that simplifies web page creation by eliminating the need for floats and placement.
Grid layout, like tables, allows us to arrange objects in columns and rows.
To begin, set the column and row sizes with grid-template-columns and grid-template-rows, and then arrange the container element's child elements into the grid with grid-column and grid-row.

Flexbox

The CSS Flexbox layout is one-dimensional.
It's useful for assigning and arranging space within a container's contents.
It is compatible with a wide range of display devices and screen sizes.

Difference Between Grid and Flexbox:

1. Dimensionality and Flexibility
Flexbox gives you more control over item alignment and space distribution. Flexbox only works with columns or rows because it is one-dimensional.
Grid provides two-dimensional layout capabilities, allowing for variable widths as a length unit.
This compensates for Flex's shortcomings.

2. Alignment
Developers may align items vertically or horizontally with Flex Direction, which is useful when creating and reversing rows and columns.
CSS Grid uses fractional measure units for grid fluidity, as well as auto-keyword capabilities to modify columns and rows automatically.

3. Item Management
The parent element is Flex Container, and the children are Flex Item. By altering item dimensions, the Flex Container may assure a balanced portrayal. This enables developers to create designs that adapt to changing screen widths.
Grid allows you to position items both implicitly and explicitly.
It has built-in automation that allows it to automatically extend line items and copy values from the previous item into the new creation.

Conclusion

CSS Grids helps you create the outer layout of the webpage. You can build complex as well responsive design with this. This is why it is called ‘layout first’.
Flexbox mostly helps align content & move blocks.
CSS grids are for 2D layouts. It works with both rows and columns.
Flexbox works better in one dimension only (either rows OR columns).
It will be more time saving and helpful if you use both at the same time.

CSS Flexbox

Awais Butt — Fri, 18 Mar 2022 12:13:27 +0000

Flexbox is a new layout mode in css3. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container.
The flexbox contains flex containers and flex items.

Flex container

A flex container is a section of a document that has been put out using flexbox. To build a flex container, change the display property of the area's container to flex or inline-flex. The parent's properties are specified by the flex container. It's stated by setting an element's display attribute to flex or inline-flex.

Flex item

The children's properties are specified by the flex items. A flex container may hold one or more flex objects.

The attributes of the flex item are as follows:

Order
Flex-grow
Flex-shrink
Flex-basis
Flex
Align-self

The order property

it specifies the order of a flexible item relative to the rest of the flex items inside the same container.
<div style="display:flex;flex-direction:column"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
output

Flex grow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
<div style="display:flex"> <div style="flex-grow: 1; border:1px solid red">1</div> <div style="flex-grow: 1; border:1px solid red">2</div> <div style="flex-grow: 8; border:1px solid red">3</div> </div>
output

Flex-shrink property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number.

Flex-basis property

The flex-basis property specifies the initial length of a flex item.
<div style="display:flex"> <div style="border:1px solid red">1</div> <div style="border:1px solid red">2</div> <div style="flex-basis:200px;border:1px solid red">3</div> </div>
output

The align-self property

The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
<div style="display:flex;height: 200px"> <div style="border:1px solid red">1</div> <div style="border:1px solid red">2</div> <div style="align-self: center; border:1px solid red">3</div> <div style="border:1px solid red">4</div> </div>
output

New features of HTML5

Awais Butt — Fri, 11 Mar 2022 13:29:50 +0000

HTML stands for Hypertext Markup Language, and it is a markup language used to create online pages and applications.
HTML5 is the fifth version of the HTML markup language.

Audio and Video

HTML5 has two important additions: audio and video tags. The <audio> tag is used to embed sound material, such as music or other audio streams, in a document. HTML supports three different audio formats: MP3, WAV, and OGG.
<audio controls> <source src="sound.mp3" type="audio/mpeg"> </audio>
A video is shown on a web page using the HTML <video> element. The controls attribute adds video controls like play, pause, and volume. HTML supports three different video formats: MP4, WebM, and Ogg.
<video controls > <source src="video.mp4" type="video/mp4"> </video>

Vector Graphics

It may be used to generate graphics in a variety of shapes and colors using scripting, most commonly JS. SVG stands for Scalable Vector Graphics, and it is a language for describing 2D graphics and graphical applications in XML; the XML is then rendered by an SVG viewer.
SVG is mostly used for vector diagrams, such as pie charts, two-dimensional graphs in the X, Y, and so on.
How to create SVG on a web page
The <svg> tag can be used to embed SVG into a web page. You can use this element to hold SVG graphics and use it as a container for SVG.

header and footer

The HTML <header> element denotes introductory information, which is usually a collection of introductory or navigational support.
It could have some heading elements, as well as the author's name and other things.

A page header looks like <header> <h1>Main heading of the page</h1> <p>some text here</p> </header>

The <footer>tag defines a footer for a document or section.
A usually includes information about the section's author, copyright information, or links to related papers.
<footer> <p>Reference here</p> </footer>

nav tag

The nav tag represents the set of navigation links. The <nav> HTML element defines a portion of a page that contains navigation links, either within the current document or to other documents.
A <nav> element does not have to contain all of a document's links.
Only important blocks of navigation links should be included in the element

<nav> <a href="/reference1/">Reference 1</a> | <a href="/reference2/">Reference 2</a> | </nav>.

Primitive data types in Javascript

Awais Butt — Fri, 04 Mar 2022 13:12:00 +0000

There are five types of primitive data types.

String
Number
Boolean
Undefined
Null

String

The string data type in JavaScript can be any group of characters enclosed by a single or double-quotes or by backticks.
let name = "Awais Butt"; // Using double quotes let info = 'data'; // Using single quotes

Numbers

JavaScript has only one type of numbers. Numbers can be written with, or without decimals.
let number = 250; // integer value

Boolean

The boolean data type has only two values, true and false. It is mostly used to check a logical condition. Thus Booleans are logical data types which can be used for comparison of two variables or to check a condition.
let num1 = 5; let num2 = 5; (num1 == num2) // Returns true

Undefined

In JavaScript, a variable without a value, has the value undefined. The type is also undefined.

let name; //name is undefined and its type also undefined

Null

The null in JavaScript is a data type that is represented by only one value, the ‘null’ itself. A null value means no value.

let n = null; console.log(n); // This returns null If we check the data type of a using the typeof operator, we get: typeof(n); // This returns object
This means the type of a null value is an object, not null.

Javascript Variables Scope

Awais Butt — Sat, 26 Feb 2022 12:42:41 +0000

The visibility of the variables is referred to as the scope.
Javascript has 3 types of scope

Block scope
Function scope
Global scope

Block Scope

There was no idea of block scope before ES6. The let and const keywords in ES6 introduced a new feature called block scoping. The block's variables can't be accessed from outside of it.
Example
{ let x = 10; } // x cannot be used here

Function Scope

Variables defined inside a function are not accessible (visible) from outside the function.
Variables declared with var, let and const are quite similar when declared inside a function.
function Person() { var personName = "Volvo"; // Function Scope }

Global Scope

Global scope variables can be accessed from anywhere in the program. When defined outside of a block, variables declared using var, let, and const are very similar.
let x = 20 // Global scope

Javascript Variables

Awais Butt — Tue, 22 Feb 2022 13:17:35 +0000

Variables are blocks for storing data.
3 ways to declare variables

var
let
const

Declaring the javascript variable

Variable is declared when we create the variable. You can declare the javascript variable with let or var keyword.
var name;
or
let name;
After the declaration, the variable has no value it is undefined.
To assign a value to the variable, use the equal sign:
name = “awias butt”
Now it is a variable with type string.

Using var

The var is the oldest keyword to declare a variable in JavaScript. The scope of the var keyword is the global or function scope. It means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function.
Example: Variable ‘number’ is declared globally. So, the scope of the variable ‘number’ is global, and it can be accessible everywhere in the program.
<script> Var number = 10; Function call(){ Console.log(number); } Call(); Console.log(number); </script>
Output
10
10

Using let

The let keyword is an improved version of the var keyword. It can’t be accessible outside the particular block or function.
<script> function call(){ let number = 10; Console.log(number); } Console.log(number); </script>
Output
10
ReferenceError: number is not defined

Using const

The const keyword has all the properties that are the same as the let keyword, except the user cannot update it. When users declare a const variable, they need to initialize it, otherwise, it returns an error.

Blockchain technology

Awais Butt — Fri, 11 Feb 2022 07:35:51 +0000

Blockchain is a distributed database that is shared among the nodes of a computer network. And its store information in digital format. The innovation with a blockchain is that it guarantees the fidelity and security of a record of data and generates trust without the need for a trusted third party.

Blockchain vs typical database

A database usually structures its data into tables, whereas a blockchain, like its name implies, structures its data into chunks (blocks) that are strung together. This data structure inherently makes an irreversible timeline of data when implemented in a decentralized nature. When a block is filled, it is set in stone and becomes a part of this timeline. Each block in the chain is given an exact timestamp when it is added to the chain.
A blockchain collects information together in groups, known as blocks, that hold sets of information. Blocks have certain storage capacities and, when filled, are closed and linked to the previously filled block, forming a chain of data known as the blockchain. All new information that follows that freshly added block is compiled into a newly formed block that will then also be added to the chain once filled.

The most common types of blockchain

Public blockchain
Public blockchain allows anyone to join so they are permissionless in nature. In a public blockchain, all nodes have equal rights to access the blockchain. Public blockchains are primarily used for mining and exchanging cryptocurrency.
Example: Bitcoin, Ethereum, Litecoin
Private blockchain
Private blockchains are permissioned blockchains controlled by a single organization. In a private blockchain, the central authority determines who can be a node. it operates like a public blockchain network in the sense that it uses peer-to-peer connections and decentralization, this type of blockchain is on a much smaller scale. Instead of just anyone being able to join and provide computing power, private blockchains typically are operated on a small network inside a company or organization.
Examples of private blockchains are; Multichain and Hyperledger projects (Fabric, Sawtooth), Corda, etc.
Hybrid blockchain
A hybrid blockchain is a combination of the private and public blockchain. It uses the features of both types of blockchains that is one can have a private permission-based system as well as a public permission-less system. A transaction in a private network of a hybrid blockchain is usually verified within that network. But users can also release it in the public blockchain to get verified. The public blockchains increase the hashing and involve more nodes for verification. This enhances the security and transparency of the blockchain network.
An example of a hybrid blockchain is Dragonchain.

Introduction to javascript

Awais Butt — Fri, 04 Feb 2022 11:53:55 +0000

Javascript is the most popular programming language. JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997. The language was initially called LiveScript and was later renamed JavaScript. When javascript was created it had another name called “Livescript”. At that time java was very popular so it was decided that positioning a new language “young brother” of java. But after some time javascript became so popular with its own specification called ECMAScript and now it has no relation with java.

Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn

HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages

Javacsript can be added in our html page using two ways

Internal javascript

We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
Example

<html> <head><script>
    console.log(“welcome to javascript”);
    </script></head><body> 
    // html code 
    </body></html>

External javascript
We can write JavaScript code in other file having an extension .js and then link this file inside the <head> tag of the HTML file in which we want to add this code.

JavaScript features

JavaScript is the most popular language on earth.
JavaScript has vast features in client side like react and angular and moved into the server with Node.js and other frameworks.

JavaScript is capable of so much more. Here is a list that we can do with JavaScript:

JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly static, after JS was created dynamic Web sites were made.
Functions in JS are objects. They may have properties and methods just like another object. They can be passed as arguments in other functions.
Can handle date and time.
Performs Form Validation although the forms are created using HTML.
No compiler or translator is needed.

Conclusion

Javascript is a lightweight and easy to use programming language.
JavaScript can be run on any operating system and in all the web browsers.
You need a text editor to write JavaScript code and a browser to display your web page.

Introduction to javascript

Awais Butt — Fri, 04 Feb 2022 11:26:56 +0000

Javascript is the most popular programming language. JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. The language was initially called LiveScript and was later renamed JavaScript. When javascript was created it had another name called “Livescript”. At that time java was very popular so it was decided that positioning a new language “young brother” of java. But after some time javascript became so popular with its own specification called ECMAScript and now it has no relation with java.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn

HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages

Javacsript can be added in our html page using two ways

Internal javascript

We can add JavaScript directly to our HTML file by writing the code inside the tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.<br>
Example<br>
<html><head></p>

// html code