World Gone WebJavascript » World Gone Web

Javascript Completion in Textmate

shalfon — Sat, 17 Apr 2010 22:51:03 +0000

Thomas Aylott, the author of the JavaScript Bundle for Textmate, announced that he added the completion feature to his package. This is great news. as far as I know, this is the first completion made available for Textmate and I understand it is easily extended so we could see several other languages being supported soon. If that’s the case, this will make Textmate a real contender not only to text editors but full featured IDE. This is exiting.

To install the bundle, just head over to Thomas Aylott’s GitHub page and download the Javascript bundle (not the Javascript-tools one) and extract it. Rename the generated folder javascript.bundle and double click it. Once the bundle is installed, enter the beginning of a javascript line of code and press option+escape to show the completion.

At first, I was getting the following error message in Textmate:

1	/ruby/1.8/rubygems/custom_require.rb:27:in `gem_original_require': no such file to load -- json (MissingSourceFile)

It was fixed by running the following command

1	sudo gem install json

Linking to Twitter and Facebook from a website

shalfon — Mon, 08 Mar 2010 22:07:48 +0000

This week I’ve worked on a social lightbox for Teeorama allowing our visitors to tweet or write on their Facebook walls from our tee-shirt shop.The lightbox itself is built using ColorBox, a powerful and customizable lightbox library built on JQuery (MIT License). The Twitter tool is fairly easy to setup, I used bit.ly to generate the shortened URL of the current page and placed it, along with a default content, in the text box. When the user clicks on submit, he or she is redirected to twitter. The update box contains what was typed in the teeorama box and one click on the update button is enough to validate the tweet.The follow button is even simpler, it is nothing but a link to teeorama’s twitter account.Facebook is both more powerful (you can publish to your wall without leaving the teeorama page) and a bit trickier to setup.First, you need to head over to developers.facebook.com/setup.php to register your site as a Connect enabled website. Upload the xd_receiver.htm file to your server and validate. You now have access to your Facebook Connect Tools, API documentation and sandbox as well as to a gallery of widgets or code samples you can use. I chose to use the Comment Box.

Jash – Javascript Shell

shalfon — Mon, 17 Dec 2007 22:23:02 +0000

Firefox est depuis longtemps le navigateur par defaut du web developeur, et pour cause, il s’accompagne de deux outils incontournables : firebug et la web developper toolbar.

Cependant, de plus en plus d’outils permettent, sinon de developper completement sous IE, de debugguer ses scripts et ses styles plus facilement.

Jash, le javascript shell est l’un de cela. Jash, en tant que shell, offre avant tout une console Javascript capable d’interagir avec les informations (DOM ou script) de la page. Jash permet aussi une inspection des elements HTML du DOM.

Le code source de jash peut etre telecharge et inclut dans une page web mais l’utilisation de l’outil ne necessite aucune installation, il suffit de creer un bookmarklet pour ensuite ouvrir la console sur la page.

Lancer Skype depuis un lien html

shalfon — Thu, 25 Jan 2007 23:24:08 +0000

J’ai décidé de mettre mon pseudo Skype sur mon site perso et je souhaitais en faire un lien direct permettant de lancer Skype et de m’appeler… une rapide recherche sur Internet et je trouvais un script Javascript (mis à disposition des développeurs par Skype) permettant de lancer un appel, de visualiser un profil ou d’ajouter un contact dans Skype. L’utilisation de ce bout de code est documentée sur le site de Skype.

Voici la procédure à suive :

Ajouter une référence vers le script dans la page.

1
2
3

puis placer des liens de la forme suivante :

1	<a href="skype:echo123?call" onclick="return skypeCheck();">

Si le script détecte que le visiteur n’a pas installé Skype sur sa machine, il le redirigera vers la page de téléchargement de Skype.

Les actions possible sont les suivantes :

appel : “skype:user1?call”
ajouter un contact : “skype:user1?add”
chat : “skype:user1?chat”
visionner un profil : “skype:user1?userinfo”

getElementsByClass

shalfon — Thu, 25 Jan 2007 23:11:04 +0000

Lors du développement de mon site perso, j’ai eu besoin d’une fonction javascript qui retourne une liste d’éléments dont le nom de classe est passé en paramètre. J’ai utilisé le code ci-dessous :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ce bout de code est l’oeuvre de Chris Ravenscroft et vous trouverez sur son blog – Clic!Dev, ‘Tate and many more projects - une explication détaillée de son fonctionnement (notemment pour ce qui concerne l’usage des expressions régulières en javascript).