dW

Ook.

Despite what the cryptic title states this is the first article in this new log. Everything you see prior to this article was written before this log existed, and most likely on my My Opera log. As this is the first post I should write a bit about it, and I have a lot to talk about obviously. If anyone has any desire to read this, go get a cup of something-to-drink and sit down. It’s going to take a while. And if viewing on a mobile device reading this, forgive me. It’s that long.

Well this is dW, a log written by myself– Dustin Wilson. I’m a graphic artist living in West Monroe, Louisiana. Anyone who knows of me probably knows of my My Opera log and my involvement in the My Opera community. I am in no way dissatisfied with what My Opera provides. I wish to still be as involved as possible with the My Opera community, and I hope I can use this log to spread word about it and my browser of choice, Opera. I started my log on My Opera two years ago as a temporary place to state whatever came to my mind knowing I’d always create my own log. Well, here it is. It’s not two years of work, however.

The Design

I actually started designing the log about nine months ago, and I did make it all the way to finishing programming it in HTML and CSS. This is what it looked like (click on it to see more). It has a similar color scheme and is, well, more busy. I quickly decided that I needed to focus on what I wanted to use this log for: writing. I believe the new design I’ve created accomplishes that. Compared to the draft shown above the secondary information isn’t in plain sight when first loaded; it’s at the bottom of the page. The focus is on what is being written rather than extra mostly-useless crap. It’s probably not going to (and shouldn’t) win any awards as it doesn’t break any boundaries, but it’s designed for what it’s used for.

I played around with a lot of color combinations before I even had an overall design in mind, first starting off with a white background / black text combination. I often find them to be empty, especially when the design is not fluid. I ended up choosing a colored background, but nothing that was too vibrant such as the blue I’ve chosen. I didn’t set out to make it a light-on-dark design, but it ended up that way. I know many people have problems with that combination, but I don’t believe I’ve chosen colors that are so far from each other they make the eyes hurt as white-on-black typically does. The orange for the links are obvious; orange is blue’s compliment. Blue with orange is one of my favorite combinations, so it worked well when designing something for myself.

Contrary to the draft shown above the secondary information isn’t in plain sight when first loaded on this design; it’s at the bottom of the page. I find that better as they’re typically out of the way unless wanting to be viewed. I’ve shifted away from an old bulky logo to a slimmer one using the FREE font, Delicious; it’s created by an absolutely amazing typographer by the name of Jos Buivenga. If it didn’t look like shit I’d make the FREE part red and blinking, but I’d rather viewers’ eyes remain intact especially if wanting to click that link to visit his wonderful page. While at it download Delicious and the headers on this log will be also in that wonderful typeface.

The website is set using a 24×24 pixel grid, everything on the website falls within that grid wherever possible. I didn’t set any specific column widths or whatnot. I just wanted each column no matter how wide to be divisible by both two and three. The column sizes you see here now were chosen on the fly without any extensive thinking about it, just an algebra problem or two to find numbers divisible by both two and three that’d fit within my grid.

The first logo was set in Vista Sans, a very good typeface from Emigre that I can’t seem to find a good place for. I bought it shortly after its release for school using scholarship money thinking I’d use it for something. I still haven’t found a good place for it. It’s a pity as I love the typeface quite a bit. I eventually chose Delicious because I started playing around with it after downloading it. It had the playfulness of Vista Sans that I liked, but it didn’t contain the slightly mechanical look I get from Vista Sans. I think it fits me better, and it looks wonderful as a header typeface. The body text is typeset in Verdana (Christ! More typography talk? When will he quit?). It’s a widely available typeface, and is one of the best screen fonts to date. As I want what I’m writing read I think it’s best to use something that’s easily read even at smaller point sizes.

I’m also an illustrator, so it’s quite natural for me to use an illustration for my log’s header image. At this present time it’s an illustration I did about a year ago of Terra, a character from my favorite video game Final Fantasy VI. To anyone who might be familiar with the game, it’s a rendering of her half-way transforming into her Esper form; the background is of the orphanage in Mobliz after the world was destroyed, a very important place to the character. I thought that when I designed this website I’d have it change from time to time, giving the website a fresh look without much programming work– always a good thing.

The Markup, CSS, and JavaScript

The website is fed using HTML 5 and quite a good bit of CSS. The CSS contains many advanced features of CSS 2 and a bit of CSS 3. I wanted from the beginning to use as many advanced CSS properties, selectors, and whatnot that I could. In fact, not a single browser out today is capable of viewing the website perfectly. Even the latest releases of Opera, Safari, and Firefox fall short. That’s fine with me it degrades well in each. As for Internet Explorer, versions 7 and 8 should be fine; version 6 has to use Dean Edwards’s ie8.js JavaScript library to make it work properly. I’m not going to sweat blood over trying to get even the most basic of CSS properties to work properly in that browser.

I’ve always wanted to provide stylesheets for devices other than a computer screen, so I went on a quest to do so with this log. I purchased Cameron Moll’s Mobile Web Design PDF and I read everything I could get my hands on about the subject. Just when I was about to call it quits with the entire idea because many mobile devices ignore a specified mobile stylesheet I ran across an article by Dave Shea on my dilemma. User agent sniffing sucks like he states and like him again I believe it’s the best way considering the mobile browser playing field at the moment. What it boils down to is that when my site is viewed from a mobile device or a television they are force fed a mobile stylesheet, but it is not mandatory. On each of those pages a header is displayed allowing the user to go to the regular stylesheet and saves a cookie if possible to make that their preference so the next time they visit they can visit using the stylesheet of their choice. If anyone desires to try this out but don’t have a mobile device or a television capable of browsing the internet they can go to the Media Types section of the About page to follow the links to try it for themselves as long as Internet Explorer 6 is not being used.

The mobile stylesheet is optimized for Mobile Safari as it is the only browser I have direct access to. I can test using Opera Mini by using MicroEmulator, but I’m really unsure what it’s giving me is what will be viewed for most people. In my tests Opera Mini has problems with leading (or line-height in CSS). Despite those problems it is usable on Opera Mini. The TV stylesheet is optimized for Opera’s Wii Browser and is the only browser I’ve tested or care to test for.

JavaScript is used to provide a live comment preview on the screen-styled version, but it’s not mandatory like it is on most logs. With JavaScript disabled it is completely possible to see a preview and post a comment. It should only work in Opera, Safari, and all the different flavors of modern builds of Mozilla. Avatars are provided dynamically if XMLHTTPRequest is supported by the browser.

Avatars are selected based upon a provided email address using Gravatar and by URI using My Opera. Gravatars are given preference over My Opera avatars, so if your supplied email address is tied to a gravatar it will be chosen over the My Opera one. Allowing the usage of My Opera avatars gives My Opera users a way to identify themselves elsewhere by their My Opera address.

Server-Based Code

The log is programmed by myself from scratch using PHP 5 and SQLite 3 for the database system. I’ll probably be denounced for trying to reinvent the wheel as there are many self-publishing systems out there capable of doing just what I’ve created here. None give me a rush from programming the thing myself. It’s satisfying to see something you’ve worked on for quite some time finally see the light of day. I’m quite proficient with PHP, so it wasn’t like being a cripple trying to run a marathon.

I do hope in the future to perhaps port what I’ve programmed to Python as I get more proficient with it. As Python really isn’t made for the web, and to use it easily on the web I’d probably prefer to program a library myself or with the help of a friend. Heck, I might not ever do this. It’s just a thought at the moment, only a thought. It’d certainly be a great learning experience. That’s how you learn a programming language. Pick up something over your head and never give up.

I decided to use SQLite for my database system rather than a typical solution like MySQL because I didn’t need a database server to run a small log. The server this website is hosted on would go down before SQLite is brought to its knees. To help prevent this from happening the website is cached. Chances are the page you’re viewing right now is cached without any queries anywhere to any database. But if the time comes and my website requires the scaling capabilities of a database server I will adapt this website to work with it. Until then, SQLite will work wonderfully and faster than a database server.

While the entire website is fed using HTML it is written with Markdown using a custom PHP class of my creation with a few of the useful features of Markdown Extra. Markdown provides an advantage over HTML in that it is easier to write when you’re wanting to write something. Anyone who has written an email will know much of Markdown’s syntax already. Comments are just simple Markdown as John Gruber specifies it.

This is a work-in-progress still. I wouldn’t call it a beta per se, but it probably will behave like one. I still have things such as a fully-workable backend to program as I’m updating and managing this website using scripts. There are many other neat features of the website that I’ve written that I’ll probably cover later. There’s a lot to cover on this subject.

Well That’s it, For Now

Whew that’s a lot. I’ve tested this website as much as I can, and I’ve ironed out thousands of bugs. I’ve probably left quite a bit out there. If anyone runs into any apparent bugs or any PHP errors please contact me. I’d really appreciate it.