Yahoo! User Interface Blog (YUIBlog)

YUI 3 Quick Tip: Het toevoegen van uw eigen Awesome

Luke ( @ ls_n ) geplaatst dit fragment in antwoord op een vraag de andere dag, en ik dacht dat het de moeite waard was het delen van hier als een snelle tip.

Zoals met de meeste selector op basis van idiomen, veel expressieve kracht YUI 3's komt van wat u kunt doen als je eenmaal verwijzing naar een of meer HTMLElements - in YUI 3, dat betekent dat het hebben van een referentie-Node, die meestal krijg je via Y.one( selector string ) of Y.all( selector string ) . Dus, Y.one("#foo"). doSomethingInteresting is een gewoon patroon.

Het is gemakkelijk om YUI 3's expressiviteit uit te breiden door het toevoegen van uw eigen magie om Node (en / of NodeList). Hier is een manier om uw toestel modulair en herbruikbaar.

Maak eerst een nieuwe aangepaste module (we noemen het node++ ):

  YUI.add ('node + +', functie (Y) {
	
	 / / Een functie definiëren die wordt uitgevoerd in het kader van een
	 / / Node bijvoorbeeld:
	 functie doSomethingAwesome () {
		 Y.log ("Doe iets geweldig hier.");
	 }

	 / / Gebruik addMethod om doAwesomeThing toe te voegen aan de Node prototype:
	 Y.Node.addMethod ("doAwesomeThing" doSomethingAwesome);
	
	 / / Uit te breiden deze functionaliteit te NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype "doAwesomeThing");
	
 }, '0 .0.1 ', {Vereist: [' node ']}); 

Luke's Gist is hier .

Met die definitie op de pagina, node++ kan worden use d in elk geval. In uw implementatie-code, doe je dan:

  YUI (). Gebruik ('node + +', functie (Y) {
	
	 / / Gebruik van een enkele Knooppunt:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Gebruik van een NodeList:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Merk op dat alleen de YUI instantie (s) waarop u uw binden node++ module zal toegang hebben tot doAwesomeThing . Een kenmerk van dit ontwerp dat je gelijk als je bouwt complexe applicaties is dat je de uitvoering logica niet hoeft te veranderen als de afhankelijkheid lijst voor node++ evolueert - dat zal behandeld automatisch voor u op use() tijd, en de afhankelijkheid verklaring blijft bij de code waarop het betrekking heeft.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

YUI Theater - Dav Glas: (. 36 min) "Het gebruik van Node.js en YUI 3"

Ryan Dahl werkzaamheden Node.js - en de gemeenschap vormen rond dat project - heeft zich aangesloten bij HTML5 als een van de grote verhalen van 2010. YUI ingenieur Dav Glass heeft gewerkt om YUI 3 is een krachtige bondgenoot voor Node.js uitvoerders te maken, en in deze video laat hij zien wat hij tot nu toe gedaan - inclusief demo's van geleidelijk verbeterde widgets het uitvoeren van de code ook in op client en server. Niet te missen deze.

Als de video insluiten hieronder niet te zien zijn in uw RSS-lezer, doorklikken om te zien of download de hoge resolutie versie van de video op YUI Theater .

• Download HD-video (480p ~ 271MB)
• Download video (m4v)
• Een hoge-resolutie, transcripted versie van deze toespraak is beschikbaar op de YUI Theater website

Andere recente YUI Theater Video's:

• Alois Reitbauer: dynaTrace Ajax Edition - dynaTrace biedt een van de meest krachtige tools voor het analyseren van de prestaties van webapplicaties in Internet Explorer. In dit gesprek, dynaTrace ingenieur Alois Reitbauer loopt door vier specifieke analytische scenario's met behulp van de dynaTrace interface.
• Ryan Grove: Het bereiken van prestaties Zen met YUI 3 - Na de gecodificeerde richtlijnen kunnen u helpen snel websites, maar het bouwen van applicaties die schoon, snel en uitbreidbare ook betrekking heeft op het nemen van een evenwichtige benadering van de prestaties op elk niveau van uw F2E werk. YUI 3 is ontworpen om u te helpen in dit proces, die een rechts-en kleinbedrijf abstractielaag met ingebouwde prestaties magie en een verscheidenheid aan tools waarmee je snel front-end code eenvoudig en leuk om te produceren. In deze sessie zullen we de zen van performante JavaScript onderzoeken in de YUI 3 wereld en laten u kennismaken met enkele van de krachtige tools YUI 3 tot uw beschikking stelt in elke app je schrijft.
• Douglas Crockford: Crockford van JavaScript - Scène 6: Loopage - Software ontwikkeling wordt belemmerd door een specifieke set van ontwerp fouten die werden gemaakt in de eerste programmeertalen en herhaald in alles wat er sinds gedaan. En, enigszins miraculeuze wijze, wordt JavaScript gaat naar rechts maken, een radicale ingreep in de manier waarop we schrijven toepassingen. Again. In de loop van de geschiedenis, het is allemaal eerder gebeurd, maar het is nog nooit gebeurd als deze. Dit is waarom je zou moeten geven om de opkomst van server-side JavaScript en de opwinding rond projecten als Node.js - niet omdat ze aan het scherpe einde van een trend, maar omdat ze plaveien de weg naar de volgende grote revolutie in software.

Abonneren op YUI Theater:

• YUI Theater RSS-feed
• YUI Theater op iTunes

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Implementatie Focus: Autoverhuur Express

Autoverhuur Express is de grootste onafhankelijke autoverhuur vergelijking website op het internet. Het laat gebruikers huur auto's online bij meer dan 1000 steden en luchthavens over de hele wereld.

Onze gebruikersgroep is grotendeels niet-technische, wat betekent dat ze willen prijzen en huur auto's te vergelijken zo gemakkelijk mogelijk te maken. Met de herlancering van onze website in juni 2010 hebben we geïmplementeerd veel onderdelen van YUI 2 tot en helpen onze klanten te voorzien van een intuïtieve ervaring.

Welke YUI componenten gebruiken we?

De componenten die we hebben gebruik gemaakt van onder meer Connection Manager , AutoAanvullen , DataSource , Calendar , Animatie , JSON , en Container .

Waarom kozen we voor YUI

Bij de herziening van de verschillende JavaScript-bibliotheken die we zou kunnen gebruiken op Autoverhuur Express , vonden we dat de YUI was de meest complete voor onze behoeften. De grootste verkoop van functies voor ons was de zeer modulaire aanpak van de YUI nam om verschillende design patterns, evenals de robuuste documentatie en voorbeelden die zij hebben verstrekt te implementeren. Van een ontwikkeling standpunt heeft dit geleid tot een snelle ontwikkeling van onze applicatie zonder te worstelen met een bibliotheek.

Hoe gebruiken we YUI

We maken gebruik van de YUI op een aantal manieren. Onze 4 meest gebruikte onderdelen zijn AutoAanvullen, Agenda, Container, en de Connection Manager. Hier zijn enkele van de manieren waarop we u elk van deze componenten.

AutoAanvullen

De AutoAanvullen component wordt veelvuldig gebruikt op onze site om gebruikers te helpen vinden van een stad of luchthaven in om een ​​auto te huren. We vonden hoe makkelijk het was om dit onderdeel te implementeren, en hoe snel deze reageert. We cache zoekresultaten server-side te helpen verbeteren zoekresultaten, maar met de client-side caching hielp ook enorm in het versnellen van de reactie van de component. Een ander kenmerk dat we echt gingen was hoe eenvoudig de resultaten waren te stylen. Bij het weergeven van de locaties aan de gebruiker was dit van cruciaal belang als we nodig hadden om te bepalen welke locaties waar in steden en die werden gevonden op luchthavens.

Kalender

De kalender component wordt ook gebruikt door de hele site wanneer er een huurder is het invullen van data om een ​​zoekopdracht uit te voeren. We gebruiken een aangepaste versie van John Peloquin's Interval Selectie Kalender en weer te geven in een YUI Dialog . In wezen wat we wilden doen was geven de huurder twee maanden uitzicht bij de keuze van hun data, maar ook visueel laten zien wat datumbereik ze op dit moment hebt geselecteerd. Nogmaals, dit was zeer eenvoudig te implementeren met behulp van YUI 2 Agenda en het in principe kwam neer op het creëren van een YUI Dialog, waarin het lichaam van een div bevatten voor de agenda en het bevestigen van een YUI Interval Kalender met die div.

Containers

Wij maken gebruik van YUI Containers via onze website op een aantal verschillende manieren. In het voorbeeld hierboven waren we met behulp van een dialoogvenster om ons te helpen geeft de Interval Kalender wanneer een gebruiker is het selecteren van een datum. Op onze tarief pagina met zoekresultaten maken we veel gebruik van containers aan de huurder geven meer informatie over de verschillende aspecten van het autoverhuurbedrijf en het voertuig ze misschien mogelijk te huren. Het grootste deel van de containers op deze pagina zijn panelen die we weer gebruiken voor elke andere lijst. Bijvoorbeeld, het voertuig beeldscherm heeft Panel:

Het werd een beetje meer plezier met de huurder beoordeeld bureau ratings. Bij het weergeven van de ratings, we wilden echt de gebruiker de aandacht te vestigen op de scores een agentschap ontvangen en om deze informatie in een schone, eenvoudig te-view manier weer te geven. Door gebruik te maken van de Dialog Control waren we in staat om gemakkelijk beperken de viewport en in het midden het dialoogvenster om ons te helpen dit doel te bereiken. Door het instellen van een lege kop-en voettekst het maakte styling eenvoudig door het toevoegen van de juiste stijlen om onze CSS. Het eindresultaat was een schone ratings container die de huurder voorziet van de informatie die ze willen.

Connection Manager

Connection Manager wordt gebruikt door de hele site als we nodig hebben om gegevens via een XHR verzoek te trekken. In sommige van de bovenstaande voorbeelden maken wij gebruik van dit onderdeel voor het aanvragen van steden en luchthavens voor de AutoAanvullen implementaitons en trekken de rating informatie voor de huurder beoordeeld Dialog.

Een interessante manier waarop we gebruik maken van Connection Manager is met onze verhuur center blok dat zit op de meeste pagina's. Om te helpen met de prestaties doen we veel full-page caching op veel van onze content pagina's. Maar we wilden nog steeds om de dynamische verhuur middenblok weer te geven op deze pagina's. Dit heeft ons met een probleem dat we in staat waren om op te lossen met Connection Manager. In plaats van te breken ons volledig in de cache pagina en cache alleen bepaalde aspecten van de pagina die we vonden was het makkelijker om gewoon onder meer de huur middenblok via een eenvoudige asynchrone verzoek. We vonden dat dit liet ons toe om de prestaties te behouden van het hebben van een volledig in de cache pagina, maar toch dynamische inhoud weer te geven in onze verhuur middelste vak.

Final Thoughts

In totaal zijn we zijn zeer blij met onze keuze om YUI te gebruiken. Het geeft ons met een modulaire bibliotheek die goed gedocumenteerd is, gemakkelijk te gebruiken en uit te voeren.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

In de YUI 3 Gallery: Matt Taylor's RaphaelJS Module

RaphaelJS is een krachtige JavaScript-bibliotheek die het beheer SVG- tekeningen en animaties. Hiermee kunt u eenvoudig SVG doeken en basisvormen en paden te trekken heel gemakkelijk, zelfs ze te groeperen in sets en het toepassen van transformaties naar een of meerdere vectoren. U kunt tekenen vormen, het manipuleren van beelden, en animeren alles. RaphaelJS biedt een mooie API maken en wijzigen van SVG-elementen met gemak.

Terwijl de bibliotheek is indrukwekkend, maar ik heb ontdekt dat ik een aantal belangrijke functies toe te voegen aan elementen van de RaphaelJS bibliotheek met YUI3. Ik ben begonnen deze inspanningen met de nieuwe RaphaelJS Gallery Module .

Lazy laden RaphaelJS en plugins

Het eerste kenmerk is de lazy-laden van niet alleen de RaphaelJS bibliotheek, maar elke RaphaelJS plugins je nodig hebt zou kunnen. De RaphaelJS Gallery Module is alleen te laden deze bestanden wanneer u verklaar je ze gebruiken binnen een YUI zandbak. Bijvoorbeeld:

 
 YUI ({gallery: 'gallery-2010.09.22-20-15'}). Gebruik ('galerie-Raphaël ", functie (Y) {
 
	 Y.Raphael (). Gebruiken (functie (Raphael) {
		
		 / / Hier gebruik maken van Raphael net zoals je zou buiten YUI
		 var papier = Raphaël ('myPaper', 500, 500);
 
	 });
 
 });

Als u RaphaelJS plugins, geeft hun paden in een array en stuur die als de eerste parameter in de Y.Raphael () te gebruiken () functie.:

 
 YUI ({gallery: 'gallery-2010.09.22-20-15'}). Gebruik ('galerie-Raphaël ", functie (Y) {
 
	 var MyPlugins = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Gebruiken (MyPlugins, functie (Raphael) {
 
		 / / Hier gebruik maken van Raphael net zoals je zou buiten YUI
		 var papier = Raphaël ('myPaper', 500, 500);
		 / / De 'papieren' zal hebben nieuwe functies toegevoegd nu door je plugins
	 });
 
 });

De RaphaelJS bibliotheek het eerst wordt geladen, dan is het even welke gespecificeerde plugins zijn geladen voordat uw callback functie wordt uitgevoerd met de Raphael object als de enige parameter.

Custom Events

Zodra u hebt gemaakt, een tekening ruimte met de Raphael object, dan kunt u direct aan de slag met de tekening. Wanneer u methoden zoals bellen rect , circle , en path op de tekening de ruimte, krijg je weer objecten die SVG vectoren. Normaal gesproken heb je toegang tot de bijbehorende DOM-elementen door middel van de node eigendom. Bijvoorbeeld:

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

Hierdoor ontstaat een rechthoekig vector object coördinaten [0,0] met een breedte en hoogte van 100 pixels. U heeft toegang tot de onderliggende DOM element (dat is een SVG- rect element) als volgt:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ('Gefeliciteerd, u hebt geklikt, een plein!');
 };

Als u een fervent YUI gebruiker, zou je waarschijnlijk graag iets meer dan dit. Wat dacht je van een ingebouwde Y.Node ook? Net als de node eigendom verwijst naar de HTMLElement achter de SVG-object, de $node eigendom verwijst naar de Y.Node wrapper voor dat element. Dus je kunt dingen doen zoals dit:

 
 plein. $ node.on ('mouseover', function () {
	 alert ('Gefeliciteerd, u een muis kunt bewegen!');
 });

Laten we nu proberen iets complexer. Een interactie met een vector zou moeten kunnen leiden tot andere getekende vectoren om hun stijl te werken, toch? Hoe zit het creëren we een aantal bars dat alle dienst hun kleuren afhankelijk van waar een de muis is gelegen op een cirkel op de pagina:

 
 var papier = Raphaël ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({te vullen: 'pink', een beroerte: 'zwarte'});
 
 / / Het duwen van een bos van rechthoeken in een array
 var i = 0; rechthoeken = [];
 voor (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({te vullen: 'rood', een beroerte: 'geel'}.));
 }
 
 / / Het doorlussen van de rechthoeken, het toevoegen van specifieke cirkel mouseMove handlers voor elke
 Y.Array.each (rechthoeken, functie (rect, index) {
	 var i = index + 1;
	 Circ. $ node.on ('mouseMove', function (evt) {
		 / / Is de kleur dynamisch, afhankelijk van de plaats van deze rechthoek
		 / / In de matrix en de locatie van de muis
		 var LF = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - LF,
			 boven = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + top,
			 y = evt.clientY - top;
			 rood = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6
			 groen = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blauw = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('fill', 'rgb (' + rood + ',' + groen + ',' + blauw + ')');
	 });
 });

Dit voorbeeld loopt hier , maar zoals te zien in de foto onder de kleur van elke balk is afhankelijk van de muis plaats over de cirkel en de volgorde van de balk.

Afhankelijk van waar de muis cursor over de cirkel, de bar kleuren afzonderlijk te wijzigen.

Zo kun je zien dat $node is een nuttige snelkoppeling, maar niets spectaculair. Het zou echt fantastisch als elk SVG-object dat u te maken met RaphaelJS kon schieten aangepaste gebeurtenissen . Dat zou je individuele tekening elementen om aangepaste gebeurtenissen af ​​te vuren, en alles wat op de pagina zou kunnen luisteren en reageren. Dit kan nuttig zijn in vele opzichten. Om te beginnen biedt het een rijke interactie tussen uw tekeningen. Gebruiker interacties met een vector kan nu kennis van elke andere vectoren van de interactie op de vraag. Dit betekent dat u programmatisch gebeurtenissen vuren vanaf uw tekeningen wanneer aan bepaalde voorwaarden wordt voldaan. Niet alleen zorgt dit kan uw tekeningen aan andere vectoren te melden, maar alles op de pagina kan luisteren inch

 
 var papier = Raphaël ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({te vullen: 'pink', een beroerte: 'zwarte'});
 
 / / Maken arrays van rechthoeken en cirkels
 var i = 0, rechthoeken = [] = cirkels [];
 voor (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({te vullen: 'rood', een beroerte: 'geel'}.));
	 circles.push (paper.circle (0,0,20) te verbergen ().);
 }
 Y.Array.each (rechthoeken, functie (rect, index) {
	 var i = index + 1;
	 Circ. $ node.on ('mouseMove', function (evt) {
		 var LF = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - LF,
			 boven = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + top,
			 y = evt.clientY - top;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6
			 rood = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6
			 groen = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blauw = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Nu niet alleen de kleur, maar ook de rechthoek breedte
		 rect.attr ({
			 breedte: newWidth,
			 te vullen: "rgb ('+ rood +', '+ groen +', '+ blauw +') '
		 });
		 / / Schieten evenement op maat aan te geven dat deze rechthoek breedte is veranderd
		 rect.fire ('breedte-veranderd', {width: newWidth, bron: rect, orde: index});
	 });
	
	 / / Elke rechthoek krijgt een luisteraar die wordt geactiveerd op de breedte veranderd
	 rect.on ('breedte-veranderd', functie (evt) {
		 var attrs = evt.source.attrs;
		 / / Haal de bijbehorende cirkel en verplaats deze naar de rechterkant van de rechthoek
		 cirkels [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 CY: attrs.y,
			 te vullen: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Neem een kijkje op deze lopen voorbeeld hier . U kunt ook zien aan de foto onder die cirkels worden getekend op de rechterzijde van de rechthoeken. Dit wordt voorkomende reactie op maat elke individuele rechthoek event afvuren, wordt gevangen door een handler die de cirkel komt te staan ​​ten opzichte van de huidige kenmerken van de rechthoek.

Dit opent interessante mogelijkheden voor RaphaelJS binnen YUI3. Bijvoorbeeld, wat als we een groep van vector vormen met de groep zelf is de entiteit die gebeurtenissen branden aan de buitenwereld? Intern kan elke vector tekening te communiceren met zijn kooi via aangepaste gebeurtenissen, en de container zou beslissingen nemen over welke gegevens het branden naar de buitenwereld. Dit opent het idee van de volledig ingekapselde, interactieve SVG controles.

Overzicht

Met de opkomst van HTML5 en de satelliet-technologie, zijn er zo veel meer andere opties dan Flash voor rijke interacties. In het ideale geval moet elke vectored elementen op de pagina volledig toegankelijk en gestandaardiseerd. Dit opent geweldige mogelijkheden voor ons om toegankelijke, standaard web-controls te creëren zonder toevlucht te nemen tot Flash. SVG is een aantrekkelijke optie, omdat elke vector getekend op de pagina wordt ondersteund door een DOM node die we kunnen met YUI wijzigen net als elke andere DOM node. Dat is wat laat de RaphaelJS Gallery Module ter versterking alle SVG objecten die worden gecreëerd door RaphaelJS, en dat is een sleutel tot rijke interactie met deze elments van elders op de pagina.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Clearfix Reloaded + overflow: hidden Demystified

Clearfix en overflow : hidden misschien wel de twee meest populaire technieken om praalwagens te wissen zonder structurele opmaak.

Dit korte artikel gaat over het verbeteren van de eerste methode en het afstoten van enig licht op de werkelijke betekenis van de tweede.

Clearfix

In alles wat je weet over Clearfix mis is leg ik uit de problemen van deze methode zorgt voor verschillende browsers en ik stel voor om alleen Clearfix gebruiken op elementen die niet naast praalwagens (bijvoorbeeld een modaal venster), hoewel als auteurs hebben we nog steeds te maken met instortende marges . Deze demo pagina toont de kwestie.

Marge-collapse gedrag in de eerste twee dozen blijkt dat het de gegenereerde (niet-lege) inhoud dat de ondermarge in de doos (die is volkomen logisch houdt volgens spec ).

Dus, om dezelfde doos lay-out in verschillende browsers kunnen we de originele methode te verbeteren door het genereren van content met behulp van zowel pseudo-elementen te maken :before -en :after :

  . Clearfix: voor,
 . Clearfix: na {
   inhoud:; "."    
   display: block;    
   height: 0;    
   overflow: hidden;	
 }
 . Clearfix: na {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Niet zomaar vervanging van uw Clearfix regels met deze nieuwe in bestaande projecten, maar, zoals u wellicht reeds gepatchte kwesties in verband met instortende marges via andere methoden.

overflow

In de meeste discussies over clearing drijft de overflow:hidden methode komt, en het is altijd neergeschoten door een ' Als je het plaatsen van absoluut gepositioneerde elementen in de div, je zult het afsnijden van deze elementen ". Maar dit is niet noodzakelijk waar. overflow:hidden zal altijd clip relatief gepositioneerde elementen, maar het zal niet altijd verbergt absoluut gepositioneerd degenen. Dit is omdat het hangt allemaal af van het bevattende blok:

10.1 Definitie van "bevattende blok":

4. Als het element 'position: absolute', het bevattende blok wordt bepaald door de dichtstbijzijnde voorouder met een 'positie' van de 'absolute', 'relatieve' of 'vaste', ...

Dit betekent absoluut gepositioneerde elementen zal buitenkant van een doos ingericht met overflow:hidden tenzij hun bevattende blok is de box zelf of een element binnen de genoemde doos.

U kunt deze demo pagina om te zien hoe dingen werken.

Betere alternatieven

Als u kunt een breedte van het element met praalwagens, dan is uw beste optie is te gebruiken om:

  display: inline-block;
 breedte: <Alle expliciet value>; 

Verder lezen

• Opgenomen Drijft, vergezeld van praalwagens met pure CSS bekend als de Clearfix techniek
• Hoe Drijft helder en vrij van structurele opmaak
• The New Clearfix Methode
• 10.1 Definitie van "bevattende blok"

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

YUI: Openingsuren ma 29 september

De volgende aflevering van YUI: Open uren worden volgende week woensdag, de 29e.

YUI 3 grafieken komen in de volgende release, en een preview van een aantal vroege werk is al in de Galerij . Tripp Bridges zal zijn op de oproep, de invoering van de nieuwe structuur en laat zien hoe de lessen van YUI 2's Grafieken pakket de nieuwe architectuur op de hoogte, op zoek naar dat evenwicht tussen flexibiliteit en eenvoud. Oh, en had ik al gezegd geen Flash?

Ook aan dek zal zijn Allen Rabinovich het geven van een update over de geweldige werk dat hij heeft gedaan op de yuilibrary.com herontwerp. We hebben alles hier: home page, handleidingen, demo's, tutorials, API docs. De werken. In veel opzichten is het een geheel nieuw verhaal, en een veel betere.

We zullen online van 10u tot 12u PDT. De verbinding zijn identiek zoals gebruikelijk.

1. Inbellen op 1-888-371-8922 (Skype werkt prima voor niet-Amerikaanse deelnemers *)
2. Voer de deelnemer code 47188953 #
3. Word lid van de delen van het scherm sessie (dit wordt u gevraagd de Adobe Connect-plugin te installeren als dit je eerste keer te gebruiken)

En ten slotte, de yuilibrary.com forum thread voor deze Openingsuren is hier . Kijk daar voor notities, interessante afhaalrestaurants, en de opname van het gesprek nadat het is gedaan. Of begint het gesprek vroeg af door het plaatsen van vragen, suggesties voor onderwerpen, of code die je zou recensie wilt.

Vergeet niet in te schrijven op de YUI Kalender en volg @ yuilibrary op Twitter voor de laatste updates op Openingsuren en andere YUI interessantheid.

Hoop je daar te zien!

* - Als Skype is geen optie, me te mailen voor een lokaal nummer.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

In het wild voor 24 september 2010

Als we klaar zijn voor YUIConf 2010 en nog veel meer in de komende maanden, hier zijn enkele van de andere dingen die we hebben kennis te hebben genomen in de grotere YUI wereld:

• YUI Theater Tops NetTuts lijst van must-see F2E Podcasts : Andrew Burgess schrijft over YUI Theater : "Het lijkt erop dat zo vaak als een paar keer per maand, Yahoo! brengt ontwikkelaars op het snijvlak van webtechnologie om hun werknemers op peil te houden datum. Ten behoeve van de rest van ons, worden deze gesprekken opgenomen en gepubliceerd. U vindt de bekende ontwikkelaars zoals Douglas Crockford en Nicholas Zakas, en gesprekken over alles, van de prestaties en toegankelijkheid van JavaScript en het DOM. " #
  
• DigitalInsurance.com (een @ apipkin Site) Powered by YUI 3 : Prolific gallery bijdrage Anthony Pipkin heeft bijgedragen aan de productie van de nieuwe DigitalInsurance.com portal ., aangedreven door YUI 3 #
  
• Progressive Enhancement met niets, maar JS (@ codepo8 op @ davglass) : Christian Heilmann schrijft op Ajaxian: "Progressive enhancement is nog steeds een verwarrende zaak voor veel mensen die zeer enthousiast over de mogelijkheden van JavaScript in de moderne browser omgevingen. Het kan voelen anachronistische om uw oplossingen te schrijven voor een niet-JS-omgeving en dan nog eens versterkt in JavaScript. Ik ben opgegroeid als dat dus voor mij is het een kwestie van het juiste te doen, maar met de wereld van vandaag van JavaScript-bibliotheken en out-of-the-box widgets kan het een belemmering lijken. Voer Dav glas van de YUI team. Hij is het draaien van de concept van geleidelijke verbetering rond in zijn hoofd en als JS minnaar en backend code "endurer" ging hij op weg om dit probleem op te lossen voor eens en altijd op een zuivere JavaScript-manier. " Bekijk het volledige artikel voor meer informatie . #
  
• Meer Overlay Plugins voor YUI 3 van Oliver Andrich : Van GitHub pagina Oliver's: "Overlay Plugins is een verzameling van vijf plugins schreef ik om YUI 3 plugin developement leren in het algemeen. Drie van de vijf plugins min of meer na te bootsen de Overlay Extra's gemaakt door Eric Ferraiuolo .... De vijf plugins zijn:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( Originele bron. ) #
• Reid Burke's YUI Dia's voor HackU aan de Carnegie Mellon : YUI ingenieur (en Yeti auteur) Reid Burke opgezweept een aantal dia's en een YUI 3-gebaseerde slideshow engine voor zijn recente lezing aan de Carnegie Mellon. #
  
• Devcurry op Leren JS uit Crockford en andere goeroes op YUI Theater : Suprotim Agarwal schrijft in devcurry vanmorgen: "In dit bericht, ik zal delen banden van een aantal zeer nuttige JavaScript video's en lezingen die door JavaScript-goeroes, vol informatie, plezier kijken en helemaal gratis! Hoewel het internet staat vol met gratis video's, heb ik gekozen voor slechts een paar van hen, dat vond ik het meest bruikbaar. Maak je klaar om notities te maken als je leert .. Crockford de videocolleges van JavaScript - Douglas Crockford is een JavaScript-architect en speelt een belangrijke rol bij het ​​ontwerpen van nieuwe functies van de taal. Zijn video's zijn een 'must-have' voor elke JavaScript-ontwikkelaar. YUI Theater -.. biedt toegang tot gratis programmering gesprekken door goeroes op JavaScript en web ontwikkeling "Suprotim noemt vervolgens een aantal andere bronnen van inhoud, waaronder andere YUI Theater titels #
  

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!