PhilFreo.com » JavaScript

Behind the scenes look at my work at Quizlet

Phil Freo — Fri, 23 Sep 2011 07:36:18 +0000

I just wrote a pretty in-depth article on the Quizlet Blog: “How We Do Product Development at Quizlet: An Inside Look at the Making of Speller” which describes the process of how Andrew and I created “Speller”, the latest study mode on Quizlet.

…a behind the scenes look at how we created Speller, our engineering challenges and processes, and how we obsessed over the user experience and the educational experience.

Includes some technical details of how we programmed it (mostly JavaScript), the text-to-speech, development process and usability testing, and lots of screenshots of the different iterations we did in order to get the UI right.

It’s a little long, but hopefully worth the read!

Book Review: “jQuery 1.3 with PHP”

Phil Freo — Thu, 31 Dec 2009 07:30:59 +0000

I was given another book to review, called “jQuery 1.3 with PHP”, so here it is. The book is aimed at beginners or intermediate developers wanting to learn how to “enhance your PHP applications by increasing their responsiveness through jQuery and its plugins“.

Chapter 1: Introduction & Overview, Chapter 2: Quick Tricks – Good chapter to teach beginners to both JavaScript, jQuery, and PHP the differences between client-side and server-side code, and how the jQuery framework fits into it all.

Chapter 3: Tabs and Accordions – At first this chapter looks to be nothing more than glorified examples of jQuery UI Widgets, but later it actually does a nice job showing how PHP can be used with these widgets to do server-side management of the tabs.

Chapter 4: Forms and Form Validation – Interesting and insightful way of validating forms (both on the client and server side, which is necessary) without having to duplicate all the validation rules.

Chapter 5: File Management, Chapter 6: Calendars – Very specific examples, but Ch. 6 uses the very nice jquery-week-calendar plugin to create an interface very similar to Google Calendar and shows how to link it up with PHP managing the events server-side.

Chapter 7: Image Manipulation – Another nice example of bringing using both PHP and jQuery plugins (treeview and jcrop) to create something really useful. In this case an image browser, resizer, rotator, and cropper.

Chapter 8: Drag and Drop – Standard sorting/dragging examples + persisting data.

Chapter 9: Data Tables – Using the DataTables jQuery plugin with PHP on very large data sets.

Chapter 10: Optimization – A few helpful tips regarding caching, automatically merging .js source files, JavaScript code optimization, perceived user load times, etc.

Overall, if you’re a programmer not super familiar with PHP or JavaScript, this book does have some very helpful explanations with good examples.

One small gripe about the book: while I do know that black and white books are much cheaper to produce, reading code without syntax coloring makes it unnecessarily harder to understand.

To learn more or purchase: “jQuery 1.3 with PHP” by Kae Verens.

Greasemonkey script: Facebook Reorder Sidebar

Phil Freo — Fri, 29 May 2009 06:29:34 +0000

Hate scrolling down to see birthdays on Facebook? I just wrote a quick user script to reorder the parts in the sidebar on Facebook’s homepage.

Before: Requests, Suggestions, Sponsored, Highlights, Events/Birthdays, Connect
After: Requests, Events/Birthdays, Suggestions, Highlights, Sponsored, Connect

Step 1: install Greasemonkey (Firefox) or GreaseKit (Safari), and restart your browser
Step 2: install my Facebook Reorder Sidebar userscript
Step 3: visit Facebook and enjoy

Notes from Google I/O Keynote 2009, day 1

Phil Freo — Thu, 28 May 2009 14:51:19 +0000

Google I/O Keynote

Wednesday 5/27/2009

San Francisco, CA #io2009

Better liveblogging here: http://www.techcrunch.com/2009/05/27/live-from-google-io-2009/

100x improvement in JavaScript speed in the last decade

Firefox, Chrome, Safari, & Opera – all supporting HTML5 with Canvas, Video, Geolocation, App cache / database, Web workers

Canvas tag – supported in all but IE

Bespin – web IDE

Chrome profiler is built completely in HTML5

O3D – OpenSource 3d in JavaScript

Video tag – get video out of “plugin prison”

YouTube demo with tag

Geolocation – supported in all browsers but IE

Mozillia VP – “A good API in 4 browsers is better than a perfect API in 0 or 1 browsers”

Google Maps will soon be adding a geolocation button

Announcement: Google Latitude on the iPhone in the browser using geolocation (WOW)

App cache / database – supported in all browsers but IE

Demo: with Safari – manifest file names cached application/graphics files

Demo: web app on Android with GMail in airplane mode – extremely fast

Web workers – threads in the browser – so JavaScript doesn’t completely freeze the browser

Demo: motion detection from the video tag all in JavaScript

===

Google App Engine

200,000+ developers, 80,000 + applications

Whitehouse app had 700 requests/second with no problem

Announcement: Java open on App Engine

Demo: develop an Ajax app in Eclipse (with Google plugin) in Java on both serverside (app engine) and client side (GWT) extremely quickly. Just hit deploy (no FTP) in Eclipse.

Google Web Toolkit

Upcoming: Debug directly in any browser

Upcoming: runAsync() lets the compiler split up JavaScript files. Example: 1.4MB to 200KB, compiler handled dependencies itself.

===

Google Web Elements (announcement)

Copy and paste website content:

Calendar, Conversation, Custom Search, Maps, News, Presentations, etc.

===

Android - coming soon new features

FREE ANDROID for everyone!

Yahoo! User Interface (YUI) JS Libraries updates released

Phil Freo — Tue, 11 Jul 2006 01:35:10 +0000

Some exciting news for front-end developers today: The Yahoo! Developer Network has released the newest version of it’s YUI JavaScript libraries today. With extensive documentation, great support for cross-browser coding, and a couple new components, these tools are becoming an even better solution for JavaScript developers. Check out more at the official YUI blog. Here is what’s new:

Updates to the previously beta versions of:

An event utility
DOM collection manager
Connection manager (for AJAX / XHR calls to the server, now with file upload)
Drag & Drop utility
Animation Library (now includes color animation support!)

Additionally, the release of improves upon:

AutoComplete
Calendar
Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
Menu
Slider
TreeView

And adds a new control: the Logger (beta).

What’s so great about these YUI Libraries? What about Prototype, Dojo, and Mochikit? As a former Prototype enthusiast before coming to Yahoo!, I noticed a couple things beneath the surface that I began to really appreciate when I made the switch:

I like knowing that a company of 12,000 people is backing, using, and continually supporting/improving my JavaScript library. They have a full time staff of people that are incredibly at handling all the annoying cross browser concerns and repetitive JavaScript tasks, so I don’t have to.
I have grown to love the heavily name-spaced nature of the YUI libraries. Sure, at first glance it may seem annoying to have to type YAHOO.util.Event.addListener, but it makes code highly independent and guarantees that it won’t interfere with other functions of the same name. One trick: add YUE = YAHOO.util.Event at the top of your page and you’re golden. I’ll admit, I do miss the $ function, but that can always been added individually.
The ability to extend the YUI classes is great. Say you need an extremely customized version of the Drag & Drop library. Easy, just take what they give you, and overwrite through inheritance in your own file the individual functions you need to modify.
Unlike Prototype (and others), there is not one massive JavaScript file. Instead, if you only want Event Handling, you only include a small global yahoo.js, as well as event.js. Then if you later want to add animation, you just include animation.js. The point is, you only add what you need.

My absolutely favorite part of developing with the YUI libraries is getting to use these cheat sheets. Go print them now!