Comment boxes

The comment boxes on friendship-bracelets.net are like small web browsers. They load stuff dynamically from other places and view only what you need. You can post your comment and a script will save it on the server for you.

The code from the old version needed to be rewritten for various reasons. The first is that the code was a monster… Second is that it did not load things comments from the server on the desired format.

Need to get some sleep now… Over and out.

HTML5 Generators

The generators are the most important things on Friendship-Bracelets.net. Users use them to make their own pattern, either of type Normal, Alpha, Kumihimo or simple name patterns.

There has been a lot of problems with the generators since the site started. The first normal generator was written in pure PHP, and the users had to interact with it by writing “pattern code”. This code looked somewhat like this:

DDDD
ddd
RRRR
rrr

Each letter in this code was representing a knot, and each row represented a row in the pattern. D meant “forward knot”, d was backward knot, R backward-forward knot, and r forward-backward knot. Can you imagine writing a pattern this way?

Another drawback with a PHP generator was that the server had to do all the rendering and send back the results to the user every time he/she updated the code. This was very heavy for the server.

Later on, I made the generator in Flash. I really hated Flash (I still do) but it was the only reasonable way to make an interactive generator at that time.

By that time the site had the same generator code written in both Flash and PHP, which doubled the code maintenance time for me. And I had no experience in unit testing, which made everything a whole mess.

Now everything is going to be written in JavaScript, and all the code is going to be unit tested. I’m really excited that the site finally is getting simpler to maintain.

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
• 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
• Very basic HTML5 normal generator
• Most things regarding the guestbook, links and FAQ
• Static pages such as the Donate page
• 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!

Allt för många gånger har jag vaknat dagen efter vistelse på badhuset med känningar i halsen. Ett par gånger har det också lett till ordentlig förkylning. Nu i torsdags badade jag i en dryg timme, samt njöt av bastu en stund. I fredags fick jag feber och den gav sig inte förrän idag (söndag).

Är badhus fulla av bakterier och virus? Ska man då bada oftare för att få starkare immunförsvar? Internet verkar inte ha tydliga svar men jag kommer iallafall ta det lugnt med badandet ett tag.

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 <VirtualHost> element):

ProxyPass / http://yourdomain.com:3000
<Location />
ProxyPassReverse /
</Location>

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
<Location /myapp>
ProxyPassReverse /
</Location>

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

Prague

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
• went by the John Lennon wall
• visited the Staropramen brewery
We had a blast and I’ll miss the town. It had a lot to offer and things to see.

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!