Tool – Work Wild Web @ b2bWeb.fr

Posts Tagged ‘Tool’

CasperJS, a navigation scripting & testing utility for PhantomJS

In Molokoloco,Shared Items | 7 Jan 2012

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();
});

Source : http://n1k0.github.com/casperjs/

Tags : Framework, JavaScript, Tool, UI, WebApp

Automated WebApps UI elements screenshot (ex. : documentation) with #PhantomJS

In Molokoloco,Shared Items | 7 Jan 2012

@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

Source : http://fcargoet.evolix.net/2012/01/use-phantomjs-to-take-screenshots-of-you-webapp-for-you/

Tags : Framework, JavaScript, Tool, UI, WebApp

Twitter Bootstrap Toolkit for Kickstart Web Development

In Shared Items | 27 Sep 2011

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.

Source : http://www.webappers.com/2011/09/15/twitter-bootstrap-toolkit-for-kickstart-web-development/

Tags : Code, Framework, HTML5, Open Source, Tool

Google Chrome now uses SPDY HTTP replacement, halves page load time

In Shared Items | 6 Sep 2011

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 [...]

Source : http://downloadsquad.switched.com/2011/04/11/google-chrome-now-uses-spdy-http-replacement-halves-page-load-t/

Tags : Browser, Google, Hacker, Network, Tool

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

In Coding Projects,Molokoloco | 29 Aug 2011 | Laisser un commentaire

[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…)

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…

Demo : http://www.b2bweb.fr/bonus/piratons-la-democratie.html
Infos : http://www.b2bweb.fr/molokoloco/my-book-readr-v1-12-html5-jquery-polished-page-as-a-book-reader/
Main Script : https://github.com/molokoloco/My-Book-ReadR/blob/master/js/jquery.readr.js
GIT Sources : https://github.com/molokoloco/My-Book-ReadR/

RESSOURCES :

BoilerPlate HTML5 starter pack : https://github.com/paulirish/html5-boilerplate
TinyMCE, JS WYSIWYG HTML editor (jQuery version) : http://tinymce.moxiecode.com
jQuery Waypoints v1.1 : https://github.com/imakewebthings/jquery-waypoints/
jQuery Mousewheel : http://adomas.org/javascript-mouse-wheel/
Copy to clipboard with ZeroClipboard.swf : http://www.steamdev.com/zclip/
DISCUS comment system API : http://docs.disqus.com/developers/universal/
Google Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/
Use Google Fonts API : http://www.google.com/webfonts/v2

[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…

Tags : Code, HTML5, jQuery, Media, Molokoloco, Multimedia, Open Source, Tool, WebApp

Animation HTML (CSS/Canvas) avec timeline.js

In Molokoloco | 25 Jun 2011 | Laisser un commentaire

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);

http://marcinignac.com/blog/timeline-js/ (Blog)
https://github.com/vorg/timeline.js (Sources / New fork)

Tags : Animation, Code, CSS, Editor, HTML5, JavaScript, Tool

I Put a Spell on You

In Shared Items | 18 Jun 2011

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.

Source : http://acko.net/blog/i-put-a-spell-on-you

Tags : Editor, JavaScript, jQuery, Software, Tool

TermKit : une console graphique fait le buzz

In Shared Items | 7 Jun 2011

…. é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 [...]

Source : http://www.developpez.com/actu/32417/TermKit-une-console-graphique-fait-le-buzz-ecrite-en-Node-js-et-jQuery-elle-s-appuie-sur-le-moteur-de-rendu-WebKit/

Tags : Editor, JavaScript, jQuery, Software, Tool

jQuery default plugin

In Coding Projects,Molokoloco | 25 May 2011 | 1 commentaire !

Here a workable / Testable jQuery Default Plugin Boilerplate, taken from the new doc…

I have put it in a JSfiddle so it’s easy to modify…

Sources code examples (jQuery Plugins Patterns Boilerplates)… :

Tags : Editor, Framework, JavaScript, jQuery, Plugin, Tool

3 pages

Posts Tagged ‘Tool’

CasperJS, a navigation scripting & testing utility for PhantomJS

Automated WebApps UI elements screenshot (ex. : documentation) with #PhantomJS

Twitter Bootstrap Toolkit for Kickstart Web Development

Google Chrome now uses SPDY HTTP replacement, halves page load time

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

Au menu de cette V1.12 :

Utilisation du clavier

RESSOURCES :

Animation HTML (CSS/Canvas) avec timeline.js

I Put a Spell on You

TermKit : une console graphique fait le buzz

jQuery default plugin

My recents posts

Home made artworks

Tags

Code tooltips updates

Github sources activities

Molokoloco's JS fiddles

Recent Comments