Starting From Scratch

The fact that I’ve had website holder files on this and several other sites and projects for too many years can get you down. Why not take a break from some of your projects, work, life, etc., to really dig in and create something with your hands for yourself (even if it is with your keyboard).

Actually, I didn’t take a break to create this. This was a hobby over the last year and a half to convert and design on the fly from flat, to wordpress, to expression engine, to live design edits, to hobnobbing here and there, tinkering with IF:ELSE statements. It has been an engaging and rewarding experience so far. It’s funny how some of the initial six articles have evolved over the years. There are in fact other major articles brewing, as any proficient weblog writer will tell you, but that will not be complete until some review and finishing touches are applied.

Regarding this domain in particular, it’s interesting to feel such a front-facing project that would represent myself and my thinking in design and the web industry take such a careful and straining part of me to create. The project of actually doing the work on it, the designing, the coding, the testing, the changes, the newer methods (and oh how they change ever so quickly in this industry), has become a task which I don’t want to finish. Indeed the creating of the object is sometimes the most enjoyable. Restoring automobiles, building model airplanes, raising children, building up a company, exploring your own brand, preparing for retirement, or anything else substantial in our lives. Ha! No, making my own website is not like having kids, but you get the picture that I’m painting, right?

Firstly, design. This encompasses the look of the site, the brand’s logo, the arrangement of content, deciding what content is important to me and interesting to the reader. From paper to pixels, to code, to screen, to eyeball. Jumping mediums is an odd thing in the digital world. With printed design, you create files, then film, then plates, then onto rollers to imprint on paper, then folding, trimming, binding, packaging and presentation, be it in an art gallery or the instructions for flat-pack assembly. Ahhhh, print design. The finality, the smell of the ink on paper, the texture…

Design

Design started many times. You know the design process: EPIPHANY > SKETCH > PIXELS > CODE > and so forth. At any one moment your process may stall and return to the beginning. For a while, there was a BeOS design of this site up in a holder template for at least two years.

Designing the current Luke Dorny logo, or monogram, was a stumble in vectors in Illustrator. I’d used many different settings of the letters before, ones that I’m still very happy with. But this time, once the L and the D lined up within a circle with certain spacing, the shapes took on the look of a face. Some minor tweeking later, it was complete. For those interested, check out a massive list of artist monograms that have been scanned in from the old world. You’ll see that originality wasn’t always easy, and that the monogram for Lodovico Cardi (190) for example became what is know as the “Center Line” symbol in mechanical drafting.

The LD, or “Observer Monogram” as I’ve named it, begins to look like something you’ve seen before. Could it be the Bauhaus logo? The LG Electronics logo? The Long Play record symbol? No matter. Many things look like other things in this world.

Tooling

Becoming familiar with a new Content Management System is not always an easy task. Expression Engine had been used on a few projects I was involved with and so I decided to move forward with powerful tools instead of the popular ones such as WordPress. There are many out there to choose from, and it should be stated that they are tools. TOOLS.

Tools: Use what you know, learn what you find powerful, become adept at using them.

Expression Engine

There a few quibbles about using Expression Engine. Minor, but in the end, these issues help form the experience of creating and viewing an EE website. Listing all of my beefs with EE here in this post would be unwise. Their landscape has changed quite a bit in the last six months. Version 2.0 beta was released, pricing structure has changed, and a lot about the administration panel has changed, as well.

To be honest, EE is a tool. In a good way. If I wanted to make a beginner blog, I’d use a beginner tool or application (hey, no jokes here). Some of the web applications and tools that help you to create blogs do only that. For example, WordPress helps to create weblogs very well. There are a zillion plugins and extensions out there for pulling and twisting WP into whatever you’d like. But it’s still a blog, for the most part. Many of the features I’d thought up for the site you’re viewing were brought along with the process but were initially based on plugins that were available years ago. So, I’m not sure what the perfect metaphor is to compare Expression Engine with WordPress, for example, but perhaps let’s state that Expression Engine is a toolbox with some basic tools to create anything you want, and WordPress is a go-kart. The go-kart runs great, and hey! Go-karts! But if you want to add bigger wheels to your screaming backyard sport, the limitations of the body and the frame will prevent further growth into the Monster Jam machine you were aiming for.

With some minor faults that have to be noted regarding social network integration, for the most part, Expression Engine can be bent to your will. I’m not that familiar with the world of CodeIgnitor, a PHP framework which forms the basis of EE version 2.0 the metaphorical foundry of the tools you’d use in EE. I’ll stop there. Many people know much more about the pros and cons of EE than I. Besides, there are more and more add-ons for EE with every passing day.

HTML5 & CSS3

There is much to be said on this topic. Suffice it to say that HTML5 is here to stay, it’s the future, it’s slowly dominating, it touts many advantages and openness in comparison to many other platforms and continues to be explored by designers and developers the world over. Certainly, but beyond the initial confusion about which elements reside inside of others, what is a block-level element and what isn’t, and more… HTML5 has proven its worth and strength especially in WebKit and Mozilla-based browsers. For more on HTML5 and CSS support, there are many resources, but here’s one I’ve been watching: Web Designer’s Checklist (compatibility chart).

For myself, the new coding methods became cleaner and much easier to scan while creating code.

Structure

So, I began by setting up the items that I like from blogs in general. Google has recently altered its homepage to hide extraneous information on the page until your mouse moves, assuming that if you’ll only be typing for a search, you don’t need to see all the extra bits. I prefer little details to be added to entries. Sure, just a title and body looks clean, but how usable is it?

  • Title
  • Date
  • Article Number
  • Article Content
  • Author
  • Categories
  • Quicklink
  • Links Referenced
  • Comments

Mentally, I digest information in my own way. I grew up seeing my dad critique my mechanical drawings, assembling models, went to after school computer drafting classes, attended architectural and mechanical drafting courses at city college after school as well. On the other hand, I also started drawing perspective based hotrods in AutoCad there as well. So after spending quite a bit of time engaging in the world of formats and line-weights, ISO rules, etc. I realized that I still needed a large amount of creativity in my design. Having technical information present in my own design is something I appreciate. Arriving at proper ways to implement features becomes a trek.

As an example, In order to get an auto-incremented, three-digit Article Number for each article, I found that one could (in theory) just use the “entryid” from the database, like so:


<span class="entry-id">
{if entry
id <= '9'}
00{entryid}
{if:elseif entry
id <= '99'}
0{entryid}
{if:else}
{entry
id}
{/if}
</span>

You’ll see there that I began the logic that would automatically add zeros before the number if it were less than a hundred, ten, and so forth to get a three-digit number everywhere on the site.

In practice, this is never a good idea, since these IDs should never be used in such a way. I was warned of this by several people before I gave up and threw in a custom field that I’d have to hand number while adding each new entry. This isn’t something that is unique to Expression Engine and is a unreliable and silly way to go about it using any CMS.

After the new change, I ended up with this:

<span class="entry-id">
{artnum}
</span>

Of course, me being a designer first and programmer second, I stumbled along in this manner for years. Discovering, testing, tinkering…. Gently depressing multiple keys with my forehead repeatedly.

In fact, this is the method used by many, including myself, to learn new languages and become a more powerful designer, programmer, …anything really. Learn by doing. You learn hard lessons.

Comments

For many, comments are a contribution to the article, whereas for others, comments are a constant nuisance and potential security risk for hackers and random bored salesmen peddling wares of unknown origin.Personally, I appreciate commentary and encourage its use. Obviously wrangling in controls, forms, and methods to prevent trolls and medical salesmen who knock blog-to-blog from posting unsolicited adverts is important (so using a captcha or authentication tool is handy).

Naturally, the day this site receives an unwieldy amount of comments is the day anyone would revisit comment policies. Especially if said comments don’t add to the conversation.

Progress

There is more to discuss, but hopefully enough to sufficiently approach my 5,000-word target for otherwise simple blogposts. There are features I’d like to spend more time discussing, such as per-post custom CSS or code to help make each post interesting. There are many sites that do this quite well. Some come off as magazine spreads, broadsheets, and glowing printed matter. Expect more writing and explanations behind this soon.

For now, I’ve arrived at a time when I feel comfortable finally publishing this article and all of the previous articles as the beginning of something more. Finally, my vehicle has wheels and there are anvil hits in the garage. Also, I’ve been leaving major burnouts around the neighborhood.

UPDATE: October 29th, 2010

This was written months ago, and there are many more things to discuss about the new site, but that will have to be in a newer post. Expect it soon.

UPDATE II: Feb 20th, 2012

This site now runs on Kirby, the flat-file, no-database, php system. I love it.