My Sass and CSS Best Practices

Modularization, Nesting, Variables, Mixins, Specificity, Etc

In the week since I tweeted this, I’ve been asked about what I meant by it a half-dozen times. As with any dev tool, Sass’s power can be both a boost to productivity and a source of scorn because of misuse. I’ve even been told by a couple of people that they don’t allow their staff to use Sass/Less/CSS preprocessors because of the horrible unmaintainable CSS that it generates. Looking back at the Sass I wrote when I first started using it vs the Sass that I write now, I’m 100% certain that the problems these dev shops have lie 100% with the way the tools are being used, not the tools themselves.

Let’s take a look at some of the lessons I’ve learned and methods I use to write Sass that compiles to clean CSS.

  • Indentation vs. Nesting
  • Modularization
  • Variables
  • Mixins
  • Classes vs. IDs

Read More…

Setting the Stage – The Five Best Opening Tracks

A great opening track does more than start an album, it introduces a listener to the band and sets the stage for the rest of the songs. It is the most important track on an album, and can make a great album legendary. I’ve listed my favorite opening tracks of all time after the jump, but I’d love to hear yours. Leave them in the comments.

Read More…

Forcing Internet Explorer 8 Out of Compatibility Mode (Quick Fix)

There is nothing worse than spending weeks designing and developing the perfect website, only to have the client send you a bug report with the screenshot clearly showing they are in compatibility mode. Floats don’t work right, transparent pngs are partially broken, and all that fancy CSS3 stuff that (sort-of) works in IE9/10? Yep. That’s broken too. So how do you fix it? Read More…

Responsive Layouts and Floats with *{ box-sizing: border-box; } (Quick Fix)

I’ve decided to start something new here. I am going to (attempt to) post one short and simple trick I’ve learned that I use every day in my code. I am going to call them, Quick Fix. I know… not really creative. Welcome to my life. What I am going to do is start with fixing a problem I think everyone has when they combine responsive web design and floats or inline-block. Read More…

My Weekend at OpenWest (Thoughts, Reactions, and Slides)

And with a fun Saturday, OpenWest 2013 finished the same way as it started, with me sitting in my hotel room, excited to implement what I have learned (or will learn) at OpenWest. Even more impressive than the knowledge shared during the sessions was the warmth and openness of the people I met this weekend.  Read More…

Thoughts About Minneapolis WordCamp (With My Presentation Slides!)

My talk at WordCamp 2013 -- Thanks @jasperjacobson!

 

Minneapolis WordCamp 2013 is over. As fast as it started, it finished.  The chairs are stacked, the desks are moved back to their places, and the classrooms at MCTC are full of design students again today. I want to thank all of the organizers and sponsors who made this event possible. I know that your experience wasn’t nearly as quick. It took a ton of work to put something like this on, and I am glad I was able to take part.

I walked away from the day with an overall positive opinion about the day. There’s nothing harder than trying to put something like WordCamp together, and the organizers did well with it. Read More…

Redesigning the Save Icon and Rethinking Interaction Metaphors

Different save icons

Over at Branch.com, there’s a great discussion going on about Redesigning the Save Icon. A few interaction design experts are all weighing in on the topic. Some ideas are awesome, and some aren’t much better than what we have now. The reason for the discussion? My daughter is now two years old. She’ll never see a floppy disk in real life. Kids that were born in the late 90’s have probably never seen one either (or at least used one). Apple released an iMac in 1998 without a floppy disk. By 2007, only 2% of computers sold still contained a floppy drive.

Sure, even kids who’ve never seen a floppy disk know what the save icon is for. They understand that when you click it (or touch it… from now one, I’m just saying press it), your computer will save your work. But as we get further from the days when floppy disks were actually a thing, the association becomes weaker. That’s the issue with skeuomorphic icons, no matter what their purpose. Eventually those items are no longer relevant. That means boxes, folders, vices, zippers or file cabinets are not really viable alternatives to the floppy disk.

The other issue arises when it’s no longer your computer saving your work, or the entire save paradigm changes as we move more toward local AND cloud storage of all documents. Today, the idea of saving a static copy of a document is almost foreign. New versions of Word, Google Apps, and other productivity packages do a great job of offering a versioning environment much like git or other VCS. So the question is, does “save” still work when describing what that icon does? In my opinion, no, it doesn’t. Read More…

For A Good Time, Call Midwest PHP

A great group of people at Midwest PHP

 

So, I’m at Midwest PHP. That’s right. A front-end developer for a .NET shop at a conference filled to the brim with open-source developers, talk about Linux, and beards… so many beards. That being said, I’ve never met a group of people so kind, accepting, and open. They are a credit not only to the PHP community, but the developer community as a whole.

The talks have also been awesome. It’s been a nice collection of topic overviews that I’ve enjoyed learning from and being inspired by. I already have a long list of to-do’s that I’m taking back with me to both try and use, and we’re only half-way done. I’m really excited for day two.

Anyway, enough fawning over my new-found friends.  Let’s get to what you’re all hear for… slides. Here are my Rocking the Responsive Web Slides and the simple responsive demo. Steal them, use them, convince your boss and clients that responsive is the future AND the present. Do responsive, and make the web better. And if you’d leave me your feedback on joind.in, that would be great!

Need a place to start? Fork and contribute to Squeaky Clean, my fast and clean WordPress boilerplate. Even if you’re not a WordPress guy, the SASS file is a great place to start on your project.

Here are the slides for my second presentation, “Embrace Your Inner Designer.” I’m sorry they are so delayed. My brain decided it was a good idea to leave my laptop power cord somewhere other than in my bag.

Oh, if you use these slides to make something awesome, PLEASE put a link to it in the comments below. I love hearing about amazing new things.

UPDATE: If you missed my talks at Midwest PHP, or you want to watch them again, MJG Intl. was kind enough to host a meeting, “An Evening of Web Development,” during which I presented very similar (and very nervous) versions of my two talks. The videos are available on YouTube: Embrace Your Inner Designer and Rocking t he Responsive Web.