DEV Community: Veeresh

Web Components: A Revolutionary Way to Build User Interfaces

Veeresh — Sat, 04 Jun 2022 15:24:10 +0000

Previously, coding frontend applications was more cluttered and there wasn't any modular approach to separating certain functionality from the rest of the code. Web components will allow developers to create reusable custom elements that can be used throughout their web applications. This will lead to a more modular approach to web development, making it easier to read, build and maintain complex web applications.

Though we got external libraries/frameworks like react and angular which will ease our work, why do we need Web Components?

Web components are standards-based. This means that they will be supported by all major browsers in the future. Check the current compatibility here at Can I Use Web Components
Web components are self-contained. This means that they are easy to reuse and easy to maintain.
Web components are easy to use. You don't need to learn a new library or framework to use them.
Additionally, these are compatible with any framework. Write once use anywhere.

Creating a web component is simple. All you need is a basic understanding of HTML, CSS, and JavaScript. In this tutorial, we'll walk through a few of the basic standards of understanding and creating web components.

Let's get started (Introduction)
Custom Elements
Shadow DOM
HTML Templates
Slots
HTML Imports
1. Deprecation of HTML Imports
Conclusion

Let's get started (Introduction):

Web components are a set of W3C standards that allow developers to create reusable components for the web. By using web components, you can keep your code clean and maintainable, and create custom elements that can be used in any web page or web application. The four main standards are:

Custom Elements: Allows developers to create their own HTML tags.
Shadow DOM: Gives developers the ability to encapsulate DOM and CSS in a web component so that it is isolated from the rest of the document.
HTML Templates: Allows developers to create reusable HTML templates.
HTML Imports ( Deprecated ): Allows developers to import HTML documents into other HTML documents.

Custom Elements:

The main need for custom elements is to provide a way for developers to create their own HTML tags. This is important because it allows developers to extend the HTML vocabulary, making it more expressive and powerful. Additionally, custom elements can help create more semantically meaningful markup, and they can make code more maintainable by encapsulating complex functionality into a single, reusable component. You could create custom elements like , etc.

There are two types of Custom Elements:

Autonomous Custom Elements are custom elements that are not based on any existing HTML element. They are created from scratch and can extend any other custom element or standard HTML element ( generally HTMLElement class ).
Customized Built-in Elements are custom elements that are based on existing HTML elements. They extend the functionality of the built-in element and can be used to customize the behavior or appearance of that element.

In this tutorial, we will discuss Autonomous Custom Element. Creating a Autonomous Custom Element is simple. All you need to do is create a JavaScript class that extends HTMLElement. This class can then be registered with the browser as a custom element. This class can have many methods which are discussed below.

Once you have your class created, you need to register it with the browser as a custom element. This is done using the customElements.define() method. This method takes two arguments: the name of the custom element, and the class that represents the custom element.

After your custom element is registered, you can use it just like any other HTML element. That's all there is to it!

Here's the schema of a simple custom element, where every method is optional :

Note : custom element name should contain -(hyphen) to ensure their wont be any conflicts between custom elements and normal HTML elements.

class MyElement extends HTMLElement {
  constructor() { super(); /* ... */ }
  connectedCallback() { /* ... */ }
  disconnectedCallback() { /* ... */ }
  static get observedAttributes() { return [/* ... */]; }
  attributeChangedCallback(name, oldValue, newValue) { /* ... */ }
  adoptedCallback() { /* ... */ }
}

customElements.define('my-element', MyElement);

Functionalities of Above Methods :

connectedCallback : browser calls this method when the element is added to the document (can be called many times if an element is repeatedly added/removed)

disconnectedCallback : browser calls this method when the element is removed from the document

static get observedAttributes : returns array of attribute names to monitor for changes

attributeChangedCallback : called when one of attributes listed above in observedAttributes method is modified

adoptedCallback : called when the element is moved to a new document happens in document.adoptNode, very rarely used)

Now, lets take an example to create a greeting element

class Greeting extends HTMLElement {
  constructor() { super(); }
  connectedCallback() { 
    this.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
 }
}

customElements.define('greet-element', Greeting);

And that's all there is to it! You've now created a reusable web component that can be used anywhere on your web page.

<greet-element name="Arjun"></greet-element>

This is how the output looks like :

Shadow DOM :

Have you ever wondered how the browser handles complexity behind elements like input tag, select tag etc. The browser uses DOM/CSS to draw elements on the page. This DOM structure is normally hidden from us, but we can see it in developer tools. For example, in Chrome, we need to enable the "Show user agent shadow DOM" option in Dev Tools.

This is how it looks when you enable that option and inspect the input element : What you see under #shadow-root (user-agent) is called shadow DOM. Elements like input and select implement built-in shadow dom. We cant get built-in shadow DOM elements by regular JavaScript calls or selectors.

This Shadow DOM will be completely isolated from Lighter DOM ( normal DOM). Has its own ids space, styles and is invisible to outer document (lighter dom selectors).

Creating Shadow DOM is simple . First create a simple DOM element elem and then attach shadom dom using the syntax shadowRoot = elem.attachShadow({mode: open|closed}). If mode="open", then its accessible as elem.shadowRoot property. If mode="closed", then elem.shadowRoot will be null. We can now populate this shadowRoot element using methods like innerHTML or any other DOM methods.

Custom Elements can use Shadow DOM to encapsulate component internals and apply component-local styles. Lets see an example using shadow dom for the above custom element greet-element example :

class Greeting extends HTMLElement {
  constructor() { super(); }
  connectedCallback() { 
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
 }
}

customElements.define('greet-element', Greeting);

Now you can use this greet-element in HTML as follows

<greet-element name="Arjun"></greet-element>

This is how the output looks like :

HTML Templates :

HTML templates are very powerful and useful when it comes to creating websites or web applications. They provide a great way to structure and organize your code, making it more readable and maintainable. And with the help of slots, you can further customize the behavior and appearance of your template.

we can write Templates using <template> tag, where the content can be any syntactically correct HTML. We can also put styles and scripts into <template>. The browser considers template content as out of document, due to which styles, scripts or any other content is not run until we attach template to some element of DOM.

The content of the template is available as a DocumentFragment in its content property. This is a special type of DOM node that can be treated like any other DOM node, except for one special property: when it is inserted somewhere, its children are inserted instead. For example consider the following code :

<template id="templateExample">
  <script>
    alert("Hello");
  </script>
  <style>
    .greet {
      color: red;
    }
  </style>
  <div class="greet">Hello, world!</div>
</template>
<div id="output"></div>

<script>
   // Clone the template content to reuse it multiple times
   output.append(templateExample.content.cloneNode(true));
   // Now the script and styles from <template> runs
</script>

Output looks like :

Slots

Slots are like placeholder elements in a template that can be filled with different content. This flexibility gives you a lot of control over how your template is rendered. For example, you can use slots to create different versions of a template for different screen sizes. Or you can use them to change the order in which template elements are rendered.

There are two types of slots: named slots and unnamed slots.

Named slots are used to specify a particular slot that you want to fill with content. <slot name="X">...</slot> gets children with slot="X".
Unnamed slots, on the other hand, are used when you don't need to specifically target a particular slot ( or you want all the remaining content to take this spot )

Slots are better used when combined with remaining Web Components, so let's combine all the above concepts (custom elements, shadow DOM, templates) and write a simple usage of slot

<template id="greetTemplate">
  <style>
  .greet{
    color:red;
  }
  </style>
  <div class="greet">Hello, <slot name="user-name">World!</slot></div> <!-- #(1) -->
  <div>
    Remaining Content : <slot></slot> <!-- #(2) -->
  </div>
</template>

<greet-element>
  <span slot="user-name">Veeresh</span>
  Some Remaining Content,<b> More content </b>
</greet-element>


class Greeting extends HTMLElement {
  constructor() { super(); }
  connectedCallback() { 
    const shadow = this.attachShadow({mode: 'open'});
    const template = document
        .getElementById('greetTemplate')
        .content;
    shadow.append(template.cloneNode(true));
 }
}

customElements.define('greet-element', Greeting);

You can see 2 types of slots being used here ( refer to #1, #2 comments in HTML code). The first slot takes user-name, if you dont get user-name from custom element, it uses world! as default text. The second slot is the default slot ( i.e without a name ), which consumes all the remaining children. If there exists multiple default slots, only the first one is considered and all subsequent unnamed slots are ignored.

Output :

From the above output you can see that the slots are still at same position and haven't moved to shadow DOM, but still it renders on the browser DOM. This process of rendering slotted elements inside their slots is called composition. The result is called a flattened DOM.

HTML Imports :

You know importing JS modules or CSS files right? How about importing HTML files? There comes HTML Imports. HTML Imports is a feature of the Web Components specification that allows you to include HTML documents inside other HTML documents.

This is useful for creating reusable components that can be used across your website or web application. For example, you could create a component that contains a navigation menu, and then use the HTML Import to include that component on every page of your website.

HTML Imports are also useful for loading external resources, such as CSS stylesheets or JavaScript libraries, that are required by your web components.

Including an HTML Import is similar to using the <link> element to load a CSS stylesheet, or the <script> element to load a JavaScript file.

To include an HTML Import, you use the <link> element with a rel attribute value of "import":

<link rel="import" href="/path/to/import.html">

The href attribute value is the URL of the HTML document that you want to import.

Once an HTML Import is included in a document, the browser will fetch the imported document and process it.

If the imported document contains any <link> or <script> elements, those resources will also be loaded and processed.

When the imported document is processed, any elements will be processed and the contents will be added to the main document. Any <script> elements will be executed.

After the HTML Import is processed, the resulting document will be updated to reflect any changes that were made.

HTML Imports are a powerful way to create reusable components and load external resources. Though they are deprecated, you can still use them by including a polyfill for it.

Deprecation of HTML Imports

HTML Imports was really an exciting feature and it makes the web development truly modular. But most of the browsers rejected it. The common reason is HTML Imports were redundant, as you still need JavaScript to make the stuff run.

But there exists a successor to this deprecated HTML Imports, that is HTML Modules. HTML Modules are the new proposal for importing HTML files into a document. To know more about the proposal please have a loot at this HTML Modules Explainer

Conclusion :

I hope you got to know the basics of Web Components and various concepts like Custom Elements, Shadow DOMs, Templates, Slots, HTML Imports, HTML Modules, etc. This is just a tip on top of an iceberg. To know more about the concepts please find the below references on each topic.

Custom Elements, Shadow DOM,Templates and Slots,HTML Modules Explainer .

Also, check out the support of Web Components by different browsers here at Can I Use Web Components.

There also exist a few libraries that make developing web components easier, a few of the leading and my favorite libraries are Lit and Stencil.

You are awesome, you came this long. If you do like this post please let me know.

In the mist of the Big Data Hype, Let’s Discuss MySQL

Veeresh — Mon, 20 Sep 2021 07:57:56 +0000

Hey all 👋,

Hope you all doing great and today we gonna discuss few MySQL topics that are often ignored or say it advanced.

To whom this blog is intended for? Absolute beginners? Intermediates ? To say it is intended for someone between beginner to Intermediate level, A Basic SQL knowledge is sufficient to understand.

Lets get started 🚀🚀

CASE Statements

These are similar to if-else statements, The CASE statement goes through a list of conditions and returns the result corresponding to first condition that is true. If none of conditions are met it returns the result from else statement.

Syntax

CASE
    WHEN condition1 THEN result1
    WHEN condition2 THEN result2
    WHEN conditionN THEN resultN
    ELSE result
END;

Example

SELECT
(CASE
   WHEN follower_count >= 100 THEN "Celebrity"
   ELSE "Poor Regular User"
END) as "User Type"
FROM user_table

/* No Celebrities are harmed in making of this code */

The above statement returns the user type based on his follower count. If it is more than 100 followers then returns "Celebrity" else returns as "Poor Regular User"

IFNULL

This function takes 2 Arguments, if the first argument is NULL, it returns second argument.

Usually used to replace a NULL value with a default value while displaying the data.

Syntax

IFNULL( column_name, alternate_value )

Example

SELECT IFNULL (amount,0) FROM user_table

If value from amount column is null then 0 is returned in place of null value

COALESCE

This function takes 2 or more arguments and It works similar to IFNULL, but returns the first Non NULL argument among the list of arguments, if every argument is NULL then it returns NULL.

Syntax

COALESCE(argument_1, argument_2...., argument_n)

Example

SELECT COALESCE(phonenumber_1, phonenumber_2, phone number_3) FROM user_table

If phone number 1 is null then it checks for phone number 2, even if it is null then it returns phone number 3

Stored Procedure

A stored procedure is a group of SQL statements that has been created and stored in the database.

It accepts input parameters so that only one procedure can be used on the network by multiple clients using different input data.

Syntax

--For creating procedure
DELIMITER &&
CREATE PROCEDURE procedure_name ([[IN | OUT | INOUT] Parameter_name datatype ]... )
BEGIN
   sql_statements...
END &&
DELIMITER ;
-- The delimiter is used to differentiate between the end of the procedure and the sql statements.

For executing procedure
CALL procedure_name ( arguments... );

Example

--Creating getvalues procedure which prints out data in users_table when called
DELIMITER &&
CREATE PROCEDURE getvalues ()
BEGIN
  SELECT * from users_table; 
END&&
DELIMITER;

-- calling procedure
CALL getvalues();

Window Functions (Available only for MySQL 8 +)

Window functions perform calculations on a set of rows that are related together. These related rows are termed as windows.

They Do not merge the rows like GROUP BY, they preserve the existing data.

Mainly there are 3 Categories of window functions.

Aggregate Window Functions

SUM(), MAX(), MIN(), AVG(). COUNT()
Ranking Window Functions

RANK(), DENSE_RANK(), ROW_NUMBER(), NTILE()
Value Window Functions

LAG(), LEAD(), FIRST_VALUE(), LAST_VALUE()

Syntax

window_function ([column1....]) OVER ([ PARTITION BY partition_list ] [ ORDER BY order_list])
-- [] = contents inside square brackets are optional

RANK

This function will assign rank to each row within a partition, if there is a tie between the values then they will be assigned same rank and the next rank will be ( previous rank + no of previous duplicates )

Example rank sequence : 1 2 2 4 5 5 7

Example :

First, lets see what's there in the table

SELECT * FROM student

Now lets execute the RANK query

SELECT *, RANK() OVER (ORDER BY marks DESC) as "Rank" from student

You can now see the result is sorted and every person is given a rank value, though the rank is not continuous at row with name vikram

DENSE_RANK

Did you notice discontinuity in rank values when using RANK? Dense Rank does the same thing as RANK but with no discontinuity in rank values.

Considering the same above example, lets execute dense query and see the result

select *, DENSE_RANK() OVER (ORDER BY marks DESC) as "Dense Rank" from student

You can now observe no discontinuity of rank values at row with name as vikram

ROW_NUMBER

This function is used to give sequential number for each row within its partition.

Lets have a look at the table data before executing the ROW_NUMBER query

SELECT * FROM student

You can see students from different departments, using ROW_NUMBER function we can assign each row a sequential number starting from 1 based on department( dept ) he is from.

SELECT *, ROW_NUMBER() OVER(PARTITION BY dept) AS "row number" FROM student;

You can observe each row of a particular department is given a sequential row number, this is what ROW_NUMBER function can do.

Good Bye👋

That's it for the blog, these are my 2 cents about some tricky SQL concepts. For more information on concepts, you can refer to javapoint

I hope you got to learn something new and will be able to do better with MySQL. If there are any further questions please feel free to ask.

Functors! Not functions

Veeresh — Sun, 11 Jul 2021 22:37:44 +0000

This is the topic that sounds scary on listening but once you understand the internal meaning, its as easy as an ice cake.

In simple words, its a fancy way of saying 'overloading () operator' as Functors or simply 'using objects as functions' . If you don't know what operator overloading is, don't worry we will go through it. If you already know what operator overloading is, skip to Functors .

Operator Overloading in C++

Just like you add two numbers you can add 2 objects using this concept. It is simply overloading a operator to work with our user defined objects rather than just predefined objects.

int a=5,b=3,c=a+b;
myObject objA(10);
myObject objB(20);
myObject objC=objA+objB;

Here as you add 2 integers to c, you are adding 2 object values and storing it in ObjC. If you directly compile the above code, that will give you an error, as we cannot add two objects directly. This is where we use + operator overloading concept to achieve such a operation. This is done by writing an operator function as the below syntax

return_type operator op(parameters){
    statements;
    ....
}

op can be any operator you wish to overload. Example + ,-,* etc., there are few exceptions for operators that can be overloaded.

These are few operators which you cannot overload. . Member access or dot operator,? : Ternary or conditional operator,:: Scope resolution operator,.* Pointer to member operator,sizeof The object size operator,typeid Object type operator.

Below is the class definition for implementing + operator overloading along with some additional code.

class myObject{
    private:
        int _value;
    public:
        myObject(){}
        myObject(int a){
            _value=a;
        }
// +(plus) operator overloading
    myObject operator +(myObject obj){
        myObject temp;
        temp._value=_value+obj._value;
        return temp;
    }

// function to print present value
    void print(){
        cout<<"value: "<<_value<<endl;
    }
};
int main(){
    myObject objA(10);
    myObject objB(20);
    myObject objC=objA+objB; //3rd line in main function
    objC.print(); //prints : value: 30
}

In the third line of main function, what myObject class does is, first it detects objA is trying to overload + operator, then once after detecting it sends objB as a parameter to objA's operator overloading function. Here in the function it creates a temporary temp object of same class and assigns value by adding values of both current object value_value and value in objB by obj._value.It then returns this temp object, this returned object is assigned to objC. This is how objC gets its value.

On printing the value of objC by using objC.print() function we get output as value: 30 which indicates _value variable in objC is being assgined.

This is how operator overloading is performed in c++ and this is how you can add value(or meaning) to specific operator when used with user defined objects.

Now lets go exploring what functors are,

Functors

Functors concept is nothting but making objects act like functions.

myObject obj(10);
cout<<obj(2); //this will output 20, here you are trying to multiply obj value by 2

In the second line, the object obj is acting like function, this is achieved by the concept Functors. Here this function mutiplies the value of object obj 10 by given parameter value 2 and returns the multiplied value 20.

This is achieved by overloading () operator. Below is the class definition that implements this operator overloading.

class myObject{
    private:
        int _value;
    public:
        myObject(){}
        myObject(int a){
            _value=a;
        }
    int operator ()(int value){
        return _value*value;
    }
};

As in above class definition, everytime an object is called as a function, it returns the value of object _value multiplied by passed parameter. Complete code of above implementation :

#include <iostream>
using namespace std;

class myObject{
    private:
        int _value;
    public:
        myObject(){}
        myObject(int a){
            _value=a;
        }
    int operator ()(int value){
        return _value*value;
    }
};
int main(){
    myObject obj(10);
    cout<<obj(4); //prints : 40
}

Use case for functors than just using functions could be, for suppose you are declaring an object with a value, so this value is preserved inside that object acting as a state, and every time you execute a functor(i.e, every time you call object as a function) you make changes to the existing state and you are not just excuting a function( as functions don't maintain a state ).

So in the above code you are multiplying the number 4 to the value 10. Here the value 10 is not hardcoded, its the state maintained by object obj.I could create another object with another state value and I can apply any changes to the value. Here I am applying changes to the state of an object not an hardcoded value, this is where functors are useful.

CONCLUSION :

FUNCTORS ARE THE OBJECTS WHICH COULD BE USED LIKE A FUNCTION

Thank you for spending your time reading my content. It means a lot to me.I like reading and listening to your comments. Your feedback motivates me to write more and more posts, please take a moment to leave your feedback ❤.

Native sensors that can be used within the web by default

Veeresh — Tue, 08 Jun 2021 04:05:42 +0000

Final result preview:

github link for the code given at end

Introduction :

Now a days every smart device comes with few integrated sensors within them, which we can use them by writing specific native code. Isn't it hard when you want to write different native code for different devices, as Apple sensor integration could be different from Android and Android could be different from laptops. Here comes the use of Generic sensor API for web, which abstracts the internal work and gives us an API to work with sensors present in devices. Using this you can use sensors of all devices that has browser support( check the caniuse site for which browsers support this API. ).It is most useful when you want to use specific sensors and don't want to complicate the implementation by writing different native codes for different platforms.

In this section I will discuss about few sensors that are supported by Generic Sensor API and there implementation.
Before directly going into knowing how to use certain sensor, I will go through high level overview or workflow of using a sensor.

Workflow :

Sensors :

The term device sensor refers to a device’s underlying physical sensor instance. Each sensor reading is composed of the values of the physical quantity measured by the device sensor at time tn which is called the reading timestamp.
Here is the interface of a sensor ( these denotes the available methods to deal with sensor and its data. ).

[SecureContext, Exposed=(DedicatedWorker, Window)]
interface Sensor : EventTarget {
  readonly attribute boolean activated;
  readonly attribute boolean hasReading;
  readonly attribute DOMHighResTimeStamp? timestamp;
  void start();
  void stop();
  attribute EventHandler onreading;
  attribute EventHandler onactivate;
  attribute EventHandler onerror;
};

dictionary SensorOptions {
  double frequency;
};

So there is a frequency option which needs to be set by user before initializing a sensor. Few other methods like onreading, onacivate, onerror are used to access data and handle errors. Go through sensor-interface if you want to know more about it.

Few of the available generic sensors include :

ambient-light
accelerometer
linear-acceleration
gravity
gyroscope
magnetometer
uncalibrated-magnetometer
absolute-orientation
relative-orientation
geolocation
proximity

Usage

Let us consider using accelerometer sensor for this demonstration (any sensor can be used in place of accelerometer).

Check if your browser supports Generic API :

if('Accelerometer' in window){
//code to be written if Accelerometer interface is supported by the browser.
}else{
//Your browser doesn't support sensors.
}

Here we will not worry if 'Accelerometer' interface is not supported by browser. However we can use pollyfill in this case. Using pollyfill you can import only relevant sensors and work with it . To know more about working with polyfill read sensor-polyfill.

Permissions

navigator.permissions.query({ name: "accelerometer" }).then(result => {
    if (result.state != 'granted') {
        setGameText("Sorry, we're not allowed to access sensors on your device. ");
        return;
    }
}).catch(err => {
    console.log("Integration with Permissions API is not enabled");
});

Currently there isnt any api to request for permission for generic sensors like accelerometer. If you wish to ask for other sensors like geoloaction there is method to request permission :

const permissionsToRequest = {
  permissions: ["geolocation", "storage"]
}
browser.permissions.request(permissionsToRequest)
    .then(onResponse)
    .then((currentPermissions) => {
    console.log(`Current permissions:`, currentPermissions);
});

List of all keywords that can be used with permission api are present here at API Permissions .

Reading data

let acl = new Accelerometer({frequency: 30});
acl.addEventListener('activate', () => console.log('Ready to measure.'));
acl.addEventListener('error', error => console.log(`Error: ${error.name}`));
acl.addEventListener('reading', () => {
    console.log("Sensor values are : ");
    console.log("X: "+acl.x+" Y: "+acl.y+" Z: "+acl.z);
});
acl.start();

You can change the frequency as you wish, but you are not guaranteed with same frequency as all the device sensors doesn't support given frequency.

So here's the end , Now you are able to read the data from the generic sensor on the web. Below is the complete code combining all three methods above and you can refer to the generic sensor to learn more about it.

if ("Accelerometer" in window) {
  navigator.permissions
    .query({ name: "accelerometer" })
    .then((result) => {
      if (result.state != "granted") {
        console.log(
          "Sorry, we're not allowed to access sensors on your device. "
        );
        return;
      }

      let acl = new Accelerometer({ frequency: 60 });
      acl.addEventListener("activate", () => console.log("Ready to measure."));
      acl.addEventListener("error", (error) =>
        console.log(`Error: ${error.name}`)
      );
      acl.addEventListener("reading", () => {
        console.log("Sensor values are : ");
        console.log("X: " + acl.x + " Y: " + acl.y + " Z: " + acl.z);
      });
      acl.start();
    })
    .catch((err) => {
      console.log("Integration with Permissions API is not enabled");
    });
} else {
  console.log("Your browser doesn't support sensors.");
}

For Live Implementation you can visit this site : https://accelerometer-demo.netlify.app

Code of this implementation is at : https://github.com/veerreshr/accelerometer-demo/

If you enjoyed the post, consider responding to the article with your feedback. ❤

A Refresher on Encapsulation and Abstraction in OOPs

Veeresh — Tue, 19 Jan 2021 12:18:45 +0000

Computer Science students, programmers and newbies to Object Oriented Programming(OOPs) are always confused with two terms : Encapsulation and Abstraction. Usually when someone says that encapsulation is a type of abstraction, it creates more confusion. Coming across terms like Encapsulation and Abstraction in Object Oriented Programming is very stressful to those who are just starting out. The jargon that is used for the concepts of Encapsulation and Abstraction is confusing because it does not mean the same thing to any given person. Today we are going to understand these jargons in OOPs.

Let us first look at their definitions,

Abstraction is the method of hiding the unwanted information.

Encapsulation involves combining data and functions in a single unit (called as a class) and restricts access to data by any object of the unit. This functionality caused by data restriction makes encapsulation also called data hiding.

For a common man, it sounds like the same thing as hiding data. For a programmer its different as implementation and information hiding. Let's consider a typical example to figure this out. Let's say we use an Android phone, each mobile contains screen, camera, battery, etc., but the implementation of this functionality of phones can be different. Like one phone will be having an 108 MP camera and the other will be having a 12 MP camera. Here, the end user only knows about the cameras (abstract method or function) and not the way they are implemented internally for each device. This is referred to as abstraction. In the abstraction we know the high level knowledge about system.
Now about Encapsulation, consider a situation where you have 2 departments for your organization (sales, product). At some point and for some reason the product team wants to know about the sales of a product. Here the product team can't access the data of sales directly (as its restricted only for sales team access). First the product team needs to contact some sales officer and request him to get data they needs. This is what encapsulation meant, here sales team comprises of data along with some officers(methods) who help other team people access data by getting in contact with them. So sales team data is only accessible by sales team persons, if some one apart from sales team wants to get the data, they contact sales officer (function or method) of sales team(class) and they can't access directly without help of sales team officer.

In short,
These two things differ from each other from the perspective you see:

Abstraction is providing generalization (all the features are same for all devices, but their implementation is different) and hiding their implementation.

Encapsulation is hiding of internal data from outsiders (hiding of all internal functionality of the code or APK).

Abstarction is Implementation hiding.

Encapsulation is Information hiding.

Abstraction can be viewed as high level view of logic.

Encapsulation also implements abstraction, as it restricts the data from others.

Still confused ? Lets understand with code

class maths
{
private:
  int a, b;
public:
  maths (int x = 0, int y = 0)
  {
    a = x;
    b = y;
  }
  int getA(){
   return a;
  }
  int getB(){
   return b;
  }
  void set(int x, int y){
    a = x;
    b = y;
  }
  int add ()
  {
    return a + b;
  }
};

Internal representation of any object of maths class is hidden outside the class. That is the variables a and b can not be accessed directly by other class objects. These variables are restricted to only maths class objects, if some other class object wants to access the variables a,b they need to contact some maths class object and get data through them. This restriction of data is called Encapsulation.

Variables a and b are made private so that these can only be manipulated by set method, which is only accessible to objects of maths class. This binding of data and methods together is also called as encapsulation.

Now lets talk about abstraction,

int main ()
{
  maths math_object = new maths(1, 2);
  int sum = math_object.add(); //add function is abstracted
  cout << sum;
}

Here, the implementation of the add function is known as Abstraction. Because, we know the necessary details (add function) that we need and we don't know the unnecessary detail (internal working of add function) for performing a particular action (adding two numbers). This masking of the implementation of the addition functionality (unwanted information) is referred to as Abstraction.

Here is a table to represent the differences

source of the table : differencebetween.net
If you found this article useful, please leave your suggestions here❤.

SEO Tags | Meta tags that you need for previews on social networks.

Veeresh — Thu, 14 Jan 2021 20:18:58 +0000

To begin with, what are meta tags?

Meta tags provide information about the web page in the HTML of the document. This information is called "metadata" and while it is not displayed on the page itself, it can be read by search engines and web bots

I will now show you how you might give an overview of your application when you share it on social media. That is, adding a preview for your app.
Something like this :

For a web bot to understand your application, this is the basic code you are supposed to add.



<title>Your Page Title</title>
<meta name="title" content="Your Page Title">
<meta name="description" content="Your Page Description">

But wait, it's not enough for every app to be able to read your web page and so it can give an appropriate preview of your app.

In order to get a proper preview from Facebook, Instagram, WhatsApp, LinkedIn like apps, you are supposed to add specific meta tags which are required by these crawlers. These tags are called Open Graph tags by Facebook, By which facebook related apps keep control of your app data.



<!-- Open Graph  -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourpage.com/">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" itemprop="image" content="https://yourimagepath.jpg">

! important
You need to add itemprop="image" attribute to og:image tag
In order to display the image in the preview of Whatsapp. Also, be sure to keep your preview image below 300 KB.

If you would like to use Facebook Insights, you need to add the app ID to your page. Insights gives you the ability to view traffic statistics on your site from Facebook. You can do so by adding the tag below.



<!-- Replace 123456789123456 with your app id --!>
<meta property=fb:app_id content=123456789123456>

You are needed to create Facebook developer account in order to get app id. Then, You are supposed to create an app and link your webpage there. Refer this link in order to get your app id : app id

Now coming to Twitter, below are the tags you need to add in order for Twitter to show a preview of your app when shared.



<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://yourpage.com/">
<meta property="twitter:title" content="Your Page Title">
<meta property="twitter:description" content="Your Page Description">
<meta property="twitter:image" content="https://yourimagepath.jpg">

Similar to Facebook insights, Twitter has its own Twitter Analytics which requires the below tag, where you are supposed to enter your Twitter username



<meta name="twitter:site" content="@twitter-username">

After all these changes you may find that you are not able to see your changes, That's because your cache is not cleared from your social media pages i.e., your webpages are not yet crawled by bots after your changes. In order to make them crawl use these :

In order to reflect the changes to Facebook, Instagram, WhatsApp, just go to this link and enter your website URL and scrape it again. This site also lets you check which meta tags you can add in order to enhance.
For twitter just go to Twitter Validator and enter your URL and click on preview card. Now twitter fetches new changes and updates its caches.
LinkedIn provides Post Inspector that deletes the preview cache. Simply debug the cached URL here.

Complete code



<!-- Primary Meta Tags -->
<title>Your Page Title</title>
<meta name="title" content="Your Page Title">
<meta name="description" content="Your Page Description">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourpage.com/">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" itemprop="image" content="https://yourimagepath.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://yourpage.com/">
<meta property="twitter:title" content="Your Page Title">
<meta property="twitter:description" content="Your Page Description">
<meta property="twitter:image" content="https://yourimagepath.jpg">

<!-- For Facebook Insights --!>
<meta property=fb:app_id content=123456789123456>

<!-- For Twitter Analytics --!>
<meta name="twitter:site" content="@twitter-username">

Thanks for making it this far 🙏. If this helped you in any way, please drop a like.

Qute Bot GitHub Action

Veeresh — Tue, 15 Sep 2020 19:03:30 +0000

Its a Telegram bot action which sends inspiring quotes daily morning

My Workflow : Qute Bot

Submission Category: Wacky Wildcards

Yaml File or Link to Code

veerreshr / quteBot

A Github Action which fires a Inspirational quote in telegram every day at 8:00 AM IST

QuteBot

Telegram bot which messages inspiring quotes at 8am in Indian time, works based on github action

View :

View on GitHub

Deploy react app to GitHub pages with and without a custom domain

Veeresh — Sun, 16 Aug 2020 10:26:09 +0000

Want to deploy your react app for free?
If yes, then gh-pages from Github is your free tool for deployment

Let's get started!

Here are simple steps we will be going through

Install gh-pages as a dev dependency
few changes to package.json in your code
deployment
Adding a custom domain

STEP 1

npm install gh-pages --save-dev

This will save gh-pages dependency as a dev dependency

STEP 2

"homepage" : "http://{github-user-name}.github.io/{github-repository-name}"
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Paste the above code inside of your package.json.Remember to paste script predeploy and deploy as extra scripts to existing scripts and don't override your previous scripts

STEP 3

npm run deploy

Run the above command in terminal. Now your app is live on GitHub pages. It's available at homepage URL you specified above(http://{github-user-name}.github.io/{github-repository-name})

Yes, it's live now. But sometimes you won't be able to see your output (maybe due to some GitHub glitches), All you need to do is go to your GitHub repo settings and search for Github pages in it

Then click on choose a theme and select a random theme from themes page

Now your site will be live, I don't know why it's working but it worked 😂

STEP 4 : Adding custom domain

Search for GitHub pages in repo settings and enter your domain name inside of custom domain input field(format must be www .domain.com or domain.com only)

This will create a CNAME file in the root of your project publishing source. This file contains the domain name you entered
Configure DNS Records, You just need to set A and CNAME records in your domain name registrar(like GoDaddy, Namecheap etc).
Setting up A record

A record stands for an address record, it connects your domain name to the actual IP addresses where your site resides on a server

Now set the following IP's for A records as value and host(or name) as @ symbol

185.199.108.153
185.199.109.153
185.199.110.153 
185.199.111.153

setting up CNAME Record what is CNAME record? click here Add cname record with name www, type cname,ttl hour or less, data field with URL of your GitHub deployed page domain ending with dot

{username}.github.io/{repo-name}.

For reference :

That's it, it will be live on your custom domain may be within 24hrs

yay! now you know how to deploy your react app to GitHub with and without custom domain

---Thank You---

Flash Sale magic

Veeresh — Thu, 16 Jul 2020 02:54:06 +0000

Its a python script that automates to buy the product from amazon(can be anything with little changes).
This bot is created to explore selenium in python

what is a flash sale? Its a kind of sale where stocks will be limited and get cleared in minutes

All I wanted to buy a product from amazon which was in flash sales. So thought of creating a python script for automating.

Idea:

Selenium is my go-to tool for automating with python, with the help of selenium we first open the amazon login link. Once after logging in, we will be redirected to the home page of Amazon, then we will be opening our product page. If in case the items are out of stock or not available you will not be getting buy now option, this is where we will taking advantage. We will search for buy now element on the page, we keep refreshing until we find buy now. Once on clicking buy now it will direct you to address, mode of payment, review order page. These steps will be automated with selenium. At last, u are needed to enter your one-time password and confirm to order(in case of cash on delivery it's not needed)

Let's get into code:

Prerequisite:

Firstly you are required to install selenium and respective web drivers(i will be using chrome web drivers). Don’t know how to install it? here you go- installation documentation
Get your product link
add address and payment mode in prior

Now you are ready to get into the code!

Complete code is given at the end of a blog
Lets Import a few packages and will explain those while going through code

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

let us choose page load strategy to eager(which loads page before some images get loaded), which benefits in navigating quicker with pages and its data. Let us also create login_url variable which opens amazon sign-in page

options = Options()
options.page_load_strategy = 'eager'
login_url = 'https://amzn.to/38X1LHr'

Now let us create a function that takes your amazon account credentials and your products page link(or product share link).

XPath elements in the above code are used to identify input elements uniquely from the web page.

What is XPath?
XPath is a major element in the XSLT standard.
XPath can be used to navigate through elements and attributes in an XML document.

address_xpath is used to identify which address you want to deliver from your multiple pre-saved addresses in amazon. Chrome driver is used and set to eager loading mode so that the page doesn't wait for all images to be loaded

first, we open the login URL of amazon and log in using credentials provided from function parameters, all the browser actions are done with the help of the driver instance we created. once the page gets loaded, we redirect to another page with the help of driver.get(item_url) .till we find the item available we keep refreshing the page with the while provided. Presence of buy button is identified by driver.find_element_by_xpath(XPath-of-buy-button). once we find that element, we click using elements.click() method. All the remaining code is to navigate through remaining pages and explained in the code with comments

Now let's call the function with username, password,item_url, CVV of our card in amazon

purchase("test@test.com", "test", "itemurl.com", "123")

By running the above code you will be able to automate the bot for purchasing products during a flash sale

BONUS:

In order to purchase a product from two different accounts at the same time, I used multiprocessing in python. For that, we need to import process from multiprocessing

from multiprocessing import Process

Now create 2 processes and run at the same time using the below code, you can even more than 2 processes to buy from multiple accounts

if __name__ == '__main__':
    p1 = Process(target=purchase, args=["test1@test.com", "test_password", "product_link", "cvv"])
    p1.start()
    p2 = Process(target=purchase, args=["test2@test.com", "test_password", "product_link", "cvv"])
    p2.start()
    p1.join()
    p2.join()

Woohoo it's over

Complete code :

First code is for a single person to purchase and the second code is for 2 persons(and can be modifiable for more people)to be purchased at the same time

DEV Community: Veeresh

Web Components: A Revolutionary Way to Build User Interfaces

Table of Contents

Let's get started (Introduction):

Custom Elements:

Shadow DOM :

HTML Templates :

Slots

HTML Imports :

Deprecation of HTML Imports

Conclusion :

In the mist of the Big Data Hype, Let’s Discuss MySQL

Table of contents :

CASE Statements

IFNULL

COALESCE

Stored Procedure

Window Functions (Available only for MySQL 8 +)

RANK

DENSE_RANK

ROW_NUMBER

Good Bye👋

Functors! Not functions

Operator Overloading in C++

Functors

CONCLUSION :

Native sensors that can be used within the web by default

Final result preview:

Introduction :

Workflow :

Sensors :

Usage

Check if your browser supports Generic API :

Permissions

Reading data

A Refresher on Encapsulation and Abstraction in OOPs

Let us first look at their definitions,

Still confused ? Lets understand with code

Here is a table to represent the differences

SEO Tags | Meta tags that you need for previews on social networks.

To begin with, what are meta tags?

Complete code

Qute Bot GitHub Action

My Workflow : Qute Bot

Submission Category: Wacky Wildcards

Yaml File or Link to Code

veerreshr / quteBot

A Github Action which fires a Inspirational quote in telegram every day at 8:00 AM IST

QuteBot

Telegram bot which messages inspiring quotes at 8am in Indian time, works based on github action

View :

Deploy react app to GitHub pages with and without a custom domain

Let's get started!

Here are simple steps we will be going through

STEP 1

STEP 2

STEP 3

STEP 4 : Adding custom domain

That's it, it will be live on your custom domain may be within 24hrs

yay! now you know how to deploy your react app to GitHub with and without custom domain

---Thank You---

Flash Sale magic

Idea:

Let's get into code:

Prerequisite:

BONUS:

Woohoo it's over

Complete code :