Sæt Javascript ned: Lær først HTML og CSS

En voksende tendens inden for frontend-udvikling er ideen om, at du kan dykke lige ind i Javascript og få succes. Ærligt, på godt og ondt kan du sandsynligvis. Men du bygger bare oven på et skrøbeligt fundament, der kommer tilbage for at bide dig.

Hvorfor har jeg brug for HTML eller CSS?

UI-rammerne, som vi kender i dag som React og Vue, bygger oven på de grundlæggende byggesten på en webside: HTML og CSS. Selvom disse brugergrænseflader rammer disse basics gennem nogle seje værktøjer og Javascript, er det, du bygger, grundlæggende det samme som Space Jam-webstedet fra 1996.

Men jeg forstår det, at skrive HTML og CSS manuelt er dateret, ikke?

Forstå hvad dine værktøjer laver

At have mindst en grundlæggende forståelse af, hvad der foregår under emhætten, hjælper dig utroligt, når du udvikler og fejler dine applikationer.

Du er muligvis stødt på et par ulige ting i browseren, f.eks. Hvorfor transformerer HTML kode der? Brug følgende som et eksempel:

 p { color: purple; }  

My Cool Page

Some cool stuff Is this still cool?

Når du indlæser dette i Chrome, vil du bemærke nogle ændringer ...

Hvorfor er ikke hele mit afsnit køligt og lilla?

Nå viser det sig, at din browser er nyttig og automatisk retter din kode. Et afsnitstag (

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>

Dette lader Google, Bing og alle de andre søgemaskiner vide nøjagtigt, hvad der skal være den vigtigste del af siden og hjælpe med at identificere det generelle hierarki.

Kør tilgængelighed ved inkluderende udvikling

By not coding responsibly, we automatically exclude people from accessing the site we work so hard to build. Often these people care about what’s getting built just as much if not more than you and I do.

By doing a little homework the first time and spending an extra second thinking about what we’re writing, we can be inclusive to all friends visiting our sites.

Take a simple navigation list commonly seen in most websites today. You might be tempted to write out a few div s because they work right?

 Link 1 Link 2 Link 3 

The issue is, they’re not as easy for screen readers to pick up on. To fix this, you /technically/ can write even less HTML ( div is 3 characters, ul and li are 2 ?).


    
  • 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

Jeg vil vædde på, at størstedelen af ​​de mennesker, der læser dette, gør det, fordi de bryr sig om deres kode og er meget lidenskabelige med, hvad de gør. Ligesom ethvert andet håndværk, der kom før udvikling, vil øve og fokusere på det grundlæggende styrke din evne som udvikler. Bonus, du får en nem gevinst ved at hjælpe med at være mere inkluderende i dit arbejde og få flere mennesker til din ansøgning!

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev

Oprindeligt offentliggjort på //www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css