All Posts By

Justin

A frame from the Simpsons of a newspaper clipping featuring Grandpa Simpson yelling at a cloud.

Old Man Yells at Code

By | Front-End

I was designing and hand-coding all of my sites when I started in the industry, but the realities of the web market in Cleveland in the early-2000’s pushed me more toward print and branding.

It wasn’t too hard to stay up-to-date for a few years just by doing the occasional site. Mostly, at that time, you were keeping up on browser quirks and making the slight change to XHTML. The biggest challenge was moving from table-based designs to CSS. I struggled with that until I read Jeffrey Zeldman’s book and things finally clicked.

Then shit got real. My visits to Coda were too infrequent to keep up with HTML5, CSS3, web fonts, and responsive design. Every time I’ve tried to jump back in, I get choice paralysis over where to begin. Every missed opportunity leads to new additions to the list of things to learn (i.e., LESS, SASS, and React), which has ended up with me dropping back to square one.

There are no good resources for folks who have taken a break for a few years, they’re written for folks who are staying up to date with the latest and greatest, or for the novice. If you have a history with the language, it’s too easy to get bored and drop off again. ‘Here are the differences between a <UL> and an <OL>.’ *Yawn*  ‘What’s on Reddit?’ But you might also miss some small changes that happened to things that you thought you knew.

I’m making a push again, and I wanted to collect some things here in case it helps others.

CSS for all of your fancy image needs:

background-size: cover;

This will proportionally scale your background image to fill the height/width of the element that it’s applied to.

 

background-position: top left;

You can specify horizontal and vertical anchor points for the image.

 

background-attachment: fixed;

This is the sauce for your parallax effects.

 

background-image: -webkit-linear-gradient(#000, #FFF);

Vendor-specific, but this lets you create gradient buttons, etc.

 

I’ll keep posting as I discover stuff.

Writing for UX

By | UX

I just had to pause a moment ago when I went to like a song that Apple Music recommended in my “New Music Mix”. I was faced with the option to “Love” or “Dislike” this track and I thought “well, it’s good, but I don’t know that I’d say that I love it.” I actually clicked out of the menu before realizing that I wanted to remember that song, and that didn’t mean that I needed to put a ring on it.

I’m used to fretting over making up a verb when one doesn’t exist (e.g., ‘unbookmark’), but this was a clear lesson in nuance.

Edit: Interestingly, I have been suggested a few tracks that I would love the option to ‘hate’. I don’t know if this speaks more to my personality or my feelings on modern hip-hop.

Portfolio Redesign – Theme Selection

By | Site Updates

Prior to this redesign, I hadn’t really worked with WordPress since the launch of 3.0; even then, I had only a passing familiarity with it.

I was not prepared for how complex it had gotten. Themes now completely change the admin navigation, and have so many custom plugins and so much functionality that they aren’t just simple skins anymore. Unless you’re a fairly straightforward blog, changing your theme could completely remove all of your content.

After trying out a few options, I have landed on Salient. (Shout out to Joey for the heads up!) It’s incredible. It’s almost a meta theme. There is a staggering degree of customization and a variety of built-in layouts. A learning curve comes along with that, and combines with the learning curve of moving to WordPress. Luckily, the documentation seems extremely thorough.

With this theme locked in, I’m going to start rebuilding my portfolio. I have been using a PDF for around 5 years now because it let me easily create a layout where I could take a deep-dive into my thought process as well as my design process. Truthfully, it’s been pretty smooth sailing. I would run into problems when I can’t upload a file over 5MB, but I also had a portfolio that functioned well as a stand-alone piece, as well as a presentation tool.

Time to wrap this up and start making a plan around which pieces are portfolio-worthy. Check back soon.

Portfolio Redesign – Moving to WordPress

By | Site Updates

I’m in the process of moving my portfolio site over to WordPress from hand-coded static pages. I had been thinking about the move for quite some time, but the additional layer of abstraction created by WordPress, typically ended up with me just sticking with plain ol’ HTML/CSS.

Here’s what I’m hoping to get out of it:

  • An up-to-date portfolio thanks to a less laborious creation process
  • To do some more formal design thinking/writing since I’ll have a blogging platform built in

It’s day one, so I’m still fighting the temptation to go running back to what I know, but I think there’s some promise here.