HTACCESS, RewriteRule, and the disappearing images problem

January 6th, 2010

I decided today that I was going to fix my ongoing issues with images and WordPress. Turns out that in this case the blame did not lay with Wordpress, but instead with my hosting provider.

A long time ago I decided to use blog.codeinreview.com as my web address instead of www.codeinreview.com or codeinreview.com. Since I was originally going to use the ‘www’ address for a different site, I never really thought too much about it. However, recently my web hosting provider went through some sort of upgrade (in defense of my provider, they did roll out a number of neat features). As part of this upgrade it would appear that my .htaccess file was rewritten to prevent outside domains from linking to my images. This worked OK, except it only worked for the main domain, not the blog subdomain I run on.

Fortunately, the fix was pretty simple – just remove the rewrite rule they were using.

Once I did that, and uploaded the new file, it seemed to fix all the wordpress image problems I was having. Now all I need to do is figure out how to address the issue with posting to the site.

[EDIT]

It appears that the issue with publishing via Windows Live Writer has also been fixed. As a number of thigns have been changed (including upgrading to a new version of Wordpress), I cannot say for sure, but hopefully I can now focus on writing instead of ensuring that my posts are displayed correctly.

Posted in Website | Comments Off

JavaScript Method Names

December 30th, 2009

I’ve been working on a new website for my company recently, and ran across an annoying issue with a JavaScript method name I was using to handle a mouse over event. I usually define my methods with generic names and then rename them to fit their specific purpose once I have a better understanding of how I will use them in my code.

In this particular case, I named the method “MouseOver”. However, when I ran the page, nothing happened – the method was never called, and no error was given. This was pretty annoying, but a quick check by a second pair of eyes spotted that MouseOver was apparently a reserved keyword.

There are a number of websites that list reserved words for JavaScript. None of them list MouseOver (not to be confused with OnMouseOver, which is an existing method name that should be avoided), so this is my small addition to these lists – avoid MouseOver as a function name, as the behavior will apparently be undefined.

Posted in Development, Javascript | Comments Off

Debugging for Two

December 27th, 2009

I’ve already mentioned I’m a fan of Visual Studio. Whenever I think of something development-related I wish it would do, a little bit of investigating shows how it can already do it in some form. A case in point is my current project, which involves 2 separate executables. The first executable watches for and filters file changes and then passes the content to the second executable where it is consumed.

While an argument can be made for combining these two tasks into a single executable, I decided to separate them in the hopes that I would be able to isolate and recover from faults in one without affecting the operation of the other. Of course, this meant that in order to address any bugs, I have to first determine which executable contains the fault. Usually this means observing the system as files enter the filtering engine and eventually get consumed or ignored. Since I have two executables, it means that I ideally want to run a debugger that allows me to debug both executables simultaneously so I can watch the data move through one and out to the other.

Fortunately, Visual Studio makes this as easy as debugging a single executable. All that is needed is a solution containing both projects. To start debugging an executable, simply right-click on its project and select “Debug”->”Start New Instance”. The selected projected will execute with the debugger attached. Do the same thing for any other projects that you wish to debug.

Of course, you can also start each program manually by running their executables and then attaching the debugger to each process. To do that, simply select the “Attach to Process” command in the “Debug” menu. A list of available processes will appear – select all the processes you wish to attach to and press the “Attach” button. The debugger will attach itself to the currently running process, and if the debug symbols are available and the appropriate project is loaded, you can set breakpoints and inspect values just as you would in a “regular” debugging session.

For more information on connecting to multiple processes, check out Microsoft’s help page, which has some more information on how to handle breakpoints and other items of interest.

Posted in Debugging | Comments Off

Windows Live Writer vs Wordpress

December 22nd, 2009

A few months ago I switched my blogging platform over from Blogengine.net to Wordpress. This change was done mostly due to a change in hosting platform that precluded me from running an asp.net website. My experience with Wordpress has been… less than satisfactory. The administration pages seem to be incredibly slow to load and use. It seems to be having issues displaying images, and I have encountered no end of difficulty attempting to upload and link to files. What may be the final straw for me though is that it is corrupting my posts. While it appears to have corrupted most of my older posts on its own, the new posts appear to be corrupted when I use Windows Live Writer to upload the posts.

A quick google search appears to absolve Wordpress of any wrongdoing in this area, but it doesn’t help my problem in the least, as I cannot change the relevant libraries on my host. A further search revealed a possible fix involving a plug-in. Unfortunately, activating that plug-in still did not solve my issue. At this point I still have no resolution to this issue. If I do find a solution, I’ll let you know, but it may involve me changing from the Wordpress platform.

Posted in Website | Comments Off

Creating a Custom Item Template in VS2008

December 22nd, 2009

I write a lot of C# code, so anything I can find to reduce the amount of time I spend “filling in the blanks” is great. Visual Studio is perfect for helping out in these types of situations. A case-in-point is the custom item template.

Whenever you select “Add New Item” on a project, you are shown a list of templates for the different items you can create. These items range from new classes to database files to xml files. I have found over time that I tend to always create the same basic structure for every class I write in C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace ProjectName
{
    /// <summary>
    /// ClassName
    /// </summary>
    public class ClassName
    {
        #region Private Data Members
        #endregion
 
        #region Public Accessors
        #endregion
 
        #region Constructors
        /// <summary>
        /// Construct a default instance of ClassName
        /// </summary>
        public ClassName
        {
        }
        #endregion
    }
}

After filling out the same basic structure a number of times, I realized it was time to automate. Fortunately, as I mentioned, VS08 makes this ridiculously easy. First create a file to use as your template, then under the “File” menu, select the “Export Template…” option.

A dialog will appear asking if you are creating an item template or a project template. In this case, we are creating an item, so select the item option, and choose the project containing the file you created to use as a template. Next, you will select the actual file from the project. Note that you can select multiple files if your template needs supporting files. Select the references to include, and then provide a name and description for the file. make sure you have it automatically import the template, and you are finished.

If you are curious about the template structure, you view the template files as a zipped file under “Documents\Visual Studio 2008\My Exported Templates”. By editing the files in the zip file you can further refine and enhance your template, and you can fix any problems that might have occurred during export.

Posted in C#, Development | Comments Off

Setting Up Local Source Control With Subversion

December 19th, 2009

I love source control, but I tend not to use it for my “at-home” development for the simple fact that setting up a separate server is overkill, and I don’t like to have random server processes running on my personal machine. Unfortunately, this means that I lose out on my favorite use for source control – the ability to test and try out new code and features without worrying about screwing up the “main” development.

However, after recently spending a fair amount of time undoing and redoing some changes to a website I am working on, I have decided that enough is enough, and I set out to install a local source control system on my development computer.

Initially I decided to look into Git. It certainly seemed to fit my need, so I began to look into using it. It wasn’t long before I realized that I had to get a “special” version of git to run on my windows box. This was less than ideal for me, especially when began reading about how much work was left to be done on the Windows version. The last thing I need is an unstable version control system.

After having experienced a failure in my attempt to use the new and exciting tools (and yes, I am aware of Mercurial – it certainly seemed like a better fit for me), I decided to try to see if I could get the tried and true Subversion to do what I wanted. It took me all of about 5 minutes of searching to determine that I could in fact use subversion to access a local repository, with no need for for a server or network access.

This was perfect. I downloaded the Tortoise-SVN client, and sure enough there was an option right there in the client to create a local repository.

Context menu for Tortoise SVN

So I created a folder (“c:\svn”) off my root and created a repository there. All that was left was to import my existing files into the repository. Again, tortoise-svn made it simple. I navigated to the root of the project I wanted to add, selected the root folder, and chose the “import” item.

Tortoise-SVN Import Dialog

Unfortunately, this is where I hit my first snag. According to the documentation, to connect to a local repository, you simply use the “file://” protocol, followed by the full path to the desired repository directory (in my case, “c:\svn”). So, I attempted the url “file://c:\svn\”, but received an error:

Unable to open an ra_local session to URL
Unable to open repository ‘file://c:/svn/’

This was not a very helpful error. I knew the repository existed at the location “c:\svn”, but how could I connect to it? Looking online for the error message did not seem to provide much in the way of resolution for me, so I began to try various combinations of the protocol and the path. Finally, I found that “file://” plus “/svn/” successfully connected. In hind-sight it seemed obvious subversion would expect a linux-style notation, but the examples I found online all used a windows-style volume and path notation.

Once I had imported my existing data into the repository, all that remained was for me to check out a copy back into my original directory.

Tortoise-SVN Checkout

Clicking OK popped up a warning that the directory was not empty, which I accepted, and the files were all “checked out” from the repository and were ready to be worked on.

That’s all there was to it. I now have a fully working local source control client without the need for a server.

Posted in Source Control, Subversion | Comments Off

Developing a Usable Website Width

December 17th, 2009

When you design a website, most folks try to minimize the amount of scrolling a user has to do. Studies seem to indicate that while users will scroll, the less scrolling a web page requires, the more usable it will be. Most websites attempt to limit the scrolling to the vertical direction, while minimizing or eliminating any need to scroll horizontally.

There are basically 2 ways to achieve this with a standard webpage. The first is to fix the width of the page to a width smaller than the average user’s display width. This design has the advantage that you can precisely position all the elements on the page because you are basically requiring a certain width. However, if the user has a smaller window they will have to scroll horizontally to view the entire design. In addition, this can create a large amount of empty space if the chosen width is too small for the average display width.

The second method would be to have the design “expand” or “shrink” to fill the available width. This is usually accompanied with a minimum width to prevent the design from becoming unusable. While this allows the user to size their window as they need to while still presenting as much of the content and design as possible, it can represent a much more complicated layout for the developer. As I am not a designer, I usually pick this style so I can maximize the amount of actual content being displayed, and minimize the importance of the actual design.

Enter the Style Sheet

In many cases, making your site fill the available width can be as simple as adding a “width: 100%” line to your content class in your style sheet. This will make the content fill 100% of the available width:

#ContentFull
{
width: 100%;
background-color: #DDDDDD;
float: left;
}

<div id=”ContentFull”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

But what happens if you don’t want the content to fill 100% of the width, but only some smaller portion, leaving room for a menu bar or some other content next to it? If you want the content to fill some reduced percentage, and want the other content to fill a proportional amount of the layout, then the solution is still simple:

#RightContentProportional
{
width: 80%;
background-color: yellow;
float: right;
}

#LeftContentProportional
{
width: 20%;
background-color: #DDDDDD;
float: left;
}

<div id=”LeftContentProportional”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div id=”RightContentProportional”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

So now both columns will adjust their widths in proportion to the percentage allocated to them. So far, there haven’t been any complicated tricks, and has been pretty straight-forward. The problem occurs when you have a 2-column layout where one column is a fixed-width and the other column needs to expand to fill the remaining space.

To solve this problem you need to perform a bit of magic using padding and containing elements. Once you have the general idea, you can adjust it to meet your needs. The basic setup is as follows:

#ContentWrapper
{
float: left;
width: 100%;
}

#RightContentExpandable
{
margin-left: 160px;
background-color: #DDDDDD;
float: left;
}

#LeftContentFixed
{
margin-right: -100%;
float: left;
width: 150px;
background-color: yellow;
}

<div id=”ContentWrapper”>
<div id=”LeftContentFixed”>
<p>
Fixed Width Content:
</p>
<p>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</p>
</div>

<div id=”RightContentExpandable”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

Basically, what this does is create a left column that is fixed at 150 pixels. It does this by playing with the left and right margins. The left column has a RIGHT margin of –100%. Essentially, this makes the right margin of the element the left side of the screen. This means that when we float a second element, it will be position over the top of the left column. Since we don’t want the content to overlap, we give the right column a LEFT margin of 150 pixels (in this case, I gave it a left margin of 160 pixels to create a bit of space between the columns). What this does is cause the right column to start its left edge at 160 pixels from the right margin of the element next to it. In our case, since we gave the element next to it a right margin all the way on the left, the right column will display an empty space where the fixed column is displayed, giving the impression that the left column is side-by-side with the right column (even though they are technically on top of each other).

So why do we need the wrapper element? You may notice that the expandable element does not specify a width. If we had given it a width of 100%, the resulting layout would have been 100% of the screen, plus the 160 pixels for the left column – we would always have to scroll. To get around this, we size the parent element as 100% of the width, and then allow the right column to fill as needed.

Unfortunately, this means that the right column will only fill as wide as needed to display the content. If the right column has a different background color from the background color of the containing element, the color will not “fill” the entire right side of the screen. If this is a problem, you may need to play with different ways of solving the issue.

Open Sample Page

Posted in CSS, Design, Website | Comments Off

Reading and Comprehending Your Way to the Top

September 30th, 2009

Let me start by saying that reading code is rarely fun. Understanding it is hard. Let’s assume that is a given, and avoid all the arguments that surround that topic.

Unfortunately, if you are a software developer, reading and comprehension skills are critical to your professional success. Maintaining legacy code, integrating third-party components, even simple teamwork requires a developer to read and comprehend the execution of code written by a different developer. Most real-world projects are simply too large to exist solely in the hands of a single developer, and if it did, the risk to that project would be so large as to be untenable for a responsible company.

Given the seemingly critical nature of reading and understanding code written by other people, why are we content to dismiss it as hard? Writing software is just as hard, but no one seems to wave their hand at that problem as too difficult. Not only that, but we talk about writing code for others, but never seem to discuss reading other people’s code (try searching Google for “writing readable code” and compare it to the results for “Reading Code”).

This seems to be a fundamental deficiency in the training of future software developers. When we learn to write, we do not just sit down and memorize the rules for sentence construction along with word definitions. Instead we balance those grammar rules by reading the works of authors who have already mastered their craft. We read books, newspapers, magazines, journals, and develop an ability to recognize “good” and “bad” writing, independently of the actual validity and specifics of the sentence and paragraph construction.

Why can’t we do the same thing in software?

I’ve already talked about differentiating yourself by becoming comfortable in a domain outside of the development world, but that doesn’t always translate to your next project or job. So if you want to differentiate yourself in the software development world, learn to read code. Learn to recognize well-written code and poorly written code. Learn how other people approach problems and construct solutions. Your own work will improve immensely as you learn to recognize your own good and bad designs.

Posted in Best Practices, Development | Comments Off

Fill in the Gaps

September 28th, 2009

Suppose your boss were to approach you one day and inform you that they were looking to hire another technical staff member for the team and he wanted you to outline the skills required for the position. The specific requirements and position would be left entirely up to your discretion.

What would you do?

Most developers would immediately specify a development position (we always have more software to write). They would then proceed to gather up all the technologies, processes, knowledge and skills currently in use (including domain knowledge), and list those as the requirements for the new position. Most testers would immediately specify a test position (we never have enough testers to go around). They would gather up all the different testing methodologies and techniques being used, add a heavy dose of domain specific knowledge and list those as required skills.

In the end, the new staff member will likely become a useful contributor to the team, things might even get finished faster, but it is unlikely they will make the project meaningfully better.

Now, imagine instead that you are working on a puzzle. The puzzle has a lot of the pieces already filled in and the picture is beginning to take shape. When you go to add a piece to the puzzle do you start by looking for a copy of an existing piece? Or do you look for a piece that can fit into one of the gaps? The answer is obvious. You might use the existing pieces to refine and differentiate the piece, but it would be counterproductive to look for a copy of a specific piece.

Obviously, comparing a software development team to a puzzle is simplistic. At the same time, if you want to add a person to the team that will make a meaningful improvement to the overall project, you will be better served to look at what is missing, as opposed to what you have. If your team already has a top-notch tester, but no one with domain experience, look to hire a domain expert. If your development team needs a database guru, don’t worry about whether the guru knows C#. Your team can teach him or her C#. You can teach them how to test. What you can’t teach is what you don’t know. So if you are missing some skill or knowledge, go and find someone with that skill or knowledge. If they happen to already have some of the other specific skills your project needs, great. Just don’t focus on those because your team can teach those skills. Focus on filling in your gaps, and keep looking for new gaps to fill. If you are going to risk hiring a new person, why not look to maximize the potential gain for everyone involved?

Posted in Management | Comments Off

Back on the Horse

September 16th, 2009

Its been a busy summer around here, and a lot of changes have gone on, but its time for me to get back on the horse (so to speak), and get back to a more regular posting schedule. My list of personal projects has built up over the past few months as I’ve focused on a new piece of software I’m working on, along with a bunch of work-related items. However, the time has come to lose the excuses and just start writing again.

Posted in Uncategorized | Comments Off

Code In Review