Yahoo! User Interface blog (YUIBlog)

YUI 3 Astuce: Ajout de votre impressionnant propriétaire

Luc ( @ ls_n ) posté cet extrait en réponse à une question l'autre jour, et j'ai pensé qu'il valait partage ici comme une astuce.

Comme avec la plupart de sélection basée sur les idiomes, beaucoup de puissance expressive YUI 3 provient de ce que vous pouvez faire une fois que vous avez référence à un ou plusieurs HTMLElements - en YUI 3, que signifie avoir un nœud de référence, ce qui vous obtenez habituellement par l'intermédiaire Y.one( selector string ) ou Y.all( selector string ) . Ainsi, Y.one("#foo"). doSomethingInteresting est un modèle commun.

Il est facile d'étendre l'expressivité YUI 3 en ajoutant votre propre magie au noeud (et / ou NodeList). Voici une façon de rendre votre extension modulaire et réutilisable.

D'abord, créez un nouveau module personnalisé (nous l'appellerons node++ ):

  YUI.add ('node + +', function (Y) {
	
	 / / Définir une fonction qui sera exécuter dans le contexte d'une
	 / / Instance de noeud:
	 doSomethingAwesome function () {
		 Y.log ("Ne quelque chose de génial ici.");
	 }

	 / / Utiliser addMethod ajouter doAwesomeThing au prototype Node:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Étendre cette fonctionnalité à NodeList:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {Requiert: [' node ']}); 

GIST Luc est là .

Avec cette définition sur la page, node++ peut être use dans un cas d. Dans votre code d'implémentation, vous devriez faire:

  YUI (). Utiliser («noeud + + ', function (Y) {
	
	 / / Utilisation d'un seul nœud:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Utilisation d'un NodeList:
	 . Y.all ('p') doAwesomeThing ();
	
 }); 

Notez que seule l'instance YUI (s) à laquelle vous lier votre node++ module aura accès à doAwesomeThing . Une caractéristique de cette conception que vous aimerez comme vous construire des applications complexes, c'est que la logique de votre application ne sera pas nécessaire de changer si la liste des dépendances pour le node++ évolue - qui obtiendra gérés pour vous automatiquement à use() le temps, et la dépendance Déclaration des séjours avec le code auquel il se rapporte.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

YUI Theater - Dav Glass: "Utiliser Node.js et YUI 3" (36 min.)

Travaux Ryan Dahl sur Node.js - et la communauté se former autour de ce projet - a rejoint le HTML5 comme l'une des grandes histoires de l'année 2010. YUI ingénieur Dav Glass a travaillé pour faire YUI 3 un puissant allié pour les implémenteurs Node.js, et dans cette vidéo, il vous montre ce qu'il a fait jusqu'ici - y compris des démos de widgets progressivement améliorée diffusée le même code sur le client et le serveur. Ne manquez pas celui-ci.

Si la vidéo ci-dessous intégrer n'apparaît pas correctement dans votre lecteur de flux RSS, cliquez à regarder ou télécharger la version haute résolution de la vidéo sur le YUI Theater .

• Télécharger la vidéo HD (480p ~ 271MB)
• Télécharger la vidéo (M4V)
• Une haute résolution, version transcrite de cet exposé est disponible sur le site YUI Theater

Autres Vidéos récentes Théâtre YUI:

• Alois Reitbauer: dynaTrace AJAX Édition - dynaTrace offre l'un des outils les plus puissants pour analyser les performances des applications Web dans Internet Explorer. Dans cet exposé, dynaTrace Ingénieur Alois Reitbauer promenades à travers quatre scénarios spécifiques d'analyse en utilisant l'interface dynaTrace.
• Ryan Grove: Atteindre un rendement zen avec YUI 3 - Suite à des directives codifiées peut vous aider à construire des sites Web rapide, mais la création d'applications qui sont propre, rapide et extensible implique également de prendre une approche équilibrée de la performance à chaque niveau de votre travail F2E. YUI 3 est conçu pour vous aider dans ce processus, en fournissant une couche d'abstraction la bonne taille avec haut-magiques des performances et une variété d'outils qui rendent le code frontend rapide facile et amusant à produire. Dans cette session, nous allons explorer le zen du performants JavaScript dans le monde et YUI 3 vous présenter quelques-uns des outils puissants YUI 3 met à votre disposition dans toutes les applications que vous écrivez.
• Douglas Crockford: Crockford JavaScript - Scène 6: Loopage - Le développement logiciel est entravée par un ensemble spécifique d'erreurs de conception qui ont été faites dans les langages de programmation premier et répétés dans tout ce qui a été fait depuis. Et, un peu miraculeusement, JavaScript va le rendre droit, transformant radicalement notre façon d'écrire des applications. Encore une fois. Dans la boucle de l'Histoire, il a tout arrivé avant, mais il n'est jamais arrivé comme ça. C'est pourquoi il faut s'en préoccuper l'émergence de JavaScript côté serveur et l'excitation autour de projets tels que Node.js - non pas parce qu'ils sont à l'extrémité pointue d'une tendance, mais parce qu'ils ouvrent la route vers la révolution prochaine grande dans le logiciel.

S'abonner à YUI Theater:

• YUI Theater flux RSS
• YUI Theater sur iTunes

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Orienter l'application: Location de voitures express

Location de voiture express est le premier site indépendant de comparaison de location de voitures sur Internet. Il permet aux utilisateurs voitures à louer en ligne dans plus de 1000 villes et aéroports du monde entier.

Notre base d'utilisateurs est largement non-technique, ce qui signifie qu'ils veulent comparer les prix et louer une voiture aussi facilement que possible. Avec la relance de notre site en Juin 2010, nous avons mis en place de nombreuses composantes de YUI 2 pour aider à fournir à nos clients une expérience intuitive.

Quels composants YUI utilisons-nous?

Les composants que nous avons été en utilisant notamment le Gestionnaire de connexion , saisie semi-automatique , DataSource , Calendrier , animation , JSON , et de conteneurs .

Pourquoi nous avons choisi de YUI

En examinant les différentes bibliothèques JavaScript que nous pourrions éventuellement utiliser sur Location de voiture express , nous avons trouvé que le YUI a été le plus complet pour nos besoins. Le plus grand caractéristiques de vente a été pour nous l'approche très modulaire de la YUI a pris de mettre en œuvre des modèles de conception différente, ainsi que la documentation et des exemples robustes qu'ils ont fournis. Du point de vue de développement ce qui a conduit au développement rapide de notre application sans avoir à lutter avec une bibliothèque.

Comment nous utilisons YUI

Nous utilisons la YUI dans un certain nombre de façons. Nos quatre composants les plus utilisés sont semi-automatique, Calendrier, Container, et Connection Manager. Voici certaines des façons dont nous utilisons chacune de ces composantes.

Saisie semi-automatique

La composante saisie semi-automatique est largement utilisé sur notre site pour aider les utilisateurs à trouver une ville ou d'aéroport dans lequel de louer une voiture. Nous avons vraiment aimé la manière dont il a été facile à mettre en œuvre de ce volet, et comment il réagit rapidement. Nous cache des résultats de recherche côté serveur pour aider à améliorer les résultats de recherche, mais ayant la mise en cache côté client a également contribué énormément à l'accélération de la réponse de la composante. Une autre caractéristique que nous avons vraiment été amené était la facilité avec laquelle les résultats ont été au style. Lors de l'affichage des emplacements à l'utilisateur ce fut cruciale que nous avions besoin d'identifier les endroits où trouver dans les villes et qui ont été trouvés dans les aéroports.

Calendrier

Le composant Calendrier est également utilisée dans le site quand un locataire est de remplir les dates pour effectuer une recherche. Nous utilisons une version personnalisée de John Péloquin Calendrier intervalle de sélection et de l'afficher dans une boîte de dialogue de YUI . Essentiellement, ce que nous voulions faire était le locataire une vue de deux mois au moment de choisir leurs dates, ainsi que visuellement leur montrer ce que plage de dates qu'ils ont actuellement sélectionné. Encore une fois, cela a été extrêmement simple à mettre en œuvre en utilisant YUI Calendar 2, et il descendit essentiellement à créer un dialogue YUI, la mise du corps pour contenir un div pour le calendrier, puis attacher un calendrier Intervalle YUI à celle div.

Conteneurs

Nous utilisons des conteneurs YUI à travers notre site web dans un certain nombre de façons différentes. Dans l'exemple ci-dessus nous étions en utilisant une boîte de dialogue pour nous aider à afficher le calendrier Intervalle quand un utilisateur a été de sélectionner une date. Sur notre page de résultats de taux, nous faisons un usage intensif des conteneurs à donner au locataire plus d'informations sur les différents aspects de l'agence de location de voiture et le véhicule qu'ils pourraient éventuellement louer. La plupart des conteneurs sur cette page sont Panneaux que nous ré-utiliser pour chaque liste différente. Par exemple, l'affichage du véhicule les caractéristiques du panneau:

Les choses se sont un peu plus fun avec le Locataire nominale agence de notation. Lors de l'affichage des notes, nous avons vraiment voulu attirer l'attention de l'utilisateur pour les scores d'une agence reçus et d'afficher ces informations dans un endroit propre, facile à visualiser chemin. En utilisant le contrôle de dialogue, nous avons pu contraindre la fenêtre et le centre de la boîte de dialogue facile pour nous aider à atteindre cet objectif. En définissant une tête vide et pied de page qu'il a fait un style simple en ajoutant simplement les styles appropriés à notre CSS. Le résultat final était un récipient propre notation qui fournit le locataire avec l'information qu'ils veulent.

Connection Manager

Connection Manager est utilisé à travers le site quand nous avons besoin pour extraire des données via une requête XHR. Dans certains des exemples ci-dessus, nous utilisons ce composant pour demander des villes et aéroports du implementaitons saisie semi-automatique et en tirant les informations note pour le Locataire nominale de dialogue.

Une façon intéressante, nous utilisons Connection Manager est à notre centre de location de bloc qui se trouve sur la plupart des pages. Pour aider à la performance, nous faisons beaucoup de pleine page mise en cache sur plusieurs de nos pages de contenu. Toutefois, nous avons toujours voulu pour afficher le bloc de centre dynamique location sur ces pages. Cela nous a présenté avec un problème que nous avons pu résoudre avec Connection Manager. Plutôt que d'avoir à briser notre page entièrement mis en cache et cache seulement les aspects de la page, nous avons trouvé qu'il était plus facile de simplement inclure le bloc central de location via une requête asynchrone simple. Nous avons constaté que cela nous a permis de conserver les performances d'avoir une page entièrement mise en cache, et pourtant afficher du contenu dynamique dans notre boîte de centre de location.

Final Thoughts

Globalement nous avons été extrêmement satisfaits de notre choix d'utiliser YUI. Il nous fournit avec une bibliothèque modulaire qui est bien documenté, facile à utiliser et mettre en œuvre.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Dans la Galerie YUI 3: Module de Matt Taylor RaphaelJS

RaphaelJS est une bibliothèque JavaScript qui gère puissante SVG dessins et des animations. Il vous permet de créer facilement des toiles SVG et dessiner des formes de base et des chemins très facilement, même en les regroupant dans des ensembles et en appliquant des transformations à un ou plusieurs vecteurs. Vous pouvez dessiner des formes, manipuler des images, et d'animer tout. RaphaelJS offre une belle API pour créer et modifier des éléments SVG avec facilité.

Alors que la bibliothèque est impressionnant, mais j'ai constaté que je peux ajouter quelques fonctionnalités importantes pour les éléments de la bibliothèque RaphaelJS avec YUI3. J'ai commencé ces efforts avec le nouveau module RaphaelJS Galerie .

RaphaelJS lazy loading et Plugins

La première caractéristique est le lazy loading-non seulement de la bibliothèque RaphaelJS, mais tout RaphaelJS plugins que vous pourriez avoir besoin. Le module Gallery RaphaelJS ne charger ces fichiers lorsque vous déclarez que vous allez les utiliser dans un bac à sable YUI. Par exemple:

 
 YUI ({galerie: «galerie-22.09.2010-20-15 '}). Utiliser (« galerie-Raphaël', function (Y) {
 
	 Y. Raphaël (). Utilisation (fonction (Raphaël) {
		
		 / / Utiliser Raphaël ici comme vous le feriez en dehors YUI
		 var = papier Raphaël («myPaper ', 500, 500);
 
	 });
 
 });

Si vous utilisez les plugins RaphaelJS, préciser leur parcours dans un tableau et d'envoyer ce que le premier paramètre dans le Raphaël Y. () use () fonction.:

 
 YUI ({galerie: «galerie-22.09.2010-20-15 '}). Utiliser (« galerie-Raphaël', function (Y) {
 
	 myPlugins var = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y. Raphaël (). Utiliser (myPlugins, fonction (Raphaël) {
 
		 / / Utiliser Raphaël ici comme vous le feriez en dehors YUI
		 var = papier Raphaël («myPaper ', 500, 500);
		 / / Le «papier» aura toute les nouvelles fonctions ajoutées par vos plugins aujourd'hui
	 });
 
 });

La bibliothèque RaphaelJS est chargé en premier, puis tous les plugins spécifiés sont chargés avant votre fonction de rappel est exécuté avec l'objet Raphaël comme le seul paramètre.

D'événements personnalisés

Une fois que vous avez créé un espace de dessin avec l'objet de Raphaël, alors vous pouvez immédiatement se mettre au dessin. Lorsque vous appelez des méthodes comme rect , circle , et path sur l'espace de dessin, vous allez recevoir en retour des objets représentant des vecteurs SVG. Normalement, vous aurez accès à leurs correspondants des éléments DOM à travers le node de propriété. Par exemple:

 
 var = papier Raphaël («myPaper ', 500, 500);
 var carré = paper.rect (0, 0, 100, 100);

Cela crée un objet vectoriel rectangulaires aux coordonnées [0,0] avec une largeur et une hauteur de 100 pixels. Vous avez accès à l'élément sous-jacent DOM (qui est un format SVG rect élément) comme ceci:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Félicitations, vous avez cliqué sur un carré!');
 };

Si vous êtes un fervent utilisateur de YUI, vous seriez probablement quelque chose de plus que cela. Que diriez-vous construit dans Y.Node ainsi? Tout comme le node propriété fait référence à l'HTMLElement derrière l'objet SVG, le $node propriété fait référence à l' Y.Node wrapper pour cet élément. Ainsi, vous pouvez faire des choses comme ceci:

 
 carrés. node.on $ ('mouseover', function () {
	 alert ('Félicitations, vous pouvez déplacer une souris!');
 });

Essayons quelque chose de plus complexe maintenant. Une interaction avec un vecteur devrait être en mesure de causer d'autres vecteurs tirés de mettre à jour leurs styles, non? Que diriez-nous créer quelques bars que tous rendent leurs couleurs dépendent de l'endroit où la souris est une située sur un cercle sur la page:

 
 var = papier Raphaël («rcanvas ', 600, 800);
 
 . var = circ paper.circle (350, 200, 100) attr ({remplissage: «rose», course: 'black'});
 
 / / Pousser un tas de rectangles dans un tableau
 var i = 0; rectangles = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({remplissage: «rouge», course: «jaune'}));
 }
 
 / / Boucle sur les rectangles, ajoutant spécifiques des gestionnaires MouseMove cercle pour chaque
 Y.Array.each (rectangles, fonction (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 / / La couleur de remplissage est dynamique, dépend de l'emplacement de ce rectangle
		 / / Dans le tableau ainsi que l'emplacement de la souris
		 Si var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 Top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r haut,
			 y = evt.clientY - dessus;
			 rouge = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 vert = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 bleu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('fill', 'rgb (' + rouge + ',' + vert + "," + bleu +')');
	 });
 });

Cet exemple est en marche ici , mais comme vous pouvez le voir dans les clichés ci-dessous, la couleur de chaque barre est dépendant de l'emplacement de la souris sur le cercle ainsi que l'ordre de la barre.

Selon l'endroit où le curseur de votre souris se trouve sur le cercle, les couleurs des barres changer individuellement.

Donc vous pouvez voir que $node est un raccourci utile, mais rien de spectaculaire. Ce serait vraiment fantastique si chaque objet que vous créez avec SVG RaphaelJS pouvait tirer des événements personnalisés . Cela permettra à vos éléments de dessin individuels pour déclencher des événements sur mesure, et rien sur la page pourrait écouter et répondre. Cela peut être utile à bien des égards. Pour commencer, il fournit des interactions riches entre vos dessins. Interactions des utilisateurs avec un vecteur peut désormais notifier toute autres vecteurs de l'interaction à la demande. Cela signifie que vous pouvez déclencher des événements programatically partir de vos dessins lorsque certaines conditions sont remplies. Non seulement cela permettra à vos dessins de notifier d'autres vecteurs, mais rien sur la page peut écouter po

 
 var = papier Raphaël («rcanvas ', 600, 800);
 
 . var = circ paper.circle (350, 200, 100) attr ({remplissage: «rose», course: 'black'});
 
 / / Faire des tableaux de rectangles et cercles
 var i = 0, rectangles = [], les cercles = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({remplissage: «rouge», course: «jaune'}));
	 circles.push (. paper.circle (0,0,20) cacher ());
 }
 Y.Array.each (rectangles, fonction (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 Si var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 Top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r haut,
			 y = evt.clientY - dessus;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 rouge = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 vert = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 bleu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Cette fois, non seulement en changeant la couleur, mais aussi la largeur du rectangle
		 rect.attr ({
			 largeur: newWidth,
			 remplir: 'rgb (' + rouge + ',' + vert + "," + bleu + ')'
		 });
		 / / Mise à feu d'événements personnalisés pour notifier que cette largeur du rectangle qui a changé
		 rect.fire («largeur changé", {width: newWidth, source: rect, l'ordre suivant: index});
	 });
	
	 / / Chaque rectangle devient un auditeur qui se déclenche lors largeur changé
	 rect.on («largeur changé ', function (evt) {
		 attrs var = evt.source.attrs;
		 / / Obtenir le cercle correspondant et le déplacer vers l'extrémité droite du rectangle
		 cercles [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 CY: attrs.y,
			 remplir: «cornflowerblue '
		 .}) Show ();
		
	 });
	
 });

Jetez un oeil à cet exemple courir ici . Vous pouvez également voir ci-dessous à partir de l'instantané que les cercles sont dessinés sur les extrémités droite du rectangle. Cela se produit en réponse à des tirs chaque rectangle individu événement personnalisé, d'être pris par un gestionnaire qui se déplace le cercle pour une position relative aux attributs actuels du rectangle.

Cela ouvre des possiblities intéressant pour RaphaelJS sein YUI3. Par exemple, si nous pouvions créer un groupe de formes vectorielles avec le groupe lui-même étant l'entité qui déclenche des événements du monde extérieur? En interne, chaque dessin vectoriel pouvait communiquer avec son conteneur via des événements personnalisés, et le conteneur serait prendre des décisions sur quelles données il incendies au monde extérieur. Cela ouvre l'idée d'entièrement encapsulés, les contrôles SVG interactif.

Résumé

Avec la montée du HTML5 et ses technologies satellitaires, il ya beaucoup plus d'options autres que Flash pour des interactions riches. Idéalement, tous les éléments vectorisé sur la page devrait être pleinement accessible et standardisée. Cela ouvre possiblities merveilleuse pour nous de créer accessibles, les contrôles Web standard, sans recourir à Flash. SVG est une option attrayante parce que chaque vecteur de tirer sur la page est soutenue par un noeud DOM que l'on peut modifier avec YUI comme tout autre nœud DOM. C'est ce que permet le module Gallery RaphaelJS pour augmenter tous les objets SVG créés par RaphaelJS, et c'est une des clés de l'interaction riche avec ces elments d'ailleurs sur la page.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

clearfix Reloaded + overflow: hidden Demystified

clearfix et overflow : hidden peut être les deux techniques les plus populaires pour effacer flotteurs sans balisage structurel.

Ce court article vise à améliorer la première méthode et faire la lumière sur le sens réel de la seconde.

clearfix

Dans tout ce que vous savez sur clearfix est faux je leur explique les enjeux de cette méthode crée à travers les navigateurs et je suggère d'utiliser uniquement clearfix sur des éléments qui ne sont pas à côté de chars (par exemple, une fenêtre modale), bien que les auteurs nous avons encore à traiter avec des marges s'effondrent . Cette page de démonstration démontre le problème.

Marge-effondrement de comportement dans les deux premières cases montre que c'est le contenu généré (non vide) qui maintient la marge de fond à l'intérieur de la boîte (qui prend tout son sens en fonction de spécifications ).

Donc, pour créer la disposition même boîte tous les navigateurs, nous pouvons améliorer la méthode originale de génération de contenu en utilisant les deux pseudo-éléments :before et :after :

  . Clearfix: avant,
 . Clearfix: après {
   contenu:; "."    
   display: block;    
   height: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Ne pas simplement remplacer vos règles clearfix avec ces nouvelles dans des projets existants, même si, comme vous pouvez avoir des problèmes déjà patchée liées à l'effondrement des marges via d'autres méthodes.

overflow

Dans la plupart des discussions sur la compensation flotteurs de l' overflow:hidden méthode se heurte, et il est toujours abattu par un " Si vous placez des éléments en position absolue à l'intérieur du div, vous serez couper ces éléments ". Mais ce n'est pas nécessaire vrai. overflow:hidden sera toujours pince éléments en position relative, mais il ne sera pas toujours cacher ceux en position absolue. C'est parce que tout dépend du bloc contenant:

10.1 Définition du "bloc conteneur":

4. Si l'élément a 'position: absolute ", le bloc conteneur est établi par l'ancêtre le plus proche avec une «position» du «absolue», «relative» ou «fixe», ...

Cela signifie éléments en position absolue montrera en dehors d'une boîte de style avec overflow:hidden à moins que leur bloc conteneur est la boîte elle-même ou un élément à l'intérieur dudit boîtier.

Vous pouvez vérifier cette page de démo pour voir comment les choses fonctionnent.

Mieux alternatives

Si vous ne pouvez appliquer une largeur à l'élément contenant les flotteurs, votre meilleure option est d'utiliser:

  display: inline-block;
 largeur: <tout <valeur explicite; 

Pour en savoir plus

• Flotteurs contenues, flotte l'enfermant avec CSS pur connue comme la technique clearfix
• Comment effacer flotteurs sans balisage structurel
• La nouvelle méthode Clearfix
• 10.1 Définition de «bloc contenant"

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

YUI: Heures d'ouverture Lun 29 septembre

Le prochain épisode de YUI: Heures d'ouverture aura lieu mercredi prochain, le 29.

YUI 3 graphiques sont à venir dans la prochaine version, et un aperçu de quelques travaux au début est déjà dans la galerie . Ponts Tripp seront sur l'appel, l'introduction de la nouvelle structure et en montrant comment les leçons tirées de forfait YUI 2 de graphiques informés de la nouvelle architecture, cherchant un équilibre subtil entre la flexibilité et la simplicité. Oh, et ​​ai-je mentionné pas de Flash?

Aussi sur le pont sera Allen Rabinovich donnant une mise à jour sur le travail incroyable qu'il a été fait sur ​​la refonte yuilibrary.com. Nous parlons de tout, ici: page d'accueil, guides d'utilisateur, des démos, des didacticiels, documentation de l'API. Les œuvres. À bien des égards c'est une toute nouvelle histoire, et une bien meilleure.

Nous allons être en ligne 10 heures-12 heures PST. Les détails de connexion sont les mêmes que d'habitude.

1. Composez 1-888-371-8922 pour (Skype fonctionne très bien pour les participants hors États-Unis *)
2. Entrez le code 47188953 # participant
3. Joignez-vous à la session de partage d'écran (ce qui vous invite à installer le plugin Adobe Connect si c'est votre première fois à l'utiliser)

Et enfin, le fil du forum pour ce yuilibrary.com Heures Open est là . Regarde là pour les notes, plats à emporter intéressant, et l'enregistrement de l'appel après c'est fait. Ou commencer la conversation par des questions hors début d'affichage, des suggestions de sujets, ou le code que vous souhaitez examiner.

N'oubliez pas de vous abonner à la YUI Calendar et suivez @ yuilibrary sur Twitter pour les dernières mises à jour sur Heures d'ouverture et d'autres Intérêt YUI.

En espérant vous y voir!

* - Si Skype n'est pas une option, écrivez-moi pour un numéro local.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

En l'état sauvage pour Septembre 24, 2010

Comme nous nous préparons pour YUIConf 2010 et beaucoup plus dans les prochains mois, voici quelques-unes des autres choses que nous avons pris note de la plus grande du monde YUI:

• YUI Theater Tops Liste Nettuts des incontournables Podcasts F2E : Andrew Burgess écrit à propos de YUI Theater : "Il semble que le plus souvent que quelques fois par mois, Yahoo! apporte aux développeurs à la pointe de la technologie Web pour garder leurs employés à ce jour. Pour le bénéfice du reste d'entre nous, ces pourparlers sont enregistrés et publiés. Vous trouverez bien connue devs comme Douglas Crockford et Nicholas Zakas, et parle sur tout, de la performance et l'accessibilité aux Javascript et le DOM. " #
  
• DigitalInsurance.com (un site @ apipkin) Powered by YUI 3 : Prolifique Galerie contributeur Anthony Pipkin a aidé à produire le nouveau portail de DigitalInsurance.com , alimentée par YUI 3. #
  
• Amélioration progressive n'utilisant rien d'autre JS (@ codepo8 sur davglass @) : Christian Heilmann écrit sur ​​Ajaxian: «l'amélioration progressive est encore un sujet de confusion pour beaucoup de gens qui sont très excités au sujet des capacités de JavaScript dans des environnements navigateur moderne. Il peut se sentir anachronique d'écrire vos solutions pour un environnement non-JS, puis une fois de plus améliore en JavaScript. J'ai grandi comme ça, donc pour moi c'est une simple question de faire la bonne chose, mais avec le monde actuel des bibliothèques JavaScript et out-of-the-box widgets, il peut sembler un frein. Entrez verre Dav de l'équipe de YUI. Il a été tourner le concept de l'amélioration progressive dans sa tête et comme un amoureux JS et le code backend "endurer" il partit pour résoudre ce problème une fois pour toutes de façon pure JavaScript. " Vérifiez l'article complet pour plus de détails . #
  
• Plugins Overlay Plus pour YUI 3 d'Oliver Andrich : De la page d'Oliver GitHub: «Overlay Plugins est une collection de cinq plugins que j'ai écrit pour apprendre developement YUI 3 plug-in en général. Trois des cinq plugins plus ou moins imiter les Extras Overlay créé par Eric Ferraiuolo .... Les cinq modules sont les suivants:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( source d'origine. ) #
• Diapositives Reid Burke YUI pour HackU à la Carnegie Mellon : ingénieur YUI (et Yeti auteur) Reid Burke attisé quelques diapositives et un YUI 3-moteur basé sur diaporama pour sa présentation récente à la Carnegie Mellon. #
  
• Devcurry sur l'apprentissage à partir JS Crockford et autres gourous sur le YUI Theater : Suprotim Agarwal écrit dans devcurry ce matin: «Dans ce post, je vais partager des liens de quelques vidéos JavaScript très utile et conférences données par des gourous JavaScript, plein d'informations, regarder s'amuser et absolument gratuit! Bien que l'Internet est plein de vidéos gratuites, j'ai choisi seulement une couple d'entre eux, que j'ai trouvé le plus utile. Soyez prêt à prendre des notes pendant que vous apprenez .. conférences vidéo Crockford JavaScript - Douglas Crockford est un architecte JavaScript et joue un rôle important dans la conception de nouvelles fonctionnalités de la langue. Ses vidéos sont un "must-have" pour tout développeur JavaScript. YUI Theater - Fournit l'accès à des pourparlers de programmation libre par des gourous sur le JavaScript et le développement Web "Suprotim énumère quelques autres sources de contenu, y compris d'autres titres Théâtre YUI.. #
  

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!