The videos are “draggable” using JavaScript; this is the primary interactive element of this page. The cursor changes to cursor: move via JavaScript. A great deal of math and cross-device capability checks are in the JavaScript for the draggable functionality of the videos. In particular, the touchstart and touchend events are used if available (instead of mousedown and mouseup). A significant amount of the JavaScript that is pertinent to this page is dedicated to the smooth kinetic scrolling. Try dragging the video quickly and letting go; similar to Apple’s built in scrolling behavior, we see the video strip retain velocity and slow down over time.
An Overview of the Source
On looking through the source for Kickstarter’s Team page, we can infer a few things. First, they are almost certainly using Rails. This comes as little surprise, as most of the team’s Github pages are packed with Ruby repositories (alongside JavaScript and Objective-C, used for iPhone/iPad Apps usually).
The next thing we can see is a consistent reliance on CDN-powered assets. Six (or seven if you’re IE) external stylesheets and eight external scripts (some loaded asynchronously) are all coming from various CDNs. We can also immediately see that Kickstarter at least partially supports IE, all the way back to IE6. All of these assets are minified and, when applicable, compressed.
Further inferences can be made about the Kickstarter Team’s approach to CSS; a compass.css file is loaded just after a fonts.css file, likely generated by Compass and Sass. These are the first two style files loaded.
Kickstarter utilizes Facebook connect as well as the Apple touch/iPad link icons for saving web apps to the home screen of iOS.
Kickstarter is also using a variety of analytics services. Quantcast, Mixpanel, New Relic, Chartbeat, andGoogle Analytics scripts are all included on the page.
We can also see markup for Zendesk, a customer relations service, as well as jGrowl, a growl-esque notifier. These are likely used by other pages on the site and added dynamically via JavaScript.
Not surprisingly, Kickstarter relies on jQuery and/or Zepto, depending on the situation.
You must be logged in to post a comment.