Old Man Yells at Code

By June 14, 2017Front-End
A frame from the Simpsons of a newspaper clipping featuring Grandpa Simpson yelling at a cloud.

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.

Justin

Author Justin

More posts by Justin