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.
