Hace unos días expliqué como usar los proyectos de Sublime, aquí colocaré los plugins que yo uso casi a diario, los plugins que tengas instalados dependen mucho de tu flujo de trabajo y que tecnología más usas.

Package Control

Antes de instalar algún plugin necesitamos primero Package Control. Esta herramienta nos sirve para instalar, desintalar, actualizar y en general controlar los plugins.

Los pasos para instalar están aquí cambian un poco si usas Sublime text 2 o 3. Las instrucciónes son bastante sencillas.

Una vez que tengamos esto podemos buscar cualquiera de los plugins de esta lista usando command+shift+P en OS X o ctrl+shift+P en windows que nos abre el menú “goto Anything” de Sublime, copiamos “install” y veremos la opción que dice Packake Control: Install Package

Si le damos click podemos copiar el nombre del paquete que estamos buscando y una vez lo encontremos le damos click y se descarga e instala, algunos requieren que reiniciemos sublime, otros no, yo tengo como costumbre cada vez que instalo algo reiniciar sublime para estar seguro igual.

Casi todos los plugins están en github pero se recomienda instalarlos por el package control

1. AdvancedNewFile

Este plugin nos sirve para crear archivos usando un comando del teclado. Cuando estamos trabajando en un proyecto nuevo normalmente creamos una buena cantidad de archivos, usando este plugin no perdemos tiempo creandolos con el mouse, simplemente copiamos command+alt+N en OS X o ctrl+alt+N en Windows y nos abre abajo una opción donde colocamos el nombre y extensión del archivo y listo.

Lo bueno es que nos abre relativo a nuestra carpeta raíz de proyecto entonces si quieres crear un nuevo script puedes copiar js/nombre.js y se creará en la carpeta correspondiente.

2. Alignment

Este plugin sirve para alinear multiples selectores. Es útil para alinear todas las variables en un bloque de código

3. BracketHighlighter

Muy util, cuando estamos viendo un bloque de código y nos paramos sobre un selector es de mucha ayuda ver de una vez el que lo acompaña.

4. Color Hightligher

Usado para CSS, como el nombre lo dice, nos coloca el color del código que tenemos en el css, entonces si tenemos FFFFFF, rgb(255,255,255) o white nos coloca el color blanco

5. CSS Snippets

Una colección de snippets muy util para trabajar con CSS.

6. Emmet

Emmet es uno de los plugins mas útiles que existe, no es exclusivo de Sublime, se puede usar en una gran cantidad de programas. Emmet nos permite mejorar nuestro flujo de trabajo en CSS y HTML de gran manera. En HTML nos permite usar abreviaciónes para expandir código. Es decir, podemos escribir

header.header>.logo>a[src="img/logo.svg"]

y emmet generará el HTML correspondiente

<header class="header">
    <div class="logo"><a href="" src="img/logo.svg"></a></div>
</header>

7. GitGutter

Si trabajas con git (deberías) este plugin es muy util. Te indica cuando hay nuevas lineas, lineas eliminadas y modificadas.

8. SideBarEnhancements

El sidebar que trae Sublime por defecto es bastante pobre, tiene como 4 opciones solamente. Son este plugin tenemos muchas más opciones.

9. TodoReview

Extremadamente útil. Te permite crear una lista de pendiente en el mismo código. Puedes tener distintas listas, como TODO, FIX, BUG incluso puedes colocar las tuyas, puedo tener una lista llamada SAUL. Después con un simple comando el plugin revisa todos los archivos y nos generá la lista.

10. DocBlockr

Nos permite generar una documentación sencilla para nuestras funciones de JavaScript, PHP y otros lenguajes de programación.

The post Lista de plugins de Sublime Text que uso appeared first on Saúl Solórzano.

¿Qué es un proyecto?

Un proyecto de sublime en definición es lo mismo que un proyecto para nosotros, si estoy trabajando en una página web para una Librería el proyecto de sublime sería la carpeta de la página web.

Cómo crear

Para crear un proyecto simplemente abrimos la carpeta de nuestro proyecto en sublime y seleccionamos en el menú superior “Proyecto -> Salvar proyecto como..” donde nos va a abrir la ventana tradicional para salvar. Importante aquí, navegar hasta la carpeta de nuestro proyecto en caso de que la ventana haya abierto en otro lado y una vez que estemos en la carpeta de nuestro proyecto le damos a salvar, la razón es por que donde salvemos el proyecto considerará como la raíz del mismo.

Una vez que hayamos salvado vamos a ver dos archivos nuevos en nuestra carpeta. libreria.sublime-project libreria.sublime-workspace

Ventajas

Los proyectos, para mi, tienen dos grandes ventajas, la primera es la habilidad de cambiar entre proyectos desde la misma interfaz de Sublime y la segunda es la habilidad de seleccionar que carpetas estamos viendo en un momento específico.

Cambiar entre proyectos

Una vez que hayamos salvado nuestro proyecto podemos cambiar entre ellos con la combinación de teclas Ctrl+Command+P en OS X o Ctrl+Alt+P en Windows esto nos permite estar trabajando en un proyecto y cambiar a otro de manera rápida, o un caso más frecuente sería que estás trabajando en el código de una página y quieres hacer algo específico y sabes que ya lo hiciste anteriormente, simplemente abres una ventana nueva de Sublime (Command+Shift+N o Ctrl+shift+N) y seguido buscamos el proyecto que necesitamos y listo, no perdimos tiempo buscando la carpeta en Finder o Windows y arrastrándola a Sublime.

Ocultar carpetas y archivos

Esta habilidad es mucho más util que la anterior, una vez hayamos creado nuestro proyecto y abrimos de nuevo el menú de “Proyecto” vamos a ver la opción de “Editar proyecto” disponible, si le damos click vamos a ver un archivo con opciones. Si alguna vez has editado alguna opción de sublime vas a reconocer la sintaxis, como casi todo en sublime, es un archivo JSON de opciones.

Este archivo debe tener la siguiente estructura

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "."
        }
    ]
}

Supongamos que nuestro sitio de librería es una página de WordPress y la raíz de nuestro proyecto es la de WordPress, cuando abrimos el proyecto en sublime vemos la siguiente estructura:

Pero lo que realmente nos interesa es trabajar dentro del tema, una posibilidad sería salvar el proyecto directamente en el tema pero si queremos también trabajar en algún plugin tendríamos que tener dos proyectos de sublime para el mismo sitio. Si queremos ver sólo nuestro tema nos vamos a la opción de path y copiamos la ruta relativa al proyecto, en nuestro caso sería

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "./wp-content/themes/libreria"
        }
    ]
}

Una vez que copiamos esto y salvamos vamos a ver que sublime “oculta” todas las carpetas que no sean directamente nuestro tema. Pero aquí no acaba la magia de los proyectos aún, supongamos que una vez dentro de nuestro tema de WordPress, en el que estamos trabajando, tenemos la siguiente estructura de archivos:

De aquí no nos interesa ver la carpeta bower_components, node_modules y css, esta última porque si estamos trabajando en SASS no nos interesa por los momentos ver el css. Así como también .sass-cache que no vemos aquí porque es una carpeta oculta. Estas carpetas son increíblemente molestas si estamos usando la opción de Sublime para abrir archivos que es Command+P en OS X o Ctrl+P en Windows. Si no ocultamos estas carpetas y voy a buscar por ejemplo un archivo JS aparte de los que están en mi carpeta js/ voy a ver los cientos que deben de haber entre las carpetas bower_components y node_modules. Podemos usar la opción folder_exclude_patterns como un array para colocar todos los nombres ahí, nuestro archivo quedaría así.

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "./wp-content/themes/libreria",
            "folder_exclude_patterns": ["css", ".sass-cache", "node_modules", "bower_components"]
        }
    ]
}

Una vez que coloquemos esto y salvamos el archivo vamos a ver que las carpetas desaparecen de nuestra barra lateral, y si buscamos archivos con command+p solo aparecen los de las carpetas que si vemos.

La última opción es file_exclude_patterns que como se pueden imaginar, es lo mismo de folder_exclude_patterns pero para archivos, por ejemplo, aquí podemos ocultar los archivos minimizados de javascript, el archivo Gruntfile.js, el .htaccess y otros archivos que no necesitamos ver mientras estamos trabajando. Así va el archivo

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "./wp-content/themes/libreria",
            "folder_exclude_patterns": ["css", ".sass-cache", "node_modules", "bower_components"],
            "file_exclude_patterns":
            [
                ".htaccess",
                "*-min.js",
                "Gruntfile.js"
            ]
        }
    ]
}

Y eso es todo. Se pueden agregar tantas carpetas como queramos, si por ejemplo queremos agregar aquí también nuestro plugin simplemente hacemos esto

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "./wp-content/themes/libreria",
            "folder_exclude_patterns": ["css", ".sass-cache", "node_modules", "bower_components"],
            "file_exclude_patterns":
            [
                ".htaccess",
                "*-min.js",
                "Gruntfile.js"
            ]
        },
        {
            "path": ".wp-content/plugins/nuestro-plugin"
        }
    ]
}

Conclusión

Como pueden ver, trabajar con proyectos en Sublime puede ser increíblemente util y eficiente. Además de estas opciones que coloco, hay algunas adicionales que pueden ver en la (documentación)[https://www.sublimetext.com/docs/3/projects.html] pero las que resalto aquí son las que he usado y me han ayudado enormemente.

The post Manejar proyectos con Sublime Text appeared first on Saúl Solórzano.

The post Sublime Text Tips appeared first on Saúl Solórzano.

Instalación

Necesitamos instalar una utilidad global para poder usarla desde la terminal

npm install -g grunt-init

De esta manera podremos usar grunt-init desde cualquier lado. Dado que es una instalación global probablemente de error, así que debemos correrlo como administrador usando sudo

Templates

Los templates deben estar en una carpeta llamada .grunt-init Importante el punto delante del nombre en nuestro directorio raíz, es decir
~/.grunt-init/ en OS X y Linux y %USERPROFILE%\.grunt-init\ en Windows

Nota: A pesar de que no necesariamente los templates deben estar en esta carpeta, ya que realmente pueden estar en cualquier carpeta, es mucho más cómodo tenerlos ahí, si los decido colocar en la carpeta ~/Documents/templates/grunt debo copiar esa ruta cada vez que desee usar grunt-init

Es importante usar un nombre que podamos recordar dado que el nombre de la carpeta donde se encuentre el tema es el que usaremos para correr el código. Si mi template se llama tema y esta creado en ~/.grunt-init/tema debo correr

grunt-init tema

Los temas pueden ser una colección completa de archivos o un solo archivo, por ejemplo, uno de los templates mantenidos oficialmente es sólo para crear el archivo Gruntfile, que como sabemos es necesario para correr grunt en cada proyecto.

Estructura de un template

El template debe tener la siguiente estructura
* tema/template.js Este es el archivo principal del template
* tema/rename.json Para renombrar archivos según el template
* tema/root/ Los archivos que copiaremos al lugar donde queramos usar el template

Si copiamos este template en ~/.grunt-init lo podemos usar simplemente grunt-init tema

Archivo template.js

Ahora vamos a ver la estructura básica de un archivo template.js, las preguntas pueden cambiarse, así como las dependencias, pero cosas como init.filesToCopy y init.copyAndProcess que son necesarias, estos dos métodos se encargan de copiar los archivos que tenemos en la carpeta root/ al directorio que los queremos usar.

// Una descripción sencilla del proyecto (Opcional)
exports.description = 'Descripción de nuestro template.';

// Aquí comienza lo importante. No es necesario entender 100% que hace cada linea de código dado que como dije anteriormente, son iguales para cada proyecto
exports.template = function( grunt, init, done ) {

    // Aquí comenzamos el proceso de las preguntas
    init.process({}, [
        // Aquí podemos especificar cuantas preguntas queramos
        // estas preguntas se pueden usar para colocar estos
        // valores dentro de nuestro archivo, más de esto adelante.
        init.prompt('name'),
        init.prompt('title'),
        init.prompt('description', 'Descripción del proyecto'),
        init.prompt('homepage'),
        init.prompt('version'),
        init.prompt('licenses', 'MIT'),
        init.prompt('author_name', 'Saúl Solórzano'),
        init.prompt('author_email'),
        init.prompt('author_twitter', '@saulsolorzano'),
        init.prompt('author_url', 'http://saulsolorzano.com/')

    ], function(err, props){

        // Aquí copiamos los archivos

        var files = init.filesToCopy(props);
        // Esta es la función que agrega automáticamente la licencia especificada
        init.addLicenseFiles(files, props.licenses);

        init.copyAndProcess(files, props);
        // Aquí creamos el archivo *package.json*
        init.writePackageJSON('package.json', {
            // Usamos los valores definidos arriba
            name: props.name,
            version: props.version,
            description: props.description,
            author: {
                name: props.author_name,
                url: props.author_url
            },
            // Lista de dependencias que queremos usar
            devDependencies: {
                "grunt": "~0.4.2",
                "grunt-contrib-compass": "~0.7.0",
                "grunt-contrib-clean": "~0.4.0",
                "grunt-contrib-watch": "~0.5.3",
                "grunt-contrib-concat": "~0.3.0",
                "grunt-autoprefixer": "~0.6.4",
            }
        });

        done();

    });

};

Preguntas

Como vemos algunas preguntas tienen dos parámetros. Veamos el ejemplo de Autor

init.prompt('author_name', 'Saúl Solórzano'),

El primer valor author_name es la pregunta, la segunda es un valor que nosotros le podemos dar por defecto, igual nos va a hacer la pregunta pero como ya tiene una por defecto podemos no contestarla y el valor se llenará de todas maneras.

rename.json

Supongamos que nos gusta llamar nuestro archivo de JS por el nombre del proyecto en lugar de un nombre genérico como main.js o scripts.js entonces en lugar de tener que renombrar ese archivo cada vez que creemos un proyecto podemos usar rename.json para lograr exactamente ese propósito.

{
  "js/name_test.js": "js/{%= name %}_test.js",
}

De esta manera nuestro archivo tomaría el nombre del proyecto.

root/

En esta carpeta están todos los archivos que queremos copiar, es importante destacar que los archivos dentro de esta carpeta se copiarán a la carpeta final que queremos usar, es decir, si la carpeta de nuestro proyecto es proyecto/ los archivos se copiarán ahí, no a proyecto/root

Los archivos se copiarán con la misma estructura, incluyendo sub-carpetas. Como comenté anteriormente, podemos usar todas las variables, si es que así podemos llamarlas, que declaramos como preguntas dentro de nuestros archivos. Por ejemplo, para un tema de WordPress necesitamos tener un archivo style.css donde se define un bloque de comentarios que WordPress usa para tener información del mismo. Este bloque tiene la siguiente estructura

/*!
Theme Name:
Description:
Author:
Author URI:
Version:
Tags:

License:
*/

Podemos usar los valores que declaramos aquí. Simplemente debemos usarlos dentro de {%= %} De la siguiente manera

/*!
Theme Name: {%= title %}
Description: {%= description %}
Author: {%= author_name %}
Author URI: {%= author_url %}
Version: {%= version %}

License:    {%= licenses %}
*/

Así podemos hacer con cualquier archivo, aquí está la cabecera del archivo header.php

/**
 * Cabecera de la Página
 *
 * Nuestra todo el contenido hasta <body>
 *
 * @package     {%= name %}
 * @author      {%= author_name %} <{%= author_email %}>
 * @version     {%= version %}
 */

Usando nuestro tema

Una vez que hayamos configurado todo simplemente debemos ir a la carpeta que queramos usarlo y correr grunt-init desde la terminal con el nombre de nuestro template. Si vamos con nuestro ejemplo de un template llamado tema debo escribir

grunt-init tema

Como vemos, incluso a las preguntas a las que no les tenemos una respuesta por defecto, grunt mira el ambiente donde se encuentra y trata de dar respuestas, la carpeta donde usé el comando se llama templates-grunt entonces nos da ambas respuestas de name y title basado en esta información.

Conclusión

Usar los templates de grunt nos salva bastante tiempo cada vez que queremos comenzar un proyecto, grunt tiene algunos temas que soporta oficialmente pero todos tenemos una estructura de trabajo bastante estándar así que recomiendo mucho crear tu propio template para los diversos proyectos que hagas.

Cualquier duda me puedes preguntar en los comentarios.

The post Grunt: Usando templates para iniciar proyectos appeared first on Saúl Solórzano.

Automatización

La idea de grunt es automatizar tareas, aquí una lista de algunas cosas que posiblemente hagas regularmente:
* Compilar sass, less o stylus,
* Concadenar y minimizar tu JavaScript,
* Generar Sprites de SVG o convertirlos en DATA URI,
* Templates básicos de Proyectos

Así como muchas otras, prácticamente cualquier cosa que hagas regularmente se puede automatizar con Grunt. Configurar Grunt no es complicado, es un proceso sencillo y la cantidad de comandos de la consola son muy pocos.

Para usar Grunt necesitas tener NodeJS instalado, NodeJS sirve para correr JavaScript a nivel de servidor, pero no dejes que esto te intimide, necesitamos NodeJS porque NodeJS viene con NPM que es un Manejador de Paquetes y aunque no uses Grunt NPM se usa para muchas cosas web así que siempre es bueno tenerlo. Así que no te preocupes que nunca necesitarás saber NodeJS para correr grunt.

node.js

Como dije antes para correr grunt necesitamos tener node.js instalado, hacerlo es súper sencillo, es como cualquier otra app, se descarga un paquete y se instala. Entra a la página de node.js y dale al botón gigante de Instalar.

grunt-cli

Ahora necesitamos instalar Grunt-CLI, CLI (Command Line Interface) es lo que usamos para correr grunt desde el consola. Esto es lo que nos permitirá correr las tareas una vez las definamos.

Como lo dice en la página oficial de grunt lo único que necesitamos hacer es correr

npm install -g grunt-cli

Si da error probablemente debamos correrlo usando sudo para darle permiso de administrador.

packaje.json

Todos los proyectos de Grunt necesitan un archivo llamado package.json. Es obviamente un archivo jSON donde se definen algunas cosas del proyecto y las dependencias que necesitamos, las dependencias son las tareas que vamos a correr, si necesitamos compilar compass instalamos la dependencia de compass y así vamos.

{
  "name": "nombre-de-proyecto",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

Una vez que tengamos package.json vamos a la carpeta del proyecto en la terminal y corremos este comando:

npm install

Fíjate que aquí no usamos la bandera -g que es global porque grunt funciona por cada proyecto, las dependencias que instalamos las instalamos por proyecto.

Una vez que hayamos corrido el comando vamos a ver que se creó una carpeta llamada node_modules donde están las dependencias, si abrimos la carpeta vamos a que hay una carpeta llamada grunt porque es la dependencia que instalamos.

Usando grunt

Ahora que sabemos la configuración básica de grunt vamos a ver como funciona realmente. Necesitamos crear una tarea e instalar las dependencias que la harán funcionar. Vamos a usar como ejemplo hacer un sprite de SVGs.

Existen tareas de Grunt para casi cualquier cosa que te puedas imaginar, simplemente haz una busqueda en google y la tarea saldrá. El “plug-in” que necesitamos es svgstore

Para instalarla corremos el siguiente comando en la terminal

npm install grunt-svgstore --save-dev

Este comando instala svgstore y esta parte --save-dev se escribe para salvar la dependencia en nuestro archivo package.json indicando además que es una dependencia de Desarrollo. Una vez que el comando corra entramos en package.json y vamos a ver agregado de último

"grunt-svgstore": "^0.3.6"

Gruntfile.js

El siguiente paso es crear un archivo Gruntfile.js. Este es el archivo donde vamos a especificar todas nuestras tareas, el formato del archivo debe ser igual siempre, lo único que cambia entre proyectos son las tareas específicas de cada uno.

module.exports = function(grunt) {

    // Configuración
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Aquí especificamos la tarea
        svgstore: {

        }
    });

    //Le decimos a Grunt que vamos a usar este "plug-in"
    grunt.loadNpmTasks('grunt-svgstore');

    //Estas son realmente las tareas que vamos a correr.
    grunt.registerTask('default', ['svgstore']);

};

No es importante entender que hace cada función dado que es poco probable que lo escribamos desde cero cada vez que lo vayamos a usar, este es un archivo que una vez que lo configuras como quieres lo colocas en tu carpeta de templates para usarlo en diferentes proyectos.

Por los momentos vemos que agarra los datos de package.json y así sabe que tareas tenemos creada, si llegamos a crear una tarea y no tenemos instalado el plug-in nos dará error una vez corramos grunt en la terminal.

Ahora vamos a modificar la tarea correspondiente a svgstore. Si nunca antes hemos usado un plug-in y no tenemos idea de como es la configuración básica podemos ir a la página del plug-in que siempre están en github y habrá un ejemplo explicando los pasos a seguir.

Lo ideal es tener una carpeta para los SVGs, y ahí colocamos todos los que necesitemos colocar en el sprite

Ahora vamos a crear como tal la función. Siguiendo el ejemplo que vimos en github vamos a adaptarlo un poco más a nuestras necesidades

svgstore: {
    options: {
        prefix : "icon-",
        cleanup: true,
        svg: {
            style: "display: none;"
        }
    },
    default: {
        files: {
            "svg-sprite.svg": ["svgs/*.svg"]
        }
    }
}

Primero vemos las opciones y después colocamos nuestros archivos. El plug-in tiene más opciones y todas están detalladas en la documentación pero estas son las que uso siempre. Veamos una por una que significan:

• Prefix: “icon-“ Como el nombre lo indica, a cada icono le coloca un prefijo, en este caso “icon-“, el nombre que usaremos es el nombre del archivo de svg, es decir, si el icono se llama facebook.svg lo usaremos en nuestro código como icon-facebook, esto es bastante util por si en un futuro queremos usar css para agarrar todos los “icon-” y colocarles un estilo en específico.
• cleanup: true Esa opción elimina los estilos inline que tenga el SVG, como fill que evitarán que podamos darle estilo directo en nuestra hoja de estilo.
• svg: { style: “display: none;” } Esta opción nos permite colocarle un estilo inline al sprite, en este caso le coloco display: none porque el sprite debe ir incluido en todas las páginas que queramos usarlo, así evitamos que nos aparezcan muchos iconos sin estilo encima de la página.

Despues llegamos a la parte de default este es el nombre de la tarea dentro de la tarea, me explico: en estos momentos sólo hay una “tarea” dentro de svgstore, si usamos en la terminal grunt svgstore el automáticamente correrá en los archivos de la carpeta svgs, pero supongamos que por alguna razón tenemos dos carpetas separadas de svg y queremos que se exporten a dos archivos diferentes, podemos hacer esto:

svgstore: {
    options: {
        prefix : "icon-",
        cleanup: true,
        svg: {
            style: "display: none;"
        }
    },
    social: {
        files: {
            "svg-sprite.svg": ["svgs/*.svg"]
        }
    }
    aplicacion: {
        files: {
            "svg-sprite.svg": ["svgs/*.svg"]
        }
    }
}

Entonces podemos correr grunt svgstore:social y grunt svgstore:aplicacion y grunt los trata diferentes, esta separación normalmente se usa es para tareas de desarrollo y tareas de producción.

Si nos fijamos en la linea de files vemos el formato, que se mantiene en casi todos los plugins de grunt. Primero colocamos el archivo final y después colocamos la fuente, grunt lo lee de esta manera: Busca todos los SVG que están dentro de la carpeta svgs y haz un sprites con ellos que se llama svg-sprite

Ahora podemos correr

grunt

Y como ya habíamos definido que la tarea por defecto era svgstore no necesitamos especificarlo de nuevo en la terminal. Una vez que el comando haya corrido sin error vamos a ver el archivo creado en la raíz del proyecto.

Siguientes pasos

Grunt es extremadamente poderoso y util una vez que lo hemos configurado como lo queremos. Recomiendo ahora revisar tu flujo de trabajo y ver que tareas estás haciendo constantemente que puedan ser automatizadas con Grunt (probablemente todas) y así te salvarás mucho tiempo.

Cualquier duda o comentario que tengas no dudes en escribir un comentario.

The post Grunt: El Corredor de Tareas en JavaScript appeared first on Saúl Solórzano.

Pero igual para configurar el ambiente como a mi me gusta, con hosts virtuales tenía que configurar archivos de sistema, además de esta manera puedo tener siempre mi ambiente de desarrollo activo sin depender de una aplicación. Pero creo que la razón por la cual decidí hacerlo es que muchas herramientas funcionan más fácilmente, yo uso mucho wp-cli para WordPress y configurarlo con MAMP es muy laborioso muchas veces, homebrew también me dio problema una vez, porque siempre buscaban las copias del sistema entonces tenía que vivir cambiando el PATH de mis directorios. Así que cuando formatee decidí probar y usar los de sistema, aquí la explicación de como lo hice.

Mac trae por defecto instalado PHP y aunque ya no trae MySQL instalado es súper fácil instalarlo.

Aclaratoria

Si no te sientes cómodo modificando archivos de sistema y apenas estás aprendiendo te recomiendo usar MAMP.

Preparación

Antes de comenzar vamos a necesitar un par de aplicaciones, la primera es un editor de texto, yo subo para programar Sublime Text que es un excelente editor de texto y funciona a la perfección para lo que vamos a necesitar, sin embargo se puede usar VIM o nano o realmente cualquier otro programa de edición de texto que se use para programar. También vamos a necesitar la Terminal, recomiendo no usar la terminal.app que trae el sistema, en lugar instalar iterm2 que es mucho más completo.

PHP

Vamos a comenzar con PHP. Como dije arriba, ya una versión de PHP viene instalada en el sistema por defecto. Podemos revisar que efectivamente esté instalada corriendo el siguiente código para ver donde se encuentra

which php

Y para confirmar que versión tenemos instalada usamos

php --version

Casi siempre la versión que viene instalada es una versión más antigua a la actual, pero funciona igual perfectamente. Después copiamos el archivo php.ini que trae por defecto el sistema.

sudo cp /etc/php.ini.default /etc/php.ini

Aquí puedes configurar cosas de PHP, como por ejemplo, aumentar la memoria que trae por defecto.

Apache

Apache también viene instalado con el sistema, la raiz de nuestro servidor local está por defecto en la siguiente dirección:

/Library/WebServer/

La raiz se puede modificar si quieres, más adelante también explico como se hace en caso de que quieras hacerlo. Los tres comandos de Apache que necesitas saber son

Iniciar Apache

sudo apachectl start

Reiniciar Apache

sudo apachectl restart

Detener apache

sudo apachectl stop

Si iniciamos apache y entramos desde nuestro navegador a http://localhost deberíamos ver It works! o Funciona dependiendo del idioma del sistema.

Debemos hacer algunas configuraciones extras de Apache, debemos editar este archivo, yo uso Sublime para editar estos archivos

/private/etc/apache2/httpd.conf

Y ahí buscamos la linea

LoadModule php5_module        libexec/apache2/libphp5.so

Y le quitamos el # que tiene delante para descomentarla. Con esto ya tenemos PHP corriendo.

Homebrew

Homebrew es una herramienta excelente que nos ayuda a instalar muchas cosas con unos simples comandos, como lo dice la misma página web es El gestor de paquetes para OS X que faltaba

Para instalarlo copia el siguiente código en la terminal

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Esta linea instala homebrew, dependiendo de tu conexión puede tardar un poco , una vez que termine corre Brew Doctor para verificar que todo esté bien, si es así te dirá

$ brew doctor
Your system is ready to brew.

MySQL

Ahora que ya tenemos homebrew instalar MySQL es tan simple como copiar

brew install mysql

Y empezará a instalar MySQL, una vez que termine verificamos con

mysql --version

Ahora algunos comandos de MySQL que necesitas:

Iniciar MySQL, este es el comando que debes usar cada vez que quieras usar MySQL, sino te dará error.

mysql.server start

Reiniciar MySQL

mysql.server restart

Detener MySQL

mysql.server stop

Como vemos son los mismos que usamos en PHP, así que no hay perdida. Ahora vamos a configurar algunas cosas, MySQL no trae clave por defecto pero es recomendado colocarle una clave. Cambiando CLAVE por la clave que deseas colocar

cd /usr/local/share/mysql
mysqladmin -u root password 'CLAVE'

Por último vamos a mover el archivo mysql.sock dado que algunos programas esperan encontrarlo en /var y no está ahí por defecto, entre ellos wp-cli. Primero creamos la carpeta

sudo mkdir /var/mysql

Y después copiamos el archivo

sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

Administrar la Base de datos

Usando homebrew se puede instalar PHPMyAdmin para administrar la base de datos, sin embargo recomiendo fuertemente descargar Sequel Pro, es un administrador para Mac de base de datos y es, por mucho, la mejor aplicación para el trabajo. Ademas tiene la habilidad de conectarse a base de datos remotas lo que lo hace una herramienta muy poderosa. Como es el que uso y no tengo instalado PHPMyAdmin no daré las instrucciones.

Conclusión

Eso es todo lo que necesitamos para tener un ambiente de desarrollo local sin la necesidad de instalar MAMP, ya tengo varias semanas usándolo y no he tenido ningún problema, si, es un poco más de trabajo que instalar MAMP pero tampoco es mucho.

The post Configurando ambiente de desarrollo para Mac sin MAMP appeared first on Saúl Solórzano.

The post Google actualiza PageSpeed con recomendaciones móviles appeared first on Saúl Solórzano.