A cassette gem!

Posted on by

Man, I cannot believe I did not know about this before. Cassette has some pretty decent documentation, and I have combed over it, but either this was never listed before or I just missed it. I am using v1.2, and I recently noticed there is a v2. In the upgrade notes, there is a mention that the diagnostics page moved. I had no idea there was a diagnostics page!

For example http://localhost:2452/_cassette#stylesheets (debugging locally, obviously) produces this nice little dashboard:

Cassette diagnostics dashboard

Cassette diagnostics dashboard

I wish I would have found this a few months ago…

Silly little CSS banner demo

Posted on by

A co-worker that has some light HTML/CSS experience asked about using some banners where she could rotate text. I cam up with this:

HTML

<div class="banner">
	<a id="banner-link" href="#">I am a cool banner!</a>
</div>
<br />
<div class="banner">
	<a id="banner-link-2" href="#"><span>I am also cool!</span></a>
</div>

CSS

.banner {
	background: url("/wp-content/uploads/2012/10/banner.png") 
	    left top no-repeat;
	width: 300px;
	height: 75px;
	overflow: hidden;
}
#banner-link {
	font-size: 2em;
	display: block;
	padding: 5px 0 0 150px;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
}
#banner-link-2 {
	font-size: 2em;
	display: block;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
	position: relative;
}
#banner-link-2 span {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 135px;
}

Put it all together…

Uses padding

Uses positioning

New photo galleries

Posted on by

I finally got everything squared away with my web host so that I could update WordPress and my plugins. We have been snapping photos like crazy on our weekend excursions, so I thought, “why not add a gallery?” So I installed the NextGen gallery plugin.

Use the photo tab above to navigate to the different photo galleries.

More remote jQuery validation

Posted on by

In my previous post, I lament the troubles I had with remote validation. I got it working, but I am a stickler and a perfectionist, so I had to have more. I wanted unobtrusive validation and I wanted my error messages to show up properly. I also did not want to use the Remote annotation because I needed to use localization, which I have not been able to get working (it needs static strings).

I did some more banging my head on the keyboard, then I realized I could just emulate what was going on with the Remote annotation. So, I made a new FluentValidation rule and went about it. I realized soon I was missing someattributes, but when I tries to add attributes with dashes MVC balked. “WTF?” I thought. Thanks to the power of the googles, I am now no longer left wondering. I found this great post that gave me just what I needed. The gist is that when you define a rule, if you add additional validation parameters, they will be preceded by the original rule name. For example, I made a rule for data-remote, and I needed data-remote-url. If I added a ValidationParamter for “url”, it would append that to “data-remote-” and all would work as planned. HOORAY!

Remote jQuery validation

Posted on by

I just spent too much time banging me head against the wall trying yo get remote validation working. Each of the examples I found just did not seem to work, until I found this post from jquery4u.com. It used an interesting syntax that I had not seen anywhere. Until I found that post, all the examples used remote as an attribute under “rules”, but I could not seem to get it to work. The jquery4u syntax worked.

When I see multiple examples that I cannot get to work, I can never seem to let it go, so I started trying to get that syntax to work. I finally realized that, even though I had seen examples where data was passed, the way to get it to work was just to specify the URL and let jQuery validation do the rest. It creates a query param using the name you specify in the validator (so essentially your input name) as well as the value of the input. I finally got that working. This post from develoq.net helped set me straight.

My final struggle was to get unobtrusive validation working as well as an error message in my validation summary. I found how you can decorate an attribute on your model, but we use localization, and that just doesn;t work. We use FluentValidation, and that allows us to use our localization strings, so I wanted to see if FV could handle remote. It turns out it isn’t out of the box, but I found this post where a user created his own RemoteValidator.

It too me a while, but I knew it would and should all work!

MultiSelect with checkboxes

Posted on by

More work on my nopCommerce plugin. This time, I wanted to offer more than the standard multi-select listbox. I thought it would be nice if the list had checkboxes. There are an infinite number of smarter people out there than myself, so I Googled knowing someone had some javascript goodness. I found the jQuery UI MultiSelect Widget. This is an awesome little plugin that is themable using jQuery UI. I know that nopCommerce doesn’t use jQuery UI in the admin (it is a Telerik MVC “shop”), but I still appreciate the ability since I really love the jQuery UI stuff.

MVC Templates

Posted on by

I am creating a plugin for our nopCommerce site, and I wanted to use a rich text editor for my admin page. I started looking at how to use the Telerik MVC editor, but then I realized I should be looking at an editor template. I found a great post by Brad Wilson about MVC templates.

This got me thinking. We opted to switch the rich editor from Telerik to CKEditor (for file upload ability) and when we did that I made the change by creating a new shared editor template. Since this plugin is ultimately used within the admin section, I thought I may be able to make use of the existing editor template. Sure enough, I could. Adding a simple template name parameter to the Html.EditorFor did the trick.

ASPState

Posted on by

I just had to configure a fresh server install, and I had a little basic setup. It has been a while since I did anything like this, and I don’t remember how to setup the session state DB.

To install the ASPState session state DB use the following command:

aspnet_regsql.exe -ssadd -sstype p -S {Server} -U {Username} -P {Password}

JS MVC/MVVM Frameworks

Posted on by

My recent dive into MVC has me wanting to do some client-side razzle-dazzle. I have a Tekpub subscription and Rob’s MVC3 vid shows off backbone.js. It looks interesting, but it looks a tab bit complicated and cumbersome. I have to say that the URL router stuff is awesome sauce.

I decided I’d start looking around. Last year on one of the Hanselminutes podcasts he spoke with Steve Sanderson about knockout.js. At the time I wasn’t doing anything with MVC, so I did not think it would be of much value, but I filed it away. (NOTE: I realize now I could use knockout, backbone, whatever with Webforms, but did not realize it at the time.) I must say knockout looks pretty sweet. I watched Steve’s presentation at MIX11 and I really love the two-way binding out of the box (that was the one thing I did not care for much about backbone, though I realize there is a plugin for it).

While both knockout and backbone look really cool, I cannot decide which one to go with? Unfortunately there is not a jQuery-like choice here – there is not a real dominant player that everyone has decided on. So, I decided I’d check out some opinions. There is a great question on StackOverflow (naturally) and it has lots of good info. There are some other options to consider as well:

There is a LOT more out there then I thought. I guess I am going to have to take a little time and weigh the pros/cons of each before I go jumping in to using one – not my strong suit!