wonderwhy-er blog

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.

So, three days ago I got an invite to Google+

I already heard about its roll out before, and actually was anticipating when deciding where to upload photos for public sharing (taken by my new Android Phone which is a separate story). Facebook is not public enough, I want to leave my DeviantArt account for Flash stuff mostly etc etc. So I went for Google Picasa app to organize my photos and upload some to Picasa Web Albums. Little bit more about it later.

What Google+ is

In short I would say that Google+ is holy union of  Twitter+Blog+Facebook. Why? There is written much about various feature of Google+ on the wen but I will stop at those who appeal to me:

• Privacy and visibility. Google+ has a built in people grouping called Circles which servers two purposes. Filtering network content by Circles. And filtering visibility of content you publish by Circles who will see this content. Second purpose allows you to both leave personal messages, share things with family, or share with anybody. In this sense it is more or less similar to Facebook. But Google+ has a broader visibility called “Public” which is accessible to whole Internet. And it is a Twitter/Blog like improvement over a Facebook that I always lacked. In these sense while Facebook is walled off and feeds on the web Google+ allows to give back to the web. It is a very significant and key feature to me.
•   Asynchronous relationships. While Facebook allows only friends status, Circles are asynchronous. Someone can add you to their Circle, but you may not add him. What it means? He will “follow” your public posts but will not see posts you made for your circles. So it allows broadcasting relationship. Facebook allows this trough Pages though.
• +1 a Facebook “like” competitor Google rolled out earlier. Now it gains a lot more sense for users to use as it is a fast small sharing of what you liked. So now users have reasons to do it. Now I do, while before I was not doing it.
• Authorship. Google raised a playing field around content author marking. Now recognized authors behind content are shown in Google search results. I think it can have a pretty big consequences for accountability of content. Now you can go and see contents author public account on Google+, potentially see his interests, employers, bias
• HangOut – a much mentioned feature based on a google video plugin. Managed to get a taste of it only yesterday. Some may call it a SkyPe killer but I don’t. It is an up to 10 people video chat app in a browser. My experience with it I could be put in short like “SkyPe made fun”. After it SkyPe feels like a strict, uptight business meeting application. I don’t know what Google did on usability(and I will need to investigate it later) but HangOut feels light, fast, and… fun… It feels like a party at friends place, you just jump in, start discussing, sharing, watching synchronized(rewinding and video itself) youtube video, jump out. Then jump in again. So, HangOut is not a SkyPe killer. They are different. You can’t use HangOut for some things you use SkyPe for and reverse is also true.
• Gorgeous public photo galleries. I did mention it above. Here are some photos taken by my SGS2 android phone. Not big implications with this feature, just best looking galleries I seen so far in social networks. Have a suspicion that it is Microsoft inspired as looks similar to Windows Phone 7 interface. But I guess Microsoft was inspired by some sites too.

I think those are first things that come to mind after using Google+ for few days. I guess you can already see how with “public for web” posts it serves as twitter and blog, while with privacy and Circles it serves as a Facebook.

What Google+ can become

I talked about things on the surface. But some linger in the future or under the surface. It seems to me that with this move Google has chances of making internet truly social in a way Facebook never could  because of its more closed nature. Google+ gives back to the web. Also Google now can use +1 and authorship to effect search results and rankings. Which can solve some of Google search quality problems. I do hope though that they will allow turning +1 effect on and off to get “unbiased” results.

Also trough same +1 Google gets their hands on one of most crucial things for recommendations. Lists of things people like. Now Google can start providing similarity browsing and recommendations on all fronts. I do think that +1 in such context is the most important feature for Google, and us. Its a feedback we are giving to the Google so that it can improve its offering to us.

Problems

Nothing is perfect so here we go:

• Its little bit confusing. Already seen people who are very computer savvy misunderstanding how asynchronous part of Circles work. What will your granny understand then?
• Privacy control is not fine grained enough. Like two examples from my experience. I post a public photo for web to see, and friend or even girlfriend posts a personal joke for example. Now whole world sees it. Why? Because comments inherit privacy status from parent post. So you are ending up with a choice of “too public” and “too censored” sometimes. Another example are people in your circles. You can choose what circles are shown(all or say celebrities you follow) and how public it is(only your family or whole world?). But you can’t make it so that whole world sees people you follow while your family sees all. And there are many other such small but very significant privacy control issues. Hope they will fix them. I sure am sending them feedback on all occasions BTW their feed back is awesome, never seen anything like this.
• There is also one two sided problem, dependency or coupling. One of biggest advantages over other firms Google always had is that its a multiheaded hydra. All projects drift independently not hurting and rarely improving each other. Well it started to change a little before but now it clearly comes to an end as Google+ seems to be posed to bring it all together. And some of us know how well it works for Microsoft, Yahoo and Apple. They ruin separate projects and user experience to tie  down their offering together, locking they users to use them together. I really hope it is not a fate that awaits Google and all its users. Though I already heard of bad consequences of this for some people. Mostly on a side of Google merging all kind of accounts across all its products in to one account.

There is more of course, but service is only rolling out and I hope they are working on a clock of addressing it as I think Google+ has a big big potential. So far my feelings are similar to Google Wave roll out. I am very excited and pumped up as I never really liked Facebook, and do like Google+ a lot. But there is a crucial difference with Wave and Google+ for me. Wave was all cool and hypish as is Google+, but with Wave I entered few times, played with it and rarely returned since. Google+? I am using it each day now, publishing photos, cross posting from Facebook, started using +1, and am working on adding some of Google+ related feature to my blog and page. So, my use of it differs a lot, hope Google+ future will differ a lot too. So far there are claims that they already reaching 20 millions.

Little bit more then a week ago I left my job at innoWate . Here wanted to share a little summary on what I did during my time there.

I worked there since November of 2009. By ProcrastiTracker stats I was collecting since April 2010 I spent 2040 hours behind the computer out of which 800 were spent in Firefox, 500 in Flash builder and 250 in SkyPe. Interesting to keep track of such stuff, sometimes shows unexpected things.

What I did there

innoWate is Latvian firm that develops social games. Mostly they are targeted at Russian social networks but there are some ports to other international(Facebook), western and Asian networks as well.

During my time there are I worked on 3 projects and here they are:

Awatars

It was my first project at innoWate. It was planed as series of games starting from avatar creator + various social stuff like giving gifts, poking and interacting with friend avatars in all kind of ways. Then games like gorodki and bowling should have followed. And they did till beta stage. Little bit later project was put on hold both because of technological issues and not much promise in what was coming out. I was transferred to more “promising” project.

My responsibilities in this project were pretty wide and I liked that. Programming UI, working on serverside scripts and protocol, game features/mechanics programming, integrating to social networks and developing related features. Design and engine behind 3D stuff were made by another guy who was doing similar stuff for XBox games before.

Sushi world

And here is second project I was involved in, a lot more people were working on it at once which brought lot more problems with sub version control and related stuff. Basically it was a restaurant type social game. You play as sushi restaurant owner, set up the place, hire and equip workers etc. Had some mini games like raising a turkey or simple fishing, various special events and quests and lot of other stuff.

Here my responsibilities shrunk a little. Was working on UI and client side game features, client side bug tracking system, social network features and integration and often was responsible for game client update process aka keeping track of features and content that are going to live version etc.

My Country

Then last January I was switched to another team with “promising” project that was in development for some time already. This time it was a new city building game, something innoWate done well before with SuperCity almost a year before. This time it was planed as a bigger, better looking and more complex city building game. Well I must say it is very pretty Eats too much of resource too though.

My responsibility were social network features and integrations with related UI work. A more narrow field again. Mostly because by that time I had most experience with that stuff on client side while there were plenty client developers to fill other needs of the project(3 beside me).

Hassles of social developer

In the end I must say that working as social games developer is pretty crazy job. Firstly you are working with many technologies and platforms all of which have issues and may break something at some point:

• Currently games with complex graphics  are mostly made in Flash so its you client technology
• You also use JavaScript/HTML to integrate with social networks and communication with Flash is a point of failure
• You are working with many social networks and social APIs that are different,  buggy and have conflicts with browsers and other technologies you use sometimes
• There is also your server side which is point of failure too, admin mistakes, spike in traffic, bug in software etc
• And there are browsers

All those technologies and platforms together make it very hard to predict where problem is when you find it. Is it client, your server, browser bug or social network issue or may be even something on your players side you can not reproduce from your side?

Then there are issues of social network APIs polish. Currently most firms make ports of their games to many social networks to maximize audience and profits. Segment is hot, things change rapidly and over this 1.5 of year Facebook was making significant changes to their API and policies scrapping old API altogether and introducing completely new and and different while changing how things work overall. And other networks are no different. Thus old ways games worked sometimes break or start to violate policies, or just become pointless. There are even some ridiculous cases when with all that hurry to do something new known bugs in APIs are not fixed for months. And after that they are not fixed because games already built on top of them and would break if they fix them… And no imagine if your game needs to work well on 4+ social networks and use their API feature to the max to attract and retain players. One hell of juggling.

Then there is testing. To have products with rare bugs means to invest in to testing. But how can you test something if pretty big part of those games are dependent on social networks, communication between users, use of various social network features. With some networks its a nightmare. You can’t use many features unless you game is approved but how can it be approved if many features are not testable by developers… In other networks there are pretty good testing environments. But joke is that when game is released from test environment it turns out that real world environment differs and things that worked in test state do not work after release. And its actually a moment when your game gets in to “new” category and thousands of people are coming to see a buggy release and leave a bad review. Feels bad unless you do not care about, and if you do not care about it then its probably even worse if you know what I mean

Then there is things just specific to life of social game projects. Firstly they are released as not well tested, polished and balanced games and your users are used as testers. And that’s fine by me. Its not some AAA two years 100 million in budget project, its 1-3 months small team and small budgets project so that’s how they are developed. But then other stage of project life comes, iterative polishing and adding of new features, levels and other content. Thing is that you most keep people entertained so that they return to your game. So you need to prepare content and events for various celebrations and when there is none still think of something new each week. So new game releases come regularly with deadlines(what’s point of releasing new year content if new year already passed). I remember being at work for 12 hours sometimes before such important releases. Why the hassle? Well its competition with other games that will make interesting stuff on those events and thus will get players back. I guess TV channels have similar hassle, just not as regularly especially considering that same team is not preparing for whole world important events. There are months when each 1-2 weeks is important event somewhere.

Now what it all means from development point? That we are always late, that we are trying to cut corners, that its all a mess. Building on and around bad decisions that come to bite us later etc. In the end bad development process that goes against many things I believe about software development and also not knowing how to fix that all. Feeling powerless and as if this it is impossible to succeed in that environment. Though I do think that it is possible, just not like that, and sadly I do not know how. Anyways in the end it all is aether a turtore or you stop caring with in my book means stopping doing your job well.

Leaving and what’s next

So, since December I was thinking about leaving and kind of summarizing it all for myself. Little bit later as I mentioned above I was switched to My Country project and decided to leave it be for some time and see how things will go. Well they went the same so here we are.

Currently I am in self payed vocation for few months during which I do plan to start spending something like a half time(4 hours a day, 5 days a week) curing my “don’t care” attitude towards programming, games and web. There are bunch of things I want to learn and try and I can allow myself to do it now. As for other free time, vocation, friends, work unrelated courses. May be travel a little.

In the end I was not very active here for last months(though I did play with stuff a little at wonderfl.net) and am planing to slowly get back

Contest ended little bit more then a month ago and I ended up a winner. There are some other nice entries there too. And here is mine

This is little post on how things went for me and some code sharing trough wonderfl.net site.

Music Spectrum Circles

I wrote about first experiments with spectrum in my second post about this contest and exploration. Click on images to see wonderfl.net versions with source code. There is not much more to say about it then what I already said in that post. Simple, yet pretty cool

Trails of Music

After that I turned to sound signal itself. Was pretty pleased with results that ended up in my new year “postcard” With flaws but looked good.

Initially I was planing to make something more interactive where each user could add his actions along with music to get interesting results. Something like musical brush. After making some experiments with sound signal my view started to change a little. Allowing other people to express some creativity is cool but exploring what kind of experience what song provides with visualizer +  ability to replay that and share exactly same view with friends is equally important. Here I started to think that making visualizer so that it is same visualization for same song each time for any user is a good idea too. That way people could listen trough various songs and share names of those that looked especially cool so that others could see it too.

Music Atom

At that point I started to try to make my final entry of musical brush. But after some time I figured that I will not be able to do anything spectacular in time I had left till the end of the contest. Still I made few experiments using that concept and along the way made a step forward with musical signal. Thing I did was to use FFT class from SION library to get original signal spectrum, break it to as many sub segments I needed and then, using reverse FFT, get smaller separate signals in different frequency ranges. This way I hoped to get two things. More separate entities that react to music + parts of visualization that reacted to different parts of sound. First worked perfectly and second… Well depends on the song.

In the end I gave up on brush idea and turned to playing around lines again. There were few things I did not like about Trails of Music and Musical Fireworks. Main problem was that line traveling around could end up near corners of the view. Also it all did not had any distinct form. Ideas to fix it were simple. Try some techniques that will make it not go too far from center of screen. Easiest ways were to just change coordinate system. Like apply Sin/Cos functions to lines coordinates so that they “bounce” elastically from corners of the screen. Looked not so well to be honest. Another similar thing would be polar coordinates and this one worked brilliantly. It made beams to inside a sphere which looked cool, it also made trajectories more interesting (like flowers). It also made amount of beams different for different parts of screen. They would spend more time traveling at sphere edge + they would far more often cross center of the sphere. Along with additive blend mode and smooth beam color change it made for a brilliant pictures.

The End

And so that’s it. I must say I had much of fun and learned thing or two during those two months and have plans to play with those things further in various ways. Hope you found it fun too and found code interesting and useful too

Over last months of 2010 I was coming to realization that I want to be able not only to make multimedia Flash apps in web but also build HTML pages and services around them. So decided to start slowly learning some. Also with HTML5 making core web stack more and more potent it would make me more prepared for challenges where HTML5 will be a better choice then Flash for rich internet applications.

Not that I don’t know or did not know some. I have basic knowledge of HTML/CSS/JS/PHP/MySQL. Kind of standard stack used today for various cases. But here my knowledge is gather from various small cases and web examples. Probably only part of it where I did get some formal education is relational data bases. What I wanted was to broaden my knowledge in all this.

Asking friends for ideas about good books to start from I was often asked “why books?”. Today you can learn anything from the web, thousands of examples, tutorials and documentation sites and active developer communities allow anyone to learn to program anything.

Thing is that I find it to be a bad way to start. Tutorials and examples often concentrate on solving something specific, are not always made with big picture in mind or sometimes even made badly and teach you bad things. I prefer to start from some book that give a broad and not deep view, showing how it is meant to be done without going too deep in to the details(details I will dig out later if I will need). I need this to get some ground under my feet from where I can start. And then explore the web myself knowing for what to look, what’s good and what’s not so good etc etc.

For starters I picked a little bit unusual direction As I mentioned I more or less know PHP and I wanted to try something new. Also for some time I was curious about Google App Engine. Pocking around GAE I found that probably best languages for that platform right now are Python and Java. Well I knew Java years back and don’t want to return. So I went in direction of Python.

In last December I was ordering some books from Amazon and ended up ordering 3 books on web technologies.

Google App Engine

First book from those I started to read was specifically about Google App Engine. This book covers whole GAE platform as far as I can tell. On programming part it includes both Python and Java specifics, classes and code examples. It helps you trough your first Google App Engine application. Big part of it is Data Store. Then it comes trough various other features of GAE like memory cache, google account integration apis, various other built in apis.

For me most interesting part was Data Store. I am pretty familiar with relational databases and ideas behind them and was always curious what Data Store is, how it works, where better to use it and this books gives pretty good overview on that side. Actually something like 1/3 of this book is about Data Store related stuff.

Some interesting things about App Engine. It was designed with “return answer as fast as possible”  ideology for rich web apps. One related to that interesting feature is that app can return result first and then start working on updating data, indexes etc. I guess that possible to do with any stack but I never looked on it from that optimization point.

As far as Data Store goes it reminds me of simple Object Orientated Database. It basically stores entities by unique keys that may have properties and something like classes forced by code. Also Data Store allows building indexes to run queries on some of the property types. As far as I can say there are 3 significant differences from SQL database:

• Query language is simple, does not allow joins and some types of queries that need calculations
• You can retrieve entities not trough queries but directly if you know their unique keys, it is lot faster then trough query
• It is possible to store an array as entity property, it also allows running queries that target content of arrays so you can get entities who have some kind of values in their array typed property, you can store keys in such array making kind of Object Orientated version of one to many relationship between entities

Another thing is that keys are constructed in a way where first part of key is application ID, and you don’t even see it, which means that each app can only get access  to entities it has created. Can’t access other apps data directly. Also there are limitations on how many entities you can access at once which along with other GQL limitations makes GAE a bad platform for solutions that for example need t work with large amount of data providing statistical info on it.

I guess that would be it on that book. Overall it gives good overview for GAE providing a good start point if you want to know what GAE can and can not do.

CSS Mastery

Another topic I was curious about but never was really getting to know it better was CSS.

Basically its something I knew what it was for but did not knew general ideas behind it and how it is really meant to be used. This book claims to be a book for those who have been using CSS for some time but don’t feel they are experts yet. Or people with basic knowledge of CSS. After reading this book I must say that its rather a book for starters. It rather teaches clean and simple CSS/HTML showing where common pitfalls are and all.

This books covers essential parts of CSS, selectors, techniques of layout, advanced CSS3 features and how to do something like that in CSS2.1 using old methods and tricks.

I think best part of this books is that it teaches how it should be done and why. Why HTML part of pages should be designed as meaning and structure while all styling should go in to CSS. Author adds small examples from his experience which make it pretty clear why it should be like that.  Or another thing is how using hacking to fix problems is a bad idea as problems are fixed as browsers are updated. So your hacky fix now becomes a bug.

Some 7 years ago coming from Java/C/Pascal background I started to dig in to HTML/CSS/JS and Flash. Flash slowly win me over. It was a way to develop Apps while HTML seemed like way to developer styled text pages along with a bonus of serious cross browser inconsistencies/bugs and limitations. Over these 7 years things seemed to improve especially on JS/CSS front.

Sadly coming from Flash I still find that even CSS3 is insufficient to style things cleanly. Firstly today style is not only about static visuals. Its about animations, reaction to user actions, its about visual behavior of interfaces. Now CSS3 includes animations but that’s not enough. I think big problem is  that you can’t reference values in CSS. For example one of examples in the book shows how to make 3 text columns to be of one dynamic height. Thing is that you can have them aether of static height or they all will scale according to size of text inside them. As you can’t reference values in CSS what author proposes is to make all columns of large height, then use container of those columns in “hakcy” way which resizes according its content actual size. Now container is of size of highest column. And now use overflow property to cut out unnecessary height of columns. Of course such trick is possible only with simple column style. Now then all I wanted is to make 3 columns to share same dynamic size. And I end up with doing lot of trickery to get a limited solution. This kind of lets me down…

Another example is vertical content centering on page. Solution looks pretty clear but is limited too. Just make your content top padding 50% which will move its top side to center of page. And then, with different technique, move content up by half of its height. Yay it is centered. Sounds even intuitive and logical in idea. But you can’t target values in CSS. So you can’t target its own height in position style. So you can’t center object vertically if it has dynamic size in HTML/CSS… Or at least it seems so.

Well anyways this all is CSS problems. This books does good work communicating good and correct way of dividing content and style of your HTML/CSS pages. I guess many HTML/CSS problems can be solved with JSS/jQuery filling in position of visual and other behavior for HTML/JS/CSS at least for now.

Python Web Development with Django

Another book I only just started to read is this one. I thought that it is a good idea to learn not PHP/Python language directly for web development(as that I can do myself). What I wanted to learn is how to develop good web solutions too. How to architect your engine, authentication, user content, HTML output components etc. I wanted to know best practices in how to develop your engine/framework for web site building. And what’s a better way then learning some framework and seeing how they done things there.

Another thing with Python books is that Python is a language used for broad number of things. While PHP is mostly used for web development Python started elsewhere as general purpose language like C. As a result majority of books don’t cover Python use as web development language almost at all. And thus majority of those books are of no interest for me in current situation. For that reason picking Python based web development framework book seemed like a good idea too.

Now first chapters of this book gives incremental introduction to Python first which is perfect I knew for a while that Python used spaces and new lines as part of its syntax instead of various braces. I always was finding that it is both good and bad. Good that everyone writes in same style as it is enforced trough syntax, also makes language less bloated with special symbols and more readable. Sadly in some cases it also makes language less readable as you can’t arbitrary style some part of code for better readability.

I just only started this book but so far I must say I really like some features of Python. They make language a lot smaller when performing task with array for example. Here are few interesting examples:

• string[1] – like in any other language it returns strings second character
• string[-1] – here good things start, it returns strings last character, so if index in [] is less then 0 array length is added
• string[:1] – now what? Turns out that Python extended this operator to allow ranges. In this case it will return first two characters of this string.
• string[1:3] – now this is full syntax returning second, third and fourth symbols in the string.
• string[1:] – and this will return whole string without first character

Anyways I have still much to read from this one so no more comments on it so far.

Other books and some practice

Basically this is it from this book order but there are two more I would like to buy. One on JavaScript/jQuery and one on some PHP framework to improve my knowledge in those directions. Also I have few test projects planed to try and use these technologies. After reading book on CSS I already updated homepage a little(here how it looked before), planing to do more work later on it. Also planing to try and do two projects for practice on GAE later.

After playing with spectrum next thing I wanted to play with was sound signal itself. Checking stuff initially I noticed that sound signal looks the closest to my association with what I hear. Actually old console games music looks geometrical for example Noticed that back in the day listening to some Amiga music emulator made in Flash probably by Andre Michell. Sadly don’t remember where it was now.

Experiments

You can select different visualizers in bottom left side combobox.

• Direction – was a first I tried. Just using sound signal as angular speed for a moving particle. Nothing special but looks pretty cool
• Direction 2 – with direction 1 particle moved around the screen and teleported to opposite side when it was going outside of screen. Good but sometimes it would rotate somewhere in a corner where you could not see much. With direction 2 I tried to make camera follow the particle. Not perfect and camera is too shaky with some music
• Burst - new year was coming and both directions had a problem with music that had lot of frequencies in them like rock. They would just spin in place chaotically. Wanted them to kind of explode at such times so made burst as a kind of fireworks  thing
• BurstStereo - realized after making first burst that I was using only one of two channels for music. Decided to make a particle for other channel. Looks like just two particles  that are not really connected
• Beat - seen one place that sum of amplitude of signal is kind of a beat, I would rather say that its a volume
• Radial – here I just wanted to see how it would look if instead of moving particle I just change direction I shoot them. Turned out to be boring
• Opposition – another try with two channels. Now two bursts are attached to same particle, looks weird to be honest

MP3 Parsing

Before I was using, mp3filereferance by FlexibleFactory to load music from ByteArray. Sadly it had a flaw of throwing “End of file” for some songs. I suspect that its about damaged files. So I decided to try as3swf lib that can do the same. Sadly it has flaws too. Firstly lib is big and slows down compilation a lot(which is a pain). Secondly it does not load all music too. From mine I noticed that it throws this error “Unsupported sampling rate: 48000 Hz”. Good part is that wonderfl includes as3swf which means I will be able to port some of my music experiments to wonderfl easily somewhere in February.

ComputeSpectrum problems

Also I stumbled on Flash bug I wrote about here. Basically when you have two flash open in your browser where one uses computeSpectrum and other plays song on other domain you will have a security sandbox violation error. Thing is that you can’t access stream data that is streamed from other domain and computeSpectrum seems to be global for Flash player instance. But I think I tackled it well in musical fireworks.

More things to try

• I am thinking on trying to fall back to mp3filereferance when as2swf fails to improve things a little.
• Also I am thinking on trying microphone input instead of mp3 too. Flash 10.1+ should be able to do it.
• And finally its time to start making final entry for the contest using all things I learned so far

That’s it

So 2010 is almost over and 2011 is almost here. Another year have gone by. First thing first:

Happy New Year everyone Here as part of my audio visualization journey made Musical Fireworks, enjoy(click picture to see it):

Year summary

And now to summarize on how things went this year for me. Wanted to collect in one place where I was at the beginning and where I am now and for now not precisely but say where I want to go next year.

Work

Little bit longer then a year I am working at innoWate nad am programming Flash games for social networks like Facebook and Vkontakte.

It was rich in experience year:

• I participated in making two social games directly and helping indirectly in making few others
• Learned pretty much about social network APIs that are mostly inspired by Facebook
• Learned about many Flash bugs, inconsistencies, performance issues and some workarounds for them

That are good parts   Now some stats

On 12 Aprila of 2010 I installed Procastitracker at work, this software allows me to see how much time I spend in what applications so what we have there:

• 170 working days since April, two weeks of vacation in August, seems about right
• 1414 working hours over those 170 days

That makes something like 8 hours 20 minutes of average working time per day or 54 hours of overtime…

In what applications it was spent:

• 535 hours spent in Firefox
• 356 hours spent in Flash Builder 4
• 176 hours spent in SkyPe
• 82 hours spent in Flash Player
• 54 hours spent in Windows Explorer (files/folders stuff)
• 36 hours spent in Flash CS5
• 27 hours spent in Chrome, lately FF become very bad for Flash development, hangs, crashes, lags, few times tried to switch but FF extensions equivalents in Chrome  are not on par yet
• 25 hours spent in FTP manager
• 7 hours in Procastritracker itself

You can see I missed some things here and there + there are things where Procastitracker does not know what I was using. Still I covered 90% of things I guess. So yeah 500+ hours or more then 1/3 of my time is spent in browser, Procastitracker is smart enough to see on which sites too:

• 74 hour on Facebook, testing our stuff, checking competitors stuff, communicating with friends etc
• 62 hour in Vkontakte one of biggest Russian social networks(there are few), mostly testing our games and working with their API
• 49 hour on Google sites, gmail, reader, statistics tools and google  search itself, soon I guess chrome store will become a portion of it too
• 38 hour on DeviantArt, well that’s mostly entertainment stuff, checking works, communicating etc
• 25 hour on private work related sites, various tools, statistics and game deployment tools
• 20 hour on One(local social network), entertainment too, local network, photos, friends, communication too
• 18 hour on Mail.ru, rather new social network from most popular Russian email provider, big player in social arena now too, also testing games and stuff
• 12 hour Odnoklassniki.ru, probably biggest and oldest Russian social network, also worst API in industry, site too, unstable, user unfriendly, really hard to test and use as platform, but also with most active players community it seems
• 10 hour YouTube, hehe
• 7 hour in my blog here
• 4 hour Wikipedia, hmm seems small

It is roughly 60% of spent time in FF, there are a lot of small sites and Procastitracker does not allow to group the efficiently so I have no idea on what kind of stuff rest of time was spent.

Activity on DeviantArt

• Submitted 15 works which 40% less then year back
• Also comments and views fell something like 50%

I really like DeviantArt and its community, sadly DA is stagnating, especially on Flash front. I wonder if at some point they will provide APIs so that people could start creating art related tools around DA platform. In meantime Flash programmers community is weak there, we lack gallery supervisor and position is open, what that means is that there is no one to be a buffer between DA staff and Flash creators community, Flash deviations do not get to Daily Deviation page (front page, best works of the day, nominated by gallery supervisors)  and also community is disorganized. Sad…

This blog

In first half of this year I registered a hosting and domain name, on 17 April I finished with blog preparations and made my first blogpost here. For long wanted personal, customizable blog that is not dependent/hosted on any social or blogging  platform.

• Since then I made 54 post
• There are 33 comments(some are mine in response to other comments)
• I got something like ~5000  unique visits, 27k of visits overall (AwStats)
• Those visits eat ~1.3Gb of traffic making it something like 37Kb per visit
• Also I made PingMap and collected ~2k of unique ip pings to my blog so far
• Also Akismet blocked 239 spam comments

Conclusions

Speaking of work, can’t say I am satisfied on many levels… Its a long talk and I will save it for different time but in short, each celebration in the world is a rush to make new features by that deadline. Planing is chaotic and I am not sure we have people who know what they are doing on game design side. I my self don’t really get appeal of game that companies like Zynga make. Anyways part of this is chaotic feature adding. And result of it all is hard to manage large projects on inside (feels bad for me as a programmer, I want to do my work well but I just can’t in such circumstances, partially I guess I lack experience but still)  and also games I am not proud of  from the outside…

On DeviantArt I guess I need to be more active but lack time. DA is good place for various things and getting audience for some things. Sad for me that I am degrading a little in my activity on DA.

On this blog side, I am more or less satisfied. I did not wrote as much as I would have liked, I have like 10-20 unfinished drafts for posts. Also my post quality is not very good. Bad English sometimes and not very deep posts aether. I want this blog to be more clean and useful to people with similar to mine interests but I don’t have time for that aether.

Next year

As you see from above I must say I am not completely satisfied with last year. I want to do a better job and be proud of things I do for a living. I want  to do more blogging and works for DA and with better quality. I am satisfied with what I was doing but now with how. So for next year I wish and want to do better and I do have some things planed to try and do better.

That’s it. Happy New Year!

The problem

Today while refactoring some global static classes code to be more manageable at work thought of one thing. Thing is that those classes stuff often should get initialized. Where initialization it is usually called? Well who knows, anywhere where it fits… With big project where you have many global managers like money manager, hints manager, events manager etc etc their initializers are usually hidden somewhere while they are used in multiple places. Now often it happens that something changes and needs to access that class sooner then it was needed before. What follow is probably null reference error or something similar. And now you need to go, figure out where it is initialized now, what needs to be done to initialize it sooner. Or just try to move code that needs it to some later stage… Sounds bad right? Some spaghetti code stuff in project where multiple programmers work on same code base. Especially when stuff in those global classes needs to be called in various places that can come at random order depending on server and user input.

Static initializers in AS3

So refactoring stuff I was thinking about this problem again. Interesting thing about Flash is that it uses lazy static class initialization. In short that means that static class is not initialized until it is referenced somewhere in code. Neat feature though still a compromise. We get start up performance as not all classes are initialized from the start but then we loose some as each time class is referenced there is a check for it being initialized(I guess, that’s how it usually is done). Now that’s good but what if we need not only to initialize variable but run some code. For example some parsing of variables content. Google for the rescue: Static initializers. Nice, short and clear article.

{

//put code that will be called when class if referenced for first time

}

There is one thing though. You can debug code inside those brackets. So I instead just put a call for some static function which I can debug then.

So now I have something like that:

public class GlobalMoneyManager

{

public static var PricesXML:XML;//set when loaded

{

Init();//initialization code called

}

public static function Init():void

{

//parsing prices, calling stuff, etc

}

}

Now then it works for me like that.

1. Site/Game loads and XML with info is loaded.
2. Then there are like 10 UIs that use information that needs to be retrieved from that XML but none of  them is shown at the start
3. When user action results in one of those UIs showing up, UI is initialize and reference something in GlobalMoneyManager
4. GlobalMoneyManager is initialized
5. Static initializer code is called
6. Init is called and class if filled with parsed info
7. Control is returned to UI and data is accessed

The end

Works like magic. I wonder if there is a catch to this that would make it a bad coding style that raises more problems then it solves. So far I do not see any.