Browservulsel

JSP Tag Library for Web Services: where to find

2010-02-27T10:01:00.002+01:00

What really amazed me this week is that there I couldn't find a JSP Tag Library for Web Services. I did find a specification request for JSP Tag Library for Web Services, but I couldn't find anybody who was working on it. If somebody knows of an existing JSP tag library, please let me know.

Google open all 0.6.1

2008-08-03T12:18:00.000+02:00

The Google open all user script (original post) for Greasemonkey was updated to support the new HTML structure Google uses.

Tags:

RTL gemist direct video link

2006-11-15T22:03:00.000+01:00

This one is for the Dutch readers... again:

Het Programma gemist directe video link (voorheen “Omroep.nl video's direct linken”) user script (oorspronkelijke post) voor Greasemonkey ondersteunt nu ook RTL Gemist (RTL4, RTL5 en RTL7).

Tags:

Uitzendinggemist.nl direct ASF link and 'this week' filter

2006-06-17T10:07:00.000+02:00

This one is for the Dutch readers... again:

Het Omroep.nl video's direct linken user script (oorspronkelijke post) voor Greasemonkey is op twee punten verbeterd.

Bij een Window Media Player video krijg je geen wit scherm meer, maar blijf je op de huidige pagina.
In overzichten is een checkbox toegevoegd waarmee je de lijst tot de afgelopen week kunt beperken.

Tags:

Firefox extension tip: RefreshBlocker

2006-06-14T21:14:00.000+02:00

I'm a frequent visitor of uitzendinggemist.nl. It has an annoying meta refresh on most pages. You, unfortunately, can't remove these refreshes using Greasemonkey. When you remove the meta tag from the DOM tree, the refresh has already been set.

There is an extension for Firefox called RefreshBlocker which blocks those meta refreshes. You can create a white- or blacklist of sites using regular expressions.

Tags:

Uitzendinggemist.nl direct video link user script

2006-06-03T10:08:00.000+02:00

This one is for the Dutch readers:

Het Omroep.nl video's direct linken user script (oorspronkelijke post) voor Greasemonkey is aangepast voor de vernieuwde uitzending gemist site.

Het heeft even op zich laten wachten maar gelukkig is Userscripts.org weer in de lucht en had ik nu even tijd om het nieuwe script online te zetten.

Tags:

Google Reader subscribed indicator user script

2006-05-07T11:12:00.000+02:00

Mihai Parparita of persistent.info has added a check icon to my Google Reader subscribe user script which appears when you are subscribed to at least one of the feeds that the site advertises via auto-discovery. The idea is great but it still has some caveats. I personally would have used a smaller check icon because I wrote it in the first place to use as little screen size as possible.

Install Mihai's user script.

Tags:

Userscripts.org large description textarea user script

2006-05-06T09:49:00.000+02:00

Today I was editing a description on one of my user scripts on Userscripts.org and decided to write a small user script to enlarge the description textarea for Greasemonkey.

Tags:

Jasper's Google Reader subscribe user script improved

2006-04-13T21:12:00.000+02:00

I've implemented the improvement suggested by Chris Wetherell in Jasper's Google Reader subscribe user script (original post) for Greasemonkey. Feed URL's containing query strings are now handled correctly. Thanks, Chris!

Tags:

CSS styling definition lists without floating or absolute positioning

2006-04-05T21:31:00.000+02:00

I've written before on styling definition lists (which I use to create semantic HTML forms). I described two CSS options to style the definition list:

Positioning the definition title absolutely and the data relatively.
Float the definition title in the definition data left margin.

The absolute option gets you in trouble when you for example want to dynamically change your page. The float option gets you in trouble when you want to support Internet Explorer 5 and 6. You will need to fix the 3px pixel gap and need to be lucky not to be running in to other problems.

Last week I've had it with these options and thought up a better way to style definition lists. Just use negative top margin on the definition data:

form dt {
  width: 120px;
  text-align: right;
}

form dd {
  margin: -18px 0 2px 0;
  padding-left: 128px;
  min-height: 25px;
}

* html form dd { height: 25px; }

You can use the * html hack here because Internet Explorer 7 will ignore it and will support min-height.

Tags:

Formdown: rapid HTML form development

2006-03-25T17:20:00.000+01:00

I'm working on a prototype for a web based application. For this prototype I need to create a lot of screens including forms. This is time consuming and not much fun if you need to change them every now and then. I would like to have something to:

Create forms quickly and easily
Modify forms quickly and easily
Generate the forms as (semantic) HTML so I can create a click through prototype

basically I would like to have something like Markdown to generate forms. I really like the fact that the syntax is simple and readable. So I came up with Formdown. I implemented a javascript version of Formdown. This still needs some work. I needed it quickly so the code might need some optimization. Please contact me if you would like to port this to other languages or if you have ideas to improve this version.

Update 2006-04-06: This version has bugs (fieldset don't work under IE, definition data isn't closed etc.)! I will fix them, but I'm not sure when.

Syntax

Start a form:

%get|post action id

Start a fieldset (legend is optional):

+ Legend ---------------

Close a fieldset (dashes are optional):

+-----------------------

Field label (exclamation mark indicates required field):

Field label !:

Buttons:

{{Submit button}} {Other button}

Input fields must be preceded by a label

Text input:

[_____________]
[_Value_]

Textarea:

[[_____________]]
[[_Value_]]

Select:

> Option
>* Selected option

Checkbox:

[ ] Unchecked
[*] Checked

Radio button:

( ) Unchecked
(*) Checked

Formdown example

Input:

%get action.do myform

+ Personal data -----------------

Name            !: [_Jasper de Vries_]
Nickname         : [________]
Gender           : (*) male
                   ( ) female
Interests        : [*] Blogger
                   [*] speed skating
                   [ ] rain
Select something : > First option
                   >* Second option is selected
                   > Third option is no option
Remarks          : [[__________]]

+--------------------------------

{{Submit}} {Cancel}

Output:

<form method="get" action="action.do" id="myform">
<fieldset>
<legend>Personal data</legend>
<dl>
<dt><strong>Name</strong></dt>
<dd>
<input type="text" value="Jasper de Vries" />
<dt>Nickname</dt>
<dd>
<input type="text" value="" />
<dt>Gender</dt>
<dd>
<label><input type="radio" checked="checked"/> male</label><br />
<label><input type="radio" /> female</label><br />
<dt>Interests</dt>
<dd>
<label><input type="checkbox" checked="checked"/> Blogger</label><br />
<label><input type="checkbox" checked="checked"/> speed skating</label><br />
<label><input type="checkbox" /> rain</label><br />
<dt>Select something</dt>
<dd>
<select>
<option>First option</option>
<option selected="selected">Second option is selected</option>
<option>Third option is no option</option>
</select>
</dd>
<dt>Remarks</dt>
<dd>
<textarea cols="60" rows="6"></textarea>
</dd>
</dl>
</fieldset>
<p class="buttons">
<button type="submit" class="Submit">Submit</button>
<button type="button" class="Cancel">Cancel</button>
</p>
</form>

Tags:

Single left click tab opener user script

2006-03-08T21:50:00.000+01:00

I browse a lot on my laptop. Since my laptop has a touchpad without a middle mouse button I need to right click links and then select "Open link in new tab". Not a big deal really, but I would like to be able to open new tabs easier. I thought up two ways to do this using a Greasemonkey user script:

When you have your pointer on a link create a new link near the pointer which opens the link in a new tab.
Open a new tab when you keep the left mouse button down for a while.

I choose the second option. The single left click tab opener user script was born.

Update 2006-02-21: I know that you could use Ctrl + Left click in Firefox to open links in a new tab. Since I can't use my left arm fully the Ctrl key isn't really an option for me.

Tags:

Show links to embedded media user script 0.4

2006-02-28T22:12:00.000+01:00

I've updated the Embedded media linker (original post) user script for Greasemonkey.

Improved positioning using the positioning method I used in my select element filter user script.
embed tags nested in an object tag now overwrite the object tag.
You can now exclude embedded media by mime type. This method is more reliable than excluding extensions.
The link is now inserted above the embedded media. When the embedded media was placed in a popup window the link sometimes wasn't visible.

Tags:

No more custom comments form for me

2006-02-05T16:54:00.000+01:00

Since I was unable to get the spam protection working in all browsers I had the normal custom comments form on my blog. The last few weeks I've been getting more and more spam posts. So I've decided to remove the custom comments form and to replace it with the Blogger popup version.

An other down side to the custom form was that you wouldn't get feedback when you used HTML tags that aren't allowed by Blogger. So no hard feelings. It's a change for the better from a usability point of view as well.

Tags:

Blogger Markdown support user script improved

2006-01-23T21:48:00.000+01:00

I've updated the Blogger Markdown support user script (original post) for Greasemonkey.

Improvements:

Preview now shows Markdown converted to HTML.
Added a link to the Markdown syntax page (open's in a new tab).

Tags:

Positioning elements inserted by a user script

2006-01-22T21:22:00.000+01:00

I needed to insert an anchor element before an other element in my Select element filter user script because I wanted the anchor to fit in the page's existing tab order. Also, I didn't want the anchor to push the other element to the right, so it needed to be positioned absolutely. You might know that you need to position absolute positioned element relative to the root elements or the first non-static positioned parent node. Here's the javascript code I used to determine the anchor's position:

var posY = 0;
var posX = 0;
var currOffsetParent = elementToInsertBefore;
do {
  if (
    document.defaultView.getComputedStyle(currOffsetParent, null)
    .getPropertyValue('position') == 'static'
  ) {
    posY += currOffsetParent.offsetTop;
    posX += currOffsetParent.offsetLeft;
  }
  else break;
} while (currOffsetParent = currOffsetParent.offsetParent);

Tags:

Select element filter user script: no longer experimental

2006-01-22T19:31:00.000+01:00

Finally, the Filter large form selects user script for Greasemonkey is no longer experimental. I decided to fix the two biggest problems of this script: poor positioning and poor usability.

Here's a detailed improvements list:

Improved, I think even perfect, positioning.
The select element is no longer sized, moved or modified. An separate select element is inserted to display the filter results and the magnifier is positions absolutely.
It no longer breaks selects with optgroups because of the separate results select.
Esc key now closes the filter.
You can select a result using the mouse now.
You no longer need to tab twice to focus the next form field.
The select's onchange function will be executed when the select was changed by the filter (this was broken since Greasemonkey 0.6.4).

Tags:

Quick and clean blogging using Markdown

2006-01-21T22:18:00.000+01:00

I like to write posts in 'Edit HTML' mode because I want to have clean, semantic HTML on my blog. I'm happy that I can use Markdown now to write my posts and convert them to HTML using my user script (based on js-markdown) because this is much faster then writing HTML.

My post announcing the user script had little info on Markdown. I'm not going to copy the complete Markdown syntax here, but I will put a short example in this post to give you an indication of how Markdown can help you writing HTML.

Markdown example:

# Clean & quick HTML writing

This is a [Markdown](http://daringfireball.net/projects/markdown/) example.
It is intended to be as *easy-to-read* and *easy-to-write* as is feasible.

* List item 1 **strong**
* List item 2 `code`

> Blockquoted text

Resulting HTML:

<h1>Clean &amp; quick HTML writing</h1>

<p>This is a <a href="http://daringfireball.net/projects/markdown/">Markdown</a> example.
It is intended to be as <em>easy-to-read</em> and <em>easy-to-write</em> as is feasible.</p>

<ul>
<li>List item 1 <strong>strong</strong></li>
<li>List item 2 <code>code</code></li>
</ul>

<blockquote>
  <p>Blockquoted text</p>
</blockquote>

Tags:

Omroep.nl direct video link VPRO, ASF and Lama's

2006-01-19T21:33:00.000+01:00

This one is for the Dutch readers:

Het Omroep.nl video's direct linken user script (oorspronkelijke post) voor Greasemonkey is verbeterd:

Er wordt niet meer aangenomen dat een video bb.iets.rm heet. Door deze aanname konden nieuwe video's van de VPRO niet bekeken worden.
Als er een directe link naar een video (rm of asf) gemaakt kan worden wordt dit (nu beter) gedaan. Dit is handig op bijvoorbeeld tv op je pc.
Als er via de uitzendinggemist-mediaplayer (de popup) geen breedband rm-video gevonden wordt (Avro.. grr) dan wordt de asf-versie gepakt.
Op de site van de Lama's wordt de functie die een popup verzaakt als je een aflevering wilt kijken overschreven door een functie die de video direct toont.

Tags:

Jasper's Google Reader subscribe user script

2006-01-09T22:50:00.000+01:00

I was using Johan's Google Reader Subscribe user script (see the post on his blog) for some time now. I just loved it. The only downside was that it draw a lot of attention and it slowed scrolling down on my laptop. If you've got the same problem you might like Jasper's Google Reader subscribe user script for Greasemonkey. It was designed to use as little screen size as possible. It only adds a feed icon in the top right corner. When you mouse over the feed icon the subscribe links are shown.

I could copy Johan's code but I chose to rewrote the code to experiment with XPath queries. Man, they are powerful!

0.2

Implemented improvement suggested by Chris Wetherell.

Tags:

Userscripts.org myaccount improvements user script

2006-01-08T21:14:00.000+01:00

After writing a post on userscripts.org improvement suggestions, I decided that I would write a userscripts.org myaccount improvements user script for Greasemonkey to improve some things on the myaccount page:

Scripts are sorted alphabetically
Rating and number views are displayed
Last comment is displayed

Tags:

Google open all can now open HTML versions

2006-01-07T21:32:00.000+01:00

Thanks to Esquifit's feedback, the Google open all user script (original post) for Greasemonkey can now open HTML versions of PDF files, Word documents etcetera.

It is also no longer based on the first div on the result page which made it interfere with others scripts.

Tags:

Custom Blogger backlinks speed up

2006-01-07T16:50:00.000+01:00

Two moths ago I published a post on how to custom format your Blogger backlinks. The only downside on this script is that your MainOrArchivePage will appear slow because after each item a small Javascript needs to be loaded from blogger.com. Today I wrote a speed up for this. I now only insert a placeholder span and do the rest of the needed scripting at the bottom of the page.

Here is the script to place on the MainOrArchivePage (after the link to the comments for example):

<script type="text/javascript">
//<![CDATA[
document.write('&middot; <a href="<$BlogItemPermalinkUrl$>#links">Links: <span id="BLc<$BlogItemNumber$>">?</span></a>');
if (! BL_BacklinkCount) var BL_BacklinkCount = new Array();
BL_BacklinkCount['<$BlogItemNumber$>'] = document.getElementById('BLc<$BlogItemNumber$>');
//]]>
</script>

Here is the script to put at the bottom of your page (after the Blogger close tag):

<MainOrArchivePage>
<script type="text/javascript">
//<![CDATA[
for (var item in BL_BacklinkCount) {
  document.write('<script type="text/javascript" src="http://www.blogger.com/dyn-js/backlink_count.js?blogID=<$BlogID$>&postID='+ item +'"></scr'+'ipt>');
}
//]]>
</script>
</MainOrArchivePage>

Tags:

Userscripts.org improvement suggestions

2006-01-06T22:39:00.000+01:00

Userscript.org is a great initiative, it really is. Jesse and Britt are doing a great job responding to feedback e-mails, adding feature and even helping me out by resetting my password in the days you were unable to do it your self. However, there are a few things that I would like to see improved or added.

Most important, in my opinion, is an option to be able to receive an e-mail when someone adds a comment to a script you have written. I visit userscript.org every now and then having to go by all my script to find out if there are new comments.
When I did a comment check run tonight I found out that my Blogger tag adder script had gotten a negative rating. It would be nice if you could (be forced to) leave a motivation with the rating. My scripts may not be perfect, or you might not like them, but I would like to know why. Also the number of raters would be interesting.
I would be nice to have a (filtered) RSS feed on new user scripts.
A search box every page would be handy. This can be Greasemonkeyed - in fact, it has been done.

I hope these ideas will be implemented in the coming version of userscripts.org.

Update 2006-01-07: How could I forget this one:

Users scripts on your accounts page should be sorted alphabetically.

Update 2006-01-08: I wrote a user script to improve some things on the myaccount page.

Tags:

Markdown textareas user script

2006-01-05T22:06:00.000+01:00

What the heck. After writing a Blogger Markdown support user script for Greasemonkey I could as well write a Markdown textareas user script. It is also based on js-markdown and it enables you to convert Markdown formatted text in textareas to HTML in one single click.

Tags:

Blogger Markdown support user script

2006-01-05T21:19:00.000+01:00

When you prefer to write your posts in HTML, you might be pleased to hear that I've created a Blogger Markdown support user script for Greasemonkey. It is based on js-markdown and it enables you to convert Markdown formatted text to HTML in one single click.

0.2

Preview now shows Markdown converted to HTML.
Added a link to the Markdown syntax page (open's in a new tab).

0.1

Initial version

Tags:

Hotmail rich composer for Firefox 1.5 and Greasemonkey 0.6.4

2006-01-04T21:37:00.000+01:00

After many requests for a version of the Hotmail rich composer user script (original post) that would work in Firefox 1.5 with Greasemonkey 0.6.4 I finally had time to update it.

This script had my lowest priority since I don't use Hotmail that much and I expected that Microsoft would upgrade Hotmail (which hasn't happened yet). There was also a lot of code rewriting involved and little time available.

Tags:

Blogger tag adder for restyled BlogThis!

2006-01-03T21:59:00.000+01:00

I've updated the Blogger tag adder user script (original post) again (grumbl) so you can use it on the restyled BlogThis!.

Tags:

Jagshemash, Happy new year!

2006-01-01T12:03:00.000+01:00

Best wishes for 2006!

Blogger thinks this is spam

2005-12-23T00:48:00.000+01:00

After my last post, just moments ago, I noticed that word verification was added to the Blogger post editor for this blog. Apparently Blogger thinks this is spam:

Blogger's spam-prevention robots have detected that your blog has characteristics of a spam blog. (What's a spam blog?) Since you're an actual person reading this, your blog is probably not a spam blog. Automated spam detection is inherently fuzzy, and we sincerely apologize for this false positive.

Before we can turn off mandatory word verification on your posts we'll need to have a human review your blog and verify that it is not a spam blog. Please fill out the form below to get a review.

Find out more about how Blogger is fighting spam blogs.

I hope to get a review soon. Oh, and if the reviewer reads this: word verification seems to break the post preview feature.

Update 2006-01-08: Today my Blog was reviewed and whitelisted. I was just used to the word verification but I guess this is goodbye.

Blogger tag adder can now be used on BlogThis!

2005-12-23T00:32:00.000+01:00

I've updated the Blogger tag adder user script (original post) so you can use it on BlogThis! as well.

Tags:

Blogger tag adder now supports compose mode

2005-12-20T22:11:00.000+01:00

I've updated the Blogger tag adder user script (original post) to work under compose mode.

Tags:

Keep the keep current time checkbox visible

2005-12-20T21:55:00.000+01:00

Blogger added an option to toggle post and comment options some time ago. I really don't like this feature, especially not after Improbulus found out that you would get in to trouble when you edit comments and change the time. So I changed the keep current time user script (original post) to keep the post and comment options visible all the time; I want to see what I'm doing.

Tags:

Edit Blogger comments for Greasemonkey 0.6.4

2005-12-19T23:06:00.000+01:00

I've updated the Blogger comments editor user script (original post) to work with Greasemonkey 0.6.4.

Tags:

Large post editor for Greasemonkey 0.6.4

2005-12-19T21:29:00.000+01:00

I've updated the Blogger large post editor user script (original post) to work with Greasemonkey 0.6.4.

Tags:

Google open all for Greasemonkey 0.6.4

2005-12-18T14:12:00.000+01:00

I've updated the Google open all user script (original post) to work with Greasemonkey 0.6.4.

Tags:

Keep current time post editing trap fixed

2005-12-13T23:05:00.000+01:00

I've updated the keep current time user script (original post). The checkbox will not be automatically checked when you edit a comment. Thanks to Improbulus for pointing out the post editing trap.

Tags:

Blogger tag adder for Greasemonkey 0.6.4

2005-12-11T20:07:00.000+01:00

I've updated the Blogger tag adder (original post) to work with Greasemonkey 0.6.4.

Tags:

Select element filter for Greasemonkey 0.6.4

2005-12-08T22:15:00.000+01:00

I've updated the select element filter user script (introduction) to work with Greasemonkey 0.6.4.

Tags:

Omroep.nl direct video link for Greasemonkey 0.6.4

2005-12-04T14:50:00.000+01:00

This one is for the Dutch readers:

Het user script dat breedband RealVideo video’s op uitzendinggemist.nl direct in de RealPlayer opent in plaats van in de gehate popup is aangepast voor Greasemonkey 0.6.4.

Tags:

Button element styling bug in Firefox

2005-11-21T20:12:00.000+01:00

I prefer to use button elements in stead of input elements for buttons. When I was trying to create a button of flexible width using two background images, I ran into a nasty styling bug in Firefox regarding buttons: you can't set the padding to 0!

Example HTML:

<button type="submit"><span>A button</span></button>

Example CSS:

button {
  width: 80px;
  height: 24px;
  padding: 0;
  background: #f00;
  border: 0;
}

button span {
  display: block;
  width: 80px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #00f;
}

Result: (this should be a be a blue button without any red showing).

Tags:

Show links to embedded media user script updated (again)

2005-10-30T18:00:00.000+01:00

I've updated the Greasemonkey user script which adds links to embedded media again. I've improved positioning and extension detection.

Tags:

Show links to embedded media user script updated

2005-10-29T20:52:00.000+02:00

I've updated the Greasemonkey user script which adds links to embedded media. You can now exclude media by extension and I've added some basic styling.

Tags:

Show links to embedded media user script

2005-10-23T20:10:00.000+02:00

I can't recall how often I've looked up the URL of an embedded video or Flash file in the HTML source or page info (Firefox). So I wrote a Greasemonkey user script to add a link to the embedded media.

0.4

Improved positioning using the positioning method I used in my select element filter user script.
embed tags nested in an object tag now overwrite the object tag.
You can now exclude embedded media by mime type. This method is more reliable than excluding extensions.
The link is now inserted above the embedded media. When the embedded media was placed in a popup window the link sometimes wasn't visible.

0.3

Improved positioning and improved extension detection.

0.2

You can now exclude media by extension and I've added some basic styling.

Tags:

Omroep.nl direct video link user script

2005-10-22T14:47:00.000+02:00

This one is for the Dutch readers:

Ik kijk vaak televisie op uitzendinggemist.nl. Al geruime tijd was ik me aan het ergeren aan het feit dat de video's in een popup getoond worden. Het was dus weer eens tijd om een Greasemonkey user script te schrijven.

Het omroep.nl video's direct linken user script is gister geboren. Het opent breedband RealVideo video’s direct in de RealPlayer in plaats van in de gehate popup.

0.5

Bij een Window Media Player video krijg je geen wit scherm meer, maar blijf je op de huidige pagina.
In overzichten is een checkbox toegevoegd waarmee je de lijst tot de afgelopen week kunt beperken.

0.4

Aangepast voor de vernieuwde uitzending gemist site.

0.3

Er wordt niet meer aangenomen dat een video bb.iets.rm heet. Door deze aanname konden nieuwe video's van de VPRO niet bekeken worden.
Als er een directe link naar een video (rm of asf) gemaakt kan worden wordt dit (nu beter) gedaan. Dit is handig op bijvoorbeeld tv op je pc.
Als er via de uitzendinggemist-mediaplayer (de popup) geen breedband rm-video gevonden wordt (Avro.. grr) dan wordt de asf-versie gepakt.
Op de site van de Lama's wordt de functie die een popup verzaakt als je een aflevering wilt kijken overschreven door een functie die de video direct toont.

0.2

Aangepast voor de Greasemonkey 0.6.4.

0.1

Eerste versie.

Tags:

Using CSS to display accesskeys

2005-10-10T20:37:00.000+02:00

Reading Going to Print by Eric Meyer I discovered the CSS attr function. Eric used it to show the href attribute for anchors in the print style sheet. You can also use this function to show accesskeys in the screen style sheet:

a[accesskey]:after {
  text-transform: uppercase;
  content: ": " attr(accesskey);
}

Tags:

CSS styling definition lists

2005-10-09T19:28:00.000+02:00

Richard informed me he had problems styling the definition list used in my custom Blogger comments form in combination with Blogger backlinks.

He is using using absolute positioning, a styling method I explained in my post on semantic forms:

form dt {
  position: absolute;
  z-index: 2;
}

form dd {
  position: relative;
  padding-left: 100px;
}

Absolute positioning may get you in trouble some times. Another way of styling definition list is by floating the definition title in the left margin of the definition data:

form dt {
  float: left;
  width: 95px;
  white-space: nowrap;
  overflow: hidden;
}

form dd {
  margin-left: 100px;
}

Note: floating may get you in trouble some times as well. Just try which method suites you best.

Tags:

Blogger backlinks the custom way

2005-10-09T17:14:00.000+02:00

Blogger now offers backlinks. It's a sort of trackback system, but not quite.

Blogger has put a help article online on how to enable backlinking. Read it if you want to use the non custom Blogger version of backlinking. If you want custom backlinking just paste these bits of code to your template (you don't need to make the settings described in the help article).

On your MainOrArchivePage (after the link to the comments for example):

<script type="text/javascript">
//<![CDATA[
if (! BL_BacklinkCount) var BL_BacklinkCount = new Array();
BL_BacklinkCount['<$BlogItemNumber$>'] = document.createElement('span');
//]]>
</script>
<script type="text/javascript" src="http://www.blogger.com/dyn-js/backlink_count.js?blogID=<$BlogID$>&postID=<$BlogItemNumber$>"></script>
<script type="text/javascript">
//<![CDATA[
document.write(
  ' &middot; <a href="<$BlogItemPermalinkUrl$>#backlinks">Backlinks: '+
  BL_BacklinkCount['<$BlogItemNumber$>'].innerHTML +'</a>'
);
//]]>
</script>

Update 2006-01-07: I did a rewrite to speed this part up.

On your ItemPage (after the comments for example):

<script type="text/javascript">
//<![CDATA[
var BL_Backlinks = new Array();
//]]>
</script>
<script type="text/javascript" src="http://www.blogger.com/dyn-js/backlink.js?blogID=<$BlogID$>&postID=<$BlogItemNumber$>"></script>
<script type="text/javascript">
//<![CDATA[
if (BL_Backlinks && BL_Backlinks.length) {
  document.write('<div id="backlinks"><a name="backlinks"></a><h3>Backlinks</h3><dl>');
  for (var i = 0; i < BL_Backlinks.length; i++) {
    document.write(
      '<dt><a href="'+ BL_Backlinks[i]["BlogBacklinkURL"] +'">'+ BL_Backlinks[i]["BlogBacklinkTitle"] +'</a></dt>'+
      '<dd>'+ BL_Backlinks[i]["BlogBacklinkSnippet"] +'<a name="t'+ i +'"></a><p>'+
      BL_Backlinks[i]["BlogBacklinkAuthor"] + ' &middot; '+ BL_Backlinks[i]["BlogBacklinkDateTime"] +'</p></dd>'
    );
  }
  document.write('</dl></div>');
}
//]]>
</script>

Here is an example page with backlinks.

Tags:

Form data rescue user script

2005-10-08T17:05:00.000+02:00

I wrote my own Form data rescue user script after some problems loosing data.

This week I was internet banking. After I had all the transaction information (including a 16 digit number) the internet banking site came up with a lame error. I've had this error before and knew that you'd just have to try it again. Too bad all the form data was gone.

Last week I had the same problem when I was writing a post to my personal blog: Blogger came up with an error and all the data was gone. Recover post also didn't work.

After the internet banking incident I knew I needed a Greasemonkey user script. On Userscripts.org I found the Auto save forms user script. This script has two down sides:

The data is cleared when the form is submitted.
The data is stored in a cookie, which are limited in number and per cookie data.

So I wrote my own Form data rescue user script. Features:

Data is (permanently) stored using GM_setValue.
Data will not be cleared when the form is submitted.
The rescue function is placed in the User Script Commands menu (under Tools).

This script has a down side as well. I have chosen not to include all sites for this script since all the data will remain stored. If you would like data storage for a limited time, please check the Auto save forms user script.

Tags:

CSS parent combinator

2005-10-05T21:15:00.000+02:00

In an web application I'm working on I have a list of thumbnails to choose from. The HTML looks like this:

<dl>
  <dt><input type="radio" /></dt>
  <dd><img src="thumb.jpg" /></dd>
  ..
</dl>

Since the thumbnails are much bigger than the radio buttons it is hard to spot the selected image. I thought it would be nice to style the image based on the radio button's checked state. Too bad CSS doesn't have a parent combinator to use in the selector. I would have liked to use something like this:

input:checked < dt + dd img {
  border: 2px solid black;
}

This would also be useful to style selected rows on checkboxed tables.

When I was looking for a parent combinator I found out I wasn't the only one who would like to have a parent combinator.

Tags:

Select element filter user script (3)

2005-10-04T21:34:00.000+02:00

A few improvements on the select element filter user script for Greasemonkey:

The select's onchange function is now called when the select field is changed using the filter.
Added Page Up and Page Down support.
Improved positioning (still not perfect).

This script still has some quirks on some sites, but it also has proven to be useful on many sites. The selection list on TV op je PC (screenshot) is a good example where this script comes in useful.

Introduction of this script can be found in a previous post.

Tags:

Problem hiding Blogger navbar in Firefox using strict XHTML

2005-09-28T20:43:00.000+02:00

Blogger added some more lines to the block of HTML which is used for the navbar. When you use my XHTML strict safe hack to hide this navbar, you'll get the CDATA close tag the top of your page when you are using Firefox:

]]>

Somehow the new lines of HTML break the Firefox parser. The page's source is highlighted correctly strange enough.

There is a way to hide the CDATA close tag in this situation. Replace the existing hiding code:

<body>
<div class="hide"><![CDATA[<body>]]></div>

with:

<body>
<div class="hide">
<script type="text/javascript">
//<![CDATA[
/* <body> */
//]]>
</script>
</div>

Down side is that it will leave you with two Javascript errors. So it is far from perfect. And, yes, I know my site does not validate at the moment. Some time ago I thought it was a good idea to switch to HTML 4.01 strict which apparently was not. You will need XHTML to use this CDATA trick. I will convert my template back to XHTML soon.

Check Testvulsel to see this trick working. Testvulsel will validate as XHTML 1.0 strict.

Tags:

Opera's coolest feature

2005-09-21T18:57:00.000+02:00

You must have read it on all the web technology blogs: Opera is free now. If you haven't already got it, go and download it. Make sure that you set your user style to ‘Nostalgia’. That really must be Opera's coolest feature!

Tags:

Google open all user script no longer needs Firefox settings

2005-09-19T21:21:00.000+02:00

The Google open all (original post) user script for Greasemonkey now uses the GM_openInTab function. You no longer need to change any settings using about:config.

Thanks to Johan Sundström for dropping a comment on the GM_openInTab function.

Tags:

Custom Blogger comments form (4): spam protection

2005-09-19T20:44:00.000+02:00

After some problems with the regular expression I used to read cookies, I decided to do a little rewrite of the code. This cookie problem is fixed now. You'll find the new code below.

Spam protection was something I wanted to add. Too bad I didn't get it working on all my blogs in Internet Explorer (it worked fine in other browsers). I'll leave the code on this page and keep it embedded on my test blog for anyone who would like to test it. If anyone has ideas on how to get this working under Internet Explorer please let me now.

Note that you'll have to remove some lines if you want to use Blogger's spam protection and please read Blogger's help on spam protection first.

<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<script type="text/javascript">
//<![CDATA[
  var expires = new Date();
  expires.setFullYear(expires.getFullYear()+1);
  function setCookie(name, value) {
    document.cookie = name +'='+ escape(value) +'; expires='+ expires.toGMTString();
  }
  function getCookie(name) {
    var key = name + '=';
    var c = document.cookie;
    var i = c.indexOf(key);
    if (i < 0) return '';
    var j = c.indexOf(';', i + key.length);
    if (j < 0) j = c.length;
    return unescape(c.substring(i + key.length, j));
  }
  function trim(text) {
    return text.replace(/^\s+|\s+$/g, '');
  }
  var bgPosted = false;
  function cFrmPost() {
    with (cFrm) {
      anonName.value = trim(anonName.value);
      anonURL.value  = trim(anonURL.value);
      postBody.value = trim(postBody.value);
      if (anonName.value == '') {
        alert('Please enter your name');
        anonName.focus();
        return false;
      }
      if (postBody.value == '') {
        alert('Please enter a comment');
        postBody.focus();
        return false;
      }
      anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
    }
    bgPosted = true;
    return true;
  } 
  function bgpostLoad() {
    if (bgPosted == true) {
      if (cFrm.remember.checked) {
        setCookie('anonName', cFrm.anonName.value);
        setCookie('anonURL', cFrm.anonURL.value);
      }
      window.location.reload();
    }
  }
//]]>
</script>
<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>" />
  <input type="hidden" name="postID" value="<$BlogItemNumber$>" />
  <input type="hidden" name="isPopup" value="false" />
  <input type="hidden" name="iden" value="Other" />
</div>
<dl>
  <dt><label for="uname">Name</label></dt>
  <dd><input type="text" id="uname" name="anonName" maxlength="100" /></dd>
  <dt><label for="url">Homepage</label></dt>
  <dd><input type="text" id="url" name="anonURL" maxlength="100" /></dd>
<!-- START SPAM PROTECT remove comment to enable
  <dt><label for="captcha">Word verification</label></dt>
  <dd>
    <img src="http://www.blogger.com/captcha?postID=<$BlogItemNumber$>" height="70" width="200" alt="Verification image" />
    <br /><input type="text" id="captcha" name="captcha" /><br />
    This is <a href="http://help.blogger.com/bin/answer.py?answer=1203">spam protection</a>.
    Please enter the text in the image above to leave your comment.
  </dd>
END SPAM PROTECT remove comment to enable -->
  <dt><label for="comment-body">Comment</label></dt>
  <dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
  var cFrm = document.getElementById('cFrm');
  cFrm.target = 'bgpost';
  cFrm.onsubmit = function(){return cFrmPost()};
  if (document.cookie != '') {
    cFrm.anonName.value = getCookie('anonName');
    cFrm.anonURL.value = getCookie('anonURL');
  }
  cFrm.postBody.value = '';
  if (cFrm.captcha) cFrm.captcha.value = '';
  document.write(
    '</dd><dd><input type="checkbox" id="remember">'+
    ' <label for="remember">Remember me</label>'
  );
//]]>
</script>
  </dd>
</dl>
<p><input type="submit" name="post" value="Post" /></p>
</form>

How to use this code on your blog? It's simple. Search your template for </BlogItemComments>. After it you should paste the code. Now change the link to the comments. Your don't want it to point to the standard form.

<a href="<$BlogItemPermalinkUrl$>#comments">Comments (<$BlogItemCommentCount$>)</a>

You can also download an example of how to embed it in Douglas Bowman's Minima template.

Tags:

IE doctype prolog and strict mode

2005-09-16T09:42:00.000+02:00

A week and a half ago I wondered what IE 7 would do if you would have comment before the doctype. IE 6 is thrown in quirks mode when you have got anything before the doctype. John A. Bilicki commented on the IEBlog that it would throw IE 7 in quirks as well.

There is a new post on IEBlog on the <?xml> prolog, strict mode, and XHTML in IE by Chris Wilson where he writes:

I realized as I read through the comments to my last blog post that I forgot to mention one important item that was in my presentation. We have fixed the DOCTYPE switch so it will skip an XML prolog, so that valid XHTML can be handled in strict compliance mode rather than quirks mode.

Tags:

‘Remember me’ disabled in comments

2005-09-15T09:28:00.000+02:00

I've disabled the ‘Remember me’ option in the comments form for now. There is a problem with cookies either form Firefox extensions or Blogger. Thanks to Jhon for pointing this out. This Sunday I've got time to fix this problem. I might add some new features as well.

Update 2005-09-18: problem solved.

Select element filter user script (2)

2005-09-08T21:28:00.000+02:00

I addressed the usability issue of the select element filter user script for Greasemonkey. The list is no longer accidentally gets filtered on the text value of the selected option. I now always show the select control which is a much better way of showing the selected option.

There are still a few points that need attention (positioning for example). I'll post a new version later this month.

Introduction of this script can be found in a previous post.

Update 2005-10-04: improved version is available.

Tags:

Experimental select element filter user script

2005-09-07T21:30:00.000+02:00

I got the idea for this Greasemonkey user script at work. We use a financial system with a HTML interface. The hour registration page has a fairly large project list. The items in the list are formatted this way: “Project code, client name abbreviation, project name”. I thought it would be a big help if I could select a project just by typing a part of the project name.

The select element filter user script was born. As the title of this post states, it is still experimental. It only converts select elements with more than 20 options, you're free to change that number if you like.

Try this script if you think it is useful to. I suggest not to use it on every page for now. There is still a small usability issue that needs to be addressed, but it works fine on select list of which you know the content. If you have any suggestions, questions or remarks, just let me know. I'll post an improved version later this week.

Update 2005-10-04: improved version is available.

Tags:

Root node wild card selector for IE only rules

2005-09-05T20:18:00.000+02:00

Justin Rogers wrote a post on IEBlog about improving the CSS 2.1 strict parser for IE 7. IE 7 skips * html selectors in strict mode. I wonder what happens if you use the “comment before doctype” hack to get IE 6 in quirks mode.

<!-- IE6 in quirks -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I anticipate that IE 7 will render in strict mode using the above hack.

Update: Using this hack will cause IE 7 to render in quirks mode according to John A. Bilicki.

Tags:

Javascript objects: accessing sibling functions

2005-09-04T17:41:00.000+02:00

I was messing around in Javascript to be able to access sibling functions in an object. Let's say you have the following code:

function MyObject(){
  this.click = function(){
    // Here I want to call myFunction
  }

  this.myFunction = function(){
  }

  whatever.addEventListener('click', this.click, false);
}

I used an ugly hack to access myFunction. I passed the object instance's variable name to the object as a parameter and used it to access the function using the eval function. Eew!

There is a far more simple way to do this. Create a variable in your object and assign this to it:

function MyObject(){
  var obj = this;

  this.click = function(){
    obj.myFunction();
  }

  this.myFunction = function(){
  }

  whatever.addEventListener('click', this.click, false);
}

Tags:

Vacation pictures

2005-09-04T00:43:00.000+02:00

For those of you who are interested: I've posted some vacation pictures on my personal (Dutch) blog.

Tags:

Blogger keep current time user script now auto checks

2005-09-02T21:18:00.000+02:00

The checkbox in the Blogger keep current time user script (original post) for Greasemonkey will now be automatically checked for new and for draft posts.

Note: I've renamed the script. You'll have to uninstall the script called ‘Blogger enhancements’ if you have the old version of the script installed.

Tags:

Blogger previous post link with accesskey in valid HTML

2005-08-31T22:47:00.000+02:00

I used this trick to create a previous post link. Basically you just generate the previous posts list where you start hiding items after you have displayed the first item. This method generates valid HTML and allows you to set an accesskey which only accesses the first (visible) item.

<BloggerPreviousItems>
  <a href="<$BlogItemPermalinkURL$>" accesskey="v">Previous:<br><$BlogPreviousItemTitle$></a>
  <div class="hide"><![CDATA[
</BloggerPreviousItems>
<div class="hide">]]></div>

Update 2005-09-01: Changed ‘next’ to ‘previous’ because it makes more sense this way.

Tags:

Accesskeys

2005-08-30T21:34:00.000+02:00

I've added accesskeys to this blog to enable easier and faster navigation. Added accesskeys:

A: Accesskeys link.
C: Comment textarea (item page only).
H: Home link.
L: Name field under ‘Leave your comment’ (item page only).
P: Post button (item page only).
S: Search field.

Tags:

Fixed user scripts for Greasemonkey 0.5.1

2005-08-29T22:14:00.000+02:00

I've fixed some of my user scripts for Greasemonkey 0.5.1. There were problems with the addEventListener function. I used it to execute scripts on window load to prevent Firefox from crashing on some scripts (which apparently was needed). With the new version of Greasemonkey that trick is no longer needed, and somehow addEventListener does no longer seems to be working on all users scripts in Greasemonkey. I haven't figured out yet what the problem exactly is.

Anyhow, you can find the scripts I've fixed over here:

Tags:

Blogger tag adder user script tab index

2005-08-23T20:45:00.000+02:00

The tags input field didn't have a tab index. This was annoying me for some time now. Tonight I had the time to update the Blogger tag adder user script (original post). I should have done this a long time ago, it was just to easy to fix.

Tags:

Use button elements, not input elements, for buttons

2005-08-22T14:14:00.000+02:00

I wanted to improve the buttons on the forms we use in web applications I was working on. Improvements I would like to make:

Adding accesskeys, which I would like to be underlined in the button.
visually differentiate specific buttons by adding an icons and changing the color.

The best way you can do this is by using the button element. This method has several advantages:

button elements can contain HTML.
button elements can be styled on Safari.
Your form will remain accessible.

Here is an example of HTML you could use:

<button accesskey="d" class="delete" type="button">
  <span class="icon">&nbsp;</span><em>D</em>elete
</button>

I use the button for a default button background image and the span for an icon. Here is an example of CSS you could use:

button {
  width: 100px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
  background: url("button.jpg");
  border: 0;
}
button:hover {
  background: 0 -25px url("button.jpg");
}
button em {
  font-style: normal;
  text-decoration: underline;
}
.delete .icon {
  padding-left: 14px;
  line-height: 25px;
  background: url("del_icon.gif") no-repeat 0 50%;
}

Tags:

Blogger edit (and permanently delete) comments user script

2005-08-17T22:33:00.000+02:00

I'm back from a rainy holiday. First thing I wanted to do when I was back home was improving the Blogger edit comments user script (original post). It had a few quirks and I wanted to be able to quickly and permanently delete unrelated comments. Here's the change list:

Removed Blogger's onclick which caused an extra window to be opened.
Corrected the title for the edit link.
Added a link to quickly and permanently delete comments.

Tags:

On vacation

2005-07-31T00:23:00.000+02:00

I'll be back August 15^th. So no posts until then.

Technorati language filter

2005-07-28T20:01:00.000+02:00

The same day I complained about Technorati's lack of language recognition it launched it's language filter. It currently is in beta (it only works on searches, not on tags and it supports the top 10 languages used in the ‘blogosphere’). At first I thought they might have an accessibility problem using Javascript to change the language, but it works fine when Javascript is turned off.

The interface might be accessible but it needs to be improvement. You can't select multiple languages. I would like to have results in English, Dutch and German.

Update 23:06: I've gotten a reply from Technorati on some feature requests.

Hi Jasper,
Thank you for your feedback. We currently envision giving our users the ability to store their language preferences along with their account data. We hope to expand the spectrum of international tools available to you while searching the blogosphere.

Technorati is currently re-architecting its authority measurements. We will have some new and improved ways for you to sort your search results on things like number of inbound links.

Thank you for contacting Technorati.

Niall Kennedy
Community Manager
Technorati

Tags:

Internet Explorer 7 beta 1

2005-07-28T09:17:00.000+02:00

Get your copy of Internet Explorer 7 beta 1 now! Too bad I don't have time to test it for the next two weeks.

Update 18:25: Anne van Kesteren and Hayo Bethlehem took a look at it.

Tags:

Things Technorati should do better

2005-07-27T20:39:00.000+02:00

I like the idea behind Technorati, but I've noticed that I don't really use it because of some weak points.

It doesn't recognize languages ². I only want to search for content in specific languages, or I want good translations of content in languages I don't speak.
Low performance from time to time. I don't like waiting for more than one or two seconds.
Not 100% reliable ¹. Yesterday I've posted something that still isn't indexed at this moment.
No ‘quality’ filter. Sites with more links are likely to have better content. I would like to be able filter on that. Then some tag RSS feeds are interesting to me.

I hope Technorati is able to improve on those points.

¹ Update 2005-07-28: The post I mentioned was indexed 7 hours ago. So Technorati might be reliable but indexing takes way too long.

² Update 2005-07-28: How about that: Technorati added language support yesterday!

I also have gotten a reply from Technorati on some feature requests.

Tags:

Blogger edit comments user script

2005-07-26T23:17:00.000+02:00

After reading a post explaining how to edit comments in Blogger I got an idea. I would like to integrate comments editing into the Blogger posts list. So, here is the Blogger edit comments (0.2.2) user script for Greasemonkey.

It adds a link to the comments in the posts list and it adds an edit link to edit each comment in the comments list:

0.2.2

Fixed it to work with Greasemonkey 0.6.4.

0.2.1

Fixed it to work with Greasemonkey 0.5.1. Thanks to Johan Sundström for pointing the problem out.

0.2

Removed Blogger's onclick which caused an extra window to be opened.
Corrected the title for the edit link.
Added a link to quickly and permanently delete comments.

0.1

Initial version.

Tags:

Internet Explorer's anchor name attribute problem

2005-07-21T20:10:00.000+02:00

This week I was working on our content management system. I needed to insert named anchors before specific DOM nodes. Doing so I found out that you are unable to set the name attribute of an anchor in IE. Take a look at the following code:

var div = document.createElement('div');
var a = document.createElement('a');
a.setAttribute('name', 'whatever');
div.appendChild(a);
alert(div.innerHTML);

You would expect an alert saying <a name="whatever"></a>. Execute the above code and see for yourself. I also tried using a.name = 'whatever' which also didn't work.

To meet the deadline I used the onload attribute instead and replaced <a onload by <a name afterwards. Not very pretty. Anyone any better ideas?

Tags:

Technorati search this site

2005-07-20T21:40:00.000+02:00

I have replaced Google with Technorati for searching this site. Technorati has a personal touch and has more options to navigate. If you want to add the search form to your blog, here's the HTML:

<div id="search">
  <h2>Technorati search this site</h2>
  <form action="http://www.technorati.com/search.php">
    <dl>
      <dt><label for="q">Query</label><dt>
      <dd>
        <input type="text" id="q" name="s">
        <input type="hidden" name="from" value="http://your.site.com">
      </dd>
    </dl>
  </form>
</div>

Tags:

Blogger tag adder user script

2005-07-20T21:14:00.000+02:00

Yes, another tag adder for Blogger. So, no credit for the idea. In my opinion there were small things missing in existing scripts. That's why I created my own script. Editing and styling tags where the most important to me.

Features of my Blogger tag adder (0.3.1) user script for Greasemonkey:

Tags can easily be modified on existing or draft posts as they are read back into the tag input field!
Tags are placed in a unordered list, which make them easy to style!
You can easily add sites to tag.
Separate tags using a comma.

Example of the generated HTML (in case of Technorati tags):

<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a>
<li><a href="http://www.technorati.com/tag/Security" rel="tag">Security</a>
</ul>
</div>

Example of CSS to use to get the tags next to each other:

.tags * {
  display: inline;
  margin: 0;
  padding: 0;
}

0.3.1

Update it to work on the restyled BlogThis!.

0.3

You can use this on BlogThis! as well now.

0.2.5

Added support for compose mode editing.

0.2.4

Fixed it to work with Greasemonkey 0.6.4.

0.2.3

Updated to work with my form data rescue script.

0.2.2

Fixed it to work with Greasemonkey 0.5.1. The fix in version 0.2.1 was no good.

0.2

Added tabindex.

0.1

Initial version.

Tags:

Custom Blogger comments form howto

2005-07-19T22:19:00.000+02:00

A lot of blogspot users have asked how to embed the custom comments form. I've put an example online of how to embed it in Douglas Bowman's Minima template. I hope this helps.

Tags:

Update Greasemonkey because of security hole

2005-07-19T19:19:00.000+02:00

You may have read this on every blog already. Just to be sure I'm also telling you to update Greasemonkey because of a problem in the GM APIs.

Tags:

Blogger large post editor user script

2005-07-18T22:19:00.000+02:00

Just like the Blogger template editor, the Blogger post editor really is too small. I wrote a Blogger large post editor user script for Greasemonkey. It makes the title field wider, but most important: it sets the editor's width to 100% and makes it higher. It works for both plain and rich editing.

You might also be interested in the Blogger large template editor.

0.1.3

Fixed it to work with Greasemonkey 0.6.4.

0.1.1

Fixed it to work with Greasemonkey 0.5.1.

0.1

Initial version.

Tags:

What is Blogger telling Technorati?

2005-07-17T10:32:00.000+02:00

I recently replaced the HaloScan trackback links by Technorati links (tags will be added later). You can configure Blogger to ping Technorati automatically when your blog is updated. I'm wondering what Blogger is telling Technorati. Somehow Technorati is linking my blog using kedarde.blogspot.com. Weird thing is: you will get Browservulsel when you go there.

Update 2005-07-18: This is no Blogger ping problem. Someone just tried to copy my template, which didn't work obviously.

Tags:

Favicon

2005-07-15T20:57:00.000+02:00

Blogger has added a favicon to all blogspot blogs some time ago. I never took the time to create one my self, until today. All the orange B's in my browser tabs where just too annoying.

Update 2005-07-16: a2xm requested a howto. So, here it is. Just create a 16×16px PNG image, put it online and add the following to your head section:

<link rel="shortcut icon" href="URL to your PNG">

Tags:

Custom Blogger comments form submit listener fixed

2005-07-14T20:27:00.000+02:00

I have fixed the custom Blogger comments form. I changed the submit listener because of a bug in it. In the old situation I used addEventListener to set the submit listener:

if (cFrm.addEventListener) {
  cFrm.addEventListener('submit', function(){return cFrmPost()}, false);
} else {
  cFrm.onsubmit = function(){return cFrmPost()};
}

addEventListener doesn't return the cFrmPost() return value. When you left the name field blank, you would be asked to fill in a name. At the same time the comment was posted as 'Anonymous'. Now I just use:

cFrm.onsubmit = function(){return cFrmPost()};

Thanks to Hinderik for pointing this out.

Tags:

CSS: clear floats on parent only

2005-07-13T21:51:00.000+02:00

Yet again, I had a problem with CSS. For a project I'm working on I've build page with a sidebar that floats right of the main content (the sidebar and the main content are siblings). The main content contains several floating images. I want those images to clear existing floats because I don't want images next to each other.

Problem is that the images appear under the floating sidebar. There is a way to solve it. Just use overflow: auto on the main content. Yes, overflow: auto saved the day again!

Tags:

CSS menu and overflow auto workaround

2005-07-12T21:24:00.000+02:00

Some time ago I wrote about a problem in Firefox 1.0.x when you combine a pure CSS menu followed by overflow: auto content.

Last week I found a simple solution: position the menu absolutely and make sure that it overlaps the content a few pixels. Problem fixed!

Tags:

Google Toolbar spell checker

2005-07-08T13:52:00.000+02:00

The spell checker in the Google Toolbar (beta available for Firefox) is cool! I always check my posts with the Blogger spell checker. The Google Toolbar version easier and faster. Brilliant!

Tags:

Web Content Accessibility Guidelines 2.0 draft

2005-07-03T12:17:00.000+02:00

W3C published the Web Content Accessibility Guidelines 2.0 working draft on 30 June 2005. A few points I'm very pleased with:

Table layouts

1.0 doesn't encourage you to use tables for layout. You can if you like as long if the table makes sense when linearized (1.0: checkpoint 5.3).

2.0 states that structures within the content should be programmatically determinable and that, when content is arranged in a sequence that affects its meaning, that sequence should be programmatically determinable (2.0: 1.3 L1 SC1 / L3 SC1). Something you can't do if you use a table for layout. However, to do this properly there are more semantic elements needed, like the ones described in Web Applications 1.0 working draft.

Non-text elements

1.0 states you have to provide a text equivalent for every non-text element (1.0: checkpoint 1.1).

2.0 is more nuanced. For example: non-text content that is not functional, is not used to convey information, and does not create a specific sensory experience should be implemented such that it can be ignored by assistive technology (2.0: checkpoint 1.1 L1 SC4).

Tags:

Updated custom Blogger comments form

2005-07-03T11:19:00.000+02:00

I have updated custom Blogger comments form: unescaped the data read from cookie, stripped http:// from the URL (Blogger simply adds http:// to the URL regardless if there already was a protocol) and removed mailto: (because it did't work).

Tags:

HTML coding with jEdit and the XML plugin

2005-06-30T00:17:00.000+02:00

I like to code HTML in stead of using a WYSIWYG tool. After using UltraEdit for years I tried jEdit. It is free and (even for a Java program) fast, but what I like most are the plugins.

Big time saver is the XML plugin. I just love the tag completion, close tag insertion and the option to validate your HTML against the DTD.

Tags:

What's with the clear: both, Blogger.com?

2005-06-24T21:27:00.000+02:00

Since a few days Blogger.com has added a div at the beginning and the end of each <$BlogItemBody$>. Prefix:

<div style="clear:both;"></div>

Suffix:

<div style="clear:both; padding-bottom: 0.25em;"></div>

Thanks for messing my blogs up, Blogger.com. There is a way to fix quirks because of this. My <$BlogItemBody$> is inside a <div class="body"> (which is standard I think). The fix is a simple CSS rule:

div.body div {
  display: none;
}

Update 2005-06-30: You can prevent the extra styled div's by setting the 'Enable float alignment' option to 'No' in your settings. Thanks to Pogenwurst for pointing this out.

Tags:

Non Javascript friendly way of hiding empty comments in Blogger

2005-06-17T10:52:00.000+02:00

This is a simple non Javascript friendly way, or hack if you like, to hide empty comments in Blogger. I know that you can find other ways to do this. I found some that use a CSS rule to hide the comments and then use Javascript to detect and display them. In my version, when Javascript is turned off, comments will be visible.

The trick is to put your comments in any tag with an id attribute, in my case with the value comments. Then, directly after you've opened that tag, you have to insert some Javascript to hide it:

var comments = document.getElementById('comments');
comments.style.display = 'none';

Then you have to insert your comments, in my case a (semantic) definition list. After the comments you'll need to insert some Javascript to detect and show the comments. In my case by finding out if there were any dd tags.

if (comments.getElementsByTagName('dd').length) {
  comments.style.display = 'block';
}

Update: stupid me. There is a better way to check comments... just use <$BlogItemCommentCount$>.

if (<$BlogItemCommentCount$> > 0) {
  comments.style.display = 'block';
}

Tags:

New style sheet

2005-06-14T21:37:00.000+02:00

The old look this site had was a bit boring. I experimented a bit with large text sizes and this is the result for now. You might like it or you might not. I'm not sure for how long I'm going to keep this design.. but I like it for the moment.

There was no reason for using XHTML, so I also changed the doctype to HTML 4.01 strict.

Tags:

Link to standard blogger.com form user script

2005-06-12T19:34:00.000+02:00

If you are using my custom Blogger comments form on your blog you might want to have a link to the standard Blogger comments form in case you want to delete a comment. Time for another Greasemonkey user script: Blogger link standard comments form. It adds the link to the bottom of the custom form.

You might also be interested in the Blogger edit comments user script.

Tags:

Google open all user script v0.2

2005-06-10T00:04:00.000+02:00

I've made some additions to the Google open all user script. You can now make settings which are stored in a cookie. Settings are: maximum number of results to open, option to skip indented results and an option to reverse the open order (bottom up in stead of top down).

Tags:

Blogger large template editor user script

2005-06-08T21:44:00.000+02:00

The Blogger template editor really is too small. I wrote a Blogger large template editor user script for Greasemonkey. It hides the navbar setting and doubles the editor's height.

Update 2005-07-19: You might also be interested in the Blogger large post editor.

Tags:

Custom Blogger comments form (3)

2005-06-08T21:14:00.000+02:00

Update 2005-09-18: Please see Custom Blogger comments form (4): spam protection. The article below is old.

This is the comments form I'm currently using. Like I wrote two days ago, this version doesn't show the Blogger screen after you post a comment. In this version I've added a 'remember me' function which uses cookies to store the data. When Javascript is disabled posting the form still works. You'll get the Blogger screen in that case though (duh!).

For those who like to copy and paste:

<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>"/>
  <input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
  <input type="hidden" name="isPopup" value="false"/>
  <input type="hidden" name="iden" value="Other"/>
</div>
<dl>
  <dt><label for="uname">Name</label></dt>
  <dd><input type="text" id="uname" name="anonName" maxlength="100"/></dd>
  <dt><label for="url">Homepage</label></dt>
  <dd><input type="text" id="url" name="anonURL" maxlength="100"/></dd>
  <dt><label for="comment-body">Comment</label></dt>
  <dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea></dd>
<script type="text/javascript">
//<![CDATA[
  document.write('<dd><input type="checkbox" id="remember"> <label for="remember">Remember me</label></dd>');
//]]>
</script>
</dl>
<script type="text/javascript">
//<![CDATA[
  var bgPosted = false;
  var cFrm = document.getElementById('cFrm');
  cFrm.target = 'bgpost';
  cFrm.onsubmit = function(){return cFrmPost()};
  if (document.cookie != '') {
    cFrm.anonName.value = unescape(document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1'));
    cFrm.anonURL.value = unescape(document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1'));
  }
  cFrm.postBody.value = '';
  function cFrmPost() {
    with (cFrm) {
      anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
      anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
      postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
      if (anonName.value == '') {
        alert('Please enter your name');
        anonName.focus();
        return false;
      }
      if (postBody.value == '') {
        alert('Please enter a comment');
        postBody.focus();
        return false;
      }
      anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
    }
    bgPosted = true;
    return true;
  } 
  function bgpostLoad() {
    if (bgPosted == true) {
      if (cFrm.remember.checked) {
        var expires = new Date();
        expires.setFullYear(expires.getFullYear()+1);
        document.cookie = "anonName=" + escape(cFrm.anonName.value) + "; expires=" + expires.toGMTString();
        document.cookie = "anonURL=" + escape(cFrm.anonURL.value) + "; expires=" + expires.toGMTString();
      }
      window.location.reload();
    }
  }
  document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>');
//]]>
</script>
<div class="buttons">
  <input type="submit" name="post" value="Post"/>
</div>
</form>

Update: You might want to have a link to the standard blogger.com form when you use this.

Update 2005-07-03: Changed a few things: unescaped the data read from cookie, stripped http:// from the URL (Blogger simply adds http:// to the URL regardless if there already was a protocol) and removed mailto: (because it did't work).

Update 2005-07-13: Changed the submit listener. addEventListener did't return the cFrmPost() return value.

Update 2005-07-16: How to use this code on your blog? It's simple. Search your template for </BlogItemComments>. After it you should paste the code. Now change the link to the comments. Your don't want it to point to the standard form.

<a href="<$BlogItemPermalinkUrl$>#comments">Comments (<$BlogItemCommentCount$>)</a>

Update 2005-07-19: how to embed it in Douglas Bowman's Minima template.

Update 2005-09-18: See Custom Blogger comments form (4): spam protection

Tags:

Custom Blogger comments form (2)

2005-06-06T23:41:00.000+02:00

There is a way to get rid of the different looking Blogger screen after the post has been processed. The trick is an iframe with an onload.

<form name="commForm" action="http://www.blogger.com/login-comment.do" method="post" onsubmit="bgposted=true">
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>"/>
  <input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
  <input type="hidden" name="isPopup" value="false"/>
  <input type="hidden" name="iden" value="Other"/>
  <label for="uname">Name</label>
  <input type="text" id="uname" name="anonName" maxlength="100"/><br/>
  <label for="url">http: mailto:</label>
  <input type="text" id="url" name="anonURL" maxlength="100"/><br />
  <label for="comment-body">Comment</label>
  <textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea><br />
  <input type="submit" name="post" value="Post"/>
</div>
</form>
<script type="text/javascript">
var bgposted = false;
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="if(window.bgposted==true){window.location.reload()}"></iframe>');
document.forms.commForm.target = 'bgpost';
</script>

Update 2005-06-08: See Custom Blogger comments form (3)

Tags:

Google open all user script

2005-06-05T17:43:00.001+02:00

When I'm doing a Google search most of the times I just open all the links on the first page in new tabs. The Google open all user script for Greasemonkey was born. It adds a link at the top of the search results to open all (or some) results in a new window.

0.6.1

Fix for new HTML structure at Google.

0.6

Added the quick language switch. Configure this feature by changing or adding the locales on the following line:

var searchLangs = "nl|en|de";

0.5

fixed it to work with Google's restyled HTML output.

0.4

Option to open HTML version of PDF, DOC etc.
No longer based on the first div on the page which made it interfere with others scripts.

0.3.2

Updated to work under Greasemonkey 0.6.4.

0.3.1

Replaced cookies to store data with the GM_setValue and GM_getValue functions.

0.3

Now uses the GM_openInTab function. You no longer need to change any settings using about:config.

0.2.2

Fixed it to work with Greasemonkey 0.5.1.

0.2.1

Works in combination with Google suggest.

0.2

You can now make settings which are stored in a cookie. Settings are: maximum number of results to open, option to skip indented results and an option to reverse the open order (bottom up in stead of top down).

0.1

Initial version.

Tags:

Hotmail rich composer user script

2005-06-02T21:41:00.000+02:00

I don't use Hotmail a lot. But when I do, I use Firefox most of the time. I think Microsoft did a bad job on the Mozilla version of the composer. Yesterday I've had it and decided to write a Hotmail rich composer (0.1.2) user script for Greasemonkey which replaces the plain textarea.

0.1.2

This version now works with Firefox 1.5 and Greasemonkey 0.6.4.

0.1.1

Fixed: Send message by clicking icon left of 'Send' now works.
Fixed: Safe draft now works.

0.1

Initial version.

Tags:

Blogger keep current time on post user script

2005-05-29T12:33:00.000+02:00

We all know Greasemonkey is cool. I've created a Blogger user script (0.3.1) which keeps the date and time of your post to the current date and time. Useful when you take some time to write a post or post a draft.

0.3.1

Keeps post and comment options visible all the time. These options disappeared when you previewed your post or switched from "Compose" to "Edit HTML". I hate the toggle option Blogger added some time ago, I want to see what I'm doing.

0.3

The checkbox will not be automatically checked when you edit a comment. Thanks to Improbulus for pointing out the post editing trap.

0.2

The checkbox will now be automatically checked for new and for draft posts.

Note: I've renamed the script. You'll have to uninstall the script called "Blogger enhancements" if you have the old version of the script installed.

0.1

Initial version.

Tags: