Cuando empezamos nuestro camino de aprendizaje en programación web dedicado al Frontend, en HTML y CSS aprendemos sobre etiquetas, selectores y propiedades, lo que nos toma un buen tiempo ya que no son pocas, esto significa mucho más tiempo para escribir nuestro código, claro que la practica hace al maestro y el tiempo nos dará la agilidad anhelada, sin embargo, existen herramientas y atajos que nos permiten avanzar de manera efectiva y eficiente en la escritura de nuestro código, acortando nuestra curva de aprendizaje y de las cuales vamos a compartir contigo las más conocidas.
Con plugin o extension
La más utilizada es EMMET es una extensión o plugin para editores de código que nos ayuda autocompletando la sintaxis de las etiquetas de HTML y de propiedades en CSS.
En HTML:
p.paragraph ==> <p class="paragraph">
.app ==> <div class="app"> </div>
#app ==> <div id="app">
.main>p.parrafo ==>
<div class="main">
<p class="parrafo">
</div>
section.main>p.parrafo1+img.image+a+p.parrafo2 ==>
<section class="main">
<p class="parrafo1">
<img src="" alt="" class="image">
<a href=""></a>
<p class="parrafo2">
</section>
div>div#page>p.title+p|c ==>
<div><divid="page"><pclass="title"></p><!-- /.title --><p></p></div><!-- /#page --></div>
.main>p.parrafo1{ aquí va el texto }+img.image+a+p.parrafo2|c ==>
<divclass="main"><pclass="parrafo1"> aquí va el texto </p><!-- /.parrafo1 --><imgsrc=""alt=""class="image"><ahref=""></a><pclass="parrafo2"></p><!-- /.parrafo2 --></div><!-- /.main -->
ul>li[id=${1} class=${2}] ==>
<ul><liid=""class=""></li></ul>
div>(header>h1.title1)+(section>article>h2.title2+p)+footer>ul>li*3 ==>
<div><header><h1class="title1"></h1></header><section><article><h2class="title2"></h2><p></p></article></section><footer><ul><li></li><li></li><li></li></ul></footer></div>
ul>li.item$*5 ==>
<ul>
<liclass="item1"></li>
<liclass="item2"></li>
<liclass="item3"></li>
<liclass="item4"></li>
<liclass="item5"></li>
</ul>
En CSS:
(Con valor fijo)
body {
m10 ==> margin: 10px;
}
(Con valor flotante)
body {
m1.5 ==> margin: 1.5em;
}
• En los colores utilizando hexadecimales
body {
background-color: #1 ==> #111111;
border: #e0 ==> #e0e0e0;
color: #fc0 ==> #ffcc00;
}
En teclado
Dependiendo del editor con el que trabajes existen muchos atajos, a continuación, te dejo los links para tres de los principales editores:
Visual Studio Code:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Sublime Text:https://www.shortcutfoo.com/app/dojos/sublime-text-3-win/cheatsheet
Atom:https://github.com/nwinkler/atom-keyboard-shortcuts
Aquí los más utilizados
Más allá de HTML y CSS
Cuando ya empieces a profundizar en otros lenguajes también encontraras plugins o extensiones para estos, por ejemplo, JavaScript, Php, Java, y sus respectivos frameworks como Angular, React, Laravel, etc. Que te ayudan a autocompletar la sintaxis de los mismos, otras para conectar con servicios como Git, Github, Docker, para medir el tiempo y los lenguajes que utilizas, serán un número inimaginable de herramientas que te ayudarán a escribir código a una buena velocidad y te permitirán aumentar tu productividad.
Te dejo las recomendaconies de Oscar Barajas (gndx), sobre los 10 Plugins o extensiones esenciales para Frontend
No lo olvides…
Sí sabes otros atajos o extensiones que ya uses y quieras compartir con la comunidad, ponla en los comentarios.
Excelente, muchas gracias 😄
Gracias por este aporte a la comunidad, gran ayuda para quienes empezamos en el ecosistema!
Aprecio tu esfuerzo, lástima que muchas veces no es recompensado debidamente.