6 marcadores útiles para mejorar el desarrollo web trucos CSS

El bookmarklet

Se basa en una etiqueta de JavaScript que se agrega a un navegador web. Me gustaría mostrarle algunos excelentes trucos de navegador web para ayudarlo con 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. Establecer cookies
5. Cambiar de clase
6. Marcador de color de widget
7. ¿Qué otros marcapáginas se te ocurren?

Activar modo diseño

Modo de diseño (en forma de designMode ya que es un propiedad de JavaScript) es para aquellos a quienes les gusta experimentar con variantes de una copia de 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, digamos, los diseñadores que quieren asegurarse de que el texto se ajuste cómodamente a un espacio determinado con un tamaño de fuente determinado.

JavaScript tiene una función extremadamente simple que puede hacer que un documento HTML completo sea editable. Funciona exactamente como HTML contenteditable="true" atributo nombre-valor (o contentEditable="true" en JavaScript), sino para todo el documento. Si desea ver cómo funciona, inicie sesión en la consola del navegador utilizando el método abreviado de teclado adecuado:

• Cromo: Opción + ⌘ + j / Cambio + CONTROL + j
• Firefox: Opción + ⌘ + k / Cambio + CONTROL + k
• safari: Opción + ⌘ + °C / Cambio + CONTROL + °C

A continuación, escribir document.designMode="on" en la consola, presione Regresoy 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 ellos. Este método de edición de texto en un sitio web en vivo es mucho más rápido que tener que abrir DevTools, luego haga clic derecho y seleccione la opción "Editar texto"... y mucho Menos cansado.

Aunque no estoy seguro de que el "modo de diseño" sea la descripción más precisa de la función, sigue siendo muy útil y en realidad existe desde hace mucho tiempo, sorprendentemente.

¿Y cuál es una forma aún más rápida de activarlo? ¡Marcador, por supuesto! Crear un marcador con javascript: document.designMode="on";void 0; como una URL.

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. Los desarrolladores pueden querer visualizar mejor los límites cuando trabajan con desequilibrio óptico (es decir, cuando algo "parece" aunque no lo es), colapso de márgenes (cuando se ignoran ciertos campos), varios problemas con display:/float:/position:y más.

Aplicar fondos significa aplicar un fondo translúcido a todos los elementos HTML para visualizar mejor sus límites y distancias. Esto es algo que muchos de nosotros solemos hacer al abrir DevTools y luego escribir una declaración CSS como selector { background: rgb(0 0 0 / 10%); } en el campo Estilos. pero es de nuevo De Verdad agotador y repetitivo, y algo que podemos simplificar con un bookmarklet.

Una vez más, crearemos una URL para crear un marcador. Esto es lo que podemos usar para esto:

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

Utilizamos un fondo translúcido, ya que la transparencia está ordenada, lo que asegura que cada elemento insertado sea diferente y se puedan medir las distancias entre ellos.

Simulación de eventos

¿Alguna vez ha probado un evento web que primero requiere una serie de interacciones o ciertas condiciones que deben cumplirse? Lleva mucho tiempo probar o depurar este tipo de funciones. Esta etiqueta de simulación de eventos se puede utilizar para activar instantáneamente eventos específicos, lo que facilita las pruebas.

La simulación de eventos significa codificar un botón de "expulsión" que activa un evento de JavaScript, lo que facilita mucho la prueba rápida y repetida del evento sin tener que cumplir ninguna de las condiciones habituales que enfrenta el usuario, como por ejemplo, la necesidad de ingresar.

Suponiendo que tienes tu propio Oyentes de eventos en JavaScript configure, verifique cada evento que desee desencadenar/simular y envíe la siguiente URL:

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

Reemplace "SELECTOR" con su selector único, reemplace "clic" con "focus" o "blur" (cuando sea necesario) o expanda el fragmento para desencadenar eventos más complejos, como Desplazarse.

Establecer cookies

Las cookies son tokens que se almacenan en la computadora de un visitante del sitio web por el sitio web que está visitando. Las cookies contienen datos que el sitio web que las creó puede leer hasta que caduquen o se eliminen. La existencia misma de una cookie puede determinar si un visitante ha iniciado sesión o no, mientras que los datos en sí mismos pueden almacenar información del usuario.

Un ejemplo de un escenario en el que es posible que desee establecer una cookie mediante un marcador es cuando desea iniciar sesión a la fuerza mientras prueba un sitio web. Los sitios web a menudo se ven muy diferentes para los usuarios que han iniciado sesión, pero eventualmente iniciar y cerrar sesión se vuelve muy molesto, por lo que este bookmarklet puede ahorrar mucho tiempo.

Escritura expires= Las citas de galletas son muy incómodas, pero afortunadamente eso cree su propio conjunto de aplicaciones de marcadores de cookies puede generar un bookmarklet para una cookie específica si conoce su nombre exacto.

Cambiar de clase

Es posible que desee agregar o eliminar una clase de un elemento HTML para desencadenar un nuevo estado o un cambio de apariencia, también conocido como cambio de clase. El cambio de clase tiene lugar tras bambalinas en la mayoría de los sitios web en vivo, pero también se puede usar durante las pruebas para perder la necesidad de cumplir con ciertas condiciones centradas en el usuario.

El cambio de clase se puede usar para activar cambios en la apariencia (por ejemplo, temas o estados alternativos) e incluso animaciones, pero puede ser un poco difícil cuando se hace con herramientas de desarrollador, cuando es solo por motivos de prueba. trabajar de esa manera para los usuarios). Al igual que otros marcadores, use este para cambiar rápidamente de clase y ahorrar tiempo.

Cree el siguiente marcador para apuntar a todos los elementos que coincidan con el "SELECTOR" que seleccionó, que a su vez cambia a "CLASS".

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

Marcador de color de widget

Aunque técnicamente no es un bookmarklet, es URI de datos de etiquetado por Scott Jell abre una <input type="color"> en una nueva sección:

Entonces, ¡aquí está mi nueva aplicación de selección de colores!
Es hmm, solo un color de entrada HTML envuelto en un URI de datos para que pueda verificarlo. (Siéntase libre de hacerlo usted mismo):

datos: texto / html; charset = utf-8,% 3Chtml% 3E% 3Ctitle% 3ECElección de color% 3C% 2Ftitle% 3E% 3Ctipo de entrada% 3D ”color”% 3E% 3C% 2Fhtml% 3E pic.twitter.com/0QyFqAsUSq

-Scott Jell (@scottjehl) 19 de agosto de 2021

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? Entonces, ¿cuántas veces ha tenido que recuperar un valor de color de una página solo para descubrir que está abriendo DevTools, haciendo clic en un montón de elementos y descargando propiedades CSS para encontrar el valor? ¡Mejor comienza este niño pequeño, haz clic en el elemento y elige el color de inmediato!

¿Qué otros marcapáginas se te ocurren?

¿Hay flujos de trabajo de desarrollo web demasiado repetitivos que requieren que utilice las herramientas a veces inconvenientes de los desarrolladores de navegadores web? Si es así, eso es todo muy facil para crear sus propios marcadores de ahorro de tiempo. Solo asegúrese de comenzar la URL con javascript:!!

Y si ha creado un bookmarklet para simplificar su flujo de trabajo, ¡estaré encantado de verlo! Compártelos aquí en los comentarios y comencemos una buena colección.