Uno de los temas que más me fastidia de la parte front de las aplicaciones, es la falta de orden y standard para la nomenclatura y acoplamiento que hay en los archivos css de una aplicación. He visto aplicaciones con archivos .css inmensos, otros en los cuales se machacaba un estilo con otro por encontrarse duplicado, o simplemente que se mezclaban.
Reconozco que es un calvario mantener los .css pero felizmente existen los preprocesadores que nos ayudan mucho en esta tarea como SASS, LESS o Stylus y del cual hablaremos más adelante. Hace unas semanas descubrí un standard para la nomenclatura de estilos que me parece muy interesante y esta teniendo acogida por parte de muchos desarrolladores. Se trata de SUITCSS, un proyecto de GitHub que aparte de también de ser un preprocesador, pretende establecer un standard para nombrar a nuestras clases de estilos de dos maneras.
.namespace: SuitCSS pretende que empecemos nombrando nuestras clases con un namespace. Aunque este parámetro es opcional, se recomienda utilizarlo para tener que evitar conflictos con otros archivos css. Esto debe ser escrito en Camel Case.
-ComponentName: Es el nivel más alto de nuestro componentes. Si nos guiamos a la nueva estructura que propone HTML5, acá se podría declarar los elementos header, section, article, footer, etc. Esto debe ser escrito en Pascal Case. Archivo CSS usando el namespace y ComponentName juntos
-descendantName: Es la parte del componente al cual aplicaremos el estilo. Por ejemplo podría ser un <figure> que esta dentro de un <header>. Esto debe ser escrito en Camel Case.
Archivo CSS
.main-Header{...}
.main-Header-figure {....}
Página HTML
...
...
--modifierName: Esta clase nos permite modificar el elemento base de una cierta forma, un ejemplo sería un estilo determinado a un botón por defecto, o los campos de texto que son obligatorios de llenar. Esto debe ser escrito en Camel Case. Archivo CSS
.is-stateName: Esta clase nos permite indicar un estado que puede tener un determinado elemento, como habilitado, deshabilitado, seleccionado, etc. Esta clase se escribe con un punto al inicio, lo cual indica que es una clase aparte y que puede ser reutilizada por diferentes elementos, pero es recomendable tenerlo dentro del mismo ámbito del componente por temas de orden y para facilitar luego el uso de preprocesadores. Esta clase se debe escribir en Camel Case también.
.u-utilityName {...} .u-utilityName: Esta clase está pensada para crear estilos globales. El nombre de la clase debe empezar con u seguido de un guión, lo cual nos permite indicar que será un utilitario capaz de aplicar estilos a muchos elementos. Nos puede ser util para establecer estilos para cosas comunes en toda la aplicación, como los tag de title, h1, h2 o para indicar un tipo de posicionamiento o alineación. La idea es que sea una clase que contengan estilos comunes en la aplicación. Debe ser escrito tambien en Camel Case.
Como podemos ver SuitCSS viene a poner orden en la manera en como declarar las clases de estilos en nuestras páginas html. Hace uso del selector por clases y es una manera ordenada y clara de ver los documentos. Sería genial que los desarrolladores empiecen a usar este tipo de standar de nomenclatura para que el mantenimiento de estilos esté más controlado. Espero les sirva, hasta la próxima :)
Hola, aunque en un principio traté de orientar este blog a sólo temas de Visual Studio, poco a poco la cosa va evolucionando y como buen amante de la programación me gusta estar viendo y actualizándome con nuevas tecnologías. Asi que poco a poco (si el tiempo me lo permite) iré posteando sobre nuevos temas que voy tocando en el día a día o sobre temas que me van interesando, así que pronto tendrán temas de MongoDB, HTML5, CSS3, Bootstrap, Angular, Windows Azure, NodeJs, Xamarin y demás tecnologías.
Estar atentos y disculpen si a veces pasan semanas y no posteo nada, el trabajo a veces es absorvente, un saludo :)
Muchas veces tenemos la necesidad de generar datos de pruebas por distintas razones. Ya sea para generar prototipos, test unitarios o pruebas de concepto.Imaginemos que tenemos la siguiente clase y queremos crear un listado de 50 nuevos objetos Customer:
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
Y queremos mostrar un grid con un listado de 50 personas. Reconozco que hace tiempo hacia lo siguiente:
Otros hacen uso de un XML lo cual aún es mas coñazo, o quien sabe que otras técnicas usarán por ahi. No digo que esto no esté mal, pero para que reinventar la rueda cuando tenemos herramientas que ya hacen esto. Para esto tenemos NBuilder
Para instalarlo, puedes ir a su página y descargartelo. Yo prefiero instalarlo via Nuget, para lo cual vamos a la Consola de Paquetes de Nuget e escribimos lo siguiente:
Install-Package nbuilder
Después de tenerlo instalado es tan simple generar la lista de 50 objetos Customer:
Vamos a mostrar el resultado en una vista de MVC de la siguiente manera:
Y generamos la vista con un listado de customers. El resultado es el siguiente:
Hace un tiempo descubrí un editor de texto que me encantaba por la cantidad de plantillas y la forma en que te ayuda a crear diferentes tipos de documentos, sobre todo html y css3 de una manera fácil y rápida. Estamos hablando de Sublime Text, una herramienta open source que tiene una versión de pago pero que también puedes trabajar sin problemas con la versión free.
Entre algunas cosas que me gusta hacer con esto es crear html ya que te permite hacerlo de una manera fácil. Para esto lo que hacemos es abrir un nuevo documento en Sublime, lo guardamos como demo.html por ejemplo y empezamos a crear nuestro html.
Como Sublime sabe que estamos editando un documento html utiliza el marcado respectivo para este tipo de documento, por lo que si escribimos solo html y pulsamos la tecla tab, se genera automaticamente el cuerpo básico de un documento html.
Lo mismo por ejemplo si queremos crear un div con una clase especifica por ejemplo con la clase "header". Lo único que tenemos que hacer es posicionar el cursor dentro del editor de texto en la parte que queremos crear ese div y escribir lo siguiente:
div.header + tecla tab
El resultado será el siguiente:
Como ven, con algunas reglas podemos ir creando un documento html rápidamente. Pero Sublime tiene muchas cosas más, pero para ello necesitamos instalar un paquete de controles, por defecto al instalarlo por primera vez no lo tiene, pero para que tú puedes verificarlo haces lo siguiente:
- Dentro de Sublime pulsas CTRL + SHIFT + P y te aparece una ventana flotante, dentro de ella escribes Package Control y si es que no devuelve ningún resultado, es porque aún no lo tienes instalado.
Copiamos el texto que sale dentro del cuadrado rojo de la imagen:
Vamos a Sublime, al Menú View/Show Console y lo pegamos ahí:
Luego de eso vuelves a dar a las teclas CTRL+SHIFT+P y escribes PackageControl y deben aparecer esta vez resultados:
De la lista de resultados, seleccionamos la que dice Package Control: Install Package. Una vez instalado aparece un listado de los plugins disponibles del Package Control para utilizar en nuestro editor de texto. Como ejemplo utilizaremos el plugin "EMMET" y le damos a enter. Debe salir la siguiente imagen:
Como se ve en la imagen, nos pide reiniciar el editor. Una vez reiniciado volvemos al documento y podemos empezar a jugar con este plugin. En el documento html que estábamos creando ponemos lo siguiente.
div.padre>div.hijos*2
Y pulsamos la tecla tab y el resultado debe ser el siguiente:
Como ven se ha generado un div con la clase padre y dos divs hijos con la clase hijos de una manera super fácil. Si quieren profundizar en esto, busquen en google Zen Coding con sublime y sáquenle partido a todas las funcionalidades y ayudas que nos ofrece Sublime Text.
Si trabajas con Asp .Net MVC seguro que te has topado que tu proyecto compila perfectamente en Visual Studio pero si esta vista tiene un error, este error no se mostrará hasta que lo veas en el navegador. Esto puede ocasionarte problemas, perdidas de tiempo al compilar algo que está fallando o un dolor de cabeza muy grande en producción, para entenderlo mejor vamos al código!
Supongamos que tenemos la vista siguiente:
@{
ViewBag.Title = "Home Page";
var mensaje = "Aqui va mi mensaje";
}
@section featured {
@ViewBag.Title.
@ViewBag.Message
}
Compilando vistas en MVC
@mensajes
Si vemos el código, veremos que es una vista simple y que en la línea 3 declaramos una variable que se llama "mensaje" en la cual almacenaremos un string. Luego si nos vamos a la linea 17, llamamos a esa variable pero escribiéndola mal "mensajes". Si damos a ejecutar el Visual Studio no nos bota ningún error y sólo este error se muestra cuando se muestra la vista ya en ejecución.
El Visual Studio compila satisfactoriamente
El error sólo se muestra en ejecución
Como ven Visual Studio no nos indica que la vista está fallando lo cual nos puede traer problemas más adelante, ya que nadie sabrá que esa página esta mal hasta que la encuentren en tiempo de ejecución. Felizmente VS nos permite configurar esto, lamentablemente esto se logra editando el archivo del proyecto, para lo cual tenemos que hacer lo siguiente:
1- Ir al explorador de soluciones, seleccionar el proyecto que queremos editar, darle click derecho y seleccionar "Unload Project"
2- Una vez descargado el proyecto le das click derecho y seleccionar "Edit [Nombre del proyecto]"
3- Despues de esto se abré el proyecto para editarlo, buscamos el tag "MVCBuildViews" (que por defecto tiene el valor a false) y lo cambiamos a true y le damos a guardar.
4. Por ùltimo volvemos al explorador de soluciones, seleccionamos el proyecto modificado, le damos click derecho y seleccionamos la opción "Reload Project"
Con esto ya tenemos configurado nuestro proyecto para que VS compile nuestras vistas y nos ahorremos dolores de cabezas y collejas inesperadas en producción. Si intentas compilar la solución ahora Visual Studio te mostrará el error en la vista.
Si ya llevas un tiempo en el desarrollo de aplicaciones web, te darás cuenta la evolución e importancia que esta pegando la parte de FrontEnd. Antes se usaba código javascript para lo justo, pero poco a poco ha ido ganando muchas importancia, lo cual genera archivos de js grandes y algunos hasta complejos, con lo que viene bien tenerlos documentados para que la gente que use tu función pueda ver de que se trata y que parámetros necesita.
Para documentar las funciones javascript es casi tan simple como lo haciamos en c#, pero en lugar de poner los comentarios arriba del método o función como lo haciamos en c#, se tiene que hacer dentro de ella.
Ejemplo: Como se comenta el código en c#
Ejemplo: Como se comenta el código en javascript
Es más, si te das cuenta podemos indicarles al parámetro el tipo de valor que tendrá. Con esto, cada vez que llames a tu función js, en mi caso, SaveCustomer, verás que te sale la documentación de la función.
Hola, les dejo un post cortito que puede ser útil sobre todo para gente nueva que empieza con Visual Studio, aunque valido tambien para gente como nosotros, que llevamos mucho tiempo en ello y se nos olvidó como era.
Personalmente me gusta tener el número de líneas al lado de mi código, entonces al lío.
- Vamos al menú Tools/ Options (Herramientas/Opciones si tienes el VS en español)
- Seleccionamos Text Editor y desplegamos, luego seleccionamos All Languages y por ultimo damos check a Line Numbers.
