JavaScript Function doc.Support LQDN banner

Posts Tagged ‘Framework


CITATIONS

 

You say “we need a new website”, I hear “we want to improve our marketing, sales, service, support, and customer relations infrastructure”. (@thijs)

 

Le ministre de l’intérieur a d’excellents chiffres. Il fait 10 % de parts de marché a chaque JT. (@humourdedroite)

 

«All your base are belong to US» Raël (@molokoloco)

 

France 2 réduit la politique à un petit feuilleton pipole et les rubricards du Monde trouvent ça bien http://bit.ly/18Mkm0O #Chiensdegarde (@ClemSenechal)

 

J’ai fait un calcul rapide : si vous redistribuez tout l’argent qu’il y a sur Terre [...]


Lire la suite...

CITATIONS

 

Je n’ai plus de PQ, il y a encore des kiosques ouverts à cette heure-ci ? (@PetulaMoore)

 

Edward Snowden : « J’avais la capacité, sans aucun mandat, de lire toutes vos communications » http://bastamag.net/article3220.html #Prism (@Bastamag)

 

Libérés de la machine, ceux qui auront un travail créatif seront l’élite de l’humanité http://ur1.ca/f9vho Asimov, imaginant 2014 en 1964 (@framaka)

 

Posez un geste citoyen fort: débarrassez-vous de votre télé ! http://ploum.net/regagnez-votre-vie-eteignez-votre-tele/ (@ploum)

 

Interdire le partage pour ne pas [...]


Lire la suite...

CITATIONS

 

Television has brought back murder into the home – where it belongs.- Alfred Hitchcock (@MaxCandyCOM)

 

NSA is the only part of the US government that actually listens to the people. h/t @DieZauberer (@wikileaks)

 

5AM might be a good time to give up trying to fall asleep and just get up and do stuf. (@rumpl)

 

…And it’s now clear in my mind that the biggest threat to the open web / open data / an open future is Google — not Apple or anyone else. (@aral)

 

Remember, this is what Apple’s bank account looks like: $146,600,000,000.00 (@levie)

 

À l’UDI les roms. À [...]


Lire la suite...

CITATIONS

 

The Revolution introduced me to art, and in turn, art introduced me to the Revolution!” ― Albert Einstein (@MaxCandyCOM)

 

musicians have already found a solution to piracy. it’s called trip hop and it makes it impossible to find an original track anywhere. (@jesawyer)

 

Personnellement, j’aurais plus peur de me retrouver entouré de geeks portant des Google Glass que de musulmanes portant le niqab. #sécurité (@PetulaMoore)

 

If you wish to understand the Universe, think of energy, frequency and vibration – Nikola Tesla

 

L’information en continu est au journalisme ce [...]


Lire la suite...

Pas loin de 25 GuezNet en ligne, sans compter les 25 emails de l’ancienne newsletter…
Je commence aujourd’hui la numérotation, à 50 ! :)
L’actualité est très dense en ce moment… Il vous faudra du temps pour arriver au bout de ce digest ! Bonne lecture !

Malgré le soin et le temps que j’y consacre, si vous trouvez une erreur merci de me le signaler !

 

gueznet50

 

 

CITATIONS

 

J’ai eu le diplôme sans force avc mention bien jsuuis kecho mais j’vous mens pas que j’ai révisais a fond :o (@SaidElPocho)

 

Non mais allô quoi ! T’es une démocratie et t’as pas d’outil de surveillange [...]


Lire la suite...

Grande promotion pour ceux qui prennent la GuezNet à emporter cet été !
Que de bonnes lectures en perspective :)

Plus de 350 liens, et autant d’idées, voici ce qu’il ce passe en à peine 15 jours dans mon monde, lorsque j’essaye de suivre…

 

Screenshot-Top-Secret.avi-11

 

 

CITATIONS

 

Qu’on me donne 6Mo transmis par le plus honnête homme, j’y trouverai de quoi en faire un terroriste.” Cardinal #PRISM-elieu (@jerezim)

 

@searls Someone once told me “Judge the code, not the coder”. I try to live by that. (@joefiorini)

 

Un jour, les machines se soulèveront. Mais si elles ont les mêmes batteries que [...]


Lire la suite...

CITATIONS

 

The greatest fear that I have regarding the outcome for America of these disclosures is that nothing will change.” ~ Edward Snowden #PRISM (@YourAnonLive)

 

Prism – taking the Theory out of Conspiracy Theory. #Mega (@KimDotcom)

 

The internet is full of cats because dog people actually go outside.” /via @bnox (@Dries)

 

The one thing I don’t understand is why iTunes is still used for setting up phones. That’s like configuring your wifi router with Photoshop. (@thomasfuchs)

 

Et forcément, il faut que #tpb soit down quand je veux me ressourcer. (


Lire la suite...

Voici une liste non-exhaustive de ressources JavaScript pour jQuery, extraite de mon cours 2013 (“Cours/TP jQuery, Julien Guézennec, 1ère année“)

 

Twitter Boostrap (incontournable) :

Un framework JS/CSS recouvrant les composants HTML et les plugins JS parmis les plus utilisés

 

 

jQuery UI :

 

  • jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
  • + jQuery UI Bootstrap theme, the incredible styles of Twitter Bootstrap, for jQuery UI

 

Plugins “individuel” de composants d’interface :

 

  • JQuery Slideshow/Carousel Plugin. Sources.
  • Swipebox, A touchable jQuery lightbox
  • Photobox A lightweight image gallery modal window script
  • Flux Slider Transitions Gallery, hardware accelerated image transitions using CSS3
  • Roundabout for jQuery, 3D effect carousel with sprites (Div) that turn around an axe
  • Reveal.js The HTML Presentation Framework
  • Supersized Full Screen Background/Slideshow jQuery Plugin
  • Isotope (Masonry V2), an exquisite jQuery plugin for magical layouts Reveal & hide items with filtering Re–order items with sorting Dynamic, intelligent layouts
  • jQuery simple Layout Demo that manage slidable and resizable, multi-pane
  • SlickGrid is a JavaScript grid/spreadsheet component
  • typeahead.js is a fast and fully-featured autocomplete library
  • Customizable boilerplate/template of a jQuery plugin, EDIT here !
  • A part :
    • jPlayer : HTML5 Audio & Video for jQuery
    • SoundManager 2: JavaScript Sound For The Web
    • ProcessingJS : using <canvas> for a drawing surface
    • … Three.js, Raphael.js, … etc

Plugins “helpers” sur certaines fonctionnalités

 

  • jQueryColor, this plugins installs a cssHook which allows jQuery’s .css() and .animate() to animate between two colors. The jQuery.Color() function allows you to create and manipulate color objects or string that are accepted by jQuery’s
  • jQuery Css3-like Easings for jQuery animations
  • jQuery.animate Overwrites $.fn.animate to use CSS 3 animations if possible. It takes the same arguments as the original $.fn.animate and will fall back to jQuery’s JavaScript animation if a CSS animation is not possible.
  • Alternatively, for somes simples animations, there is animate.css a bunch of cool, fun, and cross-browser CSS3 animations… or jQuery CSS 3 Finalize With this plugin you can write CSS without the vendor prefixes. The plugin takes care of it and will automatically add vendor prefixes.
  • jquery.transit Super-smooth CSS transitions & transformations for jQuery
  • Spritely is a jQuery plugin for creating dynamic character and background animation (Pan, Scroll, Sprite)
  • jQuery Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element with or without infinite scrolling enabled
  • jQuery Form validation Plugin
  • jQuery Sisyphus plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters
  • jQuery Remember stuff. A simple way to set/read/destroy cookies and localstorage
  • Scrollorama, The jQuery plugin for doing cool scrolly stuff
  • jQuery and WordPress plugins for infinite scroll
  • Moment.js Parse, validate, manipulate, and display dates in JavaScript
  • Keymaster Awesome handling of keyboard events
  • jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support…
  • Hand.js is a polyfill for supporting pointer events on every browser. Pretty simple: Register pointer events (pointerdown, pointerup, pointermove, etc..). It emulate click, touchstart, etc…
  • Pinch, Zoom, Scroll, iScroll-4 !
  • Grunt : The JavaScript Task Runner (Compiler)

 

Useful JavaScript Libraries and jQuery Plugins :

http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/

 

 

Online tools… (Via http://home.b2bweb.fr/#code)

 

 

Exemple de pages et codes source intéressants, à faire (suggestion forte :)

 

 

Sites de ressources…

 

 

A connaitre !

 

 

Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^

 

Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…

 

Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^

Le principe et de générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!

 

Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.

 

Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)

 

Au fond, le plugin peut s’utiliser de toutes les manières :

  • Créer des éléments ou utiliser des collections existantes
  • Gérer les transitions, des images-clés (keyframes) et s’occuper de la compatibilité entre les navigateurs
  • Créez des animations, pleines de graphisme ou seulement automatiser l’insertion DOM
  • Gérer en masse les propriétés CSS de l’animations, ou régler finement sur la base de l’index d’élément
  • Appliquer des “effets” sur tous les éléments et les gérer dans le temps
  • Associer des données JSON (ou pas!), et se servir d’un template dynamique

(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)

 

Rien ne vaut une démo… donc :

 

 

Voici un exemple concret pour votre site :

 

$emitter1 = $('div#emitterZone1').boxFx({
	seeds             : '<div>N°{id} - {title}</div>',
	data              : [
            {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'},
            {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'}
        ],
	effect            : '',
	newAtTop          : true,
	stopAtEnd         : 'detach',
	delay             : 4000,
	maxSeeds          : 10,
	emitterRadius     : 0, 
	styles            : {},
	keyframes         : [{
		duration         : '24000ms',
		timingFunction   : 'linear',
		iterationCount   : '1',
		direction        : 'normal',
		steps            : [{
				step: '0%',
				opacity: .7,
				transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) 
			}, {
				step: '30%',
				opacity: 0
			}, {
				step: '70%',
				opacity: 0
			}, {
				step: '100%',
				opacity: .7,
				transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; }
		}]
	}]
});
 
$('a#stop').click(function() { $emitter1.trigger('stop'); });

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