Laske Javascript: Opi ensin HTML ja CSS

Kasvava trendi käyttöliittymäkehityksessä on ajatus, että voit sukeltaa suoraan Javascriptiin ja menestyä. Rehellisesti, hyvässä tai huonossa voit todennäköisesti. Mutta rakennat vain herkän perustan päälle, joka palaa purra sinua.

Miksi tarvitsen HTML: ää tai CSS: ää?

Reactin ja Vuen kaltaiset käyttöliittymäkehykset, kuten React ja Vue, rakentuvat verkkosivun perusrakenteiden päälle: HTML ja CSS. Vaikka nämä käyttöliittymäkehykset lataavat nämä perusteet hienojen työkalujen ja Javascriptin avulla, rakentamasi sisältö on pohjimmiltaan sama asia kuin Space Jam -sivusto vuodelta 1996.

Mutta ymmärrän sen, että HTML: n ja CSS: n kirjoittaminen manuaalisesti on päivätty oikein?

Ymmärrä, mitä työkalusi tekevät

Ainakin perustiedot siitä, mitä hupun alla tapahtuu, auttaa sinua valtavasti kehittäessäsi ja virittäessäsi sovelluksiasi.

Olet ehkä törmännyt muutamiin outoihin asioihin selaimessa, kuten miksi HTML muuttaa koodia siellä? Käyttämällä seuraavaa esimerkkinä:

 p { color: purple; }  

My Cool Page

Some cool stuff Is this still cool?

Kun lataat tämän Chromeen, huomaat muutoksia ...

Miksi kaikki kappaleeni eivät ole viileitä ja violetteja?

Selväsi on hyödyllinen ja korjaa koodisi automaattisesti. Kappaletunniste (

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>

Tämän avulla Google, Bing ja kaikki muut hakukoneet tietävät tarkalleen sivun tärkeimmän osan ja auttavat tunnistamaan yleisen hierarkian.

Paranna esteettömyyttä osallistavan kehityksen avulla

Jos emme koodaa vastuullisesti, suljamme ihmiset automaattisesti käyttämättä sivustoa, jonka rakentaminen on niin kovaa työtä. Usein nämä ihmiset välittävät siitä, mitä rakennetaan yhtä paljon, ellei enemmän kuin sinä ja minä.

Kun teemme pienen kotitehtävän ensimmäistä kertaa ja vietämme ylimääräisen sekunnin ajattelemaan kirjoittamiamme, voimme olla osallistavia kaikille sivuillamme vieraileville ystäville.

Ota yksinkertainen navigointiluettelo, joka näkyy useimmilla verkkosivustoilla tänään. Saatat olla kiusaus kirjoittaa muutama divs, koska ne toimivat oikein?

 Link 1 Link 2 Link 3 

Asia on, että näytönlukuohjelmien ei ole helppo ottaa niitä vastaan. Tämän korjaamiseksi / teknisesti / pystyt kirjoittamaan vielä vähemmän HTML-koodeja ( divon 3 merkkiä ulja liovatko 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

Vetoisin suurimmalle osalle tätä lukevista ihmisistä, koska he välittävät koodistaan ​​ja ovat erittäin intohimoisia tekemisistään. Aivan kuten mikä tahansa muu ennen kehitystä tullut vene, myös harjoitukset ja keskittyminen perustekijöihin vahvistavat kykyäsi kehittäjänä. Bonus, saat helpon voiton auttamalla olemaan osallistavampi työssäsi ja houkuttelemalla lisää ihmisiä hakemukseesi!

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen

Alun perin julkaistu osoitteessa //www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css