Newsfeed and search

Both search and newsfeed are two things on the site that I struggled with the most when I made the first version of the site. Can’t see any problems with doing that today, but I guess that’s what they call experience.

I added support for guestbook and comment search upon request from the users. For the newsfeed I made sure there are no dead links that the old version had a lot of.

There has been ideas on making merged newsfeed entries too, such as “User1 and User2 commented on your pattern” instead of two separate entries. I guess that will have to be a future project. There are a lot of basic things that I want done first.

Building a mobile site using jQuery Mobile

Building a native app is cool, though a bit unnecessary in my case. For Friendship-Bracelets.net there is already a website with already tested functionality and interface. Luckily, there is a surprisingly simple way of making the site mobile friendly. This is using jQuery Mobile.

The app you see above only took about 10 minutes to make given my site base code. It can do most things that my site already can, since jQuery Mobile adapts to most existing things in the HTML. Of course, it will need some polishing.

Signing up, email and database stuff

Worked some more on the new site, this time I got the signing up process done, including the email sending part. Or at least the first version of it.

I also added some nice information that the users will see if the database disconnects. Probably lot better than a simple error message like “too many connections”.

Since last time I’ve also signed up for my first Cloud service. I will run the new site on that, no doubt. What it means for you as a user is not much other than a stronger guarantee that the site is always up and running. The Cloud servers will run even if there’s a power outage since they have diesel generators backing them up.

Since I now got the cloud and a basic draft of the site, I hope to release an alpha version of it soon enough. There is just a few basic things I need to get working before this can happen, such as being able to change password.

Rebuilding friendship-bracelets.net

Friendship-bracelets.net has been up for a long time without updates, and it is now getting a bit old. It’s time for me to rewrite it all in HTML5!

Why rebuild it all?

Rebuilding it will take a lot of time, but it will be worth it. The site will…

  • become faster
  • support more cool things
  • become more secure
  • be easier for me to maintain and develop
  • have more nice looking URLs
  • have new HTML5 generators with more features than the current ones
  • have a developer & moderator blog
  • feature better photo uploading
  • probably be supported on more devices
  • …and more!

Obviously, everything should be at least as good as it was before, most things will hopefully be a little bit better.

How far I got

I guess what you guys want is a screenshot, so here you go!

It is hard to explain to non-programmers exactly how much has been built of the site, but what I can say is that I’ve got the basics done.. Such as:

  • Page layout
  • Login and out
  • Very basic HTML5 normal generator
  • Most things regarding the guestbook, links and FAQ
  • Static pages such as the Donate page
  • Profile picture uploader
  • Database layout and tools for transfer the old data to it

What is left to do is the rest of the site (duh!). I think that most of the remaining work is going to go more smoothly, as I’ve already learned how to use the tech behind the stuff above.

I’ll get back with more updates, stay tuned!

How to serve Node.js apps on port 80 via Apache2

You’ve probably made several apps in Node.js, perhaps via Express, and now you want to show them to the world. The URL to your app is yourdomain.com:3000, but this looks quite ugly with the port number in the end. To solve this, you may have tried to make the HTTP server listen to port 80, but it needs root access and it does not feel right.

I know many of you already have Apache2 running on Linux, so I’ve made a recipe for you on how to fix this problem in a better way. The trick is to make a proxy so Apache2 redirects things on port 80 to and from your Node.js app port. For example: if your app runs on yourdomain.com:3000, the proxy will make it available via yourdomain.com. You can also proxy sub-urls such as yourdomain.com/myapp to another Node.js app.

Start off with enabling the needed Apache2 module, mod_proxy:
sudo a2enmod proxy

I assume that you’ve already have set up a virtual host for port 80 and enabled it. If not, then please do.

To create the proxy, add the following code to your virtual host site file (somewhere inside the element):

ProxyPass / http://yourdomain.com:3000

  ProxyPassReverse /

That’s it! Restart apache2 and you should be able to access the app via http://yourdomain.com/.

To proxy things to and from some sub-urls, do this:

ProxyPass /myapp http://yourdomain.com:3000

  ProxyPassReverse /

If you get errors about the proxy module (see the apache2 error log), then you may want to look at this blog post.

To learn more about reverse proxies and how they work, see this.

Backing up a PHP MySQL site regularly on Ubuntu

There are already a number of examples out there on how to do this, but here is a complete recipe on how to do it.

I’ll show you how to:

  • Export all MySQL database tables with a given prefix.
  • Save all files in the public directory, and the MySQL dump into a compressed archive file.
  • Use crontab for regular backup.

The script for doing all this can be found in the end of the post.

Exporting MySQL databases with a given prefix

To export a MySQL database, the command mysqldump is a handy tool. It takes username, password, and database name as arguments and outputs SQL code that can be run to restore the current database. To export specific tables, one can provide a list of table names.

What I want to do is to export tables with a given prefix. For example, all tables that has a name beginning with myPrefix_. This cannot be done directly using mysqldump, so let’s get our custom table list using the mysql command.

mysql -u myUserName --password=myPassword -e "SHOW TABLES;" myDatabaseName | grep -e myPrefix_'.\+'

Running that command will hopefully list the tables you need. To pass this list to mysqldump, we first save it to a variable named TABLES.

# Get table names
TABLES=$(mysql -u myUserName --password=myPassword -e "SHOW TABLES;" myDatabaseName | grep -e myPrefix_'.\+');
# Dump tables to dump.sql
mysqldump -u myUserName --password=myPassword myDatabaseName $TABLES > dump.sql;

Now you’ve dumped the tables you need to dump.sql.

Compress all files

A .tar.gz file with all the site files and database backup would be nice, aye? Let’s do that.

The commands tar and gzip can help us bundle the files and compress them. (Actually, we can bundle AND compress using tar, but since we first need to add the public files and then append the database file to the archive, we must bundle and compress separately).
To add all files in a folder to a .tar archive, run:

tar -cf target.tar /home/steffe/public_html;

To add a file to the archive (in our case, the database dump), run this:

tar -rf target.tar dump.sql;

To compress the archive, and produce target.tar.gz, run

gzip target.tar;

Regularly execute a command

To make backups regularly, we will use crontab. It is really easy to use. To add a task, run

crontab -e

This will start the edit mode of crontab. An editor is launched, and you are expected to edit it and then close the editor.

For example, if we want to run the command updatedb at five a.m. every monday, we add the line

0 5 * * 1 updatedb

The format is “Minute Hour DayOfMonth Month DayOfWeek Command”. You can add any command with any flags or arguments. Detailed instructions on how to use crontab can be found here.

Wrapping it all together

This is the script I ended up with, it combines all things above. It also adds a timestamp to the backupfiles’ name.

#!/bin/bash

BACKUP_DIR="/home/steffe/backup"
DIR_TO_BACKUP="/home/steffe/public_html"
DB_USER="steffe"
DB_PASS="noyoudont"
PREFIX="wp_"
DB_NAME="database1"

echo "Getting table names..."; TABLES=$(mysql -u $DB_USER --password=$DB_PASS -e "SHOW TABLES;" $DB_NAME | grep -e $PREFIX'.\+');
DB_DUMP=/tmp/db.sql;
echo "Dumping database to $DB_DUMP...";
mysqldump -u $DB_USER --password=$DB_PASS $DB_NAME $TABLES > $DB_DUMP;

DATE=$(date +"%0Y%0m%0d_%0H%M%0S");
TARGET_FILE=$BACKUP_DIR/backup.$DATE.tar.gz;
TEMP_FILE=$BACKUP_DIR/backup.$DATE.tar;

echo "Wrapping it all into $TEMP_FILE...";
tar -cf $TEMP_FILE $DIR_TO_BACKUP;

echo "Adding database data to archive..."
tar -rf $TEMP_FILE $DB_DUMP;
rm $DB_DUMP;

echo "Compressing..."
gzip $TEMP_FILE;

echo "Backup done: $TARGET_FILE";

To get started, save the code above to a file, e.g. /home/username/backup.sh. Edit the MySQL login details and folder names at top. Make it executable by running chmod +x /home/username/backup.sh. Then add the line “0 5 * * 1 /home/username/backup.sh” to crontab.

Good luck!

Unity: add custom launcher

Here is how I did to add a custom Google Chrome launcher to Unity in Ubuntu 12.04.

First I located a desktop launcher that I could use as a template for my new launcher.

$ locate google-chrome.desktop
/home/steffe/.gnome2/panel2.d/default/launchers/google-chrome.desktop

The first result looked okay so I copied it to the desktop (You can also save it to /usr/share/applications/, that will make it available for all users and you won’t have to keep the icon on the desktop).

$ cp /home/steffe/.gnome2/panel2.d/default/launchers/google-chrome.desktop ~/Desktop/google-chrome-webgl.desktop

Next I did was to edit the file to make it the way I wanted. In my case I changed the variables Name and Exec in the file:

Name=Google Chrome with WebGL
Exec=/opt/google/chrome/google-chrome --enable-plugins --ignore-gpu-blacklist %U

The desktop launcher needs to be executable to run. Hence,

$ chmod +x ~/Desktop/google-chrome-webgl.desktop

Now the launcher should show up on the desktop. Drag and drop it onto the Unity panel. Done!

Blockschema 2.0 är live!

Att planera sin utbildning är svårt, speciellt när man har alldeles för stor valfrihet. I Umeå vet åtminstone teknologerna vad jag pratar om.

Samtidigt som man väljer kurser som ser kul ut måste man hålla reda på alla poäng man tar inom en komplicerad trädstruktur av kategorier. Det kan vara tungt, men det är nödvändigt för att få en examen i slutändan.

Lösningen jag presenterar här är en öppen studentsajt som sparar information om kurser, deras förkunskaper, poäng, och kategoriseringar och själv räknar ut dina poäng gentemot en examen. Behöver man inte räkna på poängen finns fortfarande informationen tillgänglig och man kan få mer överblick över sin utbildning. Sajten kallas Blockschema.se.

Eftersom många studentsajter är stängda för studenternas egna åsikter om utbildningar och kurser, kommer denna att vara helt öppen för sådan diskussion.

Här är några av funktionerna i Blockschema:

  • Skapande av ett eller flera personliga blockscheman
  • Kurser från hela Sverige stöds – har du pluggat i en annan stad är det OK!
  • Varje kurs har “kurstillfällen” bundna till sig
  • Om du registrerar din student-epostadress får du utökade privilegier för ditt program och skola
  • Jämför dina scheman mot vilken examen som helst
  • Kommentera på kurser, utbildningar och diskutera i forumet
  • Ladda upp filer till en kurs (gamla tentor, labbinstruktioner etc)
  • Notifikationer som håller dig uppdaterad om vad som händer med dina kurser och lärosäten
  • Hemsidans layout anpassas när du besöker den via smartphone

I nuläget är några av funktionerna inte helt implementerade ännu, men de kommer bli det inom sinom tid.

Building a 3D JavaScript physics engine – cannon.js

Above: the JavaScript physics engine cannon.js running together with the WebGL scenegraph three.js.

Recently I’ve been working hard on a 3D JavaScript physics engine that I call cannon.js. I kind of made a prestudy for it in my browser physics project at UMIT, but continued the project as a hobby. It was not a project goal to build an full engine, rather to see IF the browser can do it.

After my performance test, I was determined that a JavaScript physics engine could be a successful project. JavaScript may not be the most optimal way to make a physics engine (C++ seems to be preferred for performance), but by using tricks (typed arrays, web workers, webcl…) quite good performance can be achieved anyway.

A native JavaScript physics engine will also be needed in the future. When the WebGL developers are done with making scenegraphs, the game developers will take over and produce games. And when that happens… They will need physics.

At the moment, cannon.js supports planes, boxes and spheres to a small extent. It is not yet stable enough to use with an end-user software though. When the software gets stable, we can expect Angry Birds-like games in 3D!

You may ask why I am making a new software from scratch. There are already a number of physics engine ports to JavaScript! For example ammo.js. My answer is that they are not enough optimal for JavaScript.
The code structure of those softwares depends on the original language and the porting method, the performance of the final code may not be optimal in JavaScript.
Also, some of the ports contains logical bugs, and many times this is hard to correct for the developer porting the code.
Another reason (probably the most important one) is that I am very interested in a full understanding of a rigid body physics simulator. I admire physics engine developers. Without them we would not have realistic games at all… And Angry Birds would’t even exist.

Have a look at the current examples, or go to cannon.js on GitHub to get the code.

Blockschema.se – soon at version 2.0

The Swedish academic education planner is soon at version 2.0. I just wanted to sneak out some information about what I am doing. I guess that’s what my blog is about!


NOTE: The schedule in the image above is only for a local demo. It is not public.

PROBLEM: Planning an academic education is hard. Especially when there are too many possibilities to shape the education as you like. At the same time as you pick courses that look fun, you have to keep track on how many credits you get within the set of categories in your exam.

SOLUTION: An open site that stores course information and can build block schedules for students.

The problem is for sure only existing in few of the engineering programs at Umeå universitet, but we will for sure find out when the site is released. If the need is not that big, the site can still be used by students and teachers that wants to build the actual schedules and/or get some education outline.

The first version of the site went not so well, it’s full of bugs and is hardly usable. Therefore, we decided to rebuild it from scratch, using pure object oriented programming and HTML5. I believe that this, together with strict error testing and documentation, solved our problems.

Blockschema.se 2.0 has got the following features:

  • Create any number of private block schedules
  • Add any course at any academic education (in Sweden)
  • Add course occasions for each course
  • Connect student email address to account – increase privileges to edit e.g. education info, program info etc.
  • Compare any block schedule to any exam
  • Public commenting on courses, educations etc
  • Uploading of files to courses
  • Public forum, one forum for each Course and one for each education
  • RSS feed/email notifications for listening to course updates etc