Looking Back at 2014

Yep, this is my retrospective post for 2014. But first, let’s revisit my thoughts on 2013:

Yeah, 2013 was a rough year. 2014 was better.

Career Stuff

I left Amazon to work for POP. Very different atmosphere. I went from working on a single project at a huge corporation, to working on several projects at a smaller design agency. I’ve enjoyed the change. It’s given me more opportunities to pick up new skills. I still do a hefty amount of client-side programming, but now I have some good experience with pre-processors, task runners, and various JavaScript frameworks.

Writing Stuff

It’s been a good year for writing. Here are my top 3 blog posts of 2014 (by views):

  1. Fun Times with CSS Counters
    My most popular article of 2014. It was fun coming up with demos that appeared to require JavaScript, but didn’t. Featured on CSS Weekly and Sidebar, tweeted by Smashing Magazine, and posted on CSS Tricks. Also translated to Russian and Chinese.
  2. Gradient Animation Trick
    I actually published this at the end of 2013, but it didn’t get noticed until 2014. Surprised me a bit, since it was just a quickie blog post I made one Sunday afternoon. Also featured on CSS Weekly and Sidebar and tweeted by Smashing Magazine.
  3. Creating Glow Effects with CSS
    The demos were fun to make, since they let me play around with pretty colors. For whatever reason, this article has really good SEO. Not complaining.

I also had my first paid gig as a freelance writer with the Effective Event Binding with jQuery article I wrote for SitePoint. Writing for them was a good experience. Would do again.

Looking Forward

I have high hopes for 2015. Lots of personal goals, but I’ll mention the professional ones here.

Becoming a better web developer still stands, as always. In particular, I want to push my JavaScript skills to the next level, to not just write good code, but to architect good solutions.

I’m also striving to play a bigger role in the web development community. I’ll continue to write articles, craft demos, and hopefully do more with open source, but I think the next big step will be public speaking.

Thanks for reading. See you in 2015!

Perfectly Framed, Responsive Images

Look at this cat. This image of my cat is the crux of this entire post. Now resize your browser and watch what happens (spoiler alert: the image resizes intelligently).

Update: If you’d rather see an animated demo, then check out this CodePen.

Desmond

The Goal

When I revamped this blog, I had some very specific criteria in mind for how I wanted to present images, much of it with regard to responsive design. Slapping width: 100% on my images wasn’t good enough.

  • Images must be centered and nicely framed with a border and shadow.
  • Space permitting, images must display at their original size, without stretching.
  • Images can never exceed the width of the space they’re in. No overflow or cutoff.
  • If an image were to exceed the width of its container, it must scale down to fit.
  • All of this must work whether or not the image is wrapped in a link tag.
  • No JavaScript. window.onresize? Gross.

The Solution

Fortunately, I was able to achieve all of this with a single wrapper div and a modest amount of CSS. You already saw the solution in action when you resized your browser.

Here’s what the HTML looks like:

And here’s the CSS:

I won’t bore you with a CSS line-by-line, but the basic idea is to use width and max-width in just the right combination, while box-sizing: border-box prevents the added border pixels from throwing off the widths. Centering is done with text-align: center and display: inline-block.

Hi Again

If you’re reading this, then you’re looking at the newly upgraded Coder’s Block blog. Hooray!

History

I started this blog 3 years ago with a “don’t sweat the details” attitude. Part of that was using Blogger to launch my blog quickly, knowing I’d want something better in the future. Well, it took longer than expected, but I finally upgraded my blog to run on WordPress, on my domain, integrated with my portofio.

Learning WordPress

I thought this would be a weekend project. Ended up taking 3 weeks, and that’s with me rushing after Google somehow found and indexed the blog before it was ready. Still not sure how they found it.

I started by cloning the baked-in Twenty Twelve theme. Then I combed through every file and function, learning what everything did, and removing, editing, or adding to fit my needs. This is the result. I now also have a new-found respect for WordPress developers. Using WordPress is simple. Working under the hood isn’t.

Migration

And then there was the migration. WordPress has a Blogger Importer plugin, but it strips out embedded scripts. Kind of a bummer if you run a web dev blog with lots of gists, codepens, and fiddles. I also needed to do a lot of markup massaging on my posts to fit them into their new home. I ended up throwing together a quick and dirty post massager that applied 11 regexes, then I applied a few more using the Search Regex plugin, just to get things reasonably presentable. It was certainly tedious, but it also gave me a chance to review old posts and add updates as needed.

After the migration, I still had to worry about redirecting visitors from my old blog to my new one and preserving any SEO juice I had. Thankfully, the Blogger To WordPress plugin made this easy.

Loose Ends

I waffled back and forth between using the baked-in WordPress commenting system or Disqus. Finally settled on Disqus, mostly so I could offload the complexity of a commenting system out of my templates and functions.

There are some other speedbumps I encountered, and I few tricks I picked up, but those are probably better saved for other posts.

2 comments » Related topics:

Incoming

The blog’s been a little sparse lately, but I’ve actually been working on something big. A few weeks ago, I made an HTML5 Canvas version of that Align 4 game I made 8 years ago. It’s a stripped down version, but my goal was to write a tutorial on how I made it.

The coding part was fine. The tutorial part was a terrible idea. So far I’ve written 6 out of 9 (!) posts that make up the full tutorial. I’m a terribly slow writer and the whole thing is sucking my soul out. Oh, and it’s kind of boring. Poring over hundreds of lines of JavaScript is not edge-of-your-seat excitement.

But I’m not giving up now, dammit! I’ll start publishing it on Monday, 3 posts a week, for 3 weeks. And then I’ll be done with it and move on to something else.

Also, I want to stop writing all these ultra-dense blog posts. Lighter stuff would be more fun.

In other news, I ordered Adobe CS5 Web Premium. I’m excited. The only thing I have now is Photoshop, but my copy is 3 versions behind. I’ve heard good things about Fireworks from other web designers, and I’d like to learn vector graphics with Illustrator. CS5 is basically a big toy box to me. I even ordered a second monitor to have more room to play.

Adobe CS5 Web Premium box