Interfaz de usuario de Yahoo! Blog (YUIBlog)

Yui es Contratar

Estamos buscando un alto ingeniero de front-end para unirse al equipo de YUI! Usted debe ser un experto en JavaScript y bien versado en varios front-end de las tecnologías. Te encanta resolver problemas complejos a escala masiva, sabe lo que se necesita para diseñar API robusta e intuitiva, y adoptar las mejores prácticas de rendimiento, seguridad, accesibilidad y usabilidad. También tiene excelentes habilidades de comunicación, poseen una gran atención al detalle, y son independientes y con recursos.

Requisitos mínimos de empleo:

• A nivel de expertos JavaScript, HTML, CSS y habilidades.
• Experiencia demostrada en la construcción de componentes reutilizables que son JS performant modular y fácil de mantener.
• La pasión por la construcción y la evangelización de un mundo-clase de front-end de la biblioteca que afecta a millones de personas cada día.
• La familiaridad con los proyectos de software de código abierto, especialmente YUI.
• Informática en Ciencias o experiencia laboral equivalente.

Requisitos recomendados de empleo:

• La profundidad de la experiencia demostrada en uno o más dominios de front-end, tales como móviles, el rendimiento de JavaScript del lado del servidor, o la internacionalización.

Si esto suena como usted, por favor envíe su curriculum vitae y carta de presentación a Yui-puestos de trabajo (arroba) yahoo-inc (punto) com.

Acerca de Yahoo!

Piense acerca de un impacto de 1 de cada 2 personas en línea - en formas innovadoras e imaginativas que son únicamente de Yahoo!. Lo hacemos sólo que cada día, y usted también podría. Después de todo, es grandes pensadores como usted que va a crear la próxima generación de experiencias de Internet para consumidores y anunciantes de todo el mundo. Ahora es el momento para mostrar al mundo lo que tienes. Pon tus ideas a trabajar para más de quinientos millones de personas.

Yahoo! Inc. es un empleador que ofrece igualdad de oportunidades. Para más información o para buscar todas las aberturas de nuestros visite http://careers.yahoo.com .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Anuncio de YUI Compressor 2.4.6

Estamos encantados de anunciar la inmediata disponibilidad de la versión 2.4.6 del compresor de YUI . Esta versión contiene la mayoría de las actualizaciones relacionadas con el manejo del compresor de minificación CSS y procesamiento introduce lote de varios archivos con un solo comando.

CSS minificación

Cabe destacar:

• Corregido los errores de muchos que rompen el compresor y / o los archivos resultantes minified.
• Añadido documentación en lo que hace exactamente el Minifier y hacks CSS que lo tolera.
• Hay un puerto de JavaScript CSS min en caso de que sea más adecuado para su proceso de construcción. Aquí hay también una interfaz de usuario web de prueba que utiliza el puerto de JavaScript, donde se puede experimentar con la Minifier.
• Un número significativo de nuevas pruebas añadido (pero usted puede añadir aún más ).
• Manipulación segura de algunas de las características de CSS que son cada vez más la adopción como las consultas de los medios de comunicación y las transformaciones CSS3.

Procesamiento por lotes

Otra adición bienvenida a El compresor es que ahora puede manejar lotes de archivos. Esto puede reducir significativamente el tiempo de su proceso de construcción tiene, especialmente si usted tiene un gran número de archivos a minify.

Por ejemplo los siguientes comandos minify todo .js y .css archivos y escribir los archivos minified con un "-min.css" sufijo.

  *: '-Min.css. Css $' css $ java-jar yuicompressor.jar-o.
 *: '-Min.js. Js $' js $ java-jar yuicompressor.jar-o. 

Muchas gracias a Stephen Woods, y el equipo de Flickr para esta función!

Enlaces

YUI Compressor 2.4.6 está disponible para su inmediata descarga . Siéntase libre para que nos ayuden a cabo por la presentación de un informe de error o una característica , la escritura de más pruebas , bifurcar el código , o uniéndose a la conversación .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Dirección de usar barra de navegación

Recientemente me encontré con un menú horizontal de navegación con enlaces alineados a la derecha. Como era de esperar, fue un elemento de la lista con float:right y los elementos de la lista con float:left . A pesar de que no hay nada malo con este enfoque, que me inspiró a aprovechar esta oportunidad para hablar sobre la direccionalidad para el diseño.

El costo de los elementos flotantes

Los flotadores no tienen el concepto de direccionalidad, sino que no funcionan como elementos en línea o columnas de la tabla (para los que el dir del atributo es una bala mágica). Con los flotadores, los autores deberán implementar un mecanismo para "intercambiar" los valores cada vez que los cambios en la interfaz ( ltr vs rtl ).

Así que en lugar de usar float , los autores pueden favorecer inline-block . He aquí un ejemplo 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; } 

Tenga en cuenta que el uso de " \ 0 "(sin espacio) en lugar de" \9 "se haría cargo de la Ópera, pero puede no ser tan a prueba de futuro como" \9 "(solo para IE).

A medida que esta página de demostración muestra, en Chrome, Safari y Firefox, el inline-block técnica hace que el diseño de la escritura de modo dependiente (la dirección del flujo coincide con el valor de la dir atributo o el valor inicial si no se especifica la dirección). Por otra s UA, y debido a la falta de IE de apoyo para el selector de atributo (por ejemplo, html[dir="rtl"] ), los autores necesitan para añadir un gancho en el marcado para atender al cambio de dirección. Por ejemplo, para un total grado de compatibilidad:

Para la técnica de flotación:

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

Para la técnica de inline-block:

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

text-align: start | end

A diferencia de left y right , start y end son el modo de escribir las palabras clave de su cargo. En Inglés, start mapas de left y la end se asigna a right . Basándose en start y el end en lugar de left y right permite que algunos navegadores para hacer el intercambio ( ltr / rtl ) de forma automática.

Diferencias entre navegadores y técnicas

En los navegadores que no soportan " start / end "(IE, Opera)

flotan técnica: la dirección de intercambio no cambia nada

inline-block técnica: cambiando la dirección no cambia la alineación del menú, pero los enlaces se muestran en el orden adecuado

En los navegadores que son compatibles con " start / end "(Chrome, Safari, Firefox)

flotan técnica: la dirección de intercambio no cambia nada

inline-block técnica: cambiando la dirección es suficiente para cambiar la dirección de ambos en el menú y los enlaces

¡Eso es! La próxima vez que usted tiene que elementos de estilo horizontal, recuerde dar display:inline-block o display:table intentarlo.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI tres "bloques de construcción, módulos y aplicaciones" Taller de venir a Portland, y gratis!

YUI, junto con el Yahoo! Developer Network , se complace en patrocinar a un gratuito YUI tres "bloques de construcción, módulos y aplicaciones" Taller de Domingo, 01 de mayo 2011 en Portland, Oregon. Esta es una gran manera de dar inicio a su tiempo en JSConf , pero no es necesario un billete de JSConf para asistir al taller. Todos están invitados a este evento gratuito!

Que estará acompañado por su compañero de Yahoo! Cordero Gonzalo para un día completo de entrenamiento práctico, donde usted aprenderá cómo construir las clases con estado, plugins y widgets que utilizan los YUI 3 componentes de la infraestructura, empaquetarlos en módulos reutilizables, y ensamblarlos en una aplicación sencilla. La clase de la mañana se centrará en lo que los bloques de construcción (como la base y el Widget) tiene que ofrecer y cuándo y cómo usarlos. La clase de la tarde voy a entrar en las configuraciones más avanzadas de la clase, la configuración del gestor de combinar los módulos alojados, y la creación de controladores de la aplicación de relacionar sus clases de módulos distintos y API a través de eventos personalizados.

El espacio es limitado, así que reserve su asiento hoy en http://training.bocoup.com/PreJSConf-2011/

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Modo edición rápida de YUI DataTable 3

A pesar de que YUI DataTable 3 todavía no tiene edición en línea de las células individuales, es relativamente fácil de implementar el modo de edición rápida. La edición rápida plugin para DataTable en la Galería de YUI 3 permite a todos los valores visibles en un DataTable que se va a editar de forma simultánea.

( Haga clic en la captura de pantalla para jugar con este ejemplo .)

Información general

Al igual que el YUI versión 2 , la idea central de modo de edición rápida es que cambiar todos los formateadores de células nuevas, que pueblan las células con elementos de formulario, por ejemplo, campos de entrada o listas desplegables. Esto se hace cuando start() se llama, en base a la configuración descrita a continuación. Después de que el usuario haya terminado, usted puede llamar a getChanges() para obtener los valores cambiados y luego persisten ellos. Para salir del modo de edición rápida, llame a cancel() . (Se llama así en lugar de cancelar la parada para recordarles que descarta todos los cambios.)

Puesto que el módulo de Edición Rápida galería es un plugin para DataTable, que hay que conectarlo a su tabla de datos antes de poder usarlo:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Esto almacena el plugin en el qe miembro de la tabla de datos, por lo que debe llamar a las funciones del plug-in de esta manera:

 my_table.qe.start ();

Configuración

Quick Edit añade dos nuevos atributos de configuración a todas las columnas: quickEdit y qeFormatter .

Si una columna de quickEdit se define la propiedad, la columna será editable en el modo de edición rápida. Para aceptar todos los valores predeterminados, simplemente puede establecer quickEdit:true . Para un mayor control, puede pasar un objeto con las siguientes propiedades:

formatter

El formateador de celular que hará que un campo de forma adecuada: <input type="text">, <textarea> o <select>. De forma predeterminada, el formateador de células Y.Plugin.DataTableQuickEdit.textFormatter se utiliza para todas las células para producir los elementos de entrada. Para obtener un textarea del elemento, configurar una columna de usar Y.Plugin.DataTableQuickEdit.textareaFormatter lugar.

validation

Validación de configuración para cada campo en la columna.

css

CSS clases que codifican las reglas básicas de validación:

yiv-required

El valor no debe estar vacío.

yiv-length:[x,y]

Cadena debe ser al menos x caracteres y en la mayoría de y caracteres. Al menos uno de X e Y debe ser especificada.

yiv-integer:[x,y]

El valor entero debe ser al menos x y en más y . x y y son opcionales.

yiv-decimal:[x,y]

El valor decimal debe ser al menos x y en más y . Los exponentes no están permitidos. x , y y son ambos opcionales.

fn

Una función que se llama con el objeto DataTable como elemento de su alcance y forma de la célula como el argumento. Devuelve true si el valor es válido. De lo contrario, llame a this.displayMessage(...) para mostrar un error y luego devuelve falso.

msg

Un mapa de los tipos de mensajes que se muestran cuando una regla de validación de base o de expresiones regulares no. Los tipos válidos son: required , min_length , max_length , integer , decimal , y regex . No hay ningún valor predeterminado para el tipo de regex , por lo que debe especificar un mensaje si se configura una validación de expresiones regulares. Los mensajes de error por defecto para los otros tipos se almacenan en Y.FormManager.Strings (proporcionado por la galería-formmgr-css-validación ) y se puede reemplazar y / o localizada.

regex

Expresión regular que el valor debe satisfacer para ser considerado válido.

A veces, una columna no editable deben ser prestados de manera diferente en el modo de edición rápida. El mejor ejemplo es una columna que contiene un enlace, ya que la navegación fuera de la página, mientras que en el modo de edición rápida puede ser desastroso. Para eliminar el enlace en Edición rápida, configurar qeFormatter para la columna que Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Para obtener las direcciones de correo electrónico, utilice Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . También puedes escribir propia costumbre, de sólo lectura formateador. Sólo tiene que seguir las reglas normales para la construcción de un formateador de células DataTable.

Características que faltan

Debido a un error en YUI DataTable 3.3.0 , el td elemento pasa a un formateador de la columna es en realidad de la columna anterior. Esto hizo demasiado molesto para apoyar la copia de abajo, donde un botón en la primera fila le permite copiar el valor a todas las demás filas.

El error también se requiere una revisión completa de las células básicas formateadores rápidos de edición para regresar texto en lugar de manipular el DOM. Esta es la razón por formateadores personalizados de células no están oficialmente soportados en esta versión inicial. Si usted es aventurero, todavía se pueden construir, pero tenga en cuenta que tendrá que volver a escribir, incluyendo la adición de soporte para la copia de abajo, una vez que el error en DataTable es fijo.

Sobre el autor: John Lindal ( @ jafl5272 en Twitter) es uno de los ingenieros de plomo en la construcción de los cimientos sobre los que Yahoo! APT se construye. Anteriormente, trabajó en el Yahoo! Publisher Network.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI: Horario jue 21 de abr

YUI Loader Servicio Remoto

Desde hace un tiempo, Reid Burke ha estado trabajando en un servicio basado en Node.js para acelerar el proceso de cálculo y solicitando las dependencias del módulo de YUI 3. Lo tiene muy cerca de abotonado en este punto, y quiere compartir lo que tiene y obtener sus ideas sobre lo que haría aún awesomer.

El problema

Desde hace algún tiempo hemos sabido que, al mismo tiempo muy conveniente para los desarrolladores, el Y.use( modules ,...) método introduce un retraso innecesario en la vuelta a la hora de su código de implementación. Resulta que es mucho trabajo el cálculo de los árboles de dependencias, y los metadatos el único que puede ser una carga sobre la huella de la memoria global de la página. El método tradicional de incluir el archivo de las semillas de YUI ( yui-min.js ), entonces bootstrapping con YUI().use(...) primero le dice a Yui que cargar el gestor de módulos que se cargan con los metadatos de la dependencia para toda la biblioteca de su origen, entonces tiene cargador de calcular la lista completa de los módulos necesarios sobre la base de su use(...) declaración en la máquina cliente.

La solución

El Servicio gestor remoto mueve este cálculo en el servidor, por lo que el código de inicialización más rápido y reducir el perfil de su sitio web la memoria del cliente debido a que el gestor de metadatos y ya no son necesarios en la máquina cliente. También sirve como el controlador de combo, regresando todo el código directamente en lugar de enrutamiento a través del servicio combinado yahooapis (menos tráfico de red), y es capaz de ser desplegado en un servidor Node.js en su dominio.

El plan es tener demostración Reid lo que está funcionando hoy en día, incluyendo algunos datos bastante impresionante de su uso en yuilibrary.com , a continuación, abra la convocatoria a los comentarios y peticiones. Vea lo que el futuro de YUI Loader está pareciendo!

Fecha y detalles

Vamos a estar en línea 10 a.m.-11 a.m. PDT jueves. Los detalles de la conexión son los mismos, como de costumbre.

1. Marque 1-888-371-8922 para (Skype funciona muy bien para no estadounidenses participantes *)
2. Ingrese el código de participante 47188953 #
3. Únete a la sesión de compartir pantalla (esto le preguntará si desea instalar el plugin de Adobe Connect, si esta es tu primera vez con él)

* - Si Skype no es una opción, enviarme un email o me coge (ls_n) en el canal de IRC # yui en freenode para un número local.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Al anunciar YUI 2.9.0

El equipo de YUI se complace en anunciar el lanzamiento de la versión 2.9.0 de YUI. YUI 2.9.0 es la versión última corrección de errores en la línea de código de YUI 2 marca su transición hacia el modo de mantenimiento. En el futuro, esperamos ver lanzamientos consistentes en correcciones de errores críticos o correcciones para los problemas de compatibilidad del navegador resultantes de la actualización de los navegadores de la EGB . Estamos realmente contentos de enfocar mejor nuestra atención en la próxima versión 3.4.0 de YUI.

Para tener una idea de los cambios incluidos en YUI 2.9.0, puede revisar el Compendio ReadMe que resume todas las adiciones hechas por los desarrolladores de componentes a sus respectivos archivos Léame para esta versión. También puede ver la lista de entradas fijadas en YUI 2.9.0 para obtener un resumen de las correcciones de errores y solicitudes de mejoras realizadas en este comunicado.

Nos gustaría recordar a todos que al comenzar el proceso de desaprobación YUI 2.x, todas las versiones publicadas se seguirá alojado en CDN de Yahoo y el código base seguirá siendo el forkable GitHub.com .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!