Ανανέωσα το blog μου

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

Πρώτα από όλα, για το layout, έφυγα από το Bootstrap που χρησιμοποιώ εδώ και πολλά χρόνια, και πήγα στο tailwindcss. Δυσκολέυτηκα στην αρχή (δεν είναι και ο τομέας μου), αλλά τα κατάφερα και νομίζω ότι το tailwindcss μου ταιριάζει καλύτερα.

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

Μετά, δοκιμάζοντας το layout στο iPhone12 mini (που αντικατέστησε επιτέλους το iPhone 6s μετά από 5 χρόνια) ανακάλυψα ότι το μικρό "notch" που πρωτοεμφανίστηκε στο iPhone X μου "χαλούσε" το layout σε portrait γιατί έκανε τα div που θα έπρεπε να έχουν πλάτος 100% λίγο μικρότερα ώστε να μην καλύπτονται από το notch. Αλλά στην δική μου περίπτωση, το notch δεν καλύπτει το κείμενο, αλλά απλά το περιθώριο που υπάρχει αριστερά-δεξιά.

Οπότε ψάξιμο κι εκεί, για να καταλάβω ότι χρειάζεται viewport-fit=cover στο viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

και στο CSS των σχετικών div

padding: env(safe-area-inset);

Το css-tricks τα λέει αρκετά λεπτομερώς.

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

Το bucket3 το χρησιμοποιώ εδώ και 8 χρόνια πλέον κι έχει εξελιχθεί σε πολύ καλό εργαλέιο για static blogging, με features που δεν έχουν άλλα παρόμοια εργαλεία, αλλά χρειάζεται να επικαιροποιήσω το documentation γιατί όπως είναι, αν πάει να το χρησιμοποιήσει κάποιος απλά θα χαθεί και θα το παρατήσει...

Μετά θυμήθηκα ότι θέλω εδώ και χρόνια να βάλω ένα search στο blog μου που να μην βασίζεται στο google. Τα κατάφερα με το lunr.js, αλλά χρειάστηκε να φτιάξω ελληνικό stemmer, να προσθέσω stopwords σε κάτι nodejs πακέτα που χρησιμοποιεί κ.λ. Μου παίζει ΟΚ locally, αλλά θέλει λίγο optimization για να το ανεβάσω κι εδώ. Την επόμενη φορά που θα ασχοληθώ :-)

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

Ευτυχώς βρήκα τα Wordpress XML exports που είχα κάνει για το vrypan.net/weblog και το vrypan.net/log πριν από 9 χρόνια. Και μετά έφαγα δύο μέρες προσπαθώντας να γράψω έναν parser που να πάρει αυτά τα XML και να τα κάνει bucket3 posts.

Σε αυτή την διαδικασία συνειδητοποίησα (ξανά) πως οτιδήποτε κάνεις embed στις σελίδες σου, το πιθανότερο είναι πως δεν θα παίζει σε Χ χρόνια (1, 2, 5, 10; Έχω posts από το 2003). Οπότε φρόντισα, όπου ήταν εύκολο, ο parser μου να κατεβάζει locally τουλάχιστον τις φωτογραφίες και να αντικαθιστά με την "local" version στα posts.

Και με αυτά και με αυτά (και άλλα που τα έχω ξεχάσει), η ανανέωση του blog.vrypan.net μου πήρε μία γεμάτη βδομάδα :-)

Βάζω κι ένα screenshot, γιατί κάποια στιγμή στο μέλλον θα διαβάζω το post αυτό και δεν θα θυμάμαι πως έμοιαζε το redesign.