Forem: MurtazaNeher

HTML SVG

MurtazaNeher — Mon, 03 Oct 2022 04:54:13 +0000

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C recommendation. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

The element specifies the root of a SVG fragment. You can animate every element and every attribute in SVG files.

*HTML SVG Circle Example
*

<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

Output:

HTML SVG Rectangle Example

<svg width="200" height="100">  
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />  
</svg>

Output:

Javascript Variables

MurtazaNeher — Mon, 03 Oct 2022 04:45:56 +0000

JavaScript (JS) is a lightweight, interpreted compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages. In this blog I will discuss the variables used in JavaScript Language.

Firstly to discuss what actually are variable ? Variables are used to store data values. They are used to contain values which can be used later in the program for different operations and algorithms. A variable can only contain one value at a time, which can be of any data type. Meaning either a string, number, boolean, array, object, function or null or undefined.

Now, In JavaScript we have 3 keywords for variables, Const, var & let.
While var was the OG variable declaration in JS, const and let were introduced with ES6.

Var : Scope of var can be global or local depending on where is it declared. It means if any variable with var is declared outside function , it can be used throughout the program , while if it is declared inside the function it can only be used inside the function.

Hoisting of Var : Basic meaning of hoist is to pull something up or lift , hoisting is basically a mechanism where declarations of Variables and functions move to top of the scope wherever they are declared before code execution starts.
When var variables are hoisted to top they are initialized with value of "undefined".

Const : Const variable keyword was introduced with ES6 in 2015.
As the name of the keyword suggests const is used to define variables that are constant, it sounds a little bit oxymoronic but in other words we can say Const variables cannot be reassigned, if we declare a const array we can make changes in it but cannot reassign it. It also cannot be re-declared. Since const cannot be redeclared it has to initialized at the time of declaration .Const has a block scope which I will explain with use of a example.

const hello="murtaza";
{
const hello="how";
console.log(hello);
// returns "how"
}
console.log(hello);
//returns "murtaza

Let : Just like const let is also a block scoped variable keyword. Let can be updated but it cannot be re-declared. Just like var and const , let declaration is hoisted to top , while var is initialized with "undefined" , const and let are not initialized,
so if we try a to use a variable with let keyword without initializing it , it will give "Reference Error".

greeting = 4;
console.log(greeting);
let greeting;
// it returns "error: Uncaught ReferenceError: Cannot access 'g' before initialization"

CSS Box Model

MurtazaNeher — Mon, 03 Oct 2022 04:24:36 +0000

The CSS box model is a set of rules that help dictate how items are displayed within your website or web project. It defines the parameters of elements, their boundaries, and spacing both in and outside the target element.

This means any web page you see is made up of elements wrapped in rectangular boxes and arranged in relation to each other. These elements can exist beside, above, below, and within each other, depending on the type of element they are.
There are two types of HTML elements: block-level elements and inline elements. Let's take a closer look at each below.

Block-Level Elements
By default, block-level elements start on a new line and take up 100% of the space available — which might be the full width of the viewport or its container if it’s inside another element. Since they start on a new line by default, block-level elements break the flow of the document.With the padding, border, and margin properties applied to a block-level element, other elements will be forced away from the box around the element. As a result of this — and the fact that they span the full width of their container — block-level elements take up more space than inline elements and can create larger structures.

_Block-level elements include the following: _

<p> <h1> <h2> <h3> <h4> <h5> <h6> <ol> <ul> <pre> <address> <blockquote> <dl> <div> <fieldset> <form> <hr> <nonscript> <table>

Inline Elements
By default, inline elements do not begin on a new line or take up the full width of the viewport. Width and height properties do not apply. Unlike block-level elements, inline elements do not break the flow of the document.

Inline elements can contain other inline elements and data but not block-level elements. For example, a paragraph element can contain an emphasis element — but not a heading element.

If the padding, border, and margin properties are applied vertically, other inline boxes will not be forced away from the box around the element. If the padding, border, and margin properties are applied horizontally, other inline elements will be forced away from the box around the element.

_Inline level elements include _

<b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <var>