Νέοι πόροι για σχεδιαστές ιστοσελίδων και προγραμματιστές (Ιούνιος 2015)

Μπορείτε να πιστέψετε ότι αυτή η σειρά λειτουργεί εδώ και 3 χρόνια; Σε αυτό το σύντομο χρονικό διάστημα, έχουμε παρουσιάσει τουλάχιστον 30 καταλόγους των πιο φρέσκων πόρων για τους σχεδιαστές ιστοσελίδων και τους προγραμματιστές. Και θα το κρατήσουμε αυτό με μια νέα συλλογή για τον Ιούνιο.

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

Ας τα ελέγξουμε.

Επιβεβαίωση μεσαίου στυλ

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

πιγκουίνος

Το Penguin είναι ένα νέο front-end πλαίσιο που θα μπορούσατε να χρησιμοποιήσετε ως βάση των ιστοσελίδων σας. Με εργαλεία όπως το Grunt και το Sass, μπορείτε εύκολα να προσθέσετε ή να αφαιρέσετε βιβλιοθήκες ή CSS που δεν χρειάζεστε έξω από το πλαίσιο καθιστώντας το όσο το δυνατόν πιο ελαφρύ. Είναι επίσης μια καλή εναλλακτική λύση για το Bootstrap και το Ίδρυμα.

Elevator.js

Έχετε δει αυτό το κουμπί σε έναν ιστότοπο που σας επιτρέπει να σύρετε μέχρι το επάνω μέρος της σελίδας; Τα περισσότερα κουμπιά σας οδηγούν ακριβώς στην κορυφή, αλλά με το Elevator.js, παίρνετε ένα συρόμενο αποτέλεσμα επιτάχυνσης παρόμοιο με ένα ασανσέρ, τη μουσική και το “Κωδώνισμα!” όταν φτάσετε στον τελευταίο όροφο. Πραγματικά καλά!

X-Instagram

Το X-Instagram είναι ένα προσαρμοσμένο στοιχείο Polymer που τραβά και δείχνει εικόνες από το Instagram με ετικέτα. Αυτό το στοιχείο καθιστά όλη τη διαδικασία πολύ πιο εύκολη. Προσθέτουμε απλώς το στοιχείο ακριβώς όπως ένα κανονικό στοιχείο HTML και καθορίζουμε τη λέξη-κλειδί της ετικέτας ως χαρακτηριστικά στοιχείου.

Και ας αρχίσει η μαγεία!

CamanJS

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

ClusterizeJS

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

Τοποθετήστε τη Δοκιμή

Τοποθετήστε τη Δοκιμή είναι μια συλλογή ερωτήσεων για να αξιολογήσετε τις δεξιότητές σας και τις γνώσεις σας σχετικά με τα CSS3, HTML5 και JavaScript. Σε κάθε δοκιμή δίνεται μια σειρά ερωτήσεων και περιορισμένος χρόνος για να ολοκληρωθούν όλες αυτές οι ερωτήσεις. Είναι μια καλή πηγή για να μάθετε πόσο καλά είμαστε πραγματικά με αυτές τις γλώσσες.

HTML βέλη

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

Φλίψη

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

Typeslab

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

MatchMedia

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

Το παρακάτω είναι ένα παράδειγμα που χρησιμοποιείται για τη λειτουργία δέσμης ενεργειών σε ένα μέγεθος προβολής μεγέθους 320px και κάτω:

 εάν (matchMedia ('μόνο οθόνη και (max-width: 320px)') αντιστοιχεί)  

Sass Burger

Το Sass Burger έρχεται με ένα Mixin που σας επιτρέπει να δημιουργήσετε ένα “Χάμπουργκερ” και μετατρέψτε το σε μια διασταύρωση με λιγότερη ταλαιπωρία.

Μαρξ

Ο Marx είναι μια συλλογή κανόνων στυλ CSS για να κάνουν τα στυλ στοιχείων πιο συνεπή. Είναι προσαρμόσιμο (με Sass), ελαφρύ, και λειτουργεί έξω από το κουτί. Μια καλή εναλλακτική λύση στα ήδη δημοφιλή εργαλεία επαναφοράς CSS όπως το Normalize.css.

CSS.js

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