Screencasts de video 2024, Diciembre

# 156: Hablemos de Webpack - Trucos CSS

# 156: Hablemos de Webpack - Trucos CSS

¡Sean Larkin se une a mí para hablar sobre Webpack! Dudo que esté solo en estar un poco confundido acerca de qué diablos es y hace Webpack. Incluso si estás activamente "

# 27: Creación de un complemento jQuery simple - Trucos CSS

# 27: Creación de un complemento jQuery simple - Trucos CSS

Ahora que hemos analizado el uso de complementos de jQuery, también vale la pena comprender cómo construirlos. Ya mencionamos brevemente el hecho de que "

# 28: Creación de un complemento más complejo - Trucos CSS

# 28: Creación de un complemento más complejo - Trucos CSS

Ahora que entendemos los conceptos básicos del desarrollo de complementos, podemos profundizar un poco más. Dado que, en última instancia, un complemento es una función, nos proporciona el alcance "

# 30: Resumen de la serie - Trucos CSS

# 30: Resumen de la serie - Trucos CSS

¡Lo hiciste! Muchas gracias por realizar el curso. Espero que haya aprendido lo suficiente sobre jQuery y JavaScript como para que su nivel de confianza haya aumentado y "

02: ¿Por qué SVG? Nitidez. - Trucos CSS

02: ¿Por qué SVG? Nitidez. - Trucos CSS

Al comenzar este curso, me gustaría enfatizar por qué SVG es tan atractivo de usar. Quizás la razón más convincente para los diseñadores: buscan "

07: Uso de SVG - SVG en línea - Trucos CSS

07: Uso de SVG - SVG en línea - Trucos CSS

Quizás la mejor forma de usar SVG es "Inline SVG", es decir, poner código SVG directamente en su HTML. ¡Funciona muy bien! Ver el lápiz gpcDi de Chris Coyier "

# 29: Preparando la producción - Trucos CSS

# 29: Preparando la producción - Trucos CSS

Vamos a traerlo de vuelta a un editor de texto normal en este screencast, tal como comenzamos. En una situación del "mundo real", estas cosas son ciertas: usted "

06: Usando SVG - SVG como imagen de fondo - Trucos CSS

06: Usando SVG - SVG como imagen de fondo - Trucos CSS

Las imágenes SVG también se pueden usar como imagen de fondo en CSS, al igual que PNG, JPG.webp o GIF. .element (background-image: url (/images/image.svg);) De todos modos "

03: ¿Por qué SVG? Flexible. - Trucos CSS

03: ¿Por qué SVG? Flexible. - Trucos CSS

Acabamos de enterarnos de que los SVG se ven visualmente nítidos. Los SVG también son flexibles. Eso no es exclusivo de los elementos en la web, pero lo que sí es único es que "

08: Usando SVG: iframe / object / embed - Trucos CSS

08: Usando SVG: iframe / object / embed - Trucos CSS

Perdóname si estoy un poco deprimido con estos métodos. Nunca me he encontrado con un caso de uso en el que definitivamente sean el camino a seguir. Hubo un tiempo en el que "

04: ¿Por qué SVG? Pequeño. - Trucos CSS

04: ¿Por qué SVG? Pequeño. - Trucos CSS

El tamaño de un archivo SVG depende de lo complejo que sea, no de lo "grande" que sea. Recuerde que a los SVG no les importa el tamaño en el que se renderizan, son "

11: Obtener SVG - The Noun Project - Trucos CSS

11: Obtener SVG - The Noun Project - Trucos CSS

The Noun Project es un lugar (muy) fantástico para obtener SVG. Vamos a contar las formas Literalmente todo en SVG y de hecho viene de esa forma Son los "

12: Obtener SVG - Fuentes y conjuntos de iconos - Trucos CSS

12: Obtener SVG - Fuentes y conjuntos de iconos - Trucos CSS

Recuerde que cualquier vector puede ingresar a SVG. El software de Adobe es excelente en esto. Puede haber elementos vectoriales en un PDF; simplemente abra el PDF y "

09: SVG con URI de datos - Trucos CSS

09: SVG con URI de datos - Trucos CSS

Hemos cubierto "SVG en línea", que consiste en colocar la sintaxis SVG directamente en HTML. También puede usar ese mismo SVG integrado en otros lugares, como en un o "

13: SVG como un sistema de iconos - El elemento `use` - Trucos CSS

13: SVG como un sistema de iconos - El elemento `use` - Trucos CSS

SVG tiene un elemento muy interesante y poderoso llamado. Es bastante simple en concepto. Encuentra otro bit de código SVG, referenciado por ID, y lo clona "

16: Sistema de iconos SVG - Fuente externa - Trucos CSS

16: Sistema de iconos SVG - Fuente externa - Trucos CSS

Poner ese bloque de definición de SVG en la parte superior del documento definitivamente funciona. También tiene algunas ventajas, como el hecho de que no es necesario realizar ninguna solicitud HTTP "

14: Sistema de iconos SVG - Construyendo Defs - Trucos CSS

14: Sistema de iconos SVG - Construyendo Defs - Trucos CSS

El elemento está aferrado a toda esta idea de un sistema de iconos SVG en línea. Aprendimos que una forma limpia de hacerlo es poner todo lo que pretendes dibujar después "

15: SVG Icon System - Donde van las definiciones - Trucos CSS

15: SVG Icon System - Donde van las definiciones - Trucos CSS

Una vez que tenemos lo que llamamos nuestro "bloque defs" de SVG, ese trozo de SVG que define todas las cosas que queremos dibujar más tarde, ¿dónde lo ponemos? Asi que"

18: Herramienta de construcción - Grunt svgstore - Trucos CSS

18: Herramienta de construcción - Grunt svgstore - Trucos CSS

Definitivamente podemos volvernos un poco más nerd con nuestras herramientas de construcción. En el momento de publicar esto, el ejemplo secundario de las herramientas de construcción es Grunt. Hay competidores "

19: ¡Más herramientas de construcción! - Trucos CSS

19: ¡Más herramientas de construcción! - Trucos CSS

Hemos aprendido que las herramientas de compilación son particularmente increíbles para tareas como convertir una carpeta llena de SVG en un bloque de defs de SVG. Como es siempre el caso en "

10: Obtener SVG - Sitios de fotografía de archivo - Trucos CSS

10: Obtener SVG - Sitios de fotografía de archivo - Trucos CSS

Los sitios de fotografías de archivo siempre tienen una forma de filtrar los resultados de búsqueda por "vector". Y recuerda, no importa el formato que obtengas cuando descargas algo "

20: Styling Inline SVG - Poderes y limitaciones - Trucos CSS

20: Styling Inline SVG - Poderes y limitaciones - Trucos CSS

SVG en línea se puede "diseñar" en el sentido de que ya tiene rellenos y trazos y todo eso en el momento en que lo colocas en la página. Eso es increíble y totalmente "

17: Herramienta de construcción - IcoMoon - Trucos CSS

17: Herramienta de construcción - IcoMoon - Trucos CSS

El término "herramienta de construcción" puede dar miedo. Me trae a la mente elegantes herramientas de línea de comandos que requieren configuración y dependencias extrañas del sistema que se rompen cuando

21: Obtenga dos colores en un uso - Trucos CSS

21: Obtenga dos colores en un uso - Trucos CSS

Aprendimos que una limitación de usar para insertar un poco de SVG es que no se pueden escribir selectores CSS compuestos que afecten allí. Por ejemplo: Eso "

22: Animando SVG con CSS - Trucos CSS

22: Animando SVG con CSS - Trucos CSS

Cuando usa SVG en línea, todo ese código SVG está directamente en el HTML y, por lo tanto, en el DOM. Puede diseñarlos como lo haría con, o cualquier otro HTML "

23: Animando SVG con SMIL - Trucos CSS

23: Animando SVG con SMIL - Trucos CSS

Aunque animar SVG con CSS puede ser más cómodo para la persona promedio de interfaz, SVG tiene otra forma de hacer la animación incorporada en el SVG "

24: Consejo rápido de Illustrator: copie y pegue SVG en línea - Trucos CSS

24: Consejo rápido de Illustrator: copie y pegue SVG en línea - Trucos CSS

Este consejo solo se aplica si tiene Adobe Illustrator CC (Creative Cloud). Confirmé que funciona en eso, o incluso en el CC 2014 más nuevo. Es tan simple como se puede "

25: Optimización manual de SVG en Illustrator - Trucos CSS

25: Optimización manual de SVG en Illustrator - Trucos CSS

El video fue eliminado en este. Lo volveré a disparar algún día pronto. Si estás leyendo esto y todavía no lo he hecho, no dudes en contactarme y molestarme "

26: Forzar formas a ser caminos - Trucos CSS

26: Forzar formas a ser caminos - Trucos CSS

Esto es un poco esotérico, solo necesitaba hacerlo yo mismo una vez y lo encontré confuso, así que pensé en hacer un video completo al respecto. La cosa es,"