Ban NyroBlog, by Emi
Image by Emi - ?

Tag: Libre

Chips, Twix and Mix

It was long time since I didn't make a post like this one. And it's also the first one in English. Basically, I just put some info and links without any orders. So it's possible that some of theme are old...

  • Android grows up pretty well. We can except the first real phone soon
  • Facebook Connect will allow to add a social dimension to your website
  • Firefox came out in version 3 RC1. The RC2 should come soon. If everything goes good, the finale version should come by the end of June
  • Google changed his favicon. Do you like it? I do
  • jQuery released 3 minor versions in a few time (1.2.6 at this time). They're working in the version 2 which is coming soon; a new version of the website will be done, a new logo and maybe the first final release of jQuery UI
  • TinyMCE did the same, to fix many bugs. Right now it's the version 3.0.8

And some personal news, no reasons:

  • The Lakers won yesterday the West Conference, it's official. First of the season, First of the playoffs, and the MVP for Kobe Bryant. They only have to win against the Celtics from Boston and they'll get everything this year
  • My internship by Fluidesign ends in more than 1 month
  • NyroModal was downloaded more than 2'000 times, the homepage was saw by more than 20'000 uniq visitors! A post is in preparation about that
  • After some problems in the server of Amenothès, I decided to but my own dedicated server when I'll come back in France. If somebody has some good URLs or infos about the installation or configuration of Postfix, SpamAssassin, ClamAV or anything else which could be useful, don't hesitate to write a comment! I'll take a debian to play as I want with it

Version française de ce billet

Chips, Twix et Mix

Cela fait un petit moment que je n'ai pas écrit un billet du genre. Il est donc possible que certains de ces infos soient un peu vieilles...

  • Android évolue toujours mieux. On peut espérer le 1er vrai téléphone bientôt
  • Facebook Connect permettra d'ajouter une dimension sociale à vos sites
  • Firefox a sorti en version 3 RC1. La RC2 ne devrait pas tardé, et si tout se passe bien, la version finale devrait sortir fin juin.
  • Google a changé sa favicon. Vous trouvez comment ? Moi j'aime bien.
  • jQuery a sorti 3 version mineures en peu de temps (1.2.6 à l'heure actuelle). Mon petit doigt me dit qu'il travaille sur la version 2 qui sortira bientôt, en même temps qu'une nouvelle version du site, d'un nouveau logo et de la 1ère version final de jQuery UI
  • TinyMCE en a fait de même, pour fixer des bugs. Version 3.0.8 actuellement

Et puis un peu de news perso aussi, il n'y a pas de raisons :

  • Les Lakers ont remporté hier la conférence West, c'est officiel. 1er de la saison, 1er des playoffs, et le MVP pour Kobe Bryant. Plus qu'à gagner contre les Celtics de Boston et ils auront tout eu cette année.
  • Mon stage chez Fluidesign se termine dans un peu plus d'un mois. Ensuite j'ai encore 3 semaines ici à faire le touriste. Si une envie de Cali vous prend (et qu'on se connait, c'est un minimum), des options sont possible ;)
  • NyroModal a été télécharger plus de 2 000 fois, la page du projet vue par plus de 20 000 visiteurs uniques ! Un billet sur le sujet est en préparation
  • Suite à des problèmes sur le serveur d'Amenothès, j'ai décider de me prendre un petit serveur dédié à mon retour en France. Si quelqu'un a des bonnes adresse ou des infos sur l'installation et la configuration de Postfix, SpamAssassin, ClamAV ou quoique ce soit qui me sera utile, n'hésitez pas ! Je vais prendre une debian vierge histoire de m'amuser comme je veux.

English Version of this post

Howto: Transfer a website

When I wrote this post in French, I just transfered 2 of my website.

Before I started to do it, I looked for an howto like this one to be sure to forget nothing. As I didn't find it, I'm writing it for the others!


To be sure everybody understand what we're talking about here, let me explain the problem.
When we want publish a website, we need 2 things: a domain name and a server. The server contains all the websites files (HTML, PHP, Images, etc...)

The domain name is the URL you use to access to our website; nyrodev.info for mu blog for example. This domain name should redirect your visitor to your server to access the files. Your server is reachable through an IP address. The link between your domain name et the IP address is done with the DNS. DNS are online computers which everybody can ask to know the IP address related to a domain name.

The server is here to stock your files. It's basically a computer with some special softwares. A server can contains multiple websites. That mean more than 1 domain name can point to the same server. The choice of the right files in the server will be done via many softwares well parametered for each website. I won't speak about this part here. Most of time the dedicated server provided administration tools to configure automatically every software during the website creation.

My goal is to change the server. I have to transfer the files (images, pages html, etc...), the eventual database and more. At the end, we'll change the IP address where point the domain name to use the new server.

Next you'll see some actions to do that in the good order to don't have problems, by loosing at least at visitors during the transfer time.

In the next of this post:
  • domain.com: The domain name to transfer
  • Server A: old server, where the website is at the beginning
  • Server B: new server

1. Prepare the Basics

The first step of this transfer is to prepare the server B to receive the new website. Create in your administration to get some disk space to receive your files. You can give him directly domain.com to save time. Don't forget to set the mail parameters, FTP, etc... It doesn't cause any troubles[1] as domain.com still points on the old server.

Then you can create the email and email alias that you have on the server A to don't lose any email. Regarding the databases, create them without the tables. This will be done in an other part.

2. File Transfer

For now we can transfer the static files. Don't transfer now the uploaded or dynamic files because the current website is still available in the old server, and some upload can still occurs.

If you have a SSH access on the server A, why don't create a tar.gz archive to group all the files in one compressed, to gain some time?
Go to the directory containing your files, and to create the archive:
Retrieve the file by FTP and send it to the server B, where you should also have a SSH access. In the directory where you uploaded this archive, decompress the file:
tar xvzf DIRECTORY.tar.gz
These files will probably contains some database configurations, .htaccess files with absolute path, etc... Many configurations which will be probably different in the new server. Edit them now.

If you don't have a SSH access, simply retrieve normally your files by FTP. You can make the change in the configurations files before transfer them..

Moreover don't forget about the chmod of the directories where your script has to write some files.

Right now, your website should be ready to use in the new server by simply adding the database content.

3. Temporary Website Closure

To be sure to loose nothing during the transfer, we'll disable the whole website in the server A, just before transferring the database and the dynamic files.

We'll start by closing the whole website by simply using one .htaccess file, denying everything and redirecting to a single text page to explain about the moving. The .htaccess is:
Deny from all

    Allow from all

ErrorDocument 403 http://www.domain.com/transfer.php
And you can create the file transfer.php to explain it's temporary and won't during more than 24 hours.

4. Transfer the Last Elements

Once the website is close, we can transfer the dynamic files. You're sure they won't be new in the old server. You can use the same technique used in the 2nd step.

Now the Database transfer.

If you don't have a SSH access, simply use phpMyAdmin to export your database from the server A to import it in the server B.

If you have a SSH access, it could be better to proceed differently for 2 reasons: the phpMyAdmin export is sometimes buggy, and if your database is too big, phpMyAdmin will give you some timeout errors.

We need only 2 command lines. The first to export the database in a text file in the server A:
mysqldump --host=localhost --user=USER --password=PASS --add-drop-table DATABASENAME > base.sql
Then transfer this base.sql file to the server B and execute this command:
mysql -h localhost -u USER --password=PASS DATABASENAME < base.sql
Your website should be now totally ready in the server B. If you can test it to be sure everything is OK before the final transfer.

5. Edit the DNS

Finally you can do the modification in your domain name to point it to the server B, by editing the IP address in your DNS. And wait for testing. If you want test quicker if everything is good, I strongly recomand to use the DNS server from Open DNS on your computer —why not keep them later?. The gain with Open DNS is they are very fast to update, and you can force it to refresh the cache. Do it for your domain name 15 to 20 minutes later your change.

If they're going to the new IP, refresh your DNS on your computer. For Windows: Start > Execute > cmd. Then type:
ipconfig /flushdns

And finally test on your favorite bowser after clearing your cache too. It should be OK.

During the next few days, you have to retrieve your emails in the both server as some DNS will not be up to date everywhere.

Voilà, I hope this howto will be usefull for you. For sure you have different solution for every step. I simply showed which I used and they worked perfectly for me.
If you have any suggestions, remarks, feedback, don't hesitate to comment here!

Thanks to Niko who advised me during my transfers.

[1] : The only problem you can have —and I experienced— is: If in the server B you have some website or anything else which want send email to domain.com. Actually the server B thought domain.com is hosted by itself. That mean it don't search for the IP where to send the email because it is itself! It's not really a problem if you know that. As you'll finally retrieve your emails in the server B, you'll finally get these emails. Use simply the webmail to check during the transfer.

Version Française de ce billet

nyroModal 1.1 release

2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.

During the last days, I developed my first own jQuery plugin: nyroModal.


Why a new plugin of this kind when there is already too many?

4 answers:

  • There is no too much using jQuery, most of them use Prototype/Scriptaculous
  • Most of them aren't too customizable as expected
  • When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
  • Because it's still pleasant for his ego to realize the things by himself

My plugin provides all the features I saw in the differents plugins I tried. In bulk:

  • Ajax Request
  • Display an hidden DOM element
  • Image
  • Gallery
  • Form
  • Iframe

But I also added some stuff I don't believe see elsewhere, or not enough:

  • You can target the content inside an Ajax request or a form
  • Forms works with a file upload
  • Background color is modifiable dynamically
  • Display an error message if needed
  • Ability to resize from an Ajax Request

Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!

And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.

If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.

PS : I know, I didn't search too far for the name...

Version française de ce billet

sortie de nyroModal 1.1

Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.

Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.


Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?

4 réponses :

  • Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
  • La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
  • Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
  • Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.

Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :

  • Requête Ajax
  • Affichage d'un élément du DOM caché
  • Image
  • Galerie
  • Formulaire
  • Iframe

Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :

  • Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
  • Les formulaires fonctionnent même avec un upload de fichiers
  • La couleur de fond est paramétrable dynamiquement
  • Affichage d'un message d'erreur si besoin
  • Possibilté de modifier la taille de la modale depuis une requête Ajax

De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.

Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.

Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.

PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...

English version of this post