Posts Tagged ‘WebApp


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

Merci à @bobylito qui vient de mettre les vidéos (du live) en ligne sur Dailymotion.

On trouve entre autre ma présentation sur readr.js . Mais aussi plein de super autres sujets (http://www.dailymotion.com/ParisJS #ParisJS)

Ça fait drôle de se voir en vidéo, et ça fait drôle de parler devant beaucoup de gens avec plein de lumière dans les yeux :)

 

ReadR.JS by Julien Guézennec (@molokoloco) – ParisJS 13

“My Book ReadR” La présentation que j’ai faite hier soir à la conférence #ParisJS 13 (parisjs.org).

 

jQuery.ReadR.JS

Shared by molokoloco

This come from an email send by the Diaspora* Crew

 

Dear Friend of Diaspora*

 

Thanks again for your interest in joining the Diaspora* community, and for your patience. We’re working on getting your invite out to you as quickly as possible, and we’re still committed to getting it to you by the end of October. We’re pushing out hundreds of thousands of invitations as quickly as we can — thanks for bearing with us.

As promised in our previous message, we want to tell you a little more about why we believe so strongly in Diaspora*’s mission: to build a new and better social web, one that’s 100% owned and controlled by you and other Diasporans.

Diaspora*’s distributed design is a huge part of it. Like the Internet itself, Diaspora* isn’t housed in any one place, and it’s not controlled by any one entity (including us). We’ve created software that lets you set up and run your own social network on your own “pod” (or server) and connect your network to the larger Diaspora* ecosystem. You can have a pod all to yourself, or one for just you and your friends, or your family, giving you complete ownership and control over your personal social information (including your identity, your posts, and your photos) and how it’s all stored and shared. Or you can simply join one of more than 20 open pods.[1]

 

This means you can do what you want. You can express yourself candidly, and be your authentic self. You can go by whatever name you like on Diaspora*. Pseudonyms are fine, and this both protects you (if you want to say something your boss or your parents disagree with) and opens the door to real connection. Here’s how one blogger and Diasporan put it:

Maybe his kind words mean so much to me because T is someone I’ve met through a [pseudo]nym — he got to know the real me’s ideals and beliefs, and liked that person… A compliment from [him] is based on my own sincerity, and thus, has a certain purity. It is untainted by perceptions of how I look, what I’m wearing, and so on. Given that, I value it especially highly.[2]

This kind of authentic connection brings back the social freedom that made the Internet awesome in the first place. And this is just the beginning.

You can make great connections with anyone in the Diaspora* ecosystem, not just the people on your own pod, because the pods are linked together.

You can also use Diaspora* as a home base for your outbound posts on Facebook, Twitter, and Tumblr, writing to them all from Diaspora*. In the future, you’ll be able to monitor your inbound streams from Diaspora* as well.

Yet our distributed design means no big corporation will ever control Diaspora*. Diaspora* will never sell your social life to advertisers, and you won’t have to conform to someone’s arbitrary rules or look over your shoulder before you speak.

And because your information is yours, not ours, you’ll have the ultimate power – the ability to move your profile and all your social data from one pod to another, without sacrificing your connection to the social web. Over time, this will bring an end to the indifferent, self-serving behavior that people can’t stand[3] from the walled gardens that dominate social networking today. When you can vote with your feet for the environment where you feel safest, the big guys will have to shape up, or risk losing you.

We’re still building this move-your-profile capability, as well as other key features. It’s hard work, but we’re building the future we want to see, with incredible community support.

Diaspora* is a genuine community effort. More than 160 people have contributed to our code, putting us in the top 2% of all open source projects tracked by Ohloh.[4] Hundreds more volunteers have translated Diaspora* into 13 of the world’s spoken languages so far, with another 32 translations in progress. Thousands of Diasporans have given us more than 3,000 points of feedback. (We’re listening closely, and building the features you’re asking for as fast as we can.) And of course, thousands of donors have helped pay for our development, and hundreds of thousands of people — including you — are patiently waiting for access to try it out.

Thanks again for your patience. We can’t wait to see you here, and to build a brighter future together.

Sincerely,

- Dan, Max, Ilya, Sarah, Yosem, and Peter
Wednesday, September 21st, 2011

 

[1]: JoinDiaspora.com is just one of the pods within the Diaspora* ecosystem. Here’s a directory of some of the others that are open to new users (there are even more out there too, including many that are private, not open).
[2]: Excerpts from this blog post by Garidin Winslow.
[3]: “Report: Facebook Is Most Hated Social Media Company”, Courtney Rubin, Inc. Magazine, July 20, 2011.
[4]: http://www.ohloh.net/p/diaspora/factoids/10029264

 

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

Fork me on GitHub

Blog code entry 
My feed on b2bweb.fr/coding-project/

Public Repositories
My code on GitHub/molokoloco

Personnal codingsheets
My wiki on “Molokoloco Coding Project

! New source code is now hosted on Github !

What you can find on my WIKI !

JS/php Class & Fonctions

PHP/js Class and Fonctions

Mixed LAMPX TIPS

Others Services Tips

 

And also my Virtual Admin PHP4/JS Prototype Framework, for managing CMS (2005~2008)

Julien Guézennec 2011 | molokoloco@gmail.com | http://www.b2bweb.fr …. Work definitely in progress…

 

View more presentations from Addy Osmani

 

Hey guys. I just wrapped up my talk on Tools for jQuery Application Architecture over at Web Directions in London and wanted to make sure anyone interested had access to the slides. This is the extended version, which includes about 15 slides that weren’t in the original deck, but may prove useful.

Some of the topics I cover include:

  • MVC & MVVM architecture patterns for client-side development
  • JavaScriptMVC, Backbone.js, Spine.js, Sammy.js
  • Design patterns for JavaScript applications
  • Dependency management
  • JavaScript templating
  • Cross-browser [...]

Shared by molokoloco

On me conseille ce framework pour l’embarqué, à tester…

MY.JS v0.1.1

  • Get element : <1ms (48ms pour jQuery)
  • Instantiate class : <1ms (name:John)
  • Call class method :< 1ms

Performances are mainly achieved by :

  • Dynamic inline code generation with eval. My.js is the first framework to thoroughly use this technique to achieve quasi native performances (sometimes even better when caching used)
  • A highly efficient class implementation with no wrappers. Other frameworks use wrappers either for instantiation and/or inheritance. When creating custom classes, MY.JS is way faster at instantiation and when calling a method.
  • MY.JS also provides many other optimizations such as better scope control or better timers parallelization.

Example :

/*
    <button>Hello</button>
 
*/
scope.ready(function(my, $) {
    $('button').on('click', function() {
      my('box').setText('Hello World from my.js!')
               .addClass('message')
               .setLeft(200, {duration: 300});
    });
});

Download minified version (11.1kb gzipped)
Download sources

reseau-social Si Facebook fait autorité en matière de réseaux sociaux, il n’est pas adapté à toutes les circonstances. Des entreprise et des particuliers souhaitent disposer de leur espace partagé, sans pour autant le rendre public sur le Web.
OxWall est une application web qui permet de créer son propre réseau social.

oxwall interface 500x513 Oxwall, une application web pour créer son propre réseau social

L’application est open source et développée avec PHP/MySQL, ce qui permet de l’héberger presque de partout, y compris sur les hébergement gratuits (Free.fr, …). On y retrouve toutes les fonctionnalités classiques d’un réseau social (photos, vidéos, mur, [...]

11 pages

Home made artworks

MyBookReadR | The RSS Wall | Carousel slider | Fast web start | Try it :)
My latest sources and sheets :
Github sources | Personnal wiki | jsFiddle example | WebDev bookmark

RSS Molokoloco's JS fiddles

Recent Comments