This site was just recently moved from my office intranet where it was hosted on my unix box, slayer.office, running under AOLserver. It's now on a linux box running Apache, so some things arent going to work until i get around to rewriting them in PHP. Whats broken? Why, thats part of the slayer.office adventure and i certainly wouldnt want to ruin that for you.
I've re-written a few more things in PHP, or altered them to run purely client-side. Kinda makes me wonder why I didnt make them all client-side to begin with...oh well. Also, check out the color sampler app in the tools section.
Several additions today - nearly all of the source code for the arcade is now linked, save for the games that are so old that the source embarasses me. Also added some backend changes to the methods that serve up the content, namely a boolean param passed to showSubContent that tells the method if it should display the "View Source" link...so now there wont be a link to view the source of things that dont have any source to view. Also added a bunch of simple source snippets in the code section, along with a method for serving up archived news.
After releasing the color sampler app, i thought i'd see if javascript could do anything similiar - check out the color mixer in the tools section. I then thought it might be interesting to extend it to change the colors on the site, so check out the slayer.office color changer in the tools section as well. IE only.
With all the color related releases of late i thought i'd go one more and write a javascript knock-off of simon, the electronic game from the 1970s. The only thing missing is the sounds which i cant seem to find on the web and am far too lazy to create on my own. Have a look at it in the arcade.
Added a new game to the arcade - check out Battleship v1.0. It turned out to be a bit more complicated than i expected it would be - particulary in creating a believable opponent "AI", but i'm pleased with the end result.
I had written a playing card engine a long time ago and never got around to finishing it completely - in a fit of boredom i pulled some of the methods out of it and wrote a simple blackjack game. Check out Blackjack v1.0 in the arcade.
Another addition to the arcade - Cell Phone Snake v.10. I'd always wanted to get around to writing a version of this old, old game and when i finally did, i figured what better UI to wrap it in than its most recent incarnation on the cell phone? Also added the returnAge() method to the code page.
The hits just keep coming. I wrote this game so fast it's a wonder it came out so well - check out Alien Sequence in the arcade. I really like the way this one turned out...easily my favorite so far. Win IE 5.5+ only.
I've added fifteen more levels to Alien Sequence, bringing the grand total up to 40. That should suit you folks for a while. Also, Scott over at javascript-games.org was kind enough to post Battleship on his site. If you've not checked that site out yet, do so - loads of impressive stuff there.
New game in the arcade - check out Indoor Recess: Hangman v1.0. This game is the first in a potential series of similarly themed games - the theme of course being "indoor recess". I've got a couple of ideas for them, so we'll see how they turn out.
I've written a sequel to Pegs called Pegs II. Clever name, eh? This new one is similiar to normal Cross Solitaire, only its played inside of a 3D box. It also happens to be the 20th game in the arcade, and the 8th one released since the site went up on November 6th. Prolific javascripting, wouldnt you say?
Yet another game in the arcade...this one's called gempad. Its somewhat similiar to the game "Lines", but without most of the line of sight restrictions, and the addition of bonus square points and "rounds of reprieve" as a reward for making rows greater than the required five. Also, bold text in the news going forward will be links. I'd been meaning to get around to doing that for a while, but i'm lazy. Enjoy the new game!
I've finally found a relatively good use for IE's zoom style attribute.. Check out the latest addition to the arcade, perfection, and you'll see what i mean. (you'll need to lose at least once...)
I've made some big changes to the UI of the site, as well as to the way its content is served. The left navigation menu now contains drop-down lists of everything you'll find within that category, and I've done away with the fade-in subcontent divs. I've added a contact form to the site, as well as a favorites icon, since i was seeing some 404's in my access log looking for it. The single biggest change is the way content is served up - gone is the javascript content system. This site is now old fashioned HTML. A couple of reasons for this: First, the javascript method was getting a bit cumbersome as I hadnt designed it to be too terribly flexible. Second, it completely circumvented any efforts made by robots to index the site, since as far as they could tell there werent any links on the page. I've gone through and checked to make sure all the links are correct, but if you find anything i missed, let me know. You could even use the new contact form. If you are unfamiliar with v1 of this site, you can still see it here.
Ok...I think i've finally settled on a content serving method i can live with. The site now serves stuff up via a hidden 1x1 iframe - that iframe then calls a method on the parent document that populates the content div with the iframe's content. This allows a small page - 6k, bot crawling since the hrefs on the page point to something physical, and keeps the "no page transition" main page navigation i love so much.
I've also added the ability to link to individual content div's on the page, like this: slayeroffice.com?c=perfection. This works by building an array of all the links on the page who's className is subNavLink, then checking the url for a parameter, and finally seeing if that parameter returns a positive indexOf on any of the linkArray indexes. If it does, I load that index as the iframes src, and from there it behaves exactly like it would if someone had clicked a link.
Added the HTML Attribute Viewer to the Tools section. Point it to at a URL and check out all the specified attributes of the elements on the page.
I also finally got around to writing a PHP script that would read in source files and replace HTML so it would render in a pre tag so I no longer need to hard code source documentation...i'm really much too lazy for that sort of thing. Check out the source of the view source app using the view source app: viewSource.php?f=viewSource.php&a=ViewSource.
Added the Javascript Function Parser to the tools section. Paste in your javascript, hit parse and peruse the list of functions, their arguments and their return values.
I was watching some old news reels on the History Channel the other day and thought it might be intersting to write a script to convert the Roman numerals used for copyright dates on films into modern date formats. Check out the Roman Numeral Convertor in the tools section.
Nearly everything is back in place now - a few things are still missing as I dont seem to have local copies of them on the machine I'm currently working on and neither does google...my hope is that they're on machines at work.
At long last, a site update. It's been a while: work has been busy, life has been busy, plus I got the new Zelda game which has been keeping me pretty occupied. However, thanks to Zelda, there is a new game in the arcade: Sort.
I have found or re-written a few more things that were casualties of the rm -r incident. viewSource.php is back in place so most if not all of the source links should be working again. There are still a couple of things that I've not been able to find - most noteably the HTML Attribute Viewer...one would think that I would remember what computer I had written this or that on, but sadly not the case.
The search for the last bits of missing content continues!
What started as a simple experiment (as most things do) has turned into a full blown project. On Friday evening I began messing around with a script that would handle a "side scrolling" game environment - by Sunday afternoon I found myself with a side scrolling game engine complete with a nearly finished "zone". So, it's looking like I might go ahead and finally write the RPG I've had in my head since I was a kid.
The game itself is a long, long way from being ready to be seen, but all the same I thought I'd share some screen shots of the progress. Check them out here.
The new game - tentatively titled "Seven Keys" - is now doing nearly everything it needs to do to be playable. Adjustments have been made to dramatically improve the frame rate, the dialog engine is built, the inventory system is built, the quest management system is built among numurous other small things that make a game like this do what its supposed to do. There is also a 1/2 built out "cut scene engine" to facilitate the story, as well as some development tools I wrote for myself to make it easier to build new zones. I've also added a few new screen shots: Have a look.
I've added two new screen shots of Seven Keys to show off the new interface. The game engine is pretty much complete and the task of adding content and story is very much underway.
Added textTyper to the code section. This displays strings one character at a time and has a couple of customization options. Nothing original by any stretch of the imagination, but I figured someone might find a use for it.
I've been pretty bored as of late, so I thought I'd re-write another game in javascript -- this time its Mine Sweeper, the classic game that every Windows install comes with. Ive never really liked the game all that much, but I was intrigued by how it works, and what better way to get at that than to write it? Enjoy!
slayeroffice now has an RSS feed, located at http://slayeroffice.com/rss. I've killed two birds with one stone on this - both the feed and news.js (now news.php), which is what creates the headlines on the front page, are built from the same data file. Nothing fancy by any means, but at least I don't have to update two files.
I finished Knights of the Old Republic over the weekend -- great, great game. I highly recommend it to anyone with an XBox. Like any good RPG, KOTOR had its share of puzzles and mini-games, all of them ripe for me to re-write in javascript. Check out the first: Towers.
I've been wanting to write something like the following for a while now, but the sheer tedium of cutting the images had put me off. Check out Jigsaw Puzzles in the arcade. This will probably also lead to a stand alone application that cuts the images apart, as I have been doing them all by hand in Photoshop which really isnt much fun. That app will probably lead to a stand alone app that allows you to play the puzzles, so expect more jigsawedness soon.
New addition to the arcade today -- Families. This was more or less an experiment with "AI"...teaching javascript how to win at a game similar to "Go Fish". The AI watches how the cards change hands, makes assumptions for who has what based on who asks for what the most, and generally does a pretty good job. I like it, anyway.
I've added a comment system to the site. Now, instead of opening the "contact" form when you click on "comment", you'll get a popup window with a small form to post any comments you'd like. The comments will appear on the application page that you commented on under the three blue buttons.
I've also added a script called Dynamic Date Dropdown to the code section. Nothing fancy, really, but I figure it could be of use to someone.
I've written a "Technical Document" that details how this site works. Everything from the new comment system to the left navigation to the way content is served is covered at reasonable length. Its listed in the code section and also has a link on the about page. Give it a look here.
Added the Image Load Progress Bar to the code section. Basically a simple set of functions that displays a progress bar while images load. When finished, the images are shown and 1.5 seconds later the progress bar hides itself.
I very briefly entertained the notion this past weekend that I should learn Flash. Before I became thoroughly disgusted with its interface and its $900 price tag, I found what I considered to be a pretty slick bit of Flash over at actionscripts.org. I thought to myself that if I wasnt able to write it in javascript, then I would buckle down and learn Flash -- see why I probably wont be learning Flash here.
I often find myself in need of the value of a particular key on the keyboard and my usual way of discovering that value is to create an html document that I generally name asd.html, hitting the key I want the value for, reading the resulting alert and promptly deleting the file. After the millionth time doing that I decided to give this one a proper file name and stuck it in the tools section. Very simple but useful.
This idea came from my trying to come up with a new way to work the menus on slayeroffice's main page. I decided that since this method wouldn't allow for spidering, I wouldn't employ it, but I wrote it anyway simply because the concept seemed interesting. Check out Categorized & Searchable List Boxes in the code section.
Added the Vertical Scrolling Marquee II to the code section. Similar to the original, but this one fades the content in and then out as it scrolls. Thanks go to Aviaz for the idea.
I wrote this Image Cross Fader when a friend of mine asked me if I had anything that did this...I said "no, but I like the idea so hold on". It didnt take long to write as its not all that different from other fading div things I've written that fall into the stupid css tricks category. Works in MSIE5+ and Netscape 7. Mozilla seems to trip over its own proprietary -moz-opacity attribute when run in an interval.
I've also got a mild redesign underway that should take the place of this main page this weekend or early next week.
After I posted last night that the redesign of the site would probably launch this weekend or early next week I continued to work on it until about two in the morning. Eventually after much trial and error, I hit upon a layout that felt right, which is what you see before you now. The last version of the site can still be seen here if you need a point of reference for whats changed.
I've added two new styles for the main page - nothing very fancy or all that different than what there is now and created mainly out of boredom. The links to swap the styles have a permanent home at the very bottom of the left navigation column. Here are some convenient links as well:
I'll probably add more at some point. For anyone who is curious, all that does is change the value of the href for the link object that points to the style sheets.
I've updated the dHTML Psuedo Select to allow it to work in all standards compliant browsers. In addition to MSIE which v1 was designed for, it now also works in Gecko/Moz and Opera 7 for Windows -- I've not yet tested it in other OS's, but I'm sure it should work on Mac and Linux as well. This was accomplished by giving it an XHTML doctype -- so, your page will need that as well for it to work in your stuff.
Of all the stupid, pointless things I've written, this one falls pretty squarely into the "because I can" category - a DHTML window that mimics a Win95/98 window. Depending on how bored I get I may even add a style switcher so it can mimic XP, OS X and KDE windows too.
Added the FAQ Menu to the code section -- basically a way to serve an FAQ to a user when you're short on screen real estate due to design constraints. Enjoy.
This latest experiment was to see just what could be done to raw html without having it predisposed to any sort of functionality. I give you the Table Sorter - an innocent HTML table made to sort its data through the magic of getElementsByTagName and nodes.
I've written a favelet to increase the font size on a web page...inspired by my forgotten glasses. It's also fun for breaking web pages that don't reflow well for larger fonts, like this one. Give it a try.
To add it to your favorites, right click the link and select "Add to Favorites" or "Bookmark This Link", depending on your browser of choice.
Added the Gradient Progress Bar to the code section. Just a simple DHTML trick that moves a div element with white set as its background color one pixel to the left and reducing its width by one pixel to reveal a div beneath it with a gradient image set as its background-image -- a nice effect. Works in Gecko/Moz, MSIE and Opera 7.
I've written a WinIE6 version of centricle's ruler favelet. In addition to the original functionality I've added additional units of measurement (picas, points, inches, cm, etc) and the ability to have more than one selection marquee. Check it out here.
While on this favelet kick, I've resurrected the long lost HTML Attribute Viewer as a favelet -- no more PHP GETs for that.
Ok...one more favelet and that'll be it for a while. Check out the new Highlighter Favelet in the tools section. It'll prompt you for a query and will then highlight all the matches on the page in yellow - it will also attempt to scrollTo the offsetTop of the first find.
This newest addition to the site is easily one of the most complicated bits of code I've ever attempted -- I give you Web Paint, a "Paint" application done completely with Javascript and CSS. It includes everything from your standard pencil tool to squares, circles and lines to copy & paste to create your 32x32 masterpiece. Once you've created your work of art, submit it to the Web Paint Gallery to preserve it for posterity.
Note: It is HIGHLY recommended that you use Mozilla 1.3+ with this application as it has proven to be the only standards compliant browser that doesn't bog down badly. Other browsers work to varying degrees but your experience will be severly degraded.
Thanks go to Dean Taylor for his help with the code for drawing circles and diagonal lines.
The Web Paint Gallery has been updated so that the images created with the Web Paint application are streamed back to the browser as images rather than absolute positioned 1x1 div elements. This means that the gallery is now a gazillion times faster and that you no longer have to take a screen shot of the gallery to do anything with an image you've created -- just right click and "save as" like you would do with any image on the web. This was accomplished using PHP's kick ass Image Functions. The latest image will now also appear at the bottom of the navigation column on the left side of the main page.
Back in the good 'ol days when the guys I work with and I used to go to happy hours once or twice a week, I drunkenly came up with a toast that went something like this -- "do beer plus plus while sober", though usually with more slurring. It often occured to me that that slogan would make a pretty cool T-Shirt, and now, years later, I've finally gotten around to it. I give you officewear, stylish and hip geek apparel from slayeroffice.
Really though, I only wanted one for myself, but if other folks want one too, so much the better. Enjoy!
A new website joins the internet as a result of my incredible boredom - check out Beer++. Loads of shirts, hats, stickers, etc. Its a brand new domain and may not have completely propagated yet, so if you get a "domain not found", try again later. And, of course, feel free to buy something while you're there...I'd hate to be the only person wearing those shirts. :)
Changed the default stylesheet around to give the design a bit more dimension. I like it. Compare it to the old layout - click this link to change it back.
The server that this site is hosted on has been throwing 403's for the past couple of days at random with no explanation as to why. Honestly, you're probably lucky to even be reading this post. I'll soon be moving to a host that doesnt have it's thumb, nay -- it's fist, up it's ass 24 hours a day which will obviously resolve the issue. Until then, I apologize for any inconvenience or annoyance.
One year ago today this site made its debut on the web. One year later it's got a lot more useless stuff on it and looks kinda different. Here's the first ever post:
"This site was just recently moved from my office intranet where it was hosted on my unix box, slayer.office, running under AOLserver. It's now on a linux box running Apache, so some things arent going to work until i get around to rewriting them in PHP. Whats broken? Why, thats part of the slayer.office adventure and i certainly wouldnt want to ruin that for you. "
I had forgotten that I used to call it slayerDOToffice. Good times.
In addition, a friend asked that I update the Color Mixer to work in browsers other than MSIE5+, so I did - it now works in all standards compliant browsers. I really need to go over a lot of the older content and update it to be non IE only I think.
11.08.2003 - Compliance and Fun with background-position
A couple of updates and one addition today. First, I've updated Alien Sequence and Battleship to work in non-MSIE browsers. More updates to old content to come.
Second, I've added some new code, the Image Navigator, to the DHTML section. It's basically javascript and CSS that mimics the behavior of the navigation window in Photoshop.
In other news, the move to the new host is under way. There remains a few glitches to be worked out, but those should be resolved in short order.
It's been a while since I've added a new game to the arcade, but today ends that draught.
Last Christmas I was given an Atari 10-in-1. It's a cool little joystick that has ten old 2600 games on it. It was pretty fun for a while, but I also got GTA Vice City for Christmas that year, and lets be honest - Asteroids can hardly compete with that.
At any rate, I dug the Atari 10-in-1 out over the weekend and played Missile Command for about 15 minutes before my hand began to cramp up on the joystick.
It seemed like it would present a suitable enough challenge to convert it to javascript, so I did.
It seems to work best in MSIE6+ and Opera7, though it does work in all standards compliant browsers I've tested it in. So, go and have a look and enjoy.
Added a new game to the Puzzle section of the arcade: check out Knight's Walk, an intersting chess board based puzzle where you must move a single knight piece about the board in the standard "L" fashion, touching each square on the board once and only once. More difficult than it sounds.
Now that the site is on the new host, I'm getting around to a lot of the things that I've been wanting to do for a while but put off in preperation for the move.
The first of these is moving the news into a database and building the news script and the RSS feed from there. Check that one off the list.
Next up will be a comment system for the news items. I figure everyone else has that so I should too.
This new favelet was inspired by a publishing accident yesterday morning where a tool used to move content from a database onto production servers malfunctioned and was spewing out malformed javascript in the onclick events of "a" tags. This of course caused no end of javascript error dialogs pointing to "line 25" and "line 140", etc. The errors themselves weren't difficult to spot in the code thanks to the nature of the screw up, but it got me thinking - why doesn't notepad or mozilla's source view have line numbers?
Enter the showSource favelet.
When I first started on this, I was using getElementsByTagName("html")[0].innerHTML and doing all the regexp work with javascript - this method worked fine in Mozilla, but thanks to MSIE's wacky interpretation of innerHTML, it was absolutely useless in that browser - not to mention a not entirely accurate view of the source since nothing above or below the HTML tags would have been represented.
So now this is a PHP script masquerading as javascript . When the favelet is activated, it passes the location.href of the page you are currently on to the script on slayeroffice, which then fopens() the url, does some regular expression work on the content, then creates a PRE element containing the source of the document with line numbers, alternating background colors for each line and color coded html.
It seems to work pretty well on the sites I've tried it on, and I suppose could come in handy.
That being said, since its PHP and being called from slayeroffice, it won't work for you if your development boxes are firewalled. You'll want to host the PHP file yourself and change the src for the javascript tag in the favelet accordingly. That will also make things nicer for this server. :)
It also will not work on a local file, ie file:///c:/source%20code/slayeroffice/index.html since slayeroffice.com can't connect to your hardrive.
Use the following link to add showSource to your Favorites/Bookmarks: showSource v1.0
I've made some code optimizations on the showSource favelet, namely having the script create a LINK element for an external style sheet to cut down on the size of the code returned by it. It made for a pretty good reduction -- with v1.0 of the script, the return for slayeroffice was 67.4K, and the new one returns 43.5K. I've added the style sheet to the zip file for those wishing to host the favelet themselves - feel free to modify it if you don't care for the styles I've applied.
For those not hosting it themselves, you might want to clear your browser cache to be sure you're getting the latest version.
It's not often that I post non-slayeroffice related news, but this is probably one of the most clever apps I've seen in a very long time:
Daniel Vine has set up his iMac to accept incoming url's, hit those urls with Safari, take a screenshot and then post said screenshot on his site so those of us without Macs can see how our sites render in that browser. That's just an incredibly cool thing to have written.
A new favelet for you today, the Mouseover DOM Inspector. It allows you to view the attributes of any HTML element on a page simply by mousing over it. It will highlight the particular element with a red border, and display its tag name and the specified attributes of the element in a DIV element that trails your mouse cursor. Hit the "esc" key to turn it off - works in MSIE and Mozilla.
Right click the link above and select "Add to Favorites" or "Bookmark this Link", depending on your browser.
Throughout the day I send and am sent numerous links to interesting/funny/tech related/wierd/etc news stories and I can see no reason why I shouldnt share some of them, so I've added a "daily links" feature to the site, found in the column to the right. If anything it should give you an insight into the often strange meanderings I make about the web whilst avoiding doing any actual work over the course of a day.
Another favelet today - this one a version of the windows app I wrote last year to get the headers from a server. I think favelet form for this sort of thing is much better than downloading VB6 runtimes and having to clutter your workspace with yet another resource hog.
As an example of what this favelet does, hit the following link to pull up the header info returned by slayeroffice. May or may not be useful to you, but you never know. To bookmark it, right click the link and select "Add to Favorites" or "Bookmark this Link" pending your current browser choice, then make your way about the web activating the favelet on the sites you surf to see what sort of server they are running.
A new addition to the arcade today, though a late one -- check out Kaboom. I finished this back in mid-November, but promptly forgot about it.
Speaking of Atari classics - when home over the holidays I ventured into my parents attic and recovered my Atari 2600 console, complete with about 15 games, so expect to see quite a few more re-writes in the coming weeks.
Fixed a bug in the Mouseover DOM Inspector that I didnt realize was there because I never use IE anymore - turns out that if you invoked the favelet and the mouse was over nothing the script could discern, it would complain repeatedly about "ob" being undefined until you moved the mouse. My apologies.
As mentioned on the sixth, I brought my Atari 2600 home and have been playing it fairly regularly, specifically one of my favorites as a kid, "Grand Prix", an Activision game written by David Crane around 1982.
For those that don't remember this title, it consisted of you driving a purple'ish colored dragster from a top down perspective and trying to go as fast as possible down a straight track, all the while avoiding other cars and oil slicks to achieve the best time.
Sound familiar? Well here is a pretty decent rewrite of it (the first track, at least) as the newest addition to the arcade.
I've had it in the back of my mind for a while that I needed to recode the navigation on this site so that is was a semantic list rather than a bunch of block level <a> tags, and yesterday morning I decided that that would be my goal for the day. Wouldnt you know it, a couple of hours later I'd ended up redesigning the entire site.
Funny how that happens, isn't it?
Changes/Additions:
No more 1x1 iframe to serve subcontent into the page. This is now done with a PHP include. "But Steve!", you say, "I thought you did everthing client side?". Yeah, well...this is easier.
"Mini-Navigation" bar: this is just a bunch of anchor links to the navigation links on the right sidebar. It's done only with CSS and uses the :hover psuedo element of the div container. So, it gracefully degrades in MSIE, giving only the top level links, works as expected in Mozilla/Netscape by expanding the menu, and craps out completely in Opera7. I'm not even going to bring up what a mess Konqueror made of it. So, still some work to be done there.
No more green/blue color scheme. See the old site here if you are unfamiliar with slayeroffice.
Next up:
Eighty plus sub content pages to be brought into standards compliance. Many of them are very old and the results of much copy/paste work which just proliferated the problem.
Getting the aforemention mini-nav to work in Opera/kHTML.
Odds and ends like putting the "About" link somewhere.
So, there you have it. The whole thing is even semantic, more or less. If you find any bugs after this weekend, please let me know. The ones you'll find today are probably a direct result of my bad habbit of working on this site live.
The dubious task of going though all of the subcontent pages and stripping them of <font> tags and replacing <b> tags meant to denote headings with the proper <h*> tags is complete. It took a while, but it was worth it.
I still have no idea what Opera's difficulty is with the mini-nav, but at least Opera can render the page correctly, unlike our good friend Netscape 7.02 which doesnt appear to understand overflow:auto; the same way other browsers do and makes the mContainer element as high as the h1 element and slaps a scroll bar on it. Nice.
Konqueror on the other hand seems to have difficulty with an element who's margin is set to auto and who contains two elements floating left and right. Its an odd thing to behold - the mouse cursor becomes a pointer where things should be, but the actual elements are rendered way out to the right.
So - browser bugs, and nasty ones. I'm going to continue to play with the style sheets to see if I can come to some sort of compromise with these PITA browsers, but I refuse to hack anything together for them.
Update: Konqueror's issue was solved by placing an arbitrary div element at the bottom of the mContainer div with a style of "clear:both;", which also solved Netscape 7's troubles. Thanks go to the beautiful and infinitely wise Kate for the help on fixing that.
Lately I've been playing the excellent GBA title, Mario & Luigi: Superstar Saga. Yes, it sounds cheesy, but it is surprisingly good. If you've got a GBA, I highly recommend it.
There are several mini-games within this title that deserve my usual javascript rewrite treatment and the first to make it onto the site is a rewrite of the mini-game found in the hold of S.S. Chuckola.
I give you Diamond Slide as the latest addition to the arcade. Enjoy!
Like several other people across the known universe, I watched the Superbowl on Sunday. One of the things I noticed, aside from Janet Jackson's boob, was the information ticker that CBS was using to display data about the current quarter.
It would appear every so often in the lower left corner of the screen, and the CBS logo would swipe across the heading and new data would be displayed in the box. I made a mental note of this behavior and decided to emulate it for the web.
Initially I intended to write the thing completely with javascript, but that turned out to be not terribly challenging, so I thought I would see if I couldnt manage to write one that used semantic markup that would gracefully degrade for any number of situations such as javascript disabled, or CSS support missing, or huge fonts, or large angry rhinos stampeding across your keyboard.
So bearing in mind that I was unable to replicate a situation such as the last described, give this Semantic Ticker thing a look.
I saw this last comment on centricle last night about a favelet that would label objects on a page with their current width and height in pixels, so I wrote it.
Per a visitor's request, I've updated the Categorized List Box to allow for partial string matches via a checkbox.
When checked, it will return matches for anything containing the string, not just matches that begin with the string. So, typing "ja" will return "Brain Jar" in addition to "javascript-games.org" and "Java Boutique".
At long last Web Paint has a neighbor in the Fun Toys section - the Symmetrical Pattern Generator, an experiment in creating random patterns with DIV elements.
I don't exactly recall what inspired this. Initially my intention was to write a kaleidoscope, but one thing led to another and the next thing you know I've got a cross between that, a Mondrian and a fractal. Any way you look at it, they're symmetric, and they're patterns. And, kind of cool. Here's what a couple look like:
You can also save them as PNGs to the Gallery and use them later to overlay new patterns on, as evidenced above. With loads of settings to tweak their outcome, it's next to impossible to create duplicate patterns. Go on and try to, I dare you.
I was clicking around on some development blogs last night and wound up on stilleye.com. Dave has some pretty neat stuff there -- I highly recommend giving it a look.
While there I stumbled into his favelets/bookmarklets section and saw that he had a pretty cool one that would allow you to highlight a static URL string on a page, activate the favelet and go to the URL that you had highlighted.
That got me thinking of how it could be done without having to highlight it first, which in turn got me to thinking of how you could turn any and all static urls on a page into working links, which then got me embroiled in a nasty one sided argument with text nodes and while loops that frequently locked my browser up.
Finally I was able to get the thing under control and managed a pretty reliable favelet that will turn any text node it finds on a page that it figures looks reasonably like a URL into a clickable link.
Check out the info page, with the link for it, here, and let me know if you run into any issues with it.
I was recently asked by a friend if there was such a thing as document.getElementsByClassName. I told them that, no, not inherently, but it shouldn't be a difficult thing to write. So I wrote it, and it worked well.
Then I googled for it and found that I had been beaten to it several times over and in several languages. Also revealed in the search was that Simon Willison had written a particulary interesting addition to the getElementsBy family of methods: document.getElementsBySelector.
These clever folks got me to thinking on other ways to extend these methods, and one that I hit on that I think is pretty good and maybe even useful is what I'm calling document.getElementsByWhatever
The method takes two arguments: variant "whatever" and boolean "includeTextNodes". It will return an object array of any element it finds that meets the "whatever" criteria.
For example, document.getElementsByWhatever("title",0) will return a collection of objects that have title attributes specified. document.getElementsByWhatever("look out behind you",1) will return a collection of objects that have that phrase as part of their text node collection.
If you should think of any "whatevers" that should be included in this method, feel free to let me know. I've tested this in MSIE 6, Opera 7, Mozilla 1.6, Firefox 0.8 and Safari 1.2, and all do well with it.
Hit the link above for a demo page, or use this one.
One of the projects I'm involved with at work uses a fair number of hidden fields within it's process to define actions that the backend scripts should take. I often find myself sifting through the HTML source in order to find out what the server variables that have been set into those fields are, or javascript:'ing from the URL bar to find their values or change them.
That became rather tedious, so I've written a favelet to manage it.
The "Hidden Field Modifier" will list all of the hidden fields for every form on a page along with their current values and allow you to change them. It works in Mozilla, Firefox and MSIE6 and has been tested under Win2k and XP.
Feel free to let me know if you find any problems with it or if you've got an idea to extend its functionality. Right click the following link and select "Add to Favorites" or "Bookmark this Link" depending on your browser of choice.
I was skimming through my access log earlier and noticed that someone was apparently displeased with the application I wrote last July that would parse a phrase you type in and then "speak" it back to you using the Merriam-Webster pronunciations keys. I base this assumption on the following url:
That along with another far more colorful phrase clued me in that perhaps there was a problem -- and yes, there was. It wasn't working at all, so, I've fixed it. It even works in Mozilla, Firefox and Netscape 7 now.
That said, if you find something on the site that doesn't work, tell me! There's a lot of stuff here and I don't check it every day to make sure something hasn't changed somewhere that would cause it to break. Cursing into my access log doesn't help anything in most cases, though some of it is fairly amusing.
A visitor to the site requested a modification to the Dynamic Date Dropdown, specifically that it would generate the dropdown with future dates rather than dates in the past.
So I've modified it to take an additional boolean argument to manage this. Passing the function a "0" will cause it to create "days" number of options into the future, while passing a "1" will have it create "days" number of options into the past.
At work we're in the process of re-vamping our main web based application to fall in line with XHTML/CSS standards with a very CSS Zengarden approach to templatizing the documents -- the idea being generalized markup with CSS controlling the presentation...you know, the whole presentation/markup seperation dogma.
In working on it, I've found it a bit of a pain in the ass to consult the various style sheets that control each individual template's appearence (based on myriad rules and variables) to see who's doing what and where, so once again it's a favelet to the rescue.
This newest addition to the Tools section is the Style Sheet Viewer for Mozilla & Firefox. It will create a DIV element that overlays the document and list all the style sheets referenced therein with their selectors and rules. It works for LINK's, inline STYLE's and one-level @import rules. (Right click that link and hit "Bookmark this Link")
I've tested it on a number of sites and the only ones it has difficulty with are sites that reference style sheets on different domains, such as Gamespot, which throws an "Access to restricted URI denied" exception, and Simon Willison's site, which causes it to throw a long-winded component exception which shall require further investigation.
"Note that if the value of the ownerNode property on the current STYLE element is NULL, then then ownerRule returns the rule that blah. And vice versa."
I was first made aware of the painful slowness of document.getElementsByName when I was writing Web Paint. Looping over 1,024 div elements using this method was so slow that I often worried that my browser was going to lock up and possibly explode from the exertion. To compensate, I ended up giving each "pixel" a unique ID and using document.getElementById. The resulting increase in speed of execution was astonishing.
Another project that I am currently working on reminded me of this, so I decided to write a little benchmark script to see just how much of a real difference there was. The test works like this: on load, a javascript function creates one hundred DIV elements that share a like name and id attribute of "mDiv". It also creates another one hundred div elements id'd "nDiv" + i, so nDiv0 through nDiv99.
Two buttons call two seperate functions. The first loops over the length of document.getElementsByName("mDiv") and sets each DIV element's innerHTML property to a zero length string, i.e., "". The second button calls a nearly identical function that loops from 0 to 99 and sets each nDiv+i element's innerHTML property to a zero length string.
Each function creates a Date object at its start and another at its finish and then subtracts and alerts the elapsed time. Here are the results on my 1.6GHz P4 with 512MB of RAM running on WinXP:
Browser
getElementsByName
getElementById
Firefox 0.8
120 - 130 ms
40-80 ms
Mozilla 1.6
90 ms
30-50 ms
Opera 7.2
290 ms
270-280 ms
Netscape 7.02
100-110 ms
40-70 ms
Konqueror 2.2.2*
360-721 ms
253-400 ms
MSIE 6
20 ms
30 ms
As you can see, getElementById is always faster than getElementsByName, except in MSIE. Now, assuming there is no flaw in my code, what could the reason for this be? Especially considering that I'm expecting the javascript parser to figure out that I mean "nDiv63" when I say "nDiv"+i, which just by nature really should be awfully slow.
My first thought on this was that getElementsByName could be a programmatic alias to document.all considering IE's implementation of getElementsByName. However, the same test using document.all is slower at 50 ms. So -- I have no idea what the story is here. Have a look at the benchmark page for yourself and see what your results are, and if you've any insight feel free to post your thoughts.
* Konqueror test was run on an 800MHz box with 256MB of RAM. I really only posted it's results as a reminder to myself that my linux box is in horrible condition and that I ought to upgrade it.
A friend of mine uses Hotmail for a secondary email account, and today approached me with a favor to ask.
I've never used Hotmail before, but it apparently has a particulary annoying feature where it mutilates any links it finds in an email so that when you click on them they open in a new window contained within a frameset. The top frame contains the MSN logo, along with the terribly important message "You are visiting a site outside of Hotmail. To return to Hotmail, close this browser window.".
My friend rightfully hates this and asked if I could write a favelet that would stop Hotmail from doing it. Never one to say no, I've obliged by providing the Hotmail Link Decrapulator Favelet.
All it does is loop over document.links, checking them for the "_action=" argument in the urls and replacing the link's href attribute with the value of that argument, thus effectively stripping out all the garbage in the link and allowing you to view your page in peace. Of course, if Hotmail ever changes the format of those links, this will stop working.
Until that day, this should do the trick. If you're a Hotmail user, you can right click the link above and select "Boomark This Link" or "Add to Favorites" depending on your browser of choice.
How many times do you find yourself manually futzing with a CSS file trying to get something right? I do it all the time...open it in Notepad via WS_FTP, do what I need to do, reload, get irritated, rinse, repeat. I know there are people out there that will tell me that maybe I should use a tabbed editor like Homesite that will let me have the CSS file open at the same time and then I can just hit some preview button to see how it looks, but dammit -- I like Notepad. There are probably even more people that think I shouldn't edit documents directly on the server, and to them I say...you're right.
So, to enable me to continue using an editor with a low memory footprint on the piece of crap Win2k box I'm forced to use at work and to keep me from constantly FTP'ing changes, I've written the Style Sheet Tweak favelet for Mozilla and Firefox.
When invoked, the favelet will parse through all the style sheets referenced by the document and give you a dropdown list of all the selectors. You pick one from the dropdown and it will populate a text area with all of the rules. You are then free to edit, remove, add to them and etc. When satisfied, hit the "Apply" button and see how badly the new rules break your page. I've also provided a handy "Reset" button that will restore the original rules to the selector.
I've made a small update to the Mouseover DOM Inspector to allow you to toggle the red border highlights by hitting the "b" key.
Enjoy!
Update: I've gotten rid of the borders entirely and gone with changing the background color of the element you are hovering over to gray. This can be toggled just as the borders could be.
Frequently I am asked by co-workers and friends to help debug javascript. Generally I am completely unfamiliar with the project they're working on and have never seen the troubling script, and nine times out of ten the script is referenced externally, or there are several externally referenced scripts. This means that I have to view the source of the document, copy the src attribute of the script, paste it into my browser and then run through the script or scripts to see if I can help them figure out what the problem could be.
That's gotten old so I thought I'd come up with something to get at the scripts a bit faster -- I give you the Javascript Object Tree favelet.
This will overlay your current document with a DIV element containing a collapsed list of all the javascript object types currently referenced by the page, from functions to strings to booleans and all else that falls between. Clicking the object type - for example "function", will expand a new list with all of the function names. Clicking one of the function names will expand into the function's body.
You know how a tree view works, so I don't know why I'm explaining it to you. This page isn't a very good example of what the favelet does as it's fairly light on javascript...something like Missile Command would be better. Also, this current version only works in Mozilla and Firefox - an MSIE version may be coming shortly depending on the amount of hoops I'll have to jump through to get it working.
I've made two modifications to the Highlighter Favelet based on the feedback of two users.
The first: Ben Holt let me know that the favelet was changing the case of highlighted text, meaning that searching for "html" would change "DHTML" to "Dhtml". Fixed.
The second: Dan Wood sent me a mail saying he'd added "color:black" to the highlight span so that you'd not end up with white text on yellow or some other difficult to read color combination. I've added that to my version as well. An excellent idea.
With the addition of the Javascript Object Tree favelet my bookmarks toolbar has officially become entirely too crowded for my liking.
In order to free some space, I've written a new favelet that creates a menu of all of my development favelets on the current document. Yes -- a favelet that invokes favelets. I'm calling it the Favelet Suite.
The Ruler favelet will be either mine or centricle's, depending on your browser.
Any new favelets I write will be included in this suite, so unless you've got your browser set to cache like mad you should get them automatically through this menu when it's updated, so that's kind of cool.
Right click the following link and do what you need to do to get it in your favorites list: Favelet Suite.
Simon Willison posted on his site yesterday a request for a bookmarklet that would allow you to see the hex color value of the pixel beneath the mouse cursor.
I had given some consideration to this same idea a few months ago but abandoned the project because of the requirements of the code:
A Win32 OS
MSIE5+
ActiveX
I generally try to stay away from ActiveX as a rule, but that's really the easiest way to accomplish this particular task. I suspect Java could do it as well - but it would have to be signed to even work, unlike activeX which can be coerced into working by lowering your security settings. I have no desire to drop the cash required to get a cert for either.
I thought I would post the results of my experiment in the off chance that someone might benefit from my very sloppy, purely experimental code. Give it a look here.. Requirements as stated above - you'll also need to set slayeroffice as a "Trusted Site" in MSIE's security settings and set the appropriate settings to enable activeX components for it to work.
I've made a couple of improvements to the site over the past couple of days. In no particular order, they are:
Permalinks: The header text for each news entry now links to a permanent link for the entry.
RSS Feed: Headlines in the RSS feed going forward will now link to either the content page of the post's subject matter or the perma link of the post rather than just to the main page. Thanks to Vicky for bringing this flaw to my attention.
Comments: Comments are now enabled on all content pages, not just front-page news items.
Comments again: New line characters in comments are now converted to <p> tags to prevent everything from running together.
So mostly just stuff that everyone else already does on their site that I was too lazy to write into mine without prodding. If there is anything else you'd like to see incorporated that would make your visit to slayeroffice less painful, please let me know.
I was surfing around last night and wound up on Travis Beckham's podLob, an incredible site full of extremely good Flash and DHTML experiments.
As you know, I am a big fan of rewriting Flash stuff in DHTML, so naturally I was intrigued by the possibilities that Mr. Beckham's site offered for experimentation of my own.
One piece in particular that I liked very much was a Flash application he calls "Image Viewer", which you'll find linked on his site on the right side of the page, listed as #51. It shows a series of thumbnails which upon being clicked by the user expand into their full size and slide across the canvas. Pretty neat.
So I've written a similiar one in Javascript. It works in MSIE 6, MacIE 5.2, Gecko based browsers (including NS6), Konqueror and Safari.
Opera, both Windows v7.2 and Mac v7.5, seem to be incapable of resizing images on the fly, so it doesnt work for that browser, though it does degrade quite nicely for Netscape 4. If I'm just missing something with the Opera thing, let me know.
Another flash inspired project for you today, the Scrolling & Expanding List. I'm not able to point to anything specific, but I know I've seen this done in Flash before. Either that or I saw it done in DHTML and am subconsciously re-efforting someone else's work...but then this wouldn't be the first time.
At any rate, this project follows along with my new goal of applying interesting behavior to standard markup. This takes a regular list of twenty items, places them in a 60 pixel tall container element with a hidden overflow and allows for scrolling the data up and down in a sort of "bouncy" manner, as well as expanding the list in a fluid, animated motion.
In lesser browsers and web enabled devices such as my fancy new Nokia 6800 (which by the way is not nearly as shiny as those photos make it out to be) it renders as a normal list, though the phone does make a rather impressive effort at interpreting the CSS. If javascript is disabled, it renders the styled list fully expanded.
Tested and works in Netscape 6+, Opera 7+, MSIE6, MacIE 5.2, OmniWeb 4.5, Firefox, Mozilla and Safari. I'm only able to test in Safari 1.0 and it has issues with the expanding bit, as does OmniWeb, though I'd like to think that later versions have a better time with it. I've no idea how Konqueror feels about it as my video card in that box has apparently died.
I've made some improvements/bug fixes on the WinIE6 Ruler favelet. They are:
When closing the favelet, all masks and info boxes will clear at once. No more hitting keys multiple times to get rid of them.
When you create a new mask, the info box for the old mask will "snap" to the bottom right corner of the mask it belongs to, rather than floating where it was when you hit the "+" key.
You can now close inactive info boxes. A link entitled "Hide Me" will appear at the bottom of the box.
I've also optimized the code a bit, using object reference arrays over DOM methods, resulting in smaller, presumably faster code. Not a lot smaller, only 363 bytes, but I'll take what I can get. If there is anything else you'd like to see it do, or if I've inadvertantly introduced any new bugs, let me know.
If the changes arent showing up for you, you'll want to clear your cache. Thanks go to Frederic for the bug report.
I am using M-DOM-I to delete all menus, banners, headers from page before printing. Saves lot's of paper ;) But it is not fun to Alt-Tab to M-DOM-I for every block I am deleting :(
He's using Mozilla's built in DOM Inspector to remove unwanted elements, but its a cumbersome process. He asked that element removal be added to the MODI's functionality, but I thought a new favelet would be better suited. Enter the Remove Children favelet.
What this new favelet does is loop over document.getElementsByTagName("*") and hijacks each elements onclick, onmouseover and onmouseout events. It functions in similar fashion to the MODI with respect to background color highlights, but only adds a title attribute to the element noting what the element is and informing you to click on it to remove it from the DOM. It will also set the href of any <a> tags it comes across to "#" to allow them to be clicked on and removed.
Tested and works in MSIE6, MacIE5.2, Mozilla 1.6 and Firefox 0.8. My version of Safari doesn't support the wildcard argument for getElementsByTagName, but hopefully it works in later versions. Opera 7 doesn't seem to understand what this.parentNode.removeChild(this) means, as doing so in 7.2 on XP and 7.5 on Mac causes it to remove the entire node, parent and all. The mouseover stuff does work, however, so XP Opera users could benefit from this as a light weight MODI...provided they don't click on anything.
This past week I had the opportunity to sit in on a Web Standards presentation with Eric Meyer and Molly Holzschlag, hosted by an organization within my company with about 20 times more developers than my own. Thanks go to Kimberly for the invitation.
During the presentation, Eric showed a chart representing the Document Tree, which looked something like this:
He then lamented that there was nothing around that could create this sort of thing for you. This of course caused me to stop paying attention to everything he was saying (no fault of his presentation...I'm easily distracted) to think on a way of doing it. I then started messing around with writing it, but then Molly yelled at me for typing and not paying attention.
Ok...she didn't actually yell and it wasn't directed at me specifically, but all the same I had to wait until I got home to work on it.
It turned out to be a bit more complicated than I expected it would be, but I ended up hitting on a good way to go about it and what I consider a fair way to display the information given the limitations of the medium and the vast differences in markup around the web. Here's what it looks like:
As you can see, it shows a reasonably intuitive layout of the document, with the HTML element first, with two labels for the HEAD and BODY as children of that label, and so on and so forth throughout. You end up with a sort of inverted city skyline which happens to be particularly interesting, visually speaking, on sites using table based layouts.
A few notes:
Fark.com caused Firefox to lock up on me when I invoked it there...I suspect the lengthy table, so be aware that a site with a good deal of nested markup may cause you problems.
Depending on the amount of markup, it may take a little bit to render the chart. The more markup, the longer it takes...around 4 seconds for me on this site using Firefox 0.8.
While the code has been built with MSIE6 in mind, it will return immediately when invoked until I work out some rather severe bugs.
One other interesting thing of note - to accomplish this, I used object references as the indexes in my span object array. Mozilla & Firefox had no issues with that whatsoever, but MSIE6 saw the [object] as a literal string and not as a unique identifier. Meaning, Firefox saw this:
p[[object HTMLImageElement]];
which evaluates to a unique reference to a unique object, while MSIE saw this:
p["[object]"];
So every time a new element was encountered by MSIE, it would simply append it to the previous sibling, rather than the correct object who's index was its parent node. I ended up using MSIE's proprietary uniqueID attribute (the first time ever) to get around this, but there are still problems.
Addition of the ability to toggle the view from horizontal to vertical and back by pressing the "T" key.
Windows Opera 7.50b now supported. (Still a bit shaky on the horizontal layout though...something screwy in the CSS, I'm just not sure what.)
Update #2: With the release of Opera 7.50b for Windows and it's support of the centralized delivery method of favelets that I prefer, lots of them are now working in that version of the browser. In applications where I was actively blocking document.all (like the Javascript Object Tree) I'm checking the user-agent string for "Opera" (since document.all is MSIE as well as Opera) so if your install of Opera is masquerading as something else -- say MSIE without Opera in the string -- they'll just return out with the standard "sorry, blah blah" dialog. If you're aware of a DOM method that Opera supports that MSIE6 does not (or vice-versa), let me know about it.
A few things that now work in Opera 7.50b, in addition to the DTC are:
There may be others as well...I neglected to note everything. If you should come across anything on the site that turns out to work with Opera 7.50b that I haven't marked as such, let me know about it.
Oh - this point version isn't my one-up, Stuart. ;)
Lately I've been writinganawfullotof tools, but there was a time when thereweremoregames than anything else on this site. The last game I wrote was Diamond Slide on February 1st, and before that was Grand Prix on January 12th. So, around 4 months since the last game experiment.
With that in mind I googled for "puzzle games" last night and came across a site with lots of games that clearly go back to the stone age of the internet, being completely CGI based. I played the Quadrix game and liked it very much and thought I would create a version of my own.
My version isn't nearly as complicated as theirs - I suspect there is a good deal more math going on there than I would like to deal with - I just created a pattern and sliced it up, which suits my purposes and creates a fair enough challenge.
It also serves as a relatively good cross-browser demonstration of drag-and-drop code (tested and works in Mozilla, Netscape 6+, Firefox, MSIE6, Safari 1.0 and Opera 7+.), and I abuse the hell out of the opacity filter/styles as I am often want to do.
And of course - the link to the game, which I am calling "Quadrisaw" -- pronounced as though it were the name of a professional wrestler as referred to by another professional wrestler during an interview with Mean Gene Okerlund. "Quadrisaaaaaaaaaaaaaaaaaaawwww".
Color Coding: Each element label now has a semi-unique background color. This was accomplished by taking the character code value of the first three characters of the tag name and subtracting that value from 295 and applying the result as the individual red, green and blue components of the color. If the tag name is less than three characters long, the values are set to that of the red component. Thanks go to Andrew Wooldridge for the suggestion.
Branch Removal: Clicking on the text of any label will now remove that label and all of its child labels from the chart. Useful if you aren't interested in how many meta or link elements someone has in the head of their document.
Element Highlighting: This was intended to be a part of the original release but I didn't get around to it. Borrowing directly from the Mouseover DOM Inspector, hovering over any element label (except the HTML label as that seemed pointless) will turn the background color of the element it represents to gray. This is OFF by default, and can be toggled with the "B" key just like in the MODI.
Opacity: The chart's container element is now set to an opacity of 0.9 to allow you to see any elements that are being highlighted that happen to be obscured by the chart. This is, of course, a Mozilla/Firefox feature only as Opera 7.5 doesn't support it.
If you aren't seeing the changes in your bookmarked version, you'll want to clear your cache.
If I've introduced any bugs with this update, please let me know and I'll fix them ASAP. And finally - this one is my one-up, Stuart. :)
Toggling highlights and killing the favelet will (should) no longer leave elements highlighted. When either of these events occur the element will (should) revert to its original state.
Pressing the [v] key while over an element will pop a textarea at the mouse coordinates containing the innerHTML of that element. You are free to modify the HTML in the textarea. A link below the textarea, upon being clicked, will apply the new HTML to that element. Hitting the [esc] key will close the textarea. Hitting [esc] with the textarea closed will kill the favelet as it always has.
I hope the second item proves useful to you - in the very least if can offer you some amusement by allowing you to modify the more popular sites you visit. I tricked Kate into thinking I had been farked (Javascript surrenders).
As always, let me know if you run into any problems, and if the changes aren't showing up for you or it looks strange, clear your cache and reload.
Via Simon Willison, I read with great interest a color palette creation tip on Andy Clarke's site. It details creating a 250x100 canvas in Fireworks or Photoshop, creating two 250px by 50px layers, one white and one black, then creating ten 50px by 50px layers, five at the top and five at the bottom, giving them all the same color and then adjusting their opacity in a uniform manner to create a palette of shades of the base color.
A really fantastic tip - but one I am far, far too lazy to implement as described.
As such, I've written a small web based application that does just that. Supply it with a base color in hex format and it will figure out all the opacity stuff and give you the hex values (and the RGB values in the tool tip) of all the colors generated. It looks like this:
I'm calling it the Color Palette Creator. Thanks to Mr. Clarke for the inspiration. As always, let me know if you encounter problems -- suggestions are welcome.
Incidentally, according to my database, this is the 100th "experiment/tool/thing" to be published on slayeroffice. That's an awful lot of "horribly awry" if you ask me.
Before I released the color palette creator, I had tested it in Safari (and OmniWeb) and it had worked. Really, it did.
Then I decided to add the function that would check to make sure what you are entering is a valid hex color, and assumed that it would work. It didn't. In fact, it broke the whole thing in Safari, which several folks have pointed out to me.
After a weekend too busy to get to it as soon as I wanted to, I've put a temporary fix in for it. It basically consists of returning true from the validation function if you're in Safari. Not an elegant fix, but it will have to do for now. I'll figure out the real problem later.
Note to self: Stop mucking with code after it's finished.
Last week Simon Willison posted a link to the Atom Discussion Minutes, along with a note about how to improve it's legability with some CSS using Jesse Ruderman's Test Styles favelet.
That reminded me that I had intended to introduce the ability to add selectors to the Style Tweaker back when I first released it based on Simon's comment about not being able to add them with mine.
So that reminded me of it, I wrote it, then became busy with other stuff, promptly forgot that I had written it, and I can now not remember what it was that reminded me tonight that I had written it. Honestly, its a wonder I get anything done with the usual state of my memory.
Updates in v1.1
Add Selectors: As stated, you can now add selectors. Just select "Add Selector(s)" or type away in the box with no selector picked and hit "apply". You can add more than one at a time.
Show CSS: Hit the "show" button to get the entire style sheet(s) written out in a new window
Delete: Choose a selector, hit the "delete" button and it and its rules will be gone.
Additionally, style sheets with a "media" attribute value of "print" will no longer show up in the list. If this is a problem for anyone, let me know -- they were getting in the way for me. If anyone was tweaking print styles with this thing I'll add it back in as an option.
Let me know of any problems you find and clear your cache if the changes aren't showing up for you.
"A nice added feature to this tool would be to have some base colors that a person could click on to fill in the hex value textbox."
I agree, and I suppose the best way to accomplish that is with randomly generated base colors. So I've added that in -- just click the "random" button and it will do the rest.
Her comment requested a way to copy the color values to the clipboard - to my knowledge, there is no truely standards based way of doing this. MSIE has its window.clipboard object, and Gecko browsers have some odd security requirement for clipboard access, and I just didn't much feel like taking that route.
At first I just added a textarea element which would have hex values dropped into it, but this seemed a bit confusing as they were all just sort of lumped together line by line. So I decided to add a table of color data - the left column is the color, the right column is the value. All easily copyable, so hopefully Melissa will approve of my approach.
I've also added two buttons to determine what the output in that table will be -- either hex or the RGB values.
I also made a semi-interesting discovery while working on this. Opera 7.x seems incapable of refreshing the document when it comes to changing the background color of a table cell if that table cell is empty. You have to minimize and then maximize it or drag another window over the area to force a refresh. It could also just be my machine. I ended up placing a in the table cell if window.opera to get around this.
You're probably thinking to yourself, "Another update to that color thingie? What's he done now, and how soon will it be before slayeroffice becomes colorpalettecreator.com?"
I'll agree that I've probably spent entirely too much time on this project at the expense of others, but the suggestions folks are making are all too good to ignore. The latest comes from Ölbaum, who suggests a palette history and the ability to set an individual tone as the base color.
As you can see - excellent ideas that deserved immediate attention, and they've been added.
Simply click on any color swatch and it will be set as the new base color and will be added to a dropdown that lists all of the base colors for the current session. Select any of those to re-set the base color to a previous color. (Any color that is set as a base color by any means is added to the list as well.)
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.
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!
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.
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.
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.
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.
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.
The idea for this latest favelet occured to me when I was sampling colors from various sites for the Color Shift Experiment. Click the eyedropper, click the color, right click to copy the hex value, rinse, repeat...wouldn't it be nice to be able to get a list of all the colors a site uses with the push of a button?
So thats what this new tool does -- it parses through a site's style sheets, style attributes and even COLOR and BGCOLOR attributes (shame on you if you are still using those...) and drops each unique color it finds into a table along with it's hex and RGB values.
A couple of caveats:
As with the Style Sheet Tweak favelet, if your CSS document is not on the same domain, it can't parse it. Meaning if I use an absolute url to my style sheet as www.slayeroffice.com, but you are visiting the site as slayeroffice.com, it will complain. This is a browser restriction.
Due to the vastly different ways that MSIE and Mozilla based browsers treat the styleSheet object and the colors it returns, I've written seperate versions for each browser. They are indentical in functionality, though the Mozilla version is much faster.
Opera provides no access to the styleSheet object, so this thing is pretty useless in that browser. If I'm wrong about this, please tell me how I can go about it.
It does not list colors that are defined by their names, like "red" or "green".
It does not check deprecated attributes like ALINK and TEXT.
Should you find that the application is missing any colors you know are defined in a page, please send me a link to the page, the color not being listed and the browser you're using so I can address the problem.
As always, suggestions for improvements are welcome.
Right click the appropriate link for your browser to add this tool to your favorites:
Per Andrew and Andres's requests, I've added a "close" link to all of the favelets that needed one, including the suite. It's down at the bottom, linked in the "[esc] to close" text above the version info.
I've also re-worked the layout for the Favelet Suite so that the entire line is click-able (also at Andrew's request). This involved modifying the style sheet as well as the script, so you'll definately want to clear your cache to ensure you get both new files.
"I had [a] thought that if a person could store their base history in a cookie that would be incredible."
Indeed, that would be. A fine idea, so I've written it. Here's how it works:
When you've hit upon a base color that you like, you can hit the "save base" button that now appears below the "base color history" dropdown. This will add the base colors hex value to a cookie named "color_history". Everytime you save a color, the color value is appended to that cookie.
Once you have a color or two saved, you can call them up with the "view saved" button that is next to the "save base" button. This will open a DIV element that contains swatches of all the colors you've saved. Click on any swatch to select it and hit the "set as base" button to bring up a saved color palette.
Alternately, if you've changed your mind about the saved color, you can select it and hit the "delete" button and it will be removed from your saved colors. Further, if you've decided you can't stand the whole lot of them, you can hit the "delete all" button to clear every one of them out.
You know this, of course, but being as this is done with cookies your saved colors won't persist across different browsers or even different machines, though I have set them to an exceptionally long expiration date of July 1st, 2010 so they aren't going anywhere (unless you delete them).
As most usual readers of this site know, I never make personal posts - though I'm going to make one today simply because I predict that the event is going to have a rather polar effect on updates to the site.
I have quit smoking.
I "enjoyed" my last cigarette the night of July 4th just before passing out from over-celebrating, and I've not had one since. I'd made up my mind about a month ago to quit smoking on July 5th for the following reasons:
I'm tired of waking up with lungs full of phlegm.
I'm tired of waking up with sore lungs and a sore throat.
I'm tired of being winded from walking up a flight of stairs.
I'm tired of not being able to comfortably sit through an entire movie without dieing for a smoke two thirds of the way through.
I'm tried of going outside to smoke, especially when its cold or raining or both.
I'm tired of getting the stink eye from non-smokers.
I'm tired of having to go to the store at 11pm to buy smokes because I've run out.
I'm tired of spending over $6 for two packs of smokes every other day.
I'm tired of stinking of cigarette smoke.
I'm tired of having erratic blood pressure problems because of smoking.
I'm tired of having such a short temper, which I believe to be directly related to the blood pressure problems from the smoking.
I'm tired of coughing all the time.
Most of all, I'm tired of it making Kate unhappy. Sure, she says she doesn't mind, but I know she does.
So, here I sit wearing a 21mg nicotine patch, armed with a sleeve of vaguely orange flavored nicotine gum for when the bad cravings come and enough hard candy to sink a small ship.
Why am I telling you all of this? Well, the way I see it, I'm either going to be adding stuff to the site at an incredible rate in a desperate attempt to occupy myself and keep from thinking about smoking a cigarette, or I'm going to be so constantly distracted by the want of a smoke that I'll end up drinking beer and playing video games all the time because I can't keep a thought in my head for more than five minutes. So if you notice an absence in updates, you'll know I'm downstairs drinking beer and having the crap beat out of me in Fight Night 2004 as part of a bid to keep myself smoke free.
I'd imagine that most people would catagorize slayeroffice as a blog. I disagree. While it does meet the requirements of a weblog with the regular updates, a comment system and etc, lots of sites have done this in the past and have not been called blogs.
Slayeroffice is, and always has been, a simple front end to my code experiments. I dont make personal observations, I rarely make post's about things not related to those experiments and I don't detail amusing events in my life. That simply isn't what slayeroffice.com is for.
The new blog domain will be a place for me to practice my writing skills and lay down some humorous true life tales, or not so true life as the case may be. Depends on my mood, really. And, most importantly - it's one more thing to occupy me while I'm only 4 days, 21 hours and 58 minutes without a damned cigarette. Not that I'm counting.
So that's what I've been up to in my free time -- designing a new site, writing the backend, coming up with some content and setting it all up.
And you thought I was drunkenly making my way to the heavyweight championship bout in Fight Night 2004.
Partially inspired by the fireworks last weekend, but mostly inspired by boredom, I give you the Mouse Patterns experiment.
This will track the mouse coordinates over a 400x240 area - rendering DIV elements at the x and y, and mirroring them 3 additional times in the DIV for a nice effect. Borrowing code from the Color Shift experiment, the DIV's color attribute shifts as you mouse around. Most likely something better appreciated when under the influence of your favorite hallucinogenic.
Works in MSIE6, Moz/Firefox, Safari, Netscape 7 and even MacIE5.2, though some perform better than others.
I've made a small update to the Page Info favelet. TITLE and ALT attribute values no longer count towards markup size, but rather content size. It will also inform you of the byte size of your TITLE and ALT attributes.
I also fixed a bug that was displaying total markup size as the same as body markup...no idea how that one was introduced. Clear your cache if the changes arent showing up for you, and let me know if you run into any issues.
I saw a referal from Dennis to the Color Palette Creator in my access log this morning and saw that he'd created a screen shot compilation of 10 palettes that he had made for his reference. I thought it might be useful (as well as a bit of a time saver) to have the application do that sort of thing on its own.
You can now export all of your saved palettes to a PNG image via the "saved palettes" window. Simply save a color or three by clicking the "save base" button, then view them by clicking the "view saved button". From there, you'll see the "Create PNG" button - clicking that will open a new window with all of the palettes in a PNG.
This next part is very, very important:
The image is temporary -- it does not exist on the server. If you want to keep the image, you must save it to your hard drive. Don't bookmark it and don't link to it because the image won't exist for anyone but you. Also, I've noticed that Firefox 0.9.2 is rather touchy about saving the image properly from the right-click context menu, but it seems to be able to manage it from the "File-Save As" (CTRL+S) menu. Earlier versions may exibit this as well. Not sure what the deal is there - if anyone's encountered this with PHP's Image Library and PNG's before and knows of a solution, please let me know.
Last week a co-worker brought up MSIE's inablity to resize pixel sized fonts on a message board we run to discuss web development and standards stuff and thought it would be a good idea to develop a javascript library to add the functionality to our pages for folks in IE. An excellent idea, so I decided to tackle it in my ever decreasing amount of free time - it also occured to me that it would make a nice favelet.
What I wrote was a script that would parse through all of the style sheet objects referenced by a document as well as the inline style attributes, checking for defined fontSize rules and incrementing them by 1. It worked marvelously on the test page I wrote for it that had a smattering of elements with various font sizes and units, but when employed on a page with a large-ish style sheet it failed miserably. Seconds would pass while IE went about bumping all the font sizes.
It then occured to me that MSIE has a proprietary style called zoom that allows you to, well...zoom everything. I'd never found a real use for it outside of the end animation in Perfection.
A quick search for MSIE and zoom led me to Gez Lemon's Juicy Studio, who had written a favelet using IE's zoom a few weeks ago. We had a brief conversation in his comments on it -- I suggested an improvement or two for it, he agreed they were good ideas, but said he doesn't intend to develop it any further. So, I'll post mine.
Invoke the favelet and then use the plus and minus keys on your numeric keypad to increment and decrement the zoom factor. Use the asterix on your numeric keypad to reset the zoom factor to 1x.
I've noticed an oddity or two with some pages - on this site, it doesnt zoom the navigation menu, and I've no clue why. It does work on most sites though, so hopefully you'll get some use from it.
Kevin [ 6:10pm ]: sure would be handy if your style sheet tweaker could be dragged Me [ 6:10pm ]: I am away from my computer right now.
Done.
It can now also be closed by hitting the [esc] key. I will most likely also add the drag functionality to other favelets when time permits and where applicable.
Some of these required style sheet modifications (like the Style Sheet Tweak from yesterday which I forgot to mention) so you'll want to clear your cache to be sure you get the update. Let me know if you run into any problems!
On a seperate note, I had my first comment spam attack this morning. I feel so special.
This idea occured to me while I was at Mark Pilgrim's site reading his hilarious (and sadly, true) "Why Specs Matter" article.
Mr. Pilgrim's header on his site is a single image broken out into thirty-six <div> elements with the background-position staggered to create a mosaic effect. I thought a slideshow that would render the images in this manner might prove interesting.
As many <img> elements as you like are placed in a container element with all of their display's set to "none". When the script initializes, it loops over the images in the container and creates references to them, and then creates fifteen <div> elements, setting the SRC attribute of the first image as the background-image of each <div>. The background-position is then staggered accordingly and the fifteen <div> elements appear to be a whole image.
When you click on a navigation item (created dynamically based on the number of images found) the individual <div> elements contract until they are two pixels wide. The requested image is then broken up and the <div> elements expand until they are 100 pixels wide and the image once again appears whole. The background-position of each <div> is adjusted during the animation to make it appear as though the image is collapsing on itself. Sort of like the intro for The Love Boat, as Kevin aptly pointed out when I showed it to him.
Works in MSIE6, Mozilla, Firefox, Opera 7.5 (really, really well - very fast and smooth) and sort of works in Safari. The markup is completely semantic and valid and all behavior is applied via script.
A pretty direct rewrite of Travis Beckham's Flash based "Resizing Slide Show", found on his site listed as #1, I give you Slide Show IV. The only significant difference is that I didnt include the indicator slide (where the box slides from the active index to the new index).
It works in MSIE6, Mozilla, Firefox, NS6+ and Opera 7.5 pretty well, minus the opacity treatment in Opera. Safari has an issue where the navigation element disapears after the first transition and I've no clue why. If anyone can figure it out, let me know.
A couple of interesting discoveries while writing this - first, Opera 7.5 ignored my programatic plea to set the image's display to block and it turns out the cause was my overly zealous selector:
#mContainer #imageContainer img { display:none; }
When I changed it to
#imageContainer img { display:none; }
it was fine.
I don't know if thats an Opera bug or the way it should be, but I'll have to make a note to not do favelet style selectors when not writing a favelet.
Lastly, MSIE refuses to return the proper dimensions of an image who's display is set to none. It will return 0x0, which makes sense - except that I am requesting the dimensions with getAttribute and even tried a custom function that loops over attributes to get at them.
I ended up having to assign two bogus attributes, xwidth and xheight, in order to grab the image dimensions from the script. Again - I dont know if this is a bug or the way its supposed to work, but it seems to me that if I am asking for an attribute value, it should return whats in the attribute, not what the browser has computed it to be.
I was contacted over the weekend and informed that Hotmail had changed their link crapulation methods, and that the Hotmail Link Decrapulator was no longer working.
I went and investigated, but it worked for me, so I thought perhaps it was user error or an anomaly of some sort. Then, more mails came in and I abandoned that notion. It looks to me like they are randomly changing the link format to use the old method as well as a new javascript: protocol method along with double encoding the url.
This update addresses the change, and it makes the favelet "hosted" so I can take care of this sort of nonsense and users of the favelet won't have to re-bookmark the link.
If you use the Decrapulator, you will need to re-bookmark now, however. The link below contains the update:
Right click, select "Add to Favorites" or "Bookmark this Link". Let me know if you run into issues, and obviously let me know if they muck about with the format again.
His addition to the application shows the node hierarchy of the element, recursivly showing the parent elements of the object up to the HTML element, as well as the width, height, top and left of the object you're hovering over.
Nice work, Aaron!
If the changes aren't showing up for you, clear your browser's cache.
A long time ago, before we had this great big world wide web we all love so much and computers were integral parts of a lot of peoples lives (my own included), I drew. A lot.
I even went to art school for a couple of years, and majored in drawing. At the time I figured I would either become a professor at one of the schools I had attended (turns out you need a Masters for that, though), or be a classic starving artist. I spent a good deal of time at the latter, doing charicature sketches, random freelance illustration work for tourist T-Shirts in D.C., and my personal favorite (which paid in food and alchohol) - working on drawings in the middle of a trendy restaurant while people had their dinner.
Then one day I heard of this thing called the internet and the transition from "artist" to geek began.
Up until a month ago, it had been around ten years since I had put pencil to paper and drawn anything outside of a doodle while on the phone. Back in August, while drinking a tremendous amount of beer with my good friend Kevin, we got on the subject of why I don't draw anymore. One thing led to another and he basically told me I was a dumb ass for letting it slip.
After some reflection, I realized he was right.
With that said, and completely and utterly against my better judgement, I give you portfolio.slayeroffice, a collection of recent drawings I've done in the past month. All are portraits, because that's what I enjoy drawing the most and all are done in colored pencil on cold press illustration board.
What I think might make this interesting to folks is that around the fourth drawing, a portrait of my friend Josh's son, I purchased a scanner. All drawings going forward will be scanned every hour or so while they're being worked on. I personally find it fascinating to watch them go from start to finish.
This also explains why this site hasn't seen much in the way of updates recently. Well, that and I got into the EQ2 beta a couple of weeks ago, but that's another story.
I've updated the Mouseover DOM Inspector to work on sites serving their content with an application/xhtml+xml MIME type. This was accomplished by removing all instances of object creation with the non-standard (but oh so very handy) innerHTML property.
So the code is bigger, but at least its "future-proof". For now, at least. =P
All of the original functionality remains, but it should be noted that the innerHTML viewer/modifier invoked with the "v" key isn't going to work on application/xhtml+xml sites unless someone who is feeling far more industrious than I am right now figures out a way to make that work with straight DOM methods.
Making the conversion wasn't as big a pain as I had anticipated it to be, only taking about 45 minutes, and I suppose going forward with new projects I'll avoid innerHTML, but I sure am going to miss it. Over the next week or so (probably longer) I'll be retro-fitting the other favelets in the same manner.
This site is two years old today. If it were a child, this would signify it's entrance into the "terrible twos", where bowls of cereal are purposefully thrown at walls and things it knows it isn't supposed to play with are and then broken beyond repair. Cats would cower in fear when it toddled into a room, it's head would often get stuck between stair railings and it's parents would often find themselves chasing it through the grocery store, watching in horror as it knocked over carefully constructed displays of boxes of the same cereal that were dashed onto the walls that very morning.
With any luck, this year will prove no different for the site.
If you're particularly bored, here are the news archives going all the way back to November 6th, 2002. Make sure you do a shot of your favorite spirits every time you see the phrase "Win IE5.5+ only", and chug a beer each time you come across a proposed project that was never finished.
I first heard of Konfabulator earlier this year during a segment on The Screen Savers. It peaked my interest to be sure - a javascript runtime engine!
The problem, of course, was that until the other day it was OS X only - and while I do have occasional access to a powerbook through Kate, I still can't bring myself to use a Mac for anything other than browsing and checking email. I won't go into the details of why as most of the reasons are stupid and easily refuted -- it really just boils down to my being more comfortable developing on a Windows machine.
Anyway, now it's out for Windows and I've spent the past couple of days playing with it. Overall, I like it. I have a few issues, but for the most part I found it very easy to learn -- if you know javascript and have seen an xml file before, you'll get it.
A list of some of the things I don't like - if I'm wrong about any of these, absolutely let me know.
No "this" object, as in this.property
No support for anonymous functions: object.onMouseUp = function() { fooBar(x,y); }
Divergence from the more common attribute names. For example - vOffset instead of "top" or "y".
No means of importing a text file. There is an interface for deleting files, but nothing that I could find to read them.
Limited to one window object per widget.
bgOpacity property has a default value of 0. This should default to 255 when a bgColor is specified.
No means to hide objects. I can set the opacity of a textarea to 0, but it's still there. I guess I could muck with the zOrder, but I want to be able to display:none; the object.
I also encountered a bug where if a textarea object overlaps the transparent areas of a window object, the entire application freezes - debug window and all, and I have a few other small irks with it, like the inability to give a textarea a border.
Outside of these things, and admitedly several of them are just my own personal preference, its very, very cool.
Now that the rant is out of the way, here's my first Konfabulator effort: a "slightly less functional than its web based sister and written purely from an experimental stance" version of the Color Palette Creator.
Download the runtimes if you need them from here: Runtimes
Check out the modest help file I threw together, which also has a screen shot, here: Help File
Update: This doesnt work under OS X and I haven't a clue why. The debug window opens and then immediately closes with no error or anything. I tried everything I could think of to get it to run, from saving with different character encodings to changing textareas to text objects. If anyone knows why the "cross-platform bliss" isn't happening for me, please let me know.
One of the first javascript games I wrote (back in late 2000, early 2001) was called Crazy Number Game. It pre-dated this site, and judging from the code any sort of knowledge of the web as well.
Here are some of the more amusing bits in the code:
No DOCTYPE, HTML or HEAD elements.
Loads of document.writes throughout the script.
All of the game elements are text inputs!
The BODY element is the last line in the document and appears to exist only to set the "bgcolor" and set up an onload event. It also doesn't close.
Font tags galore.
Evals everywhere.
As if that weren't enough to embarrass the hell out of me, it also doesn't work in anything other than MSIE, and only on Windows.
It is a pretty fun game, though, so I thought I'd revisit it. This time around it works in everything that you'd consider to be standards compliant, including Netscape 6. It's also the first game I've written under an XHTML Strict DOCTYPE and the first that doesn't use my old pal innerHTML anywhere.
bteo sent me an update to the Remove Children favelet this weekend. His update:
Fixed a bug that had popped up in Firefox 1.0 where removing an "A" element would remove its parent element as well.
The favelet can now be turned off with the escape key.
It now works in Opera 7.5+
The favelet is now hosted rather than inline, so if you've bookmarked the previous version, you'll need to update your bookmark. The Favelet Suite has also been updated with the new version.
This update adds the ability to freeze the info box by hitting the "up" arrow, which then allows you to mouseover the parent node hierarchy and view the data associated with each element in a seperate info box. The parent elements will be highlighted in a lighter shade of gray. Hit the "esc" key to turn off the secondary box and return the application to its default behavior.
I also slipped in an addition to this version that has been much requested, most recently by John of wow-factor -- the info box will now flip on its axis to prevent itself from being obscured by the edges of the browser window.
Clear your cache if the changes aren't showing up for you, or go here to bookmark it if you need it. As always, let me know if you run into problems.
Long time no update...I'd like to say that it's because I've been hard at work doing something cool, but the sad truth is that I fell victim to the addictive drug that is World of Warcraft and I've been playing it in every moment of spare time I can find. I even have Kate addicted to it.
Honestly though, I've not had this much fun in an MMORPG since EQ first came out, and I smoked that crack pipe for four long years.
That said, I'm not posting to just inform you of how completely awesome WoW is - I actually have an experiment to post.
I was lurking in a dev forum who's location escapes me and reading a thread about an idea for a menu that would have a "lens" that would slide over the currently active menu item. Seemed like an interesting idea to me, so I tossed something together.
The Focus Slide Menu is a horizontal unordered list - when an LI is moused over, a DIV element that is created via script slides over it and...yeah, ok - not that exciting, but then what do you want from me? I've been hunting Murlocs all day.
This latest experiment was written as part of a larger project that a co-worker needed a hand with. Picture a large table of songs, with columns for song title, track length, album name and a link prompting you to buy or download the song. Clicking that link set the display of a <tr> just below to "block" with links to get the song in multiple formats like MP3 or Ring Tone or even its Sheet Music.
The problem there is that each page had a very long list of songs, and the implemented method drasticly increased the size of the markup (to the tune of 130k) just to provide content that the user may not even see. I proposed doing away with the hidden rows all together and just inserting them as needed.
I'll not get into how the data is being parsed and served back to the user (I'd like to see an XMLHttpRequest implementation, but its not my project) but I will show you the row insertion stuff I came up with. It's nothing terribly fancy, but it took me a little while to figure out how to do it so I figured it might help someone out down the road somewhere.
As an aside - MSIE will not honor the colspan attribute applied via setAttribute (or as object.property) unless the "S" is capitalized, as in colSpan. That was quite a gotcha - not sure if it acts the same with other attributes or not, but that one kept me guessing for longer than I am willing to admit.
I tried to get it as close to their menu as I could -- click either the "guests" or "members" button to see it, Flash required. I've tested it and it works as expected in MSIE6, FireFox 1.0, Netscape 6+, Mozilla 1.7 and Opera 7.2 (without the fading). It does not work in correctly in Safari, and I am open to suggestions on how to coerce it.
Thanks go to the lovely Kate for helping me with a margin issue in MSIE and educating me on display:inline-block;.
In other news:
Timothy Ryan discovered that the reason the original Slide Show didn't work properly in Opera (it wouldn't resize the images) was because I had the width and height of the images defined in the CSS. Removing them and using width and height attributes corrected the problem. It occurs to me that I should check if setAttribute would work over object.property...if not, thats a pretty silly bug in the browser. A huge thanks to Timothy on the fix.
Paul from DMX Computers has implemented a version of the Slide Menu on his site which I like very much.
I'm going to follow Michael and Jeremy Keith and stop using the term DHTML. They've both covered the arguments of why it needs to go away quite well, and I agree.
Kevin went downtown yesterday to take photos of the protests during the inauguration. He's an amazingly talented guy with a camera and took some very impressive shots.
Lot's of other people liked them too, and the ensuing load brought our server down. My apologies to anyone who was trying to access anything on the site this morning and came up empty handed.
This newest slideshow started off in a completely different (and foolish) way in execution than it finished. The idea was to do a fade effect across the image from left to right and then fade the new image in with the same manner.
This was originally tackled in a method similar to Slide Show III where the images are broken out as the background-images of DIV elements and staggered in their background-positions to make a complete image. Those DIVs would then be faded out individually to get the cross-fade effect. This however proved far too much for the browser to handle in a graceful manner since the effect required thin DIVs to give a reasonably attractive transition.
With a 250 pixel wide image with 5 pixel wide DIV's, this resulted in 50 DIVs with a minimum of twenty fading at once. It bogged, and badly. You can see it yourself here.
Then I remembered that PNGs have alpha channel transparency and that allgoodbrowsers support it, and MSIE can be coerced into supporting it with its proprietary AlphaImageLoader filter. This meant that the cross fade would be completely possible and really much more simple than I had originally conceived because all that was required was the sliding around of a DIV with a PNG as its background-image (except for MSIE...you'll notice the child selector in the CSS to set the PNG as the background-image for all other browsers, where MSIE uses the filter declared in the original selector).
So, here is the latest Slide Show attempt -- a pretty cool effect with minimal effort (the code is only slightly complicated by the branching required for the transition options). It's valid, semantic XHTML, has been tested and works in Firefox 1.0, Safari, MSIE 6, Netscape 6+ and Opera 7.2. and degrades into inline images for Netscape 4.x.
Building on yesterday's experiment of a slide show taking advantage of the alpha transparency capability of the PNG image format, I give you Slide Show VI.
The idea was to have a sort of "melting" effect on the image as it transitioned from one to the next, and I think this came pretty close. The images are broken out into DIV's with staggered background-positions (125 in MSIE, 50 in everything else...more on that in a moment) and placed together to form the complete image. A corresponding number of DIVs are created with a PNG background and are placed at top:-334px and the same lefts as the image DIVs (the splices).
When the user clicks an anchor tag to view another image, the DIV's containing the masks are selected at random and descend over the image. When they have reached a point that their fully opaque portion obscures the image splice, that splice's background-image is flipped to the next image. The mask continues it decent and the new image splice appears to gradually fades in. With all of the masks descending at random, you get a very interesting effect.
MSIE is doing it exactly the way I had envisioned in my head. It uses 2 pixel wide masks that descend at a rate of 2 pixels per iteration. However, MSIE was the only browser able to handle the number of DIV's moving on the page at a reasonable rate. The other browsers I tested in (Firefox and Opera) took three times as long as MSIE to complete the transition, which was unacceptable.
To compensate, all other browsers have 5 pixel wide DIV's that descend at a rate of 5 pixels per iteration. The effect is not nearly as cool as the one in MSIE, but I'll take it. Be sure to check it out in both MSIE and something else to see the difference, and if you see a way to optimize the code to get the same performance out of non-MSIE browsers, let me know.
Tested and works in MSIE6, Firefox 1.0, Opera 7.2, and should work in Safari though I've not tested it. Valid XHTML, and degrades to inline images in Netscape 4.
The bulk of the description of this latest experiment and whence it came can be found on it's demonstration page, so I'll not go into detail here, though I will quote its caveat:
This is a demonstration only. I am not saying that this is a production worthy alternative to the default behavior of the window.alert method as it does not allow for true modality. I am only showing what is possible - implement at your own risk. Feel free to contact me with any suggestions.
There...now that the CYA is out of the way, check out how to over-ride the default behavior of the window.alert method.
Tested and works in MSIE6, Firefox 1.0, Opera 7.2+ and Safari. Browsers who fall into the !document.getElementById camp get the normal stuff.
For some time now I've been fretting a bit over what to do with some of the content on slayeroffice that I don't consider to be quite up to par. I've got code here that dates back to the internet boom, and we all know what code looked like back in those days. I'm ashamed to admit I have code from 2003 that looks like it was written then.
My concern is this - lots of people are looking at my code now and learning from it. I think thats awesome, but the last thing I want is someone learning from something I learned from five or six years ago (or even last year in some cases), because they arent learning anything other than my pre-standards bad habbits. There is a lot of stuff here that doesn't degrade nicely, or isn't accessible, or only works in MSIE or doesn't seperate the behavior layer or a combination of all these evils.
I didn't want to remove them from the site entirely as I think they provide some value, at least historically, but I needed a way to somehow mark them as "old". So, I've added class="old" to all the links in the navigation that I don't think provide a good example. These links will appear as grey, and have a title attribute describing why they are grey.
I plan to rewrite a number of the cooler old things and bring them up to date, so look for a several "version 2" releases in the coming weeks.
On an unrelated note, who's going to SXSW this year (next week!)? This is my first year attending, and I'm looking forward to it very much. I'm especially looking forward to meeting folks that visit here and the folks that run the sites I visit. Hope to see you there!
This is something I've been meaning to do for a while now, but hadn't had a chance - update the HTTP Response Header Viewer favelet to use XMLHttpRequest instead of a PHP script pretending to be javascript.
There are a few benefits to it being done this way:
It will now work on localhost and servers on private networks.
It's faster - one request to the javascript, rather than a request to the PHP, which requests your host, which then responds to the PHP, which then responds to you.
Less load for slayeroffice.
With this update, I also brought the stylings of the favelet up to date to reflect the look of more recent stuff (it had that light blue circa 2003 look), added drag functionality and avoided innerHTML so that it will work on application/xhtml+xml mime types.
Unfortunately, this doesn't want to work in Opera 8.0 because its implementation of the XMLHttpRequest object is still a bit lacking. Opera users of the Favelet Suite will get the old version.
Lastly, I want to thank Jim Ley for his article that made me aware that I could do this without using a server side language.
Go here to bookmark the new version. If you are a user of the Favelet Suite and are still getting the old version, you'll want to clear your cache. Let me know of any problems you encounter.
The weather, the food and the people have all been great so far. Yesterday morning Kate and I met Kimberly in the Hilton coffee shop, and were soon joined by Molly. Tantek, whom I'd not met before, wasn't far behind and soon our small group was joined by a whole lot of Brits like Dunstan and Andy among others.
We then met up with Kevin L., who took us to lunch at a place called "Juan in a Million" -- the food was excellent and comes highly recommended.
After lunch, we headed to the convention center to register, only to be told that their databases were down at the moment and could we please come back later.
This was about when we finally met up with Kevin S. (after much phone tag) and decided that now was as good a time as any to have a few beers. After a couple, we headed back over to the convention center and got ourselves squared away with RFID badges and canvas bags full of loot.
After registering, we headed back up to our room to get a little work done (but continued on the beers), and then headed out for the evening.
6th Street in Austin is pretty much nothing but bars one after the other - and we decided that it wouldnt be fair to the other bars if we only sat in one, so Kate, Kevin S. and myself spent a little time at a number of them.
After a dinner of chicken fried steak at a place called the "Hickory Street Bar & Grill", we hit one more bar and decided to call it a night.
Our plan for today is to head over to the breakfast thing at 11am, and then who knows. If you're gonna be around today, say hello to this guy.
The other morning I got up, walked into our computer room and hit the switch on my main PC. Rather than hearing the whir of the fans starting up, I got a hell of a jolt of static electricity that made the hair on my legs stand up. To my incredible dismay, the computer did not turn on.
This being the day I was to leave for SXSW, I didn't have the time to mess around with it. I left it sitting there and once I was on the plane that afternoon I had completely forgotten about it.
But now I'm at home, and my gaming machine is not working. Here's what I've done in an attempt to resurrect it:
Swapped the power switch out for another I had laying around.
Attempted to short the power switch connector on the mainboard with a screwdriver to get it to start.
Removed components one by one and attempted to start the machine each time.
Removed everything from the machine except the CPU and the RAM
Unplugged all devices from the power supply, including fans.
I do not believe it to be the power supply. When the machine is plugged in, the ethernet card's green LED glows, which I assume means the mainboard has power. When I hit the switch on the power supply to turn it off or unplug it, I hear it whine briefly...I'm not sure if that's a good thing or not.
So what are my options? Anyone have any other ideas for things I can try or is the board done? The mainboard is a K8N Neo Series MS-7030 ATX, and if you need any other specs let me know. Help! :)
A lot of the sitesIread on a daily basis have blogmarks -- a column of links to external destinations of things the site author finds of interest and assumes I might as well. Most of the links have fairly short text, and the site author will place an additional description in the title attribute of the anchor tag.
The value of the title attribute can be an explanation of why they are linking the item, who they saw it from first, etc, but its almost always of interest to me and often tells me if I want to click the link. However, I don't like having to physically move the mouse over the link to read the title value, and often times its too long and has been truncated by the browser so I can't read the entire thing anyway. So, here's a really simple favelet that will display the title attribute's value directly after the link:
The only trouble here is that this is going to show irrelevant titles (well, not irrelevant, just nothing we're interested in) like "Permanent link for this item" and things like that. That got me thinking about the rel attribute and Tantek Çelik's"Elements of Meaningful XHTML" presentation from SxSW.
In it, he talked about using the rel attribute as a means of better describing what a link is or its "relationship" to the refering document (thats what its for, after all). Examples of this are XFN and the "license" rel value. I would think that a rel of "blogmark" could be beneficial as well. It's Profile:
<dl class="profile">
<dt id="rel">rel</dt>
<dd><dl>
<dt id="blogmark">blogmark</dt>
<dd>Indicates that the referred resource is an item
of unique interest to the author of the referring page.</dd>
</dl></dd>
</dl>
First, this favelet would know to skip title attributes who's anchor elements aren't related to a blogmark. Second, it could go a long way towards a spider of some kind classifying an author's interests. You could even aggregate blogmarks pretty easily this way.
I suppose it could be argued that a rel value of "bookmark", as described by MSDN would work as well...but I don't see anyone using that. Anyhow, just a thought. Let me know of any problems you run into with the new favelet.
Unrelated: For anyone interested, my gaming rig is still dead. Hooking an alternate power supply up to the mainboard had no effect, so I've ordered a replacement board from a different manufacturer. Thanks to everyone that dropped by with suggestions on fixing it.
Since the SxSW feedback form gave me a database error on submit, I'll post my suggestions here:
Start the presentations earlier in the morning (yes, I considered hangovers - just drink more water and you'll be fine), let them run longer than an hour, and dont have so many at the same time. I dislike being guaranteed to miss 3/4 of the content because too much is happening at once.
Let us put our URL's on our badges. I recognize more people by their site than I do their name.
While we're on badges - print them with a larger font. I kept wanting to ctrl/+ people's badges. (Yes I wear glasses and yes the prescription is well out of date)
Let us give panel feedback online, not with those little bits of paper. I have a laptop. I have wi-fi. But I don't have a pencil. You'll get more and better feedback, to be sure.
Not sure how possible this one is, but larger rooms would be nice. Not being able to attend a panel because I'm two minutes late and the room is so over-crowded that the fire marshal would cry is a little disapointing.
With that - if panels become so popular that people need to be turned away, perhaps an encore is in order?
More in-depth technical content. I for one would have loved to have listened to Chris and Dunstan describe how they came about their solution to the Flickr challenge and what they had done code-wise. Not that there was time for that because the panel wasn't allotted enough time. And so you see the list come full circle.
Outside of these things - spectacular. I had a great time, met many great people whom I've long respected and fully intend to travel to Austin again in 2006.
This latest demonstration/experiment is an attempt at providing a custom checkbox element solution while still enabling a graceful fallback to standard checkboxes if need be.
The bulk of the description is on the document proper, so I'll not repeat myself here. Suggestions on improvements are welcome.
In other news:
My gaming PC is up and running again. Replacing the motherboard did the trick. I've also replaced that damned metal power button with a plastic one. :)
Speaking of gaming, I picked up a PSP last week. If you're at all into gaming, or are just a gadget freak like me, get one -- it is well worth the price. All of the hacks that are popping up prove the device's potential.
I am now the proud owner of a 15" Powerbook. I absolutely love it and have been using it 100% of the time. All I've done on Windows lately is check to see if things I'm working on are behaving themselves in MSIE. Check out Kevin Lawver's list of must-have OS X apps he put together for me.
As mentioned previously, I picked up a PSP the other week. Yesterday, I picked up a copy of Wipeout Pure -- I heard it was a good game, but more importantly this is the game that contains the hackable browser.
The hack is a clever one, and consists of pointing the PSP to a DNS server that reports the hard-wired URL that the browser in the game wants to go to as another host. Detailed instructions on how to set this up can be found in this Engadget article.
Being the javascript geek I am, the first thing I did was set up a test page to see what sort of DOM support the browser offered (ok, the first thing I did was hit slayeroffice to see how it rendered. CSS support in the browser is impressive from what I have seen).
Unfortunately, the browser object support is pretty limited. No modern methods like createElement seem to exist, though document.write and writeln are there. I've compiled a list of supported objects and properties over here for those interested.
Considering the fact that the PSP is capable of updating itself, lets hope that the browser sees a few updates. I for one think it would be pretty cool to write a PSP game in javascript. :)
Next up is seeing if I can figure out what events the buttons on the device throw in the browser. A quick test showed that the onclick event occurs when a link is activated with the X button, but it'd be nice if an onkeydown event (or something similar) with a unique keycode was available to differentiate between the triangle and the circle buttons.
If you've any additional information about the PSP browser please leave a comment about it!
Its probably too early to release, but I'd like to get some feedback and some extra eyes on the newest version of the Mouseover DOM Inspector.
Version 2.0 sports an entirely new code-base and UI along with a load of new features, including multiple operational modes, ~20 keyboard commands (more coming, probably) that do everything from remove objects from the DOM to add labels to them, and my personal favorite - an optional external preference file that you can host yourself to define how you want the favelet to run.
These and everything it did in version 1.x, including in-place editing and Aaron's additions. I've put a help file together that details all of the new functionality and has a link for the favelet. If you'd like to try it out, please keep in mind that its not quite finished yet, so please make an effort to send me a note or leave a comment with any problems you encounter (particularly with MSIE6) or suggestions you have for additional feature sets.
"It would be great if the window had a maximum width and wrapped long attributes to fit that width, rather than exploding outwards."
Fixed. I've added a max-width of 400px to the data window, word-wrap:break;, white-space:-moz-pre-wrap; and white-space:-o-pre-wrap; to the li elements and I now insert a space at every 50th character in the attribute value to enforce a break if the browser isn't MSIE.
From Richard:
"In IE6/Win2K turning freeze mode off, then back on freezes it at the current position, not at 10,10."
This was actually intentional, but I can see the use of a means to put the Data Window back at 10,10. Hitting the "1" key will now "snap" it to the top-left corner of the browser, taking scroll into account. This also places the favelet back in "freeze" mode.
Also from Richard:
"In the current version you can hover over the p element and see that its ancestor has "myClass" applied. With the new version you have to dig to get this information. This is one of the most useful bits of the current version IMO."
I had completely forgotten to add that into the new version. It's back in.
From someone who didnt provide their name:
"In IE6, pressing H to hide an element works, but pressing it again results in an error on line 745: activeObj.style is null or not an object"
Fixed
From the same nameless user:
"In Firefox, the single-key commands don't work. They activate find-as-you-type instead. I have find-as-you-type turned on for all text, not just links, in case that makes a difference."
I'm not seeing this. Not on Windows or OS X. The buttons work, but the find stuff jumps down the page to highlight what it has found. Annoying, but I don't know that anything can be done for it. Suggestions are welcome.
There are a few other things I've not had a chance to investigate, and hope to get to them tomorrow. Please keep the feedback coming!
Important! You'll most likely need to clear your browser cache to get the new version. If when invoked the favelet still reports itself as v2.0 instead of v2.0.1, you'll know to do it. Go here to grab the favelet if you don't have it.
Child Nodes. The child nodes of the current object are displayed under the Parent Structure list. All node types are accounted for, and element nodes can be highlighted when you hover over them. Text nodes are displayed as "#text" just like they are in the Mozilla DOM inspector, and their value is set as the value of the list item's title attribute. The highlight color (default is #FAFAFA) can be changed in your preference file, as can that list's default display.
Textarea/Input Pause. When a textarea or text input gets focus, the favelet will go into Pause Mode to allow interaction with the element and not do all sorts of crazy things as you type your search query. Click off of the input to unpause. Thanks to Simon for the suggestion.
And a few other small tweaks, like disabling "keep in view" when the Data Window is longer than the available vertical space in the browser, such as when the children list is very long.
I've also added MODIv2 to the Favelet Suite. You'll want to clear your cache if MODI isn't reporting itself as v2.0.2 or isn't showing up in the suite, and as always - let me know of any problems you encounter.
One other thing that I had forgotten about until I updated the page for the suite - if you are using Maxthon, you'll need to do the following to get favelets to work:
Bookmark the link. Check and notice that Maxthon bookmarks the page, not the link.
Copy the link location from the link and paste it into the properties of the favorite in the URL field.
Answer "yes" to IE complaining about unsafe links.
Restart Maxthon because it appears to reference favorites from memory.
Enjoy. :)
Thanks to Mr. Pirillo for bringing the problem to my attention.
No, I'm not dead or kidnapped - I've just been busy at work, away, etc.
I'm putting together a presentation on unobtrusive scripting (New Skool DOM Scripting: The Unobtrusive Behavior Layer) for colleagues at work and will make it available here next week, so keep an eye out for that.
In the mean time, have a look at some of the ~700 photos I took while Kate and I were in Turkey (Istanbul & Marmaris) during the last two weeks of July.
As mentioned in my last update, I was putting together a presentation for developers at work on "The Unobtrusive Behavior Layer". It went relatively well, I think, and I've taken the audio and over-layed it with screen shots of the presentation in .mov format - you might need Quicktime 7 if you are inclined to watch it.
Note that this is the first presentation/public speaking engagement I've ever done, so forgive any amateurish trip-ups I make. I took the liberty of editing out some of the more awkward pauses that occurred when I forgot what the hell I was talking about.
Lots of folks at work have since approached me with questions about best practices on javascript coding, so I guess I didn't screw it up too badly. :)
Once or twice a week I'll hit del.icio.us and browse through the javascript and dhtml listings to see what the cool kids are up to.
The only problem with this is when something gets particularly popular it shows up over and over again, so a page with ten links may only have three or four links to unique content. That irritates me, so I wrote a favelet to remove the dupes.
I then irritated myself by having to invoke the favelet every time I hit the "earlier" link, and I realized this would be a perfect excuse to check out this Greasemonkey thing I've overheard a couple of people talking about.
After realizing that there was nothing particular in the code that made the extension see a .js file as an installable user script (yes, i freely admit to not noticing it was the naming convention of the file for about 15 minutes) it was an easy transition. So much so that the user script and the favelet are one and the same.
The only difference is that as a user script it runs automatically (obviously), and as a favelet it gives you the option of showing the duplicates it removed. I differentiate between the implementation by checking for the availability of GM_log. If its undefined, its running as a favelet.
As a footnote, I'm certain this has already been written - but, this is the first time in a while I've been inclined to write something even remotely interesting, so I did it anyway :)
You can grab the user script and favelet here. The favelet has been tested and verified to work in MSIE6, Opera 7.5, Firefox and Mozilla. Let me know of any problems or suggestions.
I was browsing through Safari's bugzilla and found this extremely exciting bit of information:
"Here's a very simple workaround. Set the onload and src attributes of the script *before* inserting it
into the document:"
That's right - we can now get Safari to source scripts created with createElement! I have verified this to work in Safari 2.0.1
with MODIv2 and the original MODI.
The favelets themselves dont work terribly well (yet -- which is why I haven't updated the links), but that's beside the point. This is wonderful news - and not just for favelets either. This is gonna be a great boon for web development as a whole.
Just think - no longer do you have to trudge in a slew of scripts that you might not even need -- now you can dynamically pull in scripts when the functionality they provide is requested without having to worry about Safari!. Oh, happy day.
For those interested, the actual change for MODIv1 is as follows:
It's official - our panel idea for SxSW has been green lighted.
Stop by Austin, TX this March to hear Kevin Lawver, Kimberly Blessing, Alla Gringaus, Arun Ranganathan and yours truly tell the wild and dramatic tale of how our merry little band of standardistas got the behemoth that is AOL on the web standards bandwagon.
"How to Convince Your Company to Embrace Standards" will be a non-stop emotional roller-coaster, to be sure. You'll laugh (at me, probably), cry (in sympathy with me) and storm out of the room in outrage at least twice (though that will be Kevin's fault).
And now for something completely unrelated to code...
Kate and I have been trying to maintain a healthier diet, and while having dinner the other night we came upon the subject of High Fructose Corn Syrup used as a sweetener in most processed foods in the U.S. instead of sugar.
From the articles I've read on the stuff, its not entirely good for you. It's also why Coke doesn't taste the same in Europe as it does here - they won't let anything containing it in the door.
Thinking on this, Kate and I came upon a theory. We all know that the U.S. has a bit of an obesity problem (hell, I'm only a few pounds overweight and I stick out like a sore thumb when abroad) and one can't help but tie Europe's less than chunky populace to the lack of HFCS in their foods. Certainly, there are other factors (a more pedestrian layout to cities along with riding bikes everywhere, etc) but this is surely near the top.
So, what if we as consumers stopped buying things with this stuff in it? Eventually, the manufacturers would suck it up and start using real sugar. Where do they get all this new sugar from? South America and India, of course - areas of the world that could certainly benefit from additional U.S. dollars in their economy.
But what of the corn farmers in the Midwest who grow all this corn for no reason other than to have it turned into HFCS? I've one word - ethanol.
Ethanol is a renewable, clean burning fuel source that is mixed in with gasoline to provide a more high-octane, lower BTU fuel. If you spend any time around race tracks, you'll know that engines can run on grain alcohol, and very quickly. Ethanol at its base is just grain (I suppose you could also get drunk on it in a pinch). All vehicles can run on E10, which is 10% ethanol and 90% gasoline, and there are an increasing amount of engines on the road that will run on E85, which is 85% ethanol and 15% gasoline.
So then - what does using sugar instead of HFCS in our foods do not only for ourselves but the world at large?
We eat healthier, thereby becoming a thinner people who are not embarrassed to take their shirts off when vacationing at the Aegean. Presumably the Europeans would reciprocate the lack of near nude, fat Americans with an equally lower number of sixty year old German woman sunbathing topless. Everyone wins.
Brazil, India and other tropical climes where sugar is grown see a boost in their economy as the U.S. requires more sugar in its manufacture of food. Sugar as a cash crop soon rivals illegal drugs.
The midwest farmers now grow corn to be distilled into Ethanol, rather than HFCS. Some even set up their own distilleries and reap the monetary benefits of this renewable fuel source, giving Big Oil a run for their money.
Our engines last longer from the lower BTU of ethanol, and given that an increasing amount of cars are using E85, we become immediately ~85% less reliant on Middle Eastern oil.
Our air becomes easier to breath, and the Code Red Air Quality days in Washington, D.C. and other high population areas start to become few and far between.
With less of a need for Middle Eastern Oil, U.S. companies begin pulling out of Saudi Arabia, which makes hard-line muslims very happy. Terrorist attacks against the West become a thing that our children only read about in history class.
As is evident, world peace can't be too far behind. And all from a healthier diet.
Perhaps this is common knowledge, but I was unaware of it as were the two folks I mentioned it to who are both very solid coders:
The sort method of the Array object in javascript will always sort lexicographically unless a comparison function is passed as an argument.
Meaning, an array with values of 0,5,9,10 will sort to 0,10,5,9 unless you write up a quick function like this:
function numericSort(a,b) {
return a-b;
}
...and pass that function as the argument to the sort method, a la sort(numericSort) to get the sort you're expecting.
I wasted a bit of time fighting with what seemed a random issue until it dawned on me what was happening. Hopefully this will prevent anyone else from tripping over the same silly issue. See developer.mozilla.org for more info.
A good friend of mine is working on a book about web development techniques and asked if I could help out with a contribution. I thought on it a bit and came up with what I think is a pretty good hack.
This demonstration details a means to apply gradient backgrounds to elements without using background-images. The start and end colors for the gradients are defined as six character hex values in the class attribute of the element, and no function calls need to be made. The script fires from the onload event, finds the elements with "gradient" in the 0th index of the class attribute and does its thing. More details on the demonstration proper.
This works well in all the modern browsers I have tested in - feedback and suggestions for improvement are welcome.
It's been a long while since I've written a new game for the site, so I searched around for inspiration last week and came across this Flash game that I thought would make an interesting, if quick, re-write in javascript.
I changed the rules around a good bit and added all sorts of design fluff like color transitions (I took a break from it to do the gradients), opacity fades and object resizing. I'm calling it Four Corners. Instructions on how to play can be found on the the game's page.
Lessons learned over the course of writing this game:
MSIE doesn't support obj.setAttribute("style","[styles]"). You have to use obj.style.setAttribute("cssText","[styles]"). More info on Quirksmode.
Obvious probably, but a DOM based means of clearing the innerHTML of an object is: while(obj.firstChild) obj.removeChild(obj.firstChild).
In a for loop, appending created objects to a documentFragment and then appending the documentFragment to the parent object is waaaay faster than appending the created object to the parent immediately.
Mostly for my benefit, a series of utilitarian javascript functions that I sometimes find myself in need of with no clue of what they appear in, or think will be useful for future projects and want to document before forgetting where they are:
Returns the amount the window is scrolled either vertically or horizontally. Useful if you need an object to always be 10px down and 10px left from the browser chrome regardless of how far the user has scrolled.
Nothing spectacular, but potentially useful. I intend to start being more diligent with my documentation, so this list will grow.
For a while now, people have been informing me that the Javascript Object Tree Favelet didn't work in Firefox 1.5. I've finally got 'round to investigating the problem, and it has turned out to be a strange one indeed.
There were no errors being thrown -- the thing simply wasn't working. It would render it's container element, and then the code would halt. I narrowed it down to the so_parseJS() function, and began commenting out lines one by one until I saw the code return.
The culprit? The toString() method I was applying to the objects. Any line of code with toString() applied to a window object caused the script to bail. No error, no warning, just a halt to the code. How did I fix it?
Instead of:
win[obj].toString();
I did this:
fn = win[obj] + "";
If anyone has any insight into what changed from 1.0 to 1.5 that would cause this to happen, please let me know. For those interested, the original version of the code can be seen here and the update can be seen here.
I've not tested extensively, but older versions of the browser (and Opera) seem to be ok with the fix for 1.5. Leave a comment if you see otherwise.
Originally a Tcl proc used to extend the functionality of the tdom XML parser binary for AOLserver, this function will return a collection of HTML objects whose attribute value matches attrValue. An optional second argument allows you to specify the attribute name to search. More useful in an XML DOM, but works in an HTML DOM as well, of course.
Essentially a DOM based version of innerText -- pass it a handle to an object and it will pass back a string with the values of all the text nodes that descend from that object and that objects children.
Intended as an introduction to those looking to move beyond innerHTML to DOM methods, I give you Alternatives to innerHMTL.
I'm not trying to push anyone one way or the other in this article and my intention is not to start a debate over it, at least not here...I'll reserve convincing you to come to the DOM Side of the Force™ for when and if we meet in person (SXSW anyone?).
I hope the article proves of some interest and use to you, and please hit me up with any suggestions, corrections or additional examples you'd like to see.
Color Palette Creator v1.6.1: Small change to allow for perma-links for palettes. This simply involves the hex value as a parameter on the url and a link on the page.
Color List Favelet: v1.3 for Mozilla/Firefox & v1.2 for MSIE. Building on the above, clicking a color swatch in the list will open a new window to the Color Palette Creator with that color as the base color.
so_createDateDropDown. Formerly known as Dynamic Date Dropdown, this function has been updated to use DOM methods instead of innerHTML, returning a select element node rather than a string of markup.
To everyone who's hitting my inbox with mails defending innerHTML:
Not once in the entire article do I instruct you to not use it. I ask that you try to use the DOM more often, but I don't expressly forbid innerHTML. In fact, at the end of the article I leave it up to you to decide which you prefer and which suits your project.
I understand that you are using legacy means of serving content as html snippets and it locks you into innerHMTL. This is your fault for not using an end-use agnostic means of serving data, not the DOM's.
Please don't complain that the DOM is too verbose and use 32k frameworks (that, unbeknownst to you, use DOM methods) as examples of things that are better than the DOM.
As I originally posted, I am not going to debate this online with you, especially over several email threads with several different people.
If you are bound and determined to discuss the innerHTML vs DOM issue with me then lets at least do so overabeer at SXSW.
I think I've written a number of fairlykick ass things for this site over the years, and while they get a decent amount of traffic, I'm no where near using up any bandwidth allocations here on slayeroffice.
For what seems forever now, when someone has asked me about the old image cross fader script I would explain to them that it's still listed for historical value but shouldn't be used. I'd then point them to Patrick Lauke'simproved version. I'd long meant to add a notice to the page redirecting to Patrick's version, but...well, you know - no one was really looking at it and I had other things going on and never got around to it.
What I find really interesting is that so many people have found the original code a good example of how to do something like this. It seems the unobtrusive scripting camp has a lot more work to do. It makes my stomach hurt to consider myself as part of the obtrusive scripting problem, so I've re-coded the thing as it should have been in the first place and will be vigorously pruning the older content here (some of it has been de-listed entirely) and putting notices up where they belong.
Several folks have contacted me since publishing Alternatives to innerHTML asking how to create special characters with createTextNode.
If you were to use document.createTextNode("&"); you will literally get & written to the document rather than the ampersand you are looking for. The answer is to use the Unicode hex value for the character: document.createTextNode("\u0026");.
I wasn't able to turn up any reasonably useful charts of the codes, so to make this a bit easier I've thrown together a quick application that will do the lookup for you. Just type in the ASCII integer value or the character itself and it will present you with the Unicode hex value.
We're slotted for 10am on Tuesday the 14th. I realize this is terribly early in the morning, especially considering the vast number of evening events the night before, but consider this: I'll be at those events too, probably far drunker than you, and I have to be at the convention center a whole hour before you! If you don't learn anything about introducing corporate behemoths to Web Standards, you'll most certainly learn how to carry yourself gracefully despite a wicked hangover.
SxSW was once again a fantastic time, with many panels attended, many beers drank and many friends, new and old alike to have a laugh with.
Some key moments this year:
Having lunch Saturday with a large group of people at the Iron Cactus upstairs at the only table without a canopy above it and the methods employed to avoid sunburn.
Kevin Lawver's joke on my shirt at our panel and having folks say "nice shirt" to me for the rest of the conference.
The best "nice shirt" incident being during lunch the afternoon after our panel while coming out of the men's room at a Cajun restaurant on 6th Street. I opened the door, and a gentleman holding an infant was about to come in. I took a step back to hold the door open for him and he looked at me, smiled and said "hey, nice shirt.".
Buying the Misfits clock that I had seen last year in the window of a head shop on 6th street, along with an Iron Maiden onesie.
Our panel not sucking one single bit.
My photos from this year are up on Flickr, and the slides from the panel are on Kevin's site. Hopefully we were recorded and the podcast will be made available.
Some (and by no means all) of the new people I met this year in no particular order:
If we met and I left you off this list, I mean no slight. Please drop me a line so we can keep in touch, and if we didn't meet this year, there is always next.
In the spirit of promoting Web Standards along with good semantic markup and proper hierarchy structures, April 5th will be a day of nakedness for all webmasters to remove their style sheets from their website for one day.
I've been sitting on this one for a while (started it in February) because I wasn't sure how I felt about it. I also wasn't sure that it was as accessible as it needed to be (or could be), given its nature.
That said, this is one of those things that clients/product managers/etc want all the time, so there is no reason not to make one available that is as accessible and unobtrusive as possible. I'm still not 100% that it is, so any feedback is greatly appreciated.
Have a look at so_ticker, a horizontal, one-letter-at-a-time news ticker and let me know what you think.
It's been quiet around here for a while, and there is a very good reason for it. About a month ago I switched to a new team at work who have been working on what is easily the most complicated and challenging javascript project I have ever had the fortune of being involved with.
Today marks the beta launch of AIM Pages, AOL's new social networking initiative. Go and check it out - its free and honestly, pretty damned cool. All you need is your AIM screen name to log in. Once there, hit the "Create a Profile Now" link to get to what we call "Publisher". This is the part I've been involved with.
Here is where you get to drag and drop all sorts of nifty modules (think dashboard widgets on the web. See the microformat definition for them here), style the page, apply themes and whatnot. Once you've decided on a look, just hit the "Publish" button and an XHTML document will be generated and put out on the web at aimpages.com/yourScreenName/.
The coolest part of Publisher are the modules themselves. I've started converting several of my existing games into modules (which isn't terribly difficult, mind you, since its just XHTML and Javascript), and the whole thing is completely wide open. Anyone can write a module and upload it, allowing anyone else to include it on their page. So far there is everything from Flickr and del.icio.us feed displays to a version of AIM Fight -- the sky's the limit with these, really. If you're a developer I encourage you to try your hand at a module, especially if you're a fan of the javascript and the web standards. (We're using Dojo with this, by the way). And if you're not a developer - can you think of an easier way to add an RSS feed to your page besides just dragging one to it? Me either!
Some documentation on getting you started with AIM Page Modules:
I Am Alpha - The starting point for all things AIM Pages related.
So, give it a whirl and let me know what you think. There are a lot of features still to be added, and you may hit the occasional bug, but its in a really solid and usable state all the same. Currently supported browsers are MSIE6 and Firefox/gecko based browsers. Safari support is in the works.
Should you find yourself in London or New York at the end of June or beginning of July, the folks at Carson Workshops have set up a couple of interesting sessions you might want to stop in and check out. They aren't free, but considering the caliber of speaker, not too terribly pricey either.
In London on June 29th, Dylan Schiemann of the Dojo Toolkit (which we are using on AIMPages, by the way) will be giving a talk on "Building Web Apps with AJAX".
One of the important things to note for these workshops is that directly after the workshop proper is "Social: 6:30 till late". One assumes that this implies beer and geek talk, and no better combination in the world than that will you find. This is, of course, why SXSW is so successful.
On the same day as Mr. Schiemann's talk, yours truly will be giving a presentation at an AOL Developers conference (not open to the public, I'm afraid) on the Module-T microformat that AIMPages uses. I'll be making that presentation available here afterwards for those interested. I'm also doing an "Introduction to the DOM" presentation in August, so keep an eye out for that one too. I hope to present it with sound in the same manner as the Unobtrusive Behavior Layer talk. Finally, the audio for our SXSW panel is due out on July 25th, so there will be plenty of oportunities this summer to hear me prattle on about web stuff.
Any other interesting workshops/presentations coming up this summer?
Unfortunately, the presentation wasn't recorded, but I'll be posting my notes at some point once I've had a chance to clean them up. In the meantime, if the slides raise any questions feel free to hit me with them.
On a side note, Jon Miller - the CEO of AOL - gave the keynote this morning and a bullet on one of his slides said "Standards are where its at. If its not based on a standard, its out.". We won.
If you're in the DC/VA/MD area and looking for something to do tomorrow night, swing by the Motley Fool in beautiful downtown Alexandria, VA for Refresh DC at 7pm. I'll be there, and so will KSmith, Kevin Lawver (presenting on Dojo and DOM stuff), and Cindy Li among many other fun and interesting people that dig this whole web development thing.
See you there!
Update (09.19.2006): Mr. Lawver is under the weather, so yours truly will be speaking in his stead.
I've finally been given the okay to talk about it since Stephen announced it at Web Guild last week. I would have mentioned it sooner but I was in Las Vegas, losing money and celebrating my sister's wedding :)
So - AOL, as part of the Open AIM initiative, is releasing its AIM service to the web via a series of JSON/XML APIs. I've been working on a set of Javascript APIs to make it easier to interface with this since the beginning of the summer, which is primarily why it has been so quiet around here lately.
I'm still not allowed to show anything off (probably in a week or so...keep an eye out), but I can tell you that I've written a complete AIM client in javascript that you can embed wherever you like (no popup and not hosted in an iframe). And, since its just HTML, you can style it however you want (we have some really kick ass, off the wall themes for it), or add functionality to it, or mash it up with other public APIs, or whatever you can dream up. All you have to do is get an API key (link forthcoming...) include a pointer to the javascript and include an element for it to hook into. After that, you can define your own params and callbacks if you want to extend it.
I stress that the AIM client I've written is just an example of what the API is capable of. Maybe you're just interested in the IM portion of the technology - thats fine, you can just use that part and never expose a buddy list.
Or, maybe you'd just like to compile a list of your friend's away messages. That's cool too - you can just subscribe to presence updates and grab their away message, never rendering a buddy list at all or worrying about incoming messages.
Or, maybe your wiki can have its own screen name and listen for incoming updates from you and your friends via IM while you attend different panels at SXSW, adding and editing entries appropriately based on your extension to the API. It's cool stuff, and absolutely possible and easy to implement.
What's better is this is just the beginning of what we intend to do. We've got loads of stuff we want to add, like "capability" support so you can do things like send non-chat data between clients. This is exciting for me primarily because its going to make multiplayer javascript games really, really easy. I don't have to stand up a database of user names (or ask you to come up with one and remember yet another password), or a protocol for data transport, or any of the other things you'd have to do for something like this. Its already there with what exists with AIM.
I'm really stoked to have worked on this - its gotta be one of the coolest projects, if not the coolest, that I've been part of in my time with AOL. The first time an IM went from my Safari window and the Adium icon in my dock starting jumping up and down, I squealed like a little girl. It was just that bad ass.
So thats my cool news - keep an eye on the RSS feed for updates about documentation, FAQs and demos - I'm still finishing up docs for the CSS hooks the API uses as well as the API proper with how-to's, and hope to have them available here within the week. Leave a comment or hit me up via the contact form if you have any questions.
Only a few days overdue, the WIM API has at last made beta.
My demonstration client can be found here, showcasing five different themes and linking to all of the resources and documentation you'll need to get started with the API.
FYI: $5,000 for first place to come up with a cool idea for a mashup with the AIM Web API. $1,500 for second place, and $500 for third.
Thats a lotta scratch for just presenting an idea - you don't even have to write any code! I'm ineligible to participate, obviously, but you should definitely get to it and try your hand at the pot.
In other WIM news, I did a presentation today on the Javascript API. It was video taped and I expect it to be put up on dev.aol.com soon, and I'll be posting the slides soon as well.
A couple of WIM related things for you today. First are the slides from the talk I gave on it at an internal AOL developer conference a few weeks ago, and the second is a simple demonstration on displaying your away message in a web page.
The presentation was filmed, though I'm not sure at this point if I'll be allowed to make it available to the general public. You can be sure I will if I'm given the okay, and I see no reason why I shouldn't be able to. Word has it that they'll be done encoding the video this week.
The "Away Message" widget is a super short, dead simple example of something small and cool you can do with the WIM API. There is a lot of room for expansion on the idea (display your profile, modify it to show your status regardless of what it happens to be, etc) so feel free to run with it. Apologies for taking so long in getting the demo up after I said I would nearly a month ago.
Today I give you the Presence Box widget, an easy way to include your presence information in a web page. What is presence information? Its the same thing that appears in your favorite IM client when you mouse-over a persons ID.
This widget will display the name, online state, icon, away message, away time, idle time and profile of the user, and is completely customizable in its appearence via CSS since its just HTML. All you need to do is include some javascript and a <div> element that identifies itself as the container for the widget. Details can be found here.
I've also made a cool little "Powered By AIM" badge that you are welcome to stick on your applications that make use of the AIM API. You can grab a copy of it over here.
I caught a show last night on Gallery HD about Tom Otterness, a sculptor in NYC that creates these whimsical works and has them strewn about the city. I liked his style a lot, and it got me thinking about how much I enjoyed my sculpture classes while I was in college and how it had been near upon forever since I'd played with some clay.
So, at lunch today I hit the art store and picked up some Fimo and a needle tool, and this evening I commenced to playing with clay.
Its been a long time since I've done anything like this, and the results certainly aren't the best ever, but the final result made me smile so I thought I'd share him. Kate named him Fred.
I think I'm making some pretty good progress with the polymer clay. Have a look at my first one, created on Monday:
And here is the one I just finished this evening:
I'm pretty pleased with them, and each one seems better than the one from the day before. Here are in-progress photos of each one I've done over the past five days:
I switched from Fimo to Super Sculpey after the first two (still using Fimo for hair, etc) and I like it much more. Its far more malleable and smoothes out much easier. I also picked up some acrylic paints and chalks starting with Stan which helped with adding details like blush on cheeks, skin pigmentation, eyebrows and that sort of thing.
If the line-up seems familiar, its because its everyone from How to Convince Your Company to Embrace Web Standards from last year, minus Kimberly since she doesn't work at AOL anymore, and is essentially a follow up to that panel. Namely, once you've gotten your company on-board with web standards, what's next?
Openness and standards go hand in hand, so we'll be talking about AOL's "2.0pen" initiative and the things that we've done to make that possible with our involvement in the new public APIs AOL has released, our involvement with contributing to things like Dojo, our authorship of microformats like ModuleT, the public APIs from other companies that we're taking advantage of, and all the other myriad cool things you wouldn't expect from AOL.
It promises to be a very cool panel, and I'm pretty excited about it. Better still, its scheduled to be a 5pm panel early in the conference, which means no getting up at the ass-crack of dawn with a hangover on the last day to attend like last year. I still shudder when I think about that brutally cold, barely sober walk from the hotel to the convention center at 8am. Awful, that.
No accidental breaking or cracking, and the only issue I ran into was some scorching on the tip of his nose during his final bake that I needed to do some "skin grafting" to fix. He is capable of standing without the aid of the base, is about 9.5" tall and weighs around 3lbs.
I'm really looking forward to seeing everyone that I've not seen since last year, and meeting new folks that I can add to the list of people I'll be looking forward to seeing next year. After all, the best part of SXSW is the people. If we've not met before, look for this guy and come up and say hi.
A friend of mine twittered that today was her first day of quitting smoking. Being that I've been there and that my unsolicited advice won't fit in 140 characters, I thought I'd make a post on what I did to quit.
I'll not waste anyone's time with general stuff like "avoid other smokers" and "keep busy". These things are painfully obvious and it bugged the shit out of me that smoking cessation sites even bothered typing this crap in. This is the hardcore means I took to quit and stay quit - be warned, this advice is not for the frail or faint of heart, or stomach for that matter. As well, I am not a doctor, nor do I play one on the internets. Use this advice at your own peril and etc.
The very first thing you need to do is pick up a package of 21mg Nicoderm CQ patches. I used the clear kind - for whatever reason, these seemed to work better for me and last longer as well. I suggest you get the same. I also advise you to stay on the 21mg patches for 8 weeks, not 6. From there, step down your dosage to the 14mg and then the 7mg as advertised. Throw out the support CD that comes with the patches - its utter garbage.
While you're at the store, get some nicotine gum. I used the orange flavored Nicorette. The booklets that come with the patches and the gum both say not to use them in conjunction - this is bullshit. 21mg of nicotine is not enough to keep you from flipping out, especially since you'll find that the patches start to wear thin by the evening if you've had one on all day long. The gum is a wonderful supplement and I used it right up to when I moved to the 7mg patches.
Two quick points on the gum and patch:
This may not happen to you, but I had really vivid dreams the few times I went to bed without taking the patch off, so much so that when I woke up it was as if I hadn't slept at all. Give it a shot once to see if it happens to you (the dreams themselves make it worth doing it at least once) but I highly recommend removing them.
Do not chew the nicotine gum like you would a stick of Doublemint. You will find yourself with a terrible case of rapid hiccups within seconds of first swallowing your saliva that has mixed with the gum. This is a result of an acute nicotine overload, and while not painful it is exceptionally annoying. Give the wad of gum a few quick chews, flatten it out with your tongue and place it between your bottom lip and gums. Every once in a while repeat this process to revitalize the gum.
The hand to mouth oral fixation of smoking is as difficult to overcome as the physical addiction to the nicotine. I always had lollipops that I carried around with me to act as a surrogate. Hard candy like Life Savers are also good - keep your mouth busy.
Some folks will also tell you to avoid doing things you would normally associate with smoking, like drinking coffee or beer. This is bad advice unless you also intend to quit these things. Keep doing them, and get used to doing them without a cigarette in your hand or six months down the road you'll grab a cup of coffee and be overwhelmed with the desire for a smoke. The same goes for your regular trips out of the office to smoke - keep making them, just don't hang around the smokers. Go for a walk outside or around your floor, otherwise you'll find yourself overly anxious at your desk, and this does nothing but amplify your desire for a cigarette.
So thats how you maintain your course - how do you stay quit?
Force yourself to mentally associate smoking a cigarette with being ill. I accomplished this quite by accident one evening while at a bar with some friends, breaking down and buying a pack of smokes. I chained them, giddy that I had a smoke in my hand and relishing the nicotine buzz that came along with it. I drank and drank and drank. I drank so much I became physically ill in the men's room. I may even have been thrown out of the bar, but that's a story for another time. That was not the last of my being sick that evening, and when I woke up the next morning I was so hung-over I was quite certain I was going to die, my mouth as dry as a cotton ball in the Sahara.
On the coffee table was a near empty pack of cigarettes, next to a stinking ashtray that I didn't remember digging out from wherever I had stashed them the night before. The very site of them made me want to retch.
So, take the following steps:
Buy one or two packs of smokes. Go ahead and get regulars if you smoke lites for added crustiness.
Grab a friend you can trust to not let you kill yourself by driving yourself home and head out to your favorite watering hole.
Smoke. And drink. And smoke. A lot.
Get sick. Have a smoke while on your knees in the bathroom.
Wake up the next day, wishing for death.
Quit smoking.
I've also heard that smoking about six cigarettes and collecting the ashes and butts in a glass of water, and then drinking said glass of water as quickly as you can will also do the trick -- without all the liver damage.
Yes, a bit extreme and possibly dangerous. But, this is a nasty, awful, life threatening shitfuck of a habit and one thats hard as all hell to beat. You pretty much have to show yourself who is boss, because in this fight, you are your own worst enemy and trust me - you will betray yourself. But, when you do, just kick your own ass and start again. Trust me, its worth it.
I demo'd this project at our SXSW Panel, but I've not been able to make it publicly available since it has dependencies on build 0.19 of the WIM API which had yet to clear QA.
Well, that cleared last week and is now up on the AOL CDN for public consumption.
The most signicant portion of this release is the data IM capability and is the focus of this demo - a two player, peer to peer memory match game that only uses javascript to do its thing.
The whole point of this application is to show that the WIM API is more than pre-fab widgets, buddy lists, away messages and IM. Its about real time two way data transfer between browsers without having to stand up anything on your server. You reference the API on our CDN, assign your callbacks, start a session and you're good to go. That's pretty cool.
Check out the game client over here and please let me know of any issues you encounter. If you're interested in seeing its data stream, paste the following into the browser's navigation bar before starting up a game: javascript:void(AIM.params.DEBUG = true);
The lady that runs the shop remembered framing the drawing of Kate's father, and asked where Kate had them done. She told her that I did them, and the lady suggested that I hang one of my pieces in her store. She says she enjoys supporting local artists, and the ones that she features get calls for commission work pretty regularly -- so, thats what this drawing of Clara is for. To hang in a frame shop next to a stack of business cards.
I'll be traveling to the Emerald Isle in two weeks to hang out with the AOL Dublin guys for a bit - the 21st through the 26th, specifically. Any suggestions on sights to see, things to do and places to have a pint while I'm there? I'll be staying at the Fitzwilliam Hotel near Temple Bar, which I understand to be a pretty kick ass area. I'll have access to a car as well, so things to see outside of the city are do-able too.
If any Dubliners want to get together for a drink, let me know!
This past week saw the release of AIM's newest product, WIMZI, a project I've been working on for the last few months.
From the website:
Get an AIM WIMZI widget for your blog, social networking pages or any other website! By adding an AIM WIMZI widget to your site you'll allow anyone at your website to chat with you when you're online with AIM, while keeping your AIM Name private. Build your own widget today!
Essentially what this does is sign any visitor to your site into the AIM network anonymously with a randomly generated id, like aimguest369131. If you are using the latest AIM client, they will appear in a group in your buddy list with the same name as the widget - so if you've named your widget "Talk at me", you'll now have a group with that same name in which visitors to your web site will appear. If you use an alternative client like Adium, the communication bit will work but the group won't show up. The widget comes in both Javascript/HTML and Flash flavors with several canned themes.
Now here is the cool part: the widget was written using the WIM API and is therefore open for you to do what you want with it. Consider for a moment what might be possible with an authentication-free means of pushing data through a network that you don't have to build or support. Your users don't need an AIM account, and they don't even need to know that they've been signed into the AIM network. As far as they know, you've just got some nifty way of pushing data down to them in real time. Lots of possiblities there, especially when combined with a bots.
For those interested in the code, the javascript source can be seen here.
(and look, a post that has doesn't have a single drawing in it!)
The last time I was in Dublin was during elections. There were campaign posters everywhere - buildings, buses, light poles, small children, dogs. If it held still long enough for a person to tack a sign on, it had one.
This is how I and the group of folks I was with recognized Mr. Ahern at Fagan's, which - according to Mr. Eain Jones and Mr. Diarmuid Gill is his local, and his being there is not at all uncommon.
So there he was, the head of state, leaning against the bar having a pint of what I presume to be Bass Ale. There wasn't anyone crowding around him, and the rest of the folks in the pub didn't seem at all flustered by his presence.
I too was enjoying a Bass, and with it in hand approached the Taoiseach, congratulated him on his re-election, and asked if it would be too much to ask to have a photo together. He was happy to do it, asked how my trip was going and some other small talk, then we both went back to our pints. Nice fellow. Now if I can just get that George Bush down to my local...
A new thing some of the guys at work have been putting together, circaVie, an application that lets you define and build timelines. Here's mine:
All of my drawings from March of this year until present. Click on each element in the timeline to bring up a detailed view of the event. You can embed images and video, extend individual timelines with macro-timelines, leave comments, grab the XML of the timeline to do whatever you want with and a bunch of other stuff. Definitely a cool thing to play with and keep an eye on.
I wanted visitors to the site to be able to leave feedback and see how other folks were reacting to my work, but I didn't want to enable comments on sgchipman.com because I didn't want to deal with yet-another-spam-magnet. So, I thought it might be nice to link to the comments that folks had left about the drawings on flickr and include how many had marked a drawing as a favorite. A little futzing around with the flickr JSON API and I was up and running.
An example of what the script does can be seen here, towards the bottom, underneath the drawing details. It informs the user of how many comments the drawing has, with a link to the first comment and how many favorites the drawing has with a link to the page that shows the flickr users that have labled the drawing a favorite. If no one has favorited or commented on the drawing (wtf?!) nothing shows up. If the drawing only has comments and no favorites, or if a drawing has favorites and no comments, the wording is different. It even take plurality into account and changes wording based on that.
I've put some documentation on it here for those interested.
In other news, I now have an atom feed for sgchipman.com, so if you're at all interested in having your feed reader spammed by my in-progress drawings, by all means sign up!
While working on today's drawing, I filmed my progress. Here's a time lapse video of the drawing from start to finish. Six hours of work condensed into 4 minutes and 25 seconds. Enjoy.
My first go at graphite in about 12 years. It didn't take nearly as long as a colored pencil drawing, and it was awfully nice to be able to use an eraser. I may stick with it for a little while.
Congratulations to Kevin, Kimberly, Christopher, Rob, Meryl and Mark on the book. I'm not sure when it comes out, but with that caliber of authorship (and obvious good taste) its a must-own.
These three drawings I did leading up to Christmas - I've kept them private on Flickr and not published them here as they were gifts for family and I didn't want to spoil the suprise.
Clara at 17 Months
8 x 10"
Colored Pencil on Eggshell Mi-Tients Paper
November 20, 2007
Big Smile
8 x 10"
Colored Pencil on Cream Mi-Tientes Paper
December 11, 2007
Clara at 18 Months
10 x 8"
Colored Pencil on Eggshell Mi-Tientes Paper
December 21, 2007
And with those, I'll no longer be posting drawings on slayeroffice. 2008 seems a good a time as any to get the site back on the web development talk track. If you're interested in following my portraiture work, you can find it on my new drawing blog. Or, just grab the feed.
And I'm not gonna be there this year. I know, I know - I should have told you sooner. You're probably already in Austin or in flight, now wishing you had advance notice of this turn of events so you could have just stayed home. I'm sorry, I really am. This really was terribly inconsiderate of me.
Soldier on, brave geeks, and know that with enough Shiner Bock, anything can be fun even if I'm not there. Be strong. And take lots of pictures. And twitter a lot. Let me experience Austin through your internets.
(Any day now I'll have an announcement of why I'm not there this year...)
I've been doing some work in AS3 of late and stumbled onto a bit of a gotcha last week that I thought I'd share since it caused me about 15 minutes of frustration.
The gotcha pertains to a significant difference in how Javascript and AS3 handle the match method of the String object when the global flag is passed. Consider the following Javascript snippet:
var r = /[a-z]/g var s = "abc"; var x = s.match(r);
This will return an Array with values "a,b,c" in both Javascript and in its AS3 equivalent.
Now, consider this code, replacing the value of s with something that will not match:
var r = /[a-z]/g var s = "123"; var x = s.match(r);
In Javascript, this will return null, but AS3 will return a zero length Array. Which means that this...
if(s.match(r)) { // do stuff... }
..would always be true in AS3, but false in Javascript. I spent about 10 minutes thinking there was something wrong with my regular expression, and another five thinking there was something wrong with AS3's regexp engine before I realized what was happening.
So who has it right? According to the ECMA 262 spec, AS3 does (see page 101-102). Of course, Mozilla's documentation claims that it will return an Array as well with no mention of null on that page, while Microsoft's JScript documentation admits it will return null if no match is found.
Oh hi, long time no speak. How's every little thing?
I've spent the past few months working on the SocialThing for Websites client, which you can see in action on AOL's country music blog The Boot. Techcrunch didn't tear it apart, and the comments aren't as rabid as one might expect on an article about an AOL product, so I suppose it came out next-to-all-right.
The client itself was a lot of fun to work on, and there were a lot of interesting technical hurdles that we had to hitch our pants way up and leap over which kept things awfully interesting. More on those later, though.
For now, I wanted to point you towards the backbone of the SocialThing client, aimapi-core.js, now hosted on Google Code. This is a pared down, bare bones, just-what-you-need-and-nothing-else version of the original Web AIM Javascript API that AOL released back in November of 2006.
So, you ask - besides dropping all the UI stuff that you weren't particularly interested in the first release, what's so great about aimapi-core? Well...
Its only 44k (with white space and comments). The original is 80k and does less.
More transactions (some of which didn't exist in 2006):
pushFeed - a means of pushing content into a user's buddyfeed/lifestream
reportSpim
and more!
Alternate means of listening for events. The original codebase used long polling via script nodes. Unfortunately this meant rapid polling in Firefox because of a bug in that browser that prevents more than one script from downloading at once. This rapid polling was both memory intensive and had the status bar constantly letting you know that it was "Waiting for 12.345.79.80..." which kinda sucked.
So how was this resolved?
If AIM.params.useSWFListener is true, the API uses swfobject to pull in swfsocket.swf which uses AS3's socket API to listen for host events (IMs, presence updates, etc). Many thanks to my pal Rick Gardner for writing this piece.
If swfsocket fails to initialize, the API falls back to scriptiframe.js, a clever work around that James Burke came up with that uses an iframe to long poll for events.
And if all that fails, it goes back to using dynamic script nodes to listen for host events.
And more! (...that I still need to write documentation for!)
So give it a look, and let me know what you think. Oh, and for those wondering - no, the SocialThing client is not a frame a' la the diggbar. Come on, give me a little credit.
Granted, this is the baseline implementation. If you want the client to use your authentication, or post stuff into feeds, there is a bit more work to do, though not much.
I just wrapped up my talk at Devnation on Javascript & AIR - I had a great time. Lots of great questions asked, and awesome discussion with folks afterwards.
I'm putting together a rather lengthy talk on HTML5 for work (I'll post the slides next week, and with any luck the audio too) and thought some examples might be a nice thing to have on hand, specifically for canvas since I assume that will be a popular topic.
I looked through some of the older stuff on the site (which is pretty much everything now), and decided it'd be cool to do the old mouse patterns experiment in canvas, and fancy it up a bit.
So, I did. Avoid hallucinogens while playing with it.
As mentioned previously, the talk I gave on HTML5 was captured as what the kids refer to as a "moving picture". Here, I have embedded it in this interweb page so that you might view it at your convenience. I sincerely hope the irony of an HTML5 video being presented via Flash is not lost on you.
And with that, I have now made twice as many posts in 2010 as I did in 2009. That's right ... four. Can you handle this, internet!?
It's somewhat comical to me, posting anything here since its been nearly three years since my last ... I doubt anyone visits this rusting pile of bytes anymore so I'd expect if you're reading this it's through RSS.
We both think the game is pretty fun - lots of subtle strategy and a difficulty curve that we tweaked over months and months of development. This is also my first really big and complicated Objective-C project and did I ever learn a lot.
Give the game a go, and let me know what you think of it. We're pretty active on our Facebook page with game updates, tips & tricks, screen shots from upcoming releases, etc.
I'll leave you with this EPIC trailer we put together for the game. Enjoy!
