Podcast #3 Una semana más tarde

Episodio 3   —  noviembre 23 de 2014

Deisbel es papá por primera vez, así que una semana más tarde de lo previsto continuamos hablando sobre optimización de sitios web.

En este episodio:

• Deisbelito y su canción infantil: Papito, niñito y los platicos
• ASP.NET 5 - Al fin con soporte para algo más que Windows
• Sobre el nuevo TagHelpers de ASP.NET 5, aquí hay una pequeña introducción
• Otra vez el mismo enlace que pusimos en el episodio anterior: Estamos descargando la velocidad de Internet por la taza del baño
• Introducción a la utilización del cache
• Algo más sobre el cache: Las personas no borran el cache, y es importante tenerlo en cuenta
• A Beginner's Guide to HTTP Cache Headers
• Priorizar siempre el contenido visible en la página
• El orden de los ficheros JavaScript y CSS en una página es importante
• Cuidado con el uso de ngCloak en AngularJS
• Santiago sigue pensando que Google Docs le gusta más que Microsoft Word
• Aún no queda claro que Samsung venda más teléfonos que Apple. Hay que buscar más
• La percepción de la rapidez de nuestras páginas es tan importante como la velocidad real de las mismas
• One Step Ahead: Improving Performance with Prebrowsing
• Deisbel nombrado "Thesaurus Oficial del Podcast"
• ¿Cómo pronuncian los españoles la palabra "speed"?
• PageSpeed Insights
• WebPageTest.org

La frase del día: "Somos cubanos, y tenemos un poquito de españoles y un poquito de americanos".

Podcast #2 Completamente en el piso

Episodio 2   —  noviembre 9 de 2014

Entre todos, poco a poco, estamos descargando la velocidad de Internet por la taza del baño, así que nada mejor que dedicar un poco de tiempo a hablar de cómo optimizar nuestros sitios web.

En este episodio:

• Todavía quedan algunos "básicamente", aunque muchos menos que en el episodio anterior
• Aparentemente hay un bug con la utilización de SSL y multiples dominios en App Engine
• Dart entra en la lista de lenguajes que funcionan en App Engine
• Página principal de Dart
• El uso de Dart aún no aparece en githut.info. (Algunos comentarios sobre el sitio de githut.info)
• HTTP Archive
• LG G Watch (¡54 MB de imágenes!)
• Análisis del sitio del LG G Watch
• Usuarios de 2G representan un 85% de las subscripciones móviles
• Un segundo extra de retardo cuesta un estimado de $1.6 billones de dólares al año a Amazon (los números del podcast están completamente equivocados... las cosas de abusar de la memoria)
• IcoMoon para crear icon fonts
• Resulta ser que "escuchante" no existe; se dice "oyente". Tampoco "reducimos", sino "redujimos". Por ultimo, se dice "minimizar"
• Cómo referenciar imágenes en un sprite utilizando CSS
• Google Hosted Libraries para referenciar bibliotecas populares de JavaScript
• Scott Hanselman hablando de la situación de las URLs cortas
• Santiago hablando de Google App Engine en We Developers
• Queda demostrado que las notas no se pueden traer en papel

Problemas con el evento .scroll() de jQuery sobre IE?

Programación > CSS

Como siempre! nuestro “amigo” Internet Explorer (IE) dándonos problemas.

Algo tan simple como tener un DIV con un evento “scroll” de jQuery no funciona para IE.

Pongamos un conjunto basico de elementos
<div id="pages"></div>

en CSS algo como:
#pages { overflow: auto; position: absolute; height: 290px; width: 100%;}

y en un script algo como:
$("#content #pages").scroll(function () { //code});

nos dará como resultado que funciona en todos los Navegadores menos IE. La conclusión que hemos sacado luego de algunas pruebas es que IE hace que el evento solo responda sobre las áreas donde exista algún elemento visual (traduzcase como alguna propiedad que realmente lo obligue a renderizar algo porque un DIV vacío no renderiza nada visual).

Si dentro del DIV ponemos algún elemento visual o sencillamente le asignamos un color pues el evento comienza responder. Pero si no puedo poner un color de fondo porque no va con el diseño de la página pues que hago?

Una solución simple que se me ocurrió es ponerle como background una imagen transparente de 1 pixel de ancho por alto y que se repita. De esta forma consigo todo lo que quiero:
- Que el DIV continúe sin “contenido visual” como lo necesito.
- Que IE lo asuma como que posee “contenido visual” y responda al evento en toda el área que abarca el DIV.

El CSS quedaría en algo como:
#pages {
overflow: auto; position: absolute; height: 290px; width: 100%;
background: url(../images/desktop/common/scroll-pages-bg-fix-to-ie.png) repeat;
}

Lo mismo pudiera aplicarse para los demás eventos de scroll como “mousewheel” aunque no le he probado.