lunes, 24 de julio de 2017

Mi nueva configuración de Atom para desarrollo con Laravel & Vue..js

En una de mis entradas anteriores publiqué la configuración de Atom para el desarrollo con PHP & Laravel, sin embargo recientemente he encontrado otros paquetes o plugins para Atom que me han gustado mucho y acerca de los cuales les hablaré en este post.

La mayoría de paquetes para optimizar el desarrollo con PHP en Atom se encuentran aquí en esta página de github: https://github.com/php-integrator/  en donde puedes ver su documentación oficial.

Por lo pronto para ir al grano y hacer corta la escritura de este post, dejo las indicaciones de instalación tal y cual lo tengo en este momento:

1. Descarga el archivo con la lista de paquetes a instalar desde github: https://gist.github.com/darwinsalinas/3f44bff07a2f83f7e4523b2fc3e79f61

2. Ejecuta el siguiente comando en la terminal (para esto debes tener instalado los comandos del shell que vienen con Atom)

apm install --packages-file package-list.txt 
 3. Descarga el archivo de configuración de Atom desde esta url: https://gist.github.com/darwinsalinas/99d2b2eaa1d58358758f69e3c498e599

Para que la configuración proporcionada funcione correctamente debes de remplazar algunas de las entradas de la configuración:

"php-cs-fixer":
    executablePath: "/Users/darwin/.composer/vendor/bin/php-cs-fixer"
En esta parte debes reemplazar con la ruta de tu instalacion de php-cs-fixer, si no lo tienes instalado lo puedes instalar globalmente con composer con este comando

composer global require friendsofphp/php-cs-fixer
También debes reemplazar la siguiente entrada en la configuración:

"php-integrator-base":
    core:
      phpCommand: "/Applications/MAMP/bin/php/php7.1.2/bin/php"
En mi caso yo estoy usando el PHP de MAMP, si tu quieres saber la ruta de tu PHP puedes ejecutar en terminal

which php
Y por último debes reemplazar la ruta de tu node, en mi caso está en el /usr/local, puedes ejecutar en terminal npm get prefix para obtener la ruta de tu instalación de node

"linter-eslint":
    disableWhenNoEslintConfig: false
    fixOnSave: true
    globalNodePath: "/usr/local"
 
Una vez que tengas descargado el archivo ábrelo con tu editor de texto preferido (Atom), copia su contenido y reemplaza el contenido del archivo de configuración de Atom, En Mac click en el menú Atom--> Config

4. Para Lintear los archivos de Vue debes crear un archivo de configuración en la raíz de tu proyecto con e nombre .eslintrc.json y con el contenido de este archivo https://gist.github.com/darwinsalinas/f02acf9f2e0824bf5db34d53adf0aa08

Con esto ya tendríamos listo el editor para hacer algo como esto:


Como puedes apreciar Atom me sugiere código y me "lintea" los errores en los archivos de Vue, Blade y clases de PHP.

Listo eso es todo, a disfrutar de Atom!

Si te gustó, comparte; si le hace falta algún plugin o configuración al editor por favor comenta.!

domingo, 18 de septiembre de 2016

PSR en Atom de forma automática

En un post anterior a este, estuve escribiendo acerca de como configurar Atom para el trabajo con PHP y Laravel, sin embargo me olvidé a propósito de escribir acerca de los estándares de escritura de código para PHP, por lo cual en este artículo quiero contarte acerca de un paquete muy interesante que nos ayudará a estilizar o acomodar nuestro código de PHP, tal y como nos indica el estándar.

El paquete del cual te estoy hablando se llama php-cs-fixer, con este complemento para Atom podremos ordenar un poco nuestro código, pero mejor míralo en acción:


Como puedes apreciar en la imagen, php-cs-fixer nos acomoda nuestro código de acuerdo al estandar, puedes leer mas sobre el estándar en este link

Ok, ahora instalemos el paquete con el siguiente comando en la terminal:
apm install php-cs-fixer
Para que el paquete funcione correctamente, tienes que tener instalado php-cs-fixer de manera global en el sistema. Lo puedes instalar con composer con el siguiente comando de terminal:

composer global require fabpot/php-cs-fixer
Después de instalar este paquete tenemos que configurar Atom para que sepa donde se encuentra, yo lo tengo configurado de esta manera:


Lo único que hice acá fue darle la ruta de ubicación de php-cs-fixer que instalamos anteriormente vía composer y la ruta de mi binario(ejecutable) de PHP, como puedes ver en la imagen a continuación:


También como puedes ver en la imagen de arriba en la opción de nivel tengo seleccionado psr2, pero puedes elegir la que tu quieras dentro de estas opciones:



Si deseas que tu código sea mejorado cada vez que guardas puedes activar el check tal y como lo ves en las imágenes anteriores, igualmente aplica para ver las notificaciones de cada operación realizada por el paquete.

Si no activas la opción de ejecutar al guardar, tendrás que hacerlo de manera manual cada vez que quieras checar tu código.

Bueno, eso es todo, sigue disfrutando de Atom!

Nota: Si tienes problemas con la instalación puedes revisar la documentación oficial o bien escribir en la sección de comentarios de este post.

viernes, 16 de septiembre de 2016

Configurar Atom para desarrollo con PHP & Laravel

El mundo de los editores de texto para desarrollo web con PHP es muy grande, existe una gran cantidad de programas dentro de los cuales están los IDE (Integrated Development Environment) y los editores de texto simples como Atom.




En esta ocasión quiero escribir acerca de Atom por varias razones:
  1. Una de las principales es que es completamente gratis
  2. Se le pueden instalar temas para personalizar su apariencia
  3. Es multiplataforma; por lo que lo podrás usar en tu sistema operativo preferido
  4. Tiene un administrador de paquetes que puedes usar con interfaz gráfica y a travez de la terminal.

Instalar Atom

Puedes descargar Atom desde su página web y una vez lo tengas en tu computadora puedes proceder a instalarlo(confío que si eres programador o estudias para serlo, no tendrás difucultades para instalarlo).

Instalación de paquetes o plugins

Para instalar los paquetes vamos a usar el comando apm desde una terminal (en Windows puede que necesites agregar el binario a las variables de entorno)

apm install autocomplete-plus atom-autocomplete-php data-atom file-icons genesis-ui git-control git-status git-time-machine language-blade language-dots language-nginx language-powershell language-vue language-vue-component laravel markdown-preview-opener minimap php-debug sort-lines vue-autocomplete color-picker docblockr emmet hyperclick php-hyperclick pigments linter linter-php oceanic-next

Atom Auto Complete PHP

Con este paquete tendremos auto completado para las funciones y cosas base de PHP


Data-Atom

Data-Atom nos permite conectarnos a nuestros gestores de base de datos(PostgreSQL, MySQL) y realizar las consultas que deseemos y ver los resultados, todo dentro de la interfaz de Atom


Language-blade

Soporte para las plantillas de blade

Laravel

Snippets y helpers de Laravel, pudes ver la lista completa de en el repo en gihub

Docblockr

Si te gusta escribir tu código bien documentado, entonces este paquete es para ti, puedes ver su forma completa de uso en su repo en github o en la web de Atom


Emmet

Este plugin prácticamente no requiere presentación, es de mucha utilidad a la hora de escribir código HTML y CSS puedes ver una lista considerable de atajos aquí

php-hyperclick

Con este paquete podremos darle ctrl + click al nombre de una clase y nos lleva a su definición, pero mejor míralo en acción


linter-php

Con estos paquetes tendremos lo necesario para poder desarrollar con PHP, algunos de los plugins requieren cierta configuración, por ejemplo el plugin linter-php funcionará normalmente si se tiene acceso al binario de PHP desde la terminal, de lo contrario tendrás que especificar donde se encuentra el ejecutable de PHP en las opciones de configuración del paquete, en mi caso yo puedo acceder a PHP desde cualquier ruta en la terminal.

Puedes revisar las opciones de configuración la web del paquete







Existen muchos mas paquetes que puedes instalar en Atom puedes explorarlos en su página oficial, algunos de los paquetes instalados son meramente cosméticos o complementarios, por ejemplo para los colores en css, o para trabajar con git y no precisamente con PHP o Laravel.


Personalizando estilos


Descargar e instalar FiraCode y FlottFlott, después de descargar e instalar las dos fuentes pega el siguiente código en tu archivo de styles.less en Atom. 

Con Atom abierto presiona la combinación CTRL+SHIFT+P y escriba 'styles', se abrirá un archivo; copiar y pegar el siguiente código al final del script




atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;
  text-rendering: optimizeLegibility;
}
atom-text-editor::shadow {
  .string.quoted,
  .string.regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
  .source.js.jsx > .keyword.control.flow.js,
  .storage, .type .function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5em;
    line-height: 1rem;
  }
  .source.js.jsx,
  .storage.type.function.arrow.js,
  .variable {
    font-family: 'Fira Code';
    font-style: normal;
  }
  .string.unquoted.js {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
}


Después de la instalación en las opciones de configuración seleccione el tema Oceanic Next



El resultado final en nuestro Atom será algo como esto:



Listo, ahora a disfrutar de Atom!.

lunes, 8 de agosto de 2016

Que es Vue.js?



Cada día tenemos un nuevo framework o librería de javascript que promete facilitarnos la vida cuando desarrollamos sitios y aplicaciones web, es mas podríamos pasarnos días o incluso meses probando nuevas librerías de javascript.

Sin embargo en esta ocasión quiero contarte acerca de Vue.js, una librería de javascript bastante liviana y fácil de utilizar para la creación de aplicaciones web.

Pero, que es Vue.js?



Ok y????, qué tiene de asombroso Vue.js?, bien hasta donde lo he probado he visto las siguientes ventajas sobre otros frameworks/librerías:

  1. Puesta en marcha rápido, simplemente te descargas la librería desde su sitio web oficial, lo incluyes en el HTML y listo para usarlo. 
  2. Es bastante fácil aprender a usarlo. 
  3. Es fácil manejar los eventos. 
  4. Se integra fácil con frameworks backend como Laravel, (me gusta Laravel! ). 
  5. Existen plugins o librerías extras para añadirle funcionalidad. 

Veamos el siguiente ejemplo que nos sugiere la página oficial:

En el HTML tenemos una div con id "demo", este elemento va a ser usado por nuestra instancia de Vue.js para poder tener un "espacio" de acción, en este "espacio" se pude escribir contenido dinámico que tengamos en nuestro script de js, en este caso el objeto data, este objeto tiene una propiedad/variables llamada message que tiene un valor en string, este valor se renderea en la vista gracias al atributo v-model en nuestro HTML, del mismo modo si cambiamos el texto del input se cambia en el párrafo.

En próximas entradas trataré de explicar algunos aspectos básicos de Vue.js, por lo pronto te invito a leer la documentación y aprender mas por tu cuenta, ya que la mejor manera de aprender una nueva tecnología es leyendo su documentación oficial.

    lunes, 18 de julio de 2016

    Crear tema para Wordpress - Header, Footer y Sidebar

    Hasta el momento en nuestra página no se ve nada, claro después de activar nuestro tema y eso es por que en realidad nuestro tema no hace nada, en nuestro archivo de css lo único que tenemos es un comentario y en el index.php pues no tenemos nada.

    Vamos a comenzar a escribir unas cuantas lineas de código en el index.php, vamos a rellenarlo con un html básico, así como sigue:



    Con Sublime Text + EMMET es fácil de rellenar, solamente escribes el símbolo de admiración (!) y presionas el tabulador y la mayoría del código se rellena solo.

    Ahora veamos que ha pasado en nuestro navegador:



    Ahora nos aparece algo como en la imagen de arriba, sin embargo no es nada grandioso... y claro no lo será hasta que nuestro tema evolucione un poco más.

    El archivo header.php
    Hacer un sitio en WP sería más complicado si no pudiéramos realizar inclusiones de archivos o separar nuestro código, imagina por un momento escribir todo el código de un sitio web en un solo archivo... seria desastroso, difícil de mantener y escalar.

    Es por esto que WP nos facilita un poco la tarea con algunas funciones propias, para probar esto vamos a crear un nuevo archivo llamado header.php con el siguiente contenido:



    Si te fijas es el mismo contenido que el que teníamos en el index.php, pero hemos eliminado algunas lineas.

    Luego debemos modificar el archivo index.php y nos debe quedar de la siguiente manera:



    Si te fijas en el index.php hemos eliminado las lineas que ahora tenemos en el header.php y además hemos incluido unas pocas lineas de código PHP, ahora tenemos el llamado a una función, la función get_header(), esta función nos permite incluir el archivo header.php que creamos anteriormente.

    Al visitar el sitio en el navegador en realidad no notamos ninguna diferencia, pero a la larga esto nos va a servir para no estar repitiendo el mismo código del header en cada plantilla que hagamos.

    Si creamos una nueva plantilla y necesitamos el header lo único que tenemos que hacer es llamar a la función get_header() y ya tendremos nuestro header en esa nueva plantilla.

    Lo mismo sucede con el footer, vemos:

    El archivo footer.php

    Vamos a realizar el mismo procedimiento que hicimos con el header, hagamos un nuevo archivo llamado footer.php con el siguiente contenido:


    Ahora modificamos nuevamente el index.php, debe quedarnos así:


    Si te fijas un poco, notarás que ahora en el index.php hemos eliminado las tags de cierre del body y del documento y hemos agregado una nueva función encerrada dentro de las etiquetas de PHP, la función get_footer().

    La función get_footer hace lo mismo que get_header, busca un archivo llamado footer.php y lo incluye en la plantilla.

    El caso es el mismo para el sidebar, prácticamente todos los sitios tienen un sidebar, hagamo nuevamente el procedimiento.

    El archivo sidebar.php
    Hagamos el archivo sidebar.php con el siguiente contenido:



    Modifiquemos el archivo index.php nuevamente:


    Nuevamente, tenemos una función en este caso la función get_sidebar(), esta función nos ayuda a incluir el archivo sidebar.php en nuestra plantilla, veamos el resultado de todo esto en el navegador.

    Bueno, hemos llegado al final de este post y todavía nuestro sitio se ve realmente mal, no es nada de lo que esperábamos, pero a penas estamos comenzando.

    Aquí el código completo que llevamos hasta el momento.

    domingo, 17 de julio de 2016

    Crear tema para Wordpress - Archivos requeridos

    La apariencia de WordPress es altamente personalizable, para ello existen una gran cantidad de temas que nos permiten hacer esta tarea y en esta entrada veremos cuales son los archivos necesarios para la creación de nuestro tema.

    Donde se guardan los temas de WP?
    Todas la modificaciones y agregados (Temas, plugins, etc) que le hagamos a nuestro sitio hecho con WP se guardan en un folder llamado wp-content, en caso de que quieras respaldar un sitio hecho con WP deberías respaldar la carpeta wp-content.

    A continuación el listado de archivos y carpetas que comúnmente se encuentran dentro de nuestra instalación de WP.

    Nuestra instalación de WP ya trae tres temas instalados como podemos ver a continuación


    Como puedes ver en las dos imágenes tenemos ya tres temas instalados en WP, ahora vamos a crear el nuestro, para ellos dentro de la ruta de temas vamos a crear una nueva carpeta con el nombre de nuestro tema, así como sigue:


    Yo le he puesto cursowp, tu le puedes poner como quieras. Ahora dentro de esta carpeta vamos a crear un archivo de CSS con el nombre style.css y dentro del archivo pondremos el siguiente contenido:


    Si guardamos y revisamos nuevamente la lista de temas instalados ahora veremos un nuevo tema en nuestro admin de WP, pero aparece dañado, vemos la imagen:


    WP nos informa que el tema está dañado y que la plantilla del tema no está disponible, es más nos dice que nos hace falta un archivo llamado index.php, entonces hagamos el archivo y refresquemos el navegador!, nos debería aparecer algo similar a esto:

    Ahora nuestro tema ya no está dañado pero en realidad no hace nada, es más lo podemos activar y probar como se vé nuestro sitio, pero en realidad solamente nos mostrará una página en blanco en el navegador.

    Y bueno esos son los archivos requeridos para la realización de un tema de WP. En próximas entradas seguiremos fabricando nuestro tema custom.

    Curso de Wordpress desde cero - Explorar WordPress

    En esta entrada trataré de mostrarte las opciones administrativas básicas que trae WP. Después de la instalación seguramente te apareció un formulario de acceso al sistema como este:


    Aquí rellenamos con nuestro datos y ya podremos ver la interfaz administrativa, así como en la imagen siguiente:


    WP maneja dos "tipos de contenido", por lo menos así me gusta verlo, las Entradas y las Páginas.

    Las entradas: Son un contenido de tipo "dinámico", son dinámicos por que las entradas van a cambiar con el tiempo, cada vez que se realiza una publicación se agregará una nueva entrada en la cola de las entradas, de manera que podemos mostrarlas en pantalla una tras otra.

    Las páginas: Son contenido "estático",  es decir contenido que nunca va a cambiar, por ejemplo la página de Contacto, Quienes somos, entre otras.

    Ahora nos vamos a enfocar específicamente en la barra lateral izquierda, en esta menú administrativo encontraremos algunas opciones que podemos y debemos modificar.


    Vamos a acceder al menú de Ajustes

    Los ajustes generales
    Recuerdas que cuando hicimos la instalación de WP escribimos un título para el sitio, un correo, etc. Pues aquí podemos cambiar esos datos, si es que nos equivocamos o simplemente queremos hacer un cambio.


    Por ejemplo el primer cambio que a mi personalmente me gusta realizar el la descripción del sitio, en lugar de que diga "Otro sitio realizado con WordPress" ponerle algo asociado al sitio que estamos realizando, como por ejemplo el slogan o frase-marca de la empresa.

    Luego tenemos la URL, esto no lo cambiamos todavía, a menos que cambiemos el nombre de nuestro VirtualHost, la URL la vamos a cambiar cuando subamos el sitio a internet.

    Luego tienes disponible la configuración para la zona horaria y las fechas

    Recuerda guardar los cambios realizados en las configuraciones
    Ajustes de escritura 
    En este apartado puedes cambiar las configuraciones para las entradas, por ejemplo puedes configurar WP para que cada entra por defecto quede en una categoría, aun que ahora mismo no tenemos categorías.


    Ajustes de lectura
    Aquí tenemos algunas configuraciones interesantes, por ejemplo: podemos configurar que nuestro página principal muestre nuestras entradas o una página de nuestra elección.

    También podemos decirle a WP cual va a ser la cantidad máxima de post que se pueden mostrar por cada página.

    De igual forma podemos configurar para que las entradas se muestren en forma de resumen o texto completo


    Ajustes de los enlaces permanentes (Permalinks)
    En esta parte normalmente a mi me gusta poner que los enlaces queden con el nombre de la entrada, es mas amigable para SEO.


    Ya para finalizar con la exploración de WP vamos a hablar un poco de las entradas y las páginas, en el inicio del post las mencioné.

    La estructura básica de las entradas es la siguiente:

    El formulario nos pide un título y cuerpo del post, sin embargo hay otros datos que se agregan a la entrada sin que nos demos cuenta, por ejemplo la fecha, la categoría, el estado del post, etc.

    La estructura de las páginas es la siguiente:


    En realidad es bastante similar a la anterior, la única diferencia es que normalmente las páginas pueden ir asociadas a un menú, los demás atributos asociados son los mismos que los de las entradas, es mas en la base de datos se guardan en la misma tabla, mira la imagen a continuación:


    Ahí se ven claramente los datos de ejemplo que ya vienen con la instalación de WP.

    El resto de items del menú administrativo los iremos viendo a medida que avance el curso, también espero hacer unos videos que acompañen a los post, para que todo quede mucho más claro.