Tag: javascript



14 May 10

Today I came across a JSON file, hmm… I love the opportunities that JSON gives you as a developer, but it is very compressed and not especially human friendly. Unlike XML, which on the other hand calls for a lot of coding inside a program to convert it into anything other that just data. JSON can contain actual code, functions, objects and ofcause data.

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!


Filed under: Code, jquery

Trackback Uri






21 Feb 10

The javascript API jQuery is a very powerfull libray which have revolutionised the use of clientside javascript in browsers. Along the side of jQuery exists jQuery UI a library of strongly customizable widgets. It offers a wide range of "easy-to-implement" widgets for your website. I will try in this post to implement a datepicker and conclude in the end if it is easy!

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


Filed under: Is it easy?, css, jquery

Trackback Uri






9 Feb 10

When I first saw that Microsoft Visual Studio 2008 (VS2008) started to allow for intellisence on javascript I was happy! Not many seconds after that my suspicious old mind saw some problems, one of them was the fact that the vast amount of documentation would follow the javascript files making them too big and slow down pages using them.

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


Filed under: Code, jquery

Trackback Uri






14 Nov 09

Since I first started to juse jQuery javascript API I have been a happy programmer! Things like cross browser, easy widget implementation and animation were suddently very easy to use. It was fast to implement, ran fast and as mentioned were rock solid accross browsers on various platforms! Finally: It started a trend of worldwide unity amoung javascript developers – people very moving as a group.

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/

image

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!


Filed under: jquery

Trackback Uri






29 Oct 09

I was tired of sIFR (flash based custom fonts) and decided to google for another soloution to adding custom (non web-standard fonts) to a webpage. I came across “Cufón” and decided to set up a target: If it is to be considered easy and out-of-the-box, the framework should be able to implement in 45 minutes!

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.


Filed under: inspirovation

Trackback Uri






16 Aug 09

You probertly know Google Maps and the API allowing you to embed maps with your information shown on the map. Google also offers a simpel API which allows you to plot simple maps just using an URL. The URL then has some parameters specifying things like zoom level, type of map and center of it.

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

image


Filed under: Code, jquery

Trackback Uri






11 Aug 09

Jeg har en del viden indenfor javascript og nu hvor XSLT også er noget jeg arbejder med er det åbenlyst at kombinere disse to teknologier.

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:


Filed under: Code

Trackback Uri






13 Jun 09

In the CMS system I work with – Dynamicweb CMS – content is build around various templates, each containing a output from the system. The output is generated using ASP.NET and each bit of content is represented in a “tag”. For instance if you want the name of the user which has logged on the page you enter

<!—@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.


Filed under: Code, dynamicweb

Trackback Uri






28 Jan 09

Gravatar is an image/icon which will be used whenever your e-mail is used, typically in blogs like this. You may see an example of how to retrieve gravatar using jQuery here. I wanted to write the article here – but I am too much a novice to know how to use jQuery libraries on Wordpress – so you will have to view the artical and write any comments here…


Filed under: Code

Trackback Uri






13 Jan 09

Here is a very usefull javascript snippet which you can put in a link in your (MSIE) browser. It opens a new window from where you can execute javascript in the context of the parent window. Very usefull! Here is the snippet code:

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.


Filed under: Other

Trackback Uri