What I learned in CS3216

I hope to learn and be exposed to new programming languages and/or web development frameworks.
Hello Django, AngularJS, Semantic UI, SendGrid (somewhat), and last but not least Meteor!

I look forward to working in very motivated teams, and to enjoy the experience.
It was great working enjoying sleepless nights with Wudi, Xuanyi, Shixian, Junhao, (Q) Dat, Enchou, Delon, Panlong, Eldric, Chuyu, and Jonathan!
Also a shoutout to Sean. And Suxuan, Tangning, Yiping and Yatish.

I aspire to refine my work discipline especially for such a heavy module and semester.
Truth be told, not really, unless you count playing Bridge as work.

I want to confirm that software development is truly one of the things I want to do for a major part of my life.
Yes, for now...

I expect to discover that there are many more lessons, not just academic, to learn from in this module.
Definitely learned a lot more than if I did not take this module.

Wavenique

You may skip the boring first half until you see the Wavenique logo, but why would you?

Story telling

When I started listening to music again back in 2010, I made use of YouTube playlists. If you read my Spotify application critique, you would know that I like to listen to other renders of songs I love: I am a sucker for piano instrumentals, I love hearing how others cover the songs, I adore live performances, and best of all - hearing my favourite songs in a medley.

For those who listen to mandarin songs, let me introduce you to this medley produced by a local:

Initially, I ripped music off my friends' albums, then listened on FM radio, and also used KKBox and Spotify for a while. These were only good for discovery of new songs, and offered next to nothing of what I described above.

During National Service (NS), I realized I could probably develop a web service that does what I want, especially since I did a little bit of game modding and tinkering in PHP, so I have the necessary skill set to do so. Time was limited in NS, as such development only really began a few months before university. The project then can be viewed on my Github, and it should be pretty obvious from the readme that that was when I first made use of Vagrant. Ruby on Rails was awesome to use, though writing tests was a (fun) chore. I suck at finishing things I start... naturally I was not even close to completing it when I stopped after matriculation.

Still, what was it about?

Simply put, I wanted to be able to properly categorize the music available for streaming on the web. The tagging of artists, music and type would be powered by people, a.k.a. crowdsourced. The ability to convert your playlist from one containing just normal songs to one that contains only covers, or one that contains only instrumentals was the original main selling point of the webapp. In fact, in almost all my academic interviews, I brought this idea up, sharing it shamelessly despite knowing that I would likely never implement it.

Another possible aim of Wavenique is to blur the distinction between original artists and cover artists. And if all goes well, the capability to display and watch a live performance recorded in many different angles simultaneously... woah.

Fast forward to CS3216

Again, if you read Brace yourself, you would know I worked on an idea I wanted to develop during Assignment 3. In fact, I was considering whether to pitch "Wavenique" or the idea behind Feedeorite during my application to CS3216. I will take this chance to mention that I am very thankful to have been accepted into the course, or both ideas may never have seen the light of day.

Lovely logo by Shixian and Wudi

Try Wavenique

If you are reading this, our team has already released the "minimum viable product (MVP)" for Wavenique on www.wavenique.com. Go ahead and try it, and let us know your comments, opinions and suggestions.

Progress

I would say that the progress of our final project is both fast and slow... Xuanyi has managed to mine and extract data that consists of more than 150k artists and over 3 million music tracks: an amazing feat. Otherwise, development speed is not ideal - we kept delaying our MVP dates, haha - as, like Feedeorite, there is a huge reliance on data on external sources, plus the structure of the data relationships requires a lot of thought and careful planning.

STePS and beyond

We are going to showcase Wavenique on 19 November in COM1 during 5th STePS!

I suppose, regardless of the results, now that Wavenique is a product of its own, we are likely going to continue development even after CS3216. I sure am looking forward to testing, continuous integration and code refactoring on this beautiful mess of hacked out code.

Wavenique would have simply remained as an ambitious dream without this opportunity, so once more, I would like to thank CS3216, and especially Shixian, Xuanyi and Wudi for being willing to work on this idea together!

You should Slack

https://www.slack.com

Almost everybody is on WhatsApp. Almost every mobile platform has WhatsApp. But WhatsApp is not readily available on PC, nor on Mac and neither Linux. It may also cost money.

You can try Hangouts. For it has desktop and mobile support. You can tell the last read message of each member. There is also video calling and screen sharing! But the interface is too clunky - not conducive for reading a lot of messages at once.

Therefore, you should Slack.


Slack allows for channel based messaging, so you can separate your front end development and back end development discussions cleanly.

It supports emoji too, plus Markdown, so you can write code in monospaced font. You can also mention (@) one another in your messages.

There are numerous integrations available, including Hangouts. Your repository commits can be pushed to a channel in Slack too, alerting you of updates via push notifications instead of email.

Of course, it is available as a web app in the browser and as native apps for the popular mobile OSes. Plus the interface is sleek and very usable.

I have been using this invaluable new fancy tool for the final project; still really impressive thus far!


Previously WhatsApp was used mainly for group work, as well as during Assignment 2, and for a little bit with Team Meinv during Assignment 3. Hangouts actually became my preference during the beginning of this semester, where it was used with Stickats during Assignment 1 and with my CS2103T group. Junhao introduced Slack during Assignment 3, and thereafter I firmly believe that this should be the choice of communication for software development.

There seems to be HipChat and PieThis as alternatives. Just anything but WhatsApp, or worse still, LINE...

Brace yourself

While the rest of the class became fascinated with AngularJS, Team Meinv decided to go one step ahead with exploring and using Meteor in Assignment 3.

Since we decided on the framework to use before actually finalizing our application idea, I will talk about Meteor first, so brace yourself for a long wall of text.

What I like about Meteor

• Meteor is a full-stack JavaScript framework. This means everything on the front-end and back-end is managed together. The same piece of code can work on both client and server side. There are no separate package managers for your back-end framework and front-end framework.
  
  Bonus points for JavaScript being the programming language! :D
  
• Setting up is super convenient and fast, aside from the fact that I chose to employ Vagrant (again) to run Meteor on an Ubuntu box. Live reloading is also coupled in Meteor, so there's no need to hit the refresh button or restart your server.
  
  The file and folder structure is simple to use and follow as well.
  
  Deploying to production is as simple as meteor deploy. Then your entire application works, just like that, no configuration hassle whatsoever. I think it is even more straightforward than using Heroku.
  
• Fibres and Futures. I am sure those who have used JavaScript would have come across the two terms synchronous and asynchronous. Meteor uses Fibres and Futures (Futures is an extension of Fibres, I think), which allows for asynchronous calls, in a synchronous manner, to avoid callback hell.
  
  Nifty, though I am not 100% clear how it works, but it does. Not exactly the same as Promises either, I guess.
  
• The availability of reactive variables, which is quite similar to data binding in AngularJS. Commonly used objects such as your database documents are reactive by default - there is no need to manually update your template views when a new document is added since Meteor handles it for you.
  
  
  {{Spacebars}}
  They call their templating engine Spacebars, inspired by Handlebars.
  If you remember my talent was supposedly riding my bike without using the handlebars... props.
  
  Having used both Meteor and AngularJS, I would say that Meteor is less confusing, but probably also less powerful when comparing the two "data-binding" services.
  

Why I may avoid Meteor

Other than the fact that meteors can kill you...

credits: meteor-accounts-ui-bootstrap-3

• In Meteor, there are a few magical components that do not require much code and setup may be wonderful, but I think it crosses the line of usability...
  
  ...especially so when accounts-twitter, the Meteor package for Twitter authentication, asks me to input the API key and secret in the browser with a "Configure Twitter" button (see image), which then converts to a "Sign in with Twitter" button after.
  
• I had trouble coming up with another reason to avoid Meteor (much awesome right), but this is probably only valid for the time being.
  
  Meteor relies on its own package manager, Meteorite/Atmosphere instead of npm even though it runs on node.js. This limits the use of external packages until they are imported into Meteorite.
  
  Likewise, there is only official support for one database, MongoDB, although there are SQL packages available for use.
  
  At the time of writing, Meteor is on version 0.9.3. It already is stable and great to use, but once they hit 1.0 I am sure it will be an awesome framework.
  

Feedeorite

As stated in my previous blog post, we were working on the idea that I "pitched" during my application to CS3216:

As a netizen and user of social media, I have several different websites that I follow, from Facebook to news, etc. For blogs and news website with feed readers, there exists RSS apps such as Feedly or Newsblur (the one I use) to aggregate all the articles in a single site. However, none that I know of extend this functionality to social media or other content based websites. Neither do they have flexible strategies for hiding articles/stories that I do not like to see. My idea will be to develop such an application to make it very convenient for users to digest updates and reports, together with a strong filtering system.

After considering the short time frame that we can work on this, we decided to implement only RSS feeds and Twitter. The "strong filtering system" may sound incredible, but in actual fact what we have implemented is merely something trivial that has a lot of room for improvement.

Like Stickats during Assignment 1, Feedeorite is pretty much a prototype, although it is usable. Everything is far from ideal however, given that it required more than simple CRUD, plus it was developed in a new framework with a different architecture from what we used to code in.

The latter half of CS3216

Stickats was promptly killed in two sentences during our visit to Asteroid (insert Meteor reference here), who delivered a more potent blow than whatever was discussed during the internal pitch session. Something along the lines of:

Have you seen Perx's upcoming update on their blog?

They are going to implement social stuff too.

While not exactly the same core idea, we decided that it will not be very feasible to work on Stickats now.

Finally, bracing myself for what is probably going to be the most epic 2 months of 2014, with Xuanyi on his new marvelous idea, and Wudi and Shixian!

One, two, three

Assignment 1

Stickats, while not very complete, is the application we developed for Assignment 1. Xuanyi pitched it as a combination of Foursquare and Perx, which is something no one has tried to implement. Loyalty rewards programme meets social; this is quite a unique business model.

The original name was Estuary, a relevant and sophisticated name that is a little hard to pronounce. Then, with Chuyu's creativity did we eventually coin what would be the name of our application.

Evolution of Stickats, clockwise from top-left:
1) cat in stickwoman, 2) Chuyu's Stickat, 3) various Stickats,
4) current logo, and 5) selected Stickat from image 3

Here is what I have learned after having worked on Stickats:

• Setting up your development environment is a chore, so always decide on the language(s) and/or framework(s) to use quickly and early. Why? There is a deadline to meet. Also, applications which are produced in just a few weeks can probably be done on any reasonable language or framework.
• If everyone happens to discuss on a particular part of the application, e.g. the schema or the user interface, make sure discussion is not dragged too long. Time can be better utilised elsewhere than having all the group members disagreeing on what to do for the discussed part.
• When you have a very good hand in Bridge, and if you win with a low enough bid, pick yourself as the partner.
• Do not ever use the "Power saver" plan in Windows.
• Use git merge when you do not need to keep the commits, and use git rebase when you want to retain the commits.
• All the branches merging and stuff on Bitbucket look like MRT lines; how fascinating.

I suppose that the current status of Stickats is a prototype with a lot of dummy merchants and data, as well as Rockats. At the time of writing, we are considering, very likely, to extend Stickats for the final project of CS3216. Time for the coders to bring out their business persona.

Assignment 2

Having had to present for roughly 8 slides x 20 = 160 seconds during Assignment 2, I must say the Pecha Kucha presentation style provided for an interesting experience. Full credits to Eldric for the Phoenix Wright bang table "OBJECTION!" transitioning, it was fun to execute.

Assignment 3

Team Meinv is off to a great start! We are working on the idea that I wrote during my application for CS3216, hopefully it will turn out awesome and useful.

I use YouTube for music and I am proud of it

The moment Richard compared the application they presented, Spotify, with YouTube, I was really hoping to discuss this topic for my application critique!

I used to pirate music (just a few dozen tracks) and am currently a "YouTube sucker"; the two terms were mentioned in the presentation to contrast with the active users of Spotify. Allow me to clarify at this point that I did use Spotify before, and that the genre of music I often listen to is Mandarin pop.

Music content availability

It is important to compare Spotify to other music platforms when talking about the range and availability of the content each offers, as they serve the needs of different users in different regions. For example, KKBox is a prominent music service in Asian markets, while SoundCloud is probably the best choice should one choose to listen to independent musicians.

Spotify, like many typical music services, only offer tracks found in albums that have been released. While this is the mainstream way of consuming music nowadays, there are a lot of quality content out there which will never be played on Spotify. Use my listening preferences as an example: I like to listen to a particular Chinese song, and I would love to hear the live, cover and instrumental renders of it, and if possible listen to it as part of a medley or as a remix. So far, the only platform able to satisfy my request is YouTube.

Thus, the image of the bookshelf in Group 1's presentation slides is very appropriate, since it actually showed gaps without books, akin to Spotify not reaching a potential full catalogue of music.

There is a lesson one can learn here that is relevant to application development: even though the market you are entering is already saturated with existing solutions, just tweak your idea and product a little bit and you may be able to find a niche group of users who will prefer your solution.

Advertisements

I concur that advertisements on Spotify are less obnoxious than on YouTube. From my own experience, on the free version of Spotify, advertisements are simply about music, and typically do not last for over a minute. YouTube advertisements on the other hand range from short and sweet videos to very lengthy irrelevant videos that fortunately can be skipped.

However, anyone intending to use YouTube as their music player should probably install an ad-blocker of some sort anyway. With such means, the free version of Spotify is effectively the application laded with advertisements instead of YouTube.

In any case, advertisements in the free version of Spotify allow the users to discover new and upcoming content. As such, it is not necessarily a bad thing, until you repeatedly hear the same advertisement being played after every few tracks... During the time of my usage, I was nearly hypnotized to be "▶ up all night to get lucky".

Social integration

Spotify has sub-par social integration indeed. But in a way, I am thankful that Spotify activities only appear on the news ticker of my Facebook and not the news feed.

Someone commented during the Q&A that the tastes of your Spotify friends may not be the same as yours. This will be true to some extent given the number of different genres out there. Perhaps the intent of Spotify is not for you to follow just your friends, but mainly to follow artists you like and maybe curators whose playlists suit you.

It is observable that the Spotify interface is not exactly conducive for social activities, since their primary purpose is to supply the artists' and music labels' content to the users. I say keep the social elements secondary, as I doubt anyone has a compelling need to share all 15 songs they have listened to in an hour.

To each his own

plug.dj

Keeping to the theme of this post on Spotify, regardless of how robust it seems, I will stick to YouTube as my daily driver for music. More specifically, I am actually actively using this online social music service called plug.dj. It allows users from over the world to play and listen to music together at the same time, and relies on YouTube and SoundCloud. With a wide range of music content from indie artists to record labels, text-only advertisements (on Firefox without ad-block), and social aspects done right, it has become my go-to music application.

Spotify is an ideal music provider as evidenced by their vast number of users. However, as discussed, similar to how people have different musical genre tastes, they also have different opinions on their music service preferences.

In my opinion, Spotify is on the right track, but I will skip it. ▶▶

Laptop power plan

Pausing my assignment 2 application critique to remind Windows (maybe other OSes too) users of the following:

Check your power plan.
Select something else other than Power Saving Mode, and/or ensure that your minimum processor state is not too low.

Rejoice, your development process should now be faster.

A minute of silence for the many HTTP requests I made which took nearly a minute each for their Time To First Byte (TTFB), you will not be missed.

Sob.