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

Αυτό το μήνα το Fresh Resouces θα είναι λίγο διαφορετικό από τους προηγούμενους μήνες. Εμείς, web developers, ζούμε σε μια ταχέως μεταβαλλόμενη βιομηχανία και έχω δει πολλές ανακοινώσεις από μερικές από τις μεγαλύτερες εταιρείες τεχνολογίας όπως το Google, η Microsoft, το Firefox και η PHP, κάτι που θα αλλάξει τον τρόπο που χτίζουμε ο ιστός.

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

Βασική βελτιστοποίηση εικόνας

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

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

PHP 7.2

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

Στην PHP 7.2, υπάρχουν δύο λειτουργίες που πρόκειται να αποσυρθούν, συγκεκριμένα create_function () και __autoload (). Αν είστε web developer, ελέγξτε τον κωδικό σας και πραγματοποιήστε τις απαραίτητες αλλαγές. Έχω δει πολλά πρόσθετα WordPress που χρησιμοποιούν ακόμα αυτές τις δύο λειτουργίες.

API κοινής χρήσης ιστού

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

Αυτό το API διατίθεται προς το παρόν μόνο στο Google Chrome για επιφάνεια εργασίας και στο Android. Δείτε αυτό το βίντεο στο Youtube για να το δείτε σε δράση.

Χαρακτηριστικό Async εικόνας

Ένα άλλο πράγμα που θα φέρει επανάσταση στον ιστό είναι το async χαρακτηριστικό για το στοιχείο img. Τη στιγμή της συγγραφής, υπάρχουν μερικές προσεγγίσεις φορτώστε ασύγχρονα την εικόνα που περιλαμβάνει ένα μικρό τέχνασμα της JavaScript. Σύντομα θα μπορέσουμε να προσθέσουμε async = ενεργοποιημένη πάνω στο img στοιχείο.

Firefox Quantum

Το Mozilla ώθησε επιθετικά τις ενημερώσεις στον Firefox με κάποιες βελτιώσεις, με κωδικό όνομα “Project Quantum”. Περιλαμβάνει το Quantum CSS - μια νέα μηχανή για εξαιρετικά γρήγορη απόδοση CSS, νέο περιβάλλον χρήστη και νέα DevTools.

Η απελευθέρωση είναι κερδίζοντας έλξη σε προγραμματιστές ιστού και μερικοί έχουν ήδη αλλάξει το κύριο πρόγραμμα περιήγησης στο Firefox. Υπάρχουν περισσότερα για να έρθουν σε αυτό το έργο, συμπεριλαμβανομένου του Quantum DOM και του WebRender. Θα δούμε τον υποψήφιο Node.js που βασίζεται στον κινητήρα Firefox Quantum; Λοιπόν, ίσως ναι.

MS Edge για iOS και Android

Η Microsoft μόλις ανακοίνωσε κυκλοφορεί το τελευταίο του πρόγραμμα περιήγησης, Edge, στο iOS και το Android. Αυτό σημαίνει ότι υπάρχει ένα ακόμη πρόγραμμα περιήγησης για τους ιστοτόπους σας για να δοκιμάσετε.

Gutenberg

Το WordPress βρίσκεται επί του παρόντος σε ένα φιλόδοξο έργο, το οποίο ονομάζεται Gutenberg. Ο Gutenberg είναι α facelift στον επεξεργαστή WordPress κατασκευασμένο σχεδόν εξ ολοκλήρου με το JavaScript.

Σε αυτό το σημείο, Gutenberg είναι με React αλλά το έργο εξετάζει ένα άλλο πλαίσιο όπως το Preact, το Vue ή κάτι άλλο. Είναι μια περίπλοκη κατάσταση για τώρα. Έτσι, για τους προγραμματιστές του WordPress που δημιουργούν θέματα και plugins, κρατήστε τα μάτια σας στο έργο ως θα αλλάξει τον τρόπο που κατασκευάζουμε WordPress για πάντα.

FoitFout

Το FoitFout είναι ένα εύχρηστο εργαλείο για να συγκρίνετε δύο διαφορετικές προσεγγίσεις που ονομάζονται FOIT και FOUT φορτώστε προσαρμοσμένες γραμματοσειρές στον ιστό. Με αυτό το εργαλείο, είστε σε θέση να μιμηθούν τις δύο προσεγγίσεις και να αποφασίσετε ποια προσέγγιση είναι η καλύτερη εφαρμογή για τον ιστότοπό σας.

Vuera

Η Vuera είναι α Βιβλιοθήκη JavaScript που σας επιτρέπει να χρησιμοποιήσετε μαζί Vue και React. Μπορείτε να συμπεριλάβετε ένα στοιχείο Vue από ένα .vue ή να χρησιμοποιήσετε ένα στοιχείο React στη Vue. Η ομάδα σας μπορεί τώρα να είναι πιο παραγωγικό με οποιοδήποτε πλαίσιο που προτιμούν να χρησιμοποιούν.

Συνδεσιμότητα

“Συνδεσιμότητα” είναι φανταστική βιβλιοθήκη από το Shopify. Είναι χτισμένο πάνω από το εγγενές πρόγραμμα περιήγησης Drag-n-Drop API και σας επιτρέπει να χρησιμοποιήσετε ένα εκτεταμένο API. Σε περίπτωση που δεν παρέχει κάτι που χρειάζεστε, μπορείτε να γράψετε ένα προσαρμοσμένη ενότητα για να επεκτείνει τις λειτουργίες της. Δείτε το demo για να δείτε πώς λειτουργεί.

FlowchartJS

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

QuickBill

Ένα ελαφρύ και απλή εφαρμογή Ιστού για τη δημιουργία τιμολογίου. Χρησιμοποιεί τις εγγενείς τεχνολογίες του προγράμματος περιήγησης και τα API για να εκτελούνται, επομένως δεν απαιτείται λογαριασμός. Απλά πηγαίνετε στον ιστότοπο, προσθέστε τα στοιχεία στο τιμολόγιο και δημιουργήστε το αρχείο PDF. Αυτό είναι!

Mocka

Το Mocka είναι α περιεχομένου που μπορείτε να χρησιμοποιήσετε για την δημιουργία πρωτοτύπων στον ιστότοπο. Είναι μόνο 500 bytes και είναι πλήρως προσαρμόσιμο. Μπορείτε να το συμπεριλάβετε εύκολα στο αρχείο CSS του έργου σας χρησιμοποιώντας το mixin Sass.

ο Το CSS παρέχει μια σειρά κλάσεων συμπεριλαμβανομένου mocka-media για να δημιουργήσετε ένα σύμβολο κράτησης θέσης εικόνας, mocka-heading για να δημιουργήσετε έναν τίτλο, και mocka-κείμενο για να δημιουργήσετε ένα αυθαίρετο κείμενο.

VueStar

Το VueStar είναι α Vue για να προσθέσετε ένα αφρώδες αποτέλεσμα όταν κάνετε κλικ σε ένα εικονίδιο, παρόμοια με αυτά που κάνει το Twitter με το “καρδιά” στο κινητό τους app. Το στοιχείο εισάγει ένα νέο στοιχείο που ονομάζεται vue-star όπου μπορείτε να το προσθέσετε στην εποχή του διαδικτύου. Και τελειώσατε!

Παιδική χαρά του πλέγματος

Το CSS Grid εισάγει μια νέα ιδέα στο διαδίκτυο για να χτίσει μια διάταξη και είναι κάπως περίπλοκο με την πρώτη ματιά, δεδομένων των πολυάριθμων νέων ακινήτων που διαθέτει.

Το GridPlayground είναι βασικά a Πρωτοβουλία Mozilla για να διδάξει το CSS Grid και να προωθήσει την υιοθέτηση του CSS Grid. Ακόμη και ο Firefox φέρνει ένα νέο εργαλείο στο DevTools για να επιθεωρήσει τη διάταξη του πλέγματος.

Διαχειριστής αποσπασμάτων

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

Διασύνδεση καρτελών

Ένα υπέροχο walk-through για την κατασκευή προοδευτικής και προσβάσιμης πλοήγησης καρτελών με ελάχιστη χρήση JavaScript. Μια μεγάλη πηγή για όσους θέλουν να μάθουν περισσότερα για το προσβάσιμο σχέδιο.

SwissInCSS

Το SwissInCSS εκθέτει μερικά από τα κλασσικά ελβετικά σχέδια αφίσας που δεν χρησιμοποιούν καθόλου CSS. Ο πηγαίος κώδικας είναι διαθέσιμος στο CodePen.