Guía de buenas prácticas en el desarrollo Front End

Aquí os dejamos un gran recopilatorio sobre ciertos aspectos que tenemos que tener en cuenta cuando estamos desarrollando un proyecto.

Desde la definición del DOCTYPE, el uso de microformatos, o los ‘alt’ en las imágenes, hasta el código en javascript, jquery, css, e incluso alguna anotación sobre HTML5.

Front end development guidelines (en inglés)

Vale la pena darle un vistazo.

xD

Colorear código fuente publicado en html en tu web (syntax highlight)

Siempre es de agradecer que el código fuente que se muestre en una página este coloreado según la sintaxis del lenguaje del código.

Para implementar esto en este mismo blog, estubimos barajando principalmente dos opciones: “Highlight.js” y “Code prettifier” de google; ya que ambos detectan el lenguaje de forma automática.

El primero, trabaja directamente sobre cualquier <pre><code> sin necesidad de añadir ninguna class a la etiqueta, en cambio, el de google requería añadir la class “prettyprint”, así que empezamos por probar el primero.

Para incluirlo, no hizo falta ni descargarlo. Solo tubimos que añadir en el head lo siguiente:

<script src="https://yandex.st/highlightjs/5.16/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/5.16/styles/default.min.css">
<script>
hljs.tabReplace = '    ';
hljs.initHighlightingOnLoad();
</script>

El resultado NO fué satisfactorio. Colorear, coloreaba; pero juntaba todo el código en una misma línea.

Le tocaba el turno al script de google.

Este si que hubo que descargarlo (almenos no encontré la opción para utilizar los servidores de google), y para añadirlo sin tener que reemplazar en base de datos todos los <code> por <code class=”prettyprint”>, lo hicimos de la siguiente forma:

<script src="/wp-content/prettify/prettify.js"></script>
<link rel="stylesheet" href="/wp-content/prettify/prettify.css">
<script>
jQuery(document).ready(function() {
  jQuery('code').addClass("prettyprint");
  prettyPrint();
});
</script>

Con esto como podéis ver el resultado SI és el que esperábamos.

Pre-procesado CSS – LESS

Less es una herramienta que permite extender tus hojas de estilo (CSS)  con variables, reglas anidadas, mixins u operaciones, por poner algunos ejemplos.

Os dejo algo de código de ejemplo:

@brand-color: #3879BD;

.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded(5px);
a {
color: @brand-color;
&:hover {
color: #000;
}
}
}

Cortar (wrap) texto largo con css

Es muy común encontrarse con el caso de tener una columna muy estrecha, en la que un texto sin espacios (por ejemplo una url), se sale de la misma.

Para que el navegador corte el texto, se lo tenemos que indicar mediante css con la propiedad ‘word-wrap‘ al valor ‘break-word‘.

Por ejemplo, para aplicarlo a un párrafo, pondríamos:

p {
word-wrap: break-word;
}

Esto funciona en IE6, IE7, Firefox, Safari, Chrome.

Vía: eisabainyo.net

Eliminar el contorno de puntos en enlaces con outline de CSS

A veces cuando clicamos sobre un enlace, en algunos exploradores se queda un recuadro de puntitos alrededor de los enlaces de la pagina. Y lo curioso es que en la CSS no tiene bordes. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.

Esto lo hace la propiedad outline de css. Depende del navegador este la interpretara como none o la mostrara. Para quitarla, simplemente ponemos outline:none; en la css y problema resuelto.