Posts Tagged ‘Javascript’

Megaupload bookmarklet


07 juin

Un bookmarklet, qu’est ce donc que ce terme barbare? Facile, juste une fonction javascript que vous avez mis en favoris et qui fait une action donnée sur une page web. Par exemple, le mien contourne les 45 secondes d’attente sur megaupload: vous arrivez sur la page avec le décompte, vous cliquez dessus, et hop vous recevez le fichier…

Pour l’utiliser, il suffit de déposer le lien ci dessous sur votre barre de favoris, il suffira juste de cliquer dessus pour l’activer et faire sauter l’attente :D

Megaupload: I want it, now! (Pour mes lecteurs via Facebook et autres, il faut lire l’article original pour avoir le lien fonctionnel)

Si vous voulez un bookmarklet et que vous n’en trouvez pas, n’hésitez pas à demander…

Bientôt fini le Wizard :)


30 avr

Yipee, suite à l’article d’hier, j’ai refait toute l’appli ce soir, vachement simplifié (surtout les anims) et c’est boooooooooooon…

Alors les stats (ben waip, faut bien se vanter de ses miracles):

  • Javascript: 370 lignes (dont seulement 40 que j’ai pu reprendre sur les 364 d’hier)
  • HTML: 140 lignes (par rapport à 330 lignes). Ben waip, design, anims et copy simplifiés, ça raccourci vachement le code…
  • CSS: 7 lignes (hier: 96 ^^)

Baloo content :)

Me reste plus que l’intégration du copy des différentes solutions, comme un con, j’ai oublié de le reprendre ce soir…

Etre flatté et/ou frustré? Telle est la question du jour…


29 avr

Pour la première fois de ma vie, j’ai fait un script qui plante! Bon ok, ça c’pas la première fois, par contre le fait que le script en soit ne plante pas mais qu’il fasse planter IE6 (du genre écran bleu => dépassement mémoire) et IE7 (erreur fatale d’IE) ça faut déja le faire. Me doutais bien qu’un script aussi complexe que celui là allait faire chier mais bon… Pour dire, même le « proof of concept » que j’ai fait l’année passée pour ING était moins complexe, pourtant ceux qui l’ont vu (et compris) peuvent témoigner, c’était pas tout cuit…

Enfin soit, certaines « mauvaises langues ;)  » diront que pour pas changer, je ne fais que des trucs qui tournent sous Fx mais bon, d’habitude, après une optimisation comme celle que je viens de faire, ça ronronne et tourne pile poil au lieu de seulement passer de l’écran bleu au freeze pour finir par une animation à +/- 2fps… C’est moche et je sais pas quoi faire. J’me pends?

Tout ça pour dire que je ne sais pas si je dois me sentir flatté d’avoir atteint des sommets de complexités dans mon code ou frustré de pas savoir l’optimiser plus que ça…

Gestion des Cookies en Javascript


23 avr

Bon, ça fait quelques temps que je me dis que je vais être sympa et vous filer quelques un de mes scripts. Bon, ok, c’est surtout pour qu’on me dise « tu peux améliorer ça comme ça » et tout et tout mais bon…

Tous ces scripts sont développés sur mon temps libre (=> le copyright en he8us.be) mais sont susceptibles d’être utilisés sur les sites que je produits au boulot. C’est y pas beau ça, je bosse même sur mon temps libre ^^

Enfin soit, le script est ici. Pour l’utiliser, rien de plus simple:

  1. L’importer
    <script type="text/javascript" src="cookies.js" />
  2. C’est tout…

Bon maintenant les fonctions:

Cookies.read(name) //pour lire le cookie
Cookies.set(name, value, expiration) //pour définir le cookie, l'expiration est un objet Date() et n'est pas obligatoire
Cookies.erase() //pour l'effacer. L'équivalent de Cookies.set(name, "", 0)
Cookies.cook() //pour récupérer les cookies dans le browser. Est appellée automatiquement au chargement du script...

Voila quoi… Z’en pensez quoi? Utile?

Javascript & Events


21 avr

Quand tu assigne un event via un addEventListener en JS dans un objet, et que tu refais un call à l’objet (par exemple pour raffraichir le content des selectboxes), supprime l’event et redéfini le, sinon, pour une raison X ou Y, il prendra en compte l’état des variable lors du premier call, pas celui des variables réinitialisées…

WTFramework


19 fév

Un autre bookmarklet, que j’utilise depuis longtemps, lui, est WTFramework. D’un click sur son bouton, vous pouvez connaitre le framework utilisé sur le site que vous visitez. L’intérêt? Vous arrivez sur un site et là il y’a une animation qui vous plait ou que vous cherchez à réaliser, plus besoin de fouiller le code, on clicke, c’est tout…

Simple et rapide :)

Installation d’une solution (W/L)amp + Jaxer: Part 3 (Installation de MySQL)


12 déc

Bon, passons ensuite au serveur MySQL

Windows

  1. Commençons par récupérer MySQL sur le site officiel. J’ai pris l’édition communauté en version 5.1.30, le package essentials. (Vous pouvez aussi récupérer les GUI Tools, nous les utiliserons plus tard)
  2. Lors de l’installation, j’ai laissé en Typical et la configuration directe
  3. Dans la configuration je met habituellement les infos suivantes:
    1. « Detailed Configuration »
    2. Server Type: « Developer Machine »
    3. Database usage: « Multifunctional »
    4. La position des fichiers de db, je choisis souvent une partition externe pour pourvoir les garder en cas de formatage et/ou de switch windows/linux
    5. Le nombre de connections: je choisis « OLAP », voire je baisse a 15 ou 10 selon si c’est une petite configuration ou pas…
    6. Networking Option, je laisse par défaut
    7. Pour l’encoding, je choisis « latin1″
    8. Pour le service, je vous conseille de le laisser mais si vous ne préférez pas qu’il soit lancé automatiquement, n’oubliez pas de le lancer plus tard…
    9. Pour le mdp root, choisissez ce que vous voulez (sans le « enable root access from remote machines ») et je vous déconseille l’anonymous account
    10. Depuis le même site, téléchargez et installez le package MySQL Gui Tools (qui permettra de configurer MySQL)

Linux

Même chose que pour apache, un simple

sudo apt-get install mysql-server mysql-admin

depuis un terminal suffit à installer la version des dépots (5.0.67) et les outils de gestions de MySQL…

Lors de l’installation on vous demandera de choisir un mdp admin, si vous l’oubliez vous pouvez le réinitialiser plus tard en faisant:

sudo dpkg-reconfigure mysql-server-5.0

Même chose que pour apache:

sudo /etc/init.d/mysql [start|stop|restart|reload]

Pour plus d’infos sur MySQL Server: http://doc.ubuntu-fr.org/mysql

Voila une bonne chose de faite, continuons avec PHP

Installation d’une solution (W/L)amp + Jaxer: Part 2 (Installation d’Apache)


11 déc

Bien, maintenant la pratique, à partir de maintenant, je vais splitter mes articles en deux, une partie Windows et une partie Ubuntu.

Windows

  1. Commençons par récupérer Apache, pour ce faire, rendons nous sur le site officiel et récupérons la dernière stable (la 2.2.10 à l’heure où j’écris ces lignes). J’ai choisi la version sans le mod SSL car je n’en ai pas l’utilité dans le serveur que je veux créer…
  2. Installez le avec les options par défaut.
  3. Lors de l’installation, Apache demandera le nom de domaine, le nom du serveur et l’adresse mail de l’administrateur du serveur, je remplis habituellement avec des données bidons (on s’en fout un peu, c’est mon serveur de développement, pas un serveur de prod)
  4. L’installateur demandera aussi sur quel port installer Apache, laissez le port 80 si il n’y pas d’autre serveur HTTP qui tourne (genre Zope ou IIS)
  5. Une fois Apache installé, rendez vous sur http://localhost/. Si vous voyez un message « It Works », félicitations, Apache marche au poil. Sinon, ben il y’a toujours le
    format c:

    dans la ligne de commande. (Pour les neuneux gens plus sérieux, ceci est de l’humour, essayez plutôt les commentaires…)

Pour info, vous avez une nouvelle icône dans votre barre de notification, elle vous permet de redémarrer/arrêter/lancer Apache. Les fichiers de config sont dans votre dossier d’installation, répertoire « conf/ »

Linux

  1. On va faire simple:
    $ sudo apt-get install apache

    installera la version d’Apache qui se trouve dans les dépots (version 2.2.9-7)

  2. Lancez votre browser et allez sur http://localhost/. Si vous voyez un beau message « It Works! » c’est bon, vous avez réussi… (faut avouer que c’était pas complexe)

Les fichiers de config sont dans « /etc/apache2″ et la doc est disponible à http://localhost/manual/

Pour contrôler apache (lancer, arrêter, redémarrer, recharger la configuration), dans un terminal:

$ sudo /etc/ini.d/apache2 [start|stop|restart|reload]

Bien, passons ensuite à MySQL.

Installation d’une solution (W/L)amp + Jaxer: Part 1 (Arborescence)


11 déc

Etablissons les bases de tout serveur, l’arborescence. Je veux créer ce qu’on appelle des virtual hosts, un virtua-quoi??

Vitual Host

Bien vous connaissez certainement http://www.google.com et http://mail.google.com, et bien les virtual hosts permettent de d’avoir deux sites différents sur le même domaine (si vous ne connaissez pas vos bases d’adressage, wikipédia est aussi votre ami). En pratique, pourquoi ai-je besoin de ça?

Simplement parce que je suis un maniaque du rangement (virtuel seulement ^^) et j’aime bien séparer tous mes sites, je vais donc préparer quelques dossiers pour mes différents sites.

Sur mon portable (sous windows, je rappelle):

Je rassemble tout sur une partition dédiée (par exemple d:) dans laquelle j’ai créé un dossier server/.

Je crée les dossiers suivants:

  • « logs/ » qui contiendra les logs d’Apache.
  • « root/ » qui contiendra les différents sites.
    • « www/ » qui contiendra le site par défaut (quand on arrive sur mon portable, via un mauvais virtual host).
    • « mysql/ » qui contiendra un site permettant la gestion de MySQL (pour les curieux, c’est PHPMyAdmin).
    • « blog/ » qui contient ma version de travail de ce même blog.
  • « sessions/ » qui contiendra les sessions d’utilisateurs de PHP

Voila pour ma machine de Dev, passons à ma mon serveur de test.

Mon serveur (sous Ubuntu):

Bon, ici rien de bien complexe, même chose que sous windows, j’utilise une partition dédiée accessible à l’adresse /media/server/ et j’y crée les mêmes dossiers…

Passons enfin aux choses sérieuses, l’installation du serveur Web

Installation d’une solution (W/L)amp + Jaxer: Part 0 (Introduction)


11 déc

Ceci est la première partie d’une série sur la mise en place d’une solution ApachePHPMySQL (et accessoirement Jaxer) sous Windows XP/Vista (32Bits) et Ubuntu (8.10 Intrepid Ibex dans ce tuto). Avec comme cas pratique la création de mon serveur de test (sous Linux, et accessoirement géré à distance) ainsi que celui de développement sur mon portable qui tourne sous Vista Ultimate en 32Bits.

Introduction

Ici point encore de blabla technique mais seulement un overview des différents éléments.

Apache

Tout d’abord, commençons par la base du système. Apache est un serveur HTTP open-source pour Windows et Unix créé par la « Apache Software Foundation« . Ce projet fournit un serveur sécurisé, efficace, extensible et répondant aux standards mis en place sur le web. Apache est le serveur HTTP le plus populaire depuis 1996. La version utilisée dans ce tuto est la version 2.2.10 pour Windows et 2.2.X pour Ubuntu.

Vous pouvez le télécharger sur la page du projet

PHP

Continuons ensuite par PHP (un accronyme récursif pour Hypertext PreProcessor). PHP est un langage dit « coté serveur », il est éxécuté avant l’envoi de la page au client. La communauté PHP est très productive et à développé bon nombre de bibliothèques pour ajouter de nouvelles fonctionnalités.

On peux le trouver sur sa page officielle

MySQL

Passons ensuite à MySQL, un des système de gestion de base de données les plus répandu sur le web.

On peut télécharger la version communautaire sur son site

Jaxer

Terminons enfin par Jaxer, un module pour apache édité par la société Aptana Inc qui permet de programmer en Javascript du coté serveur en ajoutant beaucoup des fonctionnalités d’un langage server-side telles que les connections aux bases de données, etc, etc…

Il est téléchargeable sur le site de l’éditeur

Bien, maintenant que nous en savons un peu plus sur les systèmes que nous allons utiliser, entrons dans le vif du sujet avec la création de l’arborescence

Serendipity

La vision d'un Geek sur le monde


Bear