#shay howe

[mfcb]

So as if being able to make things EXPLODE on our websites wasn't enough, well, we're also learning to build Transformers. Wait, no. Sorry. Do transforms. Sorry, anyway, let's roll.

The truth is, anything you can dream up doing to some poor image in Photoshop? Yeah, you can do that in CSS. The cool thing with this is that you can start building images from pure CSS and cutting back on your design time by going straight to the code. I'm sure there will still be times when I go back to Photoshop, and yes, vector images will remain king . . . for some things [personally I still love paper]. But yeah. This is kinda awesome. 

Not only can you stretch and deform images [or divs mainly]. You can also start constructing a 3D space on your page. By setting perspective [depth] you can determine some basic properties for your images to move in space. 

This is far from a perfect science. We're not really at CAD level here [though getting close]. There's some serious hacky-ness going on, unless you're in the mood to get deep into the math. But the point is also to remember, with these kind of effects, you can always just undo. 

The world of code is rarely permanent. So flip it, skew it, scaleY, translateX and yeah, roll out. 

[to the left to the left to the left to the left to the right to the right to the right to the tight now kick now kick now kick now kick... ]

[graphitemind]

Threw down a quick sketchnote of Shay Howe talking about 1871, StarterLeague, collaboration, freelancing, finding developers... good lord. That was a LOT to fit into just two-minutes!

You can watch him speak for himself here: 

UX-pert Shay Howe on Freelance Front End Developers & Networking

[mfcb]

Ok. So back in the day when I first learned me some HTML/CSS chops, the biggest concern was if your tables and frames would translate over between Netscape and IE. Now? Well, you don't even know if someone's going to be looking at what you're building on a computer... or if instead they'll be trundling down a street, mobile phone in their hand [the most dangerous creature in the world is not a lion or a tiger...].

So, here's the thing. Responsive design? Only half of it is about the size and shape of what you're delivering. The other half is WHAT you put on the page. Do they need it? Does the content remain pertinent regardless of point of consumption?

Ok. Well, let's figure you got that handled. Media queries hop on in here. Not to be set as per "Here's the dimensions of your iPhone, then here's one for the tablet..." How many folks got caught with their pants down when the new iPad-Mini came out? How's a site supposed to handle the proliferation of device dimensions?

Well, these breaks you create with your media queries? It's about when your site starts looking bad... DESIGN your content. Don't let the portal design you.

Final word here: BIG shout out to Derek Eder, co-founder of Open City, co-creator of ChicagoLobbyists, and ClearStreets plow tracker [yeah, he's rad] for taking the time to give me the lo-down on what's going on under the hood with media queries!

EVEN IF YOU DO ALL THIS RESPONSIVE STUFF YOU'RE STILL JUST HIDING CONTENT. It's all still there, you're just letting each 'media' know what it should go and load in full. So think carefully about what you need. Avoid the extra code. 

[mfcb]

I'd asked the twitterverse earlier this week the difference between a Reset and Normalizer. I got back arguments for both, but as tends to be the case in 140char or less, the whole story wasn't told. 

I've decided it comes down to the difference between going to a Gallagher show and getting botox. In the one case, you're smashing the crap out of a pile of melons over and over. In the other case, sure, you can paralyze the crap out of an entire body by using ALL of neurotoxin at once, or you can just stop those eyebrows from wrinkling. 

Maybe that's a stretch, but think of it from the browser's point of view. It's doing it's darndest to render what you're asking of it. You don't need to give it a lobotomy first and then attempt to load in a whole new personality. It's got some idea of what's going, it just needs some instructions. 

So that was the first big revelation of the day. What followed was basically inspiration to create a new game to teach CSS positioning via a serious game of Battleship. I'm not sure I quite have the hang of how absolute and relative cascade together, but I sure as hell was able to see the differences when we mucked around with the code [fave HTML colors btw? DarkCyan, Moccasin and Olive]. 

Before and after I'll be intrigued to keep any eye out for. They seem like a nifty little fake for sneaking in info around the edges of what you're really concerned with. Captions come to mind, though I'm not sure that's really kosher.

.group and .ir will also be on my radar. Not IRL, but "image replacement" and seeing those kind of conventions pop up, having them called out, is a good portion of why having Shay as a teacher is so clutch. He's been in the industry, on the front lines. He's seen the lazy code and gone to the trouble of cleaning it up. 

So yeah. That was a damned dense lesson. Now I just have to go create the solar system for my homework. 

[mfcb]

So, what's this whole StarterLeague class going to be about? Not included here are the animated gifs and smooth jazz covers. But seriously. This is how you learn. 

You can follow along Shay Howe's curriculum on his Advanced HTML/CSS site. But really, you want to be here with your ass in a chair listening hard and coding up a storm with a crew of ravening design thinkers... right?

[the little drawings of folks along the side are the some of my classmate's introductions, telling us something "interesting" about themselves]