Starting FireStorage Plus! v1.2 a new feature is introduced: copy paste.
This copy paste functionality is however smart adaptive powered by a strong AI. It adapts to your needs.
If you need to copy the key, value and storage type to a string of text it is sufficient to right click on a storage, select copy from the context menu and paste the string into your favorite text-editor. Nothing new right?
Wrong. Try to paste the same copy in the FireStorage Plus! panel and you will get a duplicate storage key added with a counter suffix to avoid collisions. However if you paste the storage into the panel on a different host the exact same storage will now be set on the new domain / website.
This is very useful to transfer storages between different environments by the means of a simple copy paste.
This is an excellent feature to maximize your development regarding web storage.
Go ahead try to copy paste the storages within the panel accross different sites / environments.
Thanks for reading and I wish you nice adventures with HTML5 Web Storage.
The FireStorage Plus! addon is an extension to the wonderful tool Firebug.
Why would I need it?
You cannot imagine how many companies – such as Google, Facebook, Twitter, and so many more – use HTML5 web storage to store information about your usage and their interface. With this tool you can inspect that storage and know exactly what they are storing.
Does it work for developers?
For developers it goes even further by showing you the storage mechanism that has been used to store the info. With a quick glance you will be able to spot whether it has been stored in sessionStorage – in which all information will be removed when you close your browser – or in localStorage – in which the information stays infinite or till the site decides it can drop the info.
What kind of improvements can I expect in the near future?
This is off course the first version (V1.0) and it provides all basic information you need with nice JSON formatting.
However we (Me and the contributors) are working hard to also provide in order of importance:
real time editing and deleting of this information.
a JSON tab – which will let you unfold different parts of information from the stored JSON object instead of seeing it as a big chunk of text.
some layout improvements
indexedDB support
It this addon safe?
Yes it is. The plugin has had a FULL review by members of the Mozillas review committee. Which means they had a look at the code and found it to be clean and ready to be featured in their addons-gallery. Take a look at the source code yourself if you want to check: https://github.com/NickBelhomme/firestorageplus
How do I contribute?
If you are non-technical you can email me with great ideas and who knows maybe your idea will popup in the next version.
If you are a developer you might take it a step further and send me code patches / improvements. This can be done through Github, but I also accept regular files through email. I do not care how you submit your implementations I only care about the final result.
What do users say about this addon?
I submitted this addon towards the Mozillas review committee and somebody must really like me or understand the importance of this plugin as it was FULLY reviewed under 24 hours. The first 5 stars review(s) came pouring in shortly after that.
I hope you take the time to try it and give me your feedback,
This article will describe what a accelerator is and how to implement one for Internet Explorer 8 (IE8).
What is a accelerator
According to answers.com ‘to accelerate’ means : ‘To increase the speed of’; ‘To reduce the time required’.
And that is exactly what Microsoft intended. Imagine yourself reading a webpage about an hotel and you want to know where the hotel is located. We used to select the address text, copy it, go to our favorite locator, http://maps.live.com, http://maps.google.be, paste it and press go. This took a lot of time, and was a repetitive task.
I said "was" because Microsoft has automated this process for us. To accelerate our productivity and to make it really convenient, they allow the user (that’s us) to install accelerators (webservices). Take the above scenario. We want to know the location of the hotel. We select the address and then automagically a blue button appears. Clicking this blue button let you select your accelerator of choice. In this case the maps. Hovering on "live maps" will give you an immediate preview on the location without you having to leave the page. If you click , you will be redirected towards the maps.live.com website with the address already searched for you and in display. No more copying and pasting anymore, just selecting and picking your accelerator.
To create one the only thing you need is a page where you host your accelerator definition. And a webservice that is available to use. Let’s create ourselves a blog.nickbelhomme.com search.
First we need a service. Luckily for us, this service already exist!
http://blog.nickbelhomme.com/index.php?s=php
So we’ll be using this one. What we need next is an accelerator definition.
Accelerators are grouped by function so that users can quickly access the task that they want. You can set the default Accelerator for a given category when you install the Accelerator or through the Manage Add-ons dialog box. Examples of services that exist today:
Add: del.icio.us, Digg, Reddit
Blog: Windows Live Spaces, Windows Live Writer, Blogger
Define: Encarta, Wikipedia, Dictionary.com
Map: Windows Live Map, Google Maps, Yahoo! Maps, MapQuest
Send: Windows Live Mail, Gmail, Yahoo! Mail
Translate: Windows Live Translation, AltaVista’s Babel Fish, Google Translation
We have added our custom one: Search
os:execute
In the action parameter we define the uri of the webservice and in the method we define the communication method: post or get.
In this os:execute container we can define as many parameters as we want, but we can only have access to 1 dynamic parameter and that is {selection}. Whatever the user selects will be used here. So if he would select "php" the os:parameter name=s would get a value of php.
I hope this is clear. And congratulations you just build your first accelerator.
The attentive reader was probably already dying to get an answer to the question: "but what about preview screens?" Well I am glad you ask. Let’s get into that now!
Adding a preview
Adding a preview screen to the definition is as simple as adding 1 line. Let’s see if you can find it.
Adding this line, automagically enables the preview window.
However if you try out this piece of code, you will see that the entire page is loaded into the small preview window. This is not what we want, so we will have to create a new page. Sepcifically designed to fit the preview window. Creating such a page should be very standard for you.
Having a page specifically designed to fit the preview box gives us complete control on what to show to the user when he sees the preview window.
Installing
To allow the user to install an accelerator is as easy as providing the user a button, or link with a onclick event.
Add this piece of code somewhere a user would click it and IE8 will give them an alert box with the request for installation.
”’Attention”’: It seems like you need to define a new category in order to have two different accelerators using the same root domain. This means when you want to install multiple accelerators from one page, you will have to define a different category for each of them. Instead of Search => Search Nick, Search Resume, …
<os:activity category="Search Resume">
Possible selections
VARIABLES CONTEXT DESCRIPTION
===========================================
{documentUrl} All The href of the document.
{documentTitle} All The title of the document, if available.
{documentDomain} All Effective second-level domain from the document's href.
{documentHost} All Fully qualified domain from the document's href.
{selection} selection Currently selected text.
{link} link The href of the selected link.
{linkText} link The innerText of the selected link.
{linkRel} link The rel of the selected link, if available.
{linkType} link The type of the selected link, if available.
{linkDomain} link Effective second-level domain from the link's href.
{linkHost} link Fully qualified domain from the link's href.
A few things to remember about variables:
Always enclose variable names in curly braces {}; for example {selection}. To specify a literal curly brace character in the request, escape it with a backslash, such as \{{selection}\}.
Placing a "?" after the variable name indicates that it is optional; for example, {documentTitle?}.
If any required (non-optional) variable in the URL template is not available (for example, trying to execute an Accelerator that includes {linkRel} in the action attribute against a link with no rel attribute) the Accelerator cannot be executed and its entry in the shortcut menu is dimmed.
If any os:parameter element has an empty value for any reason, it will not appear in the request.
This article will describe what a webslice is and how to implement one for Internet Explorer 8 (IE8).
What is a webslice
Web Slices are snippets of the entire web page that a user can subscribe to.
Web Slices will be kept updated by the browser automatically, and can be viewed directly from the Favorites bar, complete with graphics and visuals.
Developers can mark parts of the pages as Web Slices, using the hAtom and hSlice microformat.
For the end user it has the same functionality has for instance a google weather widget.
Internet Explorer 8 Webslice
What is a microformat
Like we said before a webslice is added by using microformats. Webslices use the hAtom microformat specification. You already have a lot uses for microformats available today. Think of the hCard microformat which uses the hAtom specification.
An example of a vcard is:
as you can see there are specific class names in the code. Vcard indicates the microformat is a hcard microformat and all special classnames inside this container are considered special. Everything speaks for itself, fn (firstname), org (organisation), …
The purpose of these microformats is to make it easy for the end user. He can for instance download the vcard directly into his address book by the click of a button. This way he does not have to copy and paste everything into the right fields of his address book.
If you want a live example, install the firefox Operator addon https://addons.mozilla.org/nl/firefox/addon/4106 and visit my website at http://www.nickbelhomme.com.
Now click on my contact information and you will see in the operator toolbar: contactpersons 1. Here you can download my contact information with a click of a button!
Microsoft saw a missing functionality in Rss and wanted to make their users give all the info needed at their fingertips. So they combined a kind of RSS functionality with the microformat specification. And voila they introduced their own microformat specification hslice.
The hslice specification better known as a webslice
So microsoft wanted to make a hybrid between rss readers and microformats. And they succeeded and it works perfectly!
The hslice (webslice microformat specification) exists out of only 6 special strings of which 2 are mandatory(!):
So let us dive right in starting with the container: hslice
hslice
The browser has to know which part of the webpage it can extract as a webslice. So we need to give it an indicator. This is done by placing the hslice on the container tag (div, p, …). And we do this as followed:
<div id="mywebslice" class="hslice">
<span>Nick Belhomme</span>
<p>
My name is Nick Belhomme And I am 30 years old
and I am from <span> Aarschot</span>
</p>
</div>
As you can see we have added a class with the name of hslice. Also note the id we gave the webslice. The id is a necessity. Without it the webslice will not be found. This is because every webslice should have a unique identifier!
The container for the webslice is created. Now we have to add a title.
entry-title
Every webslice should have a title to be displayed in the favorites bar of IE8.
in the example of above we want the following title: “Nick Belhomme Aarschot”
To accomplish this we will have to put entry-title in the code.
<div id="mywebslice" class="hslice">
<span class="entry-title">Nick Belhomme</span>
<p>
My name is Nick Belhomme And I am 30 years old
and I am from <span class="entry-title"> Aarschot</span>
</p>
</div>
As you can see we have placed 2 entry-title class names in the piece of code. This is not necessary, only one will do. But we wanted the title to be Nick Belhomme Aarschot. So we had to add 2. We now have a valid webslice, but it has no content making it useless. So let’s add it.
entry-content
First we have to decide what we want the user to see. Because the container containing the class=”entry-content” attribute will be shown. In the example of above we could place the entry-content on the opening div next to hslice, but that will make our example saying 2 times Nick Belhomme. Which is not what we want. So we are going to put it on the p tag. Besides Why do you think I put the p tag there in the first place? 🙂
<div id="mywebslice" class="hslice">
<span class="entry-title">Nick Belhomme</span>
<p class="entry-content">
My name is Nick Belhomme And I am 30 years old
and I am from <span class="entry-title"> Aarschot</span>
</p>
</div>
And now we have a fully working webslice! If you have a webpage with this piece of code in it. IE8 will check it every 15 minutes for updates. As this is static no updates will ever occur, but put some php behind it and let my age change and you have yourself a dynamic webslice.
But wait? What about feedurl??!! You are right, lets get into that now!
feedurl
Internet Explorer 8 does regular checks to see if the webslice has new content and is there for updated.
To do this it reloads the entire page containing the webslice and then extracts it. As you can imagine this process is slow, especially on a big page. So the hslice specification allows alternative content for updates. We specify the alternative content by adding an anchor tag
<div id="mywebslice" class="hslice">
<a rel="feedurl" href="http://nickbelhomme.com/mywebsliceUpdate" style="display:none;"></a>
<span class="entry-title">Nick Belhomme</span>
<p>
My name is Nick Belhomme And I am 30 years old
and I am from <span class="entry-title"> Aarschot</span>
</p>
</div>
As you can see, we do not use feedurl as a class name but as a value to the rel attribute. You can however use it as a classname.
The attentive reader also noticed we removed the entry-content from the code. This is not necessary because it will be ignored, but it is good practice to keep your code as clean as possible.
The link will not show in the webpage because we have hidden it with inline styling. Now let’s see how the update page should look like.
The Update and display Page
Microsoft specifies the update page as a RSS xml feed. There are a few restrictions to keep in mind:
* You cannot use javascript
* You cannot use external style sheets. Only inline styles are supported.
* All the hslice classes that are mandatory should also be on that page.
The Standalone Update page
<rss version="2.0" >
<channel>
<title>Nick Belhomme Aarschot</title>
<link>http://www.nickbelhomme.com</link>
<description>About page</description>
<ttl>60</ttl>
<item>
<title>Nick Belhomme</title>
<link>http://www.nickbelhomme.com</link>
<description><![CDATA[
<div>
<span>Nick Belhomme</span>
<p>
My name is Nick Belhomme And I am 30 years old
and I am from <span> Aarschot</span>
</p>
</div>
]]></description>
</item>
</channel>
</rss>
But wait? Does this mean I cannot use JS or CSS? Of course not, you can! However this requires an additional page.
However you should NOT use the rss feed structure from the Update page standalone. Just write the update page in plain old HTML!
Instead of writing a container tag with the entry-content class to represent the content we will tell the webslice to fetch the display page from another url which can contain all the stuff you want.
How do we link the display page in the update page? Easy:
As you can see we use the entry-content in an anchor tag and specify the page in the href attribute.
The display page
Just a plain old html webslice. Here you can include js files, css files and stuff.
Like I said before this display page is not necessary if you do not want to use external style sheets or javascript. If not you can use the update page as a standalone. If you do want to use css and js, the combination is the solution.
endtime
This name tells the browser that the webslice will not be used anymore after a specific time (in Universal Time Code (UTC)).
Think of a webslice we could develop for Tour de France. After the tour is over, the webslice will not be updated anymore and thus is useless: How do we set the expiration date?
By default IE8 will check for an update on your webslice every 15 minutes. You can redefine how many times the update should occur, but never quicker than 15 minutes! The setting is in minutes. And in the example of below we wait 60 minutes before the next update is checked.
<p style="font-size:xx-small">Updated every <span class="ttl">60</span> minutes.</p>
Of course as with all the other stuff, you can put a display none on this to hide it from the display.
