Μου αρέσουν οι στατικοί τόποι. Για να είμαι πιο ακριβής, μου αρέσει να τις κατασκευάζω. Υπάρχει κάτι καθαρό για να καθίσετε εκεί μπροστά στην οθόνη σας. είναι μόνο εσείς και ο επεξεργαστής κειμένου σας, γράφοντας σε απλά παλιά HTML και CSS.

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

Η διαφορά είναι ότι τώρα μπορούμε να το κάνουμε καλύτερα. Προ-επεξεργαστές όπως Πιο λιγο και Sass βελτίωσε σημαντικά την εμπειρία της γραφής του CSS. Έχουμε οποιονδήποτε αριθμό γλωσσών δέσμης ενεργειών για να αναμειγνύονται στην HTML μας, αν το επιλέγουμε. Και τότε ... τότε οι άνθρωποι έκαναν μερικά πραγματικά ενδιαφέροντα πράγματα.

Έχω ήδη αναφέρει το Σφυρί app για Mac. Πρόκειται για μια εφαρμογή που εισάγει τις δικές της λειτουργίες και επεκτάσεις σε καλή παλιά HTML, επιτρέποντάς σας να συμπεριλάβετε ένα αρχείο ως μερικό σε άλλο και άλλα καλά πράγματα. Συγκεντρώνει τα αποτελέσματα σε μια τακτική στατική τοποθεσία που μπορεί να φιλοξενηθεί οπουδήποτε. Στην πραγματικότητα έχουν αρκετά περισσότερα χαρακτηριστικά από αυτό, αλλά αυτό το άρθρο δεν αφορά το Hammer. Γιατί; Είναι διαθέσιμο μόνο για την πλατφόρμα Mac.

Εισαγω Αρπα…

Παρουσιάζοντας τη Harp

Δεν είναι μια εφαρμογή, είναι πολύ περισσότερα. Περιλαμβάνει προεπεξεργαστές για CSS. Περιλαμβάνει γλώσσες για την εκμάθηση εγγράφων HTML. Είναι ένας μίνι διακομιστής που μπορεί να χρησιμοποιηθεί για ανάπτυξη ή να μετατραπεί σε πραγματικό διακομιστή παραγωγής. Μπορείτε να χρησιμοποιήσετε τον JavaScript από την πλευρά του διακομιστή για να το μετατρέψετε σε πλήρη εφαρμογή, καθώς εκτελείται στον κόμβο Node.js. Ή, αν δεν είστε προγραμματιστής, μπορείτε απλά να χτίσετε τον στατικό ιστότοπό σας και στη συνέχεια να τον μεταγλωττίσετε για να φιλοξενηθείτε αλλού.

Επειδή βασίζεται στο Node.js, είναι cross-platform. Είναι επίσης άδεια MIT, οπότε είναι δωρεάν. Μπορείτε να κάνετε αλλαγές και να το αναδιανείμετε ή να το μεταπωλήσετε, αν θέλετε.

Τώρα, οι άνθρωποι που έχουν παρακολουθήσει έξω θα έχουν παρατηρήσει ότι η Harp δεν είναι το μόνο εργαλείο αυτού του είδους. Πολλοί άνθρωποι δημιουργούν εργαλεία που βασίζονται σε κόμβους για να ξεκινήσουν γρήγορα έργα web. Το βασικό μου πρόβλημα με αυτά είναι ότι υποθέτουν γενικά ότι θέλετε να χρησιμοποιήσετε το αγαπημένο πλαίσιο CSS, τη βιβλιοθήκη κινουμένων σχεδίων ή το boilerplate HTML. Η Harp δεν κάνει υποθέσεις για τον κώδικα που θέλετε να γράψετε. Σας δίνει ακριβώς τα εργαλεία για να το γράψετε πιο γρήγορα.

Σας απασχολεί, πρέπει να εγκατασταθεί και να τρέξει μέσω της γραμμής εντολών. Δεν υπάρχει GUI για αυτό. Αλλά μόλις το καταφέρετε - και αυτό δεν είναι καθόλου δύσκολο - τα οφέλη αντισταθμίζουν την καμπύλη μάθησης.

Τα εργαλεία

Προ-επεξεργαστές CSS

Μέχρι τώρα, είμαι βέβαιος ότι οι περισσότεροι από τους αναγνώστες μας είναι εξοικειωμένοι με τους τρόπους με τους οποίους η βιομηχανία ιστού προσπάθησε να βελτιώσει το CSS της βανίλιας. Όταν εκτελείται ο μίνι διακομιστής για το έργο σας, όλα τα αρχεία LESS, SASS και Stylus συντάσσονται αυτόματα σε CSS.

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

Προστασία των γλωσσών

Περιλαμβάνονται επίσης Νεφρίτης και EJS. Αυτές είναι και οι δύο γλώσσες που δημιουργούν JavaScript και έχουν σχεδιαστεί για να σας βοηθήσουν να γράψετε / δημιουργήσετε πιο προηγμένα έγγραφα HTML με μεγαλύτερη ευελιξία. Βασικά, μπορείτε να δημιουργήσετε πρότυπα HTML και να αποθηκεύσετε το πραγματικό περιεχόμενο της σελίδας ξεχωριστά από αυτά τα πρότυπα. Είναι σαν να χρησιμοποιείτε ένα CMS, μόνο δεν υπάρχει βάση δεδομένων (εκτός αν θέλετε) και πρέπει να γράψετε όλο το περιεχόμενο σε αρχεία απλού κειμένου.

Το πραγματικό πλεονέκτημα είναι, βεβαίως, η συντήρηση κώδικα, συν όλα τα δροσερά πράγματα που μπορούν να κάνουν οι πραγματικοί προγραμματιστές με τον πραγματικό διακομιστή και τον πελάτη-side JavaScript. Αυτές είναι επίσης οι γλώσσες που σας επιτρέπουν να δημιουργήσετε πιο προηγμένα συστήματα, όπως τα blogs, όλα σχετικά εύκολα (και πάλι, εάν έχετε έναν προγραμματιστή στην μισθοδοσία).

Ποια είναι η διαφορά μεταξύ των δύο; Πρόκειται κυρίως για το πώς προτιμάτε να γράψετε τον κωδικό σας.

Το EJS κρατά τα πράγματα απλά. Εάν γνωρίζετε ήδη HTML, πρόκειται απλώς για την προσθήκη σε ετικέτες που σχετίζονται με το EJS, όπως έτσι: <% include global / header%>. Τι έκανα εκεί; Βασικά, απλά έπιασα την HTML για την κεφαλίδα της σελίδας μου από άλλο αρχείο και την εισήγαγα για χρήση στο κύριο πρότυπό μου. Μπορείτε να κάνετε πολλά πιο περίπλοκα πράγματα, φυσικά. Ακολουθεί η τεκμηρίωση της Harp σχετικά με το EJS.

Jade παίρνει μια πολύ διαφορετική προσέγγιση για τη συγγραφή HTML εντελώς. Μοιάζει με αυτό, όπως φαίνεται στην αρχική σελίδα του έργου:

bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,

Όλα αυτά μεταφράζονται σε HTML και Javascript. Σημειώστε τη συμπερίληψη μιας δήλωσης if / else ακριβώς στη μέση όλων και την εξάρτηση από τη σωστή εσοχή.

Coffeescript

Coffeescript είναι να JavaScript τι Jade είναι σε HTML. Βασικά, είναι μια απλοποιημένη μορφή για τη σύνταξη του JavaScript, το οποίο στη συνέχεια παίρνει συντάσσεται στα κανονικά πράγματα. Όπως και ο Jade, είναι έντονα εξαρτώμενο από την εσοχή, και πέφτει πολύ από τη σύνταξη.

Μοιάζει με αυτό (ένα άλλο παράδειγμα που κλαδεύει άγρια ​​από την αρχική σελίδα του έργου):

math =root:   Math.sqrtsquare: squarecube:   (x) -> x * square x

Και η έξοδος μοιάζει με αυτό:

math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};

Η πλατφόρμα

Οι ιστοτόποι που δημιουργήθηκαν με το Harp μπορούν να φιλοξενηθούν οπουδήποτε, φυσικά. Αξίζει όμως να σημειωθεί ότι οι δημιουργοί της Harp δημιούργησαν μια πλατφόρμα φιλοξενίας ειδικά σχεδιασμένη για πράγματα που χτίστηκαν με το λογισμικό τους. Η τιμολόγηση δεν είναι κακή και ενσωματώνεται με το Dropbox για εύκολη αυτόματη ενημέρωση στον ιστότοπό σας. Δείτε το εδώ: www.harp.io

συμπέρασμα

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