JavaScript Function doc.Support LQDN banner

Posts Tagged ‘Tool


CasperJS is an open source navigation scripting & testing utility based on PhantomJS, the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks such as:

  • Defining & ordering navigation steps
  • Filling & submitting forms
  • Clicking links
  • Capturing screenshots of a page (or an area)
  • Making assertions on remote DOM
  • Logging events
  • Downloading base64 encoded resources, even binary ones
  • Writing functional test suites, saving results as JUnit XML

In the following example, we’ll query google for two terms consecutively, “capserjs” and “phantomjs”, aggregate the result links in a standard Array and output the result to the console.

Fire up your favorite editor and save the javascript code below in a googlelinks.js file:

In the following example, we’ll query google for two terms consecutively, “capserjs” and “phantomjs”, aggregate the result links in a standard Array and output the result to the console.

Fire up your favorite editor and save the javascript code below in a googlelinks.js file :

 

var links = [];
var casper = new phantom.Casper();
 
function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href')
    });
}
 
casper.start('http://google.fr/', function(self) {
    // search for 'casperjs' from google form
    self.fill('form[name=f]', { q: 'casperjs' }, true);
});
 
casper.then(function(self) {
    // aggregate results for the 'casperjs' search
    links = self.evaluate(getLinks);
    // now search for 'phantomjs' by fillin the form again
    self.fill('form[name=f]', { q: 'phantomjs' }, true);
});
 
casper.then(function(self) {
    // aggregate results for the 'phantomjs' search
    links = links.concat(self.evaluate(getLinks));
});
 
casper.run(function(self) {
    // echo results in some pretty fashion
    self.echo(links.length + ' links found:');
    self.echo(' - ' + links.join('\n - ')).exit();
});

@floriancargoet (whom i meet at @ParisJS) come with a nice idea : automating some elements screenshot in a WebApps/WebPages powered with #PhantomJS  (headless WebKit with JavaScript API). He’s idea is to generate multilingual documentation for a complexe application (Ext JS / Sencha).

 

In his example, the use of Ext.js give some constrain finding the element offset in the page…

 

/*
 * page.evaluate() is sandboxed
 * so that 'component' is not defined.
 *
 * It should be possible to pass variables in phantomjs 1.5
 * but for now, workaround!
 */
eval('function workaround(){ window.componentSelector = "' + component.selector + '";}')
page.evaluate(workaround);
 
var rect = page.evaluate(function(){
	// find the component
	var comp = Ext.ComponentQuery.query(window.componentSelector)[0];
	// get its bounding box
	var box = comp.el.getBox();
	// box is {x, y, width, height}
	// we want {top, left, width, height}
	box.top  = box.y;
	box.left = box.x;
	return box;
});
page.clipRect = rect;
page.render(component.output);

But with jQuery it could be as simple as this…

 

page.clipRect = $('ul#menu').offset();
page.render(component.output);

 

See the blog post for more infos

Shared by molokoloco

This is now… “L’algorithme de Melty va chercher les sujets qui intéressent le plus les jeunes en temps réel sur Internet en allant récupérer des données un peu partout, sur le site lui-même et sur différents classements. Les journalistes ont alors peu de temps pour écrire du contenu sur ces sujets (…)”

Connaissez-vous Melty.fr ? Vous devriez ! Ce site d’infos dédié aux 15-30 ans créé en 2008 fait 4,7 millions de visites OJD, 10,6 millions de pages vues (+114% par rapport à l’an passé), devrait être rentable cette année avec plus d’un million [...]

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.

Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox. Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

 

bootstrap-twitter

SPDY in Google Chrome

 

We’re not entirely sure of the time line here, but it looks like Google has now rolled out the SPDY HTTP replacement to its full bevy of Web services, including Gmail, Docs, and YouTube. If you’re currently using Google’s Chrome browser you’re probably already using SPDY.

We originally reported on SPDY way back in November 2009, when Google introduced it as yet another experiment in making the Web faster, like Go, Native Client and speculative pre-connections. Over the last 18 months, though, SPDY support has found its way into the stable build of Chrome.

SPDY is basically a [...]

[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]

 

J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.

My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.

Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.

Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.

Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

 

My Book ReadR V1.12

 

Au menu de cette V1.12 :

  • Mise en page simple, claire et typographique, compatible HTML5
  • Création d’un sommaire automatique, à partir des balises de titres (Ex. <H4>) du texte
  • Le texte est redimensionnale en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)
  • Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
    • Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
    • Assouplissement du défillement par défaut de la molette, comportement progressif suivant la vitesse
    • Le défilement des chapitres est indiqué dans le sommaire, fixe à l’écran
    • Vignettes dynamiques indiquant le nombre “d’écrans” de la page (Nombre variant suivant l’affichage) et la position verticale actuelle
    • Le fond de page est cliquable et peut glisser de haut en bas
    • Flèches Haut/Bas pour défiler de page en page : Flèches Droite/Gauche pour défiler doucement
    • Fonction de lecture automatique (La touche “Entrée” active un défilement vertical continu réglable)
  • Commentaires dynamiques
    • Chaque paragraphe accueil un mini-forum Disqus. API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
    • Possiblité de commenter le texte en utilisant les petites bulles sur la gauche
    • Sélection du texte pour annoter, copier ou éditer
  • Edition WYSIWYG et HTML du texte, avec téléchargement d’une sauvegarde possible
  • Création de notes à partir d’extraits de texte et sauvegarde au format .txt
  • Défaut : Testé uniquement sous Firefox 6 et Chrome 14… (mais avec un code normalement générique !)

 

Utilisation du clavier
  • Espace” ou “Entrée” : Lecture automatique
    • Touches 1,2,3,…,9 pour régler la vitesse (5, valeur par défaut)
  • Flèches “Haut” et “Bas” : Défilement de la page
    • Flèches “Gauche” et “Droite” : Défilement doux
  • +” et “-ou “Ctrl” + “Molette de la souris : Ajustement de la taille du texte
  • … et “F11” pour le plein écran !

 

Exemple de code, créé pour l’application…

 

 

My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page

This start from the idea to design a page specially engineered to read a long book on the web…

RESSOURCES :

 

[Appel] Ce projet manque de contributeurs sur GitHub !!!

Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…

Cool, c’est enfin arrivé. Un bon départ pour des animations full  JS/HTML/CSS et Canvas !
(Après les solutions propriétaires Sencha Animator ou le futur Adobe Edge)

Timeline.js : “A compact JavaScript animation library with a GUI timeline for fast editing”

 

anim(sprite).to({x:100}, 1, Timeline.Easing.Quadratic.EaseIn).to(5, {x:0}, 2);

Shared by molokoloco

 

Quelqu’un pour faire un plugin Firefox ? ^^

Cf. TermKit : une console graphique fait le buzz

Et http://blog.easytech.com.ar/2011/05/21/playing-with-termkit-with-chrome/

Someone asked for AVS instead of TermKit in the comments… best I could do was JS1K with a PDF surprise:

Edit: I’m just having way too much fun with this.

 


 


Also available on Vimeo.

…. écrite en Node.js et jQuery, elle s’appuie sur le moteur de rendu WebKit.

TermKit est le projet open source d’une console de nouvelle génération qui fait le buzz et séduit déjà de nombreux développeurs et administrateurs système malgré son stade très précoce de développement.

Encore en « early-alpha », TermKit affiche des fonctionnalités impressionnantes qui rendent plus agréable l’utilisation du Terminal, comme l’autocomplétion visuelle, des icônes pour les statuts des commandes et des grilles visuelles pour parcourir les répertoires.

En dehors de son design de [...]

3 pages