Author: ABAYTHON

How to determine the active HTML Element in Google Chrome

Active HTML Element : When the user clicks on a control such as Button, label or Textbox, then then focus is set on this control. For example, if the user has clicked on a button. Then the active HTML Element is the Button.

The active HTML Element can be determined by typing the command document.activeElement in the console after selecting the control of interest. Please see below image as an example.

How to jump in to the code in JavaScript sources from console

Let us see how to jump into the code in JavaScript sources from console by following the steps below

  1. Get the control instance in the console window ==> var control_instance = $($0)
  2. call the method name of the instance without the paranthesis. ==> control_instance.method
  3. It will print out the lines of code from the method ‘method’ of control_instance class.
  4. now double click on those lines of code. It will take us to the corresponding javascript file/code in the Sources tab of chrome developer ( Please see below picture )

3 Best Frontend Frameworks in 2023

What is a Frontend Framework?

Frontend Frameworks are pre-prepared JavaScript libraries with CSS and Bootstrap components that is used in development of web applications. It is a development platform for your front end. It has methods for building files, associating data with DOM elements, styling components and AJAX requests.

Frontend Framework include specific tools.

  • A grid which makes it easy to achieve the design features for your site.
  • Well-defined font styles.
  • Pre-built site components like buttons, navigation bars and side panels.

Now let us jump into the best frontend frameworks.

1.React framework:

React is a most popular frontend JavaScript library for building user interfaces. It is component-based and employs MVC architecture, with different table of presentation and data availability using JSX syntax. Facebook (Meta) developed and introduced in 2011. It became opensource library in 2013. Frontend specialists choose it to build large-scale web applications that use various data.

Key features:

Virtual DOM with one-way data binding.

User friendliness and comfortable learning makes it a good choice for beginners.

It is a right choice for interactive interface as React components are reusable.

Drawbacks:

Since React is not fully a framework, some essential features are not preserved and you need to rely on additional libraries like redux for complex applications.

Not suitable for developers who are not ready to work in JavaScript

React used by:

Netflix, Facebook, Instagram, Youtube, Walmart, eBay, LinkedIn etc.,


2. Angular framework:

Angular is a framework built with Typescript developed by Google. It is component-based framework for developing scalable web applications. Angular allows you to scale single-page web applications to enterprise level web applications.

Key features:

It is a full-scale framework.

Directives and dependencies injection functions.

Reduces time because important features such as two-way data binding are provided by default.

Drawbacks:

It is extremely difficult to learn.

Limited SEO capabilities

Angular used by:

Forbes, Xbox, Deutsche Bank, Santander, UPS, BMW etc.,

3. Vue.js framework

Vue is a modern, progressive MVVM framework that takes advantage of incremental adoption. It solves presentation layer problems and simplifies working with libraries.

Key features:

Progressiveness

Reactivity

Simplification

Availability

Fast development

Drawbacks:

Lack of plugins and language barriers

Relatively new and developed by private individuals

Limited community

Limited applicability for more extensive complex projects.

Vue.js used by:

Trivago, Gitlab, Grammarly, Adobe, Alibaba, Nintendo etc.,

Points to remember:

For complex projects – Angular

Smaller projects or prototype – Vue.js

For flexibility – React

Getting started with JSON in JavaScript

JSON is an acronym of JavaScript Object Notation. It is a storage format derived from JavaScript programming language and it is language independent.It is a text-based data format that is used to store and transfer data. It’s quite important to know while data which we fetch from external API are always in JSON format.

  • It can transport the data from server to client, client to server and server to server.
  • It can generate and store data from user input.
  • It can also build and verify data

JSON Syntax:

JSON objects are in a .json file which is quite similar to object literal syntax which consists of name, value pairs but the format is text only. Both the name and values are quoted in double quotation.

Points to remember:

  • Data is in name/value pair.
  • Curly braces hold objects.
  • Square brackets hold arrays.
  • Data is separated by commas.

If JSON objects are in .js or .html file then the syntax is

In terms of Syntax JSON is similar to JavaScript objects but the name in JavaScript objects are not in double quotes.

JSON Data:

JSON data is written as name and a value pairs. A name/value pair is like field name in double quotes followed by colon (:), then value.

JSON Objects:

As mentioned earlier JSON objects are in curly braces.

JSON Arrays:

JSON arrays are in square brackets.

Here ‘names’ is an array, and it contains 3 objects. Each object is a record of a person.

Accessing JSON Data:

JSON data can be accessed using dot (.) notation.

Output:
Anna
Mills

We can also use square brackets to access JSON data.

JSON vs JavaScript Objects:

JSONJavaScript Objects
The name in name/value pair should be in double quotesThe name can be without double quotes
JSON cannot contain functionsJavaScript objects can contain functions
JSON can be created and used by other programming languagesJavaScript objects can only be used in JavaScript.

Converting JSON to JavaScript Object:

You can convert JSON data to JavaScript object using in-built JSON.parse() function.

Output:

Converting JavaScript object to JSON:

You can convert JavaScript object to JSON using in-built JSON.stringify().

Output:

Keypoints to note:

  • JSON syntax is like Object literal where both name-value pair is in inverted commas.
  • JSON.stringify() Object to JSON
  • JSON.parse() JSON to Object

6 Big data trends in 2023

Knowing the latest trends in Big data can help you in making better business decisions and develop customer experience. Data is one of the most valuable asset for business.

  1. Revolution of DaaS (Data as a Service)
  2. Boom in Cloud migration
  3. Cloud-native solution is a must-have.
  4. Rise of Machine Learning.
  5. Rise of Edge Computing.
  6. Data Lakes

IaaS vs PaaS vs SaaS : Difference in cloud service model

Before getting into the difference, first we need to know what cloud service models is.

What is cloud service model?

Based on the level of flexibility, control and management you need, you can decide on the cloud service model. There are three types of cloud service models.

  • Infrastructure as a Service (IaaS)
  • Platform as a Service (PaaS)
  • Software as a Service (SaaS)

On-premises Software:

On-premises Software are services that are deployed and managed on a hardware at an organizations building or own premises. These require you to buy a software license so you can install and use it on your own premises. Popular examples include Microsoft or Adobe products.

Cloud-based Services:

For cloud based services we use pay as you go model. So you don’t need to buy the whole software. You only need to pay for what you use. Based on your demand, flexibility and control you can choose between three models.

IaaS ( Infrastructure as a Service) model

It is also known as HaaS ( Hardware as a Service). Here the computing environment is managed over the internet. The user don’t have buy and manage physical servers. User have control over the data infrastructure. Scalable for complex projects.

Advantages:

  • Easily scalable : Scaled up or down according to the needs.
  • Lower costs
  • Faster time to market

Disadvantages:

  • You are in charge of the data. So anything lost you have to find a way to recover it.
  • IaaS provides servers and APIs. You have to configure everything else.

PaaS (Platform as a Service)

PaaS is a scaled-down version of IaaS. It lets developers built custom applications online without having to deal with data servers, storage and management. SaaS applications are built on PaaS platforms. It is the ultimate solution for web applications.

Advantages:

  • PaaS tools are very easy to use.
  • Offers developers freedom to focus on application design without thinking about underlying operating system or infrastructure.

Disadvantages:

  • You have control over the code of the app and not the infrastructure behind it.
  • Limitations in customization.
  • PaaS provider stores your data which is a security risk for app user’s data.

SaaS ( Software as a Service)

Most common service model. It doesn’t require download or installation and is easily available over the internet via subscription basis.

Advantages:

  • Simple login services.
  • Don’t have to manage or upgrade software.

Disadvantages:

  • You have no control over the cloud based infrastructure.
  • May be incompatible with other tools already in use at your business.
  • Security may be questionable as provider manages and you don’t know whether data is exposed.

Examples of IaaS, PaaS, SaaS:

Key Points to remember in cloud service models:

IaaSPaaSSaaS
Provider managesInfrastructure( network, virtualization, hardware )Infrastructure and PlatformInfrastructure, platform and software
You managePlatform( OS, middleware, runtime ) and software( data and apps )SoftwareYou manage nothing. Just use the software