:: the gist of the page in a click ::
DynaCloudlet v0.1 – another bookmarklet. Drag to your favorites/bookmarks, visit any web page, then click the bookmark. I’ll explain it tomorrow when I have more energy.
Note: this has not been extensively tested, but worst-case scenario, it just will not work or will throw an error. Good luck. 
———-
[UPDATE 2009-05-29] As promised, more info…
DynaCloudlet was actually very simple to program. There are 3 main pieces:
- the Bookmarklet code – this loads jQuery from ajax.googleapis.com, then loads my script which loads the next two items;
- the css and Javascript driving the dialog box (which all came ready to run from the jQuery UI project);
- the jQuery plugin called DynaCloud which hunts for non-stop-words and tallies up their frequency, and then generates the tag cloud based on that data.
javascript
-
What are Steve’s fingers doing now?
Steve’s Fingers
Note: requires an SVG-capable browser. If you keep your browser fresh-smelling with upgrades, you should be OK. (Google Chrome doesn’t like it. There’s always gotta be one.)
This application graphs Steve‘s fingers as he types his stories (not in real-time, unfortunately, but maybe in a future release). It gets a live feed from his web site, captures the last 4 stories, converts the non-HTML characters to Unicode numeric values, and plots them on a Scalable Vector Graphics (SVG) canvas. This is my first venture into the world of SVG, and I couldn’t have achieved this level of graphical manipulation without the help of the SVG Integration jQuery plugin.
javascript
First: I’m late. I know I’m late. I can’t do anything about being late.
My excuse: got home and had to immediately start helping my wife put up the new roof on the bunny pens. Yes, we have some bunnies. This project took us until around 10, which normally would be when I’m just starting to feel programmatically creative, however, I also logged 32 miles commuting to work on bicycle yesterday. So I was exhausted.
life
Today’s script is called a bookmarklet. It’s a script which is embedded in a bookmark in your browser. After you’ve bookmarked this one, you can go to most anyweb site*, click it, and watch what it does to the page.
Experiment 20090525
- Drag the above link to your bookmarks bar, or right-click it and select Save As Bookmark (or whatever your menu item reads).
- OPTIONAL: Go to any blog (e.g. http://james.revillini.com, http://steveersinghaus.com, etc.)
- Click the bookmarklet (it should be labeled ‘Experiment 20090525′ unless you renamed it).
WARNING: This script is really processor intensive. Before you proceed, you might want to save anything you’re working on and finish up on any other web sites you might be using.
* except for Carianne’s, and I can’t figure out why!
[UPDATE 2009-05-26 5:31pm] On some sites, the text never shinks back down, but at least it’s not throwing errors.
javascript
experiment 20090524
Experiment 20090524 plays with dimensions and begins to explore randomness and likelihood. It is inspired by The Only Man. Future experiments will build on some of the concepts here.
———–
[UPDATE 2009-05-24 15:25] I am shocked to discover that FF3 on a PC cannot display this application correctly because of abug for which there is apparently no workaround right now. On Ubuntu, it’s fine, oddly enough. It’s also fine in Chrome for Windows. I shall try to find a hack to make this work.
———–
[UPDATE 2009-05-24 16:08] OK, I spoke too soon; it’s not a bug, per se, it’s Firefox apparently following some sort of rule for font selection which few other browsers use. Then again, the “proper” way to follow this rule is open to interpretation. I love firefox, but I wish development decisions that are so controversial would be put to a vote, especially since the *dings used to work in this browser. Sorry FF3/PC users, this application just won’t display correctly for you. 
javascript
$(poetic redux).rewrite_stuff()
Poetic Redux v 0.1
PR eats blog posts for breakfast, be they poetry, or stories, or emotional rants, and rewrites them a little bit. This experiment makes use of the jQuery UI. Specifically, I used the ‘South Street‘ css theme and the jQuery UI datepicker and tabs widgets. PR uses AJAX and a PHP proxy to fetch remote RSS feeds, then it hands it off to the jQuery core for processing and insertion on the page. Finally, hitting the REDUX button calls up the thesaurus web service API (big thank you to words.bighugelabs.com for this), and goes to town on the content it downloaded.
This experiment, again, took WAY longer than I expected, and is another reminder to self that I need to limit the scope of what I incorporate into each experiment. It’s just hard, because I want everyone to find the scripts interesting!!!
Note: please don’t REDUX too much … I’m only allowed to hit the API at bighugelabs 10000/month. But feel free to do a few per day if you like. I think that should be fine.
javascript
RSS Invaders :: shoot feeds
UPDATE 2009-05-23 09:07
I just couldn’t leave well enough alone, now could I? RSS Invaders v 0.2.1 adds music, improves collision detection a little, and should have improved performance by a lot, although to be honest I’m not seeing it. I don’t know if that’s a side effect of the flash being present to stream the mp3, or what. Other improvements include score – smaller words get a bigger score as calculated by (20 – (word length)); text does not highlight due to mouse interaction anymore – that was annoying.
————–
UPDATE 2009-05-22 20:24
RSS Invaders v 0.2 is up. I added the collision detection. It’s buggy, but works fairly well. Mostly, I need to work on performance-related issues, which are always going to be a problem since JavaScript is interpreted on the fly, and not compiled into the efficient machine code that computers adore. I also, in researching collision detection, came across what I think is going to become the foundation of future RSS Invaders versions: gameQuery! gameQuery provides many nice functions which would make javascript game programming much more succint and reliable. For this project, I wanted to roll my own just to see if I could. I’m happy with the results.
————–
This first script is old-school meets older-school meets new-school: RSS Invaders v 0.1
It’s an emulation of the famous game, Space Invaders, with a Web 2.0 twist in that it dynamically fetches a feed from Steve Ersinghaus’ stories category and pulls the excerpt in as the invading force! Not all features have been implemented. I didn’t get to collision detection, so the missiles don’t kill anything, but I had to cut myself off somewhere.
The fact that it emulated this old game makes it old school. The fact that it goes a step further and uses ASCII characters to depict the whole thing makes it older-school (or geek-school), and the AJAX bit is the new-school.
Don’t expect stuff like this for my future scripts. I want to try to do something ‘big’ like this every week or two, but in general, my experiments need to be more limited in scope and functionality because this took me 4 hours to program and debug. Still, when you think about how the original programmers of Space Invaders probably toiled over the program for months, if not years, 4 hours is pretty decent, and it’s a tribute to how far these coding libraries have come.
I’m going to attempt to translate my JavaScript code into pseudo-code for you. This means you should be able to read and understand it without knowledge of programming, and get an idea for program structure.
when the page is ready {
welcome the user
load the board
animate the board
append the following to the board:
status bar and title
invaders container
ship
get data from steve's site. when we got that data {
add the description to the invaders container
use the title and url to build a link to give credit at the bottom
}
start moving the invaders {
to the right once per second
if the invaders have gone past the right edge of the board {
move them down and reverse their direction
}
if the invaders strike the ship {
GAME OVER!
}
}
start moving the ship along with the mouse, but {
make sure it doesn't move too far to the left or right
}
if the mouse is clicked {
create a missile right where the ship is
animate it upward until it is off screen
}
}
Here’s the actual code that’s doing it all: rss-invaders.js
I plan to get the collision detection going, as well as a soundtrack (JOHN! hint hint) and a few other bells and whistles in v 0.2. None of this stuff can be reproduced without permission. That’s my license and I’m sticking to it until I figure out a more elegant way to license it.
javascript
I’m getting prepared for tomorrow by listening to the hype machine (it’s like a radio station run by the world and a robot) and reading through the jQuery docs. It’s always good to know what you can do before you start your activity. It’s funny being a programmer, because sometimes I write something that I think is so amazing, and then I show it to someone and as I’m doing the demonstration, I realize that they have no interest in how it works, only what it does, so my programmatic tour de force does not impress as much.
Therefore, I’m not only going to try to do interesting things with jQuery, I’m also going to try to make you understand why what I’m coding is cool. Ha ha – as I reread that last statement, I feel silly because it’s pretty difficult to explain beauty in code … plus maybe doing so is pointless. Regardless, I do hope to write a little paragraph or two about what I’m coding so maybe it can let you into the world of a developer a little bit. The story behind the program is often more interesting than the program itself.
Alright … I have more to say but I’m going to shut up now and get back to reading. Damn! I just realized I’m sitting on the crappy office chair and my cat Shazam! is sleeping on the good chair.
web
