I then googled for JSON viewer and found a very cool tool! “JSON viewer” at codeplex.com. It comes in three variants:

1. A standalone viewer – JsonView.exe (view example screenshoot)
   No doubt – I found this very easy to use. Click to start, paste JSON and view it…
2. A plugin for Fiddler 2 (http://www.fiddler2.com/) – FiddlerJsonViewer.dll
   Well, I do not have it installed.
3. A visualizer for Visual Studio 2005 – JsonVisualizer.dll
   I followed the instructions (though in VS2008), but never really got to a point where I saw the visualizer appear. Perhaps I just dont get the concept of visualizer.

I will not go any further into how to install it, I believe that the readme.txt inside the ZIP file should explain that part. And how to use it – well, try downloading this JSON: http://www.netsi.dk/wordpress/wp-content/uploads/2010/05/exampleJSON.js and play around with it!

Share on Facebook

Read the article and post your comments here on this page.

Share on Facebook

The intellisense got smarter!

The way that the intellisense got smarter is that VS2008 allows you to have the documentation in a seperate file. That way your main code will not be “heavy” for browsers to use – only at development time will the “-vsdoc” documentation file be used!

VS2008 will search for documentation in 3 predefined files – 3 patterns will be searched for: If you have a library, say "mylibrary.js", VS2008 will search for documentation in the same directory in this order

1. "mylibrary-vsdoc.js", then if that is not found, a search for…
2. "mylibrary.debug.js", then if that is not found, a search for…
3. "mylibrary.js"

So if you program a javascript library you can add VS2008 intellisense code in a version named in one of the two ways shown above (or embedded in the main library), and then save it in the same folder as the actual library. This will introduce help on methodes in the library.

If no intellisence appers as you type try updating: “Edit > IntelliSense > Update Javascript IntelliSence (Ctrl+Shift+J)”.

To get this feature you will need to install this hotfix for VS2008.

You can see a description of how to use the "-vsdoc" part in jQuery here:
Rich IntelliSense for jQuery.

Below you can find links to related posts/articles – one of them “The format for JavaScript doc comments” I thing is very important as it is a guide to how you add documentation (and intellisence) to your own javascript code. So now there are more than one argument to start documenting your code!

Happy documenting!

/Sten

Related articles

• jQuery Intellisense in VS 2008
• JScript IntelliSense FAQ
• The format for JavaScript doc comments
• Hotfix for VS2008

Share on Facebook

Javascript frameworks – a litle background
Last year Microsoft realized that jQuery was a very powerfull and solid javascript framework, the simply decided to adapt it and use it as their prefered javascript API. Not a thing which done often by such a big player! The company which perhaps has as many people who hate it as it has followers realized that open source code is something to respect and adapt!

Google Colsure on the other hand – what is it? As I understand the framework is something which Google has developed for internal use, and now has opened up, so that everyone are free to use it. I must admit that I am not totally into all the terms of use and the history of this framework. However IMHO:

We don’t need Google to put one more player on the field of javascript frameworks! When it comes to javascript frameworks we need the unity amoung javascript developers – and a framework like jQuery provides all the extensibility for any Google special needs. 

What to do with “the new Microsoft” ?
It would be unrealistic to expect Google to “drop” its Google Colsure framework, but us – the javascript developers – might put presure on Google (the new Microsoft?). I for one do not need another javascript framework. So I will continue using jQuery.

I do not see Google as the new Microsoft – and Microsoft is not a bad company in my eyes. What however is bad is when one company is too big and can ignore other players without getting into trouble. Google is probertly not trying to push other javascript frameworks out of the field… Right Google? Perhaps Google could try to convert their ideas into extentions/plug-ins to jQuery?

Other opinions about Google Closure
Using TweetDesk I set up a search for “Closure Library” to follow the tweets about the Google Closure Library. Just followed one of them to: http://www.sitepoint.com/blogs/2009/11/12/google-closure-how-not-to-write-javascript/

That article was written by Kevin Yank and he referes to some Google Colsure critism spoken by Dmitry Baranovskiy. I myself have coded many lines of javascript and learned things just by reading this article! I also saw some scary “mistakes” which Dmitry pointed out in the new Google Closure framework. One of them was testing if a var was of the type String (From base.js, line 742):

1
2
3

goog.isString = function(val) {
  return typeof val == 'string';
};

The problem with that method (isString) is simply that it fails if you call it with a String object! Not cool! If you call it like this: goog.isString(new String(‘My string’)) it will return false!

Ofcause nothing is perfect, and the points by Dmitry Baranovskiy could easily be changed as a normal bug is fixed in any javascript framework. What scares me is the fact that many people seem to think that Google equals perfect, and if many people are non-sceptical about things developed by Google (Yahoo, Microsoft or anyone!) then perhaps they will leave jQuery and start using Google Colsure Library… I hope not!

Share on Facebook

I succeded in 31 minutes – which included setting up a simple “documentation”/article about how I did! Now that article/webpage has been brushed up (making it more nice to look at) and I can think that it is worth a visit!

Find it on my domain here: http://www.netsi.dk/showcases/cufon.html, it also has a few relevant links. Should you feel the need to submit comments about that page, feel free to do it here.

Share on Facebook

Though simpel to setup – those parameters – I have made a simple web application which will give you the URL you need to get the map you want.

Try it here: http://www.netsi.dk/showcases/getmap.html

Share on Facebook

Jeg har dog kollegaer der mener at det er en dum ide – at blande disse to ting. De mener at når man transformerer data så er man ude i “view” delen af Model View Control løsning, og der skal der ikke være kode (udover XSLTen).

Jeg kan godt se at de har lidt ret, men mener på den anden side at man bare udvider de ting som XSLT kan. Hvis man sørger for at have solid javascript kode og kun benytter den som en støtte til allerede eksisterende XSLT funktionalitet kan der ikke være noget galt i det.

Hvad synes du?

Eksempler på sider der omhandler emnet:

• XSLT konvertering til store/små bogstaver
• Tip: Call JavaScript from an XSLT style sheet
• INFO:XSLT: Using JavaScript in XSLT

Share on Facebook

<!—@Global:Extranet.Name-->

Such templates are based on HTML, it is: You create static parts of HTML and insert tags where you want the system to insert dynamic content.

You might want to do something like this:

...<div>Hi <!—@Global:Extranet.Name-->!</div>...

So far so good! But what if the user has not logged in? You will need to do one of three things:

The Javascript soloution

Put shortly: Using javascript to control which content is shown is basically not a good idea. But today almost anyone browsing the net has javascript turned on, and the trend (IMHO) goes towards very powerfull javascript parts. Another discussion is that: “Why give a visitor contents if you allready before you start sending information (HTML) that the content is not really relevant?”. Well, another article about that.. Here goes:

...<script type="text/javascript">
if ('<!—@Global:Extranet.Name-->'!='') {
document.write('<div>Hi <!—@Global:Extranet.Name-->!');
}
</script>...

The CSS soloution

This is actually not a way which I would say always works! But the theory is that you put CSS classes  on HTML tags that are build around a classname-prefix (“customerNumber” for instance) and then add the dynamic value from Dynamicweb CMS as postfix. So if a user has logged in a classname would be for instance “customerNumber342” for a customer with the number 342. A customer who has not yet logged in would give a classname “customerNumber”. So if we by default hide the classname “customerNumber” any other classnames would be displayed! Cute right? But the problem can rise when sometime certain Dynamicweb template tags are not replaced, even if it has no value. That way you might end up with

“customerNumber<!--@Global:Extranet.CustomerNumber-->”

That would even be invalid HTML! Anyway here is how a CSS based soloution could be.

<head>.. <style type="text/css">
.customerNumber {display: none;}
</style>
..
</head><body>
...
<div class="customerNumber<!--@Global:Extranet.CustomerNumber-->">
Hi <!—@Global:Extranet.Name-->!
</div>

The If Defined soloution

Dynamicweb CMS offers a way to check if a tag has content, and only pass the  content within the IF-ENDIF if a tag has content.

<!--@If Defined(Global:Extranet.Name)-->
<div>Hi <!—@Global:Extranet.Name-->!</div>
<!--@EndIf(Global:Extranet.Name)-->

...<div>Hi <!—@Global:Extranet.Name-->!</div>...

These are just 3 ways of making workaround in Dynamicweb CMS, you could ofcause come up with more! For instance combining the javascript and CSS soloution.

XSLT Templates comes to our rescue – well almost!

Imagine that you build your content using XSLT: Dynamicweb CMS will build a XML document containing all the “template tag values” in a structured way. A tiny bit of this XML document might be:

...<Global.Extranet.Name>342</Global.Extranet.Name>...

So this way you decide if it is relevant to produce output based on “real” values! You can use the power of XSLT/XPATH to decide what to do. An example:

<xsl:if test="Global.Extranet.Name!=''">
<div>Hi <xsl:value-of select="Global.Extranet.Name" />!</div>
</xsl:if>

All this is done before the content has been send to the client (in Dynamicweb Backend). It is a clean powerfull way to produce exactly what is needed for the page to render as wished.

Nothing is perfect…

When all this is said, I must warn you: The XSLT templates path is – I am sad to say – not always perfect in Dynamciweb CMS. The XML document does not always have all tags. I have some workarounds which I will write about in a later article.

You can see all template tags at templates.dynamicweb.dk.

Share on Facebook

Share on Facebook

javascript:void(eval("var s = '<script type=\"text/javascript\">function doEval(s) { opener.eval(s); }</script>';s+='<textarea rows=10 cols=80 id=source></textarea><br /><input type=button value=Eval onclick=\"doEval(source.value)\" />';window.w = window.open('','','width=700,height=210');window['w'].document.write(s);window['w'].document.title='Debug window'"))

To add this snippet to your browser follow these steps:

1. Copy the code above to the clipboard
2. Add this page to your bookmarks – in the link area.
3. Edit the bookmark, replacing the URL with the copied code on the clipboard
4. Save, while accepting any warnings about protocol

Using it is simple. When you are on a website you simply – press the link just created, and you get a new window in which you may execute javascript. The script will run in the context of the original window so you may explore the DOM and any other relevant information.

Share on Facebook