Engineered Web

pI was recently asked to review the look and feel of a website for someone. When I first looked at the site I was surprised at how wide the content region was. Sitting at close to 1200 pixels wide I thought to myself, there's the first red flag. But, when I pointed it out to the site developer he didn't think the width was a problem. After talking to him for a few minutes I discovered that he was under the impression this was now an acceptable resolution to use./p pHe was under a false impression. But, how do you show someone they are wrong? a href="http://browsersize.googlelabs.com/"Browser Size/a is a tool that can help do just that. It takes a look at page size and shows you what percentage of browser users can view how much of the page./p pIf we take a look at 1200 pixels we see that only 50% of those surfing the web can view that width without having to horizontally scroll. Yikes!br / !--break--br / img src="http://engineeredweb.com/sites/engineeredweb.com/files/images/screen-shots/Google-BrowserSize.png" width="598" height="496" alt="Google-BrowserSize.png" class="image-border"//p pThere are exceptions where 1200 pixels might be appropriate. An internal organization web application where the organization controls all the monitors is one example. The web at large is just not a place for that./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/Y5TF8tWkW0Q" height="1" width="1"/

pI've head a lot of great things about using a href="http://en.wikipedia.org/wiki/CSS_framework" title="Wikipedia: CSS Framework"CSS frameworks/a in site builds. Two of the more popular options I'm interested in are a href="http://www.blueprintcss.org/"Blueprint/a and a href="http://960.gs/"960/a. When I tried to find a good comparison between the two I found, for the most part, opinion pieces on why one was better than the other. I couldn't find a detailed enough analysis to feed my need. What is an inquiring engineer to do? I did the analysis myself.br / !--break--/p h2Introducing 960/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/images/screen-shots/960-Grid-System.jpg" width="598" height="514" alt="960-Grid-System.jpg" class="image-border" /br / 960 is what its name implies. It is a 960 pixel wide grid. The grid has 940 pixels of space for content and 10 pixel gutters on the right and left. The 10 pixel gutter on the left is very important. When a browser window is smaller than 960 pixels there is a gutter between the edge of the browser window and the content making it more readable than if the content went right to the windows edge./p pIncluded in 960 is a 12-column grid with 60 pixel wide columns and a 16-column grid with 40 pixel wide columns. Each column has 10 pixels of space on the right and left creating 20 pixel gutters between each column. If you like even more columns, included in 960 is a 24-column layout with 30 pixel wide columns with 5 pixels of space on the right and left making 10 pixel gutters./p p960 pixels is used because it makes for pretty math. All of the numbers listed here are clean numbers. Nothing ends in a decimal that a browser would try to round. Additionally, a 12-column grid is nicely divided up for the a href="http://en.wikipedia.org/wiki/Golden_ratio" title="Wikipedia: Golden Ratio"golden ratio/a./p pSometimes a 960 grid is not what a project calls for. For those times there is a a href="http://www.spry-soft.com/grids/"grid generator/a based on 960. The number of columns, column width, and gutter width are all configurable. Once you have something your comfortable with em(there is a live preview)/em you can download CSS generated from it./p p960, also, includes a reset stylesheet from a href="http://meyerweb.com/eric/tools/css/reset/"Eric Meyer/a and a basic typography stylesheet. 960 doesn't handle typography. This is the basics for rapid prototyping. As a href="http://sonspring.com/journal/960-grid-system"Nathan Smith, the developer of 960 puts it/a,/p blockquote cite="http://sonspring.com/journal/960-grid-system"p One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling. /p/blockquote pa href="http://sonspring.com"Nathan Smith/a is the developer of 960. This project is, for the most part, a one man show. Some features have come from others, like the push_XX and pull_XX classes that enable source reordering./p pAlong with the grid there are templates for all the major design programs and a printable pdf with the grid for sketching. The 960 grid is dual licensed using the GPL and MIT licenses./p h2Introducing Blueprint/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/images/screen-shots/BlueprintCSS.jpg" width="598" height="503" alt="BlueprintCSS.jpg" class="image-border" /br / The Blueprint grid is a 950 pixel wide grid with 24 columns. Each column is 30 pixels wide with a 10 pixel gutter. The 10 pixel gutter is on the right side of each column. This grid, also, nicely works with the golden ratio and in 950 everything ends in nice round numbers./p pIf a 950 pixel grid isn't right for you, included with Blueprint is a a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)" title="Wikipedia: Ruby (programming language)"Ruby/a script that can generate different grid sizes. Don't worry if you don't know Ruby. There are detailed instructions and it works like other command line applications. If you are looking for a href="http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources"web based generators you need to look no further than the community of developers around 950/a./p pThe grid provides source reordering with push, pull, append, and prepend classes. This is handy when you want to have your source in one order for good SEO and your presentation in a different visual order./p pLike the 960 grid reset, Blueprint provides a reset stylesheet based on the work by Eric Meyer./p pThis is where the similarities between 960 and Blueprint end. Blueprint goes beyond a grid to provide much more. Some of the additional elements in Blueprint include:/p ul listrongTypography/strong - Provides typography size and spacing defaults./li listrongForm Styling/strong - Default styling for forms and some classes that can be used to add to forms./li listrongPrint Styles/strong - Print styles are important and often overlooked./li listrongPlugins/strong - CSS em(and sometimes images)/em for buttons, tabs, and sprites./li /ul pA PSD template is available for Blueprint from the Blueprint repo. If you go beyond the Blueprint repo there are generators for CSS files with different dimensions and templates for other tools from the community of Blueprint users./p pBlueprint is the work of a team. The original creator has handed Blueprint off to two admins and several contributors. Much of the CSS used comes from the work of big names in the design community./p pBlueprint is distributed under the GPL and a modified MIT license./p h2My Notes/h2 pWhile reading through the sites, looking for the similarities and differences, and seeing what I liked or disliked about these two frameworks I took some notes that some may find useful./p ul liBlueprint content butts up to the browser window on the left when the window is smaller than the content area. This can cause problems for readability of content. A designer can add a gutter to the left side of the content to account for this. I tested several sites and often found the text butted up to the left side of the window./li liIn most of the designs I work with the designer has chosen the typography, look of the forms, and other visual elements. A framework that provides these is not useful when a designer is customizing the look for the branding of the site or the organizations branding is dictating parts of the design./li liIf someone is not a designer but is throwing a design together the defaults provided by Blueprint would be very handy. There are far to many ugly developer sites because of bad defaults./li liI don't really like the gutter all being on one side of the column in Blueprint. It feels unbalanced. Like a person who has short hair on the right side of their head and long hair on the other. Maybe it's just me but it doesn't feel right./li /ul h2Conclusion/h2 pBlueprint and 960 are very different setups. They offer different features and have a different purpose. Picking between them is more a matter of preference. The approaches are just different. 960 is additive. It provides a grid and the design elements are added to your CSS. Blueprint is subtractive. It provides a lot of functionality. If you want to go a different route you need to subtract or override what you don't want from Blueprint./p pBoth solutions are solid, well tested, and well used. With either choice you aren't going to go wrong./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/ym32SC0-F-g" height="1" width="1"/

pAfter posting about a href="http://engineeredweb.com/blog/10/2/smartgit-best-git-gui-so-far" title="SmartGit - The Best Git Gui So Far"SmartGit in a recent post/a I was contacted about numerous other Git GUI programs. While I think SmartGit is the best all around solution for your average users there are other programs for Git GUI users to consider. The nice part of these programs is that they are free for commercial use.br / !--break--/p h2Git GUI/h2 pimg src="http://img.skitch.com/20100226-rys1rd6ba8gr24e59sk33erw7u.png" alt="Git Gui (ffpc) /Users/mfarina/workspace/ffpc" class="image-border"/br / Git GUI is included with a git installation. From the command line you can type span class="geshifilter"code class="geshifilter-text"git gui/code/span to start it up. Git GUI provides most of what you need to work in Git. /p pWhy didn't I recommend this previously? I don't believe Git GUI is very intuitive. If someone isn't familiar with the intricacies of Git it can be easy to get lost in the interface. So, for your average user I wouldn't make it my first choice./p pTwo notices for Mac users:/p ul liIf you are on a Mac and would like to open a project right into Git GUI there is a a href="http://code.google.com/p/git-osx-installer/wiki/OpenInGitGui" title="OpenInGitGui"Droplet/a for that./li liIf you are on OS X Leopard you may get an error about a missing framework. To use it you'll need to install the framework./li /ul h2TortoiseGit/h2 pIf you are a windows user familiar with TortoiseSVN or any of the other Tortoise version control interfaces than a href="http://code.google.com/p/tortoisegit/"TortoiseGit/a may be for you./p pSince I am no longer a Windows user em(except for some Internet Explorer testing)/em I cannot really provide a review. I hear good things about it and it expect to be in the same line as many of the other Tortoise applications./p h2GitX/h2 pimg src="http://img.skitch.com/20100226-xk81ua2edafnhqcwwb7129jj3a.png" alt="ffpc (branch: master)" class="image-border" /br / a href="http://gitx.frim.nl/"GitX/a, a mac application, is not like the other GUIs I've written about. The other GUIs provide the base features your average user can use. GitX doesn't provide those. GitX lets you visualize the source tree, see diffs, and visualize where a project repo is at. You can't commit, checkout, or do other basic commands in GitX./p pFor what GitX does, it does it well./p pWhile I have shared these other tools I still believe SmartGit is the best option for average users at this point./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/38zRmAifeIE" height="1" width="1"/

pIn a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a 7 core all the common objects, like nodes, users, comments, and terms, are called entities. Entities are a base level conceptual object designed to be used as a base for objects in core and contrib. But, strongthere is a problem with the core entity pattern we can improve on in our contrib modules./strong/p pEntities have a controller used for their loading operations. The controller is a class that can be swapped out for alternative controllers when developers want to do something fancy, like have their own node caching setup. But, only the load operation is on the controller. The other a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete" title="Create, read, update and delete"CRUD (create, read, and delete)/a are hard coded in functions like node_load, node_save, and other object operations. The CRUD control for entities can't be completely swapped out. Let's take a look at a base pattern to use for completely swappable controllers.br / !--break--/p h2Why a completely swappable controller?/h2 pThere are several reasons to provide a fully swappable controller. There are different use cases that are important to different developers. Let's look at a reason that is becoming fairly common./p pAlternative databases are becoming all the rage. a href="http://drupal.org/project/mongodb" title="MongoDB Drupal Module"MongoDB and Drupal are already on their way to being used together where they can/a. Some developers will want to store entities in alternative locations like a a href="http://www.mongodb.org"MongoDB/a database. To do this all of the CRUD operations need to be swapped out./p h2The Pattern/h2 pLets look at a code example to see how completely swappable CRUD would work. We start by looking at a href="http://api.drupal.org/api/function/hook_entity_info/7"hook_entity_info/a where the controller is defined/p pdiv class="geshifilter"pre class="php geshifilter-php" style="font-family:monospace;"span style="color: #009933; font-style: italic;"/** * Implements hook_entity_info(). *//span span style="color: #000000; font-weight: bold;"function/span example_entity_infospan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #000088;"$return/span span style="color: #339933;"=/span a href="http://www.php.net/array"span style="color: #990000;"array/span/aspan style="color: #009900;"#40;/span span style="color: #0000ff;"'example'/span span style="color: #339933;"=gt;/span a href="http://www.php.net/array"span style="color: #990000;"array/span/aspan style="color: #009900;"#40;/span span style="color: #0000ff;"'label'/span span style="color: #339933;"=gt;/span tspan style="color: #009900;"#40;/spanspan style="color: #0000ff;"'Example Entity'/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;",/span span style="color: #0000ff;"'controller class'/span span style="color: #339933;"=gt;/span span style="color: #0000ff;"'ExampleEntityController'/spanspan style="color: #339933;",/span span style="color: #0000ff;"'base table'/span span style="color: #339933;"=gt;/span span style="color: #0000ff;"'example_entity'/spanspan style="color: #339933;",/span span style="color: #0000ff;"'fieldable'/span span style="color: #339933;"=gt;/span span style="color: #000000; font-weight: bold;"TRUE/spanspan style="color: #339933;",/span span style="color: #0000ff;"'path callback'/span span style="color: #339933;"=gt;/span span style="color: #0000ff;"'example_entity_path'/spanspan style="color: #339933;",/span span style="color: #0000ff;"'object keys'/span span style="color: #339933;"=gt;/span a href="http://www.php.net/array"span style="color: #990000;"array/span/aspan style="color: #009900;"#40;/span span style="color: #0000ff;"'id'/span span style="color: #339933;"=gt;/span span style="color: #0000ff;"'id'/spanspan style="color: #339933;",/span span style="color: #009900;"#41;/spanspan style="color: #339933;",/span span style="color: #339933;".../span span style="color: #009900;"#41;/spanspan style="color: #339933;",/span span style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #b1b100;"return/span span style="color: #000088;"$return/spanspan style="color: #339933;";/span span style="color: #009900;"#125;/span/pre/div/p pHere we create a basic entity called emexample/em and specify span class="geshifilter"code class="geshifilter-php"ExampleEntityController/code/span as the controller. We cannot specify the default controller provided by core because it only has the load operation. But, we can extend the default controller allowing us to use everything it has and add our own additional methods./p pdiv class="geshifilter"pre class="php geshifilter-php" style="font-family:monospace;"span style="color: #000000; font-weight: bold;"class/span ExampleEntityController span style="color: #000000; font-weight: bold;"extends/span DrupalDefaultEntityController span style="color: #009900;"#123;/span nbsp; span style="color: #000000; font-weight: bold;"public/span span style="color: #000000; font-weight: bold;"function/span savespan style="color: #009900;"#40;/spanspan style="color: #000088;"$entity/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #339933;".../span span style="color: #009900;"#125;/span nbsp; span style="color: #000000; font-weight: bold;"public/span span style="color: #000000; font-weight: bold;"function/span deletespan style="color: #009900;"#40;/spanspan style="color: #000088;"$entity_ids/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #339933;".../span span style="color: #009900;"#125;/span nbsp; span style="color: #000000; font-weight: bold;"public/span span style="color: #000000; font-weight: bold;"function/span createspan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #339933;".../span span style="color: #009900;"#125;/span span style="color: #009900;"#125;/span/pre/div/p pThe pattern in Drupal is to have functions for the CRUD operations. For example, node has node_load, node_save, and node_delete. In keeping form with these we should create span class="geshifilter"code class="geshifilter-php"example_load/code/span, span class="geshifilter"code class="geshifilter-php"example_load_multiple/code/span, span class="geshifilter"code class="geshifilter-php"example_save/code/span, span class="geshifilter"code class="geshifilter-php"example_delete/code/span, and span class="geshifilter"code class="geshifilter-php"example_create/code/span functions that call back to the controller. For the most part these functions should be pretty simple. For example,/p pdiv class="geshifilter"pre class="php geshifilter-php" style="font-family:monospace;"span style="color: #000000; font-weight: bold;"function/span example_savespan style="color: #009900;"#40;/spanspan style="color: #000088;"$entity/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #b1b100;"return/span entity_get_controllerspan style="color: #009900;"#40;/spanspan style="color: #0000ff;"'example'/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;"-gt;/spanspan style="color: #004000;"save/spanspan style="color: #009900;"#40;/spanspan style="color: #000088;"$entity/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #009900;"#125;/span/pre/div/p pCalling span class="geshifilter"code class="geshifilter-php"entity_get_controllerspan style="color: #009900;"#40;/spanspan style="color: #0000ff;"'example'/spanspan style="color: #009900;"#41;/span/code/span returns the controller for that entity. In this case we call the save method and pass in the entity object to be saved. The idea is that the crud functions simply pass though the functionality to the controller./p h2Why not Entity Module?/h2 pThe a href="http://drupal.org/project/entity" title="Entity Drupal module"Entity Module/a is attempting to provide a base to do something like this and more. But, it does a lot more than provide a pattern for swappable operations. It introduces Entity objects, the a href="http://en.wikipedia.org/wiki/Facade_pattern" title="Wikipedia: Facade Pattern"facade pattern/a, and more. At this point I'm not ready to recommend its approach./p pHow we go about advancing entities beyond pluggable operations still seems to be under a bit of healthy debate. This post shows the first step in a better direction. There will be more to follow as the healthy discussion turns into solid approaches./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/dYR3zG61RLc" height="1" width="1"/

pa href="http://acko.net/blog/farbtastic-1-2-out" title="Farbtastic 1.2 out"Farbtastic 1.2 was released years ago/a. In that time a href="http://jquery.org"jQuery/a has changed creating a need for farbtastic to change as well. For example, internal logic in farbtastic was calculating the offset but changes in jQuery caused it to not calculate it accurately in all cases. Switching to the a href="http://docs.jquery.com/CSS/offset"jQuery.offset/a method, which was added after the release of farbtastic 1.2, fixed the problem./p pSo, when I recently moved a href="http://engineeredweb.com/blog/10/2/farbtastic-dead-long-live-farbtastic" title="Farbtastic is Dead, Long Live Farbtastic"Farbtastic over to GitHub to continue development/a I created a tag called a href="http://github.com/mattfarina/farbtastic/tree/1.3u"1.3u/a em(the u stands for unofficial)/em containing updates that were already being using in production sites./p pThe complete list of changes, from the changelog are:/p ul liUpdated style to use anonymous function wrapper per a href="http://docs.jquery.com/Plugins/Authoring#Custom_Alias" title="http://docs.jquery.com/Plugins/Authoring#Custom_Alias"http://docs.jquery.com/Plugins/Authoring#Custom_Alias/a./li liNow it uses the .offset() method available as of jQuery 1.2.x./li liWorks with JavaScript aggregators and compressors./li /ul pa href="http://github.com/mattfarina/farbtastic/downloads"Downloads are available by tag on Github/a./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/pnkV8ziveLQ" height="1" width="1"/

pAs a href="http://git-scm.com" title="Git - Fast Version Control System"Git/a becomes more popular and widely used a a href="http://en.wikipedia.org/wiki/Graphical_user_interface" title="Wikipedia: Graphical User Interface"GUI/a becomes even more important. This was especially important when a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a recently looked at what version control system it was going to switch to. em(If you're interested in the a href="http://groups.drupal.org/node/48818?page=2#comment-133893" title="Evaluation discussion for how to move Drupal.org off of CVS"Drupal (unofficial) decision checkout Angie Byrons post on groups.drupal.org/a)/em/p pWhen I surveyed the Git GUI landscape a href="http://www.syntevo.com/smartgit/index.html"SmartGit/a stood above the rest for your standard user./p pimg src="http://img.skitch.com/20100218-cdxm1aubspnrdii3wa4hmypkr2.jpg" alt="SmartGit" class="image-border" /br / !--break--/p h2For Your Average User/h2 pGit is an extremely powerful program. Powerful enough that there is a manual called a href="http://eagain.net/articles/git-for-computer-scientists/"Git for Computer Scientists/a which dives in really deep. There are advanced features within Git that I can't imagine how to build a GUI for./p pThat being said, the common features that most of us use can be easily encapsulated in a GUI and SmartGit does just that. For a typical user, including front end developers, weekend warriors, and anyone who just doesn't need the advanced abilities, you have access to it with SmartGit./p pAnd, strongsince it was written in Java it runs on Macs, Windows, and Linux./strong/p h2GitHub Integration/h2 pThe most popular site for public Git repos is a href="http://github.com"Github/a. The interface is slick, the documentation is easy to understand, and it just works. This is where projects like jQuery and TinyMCE are hosted./p pSmartGit provides integration with Github./p pimg src="http://img.skitch.com/20100219-tfse78yjnb926865ce1wc5sg33.jpg" alt="SmartGit" class="image-border" //p pIf you've provided your Github login information into SmartGit clicking on "Select from Github..." will bring up the list of projects you have on Github and let you clone them to your local system to work on them./p h2Paying For Commercial Use/h2 pSmartGit is not an open source project and it is not free for anyone to use. It's free for non-commercial use but, a href="http://www.syntevo.com/smartgit/purchase.html" title="Purchase SmartGit Commercial Licenses"for commercial use you need to pay for a license/a./p pIf you want a GUI for commercial use but are looking to only use Open Source or free software there are alternatives. For your average user none of them is as nice./p pI've had the chance to use several Git GUIs. Many of them are great at what they do but are not right for your typical user. SmartGit hits that sweet spot./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/ApZY1KsBOj0" height="1" width="1"/

pMany of the projects I work on are not appropriate for public a href="http://en.wikipedia.org/wiki/Revision_control" title="Wikipedia: Revision Control"version control systems/a like a href="http://github.com"Github/a or a href="http://sourceforge.net/" title="Find and Develop Open Source Software"Sourceforge/a. They might be client projects or code I am tinkering with but am not sure what I'll eventually do with. In these cases it's good to have a private version control site. Since I am now a a href="http://git-scm.com" title="Git - The Fast Version Control System"Git/a user that server needs to be Git based. Luckily there are a couple great choices.br / !--break--br / The two prime candidates for personal Git servers are gitosis and gitolite. Where they differ is in the launguage they are written in and how they handle repo permissions./p h2Gitosis/h2 pa href="http://scie.nti.st/2007/11/14/hosting-git-repositories-the-easy-and-secure-way" title="Hosting Git repositories, The Easy (and Secure) Way"Gitosis/a has been around longer than Gitolite but has fewer access controls./p pPermissions are handled on a per repo basis. Each user has their public ssh key stored in gitosis config. Then each repo has a list of users associated with it. These users can read and write to the repo. It's that simple./p pAdditionally, individual repos can be set to allow anonymous user checkouts./p pIf you don't have complex access rules Gitosis may be great for you./p h2Gitolite/h2 pa href="http://github.com/sitaramc/gitolite"Gitolite/a started out as a souped up version of Gitosis. The original goal was to add per branch permissions. From there it changed languages and grew into something with more features with more fine grained permissions./p pIf you have complex access rules Gitolite might be more up your alley./p h2Gitweb/h2 pa href="http://git.wiki.kernel.org/index.php/Gitweb"Gitweb/a is the de-facto standard web GUI for git. So much so that it is now included in the Git source code. Gitweb is a perl script enabling you to view the repos on a server./p pBoth Gitosis and Gitolite integrate with Gitweb. For example, you can tell Gitweb to only display the public repos and the ones that anonymous users can't access are not displayed./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/MmV-DB8kD9Q" height="1" width="1"/

pI recently switched to a href="http://git-scm.com/" title="Git - Fast Version Control System"Git/a to manage the source code for projects I work on. I still use a href="http://en.wikipedia.org/wiki/Concurrent_Versions_System" title="Wikipedia: Concurrent Versions System"CVS/a to manage a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a modules on drupal.org and a href="http://en.wikipedia.org/wiki/Subversion_(software)" title="Wikipedia: Subversion"SVN/a for many client projects. But, when I have a choice I choose Git./p pGit, for those of you who don't know, is one of the most popular a href="http://en.wikipedia.org/wiki/Distributed_revision_control" title="Wikipedia: Distributed Version Control System"Distributed Version Control Systems/a (DVCS). A DVCS can be used in a traditional central repo style setup or a distributed approach. For more details checkout the a href="http://en.wikipedia.org/wiki/Distributed_revision_control" title="Wikipedia: Distributed revision control"Wikipedia article on Distributed Version Control/a.br / !--break--/p h2Why I Switched To Git/h2 pWhen I initially started using a DVCS and moved away from SVN I turned to a href="http://bazaar.canonical.com/" title="Bazaar Distributed Version Control System"Bazaar/a. It was easy to switch to bzr because the syntax is similar to SVN and the basic usage is fairly straight forward and simple. I knew git was powerful but the lack of good Windows support left me wanting something that could be used more universally. That is no longer a problem thanks to a href="http://code.google.com/p/msysgit/" title="msysgit - Git on Windows"msysgit/a./p pWhat caught my attention about Git wasn't so much the impressive technology. It was the community surrounding Git. If I wanted a tutorial, application to interface with it, hosting service, or most other things I wanted in a version control system, it was there for Git./p h2Tutorials To Help With Switching/h2 pGit does things very differently than other version control systems. Sometimes this is due to the features and other times it's just because Git wants to do its own thing. In some cases it is quite annoying. Especially when the command to do something in CVS or SVN simply has a different name in Git. Needless to say, the Git learning curve can be more than a little steep./p pThanks to the wonderful Git community there is more than one tutorial on the topic:/p ul lia href="http://www.gitready.com/" title="git ready - learn git one commit at a time"Git Ready/a - Learn git one commit at a time./li lia href="http://learn.github.com"Learn Git/a - How to with git from the people at github./li lia href="http://www.kernel.org/pub/software/scm/git/docs/everyday.html" title="Git in 20 Commands"Everyday Git/a - Git in 20 Commands/li /ul pIf you're looking to make a version control change or want to jump on the bandwagon of coming changes git Git a try./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/BbYxtfM0p5c" height="1" width="1"/

pQuite a few a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a modules rely on outside libraries to work. Some are JavaScript based requiring outside plugins and others are based on outside libraries. When users install these modules they, also, have to download and install the outside library. This is a pain that a href="http://drupal.org/project/drush"drush/a a href="http://drupal.org/project/drush_make" title="Drush Make Drupal Module"make/a and the a href="http://drupal.org/project/libraries" title="Drupal Libraries API Module"Libraries API/a in modules can help with./p pA typical setup will have a a href="http://drupal.org/project/drush_make" title="Drush Make Drupal Module"drush make/a file with a project and associated libraries defined within in them. The author who puts together the profile or top level make file will need to know the library and where it needs to go./p pA little known feature about drush make files is that all projects can have make files and drush recursively builds each one out. So, if a module has a make file and the module is included in another make file the modules make file will be executed as well.br / !--break--br / A simple use could be a module that uses an outside JavaScript library. That module could define a ModuleName.make file telling drush to download the library. A good solution would be to tell the script to go to the libraries directory alongside the modules and themes directories. Then, the module could use the Libraries API to grab the libraries location./p h2An Example/h2 pIn this example we have the Super Awesome module using the awesome JavaScript file. So, in superawesome.make, which sits alongside superawesome.module, we have something like:/p pdiv class="geshifilter"pre class="text geshifilter-text" style="font-family:monospace;"core = 6.x nbsp; ; Libraries libraries[awesome][download][type] = quot;getquot; libraries[awesome][download][url] = quot;http://example.com/awesome.js.zipquot; libraries[awesome][directory_name] = quot;awesomequot; libraries[awesome][destination] = quot;librariesquot;/pre/div/p pThis will tell drush to download the awesome library and stick it in a directory called awesome within the libraries folder. The libraries folder could be in profiles/profileName, sites/all, or sites/someSiteName.com. Since the file has the zip extension drush will know how to unzip it as well./p pSince the files could be placed in one of several places we can use the Libraries API. To get the path in our module we can use the following:/p pdiv class="geshifilter"pre class="php geshifilter-php" style="font-family:monospace;" span style="color: #000088;"$path/span span style="color: #339933;"=/span libraries_get_pathspan style="color: #009900;"#40;/spanspan style="color: #0000ff;"'awesome'/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span/pre/div/p h2Some Things You Should Know/h2 pThere are two issues to be aware of with this approach./p ul liIf a project (modules or theme) is included in a make file but already exists elsewhere (like a profile or site make file) you'll get an error. Drush make doesn't, currently, handle a project being defined more than once./li liIf there are only libraries and no projects defined in a make file a warning will be thrown. Everything works as expected. There is just a one line warning for each make file without a project./li /ul h2But, Is This A Good Idea?/h2 pDoing something like this would move control from profile builders to module developers. So, we need to ask if this control shift is a good idea? At this point I'm not clear on the answer./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/VC7mcdDRZkE" height="1" width="1"/

pFarbtastic is one of those widely used a href="http://jquery.com"jQuery/a plugins you may not have realized you were using. One place many people have seen it in action is on a href="http://twitter.com"Twitter/a. If you've changed the colors on your twitter page and used the color wheel to select the color you've used it. Farbtastic is the color wheel in Twitter, a href="http://identi.ca"identi.ca/a, a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a, a href="http://wordpress.org" title="Wordpress - Blog Tool and Publishing Platform"Wordpress/a, and many other tools and services. While farbtastic is widely used it does have one major problem. Farbtastic is dead. The latest release of Farbtastic is version 1.2 written to work with jQuery 1.0. a href="http://blog.jquery.com/2006/07/18/jquery-color-picker/" title="jQuery Color Picker"Remember how long ago that was?/abr / !--break--/p h2Why Farbtastic is Great/h2 pColor wheels are a great way to select colors. Different spots on the wheel have different meanings. For example, If you pick a base color and want to find a complimentary color you jump to another part of the color wheel to find it. This is a href="http://en.wikipedia.org/wiki/Color_theory" title="Wikipedia: Color theory"color theory/a and color theory uses color wheels./p pFor people who don't know color theory or care about it the color wheel is a neat way to select the color./p h2Why Farbtastic is Dead/h2 pa href="http://acko.net"Steven Wittens/a, the original author, wrote farbtastic for Drupal. As many people know, he is no longer actively contributing to the project and this plugin fell by the way side. With the a href="http://acko.net/dev/farbtastic" title="Farbtastic: jQuery color picker plug-in"official site for the plugin/a being his personal site it was difficult for someone else to take over./p pSome time ago I approached Steven about moving the codebase to Google Code. It was moved a href="http://code.google.com/p/farbtastic" title="Farbtastic on Google Code"there/a, updates we had been using in Drupal to keep up with newer releases of jQuery were incorporated, and Steven even wrote a 2.x version that utilizes canvas to draw the color wheel. It seemed like a resurrection of the plugin./p pBut, Steven is a very busy and talented developer. He became busy and farbtastic fell to the side again. The 1.3 release, that's already used on numerous production sites, never happened and the 2.x version was never shared with the world./p h2Long Live Farbtastic/h2 pFarbtastic is still strongly in use and the version used by Drupal has been tested to work with jQuery 1.2.6+. that includes the new jQuery 1.4. In an effort to share this I've migrated the codebase from the SVN repository on Google Code to Github. Please use it, fork it, and grow it./p ul lia href="http://github.com/mattfarina/farbtastic"Farbtastic on Github/a/li lia href="http://mattfarina.github.com/farbtastic/"Farbtastic Demos/a/li /ulimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/ekaOQZBMrxk" height="1" width="1"/

pI recently saw something terrible happen again. Another website was stronghacked/strong with a very simple attack. An attack that's been used time and time again. It was a brute force attack trying common usernames and passwords. This is annoying to have to fix, trouble when the server or site is being used for something malicious, and the users feel terrible for being the cause with their weak passwords. strongThere is something we can do about it./strong We can put password strength testers everywhere someone sets a new password or changes an existing one. Let users know the passwords are weak and what they can do to make them stronger.br / !--break--/p h2What Users Don't Know/h2 pPeople who build websites and maintain networks know that strong passwords make a difference. We know different ways sites and services are attacked and that a strong password makes it harder for an account to be hacked./p pEveryday users don't know that strong passwords make a real difference. They may have heard about it but they aren't in the business of websites so they don't typically see the difference. If anything they know that complicated passwords are a nuisance because they are hard to remember./p pWhat users don't know can hurt them and you. A persons information may be maliciously obtained or a server hacked and you may have to fix it. One step in the right direction is password strength testers. Let users know, while they are typing in a password, how they can make it better./p h2Existing Plugins/h2 pThis is a common enough problem that there are plenty of free and open source scripts that already provide this functionality. Here are a few:/p ul lia href="http://bassistance.de/jquery-plugins/jquery-plugin-password-validation/" title="jQuery plugin: Password Validation"jQuery Plugin: Password Validation/a - Provides a password strength meter where the algorithm can be overridden as well as the messages making it well suited for internationalization./li lia href="http://riderdesign.com/articles/Password-strength-validation-with-jQuery.aspx" title="jQuery Password Strength Meter"jQuery Password Strength Meter/a - provides a highly configurable plugin where all the options to use in rating strength can be passed in as arguments./li lia href="http://mypocket-technologies.com/jquery/password_strength/"jQuery Password Strength Tester/a - A simple and lightly configurable password strength meter./li /ul pWhether you use one of these scripts, another script, or one of the many tutorials available on how to write something like this please consider putting password strength meters everywhere. They can make a difference./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/N_bdX1LkWZM" height="1" width="1"/

pOut of the box, a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a puts em(not verified)/em next to user information for anonymous users. For example, when an anonymous user submits a comment em(not verified)/em appears next to their name. This is handy for community sites where you need to distinguish between who is a member and who isn't. For sites, like a single user blog, the em(not verified)/em doesn't fit. So, one of the first things I do when a fresh new major release of Drupal comes along is learn how to remove the em(not verified)/em.br / !--break--br / In past versions of Drupal a href="http://www.mattfarina.com/2007/04/12/removing-not-verified-anonymous-users" title="Removing the (not verified) for Anonymous Users"removing the em(not verified)/em happened thought the theme system/a and theme_username. When I took a look inside theme_username in Drupal 7 I found it had been entirely rewritten and there was no sign of em(not verified)/em. Luckily, I didn't need to trace through the code to figure out where to remove it. This is such a common change there is now a setting for it./p pTo get to the setting go to strongAppearance/strong in the navigation and then click on strongsettings/strong for the theme you want to remove it from.br / img src="http://img.skitch.com/20100119-nynbpausm2hpst16psegqe14ja.png" alt="Drupal 7 Appearance" class="image-border" //p pScroll down to the strongToggle Display/strong section and uncheck strongUser verification status in comments/strong. Click on strongSave configuration/strong at the bottom to save the changes and you're done.br / img src="http://img.skitch.com/20100119-gsd39255skkdx5f1henbs6r54r.png" alt="Welcome to localhost | localhost" class="image-border" //p pIf you have multiple themes and want to disable the em(not verified)/em in all of them you can do that in the Global settings. The setting is in the same place as an individual theme on the Global settings page.br / img src="http://img.skitch.com/20100119-j9k4hi7ux3ufjgkn4m7jxdp983.png" alt="Welcome to localhost | localhost" class="image-border" //pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/3eAkBZXSDUw" height="1" width="1"/

pstrongThe admin area of a a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a site should be themed differently according to recent usability research./strong The idea is that an admin or a content editor needs the context that they are doing admin functions, which an admin theme can provide. The concept of having an admin theme is different for many Drupalers. While numerous Drupal shops have been using them for quite some time, a lot of discussion has focused on using the theme for the site in the admin area. Drupal 7 is embracing admin themes by using one and taking the admin area to a whole new level. But, we don't have to wait for Drupal 7 to have a smoking hot admin theme. Let's take a look at 3 good admin themes for Drupal 6.br / !--break--/p h2Rubik/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/images/hot-designs/rubik.jpg" width="598" height="309" alt="rubik.jpg" class="image-border" /br / a href="http://github.com/developmentseed/rubik" title="Rubik Drupal Theme"Rubik/a is a theme created by a href="http://developmentseed.org" title="Development Seed"Development Seed/a and hosted on a href="http://github.com" title="Github"Github/a. For it to work properly you, also need the a href="http://github.com/developmentseed/tao" title="Tao Drupal Base Theme"Tao/a base theme. One of the great things about about Rubik is the icon queues to different actions. Some people think visually and the icons help them do just that./p h2Seven/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/images/hot-designs/Seven.jpg" width="598" height="281" alt="Seven.jpg" class="image-border"/br / a href="http://drupal.org/project/seven" title="Seven Drupal Theme"Seven/a is the admin theme that ships with Drupal 7. It was designed by a href="http://www.markboulton.co.uk/"Mark Boulton/a and a href="http://www.disambiguity.com/"Leisa Reichelt/a as part of the d7ux effort. a href="http://mikethecoder.com/"Mike Crittenden/a back ported it to Drupal 6 so we can use it now. Seven is a very clean and accessible theme./p h2RootCandy/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/images/hot-designs/RootCandy.jpg" width="598" height="317" alt="RootCandy.jpg" class="image-border" /The a href="http://drupal.org/project/rootcandy" title="RootCandy Drupal Theme"RootCandy/a admin theme by a href="http://sotak.co.uk/"Marek Sotak/a has been around the longest and is the most customizable. It comes bundled with 3 themes, color module support, and more./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/KNRn_SVe8wk" height="1" width="1"/

pa href="http://dev.mysql.com/"MySQL/a has been my database of choice for a long time. Just about every host supports it and it meets the requirements for just about every project I work on. When I've needed to be in the database to make changes during development I've used numerous programs over the years. Some of those have included a href="http://www.phpmyadmin.net"phpMyAdmin/a, a href="http://www.minq.se/products/dbvis/"DBVisualizer/a, and the command line. Now that my full time development is on a Mac I've switched to a href="http://www.sequelpro.com/"Sequel Pro/a when I need to work in the database.br / !--break--/p h2It's Free/h2 pSequel Pro is a free, a href="http://www.sequelpro.com/legal.html" title="Sequel Pro Legal Info"as in GPL/a, MySQL a href="http://en.wikipedia.org/wiki/Graphical_user_interface" title="Wikipedia: Graphical User Interface"GUI/a program for Macs. /p h2It's Slick and Fast/h2 pimg src="http://img.skitch.com/20100110-x2t4h1wnnmi7di226b2bc1hje1.jpg" width="598" alt="Sequel-Pro.jpg" class="image-border"/br / Sequel Pro is a native Mac application, looks like it, and feels like it. In the recent past I had been using phpMYAdmin as my Mac GUI. Sequel Pro is quite a bit faster. There is a noticable difference between phpMyAdmin running in a development environment and a native Mac application./p h2It's Just The Basics/h2 pSome of the other GUI tools I use with MySQL offer a lot of features. They are great for building out database schemas, performance monitoring and tuning, and digging into the of using databases. For most of us, these features aren't needed on a regular basis. Sequel Pro only has the regularly used features providing for a dead simple interface. The feature set is about the same as phpMyAdmin and anyone used to the phpMyAdmin interface should be able to switch with ease./p pSpecial thanks to Bob Christenson at a href="http://mustardseedmedia.com/"Mustardseed Media/a for sharing this application with me./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/DVAZGmOBTGo" height="1" width="1"/

pOver the past year the number of good looking freely available a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a themes has really gone up. Yet, I am still amazed at how many sites are still using Garland as their theme. Especially the personal sites of so many Drupal developers. Don't get me wrong, Garland is a great theme. It's just a very well used theme which means its lost some of it's luster. So on the heels of my post about ema href="http://engineeredweb.com/blog/10/1/5-hot-free-drupal-6-themes" title="5 Hot and Free Drupal 6 Themes"5 Hot and Free Drupal 6 Themes/a, /emhere are 5 more well designed themes for your usage considerations.br / !--break--/p h2Notechoas/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/hot-designs/Notechoas-598x270.jpg" width="598" alt="Notechoas.jpg" class="image-border"//p pThe design for a href="http://drupal.org/project/notechaos" title="Notechaos Drupal Theme"Notechaos/a started it's life as a a href="http://wordpress.org" title="Wordpress - Blog Tool and Publishing Platform"Wordpress/a theme. It was designed by a href="http://www.evaneckard.com/"Evan Eckard/a. a href="http://plusplusweb.com/" title="Web++"Web++/a converted the design to Drupal./p h2Cleanfolio/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/hot-designs/cleanfolio-598x462.jpg" width="598" alt="cleanfolio.jpg" class="image-border"/br / a href="http://drupal.org/project/cleanfolio" title="Cleanfolio Drupal Theme"Cleanfolio/a is another theme by a href="http://plusplusweb.com/" title="Web++"Web++/a and the design originally came from a href="http://psdho.me/themes/clean-portfolio-psd-file.html"designmag/a./p h2Skyroots/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/hot-designs/Skyroots-598x311.jpg" width="598" alt="Skyroots.jpg" class="image-border" /br / The design for a href="http://drupal.org/project/skyroots" title="Skyroots Drupal Module"Skyroots/a is a design right out of the a href="http://www.csszengarden.com/?cssfile=123/123.css" title="CSS Zen Garde"CSS Zen Garden/a. a href="http://www.sonnenvogel.com/""Axel Hebenstreit/a, the original designer, provided permission for the design to be converted into a Drupal theme. a href="http://www.gopala.org/"Ekendra Dasa/a created the theme./p h2Celadon/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/hot-designs/celadon-598x524.jpg" width="598" alt="celadon.jpg" class="image-border" /br / The a href="http://drupal.org/project/celadon" title="Celadon Drupal Theme"Celadon/a design was originally created by a href="http://www.themesboutique.com" title="Themes Boutique"Themes Boutique/a and ported to Drupal by a href="http://www.sandianstudio.com/" title="Sandian Studio"Sandian Studio/a./p h2Fervens/h2 pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/hot-designs/Fervens-598x280.jpg" width="598" alt="Fervens.jpg" class="image-border" /br / a href="http://drupal.org/project/fervens" title="Fervens Drupal Theme"Fervens/a Was originally created by a href="http://designdisease.com/" title="Design Disease"Design Disease/a and brought to us by a href="http://www.smashingmagazine.com/" title="Smashing Magazine"Smashing Magazine/a. The Drupal port was done by a href="http://kahthong.com" title="Leow Kah Thong"Leow Kah Thong/a./p pDo you have a favorite hot and free Drupal theme? If so, I'd love to hear about it in the comments below./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/1YCdgGPOFEM" height="1" width="1"/

pa href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a has long been known as a CMS with few good free themes and even fewer that anyone would call hot. While there have been many great sites built with Drupal the lack of hot free themes has long been discouraging. That is, until recently. Over the past year there has been a boom in hot free Drupal themes so here are 5 of them that recently caught my eye.br / !--break--br / emNote: Each of these themes has a demo site that can be viewed from their project pages./em/p h2Dark Elegance/h2 pimg src="/sites/engineeredweb.com/files/resize/remote/23039eab5a9e05ca7474555fbb9495fa-250x173.png" alt="Dark Elegance" width="250" class="float-left image-border"/a href="http://drupal.org/project/darkelegance " title="Dark Elegance Drupal Theme"Dark Elegance/a is a good looking dark background theme with a nice looking header. If you want to modify that for your taste a PSD of the header is provided./p pThe white background in the content area makes it easy for content consumers to zoom in on the main piece of content in the page and everything looks to be nicely themed right down to the form elements and buttons./p pThis theme was provided by a href="http://dezinerfolio.com/" title="Dezinerfolio"Dezinerfolio/a./p div class="clearfix"/div h2Elements Theme/h2 pimg src="/sites/engineeredweb.com/files/resize/remote/5cd28173bd4dbd23aafec4c7a410e291-250x172.png" alt="Nicolas Borda's portfolio | Freelance Drupal Themer, Free Drupal Themes" width="250" class="float-left image-border"/The design for the a href="http://drupal.org/project/elements_theme" title="Elements Drupal Theme"Elements Theme/a started as a design by a href="http://www.press75.com/" title="Press75.com"Jason Schuller/a for his WP Elements website. Thankfully, a href="http://nic.ipwa.net/" title="Nicolas Borda"Nicolas Borda/a ported the theme to Drupal for us./p pAn interesting feature in this theme is the main navigation. Its more than just a set of links and is displaying the main navigation in a manner that's turning into a new trend./p pThis module does feature integration with Version 1 of the a href="http://drupal.org/project/admin" title="Admin Drupal Module"Admin Module/a./p div class="clearfix"/div h2Strange Little Town/h2 pimg src="/sites/engineeredweb.com/files/resize/remote/c903c760fe7bb40b9fcd7ad05bdaba87-250x194.png" alt="Blogs | Drupal Strange Little Town" width="250" class="float-left image-border"/The name is what caught my attention in the a href="http://drupal.org/project/strange_little_town" title="Strange Little Town Drupal Theme"Strange Little Town/a theme. That and all the pink./p pIf you are wondering why the name is Strange Little Town you need to look no further than the bottom of the page in the a href="http://studio.webzer.net/drupal/strange.little.town/" title="Strange Little Town Demo Site"demo/a to find the town. For some reason it reminds me of the Cat in the Hat crossed with the Nightmare Before Christmas./p pThe design was created by a href="http://magical.nu/"Magical.nu/a and ported to Drupal by a href="http://webzer.net/"Webzer.net/a./p div class="clearfix"/div h2Ebizon RedFire/h2 pimg src="/sites/engineeredweb.com/files/resize/remote/2182ee42c88da1ed6e8cd76eb96ad605-250x211.png" alt="Redfire 2013 Free CSS template" width="250" class="float-left image-border" /a href="http://drupal.org/project/ebizon_redfire" title="Ebizon RedFire Drupal Theme"Ebizon RedFire/a is a very clean Drupal theme. The kind of theme I could see a small business or a professional blog using. The simple design is in contrast to the previous ones posted here. Simple can be hot and eye catching and this is./p pThis theme reminded me that good design isn't about graphics or cramming flashy elements into a site. Good design helps to convey the content on the site. The clean design here looks good and easily gets out of the way of the content./p pThe design is by a href="http://www.davidkohout.cz"David Kohout/a and turned into a Drupal theme by a href="http://ebizontek.com" title="http://ebizontek.com"http://ebizontek.com/a./p div class="clearfix"/div h2Gardening/h2 pimg src="/sites/engineeredweb.com/files/resize/remote/f5ad2cce55b275893cfe52c1a6d9e98d-250x167.png" alt="Drupal Playground" width="250" class="float-left image-border" /a href="http://drupal.org/project/gardening" title="Gardening Drupal Theme"Gardening/a is a beautifully designed theme./p pIn this theme virtually everything is given a graphic treatment providing for a fluid design from top to bottom. It starts at the flowers and skyline and the top, flowing down the brick wall, to the vines that come up from the bottom providing a treat for anyone who makes it to the bottom./p pThe design was originally created for a href="http://wordpress.org" title="Wordpress - Blog Tool and Publishing Platform"Wordpress/a by a href="http://www.ezwpthemes.com/"EZwpthemes /a and ported to Drupal by a href="http://www.azridesign.com/"Azri Design /a/pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/jQYTBiyhhGg" height="1" width="1"/

pa href="http://twitter.com/Amystephen" title="Amy Stephen on Twitter"Amy Stephen/a recently posted on twitter how much a href="http://www.wordpress.org" title="Wordpress - Blog Tool and Publishing Platform"Wordpress/a rocks. My gut reaction wanted me to respond by saying I was less than impressed with Wordpress. Instead I asked a question. How do we go about evaluating a a href="http://en.wikipedia.org/wiki/Content_management_system" title="Wikipedia: Content Management System"content management system/a? Amy came to one conclusion and I came to a very different one which means our evaluation criteria must be miles apart. In response to that question, here is my take on how you evaluate a content management system.br / !--break--/p h2Slick User Experience/h2 pA solid CMS needs a good user experience for content viewers, content managers, and site admins. When new features are added on the user experience needs to remain consistent and good./p pSadly, this is where most evaluations end. A tool is found that looks and feels good and that's the end of the story. But, there is more thats important to both general users and to developers./p h2Security/h2 pIf I were using a non-web enabled desktop application I wouldn't be so concerned with security. But a CMS isn't just a web enabled application, it's an application serving up the web all the time on a remote machine where the world can access it. /p pTo make matters worse, there are hackers who like to take down sites for fun. A single hacker can take down thousands of sites in a week because so many web enabled tools have such easy holes to exploit./p pSecurity is important. How a CMS handles security is important. How a CMS responds to issues is important. I look for a security methodology, a security team, and good security practices. Even if you just want to install a CMS and not develop on it security should be a concern./p h2Architecture and ilities/h2 pIf you're going to develop using a tool the architecture and ilities (a href="http://en.wikipedia.org/wiki/Maintainability" title="Wikipedia: Maintainability"maintainability/a, a href="http://en.wikipedia.org/wiki/Accessibility" title="Wikipedia: Accessibility"accessibility/a, and a href="http://en.wikipedia.org/wiki/Software_testability" title="Wikipedia: Software Testability"testability/a) should be of concern. For every tool there is a different architecture and there is no one right answer. But, there are bad ideas and bad practices./p pFor example, an architecture that isn't separated into layers (logic, data model, and presentation) should be a concern. Or, an architecture that doesn't have a good interface to plug in features is a problem. Hacking a feature into a template is never a good idea./p pSo, how does your CMS of choice stack up? Did you look beyond the UX when you chose it?/pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/YogQdwk6weM" height="1" width="1"/

pWith so many great and award winning content management systems on the market it can be difficult to choose the right one for a project or for a company to use as the basis for its sites. It's a big enough topic that a href="http://www.packtpub.com/article/how_to_choose_an_open_source_content_management_system" title="How to Choose an Open Source Content Management System"articles have been written/a and a href="http://www.amazon.com/gp/product/1847196225?ie=UTF8amp;tag=engiweb-20amp;linkCode=as2amp;camp=1789amp;creative=390957amp;creativeASIN=1847196225"books published on the topic/a. But, I think there is a more basic decision that needs to be made before the selection can be considered. One that tells you about your plans for using the system./p pIn the current state of CMS you can't a href="http://en.wikipedia.org/wiki/Have_one's_cake_and_eat_it_too" title="Wikipedia: Have one's cake and eat it too"have your cake and eat it, too/a. That is, you can't have everything you may want out of the box. You need to make a base decision about what you want. Basically, choose two of the following three:/p ul liFlexibility/li liSlick UI/li liInstall and Setup Ease/li /ul pLet's take a look a couple real world examples using a href="http://wordpress.org/" title="Wordpress - Blog Tool and Publishing Platform"Wordpress/a and a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a.br / !--break--/p h2The Slick UI/h2 pWordpress has a slick user interface. One that is referred to for comparison with other tools. It has a feel that people like to use. But, when Wordpress was in the a href="http://www.cmsshowdown.com/" title="The Ultimate Showdown of Content Management System Destiny"CMS Showdown/a at SXSW the evaluators thought Wordpress had the least intuitive UI. How can that be?/p pWordpress is targeted at blogging and simple publishing. The UI was designed for this and done quite well. In making those assumptions flexibility was greatly reduced in the UI. This is a good thing for a blog or simple publishing site. When Wordpress was extended, for the competition, in directions other than it's core competencies (increasing flexibility) the UI became less intuitive (decreased slickness of the UI)./p pWhat makes a UI feel slick to the users is one that knows something about what they are doing and making what they need to do easy. In order to do that the tool must know what the users are doing. The more assumptions the tool can make the slicker the UI can be./p h2Setup Out Of The Box/h2 pImagine you wanted to build a company Intranet using a CMS. This is a fairly targeted tool. If you were to build it from the ground up with Drupal the two chosen from the list would be flexibility and slick UI. In order to use the flexibility and slick UI in Drupal to build out a system like this it will take quite a bit of setup time. This is because Drupal makes less assumptions than a tool like Wordpress so those assumptions need to be entered in the form of setup and configuration./p pIf you want proof of that take a look at a tool like a href="http://openatrium.com/" title="Open Atrium - Part intranet, part do-it-yourself project with a kick of open source hotness"Open Atrium/a. This takes advantage of the flexibility and slick UI of Drupal but took a lot of setup and config time to get to where it is now./p pThis is, also, where a nice twist happens. Installing Atrium is fairly easy because the installation and setup is handled by an installer. Don't you get all three in one box because the a href="http://drupal.org/project/installation+profiles" title="Drupal Install Profiles"install profile/a takes care of the setup and config?/p pAtrium makes assumptions about what you want to do in an Intranet and how to extend it. In order to deviate from that setup you have an increased time to setup the site. The more flexibility you want to take advantage of the more time to setup the site. In essence atrium takes advantage of the slick ui and ease to install and setup./p h2How Do The Big Boys Stack Up?/h2 pAfter you choose two of these the next question is which one stacks up best for your needs? That's the topic for a follow-up post. Stay tuned or subscribe to receive the post when it comes out./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/R7pxyCzV2lE" height="1" width="1"/

pimg src="http://engineeredweb.com/sites/engineeredweb.com/files/resize/images/spam-125x125.jpg" width="125px" alt="spam.jpg" class="image-border float-right" /a href="http://en.wikipedia.org/wiki/Spam_in_blogs" title="Wikipedia: Spam in blogs"Comment spam/a seems inevitable. Every blog, podcast, or site that I've run that allowed comments turned into a place for comment spam. Over the years I've tried numerous methods to kill the spam and most of them either didn't work very well or stole too much of my time to deal with something annoying. After dealing with this problem for several years I now have a setup that manages most comment spam with little work on my part.br / !--break--/p h2Mollom or reCapthca/h2 pAll users you can comment who have not gone though some kind of account registration with email verification have a filtering mechanism. My go to solution is a href="http://www.mollom.com" title="Mollom"Mollom/a. It's a service that checks content and returns if the comment is spam (the bad stuff), ham (the good stuff), or if it's not sure. If it's spam it doesn't allow it, if it's ham the comment is posted, and if it's unsure a a href="http://en.wikipedia.org/wiki/CAPTCHA" title="Wikipedia: CAPTCHA"captcha/a is displayed. This keeps user annoyances at a minimum but still has some level of protection./p pFor cases where I want a captcha on every comment I often use a href="http://recaptcha.net/" title="reCaptcha"reCaptcha/a instead. The captcha display is a little more slick and usable./p pThis kills most comment spam on newer posts where any conversation is actually happening. For a href="http://drupal.org" title="Drupal - Content Management Platform"Drupal/a the a href="http://drupal.org/project/mollom" title="Mollom Drupal Module"Mollom/a and a href="http://drupal.org/project/recaptcha" title="reCaptcha Drupal Module"reCaptcha/a modules provide integration with these services./p h2Closing Comments On Old Posts/h2 pOlder posts are known to get comment spam. They've been linked to and might have good ranking results in Google. If you aren't following them anymore its a place spammers may be able to slip comments on posts where they may not be noticed by the site maintainers./p pTo deal with this I simply close comments on posts older than a month. Very rarely do useful comments come into older posts and the conversation that happens when something is posted is already gone./p pThe a href="http://drupal.org/project/commentcloser" title="Comment Closer Drupal Module"comment closer/a module in Drupal provides this./p h2Nofollow Attribute/h2 pIf a spam comment or two gets through my setup and I don't catch it I don't want to help the spammers out. To deal with that all links in a comment have the a href="http://en.wikipedia.org/wiki/Nofollow" title="Wikipedia: Nofollow"nofollow/a attribute attached. This stops search engines from following the link./p pIn Drupal this can be done in the input filter configuration./p pThis setup keeps my work managing spam at a minimum and still allows for conversations to happen. What tricks work to keep spam down on your site?/pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/vSKwpAgxF5s" height="1" width="1"/

pWhen I was working on a script to a href="http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript" title="Preloading Images with jQuery and JavaScript"preload images with JavaScript/a one of the decisions I had to make was whether to use span class="geshifilter"code class="geshifilter-javascript"document.span style="color: #660066;"createElement/spanspan style="color: #009900;"#40;/spanspan style="color: #3366CC;"'img'/spanspan style="color: #009900;"#41;/span/code/span or an image object to preload the image into. The recommended w3c method is to use span class="geshifilter"code class="geshifilter-javascript"document.span style="color: #660066;"createElement/spanspan style="color: #009900;"#40;/spanspan style="color: #3366CC;"'img'/spanspan style="color: #009900;"#41;/span/code/span as it is a consistent way to create elements. This is the method I used. But, I was wondering which performed better. So, I ran some tests and here is what I learned.br / !--break--/p h2Test Setup/h2 pThere are numerous browsers on the web. Testing in Firefox and Safari, which is where I do most of my development, isn't enough. a href="http://engineeredweb.com/blog/09/11/sad-truth-internet-explorer" title="The Sad Truth of Internet Explorer"Internet Explorer is the dominant browser/a and there are still as many IE6 users are there are Firefox users. I wanted to know how this would perform for real world users so I tested Firefox 3.5, Safari, Webkit Head, and Internet Explorer 6, 7, and 8./p pThe goal isn't to get an absolute performance measurement but to see which is the faster of the two methods. The basic script I used was:/p pdiv class="geshifilter"pre class="javascript geshifilter-javascript" style="font-family:monospace;"span style="color: #009900;"#40;/spanspan style="color: #003366; font-weight: bold;"function/spanspan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #003366; font-weight: bold;"var/span TestImage span style="color: #339933;"=/span span style="color: #3366CC;"'/image.png'/spanspan style="color: #339933;";/span span style="color: #003366; font-weight: bold;"var/span startspan style="color: #339933;";/span span style="color: #003366; font-weight: bold;"var/span endspan style="color: #339933;";/span span style="color: #003366; font-weight: bold;"var/span timediffspan style="color: #339933;";/span nbsp; preLoadImages1 span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"function/spanspan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span start span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"new/span Datespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #000066; font-weight: bold;"for/span span style="color: #009900;"#40;/spanspan style="color: #003366; font-weight: bold;"var/span i span style="color: #339933;"=/span span style="color: #CC0000;"10000/spanspan style="color: #339933;";/span ispan style="color: #339933;"--;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #003366; font-weight: bold;"var/span cacheImage span style="color: #339933;"=/span document.span style="color: #660066;"createElement/spanspan style="color: #009900;"#40;/spanspan style="color: #3366CC;"'img'/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span cacheImage.span style="color: #660066;"src/span span style="color: #339933;"=/span TestImagespan style="color: #339933;";/span span style="color: #009900;"#125;/span end span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"new/span Datespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span timediff span style="color: #339933;"=/span end span style="color: #339933;"-/span startspan style="color: #339933;";/span span style="color: #000066;"alert/spanspan style="color: #009900;"#40;/spantimediff span style="color: #339933;"+/span span style="color: #3366CC;"'ms '/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #009900;"#125;/span nbsp; preLoadImages2 span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"function/spanspan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span start span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"new/span Datespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #000066; font-weight: bold;"for/span span style="color: #009900;"#40;/spanspan style="color: #003366; font-weight: bold;"var/span i span style="color: #339933;"=/span span style="color: #CC0000;"10000/spanspan style="color: #339933;";/span ispan style="color: #339933;"--;/spanspan style="color: #009900;"#41;/span span style="color: #009900;"#123;/span span style="color: #003366; font-weight: bold;"var/span cacheImage span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"new/span Imagespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span cacheImage.span style="color: #660066;"src/span span style="color: #339933;"=/span TestImagespan style="color: #339933;";/span span style="color: #009900;"#125;/span end span style="color: #339933;"=/span span style="color: #003366; font-weight: bold;"new/span Datespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span timediff span style="color: #339933;"=/span end span style="color: #339933;"-/span startspan style="color: #339933;";/span span style="color: #000066;"alert/spanspan style="color: #009900;"#40;/spantimediff span style="color: #339933;"+/span span style="color: #3366CC;"'ms '/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #009900;"#125;/span preLoadImages1span style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span preLoadImages2span style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/spanspan style="color: #339933;";/span span style="color: #009900;"#125;/spanspan style="color: #009900;"#41;/spanspan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span /pre/div/p h2The Results/h2 pIn Firefox 3.5, Safari, and Webkit head there was not noticeable difference between the two methods. When I ran the test numerous times there was no consistent winner./p pInternet Explorer was a different. In Internet Explorer 6 and 7 using span class="geshifilter"code class="geshifilter-javascript"span style="color: #003366; font-weight: bold;"new/span Imagespan style="color: #009900;"#40;/spanspan style="color: #009900;"#41;/span/code/span performed about 8% better and 10% better on average. Internet Explorer 8 was a different story. Using span class="geshifilter"code class="geshifilter-javascript"document.span style="color: #660066;"createElement/spanspan style="color: #009900;"#40;/spanspan style="color: #3366CC;"'img'/spanspan style="color: #009900;"#41;/span/code/span performed about 20% faster./p pFor now I'm going to continue to use span class="geshifilter"code class="geshifilter-javascript"document.span style="color: #660066;"createElement/spanspan style="color: #009900;"#40;/spanspan style="color: #3366CC;"'img'/spanspan style="color: #009900;"#41;/span/code/span. Not only is this the w3c recommendation but it's the faster method in IE8, the version users are slowly starting to adopt./pimg src="http://feeds.feedburner.com/~r/EngineeredWeb/~4/LlSyTTGxxfY" height="1" width="1"/