Tweet For Code #1

You don't need a thousand lines of code to make a big difference in any coding language.  Oftentimes it's quite the opposite:  a few tiny code snippets can do a world of good and accomplish big things.  I asked my Twitter followers to tweet to me their favorite tiny snippets of code -- that's a bit difference to try to pack into 140 characters!  Here are my favorites from this round!

Vertically Centering Elements

Vertically centering elements is a massive pain, even 20 years into CSS' life. This snippet cures all of those issues:

@davidwalshblog .children{ top: 50%; transform: translateY(-50%); }. Easiest way to vertically align any object, even unknown heights.

— Brian (@Fi2o) January 7, 2014

border-box All the Things!

I've seen a lot of people mention applying this CSS globally. I've not done so but it's worth checking out.

@davidwalshblog * { Box-sizing: Border-box }

— EricAnton (@EricAnton) January 7, 2014

View All Global Variables and Object Properties

I love this for (manually) checking for leaked global variables. Can also be used on other objects to get properties and methods.

@davidwalshblog View all global variables: Object.keys(window)

— Nils Ekman (@nekman) January 7, 2014

Targeting Chrome

Targeting Chrome on mobile done with just CSS? Nice!

@davidwalshblog /* target Chrome */ [at]media screen and (-webkit-min-device-pixel-ratio:0) { ... } for cross-browser compatibility fun

— Carly Willats (@carlyweb) January 7, 2014

Viewing the Current State of an Object

Using console.log on objects which may change will throw you off. This snippet prints out the object and its values at the immediate state:

@davidwalshblog console.logNow = function(o){console.log(JSON.parse(JSON.stringify(o)));}; for logging those objects that might change.

— Alexis Martin (@AlexisYj) January 7, 2014

Emulate console.dir

If a given browser doesn't support console.dir, you can use this code snippet:

@davidwalshblog @fwenzel var pp = function(o) { return JSON.stringify(o, null, ' '); }; // ( if console.dir doesn't exist in your browser )

— Jeff the Elder (@canuckistani) January 7, 2014

Prevent IE Stair Stepping

Internet Explorer's "stair stepping" effect -- we've all been there, we haven't always had a fix.

@davidwalshblog transform: scale3d(1.2, 1.2, 1) rotate(0.01deg); - rotate bit is for stair-stepping scale issues in IE

— Travis Almand (@TravisAlmand) January 8, 2014

This is just the first TFC -- I'll be running these periodically over the year.  Great work to those who tweeted this round and I hope to get the same massive response next time!