My 5 Favourite Lessons from Stack Overflow

I remember a few years ago stackoverflow.com went down and I didn’t get any work done for the entirety of its downtime. This was when I was learning jQuery and I was knee-deep in a particularly jQuery heavy project, learning on the job with the help of my trusty friend Stack Overflow. The site soon came back to life and I was back on track, learning from the problems of others and devouring the knowledge of the great community that take so much time and care in documenting the solutions to a massive host of real world problems.

Stack Overflow along with some real life application, in my opinion, is one of the best ways to learn any kind of new technology. Here are just some of the great tricks I’ve picked up in my capacity as a front end WordPress developer.

1. Humanising time stamps

One of my favourite recent pieces of code magic is turning WordPress’s the_time() template tag into a Facebook style time stamp. Stack Overflow taught me, in seconds, that I can easily change something like ‘Posted on the 18th of January 2016’ into ‘posted 5 hours ago’. Here’s the reply;

<?php printf( _x( '%s ago', '%s = human-readable time difference', 'your-text-domain' ), human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) ); ?>

2. Date ordinal suffixes

Stack Overflow was there to help me when I didn’t want to do the above as well. In this case I wanted those elusive ‘th’ or ‘nd’ values in my time stamp template. All it took was a simple addition to my the_time() function.

l, F jS, Y

3. Nested pseudo elements

Stack Overflow isn’t just great for teaching you new tricks and methods, it’s also incredibly useful if you’re unsure the way you’re approaching something is good practice or not. I soon found out that nesting :after or :before elements didn’t work anymore and instead of an extensive round of browser testing, Stack Overflow broke the news to me gently but with clarity and authority.

4. Responsive aspect ratios AND max-heights

I’d long enjoyed using padding to achieve responsive block level elements at a certain aspect ration. i.e. if you want a square just add padding-bottom: 100%; to your element and bob’s your uncle. However, after a quick search on Stack Overflow I learned I could use max-heights and this technique just by applying the padding to the main element’s :after rule. This was a game changer.

5. CSS Calc

I love this function. It saves me using lines of clunky JavaScript detecting window heights and showed me that CSS can person calculations to determine property values. Although a little experimental, this a really powerful expression and I was introduced to it all thanks to Stack Overflow. I wouldn’t have heard about it if I hadn’t have been been searching a thread on a related topic – you don’t only get direct solutions to the problem you’re facing with Stack Overflow but often you’re introduced to approaches far better than the straight answer you were expecting.

There you have it, my 5 favourite lessons from Stack Overflow. Thank you to the community over there and I implore anyone reading this to answer questions they’re knowledgeable about and get involved at stackoverflow.com.