Βάλτε το Javascript: Μάθετε πρώτα HTML & CSS

Μια αυξανόμενη τάση στην ανάπτυξη front-end είναι η ιδέα ότι μπορείτε να καταδυθείτε κατευθείαν στο Javascript και να πετύχετε. Ειλικρινά, για καλύτερα ή χειρότερα μάλλον μπορείτε. Αλλά χτίζετε πάνω από ένα εύθραυστο θεμέλιο που θα επιστρέψει για να σας δαγκώσει.

Γιατί χρειάζομαι HTML ή CSS;

Τα πλαίσια διεπαφής χρήστη που γνωρίζουμε σήμερα όπως το React και το Vue δημιουργούνται πάνω από τα βασικά δομικά στοιχεία μιας ιστοσελίδας: HTML και CSS. Αν και αυτά τα πλαίσια διεπαφής χρήστη υπερφορτώνουν αυτά τα βασικά μέσω ορισμένων δροσερών εργαλείων και Javascript, αυτό που δημιουργείτε είναι ουσιαστικά το ίδιο με τον ιστότοπο Space Jam από το 1996.

Αλλά το καταλαβαίνω, γράφοντας χειροκίνητα HTML και CSS χρονολογείται σωστά;

Κατανοήστε τι κάνουν τα εργαλεία σας

Έχοντας τουλάχιστον μια βασική κατανόηση του τι συμβαίνει κάτω από την κουκούλα θα σας βοηθήσει πάρα πολύ κατά την ανάπτυξη και τον εντοπισμό σφαλμάτων των εφαρμογών σας.

Μπορεί να έχετε αντιμετωπίσει μερικά περίεργα πράγματα στο πρόγραμμα περιήγησης, όπως γιατί μετατρέπει τον κώδικα HTML εκεί; Χρησιμοποιώντας τα ακόλουθα ως παράδειγμα:

 p { color: purple; }  

My Cool Page

Some cool stuff Is this still cool?

Όταν το φορτώνετε στο Chrome, θα παρατηρήσετε ορισμένες αλλαγές…

Γιατί δεν είναι όλη η παράγραφος μου δροσερή και μοβ;

Λοιπόν, αποδεικνύεται ότι το πρόγραμμα περιήγησής σας είναι χρήσιμο και διορθώνει αυτόματα τον κώδικά σας. Μια ετικέτα παραγράφου (

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>

Αυτό επιτρέπει στο Google, στο Bing και σε όλες τις άλλες μηχανές αναζήτησης να γνωρίζουν ακριβώς ποιο πρέπει να είναι το πιο σημαντικό μέρος της σελίδας και να βοηθούν στον προσδιορισμό της γενικής ιεραρχίας.

Αυξήστε την προσβασιμότητα με ανάπτυξη χωρίς αποκλεισμούς

Μη κωδικοποιώντας υπεύθυνα, αποκλείουμε αυτόματα τα άτομα από την πρόσβαση στον ιστότοπο που εργαζόμαστε τόσο σκληρά για να δημιουργήσουμε. Συχνά αυτοί οι άνθρωποι νοιάζονται για το τι χτίζεται εξίσου αν όχι περισσότερο από εσάς και εγώ.

Κάνοντας μια μικρή εργασία την πρώτη φορά και ξοδεύοντας ένα επιπλέον δευτερόλεπτο για να σκεφτούμε τι γράφουμε, μπορούμε να συμπεριλάβουμε όλους τους φίλους που επισκέπτονται τους ιστότοπούς μας.

Πάρτε μια απλή λίστα πλοήγησης που εμφανίζεται συνήθως στους περισσότερους ιστότοπους σήμερα. Μπορεί να μπείτε στον πειρασμό να γράψετε λίγα divδευτερόλεπτα επειδή λειτουργούν σωστά;

 Link 1 Link 2 Link 3 

Το πρόβλημα είναι ότι δεν είναι τόσο εύκολο για τους αναγνώστες οθόνης. Για να το διορθώσετε, εσείς / τεχνικά / μπορείτε να γράψετε ακόμη λιγότερο HTML ( divείναι 3 χαρακτήρες ulκαι 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

Θα στοιχηματίσω ότι η πλειοψηφία των ανθρώπων που το διαβάζουν αυτό το κάνουν επειδή ενδιαφέρονται για τον κωδικό τους και είναι πολύ παθιασμένοι με αυτό που κάνουν. Ακριβώς όπως κάθε άλλο σκάφος που ήρθε πριν από την ανάπτυξη, η εξάσκηση και η εστίαση στα βασικά θα ενισχύσει την ικανότητά σας ως προγραμματιστής. Μπόνους, θα κερδίζετε μια εύκολη νίκη βοηθώντας να είστε πιο περιεκτικοί στη δουλειά σας και προσελκύοντας περισσότερα άτομα στην αίτησή σας!

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου

Αρχικά δημοσιεύθηκε στη διεύθυνση //www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css