Coder’s Block v4

I am happy to announce that Coder’s Block v4 is finally live. Coded in .NET 4.0 MVC 3. It took me a ridiculous amount of time (4 months!) to make. I guess that’s what happens when you have a personal project with no deadline and an endless stream of tangents to go off on.

CBv4 is going to be a big source of blog fodder for the coming weeks. I learned a lot of new tricks and built a couple nifty things that I really want to share. But for now, I’ll just give some highlights.

Responsive Web Design

The entire site was built using mobile-first responsive web design. This means that every page is naturally mobile friendly. When more screen space is available, the pages will automatically adjust their layouts for a better viewing experience. Go ahead, open any of the pages in a desktop browser and then resize the window to be bigger or smaller. You’ll see what I’m talking about.


One of my earliest ideas for CBv4 was to pull my activity from various sites around the net and show them in a single combined “super feed”. I built my own custom solution to do exactly that. It runs as a continuous server-side process, grabbing feeds and mixing them together. This is something I plan to release as open-source very soon.

Update: Super Feed on GitHub.

Social Icons

I decided to try my hand at making my own social icons. You can see one set I made in the super feed, and another set in the footer. I crafted them using Illustrator and Photoshop. Eventually, I want to add a few more icons for other popular sites and then release both sets for free.

Update: Mini Social Icons on Dribbble.

Image Fix

Some images on the site (like my Flickr photos in the super feed) needed to be dynamically scaled and cropped to fit into the layout. So I whipped up a little utility that could do this on the fly. Simple, but very useful. This is also something I plan to open-source.

Side Project Mockup

I recently created a page mockup for a side project some coworkers are working on. The basic idea is a career-oriented portal with lots of customizable widgets. I think it turned out pretty well.

Career Mentor preview

I tried to make it in Fireworks, initially. Things did not go well. So I switched back to Photoshop and everything went more smoothly. I’ll admit, I’m new to Fireworks, so this may just be my inexperience talking. But I can’t help feeling that Fireworks is just a pale middle ground between Illustrator and Photoshop. I don’t feel like I’m missing anything by not using Fireworks.

0 comments » Related topics:

I’m On DeviantArt

Here are my 2 latest creations:

night birds preview
obligatory bokeh preview

The first one was done mostly in Illustrator, with a little Photoshop work to add the texture, shading, and glow. The second one was mostly a Photoshop tutorial, so I can’t take credit for much creativity there.

With that said and done, I’ll no longer be posting all my graphics work here. I dusted off my unused deviantart page and will be putting this stuff over there from now on. It just seemed a bit outside the scope of this blog, though if I make anything directly related to web design, I’ll probably still show it here.

0 comments » Related topics:

Hey Look! Toast!

I’ve been playing around with Illustrator for almost 2 weeks. I went through half of that tutorial I mentioned, but then you have to pay for the rest, so I decided to just start making things and googling whatever I didn’t know.

Here’s my first “real” effort. An upgrade to my fail bread, using Illustrator and Photoshop:

hey look toast preview

You can download it as a wallpaper here.

Still tons to learn and tons to practice. And I haven’t even started on Fireworks yet. But it’s a lot of fun, and I’m pretty excited to finally fill this gap in my skills as a web developer.

Side note: apparently I have a thing for personifying food items. Who knew?

Update: Changed download links to deviantart.

0 comments » Related topics: