Zliton.com : 10th Anniversary 2

Change interface color

2003 – The website’s very first version, where you could change the color theme

18th of April 2003. Souvenirs, souvenirs ….

10 years ago, on the same day, I started and launched online the Zliton.com website. This was my first real project, using some of the 03′ technologies (Flash / Javascript / php 3) with my quite limited knowledge back then. At first, my goal was only to improve my skills and to learn everything I could about website creation techniques ; but very quickly, so many people came and subscribed to the site that in no time, the main goal evolved to building up roleplay & managing a team of moderators.

Originally, the website was entitled martien.niamor.com (“martien” = french for “Martian”, since it started as a game about taking care of an imaginary creature, which you could very well consider to be some kind of E.T.). Two months later, in June 2003, I came up with the name “Zliton”. The first year was more or less spent improving the source, and adding some new features to the game. And very soon, I had to switch to managing the team and taking care of players !

 

Jus de zligume

2004 – Some real “Jus de zligume / Zligetable juice”, served as drinks for IRL events

Zliton.com was all about roleplay, creativity and imagination. The in-game universe was a different world : you were able to invent almost anything, it offered some magic possibilities and tore down limitations, while all of this was shared with your friends online.

Between 2003 and 2005, I started launching IRL (In Real Life) events, gathering players from all around (mainly) France. I met some of the most epic zliton.com players (from the leaderboard’s top EXCEL geek using his knowledge to get a #1 player’s ranking to lead roleplayers & forum moderators). I still have invaluable memories from that period of my life !

Every occasion (Halloween, “zlitonian” birthdays, Valentine’s Day …) was a pretext to start any kind of contest and/or to collect some pictures of the players’ best creations. No wonder I’ve ended up with tons of pumpkins, homemade cakes, fanart, random drawings and so on… Once again : countless wonderful memories.

 

All of this was really thrilling, but in 2005, I got my first “real” job – and despite all the fun Zliton.com provided me, I soon could no longer invest in the website the minimal necessary amount of time the community needed to keep a steady growth.

In 2007, we came up with an awesome roleplay : the zlihens were “on strike” during a couple of weeks, and we were able to drag some “hidden” players into chatrooms, sending private messages and some forum posts. As a result, we obtained a peek of more than 330 new player posts on the board – daily !

Zlihen

2003 – 1st drawing of the Zlihen

In 2011, I finally added the last features to the site : there are now over 100 trophies and achievements to unlock/earn by playing Zliton.com. Ain’t it cool, huh ?

 

 

So, here it is. Happy 10th anniversary, Zliton.com !

Thanks to all the people who’ve spent some time on Zliton.com ! I hope that one day, life will offer me again the opportunity to craft something like Zliton.com …

 

Zlicow / Zlivache

Zlivache / Zlicow. Player creation entering a Halloween contest

Birthday cake for Zliton

A Zlitonian’s birthday cake

Zlihen / Zlicow

Zlihen / Zlicow, entirely consisting of almond paste

Zlicow / Zlihen meringues

Zlicow / Zlihen meringues

Rsync for automated & incremental Backup

A significant number of people have been repeatedly asking me how to set up an “incremental backup on an Unix server”, so I decided to write this post to help you guys out.

I’m running the following operation on a Debian server, but the procedure should almost be the same on every other Linux/Unix operating system.

 

First, you have to install rsync on your server. Type :

aptitude install rsync

And here is the command to start synching your files with a backup  folder :

rsync -Hurovl --delete /folder/to/backup /backup/folder

 

According to the rsync manual, here are the parameters I’m using :

  • -H, –hard-links : preserve hard links
  • -u, –update : skip files that are newer on the receiver
  • -r, –recursive : recurse into directories
  • -o, –owner : preserve owner (super-user only)
  • -v, –verbose : increase verbosity
  • -l, –links : copy symlinks as symlinks
  • –delete : delete extraneous files from dest dirs

 

Now, if you want to backup your files in a remote location, here’s how you do it.

 

First, you have to install openssh-client & openssh-server in both the local and the remote location. Type :

aptitude install openssh-client openssh-server

To start the backup, the command line on local server will be almost as simple as the first one (replace “user” and “remoteip” by your values) :

rsync -Hurovl --delete /folder/to/backup user@remoteip:/backup/folder

 

There’s still one issue with this method though : this command will prompt you every time to enter the remote password. Which is quite awkward if your goal is to put this into your crontab.

In order to solve this issue, let’s generate SSH keyfiles.

 

On the remote backup server, type :

ssh-keygen -b 4096 -t rsa

Follow the indicated steps, and by default, you should now have two new files in your /root/.ssh folder (id_rsa & id_rsa.pub)

Then, copy the public key in the list of authorized keys :

cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys

Eventually copy the private key in the /root/.ssh/ folder of your local server (with a CHMOD 600 to be safe), and here you go ; the job’s done !

 

I hope you found this small tutorial helpful. Don’t hesitate to post advice and questions in the comments section.

Accordion menu using CSS3 Transitions

Last week, I had to help out a friend building a light jQuery accordion object : he wanted it without any jQuery, so I first thought of coding a small Javascript code instead. But that’s where I rediscovered the power of CSS 3 transitions.

One of the new abilities of CSS 3 is to allow web developers to design some transitions without using any Javascript at all. It’s kind of really smooth, and you don’t need to include jQuery or other heavy framework / plugin into your page.

As usual, Internet Explorer supports this feature only on versions 10+, and for Windows 8 only (I hope it will soon be compatible with Windows 7, too) – but it’s already supported by Chrome, Firefox, Safari, and Opera. On IE < v.10 it’s still working, but without any transition effect …

So, as I ran into it, I wanted to share with you the following small demo.

You just have to include into your CSS a “transition: <duration>;-webkit-transition: <duration>;” property. Originally, every browser had a specific propriety (-moz-transition ; -webkit-transition ; -o-transition) but now “transition” is generally working well (except for Safari, which still requires the -webkit- specific code).

Here is the CSS3 style sheet :

.accordion {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}
 
.accordion {
    transition: 1s;
    -webkit-transition: 1s;
    height: 20px;
    background-color: #ddeeff;
}
 
.accordion:hover {
    transition: 1s;
    -webkit-transition: 1s;
    height: 200px;
    background-color: #ffeedd;
}

And here we go for the HTML source :

<div class="accordion">1. Accordeon</div>
<div class="accordion">2. Accordeon</div>

This is the final result of our example :

1. Accordion
2. Accordion

SELECT and ORDER BY distances directly into a MySQL query 2

MySQLdistanceAs I was working on ShiningQuest, it occurred to me that you can directly input some calculations into MySQL queries. Well, I knew it was possible but it just struck me how powerful it was.

In this case, I play a character on ShiningQuest with coordinates x,y to cast a spell on itself. This spell affects a 5-unit radius zone around the character – and I want to select every character into the zone.

Here is the MySQL query (assuming my character_id = 1 and the spell effect radius = 5) :

SELECT 
    SQRT(POW(c1.x-c2.x, 2) + POW(c1.y-c2.y, 2)) AS dist,
    c2.*
FROM 
    characters AS c1,
    characters AS c2
WHERE
    c1.id = 1
    AND SQRT(POW(c1.x-c2.x, 2) + POW(c1.y-c2.y, 2)) <= 5
ORDER BY
    dist

I’m SELECTing the distance between my character and every character in the zone (as ‘dist’) and using it to ORDER my results (it’s useless in this particular case but fun to show here). I can’t reuse “dist” in the WHERE clause and I have to redo the calculation.

[EDIT 2/8/2013] Thx for your advices on FB and comments, here’s the list of improvements for a more efficient query on a larger database :

  • I’ve removed the SQRT function ;
  • I’ve added HAVING, in order to be able to reuse “dist” instead of redoing calculations in the WHERE clause ;
  • and I pre-filter results in the WHERE clause.
SELECT 
    POW(c1.x-c2.x, 2) + POW(c1.y-c2.y, 2) AS dist,
    c2.*
FROM 
    characters AS c1,
    characters AS c2
WHERE
    c1.id = 1
    AND c2.x BETWEEN c1.x - 5 AND c1.x + 5
    AND c2.y BETWEEN c1.y - 5 AND c1.y + 5
HAVING
    dist <= 25
ORDER BY
    dist