jQuery Select List plugin

by Andreas Nylin 26. February 2010 16:40

This is a jQuery plugin that replaces HTML select lists with a styled select list. The plugin will hide the original select list and insert the styled list at the same location. When you select an item in the select list it will update the original list's value and fire its onchage event. This makes it easy to use it with forms as the original selectlist's value will be sent when the form is posted.

The plugin is developed for jQuery 1.3.2

Basic usage:

$(document).ready(function() {
  $("select").selectList(); 
});

 

How to use with options:

$(document).ready(function() {

   var options = {
      className: "SelectList",
      expandedClassName: "SelectListExpanded",
      disabledClassName: "SelectListDisabled",
      selectedItemClassName: "sel",
      onchange : changeHandler
   };
   $("select").selectList(options); 
});

 

How to handle the onchange event:

function changeHandler(e, args) {
   alert("clicked listElement: " + args.listElement + ", index: " + args.index);
}

The e parameter is the event object

The args parameter is an object with two properties: listElement which is the clicked li element and index which is the index of the clicked list element.

 

View a simple demo
Download the plugin

Tags: , ,

Development

Beta release - Calculate your publishing power

by Fredrik Karlsson 27. January 2010 10:49

This is a part in a release by Dropit's section for measurement and Continuous Improvement, Mark Red, and their latest project to calculate yor publishing power.

Publishing Power?

Do you have a creeping feeling that you spent a lot of time to update the site without giving anything back? What gives updates to the Web back in the form of visitors and revenue?
Calculate the "publishing power" of each section of the site by "Pageviews of Section / Work in the Section". Publishing power indicates how much the requests you receive in relation to the time the editors devote to managing content. A high publication power indicates that the section get many visits with little effort.

Of course it is even more interesting to see how much revenue the workload is resulting in. If you use Google Analytics, you can calculate the publishing poser by "$-index for Section / Work for the Section".
If you have a site that is configured to measure income from e-commerce you'll find $-index for the site's sections in the report "Content Drilldown".
Read the entire post at Mark Reds blog

 EPiServer CMS integration

This is a very early release, so all there is right now is a property and a report. The property calculates the time you spend editing a single page and the report displays the accumelated time for a section of the web site.

TimerProperty


The porperty is simply a hidden text field and a javascript function adds time.

Publishing power Report 

The report simply displays the amount of time spent editing a section (current page and all children) of the web site.

Future development

The first thing to add is the integration with Google Analytics. We need to display the page views so we can display the Publishing Power values. And as soon as EPiServer CMS 6 is released, we can use the Page objects to store the information. Lots and lots of a more elegant design!

After that, We're not quite sure. Any suggestions?

Source Code

This is a beta, the entire project is avalible here:
PublishingPower.rar (2.80 mb)

Tags: , , ,

Development

Developer lunch - "From good to great developer - why does it matters and how can we achieve it"

by Fredrik Karlsson 24. January 2010 22:44

For this weeks developer lunch I thought I would pick a seminar I saw at TechDays 2009 here in Sweden.

It was "From good to great developer - why does it matters and how can we achieve it" by Chris Hedgate. Unfortunately, the recording only displayed the screen and not him and since the presentation relied on the audience being able to see him, I had to find another recoring. Luckily, I found pretty much the same presentation from JFokus, and this time they included Chris as well, success. See the movie here.

Tags: , ,

Development

Developer Lunch: An Introduction to Microsoft F#

by magnus.wachenfeldt 14. January 2010 12:59

So, it was my turn to pick a video for our weekly developer lunch. I am not generally a fan of technical videos, but sometimes you find great ones.

This one however was really worth my time. An Introduction to Microsoft F# by Luca Bolognese, Microsoft's answer to Cristian Libardo. Competently and with a great sense of humor, he guides you through the basics of F# and proceeds to create a real world application for those still doubting the power and usefulness of F#.

A common misconception is that functional programming languages are strange, hard to learn and overly mathematical. This is very far from the truth. As Luca points out in the video, F# is much closer to how you actually think about a problem. I will not repeat what he is saying in the video - just make one hour free and watch it!

An Introduction to Microsoft F#
Microsoft F# Developer Center
Luca Bolognese's WebLog

Tags: , ,

Development | Languages

Checklist for deploying EPiServer sites

by Andreas Nylin 10. January 2010 20:20

There are many tasks that needs to be performed when a new EPiServer web site is deployed and it's easy to forget something. This is a checklist with some of the most common tasks that needs to be done on most new EPiServer web sites. You can download the list as PDF here.

Updated 2010-01-15. Added info on Google Page Speed, IIS Compression, Scheduled jobs and IIS SEO Toolkit.

Updated 2010-01-28. Apparently auto shrinking causes file system fragmentation which slows down performance so it should never be turned on.

Licenses

  • Order license for EPiServer
  • Order licenses for EPiServer modules

Access rights

  • Check access rights in the EPiServer page tree
  • Remove test users and groups in EPiServer
  • Create users and groups in EPiServer (WebAdmins and WebEditors)
  • Check access rights in web.config

Web.config

  • Set compilation debug to false
  • Set attributes for outputcache
    • httpCacheExpiration = 01:00:00 (one hour)
    • httpCacheVaryByParams = * or parameters (id,epslanguage)
    • httpCacheVaryByCustom = remove if not needed
  • Set attributes for mailsettings
    • host = the mail server that should be used to send mails
    • from = set to an address or remove
    • port, userName, passWord (for mail server if needed)
  • Search for ":\" and check that all paths are correct
  • Set stringDelayedLoadThreshold = 50
  • Check access rights. Search for authorization and verify allow roles and deny users

Episerver.config

  • siteUrl = http://www.acme.com
  • uiUrl = http://www.acme.com/UI/
  • utilUrl = http://www.acme.com/Util/
  • SiteDisplayName = Site name used in title, etc
  • Verify paths for virtualPath/providers
  • Set predefined image formats for the image editor: imageEditor/sizePresets
  • Set uiEditorCssPaths (~/EditorStyles.css)

connectionStrings.config

  • Verify that the correct database and user is specified

ApplicationInitializing.txt

  • Create an ApplicationInitializing.txt file in the web root. Example content of the file: "The application is loading. Please wait."

Database

  • Set Recovery mode = Simple
  • Set Auto shrink = false (Auto shrink causes file-system level fragmentation, which slows down performance)
  • Remove testusers

Robots.txt

  • Create a robots.txt file in the web root. Specify any paths you want to exclude from search engines.

Google Analytics

  • Verify that Google Analytics scripts are inclunded in the page and that the correct key is specified.

Validate pages

  • Verify that the pages HTML code validates with http://validator.w3.org
  • Validate the site with IIS SEO Toolkit http://weblogs.asp.net/scottgu/archive/2009/06/03/iis-search-engine-optimization-toolkit.aspx

Browser Compability

Verify that the page looks ok in these browsers:

  • Internet explorer 8
  • Internet explorer 7
  • Internet explorer 6
  • Firefox
  • Google chrome
  • Safari
  • Opera

Optimization

  • Analyze the page with Yslow and Google Page Speed
  • Make sure that any ScriptManagers has ScriptMode set to Release

Favicon

  • Verify that a favicon is displayed

Title

  • Verify that the page title is displayed correct

Images

  • Verify that images can be uploaded
  • Verify that images are displayed
  • Verify that automatically resized images are displayed (thumbnails, etc)

Mail

  • Verify that mails sent from forms are sent and received

Search

  • Perform testsearches and verify that relevant results are shown   

Error pages

  • Add custom error pages in IIS
  • Verify that error pages are displayed for 404, 500, etc

IIS

  • Create a separate Application Pool for the site
  • Disable IIS logging
  • Enable Gzip compression in IIS for static and dynamic content

EPiServer Admin

  • Verify that scheduled jobs are active

Tags:

Development

Add a group to all EPiServer Composer function types

by Fredrik Karlsson 17. December 2009 10:23
This little web form allow you to add a group to all EPiServer Composer function types. Very handy if you need to add a new group to all functions.

Use the app

Simply choose the group you want to add and click the button.

Code

Simply download the file and remove the .txt extension.

AddGroupToComposerFfunctiontypes.aspx.txt (4.42 kb)

Tags: , ,

Development

How to get xForms on CMS 5 RC1 working with IE8

by roberto.vega 15. December 2009 10:51

To get xForms to work with IE8 compatible mode u need to change a function in xformedit.js.
U can find the file at /edit/ui/javascript/. Look then for this function:

function formPopulateForSubmit( oForm )
{
   fieldPropertiesHideAll();
   formContent.value = xFormControl.innerHTML;
   return true;
}

 

Replace it with this function instead:

function formPopulateForSubmit( oForm )
{
    fieldPropertiesHideAll();
    
    var cnt = xFormControl.innerHTML;
    var regExpInput = new RegExp(']+>');
    var inputTemp = regExpInput.exec(cnt);
    
    while (inputTemp != null) {
        var regExpType = new RegExp('type=text|type=radio|type=checkbox|type=submit');
        var typeTemp = regExpType.exec(inputTemp[0]);
        var type = (typeTemp != null && typeTemp.length > 0) ? typeTemp[0] : '';
        var str = inputTemp[0].replace(type, '');
      
        if (type == 'type=text') {
            type = '';
            var regExpGuid = new RegExp(' {[a-zA-Z0-9]{8}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{12}}');
            var guidTemp = regExpGuid.exec(str);
            if (guidTemp != null && guidTemp.length > 0)
                str = str.replace(guidTemp[0], '');
        } 
        else if (typeTemp == 'type=submit') {
            var regExpOnCLick = new RegExp('onclick=[^\f\n\r\t\v]+');
            var onCLickTemp = regExpOnCLick.exec(str);
            
            if (onCLickTemp != null && onCLickTemp.length > 0) {
                str = str.replace(onCLickTemp[0], '');
                type = onCLickTemp[0] + type;
            }
        }      
        
        str = str.replace('<INPUT', '<$MGL$ ' + type);
        cnt = cnt.replace(inputTemp[0], str);
        var inputTemp = regExpInput.exec(cnt);
    }
    
    while (cnt.indexOf('<$MGL$') != -1){
        cnt = cnt.replace('<$MGL$', '<INPUT');
    }
    
    formContent.value = cnt;
    return true;
}


 

Don't forget to empty IE8 cache and temporarily Internet files.

Tags: , , , ,

Development

Parallell computing in .net 4

by Christer 29. November 2009 18:12

There are some new neat feature for doing parallel computing and taking advantage of multiple cores in .net 4, and i thought id check some of them out.

First i need a testsetup, and i thought id just use something that use up a lot of cpu and cooked together a simple console app that counts the number of primes in a specified range.

static void Main(string[] args)
{
    Console.WriteLine("Starting..");
    DateTime d = DateTime.Now;

    var c = Enumerable.Range(1, 100000)
        .Where(i => IsPrime(i))
        .Count();

    TimeSpan elapsed = DateTime.Now - d;

    Console.WriteLine(string.Format("Done!. Found {0} primes in {1} ms\n\nPress enter to exit",c, elapsed.TotalMilliseconds));

    Console.ReadLine();
}

and the IsPrime function:

static bool IsPrime(int val)
{
    for (int i = 2; i <= val / 2; i++)
        if (val % i == 0)
            return false;

    return true;
}

The primecheck isnt built for speed, its built for hogging up cpu and giving me a result that i can verify that its correct (Though some might complain that it will treat 1 as a prime, but hey! Im not a mathematician, 1 is a perfectly good prime in my world =)

The initial testrun gives:

Starting..
Done!. Found 9593 primes in 1201,0687 ms 

Press enter to exit

After a bunch of more runs it seems to keep around 1150ms to 1250ms, so about 1200 ms seems about right.

good, we have our baseline, but thats not very interesting so how do we get this to run in parallell? Well, it isnt very hard. All thats needed is to add .AsParallel() to the initial loop like this:

var c = Enumerable.Range(1, 100000)
    .AsParallel()
    .Where(i => IsPrime(i))
    .Count();

Ok, that was easy enough. but does it do anything? First run gave:

Starting..
Done!. Found 9593 primes in 697,0399 ms

Press enter to exit

And after a few more tests it seems to land on about 700ms \o/ so a 42% performance increase on my dual core cpu. cool! I thought id try a final check aswell, and cranked it up to calculate from the range of 1 million numbers instead of a hundred thousand so i get some time to check the cpu usage, and it looks like this when running without AsParallell:

SingleThread

And with AsParallell:

MultiThread

 

So indeed its using upp both cores now after i helped it a bit \o/. Also you can control it a bit more by specifying .WithDegreeOfParallelism(xxx) where xxx is “the maximum number of concurrently executing tasks that will be used to process the query” (from the intellisense =). That can be handy when for ex downloading stuff from the internet. More than one thread could be handy, but spinning up hundreds of threads probably wont increase the speed alot and will most likely hog up all your bandwidth.

Luca Bolognese talks about this in his awesome session Future Directions for C# and Visual Basicaswell, so check that out for a bit more info. He also shows a a new way of handeling async operations that might be added in the future (after .net 4).

Tags: , , ,

Development

Developer Lunch: Creating SOLID Code

by Christer 28. November 2009 23:36

My turn to select video for our developer lunch. And ofc i had to pick something about the SOLID principles as im a huge fan of atleast knowing how to keep your code nice and clean (I do a less than good job at practicing it though =) Do as i say, dont do as i do).

If you already are familiar with SOLID these clips wont give you much info and can probably stop reading now. But if you are new to it they give a nice overview of the basics, and what it means in code.

For people new to SOLID each letter stands for a principle. S is the Single responsibility principle, O is the Open/Closed principle, L is the Liskov substitution principle, I is the Interface segregation principle and D is the Dependency inversion principle. Each of the 5 movies will give you info on one of these principles.

Creating SOLID Code: Single Responsibility Principle (SRP)

Creating SOLID Code: Open/Closed Principle (OCP)

Creating SOLID Code: Liskov Substitution Principle

Creating SOLID Code: Interface Segregation Principle

Creating SOLID Code: Dependency Inversion Principle

Extra: This movie wasnt planned to be showed during the lunch, but its kinda nice aswell so i added it. They use the project created in the 5 first movies and show how easy adding dependency injection becomes if you are using these principles.

Creating SOLID Code: Refactoring the SOLID episode on DI to use StructureMap

Tags: , ,

Development

Mvc ninjatips

by Christer 28. November 2009 22:41

I was lucky enough to get to check out Scott Hanselman's Pdc session "ASP.NET MVC 2: Ninjas Still on Fire Black Belt Tips" and got really impressed with a few of the features he mentioned.

First thing that hit me was DataAnnotations. I had seen it earlier but i wasnt that impressed as it looked like an easy way to do general validation on serverside, but i couldnt see any good use in the real world. But i changed my mind asap after this session =). If you havent seen DataAnnotations at work before i suggest you check out Johan Driessens excellent post about it at: Testing DataAnnotation-based validation in ASP.NET MVC

So, the "flaws" i noticed the first time i read about DataAnnotations where that it works nicely for code i write myself. But how about generated code? i dont want to modify generated code as my modifications will be removed when i regenerate it. Or if i dont have the code? it cant be used at all then. And lastly, if i dont want to mess up my nice clean code with a bunch of attributes used for validation..
The solution: Buddy classes. By using the attribute MetaDataTypeyou can specify another class that have all the metadata for your object. Since its in another class now it doesnt pollute your code anymore, and it maps them by name, so you can map them to stuff you know will exist in the future.
Also the annotations are extendable so you can write your own validators and they can be generated to clientscript if you want to use that (or write your own).

Another cool feature mentioned in that session was the DisplayForModel/EditorForModel-helpers that use templates to render your stuff.
An empty call to Html.DisplayForModel()/Html.EditorForModel() will use the modelname to look for a template. So it will try and load an ascx-file named <modelname>.ascx and use it to render \o/. You can also specify a name to load a named template.
And for properties there is an attribute you can use (UIHint) to specify a template for them aswell.

The coolest stuff of all is that since it tries to load a template for types you can use it on all existing types aswell! So by creating for ex a DateTime.ascx template you can specify how all rendering of a DateTime will be done.

As a sidenote it also supports fallback. (not mentioned in that session) so if you have an Employee that inherits Person, it will use Person.ascx if it cant find the Employee.ascx template. Or if you have a string it will fallback to object.ascx if it cant find your string.ascx! \o/

So all in all a nice bunch of simple tips that help keep your code clean and help you avoid repeating yourself, and im a big fan of both =).

Other stuff he mentioned was Customizing WebFormViewEngine to select templates depending on custom parameters. Using MvcTurbine to hook up IoC containers. That you can use <%: Model.Prop %> instead of <%= Html.Encode(Model.Prop) %> for automatic HtmlEncoding \o/. And some cool info on customizing the templates used to generate the default code (T4 templates).

If any of the above sounds interesting i suggest you take a look et the complete session available here http://microsoftpdc.com/Sessions/FT59Its about an hour and worth every minute spent watching it.

Tags: , , ,

Development

Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 2.5 Sweden License.


Welcome to the Dropit blog!

Here we, the people that work at Dropit, will write about stuff that interests us. For example web development, especially with .NET and EPiServer - but we'll also talk about other techniques that interest us, marketing on the web, social phenomenons, pop culture, games and software development in general.