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!

80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.

Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l’expérience de l’équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.

Je vais parler (en francais! eek!) avec Eric Daspet de la performance des images pour le web a ParisWeb. Les inscriptions pour Paris Web 2008 sont officiellement ouvertes. Jusqu’au 15 octobre au soir, vous bénéficierez de tarifs réduits. Le conference sera lieu a Paris le 13-15 Novembre. J’attend vous voir bientot alors.

Voila le proposition

Voulez-vous améliorer la vitesse de vos pages web et réduire l’impact écologique et monétaire de votre hébergement ? Voulez-vous faire ceci avec peu de changement de code et en gardant une belle interface graphique ? Cette session va vous apprendre les 7 étapes pour mettre votre site web au régime. Comment perdre des poids que votre site a pris en rajoutant les dernières nouveautés. Et, encore plus important, comment ne pas reprendre ce poids !

The Web Standards Curriculum published by Opera is a great place to start. It will give you the basics of Front-end Engineering from the ground up. The second wave of articles was recently published including a background image and sprites how-to by yours truly.

Time to board a plane, so I can’t tell you more just now, but check it out. It is a great place to get started or brush up on your understanding of web standards.

My Treo stopped syncing in January and I immediately started missing all my meetings. I need the device to ring every few seconds to remind me to blink and breathe, so life without a properly synced agenda was awful — just ask my colleagues. Guppy brain.

A Palm user for the past eight years, I made the switch to an iPhone 3G a few weeks ago. I’ve had one palm or another since I was gifted an S300 and became (shockingly) a productive member of society. I vaguely want to give the iPhone a fair shot, aware that my bias toward familiarity is inevitable, however there are a few things about the iPhone that totally and completely suck.

The YUI team released YUI3 for a sneak peek preview. The goals make me happy… especially goal 2.

1. lighter (less K-weight on the wire and on the page for most uses)
2. faster (fewer http requests, less code to write and compile, more efficient code)
3. more consistent (common naming, event signatures, and widget APIs throughout the library)
4. more powerful (do more with less implementation code)
5. more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)

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.

Perhaps you have always wondered, what is Hillary Clintons YSlow score? Who is the master of image optimization, and who has so much image-bloat that it weighed more than Mike Huckabees entire page? Check out the article I wrote on YDN.

Happy voting.

Steve wrote an article about semantics. He does a good job of explaining his process.
We need to teach newbies to take a slightly broader view. Imagine, for example, an action list, which allows you to execute a certain number of actions relative to the context in which it is found. Think; “print”, [...]

I’m not a proponent of lowering skill level for diversities sake, but is it possible that there are CSS Goddesses on the A-list in terms of technical skill, speaking ability, and vision who simply aren’t on the radar of the web development community?

Un site accessibles et un site inaccessibles peuvent paraître exactement les mêmes pour un utilisateur qui n’est pas handicapé. Il peut alors être difficile de comprendre les raisons de tout ce remue-ménage. Pourquoi est-il aussi important de tenir compte de cette accessibilité lorsqu’on conçoit et lorsqu’on met en forme des pages Internet ?

If your visitors have visited Yahoo! or another YUI using site today there is a chance the library will be in their cache since they are now offering free hosting of the library on their servers. This just rocks. It means that normal people get to take advantage of the lightning fast Yahoo [...]

A List Apart has launched a new site design. They had a couple seconds of style-less content, and then boom, the new site was born. At first glance it is a 1000px wide, four column design based on ruby on rails. Take a look.
New design. New structure. New server. New publishing system [...]

bobbyvandersluis.com | Unobtrusive Flash Objects (UFO) v1.0
A great article which explains a useful way to include flash content in your website without compromising standards.

I attended WWW2005 in Chiba, Japan, just outside of Tokyo. It was a fun conference. I met lots of great people, and saw some people I hadn’t in a while.

I am working on a site for Mason where he can record his adventures rebuilding a Morgan with his father-in-law. The design is going alright, and I have only two gripes.

Allowing writers to contribute to the creation of accessible documents.

The testing was based on the needs of non-technical content contributors; writers, graphic artists, editors, etc. The program had to shield the user from all the code and provide a simple usable interface.

It is reasonable to expect writers to be able to update documents and follow preexisting styles without substantially compromising accessibility. However, they won’t be able to create or change the overall look and feel of the documents. This type of change requires familiarity with CSS and XHTML, even in the WYSIWYG (What You See Is What You Get) environment. With proper planning, this limitation can actually help insure consistency across large documents. . .