Topic awaiting preservation: January 20lines Contest - Web Designer Tools

This month's theme is Web Designer Tools.

Make a small tool of some kind that a Web Designer or Web Programmer would find useful. Examples of tools might be these or this. Make something interesting, make something useful to you!

And yes, a program to count the lines in a Javascript program is fair game.

quote:

---

A code monkey said once:
As usual, the main rule is to make your script in 20 lines of (effective) code.
Comas shouldn't be used to execute several instructions on the same line
See the code sample below to illustrate the basic rules :

code:

---

<script type="text/javascript">



/* */ document.body.onclick = function()

/* */ {

/* 01 */ val = prompt( 'enter a number' );

/* 02 */ for( i=0; i<10; i++ )

/* */ {

/* 03 */ alert( stupidFunction( val, i ) )

/* */ }

/* */ }



/* */ function stupidFunction( a, b )

/* */ {

/* 04 */ return a>b?a:b; // I said it was a stupid function

/* */ }



</script>

---

The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ).
The declaration of the stupidFunction() does not count either for the same reasons.
The coma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

---

Why don't we try something new -- both comments and entries belong in this thread. Hopefully it will make it a little easier to manage, and if it doesn't work, well it's only around for a month.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Ok ok, I won't bark this month towards the misplaced posts

The topic is interresting and usefull but my first thought is that since I use FireFox and some extensions I have a hard time to figure something I miss when developing/designing a web site. Well I've got an idea though, but it can also be done with Mozilla.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

I think this is a good web designer tool:
http://asylum.zavaboy.com/image_mapper.html (IE ONLY)
I made it back in 2003 and the JS source has not been altered. Please excuse any messy coding.

Please note this is my first 20 liner.

These would make fabulous additions to the GurusNetwork!

http://www.ozoneasylum.com/24625 <- this adds tremendous potential to this contest.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

My first 20 liner
http://www.freewebs.com/jan_ma/jan2005.html

-kudos

Cool entry, kudos. I wasn't sure what yours did before I read the explanation at the bottom.

I made a quick, fun little something for the contest, though it's not terribly complex and only 11 lines . I didn't have much time to put into it though and I thought this would be pretty useful to web developers: a code generator that produces image preloading and rollovers for graphical menus and such:

http://www.keenkelly.com/demo/images/

Hope you like it

-SK

zavaboy:
Neat, but you probably should place the cursor in the middle of the image by default, and when it's left/top of that, move it to the left/top.
That way, one could move the image back up again.

so long

->Tyberius Prime

Well, I thought, since I haven't entered one for a while, I'd give this one a shot. Not being very inventive however, I'm going to enter the one tool I have actually created recently. A lot of people dislike frames due to the fact that you cannot simply copy the text in the address bar to send someone to the appropriate page. For the fun of it as a proof of concept I wrote a script to get round this (though it has actually formed the basis for my site....) . Anyway, this is a cut down version of mine as my site uses other tricks (=stupid ideas I had but are completely worthless). It's so simple I wouldn't normally enter it, but I've found it sufficiently useful to actually bother entering it.

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

<iframe name="myFrame" id="myFrame" frameborder=0 width=80% height=97% style="position:absolute;top:0;right:0"></iframe><p />

<script>

var mine=document.location.toString().split("?")

if (mine.length!=1) {

window.frames['myFrame'].location=(mine[mine.length-1])

}

else {

window.frames['myFrame'].location=("mainPage.html")

}

</script>

<a href="test.html?new.html">Test!!</a>

Well, it requires certain things (naming this page test.html, but it's all fairly obvious and easily-changed).

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Well, I managed to miss the competition last month (holidays are wonderful things , but thought this one suited a conversion of a tool I wrote a while ago in Delphi.

I found myself always firing up my Delphi app, or doing screengrabs and using the crop tool in Paint Shop Pro, to measure things on web pages I was building... Thus the DHTML ruler was born.

This entry would ideally be included on a web page as an external JS file, as it is fairly self-contained. You simply click anywhere on a page, and drag the box to see how big anything is, or its top and/or left coordinates updated in the status bar. CAVEAT: Firefox disables modification of the status bar by default. You will need to enable this option if you are running Firefox (Tools -> Options... -> Web Features -> Advanced -> Change status bar text).

I've tested it working fine in IE 6 (XP SP2), Firefox 1, Opera 7.54, Netscape 7.1, and even Safari... so it will probably work on almost any browser (although the values given in the status bar may be incorrect on some browsers, due to box drawing differences, etc).

The entry is here: http://www.soterm.com/dan/ruler.html

Dan

(Edited by BillyRayPreachersSon on 01-18-2005 13:33)

Great tools wrayal & BillyRay!

JavaScript benchmark


Ok, Venkman allows that sort of thing but I've never had the courage to put my nose in it, and actually prefer to use that sort of script.

very nice poi! (and potential usefull :)
-kudos

*bump*
I've updated the script to reflect more accurately what I usually do. Now there's 3 functions :

• initializeJavaScriptBenchmark( what )
• updateJavaScriptBenchmark( what )
• javaScriptBenchmark( what[, reportHandle] )

That way you can benchmark several things at the same time by nesting some initializeJavaScriptBenchmark( id ) and updateJavaScriptBenchmark( id ) calls. If you call updateJavaScriptBenchmark( id ) with an ID that is not (re)initialized, the function return -1 otherwise it returns the average time of the executions of the code designed by the ID.

kudos: thanks



(Edited by poi on 01-25-2005 04:25)

Lol, was about to submit another entry based on XMLHTTPRequest, before realising the cross-domain scripting restriction made a mockery of it. If I can't find any way round it, I'll enter it as a POC at some point anyway. It's a bit of fun. Essentially, it lets you enter a URL, and it just setsup the indenting properly. I never indent my code, so it's kinda interesting to see. It's weird, it works happily both locally and on a server for me for any page. But for my mate, it will only load pages off that actual server. Weird. Any advice much appreciated, otherwise, it'll be time for some googling tomorrow. Bed time for me

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

hmm.. BillyRay's doesn't work for me but I get what it should do (I have a bunch of mozilla plug-ins that I think are interfering with the status bar output)



.:[ Never resist a perfect moment ]:.

Try removing the plugins and see if it works for you then, then.

Incidentally, (and I'm not 100% sure on this), you might try holding down the shift key while loading FF/Moz... I think it might disable certain plugins.

Dan

Meh, stupid IE confusing me. I'm guessing the fact that it worked cross-domain at all before was due to IE caching stuff. A quick Ctrl+F5 quickly broke it. So, who knows?? Well, I've set it up to perform its operation on a file (my raytracer in fact, as that is a _horrible_ piece of code) on the same server, so it ought to work. If you save it and run it locally, it seems to load happily from any server. But who knows. I cannot vouch for compatability, speed, it even working....the usual stuff. Oh, and if you fiddle at all, Ctrl+F5's galore might help

http://www.wraypa1.f2s.com/wrayal/20LinerIndent.html

I know, it's lame, but I thought I'd enter it for the hell of it

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Sorry it took so long for me to get to announcing this... I forgot that January ended, heh. :X

Well, without any ado, the winner of January's 20 line Contest is p01, for his very well-thought-out tool for benchmarking Javascript.

Though it was plagued with some errors (on my machine anyway), I have to give second to wrayal's code indentor (since it's just a good attempt at a very difficult thing to do perfectly ), while esskay takes third with his code generator.

Then, it's up to p01 for coming up with February's contest. Thanks to all the participants, and sorry I am so late on this!

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

IW: thanks very much

Sorry 'bout the bugs, I actually got the time to fix a couple of the time....but not to post the updated ver!!

And, of course, massive congratulations to poi!!

Bring on the next round

Wrayal

My Website (finally! And yes, it uses frames and is evil, but, well, take a look, it's not as evil as you might think )

Yay - honorable mention! Good show, poi & wrayal.

-SK

(Edited by esskay on 02-03-2005 04:32)

Oh! thanks mates.
Congratulations to the other participants. Kudos to wrayal for his ambitious and tricky script.
I've had a quick look at some RegEx to count the lines of a script, but doing this correctly looked like an insane task and I gave up.

Anyway, let's move on to the February 2005 - 20 lines JavaScript contest - JavaScript ZOO