Bram.us » Bramus!

Introducing BramVanDamme.be

Bramus! — Tue, 23 Dec 2008 13:09:22 +0000

Bram.us always went along with the tagline “Days in the Life of a Geezer named Bramus!” As of last week this is no more as this site doesn’t fully track my online trail as – next to this blog – I’m blogging on Nieuw in Gent, tweeting all day long, uploading pics to flickr, bookmarking on del.icio.us, listening to music, etc.

Over the weekend I decided to set up a site that tracks my online trail and ended up by installing (and modding and stripping down) SweetCron, an Automated Lifestream Blog Software. Yes that’s right, SweetCron can be seen as a self-hosted friendfeed. Now, what else than choosing my own name as domain name to run SweetCron on? Without further ado I point thee towards BramVanDamme.be, aggregating all my data.

My (stripped down) SweetCron Setup

Inspired upon Rober Palmear’s LifeStream you’ll see that I’ve modded my SweetCron Setup quite a lot actually: Stripped the tags and search features; Removed the pages; … Basically I kept it to a bare minimum: Each entry posted holds the content, a link to the original, a link to seeing all items of the particular site (in case of a tweet click on my avatar, in case of a loved track click on the heart, etc.), and that’s it. No more – No Less.

A Typical SweetCron Setup

Right now I’m still writing some more SweetCron Plugins (already wrote one in order to fetch album and artist data/covers for my last.fm favorites via the last.fm API) in order to extend it with some extra functionality so that it also tracks my commenting activity on Flickr amongst other stuff I’m planning on adding (if it’s got RSS, it’s add-able; If it hasn’t got RSS, get creative).

Yeah yeah, I know: the added value is practically zero if you’re already tracking me on the various sites, yet the inner geek in me (and you I presume too) rejoices/must rejoice when looking at it from a technical point of view (the power of RSS!). Above that it’s easy to point old friends to there (in order for them to add me on the various sites they’re acitve too) instead of having me to send them about 10 links

Oh, if you want to set up your own SweetCron Lifestream and aren’t that savvy with all the technical stuff, then I suggest this tutorial right here, walking you through it.

Backdropping jQuery functions into PrototypeJS

Bramus! — Mon, 11 Aug 2008 10:47:47 +0000

One of the functions I use quite regularly when working with jQuery is .attr(). Right now – at work – I’m fiddling around in Prototype, and noticed I kept on writing .attr() which – quite evidently – doesn’t exist. Okay, I can use Prototype’s .readAttribute() and .writeAttribute() but that’s quite a hassle: I want one function to set and get attributes, just as jQuery offers. Time to extend Prototype with some jQuery functionality

As provided by the Prototype API, use Element.addMethods() to extend Element. Five minutes later, this implementation came out:

// Bramus jQuery backdrops
Element.addMethods({
  	// Get/Set attribute from/on element
  	attr: function(element, attrName, attrValue)
  	{
  		if (attrValue != undefined)
  			element.writeAttribute(attrName,attrValue);
  		else
  			return element.readAttribute(attrName);
  		return element;
  	}
});

Updated: added return element; to enable chaining

I know the implementation isn’t as extended as it is in Prototype and jQuery but it’s a good start of course

And ooh, if you’re looking to mimic jQuery’s chaining functionality in Prototype, use .invoke()

// jQuery - add classname and rel 'bramus' on all h3's inside the #myDiv div
$('div#myDiv').find('h3').addClass('bramus').attr('rel','bramus'); // I know, this can be written as $('div#myDiv h3'). ...
// Prototype - add classname and rel 'bramus' on all h3's inside the #myDiv div
$('myDiv').select('h3').invoke('addClassName', 'bramus').invoke('attr', 'rel', 'bramus'); // I know, this can be written as $$('div#myDiv h3'). ...

Happy coding!

Note: If you’re wondering why I’m sticking to Prototype and not moving to jQuery: the whole site has quite a few (not to say: a lot) Prototype based scripts that are interlinked. Switching isn’t possible right now

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3.1

Bramus! — Wed, 20 Feb 2008 18:16:57 +0000

A new version of jsProgressBarHandler is avaiable. Changes are a minor bugfix when handling the internal queue when animation was set to false and an update of Prototype to the latest version (1.6.0.2)

What is `jsProgressBarHandler` all about?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Version 0.1 was a mere rewrite to PrototypeJS of the version by WebAppers whilst version 0.2 was a full structural rewrite. Version 0.3 builds upon 0.2 by making it all more robust.

So, what has changed?

In version 0.3 an internal animation queuing system was introduced to jsProgressBarHandler, preventing the progressbar from freaking out when multiple simultaneous (viz. on the very same moment) calls to setPercentage() were made. With that queue jsProgressBarHandler will push all percentages on that queue, and process them one by one. Version 0.3.1 is maintenance release to fix an issue with this queue when no animation was used (the bug being that the queue wasn’t cleared properly). Credits go to Jamie Chong for spotting this one!

Anything else has changed?

Nopes, except for the fact that the jsProgressBarHandler release now sports Prototype 1.6.0.2

Cool, is there a demo?

TIP: At the multicolor bar at the bottom, click that -icon a few times to see the internal queue in effect

Please note that next to the demo above even an AJAX demo exists!

Where can I download it?

Right here:

http://www.bram.us/wordpress;/wp-content/uploads/2008/02/jsprogressbarhandler_031.zip;Download jsProgressBarHandler 0.3.1;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3

Bramus! — Fri, 01 Feb 2008 21:54:17 +0000

A new version of jsProgressBarHandler is avaiable. Changes are a bugfix to making multiple barImages properly work with Safari and addition of an internal queue.

What is `jsProgressBarHandler` all about?

So, what has changed?

Internally jsProgressBarHandler now uses a queue on which it stacks the percentages to move to. This prevents the progressbar from freaking out when multiple simultaneous (viz. on the very same moment) calls to setPercentage() are made. jsProgressBarHandler will push all percentages on that queue, and process them one by one.

Anything else has changed?

Yes! jsProgressBarHandler user Chris brought to my attention that the multiple barImages option did not work properly in Safari. Reason was that Safari handles the object.constructor (which jsProgressBarHandler uses to determine if a parameter is an Array or not) differently than other browsers. (FYI: A working version of isArray() has been posted on bram.us by now )

Cool, is there a demo?

TIP: At the multicolor bar at the bottom, click that -icon a few times to see the internal queue in effect

Please note that next to the demo above even an AJAX demo exists!

Where can I download it?

Right here:

http://www.bram.us/wordpress;/wp-content/uploads/2008/02/jsprogressbarhandler_030.zip;Download jsProgressBarHandler 0.3.0;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.

Their decision, your meta: why the "IE8 meta tag" is a good thing.

Bramus! — Mon, 28 Jan 2008 22:26:32 +0000

There’s been a lot of buzz lately about the decision by Microsoft to include a custom meta tag to trigger IE8 in its new (and good) rendering mode. After having read quite a lot on the subject I must say I’m totally pro this announcement.

Update 2008.03.05: This info is now outdated, as the IE Team have reverted their decision to enforce the usage of the IE8 meta tag

As you might have read IE8 will – qua rendering – behave like IE7 by default, unless you specify a meta tag to trigger the new rendering mode (which I’ll be calling IE8 Mode from now on). But first, let me tell you a little story.

In order to move forward, we must go back first

When looking back at IE7, it should be noted that it has the same behavior as IE6 when it comes to treating doctypes: either go into standards mode (IE7 Mode in the case of IE7; IE6 would go into IE6 Mode) or go into Quirks Mode (IE 5.5 Mode). The differences between IE7 Mode and IE6 Mode were immense: lots and lots of stuff is rendered better/differently in IE7 when compared to IE6.

When IE7 finally was released and installed on computers lots of people found that their (favorite) website was broken in IE7 due to those changes. Lots of (old) websites had to be fixed and those that didn’t get fixed remained broken. Although Microsoft had released a better product, they had broken the web with IE7 and IE7 got a bad name.

It even got that far that not only web developers gave IE7 a bad name, but also the normal users (think of your mom, your dad, regular Joe from around the block, …) gave it a bad name as it couldn’t render a huge percentage of websites while IE6 could.

All hail the meta-tag!

Now, let’s go back to the present and take a peek at how things would go when IE8 gets released with the proposed meta-tag trigger:

Existing websites

Websites built the last year and half are bound to work in both IEs within the heap of A-Grade Browsers (if not, then this tells quite a lot about the firm who made it). When Microsoft releases IE8 all those websites will work just fine as they are already optimized for IE7 and IE6 and due to the fact that IE8 behaves just like IE7.

This is what Microsoft aims at with the “Don’t break the web” statement: keep the existing customers happy; and the new customers of the new product too.

New websites

Newly developed websites will pass the same flow as they now do:

Develop and live test your site in Firefox/Safari
Pass in the X-UA-Compatible meta tag and IE8 renders it correct too (and maybe include 1 or 2 tiny fixes through a conditional)
Start fixing for IE7 and IE6 (conditionals!) like you’re used to today (most of the time it’s the same stuff you keep on fixing: png images, the clearfix class, some display: inline-blocks and that’s about it)
Check the other browsers

The other scenario?

Remember that IE6/IE7 story I told you? Given that, let us turn things around: Let’s imagine the IE team decided to let IE8 go in IE8 Mode by default. What would the result of that action be?

Existing Websites

It’s quite simple: it would be an IE7-alike scenario all over again: lots of websites would Just Break (TM), lots of web firms would be called in panic in order to fix the site, and – in the end – IE8 would get a bad name just like IE7 has.

New websites

Same scenario as with the meta-tag, except you don’t have to include it.

Your point being?

With the 2 scenarios above, it should be more than clear that the decision to trigger IE8 in IE8 Mode by use a meta tag is the best method they could have thought of. I agree, it’s not the most perfect solution we all dreamt of (and it requires a bit of an effort from us developers) yet it is the best possible solution out there which pleases both users and and developers.

Next to being real solid, the method is future-proof too as you can define IE=edge in the meta tag which tells IE8 to render in IE8 Mode; IE9 in IE9 mode, etc. etc.

However

Yes, there had to a however. This will only work if 2 prerequisites are met:

Whenever IE9 gets released it must backdrop to IE7 Mode when no tag is included, not IE8 Mode; (alternative: IE9 must be pushed as a mandatory update over IE8 to smoke out IE8.). By the time IE9 gets released, IE6 will be gone for good; leaving us back to the scenario as it has been for quite a while: develop for Firefox, Safari, Opera and two IE versions (IE9 and IE7 it’ll be then)
Microsoft must provide us a nicer way to run IE8, IE7 and IE6 side by side. That hassling with those Virtual Machines is not that handy; and IE6 Standalone doesn’t always render like a Native IE6 does (next to the fact that it isn’t official). Maybe they should provide some Software Virtualization?

Bramus.out!

My Custom Mint Page Title (WordPress Plugin)

Bramus! — Tue, 15 Jan 2008 22:14:38 +0000

After having read a little trick over at Peppermint Tea where the author explains on how to set custom titles in Mint (which Shaun described back in 2005), I decided to quickly knock up a WordPress Plugin that takes care of the job. Hope it’s usefull to some of you

How to find the original Flickr Photo URL and User from a Static Flickr Image URL/Permalink (My priceless Flickr Tip)

Bramus! — Fri, 11 Jan 2008 23:09:05 +0000

Got a link like http://farm3.static.flickr.com/2085/2177060015_258bcfaff9_m.jpg and want to find out which user posted it, more images by that user, see the full-size version, etc? Seek no longer, the answer is very simple!

From the URL you’ve got take extract the image name (2177060015_258bcfaff9_m.jpg) and split it on the underscore. The first part is the photoID, the second part is the hash/salt and (if there) the third part the size (Full format: photoId_hash_size.jpg).

Now append that photoId to http://flickr.com/photo.gne?id= and *MAGIC* there you have it, the Original Flickr Photo URL (and the user) The example above would be transformed to http://flickr.com/photo.gne?id=2177060015

Cheers!

UPDATE 2008.01.18 – In related matter these might be of interest too: Flickr Hack – All sizes for all pics & My most interesting (best viewed) Flickr pics (replace that ID with your own Flickr ID to watch yours )

UPDATE 2010.11.07 – Bram.us visitor Robin Senior created a handy bookmarklet which does the job automagically. Drag this link to your bookmarks toolbar and click it whenever you have a static Flickr image URL open: Flickr Photo Page

My best wishes

Bramus! — Thu, 27 Dec 2007 23:53:25 +0000

Enjoy New Years’ Eve and best of luck for 2008 (loads of cash, luck and love).

My Maintenance : jsProgressBarHandler 0.2.1

Bramus! — Thu, 20 Dec 2007 23:49:27 +0000

Ever since version 0.2 of jsProgressBarHandler hit the net earlier this week some extra ideas popped up in my head. New in this version are the ability to show/hide the percentage text and the ability to define which images to use (did anyone say multi-colored bars?!)

What is `jsProgressBarHandler` ?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

What has changed?

This version extends upon the changes made in version 0.2. As the need for setting the background-images (viz. the barimages) to use was there, this has moved from the (previously mandatory) CSS file into the jsProgressBarHandler core by setting the barImage option to a path to an image. Now, I’ve taken this a step further and made it possible to define an array of images, enabling you to create multi-colored bars.

Multi-colored progressbars are quite simple: if you define 3 images in your array, the first 33% will show the first image, the second 33% (ranging from 34% up to 66%) will show the second image and the last 33% (67% up to 100%) will show the third (and last image). One can define as many images as he wants, jsProgressBarHandler will adjust itself.

The other addition that made it into this release is the ability to hide the text with the percentage (which appears next to the progressbar) by manipulating the showText option. Tiny change indeed, yet upon request.

Cool, is there a demo?

Note that next to the demo above isn’t the only one … even an AJAX demo exists!

Where can I download it?

Right here:

http://www.bram.us/wordpress;/wp-content/uploads/2007/12/jsprogressbarhandler_021.zip;Download jsProgressBarHandler 0.2.1;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.2

Bramus! — Fri, 14 Dec 2007 00:34:29 +0000

I seem to be in a scripting mood this week, as jsProgressBarHandler has been updated to version 0.2. This version is a total rewrite of version 0.1 making it even better!

What is `jsProgressBarHandler` all about?

So, what has changed?

Internally jsProgressBarHandler now consists of 2 classes: a jsProgressBar-class which is a class defining a progress bar and a jsProgressBarHandler-class which scans your HTML page for span elements with the progressBar-className and automagically creates progressbars of them. The sepration into two classes enables you, the user, to manually creating new jsProgressBar instances (viz. progress bars) on the fly! The automatic creation of progress bars can even totally be disabled with the ease of setting a simple parameter named autoHook to false.

Anything else has changed?

Yes! It even now is possible to set some options when creating progress bars (note that when using autoHook all the progressbars will use the same default options). The options one can set are width, height and animate. The first two make the creation of bigger and/or smaller progress bars even more easy than before. The animate option enables/disables the use of animation (viz. should a change in percentage slide to the new percentage or directly be applied?)

Cool, is there a demo?

Note that next to the demo above isn’t the only one … even an AJAX demo exists!

Where can I download it?

Right here:

http://www.bram.us/wordpress;/wp-content/uploads/2007/12/jsprogressbarhandler_02.zip;Download jsProgressBarHandler 0.2;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.

Bram.us » Bramus!

Introducing BramVanDamme.be

Backdropping jQuery functions into PrototypeJS

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3.1

What is jsProgressBarHandler all about?

So, what has changed?

Anything else has changed?

Cool, is there a demo?

Where can I download it?

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3

What is jsProgressBarHandler all about?

So, what has changed?

Anything else has changed?

Cool, is there a demo?

Where can I download it?

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Their decision, your meta: why the "IE8 meta tag" is a good thing.

In order to move forward, we must go back first

All hail the meta-tag!

Existing websites

New websites

The other scenario?

Existing Websites

New websites

Your point being?

However

My Custom Mint Page Title (WordPress Plugin)

How to find the original Flickr Photo URL and User from a Static Flickr Image URL/Permalink (My priceless Flickr Tip)

My best wishes

My Maintenance : jsProgressBarHandler 0.2.1

What is jsProgressBarHandler ?

What has changed?

Cool, is there a demo?

Where can I download it?

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.2

What is jsProgressBarHandler all about?

So, what has changed?

Anything else has changed?

Cool, is there a demo?

Where can I download it?

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

What is `jsProgressBarHandler` all about?

What is `jsProgressBarHandler` all about?

What is `jsProgressBarHandler` ?

What is `jsProgressBarHandler` all about?