/home » workblog

Convert Filenames to Lowercase on Linux

If you transfer files from a Windows server to a Linux one, you may get some broken links because Linux is case-sensative while Windows isn’t. You can rename all the files on the Linux server to their lowercase equivalents with this shell script from Linux Journal.


#!/bin/sh
# lowerit
# convert all file names in the current directory to lower case
# only operates on plain files--does not change the name of directories
# will ask for verification before overwriting an existing file
for x in `ls`
do
if [ ! -f $x ]; then
continue
fi
lc=`echo $x  | tr '[A-Z]' '[a-z]'`
if [ $lc != $x ]; then
mv -i $x $lc
fi
done

Blogging as Narcissism

Wordpress’s creator, Matt Mullenweg, expresses my sentiments on blogging exactly:

“I used to think constantly about building an audience for my blog but now my attitude is that if I’m not blogging for myself it’s not worth it. I don’t force myself to post once a day, I just do it when it feels natural. Sometimes people complain — ‘Write more about WordPress; we don’t want to see photos of kids in Vietnam’ — but I don’t really care.”

Tracking Project Hours/Deadlines

Lately I’ve been trying to work out a good process for quoting projects and tracking the billable hours and deadlines. I’ve had a couple large projects go over budget/deadline, and I think two of the main reasons are that I wasn’t realistic enough in the quote, and that I just wasn’t being intentional about monitoring the progress. My natural tendency is is to leave all the “business” stuff to my boss and just focus on doing my core job right, but I need to take those things into account because how I do my job has a direct impact on whether or not the ultimate project goals are met. With my anal-retentiveness I can easily spend 3 hours on something that could be done the “wrong” way in 30 minutes.

The client’s not gonna care if I take the time to properly slice up visual elements from the mockup and put them together in a flexible and semantically correct way — dealing with cross-browser positioning and PNG transparency issues — rather than just creating large chunks the way a WYSIWYG tool would. It’ll make me cringe, but It looks the same to them, and we’re just going to end up eating the cost if it goes over budget.

Of course, there are some things where taking shortcuts will cost you in the long-term, and there are some things that should always be done the right way, so you have to find a balance, taking all the factors into consideration on a case-by-case basis.

So, to try and fix this in the future I’ve made a couple changes. When quoting things, I’m trying to think in more detail about what will be involved in each line-item, and giving them a little more padding on top of that because of my tendency to under-estimate. I also think it’s important to have a line item for miscellaneous and unforeseeable things, equal to about 20% of the original estimation, and then make it clear to the client that additional requests during development that weren’t in the original quote will be billed on top of the spec’d work.

To track deadlines, I’ve just put reminders on my calendar for the major milestones, and set them to remind me a few weeks ahead of time so I see how close I am and make adjustments if needed.

To track hours, I’ve started adding more details in my task manager, ToDoList. I used to just add an entry for each item that needed to be done, but now I’m categorizing them into a folder for spec’d tasks that were in the quote and then another for additional requests. I’ve started listing the category on my timesheet, in addition to the project, so at the end of the week I can add those hours to a running tab in ToDoList and see how they compare to the quote. This also lets me know exactly how many hours were spent on additional requests, so we can properly bill for them.

Lightbox Clones

The Lightbox Clones Matrix is a list of scripts that do inline popups, ala Lightbox. You can filter by JavaScript frameworks and features.

Using overflow to Clear Floated Elements

If you have an element whose children are all floated, it won’t have any height to it. I’ve always just put an extra <div style=”clear: both;”> at the bottom of the container to force it to clear, but it looks like there’s been a much better way for a few years now. Alex Walker points out that you can just set overflow:auto on the container.

Free Icon Sets

These are some of the better free icon sets I’ve seen:

Writing Semantic (X)HTML

Jesse Skinner explains why developers should use appropriate semantic tags when marking up a page, rather than just putting everything inside a <div>.

Here’s a quick reference list of what I commonly use:

  • <div> – For large page sections, and when there isn’t a specific semantic tag
  • <h1> … <h6>: For section header titles
  • <p> – For text paragraphs, and when there isn’t a specific semantic tag
  • <ul>, <ol>, <dl> – For lists (including navigation menus)
  • <table> – For spreadsheet data
  • <span> – For inline formatting
  • <label> – For form fields*
  • <address> – For contact information, including phone numbers
* The thing I love about <label> is that it will make the text of the label, and not just the input field itself, clickable. It should be used on every form.

Placing an Element In Front of an Object

Here’s how to have a drop-down menu appear on top of a Flash object:

  1. Add a z-index of 0 to the object’s containing div
  2. Add <param name=”wmode” value=”transparent”> inside the object tag
  3. Add wmode=”transparent” to the embed tag

via Sheriar Designs

The Good, Bad and Ugly of SEO Methods

I agree with a lot of what Derek Powazek wrote about the SEO industry in Spammers, Evildoers, and Opportunists. His main gist is that the good SEO techniques — like using tags that match the semantics of the content and setting up 301 redirects when pages move — should just be considered good development practices, and that all the other crap is just polluting the web. If you want to be successful on the web, “Make something great. Tell people about it. Do it again.”

But, I do think he takes things a little too far, and makes some generaliztaions, over-simplifications and also some presuppositions about the types of sites he’s talking about. I think there are some SEO techniques that are ethical and help a site earn (not buy) a good ranking without hurting the web. So, I’ve sorted some of the most common techniques into Good, Bad and Ugly categories to help me when I’m trying to find a good SEO consultant.

The Good

  • Server configuration issues
  • Organizing and improving content
  • Unintuitive search engine quarks, like archived content being counted as a duplicate
  • Pay-Per-Click campaigns and other traditional advertising
  • Keyword research
  • Configuring Google’s Webmaster Tools
  • Training CMS users on good practices
  • Setting up 301 redirects
  • Pretty URLs
  • Not using images for text, not making the entire site in Flash
  • Don’t generate links with JavaScript
  • Using tags that are appropriate for the content

The Bad

  • Contrived link building schemes
  • Creating mini sites that link back to the real site
  • Paying other sites to publish articles you wrote about yourself
  • Buried on-site content written specifically for the search engines

The Ugly

  • Spam blogs
  • Comment spam
  • Duplicating content
  • Domain squatting
  • Hiding links and keywords
  • Google bombs
  • Cloaking content for search engines

The Best Way to Define Font Sizes in CSS

Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design). A List Apart has a worked out a good method for sizing text consistently across browsers while maintaining the user’s ability to resize the text to fit their needs.

All you need to do is define a baseline size and line height in the body tag, and then use em’s throughout the rest of the site.


body
{
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}

.bodytext p
{
font-size:0.875em;
}

.sidenote
{
font-size:0.75em;
}