Web Components 101 : Shadow DOM

Unless you've been living under a rock, you must have heard about the latest buzzword in the world of JavaScript - Encapsulation. Encapsulation or Information-hiding is one of the main pillars of object-oriented programming languages which is used to restrict access to some of the object's components. But how does that apply to a language like JavaScript - To find out check out this article I recently authored about Shadow DOM, the underlying technology behind Web components.

Getting Started with HTML5

Do you want your existing website to be HTML5 – compliant ?
All you want to know if you are working on a new project that should follow HTML5 best practices ?
This post tries to answer some of these questions and attempts to try and get started with HTML5 in a flash, using two of the most popular bootstrap frameworks which help you to get started with a robust codebase. Why use it ? Simple, these frameworks contains best practices around front-end development using HTML/JSS/CSS and kick starts you to concentrate on content, rather than developing a template for your site.
HTML5 Boilerplate – H5BP , already at 3.0
Includes

• Cross-browser compatible using Polyfills/Fallbacks.
• HTML5 Feature Detection using Modernizr, YepNode
• CSS3 Media Queries
• Mobile browser optimizations
• Download complete, stripped & customized versions
• CDN hosted jQuery with local failback ( shown below )

As you can see, first we try to load jQuery using Google CDN. In the next line, we check the existence using window.jQuery, which will evaluate to true if the library has been loaded successfully, else we load it statically.

• Also contains some server site configurations like .htaccess file for caching, cross-domain XHR, gzipping, 404 error pages, robots.txt etc.
• Contains ANT build scripts to integrate easily with your project build system

Paul Irish on HTML5 Boilerplate

Twitter Bootstrap – Just released 2.0
Includes

• Responsive 12-grid column
• Custom jQuery plugins for Carousel, Popovers, Accordion, Autocomplete, modals etc.
• Cross-browser compatible and also includes media queries for smartphones and tablets too
• Includes many components like Button groups, Button Dropdowns, Navigation components, alerts and progress bars etc
• Contains extensive out of the box styling for your HTML markup, for elements like Forms, Tables etc. Building a bordered, shaded, alternate colored table was never so easy.
• The entire framework is built on LESS. The codebase contains several .less files (containing different functionalities) which are then compiled into CSS.
• Provides several styling as LESS mixings which can be found in mixings.less which you can easily use in your code, or extend them as well.

Comparsion & Conclusion
Both are superb HTML5 bootstrap frameworks, under continuous development which follow best practices developed over the years to build a fast, secure and future-proof site. But in my opinion, H5BP is something that even designers can play with using as a template, they can simply open their favourite design tool and add content. While using Twitter Bootstrap is more developer oriented and requires you to invest some time in understanding the various classes and functionalities it offers. But then, that’s the case with every good thing around you.

HTML5 Native Drag ‘n’ Drop

HTML5 does not only mean a whole new world of tags (video, audio, header, footer, article, section etc.) and revolutionary technologies like Geolocation, Application cache, Canvas, Web Workers etc. but it also brings along a rich set of JavaScript API to developers.

Today, we witness one of the interesting feature that it provides; the capability of dragging and dropping elements natively without using any JS framework. The HTML5 spec defines the new events that we should catch in order to handle operations like

1. Start of drag operation ( dragstart )
2. Dragging content over another element ( dragover )
3. Entering the drag area of another element ( dragenter )
4. End of Drag operation ( drop )

If you have worked with a RIA-friendly language such as ActionScript, then you will found this to be very similar. Having said that, providing this drag and drop support in the browser itself is the reason behind the fame of HTML5.

Coming back, lets see some code in action. We have some images in our page which we want to drag and drop in div container. These images are tagged with class “dragMe” (so that we can attach event listeners to them). Similarly, we have a div container in which we are going to drop these images with an id of “dropOnMe”.

Things to note

• draggable=true  -  By default, images and links are draggable in nature but I have added this attribute just to convey that any HTML5 element can be selected, dragged and dropped if you add this attribute to it. Also add following CSS to make it work across different browsers

• Custom data-* attributes  -  Again something, HTML5-blessed. It provides us the capability to define custom data-attributes on any element. Here we use it to define properties of individual images. More on custom data-attributes here.

Next, we add some event handlers to handle drag n drop related events we defined above:

1. Adding Drag Handlers

We took a hold of all the elements that are to be dragged and attach to each, a drag handler which will be called whenever you click and try to drag that elements. In the handler, we update the event’s dataTransfer object and set custom properties in the JavaScript object, which we defined in the markup  (yes you guessed it right, we are going to use them in the drop handler)

2. Adding Drop Handlers

Note that we use both e.preventDefault() and return false in the function, to make it work across different browsers; this is needed to make sure that we cancel the default action that the browser will normally take, like surfing to that location (in case of a link). Apart from that, the code just retrieves the data set in dataTransfer object and display that using innerHTML of the div.

3. Adding handlers for dragover & dragenter

Again for making the code work across different browsers (tested on Firefox, IE and Chrome), we need to use both preventDefault() and also return false from the handler in order to inform the browser that you can drop and release the dragged item on this element for which the function is called.

A Lot More…

..can be achieved like customizing the drag icon and even drag and drop across different instances of same browser or even dragging from one browser and dropping in another browser. Stay tuned or check out the spec for more details.

Final Demo Looks like

Too bad that I don’t have a proper hosting solution, so you have to do with images, until you are passionate enough to write the above code yourself.

Initial Screen

Dragging an Item

Dropped it !!

We can add more spice to the tut by adding CSS and some other effects but in the hope that it would overshadow the concept, I emphasize on the minimal code needed for it.

Any suggestions, improvements or bugs are welcome as comments.