Wiggler

 

Είστε Web Developer? Φτιάχνετε για hobby σελίδες στο Internet? Ασχολείστε μανιωδώς με περίεργα ονόματα όπως HTML,CSS,PHP,AJAX, Javascript κ.ο.κ? Αν η απάντηση σε έστω μία απο τις παραπάνω ερωτήσεις είναι “Ναι” τότε αυτή η λίστα είναι ότι πρέπει για σας! Παρακάτω έχω συγκεντρώσει τα 10 καλύτερα extensions για Firefox που επιβάλλεται να υπάρχουν στην εργαλειοθήκη κάθε Web designer/programmer/developer καθώς και 4 bonus extensions που βοηθούν απο άποψη ευκολίας στην πλοήγηση και αισθητικής. Ας αρχίσω λοιπόν…ανάποδα!

Τα 4 extensions που θα σας ξεκουράσουν και θα αυξήσουν την παραγωγικότητά σας, έχουν να κάνουν με αισθητικές περισσότερο βελτιώσεις στο παράθυρο του Firefox, αφου παιρνώντας αρκετά μεγάλο μέρος της ημέρας μπροστά του δεν είναι φορές που χάνεστε μέσα στα πολλά tabs ή χρειάζεστε ένα screenshot μιας σελίδας εύκολα και γρήγορα. Ας αρχίσουμε λοιπόν:

Google Notebook

Με το Google Notebook μπορείτε να σημειώνετε κάτι που έχετε εκείνη την ώρα στο μυαλό σας απευθείας με ένα κλίκ και να το αποθηκεύετε στον απομακρυσμένο λογαριασμό που έχετε στην Google. Το συστήνω ανεπιφύλακτα στους..ξεχασιάρηδες ή σε αυτούς που κρατάν σημειώσεις τακτικά! Το μόνο μειονέκτημα είναι ότι πρέπει να έχετε account στην Google…Δεν έχετε? Κανένα πρόβλημα! Με ένα comment στο post αυτό, σας στέλνω απευθείας invitation! :)

Colorful Tabs

Ένα extension που ξεκουράζει τα μάτια και βοηθάει αρκετά στην απομνημόνευση των σελίδων που είναι ανοιχτές, αφού χρωματίζει διαφορετικά κάθε tab με έναν απαλό τόνο βοηθώντας το web surfing. Αν είστε απο αυτούς που έχετε ανοιχτά 30+ tabs σε ένα παράθυρο (ονόματα δεν λέμε ;) ) θα το βρείτε αρκετά χρήσιμο!

Tab Mix Plus

Το extension αυτό λειτουργεί συμπληρωματικά με το παραπάνω, αφού προσθέτει αρκετές λειτουργίες σε κάθε tab, όπως ξεχωριστό εικονίδιο κλεισίματος του tab αλλά και υποστηρίζει την ύπαρξη δεύτερης μπάρας με tabs σε περίπτωση που έχετε ανοίξει τόσα πολλά που δεν χωράνε σε μία! (Το τελευταίο feauture να πώ την αλήθεια το έψαχνα καιρό και το Tab Mix Plus είναι ακριβώς ότι πρέπει!)

ScreenGrab!

Δεν είναι λίγες οι φορές που θέλετε να πάρετε screenshot μια ολόκληρη σελίδα αλλά ξέρετε οτι κάτι τέτοιο θα σας φάει ώρα τόσο με τα απανωτά Print-Screen όσο και με το edit αργότερα. Η λύση είναι μία, Screengrab! Με το Screengrab! μπορείτε να σώσετε ολόκληρη ιστοσελίδα (ανεξαρτήτου μήκους πλάτους) σε ένα PNG αρχείο με 2 κλίκ! Το εργαλείο δουλεύει άψογα και σε Flash-based σελίδες!

Ας πάμε τώρα στο κυρίως μέρος του post. Τα 10 καλύτερα Firefox Web Developer Extensions! Όπως πάντα θα παρατείνω την αγωνία και θα τα παρουσιάσω με σειρά αυξημένης σημαντικότητας :)

10)Javascript Debugger

Το Javascript Debugger παρέχει ένα πιο advanced εργαλείο απο τον default debugger για Javascript που έρχεται με τον Firefox. Με αρκετές λειτουργίες και δυνατότητες, το Javascript Debugger συστήνεται αν ασχολείστε σε μεγάλα projects που περιέχουν αρκετό JS κώδικα.

9)MeasureIt!

Το extension που…παίρνει τα μέτρα των σελίδων! Είστε σε μία σελίδα και θέλετε να μάθετε ποίο είναι το ύψος της εικόνας/div/table που βλέπετε, με ένα κλίκ στο εικονίδιο του χάρακα κάτω αριστερά έχετε την απάντησή σας κατευθείαν!

8)IE Tab

Θέλετε να κάνετε preview πως φαίνεται η σελίδα σας στον (πολλές φορές σπαστικό όσον αφορά το web developing) Internet Explorer αλλά δεν θέλετε να τον ανοίξετε? No problem! Πατώντας το εικονίδιο του Firefox στο κάτω μέρος του παραθύρου του αγαπημένου σας browser, εναλλάσετε την μηχανή rendering απο αυτή της Mozilla στην αντίστοιχη της Microsoft! Μαγεία? Μάλλον ταχυδακτυλουργία!

7)IE View

Αν πάλι δεν θέλετε να ανοίξετε την rendering engine μέσα στο παράθυρο του Firefox, έχοντας στο IE View, με ένα δεξί κλίκ στην σελίδα που βλέπετε μπορείτε να κάνετε force το άνοιγμα του Internet Explorer με url την ίδια σελίδα!

6)LinkChecker

Ο πίο γρήγορος τρόπος για να ελέγξετε μία σελίδα για broken links είναι μάλλον το LinkChecker! Με ένα κλίκ αρχίζει την διαδικασία ελέγχου των links της σελίδας, χρωματίζοντας κατάλληλα με πράσινο τα valid links και με κόκκινο τα broken!

5)Colorzilla

Το Colorzilla πρέπει να είναι ένα απο τα must-must have extensions για κάθε web designer! Εκτός του ότι σας δίνει την δυνατότητα με ένα πολύ απλό Interface να βρείτε τον κωδικό χρώματος οποιουδήποτε αντικειμένου στην σελίδα, παρέχει και έναν πολύ χρήσιμο Color Picker ο οποίος δεν έχει και πολλά να ζηλέψει απο τον αντίστοιχο του Photoshop!

4)Aardvark

Με το Aardvark [περίεργο όνομα έτσι?] μπορείτε να δείτε real-time τα divs που αποτελούν μια σελίδα και τα ονόματα τους σε περίπτωση που θέλετε να καταλάβετε γρήγορα την δομή μιας σελίδας και τον σχεδιασμό της χωρίς να μάθετε πολλές λεπτομέρειες. Αρκετά καλό για στιγμές του τύπου “ωραία σελίδα! Πως την έκανε..?” :P

3)HTML Validator

Γιατι να τρέχετε στην αντίστοιχη σελίδα της W3C για HTML Validation όταν υπάρχει το HTML Validator extension? Ο Validator αυτός γίνεται πλήρως intergrate στο view-source παράθυρο του Firefox (Ctrl-U) και σας υποδεικνύει μέσω της μηχανής Tidy, τα λάθη που έχει μια σελίδα όσον αφορά την HTML. Επίσης μπορείτε να τσεκάρετε αν μια σελίδα είναι validated ή και πόσα html warnings/errors έχει χωρίς να κάνετε απολύτως τίποτα, απλά με το που φορτώνει παρατηρείτε στο status bar του Firefox το εικονίδιο του extension!

2)Firebug

Ίσως ότι καλύτερο έχει αναπτυχθεί όσον αφορά το debugging Javascript κώδικα και Ajax calls/requests. Το Firebug σας δίνει την δυνατότητα να βρείτε απευθείας τα Javascript errors που περιέχει μια σελίδα και στην συνέχεια σας βοηθάει πάρα πολύ ώστε να τα λύσετε. Το εργαλείο Inspector του Firebug είναι απο τα πιο δυνατά σημεία του extension, αφού μπορεί να “ανακαλύπτει” divs τα οποία περιέχουν δυναμικό AJAX περιεχόμενο, λύνοντας πραγματικά τα χέρια του web developer!

1)Web Developer

Τελευταίο και καλύτερο άφησα το..συνονόματο extension που κάθε web developer πρέπει να έχει! Το extension αυτό παρέχει μια πολύ χρήσιμη toolbar με όλα μα όλα τα εργαλεία που θα μπορεί να φανούν χρήσιμα για ένα web project. Απο ενδελεχή ανάλυση των divs, real-time edit css και html, validators, cookies tools, outlines, το Web Developer extension ψηφίζεται μακράν το καλύτερο αυτής της λίστας!

Ελπίζω να μην σας κούρασα πολύ και να βρήκατε τις παραπάνω πληροφορίες χρήσιμες. Αν πάλι θέλετε να μοιραστείτε ένα web developer extension που σας βοηθάει αρκετά και δεν το έχω αναφέρει, μην διστάσετε!!