DEVTRENCH: Web Development from the Front Lines

If you use WordPress for a lot of sites, installing it with SVN is really the way to go. I’ve been switching over all of my blogs to use SVN since it makes updating sooooo much easier. In fact, updating WordPress used to be my biggest gripe about the program, and now I don’t even give it a second thought – it really makes it that easy.

However if you are on a shared host like I am, then the checked out files might not have the right permissions for your setup. My host is running PHPSuExe and that means that all executable files can only be writable by the user (644 for files and 755 for directories). But the checked out files and directories are all writable by the group (664 and 775). What to do?

I just SSH in, cd to the blog directory, and do a recursive chmod that removes the group write privilege from all files and folders. For example if your blog is in the typical cpanel root:

cd public_html
chmod -R g-w ./

Works every time.

This article is contributed by Sarah Scrafford, who regularly writes on the topic of web design colleges. She invites your questions, comments and freelancing job inquiries at her email address: sarah.scrafford25@gmail.com.

Adobe Photoshop and Corel PhotoPaint are useful tools, no doubt, but there’s more to image editors than determined by the price tag alone. I know they say you get what you paid for, but there are times when the best things in life are free, like these web-based alternatives to Photoshop. Check them out if you need efficient editors on a low budget:

• The GIMP: It may rhyme with wimp, but it’s certainly far from one. The GNU Image Manipulation Program is one of the hottest free image editors you’ll find out there. It comes with almost all the features that pricey design packages have, and as for those that are missing, the open developing community for the GIMP will soon take care of that. This promising package is available for Windows, Mac, Linux and UNIX users.  
• Piknik: Its integration with the popular photo sharing application Flickr has only added to the appeal of this image editor – Piknik allows you to edit and add special effects to your photos on Mac, Windows and Linux systems.
• Pixia: lets you add layers, insert text, apply filters, resize, draw, crop, adjust color and brightness, and do a few other things as well to your pictures. A good tool to work with images and email them to all your friends.
• PhotoPlus: This versatile photo editor opens Photoshop files, supports layers just like Photoshop, has a cool “undo” option that lets you take care of any number of blunders, and lets you add links to graphics through the Image Maps tool.
• Seashore: A fast photo editor specifically for Mac users, this program lets you gradients and textures for text and brush strokes and supports multiple layers and alpha channel editing. It uses the same file format as the GIMP. 
• Paint.NET: This package which is based on the .NET framework and runs on computers that use the Windows operating systems and have Microsoft .NET Framework 2.0 installed. It features filters to handle blurring and sharpening and color control among other options, and allows layers.
• Krita: Available for use on systems that run the UNIX or Linux operating systems, this image editor which is a part of the KOffice suite, offers support for 16-bit images. It supports various filters, color management, CMYK and high dynamic resolution images.
• Picasa 2: You could use this program just because it’s from Google even if you are not too sure of the features and tools. The integrated Hello account (which has unfortunately been disabled now) allowed you to send any number of photos through email in a very short time.
• FotoFlexr: A comprehensive image editor, this tool lets you edit photos from Flickr, myspace, facebook, and Picasa among other online album applications.
• Pixenate: This free online photo editing tool allows you to print, share or upload pictures to an online album. You can use standard editing tools and even apply fun effects.

Recently I’ve been developing websites using the Bluprint CSS framework. Blueprint itself is not new (it’s a little over a year old), but I hadn’t really committed to using it as a standard for my business until about a month ago.

So What’s the Advantage?

The main advantage to using a css framework is speed. Once you figure out what the framework can do, it speeds up development quite a bit by helping to standardize the web development workflow. Blueprint can be the bridge between design and code.

So often it’s the designer that creates the problems in web development…I know because I am one. A simple stroke of design genius can snowball into a usability nightmare or make HTML/CSS markup a living hell. A grid system like Blueprint gives a designer definite bounds to work within, and puts them on the same page with the CSS developer and information architect.

Now if your designer doesn’t totally screw things up with a stroke of genius, then the guy or gal that marks up the HTML and CSS probably will. They’ll think of ultra clever semantic names that later end up being not so semantic. They’ll invent a new layout system because the last ones they did just weren’t good enough. They’ll probably take whatever whimsical approach seems appropriate for the design that was presented to them.

With Blueprint, the approach is different. A web developer can now layout the basic structure of the page (ie header, columns, footer,etc) using CSS that’s provided by the framework. The best part about this is that it takes thinking out of structural layout. You’ll be surprised at how much time you wasted thinking about what to name things like columns let alone the time it actually took to write the CSS for it. After using Blueprint for layout I wondered why I tortured myself by starting with a blank slate each time I started marking up a site.

If you’re lucky enough to have an information architect in your workflow, then Blueprint is going to be a dream come true. Instead of using an image editor like PhotoShop to make wireframes, the information architect can just use Blueprint to make them. In fact, if your designer is also the IA, then why not have them start there. If you can establish your grid and layout with CSS before design then you will be twice as prepared when you actually get to designing. Plus, there’s the added benefit of being able to reuse the code that the IA started at the CSS phase.

Hopefully, by now, the advantage of using a css framework is obvious. The IA starts the design process with Blueprint, hands the grid system and wireframes to the designer who now has a real template to work from, and then the design and basic grid system gets handed to the CSS developer to put it all together. Blueprint helps to standardize your workflow, and standards speed things up by automating simple tasks.

Jef Croft, one of the guys that helped write Blueprint, wrote:

They’re especially great for those working on tight deadlines and those working in teams (teams wherein multiple people work on the same CSS — they benefit from having a consistent set of coding patterns), and also for those working on several sites of a similar nature (for example, a team working at a news company which runs 20+ newspaper sites).

In my experience Blueprint is the best grid system out there right now. It has the cleanest, most flexible, and most supported code to allow your team to work together. However, any grid system can speed up development and there are a few to choose from: 960, YAML, Grid Designer, YUI Grids CSS. The main point is that if you can standardize on a common way to layout pages then all of your developers will work better together.

You Want More?

Here are some more in depth articles…

• Which CSS Grid Framework Should You Use for Web Design? – A pretty in depth look at CSS Grids and Blueprint
• What’s not to love about CSS frameworks? – A casual and humorous overview.
• Five Simple Steps to designing grid systems – A very in depth look at Grid Systems

…and here are some great tools for Blueprint CSS…

• Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.
• Grid – Grid is a highly configurable JavaScript bookmarklet which overlays a layout grid on any web-site you wish
• Photoshop GridMaker Script – Creates guides in Photoshop for css grids.