The perfect tool for reference search and snippets?

Development involves using a lot of tools, apis, methods and documentation for such items is often found using your friend Google Search. Today I have seen a very cool tool for Mac OSX. Its called Dash, and its a free app found in the App store.

The cute logo of the Dash app

You can install the Dash app from the App store.
It is free but has a “Full version” which cost around
$ 5,- which I think is a very fair price!
You may also download it from the developer website.

What is it that Dash offers?

I must admit that my experience with Dash is sparse, and this blog post is only an introduction to the app. It does search in a lot of the wide spread apis from anywhere in your Mac OSX. It has – to mention a few – HTML 5, css, javascript, jQuery, jQuery UI, WordPress, XSLT, Perl, Ruby, NodeJS…

In the image below I have opened a HTML5 document in my preferred editor “Sublime Text 2“. I want more information about the tag “section”, and as I have set up the short-cut “Shift+Cmd+$” in the OSX global short cut settings I simply mark the tag and press that key combination. Voila! Dash opens and have found some nice HTML5 documentation for the section tag, cool!

Dash offers integration to any Mac OSX app

Snippets – cross app too!

It also offers snippets, which I have tried only a little. It seems very cool as it works anywhere allowing you to add “abbreviations” for each snippet. So say you have a HTML5 boilerplate which you use a lot, simply paste the boilerplate into Dash, add some variables or an date place field (which will automatically insert current date when executed) and define say “html5bp. Every time you type that abbreviation it will be replaced with the snippet!

If you have any comments or experiences related to Dash please share through a comment here on this blog post.

My small notes – updates

I would love to get “fuzzy search” like in Sublime Text 2
Seems that you cannot easily share found directly to say twitter, pity

Related information

The YouTube video post from the brilliant channel “GoTreeHouse” where I discovered the brilliant Dash app.
The website of the developer Kapeli
Follow the developer @Kapeli on twitter
Install the Dash app through Apple App store
How to create your own “Docsets”

XSLT transformation on Mac OSX

The startup screen of Transform

As I am now on Mac OSX I am on a constant search for the tools I miss from my time on Windows. I do some XSLT offline transformation as I implement websites in for instance Dynamicweb CMS.

I often get the XML from the CMS, download it and build the XSLT to transform the raw XML into HTML. Back in the old days where I used Visual Studio every day on Windows I could do XML transformation in there, I could also single step and more nice stuff.

On Mac I use Sublime Text which I have found such an option for – so I tried to search the Apple App store for a tool to help me. I discovered “Transform” by Niel Ang which has it advantages. I will update this blog post with more notes about the product as I discover them. For now I have discovered this:

* Works dynamically and reacts to file changes
* Works with files, so it can be used with any editor
* Has a preview option (of transform result), I have not yet found out how to do this, which is due to my rather thin knowledge about running a web server on my mac.
* As with other purchased apps you may use it on more than one device

You can find information about the product here: http://neilang.com/transformapp/ where there is also a link to appstore. I find the price 32 DKK / 5 $ an okay price.

CV–cases: www.madkulturen.dk

Dette er det første indlæg hvor jeg kort beskriver noget jeg har været involveret i. Grunden er at jeg generelt glemmer at få kommunikeret hvad jeg egentlig går og laver i mit professionelle hverv. Jeg håber at kunne poste løbende eksempler på hvad jeg har gået og lavet.

www.madkulturen.dk fra fødevareministeriet.

Slider i top af siden

Slideren i toppen lagde jeg også en hånd på. Der var tale om implementering ved hjælp af et standard jQuery slider plug-in.

YouTube kanal viser

Kunden ønskede mulighed for at indsætte en visning af videoer. Der forelå et design og et ønske om at bruge YouTube. Jeg var med i dialog om hvordan det kunne implementeres og det endte med et backend modul til Dynamicweb CMS så det blev meget nemt for ikke tekniske redaktører at indsætte videoer på hjemmesiden.

Min rolle handlede primært om frontend implementering af video visningen. Det gjorde jeg gennem XSLT transformering af de filtrerede data fra YouTube.

Kunden ønskede en op/ned funktionalitet som jeg udviklede et jQuery plug-in til at håndtere.

Se den live løsning.

Controling styles for individual websites by adding extra classes to HTML tag

When working with CMS like Dynamicweb or Syncron VIA, you sometimes share stylesheet files across domains or subdomains. It makes sense to share common CSS codes when you want to some some common styles like fonts, colours or logos.

The same styles… almost…

It is also common that some small differences exists on subdomains, perhaps a campaign site or a site target for a specific group of people. You then need to apply some small changes to those sites. Ofcause you can do this in many ways, and the CMS you use will probertly be a part of your decision on how to implement it. Here is one way to do it:

Add a CLASS to HTML tag with some site related information.

For instance I could add this code to my blog:

<html class="wwwnetsidk"...

The rule should be simple, for instance:

Replace not-valid characters like “.” from the DOMAIN NAME to “nothing”

The reason it should be simpel is that it makes it easy to figure out what it should be for a given domain name. Things which are using the KISS (“Keep It Simple, Stupid!”) principle will more likely be used by people, as (in general) people are lazy (I know! Smiley , trust me.)

When this rule have been applied you can add extra lines to your shared CSS file like this:

html.wwwnetsidk {background-color: red;}

The princip is used widely, for instance by http://www.modernizr.com/ which addes a lot of feature related classes to your HTML element telling you for instance which HTML5 features are supported. Just look here at parts of what modernizr adds to your HTML document:

js no-touch postmessage history multiplebgs boxshadow opacity...

Dynamicweb CMS

Working with Dynamicweb CMS, here is an example of adding extra information to HTML element – “areaid-xx” will add the ID of the area. In Dynamicweb you can have several areas, which are individual websites. So you might have areaid=1 which is www.netsi.dk and areaid=2 which is m.netsi.dk. In the example below I have also added extra information telling if the person is a returning person.

<html class="areaid-<!--@Global:Area.ID-->
<!--@If Defined(Global:OMC.Visitor.IsReturning)-->IsReturning<!--@EndIf(Global:OMC.Visitor.IsReturning)-->"...

You may add any information you wish, perhaps have a look at the tags that Dynamicweb CMS offers.

Syncron Via CMS

Here are an example of how I have implemented this feature in the Danish CMS system Syncron Via. The system is using XSLT a lot, and the code here is applied to the XSLT template used to render the outer Page data:

<xsl:variable name="serverName" select="translate(/Page/RequestContent/ServerVariables/Entry[@Name='SERVER_NAME'], '.-', '')" />
...
<html class="{$serverName}"...

This is what I do: define the class to be added to the HTML element in a variable and add it to the HTML class attribute.

How to add entities to XSLT templates

When you work with XSLT you sometimes need special characters like “«” and “»”. You can define “entities” which can then be used in the document. Here is how:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY laquo "&#171;">
  <!ENTITY raquo "&#187;">
  <!ENTITY hellip "&#8230;">
]>
<xsl:stylesheet…

You add the lines marked above. They defined a relation between a entity name and a character code. For instance the “laquo” will make it possibel for you to use « when inserting a “«”.

HTML Entities codes

The website “entitycode.com” has a very nice structured overview of HTML Entities Codes. You can see the relation between characters, their entity name, the decimal code and a short description of the character. They are very well organised in categories, go and see it for your self…

Links

Did you remember to exclude namespaces from output?

When you work with XSLT, transforming XML to for instance the web in some CMS system, you might use some extra namespaces. Perhaps the CMS offers you some utilitiy namespace to handle relevant datastructure or procedures. You add them to your XSLT but perhaps you forgot to tell the XSLT processor not to add the namespaces to the output? Well I do some times…

Namespaces in a XSLT template

Adding namespaces to get extra features in your XSLT templates is easy. You may or may not think about it, but you will allways add at least one namespace “xsl”. Using Microsoft Visual Studio and selecting “New XSLT…” you will probertly also get a MS namespace like this: “msxsl”. I all happens in the beging of the template like this:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl "
  xmlns:cs="urn:custom-cs"
>

In the above example there are three namespaces:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:cs="urn:custom-cs"

The first one “xsl” is telling the XSLT processor that we are using XSLT and that the we will be using the XSLT rules defined in 1999 by w3.org.

The next one “msxsl” addes MS custom features and will give you some nice new features, for instance functions to format dates (ms:format-date Function).

The last one I use for adding custom C# code in my XSLT. That is a very powerfull way of extending the XSLT processor with your own custom .NET code. But please take care when doing that!

Removing the namespace from the output

If you use custom namespaces you may end up with the namespaces added to the output elements. In the above code you may observe that there is an attribute “exclude-result-prefixes” on the xsl:stylesheet tag. It is used to tell the XSLT processor which namespaces should not be added to the output elements. I have added “msxsl” but not “cs”. I the example I use XSLT in Dynamicweb CMS to generate HTML, so I may get output looking like this:

<ul xmlns:cs="urn:custom-cs">

That is not what I wanted! To remove the “cs” namespace I simply need to modify the xsl:stylesheet attribute “exclude-result-prefix” to:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl cs"
  xmlns:cs="urn:custom-cs"
>

I have added the “cs” namespace, so I will now get a tag without the “cs” namespace in my HTML.

XSLT: Insert newline in output

To insert a linebreak you simply output the unescaped values of carriage return and linebreak, which is CR+LF (char 13 + char 10).

<xsl:value-of select="'
'" disable-output-escaping="yes"/>

You may read more about newline on wikipedia.

Encode URL in XSLT

If you need to URL encode something in XSLT, you can use javascript serverside – not perfect, but it gets the job done. Here is the javascript and below you can find link to a simpel XSLT which has the script implemented.

   1:    <script language="javascript" xmlns="urn:schemas-microsoft-com:xslt" implements-prefix="js">

   2:      <![CDATA[

   3:      // This will return a URI encoded string

   4:      function encodeURL(sUrl) {

   5:        sUrl.MoveNext();

   6:        sUrl = sUrl.Current.Value;

   7:        return encodeURI(sUrl);

   8:      }

   9:      ]]>

  10:    </script>

Find example XSLT here: http://dl.dropbox.com/u/3260327/xslt/js_encodeURL.xslt

XPath evaluation in Visual Studio 2010: TTXPathNavigatorVSIX

My daily tool for creating webpages is Visual studio 2010 (VS2010), but one thing which I think it lacks in are XML/XSLT related tools. One such thing is XPath related, XPath is the one of the building blocks of XSLT which I use often during my work with Dynamicweb CMS.

I found a free addin for VS2010 TTXPathNavigatorVSIX which I tried to download. The way you should install it is by:

Open Extention Manager and Select “Online Gallery”, now type “TTXPathNavigator” in the search field. You should get something like this:

Now click “Download” and after having accepted something the plugin is installed into your VS2010. You must restart VS2010 in order to make the plugin work, so do that. You simply press restart.

Using the plugin

After VS2010 has restarted you now have a new XPath query field as shown here below.

So off you go! XPathing away! Happy XPathing…

Or so I though.. I might have guessed by the lacking documentation on the page where I initially found the plugin, that I needed to do some trying out before I could start to use this very simple plugin. So to save your time here is what I found out:

Before using it you should know that it is a simple plugin:
- no highlighting of XPath results in the XML tree
- results are only presented in the output window. So you need to open (and pin) the output window. So open the debug window and pin it (so that it stays open)
In the output window you wil have to select to see the output from XPath navigator, and you might have to execute a XPath navigator before the option is there in the “Show output from” selectbox.
It only handles results which return a node-set, which is, well a limitation IMHO. What this means is that you cannot get a result from say this XPath:
count(//Page[string-length(@Icon)>0])
The good news!
You can actually double click on the output to goto the line containing the found element! Very nice!

My wish – an XPath generator!

To make things work perfectect in VS2010 it would be so nice to have a XPath generator! As you have when you debug XSLT in the watch area. I would love to be able to select an element or an attribute and right click to get the option: “Generate XPath” – wow, please someone create such a plugin and I will buy you a beer! Smiley

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 Microsoft Visual Studio 2010 (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 intellisense, snippets 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 – javascript

In this part I focus on javascript in VS 2010.

Javascript intellicence

jQuery 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!

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!

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.

”

Snippets – finally!!

I have written about snippets in Visual Studio 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.

Snippet types “Surround with” and “Insert snippet”
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!

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.

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.

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!