DEV Community: Mian Azan

Intelligent Cryptocurrency

Mian Azan — Wed, 21 Feb 2024 13:42:34 +0000

In recent years, the realm of cryptocurrency has evolved from an obscure corner of the internet into a global phenomenon, captivating the attention of investors, technologists, and the general public alike. Yet, amidst the frenzy of speculation and the ever-evolving landscape of digital assets, the concept of intelligent cryptocurrency investment has emerged as a beacon of rationality in a sea of volatility.

Intelligent cryptocurrency investment is not merely about chasing trends or blindly following the crowd. Instead, it encompasses a strategic approach grounded in research, analysis, and risk management. In this paradigm, investors seek to harness the potential of blockchain technology and digital currencies while mitigating the inherent uncertainties and pitfalls.

One of the fundamental principles of intelligent cryptocurrency investment is education. Understanding the underlying technology, the economic forces driving the market, and the unique characteristics of different cryptocurrencies is essential for making informed decisions. This knowledge empowers investors to discern between genuine innovation and fleeting hype, enabling them to identify projects with long-term viability and growth potential.

Collapse
Moreover, intelligent cryptocurrency investment entails a disciplined approach to risk management. While the allure of astronomical gains may tempt investors to throw caution to the wind, prudent risk management involves diversification, setting realistic goals, and adhering to a well-defined investment strategy. By maintaining a balanced portfolio and avoiding overexposure to any single asset or market, investors can safeguard their capital against unforeseen downturns and market fluctuations.

Furthermore, staying abreast of regulatory developments and market trends is paramount in the world of cryptocurrency investment. The regulatory landscape surrounding digital assets is continually evolving, with governments and regulatory bodies worldwide grappling with how to approach this emerging asset class. By remaining vigilant and adapting to regulatory changes, investors can navigate potential legal hurdles and regulatory uncertainties, reducing the risk of adverse outcomes.

In addition to traditional investment strategies, intelligent cryptocurrency investment also encompasses the prudent use of technology and data analysis. With the advent of sophisticated trading algorithms, artificial intelligence, and machine learning, investors can leverage data-driven insights to optimize their investment decisions and capitalize on market opportunities. By harnessing the power of technology, investors can gain a competitive edge in an increasingly digital and data-driven ecosystem.

Ultimately, intelligent cryptocurrency investment is about striking a balance between innovation and prudence, speculation and strategy. While the cryptocurrency market remains inherently volatile and unpredictable, adopting a thoughtful and disciplined approach can empower investors to navigate this dynamic landscape with confidence and resilience. By embracing education, risk management, regulatory compliance, and technological innovation, investors can unlock the transformative potential of cryptocurrency while safeguarding their financial interests for the future.

For more information, visit this link
(https://www.digistore24.com/redir/363385/MianAzan/)

14 Visual Studio Code Shortcuts You Should Know

Mian Azan — Fri, 13 May 2022 14:38:33 +0000

1. Find a File

Cmd + P : Quickly search for a specific file in the current workspace. This one works really well in conjunction when opening and using the split editor.

2. Find in current File

Cmd + F : Instantly find whatever you’re looking for in the current file you’re in. Pressing Alt at the same time will open the Find & Replace, and pressing Enter will move your cursor to the next occurrence of the current search.

3. Global Find

Shift + Cmd + F : Also similar to Toggle Sidebar, but this one works for the Global Find sidebar panel.

4. Toggle Panel

Cmd + J : Quick show and hide the bottom panel, this includes the Terminal, Output, Problems, and Debug Console.

5. Toggle Sidebar

Cmd + B : Straightford, quickly show and hide the sidebar.

6. Focus Debugger

Shift + Cmd + D : Another Toggle Sidebar, except this one is for the Debugger sidebar. By default, VSCode binds most of the top-keyboard function keys to Debugger actions (e.g.: F5 to start, Shift + F5 to stop, F9 to create a breakpoint), but I highly recommend changing these, as the function keys can be awkward to reach sometimes.

7. Focus/Split Editor

Cmd + [1-9] and Cmd + \ : Using Cmd with any number will focus on that specific editor number. For example: Cmd + 2 will focus on the second editor, and if that specific editor window isn’t open, it will open an empty editor for you. If you want to split the current file into a second editor window, that’s what Cmd + \ does.

8. Focus Git

Shift + Ctrl+ G : And one more Toggle Sidebar, but this one is for Git. When you focus the Git sidebar, VSCode will put your cursor into the commit message field, so you can quickly commit any changes you have staged using Cmd + Enter. (By default, VSCode doesn’t have a shortcut to stage changes, I have mine bound to Shift + Cmd + A to Stage All Changes, and Shift + Cmd + S changed to Stage Current File).

9.Open Command Palette

Shift + Cmd + P : The command palette will quickly become your best friend as you learn various shortcuts. If you ever forget a shortcut, simply open the command palette, and search for what you’re trying to do.

10. Copy current line up or down

Shift + Opt + Up / Shift + Opt + Down : it will copy lines up or down.

11.Move current line up or down

Opt + Up / Opt + Down : Easily move the line that the cursor is currently at up or down. This also works if multiple lines are selected as well.

12. Comment Selection

Cmd + / : Straightford, will comment out either the current selection or the line the cursor is currently on. This also works in reverse, in that it will also uncomment as well.

13. Close Current Editor

Cmd + W : Closes the current editor that is currently focused. If you have the workbench.editor.closeEmptyGroups setting turned off, VSCode will leave an empty editor open for you (which Cmd + W will also close).

14. Show Suggestion

Ctrl + Space : Forcing Intellisense to open can come in really useful, especially when trying to find specific settings while editing settings.json.

Once you start to make an effort to learn the various shortcuts provided by VSCode, you’ll quickly realize just how much of your workflow can be easily achieved using a couple of key taps. It’s not to say that you’ll completely stop using your mouse altogether although that is totally an option using the Vim extension, but that now you’ll no longer be so reliant on using it anymore.
If you’d like a more complete reference/cheatsheet for all of the common VSCode shortcuts, check out the official guide!

Good luck, and happy coding!

CSS FILTER PROPERTY

Mian Azan — Fri, 15 Apr 2022 12:05:26 +0000

𝐂𝐒𝐒 𝐜𝐚𝐧 𝐛𝐞 𝐮𝐬𝐞𝐝 𝐭𝐨 𝐚𝐩𝐩𝐥𝐲 𝐚 𝐟𝐢𝐥𝐭𝐞𝐫 𝐭𝐨 𝐲𝐨𝐮𝐫 𝐢𝐦𝐚𝐠𝐞😎.

The 𝒇𝒊𝒍𝒕𝒆𝒓 𝒑𝒓𝒐𝒑𝒆𝒓𝒕𝒚 gives items visual effects. It has predefined functions like blur, brightness, contrast, hue, and sepia, as well as the ability to create custom SVG filters.
As a result, you may easily tweak the attributes' values to make your image more appealing. Here is the demonstration for the same.

Blur

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

.img{
filter:blur(8px);
}

Brightness

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the “amount” parameter is missing, a value of 100% is used.

.img{
filter:brightness(1.5);
}

Contrast

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values over the amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

 img{
filter:contrast(250%);
}

Hue Rotate

Applies a hue rotation on the input image. The value of “angle” defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the “angle” parameter is missing, a value of 0deg is used. The maximum value is 360deg.

.img{
filter:hue-rotate(60deg);
}

Invert

Inverts the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:invert(85%);
}

Saturate

Saturates the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values over 100% are allowed, providing super-saturated results. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:saturate(50%);
}

Sepia

Converts the input image to sepia. The value of “amount” defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

.img{
filter:sepia(80%);
}

Multiple Filters

.img{

filter:hue-rotate(70deg);
filter:saturate(145%);
filter:brightness(145%);
}

The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

5 Best CSS Frameworks for Front-End Development

Mian Azan — Fri, 01 Apr 2022 13:59:00 +0000

Before we go into the CSS frameworks, let's have a look at CSS in general. CSS, or Cascading Style Sheets, is a common tool used by front-end developers to modify and enhance the appearance of HTML elements. CSS frameworks are essential for creating device-agnostic websites with beautiful user interfaces. A careful selection of the proper framework aids in getting the most out of the fantastic Cascading Style Sheet (CSS).

THINGS TO CONSIDER WHILE CHOOSING CSS FRAMEWORKS

Make sure to verify the performance of CSS front-end frameworks before using them in your development process.
With the ever-changing IT scene, it is essential to check for new changes. If regular updates are made available, you may receive further updates as well, ensuring that you do not fall behind.
Before deciding on a CSS framework based on popularity, take the necessary precautions. It signifies that that particular front-end framework is used by a group of developers.

4.Choose a framework with a low degree of specificity with caution. It is preferable to choose a comprehensive solution that allows you to easily customise your framework with new rules. As a result, select a framework with the least amount of specificity.

5.Check to see if the framework you've picked has good documentation features to help you learn faster.

The following are some of the most popular CSS frameworks among front-end developers:

1. MATERIALIZE – Framework Based on Material Design by Google

Materialize is one of the most well-known CSS frameworks for front-end development. It is based on Google's Material Design. It has a wide range of features, including autocomplete, waves, slide navigation, and more.
Materialize assists in the creation of amazing design features. It has a lot of capabilities for creating extremely responsive designs, as well as a lot of documentation. You may also define the visual interactions of UX elements to provide your consumers a better experience.

2. BOOTSTRAP – Free and Open-source CSS Framework

Bootstrap is another popular CSS framework for creating and delivering mobile-first designs in CSS, HTML, and JavaScript. It's a good alternative for difficult HTML5 development because the framework offers a 12-column grid. It also includes a number of web components, such as responsive navigation, a carousel, tabs, and more.
Similar to the previously mentioned Materialize framework, Bootstrap provides a beautiful and uniform UI experience. There are many premium and free themes, plugins, and templates available for Bootstrap. It also aids in the quick resolution of CSS compatibility concerns and is supported by nearly all web browsers.

3. KUBE – CSS & JS Framework

Kube is commonly used to create stunning and device-agnostic website designs and is supported by a number of popular web browsers. It's a popular CSS framework that comes with a variety of themes and styles to assist speed up the website construction process. Because this framework is based on Flexbox, it provides a plethora of functionalities and features that aid in the enhancement of the design layout.
When it comes to Kube's advantages, its files are lightweight, simple to use, and contain all of the necessary resources and tools. All of these information and tools make the website construction process much easier. Kube is an excellent framework to consider when constructing your website because it allows you to experiment with a variety of CSS choices.

4. BULMA – Free, Open-source, & Modern CSS Framework Based on Flexbox

Front-end developers use Bulma, which is a well-known and extensively used framework. Because of the significant community support, it is a comprehensive solution. The framework works with a variety of web browsers. Bulma is a CSS development framework that is simple to use and effective. It makes a lot of front-end design and development easier because it is lightweight and includes Flexbox features.

5. PURE CSS – Responsive Framework for Web Apps

Pure CSS, among various CSS front-end frameworks, is the most extensively used framework in the present market due to its simplicity and smaller file size. It works particularly well with new projects and has a number of project-building options that aid in providing quick access to CSS resets. It has the normalise feature for even better cross-browser compatibility. It has a CSS file embedded in it.
Additional files can be inserted using a single style sheet with Pure CSS because the framework isn't too large. Because it can access CSS files even via a CDN, the development process has been simplified and made faster (Content Delivery Network).

All the best front-end CSS frameworks listed above have their own unique features.Bootstrap CSS, and Bulma are more advanced frameworks. These are the best choice for long-term projects.
While if you’re looking for simple and lightweight frameworks. Or want to explore more. Then you should try Pure.CSS, Tailwind, or W3.CSS.
According to my experience, it depends upon what are your needs. And what exactly you want to accomplish or achieve. When you will know your needs. Then you can decide easily which one of these CSS frameworks is best for your project. I also suggest you not stick with only one framework. Because nothing is completely perfect.🥰

7 JavaScript Ideas to Help You Improve Your Development Skills

Mian Azan — Sat, 26 Mar 2022 14:42:00 +0000

JavaScript is a complex thing to master. If you’re a JavaScript developer at any level, it’s crucial to understand its core notions. This article covers 7 principles that any JS developer should be aware of, however it by no means covers everything a JS developer should know.

1. Value vs. Reference Variable Assignment

To write bug-free JavaScript, you must first understand how JavaScript assigns variables. If you don't understand this, you could easily develop code that changes values without your knowledge.
JavaScript always assigns variables by value. But this part is very important: when the assigned value is one of JavaScript’s five primitive type (i.e., Boolean, null, undefined, String, and Number) the actual value is assigned. However, when the assigned value is an Array, Function, or Object a reference to the object in memory is assigned.

Example time!

In the following snippet, var2 is set as equal to var1. Since var1 is a primitive type (String), var2 is set as equal to var1's String value and can be thought of as completely distinct from var1 at this point. Accordingly, reassigning var2 has not effect on var1.

let var1 = 'My string';
let var2 = var1;

var2 = 'My new string';

console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

Let’s compare this with object assignment.

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';

console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

One might see how this could cause problems if you expected behavior like primitive assignment! This can get especially ugly if you create a function that unintentionally mutates an object.

2. Destructuring

Don’t be thrown off by JavaScript parameter destructuring! It’s a common way to cleanly extract properties from objects.

const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name, food } = obj;

console.log(name, food);
// 'Joe' 'cake'

If you want to extract properties under a different name, you can specify them using the following format.

const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name: myName, food: myFood } = obj;

console.log(myName, myFood);
// 'Joe' 'cake'

In the following example, destructuring is used to cleanly pass the person object to the introduce function. In other words, destructuring can be (and often is) used directly for extracting parameters passed to a function. If you’re familiar with React, you probably have seen this before!

const person = {
  name: 'Eddie',
  age: 24
}

function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}

console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

3. Closures

Closure is an important JavaScript pattern to give private access to a variable. In this example, createGreeter returns an anonymous function that has access to the supplied greeting, “Hello.” For all future uses, sayHello will have access to this greeting!

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}

const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe

In a more real-world scenario, you could envision an initial function apiConnect(apiKey) that returns some methods that would use the API key. In this case, the apiKey would just need to be provided once and never again.

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }

 function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }

return { get, post }
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

4. Spread Syntax

A JavaScript concept that can throw people off but is relatively simple is the spread operator! In the following case, Math.max can't be applied to the arr array because it doesn't take an array as an argument, it takes the individual elements as arguments. The spread operator ... is used to pull the individual elements out the array.

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

5. Rest Syntax

Let’s talk about JavaScript rest syntax. You can use it to put any number of arguments passed to a function into an array!

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3

6. Identity Operator (===) vs. Equality Operator (==)

Be sure to know the difference between the identify operator (===) and equality operator (==) in JavaScript! The ==operator will do type conversion prior to comparing values whereas the === operator will not do any type conversion before comparing.

console.log(0 == '0');
// true
console.log(0 === '0');
// false

7. Callback Functions

Far too many people are intimidated by JavaScript callback functions! They are simple, take this example. The console.log function is being passed as a callback to myFunc. It gets executed when setTimeout completes. That’s all there is to it!

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'

If you didn't know any of these 7 principles before, you've probably improved your JavaScript knowledge! And if you knew them all, hopefully this was an opportunity to put your knowledge to the test.

Bootstrap 3 and Bootstrap 4

Mian Azan — Fri, 18 Mar 2022 14:24:59 +0000

In this article, we'll compare and contrast Bootstrap 3 and Bootstrap 4 versions of the framework.

What is Bootstrap

Bootstrap is the most widely used HTML, CSS, and JavaScript framework for creating mobile-friendly and responsive websites. It's a front-end framework that makes web development easier and faster. Bootstrap is available for download and use for free. A responsive website is one that can change itself to look well on all devices, including smartphones and desktop computers.

What is Bootstrap 3?

Bootstrap 3 is the latest version of the bootstrap framework. It is available for download and use at no cost. Similar to cascading style sheets, Bootstrap 3 is used to add design to HTML texts. It encourages the use of mobile-first design.
The Bootstrap 3 grid system contains four tiers: xs, sm, md, and lg, but the Bootstrap 4 grid system has five. In Bootstrap 3, the CSS unit is px. The class.img-responsive is used to create responsive pictures in this case, but this feature was altered in Bootstrap 4. Dark or reversed tables are not supported in Bootstrap 3, however they are supported in Bootstrap 4.

What is Bootstrap 4?

Bootstrap 4 is the most recent and up-to-date version of the Bootstrap framework. It features five different grid systems: xs, sm, md, lg, and xl. Many changes have been made, such as the CSS unit in Bootstrap 4 being rem, and.img-fluid being used to create responsive images. The.table-dark class in Bootstrap 4 allows users to build dark or reversed tables.

Now, let's see the comparison chart between Bootstrap 3 and Bootstrap 4. We are comparing both terms on the basis of some characteristics.

1.Grid system:

Bootstrap 3 has 4 tier grid system that includes xs, sm, md, and lg.

Bootstrap 4 has 5 tier grid system that includes xs, sm, md, lg, and xl.

2.CSS unit:

CSS unit in Bootstrap 3 is px.

CSS unit in Bootstrap 4 is rem.

3.Font size:

The font size is 14 px in Bootstrap 3.

Whereas, the font size is 16 px in Bootstrap 4.

4.Responsive images:

The .img-responsive class is used for creating the responsive images in it.
The .img-fluid class is used for creating the responsive images in it.

5.Glyphicons:

It supports Glyphicons.
It does not support Glyphicons.

6. Dark/inverse tables:

It does not support dark/inverse tables.

In Bootstrap 4, the .table-dark class is used to create dark/inverse tables.

7.CSS source file :

LESS (Leaner Style Sheets).
SCSS (Sassy CSS).

8.Pager classes:

In Bootstrap 3, pages can be aligned by using .previous class and .next class.

In Bootstrap 4, .previous class and .next class are not supported.

9. Dividers:

In Bootstrap 3, to divide sections, the .divider class is used in the li element.

In Bootstrap 4, to divide sections, the .dropdown-divider can be used in the div element.

10.Full width jumbotron:

In Bootstrap 3, the .jumbotron-fluid class cannot be used to create full width jumbotrons. Bootstrap 4 gives access to the user to use the .jumbotron-fluid class to create full width jumbotrons.

11.Form control size:

In Bootstrap 3, form size can be increased or decreased with the help of using .input-lg and .input-sm classes.
In Bootstrap 4, form size can be increased or decreased with the help of using .form-control-lg and .form-control-sm classes.

12.Help text:

In Bootstrap 3, we can use the .help-block class to display the help text.
Whereas in Bootstrap 4, we can use the .form-text class to display the help text.

13.Menu Headers:

In Bootstrap3, menu headers can be created by using the .dropdown-header class to the

<li>

tag.

In Bootstrap 4, menu headers can be created by using the .dropdown-header class to the

<h1>, <h2>

tags.

14.Inline navs:

There is no .nav-inline class is included in Bootstrap 3.
There is a use of .nav-inline class in Bootstrap 4 to display the navs inline.

15.Dropdown structure:

In Bootstrap 3, the dropdown structure is created using

<ul> and <li>.

In Bootstrap 4, the dropdown structure is created using

<ul> and <div>.

16.Well, panels, and Thumbnails:

In Bootstrap 3, wells, panels, and thumbnails are supported.

In Bootstrap 4, wells, panels, and thumbnails are not supported. In place of that, cards can be used.

17.Carousel items:

In Bootstrap 3, the class .items is used to create carousel items. In Bootstrap 4, the class .carousel-items is used for carousel items.

18.Fixed navbars:

In Bootstrap 3, the navbar is fixed to top or bottom using the .navbar-fixed-top and .navbar-fixed-bottom class.

In Bootstrap 4, the navbar is fixed to top or bottom by using the .fixed-top and .fixed-bottom classes.

19.Navbars colors:

In Bootstrap 3, there is a limited color options. It supports inverse navbars. It does not support other classes.

In Bootstrap 4, there are new color options. It introduced the .navbar-light, .navbar-dark classes. It also allows the .bg-* classes to be used on navbars.

20.Extra small size button:

A button of extra small size can be created with the help of .btn-xs class.
The button of extra small size was no longer available in Bootstrap 4. The only available classes are .btn-sm and .btn-lg.

21.Outline buttons:

Outline buttons are not supported in Bootstrap 3.

Bootstrap 4 introduced the .btn-outline-* class to style buttons with an outline color.

22.Button styles:

It includes the .btn-default and .btn-info classes.
It includes the .btn-secondary, .btn-light and .btn-dark classes.

23. Button size:

A button of extra small size can be created with the help of .btn-xs class.
The button of extra small size is no longer available in Bootstrap 4. The only available classes are .btn-sm and .btn-lg.

24.Offsetting columns:

In Bootstrap 3, there is a use of col--offset- classes to offset the columns. As an instance, col-md-offset-4.

Whereas, in Bootstrap 4, there is a use of offset-- classes to offset the columns. As an instance, offset-md-4.

25.Checkbox and radio buttons:

In Bootstrap 3, the checkboxes or radio boxes were created with the help of classes such as .radio, .radio-inline, .checkbox, and .checkbox-inline.
In Bootstrap 4, the checkboxes and radio buttons are created with the help of using classes such as .form-check, .form-check-label, .form-check-input, and .form-check-inline.

26.Media objects:

In Bootstrap 3, there are various classes used for media objects such as .media, .media-body, .media-object, .media-heading, .media-list, and so on.
In Bootstrap 4, there is only one class used for media objects which is .media.

27.Table header:

It does not support table header.

In Bootstrap 4, table header modifier classes such as .thread-default, and .thread-inverse are added.

The above comparison fact shows that the latest version of Bootstrap has a number of enhancements. So far, we've looked at the differences between two versions of Bootstrap: Bootstrap 3 and Bootstrap 4. This article isn't the only place where you can compare Bootstrap 3 to Bootstrap 4. It's preferable to go to Bootstrap's official website to learn more.
So that concludes the article. I hope you find this essay instructive and useful in improving your user experience and development abilities.😅

10 Things Beginners Must Know About Java Script

Mian Azan — Sat, 12 Mar 2022 15:26:13 +0000

There's no denying that JavaScript is a must-have for any web developer. Gone are the days when all you needed was a little CSS and HTML to get by. Fortunately, it has so few rules that getting started is a breeze:

alert("Hello World."); // Shows the user "Hello World." in a dialog

That concludes our discussion. With just a few lines of code, you can achieve a lot of easy things. Importing packages and declaring namespaces are not required. You write a piece of code, and it executes. However, the lack of structure that allows JavaScript to have such a low barrier to entry also allows beginners to write unstructured, brittle code without even recognising it. This unstructured code will come back to bother you as an application expands, in the form of unforeseen, difficult-to-find defects.
In this article, I'll address some of the most common misunderstandings and errors that create misery for new JavaScript developers. Here are a few things that any new JavaScript developer should be aware of:

1. You can add properties to almost everything

JavaScript has only three primitive data types: String, Number, and Boolean. Everything else (if it’s not null or undefined) can have properties added to it.
Note: Even though String is a primitive type ("hi"), there is another incarnation of String in JavaScript which is an object (new String("hi")).

var a = {}; // create a new object 
a.b = 'hello';

In the above code, a.b meant nothing until I set a value to it. Now a has a property called b. But wait, it gets weirder.

var a = []; // create an array 
a.b = 'hello';

Great, so now you’ve got an empty array, with a property on it called b.
Caution: Just because you can put properties on arrays doesn’t mean you should. As I’ll discuss later, the above code will change the behavior of for...in loops on that array.
How about this?

var a = function() {}; 
a.b = 'hello';

Yes, that’s right. a is now a function, with a property. Which brings me to my next point.

2. Functions are objects

Treating functions as values is becoming increasingly common in more languages, although depending on your background, you may not be aware of this.

function doIfTrue(isTrue, whatToDo)
{
  if(isTrue)
    whatToDo();
}
doIfTrue(true, function() {alert('hello');}); //  alerts "world"
doIfTrue(false, function() {alert('world');}); // does nothing

The function above treats the whatToDo parameter as a function.This pattern enables developers to do some quite powerful things, such as putting up event handlers with very minimal code.

3. for...in loops iterate over property names, not values

Developers who have worked with Java or C# are familiar with "foreach" loops, which run through all the values in a collection. There isn't a similar loop in JavaScript (yet). A "for in" loop, which is the closest thing, has a few key differences:

var arr = ['a', 'b', 'c']; 
for(var i in arr) { 
  alert(i); // 0, 1, 2 
  alert(arr[i]); // 'a', 'b', 'c' 
}

As you see, the variable used by the for...in loop gives you the keys by which other values can be created, but you have to perform the extra step of getting the values off of the real object.
Why does JavaScript do this? The main cause is that for...in was not made for arrays: it was made for objects that have properties on them:

var pairs = {'a': 'apple', 'b': 'banana'};
for(var key in pairs) {
  alert(key);        // 'a', 'b'
  alert(pairs[key]); // 'apple', 'banana'
}

Caution: Because a for...in loop iterates over the properties on an object, you’ll get odd behavior if you use the loop on an array that has extra properties added to it, For this reason, you should avoid using for...in loops on arrays–use simple for loops instead. They’re faster anyway.
Note: ECMAScript 6 will introduce for...of loops, which iterate directly over values.

4. Understand how .prototype works

JavaScript uses a special prototype property to answer the problems that other languages use classes to solve. Consider the following:

function Person(first, last)
{
  this.first = first;
  this.last = last;
}
var john = new Person("John", "Doe");
var mary = new Person("Mary", "Deer");
Person.prototype.full = function() {return this.first + " " + this.last;};
alert(john.full());

There are a lot of things happening here.

We create a function, which will set properties on its this object when called.
We create two separate instances of that function by putting the new keyword before our function calls. This ensures that john and mary refer to completely separate objects, each with their own first and last properties.
We create a new function and assign it to the full property on our Person function’s prototype property. The prototype property exists on all functions, and allows you to define fall-back properties that should exist on every object created from that function.
We call the full() function on john. JavaScript sees that the john object doesn’t actually have a full function on it, so it looks for a Person.prototype.full() function and calls that instead. Within that call, however, this still refers to the john object.

5. Variable scoping

Global variables should be avoided by all developers, regardless of language. In Javascript, though, it's easy to do by accident because no one forces you to structure your code into modules.

var message = "hello world"; 
alert(message);

If the above code is run all by itself in the browser, it will create a new global property on the window object, called message. That means that if any other code on your site also has a similarly-declared variable called message, they’ll stomp on each other.
In Javascript, all variables declared with the var keyword are scoped to their declaring function. That means if you want to make sure your variables aren’t global, you should put them in a function, and then call that function.

(function() { 
  var message = "hello world"; 
  alert(message); 
})();

Developers with a background in other languages based on C syntax are used to variables scoped by curly braces ({}). In JavaScript, variables declared with var are “hoisted” to the top of the function they’re declared in. This code:

function sayHi() { 
  if(true) { 
    var s = "hi"; 
  } 
  alert(s); // alert("hi") -- `s` is still within scope. }

… is the same as this:

function sayHi() { 
  var s; 
  if(true) { 
    s = "hi"; 
  } 
  alert(s); 
}

This also means that if you refer to a variable outside the scope of your function, you’ll use the value of that variable at the moment the code is run, not at the moment your function is created. This trips up beginners all the time:

var thingsToDo = [];
 for(var i = 0; i < 2; i++) {
   thingsToDo.push(function() {alert('hello ' + i);}); 
 }
 for(var k in thingsToDo) {
   thingsToDo[k]();               // alerts "hello 2" twice.
 }

Remember that the variable i starts as a 0 value, but by the time it’s called (in the second loop) its value has been incremented to 2. To capture the value of i when you create the function, you have to create another function scope:

var thingsToDo = [];
function createHelloAlert(v) {
  // `v` only exists within this method call.
  return function() {alert('hello ' + v;} 
}
for(var i = 0; i < 2; i++) {
  thingsToDo.push(createHelloAlert(i)); 
}
for(var k in thingsToDo) {
  thingsToDo[k]();  // alerts "hello 0", then "hello 1".
}

The let keyword will be introduced in ECMAScript 6, allowing you to declare a variable that is scoped to the curly-braces. Lexical scoping is the term for this.

6. Variables that aren’t explicitly declared can be global

Let's say you remember to encapsulate your code in a function, but you don't remember to include the var keyword:

(function() { 
  message = "hello world"; 
  alert(message); 
})();

When you set a variable’s value, and you haven’t declared it to be a variable for the current function scope via the var keyword, JavaScript assumes you mean this.propertyName. So the above code is the same as this:

(function() { 
  this.message = "hello world"; 
  alert(this.message); 
})();

If you’re a Java developer, you’re saying to yourself, “What’s this? No, really. What is this?” In other languages, this means the instance of the class that you’re looking at, but in JavaScript it means the object that your function got called on. If you’d done this:

var a = {
  foo: function() {
    this.message = "hello world";
  }
};
a.foo(); // `a.foo()` means foo's `this` is `a`.
alert(a.message); // outputs "hello world"

… then calling the foo method puts a value on a‘s message property. But since our original code snippet is calling a function that doesn’t have anything in front of it, this is given a fallback value of window. You end up creating another global variable just by forgetting the var keyword.

7. JavaScript never sleep()s

Threads are a concept in many programming languages that allows you to perform many operations at the same time. The issue is that multi-threading throws up a big can of worms, including thread locks and other race situations that even the most experienced programmers have trouble dealing with.
JavaScript avoids these issues entirely by only allowing one piece of code to run at a time. This is great, but it requires us to write our code in a different way. Most languages create a layer of abstraction over operations where the program is waiting for something to happen. For example, in Java, you can call Thread.sleep(100), and the rest of your procedure won’t run until 100 milliseconds have passed.
When you just have one thread to work with, you can't afford to leave it idle for hundreds of milliseconds at a time–the UI will freeze and the user experience will suffer. As a result, JavaScript practically never causes a halt in operation. Instead, asynchronous callbacks are used to specify what should happen after an operation completes. Consider the following scenario:

window.setTimeout(function() { console.log(a); }, 1000); 
console.log('hello world'); 
var a = 'got here';

The above code will first create a “hello world” message (even though that line of code comes after the setTimeout() method), and then print “got here” one second later. Even if we changed the timeout to 0, we know that the a variable will be initialized before getting logged because no other JavaScript can run until this code has finished.
Beginners will often write code like this, and then wonder why a doesn’t have a value:

var a; 
$.ajax(url, {success: function(e, data) { a = data; }); console.log(a); // BAD! This line will run before `a` gets set to a value!

Don’t fall into that trap.
There are a few caveats that I should mention.

Not all functions that you pass into other functions are asynchronous callbacks. The following code works just fine, because doIfTrue() calls its whatToDo argument, synchronously, before it returns:

var a = 'hello'; 
doIfTrue(true, function() {a = 'world';}); 
console.log(a); // prints "world"

alert() is one of very few exceptions to the no-blocking rule–nothing happens until the alert window closes. Even the timeouts freeze! This is one reason that it’s usually best to avoid using alert().
Web Workers can allow you to run CPU-intensive tasks on a separate thread, but they’re structured very carefully to avoid race conditions. Beginning developers rarely need to worry about such things.

8. Automatic type conversions

Like many languages JavaScript does some automatic conversions between types under certain circumstances. For example:

var s = 1 + ""; // yields "1"

JavaScript takes this a little further than many languages, though, and you can leverage this fact to make your code very concise. For example, instead of if(a != null) {...}, you can just say if(a) {...}. Even though a isn’t a Boolean, JavaScript can tell you want to treat it like one, so it determines whether a‘s value is “truthy” or “falsy” and acted accordingly.

Falsy JavaScript values include:

false
0
empty strings ('' or "")
null
undefined
NaN Everything else is Truthy.

Here’s another example:

var a = b || c;

If b has a truthy value like “Bob”, that’s the value that a will get. If b is falsy, a will get the value of c.

You can force a truthy/falsy value to become a true/false value by negating it twice:

var trueOrFalse = !!value;

Also, in equality comparison, x == y has some complex rules for converting different value types. This can yield weird behavior, like:

var a = "1" == true; // true: "1" -> 1, which is truthy

And you can use the === operator for strict comparison without automatic conversion.
var a = "1" === true; // false: different-typed values are not equal.

9. JavaScript is code – not data or markup

For simplicity, many online tutorials will mix JavaScript and HTML, like so:
Mixed HTML and JavaScript (bad)

<button onclick="return confirm('Delete this object?');">Delete</button>

This works fine for small tutorials, but it has some serious drawbacks when you’re writing real applications. It mixes the programmatic behavior of the UI elements (represented by JavaScript) into the structure and data that is (represented by HTML). HTML should not be deciding how it interacts with the JavaScript. Instead, separate your JavaScript code from the HTML, and let it decide how it interacts with the page.

<button data-confirmation="Delete this object?">Delete</button>

JavaScript (with jQuery)

// Set a click handler for anything with a data-confirmation attribute. 
$('[data-confirmation]').click(function() { 
  var message = $(this).data('confirmation'); 
  return confirm(message); 
});

As you can see, the JavaScript has now defined the behavior for any element with a confirmation data attribute. This approach, sometimes called “unobtrusive JavaScript,” has several advantages, including:

It usually makes HTML code more concise and readable.
It allows you to declare a UI concept in one place and reuse it throughout your system.
If you decide to change your implementation details (e.g. “browser confirmation dialogs are ugly and inconsistent–we want to use a popup instead!”), you can do this in one place without touching your HTML. If you're using Angular or Polymer to render templates in the browser, this separation implies placing HTML in one section of your project and JavaScript in another. If you're using a server-side engine like JSP or Razor, you should keep your JavaScript code separate from your dynamically created HTML tags in static, cached.js files.

10. JavaScript is not just for browsers

Since its inception in 1995 (allegedly in ten days), JavaScript has gone a long way. Now, technologies like node.js allow JavaScript to be run outside of any browser. The following are some examples of how JavaScript can be used as a general scripting language:

JavaScript is used to write server-side code. Ghost.org is an example of a web application with JavaScript server-side programming running on node.js.
Building LESS files into CSS. Less.js is a JavaScript-based LESS converter that is the fastest and most accurate on the market. It's a good idea to pre-build the CSS by executing the lessc compiler via node.js if you're using LESS and don't want it to be re-translated client-side on every page view.
Organizing and managing construction projects. What if you wanted to run unit tests on your JavaScript every time you made a change to ensure you didn't break anything? Grunt.js can help with that, thanks to its watch and Karma plugins. Alternatively, you can tell Grunt to rebuild all those CSS files whenever you make a modification to an LESS file. If you want to create web applications, you'll need to understand JavaScript. You might as well apply that expertise to other elements of your application too!

Final Thoughts

JavaScript is here to stay, whether you like it or not. It is currently the de-facto language for creating any type of web-based rich user experience.
JavaScript is a sophisticated language with many complexities and nuances. The more you study about JavaScript, the more you realise just how little you know. However, armed yourself with information will help you avoid costly mistakes that new developers frequently make.
Good Luck.😅

5 HTML Features You Should Know

Mian Azan — Fri, 04 Mar 2022 16:26:20 +0000

We deal with a variety of technologies, frameworks, and programming languages as web developers. While learning HTML, CSS, and JS is simple, mastering each of them is difficult.
Even though there are numerous advantages to knowing more about HTML's features, it is sometimes disregarded. You can save a lot of time by using HTML features rather than creating them from scratch. Furthermore, your markup will be considerably cleaner and more user-friendly.
So let's look at five HTML features you've probably never heard of before! I hope this article will help you a lot!.

1. Input Suggestions

The html

<datalist>

element contains a set of

<options>

elements that represent the recommended options availabe to choose from within other controls.

2. Details Discloure

The html

<details>

element creates a discloure widget in which information is visible only when the widgets is toggled into an "open" state.

3. The Base Element

The html

<base>

element specifies the base URL to use for all relative URLs in a document.

In this example I am setting base Url to https://i.pravatar.cc and target to blank. The images are loading taking into account that base URL + their respective src attribute. The anchor elements are redirecting to the base URL + the href attribute.

4. Lazy Loading Images And Iframes

You can add the loading attribute and set its value to lazy to defer the loading of both images and iframes until they become visible in the browser.

5. The Picture Element

The html

<picture>

element contains zero or more

<source>

elements and one

<img>

element to offer alternative versions of an image for different display/device scenarios.

In the above example if the browser width is atleast 800px then either head.jpg or head2x-jpg is used, depending on the device resolution. If the browser is between 450px and 800px then either head-small-2x.jpg is used again depending on the device resolution.

I hope this article will help you a lot 😅.

Nested Child Routes In A Vue. JS Web Application

Mian Azan — Sat, 26 Feb 2022 14:15:26 +0000

When creating a good user interface for a web application, you'll want to reuse as many features as feasible. By assigning child routes to a parent route within the application, it is possible to create a multi-level UI with Vue.JS. This opens the door to new navigational possibilities.
We'll explore how to assign child routes and views to nested routes in a Vue.Js web application.

Create a New Vue.js Project with the Vue CLI

To keep things simple, we'll start by establishing a new Vue.Js project. Execute the following command, assuming you have the Vue CLI installed:

vue create nested-project

Respond to the questions posed by the CLI. It makes no difference whether you use a standalone or a runtime-only project. What matters is that the vue-router library is installed.
To finish up, run the following commands after you've established the project scaffold:

cd nested-project
npm install

We can now start working on our parent and child routes in preparation for some cool UI functionality.

Adding Components to Represent Parent and Child Routes

You should have a src/components/HelloWorld.vue file in a new CLI-generated project. We can leave it as is, but it will be easier to grasp if we rename it to src/components/page1.vue to retain the flow of this example. Our parent view will be represented by this component.
Include the following in the src/components/page1.vue file of the project:

<template>
    <div class="page1">
        <h1>{{ msg }}</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'Page1',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    a {
        color: #42b983;
    }
</style>

When we scaffold the project, we get something similar to the code above. However, you'll see that we've put tags in the block. These tags function as a pass-through for any routes we create. These tags will be passed over to our child view.
You'll notice tags in the project's src/App.vue file if you open it. These tags in the src/App.vue file are used by the parent routes.
It's vital to remember that tags can't be used at the root level of the block. To put it another way, this will not work:

<template>
    <router-view></router-view>
</template>

Instead, the tags must be inside a

<div>

element or anything similar.
With the parent view out of the way, let’s pivots on the very likewise child view that we plan on nesting. Create a src/components/child1.vue file within the project and include the following code:

<template>
    <div class="child1">
        <p>{{ footnote }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Child1',
        data () {
            return {
                footnote: 'Created by The Developer'
            }
        }
    }
</script>

<style scoped></style>

With the above code it will just a display a line of text. The mission is to have it display alongside whatever the previous parent view is displaying.
With the two components out of the way, let’s focus on wiring the routes jointly with the vue-router library.

Designing the Vue.Js Router

All routes for this particular example will be found in the project’s src/router/index.js file. If you open it, you’ll see it is still referencing the HelloWorld.vue file that we had previously renamed. We’re just going to change up the entire file.
Within the project’s src/router/index.js file, include the following:

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1,
            children: [
                {
                    path: "child1",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

If you run the project, you’ll notice that when you navigate to the root of the application, you’ll be redirected to http://localhost:8080/#/page1/child1 and both the parent and nested child view data will be rendered to the screen.
Awesome right?
This isn’t the only way to accomplish rendering child routes. For example, a default child route could be configured to prevent having to directly navigate to the child path.
Take note of the following changes to the src/router/index.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            component: Page1,
            children: [
                {
                    path: "",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

In the above code we’ve removed the name on the parent route and blanked out the child path attribute. Now, when navigating to the http://localhost:8080/#/page1 path, the child is rendered. The need to navigate directly to its path is removed.

Conclusion

You just imagined how to include nested child routes in your Vue.js web application. Having nested children are useful when it comes to templating, between other things. For example, imagine having a settings section of your application where there are multiple settings categories. The settings section could be one of many parent routes while each category could be a child to that parent.😅

10 CSS Hacks Every Web Developer Should Know

Mian Azan — Fri, 18 Feb 2022 14:42:56 +0000

CSS (Cascading Style Sheet) is still among the top ten coding languages, according to Redmonk(It was founded on the premise of the increasing influence of software developers in the technology industry.), even though it isn't as popular as JavaScript. CSS is popular among website developers because it is quite robust, relatively straightforward to learn, and ubiquitous across different browsers.
There are various CSS shortcuts or hacks, as there are with any coding language, that help you to write cleaner code, improve design components, and save time. You may also use a code editor to directly paste these snippets into your website.
It's also vital to note that CSS does not require you to be a senior web developer. CSS is utilised by 96 percent of all websites, according to W3Techs, and the ability to use CSS to improve the layout and design of a website is essential to the functionality of major open source CMSs like WordPress.
In reality, the majority of the most popular website builders (which are notorious for advocating a "What You See Is What You Get" or WYSIWYG approach) now allow users to insert custom CSS code.
If you are new to css then these hacks will help you a lot,Let's get started with these ten CSS hacks if you already know the fundamentals.

1. How to fix an element position in CSS

Despite the fact that websites are dynamic, you may have some items that you want to move about. Using the position:absolute script, you can do so.
However, use this strategy with caution and test it on all screen sizes and resolutions before implementing it to avoid breaking your site's design.
Following this script with a precise position node guarantees that the element stays in the same place for all users.
Example:

.sidebar {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 300px;
  height: 150px;
}

2. How to position content in the center with CSS

It can be difficult to put stuff in the centre of the screen. You can, however, use position: absolute to override the dynamic positioning and display the content in the middle at all times.
It also works on any device at any resolution. Always double-check that everything is in the right place and that the element looks natural, even on small displays.
Example:

section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}

3. How to edit styles on a single page in CSS

You can use a custom class to override the site's CSS styles if you have a CMS and want some of your posts to look different than others. This guarantees that you just make changes to one post page and leave the others alone.
When you make a post on a WordPress blog, the post's id is included in the body as a class, for example:

Then you could do something like this to change the styling for just that post's page:

.postid-330 {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

Custom classes can be added to individual posts in other major CMSs. Ghost, for example, allows you to designate a post as a featured post and adds a.featured class to it.
If you want to use this method frequently, you should alter the main CSS style sheet to prevent writing extra code.
This isn't limited to CMSs; if you have a simple website with many HTML files, you can use the same CSS file to apply specific styling to elements throughout your project.
For example, if you have page with the class .landing:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>Landing Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>Landing Page</h1>
    <p>My landing page.</p>
  </body>
</html>

And another with the class .about:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>About Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>About Page</h1>
    <p>My about page.</p>
  </body>
</html>

You could add this to your main style sheet to only adjust the styling on the about page:

.about {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

4. How to fit images to the page in CSS

Few things are more annoying than having your graphics spill all over your site visitor's screen. It can wreak havoc on your site's look and turn visitors away.
However, you can ensure that your images always fit the visitor's screen, regardless of the device they're using, with this simple hack.

img {
  max-width: 100%;
  height: auto;
}

5. Visited link styling in CSS

The default style of visited links that users have clicked on may not be compatible with the style of your current site. CSS code can be used to change the appearance of links before and after users click on them.
You may then combine these with the overall aesthetic of your website to create a unique experience.
Example:

a:link {
  color: #ff0000; /* the unvisited link is red */
}
a:visited {
  color: #ee82ee; /* the visited link turns violet */
}

6. How to consolidate styling in CSS

If you know you want to apply CSS styling to a number of objects, writing each piece of code one at a time takes time. When you use commas to separate things and write the CSS style within, the style is applied to all of them.
Because you won't have to write the same line of code numerous times, you'll save time and reduce the size of your code.
Example:

/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
  border: 2px solid #000000;
}

/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
  color: white;
  font-size: 24px;
}

7. Initial letter stylizing in CSS

It works by capturing the attention of the reader and piqueing their interest in reading the first line.
While this style may appear to have dated, you can still design it to appear modern and profit on the psychological effect it has on your guests. Furthermore, because the drop caps option is incorporated into the CSS language, you may utilise it to give your paragraphs a new look with ease.
Example:

p:first-letter {
  display: block;
  float: left;
  margin: 5px;
  color: #000000;
  font-size: 60px;
}

8. How to disable text wrapping and add ellipsis in CSS

If you're short on space, you might have to truncate your text to fit other parts. You can manually adjust each of the text elements, but this takes time and requires some trial and error.
Instead, you can use a combination of overflow, white space, and text-overflow to create a natural break in the text that is easy to read.
The example below sets a text width limit, hides the overflowing part, disables text wrapping, and adds an ellipsis (...) to indicate that there is more text for the users.
Example:

.product-description {
max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

9. Hovering effect delays in CSS

The:hover selector is a CSS pseudo-class that lets you add a hover effect to your page. However, by adding a transition element to postpone the hovering effect, you may make it much more stylish.
While it appears nice, it also gives the user's eyes a sense of movement, pulling their attention to the piece.
Example:

.entry h2 {
  font-size: 48px;
  color: #000000;
  font-weight: 750;
}

/* Next, add a delay to the hover effect */
.entry h2:hover{
  color: #f00;
  transition: all 0.5s ease;
}

10. How to reset CSS Styles

Last but not least, in order for your design to perform flawlessly across multiple browsers, you may need to modify all of the default styling attributes.
When you're trying to make your website look uniform across all browsers, each browser has its own style sheet with built-in default styles, which might be an issue.
Example:

vertical-allign:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
border:0;
margin:0;
padding:0;
outline:0;

I hope you enjoyed the CSS tricks we discussed and that they will help you make your page look better and coding life easier.😅
The below image is pure example how CSS works

Promises In JavaScript

Mian Azan — Sat, 12 Feb 2022 11:02:05 +0000

In JavaScript, promises are one of the techniques to deal with asynchronous actions. Many people have trouble understanding how Promises operate, so I'll try to define them as simply as possible in this post.
Because promises are such a broad topic,However, you'll discover an overview of Promises, as well as definitions of words like resolve, reject, and chaining, as well as a code example for constructing and using Promises.

What is Promise

In JavaScript, a promise is equivalent to a promise in real life. When we make a promise in real life, we are guaranteeing that we will follow through on it. Promises can only be made in the future, after all.
A promise has two outcomes: it will either be maintained or will not be kept when the time arrives.
This is also true in JavaScript for promises. When we define a promise in JavaScript, it will either be resolved or refused when the time arrives.

Promises In JavaScript

To begin with, a Promise is an object. The Promise object has three states:

Pending: Before the Promise succeeds or fails, it is in this state.
Resolved: Promise fulfilled
Rejected: Promises that were not kept

Working Of Promises Process

When we use a Promise to request data from the server, it will be in pending status until we receive our data.
The Promise will be resolved successfully if we are able to obtain the information from the server. However, if we do not receive the information, the Promise will be rejected.
If there are many requests, a new process will start once the first Promise is resolved (or rejected), to which we can link it directly using a mechanism called chaining.

What is Difference between Callbacks and Promises ?

The key difference between Callback Functions and Promises is that instead of providing a Promise, we attach a callback to it. So, with Promises, we still use callback functions, but in a different way (chaining).
This is one of the most compelling reasons to use Promises, but why?

What is Chaining ?

For many years, JavaScript has relied solely on callback functions to perform asynchronous actions. However, in other circumstances, Promises may be a superior choice.
If we try to use good-old Callbacks for many async actions, we'll quickly find ourselves in a predicament known as Callback hell:

firstRequest(function(response) {  
    secondRequest(response, function(nextResponse) {    
        thirdRequest(nextResponse, function(finalResponse) {     
            console.log('Final response: ' + finalResponse);    
        }, failureCallback);  
    }, failureCallback);
}, failureCallback);

However, because we can attach Callbacks instead of forwarding them, the same code above looks more clearer and easier to comprehend when we handle the same task with Promises:

firstRequest()
  .then(function(response) {
    return secondRequest(response);
}).then(function(nextResponse) {  
    return thirdRequest(nextResponse);
}).then(function(finalResponse) {  
    console.log('Final response: ' + finalResponse);
}).catch(failureCallback);

The code above demonstrates how many callbacks can be linked together. Chaining is one of Promises' finest features.

Creating and Using A Promise Step by Step

Firstly, we use a constructor to create a Promise object:

const myPromise = new Promise();

It takes two parameters, one for success (resolve) and one for fail (reject):

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

Finally, there will be a condition. If the condition is met, the Promise will be resolved, otherwise it will be rejected:

const myPromise = new Promise((resolve, reject) => {  
    let condition;  

    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

We have created our first Promise, Now we are going to use it.

then( ) for resolved Promises:

If you look at the image at the top of this page again, you'll notice that there are two cases: one for resolved promises and one for rejected promises. If the Promise is fulfilled (success case), then something will occur (depends on what we do with the successful Promise).

myPromise.then();

The then( ) method is called after the Promise is resolved. Then we can determine what to do with the resolved Promise.

For example, let’s log the message to the console that we got from the Promise:

myPromise.then((message) => {  
    console.log(message);
});

Catch for rejected Promises:

The then() method, on the other hand, is reserved for Promises that have been resolved. What if the Promise doesn't come true? The catch() method must then be used.

Similarly, we use the then() technique. We may also add the catch() method straight after then():

myPromise.then((message) => { 
    console.log(message);
}).catch((message) => { 
    console.log(message);
});

If the promise is rejected, it will be sent to the catch() method, which will display a different message on the console this time.

Conclusion

So that's how we make a JavaScript Promise and use it for resolved and rejected cases.
This post is merely an introduction to Promises, and I hope you found it useful in understanding what they are and how to utilise them.😅

JavaScript VS TypeScript

Mian Azan — Fri, 04 Feb 2022 15:18:35 +0000

JavaScript is the most widely used HTML and Web programming language. JavaScript is a lightweight, cross-platform object-based scripting language.It's used to make dynamic client-side pages. Scripts are programmes written in the JavaScript programming language.The scripts are embedded in HTML pages and run in the background when the page loads. It is delivered and executed as plain text, and no special preparation or compilation is required to run it.

History Of JavaScript

Brendan Eich, a programmer at Netscape Communications Corporation, created JavaScript. It was first released in September 1995 under the name Mocha.However, it was renamed JavaScript to reflect Netscape's use of Java within its browser as it increased in popularity as the greatest scripting language. Netscape submitted JavaScript to ECMA in November 1996. (European Computer Manufacturers Association). ECMAScript 2018, which was released in June 2018, is the most recent version of JavaScript.

TypeScript

TypeScript is an object-oriented programming language that is free and open-source. It's a superset of JavaScript that's highly typed and compiles to ordinary JavaScript. Microsoft created and maintains TypeScript under the Apache 2 licence. It is not a browser-based application. To compile and generate a JavaScript file, you'll need a compiler. The ".ts" extension refers to the TypeScript source file. By renaming any legitimate ".js" file to ".ts," we can use it. TypeScript is an ES6-based version of JavaScript with a few more capabilities.

History Of TypeScript

TypeScript was created by Anders Hejlsberg. It was originally made available to the general public on October 1, 2012. The new version of TypeScript 0.9 was published in 2013 after two years of internal development at Microsoft. TypeScript 3.4.5, which was released on April 24, 2019, is the most recent version.

Advantages of TypeScript Over JavaScript

During development, TypeScript always highlights errors at compilation time, whereas JavaScript highlights errors at runtime.
JavaScript does not support strongly typed or static typing, whereas TypeScript does.
Any browser or JavaScript engine can execute TypeScript.
IntelliSense, which provides active hints as the code is added, is a fantastic piece of tools.
By defining a module, it has a namespace idea.

DisAdvantages Of TypeScript Over JavaScript

The compilation of TypeScript code takes a lengthy time.
Abstract classes are not supported in TypeScript.
If we launch the TypeScript programme in the browser, we'll need to compile it first to convert it to JavaScript.

Some Important Things You must Know About Javascript And TypeScript

JavaScript

Modules are not supported in JavaScript.
It is a scripting language.
It was Developed by Netscape in 1995.
Strongly typed or static types are not supported.
Generics are not supported in JavaScript.
Optional Paremeters are not supported in Javascript.
Javascript directly runs on the browser.
Because it is an interpreted language, the errors are highlighted at runtime.
In Javascript numbers and string are objects.
Javascript source file is ."js extension".

Example

<script>
function addNumbers(a, b) {  
    return a + b;  
}  
var sum = addNumbers(15, 25);  
document.write('Sum of the numbers is: ' + sum);
</script>

TypeScript

Support is given for modules in TypeScript.
Object oriented concepts like classes,inheritance are supported in TypeScript.
It was developed by Anders Hejlsberg in 2012.
Strongly typed and static typing feature is supported in TypeScript.
TypeScript supports generics.
TypeScript supports optional paremeters.
TypeScript does not directly runs on browser.
It compiles the code and highlighted errors during the development time.
In this, number, string are the interface.
TypeScript source file is in ".ts" extension.

Example

function addNumbers(a, b) {  
    return a + b;  
}  
var sum = addNumbers(15, 25);  
console.log('Sum of the numbers is: ' + sum);