¿Cómo empecé a programar?

Estoy aburrido y me topé con un post de @juliettemaxwell sobre cómo fue que empezó a programar. Me gustó la idea, así que va mi historia.

Recuerdo vagamente que cuando tenía alrededor de 10 años mi mamá nos mandó a uno de mis hermanos y a mi a un curso de MS-DOS. Creo que en aquel entonces se usaba Windows 3.1 y nos enseñaron comandos básicos como copiar archivos, moverlos, las unidades (C:, D:, etc), editar archivos y todo con disquetes de 5 1/4 y 3 1/2 😀

Poco tiempo después fuimos a otro “curso” donde se supone veíamos mas usos de la PC (aun con mucho MS-DOS), pero lo que hacíamos era llegar y poner los disquetes que todos teníamos con juegos. Principe de Persia era el favorito de todos.

Un par de años después tomamos otro curso que duró dos años donde nos enseñaron desde armar y desarmar computadoras, las piezas que la componen, la instalación de windows y office (?) y otras cosas mas. Pero sobre todo fue el primer acercamiento de verdad a la programación, ya que los últimos módulos fue hacer programas sencillos en BASIC y Pascal. Creo recordar que se me daba bien eso y me gustaba mucho.

Casi al mismo tiempo tuvimos la primer PC en casa y gracias a un trabajo de la escuela que usé como excusa, internet (había que investigar, ¿no?).  A pesar de todo, en ese entonces no sabía que quería hacer cuando creciera (xD). Cuando empezó en verdad todo fue el día que encontré en un puesto de revistas un especial de Evangelion, y me gustó tanto que dije “ok, quiero hacer un sitio de esto”.

Empecé buscando como hacer un sitio, y al poco tiempo tenía la primera versión de mi sitio de Evangelion hecha con FrontPage. Eran dos iframes, uno el menú y el otro el contenido (copiado letra por letra de la revista). Luego quise hacer algo mas grande, no solo enfocado a Evangelion, y empecé a aprender un poco de PHP. Tomaba algunas cosas de PHP-Hispano y las modificaba hasta que hacían lo que quería. Cuando tenía que hacer un cambio pequeño me daba pereza abrir FrontPage (o Dreamweaver), así que empecé a hacer los cambios con el bloc de notas (y poco tiempo después con Notepad++, y esto ayudaba a que me aprendía mas cosas.

El sitio fue creciendo un poco y puse un foro usando phpBB, al cual también empecé a hacerle modificaciones. Había noches en las que me la pasaba programando hasta amanecer sin darme cuenta. También ayudó mucho que, de otro sitio de anime, me la pasaba en cierto chat de IRC donde había otras personas con quienes platicaba y aprendía cosas nuevas.

En 2007 fue cuando me vine al DF y tuve mi primer trabajo en serio (antes había freelanceado un poco), y desde entonces he aprendido muchísimo y he hecho cosas que ni siquiera había imaginado que se podían. Han habido veces que me han dado ganas de mandarlo todo al carajo, días que han sido muy estresantes y cansados, pero al final me gusta mucho lo que hago.

Estoy aburrido y me topé con un post de @juliettemaxwell sobre cómo fue que empezó a programar. Me gustó la idea, así qu...

Read More »

Útiles plugins para gulp

Cada día amo un poco más usar gulp. Poder automatizar un gran rango de tareas a un solo comando en la consola simplifica mucho el desarrollo. Aquí dejo una lista de plugins que estoy usando en casi todo proyecto:

gulp-load-plugins

En lugar de tener que estar cargando cada plugin a mano, este se encarga de hacerlo automáticamente.

gulp-uglify

Minifica javascript para tener un código más ligero para ponerlo en producción.

gulp-sass / gulp-less

Los nombres lo dicen, ¿no? Compila Less o Sass al CSS de todos los días.

gulp-autoprefixer

Deja de escribir a mano los prefijos para estilos en distintos navegadores, tampoco uses mixins de sass o less. ¡Mejor aplica Autoprefixer a tu CSS y olvídate de problemas!

gulp-combine-media-queries

No me gusta tener muchos @media en mi archivo CSS final, una manía. El otro día encontré este plugin que nos junta los media queries que tengamos y que se repitan. Pase de 81 @media a solamente 11. Un poco menos de peso 😀

gulp-csso

Minifica CSS de una forma un poco diferente a otros plugins. Ver CSSO para mas información.

gulp-if

Simple condiciones para decidir que tareas realizar en base a variables.

gulp-sourcemaps

Nos permite generar sourcemaps en base a los archivos fuente, sin importar el procesado (compilar, autoprefixer, minificar, etc) que hagamos. Útil para debug.

gulp-concat

Para juntar varios archivos en uno mismo. ¡Menos peticiones al servidor!

gulp-watch

Se queda observando cambios a nuestros archivos para compilarlos de nuevo de forma automática.

 

Al final, un ejemplo de mi gulpfile.js podría ser algo así:

Cada día amo un poco más usar gulp. Poder automatizar un gran rango de tareas a un solo comando en la consola simplifica...

Read More »

WordPress, Bootstrap 3 e IE8

Que horrible es desarrollar para Internet Explorer, sobretodo si es una versión tan vieja como la 8. Pero según los estudios de algunos clientes se sigue usando, así que por el mínimo porcentaje (que odio con toda mi alma) de gente que lo usa, hay que tenerlo en cuenta.

Resulta que hicimos un sitio de WordPress usando Bootstrap, lo cual facilita muchísimo el desarrollo de sitios responsivos. Como se acerca la entrega, tocó el turno de revisar como se ve en IE8, y… ¡casi muero de un infarto! Todo se veía fuera de lugar, las columnas no las respetaba, elementos por todos lados.. en fin, un caos. Buscando, vi que Bootstrap por default si soporta IE8 usando ciertos scripts:

Esto lo podía ver en el código fuente, por lo que no entendía porque nada funcionaba. Pero entonces llegó la iluminación:

Resulta que usando WordPress, tenemos la función wp_head que suele usarse en la etiqueta <head> para agregar estilos (entre ellos style.css, el estilo principal del theme), scripts, etc. El problema era que el “genio” de yo tenía puesto el código anterior de soporte para IE8 ANTES del wp_head(), por lo que el estilo se cargaba después y los scripts no hacían nada. Fue cuestión de cambiarlos de orden y ¡magia!, prácticamente todo se veía bien 😀

Lo escribo para que no se me olvide en el futuro, aunque sinceramente espero no tener que hacer mas cosas para IE8.

Que horrible es desarrollar para Internet Explorer, sobretodo si es una versión tan vieja como la 8. Pero según los estu...

Read More »

gulp.js y sus tareas

Hace poco les hable de como integrar Grunt con Font Awesome, y desde entonces me tope con gulp.js, que hace lo mismo que Grunt pero mas rápido y sencillo 😀

Integrándolo en un proyecto para probarlo me tope con un dilema. Hay ciertas tareas que solamente quiero correr cuando estoy desarrollando y otras cuando estoy preparando para subir a producción. En grunt lo hacia usando distintas tareas con diferentes opciones cada una:

De este modo tenemos un CSS comprimido (grunt build) listo para subir al servidor, y cuando estas desarrollando (grunt), el CSS sin comprimir y ademas se queda vigilando por cualquier cambio que se haga para volver a compilarlo.

Con  gulp podemos conseguir algo similar usando gulp-if:

Es bastante sencillo. Toma de parámetro una condición y una tarea a correr y solamente hay que pasarle un parámetro a la hora de llamarlo: gulp build --type production. No está mal, pero si la tarea build es la única que corro cuando quiero preparar el código para producción, encontre un modo mas sencillo:

¡Y listo! Con solo eso, me basta correr gulp o gulp build para diferenciar cuando es desarrollo y producción, sin parámetros extra. Al final queda algo similar a esto:

Espero les sirva :)

Hace poco les hable de como integrar Grunt con Font Awesome, y desde entonces me tope con gulp.js, que hace lo mismo que...

Read More »

Café Pendiente

Café Pendiente

Hace tiempo me encontré esta historia y me pareció una gran idea, aunque no lo pensé mucho mas. Hace unas semanas me tope con Café Pendiente, que es la iniciativa de la imagen aquí en México.

Como ahorita ando trabajando desde casa, estoy buscando lugares cómodos para distraerme de estar en un solo lugar y, aprovechando, comer/tomar algo rico. Así que en medio de esta búsqueda el día de ayer fui a algunos cafés que participan en el Café Pendiente, y según me dicen funciona bastante bien. Hay varias personas que lo pagan y otros tantos que van por el, sobretodo en las mañanas y noches (comprensible con el frío que esta haciendo).

Claro, me tome mi café y deje pagados unos pendientes. No cuesta mucho y ayuda a otros :)

 

Hace tiempo me encontré esta historia y me pareció una gran idea, aunque no lo pensé mucho mas. Hace unas semanas me top...

Read More »

Adiós 2013, no te voy a extrañar

No fue un año fácil, momentos tristes y decisiones difíciles lo marcaron. Pero al final lo que no nos mata nos hace más...

Read More »

Usar Font Awesome con Grunt

Parte de lo que ando haciendo últimamente con Laravel incluye el manejo de assets, y aunque hay algunos paquetes para el manejo de estos dentro de Laravel, la mejor opción parece ser usar Bower y Grunt, y la verdad es una maravilla.

En el proyecto con el que ando trabajando quiero usar Font Awesome para aprovechar la variedad de iconos que trae, y para eso necesitamos tanto el CSS (o SCSS en mi caso) como las fuentes que trae.

Primero que nada es instalar los assets con Bower, nuestro .bowerrc
es:

Y el bower.json:

Con esto corremos un bower install y esperamos que descargue los componentes. Para compilar el SCSS usamos el modulo grub-contrib-sass con la siguiente configuración:

En la pagina del plugin de grunt explica la configuración, pero básicamente le decimos que nos compile el archivo app.scss en app.css, y dependiendo del ambiente en que queramos, si lo compila expandido (para desarrollo) o minificado (para producción). La opcion de compass: true es debido a que estoy usando Foundation y con esto nos lee el archivo config.rb de Compass.

Dentro de mi app.scss solamente importo el SCSS de Font Awesome y listo, tenemos el CSS. ¿Y que pasa con las fuentes? Para esto uso el plugin grunt-contrib-copy, el cual como su nombre lo dice nos sirve para solamente copiar archivos. La configuración vendría siendo algo como esto:

¡Y listo! Con esto nos copia todos los archivos de la carpeta Font-Awesome/fonts a public/fonts que es la ruta por default que usa el CSS de Font Awesome (considerando que nuestro css default esta en public/css/app.css).

Espero les ayude :)

Parte de lo que ando haciendo últimamente con Laravel incluye el manejo de assets, y aunque hay algunos paquetes para el...

Read More »

Últimamente he estado jugando mucho con Laravel, ya que me parece un excelente framework. ¡Los tutoriales de Philip Brown me han ayudado muchísimo!

El Alma de la ciudad

Venía platicando con Diana luego de una muy rica cena y caminata, casi todo el camino al son de Panchita Disco de el increíble grupo Burocracia Cósmica:

Vamos, escúchenla. ¿Listos? Bueno. Cuando íbamos pasando por el callejón donde solemos verlos tocar los domingos, ella empezó a tararear la canción, y en ese momento comencé a sentir como si la calle tuviera vida. Los músicos, las personas moviéndose al ritmo de la canción. Todo eso estaba presente. Los edificios también sentían la energía de la música, y ellos mismos comenzaban a moverse.

Nosotros seguíamos caminando, al pasar por Bellas Artes, ella dijo que las estatuas que están ahí también empezarían a bailar. Esas gorditas sexies, el buen Juárez montado a caballo, la torre latinoamericana, el edificio de Sears, los arbustos en la plaza y los árboles en la alameda. Todo moviéndose a un mismo ritmo, acompañados de la luz de una bella luna y alimentando de energía a los que ahí estábamos.

Fue increíble. Quería dejar constancia de ello para no olvidarlo. Así como mi tatuaje me recuerda cada día que debo seguir creyendo, sin importar las veces que me caiga, quiero que esto me recuerde todas las cosas que están esperando ser descubiertas.

Fuentes en el Monumento a la Revolución

Mi cuerpo y mente están cansados, tristes, sin ánimos. Pero mi alma sigue en pie.

Venía platicando con Diana luego de una muy rica cena y caminata, casi todo el camino al son de Panchita Disco de el inc...

Read More »