Steffe.se

Recently I’ve been working a lot on the Node.js version of friendship-bracelets.net. Here’s a quick status report.

Code reduction

I’ve reduced the code to less than half its size by abstracting key parts of the code and compressing a few static JS files. I really love JavaScript – abstracting code has never been easier (and dirtier).
One interesting abstraction I made was an “edit resource” page. For each resource I have a Schema class instance that can help create an HTML form and then validate input from the client.

Nginx

Other news is that I’ve started using Nginx to serve static files and proxy to Node. It was really easy to set up so I will probably continue using Nginx. The only drawback is that I really want PHPMyAdmin for administrating my database, so I still have to run an instance of Apache… Perhaps I’ll find a solution to this later on. I will post instructions about my setup when it’s stable.

Chat using Server-Sent Events

Another thing I’ve done is a chat client. I was really excited while doing this because it is a whole new concept to the site. This way we can get even closer interaction with the users.
The tech behind the real-time chat is server-sent events, or more specifically, EventEmitter in HTML5. Earlier I was determined to use WebSocket, but since server-sent events is more well supported (on both client and server) and good enough for the purpose, I went that way.

Caching of Express views

I’ve probably mentioned how to do this earlier, but now I’ve tried it. When starting the Express app with the environment variable NODE_ENV set to “production”, I simply run
app.configure("production",function(){
  app.enable("view cache");
}); This makes Express cache the templates inside the app, and it makes the app faster. By also relieving the app from serving static files (using Nginx), this makes the web app perform really well. It almost feels like running the app locally when it in reality it’s on a virtual machine in a datacenter somewhere else.

Mobile app thoughts

I’ve already started using jQuery mobile for the mobile site, but it will probably only make it more difficult for me to maintain the site. Using that will need different HTML for the layout, which duplicates that amount of code. I’m starting to think maybe it’s better to just add some CSS when on mobile instead.

Express: multi-language site

A question from a user came in, and he asked if the site could be translated into russian (he even offered help). Making an Express app support multiple languages is easy using e.g. i18n-node. However, making friendship-bracelets.net in multiple languages is probably not that easy. As I see it, we have 3 options for multi-language implementation.

1. Just translating the menu buttons and some of the text. This will encourage people comment in their own language (if the site is in your language, you will probably write text in your own language). I think it would be really confusing if everyone posted stuff in mixed languages.
2. Separating the languages into own sites with separate content. One site will have its own set of content and the other won’t have it. Not really cool and not really a good option in this case.
3. Let’s say we have two sites of different language, A and B, and they share all content. Should all content in A also be visible for users in B? For some content, yes. What if you post content in your own language site A (english) and get a comment on it in site B (russian)? It gets more complicated than this when you think about it, and there will be special rules for just about everything.

Discussing this with the mods lead to a decision to do nothing about the multi-language question. However, It would be really cool to try out i18n in the future (I never tried it before).

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!

24 to 30th of August I, Hanna-Marie, Lisa and Jonny went to Prague. Some of the things we did were:

• looked at churches & statues,
• drank locally brewed beer,
• learnt that “welcome drinks” is not referring to drinks but spirits
• went to zoo
• ate “manly” food (according to the menu)
• ate rabbit, pork knee, dumplings and other czech foods
• wandered around just watching the view
• went to a tea festival
• laughed at snobby servers at fine restaurants
• went shopping (did I mention everything is a bit cheaper over there?)
• went to a horror museum, and a torture museum and a communist museum
• went to two spas
• read a lot of interesting history about the town
• went by the John Lennon wall
• visited the Staropramen brewery

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!

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!

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.

I love coffee. I like it hot and with milk, in the cappuccino format or latte. When I retire I’ll be a cranky old man, constantly drinking his coffee and having fika way too often.

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

I won this coffee machine after participating in a slogan contest in my local grocery store. It is awesome and can make everything from tea to latte macciato

Sometimes I want to start a download on my home computer when I’m at work or somewhere else. There are many ways of doing this, but one of the most convenient ways may be to use the Azureus HTML WebUI. It sets up a small server and a web interface that you can access from any web browser.

I’ll show you how to make a typical setup in Ubuntu 10.10 and enable password.

First, install Azureus via terminal and then start it.
sudo apt-get install azureus
azureus

The most simple way to install the HTML WebUI plugin is via the Azureus GUI. Go to Tools > Plugins > Guide–Installation guide. It will help you install the plugin, should be straight forward and easy.

Restart Azureus via the main menu. The GUI disappears and then pops up again.

Open a web browser and open http://127.0.0.1:6886/ (or http://localhost:6886/ if you already had a web server setup on localhost). The Web UI should open and you can manage all your torrents or add new ones.

To set a password for the HTML WebUI, open the Azureus GUI and go to Tools > Settings. Click the little triangle to the left of “Plugins” in the left menu. Open the submenu !ConfigView.section.plugins.azhtmlwebui!. You should be able to set username, password and other useful things here.

Happy torrenting!