www.netsi.dk

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

jQuery quick start snippets

When you want to include in your webpage there is no need to type it in every time, the best practice should be reused. So here is a litle help for you: Two quick start : One for and one for Visual Studio. You can find download links at the bottom, but first a few words and the code.

 

You should put your javascript APIs at the bottom just above the body end tag

If you put the code to include javascript APIs at the bottom of your webpage just above </body> your page will first load the DOM elements, aka the content of your page before any (timeconsuming) javascripts. This will make your page appear to load faster. Also the DOM tree will be ready and you can skip for instance wrapping your jQuery code in some “ready()” code. The DOM is ready for manipulating when your code is reached!

 

This is the basic javascript for loading jQuery from Google CDN. Using such Content Delivering Networks as Google has many advantages, amoung other that the API can be cached on the client across webpages. However if the CDN fails, you may want to have a fallback version locally (on the server). The snippets have this fallback, so you should download a version  of jQuery and put it locally. I have choosen not to use the “protocol relative-URL”. If you want to, you should just remove the “http:” before the line where jQuery is fetched from Google.

 

Here is the code outputted by the two snippets:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script src="jquery.1.7.1.min.js">\x3C/script>');
</script>
<script type="text/javascript">
    (function($, window, undefined) {
      // Your code here, put just above </body>
      // $ = jQuery
    })(jQuery, window)
</script>

 

I learned from the tutorial at net tuts+ Learn jQuery in 30 days about this way to include jQuery – I can higly reccomend that tutorial (its free!). The teacher Jeffrey Way is so cool!

Download

Sublime Text “jQuery”: Download

Visual studio snippet: Download

Share

Speeding up you CSS in Visual Studio using Web Essentials plug-in

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the part of Microsoft Visual Studio. He is adding new life the the rather dead part of Visual Studio. He is doing so through his free for Visual Studio: Web Essentials.

The features

In general Web Essentials makes working with CSS in Visual Studio more nice, adding features like colour and font preview, change of values using Ctrl+Arrows (up=add, down=subtract as you know it from for instance Firebug and Google Chrome), option to base64 encode images and speed typing. I can only recommend this plug-in, and also the fact that Mads listens to you request given to him for instance through twitter makes me a happy user! Well done Mads, and keep up the good job! Smiley

Amoung other features: Embed image as base64 encoded image

Links
Share

Add CSS 3 intellisense to Visual Studio 2010

As 3 is spreading out the editors should also start supporting it with things like validation and intellisence. In it the same thing as it is schema based in its approach. What this means – in short – is that you define rules in a XML based schema, a XSD. XSDs are very flexible but not very userfreindly to compose (unless you use a smart tool like for instance ).

Anyway I googled and found a MSI file which containes a XSD file. The MSI will do most of the job installing the schema, but will ufortuanally install it perfectly. In the Q&A on the site however I found a simpel regedit fix, which helps. I have saved the regex for you so you can simply download it and double click it to make the a choice in Visual Studio when editing CSS.

Downloads

In use

When you runned the MSI and added the new keys to the reged database you may want to restart any running Visual Studio 2010 instances. After restart you will have a new choice in the dropdown box “Cascading Style Sheet Version for validation”:

Select CSS 3 validation and intellisence in Visual Studio 2010

The defined parts of CSS 3 is not complete in this CSS 3 Schema. For instance defining colors in hsla color space is considered invalid which is not true for CSS 3.I hope that updates for the Schema made by Mojtaba kaviani will be more complete soon. But great job Mojtaba!

Share

XPath evaluation in Visual Studio 2010: TTXPathNavigatorVSIX

My daily tool for creating webpages is (VS2010), but one thing which I think it lacks in are XML/XSLT related tools. One such thing is related, 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:

This is how the tool appears in the online gallery found under Extention Manager in your Visual studio 2010

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.

This is a screenshoot taken by the tool creator

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)

    You find the debug window under Debug - Windows - Output

  • 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.

    image

  • 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

Share