So I started digging around in the logs. I noticed first off that the apache logs were showing that apache was actually crashing and restarting every time I saw this error. This is pretty serious, but doesn’t tell me what’s going on. So I went and checked the PHP logs. Nothing. Lastly I checked the syslog and came up with the following entry: “suhosin[10579]: ALERT – configured POST variable limit exceeded – dropped variable ‘mlid:3691[hidden]‘”. Now that’s interesting, no?

Suhosin is a security package for PHP. Apparently it didn’t like the massive amount of data the Primary Menu for is posting. So after doing a quick Google search I discovered that I can up the limit for post variables in Suhosin. I went to my Suhosin in ini file and uncommented and changed the following lines:

suhosin.post.max_array_depth = 512
suhosin.post.max_vars = 1000
suhosin.request.max_vars = 500

I then restarted the apache2 service and tested. Everything is fine. If you’d had similar experience or can shed some light on exactly what these parameters do, please leave a comment.

Luckily there are tools that have made my job a thousand times easier and so I’m going to share a few. Some of these I’ve written about in the past, but I’m going to roll them together here for my sake, and for yours.

Drupal

I cannot say enough about this program. Drupal is the savior of the modern corporate web developer. If I had to custom code everything that Drupal is doing for our website it would take a team of developers working for several years to put this thing up. With Drupal I’ve been able to put together the framework for our site, fully branded in just a few short months (working part time on it). And now my users will fill in content while I go on to program the custom stuff. We’re looking at a 9 month implementation time for a gigantic site with a team consisting of 1 developer, 1 marketing guy, and a handful of content editors….and no capital expenditures. The company we had originally contracted with to redo our site wanted $100k and had a team of at least a dozen developers/designers. We’re doing this thing for zero dollars and the amazing thing, it’s going to be better and more expandable than what this firm was promising to deliver.

So now that the framework is in place, let’s talk about some great libraries and tools.

CSS Browser Selector

Here’s how web development works. You fire up Firefox or Chrome and develop your site because these browsers have killer development tools. Then once you get everything nailed just perfect, you fire up Internet Explorer and discover that all the work you just did is horribly broken. At this point you can either go have a beer and contemplate another career, or you can fire up CSS Browser Selector. What this little library does is sniff the browser and attach classes to the html tag in your page. This way you can easily write CSS rules targeting specific browsers. No more hacks! I’m convinced this is the greatest tool in my web building arsenal.

JQuery

I honestly don’t know how I lived before JQuery. Oh wait, I know, I just avoided Javascript at all costs. Seriously, Javascript gives me the cold sweats. Well, I no longer fear Javascript, and John Resig, you are unreal. Thanks for putting this gigantic time saver together.

JQuery Image Dropdown

This is a fantastic piece of code that replaces the standard dropdown selection box (which is rendered differently on every single browser) and makes it a beautiful, skinnable, dropdown. It works perfectly and consistently across all browsers and looks fantastic.

JQuery MegaMenu

Mega menus are giant fly out menus that can contain all sorts of content and are a great way to guide your users to the right content in very deep sites. Once again though, the problem is getting them first to look gorgeous and second, getting them to work consistently across all browsers. Well, this one accomplishes both.

OK so that’s it for now. I’m sure as I get deeper and deeper into this project over the next few months I’ll have some more great tools and stuff to share. I’ll also be doing some write ups on my favorite Drupal modules.

Today I found a fantastic utility. It’s basically a browser sniffer that injects class tags that denote which browser the end user is using into the HTML tag at runtime. So if somebody visits my site using Firefox, the HTML tag will have a class of ‘ff’ applied. What this means is that I can now apply CSS only to certain browsers and I can have different CSS for each browser without resorting to hacks. This is a FANTASTIC tool. I still have to write custom CSS for each browser, so there’s still a lot of work to do if a certain browser is being finicky, this utility does not do any “resets” or anything like that. But it now let’s me write specific CSS to deal with quirks and bugs in a logical and beautiful format and that’s great.

There are two versions out there. One is a Javascript version and the other is a PHP version. You can get them at the links below.

Javascript version: http://rafael.adm.br/css_browser_selector/

PHP version: http://bastian-allgeier.de/css_browser_selector/

http://alistapart.com/articles/survey2010

2009 results are here:

http://www.alistapart.com/articles/findings-from-the-web-design-survey-2009/

Project Management is one of those things like golf. Everyone sucks at it and so there are a million other people who SAY they are good at it and want to sell you classes and gadgets to make you good at it to. But that’s really a lie. Everyone pretty much sucks at it. It’s just an inexact science. So I’m not going to give you any great insight here, I’m just going to tell you what has been working for me lately.

In the past I have tried fancy to-do list programs and calendars and organizers and mind maps and spreadsheets and all that and it became more of a hassle to use the damn software than it was to actually do the work. So, I asked my boss. I said; “Boss, I have a dozen irons in the fire and I don’t know how to keep track of them all, and so I don’t know how to keep you in the loop. What should I do?”. My boss being the good guy he is, and having a desire for simplicity as I do gave me a brilliant solution. Text files.

Text files??? Yes text files. My boss pointed out to me that there’s only two things that matter to him. What is the current status of the project, and what is the next step. So what he does is use a plain old text file for each project. Inside that text file he has lines that simply have the date and the next step for that project. Simple. Brilliant.

So I decided to give it a shot but take it just one step further. I use TextMate for my text editor so I wrote some shortcuts to make my text entry quicker. I also wanted to add the current status in addition to next steps. So my text file for a given project might look like this:

Title: HEAT MPS
Created by: Dana
Date: 2010-07-28
Description: Update program to send requests from HEAT to Print4 program.

Team Members: Alison

-------------------------------------------

2010-07-28 - Next Step: Get with tech support to discuss errors in web service.
2010-08-05 - Status: Have docs, reviewing new API
2010-08-05 - Next Step: Goal is to complete by 8/6
2010-08-09 - Status: Finished coding and got things working. Not in production yet!
2010-08-09 - Next Step: Mark to verify data got there OK and Alison to instruct on what to do with bad records.
2010-08-10 - Status: Verified that records were sent, moved into production. Still have issue with bad records. Address in a later revision.

And that’s it. Now anytime somebody calls or emails wanting to know what’s been done or what I’m working on, I can tell them. Now of course this is more of a personal project tracking system rather than a “project management” system but the beauty of it is that it doesn’t require fancy software, there’s no learning curve.

It’s all about keeping it simple.

So I am finishing up a new Drupal site for a band that I was pleased to play drums for as they recorded their debut album and so I needed a host to serve the site. I also want to get my resume site up and host a few other clients as well. So as I was digging through the usual garbage hosting companies selling everything under the sun (except for performance and configurability) for $5 a month, I ran across a twitter post from somebody talking about Linode.

Linode is a somewhat unique hosting company that sells virtual servers. You pick what configuration you want, and then they spin up a virtual Linux server in just about any flavor you can think of. Then they give you the keys and let you run with it.

Now I love me some virtual machines. I think it’s the greatest technology ever developed. Screw up your server? No problem, wipe it out and start over. Try doing that on real hardware. It would take hours if not days to reconfigure. So Linode already had me interested. But what I think is really cool is that they just give you a bare server. No lame control panels to deal with, just an SSH account and a raw server to manipulate to your hearts content. OK, I take that back, they do have a control panel, but it’s not for the OS, it’s for the virtual hardware. You can see stats, partition the drives, reformat it at will, whatever. Want to try Ubuntu today and Debian tomorrow? No problem. I also like the DNS control panel. It’s the first I’ve seen like it. Linode is all about giving up control.

Now I’m not a big Linux guy. The last time I really took a hard look at Linux was years ago with a Slackware distro. It was a nightmare. Couldn’t get anything working. Absolute mess. What I’ve discovered is that Linux has come a long way. Apt-get is freaking awesome. I had Apache, PHP and MySQL configured in about an hour. Apache itself has made HUGE strides in ease of configuration. Yeah I still had to freshen up on Unix commands, but that information is easy to come by. All in all, setting up my server was relatively painless and I actually had fun doing it.

The greatest thing about the whole experience though was the updated walkthroughs for setting up just about anything on your Linode. The documentation is easy to follow, complete and VERY up to date. And that’s what sets these guys apart in my mind. They’ve taken the time to make the customer experience top notch.

Pricing is very good too. No you’re not going to host your site for $5 a month. But with plans starting at $20, the service is more than reasonable. And I like that the plans are based on RAM, storage and bandwidth, and not on features. I’m so sick of getting charged extra if I want a database or a DNS entry.

So what about performance? Well, I’m not pushing a lot of data yet, but I set up a client’s Drupal site on another host a few months ago and that sucker ran like an absolute pig. My Linode so far is zippy fast. We’ll see if it holds up as I put 3 more sites on it in the next month, but I think it will be just fine.

So I give Linode 5 beers. Yes beers. Who the heck wants stars?

https://www.linode.com

First you need a form in your View. This can be a standard submit form but you need to make sure you set the enctype properly. Here’s what mine looks like.

<form id="ajaxUploadForm" action="<%= Url.Action("UploadImage", "Upload")%>" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Upload</legend>
        <input id="file" name="file" type="file" value="" />
        <input id="ajaxUploadButton" type="submit" value="Submit" />
    </fieldset>
</form>

Easy enough. Now make sure you’ve included JQuery and the JQuery Forms JavaScript into your page. Then you’ll add a JavaScript function to catch the submit and deal with it properly. Here’s mine:

$("#ajaxUploadForm").ajaxForm({
    iframe: "true",
    success: function (response) {
        var msg = $.parseJSON($(response).val());
        if (msg.status == "valid") {
            fadeInPageMessage("success", msg.message);
        } else if (msg.status == "invalid") {
            fadeInPageMessage("error", msg.message);
        }
    }
});

So there’s a few important things to note here. I set the iframe parameter to “true”. This is done because you can’t upload a file via an AJAX call. So what the Form Plugin does is create an iframe dynamically, then submits the form as a normal POST via that iframe.

Now, since we’ve done a POST through an iframe and not via an XHR (XmlHttpRequest), the return data is also going to come back through that iframe, and it’s going to come back like a normal page would. This causes a lot of problems for people because normally your Controller Action would return a JsonResult which comes down to the browser as the type “application/json”. Since this is coming down to that iframe the browser thinks you’re downloading a file and prompts the user to pick a program to open it. This is obviously not what we want.

So how do we get our JSON result from this iframe and get it back to our javascript function so we can deal with it? Well, we have to return the data as HTML instead of JSON so the browser will not prompt the user. And since we’re sending down HTML we’ll follow the guidelines set by the creators of the Form Plugin and place our JSON string inside a TextArea. Here’s how that’s done.

We’ll create a new class that extends the JsonResult class. I found this code by John Rudolf Lewis and it works fantastic:

public class FileUploadJsonResult : JsonResult
{
	public override void ExecuteResult(ControllerContext context)
	{
		this.ContentType = "text/html";
		context.HttpContext.Response.Write("<textarea>");
		base.ExecuteResult(context);
		context.HttpContext.Response.Write("</textarea>");
	}
}

You use this class exactly like you would use your regular JsonResult class. As a result, here’s my Controller:

public ActionResult UploadImage()
{
	HttpPostedFileBase file = Request.Files["file"];
	if (file.ContentLength > 0)
	{
		file.SaveAs([put your path here]);
		return new FileUploadJsonResult {
			Data = new {
				status = "valid",
				message = "Upload Successful"
			}
		};
	}
	else
	{
		return new FileUploadJsonResult {
			Data = new {
				status = "invalid",
				message = "No Image Selected for Upload"
			}
		};
	}
}

So this code checks to see if there’s a file and if so, saves it to disk and sends back a JSON response. If no file exists it sends back a separate response.

There’s one final thing that’s important to note. Now that we have the data in our iframe, we need to turn it back into a JSON object. If you go back at our client side JavaScript you’ll see the following code:

success: function (response) {
    var msg = $.parseJSON($(response).val());
...

This takes the response, which is just a TextArea with some content, and using the val() function gets our JSON string. Then it passes it on to the parseJSON function which turns that string back into an object and assigns it to the msg variable. Now we can manipulate msg any way we see fit.

So in closing, the way the Form Plugin works is that it submits your form through an iframe. You process that submission, formulate your JSON string, wrap it in in a TextArea, and send it back to the browser as HTML. Then you strip the JSON string out of that HTML, turn it back into an object and do with it what you please.

I hope this clarifies the process for some of you and helps you to write great, Flash free upload pages.

So the fonts she used were of course not the lowest common denominator fonts and so I was faced with either going with 1995 old-school graphic roll-overs or dig around and see what’s new in fonts. Well, after digging around I re- discovered webfonts and the @font-family css tag.

Now webfonts are really nothing new, but we’re finally getting to a point where there’s broad support. There’s also a bunch of new tools popping up to make imbedding fonts in your pages easier.

Google offers a webfont library though it’s a small collection and I really don’t like any of their fonts at all. Fonts.com has an offering though it’s beta and they will eventually charge for it. TypeKit has free webfonts but I found it kind of a pain in the butt to set up and they also charge if you want more than a few fonts. I finally found a site called Font Squirrel which I think rocks.

The cool thing about font squirrel is that you can upload your font files and they will create a package for you that contains everything you need to make your fonts work across browsers. You simply include the stylesheet they generate and then reference the font-family name. It could not be easier.

Now I haven’t tested this across all browsers but honestly, all I’m concerned with these days is IE8, Firefox and WebKit based browsers. I think supporting IE6 and 7 (or Opera of all things) is a complete waste of time and is mostly done by developers who are just anal.

Anyway, check out Font Squirrel and let’s all start making the web beautiful!

Update: Apparently I missed another web font service. Fonts Live is another option to check out. Thanks Bill!

It’s a nerve wracking experience to sit and wait for the axe to fall. It’s worse when you begin to see the term notices come through email and then see your coworkers announcing their demise on Facebook. You begin to dread going into work every day because it may be your last day, and tomorrow you will be wondering how you’ll pay your mortgage and feed your family.

We all like to feel like we’re indispensable, but I’ve been around long enough to know that NOBODY is indispensable. Depending on the situation at a given company, anyone can go and it doesn’t matter how educated you are, how well you are liked, or how critical you think your services are to the company. When the money runs out, and the company is forced to make the hard decision, nobody is safe.

The good news is that I eluded the cuts this time. However, many of the people I work with on a daily basis did not. It’s a sad thing. But on the bright side, it’s nice to know that we are not in this position because our company is mismanaged. In fact, this move is evidence of our leadership’s willingness to act quickly, rather than wait until the last minute and have to cut deeper. So I’m encouraged that our company is willing to make the hard choices and try and steer it’s own course.

That doesn’t really make the situation any easier. But it does mean that I get to write code and bolt together systems for at least another quarter. Could be worse.

Why WordPress? Let’s face it, WordPress is best of breed blogging software. Sure there are others out there, but in my opinion WordPress is the best, so let’s leave this discussion at that.

The biggest challenge I had in moving to WordPress though was converting old blog data. My gut reaction was to just forget about moving old posts (who reads old blog posts anyway?) and just start new. My bloggers though did not like that idea. I guess people get attached to their posts. Anyway, I started looking for conversion programs and just couldn’t find anything that would convert CS2.1 to WP. I did find a plug-in for exporting CS as BlogML, however, the hosted version of WordPress does not import BlogML. So if I wanted to use that I would have to host a copy of WP, and then I’d be right back where I was with CS. I just don’t have the time to keep up a custom install of another program.

So I decided I would have to write my own converter. I decided that I’d export my CS data as WordPress WXL since that seemed to be the smoothest path. I also decided that I would only worry about posts and tags. My bloggers don’t use categories (most don’t even use tags) and rarely use photos and such. So I could get away with the basics.

The program was really not that hard to write. Microsoft’s XMLTextWriter class is pretty killer and it was fairly easy to match the WXL format. One problem I had though, and this really threw me for a loop, is that WordPress will not import a file that has a Byte Order Marker (BOM) at the beginning. I cannot tell you how long I spent poring over my XML and examining every bit of data I was exporting, and then I discovered that it was just this stupid BOM screwing up the import. *sigh*.

Anyway, I wanted to share this little program I made in case anyone else needs to convert an old CS2.1 blog to WordPress. The program is a very simple command line program. You’ll need Visual Studio 2010 to open the source and change a few things:

1. In the file BlogData.cs, change the connectionString variable to the connection string for your database.
2. In the file Program.cs change the blogs array to contain the blog usernames and the blog title you wish to use. I could have written something to figure this out automatically, but I have one user per blog and I only needed to export a few blogs. You may have to alter the program if you have multi-user blogs.
3. In the file Program.cs change the savePath variable to contain the export file location.

The program will export one xml file per user listed in the blogs array. It will also export the tags for the user and blog posts. The program WILL NOT export images or attachments, categories, or comments. I didn’t need these things so I didn’t bother exporting them. If you need them, you can alter the program to suit you.

I hope this helps save somebody a little time and trouble. Here’s a link to the project on CodePlex.

Community Server 2.1 to WordPress WXL Exporter