simplecart.js, 20Ko d’ecommerce plus tard

Articles, Code Source, Code Source EN, Ecommerce, Ecommerce EN, JavaScript, JavaScript EN
Lire Plus

Simplecart.js fait partie de ces petits plus qui rendent la vie de tous un peu plus facile, et rapide, et pas chère. Pourquoi, lorsqu’on à que quelques produits à vendre, mettre en branle la machine de guerre Prestashop (et consorts, cela va sans dire) ?

Lorsque l’on veut se mettre au ecommerce, il y a toujours une phase de dimensionnement des besoins. En général, les solutions open-sources à base de LAMP sont là pour répondre à quasiment tous ces besoins, étant plutôt souples, supportées par des communautés (plus ou moins) actives, et totalement gratuites. Cette gratuité justement, permet de concentrer l’effort d’investissement sur d’autres parties d’un projet e-commerce.

Très bien, mais admettons que :

  1. vous ayez 5 produits à vendre, et pas plus…
  2. vous ayez besoin d’une solution rapidement, très rapidement, dans la journée peut etre, qui vous permette de vendre
  3. (si les mentions ci-dessus sont remplies) vous n’ayez pas envie de faire appel à une ressource externe pour travailler sur cette mise en production, ou que vous n’en avez pas les moyens
  4. vous souhaitez passer par un paiement sécurisé, certes, mais n’avez pas le temps ou les moyens d’offrir à vos clients une solution bancaire sécurisée complète

Si l’une, ou toutes les mentions ci-dessus sont remplies, alors simplecart.js est le bout de code qu’il vous faut.

En seulement 20 Ko et avec un compte Paypal ou GoogleCheckOut, vous pouvez disposer d’un rayonnage virtuel sans fioritures, sans moteur de recherche (normal quand on n’a que quelques produits en magasin), et ou l’acte d’achat est réduit à sa plus simple expression : lecture de la description et du prix, ajout au panier, terminer la commande.

POINT BARRE

Avec quelques connaissances en html+Css, vous serez capable de monter un petite boutique virtuelle juste efficace. Ni trop sexy, ni trop riche, juste efficace.

Techniquement, pour faire tourner la (petite) bete, il faudra respecter un marquage sémantique pour chaque produit ressemblant à ceci:

<div>  <h2>Awesome T-Shirt</h2>  <span>$35.95</span>  <input value="1" type="text">  <a href="javascript:;">Add to Cart</a></div>

Et après ce n’est plus qu’une question de styles, et d’une pincée de javascript.

Pas de base de données, pas de php, juste un fichier javascript de 20Ko.

Du coup, vous pouvez vous concentrer sur le “look and feel” de votre rayonnage,  et vous mettre à vendre à la vitesse de la lumière.

Disponible en téléchargement sur github, vous trouverez un wiki détaillé, un bug tracking, bref, tout ce que github offre comme possibilités de suivi de projet ici : http://github.com/thewojogroup/simplecart-js

Et le site officiel de ce projet ( sous license Creative Commons )  est accessible à cette adresse : http://simplecartjs.com/

Un apercu des outils de developpement collaboratif en ligne

Articles, Code Source, Code Source EN, Programmation, Programmation EN
Lire Plus

L’image du développeur, qu’il soit web pas, est comparable à celle d’un troll des montagnes: solitaire et un peu bourru

Ne soit pas triste petit développeur, il y a des gens pour t’aider sur le net !

Et, pour que ce personnage de la mythologie du numérique et de l’ère du réseau mondial se sente moins seul, travaille mieux, et partage plus facilement ses codes sources, buggés ou non, avec d’autres individus de son espèce, il existe un certain nombre d’outils dédiés. On les appelle les outils de “collaborations en ligne”, et plus particulièrement les outils dédiés au “cloud coding”

Amenez votre pelle et votre seau: vous entrez dans le bac à sable!

Le web est un vaste champ de bataille, où chacun utilise les armes qu’il peut pour triompher, et tout développeur sait que chaque nouvelle application, chaque nouveau site, est un combat qu’il faut mener vite ET bien. L’un des aspects les plus géniaux du web contemporain, c’est sa facette communautaire, hautement communicante, et quasi-instantanée. Il n’est donc aujourd’hui plus nécessaire de poster sur des dizaines de forums, de lire des centaines de pages web pour trouver la solution à votre problème.

Le web regorge d’outils et de sites dédiés à l’entraide entre experts et débutants, avec en prime la possibilité pour tous de poster un code source “fonctionnel”. Ces bac-a-sable (“sandboxes”) sont autant de terrains de jeux où chacun pourra apporter une réponse à vos questions.

http://stackoverflow.com/ : 100% programmation, tous langages confondus, avec un système de notation pour les questions et les éponses.

 

Stackoverflow a ceci de génial que vous y trouverez toujours une réponse à vos question.

Tout en s’articulant toujours autours de la programmation, le site propose un intéressant système de notation des réponses apportées par les utilisateurs. Un excellent moyen de garantir la qualité des réponses apportées, mais aussi de faire avancer tous les utilisateurs en obligeant (naturellement) un juge à justifier de sa notation.

 

Chaque question doit être taguée par celui qui la pose, permettant ainsi au site de répertorier avec précision, par thématique, tous les sujets abordés, pour permettre des recherches précises.

Je regrette toutefois que stackoverflow ne dispose pas justement d’un moteur de rendu intégré pour, par exemple, le javascript.

http://www.stackoverflow.com

http://jsbin.com/, la sandbox javascript avec 8 librairies à intégration automatisée.

A l’initiative de Remy Sharp (@REM), jsbin.com est une sandbox dédiée à javascript. Le principe est simple, et très efficace : vous proposer un moyen de partager votre code javascript, avec le html qui va bien, et la librairie js qui vous convient. Vous avez le choix d’importer jQuery, forcément, Prototype, script.aculo.us, YUI, Mootools, Dojo et Ext Core, tous dans différentes révisions, pour coller au mieux à celle que vous utiliser en environnement de dev/test/prod.

Vous pouvez sauvegarder votre code, pour ensuite le partager et ainsi permettre à d’autres d’y jeter un œil, jouer avec, le corriger.

Associé par exemple à Stackoverflow, vous avez ainsi droit au combo gagnant pour un débuggage efficace et complet en javascript.

Bespin, “code in the cloud” en html 5

Bespin est une planète de la galaxie fictive de La Guerre des étoiles. Oui mais voila, ici, c’est autre chose, une toute autre chose. Bespin est en fait, dans le cadre des expérimentations des Mozilla Labs, un système d’édition collaborative de code open source.

Ce qu’il y a d’intéressant dans ce cas, c’est son emploi massif des capacités et techniques les plus modernes des ressources web : javascript, html 5 et canvas. Ceci permettant de rendre Bespin rapide, avec un comportement desktop, tout en restant full-front.

L’autre partie très intéressante de Bespin, c’est sans doute sa nature open source, le rendant tweakable et customisable dans tous les sens, vous offrant ainsi une base solide pour des applications maison encore plus poussées, et vouées à un excellent avenir du fait de cette base stable que vous offre Mozilla Labs.

https://bespin.mozillalabs.com/

http://jsfiddle.net/, riche en javascript, avec une belle interface

Dans la même veine que jsbin.com, jsfiddle.net vous propose une interface plus sexy, avec un choix de frameworks js plus important, et des options sexy (comme la possibilité d’importer des css hébergées à distance au sein de votre document de travail).

Si vous connaissez Mooshell (http://mootools.net/shell/), vous ne serez pas perdu, jsfiddle étant son petit frère, en plus complet et moins dédié.

http://pastebin.com/ et http://pastie.org/, même combat

Ces deux sites offrent la possibilité de coller du code, de choisir le langage dont il s’agit (pour une coloration syntaxique adéquate), et de partager le résultat. La grande différence entre ces deux sites se trouve essentiellement dans le fait que l’un propose de rééditer/corriger le code posté, alors que l’autre propose de publier une correction/amélioration à part du code source original.

http://www.pastebin.com

http://www.pastie.org

Amyeditor.com, redoutable et très riche, avec quelques améliorations à prévoir

Quel projet surprenant qu’amyeditor.com! Adoptant une interface résolument desktop, il propose littéralement la création de nouveaux projets, que l’on peut rendre publiques ou pas.

Avec des options extrêmement intéressantes, telles que la console de débogage intégrée (pour ceux qui n’utiliseraient pas Firebug par exemple), la possibilité d’inviter vos contact en leur attribuant au passage leur niveau d’administration au projet (lecture/écriture/écriture et sauvegarde), une interface pemettant la navigation au sein d’un projet proche d’un explorateur de fichiers desktop, l’accès à une liste de snippets par langage ,

Seul hic, une certaine lenteur lorsque le code entré dans l’editeur devient trop imposant, et de petits bugs graphiques qui vous rappelleront que vous n’êtes pas dans une appli desktop.

http://amyeditor.com/

http://heroku.com/, “ruby baby” (The drifters)

Heroku est sans doute la plateforme collaborative la plus sélective, mais également la plus professionnelle, de part son offre payante, ses capacités techniques upgradables, une sélection de plugins à interfacer sur votre application pour en étendre les capacités ou le suivi… Mais, c’est du Ruby, que du Ruby, et, pour que vous souhaitiez travailler en équipe sur heroku.com, et disposer de plus d’espace disque, d’un dédié, de Dynos supplémentaires, il faudra payer.

jQuery ajax autocomplete : amélioration en libre service

Code Source, Code Source EN, JavaScript, JavaScript EN
Lire Plus

Je bosse quasiment à 100% avec jQuery, pour, entre autre, la richesse des plugins existants, richesse évitant de réinventer la roue sans cesse.

Et l’un de mes plugins clef c’est le ajax autocomplete de chez DEVBRIDGE, accessible sur leur site.

Mais ce plugin, à mon gout, avait 1 défaut : lorsque la requête ajax est lancée, aucun signal visuel n’est émis pour signaler à l’utilisateur que “ca mouline”.

Grave erreur/handicap en matière d’expérience utilisateur.

J’ai donc modifié un peu le plugin, en lui ajoutant une option : loaderImg.

Cette option correspond simplement à l’url de votre gif animé (par exemple), et ce dernier sera injecté en background dans votre champ, pour ensuite disparaitre une fois la requête finie.

Voici donc un exemple d’initialisation du plugin avec l’option loaderImg:

var options, a;
jQuery(function(){
  options = {
      serviceUrl:'service/autocomplete.ashx',
      loaderImg:'/images/ajax-loader.gif'
  };
  a = $('#query').autocomplete(options);
});

Si aucune valeur n’est spécifiée pour cette option,  le plugin cherchera à charger “loader.gif”.

Je vous invite à consulter la documentation sur le site de devbridge pour consulter le détail des options disponibles.

J’améliorerai peut être la chose avec plus d’options (par exemple, pour l’instant, l’image est injectée en fond du champ input concerné en haut a droite, mais on pourrait par exemple  proposer une option pour justement modifier l’endroit où est injecté ce ‘signal’ visuel).

Voici donc une archive zip contenant le code source, sa version compressée, une feuille de style, et jQuery 1.3.2.

J’ai pompeusement flaggé ce fichier 1.1.3 , parce qu’a mon gout, évolution mineure, mais évolution quand même.

jquery.autocomplete-1.1.3

Testé sous IE6/7/FF 3.6.2