1. What are the main elements of client-side application components of distributed systems?
These client-side elements
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
VIEW DEVELOPMEN
Content –HTML
Different types of elements to define content
Structural elements
Formatting –CSS
There are three ways of inserting a style sheet:
Tools
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
The client-server model is a core network computing concept also building functionality for email exchange and Web/database access. Web technologies and protocols built around the client-server model are: Hypertext Transfer Protocol (HTTP)
5. Explain different categories of elements in HTML, proving examples for their use
html - <html> element...</html>
HTML Element Code:
<html>
</html>
html - <head> element
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
html - <body> element
HTML Body Element Code:
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
6. Discuss the importance of CSS, indicating new features of CSS3
1) CSS 3 Selectors
The most useful attributes for selectors are:
[attr^=val] –- matches a DOM element with the attribute attr and a value starting with val
[attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix val
[attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring val
CSS
1 <div class="code"><style>
2 p[title^="car"] {color: red;}
3 img[src*="birth"] {border:3px solid green;}
4 </style></div>
HTML
1 <div class="code"><img src="happy_birthdays.jpg" />
2 <p title="container">I am displaying a container. And this attribute won't match me. </p>
3 <p title="carousel">This carousel will match</p></div>
2) CSS 3 Rounded Corners
CSS
<div class="code"> .box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 10px; text-align:center; }</div>
HTML
<div class="code"><div class="box">Submit</div></div>
OUTPUT
3) CSS 3 Border Image
CSS
<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}</div>
view plain | print | ?
HTML
<div class="code"><div id="col">my content</div></div>
4) CSS 3 Box Shadow
CSS
<div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>
view plain | print | ?
HTML
<div class="code"><div class="shadow"> my content </div></div>
OUTPUT
5) CSS 3 Text Shadow
CSS
<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>
HTML
<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>
OUTPUT
7. Compare and contrast the 3 main types of CSS selectors
1) Universal Selector
* {
color: green;
font-size: 20px;
line-height: 25px;
}
2) Element Type Selector
ul {
list-style: none;
border: solid 1px #ccc;
}
To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:
<ul>
<li>Fish</li>
<li>Apples</li>
<li>Cheese</li>
</ul>
<div class="example">
<p>Example paragraph text.</p>
</div>
<ul>
<li>Water</li>
<li>Juice</li>
<li>Maple Syrup</li>
</ul>
3) ID Selector
Here’s an example:
#container {
width: 960px;
margin: 0 auto;
}
<div id="container"></div>
8. Discuss the advanced CSS selectors, explaining the specificity
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
9. Explain the use for CSS media queries in responsive web development
Media Queries in Responsive Design
Media types first appeared in HTML4 and CSS2.1, which enabled the placement of separate CSS for screen and print. In this way, it was possible to set separate styles for a page’s computer display vis-à-vis its printout.
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
or
@media screen {
* {
background: silver
}
}
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />
@media screen and (min-width: 480px) {
div {
float: left;
background: red;
}
.......
}
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
Device Compatibility
CSS changes are device friendly. With people using a whole lot of different range of smart devices to access websites over the internet, there is a need for responsive web design. CSS serves the purpose here by making your web pages more responsive so that they end up displaying in the same manner on all devices.
Disadvantages of Cascading Style Sheet (CSS)
Cross-Browser Issues
Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers.
Confusion Due to Its Many Levels
The programming language world in itself is crazily complicated for non-developers and beginners. To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3 can be quite confusing for the mentioned lot.
Vulnerable
If you have worked with CSS, you probably know that it is easily accessible because of its open text-based system. An accident or a mere act of mischief with the files can end up disrupting the display and formatting of your entire website. It would only require a read/write access to the intended website to override the changes.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
Framework
In a framework, all the control flow is already there and there are many predefined white spots that we should fill out with our code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain-specific functions. The framework will provide you with hooks and call-backs, so that you build on it; it will then call your plugged-in code whenever it wishes, a phenomenon called Inversion of Control.
A framework can contain libraries. A framework will usually include many libraries to make your work easier.
Library
A library performs specific, well-defined operations. A library is just a collection of class definitions. The reason is it simply code reuse, in other words gets the code that has already been written by other developers. The classes and methods normally define specific operations in a domain-specific area. For example, there are some libraries of mathematics that can let developers just call the function without redoing the implementation of how an algorithm works. A library will usually focus on a single piece of functionality that you access using an API. You call a library function, it executes some code and then the control is returned to your code.
Plugin
A plugin is a software add-on that is installed on a program, enhancing its capabilities. For example, if you wanted to watch a video on a website, you may need a plugin to play it because your browser doesn't have the tools it needs. You can think of it like getting a Blu-ray player for your Blu-ray disc.
Difference between a framework and a library?
The key difference between a library and a framework is "Inversion of Control". When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you. A library is just a collection of class definitions.
12. Discuss the client-side component development related aspects in browser-based web applications
Components should be reusable, but they should be independent too. Every behavior must be driven by the component API, it shouldn’t be manipulated by outside. Also, components could have different variations, much like a button which can be for example, a small button, disabled, with icons etc.
Writing components is a good way to structure our client-side apps. However, we should be careful when writing and using them.
Observe an example of a <ui-button> component, and the logic that is applied to it, which can prove useful in any kind of component library or web-component
13. Discuss the new features in JS version 6
top 10 best ES6 features
1. Default Parameters in ES6
Remember we had to do these statements to define default parameters:
var link = function (height, color, url) {
var height = height || 50
var color = color || 'red'
var url = url || 'http://azat.co'
...
}
They were okay until the value was 0 and because 0 is falsy in JavaScript it would default to the hard-coded value instead of becoming the value itself. Of course, who needs 0 as a value (#sarcasmfont), so we just ignored this flaw and used the logic OR anyway… No more! In ES6, we can put the default values right in the signature of the functions:
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
2. Template Literals in ES6
Template literals or interpolation in other languages is a way to output variables in the string. So in ES5 we had to break the string like this:
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
3. Multi-line Strings in ES6
Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
While in ES6, simply utilize the backticks:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, and discuss their similarities and differences
Libraries
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.
Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax can be implemented using the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.
A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:
a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a patch quickly
a patch could change the API and incur significant changes to your code.
Frameworks
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
A framework normally provides a higher level of abstraction than a library and can help you rapidly build the first 80% of your project. The downsides:
the last 20% can be tough going if your application moves beyond the confines of the framework
framework updates or migrations can be difficult – if not impossible
core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.
Tools
A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.
Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.
References
https://www.smashingmagazine.com/2018/05/future-of-web-design/
http://webreference.com/authoring/css3/index-2.html
https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/
These client-side elements
- Views –what users see (mainly GUIs)
- Controllers –contain event handers for the Views
- Client-model –Business logic and data
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
VIEW DEVELOPMEN
Content –HTML
Different types of elements to define content
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
Structural elements
- header, footer, nav, aside, article
- Text elements
- Headings –<h1> to <h6>
- Paragraph –<p>
- Line break -<br>
- Images
- Hyperlinks
Formatting –CSS
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
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
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
The client-server model is a core network computing concept also building functionality for email exchange and Web/database access. Web technologies and protocols built around the client-server model are: Hypertext Transfer Protocol (HTTP)
5. Explain different categories of elements in HTML, proving examples for their use
html - <html> element...</html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Element Code:
<html>
</html>
Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.
html - <head> element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page.
html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
6. Discuss the importance of CSS, indicating new features of CSS3
1) CSS 3 Selectors
In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using these selectors you can choose DOM elements based on their attributes. So you don't need to specify classes and IDs for every element. Instead, you can utilize the attribute field to style them.
The most useful attributes for selectors are:
[attr^=val] –- matches a DOM element with the attribute attr and a value starting with val
[attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix val
[attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring val
CSS
1 <div class="code"><style>
2 p[title^="car"] {color: red;}
3 img[src*="birth"] {border:3px solid green;}
4 </style></div>
HTML
1 <div class="code"><img src="happy_birthdays.jpg" />
2 <p title="container">I am displaying a container. And this attribute won't match me. </p>
3 <p title="carousel">This carousel will match</p></div>
2) CSS 3 Rounded Corners
Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore because any change in content can break them.
CSS 3 addresses this problem by introducing the border-radius property, which gives you the same rounded-corner effect and you don't have to write all the code. Here are examples for displaying rounded corners in different places of a website.
CSS
<div class="code"> .box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 10px; text-align:center; }</div>
HTML
<div class="code"><div class="box">Submit</div></div>
OUTPUT
3) CSS 3 Border Image
Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property border-image allows you to specify an image to display instead of a plain solid-colored border.
CSS
<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}</div>
view plain | print | ?
HTML
<div class="code"><div id="col">my content</div></div>
4) CSS 3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property box-shadow this can be achieved by writing a single line of CSS code.
After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added it back in the last working draft.
<div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>
view plain | print | ?
HTML
<div class="code"><div class="shadow"> my content </div></div>
OUTPUT
5) CSS 3 Text Shadow
The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it. A similar property called box-shadow is also available in CSS 3.
CSS
<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>
HTML
<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>
OUTPUT
7. Compare and contrast the 3 main types of CSS selectors
1) Universal Selector
The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Look at the following CSS example, which uses the universal selector:
* {
color: green;
font-size: 20px;
line-height: 25px;
}
The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.
2) Element Type 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:
ul {
list-style: none;
border: solid 1px #ccc;
}
To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:
<ul>
<li>Fish</li>
<li>Apples</li>
<li>Cheese</li>
</ul>
<div class="example">
<p>Example paragraph text.</p>
</div>
<ul>
<li>Water</li>
<li>Juice</li>
<li>Maple Syrup</li>
</ul>
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.
3) 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:
#container {
width: 960px;
margin: 0 auto;
}
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.
8. Discuss the advanced CSS selectors, explaining the specificity
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
9. Explain the use for CSS media queries in responsive web development
Media Queries in Responsive Design
Media types first appeared in HTML4 and CSS2.1, which enabled the placement of separate CSS for screen and print. In this way, it was possible to set separate styles for a page’s computer display vis-à-vis its printout.<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
or
@media screen {
* {
background: silver
}
}
In CSS3, you can define styles depending on the page width. As page width correlates with the size of the user’s device, this capability thus allows you to define different layouts for different devices. Note: media queries are supported by all major browsers.
This definition is possible through the setting of basic properties: max-width, device-width, orientation, and color. Other definitions are possible as well; but in this, case the most important things to note are minimum resolution (width) and orientation settings (landscape vs. portrait).
The responsive CSS example below shows the procedure for initiating a certain CSS file with respect to the page width. For example, if 480px is the maximum resolution of the current device’s screen, then the styles defined in main_1.css will be applied.
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />
We can also define different styles within the same CSS stylesheet such that they are only utilized if certain constraints are satisfied. For example, this portion of our responsive CSS would only be used if the current device had a width above 480px:
@media screen and (min-width: 480px) {
div {
float: left;
background: red;
}
.......
}
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
- Inline CSS.
- Internal CSS.
- External CSS.
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
Device Compatibility
CSS changes are device friendly. With people using a whole lot of different range of smart devices to access websites over the internet, there is a need for responsive web design. CSS serves the purpose here by making your web pages more responsive so that they end up displaying in the same manner on all devices.
Disadvantages of Cascading Style Sheet (CSS)
Cross-Browser Issues
Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers.
Confusion Due to Its Many Levels
The programming language world in itself is crazily complicated for non-developers and beginners. To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3 can be quite confusing for the mentioned lot.
Vulnerable
If you have worked with CSS, you probably know that it is easily accessible because of its open text-based system. An accident or a mere act of mischief with the files can end up disrupting the display and formatting of your entire website. It would only require a read/write access to the intended website to override the changes.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
Framework
In a framework, all the control flow is already there and there are many predefined white spots that we should fill out with our code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain-specific functions. The framework will provide you with hooks and call-backs, so that you build on it; it will then call your plugged-in code whenever it wishes, a phenomenon called Inversion of Control.
A framework can contain libraries. A framework will usually include many libraries to make your work easier.
Library
A library performs specific, well-defined operations. A library is just a collection of class definitions. The reason is it simply code reuse, in other words gets the code that has already been written by other developers. The classes and methods normally define specific operations in a domain-specific area. For example, there are some libraries of mathematics that can let developers just call the function without redoing the implementation of how an algorithm works. A library will usually focus on a single piece of functionality that you access using an API. You call a library function, it executes some code and then the control is returned to your code.
Plugin
A plugin is a software add-on that is installed on a program, enhancing its capabilities. For example, if you wanted to watch a video on a website, you may need a plugin to play it because your browser doesn't have the tools it needs. You can think of it like getting a Blu-ray player for your Blu-ray disc.
Difference between a framework and a library?
The key difference between a library and a framework is "Inversion of Control". When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you. A library is just a collection of class definitions.
12. Discuss the client-side component development related aspects in browser-based web applications
Components should be reusable, but they should be independent too. Every behavior must be driven by the component API, it shouldn’t be manipulated by outside. Also, components could have different variations, much like a button which can be for example, a small button, disabled, with icons etc.
Writing components is a good way to structure our client-side apps. However, we should be careful when writing and using them.
Observe an example of a <ui-button> component, and the logic that is applied to it, which can prove useful in any kind of component library or web-component
client-side app
13. Discuss the new features in JS version 6
top 10 best ES6 features
- Default Parameters in ES6
- Template Literals in ES6
- Multi-line Strings in ES6
- Destructuring Assignment in ES6
- Enhanced Object Literals in ES6
- Arrow Functions in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const
- Classes in ES6
- Modules in ES6
1. Default Parameters in ES6
Remember we had to do these statements to define default parameters:
var link = function (height, color, url) {
var height = height || 50
var color = color || 'red'
var url = url || 'http://azat.co'
...
}
They were okay until the value was 0 and because 0 is falsy in JavaScript it would default to the hard-coded value instead of becoming the value itself. Of course, who needs 0 as a value (#sarcasmfont), so we just ignored this flaw and used the logic OR anyway… No more! In ES6, we can put the default values right in the signature of the functions:
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
2. Template Literals in ES6
Template literals or interpolation in other languages is a way to output variables in the string. So in ES5 we had to break the string like this:
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
3. Multi-line Strings in ES6
Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
While in ES6, simply utilize the backticks:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, and discuss their similarities and differences
Libraries
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.
Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax can be implemented using the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.
A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:
a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a patch quickly
a patch could change the API and incur significant changes to your code.
Frameworks
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
A framework normally provides a higher level of abstraction than a library and can help you rapidly build the first 80% of your project. The downsides:
the last 20% can be tough going if your application moves beyond the confines of the framework
framework updates or migrations can be difficult – if not impossible
core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.
Tools
A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.
Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.
References
https://www.smashingmagazine.com/2018/05/future-of-web-design/
http://webreference.com/authoring/css3/index-2.html
https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/
