Έλυσα ένα πρόβλημα δεκαετίας. Συμβατότητα με παλιούς browsers. Άρθρο για συναδέλφους.

Post 2189 Photo

Πως συνεχίζεις να δημιουργείς απερίσπαστος στην αιχμή της τεχνολογίας ενώ ταυτόχρονα η δουλειά σου φαίνεται μια χαρά και σε παλιούς υπολογιστές με κάποιον αρχαίο περιηγητή;

Προφανώς και αναφέρομαι στη δημιουργία ενός CMS ή τη δημιουργία ενός σχεδιαστικού.

Σε ότι αφορά τον κώδικα του πυρήνα του συστήματος δεν υπάρχει πρόβλημα αν χρησιμοποιείς οτιδήποτε εκτελείται στο διακομιστή. Χρησιμοποιώ PHP εδώ και πολλά χρόνια. Τουλάχιστον σε ό,τι αφορά τον κώδικα HTML που δημιουργεί είμαι σίγουρος τι φτάνει στο χρήστη. Δεν εξαρτάται από το χρήστη αλλά το διακομιστή.

Το πρόβλημα υπάρχει στην απεικόνιση και για την ακρίβεια στο CSS. Εκεί ακριβώς αρχίζει η φρίκη. Από που να το πιάσεις.

Υπάρχουν διάφορες "λύσεις" που τουλάχιστον για μένα δεν αποτελούν λύσεις.

Ανίχνευση μέσω PHP

Θα αναφέρω πρώτη την πιο χαζή. Να προσπαθήσεις να δεις μέσω PHP τι browser έχει ο χρήστης. Πρώτα από όλα δεν μπορεί πάντα να δεις μέσω PHP τι browser έχει. Ακόμα και αν τα καταφέρεις οι browsers παρουσιάζονται με μια συμβολοσειρά-σαβούρα η οποία είναι από αναξιόπιστη έως άχρηστη. Πάει αυτό.

CSS Prefixes

Η δεύτερη λύση είναι να χρησιμοποιήσεις CSS prefixes. Απλό είναι Τομ. Απλά κάνεις τα αρχεία των CSS διπλάσια και τα πλακώνεις στα prefixes. Υπάρχουν μια χαρά autoprefixers που κάνουν αυτή τη δουλειά. Η αλήθεια είναι ότι τα prefixes τουλάχιστον για τη δική μου περίπτωση είναι άχρηστα. Ας το διαλευκάνω. Ας πούμε ότι η σελίδα σου χρησιμοποιεί παντού CSS Grid ή Flexbox και ο browser δεν υποστηρίζει τίποτε από τα δυο. Τα prefixes σε αυτή την περίπτωση είναι άχρηστα. Αν δεν υποστηρίζει καθόλου την τεχνολογία τότε η σελίδα φαίνεται εντελώς χάλια. Από την άλλη όλοι οι μοντέρνοι περιηγητές αναγκάζονται να διαβάσουν όλη αυτή τη σαβούρα με τα prefixes και στο τέλος να τα αγνοήσουν. Τα αρχεία CSS όμως πρέπει να κατεβούν ολόκληρα πρώτα πριν συμβεί αυτό.

@supports

Ναι οι σχετικά σύγχρονοι browsers επιτρέπουν τη χρήση @supports queries. Τι να το κάνω αυτό. Εμένα με ενδιαφέρουν οι παλιοί browsers. Τι κάνει ο browser αν δεν καταλαβαίνει τα @supports; Τα αγνοεί. Μπορείς να χρησιμοποιήσεις ακριβώς αυτό το "αγνοεί" για να κάνεις τη δουλειά σου. Ο κώδικας που παράγεται με αυτή τη μέθοδο δεν μου αρέσει. Δημιουργεί δομές μπουρδέλα. Αν το υποστηρίζει, αν το αγνοεί, αν το υποστηρίζει και δεν το αγνοεί. Τρέχα γύρευε. Σκοπός είναι να έχεις καθαρά αρχεία CSS για το 90% των ανθρώπων που έχουν κάπως σύγχρονο browser.

Σελίδα με αισθητική δεκαετίας του 90

Μια λύση που χρησιμοποιούν πολλοί. Χρησιμοποιείς μόνο εντολές που υπάρχουν εδώ και 10-15 χρόνια. Με αυτόν το τρόπο προφανώς εκτελούνται από παλιούς περιηγητές. Συγνώμη αλλά δεν μπορώ να γράφω κώδικα με αποτέλεσμα Σάκη Ρουβά με χαίτη. Έγραψα υπερβολικά πολύ από αυτό και βασανίστηκα ατελείωτες ώρες να κάνω τις γαμωσελίδες εκείνης της εποχής να δουλεύουν κάπως σωστά. Αγαπώ την τεχνολογία και μόλις βγει κάτι θέλω να δω πως δουλεύει και αν γίνεται να το χρησιμοποιήσω αμέσως.

Η λύση που χρησιμοποίησα στο VerdinCMS

Την ιδέα μου την έδωσε ένας Ρώσος προγραμματιστής. Έγραφε στην περιγραφή του Project του που δείχνει να απαίτησε τεράστια δουλειά να μην το χρησιμοποιήσω γιατί είναι παντελώς άχρηστο (!) και να ασχοληθώ με feature detections. Ανάγνωση λειτουργιών που υποστηρίζει ο browser ασχέτως ποια μηχανή χρησιμοποιεί. Είναι και το πιο λογικό. Δες αν το υποστηρίζει, αν όχι κάνε κάτι άλλο.

Πήγα λοιπόν στη σελίδα του https://modernizr.com/. Όχι δεν κατέβασα όλο το παραμύθι. Σου δίνει τη δυνατότητα να δημιουργήσεις ένα JS που σκανάρει μόνο για αυτό που θέλεις. Το δικό μου είναι 4,72KB και συμπιεσμένο 2,26KB (έτσι ταξιδεύει από τον Server). Επιβαρύνει το χρόνο της σελίδας κατά.. 0. Επέλεξα μόνο το σκανάρισμα CSS Grid.

Η σελίδα μου χρησιμοποιεί CSS Grid παντού. Μπορείς να κάνεις θαύματα με αυτό. Ιδίως στη διαχείριση που είναι πιο πολύπλοκη. Άρα αν ο χρήστης των σελίδων μου δεν έχει CSS Grid την έβαψε. Η σελίδα παρουσιάζεται σκουπίδια.

Αποφάσισα να ψάχνω για αυτό. Μόνο για αυτό. Υποστήριξη CSS Grid έχουν οι περιηγητές από το 2017. Άρα έτσι απλά αυθαίρετα ό,τι δεν υποστηρίζει Grid το βαφτίζω Legacy. Τι κάνω μόλις το modernizr μου πει ότι δεν υποστηρίζει Grid; Αντικαθιστώ τη διεύθυνση του κεντρικού style.css με ένα άλλο με το όνομα legacy.css. Αλλάζω το href δηλαδή εντελώς μέσω κλασικής Javascript. Δεν υπάρχει πια το style.css.

if (!Modernizr.cssgrid) {
    var baseUrl = document.getElementById('logo').href;
    document.getElementById('css-style').href = baseUrl + "content/theme/legacy.min.css?v=6.00";
}

Στο legacy.css απαγόρευσα στον εαυτό μου να χρησιμοποιήσει οποιαδήποτε σύγχρονη εντολή CSS.  Χρησιμοποιώ δηλαδή floats, inline-blocks και αποφεύγω margins διότι οι παλιοί περιηγητές βγάζουν σπυριά με αυτό (IE double margin bug). Δεν χρησιμοποιώ rgba() χρώματα και γενικά οτιδήποτε περίεργο. Με τον τρόπο αυτό η σελίδα λειτουργεί και έχει σχετικά κανονική εμφάνιση. Προφανώς δεν ήθελα να είναι γαμώ τις σελίδες σε παλιούς περιηγητές. Ήθελα να δουλεύει και να μοιάζει κάπως επαγγελματικό το αποτέλεσμα. Το έκανα λοιπόν και η σελίδα που βρίσκεται μπροστά σας ήδη δουλεύει έτσι.

Το δοκίμασα σε διάφορες εικονικές μηχανές που έχω και δουλεύει άριστα. Το modernizr δεν χρησιμοποιεί JS ES6 οπότε εκτελείται και σε αρχαιολογίες. Καλή φάση.

Ναι, αν ο χρήστης έχει αρχαίο υπολογιστή και έχει απενεργοποιήσει και τα Scripts έχασε. Τι να κάνουμε. Συνήθως όμως δεν είναι έτσι.

Αυτά φίλοι μου. Εύχομαι να βοήθησα κάποιον συνάδελφο.

Δείτε περισσότερα..

Ήρθε το μη τριχωτό πληκτρολόγιο και γράφω πια με 10 δάχτυλα

Παλεύω εδώ και μήνες να παραλάβω ένα πληκτρολόγιο για να γράφω άρθρα στο iPad. Μετά από αρκετή ταλαιπωρία και δυσκολία στην εξεύρεση διαθέσιμου στοκ παρέλαβα το Logitech MX Mechanical Mini.

Χρειαζόμαστε ένα νέο λειτουργικό σύστημα για κινητά βασισμένο σε Unix

To Linux δεν είναι Unix. Μα θα μου πείτε τι είναι το Unix; Δεν το έχω ακούσει ποτέ και δεν το έχω χρησιμοποιήσει ποτέ. Αν είσαι κάτοχος iPhone ήδη χρησιμοποιείς Unix καθημερινά απλά δεν το ξέρεις!

Ήρθε το τριχωτό μου πληκτρολόγιο με κολπικά υγρά

Κόντεψα να τα βγάλω πρωινιάτικο. Το πληκτρολόγιο ήρθε χθες αλλά ήμουν υπερβολικά κουρασμένος για να το ανοίξω. Το άνοιξα σήμερα το πρωί. Τι το ήθελα.

Τι κοινό έχει το tomsnews με τον MKBHD; Το νέο μου πληκτρολόγιο

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

Ψάχνω ένα μικρό ασύρματο μηχανικό πληκτρολόγιο για να γράφω άρθρα στο iPad και δεν βρίσκω

Ζω ένα δράμα. Δεν φτάνει που έχω 9 δάχτυλα (βλ. προηγούμενο άρθρο) αλλά δεν βρίσκω και ένα ασύρματο μηχανικό πληκτρολόγιο να σας γράφω άρθρα με το iPad στον καναπέ.

Ηλεκτρικά αυτοκίνητα υπάρχουν από το 1900! Γιατί όμως δεν μπορούν να αντικαταστήσουν τους κινητήρες εσωτερικής καύσης;

O Jay Leno έκανε ένα βίντεο πριν 9 χρόνια για το «Bakers Electric Car» που έχει στη συλλογή του, κατασκευής του 1909! Πουλήθηκαν τότε 15.000 τεμάχια. Η ιδέα του ηλεκτρικού αυτοκινήτου υπάρχει στην πράξη εδώ και 120 χρόνια. Γιατί δεν λειτουργεί όμως;

Το tomsnews τώρα διαθέτει και Light Mode!

Το tomsnews σέβεται τους ανθρώπους με προβλήματα όρασης και χρήστες με παλιές οθόνες που δυστυχώς δεν μπορούν να απεικονίσουν καλά σελίδες σε Dark Mode.

Apple Safari: ο νέος Internet Explorer

Δεν προλάβαμε να χαρούμε τον ψόφο του Internet Explorer που πήγε το διαδίκτυο τουλάχιστον μια δεκαετία πίσω.. τώρα έχουμε νέο μπελά όταν γράφουμε κώδικα: το Safari.

Το κίνημα είχε απόλυτη επιτυχία. Η Βίκυ μας γράφει ξανά!

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

Το ξεφτέλισα λίγο στα animations και τα εφέ στη σελίδα. Ζητώ συγνώμη από τους φίλους αναγνώστες

Σήμερα είχε αρκετή ζέστη για Γερμανία. Οι ψύκτρες του κώλου που έχει το κατά τα άλλα καλό μηχάνημα που έχω στη δουλειά, τα βρήκαν σκούρα. Κάπως έτσι άρχισε να κάνει Throttling (Περιορισμός) και είδα πως βλέπει τη σελίδα ένας άνθρωπος με υπολογιστή για τις κλωτσιές.

Δυο κανάλια από τα οποία ενημερώνομαι καθημερινά

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

Ξεκινάω τη δημιουργία νέου κινήματος: «Απαιτούμε τη Βίκυ μας να γράφει ξανά»

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

Η επανάσταση της «παντόφλας». Ο κόσμος πετάει τα «έξυπνα» κινητά από το παράθυρο και αγοράζει «παντόφλες»

Περισσότερα από 1 δισεκατομμύριο «παντόφλες» πουλήθηκαν πέρυσι. Ο κόσμος κουράστηκε από τα κοινωνικά δίκτυα και τη μετατροπή μιας πανάκριβης συσκευής σε εργαλείο παρακολούθησης και επιβολής της παγκόσμιας τυραννίας.

Συστημική σήψη - Τα lame media σήμερα

Τηλεόραση σταμάτησα να βλέπω εδώ και τουλάχιστον 15 χρόνια. Αυτό το κλασικό κατσίκωμα δηλαδή μπροστά στον κουβά για να σου πουν τα νέα (και να στα αναλύσουν γιατί «δεν τα καταλαβαίνεις μόνος σου εσύ αυτά»). Πέφτω όμως κατά καιρούς σε βιντεάκια των δελτίων ή μπαίνω στις σελίδες τους για να δω που το πάνε και ποιο είναι το τελευταίο αφήγημα που προσπαθούν να μας φυτέψουν στην γκλαβούνα.

Απογοητευμένος ιδιοκτήτης Tesla παίρνει και ρωτάει πόσο κάνει μια νέα μπαταρία. Όταν του λένε 20.000€ το ζώνει με 30 κιλά δυναμίτη και το ανατινάζει (απίστευτο βίντεο)

Το αυτοκίνητο όπως δηλώνει ο συνονόματος Τομ πήγε μια χαρά για 1.500km. Μετά η μπαταρία άρχισε να του κάνει ιστορίες. Αποφάσισε να ρωτήσει πόσο κάνει να την αλλάξει και του είπαν το αστρονομικό ποσό των 20.000€ και φρίκαρε. 

Το πρώτο Ελληνικό Blog στο οποίο θα αρθρογραφεί Τεχνητή Νοημοσύνη (AI)

Αυτό που θέλω από εσάς είναι να βρούμε ένα όνομα για αυτό. Στη σελίδα υπάρχουν προς το παρόν δυο αρθρογράφοι. Ο Τομ (η αφεντιά μου δηλαδή) και η Βίκυ που κάνει διάλλειμα. Στην παρέα θα προστεθεί τρίτος. Με τη διαφορά ότι θα είναι μηχανή. Στείλτε μου προτάσεις για όνομα στο tom@tomsnews.io. Θα είναι άντρας ή γυναίκα; Τι φύλο να του δώσω; Ηλικία;

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

Έχω συναντήσει προβλήματα που δεν περίμενα να δω με την ταπεινή μου σελίδα. Τώρα όμως τα έλυσα και το tomsnews είναι έτοιμο για ολόκληρες πόλεις.

Ο Οργανισμός Ηνωμένων Εθνών πλέον κατεβάζει σελίδες ιδιωτών! (βίντεο)

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

Μια ιδέα από την Ινδία για πρωτότυπη Χριστουγεννιάτικη λαμπάδα 5G

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

Αλήθεια από πότε εξελίσσω το VerdinCMS; Έχω κάτι απορίες Σαββατιάτικο. Το άρθρο που θα διαβάσουν 2 αναγνώστες

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

Ποια διανομή Linux να επιλέξω; Ερώτηση φίλου αναγνώστη

Ubuntu ή Linux Mint; Το Linux είναι ένας ολόκληρος νέος κόσμος ο οποίος δεν έχει καμία σχέση με τα Windows. Υπάρχουν διανομές που προσπαθούν να προσαρμόσουν την επιφάνειας εργασίας να μοιάζει με Windows αλλά αυτό είναι μόνο επιφανειακό.

Η σελίδα χρησιμοποιεί πλέον αποκλειστικά εικόνες .webp

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

Η σελίδα εκτελείται πια με PHP8!

Τα κατάφερα. Όλα μου τα Projects και οι Web Servers μου τρέχουν PHP8. Η διαφορά στην ταχύτητα είναι απλά εντυπωσιακή.

Η νέα έκδοση του tomsnews.social είναι εδώ για τους φίλους της σελίδας. Όχι δεν δίνω 150€ για την εγγραφή

Το κοινωνικό δίκτυο που έγραψα για τις δύσκολες εποχές που έρχονται  αποτελεί πραγματικότητα. Η δεύτερη έκδοση είναι πολύ πιο εύχρηστη. Έχουν περάσει μόλις 30 μέρες από τη στιγμή που ξεκίνησα τη συγγραφή του προγράμματος.

Το tomsnews.social αποτελεί πλέον πραγματικότητα! Δείτε το εισαγωγικό βίντεο

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

Βρήκα με τι θα ασχοληθώ στο επόμενο διάστημα: tomsnews.social. Ένα κοινωνικό δίκτυο εμπνευσμένο από το παλιό τουίτερ

Η λογοκρισία όσο περνά ο καιρός χειροτερεύει. Κάθε φορά που ποστάρεις κάτι στην big tech δεν ξέρεις αν την άλλη μέρα θα έχεις το λογαριασμό σου.

Έρχεται ο κορονοϊός του διαδικτύου. Ετοιμαστείτε για «λοκντάουν» στο Internet. Το Παγκόσμιο Οικονομικό Forum γλυκάθηκε

Οι προφητικές και μαντικές ικανότητες του Klaus Schwab ξεπερνούν πλέον αυτές του μαντείου των Δελφών. Μετά από κάποια μεγάλης κλίμακας επίθεση στο διαδίκτυο θα προταθούν «λοκντάουν» και «εμβόλια» για τον παγκόσμιο ιστό.

Μια χρήσιμη εφαρμογή για όλες τις πλατφόρμες για τον πόλεμο της πληροφορίας

Με τη λυσσαλέα λογοκρισία που βιώνουμε η εύρεση της πληροφορίας γίνεται ολοένα και πιο δύσκολη. Όταν τη βρούμε μετά είναι δύσκολο να θυμηθούμε που τη βρήκαμε. Το «τσεπάκι» με βοήθησε σημαντικά σε αυτό.

Έρχεται η άσκηση «Cyber Polygon» του Παγκόσμιου Οικονομικού Φόρουμ στις 9 Ιουλίου του 2021. Καλυφθείτε

Θυμάστε το «Event 201» που διοργάνωσαν όλα τα καλά παιδιά για την προσομοίωση μιας πανδημίας; Λίγους μήνες μετά μας ήρθε η πραγματική «πανδημία». Θα γίνει το ίδιο και τώρα με την άσκηση κυβερνοασφάλειας;

Ένα απίστευτο βίντεο που περίμενα 30 χρόνια για να δω

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