Introduction to Client-Side Development

Wrote by Post Comment


1


Distributed systems use client-side elements for users to interact with

•These client-side elements include
•Views – what users see (mainly GUIs)
•Controllers – contain event handlers for the Views
•Client-model – Business logic and data


2

3


4


View Development

Browser-based clients’ Views comprises two main elements

•Content – HTML
• Formatting – CSS
•Server/client-side components may generate the elements of Views

HTML

HTML uses different types of elements to define content

ht

•Structural elements
• header, footer, nav, aside, article
•Text elements
• Headings – <h1> to <h6>
• Paragraph – <p>
• Line break - <br>
•Images
•Hyperlinks




HTML uses different types of elements to define content

•Data representational elements (these elements use nested structures)
• Lists
• Tables
• Form elements
• Input
• Radio buttons, checkboxes
• Buttons

CSS

Cascading Style Sheets

Used to
• Decorate / Format content

Advantages


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

There are 3 main selectors

•Element selector
•ID selector
•Class selector

Advanced selectors


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 selects 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:


55



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:

44

3.nth-of-type Selector: It selects an element from its position and types.

Syntax:
Select a particular number tag to make changes.

filter_none
brightness_5
div:nth-of-type(5){
    background:purple;
}

If we want to make changes in all even li.

filter_none
brightness_5
li:nth-of-type(even){
    background: yellow;
}

Example:

filter_none
brightness_5
<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:

fff

4.Direct Child Selector: It selects any element matching the second element that is a direct child of an element matching the first element. The element matched by the second selector must be the immediate children of the elements matched by the first selector.

Syntax:

filter_none
brightness_5
p > div { 
    background-color: DodgerBlue; 
} 


Example:

filter_none
brightness_5
<html> 
   <head> 
      <title>child combinator</title> 
      <style type="text/css"> 
         div > span { 
         background-color: DodgerBlue; 
         } 
      </style> 
   </head> 
   <body> 
      <div> 
         <span>inside div and is inside span</span> 
         <p>inside div but not inside span 
            <span>inside div p</span> 
         </p> 
      </div> 
      <span>not inside div</span> 
   </body> 
</html> 


Output:


vv

It is different from the Descendant selector as the Descendant selector selects that element matching the second element that is a descendant of the element matching the first element ( that can be the child, a child of its child, etc ).


5.General Sibling Selector: It selects only the first element if it follows the first element and both children are of the same parent element. It is not necessary that the second element immediately follows the first element.

Syntax: 

Changes to the span element content which follows paragraph tag and both have the same parent tag.

filter_none
brightness_5
p ~ span { 
    color: red; 
} 


Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         p ~ span { 
         color: red; 
         } 
      </style> 
   </head> 
   <body> 
      <p>Coding is  
         <span>fun!</span> 
      </p> 
      <h1>GeeksforGeeks</h1> 
      <p>learn</p> 
      <span>Last span tag.</span> 
   </body> 
</html> 


Output:

aa


6.Element Selector: It selects the text enclosed inside the mentioned element.

Syntax:

filter_none
brightness_5
div { 
    background:green; 
} 
  
p { 
    color: yellow; 
} 

Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         div { 
         background:purple; 
         } 
         p { 
         color: yellow; 
         } 
      </style> 
   </head> 
   <body> 
      <div> 
         This is inside div element. 
         <p>Coding is fun! 
            GeeksforGeeks learn Last span tag. 
         </p> 
         div element is closing  
      </div> 
   </body> 
</html> 

Output:


cc



7.ID Selector: It selects the changes made to a specific text on a page as it can be used only once on a page.

Syntax:

filter_none
brightness_5
# special { 
    color: yellow; 
} 


Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         #special { 
         color: blue; 
         } 
      </style> 
   </head> 
   <body> 
      <div> 
         This is inside div element. 
         <p>Coding is fun!</p> 
         <p>This is a paragraph.</p> 
         <p id="special">This paragraph is with "special" id.</p> 
         div element is closing  
      </div> 
   </body> 
</html> 

Output:

jj


8.Class Selector: It is the same as ID selector but it can be used a number of times in a page.

Syntax:

filter_none
brightness_5
.highlight { 
    background: yellow; 
}


Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         .highlight { 
         background: yellow; 
         }  
         p { 
         background: blue; 
         } 
      </style> 
   </head> 
   <body> 
      <p class="highlight"> This is inside the highlight</p> 
      <p>This is normal paragraph.</p> 
   </body> 
</html> 


Output:

ss


9.Star Selector: The changes made will be made to the whole page.

Syntax:

filter_none
brightness_5
*{ 
    border:1px solid lightgrey; 
} 


Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         *{ 
         border:1px solid lightgrey; 
         } 
      </style> 
   </head> 
   <body> 
      <p class="highlight"> This is inside the highlight</p> 
      <p>This is normal paragraph.</p> 
   </body> 
</html> 


Output:

bb



10.Descendant Selector: It makes changes only to those elements which are inside the other element.

Syntax: Select all the anchor tags which are inside the ‘li’ element which are inside the ‘ul’ element.

filter_none
brightness_5
ul li a{ 
    color: red; 
} 

Example:

filter_none
brightness_5
<html> 
   <head> 
      <title></title> 
      <style type="text/css"> 
         ul li a{ 
         color:red; 
         } 
      </style> 
   </head> 
   <body> 
      <ul> 
      <li> This is inside first li element.</li> 
      <li>Coding is fun! 
      <li> 
      <li><a href="www.google.com">Click here to go to google.</a></li> 
      <li>The last li.</li> 
   </body> 
</html> 


Output:


mm



All the Selectors are used together in the following Example:

filter_none
brightness_5
<html> 
   <head> 
      <title>nth</title> 
      <style type="text/css"> 
         #special{ 
         color:red; 
         } 
         .highlight{ 
         background: green; 
         } 
         ul:nth-of-type(2){ 
         background:yellow; 
         } 
         ul+h4{ 
         border:4px solid purple; 
         } 
         a[href="http://www.google.com"]{ 
         background:yellow; 
         } 
         h1 ~ h4 { 
         color: red; 
         } 
         div > span { 
         background-color: DodgerBlue; 
         } 
      </style> 
   </head> 
   <body> 
      <h1>GeeksForGeeks</h1> 
      <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> 
      <h4>Coding</h4> 
      <div> 
         <span>inside div and is inside span</span> 
         <p>inside div but not inside span 
            <span>inside div paragraph</span> 
         </p> 
         <p class="highlight">inside div but not outside  
            span with class element.</p> 
         <p id="special">inside div but not outside span 
            with id element.</p> 
         <p class="highlight">inside div but not outside  
            span with another class element.</p> 
      </div> 
      <a href="http://www.geeksforgeeks.org">click here 
             for geeksforgeeks.com</a> 
      <a href="http://www.google.com" target="_blank"> 
                  click here for google.com</a> 
   </body> 
</html> 


Output:


ll

Advanced features

• Web fonts - CSS3 web fonts allow you to use custom fonts other than the device
fonts (web safe fonts) - http://estelle.github.io/CSSWorkshop/part_07_fonts.html#slide1

• Colors, gradients, backgrounds - http://estelle.github.io/gradients/

• Transformations and animations - http://estelle.github.io/CSS-Workshop/part_10_transforms.html

• Media

Media Queries


Media types

all
braille, embossed, speech, hanheld, projection, screen, tv print, tty
<link media=“(min-width: 30em)” …
<link media=“screen and (min-width: 30em)” …
@media (min-width: 30em) { … }
@media screen and (min-width: 30em) { … }

http://www.w3.org/TR/CSS21/media.html/#media-types

Can be used as

1. Inline CSS
2. Internal CSS sheets
3. External CSS sheets

Difference Between Inline, External and Internal CSS Styles


Internal CSS

Internal CSS code is put in the <head> section of a particular page. The classes and IDs can be used to refer to the CSS code, but they are only active on that particular page.

CSS styles embedded this way are downloaded each time the page loads so it may increase loading speed.

 However, there are some cases when using internal stylesheet is useful.

One example would be sending someone a page template – as everything is on one page, it is a lot easier to see a preview.

 Internal CSS is put in between <style></style> tags. An example of the internal stylesheet:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Advantages of Internal CSS:


  • Only one page is affected by stylesheet.
  • Classes and IDs can be used by internal stylesheet.
  • There is no need to upload multiple files. HTML and CSS can be in the same file.


Disadvantages of Internal CSS:

  • Increased page loading time.
  • It affects only one page – not useful if you want to use the same CSS on multiple documents.


How to add Internal CSS to HTML page


Open your HTML page with any text editor. If the page is already uploaded to your hosting account, you can use a text editor provided by your hosting. If you have an HTML document on your computer, you can use any text editor to edit it and then re-upload the file to your hosting account using FTP client.

Locate <head> opening tag and add the following code just after it:
<style type="text/css">

Now jump to a new line and add CSS rules, for example:

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}   

Once you are done adding CSS rules, add the closing style tag:
</style>

At the end, HTML document with internal stylesheet should look like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}
</style>
</head>
<body>

<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>

</body>
</html>

External CSS


Probably the most convenient way to add CSS to your website is to link it to an external .css file.

That way any changes you made to an external CSS file will be reflected on your website globally.

 A reference to an external CSS file is put in the <head> section of the page:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
while the style.css contains all the style rules. For example:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}


Advantages of External CSS:


  • The smaller size of HTML pages and cleaner structure.
  • Faster loading speed.
  • Same .css file can be used on multiple pages.

Disadvantages of External CSS:


  • Until external CSS is loaded, the page may not be rendered correctly.


 Inline CSS


Inline CSS is used for a specific HTML tag. <style> attribute is used to style a particular HTML tag.

Using CSS this way is not recommended, as each HTML tag needs to be styled individually.

Managing your website may become too hard if you only use inline CSS. However, it can be useful in some situations.

 For example, in cases when you don’t have access to CSS files or need to apply style for a single element only.

 An example of an HTML page with inline CSS would look like this:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>

</body>
</html>

Advantages of Inline CSS:


  • Useful if you want to test and preview changes.
  • Useful for quick-fixes.
  • Lower HTTP requests.


Disadvantages of Inline CSS:


  • Inline CSS must be applied to every element.


Other Tools

•There are many frameworks/libraries/plugins to support view development
•They dynamically generate HTML+CSS code
•In server and/or client side
•May have JS-based advanced interactive features
jq

➥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
b

an

➥ Angular – a JS framework/platform to build frontend applications



➥ React – a JavaScript library for building user interfaces (and the application, which uses that UI)


Bootstrap

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

Quickstart

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

Copy

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

Copy
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Our bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our contents section.

Show components requiring JavaScript

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

Copy
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Copy
<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

Copy
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

Copy
.selector-for-some-widget {
  box-sizing: content-box;
}
With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about the box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community


  • Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.


Alerts



PLUG-INS

pl


  • Plug-ins are mainly to add widgets to the Views
  • However, may contain interactive components as well
  • Therefore, can be seen as micro-applications
  • MODAAL 

ACCESSIBILITY FEATURES

WCAG 2.0 Level AA Support
Saving page focusing state on modal open
Switching focus state to new content on modal open
Switch focus back to original focus state on modal close (eg. button clicked)
Maintained tab scope to modal content
ARIA support and customization for modal title
Keyboard control for closing an open modal
Keyboard control for gallery next and previous
Default color contrast support optimized for readability
Accessible <button> close element with ARIA attribute
Optimized for assistive technologies and screen readers



OTHER FEATURES

Fully responsive, scaling with browser width.
Modal types include inline content, ajax, image and image gallery, iframe, confirmation and Instagram photo.
Customizable CSS with SASS options
Inline attribute configuration support
Full-screen/viewport mode
Flexible open and close options and methods
Callback events for before and after open and close
Callback events for before and after image change in the gallery.



Inline Attribute Configuration


Modaal has been developed to support common jQuery configuration options, but in an effort to extend functionality and widen its usage we've developed support for inline data-option-name attribute support.

To enable this, the Modaal trigger link must have a class of modaal, then you can add attributes to the link as needed like so:

HTML<a href="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</a>
It's important to note, that configuration options that contain an underscore (_) in them need to be replaced with a hyphen (-), and prefixes with data-modaal- in its respective HTML attribute. For example, overlay_opacity configuration would read data-modaal-overlay-opacity="0.8".


Inline Content

Fetches content from an existing element (using an ID) in the page and loads it into the content.

HTML<a href="#inline" class="inline">Show</a>
<div id="inline">
    Inline content goes here...
</div>
JS$(".inline").modaal();
If you would prefer your trigger element is not an <a href="#">, you can define a `content_source` value like so:

HTML<button class="inline">Show</button>
<div id="inline" style="display:none;">
Inline content goes here...
</div>
JS$(".inline").modaal({
    content_source: '#inline'
});

Fullscreen Mode

Fullscreen mode will open the Modaal window to fill the entire viewport. If the content exceeds the height of the window, the dialog will scroll vertically to allow access to all content.

The fullscreen mode works best with inline and ajax based models only. Currently no support for fullscreen images.

JS$('.fullscreen').modaal({
    fullscreen: true
});

AJAX

Loads content via AJAX into the Modaal window based on the link href attribute.

HTML<a href="content.php" class="modaal-ajax">Show</a>
JS$('.modaal-ajax').modaal({
    type: 'ajax'
});
If you would prefer your ajax trigger element is not an <a href="#">, you can define an ajax supported `content_source` value like so:

HTML<button class="inline">Show</button>
JS$(".inline").modaal({
    content_source: '/path/to/file.html'
});

Single Image Modal

Opens a single image.

Label below-opened image, as well as the accessible label,  can be applied by using data-modaal-desc="My Image Description"

HTML<a href="path/to/image.jpg" class="image" data-modaal-desc="My Description">Show</a>
JS$('.image').modaal({
    type: 'image'
});


For image (and gallery) instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option.

 For example:

HTML<button data-modaal-content-source="path/to/image.jpg" class="image">Show</button>

Image Gallery

Opens a series of images linked by a data-group="group-name" attribute. Replace group-name with what your gallery group identifier.

HTML<a href="path/to/image-1.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-2.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-3.jpg" data-group="gallery" class="gallery">Show</a>
JS$('.gallery').modaal({
    type: 'image'
});


For image gallery instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option.

 For example:

HTML<button data-group="gallery" data-modaal-content-source="path/to/image-1.jpg" class="image">Show</button>
<button data-group="gallery" data-modaal-content-source="path/to/image-2.jpg" class="image">Show</button>


Video

Loads in an embedded video as defined in the link href attribute, into an iframe. Currently tested formats include Youtube and Vimeo. Other than support iframe embedding should also work.

HTML<a href="https://player.vimeo.com/video/142216434" class="video">Show</a>
JS$('.video').modaal({
type: 'video'
});


VIDEO MODAAL TIPS
The Modaal video type has been tested thoroughly using both Vimeo and Youtube. For the best outcome, please ensure the URL format looks like the one of the following below. We transplant this URL into an iframe which then each service provider controls all the necessary playback from there.

https://www.youtube.com/embed/cBJyo0tgLnw where the ID at the end is your unique video id. This can be found by selecting 'Share' on a youtube video, then clicking on 'Embed'. You'll find this URL within the content presented.

https://player.vimeo.com/video/109626219 where the ID at the end is your unique video id. This can be found by selecting 'Share' on a Vimeo video (commonly seen on the right-hand side), and by selecting the content within 'Embed'. You'll find the URL necessary towards the very beginning of that embed code inside src="".


iframe


Loads a URL as defined in the link href attribute, into an iframe. This requires a set width and height for the Modaal to also be defined.

HTML<a href="http://humaan.com" class="iframe">Show</a>
JS$('.iframe').modaal({
type: 'iframe',
width: 700,
height: 500
});


Confirmation Modaal


Modaal window to prompt the user to Confirm or Cancel a particular action. Content can be pushed through including callback events as necessary. By default once open, it can not be closed until an action has been selected (such as Confirm/Cancel).

HTML<a href="javascript:void(0);" class="confirm">Show</a>

JS$('.confirm').modaal({
    type: 'confirm',
    confirm_button_text: 'Confirm',
    confirm_cancel_button_text: 'Cancel',
    confirm_title: 'Confirm Action XYZ',
    confirm_content: '<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>',
    confirm_callback: function() {
        alert('you have confirmed this action');
},
confirm_cancel_callback: function() {
alert('you have canceled this action');
}
});


Instagram

Loads an embedded Instagram photo into a Modaal window. In the example below, we're using inline data-modaal- attributes to set the type and unique photo ID.

HTML
<a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6">Show</a>


  •  DateDropper 


HOW IT WORKS

Install datedropper on your site and initialize it on one or more elements. Your datepicker will no longer look so boring.


Online booking

For hotels, B&Bs and other accommodation businesses which offer online bookings, datedropper can be used to build an awesome “from to” datepicker.



Easy to customize jQuery datepicker plugin
FEATURES


Thanks to its many options and features, datedropper allows you to customize every aspect of your datepicker, from its language, date format, and style to any other features.



Ease of use

nnnnn

A typical datepicker is most likely poor looking and unpleasant to use. datedropper has been developed down to the very last detail to make its user experience fantastic.



Amazingly responsive

nnnn

datedropper has been designed mobile first so as you can build an amazingly responsive datepicker. However, its calendar widget makes it perfect even for desktop devices.



CDN installation

nnn

datedropper can be installed via CDN. CDN installation is available in both a Lite and a Pro version. Optionally, the Pro version allows you to download datedropper source files.



Fully customizable
nn

datedropper offers a wide range of options to customize your datepicker style and color palette. Thanks to the theme generator available with datedropper Pro, you can create your very own style.

Advanced date picker options and settings

Roundtrip
One of the most popular features ever is finally available on datedropper. Use the roundtrip option to build a “form to” datepicker.

Methods
datedropper comes with a set of methods that have been developed to give you the chance to customize any feature of your datepicker.

Callbacks
Should you need to perform any actions when a certain event occurs on the date picker, you can use the available callback functions.

Custom setups
datedropper allows you to customize any predefined option by developing a custom setup. For instance, you can add a new language for your datepicker.



Cool CSS and JavaScript Tuts and Plugins


SpinKit

A collection of loading indicators animated with CSS


oo



Pizza Pie Charts

An easy-to-use JS plugin to create responsive pie charts for any device


ooo



Zoomerang.js

A drop-in library that allows your users to zoom in on (almost) any element on your existing page. No setup, arbitrary styling.


zz



CSS Mac Plus

Recreating the classic Mac Plus computer using only CSS and HTML


zzz



Simptip: 

a simple CSS tooltip made with Sass
This is a CSS library to create simple and beauty tooltips with a lot of customization options.


sim


Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just a few simple steps. You can easily customize switches so that they match your design perfectly.


sw


Stereoscopic CSS

Using CSS to emulate the eye-crossing 3D effect of stereoscopy


st



Newton

An easy-to-use, feature-rich physics engine that's designed from the ground up for JavaScript


NEW



CSS Text filling with water

A great pen by Lucas Bebber with a wavy loading animation for text


WA



Circles

A lightweight JavaScript library that generates circular graphs in SVG.


CI


Found is our way of sharing the best articles, resources, and tutorials that find their way to the eyeballs of the CSSDA crew.


Brilliant jQuery Plugins


01. Muuri


MU


For the ultimate in flexible layouts, Niklas Rämö's Muuri is well worth a look. Its layout system enables you to position grid items of assorted sizes within a container in pretty much any way imaginable, and it's responsive, sortable, filterable and draggable. By default, it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style.


02. AnchorScroll.js


121212


There's nothing like a bit of ultra-smooth scrolling to help your site stand out from the crowd, and AnchorScroll is a lightweight and easy-to-use jQuery plugin for doing just that. It gives you smooth scrolling to anchor targets, with added classes and callbacks to elements on scroll events, and on top of that there's the option to add a blur effect to the body while scrolling, as well as a bounce effect that'll take you back to where you came from after scrolling to an anchor element.


03. Timeline.js


111111111


The timeline does exactly what it says on the tin, and creates a timeline slider

This jQuery plugin offers a twist on the carousel component: Timeline.js provides you with everything you need to create a carousel timeline (i.e. a slider that progresses based on chronological points). It includes plenty of visual and functional customization options.

04. Tilted page scroll


fbvgfbgfbh


Tilted page scroll adds a neat 3D effect to your pages

This plugin from Pete R. is an excellent way to grab people's attention and add a little extra depth to your site. With it installed, items will tilt into view as they scroll up to the page, and tilt again as they scroll out of the top of the page. It's a great-looking effect that's nice and easy to implement.


05. Focus point


nnnnnnnn

Say goodbye to badly-cropped responsive images

The great thing about responsive web design is being able to create a single page that'll look good on any device. However, if your site's automatically cropping images to fit certain viewports, it can often lose the focal point. With Focuspoint, you can make sure your image looks great in any container by specifying a focal point for each image, and the plugin will crop out unwanted parts before the important bits.

06. SVGMagic


kkkkkkkkk



SVGMagic creates PNGs to replace SVG where they are not supported

Using SVG images is a good idea because they will look sharp at any size, and this plugin helps you to do that without having to worry about browsers that don't support them. It searches for SVG images and replaces them with PNG versions if SVG isn't supported.

07. Face Detection


gggggg


This plugin provides an easy way to use some powerful technology

Detect and get the coordinates of human faces in images, videos, and canvases with this plugin, which was written by Jay Salvat and uses Liu Liu's face detection algorithm.


08. Round Slider


dfdefgregf


The slider can be themed to suit your purposes

This circular slider enables the user to select a range of values by mousing over the circle. The full slider is the default setup, but you can also use it to get quarter-circle, half-circle, and pie shapes. There are CSS styles you can adjust to theme it in various ways, for example, to look like a speedometer. No images are involved; it's all made with CSS and JavaScript.


09. jInvertScroll


uuuuuu



Get a parallax effect with ease

jInvertscroll makes it easy to implement horizontal scrolling with a parallax effect. Roll your scroll wheel on their demo site to whizz along sideways while two layers of landscape move at different speeds to create an illusion of depth.


10. Slinky


slin


A menu design that won't go out of style?

Slinky is an elegant, timeless menu design that's useful for any scenario in which you've got a lot of sub-menus. Select an item and an animation slides the sub-menu over. There's a demo here.


•Templates are used to maintain consistency across pages in the web site/application

•Can generate common content easily

• Headers, navigators, footers

•Template engines are available for both server and client sides

•Client-side (JS-based) template engines

• NUNJUCKS, PUG, MUSTACHE.JS, HANDLEBARS

•Server-side template engines

• Twig, jTwig, Thymeleaf, Apache Velocity


Component Development 


Browser-based clients’ components comprise two main aspects
➤Controllers
➤Client-model

The components of browser-based clients are developed using JS/JS-based frameworks, libraries, and plugins.

Main features of client-side component development tools

  • DOM processing (dynamic content generation, change, removal)
  • Data processing
  • Data persistence
  • Session management (cookies)
  • Communicating (with server components)


New in JS6

ECMAScript 6 is also known as ES6 and ECMAScript 2015.

Some people call it JavaScript 6.

This chapter will introduce some of the new features in ES6.


  • JavaScript let
  • JavaScript const
  • Exponentiation (**) (EcmaScript 2016)
  • Default parameter values
  • Array.find()
  • Array.findIndex()



JavaScript let

The let statement allows you to declare a variable with block scope.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using let</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Output

 Declaring a Variable Using let
10

JavaScript const

The const statement allows you to declare a constant (a JavaScript variable with a constant value).

Constants are similar to let variables, except that the value cannot be changed.

Example

 <!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Output

Declaring a Variable Using const
10

Read more about let and const in our JavaScript Let / Const Chapter.

Exponentiation Operator

The exponentiation operator (**) raises the first operand to the power of the second operand.

Example

 <!DOCTYPE html>
<html>
<body>

<h2>The ** Operator</h2>

<p id="demo"></p>

<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>

</body>
</html>


Output

 The ** Operator

25


Example

 <!DOCTYPE html>
<html>
<body>

<h2>Math.pow()</h2>

<p id="demo"></p>

<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>

</body>
</html>


Output

Math.pow()
25

Default Parameter Values

ES6 allows function parameters to have default values.

Example
<!DOCTYPE html>
<html>
<body>

<h2>Default Parameter Values</h2>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>


Output

 Default Parameter Values
15

Array.find()

The find() method returns the value of the first array element that passes a test function.

This example finds (returns the value of ) the first element that is larger than 18:

Example

 <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.find()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>


Output

 JavaScript Array.find()
First number over 18 is 25


Note that the function takes 3 arguments:

  • The item value
  • The item index
  • The array itself


Array.findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

This example finds the index of the first element that is larger than 18:

Example

 <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.findIndex()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 has index " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Output

 JavaScript Array.findIndex()
First number over 18 has index 3


Note that the function takes 3 arguments:


  • The item value
  • The item index
  • The array itself


New Number Properties


ES6 added the following properties to the Number object:


  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER


 Example

 <!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
var  x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Output

 Number Object Properties

EPSILON

2.220446049250313e-16


Example

 <!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
var  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Output

 Number Object Properties

MIN_SAFE_INTEGER

-9007199254740991

Example

 <!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
var  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Output
Number Object Properties

MAX_SAFE_INTEGER

9007199254740991

New Number Methods

ES6 added 2 new methods to the Number object:


  • Number.isInteger()
  • Number.isSafeInteger()


The Number.isInteger() Method

The Number.isInteger() method returns true if the argument is an integer.


Example

 <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>


Output
JavaScript Number Methods
The isInteger() method returns true if the argument is an integer.

Otherwise, it returns false.

true
false


The Number.isSafeInteger() Method


A safe integer is an integer that can be exactly represented as a double precision number.

The Number.isSafeInteger() method returns true if the argument is a safe integer.


Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>


Output
JavaScript Number Methods
The isSafeInteger() method returns true if the argument is a safe integer.

Otherwise, it returns false.

true
false


  • Safe integers are all integers from -(253 - 1) to +(253 - 1).
  • This is safe: 9007199254740991. This is not safe: 9007199254740992.


New Global Methods

ES6 also added 2 new global number methods:


  • isFinite()
  • isNaN()


➥The isFinite() Method

The global isFinite() method returns false if the argument is Infinity or NaN.

Otherwise it returns true:

Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>


Output
JavaScript Number Methods
The isFinite() method returns false if the argument is Infinity or NaN.

Otherwise, it returns true.

false
true


➥The isNaN() Method

The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:


Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>


Output
JavaScript Number Methods
The isNan() method returns true if the argument is NaN. Otherwise, it returns false.

true
false

Arrow Functions

Arrow functions allow a short syntax for writing function expressions.

You don't need the function keyword, the return keyword, and the curly brackets.


Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>


Output
JavaScript Arrow Functions
With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.

Arrow functions are not supported in IE11 or earlier.

25


  • Arrow functions do not have their own. They are not well suited for defining object methods.
  • Arrow functions are not hoisted. They must be defined before they are used.
  • Using const is safer than using var because a function expression is always a constant value.
  • You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:


Example

 <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>


Output
JavaScript Arrow Functions
Arrow functions are not supported in IE11 or earlier.

25

• Web workers - This API is meant to be invoked by the web application to spawn background workers to execute scripts which run in parallel to UI page. The concept of web works is similar to worker threads which get spawned for tasks which need to invoke separate from the UI thread.

• Web storage/ sessionStorage - This is for persistent data storage of key-value pair data in Web clients.

• Geolocation – Identify the device location

• File API – Handle the local files

• Image capturing – use local hardware (camera)

Top JS frameworks/Libraries

• jQuery: Basic and simple. Cover the complexity of JS and provides cross-browser compatibility.

• React powers Facebook, Ease of Learning, DOM Binding, Reusable Components, Backward Compatibility

• Angular: Support for Progressive Web Applications, Build Optimizer, Universal State Transfer API and DOM, Data Binding and MVVM

• Vue: lightweight , with a much-needed speed and accuracy

Generic client-side features

•Form/data validation

•Dynamic content generating/updating

•Some business logic (client-model)

•Delta-Communication (AJAX, SSE, WS)

•Data formatting/preparation









Tags:

Share:

0 comments