Galeria de estilo de colores para tus mapas Google Maps

Con la API de Google Maps nosotros podemos crear mapas personalizados cambiando los colores por los que nosotros queramos usando un arreglo de estilos. Pero esto puede ser muy tedioso al querer  lograr un resultado decente con los colores perfectos.

Con este problema en mente, ha nacido http://snazzymaps.com/ , una web con una colección de estilos de mapas Google Maps que puedes aplicar a tus propios mapas. Muy util para usar en tus proyectos de manera rápida.

Tutorial sobre sublime text

Si quieres un buen tutorial sobre el editor de moda hoy en dia Sublime text , te recomiendo este link donde podrás encontrar tutoriales gratuitos de https://tutsplus.com/ , que están muy buenos.

link : https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

Y tambien si quieres sacarle el maximo a este super editor recomiendo que visites este link:

link: http://scotch.io/bar-talk/best-of-sublime-text-3-features-plugins-and-settings

Responsive image con Mobify.js

He leído incontables artículos sobre como tratar el problema de responsive images, debido a que no tenemos un estándar todavía para resolver este problema, muchas soluciones aparecen día a día tratando de resolverlo. 

Pero entre todas las soluciones que leo, en mi opinión personal esta es  la mejor de todas:  Mobify.js es una librería open source para mejorar los sitios responsive, la cual automáticamente redimensiona y comprime las imágenes sin escribir nada de código, simplemente entregamos nuestra imagen en alta resolución y la API se encargara del resto por nosotros.

Para saber mas sobre su uso y un análisis detallado sobre como funciona les dejo el siguiente link, la verdad que mejor articulo que este no hay sobre el uso de esta librería .

link : http://mobile.smashingmagazine.com/2013/10/24/automate-your-responsive-images-with-mobify-js/

¿Sabes cuánto cobrar por una hora de tus servicios?

Interesante web donde con solo responder 6 sencillas preguntas no ayudara a saber cuanto debemos cobrar por nuestros servicios.

link: http://cosmonauta.mx/toolbox/precioporhora.html

Elementos HTML con float escapan de su contenedor padre.

Cuando usas la propiedad CSS "float" en algunos elementos estos salen del flujo normal del documento y provoca que los mismos salgan de su contenedor padre. Muchos blogs recomiendan insertar un elemento HTML con la propiedad "clear:both" después de los elementos para resolver el problema. Hoy hice una pequeña recopilación de como resolver este problema de 3 maneras distintas, en el siguiente ejemplo.



La verdad que en la tercera opcion funciona correctamente pero no logro entender el por que. La que mas me ha gustado es la segunda opcion usando :after de css3 .

Link para leer un poco sobre block formatting; http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

Link: http://html5hub.com/after-float/#i.685flmb6repov7

Debugging con console.table() en Google Chrome

No hace mucho leí un articulo sobre el uso de console.table() , una función del modo consola en Google Chrome para una mejor presentación de datos. Es una interesante manera de mostrar los datos que el clasico console.log(). Aqui les dejo un ejemplo de como usarlo:

Muy simple de usarlo y con una presentación de datos muy cómoda.También trabaja con objectos por ejemplo si tenes un objecto y cada propiedad del objecto es otro objecto. 

link: http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

Facebook Plugin Comment no aparece

Existe un comportamiento muy interesante con el plugin de comentarios de Facebook. Que algunas veces no aparece en pantalla, en algunos blog la solución común es utilizar el método:

FB.XFBML.parse();

Que reparsea todo el contenido forzando a que aparezca los comentarios en tu pagina. Pero hay un comportamiento un tanto extraño que pasa cuando tienes tus comentarios Facebook ocultos y con alguna acción del usuario quieres que sean mostrados. El problema es que al parecer el plugin Facebook toma el ancho de su padre para crear la caja de los comentarios y ese ancho es asignado al iframe.

El problema es que si el elemento padre de los comentarios esta oculto el plugin Facebook toma el ancho 0px para el iframe lo que ocasiona que no sea mostrado en pantalla, por que no tiene ancho alguno. Lo que tenemos que hacer en este caso es llamar a FB.XFBML.parse  hasta que el elemento padre este visible.

He creado un ejemplo de este comportamiento en el siguiente link , el cual puedes ver como el plugin de comentarios no aparece la primera vez cuando le haces click pero si remueves los comentarios de esta linea de codigo :

//FB.XFBML.parse();

Podrás ver como aparecen, esto pasa por que le estamos pasando una callback al método show de jquery que se ejecutara hasta que el elemento este visible, de esta manera el plugin puede tomar el ancho del padre para crearse.



link : http://jsfiddle.net/SaulBurgos/tDQMZ/

Error PHP Warning: Cannot modify header information - headers already sent by

Como programador PHP en algún momento te habrás encontrado con este mensaje de error al momento de usar cookies ó haciendo una redirección con PHP  :

Warning: Cannot modify header information - headers already sent by

El problema con este error es que en algún lado de tu script php ya se ha enviado información sobre tu pagina web, por ejemplo con algún echo o algo asi. Estos casos son mas comunes cuando estas trabajando un en proyecto existente y no sabes por donde esta la linea de código que ha enviado información.

Para resolver este problema tiene que usar Output Buffering para evitar que se envie informacion al navegador antes de tiempo. Normalmente PHP  sin output buffering envia al navegador el codigo generado por tu script en pedazos, cada vez que encuentra un echo ó un print inmediatamente lo envia al navegador procesando asi todo tu script PHP. Pero con output buffering activado todo el codigo generado es guardado en una variable  hasta que todo el script PHP es leido y solo hasta después es enviado al navegador como una sola pieza.

Una ventaja de usar output buffering es que disminuye la cantidad de tiempo que toma mostrar una pagina por que no es enviada en pedazos.

Para ver un ejemplo sencillo de su uso, puedes visitar el siguiente link de Brian Cray donde tiene unos ejemplos muy buenos y mucha mas información sobre su uso.

Link : http://web.archive.org/web/20101216035343/http://dev-tips.com/featured/output-buffering-for-web-developers-a-beginners-guide

PHP manual : http://php.net/manual/en/function.ob-start.php