8 trucos para desarrolladores web

1. Enlaces externos
El estilo de los enlaces externos se puede realizar de varias formas. Una forma de hacer esto es agregando una clase adicional a todos los enlaces externos. Esto es engorroso e innecesario ya que se puede hacer muy fácilmente usando solo CSS. Echemos un vistazo al siguiente selector.

a[href*="//"]:not([href*="yourwebsite.com"]) {
  /* Apply style here */
}

Este selector a menudo se combina con una beforeo afterpseudo-elemento en el que el pseudo-elemento contiene un icono mayor parte del tiempo. Vea el siguiente ejemplo:

En el ejemplo anterior, todos los enlaces externos tienen un pseudoelemento anterior que agrega un icono de enlace externo delante del enlace.

2. Conteo fácil

Probablemente lo hayas usado console.logmuchas veces. Es el camino a seguir cuando se trata de depuración para muchos desarrolladores web. ¿Pero sabías que hay muchas más funciones útiles disponibles?

Una de estas funciones es la countfunción. Esta función registra el número de veces que se ha llamado a esta llamada en particular a la countfunción. Esto le permite realizar un seguimiento de cuántas veces ocurre un determinado evento sin tener que crear un contador usted mismo.

La countfunción tiene un argumento que es la etiqueta - Nombre en el ejemplo anterior. Este argumento funciona como un identificador del contador. Si la etiqueta no se pasa, se pasará una etiqueta “predeterminada”.

En el ejemplo anterior, la namesmatriz contiene cinco nombres. La count función se llama en cada bucle, por lo que el contador devolverá 5.

3. Ángulos

Los ángulos se usan mucho en CSS para rotar un determinado elemento o para crear una animación. La mayoría de las veces usamos algo como transform: rotate(180deg)esto. Pero hay varias otras unidades posibles que podría usar aquí. También puede usar rad , grad y turn .

La más interesante es la unidad de giro . En lugar de escribir transform: rotate(180deg), también podrías usar transform: rotate(0.5turn). O si desea rotar un elemento dos veces, puede usar en transform: rotate(2turn)lugar de transform: rotate(720deg).

4. Leyendas y subtítulos

Agregar títulos o subtítulos a todo el audio y video en su sitio web ayuda mucho a sus visitantes. Probablemente eso no necesite más explicaciones.

Puede agregar un título o subtítulo usando la tracketiqueta. Puede utilizar esta etiqueta dentro de la etiqueta audioo video.

Esto es lo que parece.

<video controls src="/video.mp4">
<tracklabel="English" kind="subtitles" srclang="en" src="captions/video-en.vtt" default>
<tracklabel="Deutsch" kind="subtitles" srclang="de" src="captions/video-de.vtt">
<tracklabel="Español" kind="subtitles" srclang="es" src="captions/video-es.vtt">
</video>

5. Propiedades dinámicas
no pude evitar colocar un truco para Javascript 😅. Hay ocasiones en las que se encuentra en una situación en la que necesita agregar propiedades dinámicas a un objeto. Afortunadamente, esto es posible en JavaScript. De hecho, hay varias formas de hacerlo.

Así es como se ve la primera forma:

constdynamic = 'name'const person = {
    age: 33,
    [dynamic]: 'John'
}

Echemos un vistazo al siguiente ejemplo en el que agregamos una propiedad adicional al objeto persona mediante la interpolación.

constdynamic = 'name'const person = {
    age: 33,
    [dynamic]: 'John',
    [`interpolated-${dynamic}`]: true
}

constdynamic = 'name'let person = {
    age: 33,
}
person[dynamic] = 'John'

let person = {
    age: 33,
}
if (someCondition) {
  person[someProperty] = someValue
}

6
CSS viene con una :optionaly :requiredpseudo-clase para la entrada , selección y etiqueta de área de texto . El: opcional pseudo-clase representa un elemento que no tiene la necesaria conjunto de atributos en él. El: requerida pseudo-clase representa un elemento que no tienen la necesaria conjunto de atributos en él.

input:optional {
  border: 1px solid black;
}
input:required {
  border: 1px dashed red;
}

7. Lista separada por comas

Aquí hay un pequeño truco que le permite crear una lista separada por comas usando solo una lista HTML desordenada y un par de líneas de CSS.

ul > li:not(:last-child):after { 
  content: “, “; 
}



<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>

8. Valores de matriz únicos

El último truco de esta lista le permite eliminar valores duplicados de una matriz. Una forma habitual de hacerlo es mediante la función de filtro . Como es habitual, hay varias formas de solucionar este problema.

Mi forma favorita de eliminar valores duplicados de una matriz es combinando el constructor Set con el operador de propagación, ¡simple y limpio!

const numbers = [1, 2, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7, 7]
const unique_numbers = [...newSet(numbers)]
console.log(unique_numbers); // [1, 2, 3, 4, 5, 6, 7]