Brendan Tompkins

Umbraco Tips & Tricks : Creating a What's New Control

Last week, I posted about MuchaCostaRica.Com and the tools I used to build the site. Our CMS is Umbraco, and really making Umbraco hum requires some good XSLT chops. Unfortounately, I'm still learning XSLT so while building the site, I found small snippets of XSLT code that did what I needed to do extremely helpful.

I'm going to start a series of Umbraco Tips and Tricks, but I'm going to do it over on my MuchaCostaRica.Com blog. Yesterday I posted about how to create a "What's New" control. Pretty basic stuff, but in case you need to do the same with your Umbraco installation, check out my post over there.

Building MuchaCostaRica.Com - Creating a What's New Control

Posted Oct 01 2008, 05:48 AM by Brendan Tompkins with no comments

Filed under: Umbraco, XSLT

Umbraco or : How I Learned to Stop Worrying and Love Building Web Sites

I'd like to share a bit about the tools I recently used to build a new travel website, MuchaCostaRica.Com I launched this week with two partners. Actually, this entire post is a thinly veiled attempt at getting some Google juice over there, but if you're interested in building websites and better tooling, read on.

The obvious analogy when mentioning tooling is to building construction, and it's spot on. I'm in the middle of some home renovations, and one tool I've purchased is a Paslode nailer, and it can never be overstated.. Having the right tools for the right job will turn a tedious job into a joy. Hammering nails is about the worst jobs I can imagine, especially if you have to do a lot of them. You dent the wood, hit your finger, bend the nails over. After a lot of swearing you get the job done, but it's hardly a joy to complete. Enter the Paslode nailer. I completed a staircase recently, and the job was a joy to finish. In fact, it's so fun to use, I often wander my house looking for things to nail.

Choosing The CMS

When I sat down to look at my options for building this new travel site, the first thing I did was look at Open Source CMS tools. I've had a lot of experience with DotNetNuke, Joomla, and other CMSs, and the prospect of deploying using these tools was not something I was looking forward to.

Joomla (sorry to any fans out there) is just not at all a tool I like working with, and I'll leave it at that. Besides, I'm not a huge PHP person, and should I need to get into the guts of the app, I'd be struggling.

DotNetNuke, while always holding a dear place in my heart, was not for this site. I've recommended it in the past, deployed many sites using it, and probably will use it again in the future, but I wasn't comfortable jumping into development of this site with it. I needed a CMS without limitations, and DNN is limited in some areas.

Enter Umbraco

James Avery first turned me onto this CMS, and at first blush, I was a bit skeptical.. Umbraco is an ASP.NET / SQL Server based CMS, which uses XSLT for it's rendering of content. I wasn't sure I liked having to learn some XSLT but after using Umbraco for the past few months, I'm completely sold on using XSLT for site skinning.

Umbraco is UBER extensible. Every piece of content you create is based on a document type that you setup. Need a new field for adding a video to a page? Simply add it to your document type. Need to render a page slightly differently? Add a new document template. Need to do something even more complicated, such as adding some sort of conditional layout? Add some XSLT and you're done. The separation of content from rendering within the CMS is a thing of beauty.

Umbraco is an absolute JOY to work with. XSLT is is not all that easy to learn and debug, but once you see what you can do with it, you quickly realize it is the absolute perfect tool for shaping HTML. This flexibility allows you to implement your design exactly as your designer envisioned, and quickly add new features and respond to business requests. During this entire site building process, I was asked for a hundred odd UI implementations from my partners, Rayna and Marina, and each and every time, my response was "sure I can add that" and a half hour later I was done. In the past, using other CMSs, I would have been writing ASCX user controls, or hunting for a component somewhere, just to add something simple. With Umbraco, it's a breeze.

So, now, like my experience with the Paslode, I'm completely charged about building web sites now. I used to groan when facing a new web project, bug when you have the right tool, it's a joy.

Other Tools

jQuery

Umbraco only really provides the content, most of the skinning is left to you. This. in fact. is what you want from your CMS. You dont' want your CMS providing UI elements, you want the UI separated from the content engine so you're free to mold your content as you see fit. So, when it came to the UI, I made heavy use of JQuery. Many of you are familiar with jQuery already, but if not, head over to jquery.com and don't ever hand code a web UI element again. For photos and sideshows, I've used the jQuery Lightbox Plugin (balupton edition) and for content carousels, i've used jCarousel. When it comes to needing some more complicated AJAX or other browers scripting components, I'll have my choice of adding any of the myriad jQuery plugins available. If you do web work and you haven't checked out jQuery, you owe it to yourself to take a day and explore what jQuery has to offer.

Viddler

Viddler was the perfect video hosting platform for us. Not only do they host your video, you can brand your content, and there's tagging and commenting and a customizable player. What's not to like?

Disqus

Comments are always a pain to implement properly. Disqus fixes all that and sets up in minutes:

Disqus, pronounced "discuss", is a service and tool for web comments and discussions. The Disqus comment system can be plugged into any website, blog, or application. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

Google

We used Google Translate, Google Docs, Google Analytics and Google Webmaster Tools. Ah thank you mother Google. I think it's worth mentioning that these tools are free, and do what they're supposed to do really well.

So, overall, developing MuchaCostaRica.Com was a joy (so is going to Costa Rica, BTW, and if you want a deal on travel, visit us and use the promo code "DEVLICIOUS").

As they say in Costa Rica, Pura Vida!

Posted Sep 25 2008, 06:11 AM by Brendan Tompkins with 13 comment(s)

Filed under: Umbraco, Tools

The Ten Types of Twitter Users

I've been really into Twitter lately. It's one of those things that at first glance is hard to understand excatly why it's so engaging, but once you get to use it, it becomes your lifeline. It's an immediate, real-time information flow, and if you setup your account to follow the right folks, you can really have your finger on the pulse of whatever it is you're interested in. The funny thing is, once you get enough folks in your following list, you start to see a pattern developing of the types of twitter users. I've recently noticed that there are at least ten types of twitter users... Which one are you?

The Detailer

The Detailer's tweets fare more detail than they should about the mundane aspects of life. They should, however, be awarded points for effort. "Brushing Teeth" and "Making Coffee" are common tweets. This person has constantly fight the urge to tweet stuff like "Flushing for the second time" and "Fore playing."

The Image Builder

If you met the Image Builder in real life, you'd meet a completely different person than their Twitter alter ego.

The Complainer

Overly negative tweets make up the majority of the Complainer's posts. In fact, a recent study concluded that over 50% of the Complainer's tweets are about Twitter.Com's APIs sucking.

The Lurker

An obvious persona, the Lurker is too nervous to actually post any of the mundane details of their life, should they not be as exciting as the Detailer's "Making Coffee" posts.

The Pioneer

The Pioneer experiments with twitter, pushing it's limits and forging new ways to use the media. @sellware's up-all-night-twitter-for-charity event of last year puts him squarely in this category, even if the event itself may have fallen on deaf ears.

The Commenter

The Commenter will not post unless they have at least one @user in their tweet. Often there will be multiple @users' making the conversation entirely impossible to follow.

The Popular

The Popular collects followers like they are some kind of strange social currency to be hoarded. Chances are this person never really reads any of their follower's tweets.

The Snob

The Snob will only follow a select few worthy twitterers, although hundreds follow them. A dangerous persona threatening the very foundation of the media.

The Spammer

The spammer is characterized by posting multiple rapid-fire tweets. You know a spammer when your twitter client's ui is flooded with this person's face.

The Braggart

Only posts when they've happened to do something extra ordinary. "Eating Escolar with Truffeled Risotto and Baby farm Greens at Ellie's" is a common post for the Braggart. Often the braggart is dual persona, being an Image Builder as well.

I hate to say it, but I'm such a Braggart. See for yourself @btompkins

So which one are you?

Posted Mar 06 2008, 06:10 AM by Brendan Tompkins with 5 comment(s)

Filed under: Featured, twitter

Getting FireBug to work with FireFox 3 Beta 1

Just grabbed my copy of FireFox 3 Beta 1 today.. After installation, most of the extensions that I've come to rely on aren't working, which is understandable. One extension, FireBug, is a tool that I simply cannot work without. It's the best tool I've ever found for debugging HTML, CSS, HTTP and JavaScript, bar none. If you're a web developer working without it, you may find that you're spending way more time than you have to debugging browser issues.

The problem is, when I tried to install it under FF3, I got the message that it would not run... Here are the steps I took to fix this.

Saved the firebug-1.05-fx+fl.xpi file to disk
Re-named it to firebug-1.05-fx+fl.zip
Opened the zip file, and extracted the file "install.rdf"
Opened "install.rdf" with Notepad
Changed <em:maxVersion>2.0.0.*</em:maxVersion> to <em:maxVersion>3.0.0.*</em:maxVersion>
Saved the file, and replaced the version in the zip file with the new version
Renamed the .zip file back to firebug-1.05-fx+fl.xpi
Drag-drop firebug-1.05-fx+fl.xpi into an instance of FF3.

Voila! I have FireBug with FF3! You can also try this with other extensions, but your mileage may vary.

-Brendan

Posted Nov 20 2007, 11:21 AM by Brendan Tompkins with 24 comment(s)

Filed under: FireFox, Web Development

LOLCat Compiler for the CLR...

How come I didn't know about this until today? I can't believe we got scooped by BoingBoing!

LOLCode is an emerging esoteric (and hilarious) language based on the dialect used in LOLCats images. It's been siezed upon by a group of people (myself included, now), and is being expanded into a real, workable, turing complete esoteric language (though nobody has proven its turing completeness yet!).

Fantastic

Posted Oct 26 2007, 10:57 AM by Brendan Tompkins with 1 comment(s)

Filed under: Complier, CLR

Using Embedded Resources for HTML Email Templates

Most web applications need to send out email for a variety of purposes, right? I like to use email as a sort of extended user interface - allowing entry points to let the user conveniently do work by getting an email and clicking on a link. I've struggled for a while with a good way of managing email templates to use in my applications. I recently found a good project that simplifies the process of templating - See Alexander Kleshchevnikov's excellent solution for managing and sending emails inside a web application.

I like his template approach, but I don't like to keep my template files in a directory with my web project, mainly because it tightly couples these files and a certain directory structure to the classes that actually do the email work. This makes my classes harder to test, re-use and deploy. I recently figured out how to embed these templates into my class' assembly files, making the class much more useful.

To embed a resource, just drop it in your project, and select "Embedded Resource"

Using Alexander's solution for templating, and an embedded resource html file for a template, the code to use this resource looks like this:

        public static void SendRegisterNotification(User user)
        {
            Hashtable templateVars = new Hashtable();
            templateVars.Add("FirstName", user.FirstName);
            templateVars.Add("LastName", user.LastName);
            templateVars.Add("Login", user.UserId);
            templateVars.Add("Password", user.Password);

            Parser parser = new Parser(templateVars);
            Assembly asm = Assembly.GetExecutingAssembly();
            Stream stream = asm.GetManifestResourceStream(asm.GetName().Name +
                ".Registration.htm");

            using (StreamReader reader = new StreamReader(stream))
            {
                parser.TemplateBlock  = reader.ReadToEnd();
            }

            // Send email
            System.Net.Mail.MailMessage message = 
                  new System.Net.Mail.MailMessage();
            message.To.Add(user.Email);
            message.From = new MailAddress("brendan.tompkins@gmail.com");
            message.Subject = "Your StreetTurns.Com Account Information";
            message.Body = parser.Parse();
            message.IsBodyHtml = true;
            SmtpClient sc = new SmtpClient("StreetTurns.Com");
            sc.Send(message);
        }

Yes, but what about Modifying your Templates?

As Jeremy Miller has pointed out, you shouldn't be afraid to compile and release your code. If you are, you need some serious work on your build process. To me, the benefit of having one class that I can drop anywhere without worrying about permissions, file paths, and all that far outweighs the need to re-build the DLL when I make a text change.

I'm pretty happy about the way this all works. For more on embedded resources, ther's some information here and here about how you can access your resources via a URL in a web app.

Posted Oct 24 2007, 08:23 AM by Brendan Tompkins with 10 comment(s)

Filed under: ASP.NET, Resources, Featured

RE: MSDN Subscriptions - Are They Worth It?

Mike asks a good question MSDN - Is it worth it?

I have two, count em, two subscriptions (work + MVP) .. and other than the occasional download of an OS or SQL server installation for convenience, I almost never use either of them. As a responsible employee (consultant in my case) I really should weigh my decision to continue having my client purchase this for me and the other developers here. It's a good resource, but really only in the software-packrat/i have to have it all cause maybe I'll need it someday sense. In reality, it think it's a bit wasteful.

I've often heard people comment that cost is no concern to them when their employer is footing the bill (Enterprise software vendors can thank their lucky stars for the prevalence of this attitude BTW). But as smart consultant once commented, every dollar I can save a client is a dollar they can afford to pay my invoices, and I believe it. Full time employees should think along those same lines, but even if you don't care about saving your employer money, wasting money is just plain, well wasteful. Like leaving a light on when you don't need it - it's not doing anyone anyone any good and doesn't help build an economy that is sustainable with healthy growth and innovation.

While I'm on the topic waste, the MSDN DVDs are nice to have, but talk about putting a big dent in your carbon footprint. I'd say I end up shredding 99% of the DVDs I get mailed and the other 1% I've lost somewhere...

Does this sound preachy? I hope not, in fact, I personally need to cancel one of my subscriptions and opt out of my DVD media coming in the mail. I need to stop getting VAR business magazine and all those other magazines which I don't read. I need to help cut my technical waste, be it financial or paper and plastic.

On the other hand, I just may need that MOM 2005 with SP1 disk someday, you never know....

Posted Oct 03 2007, 12:01 PM by Brendan Tompkins with 1 comment(s)

KickIt For CommunityServer 2007

You may have noticed that every post here on Devlicio.us and CodeBetter.Com have a little KickIt control at the end. This is generated by a CommunityServer Module which automatically creates this control using DotNetKicks.com's (which is an awesome site BTW) image services, and allows posts to be "Kicked (a good thing)" ...

More interesting to you if you use Community Server is to do this on your own blog, so I'm releasing this and source in the CodeBetter.CommunityServerExtensions package over on CodeBetter.

Posted Sep 26 2007, 01:24 PM by Brendan Tompkins with 10 comment(s)

Filed under: CommunityServer

An Open Source Windows Mobile Language Translation Dictionary with Flashcards!

Recently, I've found myself in need of a way to brush up on my French. Since my new phone is a Samsung Blackjack running Windows Mobile 5, I went looking for a translation dictionary to allow me to translate words from English to French on this device. I also wanted to be able to display flashcards for studying vocabulary.

I didn't find any products out there that would allow me to do exactly this, and more importantly, what I did find was commercial or shareware. I'm very much into the idea of free/open source software, especially when it comes to something like a language tool. If anything should be free, a program to help us better communicate should be... Don't you think?

I thought that the challenge of writing an application for my phone would be fun... so in my spare time I set out to write such an application. I've always loved handheld software development, and being able to write code for this phone is darn cool. The idea that I can write code to carry around and run anytime I want is just about as neat as it gets to me.

Requirements

I had a few requirements for this project. 1) I had to find free dictionaries for the content, otherwise I wouldn't be able to distribute my application for free. Enter the FreeDict project, an open-source collection of translation dictionaries. This project is pretty cool, they've got a fairly large list of dictionaries available for free, especially for translating to and from English

									Hindi

2) Secondly, I needed a good, fast relational data store: enter SQL Server 2005 Compact Edition. Working with this was no different from what I'm used to with SQL Server on the desktop. It's pretty nice!

3) It had to run on my new phone. Enter the .NET Compact Framework 2.0. I've been handed some CF development here at work, so this was a good excuse for me to do some learning as well.

Creating the Application

What started out as a simple project actually blossomed into something fairly involved. I ended up tackling the following topics, which I hope to blog about in the near future:

Creating the Dictionary Importer console application to import from .dict format to SQL
Dealing with foreign characters and translating phonetic spellings which don't display on small devices
Compact Framework application configuration and settings storage
UI design for small devices
Preparing for Compact Framework Localization
Debugging on my Blackjack
Creating and Installation and setup Application

Version 0.1

The application supports multiple dictionaries, with the ability to create and more. The English-French.sdf contains over 16,000 Entries, and English-Spanish.sdf - has over 10,000. There's over 1,000 Flashcards of common words in each Dictionary. Each term is hyperlinked when it appears in a definition.

Here's a screenshot:

I'm going to blog about and release the dictionary loader with more dictionaries as soon as I can get some time.

Downloading and Installation

Today I'm releasing "Translation Dictionary v 0.1" optimized and designed for Windows Mobile, and the source code for the application as well.

Get it here:

Translation Dictoinary v 0.1 Setup

Posted Mar 29 2007, 12:31 PM by Brendan Tompkins with 9 comment(s)

Filed under: SQL 2005 Compact Edition, Compact Framework

Formatting Code with dp.SyntaxHighlighter

I've run across a cool syntax highlighter for use on web sites called dp.SyntaxHighlighter. It highlights (and more) the following languages:

Not only that, but it does a fantastic job of rendering too.. check out this little snippet of C# code.

/// <summary> /// Gets a polygon from a string /// </summary> /// <param name="strPoly">(0,253),(370,115),(417,122),(456,92),(563,101),(303,477),(0,479)</param> /// <returns></returns> public PointF[] GetPolygon(string strPoly) { strPoly = strPoly.TrimStart(new char [] {'('}); strPoly = strPoly.TrimEnd(new char [] {')'}); strPoly = strPoly.Replace("),(", ":"); string [] strPointCoords = strPoly.Split(new char[] {':'}); PointF[] points = (strPointCoords.Length > 0) ? new PointF[strPointCoords.Length] : null; for(int i = 0; i< strPointCoords.Length; i++) { string [] pair = strPointCoords[i].Split(new char [] {','}); points[i] = new PointF(Convert.ToInt16(pair[0]), Convert.ToInt16(pair[1])); } return points; }

You have to install some javascript(s) and styles along with your blog engine, but once that's done, all you have to do to get the output you see here is wrap your code in some <textarea> tags.

-Brendan

Posted Nov 08 2006, 01:15 PM by Brendan Tompkins with 2 comment(s)

Filed under: ASP.NET

Hooray for Google Maps

[Cross posted from my CodeBetter.Com Blog]

Recently, I set about to add a map page to Jobs.CodeBetter.Com, with markers so you can geographically explore the jobs posted over there. As more jobs are posted to the site, this should be a good way to sift through them all and find the one in your neck of the woods. You can try it out here.

I am totally blown away by the Google Maps API, the documentation, the performance, and the overall development experience. This API to me represents everything that is right with current Web UI tier development.

What about Virtual Earth and MapPoint Web Services?
A while back, I posted some code and highly praised Microsoft's Map Point Web Service. Although my initial experience with MapPoint was good, my enthusiasm with the application I developed quickly evaporated. It was slow, clumsy and hard to maintain. Much of the map panning and navigation controls had to be written by hand... back then there were no out of the box controls to simply add to the map. With MapPoint, I had to roll my own, which led to browser inconsistencies, and various and sundry bugs that seem to accompany any big client JavaScript code I write. When we were faced with the decision of licensing the MapPoint web service, we decided against it because of the prohibitive cost.

Many of these problems have been addressed with Virtual Earth. It appears that you can get the same or better end-user experience (here's a nice comparison of VirtualEarth versus GoogleMaps from a users' perspective)... There's a nice Getting Started page here, and and Interactive SDK here.

I'm not entirely convinced that they've honed the developer experience to the point that Google has. For one thing, it took me a half an hour to simply find licensing information, and when I did, it came from a developer's blog (Chandu announced a licensing model to allow sites to freely use the service.), not the Virtual Earth site itself. To make things worse, you may find yourself thoroughly confused if you end up on the other Virtual Earth SDK on the Microsoft site. To me this is typifies the difference between doing things the Microsoft way (mired in marketing goo with complex licensing and confusing documentation) versus the Google way (simple, easy to understand and use).

-Brendan

Posted Nov 01 2006, 01:22 PM by Brendan Tompkins with 1 comment(s)

Building a Better Jobs Site...

I'm thrilled to announce Jobs.CodeBetter.Com; a new job board and job ad syndication service created by Eric Wise and myself over at CodeBetter. "Oh no, not another job site!" you're thinking. Yes, we were influenced by other new jobs posting sites, but we think we can do better for a variety of reasons.

We're focused - We're syndicating to only highly focused blog sites, like here, codebetter.com, hanselman.com, winsmarts.com - this allows companies who post jobs access to the "cream of the crop" of developers. If you're reading these sites, you're no mort. :)

We've setup a revenue model for affiliates that works. We give our affiliates a premium for each job posted via a link from their sites, even if they bookmark us and come back to post a job later. In fact, we'll pay our affiliates for every job posted by that person into the future. It can be a great way for bloggers to monetize content. This is what makes it all work. Eric says it best on his announcement post:

...we acknowledge that we owe the blogosphere in general a lot for the success of Codebetter.com. As such, we want to ensure that all of our friends and contacts in the blogosphere can make money right along with us. Thus we have launched an affiliate program, if you have a technical blog/site, all you have to do is register as an affiliate and then put some javascript on your site. This javascript randomly displays active jobs from our feed ala Google Adwords. You will be create a referral code during to put into the script, and if employers find us and post jobs because of you, you will receive $105 for every ad they post, for life. In this way, not only do we help fund our brothers and sisters in the blogosphere, but we also add value to employers as unlike other job sites where your job exists only in one place, when you post with us your job can be shown on potentially dozens of other sites.

It's good blog fodder too

Eric and I jammed on this project. I'm not one to toot my own horn, but we did this in a very short timeframe... We used some really good IMO tools... SourceGear's Vault allowed us to work remotely together easily. We used many of the new ASP.NET 2.0 and SQL 2005 features... there's a lot of cool stuff in there that we hope to blog about in the future. One post I'm going to do very soon is an explanation on how we created our JavaScript syndication ads. Ever wonder how sites like Google and Blogads create the ads you see on affiliate sites? I'm going to show you how we did it... so stay tuned.

So, thanks for reading this, and please help us out by spreading the word!

Brendan

Posted Oct 10 2006, 06:53 AM by Brendan Tompkins with 5 comment(s)

Filed under: ASP.NET, sql2005

Speed Up VS 2005 Web Development - Kick your App_Code Habit

Scott Guthrie talks about how to speed up build times for Visual Studio 2005.. It's a great read, and definitely something to know inside and out if you're doing ASP.NET development with VS 2005. You've got to hand it to a person in his position doing down and dirty blog posts to help us little guys out, from what I hear and from recent personal experience, he's very accessible.

In his post about build performance, he actually has a good nugget of wisdom about overall performance of the IDE as well. He mentions this:

Keep the number of files in your /app_code directory small. If you end up having a lot of class files within this directory, I'd recommend you instead add a separate class library project to your VS solution and move these classes within that instead since class library projects compile faster than compiling classes using the /app_code directory.

This will speed build time, but will also speed up your design time experience as well. Why you ask?

I recently spent some time on the phone with Bradley Bartz from MS, who explained this very slowly and patiently to me. I hope he'll let me know if this isn't right, but from my understanding, Every time you make a change to a file in the App_Code directory, this invalidates the Visual Studio's internal cache of classes in this folder. The very next time you try to open a designer for an ASPX page or ASCX control, VS has to re-compile this folder to get the metadata it needs for the design-time rendering of the control. This can cause the IDE to slow to a crawl. One the classes are cached, things speed up significantly in the IDE.

This was a big eye opener for me. I'd been using the App_Code folder as an easy way to get a globally accessible class in my web projects. If it was stuff that only was related to the current web site, I felt this was a good choice for where to put the code. The problem was, I was banging up against this slowness all the time. I'd get some class designed, tab over to a page or control to do some databinding and find myself waiting in frustration, my development rhythm shot. Little did I know that I was waiting on a compilation of the entire App_Code folder.

So, I'm going to seriously wean myself off of this folder, in favor of a separate dll project for these situations where I need a class to be visible across controls or pages.

-Brendan

Posted Sep 22 2006, 01:28 PM by Brendan Tompkins with 11 comment(s)

Filed under: ASP.NET, Visual Studio

Speed Up VS 2005 - Posts Coming Soon

I've spent the past few days speaking with some folks at Microsoft about the problems I've been experiencing with VS 2005's performance. They've given me some great pointers and information about what's going on behind the scenes with VS that could be causing some slowness. I'm going to spend the next few days eperimenting with some of their suggestions and will be posting about how your can speed up your development experience.

Stay tuned...