wonderwhy-er blog

As I wrote before am working on a project in venture-lab.com technology entrepreneurship course.
And for number of reasons I picked Python and Django as server side technology. Why not PHP? Options of switching to the cloud later are more wide.
But we start lean and mean on dedicated hosting I rent from Hostmonster for this blog and other stuff anyways.
Wanted to share few things that may save a little bit of time and trouble for others.

Setting up Django on Hostmonseter

For this I mostly used this tutorial.
It mostly covers it well. Install python, install Django, install mysql adapter and related stuff. Create fcgi script that will server requests. Setup .htaccess so that all requests go trough that fcgi script. And don’t forget to chmod fcgi script to 755. With more privileges hostmonster servers consider script insecure and forbid access, with less it will not work aether.

Now my setup was something like 90% similar, but along the way I stumbled on a problem. Almost all tutorials like I referenced above use technique like redirect to redirect usual http requests to django.fcgi so that django handles them.
And in usual case it mostly works. But in my case I am running site/app at a subdomain, and have a parked domain name that goes to that subdoman.
And turns out that in such cases such usual .htaccess does not work. After some communication with support here is how my  current .htaccess looks:

DirectoryIndex django.fcgiAddHandler fastcgi-script .fcgi  
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteRule ^(.*)$ /django.fcgi/$1 [QSA,L]

Now as far as I understood from support. With parked domain redirect was not finding index, and thus showing 404. To solve that you need to use DirectoryIndex in .htaccess to tell Apache where to look for index.
And that’s what I did on line 1. Interestingly I did not find a correct way to do it in any documentation or tutorial. That’s why I share it, may be will save someone some time I spent on trial and error experiments
Another thing that is different from most tutorials is that line with redirect condition is absent. That’s because it usually points to domain requests we should redirect from. Considering I use parked domain and subdomain it was only messing things up.
Anyways with configuration from above it works fine for me so far.
Hope that helps someone out there

So, since April I am participating in venture-lab.org
Its a free online version of Stanford Technology entrepreneurship course. More on it later.

Help with homework

First things first. I need your help with current homework. Currently they teach idea/customer/value proposition validation, part of it is doing interviews and surveys.
And here is open public survey from my team
Do you love quotes?
Please do it

How this course works in Stanford

It is not one specialization course. From what I understood something like 200 students gather up to go trough in a span of a semester. Those people are from various backgrounds, designers, engineers, marketeers etc.
During first few weeks people learn how to form the teams and brainstorm ideas.
By end of this people should form teams of ~5 people. Preferably not less then 3 and not more then 10. Preferably with different backgrounds to catch widest experience possible as a team.
In lectures they provide lot of statistical data on how what kind of teams in what kind of circumstances succeed. Like for this kind of idea this is better and so on.
After that they start to teach you how to test your idea, process of first iteration of validating and analyzing idea, is there really a problem, how to reach people, how to test it on them, how to analyze market opportunity of it, etc.
By end of this 2 week iteration teams should have an idea they will pursue throughout the course. Also at this point teams start to use Stanford connections to silicon valley entrepreneurs to find mentors.
Here it is actually pretty interesting. It seems in silicon valley they have a culture. Every successful Entrepreneur  there had a mentor before, and they have it as a culture of “you have been helped, it is your dept to return to next generation, help them a little to not step on same problems you did on  your way to success”.
At this point that’s all I know.

How it works online

I don’t have official numbers, last thing I heard was that 40K of people from around the world registered. At this point there are something like ~1K of teams of 3-25 people in size.

First thing they did is that they joined people in to teams of 10 based on their geographic position. So I was in a team with 10 people from Riga,Latvia
During first week that team needed to generate 5 bad and 5 good ideas.
Then team members vote on each other and people with low team reputation drop out as inactive or not productive.

On week 3 new members from your region are added and this slightly changed 10 people team gets someone else bad idea. Task is to make and advertisement for it as “make bad idea look good” exercise. Quite funny At the end, there is voting again.

At this point members can decide to stay in the team if they are happy with it, or they can leave and start their own team, start searching for people or team to join.
And after that you start to work as a team, I don’t know how they will judge but top 30 teams, no matter from where will get help to get mentors, and you as a team can try to look for mentors yourself.
We trough course channels managed to get in touch with 2 out of 4 we tried Not sure if they will get involved but its interest/fun experience anyways

My team

One more thing to add. I made a team with aim for it to be international, and I succeeded.
We have in the team someone from NewYork who is our “go to mentors in US guy” at this point.
We have a someone from Singapore with great experience in quality analysis and community relations, who also is local to his reagion TEDx speaker on “user experience”
We have PhD in Marketing/Advertisement from Italy/England who works for Google 0_o
Also other people from China, Brazil, Ecuador, India 0_0
And bunch of other people, and somehow I am team leader 0_0 Managed to attract such people to my idea and profile Still hard to believe that when write that down lol

Anyways we are having loads of fun, though it straining considering we have day jobs and some of us are also students and have hard time in this time of they year ;( But we are managing somehow

Sooo. I insist you guys to keep an eye on this venture-lab.org and try it next time it will run. Its incredible!

Udacity subs browser

So. I enrolled in to Udacity Web Application Engineering. Its from same people who did AI Class.
I quickly noticed that they use almost exactly same lectures system so after little bit of rewriting and reconfiguring I made my AI-class subs browser work with Web Application Engineering lectures.
And here it is http://www.wonderwhy-er.com/Udacity-Subs-Browser/

Issues and plans

As before I group and sort lectures by their name on youtube name. In AI class I was rewriting parse a little adding various exceptions each time they added new videos with some quirks in naming.
This time I do not plan to do it and just hope it will not get bad. So far its usable, just not that well sorted.

Also. As I am taking only Web Application Engineering so far there are only lectures from that course. But it seems I can provide subs for at least two other courses. I am planing to find time and remake this a little to allow picking a course first, and the seeing subs for that.

That’s it I guess. Leave comments, issues and suggestions bellow

Making simple tool for myself encountered a problem with overflow:auto
It seems to me that using overflow:auto is not good idea today and if possible should be avoided. Real reason is that it seems not to work well on touch devices.
But also as I encountered it has some “holes”.
So, lets imagine interface similar to Google Reader. There is left bar wits some sections and right bar with content like this:

Well everything is good until there are too many items or browser was resized. Now you will not see some items? You choices? First that comes to mind and one it seems Google Reader uses is to set overflow:auto which will show scrollbar when there is not enough space.

Sadly that’s how it looks out of the box

Booo… Scroll bar overlaps your sections. Obvious thing to do is to widen sections panel and move content further right to give space for scrollbar.

Yaay! But how it looks without overflow now?

Booo again… This time problem is unused space.

Some designs of pages allow to ignore it. Sadly not all.

What to do? Obvious you say? Just detect when overflow kicks in and change style/layout of page depending on that.

Well, turns out its not that simple. There is no CSS  pseudo classes to target that case. What’s even worse there is no built in JS event to detect if overflow:auto kicked in or even some property to ask if it is on or off.
And sadly I did not find solution to exactly my case, just some parts here and  there.

Anyways ended up writing my own. And here is JS fiddle of result I got.
Idea is that you can tell if element has overflow using offsetHeight and scrollHeight. If first is larger then second then we have an overflow. Now we can detect if element has overflow but what next? We need to call this method. When to call it? Ideally would be on change of element height. It can be cause by some page resizes or change of content somewhere. And again no event to detect that? At least no native one.

What I did is that I just check this when window resizes + when page loaded. Its not perfect but I don’t have dynamic content changes in page, so it works for me.
But checking if its possible seen mentions of plugins for jQuery which can provide element resize events. Just did not try it.
Hope it helps someone to find his way quicker.

Haven’t posted for a while. And reason is that was busy “changing sails” so to say and hmm feeling down I guess a little. But things are getting better and here is somewhat big post about many things.

So, what’s I am up to for last half of the year.

In short. I am freelancing. Doing flash mostly on that side. But its half time at best that allows me to stay a float with money.
Other half time? Learning new stuff. Server side technologies. HTML front end, basics mostly. So expanding my skills  to be a more broad web developer then just interactive Flash based RIA.

And now more elaborate parts.

Flash platform

I guess I haven’t done any for fun Flash projects since last October. And even then it was small stuff.
But I still am doing as I mentioned above some freelance stuff with it.

So why?
I somewhat lost interest at the moment and concentrated on other stuff. Am thinking to do some things with Flash but mostly am finding more interesting or useful things to do elsewhere at the moment. So Flash projects and ideas are not at the top of the list.

Also, Flash is aether dying or is in transitional state to something else. I switched sides on this question after Adobe mobile browser decision. Anyways here are some points:

1. Adobe discontinued support for mobile browser Flash last year. And last year there were more smartphones sold then PCs. What that means in long run that Flash is not ubiquitous anymore, and never will be, so its unprofessional to pick it for simple projects. But I am web developer, don’t like platform stores ideas etc so… Flash is not enough anymore if I want to stay in web application segment and participated in projects of all kinds
2. Flash right now is repositioned as game platform in desktop browsers. Here it is still ubiquitous, and has chances to stay that way. Also now it has hardware 3D with great tools support like Unity and Unreal engine. So cool. Flash is good games platform for desktop web. And that’s almost only thing that is left for Flash.
   I love games so why I don’t like it all? Well Unity and Unreal engine. I haven’t seen and probably never will see native Flash developer tools to compete with Unreal engine. What this means is that great games will come to Flash platform almost passing native Flash developers in a “slow lane”.  I mean those games will be developed using C# and C++ which are better languages for high profile games, and they will use incredible tools and pipelines for development that Unity and Unreal have. And competition for attention will demand getting more immersive results.

So good for Flash as a platform but not good for Flash developers.

Case in point. Recently Adobe announced “tax” on usage of premium Flash features. If you want to use high performance Alchemy features that are used by Unity and Unreal engine to expert to Flash + you want to use hardware GPU 3D you need to register a license. If your project over its lifetime earns 50K or more you need to start paying 9% of your profits as part of the license.
Why Adobe did that? Well I mentioned above. All those high profile games will not use Adobe tools for their creation. And Adobe business model always was selling tools. But world has changed. Small company who bought 10 software packets can server hundreds of millions of customers earning millions. And what Adobe gets? Couple of thousands for their software.
So Adobe envies Apple and Facebook business models where developers are taxed trough various means so that platform owner gets a cut on everything that happens.

Yoke is that 50K is not that much. Team of 10 people working for 6 months(average game project) with salary of 1000$ per month(really on a low side) will spend 60k$ only in salaries. So they will need to make it back. Including 30% tax from Facebook and now additional 9% tax from Adobe. So may be it will not touch some indies but it will touch everyone with scale reaching “small” business.

So that’s all about Flash I guess.

Expanding my skills and free university level courses

I have been playing with PHP and HTML for looong time but never liked both. PHP is like some student party that is still cleaned up and HTML/CSS/JS are a mess that is cleaned up still too. Though HTML/CSS parts are almost cleaned up, I guess in few years they will become good enough for me not to swear all the time when I use some parts of them. But JS will stay

Anyways, with this Flash situation since summer I started to spend significantly more time playing with server side(no swearing there at least ), and a little bit more with client side.

Soo… Half time I work, half time I do stuff for myself learning + courses.
Thing is that ice started to move in education sector. Finally One of those things is movement for free, open, international university level education.
There are many things happening there, Stanford Coursera platform and former Stanford teacher and Google R&D labs supervisor Sebastian Thrun venture Udacity, or already famous Khan academy that at the moment targets school education.

Mind blowing future vision of education

I wrote before that I participated in AI class last fall which was done by Sebastian Thrun. After doing it he said that it was like Matrix moment for him. He was given blue and red pill. And after trying red pill(teaching class of 160 thousands of people from school children to elderly, from poor in Africa to rich in his own Stanford class who preferred it instead of real class) he said that he can never go back… So he left Stanford.
And he has a vision of education future. In my view a very strong and disruptive vision. Vision that in 50 years there will be only ~10 universities who will teach whole world for free.
Why?

• Such universities will hire pop teachers with clearest and brightest visions of their disciplines, giving chance anyone to learn from them for free
• Those learning tools will go trough computers giving them ability to collect, harness, analyze data on the process and allowing continued incremental improvement based on deep real data, same Google does now for search, same Facebook does for social, same last.fm for music discovery, same Amazon does for improving their trading and providing you with best things you don’t knew you wanted
• Most curios is business model of free education. Thrun has mind blowing idea… In the end of AI class he sent emails to 10% of best students asking them to send a CV if they want a job.
  Only recently I learned why. Large firms pay for talented workers. So bring them good worker for hire, if they like him they will pay you. But imagine if teachers get % of what their students earn in first years.
  Imagine the implications. Now its in “university” interests to teach as many students as they can to a level for which firms will pay good salary, because that’s only way they are getting payed! And firms get good worker! And you get education for free and a job in the end if you were good at it!
  That’s that win-win-win situation where all three sides get what they want from this!!! That’s what I would call 21 century education. Its only a dream at this stage, but dream that started to try to become a reality… And its inspiring and hopeful

So courses I am taking

After AI I registered to:

• Courseara Human-Computer Interaction (interfaces)
  Sadly postponed
• Courseara Software as a Service
  In 5 weeks I learned about Ruby/Rails/Amazon web services/ Behavior driven and test driven development/Cucumber and other stuff
  I learned a clear vision, a lot better that anything in my 6 years of real education about clean code and test drive development
  Loved Ruby. In short. Ruby is what JavaScript should have been. Clean, transparent, powerful in expression. Sadly there is price to pay, performance, issues with IDEs
  Anyways loved it a lot more then PHP.
  P.S It starts a new in May
• Technology entrepreneurship (was Courseara but for some reason is now independent now)
  Just started, cool class about brainstorming business ideas, planing business, teamwork, finding funding etc. Only just started. Seems promising.
  It already made me brainstorm ideas and I come up with some that I don’t want to share lol Am thinking of starting doing one myself in summer because its that promising
• Udacity Web Application Engineering
  Starts soon. Apparently will be “develop your own blog with Python in few weeks”. Also thought by Reddit co-founder Steve Huffman Talking of pop star teachers

And I guess that’s it

P.S Ouh and one more thing, Pinterest

Registered recently to Pinterest. Simple, clean and cool idea. At minimum its about collecting pictures as boards. Like pined to wooden board photos.
But going further its about collecting inspirations. Photos of places you want to visit, things you want to learn. Things that inspire you and make you creative.

We all do it in different forms. Like I was storing links for some such things in Evernote. But doing it in a way that Pinterest suggests… Its not only collecting what you like, its collecting it in form of inspiring, jaw dropping pictures that motivate you more then just links. And community that shares, curates and filters most awe causing pictures.
Inspiring idea for a project

I also like viral side of it. Its win-win-win.
Everyone has selfish reasons to use the service:

• Collect things you like in inspiring way
• Use for marketing

Everyone has reasons to invite certain type of people:

• Invite people who will collect interesting stuff that overlaps with your stuff
  This would allow you to improve your collections

And win for Pinterest is obvious. More users.

As usual I am slow to write about such things. So last week Adobe fired hundreds of people and announced that they are giving up on Flash for mobile browsers. There is already much written about it. Lot of  “Flash is dead” buzz on tech sites which sounds to me like an ill informed. Some closer to Adobe people, who actually work in RIA, have a lot more sane views on the question. Here, here and here among the others.

My views and reactions

My first reaction was “Well, now Flash as we know it is dead”. Or more precisely it got a terminal illness. On other side what exactly changed? Right now really nothing. Flash was not really used on Android browsers.

So what changed is promise. Before, may be somewhat unofficially Flash had a “Write once,  run everywhere” promise. You could do desktop, browser, mobile apps with it. But now… Even though flash was not really used on mobile browsers it was somewhat there. Now promise is no more. And it is very important for future prospects. And it probably will undermine demand for Flash from marketing sources.

Mobile killed web

Reading posts and comments around this Adobe move I was trying to gather up things that happened since iPhone came out. And it seems to me that its not only about  iOS killing Flash. Its about mobile revolution fragmenting the web.

Simple example are popular web services. How many versions of their interfaces there are? Up to five. Web version for desktop and for mobile. And native versions for desktop, iOS and Android. Though native desktop app is a rare beast. On other hand on mobile web version may not be rare but its rarely used if native app exists. For one thing with app you do not need to login, app remembers tour credentials.

Some even prophesying that mobile web is dead, people prefer app stores and native apps instead. And for good reasons.  HTML5 if far from being able to compete with full-blown apps experience.

Right tool for the job

One trend that is stable among big Flash developers is to say “right tool for the job” and “differentiate yourself by learning new stuff”. In a way what they say is that Flash is becoming a more niche thing and if you want to have many jobs and projects to pick from you better to expand your skills and tools in to other niches as well.

I started to learn both HTML/JS/CSS and Flash some 8 years ago. Made few ugly sites in HTML, made few small toys on Flash and one ugly site. And started to do more and more with Flash. Why? It could a lot more, it was a lot easier and more consistent too. It was fun. So I picked Flash because it was easier, more fun, and it was a profession with a lot less competition at least locally while there was demand. But even then Flash was a niche tool. But its niche was and still is cool. It was all about animations, flashy interfaces, multimedia rich tools in a browser, games, interactive and generative art in browser like a demoscene. So by picking this I was in a way filtering what kind of work will come my way, and this kind of work felt a lot more fun and interesting then making some internet shops and usual visit card text/image sites. I also loved web, open, without gatekeepers, with lot of opportunities on making something.

Now after 8 years not much have changed, I would rather say that demand for Flash even boomed over last years but in realm of social games. And now checking for available works for Flash developers it feels like 70% or more are social games related. While other 30% are marketing related.

For over a year I was starting to feel that Flash niche stops to be that fun for me and I want to be able to do more. Slowly started to learn other web technologies. After a year, and now with announcement of Adobe… I must say that for me nothing changed in standard web technology world. HTML/CSS/JS improved a lot. I at last can make imageless pretty looking sites and interfaces. It feels good. But when it comes to actually making a complete rich app with data input/output, sounds, complex interactions and consistently with good performance across all browsers… Its still the same pain it was years ago or so it seems to me…

So for me, more exploration is on side of servers and simple sites, for rich app experience in browser Flash was and will  be for near years my tool for the job.

But that’s years. Probably few. What’s then? I do feel a need to expand my experience as a professional developer. And I see two choices before me. One I talked about above, as web developer. Another one I see is as mobile app developer, aether native or reusing my Flash skills and doing AIR apps.

As I said above, I picked Flash because it was fun and works coming my way were fun with it. As I see future of web development for me right now seems like not fun. At least rich apps future. Flash will be fading away everywhere where HTML5 can pick up, but it will be usual HTML hell of consistency, performance, missing features and hacking all around it. It will be a work with unfinished product. It seems to me its still too early to seriously get in to the HTML5.

While if we speak about native mobile apps… It seems to me that out of everything that happens in software development world right now mobile apps are most fun. An uncharted waters with many interesting possibilities. Many also prophesying that mobile is future of computing and that desktop is dead. Anyways, this market is poised to grow. So fun possibilities in growing market.

Yet it is a world with gatekeepers, world attached to success of certain firms like Apple and Google and what they do. Now by picking technology like HTML5 or Flash you already become somewhat dependent. Web standards while better still are dependent on all major players decisions too. Just look at IE, WebGL, WebM cases. But on mobile platforms you are even more dependent,  just remember Apple change of rules with 30% cut from in app purchases that put many apps in to a tricky position. Like Amazon…

Conclusions

•  Flash is not dead, it will stay alive as long as HTML5 will not pick up on all features Flash has, and it is long from it, 2 years at best, 10 at worst(I hope it will be faster), even then Flash may still manage to somehow stay ahead. So Flash seems to me still like a best option for cross platform RIA, especially with possibility to publish AIR apps in to iOS and Android markets.
• There is no single tool to satisfy all use cases. I would like to do it all, mobile apps, web apps, explore all possibilities, yet HTML5 is not ready, Flash has it holes and uses cases and native apps usually are even more niche and attached to platforms.

So I am confused. There is no single job out there that can provide you with broad enough possibilities, picking one feels wrong, trying to do it all feels wrong too.

So it is a stormy time with unclear horizon and without any safe cove to drop an anchor in to wait out. And I don’t see other options then to jump around, trying different new things, finding junior jobs in mobile or web to broaden skills, still doing Flash, and hoping that future will become more clear soon.

Thinkering around with AI-Class subs browser decided to try and collect some feedback from visitors. It does get few hundred visits a day. From my previous experience with Flash I do know that its good idea to collect errors from visitors in the web. It may work perfectly on all browsers and all machines you can get your hands on but quite often it will not work on some other machines, in rare cases almost on all machines except ones you tested on. It may be internet connection, debug environment or some other small difference.

Local error handling and try/catch

As any modern language today JavaScript does have this crucial construct. Just wrap your code like this

try{
  //your code
} catch(error) {
   //handle your error
}

And handle your error in catch block. Now as far as I can say this works everywhere. Differences start with what error object contains:

• In any browser it contains message property, usually some description on what went wrong, but message itself differs by browser for same errors
• It also may contain stack property. As far as I can say Chrome and Firefox have it. IE and mobile browsers don’t. It usually contains info on where error occurred, which script on which line

And that’s about it with local error handling. Its a good thing to use to wrap around unstable or untested segments of code and provide some fall back in case something goes wrong. And that’s what I did initially. But that’s not always enough. Some people had problems while I was not getting anything in my log. So I needed something more global.

Global window.onerror

Luckily JavaScript has global error handler. And it looks like this:

window.onerror=function(message, url, line){
   //handle your error
   return true;//if you return true it overrides default browser error message, at least it should
}

Here is some documentation on it on MDN. Now this thing gets all errors that happen on your page (at least it should, may differ by browser and situations). Sadly mobile browser do not support it Also on all browsers that support this it returns script url and line number where error occurred. For example if error happened in some third party library you will get it here. And its a good thing.

Now what I somewhat dislike about JavaScript so far is that it lacks good language references similar to PHP or AS3. Best out there seems to be one at MDN but its somewhat lacking. Also it may be little bit biased towards Firefox implementation. Would be good if it was in wiki form or had comments for each page. Thing is that I spent quite some time searching for info on how well supported window.onerror is, is it even part of JavaScript standard or not and some other things.

For example I was getting many errors that looked like this:

message: script error, line: 0, url:

Empty errors that say nothing… Great. After lot of searching found it here. Turns out that if you have scripts from other domains then errors in them are reported without any useful information. And I was using jquery and swfobject from Google CDN. Initially thought that its a good thing. Less traffic for my site and probably faster load times from Google CDN for users. Sadly if it leads to such errors that say nothing it probably does not worth it. In the end I switched to locally hosted scripts. Will see if there are any improvements.

Anyways. This approach is very good because you don’t need to go around and put try/catch everywhere. Plus you catch errors even from 3rd party libraries. A good thing. Still for actually handling errors and providing fallback in case of something going wrong its better to use try/catch in right places. This one is good for actually logging errors and preventing browser default behavior on errors.

Example

And if you want to see and test this here is small example. You can also check AI-Class subs browser source for code I actually use to collect and report errors.

P.S User Agent

Also, its good thing to actually collect User Agent info on server side too for this, some errors are inherent only to some browsers or platforms. Like I do get some errors from iOS devices obviously having issues with YouTube Flash player.

Continuation to previous post.

Update

Third batch of lectures and homework’s is out for Stanford AI-Course and I just updated the page and data for it.

Changes:

1. Switched captions layout from list to tables, now does not look broken on smaller screens
2. Added link to about, so far just my previous blog post about this(yeah, I am lazy to make a separate about page for it
3. Added update date to data, shown at the top of the page now

Remaining issues:

1. No iOS support, not planed too, I am under impression(which may be false) that its too much hassle to provide Flash-less alternative to YouTube JS API right now.
2. Broken under Android, was not intended for use on small screen anyways, not fixing it too

Source code

Cut to the chase. Here is the source code at GitHub. Its intended mostly for those who want to make similar thing for other YouTube based courses or make an alternative language version(English only now).

And its my first use of GitHub so “Hello World”

Anyways, most part of last week and weekend were taken by:

1. Trying to make PHP scrapper for subs which failed
2. Remaking my Flash/AS3 code in to AIR app project so that people could work with it(had it in fla Flash authoring format before which worked well only in debugging environment)
3. Formatting and adding comments to source code

Source code is published under MIT license, use it however you like but I will be thankful for mentioning where it came from

P.S Any help with PHP script, or more precisely, finding a way to download captions for YouTube videos trough PHP is welcome.

Introduction

So, last week Stanford ai-class has started.

Immediately found out that not being able to read  question for quizzes in text was a problem. And clicking trough video to see it in the subs was not that fun aether. Immediately got an idea to fix that for myself and make an exercise in HTML/JS/CSS out of it (I am kind of slowly learning it all trough small projects like this for last year).

Try number one: bookmarklet

First, I remembered of bookmarklets. Small javascripts saved as a bookmark which you can “execute” inside any page. Developers often put in some small useful codes to inject in to pages for analysis  or some other reasons.

After checking ai-class page and requests found out from where player gets subs. Whole link is large and contains lot of unnecessary parameters, experimenting with it  shrunk it down to smaller size. And here how it looks.

Then googled around a little for ways to make a cross domain request from JavaScript. Thing is that for security reasons in JavaScript making such requests is prohibited while for Flash a cross domain policy exists that allows domain owners to specify who can gain access. Found out that there is a partial workaround trough Yahoo! YQL.

In the end I failed with that idea as there is no way to really figure out which video is playing right now on ai-class site. At least trough JS/HTML. May be it is possible to somehow query YouTube player for that.

P.S Killed lot of time on hacking 3 levels of escaping of quotes. First quotes were for anchor href attribute in which bookmarklet code goes. Then quotes inside that code. And third quotes level in that YQL request I hate escaping!

Try number two: php curl

Next quick try was to test PHP curl and see if I can retrieve subs from those urls on server side and make a page out of it. Tried, failed, after lot of fighting with JS on previous step gave up fast. And I don’t have idea how to “debug” curl http requests on server side anyways.

Try number three: Flash local app

Well after some fighting with JS and PHP I fall back to dark side I am Flash developer for last 5 years soo… Something like an hour and I got this:

Just an app where I paste link to AI-Course video and get their subs formatted for reading.

Until homework started this was enough for me.

Try number 4: YouTube JS Api + XML

While doing home works I realized that only text for current video is not enough. Seeing people making lecture notes helped that realization. So I needed ability to get all subs together and search trough them. But wait, text is not enough. Jumping to other videos I need to quickly refresh my knowledge is a “must” too.

That’s how idea started to form, I rewrite my app to take in all videos and subs for them. Output it in one XML. Use it as data source for a page. And add YouTube player controlled from JavaScript  to the mix.

First things I went to check was how to get list of ai-class lectures automatically. I am a programmer and for me doing copypasting job is a disgrace. I better write a script to do it for me Poked around Zen GData library for PHP and its YouTube API. Turned out it was not so good for what I needed and there was easier way just trough links like this. Sadly it only lists public videos, so no homework’s. And also order is mixed, ended up parsing video names for ordering. Also turned out that only video owner can get subs trough their API So my hacky way of spoofing player requests seems to be the only way.

Anyways, rewrote my Flash app to get all videos from there, sort them, get subs for each trough old method and output an XML like this. Also ended up adding homework video ids by hand.

And then started making site:

• Made a PHP page with YouTube player and scripts to control it. Fast and easy.
• Used SimpleXML in PHP to parse XML and output a list of lectures with subs. Easy again.
•  And then part I don’t like about current standard web development came, layout trough CSS. It got lot better in last 5 years but its still feels like hacking around achieving what you need trough not intuitive means. That’s why Flash won me over 7 years ago

P.S I actually love CSS selectors idea, just layout part feels broken. And I love jQuery for bringing selectors to JS.

Result

And here is the result:

• You can open or close lectures separately. Or close/open them all together.
• You can read whole transcripts of lectures and search trough them trough standard browser means.
• And you can click on button to the right of each line to jump to that video on that moment. Magic!

There are still some problems though:

• Firstly, using lists for layout here seems to be a bad idea. Should have used table with two columns instead. Will try soon.
• There are some issues under Mac/Safari with referencing YouTube Player. As I am under winds can try stuff only blindly.
• And script for making an XML still is in Flash/AS3, will need to spend some time trying to port it to PHP, not sure it will work.

Source code

Ok, you can read more about source code in next post or go straight to GitHub repository where it is.

Actually it was yesterday, read about it on Google+ and already posted on Facebook about some of this.

Download Flash 11 here.

Check out Alternative Demos here.

But news that struck me most were this. Epic Games is ready to release support of Unreal Engine 3 for Flash platform. And they showed Unreal Tournament 3  working in Flash at Adobe Max 2011. Ouh boy what a year it will be for browser games. Unity shared a sneak peak recently too, and now Unreal Engine.

Flash is well posed to become a console of the web but I have hard time figuring out how it all will play out. We still have Flash agnostic iOS, not all devices will work well with this, we still have traffic bottlenecks. Years back it was considered useless publishing a game ove 10Mb in size. Today? May be over 60mb is useless? We will see but considering that modern games rarely take less then a gigabyte of space and some up to a dozen of gigabytes, it will be interesting to see how developers work around this

P.S Also turns out there already is a game using Flash 11 on Facebook. Its actually a re-release of older game developed on Java called Battle Punks.