Just discovered: jsconsole.com

Just discovered jsconsole.com, an awesome way to quickly test out some javascript code.

So far I like jsFiddle to test out javascript code in the context of a html page and css styles, or cscript to run some javascript locally in a command prompt window.

jsconsole runs in your browser but works like a console, thus you just type or paste in javascript code and will see the output in the console. Like:

a = 1;
1
b = 3;
3
a + b
4
A nice feature is that you can paste in functions as well and execute those:
function addit(v1,v2) { 
  return v1+v2; 
}
addit(a,b);
4
A much nicer feature is that you can load any web page to make it available as a document in your javascript context:
:load www.google.com

Loading url into DOM…

DOM load complete

You can also use that “:load” command to load any external scripts, or a javascript framework like jquery:

:load http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

Loading script…

Loaded http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

Now we have the google page available as a document and jquery as a library we can easily find out ( programmatically ) the text of the two buttons on that page:

$("input").each( function() {if ($(this).attr("type") == "submit") { console.log($(this).attr("value")); }});

"Google Search"

"I’m Feeling Lucky"

Isn’t hat just … wow !?

Advertisements

Since Firefox 30 using unsafeWindow is really not recommended anymore

I had written a little Greasemonkey script allowing to generate some html code from a flickr photo page to use in a blog posting.

Gut gelaunter Baum
"Gut gelaunter Baum" by Axel Magard.

See picture on the right as an example.

That script went to userscripts.org but unfortunately userscripts.org is not available anymore, so you now can get that script from here (OpenUserJS).

That script used code like described here to dynamically load jQuery so that jQuery can be used in that Greasemonkey script. Because of this change in Firefox this code stopped working and I always ran into a Javascript error saying: “Permission denied to access property …”

Luckily this problem has been discussed here on stackoverflow.

The solution: a different way to use jQuery in a Greasemonkey script, bascially thru the @require directive, nicely explained in Taw’s blog here. ( You can check out the source code of my script right away here on OpenUserJS.

PimpGoogleBookmarks.js

My latest Greasemonkey / jQuery script PimpGoogleBookmarks.js I wrote to – as the name of that script already says it – pimp Google Bookmarks.

One thing I hate about the Google Bookmarks Screen is the long list of tags on the left ( yep, I do have many tags ) which makes the entire document very long ( high, to be precise ).
My little GM script adjusts the height of the list of tags on the left and the list of search results on the right to my screen size and gives both areas a scroll bar, thus I can scroll down the tags list or the list of search results separately.

In addition it is possible to search for a combination of tags by doing a double-click on those.

Sweet, isn’t it ? Greasemonkey and jQuery are two powerful friends when it comes to tweak web pages to just work a bit better and become more convenient to use.

My favorites for week 15, 2011

Big GrinSomething to laugh: my favorite comic strip of the weekabout twitter

How difficult it has been to send messages across in former times ! Thanks to twitter and other modern social networks and communication tools it is so easy to get everyone informed, isn’t it ?

ApplauseSomething to learn: my favorite tip of the weekabout Javascript.

w3schools.com – not to confuse with our internal w3 intranet ! – is a great reference and learning site for creating web sites and all you need to know for this, like HTML, CSS, Javascript, PHP, SQL and much more. I want to emphasize the Javascript pages, since they always come with a TryIt Editor, like here for example with some sample code for the Javascript slice method. Not only does this deliver nice examples ( I often learn better through examples than through some formal explanations ), it actually would allow you to type in your own Javascript code, click the “Edit and Click Me” button and see the results of your code instantly in the right window frame. Sweet !

  Something to enjoy: my favorite photo  on flickr under a Common Creative licenseabout buses and USA South West

Interested in buses ? Then Steven’s Bus & Coach Photos flickr offering is for you. Thousands of buses of all colors and ages, I can tell you !
Interested in nice, often “improved” photos from the Southwest of USA ? Then visit Pedro Szekely’s photo stream.

Maidstone & District,
"Maidstone & District," by Steven’s Bus & Coach Photos.
Fisherman's Wharf, San Francisco
"Fisherman’s Wharf, San Francisco" by szeke.

Something to talk about: my favorite quote of the weekabout advertising

The very first law in advertising is to avoid the concrete promise and cultivate the delightfully vague.

Advertising – I actually hate it and avoid it where I can. With most ads I get the feeling that those who created them must think I am a complete idiot.  Thus I  like the way Bill Cosby explains what advertising is all about.

Dojo IconClass Reference

It is amazing how bad some things are documented and how many people are struggling to find the right information.

I have been doing some dojo coding recently and used some javascript code to dynamically create buttons with little icons. How to do it is described here on the dojocampus site. There is an example showing how to set the inconClass attribute to display an icon in the button, in this case a little scissor symbol; the icon class for this is called "dijitEditorIcon dijitEditorIconCut".

The next natural question would be: what other icon classes are available ? One sort of question where you start googling without ever finding a sophisticated answer to your question. You would expect to bump into some reference somewhere listing all those possible icon classes, but nada – nothing. Instead you find a lot of discussion threads where people discuss the very same issue, like for instance here and here. In the latter you read somewhere that all icons are available in /dojo-src/dijit/themes/tundra/images/editor.gif; this gets you part of the answer, at least you can see what icons are available, but you don’t get their class names.

After doing some more investigation I found all those class names actually listed in /dojo-src/dijit/themes/tundra/editor.css.

Thus I wrote a little dojo javascript to create such a reference I hope others find helpful in the future if they bump into the very same question: What Dojo IconClasses are available to create icon buttons ?

Beware of the g flag when using regular expressions in javascript …

The following experience with regular expressions in Javascript has cost me a few hours of my life, thus it is probably worth to share it. This is bascially about the “g” flag ( described for instance in this tutorial here ): The “g” flag is the “global search flag” and is supposed to search for a pattern throughout the entire string given. Nevertheless, apparently this creates the situation that you can use a regular expression only once in your code. Look at this code sample:

  1:   regex = /Hello/g;
  2:   text = "Hello World!";
  3:   document.getElementById("my_output").innerHTML = "<p>Testing string \"" + text + "\" with regex <strong>" + regex + "</strong> : " + regex.test(text) + "</p>";
  4:   document.getElementById("my_output").innerHTML += "<p>Testing string \"" + text + "\" with regex <strong>" + regex + "</strong> : " + regex.test(text) + "</p><hr>"; 

What would you think is the output from the last two statements ? “True” and “true”, you think, since it looks like the test should be positive and those two statements are exactly the same ? If this is your answer then I can tell you it has been my expectation as well. Nevertheless: the answer is wrong. The output will be “true” in the first case, but “false” in the second case. Somehow the regular expression seems to work only once.

You can test it out with my little sample script here ( just click on the “Test…” button ).

When omitting the “g” flag you get a “true” in both cases.

The never ending journey through knowledge …

It’s amazing, isn’t it ? I read “Ajax: A Beginner’s Guide” by Steven Holzner and learned basics about Javascript and Ajax, and I learned that there are many Javascript frameworks out there making it easier to use these technologies – one of it is Dojo, a quiet popular one. I read  “Learning Dojo” by Peter Svensson and through this book I learn about alternate Javascript frameworks like e.g. JQuery, another popular one. Since also some people argue this to be better than Dojo ( certainly others argue the other way around ) I become curious and now started reading “Beginning JavaScript and CSS Development with jQuery” by Richard York. Among the first things I learn from this book is that there are other Javascript frameworks out there: base2, Yahoo UI, Prototype, SproutCore.

* Habe nun, ach! Philosophie, Juristerei und Medizin, Und leider auch Theologie Durchaus studiert, mit heißem Bemühn. Da steh ich nun, ich armer Tor! Und bin so klug als wie zuvor;

Well, that’s Philosophy I’ve read, And Law and Medicine, and I fear Theology, too, from A to Z; Hard studies all, that have cost me dear. And so I sit, poor silly man No wiser now than when I began.

Wow, you can’t win that game, can you ? You can become smarter, but never smart. With every question you answer you get a whole bunch of new ones. With every piece of knowledge you start discovering you also discover tens and hundreds more waiting for you to be discovered.

Goethe’s Faust already said it: “I know that I know nothing!”. The more you learn the more you know how true this is. And since in these fast changing times your learning pace might never be good enough to catch up with new knowledge you are always behind, aren’t you ? A single man never can catch up with knowledge “produced” by millions and billions of people.

Suppose it would be your job to recommend the best Javascript framework for a given project ( and let us assume for now and for the sake of simplicity this would be a well defined project with well established requirements ): how would you do this ? Learn about all available Javascript frameworks and come up with a decision on your own ? Hardly possible. Learning about all these Javascript frameworks actually wouldn’t be sufficient, you would have to be an expert for all those through having actually used all those for at least a few projects. Not realistic – your project would never start.

Your other option would be to find experts for all these Javascript frameworks, make them familiar with your project, put them all together and see with what decision they would come up with. If any. Hardly possible either. A little bit more realistic may be, but still almost impossible. It starts with the hurdle that you never would find all those experts nor get them all together for your project. If you would overcome this problem most likely you would see each of your experts fight for his favorite framework without getting to any decision. If a decision would be made it is most probably not made based on objective judgment, it is most likely a result of group dynamics and politics.

What will be your realistic option ? You probably will only consider the few ( one 😉 ) framework you know about and pick it. You won’t have the time nor the resources to dig deeper into knowledge available and start your project smart with the optimal decision and best framework you could get for your project. You will start it in a sub-optimal and semi-smart way, won’t you ? And you and the project will suffer because of this for the remaining duration of the project and longer, for the life time of whatever your project is putting into existence.

While this might sound a bit negative it is the natural way projects go, the way of business and life. Knowledge is changing all the time and there is never such a thing than an absolute true statement or a best answer to a given question. You always start with compromises, weaknesses and problems-. You might fix some of those later on, may be as part of your project, and this will be the root of more change to come. The cycle of change so to speak, and the reason why project managers and engineers and scientists and experts will always be busy with what they do. We will never sit back and say: “Done!”. The day this happens might be the end of everything.