This is one of the largest projects I’ve worked on. It was fun making and you should watch it. It’s the pilot of a web series called FLABBY, where Mr. Flabberworm runs his corporate empire and owns the government. Yep.

Today I was working on a web design project and wanted to add a border to the page (like the one on this blog). I figured it out and it looks pretty neat, so I thought I’d make a tutorial and share.

First you’ll need 4 empty div tags at the start of your page. Each one of these represents one side of the border.

<div id=”left”></div>
<div id=”right”></div>
<div id=”top”></div>
<div id=”bottom”></div>

After you have this, you need to style them. Put the following into your CSS stylesheet:

#left, #right, #top, #bottom {
background: black;
position: fixed;
}

The above styles all of those 4 divs at once. The bolded #000 above makes all 4 edges of the border black. You can change this if you want a different color. The position:fixed; makes all 4 edges of the border stay in the same place as you scroll down the page. Next we’ll style the borders on the left and right sides.

#left, #right {
top: 0; bottom: 0;
width: 15px;
}

The top: 0; bottom: 0; ensures that there are no margins added on the top or bottom of the side bars. The bolded width: 15px; makes the width of the side borders 15 pixels. Change this to whatever you want, the borders on this blog are 10 pixels. Next you’ll want to add the following.

#left { left: 0; }
#right { right: 0; }

This code simply pushes the left bar all the way to the left of the page, and the right bar all the way to the right.

Now we repeat the same process, but for the top and bottom edges of the border instead of the right and left.

#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

That’s it! Your border should resize with the window and provide a nice little frame for your content. The complete CSS is below.

#left, #right, #top, #bottom {
background: black;
position: fixed;
}

#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

EDIT: This border doesn’t work in Internet Explorer 6. The code below makes the border hide if the user is using IE6.

<!—[if lte IE 6]>
<style>#left, #right, #top, #bottom { display: none; }</style>
<![endif]—>

So I’ve been excited about making music lately. I’ve always wanted to release an album, put in on a CD, print out some album art and put it in the case, and put it on a shelf. That might be a strange reason for wanting to make music, but one of the reasons I love making stuff is just to see it made.

I’ve written this song above. It’ll be on my upcoming album, Society+. Some of the songs are a cappella, and some of them have more instrumental backing. Society+ is an album about three societies different from ours. First is the Large Cat Society, a secret underground group of felines who calmly plot for world domination. Second is Mr. Flabberworm’s corporate empire; Mr. Flabberworm lives in a mythical wonderland with millions of dollars and no consequences. Last is the Small Dog Society, the rivals of the Large Cat Society, who value being horrible and sleeping in the purses of their “owners.” 

The whole album puts our world into perspective, first telling us about our feline overlords, secondly showing us the ramblings of a delusional capitalist, and finally exposing the inferior species, canines, for what they really are.

Most of the work I do is digital. So I need to keep a clean and organized computer. I thought I’d share with you some tips for digital organization.

File Storage
There are five folders on my desktop. I’ve given them custom icons, and aligned them to the left. Every file I make can be organized into one of those five folders. They are:

  1. Photos
  2. Films
  3. Design
  4. School
  5. Misc

Each of those folders has a similar organization system, with one folder for each project. For example, there is a folder for every video I make in the “Films” folder. This folder has raw footage, editing files, and any graphics I make for the video. Once I get to around 25 folders, I’ll move all of them to my external hard drive. I do this because occasionally I want to go back, take some raw footage, and remaster a video. The “Misc” folder contains more folders for projects I’m working on that don’t for anywhere else. The “Design” folder is mostly websites I’ve designed for myself or a few other people. The “Photos” folder is photographs organized by date. I find date is the most useful way to organize photographs, but I add tags to the date folder so I can also access the photos with keywords.

Software
For word processing, I use Apple’s Pages or TextEdit, depending on the size of the task. These are the fastest, most lightweight word processors with adequate features I’ve been able to find. For web development, I use Brackets, an open-source Adobe program. This works best for me because of its live preview feature, and it’s color-picker and inline style editor. Most other programs I’ve come across have too many features. For video editing, I use Adobe Premiere, and I use Photoshop for photo editing and graphics creation.

Other
I currently keep track of to-dos with Finish, an iPhone app that divides your tasks into short-term, mid-term, and long-term goals. I listen to music from iTunes (mini-player) or Spotify’s web player. That’s about it.

I hope there was something in this article that inspired you for your own organization systems. If not, I hope you can find something that works for you.

The end.

I hadn’t been doing a lot of design lately, so I decided to look around for something to stay in practice with. I came across this article, and I decided to try it. Basically, it’s a little exercise where you create album art for a band that doesn’t exist. There are 4 steps to this process:

1. Click “Random Article" on Wikipedia.

The name of the article will be the name of your imaginary band.

2. Go to Quotations Page, a list of random quotes.

The last 3-5 words of the last quote on the page will be the name of your imaginary album.

3. Go to Interesting Photos from the Last 7 Days on Flickr. 

The third photo on the page will be the photo you use for your album.

4. Design your album art!

This activity is much more fun if you don’t cheat, so make sure to use the photo and names that you get on your first try. Here are a few albums I made: