Γρήγορο 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 αλλά πολλές φορές και μόνος μου!

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

Progressive enhancement : Tsevdos.com sidebar

Το δεύτερο και ίσως αγαπημένο μου feature στο Whitepress theme, είναι η AJAX-powered, αλλά ταυτόχρονα accessible sidebar του! Την τεχνική την δανείστηκα από το blog jQuery for designers και πιο συγκεκριμένα από το post jQuery Tabs, και ο λόγος που την λάτρεψα είναι επειδή χρησιμοποιεί σωστά αυτό που ονομάζουμε progressive enhancement. Progressive enhancement με πολύ απλά λόγια σημαίνει πως ο χρήστης έστω και εάν δεν έχει την javascript ενεργοποιημένη στον browser, η sidebar και ολόκληρο το περιεχόμενο της θα εμφανίζεται κανονικά! Το μόνο που θα χάσει ο χρήστης σε αυτήν την περίπτωση είναι το AJAX-like εφέ που δημιουργεί η Javascript (και πιο συγκεκριμένα το jQuery), ενώ θα βλέπει και όλα τα tabs ανοιχτά, το ένα κάτω από το άλλο. Όπως μπορείτε να παρατηρήσετε και από τις 2 παρακάτω εικόνες, ο χρήστης με ενεργοποιημένη Javascript έχει περισσότερο ελεύθερο χώρο στην sidebar του, και μπορεί να επιλέξει ποιο tab θα είναι ενεργοποιημένο. Αντίθετα κάποιος χρήστης με απενεργοποιημένη Javascript ή screen reader απλά βλέπει κανονικά και στην σειρά όλο το περιεχόμενο της sidebar με την σειρά που εμφανίζεται στην markup!

Tsevdos.com with Javascript on
Η sidebar όπως εμφανίζεται σε browser που έχει ενεργοποιημένη την Javascript.
Tsevdos.com with Javascript off
Η sidebar όπως εμφανίζεται σε browser που δεν έχει ενεργοποιημένη την Javascript.

Η markup (XHTML)

Ας δούμε όμως πως μπορούμε να φτιάξουμε το συγκεκριμένο εφέ εύκολα και γρήγορα. Εν αρχή λοιπόν (όπως πάντα) η markup μας.


Όπως βλέπεται ένα div με το id sidebar, περιέχει μια unordered list (ul), με τρία list items (li), τα οποία στην ουσία λειτουργούν ως navigation list για τα τρία divs που ακολουθούν και θα περιέχουν το περιεχόμενο μας. Φυσικά η navigation list μπορεί να έχει περισσότερα links, αρκεί να υπάρχουν και τα ανάλογα divs περιεχομένου από κάτω. Αυτό ήταν, η markup είναι έτοιμη! Το μόνο που θα πρέπει να προσέξει κάποιος (θα εξηγήσω παρακάτω το γιατί), είναι πως σε περίπτωση που θέλει να προσθέσει επιπλέον ζευγάρια links και divs (για να έχει επιπλέον tabs και περιεχόμενο δηλαδή), θα πρέπει το link μέσα στο list item, να έχει για href attribute ακριβώς το ίδιο string με το id του div που θα προσθέσει. Όπως ήδη μπορείτε να δείτε, όλα τα links έχουν για href attribute τα id των div που θα εμφανίζουν.

H CSS

To styling (CSS) της συγκεκριμένης markup δεν παίζει κανέναν απολύτως ρόλο στον κώδικα μας (όλη η δουλειά γίνεται μέσω Javascript/jQuery), ωστόσο γι αυτούς που θέλουν να δημιουργήσουν κάτι στα γρήγορα, ας αντιγράψουν τον παρακάτω κώδικα, τον οποίο χρησιμοποιώ και στο παράδειγμα που μπορείτε να δείτε και φυσικά να κατεβάσετε!

* {
margin: 0;
padding: 0;
}

#sidebar {
width: 500px;
margin: 20px;
margin-bottom: 15px;
border-left: 1px solid #999;
}

#navigation {
list-style-type: none;
}

a:link, a:visited {
color: #fff;
background: #ccc;
padding: 1px 5px 0;
text-decoration: none;
font-weight: bold;
}

a:hover, a:active, a.selected {
color: #fff;
background: #999;
}

#navigation li {
list-style-type: none;
float: left;
border: 1px solid #999;
border-width: 1px 1px 0 0;
}

#sidebar div {
clear: left;
padding: 10px;
border: 1px solid #999;
border-width: 1px 1px 1px 0;
}

Και τέλος η Javascript (jQuery)

Και επιτέλους περνάμε στην καρδιά αυτού του tutorial, δηλαδή στην Javascript και το jQuery πιο συγκεκριμένα! Για τους ανυπόμονους, ο κώδικας είναι ο παρακάτω, ωστόσο καλό θα είναι να τον εξηγήσουμε και λίγο, γιατί πολλά πράγματα γίνονται, μέσα σε πολύ λίγες γραμμές κώδικα…



Στην πρώτη γραμμή λοιπόν, δηλώνουμε στην markup πως θα κάνουμε χρήση της jQuery library. Η συγκεκριμένη library (όπως και οι περισσότερες άλλωστε) λειτουργεί όταν το DOM (Document Object Model) είναι έτοιμο. Αυτό ακριβώς κάνει ο παρακάτω κώδικας. Μέσα του θα προσθέσουμε όλον το Javascript κώδικα ο οποίος με την βοήθεια και της βιβλιοθήκης θα δημιουργήσει το εφέ μας.

$(document).ready(function(){
...
});

Επιλέγουμε λοιπόν τα links (anchor elements) που βρίσκονται μέσα στην unordered list με id navigation, και τους προσθέτουμε ένα απλό click event. Με άλλα όταν γίνει click σε κάποιο link της λίστας, τότε ο κώδικας που βρίσκεται ανάμεσα στις αγκύλες ενεργοποιήται.

$('#sidebar #navigation li a').click(function() {
...
});

Και πάμε πλέον στο τι γίνεται όταν πατηθεί κάποιο από τα παραπάνω links. Αρχικά επιλέγουμε όλα τα divs της sidebar (#sidebar > div) και τα κρύβουμε (hide()). Ταυτόχρονα εμφανίζουμε το div (με ένα απλό fadeIn εφέ) το οποίο έχει id ίδια τιμή με το string της href attribute του link (hash). Για τον λόγο αυτό σας προειδοποίησα παραπάνω πως πρέπει να προσέξουμε πολύ στην markup μας αυτήν την μικρή λεπτομέρεια. Εάν δεν έχουν ίδια τιμή ο κώδικας απλά δεν παίζει… Για να το κάνω ακόμα πιο κατανοητό (για αυτούς που κάνουν τώρα τα πρώτα τους βήματα σε jQuery), ας υποθέσουμε πως πατήθηκε το link Section 1, το οποίο έχει για href attribute την τιμή “#first_div”. Μόλις γίνει click λοιπόν, το jQuery θα κρύψει όλα τα divs της sidebar, και θα επιλέξει το div το οποίο έχει για id την τιμή #first_div. Αυτό γίνεται επειδή το this.hash εκείνη την στιγμή παίρνει την τιμή #first_div. Μόλις ολοκληρωθεί και αυτό, απλά εμφανίζουμε με fade in το συγκεκριμένο div. Και όλα αυτά γίνονται μόλις σε 1 γραμμή κώδικα!

$('#sidebar > div').hide().filter(this.hash).fadeIn();

Ευτυχώς ο υπόλοιπος κώδικας είναι πολύ πιο κατανοητός και εύκολος. Στις παρακάτω 3 γραμμές απλά επιλέγουμε όλα τα links και τους αφαιρούμε (εάν έχουν, όμως πάντα ένα link θα έχει) την κλάση “selected”, η οποία και δίνει το ανάλογο style στο επιλεγμένο link. Τέλος προσθέτουμε στο link που έχει γίνει το click την κλάση “selected”, έτσι ώστε να φαίνεται πως είναι επιλεγμένο (highlighted), και δηλώνουμε στον browser να σταματήσει την default ενέργεια του click event (return false;), μιας και έχουμε πετύχει το εφέ που θέλουμε!

$('#sidebar #navigation li a').removeClass('selected');
$(this).addClass('selected');
return false;

Τέλος σε όλο αυτό το click event προσθέτουμε ένα από τα αγαπημένα μου χαρακτηριστικά που έχει το jQuery. Φιλτράρουμε το πρώτο element που έχει επιλεχθεί, δηλαδή το πρώτο link της λίστας μας, και κάνουμε click πάνω του, μέσω κώδικα! Έτσι όταν στο τέλος εμφανίζεται η σελίδα το πρώτο link (ή tab ή όπως αλλιώς θέλετε να το πείτε), θα είναι πάντα επιλεγμένο!!! Αυτό ήταν, είναι έτοιμο, δουλεύει και πάνω από όλα, είναι φιλικό προς όλους τους χρήστες! Δοκιμάστε να απενεργοποιήσετε την Javascript και θα δείτε πως θα συνεχίζει να δουλεύει χωρίς κανένα πρόβλημα, απλά θα χάσει λίγη από την μαγεία του…

.filter(':first').click();

Επίλογος

To jQuery είναι πραγματικά μια φανταστική Javascript library η οποία κάνει τα δύσκολα πράγματα απλά! Όπως βλέπεται μέσα σε μόλις 6-7 γραμμές κώδικα έχουμε ένα πολύ όμορφο και accessible αποτέλεσμα το οποίο μπορεί να χρησιμοποιηθεί παντού! Η δυνατότητα του να κάνεις εύκολα και γρήγορα αυτά που έχεις στο μυαλό σου, χωρίς να σε απασχολούν οι μικρολεπτομέρειες τις Javascript (οι οποίες πιστέψτε με είναι πολλές και ενοχλητικές), είναι αυτό που κάνει το jQuery να ξεχωρίζει από τις άλλες libraries. Τέλος για όσους θέλουν μια ακόμα πιο εύκολη και φυσικά accessible λύση καλό θα είναι να ρίξουν και μια ματιά στο UI Tabs το οποίο είναι ένα επίσημο plug-in για το jQuery και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Στρογγυλές γωνίες (rounded corners) χρησιμοποιώντας μόνο CSS και 1 γραφικό

Από καιρό ήθελα να γράψω ένα tutorial με θέμα τις στρογγυλές γωνίες (rounded corners) και την HTML/CSS που κρύβεται πίσω από ένα τέτοιο εγχείρημα, όμως πάντα κάτι τύχαινε και δεν το έγραφα. Σήμερα λοιπόν έχετε την ευκαιρία να διαβάσετε ένα πολύ ενδιαφέρον tutorial πάνω στο θέμα, στο οποίο χρησιμοποιώ και πολλές άλλες ενδιαφέρουσες τεχνικές σε CSS κυρίως επίπεδο.

Ας αρχίσουμε λοιπόν φτιάχνοντας ένα div (division) το οποίο θα περιέχει το κείμενο μας (του δίνω και μία κλάση/class έτσι ώστε να ξεχωρίσει από τα υπόλοιπα), και εφαρμόζω κάποια βασικά styles έτσι ώστε να φαίνεται καλύτερα.


Κείμενο...

* {
margin: 0;
padding: 0;
}

body {
padding: 20px;
}

div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
}

Αναγκαίο κακό εάν θέλουμε στρογγυλές γωνίες στο web, είναι η extra non-semantic markup (ούτε και εμένα μ αρέσει, αλλά δεν γίνεται αλλιώς), οπότε βάζουμε αναγκαστικά άλλα 4 span elements μέσα στο div μας, ένα για κάθε γωνία.

  Κείμενο...  

Και τώρα μπορούν να αρχίσουν τα ωραία ;-). Το γραφικό που χρησιμοποιώ είναι ένας κύκλος με διάμετρο 20px (width και height). Αυτό που θέλω να πετύχω είναι όλα τα span elements, να δείχνουν αυτόν τον κύκλο, αλλά διαφορετικό κομμάτι του κάθε φορά! Ας γράψουμε λοιπόν τους γενικούς κανόνες για τα span elements, αφού προσθέσουμε άλλον έναν σημαντικό κανόνα για το positioning στο div μας. (Το γραφικό που χρησιμοποιώ μπορείτε να το κατεβάσετε από εδώ circle )


div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
position: relative;
}

div.rounded span {
width: 10px;
height: 10px;
background-image: url(circle.gif);
background-repeat: no-repeat;
position: absolute;
}

Με τον κανόνα που πρόσθεσα στο div (position: relative;) θα μπορέσω στην συνέχεια να τοποθετήσω τα span elements ακριβώς εκεί που θέλω με absolute positioning. Τα span προς το παρόν, απλά δείχνουν πάντα την πάνω αριστερή μεριά του κύκλου. Μην ξεχνάτε πως τα span είναι 10px (ύψος-πλάτος) ενώ οι διαστάσεις του γραφικού είναι 20px! Επίσης ρυθμίζω να μην επαναλαμβάνεται το γραφικό στο background, αν και ο συγκεκριμένος κανόνας δεν χρειάζεται, τον έχω προσθέσει για σιγουριά.

Τέλος απλά τοποθετούμε το κάθε span στην σωστή γωνία με absolute positioning (το tl πάνω αριστερά – top left, το tr πάνω δεξιά – top right, κοκ.). Αυτό γίνεται πολύ εύκολα με τους positioning κανόνες top, left, right και bottom και τις ανάλογες τιμές τους (0 στο παράδειγμα μας, μιας και θέλουμε να βρίσκονται ακριβώς στις γωνίες του div). Είναι σχεδόν έτοιμο, το μόνο που πρέπει να κάνουμε τώρα είναι να παρουσιάζουμε το σωστό κομμάτι του κύκλου/γραφικού μας στο κάθε span. Αυτό γίνεται με background-positioning στο καθένα από τα span μας!


span.tl {
top: 0; left: 0;
background-position: top left;
}

span.tr {
top: 0; right: 0;
background-position: top right;
}

span.bl {
bottom: 0; left: 0;
background-position: bottom left;
}

span.br {
bottom: 0; right: 0;
background-position: bottom right;
}

Για όσους δεν έπιασαν το τελευταίο κομμάτι (μιας και οι προηγούμενοι κανόνες είναι πιο ξεκάθαροι) θα τους πρότεινα να βάλουν και τον παρακάτω κανόνα στον κώδικα τους και να παρατηρήσουν τις γωνίες τους! Όπως βλέπεται, το γραφικό που έχουν είναι πάντα το ίδιο, απλά το span με κλάση/class tl (top left), εμφανίζει την πάνω αριστερή μεριά του κύκλου, μιας και το span δείχνει μόνο 10px σε ύψος και πλάτος από τα 20px που έχει συνολικά το image μας. Έτσι εμφανίζουμε μόνο την μεριά του κύκλου που θέλουμε σε κάθε γωνία μας.


div.rounded span {
border: 1px solid red;
}

Τέλος για τους λάτρεις του jQuery αλλά και της καθαρής markup, στο παράδειγμα που έχω ανεβάσει, έχω φτιάξει άλλο ένα div, στο οποίο έχω προσθέσει μέσω DOM την απαραίτητα markup του παραπάνω παραδείγματος. Έτσι προσθέτοντας μία μόνο γραμμή Javascipt (και το jQuery φυσικά), μπορούμε να απολαύσουμε την πεντακάθαρη markup έχοντας το ίδιο φυσικά αποτέλεσμα! Δείτε τον παρακάτω κώδικα (ή το για όσους βαριούνται να πληκτρολογούν το δεύτερο div, απλά δείτε το δεύτερο div του παραδείγματος) και θα καταλάβετε τι εννοώ.

Κείμενο...

$(document).ready(function(){
$('.jquery').prepend('').append('');
});

Το μόνο πρόβλημα σε αυτήν την περίπτωση είναι πως εάν ο χρήστης δεν έχει ενεργοποιημένη την Javascript, δεν θα δει στρογγυλές τις γωνίες του div, μιας και αυτές “εισχωρούν” στο DOM μέσω Javascript. Το τελικό αποτέλεσμα μπορείτε να το δείτε αλλά και να το κατεβάσετε (σε zip format).

Η συγκεκριμένη τεχνική δουλεύει σε όλους τους μοντέρνους browsers, αλλά όχι στον IE6 (ο οποίος δεν είναι μοντέρνος, απλά πολλοί χρήστες τον χρησιμοποιούν ακόμα)! Εάν λοιπόν δεν σας ενδιαφέρει ο συγκεκριμένος browser (εδώ δεν ενδιαφέρει την 37signals) μπορείτε να χρησιμοποιήσετε την συγκεκριμένη τεχνική αμέσως! Εάν πάλι σας ενδιαφέρει και ο IE6 καλό θα είναι να δοκιμάσετε κάποια ανάλογη τεχνική με floats και 4 images (δυστυχώς)… Περιμένω σχόλια και προτάσεις για tutorials (yes, I’m on fire!!! 😉 )…

Η HTML 5 έρχεται…

Για τα ανήσυχα μυαλά που θέλουν να είναι έτοιμοι πριν από όλους τους άλλους, το W3C δημοσίευσε την προηγούμενη εβδομάδα τα πρώτα specifications της HTML 5! Μαζί με τις διαφορές που υπάρχουν μεταξύ HTML 5 και HTML 4 καθώς και τον επίσημο οδηγό του web developer στην HTML 5, είναι τα πληρέστερα (και επίσημα) κείμενα που υπάρχουν για την νέα markup language, αυτήν την στιγμή.

Αν και δεν μπορώ να πω πως έχω μελετήσει αναλυτικά όλα τα παραπάνω specifications της HTML 5, έχω ανακαλύψει ήδη πολλά ενδιαφέροντα χαρακτηριστικά, όπως :

  • Πολλά νέα elements για καλύτερο και πιο semantic structure, όπως header, footer, nav, section, article, aside, dialog κτλ.
  • Πολλά βελτιωμένα elements για embedded content, όπως figure, audio και video. Στα δύο τελευταία δίνεται και η δυνατότητα ενσωμάτωσης user interface μέσω της markup αλλά και ενός API, έτσι ώστε ο χρήστης να μπορεί να ελέγχει το video/audio file. Το user interface θα δημιουργείτε από την rendering engine του εκάστοτε user agent!
  • time element, που θα αντιπροσωπεύει χρόνο (ημερομηνία, ώρα, κτλ.)
  • canvas element, για on-line rendering γραφικών
  • Templates elements όπως datatemplate, rule, and nest. Με αυτόν τον τρόπο η ίδια η markup αποκτά templating δυνατότητες!
  • Form validation μέσω της markup (σε client-side επίπεδο φυσικά). Έτσι στα input elements, δηλώνοντας απλά τον τύπο τους (type) στην markup (όπως πχ. date, number, email, url, κτλ) θα αναγκάζουμε τον user agent του browser να αναλαμβάνει το client-side validation

Μαζί με τα νέα χαρακτηριστικά, η καινούργια markup αφήνει πίσω της πολλά άχρηστα elements και attributes τα οποία είχαν παρατήσει εδώ και καιρό οι έμπειροι developers, όπως :

  • font, επιτέλους όλο το styling θα γίνεται αναγκαστικά μέσω CSS
  • frame, frameset και noframes. Δεν νομίζω πως χρειάζονται περαιτέρω διευκρινήσεις για την επιλογή του W3C σε αυτό το θέμα
  • applet
  • Όλες τις presentational attributes όπως : align, background, bgcolor, cellpadding, cellspacing, border, valign κτλ. Εάν κάποιος θέλει να τις χρησιμοποιήσει, θα πρέπει και πάλι να στραφεί στην CSS

Τέλος αξίζει να σημειωθεί πως πάνω στην καινούργια markup θα χτιστούν και πολλά API για την ευκολότερη υλοποίηση web εφαρμογών, όπως :

  • 2D drawing API το οποίο θα χρησιμοποιείται για on-line rendering γραφικών μέσω του νέου canvas element
  • API για την δημιουργία interface στοιχείων (όπως play, pause, κτλ.) στα video και audio elements
  • Δυνατότητα client-side αποθήκευσης δεδομένων. Τώρα αυτό το κομμάτι δεν ξέρω πως θα υλοποιηθεί από τον κάθε browser, αλλά θα μάθουμε σύντομα περισσότερες λεπτομέρειες
  • API για δημιουργία offline web εφαρμογών. Έτσι ακόμα και εάν δεν υπάρχει internet access, η web εφαρμογή θα συνεχίσει να λειτουργεί κανονικά! Σε συνδυασμό με το χαρακτηριστικό μιας client-side database καταλαβαίνουμε όλοι πόσο μπροστά θα πάνε τα πράγματα
  • Drag and drop API, το οποίο θα μπορεί να γίνει attached σε σχεδόν οποιοδήποτε element μέσω της νέας draggable attribute
  • Editing API, το οποίο θα λειτουργεί με τα elements που έχουν την νέα contenteditable attribute. Όπως καταλαβαίνεται τα Wiki-like και γενικότερα τα social-based sites θα περάσουν σε άλλο επίπεδο
  • Network API
  • Διάφορα άλλα API μικρότερης σημασίας ή πιο εξειδικευμένων λειτουργιών

Εάν έχετε κάποια εμπειρία σε (X)HTML και βαριέστε να διαβάσετε όλα τα specifications της HTML 5 (όπως εγώ), προτείνω να ξεκινήσετε από το κείμενο που περιγράφει τις διαφορές που έχει με την HTML 4. Το κείμενο είναι περιεκτικότατο, σαφέστατο και δεν κουράζει καθόλου (σε αντίθεση με τα επίσημα specifications)! Καλό διάβασμα!

Το WebKit είναι η πρώτη rendering engine που υποστιρίζει client-side database αποθήκευση!

Πραγματικά δεν μπορώ να καταλάβω γιατί αυτή η είδηση δεν πήρε τις διαστάσεις που θα έπρεπε, μιας και την θεωρώ εξαιρετικά σημαντική, τόσο για την εξέλιξη του internet όσο και των εφαρμογών του! Το WebKit λοιπόν, η μηχανή rendering που κρύβεται πίσω από πολλούς browsers, όπως Safari και Konqueror, είναι πρώτη μηχανή rendering που θα υποστηρίξει HTML5 client-side database αποθήκευση. Αυτό με πολύ απλά λόγια σημαίνει πως οι browsers που βασίζονται στο WebKit, θα έχουν την δυνατότητα database αποθήκευσης στην client-side (browser) μεριά! Το συγκεκριμένο feature θα δώσει άπειρες επιπλέον δυνατότητες και προοπτικές στους developers οι οποίοι θα έχουν στην διάθεση τους ένα ακόμη χαρακτηριστικό, που μέχρι τώρα δεν υπήρχε και φυσικά περιόριζε πολύ το web σαν πλατφόρμα εφαρμογών. Όπως όλα δείχνουν οι browser θα εξελιχθούν στην μία και μοναδική εφαρμογή που θα χρειάζεται ο μέσος χρήστης, μιας και σιγά-σιγά μετατρέπονται σε υπέρ-API για όλες τις κατηγορίες εφαρμογών.

Είμαι περίεργος να δω την απάντηση της Mozilla με την Gecko rendering engine, καθώς και της Opera στο εν λόγω θέμα (η Microsoft προβλέπω να αργεί πολύ ακόμα). Το μόνο που εύχομαι είναι να ακολουθήσουν όλοι τα επίσημα standards έτσι ώστε να μην έχουμε browser-wars 2!