6 marcadores útiles para impulsar el desarrollo web | consejos CSS

Un bookmarklet es un marcador basado en JavaScript que se agrega a un navegador web. Me gustaría mostrarle algunos increíbles trucos de navegador web para facilitar su flujo de trabajo de desarrollo web y cómo convertir estos trucos en marcadores que ahorran tiempo.

  1. Activar modo diseño

  2. Aplicar fondo a todo

  3. Simulación de eventos

  4. Configuración de cookies

  5. Alternar clases

  6. Color del widget de marcador

  7. ¿Qué otros bookmarklets se te ocurren?

Activar modo diseño

Modo de diseño (estilo como designMode ya que es un propiedad de JavaScript) es para aquellos a quienes les gusta experimentar con variaciones de copia en un sitio web en vivo. Por ejemplo, los redactores a los que les gusta observar cómo se lee el contenido en el flujo del diseño del sitio web o, por ejemplo, los diseñadores que quieren asegurarse de que el texto encaje cómodamente en un espacio determinado con un cierto tamaño de policía.

JavaScript tiene una característica extremadamente simple que puede hacer que un documento HTML completo sea editable. Eso funciona exactamente como html contenteditable="true" atributo nombre-valor (o contentEditable="true" en JavaScript) pero para todo el documento. Si quieres ver cómo funciona, empieza entrando en la consola del navegador usando el atajo de teclado correspondiente:

  • Cromo: Opción + + j / Cambiar + CONTROL + j
  • Firefox: Opción + + k / Cambiar + CONTROL + k
  • Safari: Opción + + contra / Cambiar + CONTROL + contra

Luego escribe document.designMode="on" en la consola, presione Devolver ay luego haga clic en cualquier elemento de texto. Verá que este elemento de texto (y todos los demás elementos de texto) ahora se pueden editar simplemente haciendo clic en él. Este método de edición de texto en un sitio web en vivo es muchos más rápido que tener que abrir DevTools y luego hacer clic derecho y seleccionar la opción "Editar texto"... y muchos Menos cansado.

Mostrando una versión modificada de la página de inicio de la guía CSS-Tricks usando el bookmarklet en modo de diseño.
"Guides and Thangs" - mi parte favorita de CSS-Tricks

Si bien no estoy seguro de que el "modo de diseño" sea la descripción más precisa de la función, es muy útil y ha existido durante mucho tiempo, sorprendentemente.

¿Y cuál es incluso una forma aún más rápida de habilitarlo? ¡Un bookmarklet, por supuesto! Crea un marcador usando javascript: document.designMode="on";void 0; como URL.

Visualización de la instalación del bookmarklet.

Aplicar fondo a todo

Cuando los elementos HTML no tienen fondo, puede ser difícil visualizar sus límites y/o medir con precisión la distancia entre ellos y otros elementos. Es posible que los desarrolladores deseen visualizar mejor los límites cuando se trata de un desequilibrio óptico (es decir, cuando algo "parece incorrecto" aunque no lo sea), colapso de márgenes (cuando se ignoran algunos márgenes), varios problemas con display:/float:/position:y más.

Aplicar fondos significa aplicar un fondo semitransparente a todos los elementos HTML para visualizar mejor sus límites y espacios. Esto es algo que muchos de nosotros hacemos comúnmente al abrir DevTools y luego escribir una declaración CSS como selector { background: rgb(0 0 0 / 10%); } en el cuadro "Estilos". Pero de nuevo, es De Verdad tedioso y repetitivo, y algo que podemos simplificar con un bookmarklet.

Nuevamente, para crear un marcador, crearemos una URL. Esto es lo que podemos usar para este:

javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");

Usamos un fondo semitransparente porque la transparencia se apila, asegurando que cada elemento anidado se destaque y se puedan medir las distancias entre ellos.

Mostrando la página de inicio de CSS-Tricks Guides con todos los fondos rellenos con diferentes tonos de gris.
Aplica un fondo a todo para ver qué sucede.

Simulación de eventos

¿Alguna vez ha tenido que probar un evento web que requiere una serie de interacciones previas o que se cumplan ciertas condiciones? Lleva mucho tiempo tener que probar o depurar este tipo de funcionalidad. Este bookmarklet de simulación de eventos se puede utilizar para activar instantáneamente eventos específicos, lo que facilita las pruebas.

Simular un evento significa codificar un botón "desechable" que activa un evento de JavaScript, lo que hace que sea mucho más fácil probar el evento de forma rápida y repetida sin tener que cumplir con las condiciones habituales del usuario, como la necesidad de iniciar sesión.

Suponiendo que haya configurado sus detectores de eventos de JavaScript, marque cada evento que desee activar/simular y envíe la siguiente URL:

javascript: document.querySelector("SELECTOR").click();

Reemplace "SELECTOR" con su selector único, reemplace "clic" con "focus" o "blur" (si es necesario), o extienda el fragmento para activar eventos más complejos, como el desplazamiento.

Configuración de cookies

Las cookies son tokens que el sitio web que está visitando almacena en la computadora de un visitante del sitio web. Las cookies contienen datos que pueden ser leídos por el sitio web que las creó hasta que hayan pasado su fecha de vencimiento o se eliminen. La mera existencia de una cookie puede determinar si un visitante ha iniciado sesión o no, mientras que los propios datos pueden almacenar información sobre el usuario.

Un ejemplo de un escenario en el que podría querer configurar una cookie usando un bookmarklet es cuando desea forzar un estado de inicio de sesión mientras prueba el sitio web. Los sitios web a menudo se ven muy diferentes para los usuarios registrados, sin embargo, iniciar y cerrar sesión eventualmente se vuelve muy tedioso, por lo que este bookmarklet puede ahorrar un poco de tiempo.

escritura manual expires= Las fechas para las cookies son muy inconvenientes, pero afortunadamente esta aplicación crea su propio conjunto de cookies y puede generar un bookmarklet para una cookie específica, si conoce su nombre exacto.

Alternar clases

Puede agregar o eliminar una clase de un elemento HTML para activar un nuevo estado o cambiar de apariencia, también conocido como cambio de clase. El cambio de clase ocurre detrás de escena en la mayoría de los sitios web en vivo, pero también se puede usar durante las pruebas para evitar tener que cumplir con ciertos términos de servicio.

El cambio de clase se puede usar para activar cambios de apariencia (por ejemplo, temas o estados alternativos) e incluso animaciones, pero puede ser un poco complicado cuando se hace con herramientas de desarrollo cuando es puramente con fines de prueba (es decir, el sitio web en realidad no funciona para los usuarios) . Al igual que otros bookmarklets, use este para cambiar rápidamente entre clases y ahorrar tiempo.

Cree el siguiente bookmarklet para apuntar a todos los elementos que coincidan con su "SELECTOR" elegido, que a su vez alterna la "CLASE".

javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));

Color del widget de marcador

Aunque técnicamente no es un "bookmarklet", este URI de datos que se pueden agregar a marcadores por Scott Jehl abre una <input type="color"> en una nueva pestaña:

data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D"color"%3E%3C%2Fhtml%3E

¿Por qué es genial? Bueno, ¿cuántas veces ha necesitado escribir un valor de color en una página, solo para encontrarse abriendo DevTools, haciendo clic en un montón de elementos y examinando las propiedades de CSS para encontrar el valor? ¡Mejor ejecuta a este pequeño, haz clic en el elemento y obtén un color de inmediato!

¿Qué otros bookmarklets se te ocurren?

¿Hay flujos de trabajo de desarrollo web demasiado repetitivos que lo obligan a utilizar las herramientas de desarrollo de navegadores web, a veces inconvenientes? Si es así, es muy facil para crear sus propios bookmarklets para ahorrar tiempo. No olvide comenzar la URL con javascript:!

Y si ha creado un bookmarklet para simplificar su flujo de trabajo, ¡me encantaría verlo! Compártelas aquí en los comentarios y comencemos una gran colección.

Si quieres conocer otros artículos parecidos a 6 marcadores útiles para impulsar el desarrollo web | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas