www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Category Archives: Snippets

10 seconds guide to Dynamicweb Newsletter v/3 templates (sending out news)

This is a short note on constructing news templates for CMS v/3 templates when sending out pieces of news.

 

It can be tricky to create newsletters in HTML, doing it from Dynamicweb CMS using the Newsletter v/3 does, I am sorry to say, not make things easier. Using the below you get the skeleton of the central news item loop:

 

<p>Dear <!--@DWUserName--></p>
<table>
<!--@LoopStart(ItemsLoop)-->
<tr>
<td>
<a href="<!--@LoopStart(IsSetupDetailLink)--><!--@ModuleDetailLink--><!--@LoopEnd(IsSetupDetailLink)-->"><!--@NewsHeading--></a>
<br />
<!--@If Defined(NewsManchet)-->
<!--@NewsManchet-->
<!--@EndIf(NewsManchet)-->
<!--@If Not Defined(NewsManchet)-->
<!--@NewsText#100-->&#8230;
<!--@EndIf(NewsManchet)-->
<br />
<a href="<!--@LoopStart(IsSetupDetailLink)--><!--@ModuleDetailLink--><!--@LoopEnd(IsSetupDetailLink)-->">Read more</a>
</td>
</tr>
<!--@LoopEnd(ItemsLoop)-->
</table>
Share

Snippet: Javascript – Extend Object with toParams()

Often you need to do AJAX XHR calls, where you send information to a webserver to get information back. This will extend Object with a method which will return a string ready for sending to a webserver.

   1:  Object.prototype.toParams=function () {
   2:    var sParams='';
   3:    for(a in this) {
   4:      var val=this[a];
   5:      if(typeof val!=='function') {
   6:        sParams+=((sParams!='')?'&':'')+a+'='+(val);
   7:      };
   8:    }
   9:    return sParams;
  10:  };
  11:   
  12:  // Example of use
  13:  var test={ 'a': 1,'b': 'hello værden :-) ' };
  14:  test.toParams();
  15:  // Return valud from test:
  16:  // a=1&b=hello%20v%C3%A6rden%20%3A-)
Share

Function: loadscripts(aScripts, callWhenFinished) – Loading scripts syncron

Sometimes you need to load some javascripts in a syncron way and then when they have loaded do something. This is exactly what I try to address with this function. It requires . It will take an array of URLs to the scripts (aScripts) you want to load-and-execute. After it has finished with that it will call an optional function “callWhenFinished”.

The code has XML comments which works with .

function loadScripts(aScripts, callWhenFinished) {  ///
Requires jQuery. Will load the scripts specified in the Array aScripts one after the      other (syncron). After that has been done it will optional       call the callWhenFinishedFunction  ///
An array of script URLs which will be loaded an executed using jQuery.getScript  ///
After all scripts has been loaded and executed this function will be called  jQuery.getScript( aScripts[0], function(data, textStatus) {    aScripts = aScripts.splice(1,2);    if (aScripts.length>0) {      loadScripts(aScripts, callWhenFinished)    } else {      if (typeof callWhenFinished!='undefined') {        callWhenFinished.call(this)      }    };  });}
Share

Dynamicweb afsnits tekst editor – skabeloner og hvordan man anvender dem

Nu er der en code til at lave templates (skabeloner) til paragraph text editor og en god guide (på engelsk) som gennemgår installation og med et eksempel. Så nu er det bare at huske det når man implementerer løsninger! :-)

Code snippet for creating template for the #dynamicweb paragraph texteditor – mytemplates.xml http://goo.gl/DlUwG

Share

SyntaxHighlighter: Getting syntax highlighting feature here, there and everywhere – including on your blog…

Tonight as I am preparing the setup of a new related blog (www.dwfeatures.com) I came across “SyntaxHightlighter” an open source client side code highlighter – I think that it is cool! So here is a short description of it so that you may start using it yourself.

Install plug-in on your wordpress blog

There are several plug-ins for wordpress which can use, I found Evolved interesting and installed it. Simply go in the control panel of your wordpress and click add new plug-in. Search for “ Evolved” and you will find it. Click install and activate!

SyntaxHighlighter Evolved plug-in for wordpress

Continue reading →

Share

Improvements in Microsoft Visual Studio 2010, from a frontend webdevelopers point of view, part 1: javascript

Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.

The background: What I missed…

I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like , and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!

The new features –

In this part I focus on javascript in VS 2010.

Javascript intellicence

embedded from local “standard” API javascript file.

It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!

Microsoft minimised version of jQuery still has intellisence

jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!image

Note:
After you have added any external script file you can update the javascript intellisense using [Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.

jQuery plug-ins handled as well in intelisence

Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).

If you think about it – VS 2010 is quit smart! It scans the cycle plug-in and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!

 

The intellisence works perfect

Dropdown filelist simplified

Automatic dropdown file list when adding HTML code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your HTML document. Now you simply click on the file, if it is located at the same place as the current document. Nice.

 

”Dropdown filelist simplified

Snippets – finally!!

I have written about snippets in in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.

types “Surround with” and “Insert ”
If you do not know how to activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!

Using the surround with snippet

Just discovered that in fact Microsoft has not made it possibel to use snippets within CSS… Why, why, why???

Intellisence will execute your code dynamically to give better suggestions

Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.

Intelligence sugestions are related to the type of your variable...

Your own intellisence using XML comments!

Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! Cool!

You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.

Here goes your excuse for not documenting your javascript code anymore! XML Comments in javascript.

 

Various small changes

  • You can zoom the work area as you can in your browser. Just hold down [Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me :-)
  • All these improvements also apply to the free Visual Web Developer 2010 Express!

 

Links


Share