Front-end development: Libraries, frameworks και άλλα εργαλεία

H εποχή που με έναν απλό και ταπεινό text editor ξεκινάγαμε να γράφουμε από την αρχή τα πάντα έχει τελειώσει εδώ και πολύ καιρό. Πλέον για την δημιουργία ακόμα και του πιο απλού HTML template είναι σχεδόν υποχρεωτικό να χρησιμοποιήσουμε τουλάχιστον ένα CSS-reset καθώς και αρκετά javascript files, έτσι ώστε να προσθέσουμε συμβατότητα σε παλιότερους browsers, να ελέγξουμε τι υποστηρίζει ο κάθε browser κτλ κτλ. Παρακάτω περιγράφω τι διαδικασία, και φυσικά τα εργαλεία, libraries, scripts και snippets που χρησιμοποιώ σχεδόν σε κάθε νέο project, από το πιο μικρό μέχρι το πιο μεγάλο…

Markup

Ίσως το πιο εύκολο κομμάτι του puzzle. Μέχρι και πέρσι, συνήθως χρησιμοποιούσα ένα δικό μου template (βασισμένο σε Strict XHTML), ωστόσο μιας και προσπαθώ να το γυρίσω σε HTML5, πιάνω τον εαυτό μου να χρησιμοποιεί όλο και πιο συχνά το HTML5 boilerplate του Paul Irish. Το μόνο κακό που του βρίσκω είναι πως δεν μου φαίνεται και τόσο “boilerplate”, και συνήθως μου παίρνει αρκετή ώρα στο να διαγράφω αρχεία και κώδικα έτσι ώστε να το φέρω στα μέτρα μου. Σιγά-σιγά θέλω να φτιάξω και την δική μου λύση, ωστόσο μέχρι τότε το HTML5 boilerplate κάνει μια χαρά την δουλειά του.

CSS

Το πρώτο πράγμα που χρειάζομαι είναι ένα καλό CSS-reset. Αν η markup μου είναι HTML5, χρησιμοποιώ το HTML5 reset του HTML5 Doctor, αν όχι χρησιμοποιώ το παλιό καλό HTML reset του Eric Meyer . Πολλές φορές αν το project “βιάζεται”, χρησιμοποιώ και σαν βάση την τυπογραφία κάποιου έτοιμου CSS framework, συνήθως του Blueprint ή του HTML5 boilerplate. Τέλος, αν το project βιάζεται απελπιστικά ή θέλω κάποιο γρήγορο prototype εδώ και τώρα, χρησιμοποιώ και το grid system του Blueprint (είναι και το μόνο που έχω μάθει!). Τέλος, συνήθως περνάω και τα media queries του Andy Clarke αλλά και ένα print-only style που περιέχει όλη την βασική τυπογραφία για εκτύπωση, για να υπάρχουν (αργά ή γρήγορα θα χρειαστούν)…

Javascript

Και εφόσον κλείσαμε από markup και CSS το μόνο που μας μένει είναι η Javascript μας. Εάν το project έχει HTML5 markup, το html5shiv είναι το πρώτο “must” script που πρέπει να φορτώσουμε. Από εκεί και πέρα συνήθως περνάω το modernizr και το jQuery γιατί όλο και κάπου θα χρειαστούν. Τώρα τελευταία μου αρέσει πολύ σαν ιδέα και το selectivizr μιας και σε βοηθάει πολύ στο να κρατάς την markup σου ακόμα πιο καθαρή, ωστόσο μπορώ να ζήσω και χωρίς αυτό. Τέλος, υπάρχει πιθανότητα (πάντα ανάλογα το project και εάν ο πελάτης είναι περίεργος/φανατικός χρήστης IE) να χρησιμοποιήσω και το Respond.js, έτσι ώστε τα media queries να παίζουν και σε IE 6-7-8…

Αυτά τα λίγα σχετικά με το front-end κομμάτι των site. Όπως καταλαβαίνεται, ακόμα και μικρά projects μπορεί να θέλουν όλα τα παραπάνω και ακόμα περισσότερα για να στηθούν και να λειτουργήσουν όπως πρέπει. Τέλος αν κάποιος χρησιμοποιεί φανατικά κάποιο εργαλείο/library που δεν αναφέρω παραπάνω, ας αφήσει ένα σχόλιο έτσι ώστε το τεστάρουμε και εμείς…

Τα καλύτερα links – Δεκέμβριος 09

Το συγκεκριμένο post θα είναι και το τελευταίο της σειράς, μιας και τα αγαπημένα μου links θα δημοσιεύονται πλέον κατευθείαν στον twitter λογαριασμό μου (ναι είναι ενεργός επιτέλους)! Καλή χρονιά σε όλους και μην ξεχάσετε να με ακολουθείτε στο twitter 😉

Έμπνευση

  • Wolfram|Alpha : Μια νέα, πολύ εντυπωσιακή που πολλές φορές καταντάει και τρομακτική search engine. Δείτε οπωσδήποτε και το τρομακτικό video της

Web Design

  • Easy- front end framework : Ακόμα ένα CSS framework το οποίο προσφέρει πολλές “out of the box” javascript λύσεις (με την βοήθεια του jQuery).
  • Clearbox 3 : H καινούργια version είναι ακόμα καλύτερη…
  • Markup Generator : Ένας καινούργιος τρόπος γραφής markup. Θα ήθελα να το δω και σε text-editors/IDEs, μιας και θα με βόλευε πολύ…
  • Google Browser Size : Για να βλέπεται πως φαίνεται το site σας σε διάφορες αναλύσεις. Ίσως το μοναδικό Google εργαλείο για sites που δεν με εντυπωσίασε ιδιαίτερα…
  • @font-face Generator : Το καλύτερο εργαλείο που έχω βρει μέχρι στιγμής για την μετατροπή, αλλά και το editing web γραμματοσειρών. Γενικότερα το Font-Squirrel κάνει φανταστική δουλειά στα web fonts

Web Development

  • IxEdit : Ένα φανταστικό εργαλείο για την συγγραφή jQuery κώδικα, κατευθείαν μέσα στην ιστοσελίδα και μέσω γραφικού περιβάλλοντος! Θεωρητικά δεν χρειάζεται να ξέρετε καν jQuery! Τι άλλο θα δούμε…
  • BackPress : Μια PHP library που θα απλοποιήσει πολλά tasks. Την χρησιμοποιούν πολλά γνωστά open source projects όπως το WordPress και το bbPress.

Tools

  • Screenpresso : Ένα δωρεάν εργαλείο για screenshots με πολλά χαρακτηριστικά.  Είναι από τα καλύτερα που έχω δει (ειδικά σε λειτουργικό Windows, στο οποίο τέτοια εργαλεία είναι λιγότερα και με ελάχιστα χαρακτηριστικά)…
  • Ένα δωρεάν Sketching & Wireframing Kit, διαθέσιμο σε πολλά διαφορετικά formats (PDF, EPS, SVG κτλ.).

Accessibility/Usability

  • To WAVE (όχι της Google, βγαίνει από τα αρχικά  Web Accessibility Evaluation Tool), είναι μια δωρεάν υπηρεσία αξιολόγησης προσβασημότητας, κατασκευασμένη από το WebAIM.

WordPress

  • Το Carrington αυτοαποκαλείται CMS theme Framework για το WordPress. Η ιδέα είναι πολύ καλή, ωστόσο το βρήκα πολύ πολύπλοκο για την δουλειά που κάνει (απλά φτιάχνει themes!), ενώ χρειάζεται και αρκετή μελέτη…
  • WP Test data import : Ένα WP XML αρχείο για περάσετε γρήγορα στο blog σας μερικά test posts. Πολύ χρήσιμο ειδικότερα εάν δουλεύεται σε κάποιο καινούργιο theme…

Plug ins

  • jQuery Masonry : Ένα έξυπνο layout plug in που αλλάζει την default λειτουργία των floats.
  • Το Superfun είναι ένα εντυπωσιακό jQuery plug in. Ρίξτε του μια ματιά…
  • Google Page Speed : Ένα plug in/add on για το Firebug, με το οποίο μπορείτε να βρείτε και να βελτιώσετε τα αρχεία που καθυστερούν τις ιστοσελίδες σας. Προσωπικά προτιμώ την λύση της Yahoo, YSlow
  • Art Direction : Ένα WordPress plug in με το οποίο μπορείτε να δώσετε σε κάθε post σας ξεχωριστό CSS αρχείο (έτσι ώστε κάθε post σας να δείχνει διαφορετικό). Δοκιμάστε το εάν δεν βαριέστε…
  • TufteGraph : Ακόμα ένα jQuery plug in για charts/graphs…
  • Captify : Ένα απλό και πρακτικό jQuery plugin, για την προβολή των alt text στις φωτογραφίες σας.
  • jSnow : Και ένα jQuery plugin για χιόνι! Μάλλον άργησα να το παρουσιάσω…

Διάφορα links

  • Experts-Zone : Ένα ενδιαφέρον blog που προστέθηκε πρόσφατα στον RSS reader μου.
  • Academic Earth : Το εν λόγο site προβάλει (δωρεάν πάντα) video από παρουσιάσεις/lectures, των κορυφαίων ακαδημαϊκών της γης! Τα video είναι χωρισμένα σε κατηγορίες μαθημάτων, οι οποίες καλύπτουν όλο το φάσμα των επιστημών. Είναι κάτι που δεν πρόκειται να δω ούτε σε 30 χρόνια στην Ελλάδα…

Τα καλύτερα links – Οκτώβριος 09

Web Design

  • Dive into HTML5 : Μια φανταστική πηγή εκμάθησης HTML5.
  • CSS παρουσιάσεις που πρέπει να δείτε : Απλά εξαιρετικές… Και τι δεν θα έδινα για να έβλεπα τις παρουσιάσεις  “Efficient, Maintainable CSS” και “CSS Inheritance“, όταν πρωτο-ξεκίναγα και εγώ (δυστυχώς έπρεπε να τα μάθω με τον δύσκολο τρόπο)…

Web Development

  • Underscore.js : Ακόμα μια ελαφριά utility javascript library.
  • Mu Connect : Μια library αποκλειστικά φτιαγμένη για την εύκολη ενσωμάτωση του Facebook Connect στο site σας.
  • FireQuery : Σε beta ακόμη, αλλά το περιμένω πως και πως…
  • CSScaffold : Ένα πρωτοποριακό CSS framework γραμμένο σε PHP. Μου άρεσε πιο πολύ από αντίστοιχες λύσεις σε περίεργες γλώσσες που παίζουν δύσκολα και παραείναι πολύπλοκα. Το CSScaffold γίνεται install πανεύκολα και μπορείτε να το χρησιμοποιήσετε αμέσως!

Search Engine Optimization (SEO)

Tools

  • 5 δυνατοί WYSIWYG web editors : Όλο και κάποιος θα σας βολέψει…
  • WMD : Και ακόμα ένας, πολύ πιο ελαφρύς (μόλις μία σειρά κώδικα)!
  • The Printliminator : Ένα bookmarklet που βοηθάει (θεωρητικά) στο να τυπώνεται μόνο τις πληροφορίες  που θέλετε, από σελίδες με πολλές διαφημίσεις και άλλες άσχετες πληροφορίες…
  • Conjoon : Για αυτούς που αναζητούν λίγη οργάνωση…

WordPress

  • Pods CMS : Ένα CMS framework για το WordPress. Αν και είμαι κατά της χρήσης τέτοιων plug in (τα χρησιμοποιώ μόνο σαν έσχατη λύση), οφείλω να ομολογήσω πως το συγκεκριμένο είναι πολύ ενδιαφέρον. Προσωπικά περιμένω το WordPress να αποκτήσει επιτέλους μια δικιά του τέτοια – εγγενής πάντα, όχι μέσω plug in – αρχιτεκτονική.
  • Maintenance Mode : Γιατί τώρα τελευταία δεν κάνουμε άλλη δουλειά…

Δωρεάν/Freebies

  • PicApp : Ανακαλύψτε και χρησιμοποιήστε στο blog σας φωτογραφίες υψηλής ποιότητας. Φοβερό!
  • VirtualBox :  Ένα δωρεάν και open source vistual machine, που υποστηρίζει όλα τα γνωστά λειτουργικά συστήματα.

Διάφορα links

Τα καλύτερα links – Σεπτέμβρης 09

Έμπνευση

  • BestWebFrameworks : Τα γνωστότερα frameworks για PHP, Ruby, JS και CSS, σε ευκολοδιάβαστους πίνακες (με χαρακτηριστικά κτλ.).
  • Μια πολύ καλή εισαγωγή στην HTML5, από τον Brad Neuberg της Google, που σίγουρα αξίζει να την δείτε από το πρώτο μέχρι το τελευταίο λεπτό!

Web Design

Web Development

  • Yahoo! Search BOSS : Φτιάξτε την δικιά σας custom search με την βοήθεια της Yahoo!…
  • IE7-JS : Μια javascript library που αναλαμβάνει να κάνει τις παλιότερες εκδόσεις του Internet Explorer (6 και κάτω) να συμπεριφέρονται όπως ο 7… Μπορεί να το έχω ξανά-παρουσιάσει αλλά δεν πειράζει.

Search Engine Optimization (SEO)

Tools

Τυπογραφία (Typography)

  • My Fontbook : Επιτέλους ένα όμορφος και πρακτικός on-line font viewer.

WordPress

  • Κερδίστε αρκετό χρόνο από τα WordPress style σας χρησιμοποιώντας το default WP CSS style!
  • To Status Updater αναλαμβάνει να σας γλιτώσει από την αγγαρεία του να postaρετε τα καινούργια άρθρα σας στις διάφορες social υπηρεσίες, όπως facebook, twitter, myspace κτλ.

Plug ins

  • jQTouch : Ένα jQuery plugin για mobile web development σε iPhone, Android, Palm Pre, και άλλες touch-based συσκευές.

Δωρεάν/Freebies

  • Screenr : Μια νέα υπηρεσία για εύκολο και δωρεάν screencasting. Το screencast εργαλείο της είναι εντυπωσιακό και δουλεύει κατευθείαν μέσω browser!
  • Piwik : Ένα open source και δωρεάν φυσικά, web analytics software. Για αυτούς που βαρέθηκαν το Mint και το Google Analytics

Τα καλύτερα links – Ιούνιος 09

Έμπνευση

  • 1 γραμμή CSS grid framework : Το έβαλα πιο πολύ για έμπνευση και όχι σαν web design εργαλείο, μιας και δεν το θεωρώ framework. Παραδέχομαι ωστόσο τον τύπο που το έφτιαξε γιατί με λίγη φαντασία και με ακόμα λιγότερο κώδικα, έφτιαξε κάτι που μπορεί να κοντράρει κάποια πολύ πιο advanced CSS frameworks…

Web Design

  • Adobe BrowserLab : Μια επώνυμη και δωρεάν (προς το παρόν) υπηρεσία, για να ελέγχεται τα sites σας σε πολλούς συνδυασμούς browsers και OS.

Web Development

  • Ο φίλος, συνάδελφος και παλιός συμμαθητής μου John D.Wells, το έχει ρίξει τώρα τελευταία στο Expression Engine, με αποτέλεσμα να δημιουργήσει μία πολύ ενδιαφέρον λίστα από links για τους νέους αλλά και τους πιο έμπειρους ΕΕ developers. Εγώ πάντως της έριξα μια ματιά και ήδη αρχίζω να μπαίνω στην EE λογική…
  • Perch : Το πιο απλό και εύκολο στην χρήση CMS που έχετε δει!
  • Moousture : Η πρώτη mouse gesture Javascript library.
  • To prettyPrint είναι μια πολύ καλή λύση για Javascript debugging. Δείτε το videακι και θα καταλάβετε αμέσως τι κάνει…
  • Το JSLint, είναι για πολλούς Javascripts experts ο Javascript validator! Τον έχει φτιάξει ο guru του είδους, Douglas Crockford.

Browsers

  • Ο Opera Unite, ακούγεται σαν μια πολύ καλή ιδέα, ωστόσο έχω την αίσθηση πως έχει πολύ πολύπλοκα concepts για απλούς χρήστες. Οι πιο έμπειροι την βρίσκουν με Firefox, οπότε πάλι δεν τον βλέπω καλά τον πολύ δυνατό Opera Unite

Search Engine Optimization (SEO)

Accessibility/Usability

  • 10 φτηνές λύσεις/εργαλεία για usability tests. Η αλλιώς απ’ το ολότελα καλή και η Παναγιώταινα…
  • Ακόμα μια καλή κίνηση από την Adobe, η οποία έχει πάρει φόρα τώρα τελευταία. Στο καινούργιο της blog λοιπόν, με τίτλο Adobe Accessibility, ενημερώνει τους χρήστες των προγραμμάτων της για τα accessibility χαρακτηριστικά τους, καθώς και για το πως να τα χρησιμοποιούν με τον σωστό τρόπο. Μπράβο της, και μακάρι όλες οι εταιρείες να έκαναν κάτι ανάλογο…

Plug ins

  • jQuery TOOLS : Μια συλλογή από plug ins, για να δημιουργήται εύκολα και γρήγορα τα πιο κλασικά web 2.0 εφέ… Κάτι που κατά την γνώμη μου έπρεπε να υπάρχει στο jQuery UI.
  • jMonthCalendar : Ακόμα ένα calendar plug in για το jQuery, με πολλά features και δυνατότητες.

Blogs

  • Ότι θα θέλατε να μάθετε για την HTML5, αλλά φοβόσασταν να ρωτήσετε, βρίσκεται στο blog HTML5 Doctor… Το δημοσίευσε και η sugar στο CSS3 (από εκεί το είδα) αλλά δεν θα τους χαλάσει ένα ακόμα back link… Αξιοσημείωτο είναι πως το blog τους είναι φτιαγμένο με HTML5!

Τα καλύτερα links – Μάρτιος 09

Έμπνευση

Web Development

  • To RegExr είναι ένα φοβερό on-line tool για εκμάθηση και testing regular expressions.
  • Άλλη μια δωρεάν Javascript library με το περίεργο όνομα qooxdoo. Η library ενδείκνυται κυρίως για την δημιουργία UI.
  • Ένα δωρεάν και μάλιστα open source framework/μηχανή παιχνιδιών για Flash. To PushButton Engine δείχνει αρκετά δυνατό στον τομέα του, εάν φυσικά έχετε τις ανάλογες γνώσεις πάνω στο Flash.
  • Το Hastymail είναι ένας δωρεάν, open source, web email client, με πάρα πολλά χαρακτηριστικά και γραμμένος σε PHP. Συστήνεται ανεπιφύλακτα σε όσους θέλουν να στήσουν κάτι τέτοιο στην εταιρεία τους, μιας και υποστηρίζει άπειρους browsers, συσκευές, προσφέρει AJAX ευκολίες, ενώ είναι και πολύ παραμετροποιήσημος. Για περισσότερες λύσεις ρίξτε μια ματιά και στο άρθρο “10 AJAX-based & PHP WebMail Clients For a Great User Experience“.
  • Όσοι βέβαια ψάχνουν κάτι πιο ολοκληρωμένο, δηλαδή μια κανονική “communication platform” με email client, calendars, contacts και file managers, καλό είναι να ρίξουν μια ματιά στο επίσης δωρεάν και open source 6zap. Είναι κάπως πιο απαιτητικό σε απαιτήσεις, αλλά προσφέρει μια ολοκληρωμένη και Web 2.0 λύση επικοινωνίας…
  • Το Shopify είναι μια πολύ εύκολη και φθηνή υπηρεσία δημιουργίας e-shop.

Tools

  • Το Styleneat είναι φανταστικό εργαλειάκι για να κρατάτε τα CSS σας νοικοκυρεμένα 😉
  • Το νέο αγαπημένο μου εργαλείο ονομάζεται Texter! Είναι ένας text expander φτιαγμένος από το Lifehacker και θα σας σώσει άπειρες ώρες πληκτρολογήματος (δυστυχώς μόνο για Windows, αν και είμαι σίγουρος πως θα υπάρχει κάτι ανάλογο για Linux και OS X). Θα σας αλλάξει την ζωή, ήδη έχω αρχίσει να το συνηθίζω επικίνδυνα και να μην μπορώ να κάνω χωρίς αυτό…

WordPress

  • Ένα φανταστικό shopping cart για το WordPress, με το όχι και τόσο πρωτότυπο όνομα WP e-Commerce. Πολύ καλή λύση, με πολλά χαρακτηριστικά και εύκολο customization.

Plug ins

  • Ένα ελαφρύ jQuery image gallery plug in, με το περίεργο όνομα Pikachoose
  • Το ImageSwitch είναι άλλο ένα jQuery plug in με πολλές δυνατότητες , το οποίο μπορεί να κάνει τα δύσκολα, εύκολα! Ρίξτε του οπωσδήποτε μια ματιά…
  • Ακόμα ένα ενδιαφέρον plug in για jQuery, το οποίο έχει να κάνει με εμφάνιση tooltips.
  • Το Lightbox clone κάνει απλά και εύκολα αυτό που λέει το όνομα του…
  • Μεταφράστε το site σας σε άλλες γλώσσες εύκολα και γρήγορα, με την βοήθεια του Sunday Morning (υποστηρίζει και ελληνικά)! Προσωπικά δεν μου γέμισε το μάτι, ωστόσο δεν το έψαξα και πολύ…

Blogs

  • To DIY (Do It Yourself) είναι ένα νέο ελληνικό video-cast που ασχολείται με αρτίστικα θεματάκια.  Οι τύποι είναι φοβεροί και μάλιστα προσφέρουν το περιεχόμενο τους κάτω από άδεια Creative Commons. Καλή επιτυχία παιδιά!
  • Μια πολύ αξιόλογη ελληνίδα web designer/developer, η Lea Verou, γράφει πολλά και ενδιαφέροντα στο blog της (στα αγγλικά). Απορώ πως δεν την είχα πάρει χαμπάρι τόσο καιρό…
  • Για τους designers που δεν ξέρουν πως να ξεκινήσουν Javascript, καλό θα ήταν να περάσουν, και γρήγορα μάλιστα, από το Teach Me Javascript. To blog ξεκινάει από τα πάρα πολύ βασικά και υποθέτω πως σιγά-σιγά θα εμβαθύνει. Το καλό είναι πως δεν χρειάζεται να έχεις ιδέα από Javascript ή άλλη γλώσσα προγραμματισμού, γιατί πολύ απλά ξεκινάει από τα πάρα πολύ βασικά και εξηγεί πως λειτουργεί (και γιατί) η συγκεκριμένη γλώσσα. Εγώ πάντως θα ρίχνω μια ματιά για επανάληψη 😉
  • Άλλο ένα ελληνικό blog με θέμα το SEO και τίτλο Seotalk.gr. Προστέθηκε και αυτό στον reader μου…

Δωρεάν / Freebies

  • Το NVDA (NonVisual Desktop Access) είναι ένας δωρεάν και open source screen reader (μόνο για Windows OS προς το παρόν). Υποστηρίζει 20 γλώσσες (δεν είδα κάπου τα ελληνικά), είναι συμβατός με Firefox και υποστηρίζει και το πρότυπο  WAI-RIA.

Διάφορα links

  • Και τέλος το καλύτερο online πρωταπριλιάτικο ψέμα/αστείο. Save Internet Explorer 6! 865 άνθρωποι από όλη την γη έχουν υπογράψει ήδη την αίτηση διαμαρτυρίας. Εσείς?

6+1 δωρεάν UI libraries

Οι web εφαρμογές έχουν ήδη κατακτήσει και το desktop με τα διάφορα widgets αλλά και τις πολλές πλέον RIA εφαρμογές. Το μεγάλο πρόβλημα που αντιμετωπίζουν οι developers τέτοιων εφαρμογών είναι πως πολλές φορές δεν υπάρχει κάποια έτοιμη βάση έτσι ώστε να αναπτύξουν πιο γρήγορα και εύκολα τα διάφορα User Interfaces. Συνήθως πρέπει σε κάθε νέο project να ξανανανακαλύπτουν τον τροχό, ενώ εάν δεν υπάρχει και κάποιος καλός σχεδιασμός, είναι δύσκολο να ξαναχρησιμοποιήσουν τα υπάρχοντα user interfaces. Παρακάτω παρουσιάζω 6 δωρεάν (και μία σχεδόν δωρεάν) λύσεις για το παραπάνω πρόβλημα. Τα παρακάτω UI Frameworks/libraries είναι πολύ παραμετροποιήσημα και προσφέρουν αμέσως πολλές UI λύσεις όπως drag ‘n drop, κουμπιά επιλογών, tabs, παράθυρα και γενικότερα ότι μπορεί να ζητήσει κάποιος από ένα user interface. Έχουμε και λέμε λοιπόν :

  1. Το Echo Web Framework είναι ίσως η πιο εντυπωσιακή λύση, ωστόσο έχω την αίσθηση πως θα είναι αρκετά πολύπλοκο στην χρήση. Όπως και να έχει το demo του είναι κάτι παραπάνω από εντυπωσιακό, οπότε  σίγουρα αξίζει να του ρίξετε μια ματιά.
  2. Το γνωστότερο ίσως από όλα είναι το Yahoo! User Interface (YUI), το οποίο παραμένει μια πολύ καλή και δοκιμασμένη λύση. Το πολύ καλό documentation, τα πολλά resources και tutorials, αλλά και το τεράστιο community που έχει χτιστεί γύρω του, είναι τα μεγάλα του πλεονεκτήματα.
  3. Το jQuery UI είναι η επίσημη λύση του jQuery στο θέμα user interface. Αξιόλογο, εύκολο στην χρήση και κυρίως με πολύ καλό support αλλά και μεγάλο community από πίσω του.
  4. Το mochaui είναι και αυτό μια ενδιαφέρουσα UI λύση για την Mootools library αυτήν την φορά.
  5. Το Jitsu είναι μια ενδιαφέρουσα λύση για την δημιουργία UI, ωστόσο έχω την αίσθηση πως τα περισσότερα πράγματα που προσφέρει γίνονται πολύ πιο εύκολα με άλλες libraries. Όπως και να έχει πάντως, καλό θα είναι να την έχετε υπόψη σας.
  6. Το iWebKit είναι η καλύτερη λύση για δημιουργία εφαρμογών που στοχεύουν στο iPhone και το iPod touch.
  7. Τέλος υπάρχει και τo IT Mill είναι μια πολύ οργανωμένη και ολοκληρωμένη λύση. Το framework είναι open source, με πολλές δυνατότητες και χαρακτηριστικά, ενώ η εταιρεία προσφέρει σε πολύ λογικές τιμές κάποια εργαλεία και επίσημη υποστήριξη. Έτσι αν και μπορεί να ξοδέψετε κάτι παραπάνω στην αρχή, σίγουρα αξίζει, μιας και μακροπρόθεσμα μπορείτε να γλιτώσετε πολύ περισσότερα χρήματα, χρόνο και κόπο.

Όποιος έχει να προσθέσει κάτι ας αφήσει ένα comment, έτσι ώστε να οργανονώμαστε σιγα-σιγά και σε αυτό το θέμα…

Γρήγορο development : 5 συμβουλές για γρήγορα αποτελέσματα

Πολλοί δεν έχουν πίστη στο λαϊκό ρητό “το γοργό και χάριν έχει”, ωστόσο είναι πάρα πολλές οι φορές που απλά πρέπει να βγει κάτι στον αέρα γρήγορα! Οι πιο σκληροπυρηνικοί developers, ανήκα και εγώ κάποτε σε αυτήν την κατηγορία, θέλουν να ξεκινάνε τα πάντα από το μηδέν έτσι ώστε να ελέγχουν πλήρως τον κώδικα και γενικότερα να φτιάχνουν τα πάντα με τα χεράκια τους. Όπως καταλαβαίνεται, αυτές οι εποχές έχουν περάσει πλέον, και γενικότερα δεν εξυπηρετεί σε τίποτα να προσπαθείς να ξανά-ανακαλύψεις τον τροχό, όταν το έχει κάνει ήδη κάποιος άλλος… Παρακάτω δίνω 5 συμβουλές που πιστεύω πως εάν ακολουθηθούν, θα έχετε σε πολύ γρήγορο χρονικό διάστημα φοβερές βελτιώσεις στους development χρόνους σας, και θα σώσετε αρκετό χρόνο από κάθε σας project (και θεωρητικά θα έχετε περισσότερο χρόνο για την οικογένεια σας και τους φίλους σας, κάτι που φυσικά δεν ισχύει γιατί τα projects δεν σταματάνε ποτέ!). Έχουμε και λέμε λοιπόν :

1. Χρησιμοποιήστε frameworks και libraries

Η πιο απλή και χρήσιμη συμβουλή. Μην ξανά-ανακαλύπτετε τον τροχό όπως έγραψα και παραπάνω, το έχουν ήδη κάνει άλλοι για εσάς, εκμεταλλευθείτε το! Σε όλες τις server-side τεχνολογίες υπάρχουν frameworks που σας βοηθάνε να γράψετε ποιοτικότερο κώδικά πολύ πιο γρήγορα, πολύ πιο εύκολα και μάλιστα επαναχρησιμοποιήσιμο (σε αρκετές περιπτώσεις τουλάχιστον). Στις web εφαρμογές το pattern που έχει επικρατήσει πλέον, είναι το MVC (Model-View-Controller), και όλες οι server-side τεχνολογίες έχουν αναπτύξει πολλά και διάφορα frameworks γύρω από αυτό. Έτσι από την Ruby με το Rails ως και την PHP με το CakePHP, το αγαπημένο μου (αν και έχω καιρό να ασχοληθώ) CodeIgniter ή το πολύπλοκο Zend, δεν υπάρχει περίπτωση να μην βρείτε κάποιο framework που να κάνει την δουλειά σας πιο γρήγορα και παραγωγικά. Μέχρι και η Microsoft εισήγαγε MVC δυνατότητες στη ASP.ΝΕΤ, οπότε ποιος ο λόγος να μην εκμεταλλευθείτε το συγκεκριμένο pattern;

Στην client-side μεριά τώρα, αν δεν θέλετε να χρησιμοποιήσετε για διάφορους λόγους CSS frameworks/libraries, θα είσασταν αρκετά περίεργοι (για να μην γράψω κάτι πιο χοντρό), εάν προσπαθούσατε να κάνετε όλα αυτά τα ωραία Javascript animation/εφέ και AJAX κολπάκια χωρίς την χρήση κάποιας library… Και εδώ οι επιλογές είναι πάρα πολλές με σημαντικότερες το jQuery, MooTools, Prototype και YUI, οπότε δοκιμάζετε και κρατάτε αυτήν που σας ταιριάζει και που κάνει  γρηγορότερα την δουλειά!

2. Χρησιμοποιήστε έναν πολύ καλό text editor ή κάποιο IDE

Φυσικά και μπορείτε να κάνετε την δουλειά σας με το Notepad των Windows, το ερώτημα όμως είναι πόσο γρήγορα την κάνετε? Το θέμα text editor ή IDE είναι κάτι καθαρά προσωπικό και ο καθένας έχει τις προτιμήσεις του. Προσωπικά προτιμώ τους text editors μιας και είναι πιο ελαφριοί από τα IDE (επίσης δουλεύω ελάχιστα σε server-side επίπεδο πλέον), ενώ θέλω οπωσδήποτε να υποστηρίζουν και τα παρακάτω χαρακτηριστικά :

  • syntax highlighting
  • auto-fill
  • syntax suggestions

Τα IDE έχουν συνήθως και άλλα πιο εξεζητημένα χαρακτηριστικά, όπως FTP access, διαγνωστικά εργαλεία, εργαλεία για debugging και διάφορα άλλα που αν και χρήσιμα, συνήθως κάνουν αρκετά πιο βαριές τις εφαρμογές, κάτι που δεν μ’ αρέσει. Έτσι προτιμώ να χρησιμοποιώ τον Ε Τext Εditor (μοιάζει με το TextMate), Intype (project που δυστυχώς αργοπεθαίνει) και Notepad ++ από τα διάφορα IDE όπως Εclipse, NetBeans, Aptana Studio και Komodo IDE. Όπως και να έχει δοκιμάστε μερικά από αυτά, βρείτε πιο σας ταιριάζει και γράψτε πιο γρήγορα κώδικα!

3. Reusable code ή free code

Έχετε γράψει κάτι ανάλογο παλιότερα; Τότε απλά προσαρμόστε το στις καινούργιες απαιτήσεις σας και ξανά-χρησιμοποιήστε το! Επίσης, ρίχνετε πάντα μια ματιά σε code snippets που μπορείτε να χρησιμοποιήσετε. Το μόνο που πρέπει να προσέξετε πάρα πολύ σε αυτήν την περίπτωση είναι η άδεια χρήσης τους. Καλό είναι επίσης να δίνετε και credits στους δημιουργούς (έστω και εάν δεν το ζητάνε), αλλά να το αναφέρεται και στους υπόλοιπους εμπλεκόμενους στο project (εάν υπάρχουν).

4. Σωστά debugging tools

Το θέμα debugging είναι και αυτό αρκετά προσωπικό. Σε server-side επίπεδο μπορείτε να το κάνετε είτε μέσω των errors/warnings που παίρνεται κατευθείαν από τον server και την server-side γλώσσα που χρησιμοποιείται, είτε μέσω IDE εργαλείων που ανέφερα και πιο πάνω.

Σε client-side επίπεδο τώρα, απλά πρέπει να έχετε το Firebug! Ειλικρινά δεν μπορώ να καταλάβω πως μερικοί συνάδελφοι δεν το χρησιμοποιούν… Το Web Developer Toolbar είναι και αυτό ένα πολύ αξιόλογο εργαλείο, ωστόσο πιστεύω πως το Firebug κάνει τα πάντα και συμφέρει… Για Internet Explorer τώρα (και μόνο για να λύσετε προβλήματα που έχουν προκύψει στον συγκεκριμένο browser), μπορείτε να χρησιμοποιήσετε την Internet Explorer Toolbar, η οποία όμως δεν θα σας βοηθήσει και πολύ, ωστόσο κάτι είναι και αυτό. Τέλος περιμένω να δω και το Opera Dragonfly, αν και πιστεύω πως πολύ δύσκολα θα καταφέρει να κερδίσει τον συνδυασμό Firefox/Firebug. Δεν είναι άλλωστε τυχαία η επιλογή του συγκεκριμένου συνδιασμού από όλους σχεδόν τους web designers/developers…

5. On-line collaboration

Το θέμα συνεργασίας αλλά και γενικότερα project management, είναι ένα από τα πιο δύσκολα, ιδιαίτερα όταν οι εμπλεκόμενοι βρίσκονται σε διαφορετικές πόλεις, έχουν διαφορετικά time zones κτλ. Φυσικά με το πατροπαράδοτο e-mail μπορείτε να λύσετε τέτοια προβληματάκια, όταν όμως το project είναι μεγάλο και η ομάδα αποτελείτε από πολλά μέλη, τότε η χρήση e-mail πιο πολύ θα καθυστερεί παρά θα βοηθάει την κατάσταση… Αντιθέτως web collaboration εργαλεία, όπως το Basecamp για παράδειγμα, μπορούν να οργανώσουν καλύτερα ένα project σε όλα τα επίπεδα, όπως σε επίπεδο συνεργασίας, to do tasks, project status, ανταλλαγή αρχείων, ενημέρωση των μελών κτλ. Γιατί λοιπόν να σπαταλάτε πολύτιμο χρόνο στο παλιομοδίτικο e-mail; Προσωπικά εκτός από το Basecamp το οποίο χρησιμοποιώ για το CSS3.gr μου αρέσει πολύ και το Google Groups το οποίο χρησιμοποιώ σε μικρότερα projects αλλά πολλές φορές και μόνος μου!

Αυτά τα λίγα από εμένα. Όποιοι έχετε βάλει στόχο να κάνετε γρήγορα κάποια πράγματα ακολουθήστε μερικές από τις παραπάνω συμβουλές, όλο και πιο γρήγοροι θα γίνεται 😉

Best of the rest – 41η εβδομάδα 2008

Πολύ λίγα τα links αυτής της εβδομάδας, ωστόσο ρίξτε τους μια ματιά…

  • Το A List Apart γιορτάζει τα 10 χρόνια του! Χρόνια πολλά!
  • To Formy είναι ένα απλό CSS framework για φόρμες. Εάν βαριέστε να βάζετε του ίδιους και ίδιους κανόνες στις φόρμες σας, ρίξτε του μια ματιά, μπορεί να σας σώσει αρκετό χρόνο…
  • Και ένα νέο ελληνικό blog που κέρδισε μια θέση στον RSS reader μου! Ονομάζεται Silverthan και ασχολείται με πολλά ενδιαφέροντα θεματάκια…

CSS frameworks : Αξίζουν ή όχι

Τώρα τελευταία τα CSS frameworks γίνονται όλο και περισσότερο της μόδας, με αρκετούς φανατικούς θαυμαστές αλλά και εξίσου φανατικούς επικριτές. Προσωπικά δεν είμαι και πολύ fun των περισσότερων framework (εξηγώ παρακάτω το γιατί), ωστόσο κατά καιρούς έχω χρησιμοποιήσει και μάλιστα με μεγάλη επιτυχία κάποια από αυτά. Στο παρακάτω αρθράκι λοιπόν, εξηγώ ποια ιδέα κρύβεται πίσω από τα framework, τα πλεονεκτήματα και μειονεκτήματα τους και τέλος ποια ξεχωρίζω και γιατί.

Η ιδέα πίσω από τα CSS frameworks είναι πως σε κάθε site/project που αναλαμβάνουμε, χρησιμοποιούμε πολλά κοινά στοιχεία, όπως για παράδειγμα το κλασικό CSS reset file (πάντα του Eric Meyer), κάποια default styles για τα σημαντικότερα elements (όπως headings, tables, φόρμες κτλ.), κάποια styles μόνο για print, ενώ πολλοί πάνε τα πράγματα ακόμα παραπέρα, χρησιμοποιώντας styles για να καθορίσουν την διάταξη του site (columns και rows), να χρησιμοποιήσουν εφέ στις λίστες/μενού τους, και πολλά άλλα. Η ιδέα λοιπόν που κρύβεται πίσω από ένα framework είναι πολύ απλή. Γιατί να ξαναγράφουμε όλους αυτούς τους κανόνες και κώδικα από την αρχή για κάθε site, όταν μπορούμε να τα γράψουμε μόνο μία φορά και να τα χρησιμοποιούμε ξανά και ξανά σε όλα μας τα project? Με τον παραπάνω τρόπο, θα γλιτώνουμε πολύ κόπο και χρόνο!

Φυσικά τα πράγματα δεν είναι και τόσο ρόδινα όπως ακούγονται. Και εγώ χρησιμοποιώ επαναλαμβανόμενο CSS κώδικα στα site μου, όμως προσπαθώ να αποφεύγω τα έτοιμα CSS frameworks, για τους παρακάτω λόγους :

  • Σε αναγκάζουν να χρησιμοποιείς κάποιο συγκεκριμένο, και πολλές φορές όχι semantic και accessible, στυλ στην markup, τις κλάσεις και τα id σου (πχ. class=”div-xyz”).
  • Συνήθως χρειάζεσαι πολύ λιγότερα πράγματα απ’ ότι σου προσφέρει ένα framework, με αποτέλεσμα να αναγκάζεις τον χρήστη να κατεβάζει άσκοπα κώδικα, που δεν χρησιμοποιεί!
  • Ακόμα και εάν είσαι έμπειρος στην CSS, αρκετά frameworks είναι πολύπλοκα στην εκμάθηση τους. Επίσης εάν δημιουργηθεί κάποιο πρόβλημα/bug είναι πολύ πιο δύσκολο να εντοπίσεις τι φταίει.

Από εκεί και πέρα δέχομαι πως τα CSS frameworks σου προσφέρουν αρκετά πράγματα σχετικά εύκολα και γρήγορα, μιας και δεν κάθεσαι να γράψεις από την αρχή όλους τους CSS κανόνες, ενώ τα περισσότερα υποστηρίζουν αμέσως τους περισσότερους browsers που υπάρχουν. Για όσους θέλουν να ρίξουν μια ματιά σε αυτά, η παρακάτω λίστα αναφέρει όλα τα frameworks που υπάρχουν διαθέσιμα αυτήν την στιγμή (αναφέρομαι στα γνωστά και αυτά που μπορεί να χρησιμοποιήσει κάποιος εδώ και τώρα, και όχι σε αυτά που είναι υπό development ή που βρίσκονται σε beta στάδιο).

Όπως ανέφερα και παραπάνω λοιπόν, έχω δοκιμάσει τα περισσότερα από αυτά, και λογικό είναι να έχω ξεχωρίσει κάποια από αυτά. Γενικότερα, απορρίπτω αμέσως 2 κατηγορίες framework. Αυτά που είναι πολύ μεγάλα σε μέγεθος και κώδικα, με αποτέλεσμα να αναγκάζουν τον χρήστη να περιμένει να φορτωθούν χίλια-δυο άχρηστα πράγματα, και σε αυτά που σε αναγκάζουν να χρησιμοποιείς non-semantic markup, κλάσεις και ids στον κώδικα σου. Με το παραπάνω σκεπτικό λοιπόν, έχω απορρίψει πολλά διάσημα frameworks, όπως YUI Grids CSS, 960, YAML, και πολλά άλλα, ενώ αντιθέτως έχω χρησιμοποιήσει αρκετές φορές το Boilerplate το οποίο δεν αντιμετωπίζει τα παραπάνω προβλήματα, ενώ το σκεπτικό του βασίζεται στην απλότητα τόσο του κώδικα του, όσο και της λειτουργίας του.

To Boilerplate λοιπόν είναι ένα πολύ απλό framework, το οποίο δεν περιέχει περίεργες κλάσεις και ids, αλλά προσφέρει μια πολύ ολοκληρωμένη βάση για τον CSS κώδικα σας. Έτσι κάθε φορά που το χρησιμοποιήτε σε κάποιο project, έχετε τον βασικό CSS κορμό έτοιμο, όπως για παράδειγμα ένα reset file, default styles για όλα τα elements (headings, παραγράφους, λίστες, κτλ.), ένα βασικό print-only style και κάποιες πάρα πολύ βασικές κλάσεις. Το δεύτερο χαρακτηριστικό που μου αρέσει στο συγκεκριμένο framework, είναι πως έχει χωρισμένα τα CSS αρχεία με έξυπνο τρόπο, όπως για παράδειγμα ένα αρχείο για την τυπογραφία (typography.css), άλλο για τις φόρμες (forms.css), άλλο για το UI της οθόνης (screen.css) κτλ., οργανώνοντας έτσι προκαταβολικά τον κώδικα σας! Από εκεί και πέρα, ότι extra θέλετε, το γράφεται μόνοι σας! Προσωπικά με έχει κερδίσει αυτή η μινιμαλιστική προσέγγιση που έχει, γιατί μέσα σε πολύ λίγη ώρα μπορώ να στίσω τον βασικό κορμό CSS ενός project, ενώ ταυτόχρονα για οτιδήποτε θέλω να προσθέσω ή να αλλάξω, γίνεται πολύ εύκολα και γρήγορα λόγο της έξυπνης κατηγοριοποίησης και ονοματολογίας των αρχείων του.

Αυτά τα λίγα λοιπόν για τα CSS Frameworks. Γενικότερα δοκιμάστε όσα περισσότερα γίνεται (όπως βλέπεται είναι πάρα πολλά) και προσπαθείστε να βρείτε αυτό που σας ταιριάζει! Εάν ξέχασα κάποιο framework που χρησιμοποιείτε ή που νομίζεται πως αξήζει να αναφερθεί, αφήστε μου ένα σχόλιο, για το κοιτάξω κι αυτό…