Making of TTC Delays.ca (Intro)

Posted by Peter on July 20, 2011 No comments
TTCdelays.ca

Logo of the site

A new website is released!  In case you haven’t visited, it’s http://www.ttcdelays.ca.  It’s a site designed to let riders of the Toronto Transit Commission (TTC) voice their opinions on the service.  There’s a page dedicated to post and view delays, and a trip browser powered by Google Maps to interactively browse each of the TTC routes.

The website took a little more than two months to make.  It’s a little challenge for myself to learn something new.  Since the site is already up and running, I have a bit of time now waiting for new ideas and clients for my next project, I thought I would post the process of making the website in this blog.

Here’s a overview of what I am going to write in the next few blog entries:

  1. Choosing a host and starting a server
  2. Which Framework to use?
  3. Think User, Think Design
  4. Think Data, Think Administration
  5. How to Prevent Spam?  Can Twitter and Facebook help?
  6. Value-added Features
How much have I spent making the website so far, you asked?  About $50.  Of course, that doesn’t include the time I have spent.  
For those who are thinking about creating and starting your own website, I hope you will find these entries useful.  If you never had any ideas about how a website is made, keep reading, because you might find it useful in the future!
Cheers.

Open New File Types and Add Syntax Highlighting in Dreamweaver CS5 on Windows 7

Posted by Peter on April 8, 2011 No comments

I started exploring Symfony2 a few days ago.  It uses .twig files to manage the templates.  It’s quite common as a developer to encounter new file types.  I want to open these files and have syntax highlighting in Dreamweaver.  I know a few people already talked about this (here and here) but I was still having trouble after following their instructions.  So I did more digging and managed to make twig files open as html files by default.

(1) First, add the file type:

Go to Dreamweaver’s toolbar, edit > preferences, under File Types / Editors, add .twig to the line “Open in Code View:”, mine reads like this:

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb .htaccess .htpasswd .ctp .yml .twig

(2) Second, go to C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes and find MMDocumentTypes.xml

If you are using Windows 7, the file might be read-only and won’t allow you to save.  To overcome this, find the icon for any code editor in your Windows start menu, Right-click on it and click on “Run as Administrator”.  Using this editor, locate the file.

Since twig is mostly HTML, it should be added to the html documenttype, which should be at the top of the file.  Place it inside both winfileextension and macfileextension so the line reads like this:

<documenttype id=”HTML” internaltype=”HTML” winfileextension=”html,htm,shtml,shtm,stm,tpl,lasso,xhtml,twig” macfileextension=”html,htm,shtml,shtm,tpl,lasso,xhtml,ssi,twig” file=”Default.html” writebyteordermark=”false” mimetype=”text/html”>

(3) Third, go to C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration and find Extensions.txt

Add TWIG to the first line and second line, which should be ALL Documents and HTML Documents, respectively.

(4) Fourth, this step is almost identical to the second step, but the file location is different:

C:\Users\Peter\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\DocumentTypes

Just do exactly the same thing as in step 2.

(5) Fifth, and yes, this is almost identical to the third step, just the file location is different:

C:\Users\Peter\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration

And again do the same thing as in step 3.

(6) Close Dreamweaver and start it up again.  Hopefully the file type is now recognized and fires up with syntax highlighting.

Facebook and Twitter Auth

Posted by Peter on March 21, 2011 No comments

As I write this blog, I’m deep into researching my next project that will be the first product of MetaMeister.com.  While I can’t tell you what it is, it has something to do with Facebook and Twitter.  I already have some screenshots and data structures, so I need to make sure that the idea will work, technically.  Part of it is to produce a site that can use Twitter and Facebook login.  I’m sure many of you have seen the “Login with Facebook” and “Login with Twitter” buttons on news and company’s product sites.  What I found is perhaps interesting only to me, and if you haven’t done any research in the area, the following links might help:

and  

http://developer.facebook.com/docs/guides/web

http://dev.twitter.com/pages/auth

Essentially both facebook and twitter use an authorization tool called OAuth, which apparently is quite powerful.  The Facebook tutorial is very simple, telling only the essentials, while Twitter’s tutorial is much more complete, although it is harder to understand.  What I found is, well, at the end both of these tools are easy to use, if you know how to write a simple web page, that is.

Now, what I still haven’t found is whether I can rely on Facebook and Twitter login and skip making my own authorization altogether, that is, not having to make usernames and passwords for users.  So I googled “rely on facebook login”, and apparently, yes, I can:

http://stackoverflow.com/questions/5213741/can-a-website-solely-rely-on-facebook-connect-to-log-user-in-without-having-a-use

Obviously, I wasn’t thinking of running a site without a user table.  The person who wrote the respond was quite right in saying “Using a separate, internal user ID will allow you to link other type of shared login scheme (e.g., OpenID) to your user accounts.”

And that in my case, is Twitter.

Or maybe Google Accounts.

Or both.

Joy.

Setting Up VirtualBox 4.0 with Ubuntu 10.10

Posted by Peter on January 20, 2011 No comments

My good friend Edwin suggested to me about trying VirtualBox, a virtual machine software to run multiple OS on one computer.  Before this I only had experience with VMware workstation, but that was a while ago and I don’t mind trying something new.

On my Windows 7 laptop, the installation was straightforward.  It takes up 116MB by itself on my C drive.

Then I went on to download ubuntu 10.10.  At first I didn’t know which edition to download, then I figured that Ubuntu server is designed to be host machines and desktops are better suited as guests in a VM setup.  Next was simple – I simply put the desktop edition ISO on the USB key and clicked on the new button.

VirtualBox Manager Screen

It can't be simpler.

I assigned 8GB of hard drive space and 1GB of RAM to the ubuntu VM.  I didn’t have to wait too long before I find a Ubuntu Desktop running.

From this point on, I encountered two problems (not big ones, just ignorance of me).

1. Screen resolution aren’t detected automatically

Guest Addition option

Initially, it was running with a maximum resolution at 800×600.  That made life a bit difficult.  I googled it for help but most fixes are written for Ubuntu versions 7, 8, and 9, and requires setting up a xorg.conf under etc/x11/ (yes, a little complicated).

And then I read somewhere about installing Guest Addition to enable shared folders between host and guest.  It took me a while to find it – it was actually at the menu bar of the guest machine window, see this screenshot on the left.

Installing Guest Addition gives me access to sharing folders, and it also detected my screen resolution, and I was able to run the ubuntu gnome desktop at full screen.  (Sharing folders, on the other hand, turned out to be less than useful for me.)

2. Access the Guest from Host via IP

Network Adaptors options.

So, the whole purpose of this VM is to give me a machine for development on-demand without sacrificing permanent resources on my host. In other words, there’s a need for me to access the guest machine on port 80 and FTP on 22 if I want to develop websites on it.

This is no doubt very simple for some people, but I needed help from my friend to solve this.  (I’m not very good with networking.)

Port forwarding is solution, and the most common suggestion is to forward the host’s default 127.0.0.1 port 8888 to the guest’s IP on port 80.  What I had trouble was to find out the guest’s IP.

Port forward settings.

Here’s how.  Summon up the network adaptor dialog box of the guest (as shown below).  Adaptor 1 should already be set to NAT.  Just click on Port forwarding to see the next screen.

Since I needed port 80 for HTTP and 22 for SFTP, those are the two ports I set to forward. Host ports 8888 and 2222 are just numbers that I can remember, so I set it to those.

My guest machine’s ethernet IP is 10.0.2.15.  It might be different from yours.

Overall

I am very glad about the virtualbox and ubuntu combination.  VirtualBox is very friendly and easy to setup.  It is also easier to set up compared to VMware workstation I had done in the past.  I don’t have a direct comparison, however, between this and the latest VMware software.

Ubuntu is a blast!  With only 1GB of RAM I have assigned to, it’s pretty dang fast.  For me, it’s a nice departure from Windows from time to time.  Microsoft better watch out before Linux creeps over…

I am skipping the steps to setup ubuntu as a web server.  There are plenty of instructions on the web as to how to do this.  It’s not hard using Ubuntu’s Synaptic Package Manager.

One final thought is about ubuntu’s user interface.  Although it’s sufficient, it doesn’t provide the option to change owner or groups of files or folders, something Fedora Core or other Linux distros have managed to offer.  There’re pros and cons in offering that, but it still gives me a weird impression that I still had to summon up the terminal to do some chown and chgrp.

Retroactivity

Posted by Peter on January 15, 2011 No comments

Well, the is the first technology post of this blog.  So what’s better than to go back and post about creating the metameister.com (MM) and the blog site?

It took me longer than I expected to create these two sites, although the main site took me much longer than the blog.

Domain Registration and Hosting

GoDaddy's usability needs a bit of improvement.

Both sites are hosted on GoDaddy.  Registering this domain and economy hosting package and paying for them was done within an hour.  After that, I had to wait overnight to see the site is all set up and the domain is pointing at the files on the server.

Since I had experience with both Joomla and WordPress, I decided to make the MM site a Joomla site, and this blog site a WP site.  The first problem I encountered was to keep my site folders clean.  You see, GoDaddy forces the www subdomain of your site at the root folder, and adding a subdomain such as blog.metameister.com would be a subfolder at the root, coexisting with my root Joomla site.  If I decide to add 5 sites, I would have five root level folders that have nothing to do with the Joomla site.

I don’t like cluttered folders, and worst would be having folder conflict in the future.  After some trial and error, I figured there’s no sensible way to point the www domain to a subfolder.  So I followed this person’s helpful advice.

Setting Up Joomla (www.metameister.com)

Setting up Joomla was not supposed to be difficult, but using GoDaddy’s built-in application installer, it ended up taking much longer than necessary.  It started in the morning around 10 am, and I left a message to GoDaddy support before I go to bed, because the database setup was still “pending”.  It was a Saturday, so I guess there were more people than usual.  I woke up the next day and the database is set up, and a email reply apologizing that it took longer than I expected.  I don’t blame them, although setting it up myself would take less than an hour instead.

Well, let’s just say that I soon discovered that Joomla 1.6 was out, so I scraped the setup and installed 1.6 myself.

To my relieve, Joomla 1.6 isn’t too different from 1.5, most of the admin functions remain the same.  I see a few extra features here and there: bulk actions, discovery of manually installed plug-in and templates, and some other things.  These are good features.

I also took a template from one of my 1.5 sites and put it on 1.6.  Have Extension Manager discover it, and voila!  The site is there.

I won’t go into details about making the template and the logo.  All in all it just took longer than I thought, mostly because I was contemplating on many things.

Here’s one thing I regret about GoDaddy’s service: once logged in, it takes a lot of mouse clicks to get to the place you want, and the user interface is rather confusing.  Buttons and links are everywhere, and some of the links lead to the same place.  Adding to this is the short login sessions which timeout every 10 minutes or so.   Did I just mentioned that creating a database takes a while?  This makes it very troublesome when I was trying to check the progress.  Don’t get me wrong, for someone like me who don’t do much server administration, GoDaddy is still faster in getting a site up and running compared to setting up a server myself (read my post on setting up an Amazon EC2 instance).

At the time of this writing, the GoDaddy Hosting Control Center is at version 2.10.0.

Setting Up WordPress Blog (blog.metameister.com, where you’re at)

WordPress was a breezzze.  It really was a 5 minutes install.  And I simply downloaded a template from wordpress.org, put it in the themes folder, and bammmm… done.

Now I’m happily writing my blog.

[Edit: I don't think I did justice to Joomla.  Joomla installation is also a breeze.  It's just because I decided to use GoDaddy's app installer that it took waaaay longer than necessary. There are things Joomla do that WordPress won't, and vice-versa.   After all, I like both.  <3<3<3]

Hello world!

Posted by Peter on January 2, 2011 No comments

Hello!  This is first post in the blog and marks the birth of MetaMeister.com, the mother site of this blog.  The site isn’t much to look at at the moment, but more things will be posted as services and products become mature.

My name is Peter, the person behind the sites.  I recently left my job at the University of Toronto, in pursuit of a path of rediscovering the web, setting up new experiments of the latest technologies and, with a bit of creativity, build my own products.

I’m excited.  There are many things I want to try and want to build.  It’s going to be an exciting year.