Emmet: escribe en HTML y CSS como un experto

1. Introducción: Hola, ahí. Yo soy Rich Armstrong. Soy diseñadora, animadora, y codificadora. Llevo más de 10 años codificando, pero no me gusta particularmente escribir código. Escribo código para hacer las cosas. Cuanto menos tiempo pase codificando, mejor. Por lo que esta cláusula trata de usar Emmet para acelerar la escritura HTML y CSS. Si implementas lo que cubrimos en esta clase, podrías ahorrar días o semanas cada año. Eso es mucho tiempo. Estaremos cubriendo cosas como abreviaturas HTML y CSS, envoltura de código, atajos de teclado, recorrido de código, y un par de gemas escondidas extrañas y maravillosas que Emmet tiene para ofrecer. Emmet trabaja en todos los principales editores de código e incluso en lugares como CodePen y JSFiddle, escribir con Emmet es el siguiente nivel. Si los ninjas realmente escribieron código, usan Emmet. Entonces, vamos a saltar. 2. // COMENCEMOS: Hola ahí, estoy súper emocionado que estás viendo. He estructurado esta clase en videos cortos para que puedas probar por ti mismo después de cada video y para que puedas encontrar y volver a ver videos fácilmente. La clase se divide en las siguientes secciones. Cómo ir, abreviaturas CSS, CSS, abreviaturas HTML, atajos HTML, más genialidad Emmet, productividad con sublime y la sección final, conclusión. En la clase, estaré haciendo todo en texto sublime en un Mac pero proveeré atajos de Windows e información en la medida de lo posible. 3. Teoría rápida: Aquí está la teoría directa de Emmet. Paso 1, escribir en HTML o CSS abreviatura. Paso 2, expanda la abreviatura en HTML o CSS de forma completa. Paso 3, repita. Hacer esto una y otra vez te ahorrará un montón de tiempo. Entonces entrémonos en ello. 4. Instala Emmet: Necesitamos instalar Emmet no editor de código para ponernos en marcha. Por lo que visita EMMET. IO/Descarga y sigue las instrucciones de los editores de código IDEO. En el siguiente video, te voy a mostrar cómo instalar Emmet en Sublime Text. También, Emmet trabaja y editores de código en línea como CodePen y JSFiddle si quieres probar puntos, expansión de abreviaturas. 5. Instalación de Emmet en Sublime: En este video, te voy a mostrar cómo instalar Emmet en Sublime Text en una Mac. Hay varias formas de hacer esto, pero te voy a mostrar una manera realmente fácil. Entonces vas a las herramientas y vamos a instalar el control de paquetes, lo que nos permite instalar cosas de Internet con mucha facilidad. Voy a hacer clic en instalar control de paquetes, y después de un tiempo, debería obtener un diálogo de confirmación diciéndome que está instalado. Ahora, puedo ir a las herramientas y usar mis pellets de comando, o puedo presionar comando shift P, y trae mi paleta de comandos. Esta es una herramienta Sublime Text realmente poderosa. A continuación, voy a escribir, instalar. Podría escribir paquete de control de paquetes instalar, pero solo puedo escribir Install y luego presionar return o enter. A partir de aquí, va a traer una lista de paquetes que podemos instalar. Voy a escribir un Emmet, un entonces solo presiona enter, y desde aquí se va a instalar Emmet. Fantástico. Debería conseguir un poco de nutrición diciéndome que Emmet ha sido instalado. Yo puedo cerrar eso. Muchas gracias. Ahora, solo comprobemos si esto está funcionando. Por lo que esto cambia a HTML. Si escribo div y presiono tab, ahí vamos. Se expande. Fantástico. Está funcionando. 6. // ABREVIATURAS DE CSS: Déjame mostrarte los conceptos básicos de usar Emmet para CSS realmente rápidamente en este video. Lo primero que tengo que hacer es asegurarme de que la sintaxis del archivo en el que estoy trabajando sea en realidad CSS. Podemos ver la sintaxis del archivo en la parte inferior derecha. Por lo que este archivo es actualmente un texto sin formato. Puedo hacer click aquí para cambiarlo a CSS. También puedo cambiarlo luego usando la Paleta de Comandos. Por lo que podría ir a Herramientas, Command Pallet o usar un atajo de teclado, Command Shift P, y podría escribir en conjunto sintaxis CSS. Podríamos hacer lo mismo para HTML, establecer sintaxis HTML. Podemos ir establecer sintaxis CSS. Otra forma es que podríamos simplemente guardar esto, así que Comando S, y podemos guardarlo como style.css. Eso debería establecer automáticamente la sintaxis en CSS. Entonces una vez que lo hayamos sacado del camino, podemos empezar a escribir algo de CSS. Ahora, solo escribamos algo de CSS para una etiqueta de cuerpo y puedo presionar C, y Sublime automáticamente aparece un montón de opciones. Puedo presionar Enter, y así así, eso es un poco de imagen ahí mismo. Si no queremos presionar Enter, realidad podemos simplemente presionar C y Tab, o podríamos presionar C y Control E para expandir la abreviatura. Esas son tres formas diferentes de expandir realmente las abreviaturas. Pero podemos usar esto para cualquier regla que queramos. Entonces margen, hagámoslo. ¿ Y el relleno? Hagamos eso. ¿ Y qué pasa con los antecedentes? Hagamos eso. Bastante guay, ¿verdad? ¿Qué pasa con el fondo? ¿ Qué pasa con frontera o frontera-derecha? ¿ Y qué pasa con border-top? Bastante guay, ¿verdad? ¿ Y un radio fronterizo, brds? Frontera-radio. Super-cool, ¿verdad? Es decir, esto es algo poderoso y es realmente, realmente fácil de usar. Así como así, ya tengo un montón de reglas para mi etiqueta corporal. 7. Abreviaturas con valores: Conocemos lo básico, pero pasemos a algunas cosas más avanzadas. Pos un grifo, posición: absoluta, tac, text-align: centro. ¿ Qué pasa con m12, margen: 12 pixels. ¿ Y el t100p? Tap, 100 por ciento Eso es algo loco ahí mismo. ¿ Y c y ffo, color? ¿ Y cr, tap, rgb? ¿ Y la cra? Rb con un canal alfa. Ahora podemos ir algo así como, 200 tap, 125 tap, 123 tap. Ahora puedes ponerte la opacidad. Eso es algo genial de locas justo ahí. ¿ Y si quisiéramos hacer un boarder bd1? Boarder1 pixel? Eso es genial. ¿ Qué pasa con bd1-s, y luego ponemos el valor de color, ffo-tap-one pixel solid con el color. Echa un vistazo a esto. C para el color. Después ponemos el valor de color, por lo que ffo, que sería amarillo. Entonces, ponemos en la pestaña 0.3. Pone ahí mismo el valor rgba. Es decir, si no puedes ver cómo esto va a acelerar tu productividad, no lo sé. Y algo así como m, que será margen. Después ponemos 12rem. ¿ Qué pasa con p, y ponemos algo así como 80em. Bastante cool. Hombre, esto es una locura. Esto es solo el inicio de las abreviaturas CSS. Podemos hacer cosas locas con color, gradientes, fondos. Cosas increíbles. 8. ¿Qué es la abreviatura?: ¿ Cómo sé cuál es la abreviatura? ¿ Cómo sé ese atajo? ¿ Tengo que aprenderlas todas? Bueno, lo que es realmente genial es que hay alguna sintaxis adecuada como pausa, colon, a para posición absoluta y, sublime puede llegar a toda esta basura. Yo sólo voy a presionar escape. Cuando presiono tabulador aquí, posición absoluta. Ahora esa es la forma correcta de hacerlo, pero también podemos ir a pausar un, así, o tal vez incluso como PA, ¿qué haría esto? Acolgado. De acuerdo, pero p también haría relleno. Interesante. Lo que realmente está pasando aquí es ese emmet usando esta cosa llamada búsqueda difusa, básicamente trata de adivinar o entender lo que estás escribiendo, lo que vas a buscar. Si no sabes qué es, escríbalo, pruébalo. Si quisiera hacer algo así como un radio fronterizo, sería como, radio de frontera o algo así. estilo fronterizo, eso puede ser bueno. No lo sé. Y los bdrs, fronterizo radio. Está bien. ¿Y el bdr? ¿Qué es bdr? Derechos fronterizos. Es intuitivo, lo cual es realmente genial. A veces no tengo idea de lo que realmente estoy necesitando escribir, pero solo lo escribo y lo pruebo. No obstante, si realmente lo necesitas, hay una hoja de tramposos en línea y hay todo un montón de documentación emmet que puedes ir a ver, puedes ir a ver. Si usas algo como si estuvieras lidiando con todo un montón de tipo de color de sintaxis o fondos o gradientes, ve a investigar cómo hacerlo súper bien, y luego retenerlo en tu cerebro. Entonces puedes usarlo como un profesional. 9. Gradientes: Una de las cosas más cool que Emmet tiene para ofrecer es la sintaxis de gradiente. Esto es realmente genial. Vas LG por gradiente lineal y no te dejes engañar por Sublime. Sí, solo presiona Escape, y luego los corchetes, y van a abastecer la dirección. Vamos a la izquierda, y van a abastecer el punto medio, que sería del 10%. Ni siquiera tienes que meter esto. El primer color, así podríamos decir F cero, cero para rojo y luego, negro cero, cero, cero, cero al final. Entonces, voy a ampliarlo. Whoa. Simplemente escribía todo eso para mí. Gracias, Emmet. Tú rockeas. Pero ahora, tal vez te estés preguntando: “Bueno, está puesto todos esos valores ahí para mí, ¿qué pasa si quiero cambiarlos? ¿ Tendría que cambiarlos tres veces?” No, echa un vistazo a esto. Cambiemos eso a blanco y presionas Tab o Control E para expandirlo de nuevo, y lo cambia todo por ti. Fantástico. Vamos a la línea superior y tal vez saquemos el 10%, presione Tab. Voila. Increíble, ¿verdad? 10. Reglas múltiples: ¿ Qué pasa si queremos escribir todas nuestras reglas a la vez? Pausa A. Ahora, no quiero sólo ampliar esto y escribir otro, quiero escribirlo todo una vez. Podemos ir más t 0 más b, 0 más o, 0 más r 0 tab. Es absoluto y se posiciona en la parte superior, inferior, izquierda y derecha todo en cero. También podemos hacer algo como M y podemos decir 12 y también más p, y podemos fijar esto en ocho y 12 por ciento, tab, Voila. Ahora, voy a ir hacia atrás hasta tener aquí mi línea de posición. Si quiero todo esto en una sola línea porque es posición y todos estos valores se relacionan entre sí, puedo poner pipe S y luego expandirme, y así tengo todas esas reglas que se relacionan entre sí en una línea. Esa es una característica realmente genial de sublime, la otra es fotos puntuadas individuales, que nos pondremos más tarde, pero ésta es realmente útil. En esta instancia, tienes pipa S y pone todo en una sola línea. Eso es realmente genial, puedes hacer múltiples reglas al mismo tiempo y puedes poner todas tus reglas en una sola línea. Súper rad. 11. Información extra: Digamos que queríamos un poco más de información para nuestras reglas. Lo que podemos hacer es simplemente poner un plus después de una abreviatura, así que bg+, expanda eso, y de repente tienes todo lo que necesitas para tu regla de antecedentes. Aquí podríamos escribir algo como ffo, presionar Tab para llegar a la url, y podríamos proporcionar un valor, presionar Tabs, establecer su posición x, establecer su posición x, por lo que es de 12 píxeles, Tab de nuevo, y podríamos establecer 40 píxeles y “No Repetir”. Fantástico realmente cool. ¿Qué pasa con la frontera? bg+ tab border cambia a 10 pixels, tab solid. ¿ Y qué pasa con dash tab? Y podemos volver a cambiar esto a rojo. O creo que eso podría ser amarillo. Eso es realmente genial acerca de meter más información en tus reglas solo tienes que poner un plus después de ellas. Obviamente, algunas de estas no funcionan. C plus, nada mucho más ahí, pero cosas como tal vez f+ ¿qué sería eso? fuente. Ahí vamos. Realmente genial, ¿verdad? 12. Prefijos de proveedores: Vamos a contar un poco más sobre los prefijos de proveedor. La mayoría de las veces las propiedades que necesitan prefijos de proveedor las obtendrán que aplicar Emmet. Entonces TRF transformarse, solo voy a presionar escape aquí. Entonces ves que no es sublime hacerlo es cosa astucia. Tab, mira todo eso. Fantástico podemos decir, todo mecanografiando cuando queramos allá. ¿ Qué pasa con el TRS? Simplemente presiona Tab transition, ok, o lo que sea que queramos por allá, deshacer, ¿qué pasa con la sombra de texto? Sombra de texto tabulador. Por lo que emmet no prefija eso por sí mismo. Entonces, lo que queremos hacer aquí es añadir un guión antes de la mano, y luego presionar, expandir. Al igual que no hay prefijo todo sobre propiedades para nosotros. Muchas gracias. Por lo que podríamos escribir algo así como los desvíos H son 12 pixels tab, cantidades desdibujadas. Está bien, te sacas la foto. Entonces deshacer. Si quisiéramos solo mostrar un tipo de prefijo de proveedor, escribiremos el prefijo de proveedor de W dash, y luego podríamos expandirnos, y yo solo agregaría kit web. Si quisiéramos agregar Opera, lo haríamos así. Realmente genial. Entonces así como así, podemos empezar a agregar prefijos de proveedor a nuestras reglas. Lo genial es que si estás escribiendo Sass o Less, que se compilan en CSS, no agrega prefijos de proveedor automáticamente. Esto hace que leer y escribir tu código sea mucho más fácil y tu compilador debe manejar los prefijos por sí mismos. 13. Abreviaturas geniales: Va a haber un montón de abreviaturas y no te las voy a mostrar todas. Tienes que elegir cuáles quieres aprender, cuáles quieres investigar, pero hay una pareja que me parece increíble. Una de ellas es la declaración importante, así que echa un vistazo a esto. Vamos P por relleno 12 pixeles y bang. Simplemente ampliamos eso y obtenemos una declaración importante ahí mismo, o tal vez tenemos M y solo queremos asegurarnos de que es importante y entonces podemos entrar en el valor. Podemos decir 80 píxeles. Bastante guay, ¿verdad? ¿ Qué pasa, si queremos hacer una escala de transformación realmente rápida, T-R, F para la transformación y luego colon y S, y presionamos tab y así, podemos escalar el valor x e y. Voy a ir 1.2 y puedo presionar tab y puedo ir a 1.2, pero eso es lo mismo, así que solo lo voy a quitar todo y ahí vamos. Contamos con un proveedor prefijado propiedad de escala de transformación. Siguiente es algo que realmente no me gusta hacer y eso es mecanografiar una nueva familia de fuentes. Podemos ir a F, ampliar eso y voila, tenemos una cara de fuente, pero eso no es súper útil. Todavía podemos tabular entre la familia de fuentes y la URL de origen, pero si pongo plus después de eso y luego lo expando, wow, comprueba eso. Ahora tengo una declaración completa sobre font-face. Puedo escribir la familia de fuentes, mi familia de fuentes cool y luego presiono tab y puedo cambiar el nombre del archivo ahora así que mi fuente y presionar Tab, font-style, font-weight. Eso es super cool. Siguiente es algo que tampoco me gusta hacer mucho, y esos son mis fotogramas clave. En K-F, amplíen. Wow. Mira eso. Acaba de escribir todo eso para nosotros. Voy a llamar a esto mis marcos clave de desvanecimiento presionan tab para que pueda cambiar mi de valor a cero por ciento si quiero, y luego puedo presionar tab y escribir en opacidad y configurarlo en cero, presionar tab va a dos. Ahora puedo poner esto a un 100 por ciento si quiero. Entonces voy a volver a presionar tab y escribir op y expandir eso y luego voy a ponerlo en uno. Al igual que eso, tenemos toda nuestra configuración de marco clave llena. Nuestra animación de desvanecimiento. 14. // ATAJOS EN CSS: Hemos cubierto abreviaturas CSS, pero hay un montón más de cosas que Emmet nos ofrece, sobre todo en Sublime Text. Vamos a cubrir estos a continuación. 15. Número de incremento y decremento: Una de las grandes cosas de Emite es la funcionalidad adicional que ofrece. Digamos que hemos hecho un poco de CSS aquí, hemos dicho 12 píxeles, y solo quiero editar esto muy rápidamente. Voy a presionar Alt y usar mis flechas de teclado para subir o bajar. Lo incrementa en 0.1 píxeles. Fantástico. Ahora, si presiono Comando y Alt y subo y abajo, lo incrementa en 10 píxeles, y si presiono Control arriba o abajo, verás que eso no funciona. Lo que tenemos que hacer es ir a Preferencias del Sistema e ir a Mission Control, y cambiemos Mission Control a off y Application Windows a off y ahora, cuando volvamos al texto Sublime y presionamos Control arriba o abajo, se lo incrementa por uno. Realmente genial. No tenemos que escribir en la parte superior de nuestro teclado, solo podemos usar atajos de teclado. Esto también funciona en HTML. 16. Matemáticas sobre la marcha: Ahora como desarrolladores de HTML y CSS, tenemos que hacer muchas matemáticas, pero a veces nuestro cerebro se pone tan un atributo no tan bueno en matemáticas. Las imágenes son realmente geniales. Si tenemos algo como ancho o altura, podemos hacer algunos cálculos sobre la marcha. 100 menos 47, Cambio de mando Y 53, así como así. ¿ Y qué hay de más 1,278? No sé si lo sabes de la mano. Comando turno Y Voila. ¿ Qué tal multiplicado por dos turno de mando Y Voila. ¿ Y qué hay de menos 349? Comando Turno Y. Bastante cool. ¿Y qué hay de menos 2,000? Eso debería ser bastante fácil. Comando Turno Y, realmente genial. Simplemente agrega píxeles después de eso. Realmente genial. Apenas haciendo matemáticas sobre la marcha. 17. Valor reflejo en CSS: Digamos que aquí tenemos algunas propiedades prefijadas por el vendedor y cambiamos esto a 0.4 y luego presionamos “Ctrl + E” para expandirnos y no pasa nada porque eso sí sucede a veces. ¿ Qué hacemos? Pensé que esto se suponía para ser productivo? Ahora tengo que cambiar cuatro líneas de código. Cálmate. Todo lo que tienes para presionar es “Cmd + Shift + R” y refleja los valores. Mira eso. A ver hasta puedes cambiar esto a, digamos diez. Cmd + Turno + R. Bang. Increíble. 18. Modifica comentarios: Por lo que aún no hemos cubierto comentarios. Por lo que normalmente en texto sublino, presionas comando y barras inclinadas hacia adelante. De esa manera, tu línea está comentada, pero a veces los comentarios no funcionan tan bien. Entonces con Emmet, lo que podemos hacer es ir Alt, Shift, slash hacia adelante y un set de comentarios 2. A menudo, un conjunto común es mejor, es más inteligente. Entonces así como así, puedes comentar tu código con Emmet o simplemente podrías usar la sublina predeterminada comentando. 19. Prepocesadores de CSS: ¿ Emite trabajo para preprocesadores como Less y Sass, La respuesta es sí. Si no sabes lo que es un preprocesador, no te preocupes, solo puedes saltarte este video. Voy a entrar a otra clase, otro tutorial sobre qué son los preprocesadores si sí lo sabes, echa un vistazo a esto. Rápidamente voy a instalar Sass. Voy a ir a mi paleta de comandos y voy a decir instalar paquete, buscar SAS. Vamos a instalar eso. Fantástico. Entonces voy a establecer mi sintaxis a SAS y luego voy a darle estilo a un elemento hijo. Podemos decir, vamos a diseñar el control de UC E. Así como así, podemos usar emit para peinar nuestras hojas de estilo Sass y Less. 20. // ABREVIATURAS DE HTML: Por lo que hemos cubierto el uso de emmets para acelerar rápidamente la escritura CSS, ahora va a ser lo mismo para HTML. Lo primero que tengo que hacer es cambiar la sintaxis de mi archivo. Por lo que puedo presionar Command Shift P en Sublime y escribir HTML y establecer la sintaxis así. O puedo hacer clic en texto plano aquí abajo y seleccionar HTML. O la forma final en que puedo hacer esto es solo ir comando S. En esta carpeta puedo guardarlo como index.html. Así como así, mi sintaxis de set es HTML. Ahora usar emmets para escribir HTML se parece mucho a escribir CSS. Entonces si escribo p y expando p, Control E o tab, crea una etiqueta de párrafo. Si hago div y presiono tab, it, lo expande a un div. Si quisiera crear un div con una clase, podría hacer esto. alguna clase, muy parecido a CSS. Cuando amplío eso, se convierte en un div con una clase de alguna clase. Lo mismo con una identificación, my-cool-div, echa un vistazo a eso. También puedo hacer lo mismo con un lapso. Por ejemplo. algo-cool-span. Eso es realmente, realmente poderoso. Lo que también es realmente genial es que dentro de un ul, por ejemplo, si presiono enter y escribo li, que también es bastante cool. Si tuviera que escribir in.some-class, esto normalmente se convertiría en un div, pero como está dentro de un ul, se convierte en un li. Cuando amplío esto, se convierte en un li con una clase de alguna clase, súper potente, súper cool. Esto es sólo lo básico de usar emmet dentro de HTML. Todavía queda mucho por cubrir, pero es suficiente para que te excites. 21. Clases múltiples e identificadores (ID): Al igual que en nuestros archivos CSS, podemos tener elementos con múltiples clases y un id. Si quisiéramos escribir un ul con un montón de clases en alguna clase.red.amazing ul, y ampliamos esto. Verás que se le aplican esas tres clases. Si queremos entonces crear un div con una id, con un montón de clases puestas. Podríamos escribir algo así. No tenemos que escribir div, pero lo voy a hacer de todos modos div y voy a poner algunas clases en. Entonces también le voy a poner una identificación. Algo así como cabecera. De acuerdo, así que eso es realmente genial. En una línea, hemos agregado un id, hemos agregado tres clases diferentes, y no hemos hecho tanto escritura. Fantástico. 22. Tipos de etiquetas: Algunos elementos que escribimos en HTML tienen un atributo llamado tipo. Por lo que reconoces esto desde una entrada. Entonces si fuéramos a ampliar esto, el tipo será texto. Ahora, también puedes tener un tipo de casilla de verificación o un tipo de contraseña, por ejemplo. Por lo que una manera fácil de hacer esto con HTML es ir input, colon, y password. Cuando amplías eso, obtienes el tipo de contraseña y también te da un nombre y atributos de ID. Esto es bastante guay. Por lo que puedes escribir aquí el nombre, presionar “Tab”, y luego escribir el ID. Es realmente, muy útil. También se podría decir entrada, colon, y casilla de verificación. Al igual que eso, el tipo es casilla de verificación. Se tiene un nombre y un DNI. Fantástico. También puedes hacer esto con una etiqueta, que por defecto te daría un HREF también. Pero, si tuvieras que escribir enlace después de los dos puntos, te daría una dirección HTTP o si tuvieras que escribir correo y ampliar eso, ahora podemos tener un correo para enlazar, lo cual es genial si quieres dar click en un enlace y se abre un correo electrónico cliente. 23. Atributos de HTML: Ahora, ¿qué pasa con los atributos? Bueno, hemos visto que el a tag cuando se expande tiene el atributo href, pero ¿qué pasa con otros atributos? Apenas con una etiqueta, ¿qué pasa con el atributo objetivo? Un emmet esto es bastante fácil. Ahí están estas llaves cuadradas que luego podemos escribir objetivo igual a subrayado en blanco, igual que hacemos en CSS. Cuando ampliamos eso, obtenemos un href y un objetivo. A veces puede que no sea tan rápido, pero sin duda es lo mismo que CSS. A veces incluso puedes copiar a través de tu archivo CSS en tu archivo HTML. Fantástico. Si quisiéramos tener múltiples atributos, tal vez como TD, y dentro de nuestro TD tenemos un colspan, y decimos que colspan es igual a tres, y entonces nuestro rowspan es igual a dos. Entonces si queremos, podríamos incluso ponerle un título ahí y decir: “Oye ahí”. Entonces cuando ampliamos esto, así como así, obtenemos todos esos atributos todos en un solo elemento. Fantástico, realmente genial, muy servicial, y mucho como CSS. 24. Hijos, multiplicación y números incrementales: ¿ Qué tan productivos nos hace realmente Emmet? Es decir, si quisiéramos escribir 1,000 elementos de elemento de lista, ¿cómo haríamos eso? En base a lo que hemos aprendido hasta ahora, podríamos escribir ul, expandir eso, presionar “Enter” li, expandir eso, escribir primero elem y luego podríamos ir li, expandir eso. Eso aún lleva un poco de tiempo, voy a borrar eso. Ahora mira esto, ul y luego voy a hacer un mayor que li, entonces voy a ampliar esto. En primer lugar, estamos escribiendo los elementos de un padre y los elementos hijos. Ahora, vamos a deshacer eso y multiplicar esto por 10. Wow, mira eso. Contamos con 10 elementos de elemento de lista. Increíble. Podríamos crear 100 o 1,000. Ahora, lo que podemos hacer es decir, elem 1, presionamos “Tab” ahora y automáticamente va al contenido del ítem de lista número 2. Podemos ir elem 2, y así sucesivamente. Eso es realmente genial. Vamos a deshacer un poco esto. Ahora, echa un vistazo a esto. Dentro de cada elemento de la lista, podríamos entonces poner un lapso con una etiqueta de ancla. Bam, mira eso, ¿cómo voltear increíble es eso? Ya podemos llenar el href. Si vamos a ir HTTP así y teclear taptapkaboom.com. Presione “Tab” aquí y luego va al contenido de la a que podemos decir Sitio web, presione “A” va al siguiente href. Esto es increíble. Volteando fresco. Ahora, esto es incluso el siguiente nivel arriba. Vamos a retroceder un poco aquí. Ya hemos conseguido URL, voy a crear 10 elementos de elemento de lista ahí. Pero ahora quiero cerrar en esto. Entonces voy a ir li.algui-clase.algo-, y luego se va a poner un número después de eso. Cuando amplíe esto, mire eso. Simplemente puso un montón de números ahí dentro para mí, no tengo que escribirlos. Echa un vistazo a eso. Usando este signo de dólar, en realidad podemos poner números. Podemos poner en tres números si queremos, o dos, o cuatro, o lo que tú quieras, o incluso podríamos ir hacia atrás. Echa un vistazo a esto. En negativo, y luego cuando ampliamos esto, va de arriba a abajo. O incluso podríamos decir negativo cinco y así va a 14 a cinco. Si no quisiéramos empezar desde el número más alto, podríamos quitar este negativo y simplemente ir de cinco, y cuando ampliamos eso, va de cinco a 14. Eso es algo loco ahí mismo. Si tu mente no está volada por eso y no ves cómo puedes ser más productivo usando Emmet, no sé qué te pasa. 25. Hermanos y grupos: Hemos cubierto elementos infantiles ahora ¿qué pasa con los elementos hermanos? Si tuviéramos un div, y tuviéramos “child1" así, ¿cómo conseguiría “child2?” Si tuviera que ir “.child2" expandir eso. “ Child2" estaría dentro de “child1" Quiero que “child2" esté al lado de “child1" Quiero que sean hermanos. ¿ Cómo hacemos esto? Bueno, en lugar de usar el símbolo mayor que, sólo usamos el símbolo más. Entonces cuando ampliamos eso, tenemos “child1" y “child2”. Pero ahora, ¿qué pasa si “child1" tiene un montón de elementos dentro de eso? Entonces tal vez hay un 'ul' y hay un 'li' y ahí hay tres elementos, y quiero una 'etiqueta' dentro de esos tres elementos y presiono “Tab”. Bueno, ¿qué pasó? No quiero que mi “hijo2" se repita tres veces, solo quería que éste fuera un “niño2”. Lo que tenemos que hacer aquí es, donde empieza aquí, y decir “niño1”, empezamos con un corchete, y luego justo antes del plus, cerramos el corchete y decimos, ese es un grupo. Podríamos poner a un grupo alrededor de la clase “niño2", pero no necesitamos hacerlo. Al final de la línea ampliamos esto, y así así, tenemos “child1" con sus contenidos, lo cual es increíble y tenemos “child2" sin contenidos, que es exactamente lo que queríamos. Ahora podemos empezar a escribir nuestro HTML, HTTP, y luego presionamos “Tab” y así sucesivamente. Increíble. 26. Subir un nivel: Otra forma de trabajar con hermanos e hijos y jerarquía es utilizar el método de subida. Si tenemos un div y dentro de este div, tenemos un elemento con una clase de C1. Dentro de ese elemento, tenemos otro elemento con una clase de C2 y dentro de ese, tenemos otro para clase de C3. Dentro de esa, tenemos otra con una clase de C4. Cuando ampliamos esto, tenemos una jerarquía realmente agradable pasando. Pero, ¿qué pasa si no quiero que mi elemento de clase C4 esté ahí? Bueno, lo que puedo hacer aquí es en lugar de usar este símbolo mayor que el símbolo, puedo usar este pequeño símbolo de intercalación, que cuando presiono expandir, veas que el elemento con una clase de C4 ahora está sentado junto a la clase de C2. Si deshago esto y pongo otro de esos ahí dentro y me amplío, verás que ahora la clase C4 está sentada en C1. Básicamente es decir, subamos un nivel y subamos un nivel, y hey, si vamos incluso a hacer otro y expandirlo, sería un hermano a la etiqueta div inicial. Bastante guay, cierto. 27. Texto de HTML: Lo siguiente es, ¿qué pasa con el contenido? ¿ Qué pasa con el texto? Si tenemos que escribir una etiqueta y expandirla, entonces tendríamos que escribir la h ref y luego tabular y luego escribir el contenido. Pero hay una forma diferente de hacerlo. Entonces A, ponemos estas llaves dentro de las llaves, entonces decimos contenido aquí, y luego expandimos eso y el contenido va allá. Ahora bien, si queremos decir contenido aquí, y hagamos algo así, multiplicado por 10, ampliamos que los contenidos aquí son uno, todo el camino a 10. Eso es increíble. De esa forma, puedes escribir tu contenido dentro de tus abreviaturas. Fantástico. 28. Lorem Ipsum: mejor tu trabajo es crear este hermoso sitio, pero aún no tiene ningún contenido, lo que debería sonar algunas campanas de alarma porque ¿cómo realmente puedes diseñar un sitio o desarrollar el sitio no hay contenido? Pero a veces sí tienes que hacer esto, y a veces es realmente genial hacer esto. Pero aún no tienes ningún contenido. Entonces en HTML, ¿cómo generamos algo de Lorem ipsum? Bueno, estos sitios web y plug-ins y todo tipo de cosas, pero echa un vistazo a esto. Lorem200, expande voila, todo un montón de Lorem ipsum. ¿ Y qué pasa con lorem10? Huh, sólo un poco de Lorem ipsum. ¿ Qué pasa con lorem2 Control E, Lorem ipsum, sólo dos palabras. Entonces así como así, puedes generar todo un montón de basura. También funciona en archivos CSS, pero en su mayoría uso esto dentro de un archivo HTML. Es increíble. 29. Abreviaturas desconocidas: Hasta ahora ha sido durazno, ha habido muy pocos errores, las cosas han ido sin problemas. Pero, ¿qué pasa si escribes toda una abreviatura y tratas de expandirla y nada funciona? Bueno, probemos esto. Oye, tenemos este elemento cool con la clase de “hey” y queremos ampliarlo. Por lo que tocamos “tab” y no se está expandiendo es solo en realidad usar tab como se debería usar. Entonces los forzamos con “Control E”, y luego nos dimos cuenta de que, Oh, en realidad eso no es una clase y eso ha creado un “hey” elementos que son un poco incómodos. Si las cosas no funcionan con tab hay una buena probabilidad de que haya un error. lo mejor has escrito un atributo un poco extrañamente, te has perdido una cotización por ejemplo, y lo expandes y nada está funcionando o incluso tu control no está funcionando. Ahí hay un tema. Arreglarlo. Si estás usando algo como reaccionar y tienes, “SomeCoolComponent”, y estás presionando tab y no se está expandiendo, está bien. Simplemente presiona “Control E”, y así, tienes tus componentes personalizados. Si presiona “Command Shift” y cotiza así, puede meterlo en una sola etiqueta. Cubriremos esto en el siguiente apartado. Si vuelves a pulsar ese atajo, “Comando Shift” y cita, puedes obtener la etiqueta de cierre. Ahí vamos. Eso es lo que pasa si cometes errores o si intentas expandir etiqueta que no existe en HTML por defecto. 30. Abreviaturas favoritas: Hay toneladas de abreviaturas que podrías aprender o que deberías aprender o que quizá quieras aprender, pero si hay algo que particularmente haces a menudo, ve a investigarlo, aprenderlo. Aquí te dejamos la página web en la que puedes encontrar todas las abreviaturas. Dicho eso, les voy a mostrar algunos de mis favoritos. Uno de mis favoritos es a:mail. Cuando lo expandes, así como así, dice “mailto”. Otro es el link. Cuando se expande, sólo va a “stylesheet”. Pero si vas a enlazar, haz click en CSS y expandes eso, pone tu archivo CSS ahí de inmediato. Muchas veces mis archivos CSS se llaman style.css. Esto tiene fantástico. Ahora la última es cuando tienes que escribir tu etiqueta de documento y tu etiqueta de cabeza y tu etiqueta de cuerpo y todo ese tipo de cosas, lo cual es realmente frustrante. Bueno ahora, sólo escribes signo de exclamación porque eso te hace enojar. No lo sé. Entonces lo expandes, y así así, todo eso está escrito para ti. Esas son un par de mis favoritas, me encantaría saber cuáles son tus favoritas. 31. Nomenclatura BEM: Si te gustan las convenciones de nomenclatura B-E-M o BEM, entonces te va a encantar esta característica. Si no te gustan las convenciones de nomenclatura de BEM o no tienes idea de lo que es, está bien, puedes simplemente saltarte a la derecha. Estaré haciendo una clase sobre ello más adelante. Pero usando un filtro Emmet, podemos sumar todas las clases de BEM que necesitamos sin tener que hacer tanto trabajo. Echa un vistazo a esto. Si escribimos dot content dash block subrayado grande y expandimos eso, así que controla E. Lo pondré por defecto. Pero, si tuviéramos que hacer pipa BEM y esto es un filtro, controla E. Revisa ese bloque de contenido, bloque de contenido grande. Vamos a deshacer esto y vamos a escribir en punto subrayado naranja y luego expandir ese bloque de contenido grande, bloque de contenido naranja ahora son clases en este div. Increíble. Deshagamos eso y dentro de aquí, pongamos una clase de avatar así, subrayemos, subrayemos avatar, y luego expandamos todo eso. Entonces así como así, esa clase de avatar tiene un bloque de guión de contenido frente a ella. Se adhiere a las convenciones de nomenclatura BEM. Lo cual es bastante dulce. Esto en mi opinión es una doble victoria porque estás escribiendo código que es realmente descriptivo. Se adhiere a alguna convención y lo estás escribiendo rápidamente. 32. Sumemos todas las piezas: Con EMMET, podrías escribir un sitio web completo expandiendo una abreviatura, pero esto a menudo lleva mucho más tiempo del que vale. No te pongas demasiado atrapado en escribir abreviaturas largas y complejas. Escríbelo en trozos manejables. EMMET está destinado a ser productivo no requiere mucho tiempo. Si practicas y puedes escribir CSS y HTML muy rápidamente, una cosa que EMMET no reemplaza es una buena planificación. EMMET combinado con una buena planeación es el camino del verdadero ninja. Estoy siendo muerto serio, es el camino. 33. // ATAJOS DE HTML: Expandir las abreviaturas no es todo lo que Emmet puede hacer, hay un montón de otras cosas que puede hacer por ti en tus archivos HTML. La mayoría de ellos sí requieren que aprendas un nuevo botón de atajo de teclado, pero te digo que vale la pena. 34. Etiquetas de equilibrio: Si tienes mucha jerarquía en marcha o tu código es bastante complejo, una de las mejores cosas que puedes hacer es equilibrar tus etiquetas. Echa un vistazo a esto. Voy a presionar “Control J”. Vuelve a controlar J, y verás que selecciona la etiqueta de apertura y de cierre. Cuando lo vuelvo a presionar, va al área de contenido. Si presiono “Control D”, va a seguir seleccionando hacia afuera. Controla D de nuevo, y verás que selecciona las etiquetas A padre y luego Controlar D, nuevo, las etiquetas li padre y así sucesivamente. Aquí verás que selecciona el contenido entre la etiqueta ul de apertura y la etiqueta ul de cierre. Control D, selecciona las etiquetas ul, Control D, misma cosa, misma cosa. Cuando vuelva a presionar “Control J”, me llevará hacia adentro hasta que llegue directo al punto más interior. Es así como equilibras tus aparatos ortopédicos. En Sublime, puedes acceder a esto si olvidas el atajo de teclado a través de tu paleta de control, por lo que Command Shift P y solo tecleas en equilibrio. Ahí vamos. Equilibrio hacia adentro, equilibrio hacia afuera. También te da tus atajos de teclado en el lado derecho. También puedes ir a Herramientas y Pallets de comandos si no conoces el atajo de teclado para eso. Esa es una forma realmente útil de navegar por tu código. Es rápido, es fácil, y muchas veces me ayuda a evitar errores confusos y realmente raros. 35. Etiqueta split/join: Hay momentos en los que necesitas dividir o unirte a una etiqueta. En reaccionar, por ejemplo, si vas a escribir imagen y luego expandirla, eso no sería una etiqueta de reaccionar válida. Entonces lo que tendrías que hacer aquí es entonces tener que escribir imagen así, lo cual es raro, o tendrías que cerrarla en la etiqueta de apertura. Con Emmet alrededor, todo lo que necesitas hacer es presionar Command, Shift y quote. Al igual que eso, proporciona la etiqueta de cierre. Si lo vuelves a hacer, se autocerrará. 36. Ir al punto de edición de contenidos: Este pequeño atajo es bastante genial cuando estás escribiendo expresiones de Emmet. Si vamos a escribir input, text, y entonces tenemos que expandir eso, si quería saltar a id y luego volver a nombrar antes de haber escrito algo, solo presiono Control Alt y a la derecha, o a la izquierda. Entonces puedo saltar entre estos dos puntos de edición. De verdad servicial. En cuanto escribo algo y salto hacia atrás, no puedo saltar hacia adelante porque ya he cambiado el contenido. 37. Selecciona el elemento siguiente y el anterior: Tenemos un montón de contenido y quiero ir rápidamente al siguiente elemento. ¿Cómo hago eso? Vamos a Comando Turno y mayores que. Así como así, podemos saltar entre nuestros elementos o si queremos ir hacia atrás, vamos a ir menos que bastante fácil, ¿ verdad? Es realmente útil. 38. Quita la etiqueta: El modo predeterminado de quitar estas etiquetas, si ya no queremos “li”, sería simplemente hacer clic en ellas, y tal vez mover un ratón, y luego eliminarlas. Pero hay una manera más rápida, “Comando” y “Cita”, no más etiqueta. Cuando usas esto junto con otros atajos, la vida se vuelve simple. 39. Renombra la etiqueta: Entonces hemos hecho un montón de codificación, nuestro sitio está listo, pero hemos cometido algunos errores, y ahora necesitamos cambiar algunas de las etiquetas. Entonces una de las formas en que podemos hacer esto, la forma predeterminada, es simplemente ir a la etiqueta de apertura. Seleccione la pieza de texto UL y luego cámbiala a OL. Si presionamos “Enter” aquí, nos da un resultado no deseado. Entonces, solo eliminemos eso y luego podremos ir hasta la etiqueta de cierre y escribir “OL”. Esa es la forma por defecto. Ahora, mira lo rápido que es esto. Si voy “Command Shift K”, selecciona tanto la etiqueta de apertura como la de cierre, y ahora solo puedo escribir “UL” o “Div”. Ahora, echa un vistazo a esto. Si seleccionamos todos estos Li y presionamos “Comando Shift L”, o vamos selecciones, divididos en líneas, y luego presionamos “Comando” y “Flecha izquierda”. Lo que está pasando aquí es que hemos seleccionado todas las líneas, y ahora llegamos a escribir en cada línea. Entonces voy a presionar mi “Flecha derecha”, y luego desde aquí voy a presionar “Command Shift K” para cambiar el nombre de mis etiquetas. Entonces, solo puedo cambiar estos dos tramos o etiquetas A o lo que quiera. Realmente poderoso. 40. Encuentra el par: Es posible que tengas mucho contenido, y a medida que te desplazas hacia abajo, no sabes dónde estás. A pesar de que hay líneas y texto de sublínea o algunos editores tienen una forma más clara de distinguir cuál es una etiqueta de cierre a tu etiqueta de apertura. Una forma realmente fácil es simplemente hacer clic en algún lugar cercano a esa etiqueta de apertura o etiqueta de cierre, y luego ir Control Shift T , y va al inicio de esa, y luego Control Shift T, y luego, va al final. Control Shift T nuevamente, de vuelta a la abertura. Encuentra a su par. ¿ No sería genial si todas las personas pudieran encontrar su par exacto en el universo sólo con Control Shift T? 41. Encierra contenido con abreviaturas: Hemos aprendido a especificar el contenido de una abreviatura. Cuando ampliemos esto, verás que mi Contenido 1, es el texto dentro del último hijo de esa abreviatura, fantástico. Pero ahora ¿qué pasa si ya tenemos el contenido? Bueno, podríamos simplemente presionar A y luego expandir eso, pero entonces el contenido no estaría dentro de ese elemento. Vamos a deshacer, lo que podemos hacer aquí es seleccionar el contenido y luego lo vamos a envolver. Por lo que controla W para envolver. Oye, aquí podemos poner una abreviatura. Entonces div o podríamos poner un nombre de clase, mi clase, o podríamos escribir una abreviatura completa así que span y dentro del span está mi clase, y dentro de esa hay una etiqueta, realmente genial. Presiona “Enter” y ahí vamos. Acabamos de envolver nuestro contenido con un montón de etiquetas. No sólo tiene que ser el contenido solo, podríamos envolver todo este elemento con una abreviatura. Entonces controla W y tal vez solo quieras escribir em o tal vez div.my-cool-class. Al igual que eso, lo sangra para nosotros, fantástico. Así es como hacemos envolver, no te voy a envolver. 42. Modifica comentarios: Hablemos de comentar. En Sublime, si presionamos “Command” y “Slash” comenta, si lo presionamos de nuevo, no comenta. En Emmet, si presionamos “ALT”, “Shift”, y “Slash”, hace exactamente lo mismo, así que realmente fácil hacer eso. Pero ahora hablemos de siguiente nivel comentando. Si tenemos un montón de divs dentro de divs, y todos ellos tienen nombres de clase, slide.class-1 y dentro de.class-2. Dentro de eso es.class-3 y dentro de eso es.class-4 y ampliamos eso. Cometimos un error, por ahí. lo ampliamos. Lo que pasa es que, las etiquetas de apertura son geniales porque te dicen qué clase es, pero nunca te dice qué clase es cuando cierra. Lo que podemos hacer aquí es usar un filtro, tú pipas y presionas “C”, y luego lo expandes. Después pone comentarios, y te dice que, “Oye, acabamos de cerrar la clase 4, acabamos de cerrar la clase 3". Esto es realmente útil cuando tienes una página muy larga como URL, y dentro de la URL tienes muchos elementos de lista. Echa un vistazo a eso. Ahora no estás realmente seguro cuando tus divs están cerrando y qué divs es, pero ahora te lo dice. Bastante cool. 43. Actualiza el tamaño de la imagen: Ahora imagina que tenemos una etiqueta de imagen y tenemos esta rica imagen de cara.Echa un vistazo. Cara rica, esa soy yo tirando de una cara. Sí, ahora tengo esta cara rica pequeña imagen que quiero poner ahí en lugar de la imagen de cara rica. Así que volvemos a nuestro index.html y cambiamos a cara rica pequeña, y ahora necesito cambiar mi sabiduría, altura de los ojos, que siempre es una misión así. ¿ Cómo sé lo grande que es eso, entonces voy a echar un vistazo a esto. Simplemente tienes que ir Control Shift I y [inaudible] ancho y altura establecidos en 300. Sabe lo grande que las imágenes. uso de este atajo de teclado también funciona muy bien con el plugin sublime nombre de archivo automático. Deberías comprobarlo. 44. // MÁS COSAS ASOMBROSAS DE EMMET: Has visto algo de lo que puede hacer Emmet en tus archivos HTML y CSS, pero hay pocas cosas más que debes saber. El próximo par de videos va a ser sobre mostrarte esas cosas. 45. Codifica imágenes en datos: Esto te va a volar la mente, me voló la mente. Tengo esta imagen, se llama icon.png, un ícono increíble. Ahora, dentro de Safari o de algún otro navegador, lo tengo aquí. Pero, si vamos a Finder y vamos a quitar nuestro icon.png, eliminar, y entonces estamos para refrescar, habrá un problema. Volvemos a nuestro Finder, presionamos Comando Z, nuestro ícono vuelve, nos refrescamos, gracias a dios, está ahí de nuevo. Si vamos ahora a Sublime Text, para evitar que esto suceda, y por un montón de otras razones, si no quisiéramos confiar en un archivo real en nuestro sistema de archivos o en un servidor, lo que podríamos hacer es que podríamos codificar esto. Bastante cool. Pero, normalmente esto toma un poco de pensar, necesitas un convertidor o lo que sea, pero Emmet tiene esto ordenado. Echa un vistazo a esto. Control Shift D, y así, convierte tu imagen en texto plano. Sé que es un poco largo, pero tiene sus beneficios. Ahora comprobemos esto. Nosotros lo guardamos, vamos a entrar en nuestro Finder y retirarlo. Adiós. Después volvemos a Safari, nos refrescamos, comprobamos eso. Ya no necesitamos una imagen, lo tenemos todo en texto. ¿ Qué tan guay es eso? 46. Fusiona líneas: En ocasiones, tienes contenido sobre múltiples líneas, ya sea un HTML o CSS, y quieres que estén todos en una sola línea. Por lo que la forma más fácil de hacer esto una vez que realmente tienes tu contenido es seleccionarlo. Entonces en este caso, solo voy a seleccionar todo y luego presionas “Comando turno P” para subir tus paletas. A continuación, escribe merge o algo similar. Presionas “Enter” y así, todo está en una línea. Es lo mismo con CSS. Tienes un montón de reglas y las seleccionas, comando shift P, fusionar líneas, así como eso, todo está en una sola línea. De verdad servicial. Ahora bien, la otra forma de hacer esto, si puedes hacer un poco de pensamiento de frente, es escribirlo así. Entonces vas ul dot mi lista, li multiplicado por tres. Entonces, pones una tubería porque quieres filtrarla y quieres que sea una sola línea. Entonces, lo expandes y así, todo está en una sola línea. Entonces puedes decir: "Oye, ahí”. Presionar, “Tab”. “ ¿Cómo va, Presiona “Tab”?” Realmente genial, ¿verdad? Es exactamente lo mismo con CSS. 47. La paleta de comandos: Si eres como yo o la mayoría de los demás humanos, probablemente te olvides de estos atajos de teclado. Por suerte, en texto sublime, es realmente fácil encontrar los atajos. Vas a “Herramientas”, “Paletas de comando”, o podrías pulsar “Command Shift P”, si recuerdas ese atajo, y luego desde aquí puedes ver qué hacen todos los comandos de Emmet, así que Emmet y allá vamos. Todos los comandos están ahí con todos los atajos de teclado en el lado derecho. Súper, súper práctico. 48. Ajustes de Emmet: A veces puede que no te guste realmente lo que está haciendo Emmet. Bueno, te animo a que vayas a revisar los ajustes. En Sublime Text es bastante fácil, vas Sublime Text, Preferencias, y luego vas a Package Settings, Emmet, y luego echa un vistazo a la configuración predeterminada. Después para cambiar cualquiera de ellos, tienes que abrir tu propio archivo de configuración. Vamos a Configuración del paquete, Emmet, y luego Configuraciones-Usuario, y luego lo que puedes hacer es si no te gusta algo, puedes simplemente copiar eso y luego ponerte estas llaves porque es objeto adyacente y luego solo cambias eso, guarda ella. Es posible que tengas que reiniciar Sublime Text o tu editor de código antes de que el ajuste comience a funcionar. Así es como actualizas tu configuración. Tener un retiro ajustes por defecto es un montón de comentarios aquí que te dicen exactamente lo que está pasando. Investiga en línea si necesitas ayuda tratando de averiguar qué significan estos. 49. Filtros: Hablemos de filtros. Hemos visto filtros en acción en los videos de abreviatura HTML y CSS, pero te voy a mostrar cómo hacerlos y algunos ejemplos. ¿ Qué es un filtro? Bueno, hagamos un ejemplo primero. Entonces tienes un div, y tienes un ul, y tienes tres artículos li dentro de eso. Cuando amplías eso, las pone en múltiples líneas. Pero si no quieres eso, y lo quieres todo en una sola línea, pones un lucio y S. Ahora, este lucio es el filtro, y más alto filtrándolo, es el S. Entonces irías a controlar E y expandirías eso, y todo estaría en una línea. Fantástico. Ahora, en lugar de S, podrías escribir jade, y crearía algún marcado de jade para ti, así. O puedes escribir haml, y va a crear algún marcado haml para ti. Realmente genial. Ahora bien, si tu ul tenía una clase en ella, se llama Mi Lista. Lo que es realmente genial aquí es que en lugar de haml, podríamos escribir c, lo que significa que quiero comentarios. Cuando ampliamos esto, obtenemos estos comentarios al final de nuestros elementos con la clase, y dice: “Oye, acabamos de cerrar esta etiqueta”. Es así como usas los filtros. Ahí hay mucho más. Ve a revisarlos en línea. 50. // PRODUCTIVIDAD CON SUBLIME: En los siguientes videos se muestra cómo ser un poco más productivo en Sublime Text, pero ciertamente no son todas las formas. También te animo a investigar cómo acelerar todo tipo de tareas, no solo en tu editor de código. 51. Sin un ratón: Ahora, cuando estás escribiendo y luego usando un mouse y luego escribiendo y luego usando un mouse, se vuelve realmente frustrante y no es productivo. A veces ni siquiera sabes dónde está tu ratón, pero sabes dónde está tu pequeño cursor. ¿ Podemos simplemente no usar el ratón en absoluto? ¿ Y qué tal solo usar el teclado? Te voy a mostrar algunas cosas que te ayudarán a usar sólo el teclado. Los atajos de teclado que realmente útiles saber. Sé que tus mentes probablemente explotan con todos los demás atajos de teclado que debes conocer, pero estos son realmente útiles, sobre todo en Sublime. El primero que me gustaría mostrarles es el uso de comando. Si pulsas “Comando” e izquierda o derecha, salta al inicio o al final de la línea. Si utilizas comando y arriba o abajo , salta al inicio o al final del documento. Vamos a la parte superior del documento presione “Comando” y a la derecha, y vamos al final de esa línea. Ahora, cuando presionamos “Abajo” va hasta el final de esa línea. Abajo, abajo, abajo, abajo, y así sucesivamente. Ahora, comando a la izquierda va al inicio de esa línea y si subimos, arriba, arriba, y ya no se queda al inicio de esa línea, pero eso está bien. Comando dejó va al inicio de esa línea. Realmente genial. Ahora bien, ¿qué hace Alt? Bueno, Alt y a la derecha , salta a la siguiente palabra. Eso es bastante guay. A veces hace cosas raras como si no saltara del todo a la siguiente palabra y podría saltar al siguiente personaje si hay personajes especiales. Al igual que este Alt y a la izquierda, sólo saltaremos al arranque de li. A la izquierda, saltaremos hasta el final del heno, y así sucesivamente. ¿ Qué hace el turno? Desplazarse hacia el hacia la derecha Aha, crea una selección. Realmente útil si quieres copiar y pegar. Entonces “Comando C” para copiar y luego nueva línea y pegar. Ahora, hay una forma mucho más fácil de copiar y pegar. Podemos pulsar “Command”, “Shift” y a la izquierda y selecciona toda la línea. Ahora, podemos cortar eso, así que Comando X y ahora podemos presionar “Retroceso de Comando” para quitar toda la línea y retroceso otra vez y ahí vamos. No más línea y no tenemos que presionar “Retroceso” a 1000 veces. Si quieres algo en medio de quitar alinear por completo y escribir poco a poco, puedes presionar “Alt” y “Retroceso” y no eliminará las cosas trozo por trozo, lo cual a veces es bastante genial. Ahora bien, si quieres seleccionar una palabra de la que estás en medio, solo tienes que pulsar “Comando D” y selecciona esa palabra y si quieres seleccionar toda la línea, pulsa “Command L.” Eso es realmente útil para seleccionar líneas enteras, palabras enteras. Es realmente rápido. Súper. Otra forma de hacerlo es simplemente presionando “Alt”. Alt hacia la derecha y hacia la derecha otra vez. Entonces Alt turno a la derecha. Entonces puedes seleccionar palabra a palabra en lugar de intentar seleccionar un poco a poco poco a poco. Se puede empezar a ver qué comando hacen Alt y Shift. Son realmente, realmente poderosos. A veces también usamos el control en algunos de los atajos, pero realmente no te estoy mostrando mucho de lo que el control puede hacer en este momento. Una de las cosas más útiles que te voy a mostrar ahora es si tienes que seleccionar estas tres líneas y luego copiarlas y tenemos que bajar a marginar UL, y les pegamos las cosas no se ven tan bien. Cuando lo pegas desde otra zona que tiene una sangría diferente, puedes usar “Command Shift V” y básicamente pega en su lugar, realmente, realmente útil. Otra cosa es, es eso, ¿qué pasa si quisieras pegar estas cosas en un orden diferente? Bueno, subamos unas líneas y vamos a copiar oye, vamos a copiar ahí, y vamos a copiar cómo tú. Después bajamos aquí y luego retrocedemos, pulsamos “Tab” de nuevo, y luego “Alt command V.” ¿Qué hace esto? Bueno, echa un vistazo a esto. Guarda la historia de todas tus copias. Oye, podemos empezar con cómo presionas “Enter”, “Comando Alt V”, y luego podemos decir ahí, cómo estás ahí, y luego Comando Alt V y luego podemos decir hey, o incluso podríamos pegar todo un montón de aliados. Realmente genial. Esas son algunas formas geniales de copiar y pegar. Ahora bien, ¿qué pasa si quieres agregar una línea rápidamente por debajo o rápidamente arriba? “ Comando Shift Entrar” uno de arriba. “ Comando Enter” uno de abajo. Es más o menos lo mismo que simplemente entrar. Me gusta mucho “Comando Shift Enter”. La otra cosa que es realmente genial es cuando tienes un montón de texto seleccionado, presionas “Tab”, les va a sangrar y si presionas la pestaña “Shift”, les va a dessangrar. Súper servicial en lugar de hacerlo línea por línea. Lo último que quiero mostrarte aquí es que si estás escribiendo un trozo de texto, así que digamos que acabas de escribir como href. Presionas “Iguales”, no tienes que presionar dos conjuntos de cotizaciones. Simplemente lo presionas una vez y tu cursor está en medio de esas dos comillas. De verdad servicial. Entonces puedes escribir algo. Otro gran ejemplo de esto es si tuviera que seleccionar “Cómo” y luego tuviera que presionar “Shift” y citar, y envolveremos esa palabra con comillas. O envolvería esto con corchetes o con corchetes. De verdad, realmente genial. Esos son un par de atajos que uso en Sublime. Hay una tonelada más. Si realmente estás queriendo saber si se puede hacer algo para acelerar el proceso, haz algunas investigaciones. Probablemente estará disponible o alguien habrá creado un plug-in que te permita hacer eso. 52. Dividir en líneas: Una de las cosas más geniales que encuentro sobre Sublime Text es la capacidad de dividir un montón de texto en líneas. Voy a presionar Comando A, seleccionarlos todos, y luego voy a Selección, Dividir en Líneas, pero podríamos usar el atajo de teclado, así que Comando Shift O, y de repente, tenemos un montón de líneas seleccionado. Si empezamos de nuevo espaciando aquí, oye, podemos escribir un montón de cosas, pero eso no es demasiado útil. Si presiono Comando y a la izquierda, va al inicio de cada una de esas líneas. Desde aquí, puedo hacer algo como div y expandirme. Entonces puedo seleccionar la etiqueta de cierre, cortar eso, presionar Comando y a la derecha, y luego, pegar eso. Lo está haciendo por cada línea. Es realmente, realmente poderoso. 53. Navega por las pestañas: Cuando tienes un montón de pestañas abiertas, es realmente frustrante simplemente ir con el ratón, y luego hacer clic, y luego hacer clic, y luego hacer clic, y luego hacer clic. Hay un par de maneras de hacer esto. Imita a Google Chrome muy bien, por lo que podrías presionar Comando uno, dos, tres para navegar entre tus diferentes pestañas. En ocasiones, tienes tantas pestañas abiertas que no sabes en qué pestaña estás o a qué pestaña quieres ir. Podrías simplemente presionar Tab de control y va a ciclo entre tus pestañas o Control Alt Tab y va a recorrer el revés, o si querías ser realmente intencional sobre qué camino fuiste, Comando Alt a la derecha, Comando Alt a la izquierda. Hay tres formas de navegar entre tus pestañas. Normalmente solo uso Control Tab, o si tengo unas pestañas abiertas, Comando uno, dos, tres. Súper fácil, súper simple. 54. Selector de emojis: Cuando estás escribiendo cosas como, “Oh, me encantan los unicornios”, solo necesitas poner un emoji ahí dentro, ¿verdad? ¿ Cómo hacemos eso? Bueno, en un Mac, es realmente fácil. Te vas Control, Comando, y Espacio. Así como así, puedes buscar unicornio, ahí vamos. Entonces, acabamos de poner el unicornio ahí dentro. Fantástico. Si cuando haces eso, tu pantalla se ve así, entonces solo presionas este pequeño botón del lado derecho aquí y se convierte en este pequeño pop-up. La próxima vez que uses eso, vas a Control, Comando y Espacio, y luego, aparece tu recolector de emoji. Súper práctico para emojis. Sí. 55. // CONCLUSIÓN: Ahora te sientes como Cerca ¿verdad? Dial de matriz o algún centro de hackers de clase mundial ya que eres como Mr. Hacker, o Mr. Near o Mrs. Near Trinity, quienquiera que creas que eres. Tengo un reto para ti y una pregunta. El reto es, quiero que escribas un sitio web en una sola abreviatura y publiques esa expresión en tu galería de proyectos. Todos los demás pueden copiarlo, pegarlo y expandirse y voila, deberían tener un sitio web. Entonces la pregunta es, por favor díganos, qué debemos hacer con todo el tiempo extra que ahorrarás una vez que empieces a usar Emmet. Esas tus dos cosas que quiero que hagas ahora. Diviértete con ellos. Ese es el fin de la clase. Sin embargo, son muchas más formas de acelerar tu productividad, sobre todo cuando estás codificando y sobre todo cuando estás en texto sublime. Si has disfrutado de la clase, por favor revisarla y compártela con cualquiera que creas que se beneficiará de ella. Si quieres mantenerte en contacto, echa un vistazo a mi página web y sígueme en las redes sociales. Soy @TAPTAPKABOOM en la mayoría de las plataformas. Está bien. Nos vemos pronto. Adiós.