Joshua Johnson

Equal parts editor, writer, designer, and photographer. Hit me up on Twitter, or check out my photos.





How and Why to Build Your Own Design Calculators
CSS / 1 Nov 2013

How and Why to Build Your Own Design Calculators

Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).

Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.

7 Tips for Becoming a Successful Stock Author
Business / 25 Oct 2013

7 Tips for Becoming a Successful Stock Author

The draw for selling digital stock goods is immense. You make something, upload it to a site, and watch the money flow in again and again through repeat sales. What designer, photographer or developer could resist?

Unfortunately, the reality of the situation is that there’s no guarantee that your hard work will yield you a single cent. In fact, it could very likely be a phenomenal waste of time! Today we’re going to discuss some tricks of the trade that will help your foray into this market is a successful one.

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours
CSS / 18 Oct 2013

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours

You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?

The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters
CSS / 11 Oct 2013

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters

Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.

In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.

10 Tips for Designing Logos That Don’t Suck
Inspiration / 20 Sep 2013

10 Tips for Designing Logos That Don’t Suck

So you’re designing a logo. It sounds like an easy enough task, right? Draw a circle, type in the company name and you’re done (I’ve literally heard a designer suggest that very process). Unfortunately, if you’re really worth the money the client is paying you, there’s a lot more to it than that.

There are a million people in the logo design industry today dishing out crappy logos in bulk for crowd sourcing sites. How do you as a serious professional stand out from the crowd and produce quality logos that don’t suck? Read on to find out.

25 Useful Resources for Creating Tooltips With JavaScript or CSS
JavaScript / 23 Aug 2013

25 Useful Resources for Creating Tooltips With JavaScript or CSS

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available, which you might want to enhance using OOP class techniques like JavaScript classes using the JS++ programming language by Roger Poon.

10 Easy Image Hover Effects You Can Copy and Paste
CSS / 16 Aug 2013

10 Easy Image Hover Effects You Can Copy and Paste

Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.

Code an Awesome Hire Me Card With Your Gravatar
CSS / 2 Aug 2013

Code an Awesome Hire Me Card With Your Gravatar

It’s been a while since we polished our HTML and CSS skills with a fun little demo, let’s end that streak with a project that’s both super attractive and super practical.

Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

Create Shaped Avatars With CSS and Webkit
CSS / 29 Jun 2013

Create Shaped Avatars With CSS and Webkit

In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past.

Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Let’s see how.

What the Heck Is CSS Specificity?
CSS / 21 Jun 2013

What the Heck Is CSS Specificity?

CSS specificity is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that?

Ultimately, you can only avoid it for so long. Specificity is an essential concept that you need to grasp to be an effective developer. Today I’ll walk you through the concepts of specificity in a simple and easy to understand manner. It’s easier than you think!

40 Awesome jQuery Plugins You Need to Check Out
JavaScript / 10 May 2013

40 Awesome jQuery Plugins You Need to Check Out

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

Should You Be Designing With QR Codes?
Business / 3 May 2013

Should You Be Designing With QR Codes?

QR codes are all the rage… aren’t they? Their presence certainly seems to have increased in recent years, indicating an impressive adoption rate among marketers. But does that mean that you should be using them? If a client asks you whether or not using QR codes is a good idea, what will you say?

Join us as we take an honest and critical look at both sides of the QR debate so you can decide for yourself whether or not you should be designing with QR codes.