Category Archives: Mobile

CSS Lint open sourced

Nicholas Zakas and I spoke at Velocity a few minutes ago. First we talked about CSS 3 and it’s impact on performance, then we demoed and open sourced CSS Lint! I really couldn’t be more excited (or relieved, I was super duper nervous before this presentation).

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

Rules currently tested

  • Parsing errors should be fixed
  • Don’t use adjoining classes
  • Remove empty rules
  • Use correct properties for a display
  • Don’t use too many floats
  • Don’t use too many web fonts
  • Don’t use too may font-size declarations
  • Don’t use IDs in selectors
  • Don’t qualify headings
  • Heading elements should have a consistent appearance across a site.
  • Heading styles should only be defined once
  • Be careful using width: 100%
  • Zero values don’t need units
  • Vendor prefixed properties should also have the standard
  • CSS gradients require all browser prefixes
  • Avoid selectors that look like regular expressions
  • Beware of broken box models

(We’ll allow you to turn off rules that hurt your feelings soon!)

Contribute

Many people have expressed an interest in contributing to the CSS Lint project. We were waiting to have a solid plugable architecture and API before taking contributions. The exciting news is that we are now ready! There are several ways you can contribute:

  1. If you are comfortable with CSS, submit rule ideas. You must provide the rule name, a human readable explanation, browsers affected, and a test case.
  2. If you are comfortable in JavaScript, fork the github project, code up a rule, and submit a pull request. You’ll need to provide all the same documentation requsted in item 1.
  3. If you are comfortable with Node, test out the command line version, submit feature requests.

CSS Lint for Node.js

If you’d like a command line version of CSS Lint, you can install CSS Lint for Node.js using npm using the following:

sudo npm install -g csslint

Once installed, you can pass in any number of CSS files or directories containing CSS files to see the results. For example:

csslint test.css dir_of_css/ test2.css

You’ll receive the same errors and warnings as you would with the web interface.

Performance Double Whammy Hits New Zealand at Webstock

Interested in Performance and scaling sites to a large number of visitors or pages? I just realized both Steve Souders and I will be giving talks at Webstock next week! This is a pretty amazing opportunity to massively increase your Performance mojo in one go. :)

I’m going to be hosting a workshop in which you will learn to build your own site using OOCSS techniques. By the time you leave you will have the skills necessary to write efficient, scalable CSS. You’ll understand the joy and pain of CSS3 and HTML5, and be ready to go build the next generation of websites and web apps.

Steve’s workshop is filled with Mobile yummy goodness. How do you figure out that your mobile app is slow before your clients start complaining? What’s even going on in there? In his workshop, Steve is going to open up the mobile black-box and teach you to take a peek inside.

I am super excited about Webstock, even more so now that I found out it will be a perf-geek-meet-up. New Zealand here I come!

Optimisation des Images : Les 7 erreurs à éviter at ParisWeb

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 !

Quand on commence un site de zéro, il est forcement très rapide. Au fur et à mesure, en rajoutant des modules, des flux, des images, l’expérience de l’utilisateur devient plus riche, mais aussi plus frustrante quand l’internaute est forcé d’attendre trop longtemps pour le chargement de la page. De premier abord, l’optimisation des images semble basique, facile. Néanmoins, la plupart des sites les plus réputés au monde ne suivent pas encore tous les standards pour l’optimisation des images. Faites-vous les mêmes erreurs ?

L’audience va apprendre comment :

  1. Améliorer la vitesse des pages web
  2. Optimiser les poids des images
  3. Eviter les pièges les plus problématiques et implémenter les petits astuces pour rendre les sites plus performant. Utilisez-vous encore alphaImageLoader ? Quel type de dégradé est le moins performant ?
  4. Arranger vos sprites pour iPhone. Comment contourner ses limites de cache ?

iPhone, the morning after

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.

10 15 things I hate about you.

  1. Keyboard. A massive indescribable time sink.
  2. Default search makes me want to beg forgiveness and ask my Palm to take me back. I know, the Palm doesn’t sync, we’re not good for each other, but iPhone search bar is that bad.

    Happily, there is a solution. Yahoo! search for iPhone totally rocks. Auto complete, keyword suggestions, and search history are totally fab. Don’t understand the importance of this? See rant #1. The UI is slick without being gratuitous. It allows me to get stuff done faster.

    iphone by kitcowan

    iphone by kitcowan

    My suggestion, save search as an icon on the desktop so you never have to use the nasty default search bar.

    Easy 4 step solution

    1. Navigate to http://search.yahoo.com/i/ in Safari
    2. Click +
    3. Choose Add to Home Screen.
    4. Press and hold the icon that appears until it wiggles, then slide it onto the first screen.

    Voila, even more time saved and you don’t have to deal with the absurdly awful default search.

    Could it be expanded to search appointments, contacts, memos, songs, sms, email, etc.? I can only hope.

  3. No text select, copy, or paste. To understand my pain, see rant #1.
  4. No menus. No common, standard way to find anything including what you can do within an app. Yay! Relearning everything for each new app is super fun…
  5. Safari doesn’t remember passwords or auto-complete any form fields previously used. To understand my pain, see rant #1.
  6. Horizontal scrolling. Text is often too small to see or too wide to fit on the screen. Websites need to find ways to easily toggle to a linear view for iPhone users (let the user choose). If you use YUI grids this is dead simple.
  7. Calls fail as often as not.
  8. Not enough bars and dropped calls.
  9. All this finger swooping UI action makes for great commercials, but between that and the track pad on my MacBook Pro, my finger hurts!
  10. Swooping fingers mean the screen is grubby and greasy always.
  11. Conversations! Google invented the idea, but nobody is getting it right. Fundamentally sms, email, twitter, chat, blog posts, flickr images and comments, meeting invites, tumblr, etc are all variations on conversations with a more or less wide audience. I am super annoyed to need to check all over the place to get the same info, and even more annoyed that each device requires different set of apps and procedures. Recall the guppy brain. I want a kind of Uber-Adium product.
  12. Battery life.
  13. Finding contacts, or really anything (See rant #2) – Sure, scrolling is cool and the fab UI effects like the bouncing back are really cute the first time you see them. But ultimately, I’m trying to find contact details, not play with a jazzy interface. Palm allows you to search for first letter of the first name plus a few letters of the last name. For example, John Smith can quickly be found by searching for “jsmi”. This quickly matches things exclusively and avoids scrolling through massive lists of potential matches. iPhone does not have contact search which makes it nearly impossible to look up a number and safely make a call while driving.
  14. Crashing. Reminiscent of Windows constant reboots. I thought I was done with all that?
  15. The iPhone is not a productivity tool. I want to get in, get the info I need, and get out, so I can live my life. This device was clearly designed by someone who imagined users sitting around staring lovingly, and swooping through screens while crooning “my precious”. Get over yourselves, I bought the thing because my Treo wouldn’t sync anymore.

That said, there are some things I really like about the iPhone, but this is a rant, so I’ll save that for another time.

Video, Yahoo!s latest performance breakthroughs, or — I’m famous!

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.