Blog Interface utilisateur Yahoo! (YUIBlog)

YUI est d'embauche

29 avril 2011 à 12:58 pm par Jenny Donnelly | En développement , les emplois d'ingénierie Frontend à Yahoo | Les 2 Commentaires

Nous recherchons pour une personne âgée frontal ingénieur pour rejoindre l'équipe YUI! Vous devez être un expert en JavaScript et le bien-versés dans diverses technologies front-end. Vous aimez résoudre des problèmes complexes à grande échelle, de savoir ce qu'il faut pour concevoir API robuste et intuitif, et d'embrasser les meilleures pratiques de la performance, la sécurité, l'accessibilité et la facilité d'utilisation. Vous avez également d'excellentes aptitudes à la communication, de posséder une grande attention aux détails, et sont indépendants et débrouillards.

Qualifications professionnelles minimales:

• Au niveau des experts JavaScript, HTML, CSS et les compétences.
• Expérience confirmée éléments de construction JS réutilisables qui sont modulaire, performant, et maintenable.
• Une passion pour la construction et de l'évangélisation dans un monde-classe avant la fin de bibliothèque qui touche des millions de personnes chaque jour.
• Familiarité avec les projets de logiciels open-source, en particulier YUI.
• Diplôme en informatique ou expérience professionnelle équivalente.

Qualifications professionnelles privilégiées:

• La profondeur de l'expertise avérée dans un ou plusieurs frontaux des domaines tels que la téléphonie mobile, la performance, JavaScript côté serveur, ou de l'internationalisation.

Si cela sonne comme vous, s'il vous plaît envoyez votre CV et lettre de motivation à yui-jobs (at) yahoo-inc (dot) com.

À propos de Yahoo!

Pensez à un impact de 1 sur tous les 2 personnes en ligne - par des moyens novateurs et imaginatifs qui sont typiquement Yahoo!. Nous faisons exactement ce que chaque jour, et vous pourriez aussi. Après tout, c'est grands penseurs comme vous qui créeront la prochaine génération d'expériences sur Internet pour les consommateurs et les annonceurs à travers le monde. Maintenant c'est le moment de montrer au monde ce que vous avez. Mettez vos idées pour travailler pour plus d'un demi milliard de personnes.

Yahoo! Inc est un employeur offrant l'égalité. Pour plus d'informations ou pour rechercher l'ensemble de nos ouvertures s'il vous plaît visitez http://careers.yahoo.com .

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Annonçant YUI Compressor 2.4.6

26 avril 2011 à 10:09 am par Stoyan Stefanov | En développement , de performance | 10 commentaires

Nous sommes heureux d'annoncer la disponibilité immédiate de la version 2.4.6 de l' Compresseur YUI . Cette version contient surtout des mises à jour liées à la manipulation du compresseur de minification CSS et le traitement par lots introduit de plusieurs fichiers en une seule commande.

Minification CSS

Faits saillants comprennent:

• Correction de bugs nombreux qui brisent le compresseur et / ou les fichiers résultants minified.
• Ajouté documentation sur ce qu'est exactement l'minifier fait et aussi qui hacks CSS elle tolère.
• Il ya un port de JavaScript CSS min au cas où il est plus adapté à votre processus de construction. Voici également une interface web de test qui utilise le port JavaScript, où vous pouvez expérimenter avec la minifier.
• Un nombre important de nouveaux tests ajouté (mais vous pouvez ajouter encore plus ).
• La manipulation sans danger de certaines fonctionnalités CSS qui deviennent de plus l'adoption telles que les requêtes des médias et CSS3 transformations.

Le traitement par lots

Un autre ajout bienvenu à compresseur est qu'il peut maintenant gérer des lots de fichiers. Cela peut réduire considérablement le temps de votre processus de construction prend, surtout si vous avez un grand nombre de fichiers à rapetisser.

Par exemple, les commandes suivantes rapetisser tous .js et .css fichiers et écrire les fichiers minified avec un "-min.css" suffixe.

  $ Java-jar yuicompressor.jar-o '. Css $:-min.css' * css.
 $ Java-jar yuicompressor.jar-o '. Js $:-min.js' * js. 

Merci à Stephen Woods et l' équipe de Flickr pour cette fonctionnalité!

Liens

YUI Compressor 2.4.6 est disponible pour immédiate téléchargement . N'hésitez pas à nous aider par le dépôt d'une demande de bug ou une fonctionnalité , d'écrire plus de tests de , bifurquer le code ou se joindre à la conversation .

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Direction de l'environnement barre de navigation

25 avril 2011 à 9:12 am par Thierry Coblence | En CSS 101 et de développement | Les 4 Commentaires

Je suis récemment tombé sur un menu horizontal de navigation avec liens alignés à droite. Comme on pouvait s'y attendre, c'était un élément de la liste avec float:right et les éléments de la liste avec float:left . Même si il n'y a rien de mal avec cette approche, il m'a inspiré pour profiter de cette occasion pour discuter de la directionnalité de mise en page.

Le coût des éléments flottants

Flotteurs n'ont aucune idée de la directionnalité, ils ne fonctionnent pas comme des éléments en ligne ou des colonnes de table (pour lesquels la dir attribut est un miracle). Avec flotteurs, les auteurs doivent mettre en œuvre un mécanisme de "swap" valeurs chaque fois que les modifications de l'interface ( ltr vs rtl ).

Donc, au lieu d'utiliser float , les auteurs peuvent favoriser inline-block . Voici un exemple simple:

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 

Notez que l'utilisation " \ 0 "(sans espace) au lieu de" \9 "prendrait soin de l'Opéra, mais peut-être pas aussi la preuve que l'avenir" \9 "(IE seulement).

Comme cette page de démonstration montre, dans Chrome, Safari et Firefox, le inline-block technique permet la mise en page d'écriture en mode charge (la direction de l'écoulement correspond à la valeur de la dir attribut ou la valeur initiale si aucune direction n'est spécifiée). Pour les autres UC s, et en raison du manque d'IE de soutien pour l'attribut (c.-à-sélecteur html[dir="rtl"] ), les auteurs ont besoin d'ajouter un crochet dans le balisage pour répondre au changement de direction. Par exemple, pour plein de grade compatibilité:

Pour la technique float:

 .rtl ul { float: left; } .rtl ul li { float: right; } 

Pour la technique inline-block:

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ } 

text-align: start | end

Contrairement à left et right , start et end sont écrit en mode mots-clés à charge. En anglais, start cartes pour left et end des cartes à right . S'appuyant sur start et de end plutôt que de left et de right permet à certains navigateurs de faire la permutation ( ltr / rtl ) automatiquement.

Les différences entre les navigateurs et les techniques

Dans les navigateurs qui ne supportent pas " start / end "(IE, Opera)

flottent technique: direction permutation ne change rien

inline-block technique: échange de la direction ne change pas l'alignement du menu, mais les liens sont affichés dans le bon ordre

Dans les navigateurs qui prennent en charge " start / end "(Chrome, Safari, Firefox)

flottent technique: direction permutation ne change rien

inline-block technique: échange de la direction est suffisant pour échanger la direction à la fois le menu et les liens

Ça y est! La prochaine fois que vous avez à des éléments de style horizontalement, n'oubliez pas de donner display:inline-block ou display:table un essai.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI 3 "Building Blocks, modules, et applications" atelier qui vient à Portland, et gratuit!

19 avril 2011 à 15:32 par Luke Smith | Dans le développement , les événements YUI | Les 6 commentaires

YUI, conjointement avec l' Yahoo! Developer Network , est heureux de parrainer un gratuit YUI 3 "Building Blocks, modules, et applications" Atelier sur le dimanche 1 mai 2011 à Portland, Oregon. C'est une excellente façon de coup d'envoi de votre temps à JSConf , mais vous n'avez pas besoin d'un billet JSConf assister à l'atelier. Tous sont invités à cet événement gratuit!

Je vais être rejoint par son compatriote Yahoo! Cordero Gonzalo pour une journée complète de formation pratique où vous apprendrez à construire des classes stateful, plugins, widgets et en utilisant les composants d'infrastructure YUI 3, les emballer dans des modules réutilisables, et de les assembler dans une application simple. La classe du matin se concentrera sur ce que les blocs de construction (tels que Base et Widget) ont à offrir et quand et comment les utiliser. La classe l'après-midi entrer dans des configurations plus avancées de la classe, la mise en place du chargeur de combiner vos modules hébergés, et la mise en place des contrôleurs de l'application de relier vos différents classes de module et les API via des événements personnalisés.

Les places sont limitées, alors réservez votre place dès aujourd'hui à http://training.bocoup.com/PreJSConf-2011/

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Le mode Edition rapide pour YUI 3 DataTable

19 avril 2011 à 15h20 par John Lindal | En développement , YUI 3 Galerie | 1 Commentaire

Même si YUI 3 DataTable ne possède pas encore d'édition en ligne de cellules individuelles, il est relativement simple à mettre en œuvre le mode Edition rapide. Le QuickEdit plugin pour DataTable dans le Galerie YUI 3 permet toutes les valeurs visibles dans un DataTable d'être édités simultanément.

( Cliquez sur la capture d'écran pour jouer avec cet exemple .)

Vue d'ensemble

Comme avec la version 2 YUI , l'idée centrale de mode Edition rapide est d'échanger sur tous les formateurs de cellules avec de nouvelles qui peuplent les cellules avec des éléments de formulaire, par exemple, les champs de saisie ou menus déroulants. Pour ce faire, lorsqu'il start() est appelé, sur la base de la configuration décrite ci-dessous. Après que l'utilisateur est terminée, vous pouvez appeler getChanges() pour obtenir les valeurs modifiées, puis les persistent. Pour quitter le mode Edition rapide, appelez cancel() . (Il est nommé annuler au lieu d'arrêter de vous rappeler qu'il supprime toutes les modifications.)

Depuis le module galerie Quick Edit est un plugin pour DataTable, vous avez besoin de le brancher à votre datatable avant que vous puissiez l'utiliser:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Cette stocke le plugin dans le qe membre de la table de données, de sorte que vous devez appeler les fonctions du plugin comme ceci:

 my_table.qe.start ();

Configuration

Quick Edit ajoute deux attributs de la nouvelle configuration, toutes les colonnes: quickEdit et qeFormatter .

Si une colonne de quickEdit propriété est définie, la colonne sera modifiable en mode Edition rapide. Pour accepter tous les paramètres par défaut, vous pouvez simplement mettre quickEdit:true . Pour plus de contrôle, vous pouvez passer un objet avec les propriétés suivantes:

formatter

Le formateur cellule qui rendra un champ de formulaire approprié: <input type="text">, <textarea>, ou <select>. Par défaut, le formateur cellule Y.Plugin.DataTableQuickEdit.textFormatter est utilisé pour toutes les cellules à produire des éléments d'entrée. Pour obtenir un textarea élément, configurer une colonne à utiliser Y.Plugin.DataTableQuickEdit.textareaFormatter lieu.

validation

Validation de configuration pour chaque champ dans la colonne.

css

Classes CSS codant les règles de validation de base:

yiv-required

Valeur ne doit pas être vide.

yiv-length:[x,y]

La chaîne doit être au moins x caractères et dans la plupart y caractères. Au moins un de x et y doivent être spécifiées.

yiv-integer:[x,y]

La valeur entière doit être au moins x et au plus y . x et y sont tous deux en option.

yiv-decimal:[x,y]

La valeur décimale doit être au moins x et au plus y . Exposants ne sont pas autorisés. x et y sont tous deux en option.

fn

Une fonction qui sera appelée avec le DataTable dans sa portée et l'élément de formulaire de la cellule de l'argument. Retourne vrai si la valeur est valide. Sinon, appelez this.displayMessage(...) pour afficher une erreur et alors retourner faux.

msg

Une carte de types à des messages qui seront affichés quand une règle de validation de base ou regex échoue. Les types valides sont: required , min_length , max_length , integer , decimal , et regex . Il n'ya pas de défaut pour le type regex , donc vous devez spécifier un message si vous configurez une validation regex. Les messages d'erreur par défaut pour les autres types sont stockés dans Y.FormManager.Strings (fourni par la galerie-formmgr-css-validation ) et peut être remplacée et / ou localisée.

regex

Expression régulière que la valeur doit satisfaire pour être considéré comme valide.

Parfois, une colonne non-modifiable doit être rendue différemment au cours de mode Edition rapide. Le meilleur exemple est une colonne contenant un lien, puisque naviguer loin de la page tout en mode Edition rapide peut être désastreux. Pour supprimer le lien au cours de Quick Edit, configurer qeFormatter pour la colonne pour être Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Pour les adresses e-mail, utilisez Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Vous pouvez également vous écrire personnalisé, en lecture seule formateur. Il suffit de suivre les règles normales pour la construction d'un formateur de cellules DataTable.

Des éléments manquants

En raison d'un bogue dans YUI 3.3.0 DataTable , le td élément passé à un formateur est en fait la colonne de la colonne précédente. Ce fait-il trop gênant pour le copier vers le bas, où un bouton dans la première rangée vous permet de copier la valeur vers le bas pour toutes les autres lignes.

Le bug a également besoin d'une refonte complète des formateurs de base rapides de cellules Modifier le texte pour revenir au lieu de manipuler le DOM. C'est pourquoi formateurs de cellules personnalisés ne sont pas officiellement pris en charge dans cette version initiale. Si vous êtes aventureux, vous pouvez toujours les construire, mais gardez à l'esprit que vous aurez besoin de les réécrire, y compris l'ajout à l'appui pour la copie vers le bas, une fois que le bogue dans DataTable est fixé.

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur ​​lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI: Heures d'ouverture jeu. Apr 21st

19 avril 2011 à 1:39 am par Luke Smith | Dans le développement , les horaires d'ouverture | Comments Off

YUI distance Loader service

Pendant un certain temps maintenant, Reid Burke a travaillé sur un service basé sur Node.js pour accélérer le processus de calcul et de demander des dépendances de modules dans YUI 3. Il a assez proche de l'boutonné à ce point, et qui veut partager ce qu'il a obtenu et vos idées pour ce qui allait le rendre encore Awesomer.

Le problème

Pendant un certain temps maintenant, nous avons connu que, tandis que vraiment pratique pour les développeurs, Y.use( modules ,...) méthode introduit un retard inutile dans le spin up moment de votre code d'implémentation. Il s'avère que c'est beaucoup de travail calcul des arbres de dépendance, et les métadonnées seul peut être lourde sur l'empreinte globale de la mémoire de votre page. La méthode traditionnelle de semences, y compris le fichier YUI ( yui-min.js ), puis d'amorçage avec YUI().use(...) première raconte YUI pour charger le module loader, qui est aux prises avec des métadonnées de dépendance pour la totalité de la bibliothèque dans sa source-alors Loader calculer la liste complète des modules requis en fonction de votre use(...) la déclaration sur la machine cliente.

La solution

Le Service chargeur distant déplace ce calcul sur le serveur, ce qui rend votre code d'initialiser plus rapidement et de réduire le profil de votre site client de mémoire car les métadonnées et Loader ne sont plus nécessaires sur la machine cliente. Il sert également en tant que gestionnaire de liste déroulante, de renvoyer tout le code directement plutôt que par le biais de routage au service combo yahooapis (moins de trafic réseau), et est capable d'être déployée sur un serveur Node.js sur votre domaine.

Le plan est d'avoir démo Reid ce qui fonctionne aujourd'hui, y compris quelques statistiques assez impressionnantes de son utilisation sur yuilibrary.com , puis ouvrez l'appel à commentaires et demandes. Venez voir ce que l'avenir de YUI Loader est ressemblant!

Time & Détails

Nous serons en ligne dix heures-11 heures HAP jeudi. 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 États-Unis non participants *)
2. Entrez le code 47188953 # participant
3. S'inscrire à la session de partage d'écran (ce qui vous invite à installer le plugin Adobe Connect si c'est votre première fois à l'aide)

* - Si Skype n'est pas une option, écrivez-moi ou prenez-moi (ls_n) dans le canal # yui IRC sur freenode pour un numéro local.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Annonçant YUI 2.9.0

13 avril 2011 à 17:28 par Jenny Donnelly | En développement | Les 11 commentaires

L'équipe de YUI est ravie d'annoncer la sortie de la version 2.9.0 YUI. YUI 2.9.0 est la version bug fix sur la dernière ligne de code 2 YUI marquant la transition en mode maintenance. Aller de l'avant, il faut s'attendre à voir les communiqués de composés de seulement des corrections de bugs critiques ou des corrections pour des problèmes de compatibilité du navigateur résultant de mises à jour de navigateurs dans le SGB . Nous sommes vraiment excités pour mieux concentrer notre attention sur la prochaine version de YUI 3.4.0.

Pour avoir une idée des modifications incluses dans YUI 2.9.0, vous pouvez consulter le fichier Lisez-moi Digest qui résume tous les ajouts faits par les développeurs de composants à leurs fichiers Lisez-moi respectives pour cette version. Vous pouvez également consulter la liste des billets fixés dans YUI 2.9.0 pour un résumé des corrections de bugs et demandes d'améliorations accomplies dans ce communiqué.

Nous aimerions rappeler à tous que que nous commençons le processus de dépréciation YUI 2.x, toutes les versions publiées continueront d'être hébergé sur Yahoo CDN et le code de base continuera d'être forkable sur GitHub.com .

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!