Credit image

Cómo configurar Atom Editor (y sus mejores plugins)

Atom es un editor de código open source desarrollado por GitHub. Su mejor característica es su alta personalización. Aquí tienes algunos de sus mejores paquetes (plugins).

Hace algún tiempo, escribí esta guía de Sublime Text (que te aconsejo que repases, ya que la mayoría de las funciones que comento se aplican exactamente igual en Atom). En dicha guía, hablaba de uno de mis editores de código para desarrollo web favoritos: Sublime Text. Sin embargo, con el paso del tiempo GitHub ha mejorado sustancialmente su editor de código Atom, un editor open source con el objetivo de convertirse en la alternativa libre de Sublime Text, clonando la mayoría de sus características estrella, y mejorándolo en muchos otros aspectos.

En la actualidad, Atom es el editor que más utilizo. Hay varias opciones interesantes encima de la mesa, cada una de ellas con sus ventajas e inconvenientes: Atom Editor, Adobe Brackets, Sublime Text y Visual Studio Code son las que creo que merecen los 4 primeros puestos. Existen otros editores para programar, incluso si prefieres programar en terminal de texto, pero personal y subjetivamente, creo que Atom es la opción ideal por un sólo detalle: su alta capacidad de personalización. Es cierto que Atom es notablemente más lento que Sublime Text, pero confío en que sea algo que se vaya solucionando con el tiempo. No obstante, recomiendo siempre que cada usuario pruebe cada uno de ellos y saque sus propias conclusiones.

Recientemente, Atom ha anunciado que, de forma similar a como hace Google Chrome u otros navegadores, ha establecido varios canales diferentes para su editor: un canal beta, un canal estable y un canal de desarrollo. Con esto podremos utilizar la versión que más nos interese, dependiendo si buscamos estabilidad o las últimas novedades disponibles.

El núcleo de Atom

Atom está desarrollado mediante Electron, un framework que utiliza NodeJS y Chromium para crear aplicaciones de escritorio, por lo que la propia plataforma está construída con tecnologías web como HTML y CSS. Esa es una de las razones por la que es tan personalizable (y no tan rápida como otras nativas).

Si vamos al menú View / Developer / Toggle Developer Tools o pulsamos CTRL+ALT+I, podemos abrir las herramientas de desarrollo de Chromium, pudiendo ver la estructura interna del programa. Esto es muy interesante, puesto que si tenemos conocimientos de HTML y CSS, en el menú File / Open your stylesheet podremos modificar una hoja de estilo LESS para personalizar estilos del propio editor y así personalizar su aspecto a nuestro gusto mediante propiedades de CSS.

Los paquetes de Atom, su funcionalidad estrella

Como comentabamos, la mejor característica de Atom es su alta personalización. Practicamente puedes configurar cualquier detalle del editor, que tiene ya una gran comunidad detrás que desarrolla y crea cada vez más paquetes y plugins para extender el funcionamiento del programa base.

Para buscar e instalar paquetes, sólo tenemos que ir al menú File / Settings / Install y escribir el nombre de lo que queremos buscar en la caja del buscador que nos aparece. A la derecha de dicho buscador apreciaremos que podemos marcar Packages o Themes. En el primer caso buscaremos paquetes, o lo que es lo mismo, plugins para añadir funcionalidades extra al editor. En el segundo caso estaremos buscando temas, o sea, paquetes diseñados para cambiar la apariencia visual del editor.

Más adelante observaremos que Atom tiene los paquetes categorizados en varias secciones: Core, que son los paquetes que vienen incorporados de serie, mientras que Community engloba los paquetes que descargamos y que están desarrollados por miembros externos a los desarrolladores de Atom.

La filosofía de Atom es tener un editor totalmente modular, de modo que si hay alguna funcionalidad de serie del editor que no utilizamos, podemos desactivarla en los paquetes core, y así descargar de trabajo al editor.

Por ejemplo, yo no suelo utilizar el árbol de directorios de la izquierda, por lo que suelo desactivar paquetes como tree-view o lenguajes en los que no programo como language-clojure, language-objective-c o language-ruby-on-rails, entre otros. Observa que puedes desactivar temporalmente (Disable) o desinstalar permanentemente (Uninstall) los paquetes, dependiendo del uso que vayas a darle a dicha característica.

Soporte para lenguajes

Estos últimos paquetes que mencioné en el punto anterior, que comienzan su nombre por language-, son unos paquetes especiales que incorporan la sintaxis de un lenguaje de programación para ser reconocido por el editor. Atom incorpora varios de estos paquetes de serie, como por ejemplo, language-css, language-csharp, language-html o language-java, entre muchos otros.

Sin embargo, otros lenguajes como language-jade, language-latex o language-postcss no vienen incorporados de serie, y pueden instalarse mediante paquetes de la comunidad, que son creados para extender y añadir más características.

Una de las características que siempre solemos buscar en un buen editor es la función de autocompletado del lenguaje que estamos utilizando, para así mostrarnos sugerencias al escribir una o varias letras, por si no recordamos exactamente la palabra clave que ibamos a escribir.

En Atom, es aconsejable tener el paquete autocomplete-plus para dotar de un motor de autocompletado, y luego, los paquetes del lenguaje en cuestión, como podrían ser autocomplete-css, autocomplete-python o autocomplete-php, para CSS, Python y PHP, respectivamente.

[...]

Queda el 70% del artículo
Leer artículo completo

Javascript Cheatsheet (Chuleta JS)

Chuleta o cheatsheet de Javascript (lenguaje de programación web) en formato PDF. Incluye chuleta adicional con características del navegador (BOM) y el documento (DOM).

Si eres desarrollador frontend, programador o simplemente te interesa el diseño de páginas webs, quizás esta chuleta (cheatsheet) te interese. Se trata de Lenguaje JS, un lenguaje de programación muy popular en la web, debido a que se integra e interpreta en los navegadores web, lo que lo hace ideal para incorporar junto a nuestras páginas webs, dotando así de potentes funcionalidades que quizás con HTML5 o CSS3 son imposibles o muy complejas de realizar.

Además, con el tiempo, Javascript ha pasado de ser un lenguaje del lado del cliente a funcionar también como lenguaje del lado del servidor (NodeJS, por ejemplo) o en otros ámbitos (archivos PDF, programas o aplicaciones, etc...)

Javascript Cheat Sheet (Programación web, chuleta JS)

Esta cheatsheet doble te será muy útil si estás aprendiendo, tienes mala memoria o quieres tener en un sólo lugar de consulta rápida los objetos, propiedades, métodos y otras características del lenguaje Javascript.

Contenido

En esta ocasión, y tras la chuleta CSS3, que se encarga del aspecto visual de una página web, y la chuleta HTML5, que incorpora las etiquetas del reciente lenguaje de marcado HTML5, nos encontraremos con una chuleta Javascript doble.

Primera página:

Javascript Cheatsheet. Página 1
  • Tipo de dato Number: Objetos numéricos
  • Tipo de dato String: Objetos de texto
  • Tipo de dato Boolean: Objetos de verdadero o falso
  • Tipo de dato Date: Fechas
  • Tipo de dato RegExp: Expresiones regulares
  • Tipo de dato Function: Funciones

Segunda página:

Javascript Cheatsheet. Página 2
  • Objeto estático de operaciones matemáticas: Math
  • Objetos genéricos (Tipo de dato Object).
  • Otros: Set, Map, WeakSet, WeakMap, Promises, Proxy, Symbols...
  • Consejos rápidos (var, let, const, function, string templates, etc...)

Tercera página:

Javascript Cheatsheet (BOM). Página 3
  • Browser Object Model (BOM)
  • Objeto Window (manipulación ventana actual del navegador)
  • Objeto Screen (manipulación de pantalla o resolución)
  • Objeto Console (utilización de la consola del navegador)
  • Objeto History (manipulación del historial de la ventana actual)
  • Objeto Location (manipulación de la URL actual)
  • Objeto WebStorage (acceso al LocalStorage o SessionStorage)
  • Objeto Performance (rendimiento de la página)
  • Objeto Navigator (características del navegador)
  • Tipos de eventos más populares.

Cuarta página:

Javascript Cheatsheet (DOM). Página 4
  • Document Object Model (DOM)
  • Objeto Document (creación/gestión del documento actual)
  • Objeto Element (creación/gestión de elementos del documento)
  • Objeto Attr (creación/gestión de atributos de un elemento)
  • Objeto Event (creación/gestión de eventos)
  • Objeto Node (creación/gestión de nodos del documento)

Leyenda

Los esquemas de colores tienen cierto significado, así como algunas características de las chuletas:

  • Cada bloque tiene las propiedades y métodos asociados a ese tipo de dato.
  • Casi todos los tipos de datos heredan propiedades/métodos de Object y Function.
  • El icono izquierdo de las propiedades/métodos es el tipo de dato que devuelve.
  • Los colores de los parámetros representan el tipo de dato de los mismos.
  • Las propiedades o métodos estáticos se simbolizan de forma circular.
  • Las características disponibles a partir de ECMAScript 6 (ES6) con fondo rojo.
  • Los parámetros subrayados son obligatorios, el resto opcionales.

Consideraciones

Se agradecerá cualquier tipo de sugerencia, difusión o apunte sobre la cheatsheet.

Descarga

He abandonado la opción de publicar esta cheatsheet bajo un formato de pago porque creo en otra forma de hacer las cosas. Confío en que todo el que sepa valorar el trabajo ajeno que ha supuesto la elaboración de esta chuleta realizará una donación con la cantidad que estime justa. Me gustaría seguir haciendo este trabajo en un formato libre, pero para ello necesito la ayuda de todos.

Agradezco toda difusión que se haga de esta chuleta. Por favor, si lo hacéis, utilizad el enlace de este artículo (o el de la propia página de la chuleta), no utilicen enlaces directos o que puedan hacer hotlinking. Si tienes cualquier tipo de problema con la descarga o donación, contacta conmigo y lo resolveré inmediatamente:

URL | LenguajeJS

Recuerda que también tienes LenguajeCSS.com y LenguajeHTML.com, donde encontrarás otras cheatsheets de frontend. También tienes otras chuletas anteriores que he realizado, como una cheat sheet de PHP o una cheat sheet de ModRewrite.

¿Quieres aprender a usar todo esto? Con la organización de la Oficina de Software Libre de la Universidad de La Laguna y de la Fundación General de la Universidad de La Laguna (Tenerife), imparto un curso de Programación web con Javascript en el que aprenderás a programar con Javascript utilizando las características de la cheatsheet.

Temario y enlaces de inscripción | Curso de Programación web con Javascript

10 divertidas anécdotas sobre programación

10 curiosas y divertidas anécdotas relacionadas con el mundo de la programación e Internet, explicadas para neófitos.

Por lo general, suelo compartir en redes sociales (sobre todo en mi cuenta de Twitter, @Manz) curiosidades relacionadas con el mundo de la tecnología, la informática y la programación, siempre divertidas o con un toque de humor.

En esta ocasión, no quería dejarlo pasar y he creado un breve artículo con las mejores anécdotas que he encontrado últimamente, explicándolas un poco para que incluso aquellos que son ajenos a la programación, puedan también comprender ese curioso y extraño sentido del humor que nos caracteriza.

1. ¿Cómo aprender a programar en una noche?

En la red social Quora (una red social bastante conocida de preguntas y respuestas) un usuario (probablemente, con prisas debido a un eminente trabajo o examen) lanzaba la siguiente pregunta: «¿Cómo puedo aprender a programar en una sola noche?».

Entre otras, un usuario le dejaba la siguiente respuesta:

«Mete un portátil en tu mochila y viaja al polo norte al comienzo del invierno. Tendrás 6 meses de noche para aprender a programar. Una vez allí, leéte Google de cabo a rabo. Hay montón de libros electrónicos y tutoriales en Internet.»

Mensaje en Quora: ¿Cómo aprender a programar en una noche?

Programar es una tarea muy compleja que conlleva comprender una larga serie de términos y conceptos que hay que dominar y combinar con lógica, abstracción y metodología. Personalmente, considero que en una noche se pueden aprender unas bases muy concretas y reproducir códigos ajenos, pero todo ello dista bastante de aprender realmente a programar.

Como decía Descartes, «Daría el doble de lo que sé, por la mitad de lo que ignoro».

Tweet | Source

2. Detener un servidor religiosamente

Reconozco que esta me sorprendió, no pensé que pasara de las típicas tonterías que escribo a veces. Hace algunos meses, me encontré con una imagen que me llamó bastante la atención. Desconozco la historia que hay detrás de ella (¿alguien la conoce?), pero en la fotografía se veía un supuesto miembro religioso bendiciendo con un hisopo lo que parecen varios armarios de servidores, probablemente algún acto inaugural.

Al margen de que realmente sea eso lo que sucedió, se me ocurrió aprovechar la polisemia (juego de palabras) de «daemon» (demonio, palabra con la que se conoce a los servicios en GNU/Linux) con un supuesto exorcismo. En GNU/Linux se puede detener un servidor (realmente, un servicio) escribiendo /etc/init.d/daemon stop, por lo que la broma quedaba redonda.

/etc/init.d/daemon stop

Rápidamente se popularizó y la broma empezó a replicarse en Twitter con otros autores, desmotivadores y webs estilo Taringa. Incluso me criticaron duramente por no haber utilizado systemd en el chiste. Esas cosas que pasan en Internet.

3. Un empleado poco común

Otra anécdota bastante cómica nace a partir de una pregunta en StackOverflow (red social de cuestiones de programación), en la que un usuario comenta que en su empresa han contratado a un empleado que se apellida Null. Para los que no lo sepan, Null es un valor especial en programación que representa la ausencia de un valor, por lo que la aplicación web de esta empresa dejaba de funcionar al introducir el nombre del empleado.

El empleado apellidado «Null» (y posiblemente, con malvados padres informáticos)

La situación no es especialmente cómica, pero para los programadores es desternillante debido a lo inusual que es y a la escasa probabilidad de que ocurriese algo similar.

En los comentarios, algunos usuarios proponen como solución despedir al usuario o pedirle que se cambie de apellidos, aunque la mayoría creen fervientemente que se trata del pequeño Bobby XML, el hermano perdido de Bobby Tables.

Tweet | Source

[...]

Queda el 58% del artículo
Leer artículo completo

HTML5 Cheatsheet (Chuleta HTML)

Chuleta o cheatsheet de HTML5 (lenguaje de marcado HTML) en formato PDF, muy útil para desarrolladores frontend, diseñadores o programadores web.

Si eres diseñador o desarrollador de frontend, programador o simplemente te interesa el diseño de páginas webs, quizás esta chuleta (cheat sheet) te interese. Se trata del Lenguaje HTML, un lenguaje de marcado que se ideó con el propósito de definir la estructura de una página o documento web, que tiene como finalidad reunir una serie de información en diferentes formatos (texto, imágenes, video, audio, etc...).

Con la llegada y soporte de HTML5 en la mayoría de los navegadores, es el momento perfecto para aprender todo lo relacionado con HTML5: etiquetas de texto, agrupación, semánticas, formularios, validaciones, multimedia, etc...

HTML5 Cheat Sheet (Desarrollo web, chuleta HTML)

Esta cheatsheet te será muy útil si estás aprendiendo, tienes mala memoria o quieres tener en un sólo lugar de consulta rápida los nombres, atributos y valores asociados a cada elemento HTML.

Contenido

La cheatsheet contiene información sobre las siguientes características de HTML5, dividido en dos páginas. La primera de ellas contiene en su mayoría características básicas de HTML como etiquetas de formato o agrupación de contenido, así como muchas novedades multimedia de HTML5, mientras que la segunda incorpora etiquetas relacionadas con los formularios HTML5.

Primera página:

HTML5 Cheatsheet. Página 1
  • Sintaxis general de HTML (elementos, atributos y valores)
  • Etiquetas de formato de texto
  • Etiquetas de agrupación
  • Etiquetas de listas (y definiciones)
  • Etiquetas de tablas
  • Etiquetas de sección (semánticas)
  • Etiquetas de scripting
  • Etiquetas multimedia (imagen, recursos, video, audio, subtítulos...)

[...]

Queda el 61% del artículo
Leer artículo completo

1 2 3 4 ... 9 #