YUI3 Scrollview is great but sometimes, it’s not “nativey” enough for me. I fooled around a lot with the config parameters and finally found one that I think works well (especially on iOS). Try this config object to make your YUI3 Scrollview instance feel a little snappier.
var scrollView = new Y.ScrollView({
srcNode: '#resultList',
height: 260,
flick: {
minDistance:1,
minVelocity:0.4,
axis: "y"
},
deceleration: 0.983,
bounce:0.65,
});
One of the things I worked on this summer during my internship with the YUI team was building the Panel widget that’s shipping with YUI3.4.0. I like the whole “windowing” space, because I think it’s an area where the web can do a lot better. Modal overlays look gorgeous in iOS and there’s no reason why they can’t in the browser either.
So I spent an hour or two hacking up some CSS as a proof-of-concept of what can be done with CSS3 and YUI3 Panel. This is just a first pass, I’m going to clean this code up so people can re-use it with a single line. Nevertheless, thought I’d get it up here for people to see!
I want to introduce an app that I worked on this term for Yahoo!’s Hackathon. It’s called Crictainment and it’s a mobile web app that curates media related to cricket (you know, the sport).
Screenshots
I originally presented at Yahoo!’s company-wide summer hack event (where it won best iPad Hack, yay go me!). It’s been open-source for a while but I actually haven’t talked much about it outside of work.
So what exactly does it do?
Crictainment is a mobile web app that pulls in cricket news, videos and photos from a half-dozen cricket sites and presents them to you in a curated manner.
What does it do?
Crictainment gathers news and views from popular cricket news sites and displays them all in a nice interface, optimized for the iPad. It allows you to read these articles without any distractions. Cricket sites are prettybadlydesigned so I made this.
In addition to the articles, the app also allows you to scroll through and watch videos and view recent photos. Check out the screenshots in the gallery above.
Why did I make it?
I’m a cricket fan
nothing in this app uses device-level capabilities so I wanted to test out JS performance on device
I could not finish a native app in the 24 hours that it took me to make this.
I was tired of visiting different sites to get different points of view.
I want an app that works cross-platform.
I wanted to experiment with HTML5 and mobile performance.
MVC Architecture (rolled my own miniature framework using YUI3 custom modules)
YUI3 for widgets/scrolling
YQL/Pipes for pulling in data and feeds
Optimized for iPad (in terms of viewport, meta tags, etc.) Just add it to the iPad home screen and check it out.
“Native feel” when browsing the app. Animations are all CSS3-based.
Things may break in the future
This is a hack after all. I am doing quite a bit of scraping to get data off some of the sites since they don’t have RSS feeds or APIs. Also, since most of the work was done during a hackathon, I’m sure there could be errors that I’m not handling. Bugs should be anticipated, but I think I’m a decent coder so it should still work! You should open this on an iPad for the best experience. The desktop version is still a little iffy with the scrolling.
The video of my YUIConf talk got posted on Yahoo! Developer Network’s Theater and YUIBlog today. I know for a fact that YUIBlog has something like 28,000 followers, so it’s good exposure! First things first, here’s the video:
This is the first time I’ve watched myself giving a serious talk about something and it felt really eerie. Almost like being able to see the future, because I still remember what was going through my head at specific times in the talk. Don’t get me wrong – I think I did a pretty good job. Looking back at it from the eyes of a JS newbie (which I still consider myself to be), I think this talk would honestly help them.
