Εύκολη σύγκριση Github repositories με το Repocompare.io

Το Repocompare.io είναι το τελευταίο μου προσωπικό (aka. pet) project με το οποίο μπορείς πολύ εύκολα και γρήγορα να συγκρίνεις repositories που φιλοξενούνται στο Github. Πρόκειται για ένα single page application (SPA), στο οποίο προσθέτεις και συγκρίνεις repositories σε αριθμό stars, forks, open issues και άλλων.

Το συγκεκριμένο project είναι υλοποιημένο στο React και γύρω από το οικοσύστημα του. Το build γίνεται μέσω webpack (και babel) και είναι γραμμένο σε ES6 και JSX (ES2015 για την ακρίβεια). Από εκεί και πέρα για state manager χρησιμοποιώ το Mobx, για routing τον React Router καθώς και κάποια επίσημα React components (React Autocomplete). Χρησιμοποίησα επίσης, για πρώτη φορά, το Jest – ένα testing framework από το Facebook – καθώς και CSS modules τα οποία δεν είχα ιδέα τι έκαναν μέχρι τώρα (έχουν πολύ νόημα όταν δουλεύεις με components).

Όποιος θέλει να βοηθήσει μπορεί να το κάνει μιας και το repo είναι ανοιχτό για όλους. Έχω ήδη ανοιχτά κάποια tasks για το project και φυσικά share and enjoy!

Greek in Tech

Τον τελευταίο καιρό δουλεύω σε ένα προσωπικό projectάκι το οποίο έχει αρχίσει και μ’αρέσει πολύ. Ξεκίνησε σαν project Σαββατοκύριακου, το οποίο τελικά μου πήρε 2-3 επιπλέον Σαββατοκύριακα, ωστόσο πλέον έχει φτάσει σε μια μορφή που βλέπεται και λειτουργεί.

Πρόκειται για το Greek in Tech, ένα minimal single-page application (aka. SPA), το οποίο έχει μία και μόνο λειτουργία, να δείχνει ελληνικές λέξεις που χρησιμοποιούνται στην τεχνολογία. Για τους πιο geeks, το site φιλοξενείται κατευθείαν στο Github pages και είναι φτιαγμένο με Backbone.js και RequireJS.

Όποιος θέλει μπορεί να συνεισφέρει στο project ανά πάσα στιγμή είτε με pull request είτε πολύ απλά ανοίγοντας ένα issue για κάποιο feature που θα ήθελε ή για κάποια τεχνολογική ελληνική λέξη που λείπει (μπορείτε να βρείτε όλες τις διαθέσιμες λέξεις σε ένα JSON αρχείο).

Καλές γιορτές σε όλους και αν σας αρέσει η ιδέα διαδώστε το.

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 που δεν αναφέρω παραπάνω, ας αφήσει ένα σχόλιο έτσι ώστε το τεστάρουμε και εμείς…

Nwrapper jQuery plugin

Μόλις τελείωσα ένα πολύ εύχρηστο jQuery plugin με την ονομασία nwrapper. Πρόκειται για ένα utility plugin, με το οποίο μπορείτε να κάνετε wrap ανά όσα elements θέλετε (όπως κάνει η wrap() function του jQuery αλλά με περισσότερες επιλογές)… Για περισσότερες πληροφορίες μπορείτε να ρίξετε μια ματιά σε αυτό το post (στα αγγλικά) και φυσικά στην demo page που έχω ετοιμάσει. Αν έχετε κάποια επιπλέον ιδέα αφήστε μου comment. Enjoy ‘n Share 😉

Κάντε τον Internet Explorer 6 να συμπεριφέρεται σαν Internet Explorer 7!

Ο Stefan Vervoort είχε μια πολύ καλή ιδέα την οποία υλοποίησε κι όλας! Απλά είχε βαρεθεί την (προβληματική;) Javascript μηχανή του IE6 και αποφάσισε να την αναβαθμίσει σε αυτή του IE7! Το μόνο που χρειάζεται να κάνει κάποιος είναι να κατεβάσει ένα Javascript αρχείο, το οποίο περιέχει όλον το απαραίτητο κώδικα έτσι ώστε ο IE6 να συμπεριφέρεται σαν IE7. Εάν ο IE6 σας κάνει νερά στην Javascript, ενώ σε IE7 τα πάντα λειτουργούν άψογα, χρησιμοποιείστε το συγκεκριμένο custom upgrade και γλιτώστε όλη την extra δουλειά!

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 και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Mapstraction: η library για χάρτες

Η Mapstraction είναι μία Javascript library, η οποία παρέχει ένα κοινό API για δημιουργία χαρτών σε όλα τα Javascript APIs που υπάρχουν εκεί έξω! Το παραπάνω με απλά λόγια σημαίνει πως μπορείτε να δημιουργήσετε εύκολα και γρήγορα κάποιον χάρτη από οποιαδήποτε μεγάλη υπηρεσία, όπως Google Maps, Yahoo! Maps, Microsoft Virtual Earth Maps και πολλά άλλα, χρησιμοποιώντας μόνο την Mapstraction library! Τώρα πολύ έξυπνα θα ρωτήσει κάποιος, και γιατί να μην χρησιμοποιήσεις κατευθείαν τα επίσημα API των άλλων εταιρειών? Για δύο πολύ σημαντικούς λόγους :

  1. Μαθαίνοντας μόνο μία library μπορείς να την χρησιμοποιήσεις σε όλα τα map APIs εκεί έξω, άρα μαθαίνεις μία library και την χρησιμοποιείς σε όλα!
  2. Εάν το αφεντικό/πελάτης σας αλλάξει γνώμη τελευταία στιγμή για την υπηρεσία χάρτη που θέλει να έχει το site (πχ. αντί για Google Maps, του έρθει το Microsoft Virtual Earth Maps), δεν χρειάζονται αλλαγές στον κωδικά! Το μόνο που αλλάζει είναι μια γραμμή που υποδηλώνει την υπηρεσία που θα χρησιμοποιείτε!

Όποιοι δουλεύεται με χάρτες σε projects, σκεφτείτε σοβαρά την συγκεκριμένη πρόταση, γιατί σίγουρα θα σας λύσει τα χέρια!

H Yahoo! UI Library προσθέτει selector utility

Η γνωστή effects, Ajax και γενικότερα UI (user interface) library της Yahoo! απέκτησε ένα ολοκαίνουργιο selector utility το οποίο αντιγράφει την μέθοδο επιλογής του jQuery στην Yahoo! UΙ library! Έτσι χρησιμοποιώντας κάποιος την library της Yahoo! μπορεί πλέον να επιλέξει κάποιο element με τον γνωστό jQuery τρόπο :

var p_nodes = YAHOO.util.Selector.query('p');

Όπως φαίνεται όλες οι Javascript/AJAX libraries έχουν αρχίσει να καταλαβαίνουν πόσο δυνατό είναι το jQuery στον συγκεκριμένο τομέα και προσπαθούν να το εντάξουν στην εκάστοτε library τους. Προσωπικά θα συνεχίσω να χρησιμοποιώ το jQuery γιατί εκτός από το ότι είναι απλό, με πολλές δυνατότητες και πολύ εύκολο στην εκμάθηση, είναι και πολύ πιο ελαφρύ σε file size συγκρινόμενο με άλλες libraries (ιδιαίτερα με την Yahoo! UΙ library).