Una tendencia creciente en el desarrollo de front-end es la idea de que puede sumergirse directamente en Javascript y tener éxito. Honestamente, para bien o para mal probablemente puedas. Pero estás construyendo sobre una base frágil que volverá a morderte.

¿Por qué necesito HTML o CSS?

Los marcos de interfaz de usuario que conocemos hoy como React y Vue se basan en los componentes básicos de una página web: HTML y CSS. Aunque estos marcos de interfaz de usuario potencian estos conceptos básicos a través de algunas herramientas geniales y Javascript, lo que está creando es fundamentalmente lo mismo que el sitio web Space Jam de 1996.

Pero lo entiendo, escribir HTML y CSS manualmente tiene fecha, ¿verdad?

Comprenda lo que hacen sus herramientas

Tener al menos una comprensión básica de lo que está sucediendo bajo el capó lo ayudará enormemente a medida que desarrolla y depura sus aplicaciones.

Es posible que se haya encontrado con algunas cosas extrañas en el navegador, como por ejemplo, ¿por qué HTML transforma el código allí? Usando lo siguiente como ejemplo:

 p { color: purple; }  
My Cool Page
 Some cool stuff Is this still cool? 

Cuando cargue esto en Chrome, notará algunos cambios ...

¿Por qué todo mi párrafo no es fresco y morado?

Bueno, resulta que su navegador es útil y corrige automáticamente su código. Una etiqueta de párrafo (

Learn the magic of CSS

CSS can do a whole heck of a lot these days. It’s so much more than setting a few colors, but gives you the ability to provide consistent UI patterns throughout your application.

Don’t be afraid of it! If you started in Javascript, you might be tempted to do everything there, but you’ll quickly find managing all of the real power of CSS within your JS is a pain, and frankly, unnecessary unless you’re Facebook.

What can you do? Build the Alien movie title scene with pure CSS. Grab some hover effects for your buttons. Or just animate anything!

A favorite of mine is creating a fancy Facebook-like loading animation class that will apply an animated gradient background to anything you add it to:

.loading { background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%); background-size: 400%; animation: loading 1.2s ease-in-out infinite; } @keyframes loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

Crack open a codepen and try it yourself!

Make your search results relevant

Search engines do their best to figure out how the content you write is relevant to users searching for it. But how you write your HTML makes a difference with helping them determine that value. A common mistake I see is using Heading elements incorrectly or simply not using them at all.

All
My
Content
Is
Important

Consider the outline of this blog post:

- Put Down the Javascript - Learn HTML & CSS - Why do I need HTML or CSS? - Understand what Your tools are doing - Learn the magic of CSS ...

“Learn the magic of CSS” is not the key takeaway from the page, so I wouldn’t want to feature that as the most important. The title of the post however, “Put Down the Javascript — Learn HTML & CSS”, reflects the overall story, making it the most important, so I would want to make it #1.

So with my HTML, I would want to make it look something more like:

Put Down the Javascript - Learn HTML & CSS
Why do I need HTML or CSS?
Understand what Your tools are doing
Put Down the JS - Learn HTML & CSS/h2>

Esto le permite a Google, Bing y todos los demás motores de búsqueda saber exactamente cuál debería ser la parte más importante de la página y ayudar a identificar la jerarquía general.

Impulsar la accesibilidad mediante el desarrollo inclusivo

Al no codificar de manera responsable, automáticamente excluimos a las personas del acceso al sitio que tanto nos esforzamos en construir. A menudo, estas personas se preocupan por lo que se está construyendo tanto o más que tú y yo.

Al hacer un poco de tarea la primera vez y dedicar un segundo más a pensar en lo que estamos escribiendo, podemos incluir a todos los amigos que visitan nuestros sitios.

Tome una lista de navegación simple que se ve comúnmente en la mayoría de los sitios web en la actualidad. Es posible que tenga la tentación de escribir algunas divporque funcionan, ¿no?

 Link 1 Link 2 Link 3 

El problema es que no son tan fáciles de entender para los lectores de pantalla. Para solucionar este problema, técnicamente, puede escribir menos HTML (¿ divtiene 3 caracteres uly li2?).

    

     
Link 1
     
Link 2
     
Link 3
    

Taking it a step further, if this is your navigation menu, wrap it in an HTML 5 navigation element () and users will now be able to directly access the menu.

Check out The A11y Project for more good tips on accessibility.

Simplify your code, embrace native functionality

You would be surprised how much functionality exists natively in modern browsers, with more browser support than you probably need (sorry to those of you who still support IE9).

With some basic HTML, you can build a text input that has searchable, autocomplete-like text in a dropdown:

My Favorite Color      

Taking advantage of CSS pseudo selectors, we can dynamically style a checkbox-type element depending on if it’s checked:

 .is-checked { display: none; } #my-checkbox:checked + span .is-checked { display: inline; } #my-checkbox:checked + span .not-checked { display: none; }     Not Checked Checked  

This is Your Craft, Pay Attention to It

I’d wager the majority of the people reading this are doing so because they care about their code and are super passionate about what they do. Just like any other craft that came before development, practicing and focusing on the fundamentals will strengthen your ability as a developer. Bonus, you’ll be getting an easy win by helping be more inclusive with your work and getting more people to your application!

• ? Follow Me On Twitter
• ?️ Subscribe To My Youtube
• ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css