Web Development

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.

Use of Modernizr.js

In HTML we are having lot of ways to apply cool technologies, Modernizr.js is used to make your life easy by conditional JavaScript and CSS.

Here is a simple example of usage of Modernizr.js, If you are trying to execute a HTML 5 tag with older browsers like IE7, if the browser didn't support the HTML5, DOM may not understand your code. But using Modernizr.js you can execute the HTML5 code with older browsers.

Example usage:

<head>

...

...

Advantages
Supplementary to conditional class names, used for feature detection.

Disadvantages
Introduced a script in the will slow down the page more or less.

Read more:
http://modernizr.com/