Simple CSS Concatenation

[randomcat]

Έτσι εξηγούνται κάποια πράγματα...

 

Λοιπόν, don't do it, είναι απλά λάθος. Τα filemtime() κλπ που κάνεις οδηγούν σε stat call το οποίο είναι, στα πλαίσια του πόσο θα μπορούσε να παίρνει να εξυπηρετηθεί ένα http request, πάρα πολύ "ακριβό". Φυσικά αν η σελίδα έχει μηδέν traffic δεν πρόκειται να δεις κάποια διαφορά αλλά τότε ο,τι κι αν κάνεις δε θα δείξει διαφορά. Ειδικά από τη στιγμή που αν ασχοληθείς λίγο με caching στο browser -- που θα έπρεπε ήδη να το έχεις κάνει, αλλιώς γιατί ασχολούμαστε με προσπάθειες για manual optimization ενώ δεν έχουμε χρησιμοποιήσει ακόμα τα έτοιμα εργαλεία -- ακόμα και χωρίς concatenation δε θα γίνονται τα πολλά HTTP requests που αναφέρεις σα πρόβλημα γιατί θα εξυπηρετούνται από την cache.

 

Concatenation κλπ έχουν νόημα μόνο αν ήδη χρησιμοποιείς caching, και πάντα η διαδικασία γίνεται απαραίτητα ξεχωριστά από τα http requests των επισκεπτών. Ναι, αυτό σημαίνει πως δε μπορείς να είσαι look ma no hands αλλά υπάρχει κάποιος λόγος που δεν το κάνει κανένας (τον ανέφερα παραπάνω).

Μην προτρέχεις, ρώτα πρώτα. Το πως έβγαλες συμπεράσματα για το τι κάνω με το θέμα του caching με ξεπερνάει.

 

Το έχω καλύψει το caching στοv browser στέλνοντας cache-control headers για caching και last modified για validation.

 

Επιπλέον προσπαθώ να χρησιμοποιώ την PHP OPCache όπου μπορώ στην μεριά του server.

 

Και όσο για το παρόν scriptάκι, σκόπευα να του προσθέσω versioning βάσει του last modified time του αρχείου.

Εδώ ήδη θα έπρεπε να χτυπάνε καμπανάκια γιατί όταν ενεργοποιηθεί το concatenation και το flock() είναι έτοιμο να βγάλει τα λεφτά του, αυτό σημαίνει πως τα πράγματα είναι ακόμα χειρότερα από το συνεχές stat στα αρχεία: μέχρι να ολοκληρωθεί η διαδικασία, όλα τα requests που είναι στον αέρα περιμένουν να κάνουν το καθένα flock και concatenate με τη σειρά του και έχεις βάλει για λίγο το web server σε mode "ένας ένας όλοι θα πάρετε".

 

Πάντα μα πάντα το να γίνονται πράγματα που επηρρεάζουν κάθε ένα HTTP request πρέπει να μη συμβαίνει σα μέρος του ίδιου του HTTP request. Το κάνεις με κάποιο εξωτερικό μηχανισμό. Όσο για locking εδώ δεν υπάρχει λόγος, απλά κάνεις generate στο tmp και όταν τελειώσεις move εκεί που θέλεις.

 

Τροφή για σκέψη: άρα τελικά το σύστημα έχει σα σκοπό να βελτιώσει την ταχύτητα ή να βολέψει το lazy syndrome? Γιατί αυτά τα δύο έρχονται σε σύγκρουση. Έχει νόημα να χρησιμοποιείς κάτι που προσπαθεί να βολέψει ταυτόχρονα συγκρουόμενες απαιτήσεις;

Εξαρτάται - σε ποια ταχύτητα αναφέρεσαι; Του συστήματος ή τη δική μου;

 

Ο σκοπός είναι κυρίως να βολέψει το lazy syndrome αλλά και την ταχύτητα με την οποία δουλεύω. Με πολύ μικρό impact στην ταχύτητα του συστήματος (να χάσω λίγο από PHP execution time, okay, αλλά όμως θα γλιτώσω http requests).

 

Εάν τώρα ο έλεγχος filemtime() είναι πολύ 'ακριβός' για κάθε http request, πρέπει να βρω νέα 'λογική' ή να χρησιμοποιήσω κάποιο build tool.

Δεν καταλαβαίνω τότε με ποιά λογική θα μπορούσε να θεωρηθεί ξεπερασμένο κάποιο άλλο εργαλείο. Το αν κάτι είναι ξεπερασμένο ή όχι πάει με τη γλώσσα προγραμματισμού;

Με διάφορες λογικές, συμπεριλαμβανομένης της γλώσσας προγραμματισμού/scripting.

 

Μερικά παραδείγματα...

 

Θα προτιμήσω να "reinvent the wheel" με HTML5, CSS3, SVG και JavaScript από το να επενδύσω χρόνο σε υλοποιήσεις με Flash και AS3 (κάποτε το έκανα).

 

Θα προτιμήσω να κάνω υλοποίηση σε JavaScript αν πρόκειται για κάτι μικρό, από το να χρησιμοποιήσω κάποιο framework/library.

 

Θα χρησιμοποιήσω jQuery και δεν θα "reinvent the wheel" όταν πρόκειται για κάτι μεγαλύτερο επειδή η jQuery έχει καθιερωθεί αρκετά καλά, αλλά δεν θα επενδύσω χρόνο σε υλοποιήσεις με mootools.

 

Θα προτιμήσω PHP από Ruby on Rails που πάει κατά διαόλου.

Ο Composer δεν κάνει κάτι τέτοιο. Αυτό που κάνει είναι ότι σου επιτρέπει να βολέψεις το lazy syndrome χωρίς να πέφτεις σε επίπεδο "κάνω copy τη μία class". Το κάνει αυτό τραβώντας αυτόματα τα dependencies που εσύ θα του δηλώσεις και που είναι hosted στο github ή κάπου αλλού, δίνοντάς σου αυτόματα autoloader για να μην ασχολείσαι με τα κουραστικά και μέχρι που μπορεί να χρησιμοποιηθεί και σαν build system του φτωχού αυτοματοποιώντας διαδικασίες concatenation (που δε θα γίνονται look ma no hands όπως είπαμε) κλπ.

 

Σταμάτα οτιδήποτε άλλο κάνεις και μάθε να χρησιμοποιείς Composer.

Στην προκειμένη θα έλεγα σταμάτα τα πάντα και μάθε να χρησιμοποιείς grunt/gulp tasks (κατά προτίμηση το δεύτερο). Αυτό που ζητάς γίνεται ήδη μαζί με χιλιάδες άλλα common tasks (πχ less/scss compilation, minification για js/css, string search & replace, file sync και γενικότερα όλα τα tasks που χρειάζεσαι για να πας από unminified κώδικα σε production code). Τα tasks αυτά τρέχουν με έναν watcher όσο αναπτύσεις την εφαρμογή σου και ενημερώνουν το pre-production environment (ή test, dev, whatever environment) on-the-fly. Όταν είσαι ικανοποιημένος με το αποτέλεσμα, ανεβάζεις τον κώδικά σου στο σέρβερ σου και είσαι έτοιμος.

@defacer

 

Ωραία, μπορείς να μου δείξεις ποια είναι τα βήματα που πρέπει να ακολουθήσω για να στήσω τον Composer και στην τελική να κάνω concatenation;

 

@t(o.ot)

 

Ομοίως μπορείς να μου πεις τα βήματα για το gulp.js (στήσιμο κ.λπ.);

 

@defacer , @t(o.ot)

 

Σαν use case ας πούμε ότι θέλω να κάνω concatenation σε ένα οποιοδήποτε theme που έχω φτιάξει για WordPress (δίχως plugin φυσικά) σε shared hosting environment.

[exarhis]

Καλημέρα, όταν δημιουργείς καινούργια αρχεία με πρόγραμμα τότε είσαι μεταπρογραμματιστής γιατί δημιουργείς ένα μεταπρόγραμμα.

 

Εναλλακτικά ,αν κατάλαβα καταλά, μπορείς σε ένα αρχείο php να κάνεις include όλα τα css και να αλλάξεις τα header του αρχείου σε css

[defacer]

Μην προτρέχεις, ρώτα πρώτα. Το πως έβγαλες συμπεράσματα για το τι κάνω με το θέμα του caching με ξεπερνάει.

 

Το έχω καλύψει το caching στοv browser στέλνοντας cache-control headers για caching και last modified για validation.

 

Επιπλέον προσπαθώ να χρησιμοποιώ την PHP OPCache όπου μπορώ στην μεριά του server.

Τότε δεν καταλαβαίνω τι προσπαθείς να κάνεις εδώ. Αφού κάνεις σωστό cache control τότε τι συζητάμε περί επιπλέον http requests? Δε θα γίνουν παρά μόνο αν έχεις stale cache.

 

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

 

Εξαρτάται - σε ποια ταχύτητα αναφέρεσαι; Του συστήματος ή τη δική μου;

 

Ο σκοπός είναι κυρίως να βολέψει το lazy syndrome αλλά και την ταχύτητα με την οποία δουλεύω. Με πολύ μικρό impact στην ταχύτητα του συστήματος (να χάσω λίγο από PHP execution time, okay, αλλά όμως θα γλιτώσω http requests).

Εδώ είμαστε πάλι. Το "θα γλιτώσω http requests" το είπαμε ήδη: πρώτον τις γλιτώνεις με caching, και δεύτερον so what? Υπάρχει κάποιος απώτερος σκοπός για τον οποίο προσπαθείς να τις γλιτώσεις. Ποιός είναι αυτός; Έκανες κάποια δοκιμή για να διαπιστώσεις αν τον πετυχαίνεις μ' αυτό που κάνεις, ή αν τζάμπα κουράζεσαι, ή ακόμα και αν πετυχαίνεις το ακριβώς αντίθετο αποτέλεσμα;

 

FWIW διαισθητικά τελείως δε θα μου φαινόταν περίεργο να πετυχαίνεις το αντίθετο για τους λόγους που είπα πριν.

 

Τώρα όσον αφορά το σε ποιά ταχύτητα αναφέρομαι -- προφανώς στην ταχύτητα συστήματος, μιας και η δική σου είναι de facto μειωμένη σε σχέση με την προηγούμενη κατάσταση όπου δεν υπήρχε αυτό το εργαλείο και δεν έκανες concatenation.

 

Ωραία, μπορείς να μου δείξεις ποια είναι τα βήματα που πρέπει να ακολουθήσω για να στήσω τον Composer και στην τελική να κάνω concatenation;

Όχι, σόρι. Υπάρχουν πολλά tutorials ή ίσως κάποιος άλλος να έχει χρόνο.

[t(o.ot)]

@t(o.ot)

 

Ομοίως μπορείς να μου πεις τα βήματα για το gulp.js (στήσιμο κ.λπ.);

 

 

Μπορείς να ξεκινήσεις από αυτά τα λινκς:

https://css-tricks.com/gulp-for-beginners/

 

Εδώ μπορείς να βρεις πληθώρα από gulp tasks (εκτός των άλλων) που μπορείς να χρησιμοποιήσεις:

https://www.npmjs.com/search?q=gulp

 

 

 

Σαν use case ας πούμε ότι θέλω να κάνω concatenation σε ένα οποιοδήποτε theme που έχω φτιάξει για WordPress (δίχως plugin φυσικά) σε shared hosting environment.

 

Το πού είναι hosted το site σου δεν παίζει ρόλο. Αναπτύσσεις τοπικά με τα εργαλεία σου, και ανεβάζεις (υπάρχει gulp task και γι αυτό) στο σέρβερ σου 1 css αρχείο, ασχέτως αν και τοπικά έχεις 1 css ή 400 less αρχεία. Κατά τ'άλλα δεν παίζει ρόλο αν χρησιμοποιείς κάποιο CMS.

[randomcat]

Αφού κάνεις σωστό cache control τότε τι συζητάμε περί επιπλέον http requests? Δε θα γίνουν παρά μόνο αν έχεις stale cache.

 

[...]

 

Εδώ είμαστε πάλι. Το "θα γλιτώσω http requests" το είπαμε ήδη: πρώτον τις γλιτώνεις με caching, και δεύτερον so what? Υπάρχει κάποιος απώτερος σκοπός για τον οποίο προσπαθείς να τις γλιτώσεις. Ποιός είναι αυτός;

 

Και φυσικά δεν θέλω να γίνουν ούτε και με stale cache. Εννοείται ότι είναι πολύ σημαντικό. Αλλιώς θα έσπαγα τα CSS μου σε καμιά 10αριά αρχεία και τελείωσε εκεί το θέμα.

 

Επιπλέον, για ranking στο Google (ranking = profit) μετράει πλέον και το PageSpeed, το οποίο θα "χτυπήσει" τα πολλά requests. Και κάποιες φορές ένα καλό score εκεί είναι και μια απόδειξη καλής δουλειάς για τον πελάτη.

 

 

Όχι, σόρι. Υπάρχουν πολλά tutorials ή ίσως κάποιος άλλος να έχει χρόνο.

Τα βήματα σου ζήτησα - τι χρειάζεται να γίνει - όχι να μου γράψεις tutorial.

 

Π.χ. κατέβασε και στήσε τον Composer όπως λέει εδώ, μετά πέτα όλη την WordPress ή το φάκελο του theme σε εκείνο το μέρος, δες εδώ και ένα καλό tutorial για concatenation και τέλος θα πρέπει να κάνεις αυτό.

 

Εάν σου είναι περισσότερο χρονοβόρο από το να συνθέσεις ένα post στο forum, εντάξει, ευχαριστώ όπως και να 'χει για το recommendation.

 

 

 

Μπορείς να ξεκινήσεις από αυτά τα λινκς:

https://css-tricks.com/gulp-for-beginners/

[...]

Σ' ευχαριστώ. Το έχω τιμήσει ιδιαίτερα αυτό το σάιτ.