_vimrc

set shiftwidth=2
set tabstop=2
set number
set smartindent
set backspace=2
syntax on

set encoding=utf8
set fileencoding=utf8

abbreviate uricore <%@ taglib \
prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
abbreviate urisql  <%@ taglib \
prefix = "sql" uri = "http://java.sun.com/jsp/jstl/sql" %>
abbreviate urifmt  <%@ taglib \
prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>
abbreviate urifn   <%@ taglib \
prefix = "fn" uri = "http://java.sun.com/jsp/jstl/functions" %>
abbreviate urixml  <%@ taglib \
prefix = "x" uri = "http://java.sun.com/jsp/jstl/xml" %>
abbreviate jsppage <%@ page contentType = "text/html" \
pageEncoding = "utf8" %>

map <F8> <Esc>:!ant javadoc<Return>
map <F9> <Esc>:!ant<Return>
map <F10> <Esc>:!ant run<Return>

(Όπου \ συνεχίζει η ίδια γραμμή, το έχω βάλει απλά για μορφοποίηση)
Δημοσιεύω επιτέλους κάτι που ήθελα να κάνω εδώ και καιρό. Το _vimrc μου. Για όσους δεν ξέρουν το _vimrc είναι το αρχείο ρυθμίσεων για κάθε χρήστη του vim.

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

Για όσους δεν ξέρουν τον vim να πω ότι είναι ένας από τους καλύτερους editor (ο καλύτερος κατά τη γνώμη μου) για να γράψει κάποιος οτιδήποτε, από κώδικα μέχρι ένα αρχείο κειμένου. Σίγουρα όσοι έχουν συνηθήσει το notepad ή γενικά τον τρόπου που γράφουμε ένα αρχείο κειμένου στα windows θα δυσκολευτούν πολύ στην αρχή, αλλά πιστέψτε με, αυτός ο κόπος αξίζει κάθε λεπτό που περνάς μαζί με αυτό τον editor.

Μπορείτε να τον κατεβάσετε και να τρέξετε το vim tutor που θα προσπαθήσει να σας μάθει τα βασικά. Και γράφω θα προσπαθήσει γιατί δεν μπορείς ξαφνικά να μάθεις τον τρόπο γραφής του vim. Τα δάχτυλα έχουν συνηθήσει να πηγαίνουν αλλού, δεν ξέρεις που βρίσκεσαι, πατάς ένα λάθος πλήκτρο και γίνεται πανικός. Εκεί όμως που σε ανταμοίβει είναι όταν κάνεις edit 10000 γραμμές σε ένα λεπτό. Εκεί νιώθεις πολύ "μάγκας". Ή όταν επιλέγεις μια στήλη κειμένου. Λίγοι editors έχουν αυτή την επιλογή.

Εγώ απλά ευχαριστώ τον Γαβριήλ από το Studio FM1 στο ΤΕΙ Κρήτης, όταν με είδε να κάνω edit ένα html αρχείο στον vim και μου ενεργοποίησε το syntax on. Τότε κατάλαβα ότι ο vim δεν ήταν απλά ένας παλαιοληθικός editor...

Internet Explorer 6 και μέγεθος κελιών σε πίνακα

Όπως καταλαβαίνετε τις τελευταίες μέρες κάνω αρκετό development για Internet Explorer 6 (δυστηχώς) κι έτσι χρειάζεται να βρίσκω λύσεις στα διάφορα προβλήματά του.

Το σημερινό πρόβλημα λοιπόν είχε να κάνει με ένα παλιό κώδικα που έφτιαχνε μια ιστοσελίδα με ένα πίνακα. Αυτός ο πίνακας πρέπει να έχει συγκεκριμένο μέγεθος γιατί εκτυπώνεται και δίνεται σε πελάτες. Στην παλιά περίπτωση όλη η html ερχόταν στον browser σε μια γραμμή μέσα από πολλαπλά writes από ένα servlet.

Αφού λοιπόν έφτιαξα μια ωραία σελίδα με τον σκέτο html κώδικα και taglibs παρατηρήθηκε ότι ο πίνακας που έφτιαχνε ο ΙΕ6 ήταν κάπως μεγαλύτερος απ'ότι ο παλιός. Το πρόβλημα βρισκόταν στα κελιά. Αφού σπατάλησα αρκετή ώρα ψάχνοντας να βρω λάθος στον κώδικα τελικά με την βοήθεια του συναδέλφου μου βρέθηκε η λύση.

Αν υπάρχει κενό μεταξύ των html elements μέσα στο td τότε αυτό έχει μεγαλύτερο μέγεθος. Για παράδειγμα αυτό το κελί:

  <td>
    <center>
      <font face = "arial">
        Some text
      </font>
    </center>
  </td>

θα έχει μεγαλύτερο ύψος από αυτό το κελί:

  <td><center><font face = "arial">
        Some text
      </font></center></td>

Με κάτι τέτοια είναι που απορώ πως αυτός ο browser ακόμα έχει 75% μερίδιο στους χρήστες. Μου θύμησε μια περίπτωση που είχα συναντήσει παλιά με τον firefox, όμως εκεί ήταν λάθος του specification ( ο firefox το ακολουθούσε πιστά, ενώ ο IE6 είχε πιο λογική συμπεριφορά).
Τότε προσπαθούσα να πάρω με javascript τα παιδιά πχ ενός td. Το 1ο όμως παιδί δεν ήταν html element. Με τα πολλά ανακάλυψα ότι λόγω των tabs και τον αλλαγών γραμμών στον κώδικα ο firefox τοποθετούσε ως 1ο παιδί ενός td ένα κενό στοιχείο κειμένου. Δηλαδή για να πάρω την επιθυμητή συμπεριφορά στη javascript έπρεπε να γράψω όλο το td σε μια γραμμή.
Ώρες ώρες μου τι δίνουν αυτοί οι browser...

Internet Explorer 6 και select box z-index

Ίσως αρκετοί από εσάς να γνωρίζετε ένα bug του Internet Explorer 6, στο οποίο ένα html select εμφανίζεται πάνω από οτιδήποτε, χωρίς να διαβάζει το z-index που του δίνεται. Π.χ. εμφανίζεται ένα div δυναμικά στη σελίδα, αλλά το select εξακολουθεί να βρίσκεται πάνω από το div. Το πρόβλημα βρίσκεται στο ότι το εν λόγω element δεν είναι html element αλλά είναι στην ουσία το select box που χρησιμοποιούν τα windows μέσα από το win32 api.

Πώς λοιπόν μπορούμε να λύσουμε αυτό το πρόβλημα; Χρησιμοποιώντας το ίδιο bug, που ισχύει και για το iframe. Στην ουσία δηλαδή ένα iframe τοποθετείται κάτω από το div και αποκρύπτει το προβληματικό select box. Χρειαζόμαστε όμως ακόμα ένα div το οποίο θα περιέχει το div το οποίο θέλουμε να δείξουμε.

Ακολουθώντας το παράδειγμα της εικόνας, αν έχουμε το:

<div class = "mydiv">
  Περιεχόμενο, για να δούμε θα εμφανιστεί από πάνω;
</div>

θα πρέπει να το κάνουμε:

<div class = "wrapper">
<div class = "mydiv">
  Περιεχόμενο, για να δούμε θα εμφανιστεί από πάνω;
</div>
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Αυτό που χρήζει προσοχής είναι το conditional include που γίνεται έτσι ώστε το iframe να εμφανίζεται μόνο στον IE 6 και κάτω. Γενικά με αυτόν τον τρόπο μπορεί κανείς να εισάγει κώδικα, όπως css ή οτιδήποτε άλλο, που προορίζεται μόνο για τον IE6 και κάτω.

Τώρα ήρθε η ώρα για να κάνει την δουλειά το css. Έχουμε λοιπόν:

div.wrapper {
    position: absolute;
    left:     5px;
    top:      5px;
    z-index:  10;
    overflow: hidden;
    width:      288px;
  height:     108px;
}

div.wrapper iframe {
    display:    block;
    top:        0px;
    left:       0px;
    z-index:    -1;
    filter:     mask();
  width:      288px;
  height:     108px;
}

div.mydiv {
    position:         absolute;
    left:             0px;
    top:              0px;
    background-color: #EEEEEE;
    border:           4px outset #004080;
    width:            280px;
    height:           100px;
}

Αυτό που πρέπει να προσέξει κανείς είναι τo filter:mask(); που είναι συγκεκριμένο για τον internet explorer και ενεργοποιεί την μηχανή rendering του ActiveX, καθώς επίσης και ότι το width & height είναι λίγο μεγαλύτερα για να συμπεριλάβουν το περιθώριο που έχει τεθεί στο αρχικό div.

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