06.26.2004 - Letter Spacing Marquee
I'm not sure how this one got in my head...a TV commercial maybe, or perhaps I saw it elsewhere on the web. However it came to me, I like it.
The Letter Spacing Marquee uses the letter-spacing CSS attribute (you probably guessed that) to expand and contract the strings in the marquee for an interesting effect.
In addition to that, it uses the innerHTML of several child DIV elements to populate it's message array (meaning you can have as many or as few strings in the marquee without having to alter the script, only the markup), so it's behavior is truely seperated, allowing it to degrade nicely in NN4.
I discovered that Opera 7+ doesn't much care for altering letter-spacing via script - it sort of falls apart and doesn't quite keep up. So, in that browser, it merely does the "flip" action (you'll see what I mean when you have a look). It still functions as a marquee, just without the namesake letter-spacing animation.
06.25.2004 - Slide Show II
A new experiment this evening -- Slide Show II.
A standard image gallery consisting of five image elements. The image elements are cloned three times each and placed at the top, right, bottom and left of their parent element who has its overflow property set to hidden. The image elements have a 35% opacity applied to them, and when a corresponding number is clicked on, the four images slide in to converge. An interesting effect.
It works in all standards compliant browsers, though the effect is dulled a bit (ok...significantly) in those that lack support for opacity. It also degrades nicely in NN4.
06.22.2004 - Page Info v1.1
Always one with very good suggestions, Mr. Wooldridge points out in this comment that the Page Info favelet would be more useful if the data was printable.
He is of course correct, so I've added that functionality. A link entitled "Printable View" will now appear below the "Markup Specifics" list. Clicking it will open a new window containing the unstyled data.
If you've not visited Mr. Wooldridge's site before, I highly recommend that you do. He's starting some pretty interesting things combining favelets with a technology called Laszlo that I'd never heard of before. Good stuff.
06.20.2004 - Creating Hosted Favelets
A visitor to the site dropped me an email over the weekend expressing their interest in the favelets I've written and inquired as to whether or not I had ever written up any documentation on the techniques I employ when developing them. I responded that I had not, but that I thought that it would be a good idea for me to do so.
So, here goes - my first article on slayeroffice, discounting the one I wrote long ago detailing how to write a comment system without a database (long lost otherwise I'd link to it). Phew, what a miserable failure that was...not so much in concept as it was in practice. An interesting experiment at any rate. But I digress.
Creating Hosted Favelets goes over many of the common issues I have run into when writing applications of this sort, and gives tips on how to avoid them. It is by no means an end-all-be-all article on favelet creation and I will give you fair warning that I am in no way a skilled writer or even a very good teacher, but I hope that the information contained within will prove useful.
If there is anything you feel I left out, any question you feel is unanswered or there is anything you think I need to go into more detail on please let me know and I will certainly address it.
06.17.2004 - FAQ
I never, ever thought that I'd need one, but the recent (and completely suprising) surge in visitors to this site and the questions they bring along with them has caused me to create one.
Yes, I speak of an FAQ.
06.13.2004 - Color Shift Experiment
A new experiment today, this one using the color calculation methods from the Color Palette Creator.
The Color Shift experiment creates a number of DIV elements (28 in this case, though the number isn't limited) and an array of hex colors (length not limited) and calculates the transition of color[x] to color[y], changing the background color of each DIV element in a staggered manner to achieve the effect you see below, only animated.
You can change the color scheme by selecting a new one from a dropdown. Some are arbitrary colors that I put in, others are schemes I sampled from sites I visit. It makes for a nice effect, I think. Enjoy!
06.09.2004 - Page Info Favelet
Kevin came up with an internal (meaning office network), web based tool the other day that would take a user entered URL, grab it, parse it out and return all sorts of useful information like approximated download time, number of links on the page, number of images, percent of the page that was markup versus content, etc. Kimberly then followed up on the listserv he announced it on with a tool she had written some time ago that would calculate download times and factor in packet loss of varying degrees based on a user entered byte size.
While both of these tools are of great merit on their own rights, I felt like they should be combined. I also felt that their being web pages on our internal network was a handicap, along with them both requiring me to type something in. As any frequent visitor to this site knows, I am very lazy. So very lazy that I can rarely be bothered with anything that takes as many as two or three steps. This is of course no fault on Kimberly or Kevin's applications - this is who I am and I shall deal with it in my own way. This time, that way is a favelet (You probably saw that coming).
I'm calling it the Page Info favelet, and heres the data it will return:
- Total code weight in bytes.
- Total <body> code weight in bytes.
- Total content weight in bytes.
- Percentage of code that is markup.
- Percentage of code that is content. (meaning, non-markup)
- A table of connection speeds with estimated download time, including latency/loss calculations.
- Link, inline style sheet, style attribute, script element, meta element, image element, table and comment counts, including a byte size of commented markup.
As evidenced by the Color Palette Creator, I am completely open to suggestions for improvement. Speaking of, I released version 1.4 of the Color Palette Creator the other day - you can now define the "blend" colors, rather than just using white and black. It has the potential of creating some terribly unattractive palettes, but I thought it would be a cool thing to implement.
The link once more for the new favelet: Page Info. It has also been added to the Favelet Suite.