Stubbornella - Nicole Sullivan

Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow.

Object Oriented CSS: for high performance websites and web applications.

Find out more about object oriented css

1. Open source project on github (GIT is having some DNS issues, be patient)
2. Follow along with the slides on slideshare
3. Join the OOCSS google group

My Object Oriented CSS grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features.

• Only 4kb, half the size of YUI grids. (I was totally happy when I checked the final size!)
• They allow infinite nesting and stacking.
• The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.
• Solution for sub-pixel rounding errors.

http://wiki.github.com/stubbornella/oocss

template.css and grids.css

…My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

I visited Yahoo! last week to record a talk I had given at the Front End Summit in October. If you are a designer or an F2E it is essential that you understand the ways in which design choices impact overall site performance. This talk establishes guidelines for High Performance Design including 9 Best Practices.

9 Best Practices

1. Create a component library of smart objects.
2. Use consistent semantic styles.
3. Design modules to be transparent on the inside.
4. Optimize images and sprites.
5. Avoid non-standard browser fonts.
6. Use columns rather than rows.
7. Choose your bling carefully.
8. Be flexible.
9. Learn to love grids.

Web Directions North, Denver, February 2-7

I’ll be speaking more about Design and also CSS best practices at Web Directions North in February where I’ve been invited to give both a Performance Bootcamp Workshop and a CSS Performance for Websites and Web Apps Presentation. I look forward to seeing you there!

I’m at Ajax Experience this week with my teammate, Stoyan Stefanov. This morning we did a demo of our new tool SmushIt.com. Smush it allows you to automate image optimization by using the best of open source algorithms to achieve the smallest, high performance images possible.

Smush it comes in different flavors:

• You can upload a bunch of pictures in your browser
• You can provide us with a list of image urls or
• You can get a Firefox Extension to optimize the images found on any web page

Well, not quite. But I am pleased with the results. Who would have thought that the shy girl who almost failed a public speaking course at university would turn out to really enjoy presenting. Turns out I only like speaking about geeky things, preferably to geeks. A limitation perhaps, but far less limiting than nearly peeing myself with fear in college. No, not literally.

Anyway, check it out. It is jam packed with brand new performance ideas to make your site fly.

The Exceptional Performance team at Yahoo! added 20 new performance rules and refined some of the original rules. I’m really excited about this; this performance goodness is just what developers need to accelerate the user experience even further.

1. Flush the buffer early
2. Use GET for AJAX requests
3. Post-load components
4. Preload components
5. Reduce the number of DOM elements
6. Split components across domains
7. Minimize the number of iframes
8. No 404s
9. Reduce cookie size
10. Use cookie-free domains for components
11. Minimize DOM access
12. Develop smart event handlers
13. Choose <link> over @import
14. Avoid filters
15. Optimize images
16. Optimize CSS sprites
17. Don’t scale images in HTML
18. Make favicon.ico small and cacheable
19. Keep components under 25K [mobile]
20. Pack components into a multipart document

Stay tuned, we’ve got more tricks up our sleeve.