Web Development: June 2014

Monday, June 30, 2014

New Elements and Removed Elements in HTML5

As HTML is created in 1990 this become core technology for Internet. HTML is used to structuring and presenting content for World Wide Web. HTML was invented by Tim Berners-Lee and initially managed by by World Wide Web Consortium (W3C) and later Web Hypertext Application Technology Working Group (WHATWG) also join to develop the HTML. HTML is a markup language and used to interpret web browsers. In 1995 HTML 2.0 was published and after two years HTML 3.2 was released. In 1997 January HTML 3.2 was published later same year month of December HTML 4 was released.

HTML5 is already ready to use by year of 2013, but the full and working version of HTML5 was officially released in 2014, HTML5 is a responsive design supported language, The new mobile phones and most of the tabs and other devices which are supporting internet is heavily increased in recent years, a research indicated in end of 2013 nearly one billion devices was supporting for HTML5.

While working on HTML5, team decided to Deprecate few tags from existing HTML. Here is the list of tags which are removed.
<acronym> - an acronym tag
<applet> - an applet call tag
<basefont> - an base font for the page
<big> - to make big text
<center> - to make centered text
<dir> - a directory list
<font> - used to make text font, size, and color
<frame> - a frame call,
<frameset> - a set of frames
<isindex> - a single-line input field
<noframes> - a noframe section for frames
<s> - strikethrough text
<strike> - strikethrough text
<tt> - teletype text
<u> - underlined text

But also there are lot more new tags are introduced in HTML5,
<article>
<aside >
<audio>
<canvas>
<command>
<datalist>
<details>
<embed>
<figure>
<footer>
<header>
<hgroup>
<keygen>
<mark>
<meter>
<nav>
<output>
<progress>
<ruby>
<section>
<time>
<video>
<wbr>

The above tags are made developers job easy, You can read more about HTML5 from following links

http://www.tutorialspoint.com/html5/index.htm
http://en.wikipedia.org/wiki/HTML_element#acronym

Monday, June 23, 2014

HTML Naming convention

BEM

BEM(Block-Element-Modifier) is a methodology to create maintainable websites.

We are going to use its naming rules

A block is an independent entity, a "building block" of an application. A block can be either simple or compound (containing other blocks).

An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block they belong to.

A modifier is a property of a block or an element that alters its look or behavior.

Read more:

http://bem.info/method/definitions/ (images are blocked by the company firewall)
http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Block

Blocks may also be contained inside other blocks. For example, a Head Block includes other blocks.

Blocks Reiteration

Blocks may appear more than once on a page.

In CSS related terms, it means:

ID-based CSS selectors must not be used.

Only class selectors satisfy our non-uniqueness requirement.

On the JavaScript side it means:

Blocks with similar behavior are detected unequivocally: they have the same CSS classes

Using CSS class selectors allow picking all blocks with a given name to apply the required dynamic behavior.

Element

Use “__” to separate block and element in the name, element names must be unique within the scope of a block.

/tabs/

/tabs-label/

</ul>

</div>

Modifier

Modifier for blocks, separate with “--”

Modifier for elements, separate with “--”

</ul>

</div>

HTML - The mindset

Instead of creating pages, create the system of layouts and components.

Abstract the website into molecules(Components).

Components should be context-free, can be placed in layouts or specific components.

Instead of write similar codes across pages,

Try to abstract out the real thing,

The mindset to … … develop layouts

What are layouts?

CSS rules divide the page into sections, serves as containers, hold one or more components.

Layouts should not contain decorative styles (border, background, etc).

Write you layout based on the grid system you have picked, set your float, margin, etc.

Grab a grid system or write one

Bootstrap grid system http://getbootstrap.com/examples/grid/

The 1kb CSS Grid (http://1kbgrid.com/)

The 1200px Grid System (http://1200px.com/)

The Responsive Grid System (http://www.responsivegridsystem.com/)

The Golden Grid System (http://goldengridsystem.com/)

Example(3 columns layout with Bootstrap 3 grid system):

<div class="col-md-4">_placeholder_</div>

</div>

The mindset to … … develop components

A full analysis is a good start, break down pages to categories of components.

Continue the progress, disassemble the component, layout the structure.

Example:

/tabs/

/tabs-label/

Sunday, June 22, 2014

HTML - Stylesheets and Scripts placement

Place stylesheets inside <head> , if possible. Combine & minimize the files to reduce request numbers. Ideally, there should be only one or two stylesheets.

Example:

<head>

...

...

</head>

Reasons:

Avoid the “content flickering”, if the stylesheets are loaded after the DOM is ready, the content will be repainted, causing the flickering.

Read more:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content

Place scripts right before </body>, if possible. Avoid placing JavaScript codes in HTML files, keep codes clean separated. Combine & minify the files too, same as stylesheets.

Example:

<body>

...

</body>

Reasons:

Prevent the scripts from stopping the content to parse. So the page won’t choke on the big JavaScript files.

Read more:

For .NET projects, http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Ideal outcome

<!DOCTYPE html>

<html class="" lang="">

<head>

...

</head>

<body>

...

</body>

</html>

Friday, June 20, 2014

HTML head - Meta:Viewport

Terms:

Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.

Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.

CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom. (in terms of CSS pixels, which are, a relative length unit. 1 CSS pixel can consist of multiple device pixels)

Viewport is not yet part of the W3C or WHATWG standard, it was originally invented by Apple for the iPhone.

Now it’s a de facto standard(standard in fact). You will use it when facing main stream mobile devices, which means all iOS & Android & Windows Phone devices.

Codes above defines a responsive viewport, first part instructs the page to match the screen’s width in device independent pixels; second part instructs the browser to establish a 1:1 relationship between CSS pixel and device independent pixels.

Read more:
https://developers.google.com/speed/docs/insights/ConfigureViewport
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.quirksmode.org/mobile/metaviewport/
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
http://viewportsizes.com/ (Viewport sizes quick search)

Thursday, June 19, 2014

HTML head - Meta:Charset and Meta:X-UA-Compatible

Meta:Charset

Always place it as the first line inside <head>

Example:

<head>

...

Reasons:
Ensure everything after this declaration being decoded correctly. Ensure this declaration falls in the first 1024 bytes of the document.

Read more:
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset1024

Meta:X-UA-Compatible

IE8, IE9, IE10 allows you to control document compatibility modes, so you can instruct the browser to render webpages in the same way as older browser versions.

The X-UA-Compatible header isn't case sensitive.

It must appear in the header of the webpage (the HEAD section) before all other elements except for the <title> element and other <meta> elements.

A web server can also be configured to specify the X-UA-Compatible header. If a web server specifies the header and the header also appears within the content of a webpage, the header in the webpage takes precedence over the one specified by the server.

Read more:

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

By using one of these values above, you're restricting the webpage to the standards mode of the corresponding version of Internet Explorer. (Always standard mode, despite !DOCTYPE value)

In many cases, this means you're limiting Internet Explorer to the features supported by that version.

With these settings above, the page is displayed either in the standards mode corresponding to the version you specified or it's displayed in IE5 (Quirks) mode. (Standard or quirks mode, depends on !DOCTYPE value)

This is functionally equivalent to using the . It places Internet Explorer into the highest supported document mode. Why use this again?

Prevents incorrect header information from the server breaks the pages.
It hides the compatibility view button from IE, reduce the chance that a user add the site into the list of compatibility view accidentally.