La Web notification API nos permite mandar notificaciones a los usuario a como lo hacen las app nativas.
Para usar primero necesitamos que el usuario de permiso con el siguiente codigo:
Notification.requestPermission(function(status){// status is "granted", if accepted by uservar notificationMsg =new Notification('Title',{
body:'I am the body text!'});});
Una vez con el permiso, usamos el objecto Notificacion para crear un instancia del mensaje que queremos usar. Mas adelante si necesitamos verificar este permiso de nuevo podemos consulta la propiedad "permission", que puede tener los valores de : "default, granted, denied"
Notification.permission
Esta API comunmente se usa en conjunto con los services worker y push API, para notificar de la manera en como lo hacen las app nativas cuando no tienes la app abierta
Comunmente esta API es usada en conjunto con la API Service worker, pero puedes usarlo independientemente aunque no he encontrado un ejemplo de su uso fuera de esta API. Segun la definicion se usa para guardar objectos "Request" y "Response", esto significa que puedes dar las peticiones que haces al server y tambien las respuestas del server.
Una parte importante a saber que casi todos los metodos de esta API usan promesas. Para crear un espacio donde cachear todos nuestros assets solo necesitamos llamar este metodo del objecto "caches"
caches.open('test-cache').then(function(cache){// Cache is created and accessible});
El nombre 'test-cache' es una namespace o identificador de la cache que hemos creado. De esta manera podemos usarla luego.
Para agregar elementos a la cache creada se usa comunmente los metodos "Add" y "addAll".
cache.add('/sw-test/index.html').then(function(){//request have been added to the cache});
cache.addAll(['/', '/images/logo.png']).then(function(){//requests have been added to the cache});
La diferencia es que en la segunda se pasa un arreglo de urls. Algo que destacar aqui es que usar el metodo "add" es lo mismo que usar fetch de formal normal con put de esta manera:
En el ejemplo anterior, estamos buscando el objecto en cache que correspondo con la peticion a 'page/1'
Otros usos comunes serian leer y buscar:
caches.open('test-cache').then(function(cache){
cache.delete('/page/1');});
caches.keys().then(function(cacheKeys){
console.log(cacheKeys);// Get all the namespace created});
caches.delete('test-cache').then(function(){
console.log('Cache successfully deleted!');});
Dentro de un service worker, el proceso seria algo asi:
El service worker intercepta todas las peticiones al server, ya sean ajax o cargar otras paginas web.
Una vez interceptada la peticion, revisamos en nuestra cache si esa peticion ya esta en la cache
Si es asi devolvemos el objecto en cache.
Si no dejamos que la peticion siga su curso, al terminar la metemos al cache.
Ejemplo de esto:
//trigger on url changes and requests to the server
serviceWorker.addEventListener('fetch',function(event){//search in the cache for the request that is in progressvar cacheFound = caches.match(event.request).then(function(response){if(response){//return the object cachedreturn response;}else{//if not, we make the normal requestreturn fetch(event.request);}});//we pass the promise
event.respondWith(cacheFound);});
Las promesas son ahora la manera preferida de trabajar y en el futuro sera muy pocos los casos en los que necesitaras una callback. jQuery tiene su propio sistema de promesas.
Pero ahora tenemos una API promise nativa que podemos usar. Su uso es muy sencillo:
var promise =new Promise(function(resolveFn, rejectFn){//you can do here operations and later decided if resolve or reject the promise//using the objectssetTimeout(function(){
resolveFn(10);},3000);});//when is resolve
promise.then(function(result){
console.log(result);});//when is rejected
promise.catch(function(result){
console.log(result);});
Despues de haber instanciado el objecto "Promise" tienes los metodos "resolveFn" y "rejectFn" los cuales puedes ejecutar cuando tu quieras en un futuro, los cuales van a ejecutar los metodos pasados a "then" y "catch".
Un interesante metodo de "Promise" es "all", el cual recibe un arreglo de promesas y ejecuta "then" cuando todas han sido "resolve".
Promise.all([promise1, promise2]).then(function(results){// Both promises resolved}).catch(function(error){// One or more promises was rejected});
Ahora ya no usamos Ajax para hacer peticiones al server ahora usamos Fetch. Por que ? por que nos permite usar promesas en lugar de callbacks, permitiendo un codigo mas limpio.
Una peticion con fetch basica es de la siguiente manera:
fetch('./api/some.json').then(function(respond){//exito}).catch(function(err){//Error en la peticion});
La promesa se mira en accion con los metodos "then" y "catch", a los cuales se le pasa metodos para ser ejecutados cuando terminen.
Then : Es ejecutado cuando la peticion termina correctamente.
catch: Es ejecutado cuando en la peticion ocurrio un error.
Fetch retorna un objecto stream cuando la peticion es exitosa, el cual tiene muchos metodos para usar. Puedes consultarlos aqui. El ejemplo completo seria asi:
fetch('./api/some.json').then(function(response){if(response.status !==200){
console.log('Looks like there was a problem. Status Code: '+
response.status);return;}// Examine the text in the response
response.json().then(function(data){
console.log(data);});}).catch(function(err){
console.log('Fetch Error :-S', err);});
Otras propiedades interesantes del objecto response son:
Hace pocos dias tuve la necesidad de crear una previsualización de un panorama google streetview usando un input file, esto fue para el proyecto de Tours virtuales . Por que muchos usuarios estaban subiendo imagenes incorrectas y hasta que eran procesadas podian ver los resultados finales. Esta era tediso asi que , he creado una funcionalidad de previsualización.
En el input file definimos un metodo que sera llamado "createPreview" cuando el input cambie
"createPreview" usan la API FileReader para leer el archivo
Creamos la instancia de FileReader y definimos 2 metodos para escuchar los eventos: "onload" y "onprogress"
onload se dispara cuando FileReader lee completamente el archivo, pero la imagen aun no ha sido cargada
Para cargar la imagen creamos una imagen con la Image API, al igual que con FileReader podemos definier un metodo para correrlo cuando la imagen ha sido cargada con "onload"
Despues solo usamos canvas para crear un objecto donde poner esta imagen. Esta parte es la mas importante por que aqui se redimensiona la imagen a 1024x512. De esta manera evitamos que el navegador se congele, por si el usuario ingresa resolusiones muy grandes.
El metedo encargado de la redimension es "drawImage" , despues con el metodo "toDataURL" obtenemos la nueva imagen redimensionada y la pasamos a Google streetview
Para que este post pueda ser encontrado en ingles pondre esta linea:
How do I synchronize the scroll position of two divs with different height ?
Hoy en el trabajo nos sentamos un buen amigo mio y yo e hicimos este pequeño demo de como funciona. La verdad que todo el credito se lo lleva mi amigo Hod es su algoritmo . Yo solo ayude con la parte de Javascript y unas pocas cosas
Si copias y pegas ese link en tu navegar podras ver la imagen. Ten en cuanta que si quieres usar la version gratis solo puedes descargar imagenes de 600x300 , si las quieres en HD y mas grande tienes que pasar por caja aqui la descripcion de precio de google
Un ejemplo practico de uso de Page Visibility API , es para saber si el usuario cambia de tab en el misma ventana del navegador, pero no funciona si el usuario se pasa a otra ventana. El soporte para esta api es muy decente : http://caniuse.com/#feat=pagevisibility
Posibles usos
Pausar video o sonidos
Detener animaciones que nadie esta viendo
Detener llamadas al servidor si nadie las vera
Ahora un ejemplo
Visita este link y veras como el video es detenido cuando cambias de tab.
Si actualmente estas programando y no estas usando una guía de estilo para tu código de acuerdo al lenguaje que usas, estas cometiendo un gran error...
Una guía de estilo de código en palabras simples es como tu código luce , como lo ven los demás. Si miras todo el código que has escrito hasta ahora podrás notar un cierto patrón, ese es tu propio estilo.
El problema con esto es que no es entandar y la mayoría de las veces solo tu podrás entenderlo.
No serial genial que todos escribieran el código como tu lo haces ? .... Por esa razón mi buen amigo es que existen las guía de estilo de código, para que todos podamos leer y entender el código de los demás.
Una guía de estilo de código por lo general tiene lo siguiente:
Como y cuando usar comentarios
Como usar y cuanto espacio e indentación deberías de utilizar
Nombres adecuados para tus variables y funciones
Como agrupar tu código
Que técnicas usar o cuales no, dependiendo del lenguaje
Si tu objetivo es trabajar en una gran empresa, necesitas aprender los estilos de código para cada lenguaje que usas. Es un gran dolor de cabeza cuando un nuevo programador quiere escribir código a como le da la gana, Si tu eres uno de estos seguramente no vas a durar mucho.
Una rápida búsqueda en Google puede ayudarte a encontrar los estilos que buscas, pero a continuación podre algunos
En este post voy a repasar algunas técnicas, ideas y metodologías que uso para escribir un código CSS escalable, mantenible, predecible y reusable.
El 99% de los programadores está de acuerdo: “Nombrar cosas es por mucho lo más difícil de hacer cuando programas”. Buscar los nombres correctos para variables, métodos ó los nombres de clases para elementos HTML es muy complicado, esto es debido por que no podemos predecir el futuro de los diseños y funcionalidades. Por ejemplo:
El nombre de una clase de un elemento HTML puede tener mucho sentido hoy, pero si el diseño cambia una semana después, ese nombre de clase puede no encajar en la nueva estructura. También pasa lo mismo cuando una característica es añadida ó removida en una aplicación debido a que el cliente así lo decidió. Como resultado de estos cambios tenemos que hacer un refactoring de nuestro código para que ahora pueda tener sentido. Este ciclo se repite constantemente a lo largo de cualquier proyecto, por lo cual tenemos que tener mucho cuidado cuando nombramos los elementos.
No existe una técnica única para nombrar elementos correctamente, pero existen ciertas guías que pueden ayudarnos. En este artículo quiero enfocarme en cómo nombrar los elementos en CSS.
En el momento en el que estemos bloqueados y no sabemos que nombre de clase ponerle a un elemento HTML, usa las siguientes sugerencias, las cuales podemos dividir en:
Nombres de clases funcionales
Ejemplos de estos nombres: save_button , delete_button , selected_tab. El nombre de estos elementos está basado en la función que desempeñan. Con solo leer el nombre sabemos que ese boton es por ejemplo para guardar.
El diseño puede cambiar pero la función de ese elemento no lo hará. Nombrar elementos de esta manera seria lo ideal pero no a todos los elementos podemos darles nombres basados en su funcion. Por ejemplo una caja de texto necesita una sombra para verse bien ó un icono tiene que ser azul por que se mira bonito.
No todo estilo visual en un sitio web tiene una justificación funcional para poder nombrarlo.
Nombres de clases basado en el contenido
Ejemplo de estos nombres: intro_text , description_item , image_product. Este tipo de nombres describen el contenido de los elementos. Esta es la manera más obvia y facil de nombrar elementos. En sitios web pequeños es lo mejor que puedes hacer, pero para grandes proyectos no es lo ideal escribir todo tu estilo usando una única clase.
Nombres de clases basado en la presentación
Ejemplos de estos nombres: red_button , big_text , vertical_menu, horizontal_menu , bold_text . Este tipo de nombres describe el estilo del elemento, es decir la manera en como lucen y son presentados en el sitio web. También este tipo de nombres son muy descriptivos para cualquier programador, por ejemplo: “border_image” con solo leer ese nombre sabes que el estilo seria unos bordes en la imagen.
La ventaja de estos nombres es que son reutilizables, por ejemplo “big_text” puede ser usado en muchos elementos donde queremos el texto en grande, no importa si es un título de página, nombre de persona ó título de producto, solamente nos interesa que sea un grande.
Piensa en esto : Los nombres de clases tienen significado y propósito, evita nombres que no sean descriptivos. Mantén en mente que los nombres de clases son para programadores, no para usuarios., Piensa en que un nombre de clase con solo leerla tiene que entregar toda la información posible sobre lo que hace a los programadores y a tu futuro yo.
Siempre debemos procurar que nuestro código CSS sea:
Predecible:Tus reglas CSS deben comportarse como su nombre lo indica. Cuando cambias ó actualizas un estilo solo debe afectar la parte que estas trabajando, no debería de afectar otra partes adicionales Ejemplo: vertical_menu , big_button, text_center .
En estos ejemplos se puede ver claramente la intención del estilo.
Reusable: Tus estilos deberían de ser lo suficientemente abstractos y estar lo menos atados posibles a un elemento en específico, para permitirte construir nuevos estilos a partir de ellos, sin tener que reescribir el mismo estilo de nuevo. Ejemplo: shadow_big , round_square.
Estas dos clases se puede usar en un mismo elemento para darle sombras y crear bordes redondeados y así crear un nuevo estilo combinado.
Mantenible: Cuando el diseño web cambia y hay nuevos elementos en escena, tu código CSS no debería de sufrir un cambio drástico, un nuevo elemento Y no debería de afectar al elemento X antiguo.
Ejemplo: Si tienes un sidebar a la izquierda y el nuevo diseño dice que ahora son 2 sidebar al mismo tiempo en ambos lados. Con solo crear una clase nueva llamada “sidebar_rigth” deberías de solucionar el problema
De esta manera la clase “sidebar” aplica el estilo general y las otras solo cambian la posición.
Escalable:Esto significa que tu código CSS debe de ser fácilmente editable por una persona o por un equipo, que no tiene una curva de aprendizaje alta y es facilisimo de entender. Solo por que tu eres el único programador hoy actualizando este código no quiere decir que siempre sera así
Malas practicas en CSS
Ahora vamos a ver un poco de malas practicas CSS para saber que no debemos de hacer.
Dar estilo basado en el padre: Ejemplo:
#produc title_shadow { }
#menu item_visited { }
.contact .image_responsive { }
En los 3 ejemplos anteriores no podremos reusar los estilos de “title_shadow” para texto con sombras, “item_visited” para links visitados y “image_responsive” para imagenes responsivas por que estamos forzando a que sean hijos de otros elementos.
Cuando tengas estilos generales, siempre analiza si puedes reusarlos en otros elementos de tu web.
Selectores CSS muy complicados:Es cierto que CSS nos brinda muchos selectores que podemos usar, pero ojo no por eso vamos a abusar de ellos. Los siguientes son algunos malos ejemplos:
#menu ul li { }
#sidebar > div + p { }
table tr ul p { }
Entre más selectores uses más amarrado esta al HTML, lo que provoca que cualquier cambio en el diseño web afecte a tu CSS también. Este tipo de reglas no son reusables, ni mantenibles por que están apuntando a un elemento en una posicion específica en el HTML
¿ Como podria otro elemento usar el mismo estilo, si tiene una estructura HTML distinta ?
Simple no puede. En lugar puedes usar nombres de clases directos. Los ejemplos anteriores podrían reescribirse así:
.menu_item {
}
.paragraph_description {
}
.descrition_table {
}
Nombres de clases simples y sin significado:
.title {
}
.content { }
.name { }
Este tipo de nombres hay que evitarlos, son muy genéricos y no son informativos para el programador, por ejemplo ”title” ¿ titulo de que ?. con solo leerlo no podemos saber si es en un menú, en una sidebar ó titulo de artículo.
Otro problema es que como el nombre es muy generico, algun compañero podria sobreescribir tu CSS con mucha facilidad por accidente. Este tipo de nombres producen CSS impredecible.
Imagina que el estilo anterior es para para un caja que muestra los mensajes de usuarios, arriba en el centro de la página. Tiene un margen y lo mueve un poco a la derecha.
¿ Que pasa si quiero mostrar esta misma caja al mismo tiempo en una sidebar derecha ?
Luciria muy mal , porque el estilo está haciendo muchas cosas: Esta definiendo aspecto y posicion dentro de la misma regla. El aspecto es algo que podemos reusar pero la posicion no, por eso toda la regla está comprometida. Lo mejor sería dividirla así:
Así el elemento en la sidebar solo puede usar la clase “user_messages” para obtener el estilo.
Usar clases solo para dar estilos y solo eso
El problema aquí es que en proyectos grandes te encuentras con nombres de clases que tienen muchos propósitos por ejemplo: para dar estilos , para hacer alguna función por medio de javascript , como ancla para algún plugin jquery , etc.
Las clases tienen muchas responsabilidades y cuando lees los nombres no son muy descriptivos, no hay nada que te indique para que son. Removerlas ó actualizarlas es todo un caos. La unica recomendacion que puedo hacer aquí es que tus clases solo deben ser usadas para dar estilos y nada más que eso. Y si necesitas alguna clase para hacer algo con javascript la recomendación es que crees otra clase y le pongas al inicio “js-”
Cualquier clase que no comience con “js-” ya sabemos que solo es para dar estilo nada mas y podremos removerla o cambiar el nombre con confianza.
Metodologías CSS
Ahora solo nos falta por hablar sobre algunas metodologías CSS para nombrar clases, las cuales pueden ser muy útiles para escribir un código limpio. Las metodologías CSS son en palabras sencillas, consejos para estructurar mejor nuestro código CSS con el fin de que sea mantenible y escalable.
Existen muchas metodologías para escoger : OOCSS, SMACSS, BEM solo para nombrar algunas. Yo quiero hablar sobre BEM.
BEM es una metodología que consiste en : “block , element , modifier”. Sugiere escribir tu código CSS de manera estructural basado en elementos y modificadores. Usando BEM no esta permitido usar Ids. Ejemplo:
.block {} .block__element {} .block--modifier {}
block :define un bloque que contiene elementos block__element : elementos que componen al bloque block--modifier : reglas que modifican el estilo del bloque, ya sea estilo de presentación, posicion ó maquetado.
Para entender mejor esto veamos la siguiente imagen:
En la imagen podemos ver una caja de búsqueda y un botón, esto es considerado un block y todos los elementos dentro de él son parte de este block. Siguiendo la metodología BEM podemos escribir las clases de esta manera.
Hasta aquí lo más simple de BEM, no sería prudente escribir un tutorial completo sobre esto cuando en internet existen muchos y muy buenos. Si quieres saber más sobre esta metodología recomiendo leer los siguientes enlaces:
Recuerda que BEM ó cualquier otra metodología no va a resolver todos tus problemas, son solo maneras muy poderosas de hacer nuestro código mantenible y escalable para que todos en tu equipo tengan una idea clara de cómo mejorar el actualizar y mejorar el CSS.
Flex-box es la nueva técnica de maquetación CSS 3, con la cual es mucho más fácil crear estructuras HTML sin tener que usar float, inline-block o los muchos trucos que usábamos antes. 2015 es el momento indicado para aprender usar flex-box ya que ha alcanzado un buen soporte en navegadores. Puedes consultarlo en caniuse.com.
La primera idea que tuvimos en codingonweb fue hacer un buen tutorial sobre como usar flex-box, pero en el proceso de conseguir información me encontré de que ya existen muy buenos tutoriales para aprender desde cero. Con este artículo solo quiero aclarar ciertas cosas que considero no son explicadas claramente, asi pueden usar este articulo como complemento para los tutoriales.
El primero paso es leer los excelentes tutoriales de flex-box que he encontrado:
Ahora si no quedastes claro y necesitas una refuerzo lee el resto del articulo, aunque si le entendiste a la primera no sera necesario.
Flexbox ofrece una manera eficiente de maquetar cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos. Para usar flex-box solo tienes que usar en un contenedor la propiedad display: flex. Esto convierte al elemento en un contenedor flex-box y automáticamente todos los elementos hijos directos se consideran elementos flexbox.
Aquí tienes un ejemplo sencillo para ver mejor en acción flex-box. Le he puesto una altura al contenedor para una mejor comprensión.
Ahora lo interesante aquí es que con este ejemplo no podemos ver en acción lo de : “cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos”. Para esto solo tienes que agregar ancho a los elementos hijos, no importa si es en píxeles ó porcentajes. Lo interesante es que si el ancho de los hijos excede el ancho de su contenedor, flex-box fuerza a sus hijos a encogerse, logrando el comportamiento de caja flexible. Ejemplo (redimensiona la zona de resultado)
Como puedes ver flexbox nos crea unas cajas flexibles que se adaptan automáticamente.
La propiedad “justify-content” sirve para determinar cómo queremos alinear los elementos flexbox(hijos) dentro de su contenedor en el eje horizontal. Ojo que para poder ver en acción esta propiedad la suma de los anchos de los hijos no tiene que exceder el 100% de su padre, tienes que dejar un espacio para poder ver como flex-box alinea los elementos, Ejemplo
Ahora por defecto flex-box toma todos los hijos y los encoge ó expande para que siempre estén dentro de su contenedor no importa si la suma de sus anchos exceden el 100% del ancho de su padre ó hay elementos adicionales, ejemplo:
Como puedes ver en el ejemplo anterior los hijos tienen 25% de ancho y son 7, por lo que 25*7 = 175%, sobrepasa totalmente el 100% del padre pero flex-box los mantiene dentro de su contenedor. Este comportamiento es por defecto, pero podemos cambiarlo con la propiedad “flex-wrap”. Ejemplo:
En el ejemplo anterior podemos ver que cambiando el valor de esta propiedad podemos hacer que los elementos que no caben en el contenedor sean desplazados hacia abajo. Hay que poner mucha atención en que cada elemento ocupa 25% entonces solo 4 de ellos alcanzan en su contenedor padre para lograr el 100% los demás sobrantes serán desplazados, La propiedad “align-items” es usada para alinear los elementos flex-box (hijos) en el eje vertical. Ejemplo:
Las propiedades anteriores son solo algunas de las mas comunes y que se usan solamente en el contenedor flexbox. Pero los hijos también tienen propiedades que podemos usar para manipularlos individualmente como son:
Order: Se usa para alterar el orden de los elementos, independientemente del orden en el HTML. Por defecto todos los elementos flex-box tiene 0. Si queremos pasar un elemento de primero sobre todos los demas usamos -1. Ejemplo:
La parte interesante aquí es que el orden va de menor a mayor, como -1 es menor que cero , este elemento ira de primero. Ahora nos toca hablar de 2 propiedades que son muy poco utilizadas pero que tienden a la confusión, estas propiedades son usadas solo en elementos flex-box(hijos):
flex-grow: Determina cuanto un elemento va crecer con respecto a los otros hijos dentro del mismo contenedor, si hay espacio disponible para hacerlo. Ejemplo:
Ojo esto es muy importante : “si hay espacio disponible para hacerlo”, lo que quiero decir, es que si entre todos los hijos logran el 100% de ancho del padre no habrá espacio para ser usado por la propiedad flex-grow. Ejemplo:
Como puedes ver en el ejemplo anterior los hijos ahora tienen 15% , lo cual hacen 75% entre todos. El resto del espacio disponible lo toma el elemento con flex-grow.
flex-shrink: Es el inverso del flex-grow, determina cuanto un elemento se va encoger con respecto a los otros hijos dentro del mismo contenedor. Para ver esto en acción los demás hijos tienen que aumentar su tamaño para forzar que se encoja. Para comprender mejor este comportamiento haz lo siguiente con el siguiente ejemplo:
En el ejemplo anterior el tercer div tiene la clase “shrink”, ahora aumenta el tamaño de los elementos con la clase “container_item” de 25% a 40% y haz click en play. Solo se encoge cuando la suma del ancho de todos los hijos supera el 100% de contenedor.
flex-basis: define un tamaño base para un elemento, lo demas elementos se van a comportar en base a este. Es muy util para hacer algo como esto Ejemplo:
Flex-box viene a solucionar muchos problemas de maquetacion que teniamos y aprender a usarlo te quitara muchos dolores de cabeza. Par terminar te recomiendo los siguientes link para completar tu aprendizaje:
