One of my favorite things to reflect upon when graced with a beautiful logo is… can it be done in CSS? The answer almost always, is yes.

Of course, just because you can build an aircraft carrier out of parts ordered from a 1979 Sears catalog, doesn’t mean it’s a good idea. The fun part is figuring out how to recreate a design with elegance.

Mini How-To

A good example of elegance can be found in recreating the iconic 007 gun barrel. All we need is one HTML tag and a bit of CSS. Neat!

Step 1

Set the body background color and add some basic style to the barrel div.

<div class="barrel"></div>

body {
    background: #eee;
}
.barrel {
    background-color: #444;
    height: 30px;
    width: 145px;
}

Step 2

Add a nice curve to the front of our barrel.

.barrel {
    border-bottom-right-radius: 26% 100%;
}

Step 3

Create a :before pseudo element with a border-radius curve and move it to the top and left of its parent. Don’t worry if it seems too large and just focus on the overlapping area for now.

.barrel:before {
    background-color: rgba(255,155,55,0.5);
    border-bottom-right-radius: 41% 100%;
    content: '';
    display: block;
    height: 49px;
    left: -42px;
    position: absolute;
    top: -7px;
    width: 50px;
}

Step 4

Create a curvy :after pseudo element and move it to the bottom and right.

.barrel:after {
    background-color: rgba(155,255,155,0.5);
    border-top-left-radius: 30% 109%;
    border-top-left-radius: 60% 200%;
    content: '';
    display: block;
    height: 18px;
    left: 78px;
    position: absolute;
    top: 23px;
    width: 59px;
}

Step 5

With everything lined up nicely; set the overflow property of .barrel to hidden to trim anything that wanders outside its shape.

.barrel {
    overflow: hidden;
}

Step 6

Now set the background color of the pseudo elements to the same as the body. Perfection!

.barrel:before,
.barrel:after {
    background-color: #eee;
}

Epilogue

Recreating the 007 logo ranged from the ridiculously simple (zeros) to pleasingly complex (gun trigger/guard). The seven however, was especially difficult. It required multiple attempts to forge it into a shape that not only looked great in all browsers but retained its beauty when zoomed in or out.

Speaking of browsers, you’ll want to make sure you are using IE9 or any recent version of Chrome, FireFox or Safari.

Not having to worry about old browsers is a lovely benefit of working on personal projects. Well that and obsessing over pixel or even sub-pixel details for up to a week of time which is exactly what this project took.

Hope to see you in the theatres this November when James Bond returns in Skyfall.

Cheers! ^_^

First off, cookieless domains are your friends for content distribution. Why? Because every time a web browser talks to a server it sends a copy of all its cookies for that domain. As you can imagine this is quite ridiculous if your client is requesting an image, CSS, JS or other static resource which can never use that cookie information. These wasted upload bits are totally unnecessary so lets get rid of them with the help of a cookieless domain.

Sub or New Domain?

You might think there is a magical ‘no cookies’ option on your server but there isn’t. A cookieless domain is simply one that has never set a cookie. This means two options; create a sub domain (like s.forstmist.org) or create a new domain name.

At first glance a sub domain seems nice and simple but there is a caveat. If you redirect your visitors from a sub domain (www.forestmist.org) to your root domain (forestmist.org) you’ll end up with cookies on your root domain. These root cookies are automatically sent along with any requests to all sub domains. That’s right, having cookies on your root domain taints all your sub domains from becoming cookieless domains. This is not a concern if you channel all your visitors to a www sub domain since any cookies there will not be available to the root domain and therefore won’t taint other sub domains.

For short domain name lovers, registering a new domain for serving static content is a no brainer. I definitely fall into this category so I registered forestmisty.org which I shall use as an example in the rest of this guide.

.htaccess Redirect

With the new misty domain setup and pointing to my web server everything was working great. Requests to static images weren’t passing cookie information but what if someone went to the root of forestmisty.org? What if a broken link sent them to a 404? WordPress would handle the request and that means potential cookies from it or Google Analytics. Yikes!

What would be nice is if we can allow any requests for forestmisty.org/wp-content/ but redirect anything else back to forestmist.org. We can do exactly that with the following .htaccess commands.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^forestmisty.org$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://forestmist.org/$1 [R=301,L]

The first line enables the Apache rewrite engine.
The second line says anytime a request comes in for ‘forestmisty.org’ continue to the next line.
The third line says if the request is NOT for ‘/wp-content/…’ continue to the next line.
The forth line says if we made it this far redirect the original request to forestmist.org including any extra query information like /favicon.ico, /creative-resume, etc…

By the way…
^ means the start of a string.
$ means the end of a string.
? means the preceding character or collection in parenthesis is optional.
. means any one character.
* means the preceding character can occur 0 or more times.
$1 means insert whatever was inside the first set of parenthesis to the left.
[NC] means not case sensitive.
[R=301] means do a 301 redirect.
[L] means the last rule so don’t bother processing the rest of the .htaccess file.

Now we can rest assured that requests to our new cookieless domain will stay cookie free by only servering up what are almost always static file requests from the /wp-content folder.

Configure WordPress

Our new domain is setup and protected pretty well thanks to our .htaccess file so now it’s time for WordPress to join the fray. Specially, WordPress needs to have any /wp-content  links rewritten to point to the same location on our cookie free domain.

• Download, install and activate the excellent CDN Linker by W-Mark Kubacki.
• Login to WordPress
• Settings » CDN Linker
• Enter your new cookieless domain for CDN URL.
• Change your ‘Include Dirs’ line to read ‘wp-content’ if you setup your .htaccess file like mine.
• Save Changes

Load your home page and view source. You should see your new cookieless domain being referenced quite often. Yay!

Success

With a little bit of effort our server is less stressed, our clients are loading faster and hopefully you’ve got a silly grin on your face.

One of my daily destinations is a guiding web page called New Life. A very simple design containing five key concepts integral to my new self. These are Sleep, Fancy Dresser, Grooming, Focus and Freedom.

Of all these, freedom, the most etherial has shown itself of late. For brief interludes yes but a perfumed breeze of moisture is far more than sufficient for a fremen. Invigorated and renewed I find it easy to continue the journey knowing that no matter what happens, I chose the right path.

Much of these feelings are thanks to my new freelancing lifestyle. I choose what I work on, who I work with and have no obligations as a provider until I choose to accept them. Thanks to careful selecting, everything I work on is a tremendous learning font. Each hand crafted creation empowering me with abilities needed for my lifetime goals. No effort wasted, a perfect journey!

When I was a child freedom meant my huffy bicycle. Now that I am older, more nuanced and most importantly, know myself, freedom is so much more. Still, a simple picture of open skies, a classic muscle car and an airport runway evoke everything I need to ascend into the feeling of freedom.

Freedom must be different for each individual but for me, I know what it is, I have tasted it and I will work for it. When it arrives, we’ll go for a drive together. Two old friends reunited at last and with no guilt for the past.

The open road calls. Won’t you join me?

Very much in my own personal style and flavoured with naval metaphors. Yum!

Letter of Resignation

This letter is official notice of my resignation. My last day will be July 26th, 2011.

I came to Mercy as part of an elite team of handpicked individuals under the leadership of the great Fernando Martinez. The goal, to turn Mercy around and become a shining beacon of the latest technology.  It worked too. We had virtual servers, full system encryption, intrusion protection and more years before anyone else. A golden age of tech.

Rough times were coming though. Economic hardships, budget cuts, management changes and other hardships. Fernando and the team saw that they would be forced to make compromises if they stayed so they rightly moved on to new projects and challenges outside of Mercy. A few of us stayed though. For very different reasons I’m sure.

For me, the mission wasn’t complete yet. I would be crafty, work harder than ever before,  use open source software and do everything in my power to keep Mercy cutting edge. It didn’t work out quite as planned. Information Systems lost people and resources while gaining more responsibility. Soon it was all that we could do but tend to a once beautiful ship, tossed and broken, lost in the high seas with no shore in sight.

Fast forward to today and the ship is docked in the kingdom of the HCA. She is being patched, has new crew and officers getting ready to sail to new lands.

My modified quest is now complete and I’m very proud of my time here. I’m especially fond of all the smart people I’ve worked, played and lived with. You shall be remembered.

Soon I shall be off to new Freelancing adventures and doing what I love the most. Working with technology and making people happy.

May the wind always be at your back and your crew by your side!

^_^

Daniel Gagan
PS – Fun fact, I was born on July 26th at Mercy, hired years later on the same day and now the circle will be complete as my last day will be that very special date.

I was delighted to find scandir. Problem was, scandir returns files mixed with folders and that would upset my flock of easily frightened Windows users.

So a quick… er medium… ok fine,  an exasperating search on Google and only outdated, complex and inefficient samples were to be found. PUFF!

So, here is the version I came up with.

Downloads

• Sort by Folder is optimized for easier PHP comprehension.
• Sort by Folder (with HTML) contains extra code which adds more information and cleaner formatting to the generated HTML.

How it works

The most crucial part of all the code you will see inside the demo is the PHP getObjects() function. Without this everything else would be moot so lets go over it in a bit more detail.

function getObjects($path) {
    $path .= '/';
    $array = scandir($path); // returns an array of files and folders sorted alphabetically
    $array = array_diff($array, array('.', '..', '.DS_Store', 'Thumbs.db')); // filter out things we don't want

    $return_array = array();

    foreach($array as $item) {
        if(is_dir($path . $item)) {
            $return_array[$item] = getObjects($path . '/' . $item);
        }
    }

    $count = 0;
    foreach($array as $item) {
        if(!is_dir($path . $item)) {
            $return_array[$item] = $item;
            $count++;
        }
    }
    if($count == 0) {
        $return_array[''] = '';
    }

    return $return_array;
}

Line 3
Scandir returns an array of mixed folders and files for the path requested. This does not include sub directories.

Line 4
Filter out any undesirables. That means the current ‘.’ and parent directory ‘..’ although we don’t want any Mac ‘.DS_Store’ or WIndows ‘Thumbs.db’ files either.

Line 6
We create a new array called $return_array which will be built up with all the folders and files in the order we want them. Folders first, then files. Both alphabetically.

Line 8-12
Here we loop through each item in our filtered results from scandir. If the item is a directory we set the results of $return_array[$item] to a recursive call of the very same function we are already in. Traveling deeper each recursive call, that means we can handle seemingly infinite directory structures. Neat.

This first loop through only cares about directories which is exactly what puts them first in our $return_array. Files will come next.

Line 14
We set a variable $count to 0 to keep track of how many files we find in the next foreach loop.

Line 15-19
In this second loop we check to make sure the items are not directories and if so return those items while incrementing the $count variable.

Line 21-23
Now that we are finished looping for files we can check our $count variable. If 0 then set $return_array to ”. This can useful later in case we want to do something special for directories without files.

Line 25
Finally, we return whatever we have found. In most cases this means returning an $array to another instance of the function although ultimately the original one will return a completed array to the PHP call outside our function that started it all.

In the demo we can now loop through this nicely ordered array and write out some HTML and CSS, add a sprinkle of JavaScript and we have a real working web app.

Epilogue

Once you get your head around recursive loops things become much simpler. Plus you get to worry more about optimizing your code since each loop can be run so many times. It’s a good problem to have, really.

Anyway, I certainly hope this helps you in your next endeavor. I know I certainly would be lost without all the wonderful code and tutorials shared by others.

Cheers!

I enjoy obsession. It heightens the experience, unlocks edge abilities and provides clarity of purpose. Like any state, it can be taken too far but with understanding it can be transformed from affliction to strength.

I started World of Warcraft in the beta, many years ago. Before that the strategy games and in one particular modem game even told my future wife I loved her for the first time. Warcraft as you see is very much a part of my history.

The game totally catered to my personality. Obsession with game mechanics, leveling, gearing up and endless side goals took their toll. With increasing focus came new levels of things to tweak, endless rewards for a brain that liked certain buttons pushed.

Even worse that the addiction to the game was the reliance on the game in order to socialize with my friends. It didn’t matter if I got bored of the game, how could I leave my friends? So I would stay a bit longer… maybe it would get better.

But it didn’t. My level of obsession meant overplaying and burning out. It happened many times. Enough that people would joke, “oh, when are you coming back” and “oh, when are you leaving again”.

The problem with “quitting” WoW was that I wasn’t. I was postponing, delaying and pausing. Like a reformed drunk who still keeps his liquor cabinet stocked, secured with the flimsiest of locks. Always there… waiting for that tiny moment of failure.

So after a time, I would feel good again. I could try World of Warcraft again but this time I’d be reasonable. Maybe only an hour a day.

A month later and I’d be raiding, grinding, dying in real life while my avatars gained everything. Seven to eight hours a day and more on the weekends. A horrible cycle I was deathly aware of yet powerless to break out of.

I’d improved so many aspect of my life. A tireless optimizer born from a dysfunctional past. Why couldn’t I break free of WoW? I had made such wonderful gains during my frequent excursions. I wanted to do more, so much more.

The revelation that followed was completely devastating.

After recovering from the initial concept everything became clear. A proper conclusion to WoW. The ending I never had before. Such a simple gesture would set me free.

Getting my virtual affairs in order was a calming. A wonderful time to reflect on all I had done. Soon after, I made sure everyone knew my plans. I would be deleting all my characters. I would not be coming back to World of Warcraft. Reactions were, as you might expect, mixed.

Some people were supportive, others baffled and a few were oddly quiet. I recognize the last state as a valid tactic for dealing with pain so no hard feelings.

It became an event. Come raid with Poof one last time. Come PvP with Foof to celebrate our time together. Come take a screenshot and say goodbye. It was a lovely time of talking, merriment and a celebration of adventures together.

Each one of my characters received their own special ending. Each one a part of my personality and deserving of their own finale. Screenshots of these moments bring me great joy when I reminisce.

Looking back no longer evokes a time wasted, it conjures pleasant memories, shared experiences and pride for all the people I met. So many things we did and so many good times we had.

Looking forward, my gaming experiences do not weaken like I had feared. In fact, they strengthen me.

When you see me coming, I could be Poof the Druid, Foof the Warrior, Old Snake, Commander Shepard or any number of personas that are part of me.

I am a hero, I always was and now that I know, I always will be.

Sincerely,

Poof · Foof · Soof · Daniel · Odn · Shepard · Spock · Sgt Dildo · ForestMist · Neptuna · Old Snake

One of the pleasures of maturing is an increased awareness of self.

Relaxation, meditation, life experience and even strenuous physical exercise all garner more understanding. Through them you’ll learn your strengths, weaknesses and core desires. After that, a calming sense of self which aids you in all your tasks.

Gains are usually incremental but occasionally something spectacular will happen.

Poof lay still, the springy couch pushing back up against his rather long body. His mind was drifting quite pleasurably, thoughts flowing fast, free and without judgement. An addictive state which he was well aware of enjoying.

The pace did seem to be accelerating though. “Ah, well“, he thought. The all consuming mental fire that could come next was also enjoyable even though it would leave him consumed and tired.

Something was wrong though and in a blinding flash… a revelation. Too clear to unsee, too simple to deny, all at once beautiful and abhorred.

“No!” he gasped as his torso shot up from the couch. He couldn’t breathe. Time seemed to drag on then after a short eternity…  a breath… then another.

Normality slowly, painfully returned as he spat “no” several more times. Each utterance with less venom than the last. It seemed to satiate him. A last act of rebellion against destiny revealed.

He knew that to have a chance, a real chance at life he would have to set in motion the unthinkable.

“Poof must die” he said with the gravitas of a thousand Sean Connerys.

Jason: I don’t ah, mean anything by this, but is there any particular reason why it’s black?
Roscoe: Sure, I wanted it to be perfect.

There is a scent on the wind, a crisp sweetness that can only be new Apples. Refreshed MacBook Pros most likely but with Apple you never quite know. I used to find their secrecy frustrating but lately I find it refreshing. In these days of massive and constant information leakage its nice to have a respite and ponder the possibilities of what will be unveiled.

What would be the perfect MacBook? It’s personal and slightly different for everyone. That is one of the beauties of the age we live in. More choice, customization and options than any of our ancestors. It’s a powerfully overwhelming aphrodisiac of possibilities and one I think is easy to take for granted.

That being said, I think my perfect MacBook would have the following deviations from the current model.

• Black (because I want it to be perfect like Roscoe’s robot in Ice Pirates)
• 2 Hard Drives (1 SSD, 1 regular)
• No Internal Optical Drive
• HDMI Port

Will the refresh have any of the above… hmm, I hear there might be a hybrid drive that keeps the OS in solid-state storage, that certainly sounds juicy. Other items, doubtful. Still, it’s nice to imagine perfection even if isn’t easy to obtain.

If you imagine yourself wining the lottery you can further imagine affording a juicy dip into the wells of Colorware but alas, that is two fantasies glancing at each other across the bar of the mind.

It is far better to flirt with most dreams so you may marshal your abilities to bring life to the few that can become more than mere fantasy.

I think it came out pretty nice. Works perfect in nice browsers like Chrome, FireFox, Safari, Opera and even works well in IE 6, 7 and 8. The nicer browsers will have subtle shadows, rounded corners, bit cleaner lines between items but really that could be considered progressive enhancement. The site is perfectly readable in old busted browsers too. Good job if I do say so myself.

I learned a lot on this project, more so than I had imagined but then again… good projects always prepare you for the next challenge. I’m proud to have stuck with it over the course of many days it took.

xoxo

-Daniel

I’ve had a Remington Shortcut for quite some time now but lately its been running out of juice after only a few minutes. The blades are in great shape so I thought maybe I could just replace the batteries. In the worst case I’d have fun taking it apart and in the best case I’d have a working shaver again.

One of the original batteries looked a bit corroded around a connector and in hindsight I think this was the main problem. I ended up replacing the generic cells with my favorite Eneloops anyway. Rechargeable and hardly any discharge even over a year of storage. Lovely lovely batteries.

I haven’t soldered in years (and it shows) but I had a lot of fun fixing the shaver. It works great now too. Actually, better. The recharging indicator is once again working and my small tweak to disable the edge clipper mechanism means less resistance on the motor.

Taking apart things to learn how they work is great fun. Sometimes you can even put them back together again.