Absolute Positioning and Horizontal/Vertical Centering

Horizontal centering of an element is something that we, as web developers, do every day. It’s often an integral part of our designs. It’s easy with text and with relatively positioned block and inline-block elements. The problem arises when we try to center an element (horizontally or vertically) that is absolutely positioned. When I teased this post on Twitter, I received at least 10 replies saying that’s easy if you know the width of the child element. But that isn’t a limitation. Even if you don’t know the width, fear not! It’s actually really easy. *gasp* Read More…

Hooking Up to the window.onscroll Event Without Killing Your Performance

Waterfall and FPS chartThis week was my one-month anniversary at Lemonly, and in that month, I’ve used more onscroll event hooks than I have in the last 15 years of development, and for good reason. It’s a great way to add flair, track progress, or get parallax-y. If you don’t do it right, it’ll crush your site’s performance and irritate your users. So what’s the best way to hook up to the window.onscroll event and still maintain a reasonable frame-per-second rate when scrolling? Read More…

If Everything is !important…

The past couple of days, I’ve been working with .NET controls that we purchased from a company called Telerik. They are, for the most part, OK. But as soon as you try to edit them at all outside of their theme editor (which is just about the most painful piece of shisoftware to use that I’ve ever come across), the entire world falls apart on top of you.

Today, I had the fun task of making their editor size dynamically. GOOD LUCK WITH THAT. This is the specificity of the default stylesheet for the editor:

The worst CSS I've ever seen

This is among the worst (if not, the worst) CSS I’ve ever seen. If you’re keeping score at home, that’s FIVE !important’s in one element’s style. I don’t know about you, but I’d have a serious discussion with whatever developer thought that was a good idea. Instead, Telerik shipped it. *facedesk*

Next time, Telerik, fix the problem instead of hacking around it.

Update: I was able to override it. If you’re keeping track at home:

.RadForm_MetroTouch .imagePreviewer #imageMultiPage #propertiesPage {
    height: 100% !important;
}

Introducing keycoop.com, A New Responsive Website

A new keycoop.comI launched a new website this week, keycoop.com. Go ahead and click on the link. Check it out. I’ll wait for you to come back. 🙂

Welcome back! This was a fun site to code. A few of the more interesting aspects include:

  • The main menu uses a 2D transform to give it a similar diagonal look to the logo.
  • If you’re in Chrome, you get to see a little eye candy as the hero image fades from 100% desaturation to 0%. I love CSS3 filters.
  • IE8 support is limited to functionality and a constrained single-column layout.

I was the front-end developer and UX manager on this project. That means I wrote 100% of the HTML, CSS, and JavaScript that wasn’t generated by our CMS.

As always, a shout out to the ever-impressive Emily Robinson for a beautiful design.

Love the site? Hate the site? Let me know what you think in the comments or on Twitter.

WordCamp: San Francisco Slides for Sticks, Spit, and Duct Tape

A doodle by the awesome @pixelista!

Thank you to everyone who came to my session today. It was a lot of fun to see everyone in the room and enjoying the session. Here are my slides for the presentation, Sticks, Spit, and Duct Tape: Advanced Responsive Web Development Techniques`. This should be everything you need to start experimenting with responsive web development, or to take what you’re doing to the next level.

The code from the live demo I coded during the presentation is ready to be downloaded. This is the exact file, unedited, ready for you to judge and steal from.

If you have any questions, or run into any issues, feel free to ask me on Twitter or in the comments.

Multiple Background Images Using Sass and Media Queries

Multiple background images

I am trying to create a quick way to theme Kidblog.org’s class pages, and since the largest single asset of the whole page is the background image, I really wanted to use multiple background images to make sure that the closest possible image size is served to the user.

This most likely has zero use to you, but I thought it was a really interesting implementation of RESS multiple background images using media queries and Sass. I hope that if you need it, you use it; and if you don’t need it, maybe it will inspire you to employ some of Sass’s more advanced functionality. Read More…

Quick Fix: Sass Mixins for rem Values with px Fallback

Rems are awesome. They allow us to circumvent the complex cascading em mess that even great frond-end developers find ourselves in at times. The problem with them is figuring out the corresponding px value and remembering to put in the fallback. I’ve adapted a mixin by Karl Merkli to do just that. This beautiful little chunk of Sass will take rem value input in two different formats (with or without unit values) and output both the px and rem values you need. 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…