Introduction to client-side development
client-side elements
•Views•Controllers
•Client-model
Client Side Scripting technologies
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- Ajax (Asynchronous JavaScript and XML)
- jQuery (JavaScript Framework Library - commonly used in Ajax development)
- MooTools (JavaScript Framework Library - commonly used in Ajax development)
- Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax development)
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> |
Nested HTML Elements
HTML elements can be nested (elements can contain elements).All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
End Tag
Some HTML elements will display correctly, even if you forget the end tag:Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Empty HTML Elements
HTML elements with no content are called empty elements.<br> is an empty element without a closing tag (the <br>
tag defines a line break):Example
<p>This is a <br> paragraph with a line break.</p>
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
CSS
Cascading Style Sheets, commonly known as CSS, is an integral part of the modern web development process. It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design.
Although CSS was introduced in 1996, it gained mainstream popularity by the early 2000s when popular browsers started supporting its advanced features. The latest version, CSS3, has been available since 1998 and was last updated in September 2008.
Benefits of CSS in Web Development
Improves Website Presentation
The standout advantage of CSS is the added design flexibility and interactivity it brings to web development. Developers have greater control over the layout allowing them to make precise section-wise changes.As customization through CSS is much easier than plain HTML, web developers are able to create different looks for each page. Complex websites with uniquely presented pages are feasible thanks to CSS.
Makes Updates Easier and Smoother
CSS works by creating rules. These rules are simultaneously applied to multiple elements within the site. Eliminating the repetitive coding style of HTML makes development work faster and less monotonous. Errors are also reduced considerably.Since the content is completely separated from the design, changes across the website can be implemented all at once. This reduces delivery times and costs of future edits.
Helps Web Pages Load Faster
Improved website loading is an underrated yet important benefit of CSS. Browsers download the CSS rules once and cache them for loading all the pages of a website. It makes browsing the website faster and enhances the overall user experience.This feature comes in handy in making websites work smoothly at lower internet speeds. Accessibility on low end devices also improves with better loading speeds.
WHAT’S NEW WITH CSS3?
CSS3 is the latest standard for the CSS language, under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities. CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise.Here are seven major things that differentiate CSS3 from its predecessors.
1. Mobile-first mentality
CSS3 inherently supports responsive design, and is equipped to handle media queries. Media queries are calls made by the code to determine what device and size screen a user is viewing the site on. This adds a whole new responsive design capability to the CSS repertoire.2. Module-based code
One of the biggest developments is that CSS3 is split into “modules.” All of the old CSS specifications have been migrated over to the new version and divided into smaller pieces (with some new modules added as well).Other CSS3 modules include:
- Selectors: Developers can edit elements by name, class, type, attribute, and more.
- The Box Model module: This describes an approach to creating consistency between HTML elements on a page, or “boxes.” By applying margins, borders, and padding to a box’s content, developers can clear area around an element, give it borders, and more.
- Backgrounds and borders: With better control of the treatments of element borders and page backgrounds, CSS3 also enables rounded corners on boxes and drop shadows. Before CSS3, backgrounds had to be achieved with images, which added to a page’s file size and load time.
- Text effects: CSS3 includes shadow effects, text overflow (which hides text that gets too long for its element), word breaking (automatically breaking text so it fits within a box), and text wrapping–all things that save designers lots of formatting time.
3. Web font support gives designers access to way more than just “web safe” fonts
Before CSS3, designers could only use “web safe” fonts to be 100 percent sure that the fonts would always display the same on everyone’s machine. Web safe fonts are fonts that every single computer has installed and recognizes. If a designer used common fonts like Times New Roman or Arial, they could pretty much guarantee that any user would view their site as it was intended. However, if they wanted to use a rarer font, if it wasn’t supported by a user’s machine, it would default back to a web safe font.Designers can now run web fonts in CSS3, special fonts like those available via Google Fonts and Typecast. These fonts can either be downloaded onto a server and run through the CSS code, or accessed directly from its source via a script, which is called right within the CSS code. This has opened up a world of possibilities for designers.
4. It enables faster development, and faster load times
What used to require background images, CSS3 can now achieve with visual enhancements, which saves developers time in production. This cuts down on calls and load times for numerous images because these effects are all built into the code. Also, pages load faster thanks to overall smaller file sizes and fewer calls.5. Create 2D and 3D transformations, animations, and transitions
These effects allow elements on a page to rotate, grow, shrink, flip, or translate into a different color. For the first time, elements created in CSS can move on screen without requiring any JavaScript or Flash code. With transitions, an element can seamlessly change size and color. You can set a duration for a transition, e.g. creating a button that slowly expands and changes color when you mouse over it.6. New colors and image effects
CSS3 supports new colors (RGBA, HSL, HSLA) and gradient colors, and allows for adjustments to opacity. Another biggie is its support of rounded image corners, an effect that required a lot of formatting and Photoshop work to achieve before.7. Box-sizing has fixed some annoying alignment problems
Box-sizing allows developers to get the sizing of elements right without having to subtract dimensions for padding and borders. With the box-sizing property, the padding and border are included in the height and width.CSS is a foundational web development technology that remains at the heart of how everything on the web looks, but with its latest evolution, it’s proving capable of so much more.
Introducing CSS Selectors
A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available, with a brief description of each.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;
}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.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 HTMLnav 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;
}<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><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:
#container {
width: 960px;
margin: 0 auto;
}<div id="container"></div><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:
.box {
padding: 20px;
margin: 10px;
width: 240px;
}<div class="box"></div>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>Responsive web design has exploded in popularity — thanks to the need to create sites that work across numerous devices.
However, responsive design comes with some problems of its own. The issue of slow-to-load sites is now well documented. Let’s walk through some of the tricks designers are using to better load content and images on different devices.
Media Queries to Call Styles
One of these tricks is the use of media queries, which work to call styles to the user device based on its dimensions. There has been some debate in the past on whether media queries are the best solution when it comes to mobile first, and that debate still continues. However, the Responsive Issues Community Group (RICG) and W3C have looked at ways to implement element queries, which some believe would be a better solution. Why? Because they don’t depend on the viewport, but on the container within it. Media queries are a simple and effective way to serve different content to a range of devices and the most commonly used queries are those that deal with the viewport’s height and width.Call Using External Stylesheet or in a Stylesheet
Like we described in the free e-book Mobile UI Patterns, media queries first check the media type against the user agent string before going on to check for the physical attributes of the viewport. They are a CSS declaration that can be called using an external stylesheet, or be written directly inside a stylesheet.For example, the external call would look like this:
<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px) “href=”css/yourstylesheet.css” />
And the CSS direct call would look like this:
1 @media screen and (min-width:320px)
2 and (max-width:480px){
3/*Insert your styles here
4 }
Here we can see that these CSS declarations are called only for devices with those height and width properties. Media queries are not modular, so this can make them difficult to work with, as discussed by Ian Storm Taylor. However, others are pushing for the use of elemental queries, as pointed out by Richa Jain in her excellent article “Beyond Media Queries — It’s Time to Get Elemental.” But it’ll be some time before we see them implemented, if indeed they are at all, so for the moment we’re stuck with media queries and the issues that surround their use.
Getting Started With Media Queries
First, it’s important to understand the difference between media queries based on ‘width’ and ‘device-width’. The former describes the width of a mobile devices’ rendering surface, while the latter describes the device’s actual screen width.Inline, External and Internal CSS Styles
There are 3 ways to add CSS styles to your website: you can use internal CSS and include CSS rules in
<head> section of HTML document, link to an external .css
file which contains all CSS rules or use inline CSS to apply rules for
specific elements. This tutorial reviews all three ways, their
advantages and disadvantages.Option 1 – 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 in one page, it is a lot easier to see a
preview. Internal CSS is put in between <style></style> tags. An example of 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>- 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.
- 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>
<!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>Option 2 – 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>.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}- Smaller size of HTML pages and cleaner structure.
- Faster loading speed.
- Same .css file can be used on multiple pages.
- Until external CSS is loaded, the page may not be rendered correctly.
Option 3 – 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 an access to CSS files or need to apply style for a
single element only. An example of 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> - Useful if you want to test and preview changes.
- Useful for quick-fixes.
- Lower HTTP requests.
- Inline CSS must be applied to every element.
Tricky Terminology
The terms "framework", "library" and "tool" can mean different things to different people at different times depending on the context. The general definitions used here: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.
ES6 new features:
- arrows
- classes
- enhanced object literals
- template strings
- destructuring
- default + rest + spread
- let + const
- iterators + for..of
- generators
- unicode
- modules
- module loaders
- map + set + weakmap + weakset
- proxies
- symbols
- subclassable built-ins
- promises
- math + number + string + array + object APIs
- binary and octal literals
- reflect api
- tail calls
ECMAScript 6 Features
Arrows
Arrows are a function shorthand using the=> syntax.
They are syntactically similar to the related feature in C#, Java 8 and
CoffeeScript. They support both statement block bodies as well as
expression bodies which return the value of the expression. Unlike
functions, arrows share the same lexical this as their surrounding code.// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));
// Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// Lexical this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
}
Classes
ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
Enhanced Object Literals
Object literals are extended to support setting the prototype at construction, shorthand forfoo: foo
assignments, defining methods, making super calls, and computing
property names with expressions. Together, these also bring object
literals and class declarations closer together, and let object-based
design benefit from some of the same conveniences.var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
Comments
Post a Comment