GAMBADAS: imágenes maliciosas subidas a Docker Hub minaban criptomonedas en tu servidor

22/06/2018
Artículo original

Imagen ornamental

Las imágenes de Docker son paquetes que incluyen aplicaciones y bibliotecas pre-configuradas para ejecutarse de manera aislada encima del sistema operativo actual (ver ¿Qué diferencia hay entre Docker (Contenedores) y Máquinas virtuales?). Docker mantiene un repositorio público de imágenes, Docker Hub, con miles de imágenes de contenedores listas para ser utilizadas, ahorrándonos mucho trabajo a la hora de definir las nuestras propias. Cualquiera puede subir sus propias imágenes a Docker Hub, lo cual hace que sea tan rico y útil, pero al mismo tiempo se debe ser cauteloso a la hora de usar algo que alguien haya subido. Pasa un poco como con npm, el repositorio de paquetes de Node.js: es muy útil pero hay que tener cuidado.

Durante los pasados meses de julio y agosto de 2017 alguien (o más de una persona) con el identificador docker123321 subió 3 imágenes a Docker Hub con algunas utilidades interesantes. Y mucha gente las descargó más de 5 millones de veces. El problema es que, junto a las utilidades, estas imágenes contenían también algunas puertas traseras y software para minado de criptomonedas. Cuando las ejecutabas en tu sistema o en uno de tus servidores, se ponían en marcha aprovechándose de tu infraestructura para generar dinero para estos malhechores.

Por supuesto, no deberías descargarte imágenes subidas por organizaciones o personas que no conozcas. Peor lo cierto es mucha gente lo hace y la prueba es que estas se descargaron varios millones de veces. El verdadero problema se dio porque, a pesar de que alguien avisó a Docker ya en Agosto a través de una incidencia en Github, la empresa tardó más de 8 meses en hacer caso y retirar las imágenes comprometidas. Y esto sí que es grave. Tampoco eliminaron la cuenta maliciosa por lo que llegaron a subir con ella otras 14 imágenes contaminadas más, que también fueron denunciadas (en esta ocasión por empresas de seguridad, no por usuarios individuales), sin que Docker hiciera nada al respecto.

Un análisis del contenido de las imágenes comprometidas, reveló que se usaba la dirección de una cartera para recibir las criptomonedas que se habían minado. Gracias a ello se ha averiguado que fueron capaces de mirar 545 Moneros, lo que equivale a unos 90.000 dólares nada menos.

La empresa de seguridad Kromtech tiene un artículo muy detallado sobre todo el incidente. Además incluye una lista de las 17 imágenes infectadas para que lo revises, no vaya a ser que lo estés usando. Seguramente quedan todavía equipos y servidores con ellas en funcionamiento sin que el responsable lo sepa si no ha leído sobre este problema.

Lo que debemos tener claro como desarrolladores y usuarios de Docker es que si descargamos una imagen desde Docker Hub es como si descargásemos un ejecutable a nuestro equipo: no podemos fiarnos salvo que se trate de alguno obtenido de una fuente conocida y fiable o si lo examinamos con detenimiento para ver qué hace.

Tu marca personal como desarrollador de software

19/06/2018
Artículo original

Marca Personal

La mayoría de nuestra carrera profesional es desconocida. A día de hoy, darse visibilidad más allá de la empresa en la que trabajamos es necesario. Por eso, se habla tanto de la Marca Personal (en inglés Personal Branding). Es un concepto de desarrollo personal que consiste en considerarse uno mismo como una marca, que al igual que las marcas comerciales, debe ser elaborada, transmitida y protegida, con ánimo de diferenciarse y conseguir mayor éxito en las relaciones sociales y profesionales. El concepto surgió como una técnica para encontrar nuevas oportunidades profesionales, no sólo para la búsqueda de trabajo sino también para conseguir reinventarse mediante un cambio de carrera o profesión.

Desde que llevo dedicada al recruitment, he notado que cada vez más los desarrolladores quieren darse visibilidad y sobresalir como profesionales. Pero la mayoría no se sienten identificados con la idea de la autopromoción y el marketing. Eso de intentar venderse no nos gusta a nadie porque lo tenemos asociado a ser un vendehumos o incluso ser un tanto soberbio. Pero como en cualquier profesión, este tipo de profesional existe y miremos hacia donde miremos, siempre aparecen.

Con este artículo aportaré mi visión desde el punto de vista de la contratación de talento y ayudar a conseguir un equilibrio en la gestión de tu marca personal como desarrollador: Ni pasar desapercibido, ni estar en todas partes.

El objetivo de darte visibilidad

Cada vez más los desarrolladores quieren darse visibilidad y sobresalir como profesionales

Lo primero que tienes que saber es si quieres o no darte visibilidad. Si decides que sí, tienes que reflexionar qué quieres conseguir y analizar tanto los pros y los contras de hacerte visible.

Cuando te das a conocer, te pones en el punto de mira. Recibirás halagos, críticas o tal vez no importes tanto, pero son consecuencias que pueden ocurrir y hay que aprender a gestionarlas. Si eres de lo que te sientes cómodo en la discreción, ya puedes olvidarte de pasar desapercibido. Si realmente quieres sobresalir como programador, necesitas construir una sólida reputación y eso significa que tendrás que venderte y construir una marca personal-que te ayudará a tener mejores oportunidades profesionales.

Define el profesional que quieres ser

Lo segundo que tienes que tener claro es qué profesional quieres ser y actuar en consecuencia.

Leí en el blog de simpleprogrammer que su autor John Sonmez -por cierto, también autor del conocido y vendido libro “Soft Skills: The Software Developers Life Manual”, entre otros- tiene en su pared este póster enmarcado. Como ves, deja muy claro qué tipo de reputación es la más aconsejable si queremos ser (re)conocidos. Las dimensiones son dos: hablar y trabajar.

  1. Si hablas más que trabajas = Charlatán
  2. Si trabajas más que hablas = Mártir
  3. Si trabajas tanto como hablas = Buscavidas

Hustler Poster Joey Roth 1140

Si decides ser un Hustler, has elegido que quieres mejorar tu habilidad para salir adelante en la vida y como profesional. Decides invertir en ti como marca y ser conocido.

Crea un mensaje diferenciador

Lo tercero y nada fácil de conseguir: Tienes que pensar en qué quieres que se te conozca. No vale divagar ni hacer una lista de todas las tecnologías en las que programas. Tu respuesta tiene que ser concisa. Tiene que contestar quién eres y qué representas de manera sencilla, específica y clarísima.

Desde mi punto de vista, la especialización es clave porque es lo que te permitirá posicionarte como desarrollador. La mejor forma de aportar valor y que la gente te recuerde es por algo específico. Por ejemplo, imagina que cuando hablan de ti, dicen “Ese desarrollador es el que realizó un tutorial sobre cómo aprender Elixir”. Y si además, tu proyecto le ayudó a aprender. Tu marca personal, está funcionando.

Selecciona los canales adecuados para darte visibilidad

Una vez que tienes claro quién eres y qué representas, tienes que elegir los canales más adecuados para darte visibilidad.

No podemos olvidar que no solo existen los redes sociales, también hay otros canales online y offline que te ayudarán a construir tu marca personal. Por ejemplo, unas ideas:

  • Tu propio blog
  • Crea y colabora en proyectos Opensource
  • Conecta, comparte, opina, genera contenido de calidad en Twitter
  • Asiste a eventos tecnologicos
  • Da charlas técnicas
  • Crea tu propio canal de Youtube
  • Escribe un libro
  • Colabora en blogs

Hay tantos canales donde puedes darte visibilidad que seguramente estás pensando que es imposible estar en todos. No te preocupes, ni es necesario ni tampoco es recomendable estar omnipresente. Querer estar en todos los lados es muy estresante y sí, la exposición repetida es imprescindible para darte a conocer, pero recuerda las dimensiones de las que te hablaba antes. No pierdas de vista el profesional qué quieres ser y por tanto, por el que quieres que se te conozca.

Tienes que ser genuino, consistente y generoso

Entonces, ya tienes claro el mensaje, el canal donde compartir, incluso te has creado un logo con un leitmotiv que te define bastante bien. Eso significa que ¿ya has construido tu marca personal? Pues siento decirte que NO. De nada sirve que intentes construir una marca perfecta e inviertas en autopromocionarte si no hay nada de valor detrás. Falta lo más importante y lo que seguramente marcará el resto de tu carrera profesional: tu personalidad.

En otras palabras:

  • Sé tu mismo: Si en algo somos diferentes unos de otros es en la personalidad y nuestra manera de ser. Eso no se puede copiar, es tu sello.
  • No hagas postureo: No prediques lo que no practicas. Sé un profesional consistente.
  • Aporta y crea valor a los demás: Practica la generosidad y no esperes nada a cambio. Hazlo porque sí. La recompensa a tu altruismo, llegará multiplicado por mil.

Sigue trabajando y ten paciencia

Como ves, construir una marca personal requiere trabajo, esfuerzo, foco y tiempo. No es algo que se logre de la noche a la mañana. Por eso, te aconsejo que empieces ya. No pienses no estás listo o que no tienes nada que contar, no es cierto. Todos tenemos historias que contar y muchos de nosotros queremos conocerlas. Piensa que siempre hay gente que como yo, buscamos talento. Hazte visible para poder encontrarte.

Y nada más, tan solo deja que tu trabajo y los demás hablen de ti.

Conclusión

Si no te das visibilidad no pueden conocerte, pero si te pasas con la sobreexposición puede ser contraproducente. En el término medio, está la virtud. Confío en que si construyes bien su marca personal como desarrollador, conseguirás las mejores oportunidades profesionales.

Recuerda que tienes que ser de verdad. No finjas lo que no eres. Sé ese tipo de profesional que a los demás les gusta que se les asocie contigo.

Y para cuando seas “famoso": Pueden copiarse de tu idea, pero nunca de tu personalidad, estilo y talento ;)

Imagen (cc)

También te recomendamos

Cómo tener éxito en tu próxima entrevista de trabajo para desarrolladores

Evaluación del rendimiento de los desarrolladores: Hablemos de quién y cuándo

Bolsillo, la belleza y la simplicidad materializadas en bolsos hechos a mano

-
La noticia Tu marca personal como desarrollador de software fue publicada originalmente en Genbeta Dev por Emma Salamanca .

Tu marca personal como desarrollador de software

19/06/2018
Artículo original

Marca Personal

La mayoría de nuestra carrera profesional es desconocida. A día de hoy, darse visibilidad más allá de la empresa en la que trabajamos es necesario. Por eso, se habla tanto de la Marca Personal (en inglés Personal Branding). Es un concepto de desarrollo personal que consiste en considerarse uno mismo como una marca, que al igual que las marcas comerciales, debe ser elaborada, transmitida y protegida, con ánimo de diferenciarse y conseguir mayor éxito en las relaciones sociales y profesionales. El concepto surgió como una técnica para encontrar nuevas oportunidades profesionales, no sólo para la búsqueda de trabajo sino también para conseguir reinventarse mediante un cambio de carrera o profesión.

Desde que llevo dedicada al recruitment, he notado que cada vez más los desarrolladores quieren darse visibilidad y sobresalir como profesionales. Pero la mayoría no se sienten identificados con la idea de la autopromoción y el marketing. Eso de intentar venderse no nos gusta a nadie porque lo tenemos asociado a ser un vendehumos o incluso ser un tanto soberbio. Pero como en cualquier profesión, este tipo de profesional existe y miremos hacia donde miremos, siempre aparecen.

Con este artículo aportaré mi visión desde el punto de vista de la contratación de talento y ayudar a conseguir un equilibrio en la gestión de tu marca personal como desarrollador: Ni pasar desapercibido, ni estar en todas partes.

El objetivo de darte visibilidad

Cada vez más los desarrolladores quieren darse visibilidad y sobresalir como profesionales

Lo primero que tienes que saber es si quieres o no darte visibilidad. Si decides que sí, tienes que reflexionar qué quieres conseguir y analizar tanto los pros y los contras de hacerte visible.

Cuando te das a conocer, te pones en el punto de mira. Recibirás halagos, críticas o tal vez no importes tanto, pero son consecuencias que pueden ocurrir y hay que aprender a gestionarlas. Si eres de lo que te sientes cómodo en la discreción, ya puedes olvidarte de pasar desapercibido. Si realmente quieres sobresalir como programador, necesitas construir una sólida reputación y eso significa que tendrás que venderte y construir una marca personal-que te ayudará a tener mejores oportunidades profesionales.

Define el profesional que quieres ser

Lo segundo que tienes que tener claro es qué profesional quieres ser y actuar en consecuencia.

Leí en el blog de simpleprogrammer que su autor John Sonmez -por cierto, también autor del conocido y vendido libro “Soft Skills: The Software Developers Life Manual”, entre otros- tiene en su pared este póster enmarcado. Como ves, deja muy claro qué tipo de reputación es la más aconsejable si queremos ser (re)conocidos. Las dimensiones son dos: hablar y trabajar.

  1. Si hablas más que trabajas = Charlatán
  2. Si trabajas más que hablas = Mártir
  3. Si trabajas tanto como hablas = Buscavidas

Hustler Poster Joey Roth 1140

Si decides ser un Husther, has elegido que quieres mejorar tu habilidad para salir adelante en la vida y como profesional. Decides invertir en ti como marca y ser conocido.

Crea un mensaje diferenciador

Lo tercero y nada fácil de conseguir: Tienes que pensar en qué quieres que se te conozca. No vale divagar ni hacer una lista de todas las tecnologías en las que programas. Tu respuesta tiene que ser concisa. Tiene que contestar quién eres y qué representas de manera sencilla, específica y clarísima.

Desde mi punto de vista, la especialización es clave porque es lo que te permitirá posicionarte como desarrollador. La mejor forma de aportar valor y que la gente te recuerde es por algo específico. Por ejemplo, imagina que cuando hablan de ti, dicen “Ese desarrollador es el que realizó un tutorial sobre cómo aprender Elixir”. Y si además, tu proyecto le ayudó a aprender. Tu marca personal, está funcionando.

Selecciona los canales adecuados para darte visibilidad

Una vez que tienes claro quién eres y qué representas, tienes que elegir los canales más adecuados para darte visibilidad.

No podemos olvidar que no solo existen los redes sociales, también hay otros canales online y offline que te ayudarán a construir tu marca personal. Por ejemplo, unas ideas:

  • Tu propio blog
  • Crea y colabora en proyectos Opensource
  • Conecta, comparte, opina, genera contenido de calidad en Twitter
  • Asiste a eventos tecnologicos
  • Da charlas técnicas
  • Crea tu propio canal de Youtube
  • Escribe un libro
  • Colabora en blogs

Hay tantos canales donde puedes darte visibilidad que seguramente estás pensando que es imposible estar en todos. No te preocupes, ni es necesario ni tampoco es recomendable estar omnipresente. Querer estar en todos los lados es muy estresante y sí, la exposición repetida es imprescindible para darte a conocer, pero recuerda las dimensiones de las que te hablaba antes. No pierdas de vista el profesional qué quieres ser y por tanto, por el que quieres que se te conozca.

Tienes que ser genuino, consistente y generoso

Entonces, ya tienes claro el mensaje, el canal donde compartir, incluso te has creado un logo con un leitmotiv que te define bastante bien. Eso significa que ¿ya has construido tu marca personal? Pues siento decirte que NO. De nada sirve que intentes construir una marca perfecta e inviertas en autopromocionarte si no hay nada de valor detrás. Falta lo más importante y lo que seguramente marcará el resto de tu carrera profesional: tu personalidad.

En otras palabras:

  • Sé tu mismo: Si en algo somos diferentes unos de otros es en la personalidad y nuestra manera de ser. Eso no se puede copiar, es tu sello.
  • No hagas postureo: No prediques lo que no practicas. Sé un profesional consistente.
  • Aporta y crea valor a los demás: Practica la generosidad y no esperes nada a cambio. Hazlo porque sí. La recompensa a tu altruismo, llegará multiplicado por mil.

Sigue trabajando y ten paciencia

Como ves, construir una marca personal requiere trabajo, esfuerzo, foco y tiempo. No es algo que se logre de la noche a la mañana. Por eso, te aconsejo que empieces ya. No pienses no estás listo o que no tienes nada que contar, no es cierto. Todos tenemos historias que contar y muchos de nosotros queremos conocerlas. Piensa que siempre hay gente que como yo, buscamos talento. Hazte visible para poder encontrarte.

Y nada más, tan solo deja que tu trabajo y los demás hablen de ti.

Conclusión

Si no te das visibilidad no pueden conocerte, pero si te pasas con la sobreexposición puede ser contraproducente. En el término medio, está la virtud. Confío en que si construyes bien su marca personal como desarrollador, conseguirás las mejores oportunidades profesionales.

Recuerda que tienes que ser de verdad. No finjas lo que no eres. Sé ese tipo de profesional que a los demás les gusta que se les asocie contigo.

Y para cuando seas “famoso": Pueden copiarse de tu idea, pero nunca de tu personalidad, estilo y talento ;)

Imagen (cc)

También te recomendamos

Evaluación del rendimiento de los desarrolladores: Hablemos de quién y cuándo

Cómo tener éxito en tu próxima entrevista de trabajo para desarrolladores

Bolsillo, la belleza y la simplicidad materializadas en bolsos hechos a mano

-
La noticia Tu marca personal como desarrollador de software fue publicada originalmente en Genbeta Dev por Emma Salamanca .

Cómo Microsoft hizo que me volvieran a gustar otra vez .NET y C#

19/06/2018
Artículo original

Nota: este artículo es una traducción de un post de Kaushal Subedi con su permiso expreso. Puedes seguirle en Twitter y en Github.

"¿Por qué diablos querrías usar ASP.NET? ¿Te has quedado atrapado en los 90?". Estas son las palabras que salían de la boca de un viejo compañero de trabajo mío cuando se me ocurrió la posibilidad de utilizar ASP.NET para un proyecto que estábamos a punto de empezar hace un par de años. Siempre estaba de acuerdo con él la mayoría de las veces. Microsoft había desarrollado un gran lenguaje, un potente framework web y un gran conjunto de herramientas en torno al mismo, y aún así había muchas personas que no estaban contentas.

La razón principal por la que optamos por no usar ASP.NET para ese proyecto en aquel entonces fue debido a lo cerrado que estaba tanto el lenguaje como el framework. Usar ASP.NET implicaba pagar licencias de Windows Server para nuestros servidores o meternos en faena con algo tipo Mono para ser capaces de desplegar nuestras aplicaciones en Linux que era nuestra plataforma de elección.

Pero las cosas han cambiado mucho desde entonces, Microsoft ha subido mucho el nivel y le ha dado la vuelta a la situación. ASP.NET ha pasado de ser algo que estabas "obligado" a utilizar porque lo usaban en tu empresa, a algo que quieres usar, por muy desarrollador hípster y moderno que seas...

Esquema de la plataforma .NET

Cuando aprendí C# por primera vez hará unos 5 años, pensaba que tenía que ser el mejor lenguaje de programación de todos los tiempos. Pero esa sensación se fue apagando a medida que me encontraba con demasiadas lagunas y deficiencias en lo que proponían. Empecé con ASP.NET Core en sus inicios cuando estaban disponibles públicamente los primeros builds.

Mi interés por ASP.NET Core y C# volvió cuando Microsoft anunció que sería multiplataforma. Todo el problema con la pila de Microsoft antaño, no es que fuera un stack deficiente en términos de capacidades técnicas, rendimiento o cualquier otro requerimiento relevante para un desarrollador... El problema estaba en que era muy cerrada y tenías que usar tecnologías propietarias de Microsoft como Windows Server e IIS para poder desplegar tus aplicaciones.

Esto se traducía en que el coste de gestionar tus servicios iba a ser mucho mayor comparado con la mayoría de las otras pilas tecnológicas, incluso Java que es el principal competidor de C#. Aunque los costes no supondrían mucho para una gran empresa que genera más ingresos en unos meses que un desarrollador medio en toda su vida, sí que tenía su importancia para una startup en sus inicios o para un desarrollador autónomo intentando lanzar algo por su cuenta. Otro estigma relacionado con el stack de Microsoft era que su tecnología estaba anticuada y que tenía muchas API's desfasadas e inconsistentes que hacían que todo la pila pareciese inflada y desproporcionada.

Con la aparición de .NET Core, ASP.NET Core y las nuevas versiones de C#, Microsoft ha cambiado el terreno de juego. C# ya era uno de los lenguajes más usados en la industria, pero esta nueva dirección que ha tomado Microsoft ha protegido su posición y ha ayudado a que la adopción de su pila haya crecido de manera significativa.

Por si llevas un tiempo viviendo en una cueva: .NET Core es un nuevo framework lanzado por Microsoft hace un par de años que ha solucionado las deficiencias que arrastraba su stack hasta la fecha. Es multiplataforma, eficiente, ligero y lo mejor de todo, de código abierto. Era impensable que Microsoft liberase algo que se pudiera ejecutar en cualquier otra plataforma distinta a Windows, pero es que encima es una plataforma de desarrollo completa que se puede usar para programar en Linux y en Mac OS X de Apple.

La terminología que usa Microsoft para los componentes de su pila puede ser un poco confusa así que vamos a explicarla brevemente primero:

C#

Así se denomina el lenguaje de programación de propósito general desarrollado por Microsoft y que está considerado un estándar por ECMA. La última versión principal es la 7, pero puedes encontrar toda la historia de este lenguaje en la página oficial de Microsoft: historia de C#. Y también averiguar por qué deberías aprender C#.

.NET Framework

Este es el framework de aplicaciones de propósito general que usa principalmente C#. Puede ser usado para crear cualquier cosa: desde aplicaciones de escritorio o aplicaciones móviles a aplicaciones web. Sin embargo, solo funciona en Windows y en Windows mobile platform.

.NET Core Framework

Es la nueva versión de .NET que es multi-plataforma, funciona en la mayoría de sistemas operativos que no son de Microsoft. Aunque se supone que va a ser la próxima generación del framework .NET, Microsoft aún mantiene el "antiguo" .NET Framework.

.NET Standard

Es el nombre que se le da al conjunto de API's comunes más importantes que Microsoft provee mediante .NET Framework y .NET Core para unificarlo todo y garantizar que las bibliotecas sean compatibles entre los diferentes sistemas dentro de .NET.

ASP.NET Core

Es el framework de aplicaciones web que está construido sobre el framework .NET Core. Es el sucesor de ASP.NET que solo era soportado por Windows.

Ahora que ya hemos explicado brevemente los componentes, pasemos a profundizar un poco en algunas de las cosas que Microsoft ha hecho bien con su nueva pila que han hecho que me vuelva a "engatusar" con C# y .NET Core.

Funcionalidades

Desde fuera todo el nuevo ecosistema de .NET Core puede parecer como un lobo con piel de cordero, especialmente a aquellos que no lo han investigado con detenimiento ya que puede parecer que simplemente es una nueva versión del antiguo framework .NET.

Nada más lejos de la realidad, Microsoft ha dado mucho de sí para crear un concepto nuevo desde cero. Una de las cosas que diferencia .NET Core de su antecesor es la multitud de nuevas funcionalidades que Microsoft ha implementado. La funcionalidad más grande es que el nuevo stack es multiplataforma. Y no se trata de una cosa hecha a medias como muchas veces hemos visto con otras tecnologías. Han vuelto a programar todo el núcleo de cero, pensando en soportar varias plataformas desde el principio. Esto también ha permitido el uso de los últimos sistemas de paquetización de aplicaciones como contenedores y Docker con .NET Core. También han desarrollado herramientas propias que permiten desarrollar multiplataforma en su pila que es algo que Microsoft nunca ha hecho antes.

Otra funcionalidad mayúscula es la no dependencia en IIS, que es el servidor web de Microsoft. Han creado un servidor web embebido único que denominan Kestrel, que no solo ha eliminado a IIS como dependencia sino que permite que los desarrolladores creen aplicaciones autocontenidas, lo que implica una mayor flexibilidad cuando llega la hora de los despliegues. Pero eso no es todo, hay un montón de novedades en .NET Core que el antiguo .NET no tenía. La guía oficial de Microsoft .NET Core es un buen punto de partida si se quiere aprender más sobre todas sus funcionalidades.

El conjunto de nuevas funcionalidades no termina con .NET Core , C# también se ha estado actualizando constantemente con muchas funcionalidades útiles que se han ido añadiendo. Destacan novedades muy demandadas como las tuplas, async/await, funciones locales y demás se han añadido para hacer que la programación en C# sea mucho más eficiente.

Rendimiento

Otra gran razón por la que empezar a usar .NET Core son las mejoras de rendimiento. Microsoft en este sentido es de los mejores fabricantes a la hora sacarle rendimiento a los lenguajes de programación de propósito general. El rendimiento es un tema sensible entre los desarrolladores ya que la pila y las herramientas tienen un papel limitado a la hora de optimizar una aplicación para sacarle el máximo rendimiento, el resto depende de la implementación del desarrollador. La pila de desarrollo lo que sí puede hacer es promover y "forzar" buenas prácticas de cara a la optimización y el rendimiento en escenarios de uso típico para que dichas mejoras sean escalables y tengan un mayor alcance, que es justo lo que hizo Microsoft.

C# es un lenguaje de programación potentísimo por sí mismo y viene con muchas funcionalidades de serie que permiten ajustar al milímetro las aplicaciones de cara a mejorar el rendimiento, pero el equipo de .NET Core ha trabajado con ahínco para optimizar muchas de las API’s de serie para obtener un rendimiento máximo. Incluso las versiones anteriores de ASP.NET Core obtuvieron menciones muy notables en los benchmarks de TechEmpower por su rendimiento. Hay muchos ejemplos de empresas que están usando las optimizaciones disponibles en .NET Core como hizo Raygun para maximizar la eficiencia. Microsoft recientemente ha sacado la última versión de .NET Core, la 2.1 junto con un gran changelog con mejoras de rendimientos. El equipo de desarrollo ha estado constantemente liberando versiones con optimizaciones de rendimiento desde que ha salido el nuevo framework.

Versatilidad

La principal razón por la que elegí el stack de Microsoft es su versatilidad. Ahora es de código abierto y multiplataforma, y puedo hacer casi cualquier cosa con una única pila de desarrollo. Puedes hacer aplicaciones de escritorio con UWP, aplicaciones móviles multiplataforma con Xamarin (que pertenece a Microsoft), aplicaciones web con ASP.NET Core, aplicaciones de tiempo real con SignalR y mucho más. Incluso si programas vídeojuegos también puedes usar Unity aunque no está hecha por Microsoft. Se trata de usar la herramienta apropiada para cada tipo desarrollo. Con este enfoque de Microsoft puedo hacerlo sin tener que dejar de usar el lenguaje, las herramientas y API's con las que mejor me desenvuelvo y que más me gustan. Y todo gratis.

Herramientas

Nunca pensé que diría esto ya que en las primeras versiones había muchos bugs, pero las herramientas son una de las mejores cosas del ecosistema de .NET en este momento. Tienes muchas formas de hacer desarrollos en múltiples plataformas. El IDE principal de Microsoft, Visual Studio es la mejor opción si te gusta trabajar con entornos de desarrollo integrados. Si te gusta tener más control sobre las herramientas y no quieres ir tan de la mano como lo hacen los IDE, tienes Visual Studio Code que es su editor de código multiplataforma y herramientas de línea de comandos que te permiten crear, probar y desarrollar aplicaciones sin todo el "bulto" de un IDE completo. VS Code también incorpora un montón de extensiones de terceros que te ayudan a mejorar la experiencia de desarrollo.

Visual Studio Code

También está Visual Studio para Mac que no es igual que el de la versión de Windows, pero sigue siendo un paquete muy completo que te permite desarrollar con el nuevo stack de Microsoft en macOS. Si estás en Linux o si quieres un IDE diferente al que ofrece Microsoft, la empresa detrás de Android Studio, Jetbrains, ha lanzado un IDE llamado Rider que está bastante bien y es mi herramienta principal en Mac. Rider también está disponible para los tres sistemas operativos principales. El sistema de autocompletado Microsoft Intellisense es el mejor que he encontrado en cualquier pila de desarrollo principal, y si le sumas herramientas como Jetbrains ReSharper las cosas se vuelven ya muy eficientes. Mi máquina principal para programar es un MacBook y me encanta lo productivo que puedo llegar a ser en mi flujo de trabajo con Jetbrains Rider o VSCode.

Microsoft ha invertido mucho tiempo y esfuerzos de ingeniería en su stack ya desde hace unos años, y como resultado ahora mismo tienen un stack de desarrollo muy estable, y un equipo de desarrollo experimentado y con un know-how muy potente. El nuevo .NET Core abre sus puertas a un nuevo perfil de desarrolladores, mostrando el poderío de una empresa gigante y lo rápido que le pueden dar la vuelta a situaciones difíciles. Desde que nombraron al CEO actual, Satya Nadella, ha empezado a dinamizar la parte de ingeniería de desarrollo de la empresa y el resultado han sido todos estos cambios enormes, y que tienen mucho sentido ya que él se ha dedicado toda la vida a la programación y a la ingeniería de software. C# y .NET Core son probablemente lo mejor que ha hecho Microsoft en el terreno del desarrollo de software en mucho tiempo y a muchos la música les suena muy bien.

Cómo crear enlaces de descarga directa para archivos de Google Drive, OneDrive o Dropbox

18/06/2018
Artículo original

Nota: este post lo escribí originalmente en enero de 2014, hace mucho tiempo. Por el medio cambiaron muchas cosas y con el tiempo dejó de funcionar ya que modificaron la manera de acceder a los enlaces. Hoy, en junio de 2018, lo he revisado ya que parece que es bastante popular y lo he dejado con instrucciones nuevas que funcionan. Lo que he hecho es analizar de nuevo el proceso en todos los "discos cloud" y he vuelto a escribir el post desde cero, esta vez añadiendo además algunos vídeos muy cortos explicativos que creo que lo dejarán más claro. Si cuando leas esto ha pasado tiempo y ya no funciona puedes dejarlo en los comentarios e intentaré actualizarlo en la medida de lo posible, pero debes tener en cuenta que estas cosas las cambian de vez en cuando y pueden fallar, dejando sin validez los enlaces anteriores que tuvieses.

Truco sencillo y rápido, pero útil...

Aunque las opciones que tienen para compartir la mayor parte de los discos duros "cloud" son bastante buenas, en muchas ocasiones lo que a todos nos gustaría es poder dar el enlace directo de descarga para que ni siquiera salga la vista previa de los archivos. O sea, permitir una descarga directa de archivos de manera transparente para quien se lo enviamos, sin que van siquiera en dónde los has colgado.

Vamos a ver cómo conseguirlo en los sistemas más populares...

Enlaces de descarga directa en Dropbox

En Dropbox la cosa no podría ser más sencilla.

Para compartir algo en Dropbox solo hay que pulsar en el botón "Sharing" a la derecha del archivo y podremos obtener un enlace directo a éste, así:

Esto genera una dirección que saca la vista previa del archivo y que tiene este formato:

https://www.dropbox.com/s/xxxxxxx/nombre_del_archivo.ext?dl=0

siendo "xxxxx" un identificador global único, y luego el nombre del archivo seguido d eun parámetro de nombre "dl" con el valor 0.

Esto nos lleva directos a la vista previa del documento, lo cual estaría bien muchas veces si no fuese porque, por ejemplo, si no estamos autenticados veremos algo estilo esto (pulsa para aumentar):

Vista previa de documento en Dropbox con diálogo de autenticación

que no es nada agradable para los usuarios ya que les impide ver directamente la vista previa, invitándoles a acceder o a registrarse. No mola.

 Para obtener una descarga directa más sencillo no podría ser: cambias el valor del parámetro de dl de 0 a 1, es decir, la dirección que debes compartir es la misma que te da el producto cuando la creas solo que termina en 1 en lugar de en 0, algo así:

https://www.dropbox.com/s/xxxxxxx/nombre_del_archivo.ext?dl=1

¡Listo! Con esto les darás una descarga directa del archivo sin pasar por Dropbox.

Seguimos...

Enlaces de descarga directos en Google Drive

Subimos el archivo en cuestión a Google Drive. Lo seleccionamos, pulsamos con el botón derecho y utilizamos el menú “Compartir”:

GDrive_Compartir

En la ventana que aparece lo compartimos usando la opción "Obtener un link para compartir" ("Get a shareable link" en inglés), o bien yendo a las propiedades avanzadas y compartiéndolo de manera pública o bien a través de un enlace (primeras dos opciones respectivamente), permitiendo que se pueda ver:

GDrive_Compartir2

El enlace que se genera tiene este aspecto:

La porción marcada en rojo, después de la “/d/”, es el identificador único de nuestro documento.

Si queremos descargar el archivo de manera directa no es fácil obtener el enlace ya que la interfaz de usuario no permite averiguarla, y si “snifeamos” el tráfico para ver el URL desde el que se descarga, se trata de una dirección muy complicada con otros parámetros e identificadores internos que no tienen nada que ver con el URL anterior.

La forma de conseguirlo, sin embargo, es muy sencilla. Basta con utilizar un URL como este:

https://drive.google.com/id=XXXXXXXXX&authuser=0&export=download

sustituyendo las “X” por el identificador resaltado en rojo en la figura anterior. Por ejemplo, en el caso anterior quedaría:

 https://drive.google.com/uc?id=1oOAcPD8Udy3ra3Ix553qw1yuO1EEaAPj&authuser=0&export=download

Con esto conseguiremos enlazar a la descarga directa del archivo :-)

Enlaces de descarga directa en OneDrive

Para compartir en OneDrive tenemos que realizar el siguiente proceso:

 

Esto te genera un enlace que por defecto tiene un aspecto similar a este:

https://1drv.ms/b/s!AswD1arv4oXqkgfkaICTwiZ1j3rB

Al copiar este enlace en el navegador (hazlo mejor en una ventana "privada" o en un navegador diferente al que hayas usado, para no estar autenticado en el sistema), la dirección cambia varias veces hasta mostrarse por completo la dirección final correcta, que será algo así:

https://onedrive.live.com/?authkey=%21AORogJPCJnWPesE&cid=EA85E2EFAAD503CC&id=EA85E2EFAAD503CC%212311&parId=EA85E2EFAAD503CC%21437&o=OneUp

Una vez ahí, lo único que tenemos que hacer es añadir la palabra "download.aspx" delante de la interrogación y cambiar el nombre del parámetro "id" por "resid", así: 

Y, voilá!, tendremos la descarga directa del archivo.

Listo. Con estos trucos podremos facilitar mucho la descarga de archivos a nuestros amigos, visitantes del blog, etc... para que no tengan que esperar a que se genere una vista previa (que quizá ni siquiera se vea) y evitar todo tipo de molestias. Simple pero útil.

¡Espero que te resulte de ayuda!

Java Magic Box

15/06/2018
Artículo original

Y siempre si se pudo, me costo mas trabajo del que pensaba, pero pude escribir la version de la Caja que en Javascript me parece muy simple en Kotlin parece que estoy escribiendo marciano y en Java, pues ni se diga, la verdad es que no parece java :P, pero lo importante y tal vez me haga regresar a escribir java, es que el soporte funcional es bueno (obvio no es un lenguaje puramente funcional, si no, se me enojan los clojurianos).

Pero si puedo escribir codigo como este, para servicios REST y otras moneria ya me imagino las posibilidades, bueno les dejo el codigo:

import java.util.function.Function;

class Box<T>  {

    private T x;

    public Box(T x) {
        this.x = x;
    }

    <R> Box<R> map(Function<T, R> f) {
        return new Box(f.apply(this.x));
    }

    <R> T fold(Function<T, R> f) {
        return (T) f.apply(this.x);
    }

    String inspect() {
        return "Left(".concat(this.x.toString()).concat(")");
    }

}

public class Main {

    public static void main(String... args) {

        Box<Integer> num = new Box<String>("  64  ")
                .map((String x) -> x.trim())

leer más

Kotlin Magic Box

13/06/2018
Artículo original

Un monad es una tecnica que nos permite crear tipos propios, extender funcionalidades de una meanera limpia y hacer tranformaciones entre tipos. Me gusto mucho en kotlin porque elimina el estar escribiendo tantos tipos todo el tiempo que a veces me parecen inecesarios (esto opinion muy personal), en este caso vamos a escribir una clase Caja que nos permite aplicar funciones de una forma continua (encadenada), manteniendo un solo closure (parcialmente, en kotlin no he hecho pruebas de rendimiento para ver cuanta memoria usa, pero en javascript el incremento en memoria es minimo).

En el ejemplo podemos ver como cambiamos de un numero en String para despues limpiarlo y convertirlo a su equivalente en carácter, lo anterior de una manera limpia, sin hacer uso mas que de una sola variable.

En el archivo Main.kt colocamos lo siguiente:

class Box<T>(private val x: T) {

    fun <R> map(f: (x:T) -> R): Box<R> {
        return Box(f(x))
    }

    fun <R> fold(f: (x:T) -> R): R {
        return f(x)
    }

    fun inspect(): String {
        return "Box($x)"
    }

}

leer más

Mezclando colores y creando efectos fotográficos en CSS mediante el uso de "blend modes"

12/06/2018
Artículo original

Pensemos en un píxel de un objeto o imagen como una terna (r, g, b) donde los valores r, g y b representan la cantidad de color rojo, verde y azul. Estos valores se encuentran en el rango de 0 a 1, siendo 1 la máxima cantidad posible, es decir, (1, 1, 1) sería el color blanco y (0, 0, 0) el negro. Ahora, cuando dos objetos se superponen, habrá uno de ellos que esté por encima (o en el frente), y generalmente su color se impondrá, sustituyendo al que esté debajo (o en el fondo).

Sin embargo, los colores de frente y de fondo se pueden mezclar de otras formas, produciendo un color final distinto a ambos. Esto es de uso común en programas de ilustración y diseño gráfico, que nos permiten dibujar utilizando operaciones sobre los colores: desde aritmética básica como sumar y restar hasta otras operaciones más complejas, la combinación de colores invertidos o los cálculos en otros espacios de color. En este artículo vamos a aprender a hacer algunas de estas operaciones con CSS, y a estudiar algunas aplicaciones interesantes.

La propiedad mix-blend-mode

La propiedad mix-blend-mode de CSS nos permite combinar los colores de distintos objetos superpuestos. Su valor por defecto es normal, lo que indica que el color del objeto de frente siempre sustituye a los demás.

Veamos un primer ejemplo simple, tendremos tres capas circulares de colores opacos y los superpondremos unos encima de otros. Utilizaríamos una estructura sencilla en HTML como la siguiente:

<div class="isolate">
  <div class="first obj"></div>
  <div class="second obj"></div>
  <div class="third obj"></div>
</div>

Es importante además aislar la mezcla de colores del fondo global de la página. De lo contrario, los colores de los objetos no sólo se mezclarían entre ellos sino también con el fondo, dando lugar a resultados indeseados. Para evitar esto, usamos la propiedad isolation con el valor isolate sobre el objeto contenedor. El resto del CSS que listo a continuación ajusta el posicionamiento y asigna colores a los objetos:

.isolate {
  isolation: isolate;
}

.obj {
  width: 300px;
  height: 300px;
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: normal;
}

.first {
  background: linear-gradient(rgb(70%, 0%, 30%), rgb(100%, 0%, 60%));
}

.second {
  background: linear-gradient(rgb(30%, 70%, 0%), rgb(60%, 100%, 0%));
  margin-left: 200px;
}

.third {
  background: linear-gradient(rgb(0%, 60%, 100%), rgb(0%, 30%, 70%));
  margin-left: 100px;
  margin-top: 200px;
}

En la siguiente figura podemos ver el resultado de utilizar este CSS sobre los elementos definidos en el HTML anterior:

Círculos opacos con tres ajustes de mix-blend-mode

En el modo normal, los objetos se ven como en la parte izquierda, superpuestos con el primer objeto tapado por los otros dos, y el último encima de los dos primeros. En la imagen del medio se ha modificado el modo de mezcla a lighten, que combina los colores quedándose con el máximo de cada canal (es decir, el color resultante tiene el máximo de los rojos, el máximo de los verdes y el máximo de los azules de todos los píxeles mezclados). Este modo siempre genera colores de igual o mayor luminosidad que los que se combinan. El tercer ejemplo en la figura se corresponde con el modo darken, que actúa a la inversa del anterior, asignando al color resultante los mínimos de cada canal. Análogamente, el resultado es siempre más oscuro que los colores combinados.

La propiedad background-blend-mode

Si en lugar de combinar varios objetos queremos jugar con sólo uno, aplicándole una o varias imágenes de fondo y un color de fondo, existe la propiedad background-blend-mode para realizar la tarea de combinación de colores en los fondos. En este caso, sólo necesitamos un objeto al que asignarle los fondos y el modo de mezcla:

<div class="bgblend"></div>

El estilo CSS a continuación ajusta el tamaño, añade un borde del mismo color que el fondo y establece una imagen de fondo. El borde nos servirá para comparar la mezcla de colores con el color seleccionado.

.bgblend {
  width: 600px;
  height: 600px;

  border: 10px solid rgb(0%, 60%, 70%);
  background-color: rgb(0%, 60%, 70%);
  background-image: url("scott-webb-102825-unsplash.jpeg");
  background-blend-mode: normal;
}

Al mezclar fondos, el color de fondo siempre actúa como capa de fondo y la imagen como capa en el frente. En la figura siguiente vemos algunos casos al aplicar distintos modos de mezcla. La primera imagen es la original, sin aplicar mezcla. En la segunda, el modo es luminosity, que toma la luminosidad de la capa de frente y la combina con el tono y saturación de la capa de fondo. El tercer modo en este ejemplo es color-burn, cuyo cálculo oscurece la imagen en frente e incrementa el contraste dejando ver el color de fondo.

Modos de mezcla en fondos

Otros modos de mezcla

Estas dos propiedades CSS soportan muchos más modos: en la especificación del W3C se listan y definen cada uno de ellos con detalle. Algunos interesantes son multiply y screen, que dan resultados similares a darken y lighten respectivamente pero lo hacen multiplicando valores de los canales en lugar de tomando máximos o mínimos. difference toma en cada canal el valor más oscuro y se lo resta al más claro, y exclusion produce un efecto similar con menor contraste. Los modos hue, saturation, color y luminosity no trabajan en el espacio RGB directamente, sino que operan con el tono, saturación y luminosidad de los colores (color expresado en formato HSL).

Aplicaciones útiles

Para terminar, te voy a mostrar dos ejemplos para ilustrar cómo podemos aprovechar los modos de mezcla de colores en sitios web.

La primera de ellas consiste en recolorear una imagen de una forma estética para que se vea con colores más uniformes y vivos. Podemos usar tanto una imagen en escala de grises como una en color, aunque en ese caso es preferible aplicarle el filtro grayscale(100%). Nuestra intención es llevar los tonos claros a un color y los oscuros a otro, para lo cual necesitaremos tener una capa detrás de la imagen con el tono base, y otra por encima con el color adicional.

El siguiente código HTML consiste en un simple div que contiene la imagen, y que tendrá como color de fondo el color base (para los tonos oscuros) y en el pseudo-elemento :after colocaremos el color de realce (para los tonos claros). En este ejemplo, para el elemento de realce hemos usado un gradiente lineal entre los dos colores pero podría usarse únicamente un color sólido u otra combinación.

<div class="recolor">
  <img src="jakob-owens-251445-unsplash.jpg">
</div>

A continuación el código CSS que hace la magia:

.recolor {
  display: inline-block;
  position: relative;
  background: rgb(40%, 20%, 60%);
  border: 10px solid rgb(40%, 20%, 60%);
}
.recolor img {
  display: block;
  mix-blend-mode: lighten;
  filter: grayscale(100%);
}
.recolor:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(rgb(60%, 100%, 60%), rgba(40%, 20%, 60%, 50%));
  mix-blend-mode: darken;
}

En la siguiente figura vemos cómo queda, a la izquierda la imagen original en escala de grises y en el centro la imagen con el filtro aplicado en modo darken. A la derecha he incluido variaciones del mismo filtro con otros modos de mezcla en el pseudo-elemento :after: de arriba a abajo, overlay, color y multiply.

Filtros de dos tonos sobre una imagen en escala de grises

El segundo ejemplo que vamos a ver es más sencillo, consiste simplemente en dibujar iconos o logos en negativo, es decir, dibujar alrededor de los iconos y dejar la silueta transparente. Podemos usar cualquier fuente de iconos o incluso imágenes con iconos en color negro. Colocamos un fondo blanco alrededor de cada icono y usamos el modo de mezcla lighten, de forma que el blanco se quede como está y el icono se vea sustituido por el contenido del fondo. A continuación tienes el listado con el CSS que genera el ejemplo de la imagen:

.icons {
  padding: 1rem;
  background: linear-gradient(90deg, rgb(20%, 40%, 60%), rgb(60%, 20%, 40%));
}
.fa {
  margin-right: 1rem;
  background-color: #ffffff;
  mix-blend-mode: lighten;
}
.fa:before {
  margin: .5rem;
}

Iconos en negativo, silueta transparente y contorno blanco

Espero que te haya parecido útil para darle más personalidad a tus sitios web y conseguir diseños más atractivos. Te dejo el código con todos los ejemplos para que puedas experimentar fácilmente por tu cuenta, ¡déjanos un comentario si consigues efectos interesantes!

Fuentes y más información:

Nota: Todas las imágenes utilizadas son de Unsplash, con licencia Unsplash.

Qué es SVG y cómo usarlo para cambiar el color a bullets de listas

07/06/2018
Artículo original

Qué es SVG y cómo usarlo en bullets de listas

Puede que ahora parezca una perogrullada, pero una de las características que contribuyó a la popularización de la web y de HTML (junto a los enlaces de hipertexto) fue la posibilidad de insertar imágenes, mapas de bits donde reinaban los gif y los jpg por su relación calidad/peso y que se usaban en función de las características de cada imagen.

Pero pronto apareció la necesidad de buscar un formato estándar vectorial, así que, en 1998 se empezó a buscar una solución y finalmente nació SVG (Scalable Vector Graphics), que se convirtió en recomendación en 2001, aunque actualmente va por su segunda versión de la recomendación 1.1 (del 2011) y la recomendación definitiva de SVG2 cada día está más cerca.

Al principio le costó un poco abrirse paso por la competencia de la tecnología Flash (que estaba muy extendida) y porque el soporte de SVG en los navegadores era irregular, como en otros muchos estándares en la época. Pero hoy por hoy es un arma de primer nivel para cualquier desarrollador frontend.

La principal ventaja de SVG es que se trata de imágenes vectoriales que se definen a través de XML. O sea, que se verán bien independientemente del tamaño y resolución a las que se muestren, y que se pueden definir y/o alterar a través de código usando el DOM. Por ejemplo, puedes modificarle el color o animarla a través de CSS o JavaScript.

¿Cómo crear imágenes SVG?

En realidad, SVG es más que un simple tipo de imagen más, es todo un sistema de representación gráfica que tiene su propia especificación y cuyo verdadero alcance y potencia se irá viendo en los próximos años. Dado que esto escapa al alcance de este post, lo dejaremos simplemente como un tipo de imágenes vectoriales que se pueden crear con código XML de una forma sencilla. La verdad es que es muy agradecido, al menos dibujando formas simples.

Como muestra, un cuadrado con un borde naranja de 10px se escribiría así:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
    <rect x="0" y="0" width="150" height="150" fill="#ffffff" stroke="#ff9900" stroke-width="10"></rect>
</svg>

Y se vería así:

cuadrado con borde naranja

Fíjate en el parámetro viewbox, ya que actúa como una ventana que muestra el rectángulo y, si es más pequeño que el rectángulo, enmascarará a este. A su vez, hay que delimitar el tamaño del SVG (el lienzo sobre el que se dibujará el rectángulo, que tiene su propio viewport y, por defecto, crece hasta el infinito) y el tamaño del elemento que se dibuja. Estos conceptos se explican muy bien aquí, y créeme, te recomiendo que los tengas bien claros antes de ponerte a jugar con SVG.

Quizá SVG te recuerde un poco al funcionamiento del elemento canvas (en inglés, canvas significa lienzo), solo que canvas permite actuar a nivel de pixel, necesita JavaScript y no es accesible a través del DOM, lo que lo hace un poquito más rápido y con más posibilidades. En cambio, a favor de SVG, al ser accesible a través del DOM, es accesible para los lectores de pantalla y es más fácil añadirle interactividad.

Ahora bien, si lo que quieres es crear imágenes complejas, lo más práctico es que uses un software de dibujo vectorial. El buque insignia hoy por hoy de este tipo de software es Adobe Illustrator, pero también puedes crear SVGs con software más asequible como Sketch (en el momento de escribir esto solo para Mac) o incluso gratuito y open source, como Inkscape.

Es más, hay soluciones online gratuitas que te pueden sacar de un apuro sin necesidad de instalar nada, como Vectrhttp://editor.method.ac/

¿Cómo insertamos SVG?

Tenemos varias formas de usar una imagen SVG en nuestras páginas

Directamente en el código HTML5

Este método es el que acabamos de ver en nuestro ejemplo. Está bien para imágenes sencillas y que quieres manipular con CSS o JavaScript. Si lo usas con una imagen muy compleja te puede ensuciar y/o sobrecargar el código de la web.

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
    <rect x="0" y="0" width="150" height="150" fill="#ffffff" stroke="#ff9900" stroke-width="10"></rect>
</svg>

Con una etiqueta <object>

Si tomas el código del ejemplo anterior en un bloc de notas, y lo guardas con extensión .svg lo podrás insertar con la etiqueta <object>. Esta es la mejor opción si vas a usar opciones avanzadas con CSS y JavaScript, porque te permite añadir contenido alternativo en el caso de no estar soportado.

<object type="image/svg+xml" data="cuadrado.svg">
    Este texto se verá si el navegador no soporta SVG 
</object>

En una etiqueta <embed>

Esta es solo para que sepas que existe, mejor no la uses, porque es una reminiscencia de la época de la guerra entre navegadores que funciona igual que la etiqueta object pero, a diferencia de esta, jamás ha estado dentro de una especificación estándar. Así que, aunque funcione y los navegadores la soporten, lo mejor es no usarla.

<embed src="cuadrado.svg" type="image/svg+xml" />

Dentro de un <iframe>

<iframe id="miframe" name="miframe" src="cuadrado.svg">
    Este texto se verá si el navegador no soporta frames 
</iframe>

Los iframes son una solución muy poco elegante y además es un engorro manipular su contenido, pero oye, que sepas que existe esta posibilidad para mantener el código del SVG fuera de tu página

Dentro de una etiqueta <img>

<img src="cuadrado.svg" />

Este caso es útil si no necesitas modificar el SVG al vuelo ni usar características avanzadas porque, por seguridad, los navegadores deshabilitan cualquier capacidad interactiva de SVG, y tampoco podremos modificar su apariencia usando código CSS externo en la mayoría de los navegadores

Como una imagen de fondo en CSS

También podemos usar nuestro SVG en la propiedad background-image de cualquier elemento:

#micuadrado { background-image: url("cuadrado.svg"); }

En este caso, como en la etiqueta <img> tampoco podremos acceder a editarlo directamente con CSS o JavaScript.

Usando SVG en los bullets de listas para poder cambiarles el color

A través de CSS es bastante sencillo sustituir los bullets por defecto de las listas de HTML por una imagen de fondo dentro de cada <li>. Es una técnica sencilla, potente y bastante común a la hora de crear listas y menús.

¿Y cuál es el problema? Pues que, como acabamos de ver, si usamos una imagen de fondo SVG en nuestros bullets, de entrada no podemos modificar sus propiedades al vuelo desde un CSS externo ni con JavaScript 

Pero hay una forma alternativa que nos puede resultar útil si, en vez de indicar la URL de la imagen, embebemos directamente el código usando el esquema data:.

Por ejemplo, a una lista cualquiera:

    <ul class="arrows-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

Le podemos poner como bullet a los <li> un triángulo naranja en SVG de esta manera (fíjate en la regla en negrita):

.arrows-list {   
    list-style:none inside;
    background-position:left center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="13" height="13" ><polygon points="0,0 0,100 95,50" style="fill:#84BA0D;"></polygon></svg>');
    }

Embebiéndola de esta manera podríamos cambiar el color (o cualquier otra variable) sirviéndonos de JavaScript, de propiedades personalizadas de CSS o de algún otro valor de nuestro CMS que nos convenga. Vale, que no es tan limpio como poder acceder directamente a través del DOM, pero te saca de un apuro.

Si quieres, puedes verlo en acción en este ejemplo, o descargarlo desde aquí (ZIP 6KB).

Por si te interesa saberlo, en nuestro curso de Especialista en programación Web con HTML5, CSS3, JavaScript y jQuery, entre otros muchos temas se estudia a fondo el formato SVG y se aprende a añadirle interactividad.

Personalmente, hace poco necesité poder cambiarle el color puntualmente a los bullets de una lista de forma sencilla y me costó un poco encontrar cómo podría hacerlo. Espero que, gracias a este post, tengas que invertir menos tiempo que yo buscando una solución. Si es así, házmelo saber en los comentarios.

La compra de GitHub por Microsoft desde la perspectiva de un desarrollador

06/06/2018
Artículo original

Buy

Como casi todas las noticias bomba, el rumor de que Microsoft estaba interesada en la adquisición del principal repositorio de código libre del mundo, GitHub, me llego a través de las redes sociales cargado de incertidumbre y desconfianza.

Lo que no ha sido sorprendente ha sido la sobre reacción de la comunidad de desarrolladores, en donde se encendieron las viejas antorchas de la inagotable guerra entre los fanboys (pro) y los talibanes (anti) Microsoft.

Y por ello, quiero aportar al extenso debate y a los cientos de artículos que recorren las redes sociales, el punto de vista de diversos desarrolladores con los que he conversado sobre la polémica compra.

¿Qué es GitHub?

Github 840x473

En abril del 2005 Linus Torvalds, el padre del sistema operativo Linux, diseñó un motor de control de código llamado Git con el propósito de tener un sistema descentralizado que le permitiera trabajar de la forma que las herramientas del momento no le permitían.

Su éxito fue inmediato y rápidamente creció su adopción por la comunidad de desarrolladores hasta convertirse en el gestor de código más utilizado en todo el mundo.

Usando este repositorio como piedra angular, en 2008 Chris Wanstrath, PJ Hyett, y Tom Preston-Werner, fundan GitHub con el propósito último de construir herramientas para la comunidad de desarrollo, sentando las bases de la plataforma que acoge más de 28 millones de usuarios y supera los 85 millones de repositorios.

Aun cuando ofrece un servicio de repositorios privados y empresariales, el éxito de GitHub viene por su adopción como estándar de facto para la publicación de proyectos open source, y un funcionamiento principalmente basado en Pull Request; técnica de construcción colaborativa ampliamente aplicada en el desarrollo de código abierto.

Es tal su éxito, que es casi de obligado cumplimiento el tener un repositorio en GitHub para poder ponerse el título de “desarrollador”; incluso llegando a ser parte fundamental del currículum profesional, como pueden ser también el perfil de Linkedin o la presencia en las redes sociales y eventos de comunidad.

Y, aún más allá del almacenamiento del código fuente, se utiliza para distribuir documentación, blogs, información, páginas web estáticas, etc.

¿Por qué su destino era la Bolsa o la compra?

Stock

Como un buen ejemplo de start-up, GitHub no rinde beneficios en comparación con el volumen de inversión que ha ido recibiendo. Al principio, cuando el dinero provenía de sus tres fundadores, el resultado anual era positivo en relación con la importante tasa de crecimiento que consiguieron.

Pero las alarmas empezaron a saltar cuando el reputado medio Bloomberg publicó un informe en dónde se mostraba que el ritmo de gasto de GitHub, para seguir creciendo y protegerse de sus competidores, había llegado a los 66 millones de dólares en 9 meses.

7.500.000.000 de razones, son muchas para decir que no.

La cosa se tuvo que empezar a poner de color hormiga (no hay acceso a las cifras) cuando en agosto del 2017 Chris Wanstrath, fundador y CEO de la compañía, ponía pies en polvorosa (o le obligaban) y no había forma de encontrar una nueva cabeza que dirigiera los pasos de la empresa.

Todos los analistas veían únicamente tres soluciones, la cual una de ellas (el cierre) hubiera significado un desastre tanto económico para los inversores, como un problema de enormes repercusiones para la comunidad del desarrollo de software.

Otra opción era preparar una salida a Bolsa basada en la confianza de una plataforma robusta, que ha vencido a competidores del calibre de Google Code, Sourceforge y CodePlex, y que tiene millones y millones de clientes que respaldan el servicio. Pero con el inconveniente de ser un poco “pequeña” aún para entrar en el juego de la especulación financiera; habiendo un riesgo cierto de que saliera mal, y perdiera lo poco que le podía quedar de crédito.

La última opción, y que es la que ha resultado ganadora, es conseguir vender la plataforma a una de las grandes del sector como podría ser Google, Microsoft, Oracle, IBM, o similar. Eliminando de un plumazo todos los problemas financieros y obteniendo unos más que suculentos beneficios.

Y les ha salido muy bien. En el momento de la venta, GitHub estaba sobre estimada en unos dos mil millones de dólares, y Microsoft ha puesto encima de la mesa más del triple de dinero: 7.500 millones.

¿Por qué la ha comprado Microsoft?

Gitmicrosoft

CodePlex fue el repositorio de código público creado y sostenido por Microsoft desde el 2006 hasta finales del 2017, en donde cerraron ante el auge imparable y la adopción de GitHub como plataforma principal para publicar el código fuente de los proyectos Open Source de la compañía.

Una compra estratégica para protegerse del competidor

Esta adopción también se mostró en las herramientas de desarrollo, desde las cuales puedo conectar mis proyectos con el motor Team Foundation Version Control, Git o GitHub, indistintamente.

Además, cada vez se publica más y más información, documentos y material de formación en GitHub. Siendo la plataforma elegida por Azure para sus repositorios de plantillas de despliegue de Infraestructura como Código.

Es decir, Microsoft reconoció y se rindió ante la realidad de que la combinación de Git + GitHub era imbatible y había sido la elegida por la comunidad para gestionar el código.

Y ahora, aprovechando las vicisitudes financieras por las que pasaba GitHub, tiene sentido que se propusiera una adquisición preventiva estratégica de una plataforma que se ha vuelto crítica y troncal en el negocio del desarrollo, para evitar que pudiera ser adquirida por competidores de la talla de Google u Oracle, lo cual podría traerle serios inconvenientes funcionales. Recordemos la reciente política anti Microsoft de Google, que tantas molestias ha causado a los usuarios.

Lo positivo de la compra

Smiley One Thumb Up

La primera ventaja de esta adquisición es que se han evaporado los negros nubarrones financieros sobre el futuro de GitHub. No se puede negar que Microsoft tiene más que suficientes recursos como para sostener los costes de operación a largo plazo sin pestañear.

Para los desarrolladores que utilizan el stack de Microsoft, estamos de enhorabuena porque se espera una integración en todo el ciclo de desarrollo mucho más cercano, y el resultado de la integración de GitHub con Visual Studio Team Services puede ser muy interesante.

De hecho, uno de los puntos que más ilusión me hacen de la nota de prensa de Satya Nadella, es cuando habla como se va a potenciar el desarrollo en cada etapa del ciclo de vida, manteniendo la absoluta libertad de elección del lenguaje, herramientas, sistemas operativos y nube que se tiene ahora.

Para la mayoría que no utilizan herramientas de Microsoft más allá de VS Code, los cambios deberían ser menos evidentes, ya que se supone que se va a aplicar un modelo de funcionamiento similar al de Linkedin. Es decir, GitHub seguirá funcionando igual que ahora, con su marca, sus cifras y su modelo de negocio; pero bajo las órdenes de gente tan buena como Nat Friedman y Scott Gurnie.

Malas cosas malas

Sauron

Las causas del rechazo a esta compra parecen ser más bien emocionales. Basadas en la desconfianza a una compañía que durante muchos años ha sido un enemigo declarado del Open Source, y que ha sido condenada por prácticas monopolísticas y por manipulación del mercado.

Aun habiendo pasado más de 20 años, aún muchos recuerdan las palabras de Ballmer demonizando el software libre. Pero más recientemente los grandes fiascos de Windows Phone o Windows RT, con cientos o miles de proyectos tirados a la basura por un cambio de rumbo empresarial, producen reticencia en muchos desarrolladores.

Un Anillo para gobernarlos a todos. Un Anillo para encontrarlos, un Anillo para atraerlos a todos y atarlos en las tinieblas...

También el ejemplo de Oracle, y cómo despiezó Sun, hace temer por el futuro y continuidad de GitHub.

Por otra parte, este movimiento de Microsoft produce una concentración excesiva de poder y control en una sola compañía. Y pone en sus manos los datos y proyectos de millones de programadores en todo el mundo, a los que se pide que confíen en la buena fe de una compañía que aún muchos comparan con Saurón.

Conclusión

Sabiendo quienes van a ser los responsables de dirigir GitHub, y que se va a aplicar la política de funcionamiento que se ha permitido a Linkedin, tengo la sensación de que todo se va a quedar igual.

Como mucho, veremos cómo Visual Studio Team Services va a integrar las capacidades de GitHub, aunque muchas ya las tiene, y cómo los repositorios públicos van a recibir mejoras desde la plataforma DevOps de Microsoft.

Si tuviera alguna duda, es si Atom va a aguantar el bocado que ya le ha dado Visual Studio Code, o va a dejar de ser apoyado por la comunidad y languidecer.

No habrá cambios, ni desbandada. GitHub seguirá siendo el rey

Hay que tener en cuenta que, como todo lo gratis, significa que (las personas) somos el producto. Pero eso ya pasaba con los anteriores dueños de la plataforma, y me alegro de que no sea una empresa pura de datos (como Google o Facebook) quien haya dado la tranquilidad financiera a GitHub.

Mientras, las estadísticas de GitLab sobre migraciones de proyectos desde GitHub muestra un pico muy pequeño de desarrolladores cambiando de plataforma (apenas unos pocos miles de proyectos en comparación con los más de 80 millones que se han quedado), lo cual puede mostrar que la tendencia es que sigamos utilizando GitHub como repositorio público preferido.

Más información | Comunicado de GitHub, Comunicado de Microsoft, GitHub Is Building a Coder’s Paradise. It’s Not Coming Cheap

En WSL | Ya es oficial: Microsoft compra GitHub por 7.500 millones de dólares, Ante la paranoia, Microsoft promete que GitHub se mantendrá independiente y abierto

También te recomendamos

CoreCLR, el núcleo de ejecución de .NET Core se publica Open Source

Los cambios nos cuestan, y mucho: ¿sabemos realmente cuándo toca renovar el portátil?

.NET se pasa a Open Source

-
La noticia La compra de GitHub por Microsoft desde la perspectiva de un desarrollador fue publicada originalmente en Genbeta Dev por Juan Quijano .

Página Siguiente