La idea es reducir el código a tan pocos caracteres como sea posible mientras sigue siendo funcional (que funciona). En el deporte Golf, contra menos golpes utilices para meter la pelota en el hoyo, mejor lo estás haciendo. En «code golf», contra menos caracteres use, lo estás haciendo mejor.
A veces es parte de una competición (o torneo supongo). A veces es por diversión. A veces es útil.
El grado de comprensión de un código que ha sido «golfed» está fuera de la mesa. No se supone que el código pueda ser «entendido», se supone que sea corto y que funcione.
Eso es un poco de JavaScript para tomar un color en hexadecimal y devolver su valor RGB. Es difícil de decir de sólo mirarlo. Lo escribió Jed Schmidt en su sitio 150byt.es donde puedes encontrar más locuras como esa.
La Wikipedia tiene un artículo sobre «code golf», dice que empezó en Perl en 1999. Se puede usar en casi cualquier lenguaje (ya que es un concepto) y probablemente exista un campeonato.
Los amigos de Syncfusion han lanzado un nuevo libro titulado «CSS3 Succinctly» escrito por Peter Shaw.
«Bríndale el lado visual a tus proyectos de desarrollo web y llévalos al siguiente nivel con CSS3 Succinctly por Peter Shaw. Este libro gratuito cubre las últimas características disponibles para hojas de estilos personalizadas incluyendo generación de contenido básico, degradés (gradients), cálculos y mucho más. Aprenderás como usar la más reciente especificación de CSS y sus capacidades para darle estilo a los componentes de un documento HTML».
Puedes descargarlo aquí, si no estás registrado tendrás que registrarte. El libro está disponible en inglés.
Anteriormente escribí sobre el uso de Grunt para convertir archivos LESS a CSS, lo pueden ver aquí.
Ahora vamos a usar Grunt para «minificar» archivos en formato JSON.
Minificar consiste en reducir el tamaño de un archivo, esto se logra quitando los espacios en blanco, saltos de línea y comentarios. Con este método se puede lograr reducir los archivos JSON hasta en 50% de su tamaño original. Tu millaje puede variar.
¿Qué es Grunt?
Es un ejecutador de tareas en JavaScript, facilitando la automatización de tareas. Las tareas repetitivas que uno realiza pueden ser fácilmente automatizadas con Grunt. Lo más resaltante es la cantidad de «plugins» que existen para Grunt.
Con Grunt puedes minificar, compilar, comprimir, hacer pruebas unitarias, «lint» (consiste en chequear el código para encontrar errores o bugs, hace un análisis estático), optimizar imágenes, etc.
Usando grunt-json-minify.
Vamos a usar el plug-in grunt-json-minify para «minificar» los archivos JSON.
Edita la parte que dice files: por la ruta correcta por ejemplo si los archivos que quieres minificar están en una carpeta en la raíz llamada «MiCarpeta» tienes que poner esto: /MiCarpeta/*.json/
Si cuando lo ejecutas dice Grunt: Command not found tienes que instalar la interfaz de línea de comando:
npm install -g grunt-cli
Si muestra el error: Unable to find local grunt, reinstala grunt localmente:
npm install grunt --save-dev
Ten en cuenta que la ruta que especifiques en «files:», todos los archivos json que especifiques serán minificados en esa misma carpeta. Por eso recuerda sacar una copia de los archivos antes de minificarlos.
Si lo que quieres es minificar archivos JavaScript puedes usar el popular plugin: UglifyJS.
Al principio pensé que la versión «gratuita» de Visual Studio 2013 no permitía usar LightSwitch ya que no estaban las plantillas, sin contar con que lo venden por separado también. Felizmente sí se puede usar LightSwitch con Visual Studio 2013 Community Edition.
En el siguiente enlace pueden ver como agregar LightSwitch a Visual Studio 2013 Community Edition:
Son 2 simples pasos: instalar Visual Studio Community 2013 (probablemente este paso ya lo has hecho) e instalar las herramientas de desarrollo de Office para Visual Studio 2013.
Cuando usas Bootstrap y usas el componente llamado «Acordeón» (accordion en inglés) si en el panel pones enlaces a otras páginas y luego regresas, el acordeón (acordión para los amigos) no recuerda qué panel estaba «expandido» o en dónde te quedaste, simplemente carga como si fuera la primera vez que lo vas a usar.
En el sitio web de StackOverflow hay varias respuestas:
La que me parece la mejor en mi caso es la de Ravimallya. Funciona con Bootstrap versión 3.x.x.
La idea de la solución es guardar en una «cookie» el ID del elemento que quieres que permanezca abierto cuando regreses de navegar o porque refrescaste la página.
El script en JavaScript y jQuery hace lo siguiente:
Cuando la página está lista (ready) se busca el cookie «activeAccordionGroup» y si lo encuentra hace una búsqueda del ID que está grabado en el cookie y le quita a todos los paneles la clase «in» y al panel con el ID del cookie le agrega la clase «in».
Cuando le damos clic a un panel para expandirlo se produce un evento «shown.bs.collapse» y en ese evento grabamos en la cookie el ID del panel que tenga la clase «.in».
Cuando se contrae o se cierra un panel se produce un evento «hidden.bs.collapse» y en ese evento borramos la cookie.
HTML.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
Item #2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
Group Item #3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
</div>
JavaScript.
$(document).ready(function () {
//when a group is shown, save it as the active accordion group
$("#accordion").on('shown.bs.collapse', function () {
var active = $("#accordion .in").attr('id');
$.cookie('activeAccordionGroup', active);
// alert(active);
});
$("#accordion").on('hidden.bs.collapse', function () {
$.removeCookie('activeAccordionGroup');
});
var last = $.cookie('activeAccordionGroup');
if (last != null) {
//remove default collapse settings
$("#accordion .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
});
Pero eso no es todo…
Tienes que usar un plugin jQuery llamado jquery-cookie creado por carhartl. Permite manipular cookies de esta manera:
Desempaquetar el Zip y buscar el archivo jquery.cookie.js y copiarlo en tu proyecto.
Tienes que incluirlo en tu HTML así:
<scriptsrc="/path/to/jquery.cookie.js"></script>
La línea va después de la de jQuery por si acaso, no al revés.
No hagas referencia al archivo en GitHub porque es el archivo es entregado con el MIME text/plain y como tal es bloqueado en Internet Explorer en Windows 7 (porque tiene el MIME incorrecto).
Escenario: Tienes que convertir una tabla en HTML al formato JSON y no tienes acceso a la base de datos que genera la tabla o la tabla es de un tercero. Tampoco quieres digitar los miles de registros a mano.
Hay varias maneras de lograr esto. Una forma es usar JavaScript y jQuery, existen vídeos en Internet que explican esta manera. Otra opción es usar un plugin de jQuery pero estas técnicas no funcionan si la tabla no está correctamente escrita o en inglés no está «well-formed». Puede que el resultado no sea el esperado o salga un error y no obtengas ningún resultado.
Well-formed: significa que las etiquetas abran y cierren, que el anidamiento esté correcto y que los elementos vacíos terminen correctamente).
Volviendo al tema si la tabla HTML no está bien creada usar JavaScript para obtener los valores probablemente no funcione.
En este caso una solución (no la más elegante ni la mejor probablemente) es valerse del navegador para lidiar con la tabla. En otras palabras los navegadores «corrigen» y «pasan por alto» las reglas para un correcto HTML y logran mostrar la tabla (no sé ni como lo logran).
La idea es copiar y pegar desde el navegador la tabla HTML y pasarla a JSON.
Es más fácil decirlo que hacerlo y una forma que he encontrado es valerse de Excel y pegar la tabla HTML allí (claro, es que no pude con Word).
Luego en Excel graba la hoja de cálculo como «valores separados por comas» o CSV.
Finalmente busca un conversor de CSV a JSON en Internet.
Subes el archivo con formato CSV y si quieres te pones a jugar con las opciones. En mi caso funcionó a la primera.
Aquí unas imágenes de la página web:
En la imagen superior pueden ver el resultado la conversión en JSON.
No es una solución muy sofisticada pero hace el truco. Si conocen de una mejor manera de pasar una tabla HTML (mal formada) a JSON favor poner un comentario.
Aquí hay una sociedad que te sorprenderá: Microsoft y Google están trabajando juntos para ayudar a hacer Angular 2, la próxima (y un poco controversial) versión del framework para crear aplicaciones web, mejor.
Angular ha estado usando su propio super conjunto de TypeScript llamado AtScript todo este tiempo. TypeScript es un intento de Microsoft de extender JavaScript con características como anotaciones de tipo, genéricos y módulos. En adelante los 2 lenguajes van a converger. Angular 2 será escrito en TypeScript y los desarrolladores podrán escribir sus aplicaciones Angular 2 en este lenguaje también.
El lenguaje AtScript debutó el pasado octubre pero al parecer el nombre será retirado en favor de TypeScript.
Angular fue escrito en JavaScript, en Dart (un lenguaje de Google) y AtScript (en Angular 1.x hay 2 versiones todavía separadas de Dart y JavaScript). AtScript agrega características como introspección, anotaciones de metadatos y campos a TypeScript. TypeScript ahora adoptará esas características desde la próxima versión 1.5 del lenguaje, será lanzado en beta dentro de las próximas semanas.
El vice presidente corporativo de la división de desarrollo S. «Soma» Somasegar escribió: «Trabajar muy de cerca con una biblioteca rica como Angular le ha ayudado a TypeScript a evolucionar características adicionales del lenguaje que simplifican el desarrollo de aplicaciones, incluyendo anotaciones, una manera de agregar metadatos a las declaraciones de las clases para usarlo en la inyección de dependencias o directivas de compilación». «Ambos equipos desean empujar juntos y hacia adelante a TypeScript y JavaScript, incluyendo trabajar con el cuerpo de estándares de ECMAScript en el futuro de tipos en JavaScript».
Angular 2 ha sido ampliamente criticado en la comunidad de desarrolladores porque rompe compatibilidad con versiones previas. Adoptar un lenguaje dirigido por Microsoft puede hacer las cosas más difíciles para algunos, quienes evitarán moverse a la nueva versión. Es definitivamente un logro para TypeScript, ya que ha incrementado su adopción desde la versión 1.0.
El anuncio fue hecho en la conferencia de Angular «ng-conf» en la ciudad Salt Lake en Utah. Aquí está el vídeo de la presentación:
Entre los «frameworks» de JavaScript utilizados para construir aplicaciones web, sobresale BackboneJS. En sitios web grandes a pequeños, BackboneJS tiene la mitad del mercado, de acuerdo a datos de VisionMobile.
Lo que no ha ganado a pesar de todo es el futuro.
Esa distinción la tiene AngularJS, el framework popular que fue creado en Google. Aunque BackboneJS tiene una gran ventaja en términos de instalaciones, AngularJS reina en la comunidad, y la comunidad, a largo plazo, siempre gana.
El Club del Sabor-del-Mes.
Pregúntenle a un desarrollador web cual es su framework de JavaScript favorito (una colección de bibliotecas de código JavaScript, plantillas y otros programas cuyo propósito es hacerle la vida más fácil a los desarrolladores para poder construir páginas Web dinámicas o aplicaciones web) y obtendrás un gran rango de respuestas. jQuery, EmberJS, AngularJS, SproutCore, etc.
En realidad ya no escucharás de SproutCore.
En su día (hace 5 años atrás, una eternidad en la web), SproutCore fue la querida de todos. Era lo que utilizaba Charles Jolley y su equipo para construir aplicaciones para iCloud. Permitía que los desarrolladores construyeran aplicaciones web y móviles sofisticadas. Era lo máximo.
Hasta que dejó de serlo.
BackboneJS más o menos lo reemplazó, es utilizado por LinkedIn y otros. Pero luego llegó EmberJS (nacido de las cenizas de SproutCore), luego AngularJS, luego ReactJS…
AngularJS parece diferente.
Simplificando el desarrollo.
Por muchos años, BackboneJS ha ido ganando seguidores. Aplicaciones web tan diversas como Sony Entertainment Network, WordPress y Stripe utilizan BackboneJS para construir experiencias web que parecen nativas pero que pueden ejecutarse en un navegador. Esto se traduce en cerca del 60% del mercado entre los frameworks de JavaScript. Como se puede ver en el cuadro:
Fuente: VisionMobile
El problema para BackboneJS es la porción roja del gráfico. Éso es AngularJS y todas las señales indican que está tomando una gran parte del mercado.
AngularJS, como mongoDB y MySQL en el mundo de las bases de datos, hace el desarrollo web más simple. Es fácil de empezar a usarlo y reduce los problemas que tienen los desarrolladores para construir sus aplicaciones.
De seguro «simple» puede ser engañoso. Como Anand Mani Sankar lo describe:
El camino de AngularJS puede evocar sentimientos encontrados. La curva de aprendizaje es muy diferente a la de otros frameworks JS. La barrera inicial para empezar es muy baja. Pero una vez que empiezas a ir más profundo, la curva de aprendizaje se empieza a volver más empinada.
Pero no sólo es la simplicidad inicial lo que la vuelve apetecible. Como su creador, Misko Hevery, indica:
Lo que le gusta a la gente es que tenemos esta idea de una directiva. En vez de escribir todo dentro de JavaScript y luego hacer que un conjunto de plantillas generen la UI (interfaz de usuario), tú escribes gran parte en HTML y HTML dirige el ensamblaje de la aplicación. Es algo así como al revés. Es realmente único. Nadie más utiliza esta manera particular.
Esta habilidad de vivir en HTML es poderosa. No es super complicada pero es muy expresiva. Permite a los desarrolladores web hacer mucho con (comparativamente) poco.
La Comunidad ha hablado.
A los desarrolladores les encanta, realmente les encanta.
Una manera de visualizar esto es a través de la actividad en GitHub. AngularJS tiene de lejos más contribuyentes que ningún otro framework.
Otra manera de medir popularidad, como menciones en StackOverflow o búsquedas en Google. Favorecen a AngularJS.
Como VisionMobile lo ve, AngularJS tiene 2 veces más artículos que BackboneJS y EmberJS juntos en StackOverflow y 65 veces más que el relativamente nuevo framework ReactJS.
Es difícil discutir esos números.
Quizás aún más irresistible son las tendencias de empleo para los diferentes frameworks. Como revela el sitio de trabajos de desarrollador Indeed, AngularJS hace ver chiquito cualquier otro framework, ya sea que se mida en términos de trabajos publicados absolutos (como se ve más abajo) o crecimiento de trabajos relativo.
Y también está ReactJS, un framework desarrollado en Facebook que ha empezado a ser el líder en términos de innovación. Muchos de los otros frameworks incluyendo AngularJS se han prestado cosas de ReactJS, indicando que es el framework que hay que vencer.
Hay muchos frameworks para escoger pero si quieres encontrar seguridad en los números, tu elección es clara: AngularJS. Es el campeón de la comunidad. Eso no lo declara como el vencedor absoluto pero es un buen argumento para probarlo.
Bien estas son noticias sorprendentes que hemos esperado largo tiempo. Puedes usar tus aplicaciones Flash y ejecutarlas sin Flash, y usar tus aplicaciones Silverlight y (casi) ejecutarlas sin Silverlight.
Si todavía piensas que JavaScript no ha ganado la web, por favor sigue leyendo.
Shumway – Flash en JavaScript y HTML5.
El proyecto de Mozilla «Shumway» ha estado viniendo desde hace tiempo (desde el 2012) pero ahora está listo para que le des una mirada más profunda).
Chris Peterson, un administrador de programa en Mozilla Shumway dice:
«Shumway es una carrera para seguir siendo relevante mientras Flash se desvanece de la Web, pero siempre habrá una larga cola de contenido Flash que se podría/será perdido cuando Adobe o los navegadores dejen de soportar el «plugin» de Flash».
Piensen en éso. Nosotros tenemos «navegadores siempre verdes» que se actualizan solos tan frecuentemente como por semana pero a veces parece que Adobe Flash está siendo atacado de manera diaria, nos dicen que actualicemos éso también. Flash por sí mismo ha caído en desgracia, como Chris lo señala, se está desvaneciendo así mismo de la web. Avancemos un año más, cuando no habrá más Flash instalado pero todavía habrá Flash en la web. Aquí entra Shumway, es un reproductor de SWF (archivos Flash) sin código nativo. Literalmente Shumway.
¿Por qué se llama Shumway? Otra vez, Chris:
«El nombre ‘Shumway’ se deriva de ‘Gordon Shumway’, el nombre real del personaje de televisión ALF. Flash -> Flash Gordon -> Gordon Shumway -> Shumway.»
Es impresionante. ¿Qué más es impresionante? «Shumway está escrito en TypeScript. Tiene un intérprete para ActionScript y un JIT que genera JavaScript, compilado utilizando eval().»
Por lo tanto Shumway es un experimento HTML que utiliza TypeScript (un compilador/transpiler (fuente a fuente) tipeado moderno de JavaScript). Fantástico. Es también «open source» y está en GitHub. Aún mejor, Firefox Nightly está utilizando Shumway para los vídeos en Flash en Amazon.com. Este es el comienzo de sus pruebas, presumo, para quitar Flash en Firefox.
Fayde – Silverlight en JavaScript y HTML 5 Canvas.
Al mismo tiempo, está el proyecto Fayde. También «open source», Fayde compila a JavaScript. Pero Fayde transforma Silverlight en HTML 5 Canvas y JavaScript. Es una implementación del motor XAML en JavaScript. Aquí está una implementación casi-Silverlight de la clásica aplicación Todo, expresada en la web sin plugins. ¿No es suficiente? Aquí hay una aplicación compleja de Fantasy Football escrita en un ambiente casi-Silverlight pero ejecutándose en tu navegador, otra vez, sin Silverlight.
Para ser claros, hay diferencias de arquitectura entre ambos proyectos. Shumway lee el formato binario SWF y trata de Ser Flash, mientras Fayde es re-imaginar, si lo permites, toma conceptos de Silverlight como ViewModels y Views en XAML y agrega TypeScript (un lenguaje cómo para los que conocen C#) el resultado es mostrado en un Canvas. No es un emulador de Silverlight, es una implementación parecida a Silverlight y un patrón de desarrollo para HTML5. Es «open source» y están buscando participación . Fayde puede ser la estrategia de migración de Silverlight que has estado buscando.
Desde mi perspectiva, no es poco razonable imaginar tomar algo como JSIL (escuchen mi podcast de este proyecto sorprendente) o un sistema similar IL -> JS y combinarlo con Fayde para de alguna manera ejecutar XAP también.
Me gusta lo loco que es JavaScript y lo que la gente ha podido hacer con él. Ahora ejecuten este emulador de PC (máquina virtual) escrito por Fabrice Bellard en JavaScript. Es Linux, en una 486, en tu navegador, en JavaScript. *el cerebro explota*.
Tengan un adorable día y disfruten la web abierta hoy día.
Lyza Danger Gardner hizo esta presentación en PhoneGap Day 2013. Ella explica como crear una aplicación móvil que funciona con el contenedor de Cordova.
Blog en Español 