15+ Εργαλεία διεπαφής που πρέπει να γνωρίζετε: Τα αγαπημένα μου ευρήματα για το 2020

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


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

Τα καλύτερα εργαλεία διεπαφής

Hotkey

Εργαλεία διεπαφής: Hotkey

Η ανίχνευση πλήκτρων με JavaScript δεν είναι υπερβολικά περίπλοκη εργασία, αλλά αυτή η μικρή χρησιμότητα από την ομάδα στο GitHub το καθιστά εξαιρετικά απλό.

Με αυτό μπορείτε να ενεργοποιήσετε μια ενέργεια σε ένα στοιχείο με συντόμευση πληκτρολογίου.

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

Το JavaScript είναι μόνο μία δήλωση μαζί με μια εισαγωγή:

εισαγωγή {install} από ‘./hotkey.js’;

για (const el of document.querySelectorAll (‘[data-hotkey]’)) {
εγκατάσταση (el)
}

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

  • Παράδειγμα
  • Παράδειγμα
  • Παράδειγμα
  • Παράδειγμα
  • Παράδειγμα

Παρατηρήστε τα χαρακτηριστικά hotkey δεδομένων που προστέθηκαν σε καθέναν από τους συνδέσμους. Αυτά είναι που επιτρέπουν τα hotkeys για τις στοχευμένες ενέργειες (σε αυτήν την περίπτωση, ενεργοποιώντας έναν επιλογέα στόχου μέσω CSS). Τα πολλαπλά πλήκτρα διαχωρίζονται με κόμμα. οι συνδυασμοί πλήκτρων διαχωρίζονται με ένα σύμβολο συν. και οι ακολουθίες κλειδιών διαχωρίζονται με κενό.

Ακολουθεί μια ζωντανή επίδειξη:

Δοκιμάστε καθεμία από τις συντομεύσεις και παρατηρήστε ότι ο κώδικας στον πίνακα JavaScript είναι ελάχιστος. Πολύ απλό στη ρύθμιση, μόλις εισαχθεί η μονάδα. Και ως δευτερεύον σημείο εδώ, εάν έχετε μια εφαρμογή με πολλά πλήκτρα συντόμευσης που θέλετε να εμφανίσετε σε ένα τροπικό παράθυρο (όπως γίνεται στο Twitter, το GitHub κ.λπ.), ίσως θέλετε να δείτε QuestionMark.js, και το παλιό μου έργο.

Φυσικά, με τις συντομεύσεις πληκτρολογίου, θα θέλατε να λάβετε υπόψη τις ανησυχίες προσβασιμότητας, οπότε φροντίστε να δείτε το README του repo για πληροφορίες σχετικά με αυτό.

Freezeframe.js

Εργαλεία διεπαφής: Freezeframe.js

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

Αυτό το μικρό βοηθητικό πρόγραμμα σάς επιτρέπει να προσθέσετε λειτουργίες τύπου βίντεο σε κινούμενα GIF που είναι ενσωματωμένα στον HTML σας.

Μόλις συμπεριλάβετε την πηγή Freezeframe.js στη σελίδα σας, χρειάζεστε μόνο μία δήλωση JavaScript:

νέο Freezeframe (‘. freezeframe’, {
σκανδάλη: “hover”,
επικάλυψη: false
});

Εάν αφήσετε το δεύτερο όρισμα (π.χ. νέο Freezeframe (‘. Freezeframe’)), θα προεπιλεγεί το κουμπί χωρίς αναπαραγωγή και το κινούμενο σχέδιο ενεργοποιείται στο hover. Το μόνο ελάττωμα με αυτό είναι ότι, επειδή είναι ένα κινούμενο GIF, τεχνικά δεν μπορείτε "παύση" μπορείτε, μόνο "να σταματήσει" αυτό (που σημαίνει ότι ξεκινά ξανά από την αρχή). Αλλά συνήθως με τα GIF, αυτό δεν είναι μεγάλη υπόθεση.

Ακολουθεί μια επίδειξη με τρία διαφορετικά παραδείγματα:

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

Εργαλειοθήκη ARC

Εργαλεία διεπαφής: ARC Toolkit

Τα εργαλεία μετάβασης προς τα εμπρός πρέπει να περιλαμβάνουν πολλές επιλογές προσβασιμότητας.

Πρόκειται για μια επέκταση Chrome που προσθέτει μια καρτέλα στα εργαλεία προγραμματιστή σας για να σας βοηθήσει να βρείτε σφάλματα προσβασιμότητας και προειδοποιήσεις που σχετίζονται με τις οδηγίες WCAG 2.1 Level A και AA.

Δύο λόγοι για τους οποίους αυτό το εργαλείο είναι τόσο μεγάλο:

  • Ενσωματώνεται με την υπάρχουσα ροή εργασίας δοκιμών / εντοπισμού σφαλμάτων μέσα στα εργαλεία προγραμματιστή
  • Είναι φτιαγμένο από τον Όμιλο Paciello, οι οποίοι είναι γνωστοί στην κοινότητα προγραμματιστών για τις πληροφορίες προσβασιμότητας

Χαρακτηριστικά ARC Toolkit

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

Αναλυτικές δυνατότητες ARC Toolkit

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

Σκηνή.js

Εργαλεία διεπαφής: Scene.js

Κάθε χρόνο φαίνεται να υπάρχει μια νέα βιβλιοθήκη κινούμενων σχεδίων με είδη στο τοπίο εργαλείων front-end.

Η επιλογή μου για φέτος είναι το Scene.js.

Δεν είναι αυτό που μπορείτε να πάρετε και να εργαστείτε μέσα σε λίγα λεπτά, όπως τα άλλα που έχουν εμφανιστεί μέχρι στιγμής.

Υπάρχει μια καμπύλη εκμάθησης για να συνηθίσετε το API, το οποίο μοιάζει με αυτό:

let scene = νέα σκηνή ({
".κουτί αναζήτησης": {
"0%" : "πλάτος: 50 εικονοστοιχεία",
"70%": "πλάτος: 300 εικονοστοιχεία",
},
".γραμμή": {
"30%" : "πλάτος: 0%",
"100%": "πλάτος: 100%",
}
}, {
διάρκεια: 1,
χαλάρωση: Σκηνή.EASE_IN_OUT,
επιλογέας: true,
ExportCSS ();

scene.setTime (0);
ας εναλλάξ = false;

document.querySelector (".υποβάλλουν") .addEventListener ("Κάντε κλικ", λειτουργία() {
toggle =! toggle;
scene.setDirection (εναλλαγή ? "κανονικός" : "ΑΝΤΙΣΤΡΟΦΗ")
scene.play ();
});

Αυτός είναι ο κωδικός για ένα από τα παραδείγματα στην αρχική σελίδα. Είναι ένα απλό πλαίσιο αναζήτησης με κινούμενα σχέδια. Ακολουθεί η επίδειξη του CodePen:

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

Σχόλιο

Εργαλεία διεπαφής: Σχόλιο

Το τρέχον διαδικτυακό τοπίο με γνώμονα την προστασία της ιδιωτικής ζωής θα μπορούσε να χρησιμοποιεί περισσότερα εργαλεία όπως αυτό. Σκέφτομαι εδώ και αρκετό καιρό επιλογές για βελτιωμένα συστήματα σχολιασμού στον ιστότοπό μου στο WordPress και το Commento φαίνεται σταθερό.

Μου αρέσει η λειτουργικότητα κάτι όπως το Disqus (ψηφοφορίες / αρνητικές ψήφοι, κορυφαία σχόλια κ.λπ.), αλλά έχει πάρα πολύ φούσκωμα.

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

Εάν σκέφτεστε να αλλάξετε από μια υπάρχουσα πλατφόρμα σχολιασμού στο Commento, είναι αρκετά δουλειά από αυτό που έχω διαβάσει, οπότε αυτό είναι ένα μεγάλο μειονέκτημα.

Επίσης, παρόλο που το Commento σάς επιτρέπει να κάνετε εισαγωγή από το Disqus, δεν θα μπορείτε να εισαγάγετε το "ψήφοι" σχετικά με παλιά σχόλια από το Disqus ή τα είδωλα από τους χρήστες που δημοσίευσαν σχόλια.

Δεν υπάρχει επίσης τρόπος εισαγωγής παλιών σχολίων WordPress στο Commento, εκτός εάν κάνετε πρώτα εξαγωγή στο Disqus και, στη συνέχεια, εισαγάγετε από το Disqus στο Commento (το οποίο μπορεί να γίνει χρησιμοποιώντας ένα εργαλείο εισαγωγής Disqus όταν εγγραφείτε στο Commento).

Το τελευταίο μειονέκτημα είναι το γεγονός ότι το Commento δεν είναι δωρεάν, εκτός εάν το φιλοξενείτε μόνοι σας. Όμως, αν λάβετε υπόψη τα ζητήματα bloat και απορρήτου της Disqus, η μικρή μηνιαία χρέωση αξίζει τον κόπο.

Ιστορία Git

Εργαλεία διεπαφής: Ιστορικό Git

Αν και αυτό δεν ανήκει αποκλειστικά στην κατηγορία εργαλείων front-end, είναι ένα από τα αγαπημένα μου σε αυτήν τη λίστα λόγω της απλότητας και της καινοτομίας του στον τρόπο που λειτουργεί.

Το Git History σάς επιτρέπει να προβάλετε το ιστορικό για οποιοδήποτε αρχείο σε δημόσιο repo Git (GitHub, GitLab ή Bitbucket).

Για παράδειγμα, ας υποθέσουμε ότι θέλετε να δείτε το ιστορικό των αλλαγών στο αρχείο προέλευσης Για Normalize.css. Το αρχείο βρίσκεται στη διεύθυνση:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Για να δείτε το ιστορικό του, αντικαταστήστε το github.com στη διεύθυνση URL με το github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

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

Εναλλαγή λειτουργίας CSS

Εργαλεία διεπαφής: Εναλλαγή χαρακτηριστικών CSS

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

Το CSS Feature Toggles, παρόμοιο με το ARC Toolkit που αναφέρθηκε παραπάνω, προσθέτει μια νέα καρτέλα στα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας.

Στην καρτέλα, θα δείτε μια λίστα με σύγχρονες δυνατότητες CSS.

Διαθέσιμα χαρακτηριστικά CSS για εναλλαγή

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

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

Δημιουργία εφαρμογής

Εργαλεία διεπαφής: Δημιουργία εφαρμογής

Χωρίς αμφιβολία, η ροή εργασίας των εργαλείων front-end περιλαμβάνει πολλές επιλογές για κατασκευές. Αυτός ο ιστότοπος είναι ένας συνδυασμός ενός ιστότοπου μάθησης και ενός εργαλείου δημιουργίας έργων για προγραμματιστές που χρησιμοποιούν (ή θέλουν να μάθουν πώς να χρησιμοποιούν) webpack ή Parcel, τα δημοφιλή πακέτα στοιχείων.

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

Δημιουργία επιλογών διαμόρφωσης εφαρμογής

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

Πολύ χρήσιμο τόσο για τη μάθηση όσο και για τη δημιουργία νέων έργων!

CSSJanus

Εργαλεία διεπαφής: CSS Janus

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

Αυτό σας επιτρέπει να δημιουργείτε εύκολα φύλλα στυλ για γλώσσες από δεξιά προς τα αριστερά (rtl) όπως Αραβικά και Εβραϊκά.

Ακολουθεί ένα παράδειγμα CSS:

.παράδειγμα {
float: αριστερά
text-align: αριστερά;
επένδυση: 1px 2px 3px 4px;
margin-αριστερά: 1em;
θέση-φόντο: 5% 100px;
δρομέας: αλλαγή μεγέθους
ακτίνα περιγράμματος: 1px 2px;
}

Τα παραπάνω θα μετατραπούν στα ακόλουθα:

.παράδειγμα {
επιπλέουν: δεξιά;
text-align: δεξιά;
επένδυση: 1px 4px 3px 2px;
margin-right: 1εμ.
θέση-φόντο: 95% 100px;
δρομέας: nw-resize;
ακτίνα περιγράμματος: 2px 1px;
}

Σημειώστε ότι οι διαφορές περιλαμβάνουν όχι μόνο γραμμές όπως float: αριστερά και κείμενο-ευθυγράμμιση: αριστερά, αλλά άλλες όπως οριζόντιες δηλώσεις γεμίσματος και τιμές θέσης φόντου.

Και χρήσιμο, αν θέλετε το εργαλείο να αγνοήσει ένα μπλοκ στυλ ή μια μόνο δήλωση, μπορείτε να χρησιμοποιήσετε την οδηγία @noflip:

/ * @noflip * / .ignored {
float: αριστερά
}

.δεν αγνοείται {
float: αριστερά
/ * @noflip * / φόντο: #fff (poster-ltr.png);
}

Χρώμα κλέφτης

Εργαλεία Front-End: Color Thief

Το Color Thief είναι πραγματικά καθαρό και αρκετά απλό στη χρήση, αλλά είναι πολύ συγκεκριμένο στις περιπτώσεις χρήσης του.

Βασικά, χρησιμοποιώντας αυτό το βοηθητικό πρόγραμμα, μπορείτε να χρησιμοποιήσετε το JavaScript για να τραβήξετε μια παλέτα χρωμάτων οπουδήποτε από 2 έως 20 χρώματα με βάση μια δεδομένη εικόνα.

Δεν πρόκειται για κάτι που θα χρησιμοποιείτε σε κάθε ιστότοπο ή εφαρμογή, αλλά είναι μια ωραία ιδέα και προφανώς υπάρχει εδώ και λίγο και ενημερώθηκε τον τελευταίο χρόνο.

Χρησιμοποιώντας το απλό API, μπορείτε να τραβήξετε μια παλέτα από την εικόνα με μία μόνο γραμμή:

αφήστε το myPalette = colorThief.getPalette (img, 10);

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

myPalette.forEach (
στοιχείο => colors.innerHTML + = ""
)

Δημιουργώ την παλέτα χρησιμοποιώντας στοιχεία και ενσωματωμένα στυλ. Τα χρώματα επιστρέφονται ως τιμές RGB.

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

RegexGuide

Εργαλεία διεπαφής: RegexGuide

Φαίνεται ότι κάθε χρόνο βρίσκω μια δροσερή διαδραστική εφαρμογή για να προσθέσω στη συλλογή μου εργαλείων front-end που βοηθά στη δημιουργία τακτικών εκφράσεων, οπότε εδώ είναι η καταχώρηση του τρέχοντος έτους. Και αν είστε σαν εμένα, θα λάβετε όλη τη βοήθεια που μπορείτε να δημιουργήσετε.

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

Όταν τελειώσετε και έχετε εφαρμόσει όλες τις προϋποθέσεις, μπορείτε να δοκιμάσετε διαφορετικές τιμές για να ικανοποιήσετε τις καθορισμένες συνθήκες και η σελίδα θα δείξει διαδραστικά τι λειτουργεί.

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

Εργαλεία front-end: έντιμες αναφορές

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

  • wehatecaptchas – Μια εναλλακτική λύση captcha χωρίς αποκρυπτογράφηση εικόνας ή γραμμάτων / αριθμών, ούτε καν πλαίσιο ελέγχου "επιβεβαιώστε ότι δεν είμαι ρομπότ"
  • simpleParallax – Ένας εύκολος τρόπος για να κάνετε παράλληλα εφέ με JavaScript.
  • Lite YouTube Ενσωμάτωση – Προφανώς 224Χ γρηγορότερα από τον παραδοσιακό κώδικα ενσωμάτωσης.
  • Προεπιλεγμένα στυλ προγράμματος περιήγησης – Εισαγάγετε οποιοδήποτε στοιχείο HTML και αυτό το εργαλείο θα σας πει το προεπιλεγμένο CSS του προγράμματος περιήγησης για αυτό το στοιχείο.
  • Ποιος μπορεί να χρησιμοποιήσει – Εισαγάγετε έναν συνδυασμό δύο χρωμάτων και αυτό το εργαλείο θα σας πει ποια είδη χρηστών με προβλήματα όρασης μπορούν να χρησιμοποιήσουν αυτό το συνδυασμό για κείμενο / φόντο.

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Διάταξη και παρουσίαση από τον Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map