Category Archives: Front End

My YUIConf Talk: Handling Data in YUI3

Posted on by
1

I just finished giving a talk at YUIConf 2010. For those who don’t know what YUIConf is, its an annual conference held at Yahoo! for internal and external Front-end Engineers.YUIConf is all about talking about the next generation of web technology, Node.JS, SVG, HTML5, CSS3, YUI3, YQL and more.

YUIConf 2010 has some of the best speakers in this discipline – people like Douglas Crockford (JSON/Javascript), Ryan Dahl (Node.js), members of the YUI Team (they are all insanely smart), Nicholas Zakas (Yahoo! Frontpage), and many others.Here’s the whole schedule for this year’s conference.

So when I was told by my team that I could present at the conference if I wanted to, I was obviously over-the-moon. How often does a 21-yr-old get a chance to speak in front of some of the best software engineers in the world, and get that video put on YUI Theater so that everyone else in the world also has access to it.

One thing I learned from all this – preparing for a 40min. talk is a LOT harder than it sounds. We had a whole week to prepare, but I still found myself working till the last minute (literally). I spoke about “Handling Data in YUI3” – a talk that takes a close look at the Data Lifecycle, how it applies to the web and how YUI3 can help you with this. My reasoning behind this talk was simple:

  • Every web application deals with data in some form, so it seemed to be a nice encompassing talk that would interest people
  • I have had experience building Datatable + Recordset in YUI3, so I kinda knew how things come together on the UI side of things.
  • YUI3 has a bunch of great utilities that don’t get enough recognition, and no one had posted a data-lifecycle talk into YUI Theater.

So I dove in, spent a bunch of nights learning stuff, a few more nights making my slidedeck + code and the final few nights rehearsing. In the end, I think I did all right.

Resources From Talk

I’ve put the demo code I used up in a gist. Use this code to figure out how to make an autocomplete query a datasource, and how to use some of the new widgets in YUI 3.3.0PR1 (namely Autocomplete + Datatable). I also use Charts from the gallery. If you simply copy/paste the code, it won’t work. You  need to include YUI3.3.0PR1+ and get an API-Key from TMDB. Let me know if you have any questions.

Make sure you check YUI Theater for all the videos. Even if you don’t use YUI3, if you are interested in front-end engineering, that site is your bible, and will improve your skills ten-fold. That’s what it did to me.

Update: The video is out on YUI Theater, and I have embedded it on this post.

UI Innovation in Twitter for iPad

Posted on by
Reply

Engadget just posted their review of Twitter for iPad (which btw, was released a few hours ago), and the video review really highlights some of the thought that the Twitter development team have put into the interface.

It also emphasizes my belief that no matter how great an app is, the average person (ie: non-techie) won’t appreciate it without an interface that complements it.

Anyway, check out the video below!

Thoughts on HTML5 Boilerplate

Posted on by
3

For those of you that don’t know, Paul Irish (along with the help of many contributors) recently released the HTML5 Boilerplate – a base template for those of us wishing to develop websites or web apps with HTML5 (along with CSS3 and JS). I recently went through the code-base, with the help of Paul himself (through this screencast available on Nettuts) and wanted to share some thoughts.

First of all, I am a big fan of Paul Irish and regularly read his blog. Clearly, a lot of thought and experience has gone into this boilerplate. Personally, I am a big fan of it and can’t wait to use it. I was originally going to use it for this site, but wanted to get a version out ASAP. Maybe over the next few weeks, I can incorporate some HTML5 elements into the theme.

Love the Accessibility – but is it too much?

One of the cool things I learned by going through the codebase was all the neat tricks that are in the Boilerplate to ensure that you can be confident when writing your app. Things shouldn’t break in IE and accessibility stretches back all the way to IE6. Some of the cool things in here (specifically the CSS file) are:

  • A new version of Eric Meyer’s Reset
  • Fonts.css from YUI to make sure your font sizes look the same across all browsers
  • Normalize monospace styling and code-wrapping for pre, code tags (across multiple browsers)
  • Align checkboxes, radios, text inputs with their labels
  • Custom highlighting colors – including highlighting on the iPhone and iPad (using -webkit-tap-highlight- property
  • <button> works in IE
  • Bicubic resizing in IE so that scaled images look much better
  • Some helper classes and a really nice Clearfix class
  • Print stylesheets (inline) and Mobile stylesheets

My only problem with this was the importance given to IE6. Since it is depreciated, I don’t really feel that it is neccessary to support the browser (unless you’re running an enterprise app), so I’ll probably taking the CSS hacks for IE6 out of my boilerplate.

This is my new CSS Base

Even though I may still make sites that don’t take advantage of HTML5 (I’m still getting used to it), I definitely have a new CSS base to use. Stripping some of the IE6 stuff, and some of the HTML5 specific modifications out, HTML5 Boilerplate gives you a great base for your CSS code.

.htAccess Goodness

I’ll be the first to admit that I don’t know much about modifying .htaccess files. I know their importance, but my experience with them has been largely cut-paste from sources. What I do understand is optimizing my site’s loading speed for visitors, and the .htaccess file in the Boilerplate is easily going to replace the one I have on my server right now. All the stuff that YSlow says is wrong with my site (Gzip compression, ETags, expires) are already accounted for in the .htaccess inside the Boilerplate. It’s very well documented too, but I’ll get to that shortly.

For those not using Apache, there are versions out for IIS and nginx.

Documented so you can learn

By well documented, I don’t simply mean commented explanations or descriptions. The Boilerplate team has extensively used well-known and brand new techniques, and has provided a link to wherever they found the code, so you can peruse and learn more about what exactly you’re running on your site. Just by perusing a lot of the sites, I was able to learn a ton more about new CSS features that aren’t well used. (For example, this fix that solves the pesky rounded borders bleed in Webkit). This type of documentation encourages you to learn more. I’ve even subscribed to some of these sites.

Final Thoughts

To others like me who are excited about HTML5, but aren’t quite sure how to start – this Boilerplate’s for you. I was always a little worried that using HTML5 will heavily reduce the accessibility my apps will have, especially since even the modern browsers don’t support the same properties. Using HTML5 Boilerplate greatly reduces that fear for me, so I can’t wait to get started! Hope that goes for you too.
PS: You can contribute to the project via Github.