Client-side development




In this blog  you are going to learn about client-side developments. So let's go.

Main elements of client-side application components of distributed systems 


Distributed systems use client-side elements for users to interact with them. The main client-side elements are,

•Views –what users see (mainly GUIs)
•Controllers –contain event handers for the Views
•Client-model –Business logic and data


 Views development technologies for the browser-based client-components  

Mainly use two elements for view development technology.
  • HTML-Content
  • CSS - Formatting


HTML uses different types of elements to define content 

•Structural elements
             •header, footer, nav, aside, article
•Text elements
             •Headings –<h1> to <h6>
             •Paragraph –<p>
             •Line break -<br>
•Images
•Hyperlinks
•Data representational elements (these elements use nested structures)
             •Lists
             •Tables
•Form elements
             •Input
             •Radio buttons, check boxes
             •Buttons
CSS




CSS is used to decorate/ Format content


Here are few advantages  of CSS,

•Reduce HTML formatting tags
•Easy modification
•Save lot of work and time
•Faster loading

There are 3 main selectors
          •Element selector
                   
Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements.
The following example uses an element type selector to match all <ul> elements 

To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:

There are three main elements making up this part of the page: Two <ul> elements and a <div>. The CSS will apply only to the two <ul> elements, and not to the <div>. Were we to change the element type selector to use <div> instead of <ul>, then the styles would apply to the <div> and not to the two <ul> elements.
Also note that the styles will not apply to the elements inside the <ul> or <div>elements. That being said, some of the styles may be inherited by those inner elements.
          •ID selector

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.
Here’s an example:



This CSS uses an ID selector to match an HTML element such as:
<div id="container"></div>
In this case, the fact that this is a <div> element doesn’t matter—it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply.
An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.
If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this.In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.

          •Class selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.
Take the following rule set:



These styles will apply to the following HTML element:
<div class="box"></div>
The same styles will also apply to any other HTML elements that have a class attribute with a value of box. Having multiple elements on a single page with the same class attribute is beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to this, class selectors have very low specificity—again, more on this later.
Another reason the class selector is a valuable ally is that HTML allows multiple classes to be added to a single element. This is done by separating the classes in the HTML class attribute using spaces. Here’s an example:
<div class=”box box-more box-extended”></div>
 https://www.sitepoint.com/css-selectors/

Advanced CSS selectors

Before delving into the realms of advanced CSS selectors, it’s important to understand how CSS specificity works, so that we know how to properly use our selectors and to avoid us spending hours debugging for a CSS issue that could be easily fixed if we had only payed attention to the specificity.

When we are writing our CSS we have to keep in mind that some selectors will rank higher than others in the cascade, the latest selector that we wrote will not always override the previous ones that we wrote for the same elements.

1. Attribute Selectors
    
Attribute selectors let you target an element based on its attributes. You can specify the element’s attribute only, so all the elements that have that attribute — whatever the value — within the HTML will be targeted, or be more specific and target elements that have particular values on their attributes — and this is where attribute selectors show their power.
2. Child Selector
 The child selector is represented by the sign “>”. It allows you to target elements that are direct children of a particular element.
3. Sibling Combinators
4. Pseudo-Classes

Different type of CSS used  

There are 3 type of CSS using.
01) Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute.
EG:
<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
      
    <body>
        <p style = "color:#009900;
                    font-size:50px;
                    font-style:italic;
                    text-align:center;">
       Example</p>
    </body>
</html>  
02)Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
Example: 
<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center;   
            }
            .GFG {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .geeks {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
        <div class ="GFG">GeeksForGeeks</div>
        <div class ="geeks">A computer science portal for geeks</p>
        </div>
    </body>
</html>         


03)External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages
      
Example:The file given below contains CSS property. This file save with .css extension.
body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}
 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

Other view development tools


•jQuery–A JS library, but can be seen a framework too. It wraps the complexity of pure JS. There are lots of JS frameworks, libraries, and plugins built using jQuery. Good for DOM processing.
•jQuery UI –Focus on GUI development
•Bootstrap–to rapidly design and develop responsive web pages and templates
•Angular–a JS framework/platform to build frontend applications
•React–a JavaScript library for building user interfaces (and the application, which uses that UI)




Finlally let's tal about the new featurs in JS version 6 

  1. Setting defaults for function parameters
  2.  Extracting Data from Arrays and Objects with Destructuring
  3.  Checking Array Values with Array#includes()
  4.  Allowing Extra Arguments in Functions
  5.  Expanding Arrays with the Spread Operator
  6.  Naming of anonymous functions
 https://nodesource.com/blog/six-of-the-most-exciting-es6-features-in-node-js-v6-lts/


Comments

Post a Comment

Popular posts from this blog

How to run multiple Transformations from one Job in Pentaho

Image
In this article I am going to talk about how to run multiple transformations from one job using Pentaho. I hope you'll know about pentaho, transformations and jobs. This article include two ways of doing the same process. one method is simple, easy but not much efficient way. However, the second method is more efficient and success way. First,let's talk about the easy method, This is the the most common method that you can find from the internet. And also, this is very easy method that fulfill the requirement of running multiple transformations from one job.  Let me share an example of this approach and discuss how we are going create this job and the drawbacks of this method. Fig 01: Easy method for run multiple transformations at once As you can see in above image, There are 4 transformations connected with the start and when run the   above job all of the execute and run sequentially. If you need to run all of the together in parallel, you can change the settings ...
Read more

Data Analytics

Image
                        What is Data Analytics? As the process of analyzing raw data to find trends and answer questions, the definition of data analytics captures its broad scope of the field. However, it includes many techniques with many different goals. The data analytics process has some key components that are needed for any initiative. By combining these components, a successful data analytics initiative will provide a clear picture of where you are, where you have been and where you should go. Generally, this process begins with  descriptive analytics . This is the process of describing historical trends in data. Descriptive analytics aims to answer the question “what happened?” This often involves measuring traditional indicators such as return on investment (ROI). The indicators used will be different for each industry. Descriptive analytics does not make predictions or directly inform decisions. It...
Read more

Distributed Systems

Image
Difference between distributed systems and distributed computing Distributed systems and distributed computing are looks like same. But they slightly different from each other. So let’s talk about them. In Distributed- computing there are multiple computing units connected to achieve a common task. When considering a single unit, larger computing power enables lot of tasks to be perform. And also searches can be coordinated for efficiency, Successes usually give the finder credit. Distributed computing projects include hunting large prime number, and analysing DNA codes. A Distributed system includes a collection of autonomous computers, connected through a network and distribution middleware, which enables computers to coordinate their activities and to share the resources of the system, so that users perceive the system as a single, integrated computing facility. So hope you can now understand the differences. Standalone system VS Distributed system ...
Read more