What is post is about

This post is an extension of the post by Alex Marandon. In that post you will find the following topic discussed

Web widget
Usage
Bootstrap code using jquery

So what this post is about? I faced some issues while creating a jquery based widget and found some issues and solution. Here is my findings.

Things to care for

There are some aspect that you need to take care of to create a nice widget that works across different sites.

Widget must not interfere with css and javascript of existing site
For rendering widget it is better to provide the following choices

Some default theme to show the widget nicely
Provide the option for the site owner to override the theme with custom css

Allow widget to be customized by user

Solutions

Javascript conflicts

If you are using jquery then Alex Marandon has made it clear how to use jquery using noConflict. But when you will be using plugins for jquery in the widget you have to use no conflict is the following way,

jQuery = window.jQuery.noConflict(false);

The reason to use false is telling jquery not to remove the jquery from the window.jquery, because plugins use jquery from window.jquery. If you use true in the param then any plugin that you add in the widget will not work.

Css conflicts

It is very important if you want to provide some out of box theme that the user may choose from. Then you need to make sure that your css does not conflict with existing ones. I found that the best way is to use sass. Because then you can use nesting to ensure that the css that you provide only impacts the container of the widget and nothing else.

Customization

You can customize widget using HTML 5 data attribute to provide the widget extra information that they need.

Demo

Here is a demo of a HTML widget which fetches data from blogger if you pass the name of your blogger.

I have developed a sample project on rails. The reason to use rails is to use the built in SCSS and be able to deploy to heroku. The 2 files that you need to see is here,

Here is the jsFuddle of the widget.

Ashrafuzzaman on Technology

Sunday, July 29, 2012

HTML widgets using jquery