Νέοι πόροι για σχεδιαστές ιστοσελίδων και προγραμματιστές (Οκτώβριος 2018)

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

Έτσι, εδώ είναι μια λίστα με τα πιο πρόσφατα εργαλεία και πόρους, συμπεριλαμβανομένου ενός πλαισίου PHP για την εύκολη εκτέλεση Δοκιμή E2E για την εφαρμογή PHP, ένα εργαλείο για την παραγωγή χρωμάτων που συμμορφώνονται με τα πρότυπα προσβασιμότητας του W3C και μερικές επεκτάσεις Vue.js. Ας πηδήσουμε για να δείτε την πλήρη λίστα.

Εφαρμογές βασικών καρέ

Μια web-based εφαρμογή παρέχοντας ένα ωραίο γραφικό περιβάλλον για να συνθέσετε animation CSS και να απεικονίσει το κινούμενο σχέδιο με μια χρονολογική σειρά. Η εφαρμογή σας επιτρέπει επίσης να κατεβάσετε την έξοδο CSS μόλις είστε ικανοποιημένοι. CSS keyframes δεν είναι το ευκολότερο spec στο CSS, οπότε η κατοχή μιας εφαρμογής όπως αυτή θα είναι σίγουρα ένας timeaver.

Symfony Panther

“Symfony Panther” είναι ένα εκπληκτικό πλαίσιο PHP από τη Symfony για την εκτέλεση του E2E (End-to-End) τεστ. Έρχεται με το δικό του ενσωματωμένο διακομιστή ιστού και θα μπορούσατε να χρησιμοποιήσετε το Chrome που είναι εγκατεστημένο στον υπολογιστή σας για να εκτελέσετε τη δοκιμή E2E.

Επιπλέον, υποστηρίζει Εκτελέσεις JavaScript, συλλογή στιγμιότυπων, προσαρμοσμένο πρόγραμμα οδήγησης Selenium, Chrome και πελάτη του Firefox. Όντας ένα αυτόνομο πλαίσιο, μπορείτε να συμπεριλάβετε τον Panther σε οποιοδήποτε πρόγραμμα PHP, όπως για παράδειγμα το WordPress, το Joomla, κ.λπ..

TrendyPalettes

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

Eagle.js

Το Eagle.js είναι ένα πλαίσιο για τη δημιουργία διαφανειών που έχουν δημιουργηθεί πάνω από το Vue.js, ώστε να μπορείτε εύκολα να επαναχρησιμοποιήσετε προσαρμοσμένα συστατικά Vue.js μέσα στις διαφάνειες. Η ολίσθηση υποστηρίζει επίσης πλοήγηση με πληκτρολόγιο και ποντίκι, προσαρμοσμένο στυλ ή θέμα, interactive widgets και παρέχει ένα boilerplate για να σας βοηθήσει να ρυθμίσετε και να παρουσιάσετε γρήγορα το slide. Μπορεί να είναι μια μεγάλη εναλλακτική λύση για το Reveal.js, ειδικά αν είστε εξοικειωμένοι με το Vue.js.

Grape.js

Το GrapeJS είναι ένα web builder ανοιχτού κώδικα που σας επιτρέπει να δημιουργείτε ιστοσελίδες απλά μεταφορά και απόθεση στοιχείων. Παρέχει μερικά κοινά συστατικά όπως Text, Image, Vidoe, Columns, Map, Quote κ.λπ. Μπορείτε να το εξάγετε σε HTML και CSS και η έξοδος είναι εκπληκτικά καθαρή, σε αντίθεση με κάποια παρόμοια εργαλεία που δοκιμάσαμε πριν. Δείτε το demo.

Ανούσιος

Το Vapid είναι ένα νέο CMS που χτίστηκε με το Node.js με μια ενδιαφέρουσα και μοναδική προσέγγιση. Τα περισσότερα CMS, αν υποθέσετε ότι θα θέλατε να συμπεριλάβετε ένα νέο τύπο δεδομένων, θα απαιτήσουν πρώτα να ορίσετε την προσαρμοσμένη είσοδο στην περιοχή Dashboard / Admin.

Με το Vapid, είναι το αντίθετο όπως μπορείτε να ορίσετε το πρότυπο και το Vapid θα δημιουργήσει αυτόματα την είσοδο στην περιοχή Dashboard / Admin. Διατίθεται ως πακέτο NPM.

WP CLI Notification

Το όνομα τα λέει όλα. Πρόκειται για ένα προσαρμοσμένο πακέτο WP-CLI για την εμφάνιση ειδοποιήσεων λειτουργικού συστήματος όταν το WP-CLI έχει ήδη εκτελεστεί. Αρκετά φανταχτερό.

CSSGr.id

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

Μεταβείτε στη Συμβουλή

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

PristineJS

Μια βιβλιοθήκη JavaScript για να προσθέσετε επικύρωση σε μια είσοδο. Το HTML5 έρχεται με κάποια επικύρωση τύπου ήδη με το “type = email”, και “type = αριθμός” για παράδειγμα. Αλλά αν χρειάζεστε ένα προσαρμοσμένη επικύρωση που δεν έχει υλοποιηθεί σε HTML5, αυτή η βιβλιοθήκη JavaScript θα έρθει χρήσιμη.

ΕπιλογήJS

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

Webdash

Το Webdash είναι ένα εργαλείο που μπορεί εμφάνιση του έργου σας σε περιβάλλον GUI. Συνδέεται μέσω του package.json αρχείου στον υπολογιστή σας. Έτσι μπορεί να εμφανίσει τη λίστα του Πακέτα NPM, ενημερώστε το πακέτο, τα καταχωρημένα σενάρια, εκτελέστε το σενάριο, και προεπισκόπηση των αρχείων README απευθείας από το Webdash. Πολύ φοβερό!

CanJS

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

CheerioJS

Μια βιβλιοθήκη JavaScript που υλοποιεί την προδιαγραφή πυρήνα jQuery για το DOM (Μοντέλο αντικειμένου εγγράφου) και είναι σχεδιασμένη για χρήση από την πλευρά του διακομιστή. Αν είσαι που εργάζονται με το Node.js ενώ απολαμβάνουν και σύνταξη jQuery σαν addClass (), attr (), και εύρημα(), αυτό είναι το JavaScript που ψάχνετε.

Colorbox

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

Πληκτρολογήθηκαν ιδιότητες στην PHP 7.4

Το PHP7.3 βρίσκεται πολύ κοντά, όπως αναφέρθηκε στην προηγούμενη δόση. Αλλά το PHP7.4 είναι ήδη στο Σχέδιο. Ένα από τα σχέδια είναι το Typed Property. Αυτό σημαίνει ότι σύντομα θα είστε σε θέση να γράψτε κάτι σαν δημόσιο int $ id; στην τάξη PHP. Είναι μια τεράστια αλλαγή που θα μπορούσε να βοηθήσει σημαντικά στη μείωση των σφαλμάτων εφαρμογών PHP.

Μεμβράνη πολυγράφου

Ένας μεταγλωττιστής JavaScript που σας διευκολύνει να δημιουργήσετε Web Components με τα πιο πρόσφατα πρότυπα. Εκτός από αυτό, StencilJS προσθέτει επίσης κάποια σύγχρονη προσέγγιση ανάπτυξης ιστοσελίδων στο μίγμα συμπεριλαμβανομένων Υποστήριξη JSX, αντιδραστικότητα, δρομολογητή και κρατική διαχείριση χρησιμοποιώντας ένα plugin.

Vue Infinite Φόρτωση

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

V Πρόχειρο

Μια προσαρμοσμένη επέκταση Vue.js που το κάνει αυτό εύκολο να δημιουργήσετε ένα “αντίγραφο” κουμπί. Μπορείτε απλά να προσθέσετε ένα v-πρόχειρο αποδίδετε σε ένα κουμπί και όλοι είστε έτοιμοι. Αυτή η επέκταση Vue.js λειτουργεί για κάθε σύγχρονο πρόγραμμα περιήγησης καθώς και για το IE11 και το τελευταίο.

Vue Select

Ένα στοιχείο Vue.js που παρέχει παρόμοια λειτουργικότητα με το Select2. Έχει σχεδιαστεί για Vue.js που επιτρέπει να είναι συμβατό με Vuex, Custom Templating, και ένα σωρό άλλα Vue.js καλοσύνη.