A technical explanation of this website

drupal web development

Being a web developer, I figure it makes some sense to explain this site.

The Basics

A keen observer will notice an image that reads "Drupal" in the footer. What is Drupal? Drupal is a content management system and framework for building websites of many different shapes and sizes. It is written in the PHP programming language and primarily uses (but doesn't have to) MySQL for data storage. You can learn more about Drupal on the project's about page.

Considering my familiarity with Drupal, it was an obvious choice as the software that would power my site. One of the wonderful aspects of Drupal is its modularity and extendability. Not only can the core software be extended, but it is normal for modules to extend other modules or for modules to serve as building blocks. Pull together some of the building block modules and sprinkle some configuration on them and the result is a powerful dynamic site feature. With enough knowledge of key modules, it is possible to create comprehensive sites without ever writing a line of code.

Caleb Delnay in digital can be broken down in a few important "components", for lack of a better word. At the heart is Drupal 6. Layered upon Drupal are several third party user contributed ("contrib") modules. They're all configured in ways to create specific site functionality. Finally, there is the custom Caleb Delnay in digital theme.

The Heart

There isn't much to say about my specific use of Drupal core. As mentioned, I'm already familiar with it. I prefer Drupal over other similar products (e.g. Wordpress and Joomla!) because of the community that has formed around the software. Drupal is not the vision of any one individual, but the vision of a dedicated community of developers, designers, site builders, content authors, business managers, and so many others. Anyone can be part of the project, and that level of transparency and openness appeals to me greatly.

I've stuck with the vanilla version of Drupal 6, meaning I'm not using a distribution like Pressflow or Acquia Drupal. I'm also, for the most part, using the default enabled modules.

  • Comment - A no brainer for any blog. It isn't much of a blog if comments aren't allowed!
  • Database logging - A default that makes sense.
  • Help - Another default that makes sense.
  • Menu - Couldn't have much of a site if I wasn't able to create a custom primary navigation menu.
  • Path - People don't remember paths like "/node/1" but they might remember "/about".
  • Taxonomy - Allows blog posts to be put into categories.
  • Update status - E-mails me whenever something is out of date.

The above combination of modules provide the core features needed for a site such as mine.

Contrib

The community that has grown around Drupal has made great use of its extensible nature. Without the community contributed modules, sites like mine either wouldn't exist or would vastly reduced functionality.

The contributed modules I'm using won't be of any surprise to those who have built Drupal sites before. Here is a list and the use case:

  • Admin Role - Used to automatically grant new permissions to an administrative role (i.e. I'm lazy).
  • GeSHi Filter - Provides a filter for generating the HTML markup necessary to syntax highlight many different programming languages. I decided to use this module because I wanted the syntax highlighting to occur on the server. This allows the HTML for the highlighted code to be cached. It also removes potential slowness from the client that can occur with JavaScript based syntax highlighters.
  • Markdown filter - Being a web developer, it doesn't make sense to use something like TinyMCE for input as it will, more often than not, just get in the way of trying to write content. The Markdown syntax is a perfect balance between writing straight HTML and a rich text interface.
  • Advanced Help - Having help is helpful.
  • Better Formats - Adds very useful configuration options to input formats. Allows input formats to be configured by roles and content type.
  • Custom Breadcrumbs - I'm using this module to add custom breadcrumbs to blog post pages that will match the breadcrumbs generated by a view. This allows for a more seamless navigation experience.
  • Global Redirect - Using this module to ensure that only one path alias is ever the "true" alias is a very good SEO best practice.
  • Google Analytics - An awesome module that integrates Google Analytics and provides some additional functionality (tracking out bound links, hosting the GA JavaScript file locally, and other stuff).
  • Lightbox2 - The lightbox concept is useful for displaying larger versions of images without forcing the user to open a new tab or navigate away from the page. You can see it in use on my about page and the Expedition Canvas project page. Future blog posts will also use it.
  • Mollom - A must have for protection against spam.
  • Pathauto - Creates automatic URL aliases for content (e.g. allowing a project page to be accessed at /project/project-name).
  • SimpleMenu - Provides a horizontal menu across the top of every page when authenticated. I've always used SimpleMenu rather than Administration menu. Maybe I'll switch, I'm not sure, but either one is great for administration.
  • Term Node Count - An extremely useful little module that enables each taxonomy term to keep track of the number of nodes it contains. This information can then be used in Views for querying, sorting, and display purposes. In my case, I'm using it in the sidebar to display the number of nodes in each blog category.
  • Token - A helper module needed by Pathauto and Custom Breadcrumbs.
  • Vertical Tabs - Helps clear up the clutter on some forms. Especially node creation and edit forms.
  • Views - A quintessential module for nearly every Drupal site. I'm using it for my front page (listing of blog posts), taxonomy term browsing (listing blog posts in categories), and the projects page (listing project nodes).

The Theme

The Caleb Delnay in digital theme was custom developed. A friend created the general layout and artwork. I used that artwork to build a theme based on the wonderful Zen theme (specifically version 2).

The original theme had a much darker pallet of colors. I was aiming for textured art -- almost a gritty feel. I built out the site and implemented the first theme, but eventually came to the conclusion that it just wasn't going to work. The tone created by the darker swath of colors didn't fit the type of content that I'd be discussing.

It took me about a week to create the new color scheme. Although my favorite color is green, I decided on blue because of the soothing feel it created while viewing the site. Given the nature of the site -- a blog mostly about programming -- I realized that visitors would be doing a lot of reading. A predominantly blue pallet is just easier on the eyes than most other colors.

Another goal for the theme was to be simple. I wanted visitors to be able to jump into a blog post quickly without having to wait for assets (namely images or JavaScript execution). Thus, many of the subtler graphical effects are actually achieved using CSS3 properties (border-radius, box-shadow, and multiple background definitions). In total, there are five primary image files as part of the theme: the faded circuitry in the header, the darkened portion of the navigation bar, the site logo, the sidebar circuit lines, and the semi-circle in the footer.

The disadvantage of using CSS3 is the lack of Internet Explorer support. I've made sure that nothing is catastrophically broken in IE7+, but visitors in those browsers are going to see boxiness. If you're using IE, I recommend you switch to Firefox, Safari, Chrome, or Opera if at all possible.

The Future

At some point in the future I will redo the HTML to conform to HTML5. Unfortunately this might be a while, as right now use of the new HTML5 elements requires some JavaScript to fix Internet Explorer's behavior of not styling unknown elements. Once IE is released and gains some traction, I will likely drop support for older IE browsers.

I don't think there is much else to say about the site in this post. If you have any questions, hit me up in the comments.

Comments

Matt's picture

Matt

What originally led you toward using Drupal over other open source systems?

Caleb's picture

Caleb

Well, from a technical perspective I narrowed it down quickly to PHP based open source systems because it is a language I'm very familiar with and they tend to be simpler to configure, install, and manage than solutions built on other technology stacks (based on my experience).

Of the PHP based solutions, Drupal, Joomla, and Wordpress are considered "the big three". There are various niche players, but none of them have quite the community and ecosystem of the big three.

I landed on the decision of Drupal for two reasons. First, I found it to be technically superior to both Joomla and Wordpress. It is a much more flexible base system on which to build functionality. Its architecture makes it easy for extensions (modules in Drupal speak) to extend the core and each other.

Second, the passions and ideals of the Drupal community appeal to me greatly. I can't speak much for the communities of the other two projects, but their initial impression was not the same. Drupal has a high degree of collaboration across all aspects of the project. This is very apparent after one second of glancing at the issue queue (one place people discuss the software) for Drupal itself or any of its modules. Anyone can contribute to Drupal, no matter what their level of expertise, and that's a great thing.

I've been working with Drupal for several years now and I'm constantly amazed by the quality of the software and the dedication, honesty, and intelligence of the community.

Add new comment

By submitting this form, you accept the Mollom privacy policy.

© 2012 Caleb Delnay
Powered by Drupal, an open source content management system