100+ Μοναδικά Εργαλεία για Web Development

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

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

Σκεφτήκαμε να συντάξουμε μια ολοκληρωμένη λίστα με Εργαλεία για Web Development που θα σας βοηθήσουν να είστε πιο παραγωγικοί, να είστε ενήμεροι και να γίνετε καλύτεροι προγραμματιστές.

JavaScript Libraries

Η JavaScript είναι μια από τις πιο δημοφιλείς γλώσσες προγραμματισμού στον Ιστό. Μια βιβλιοθήκη JavaScript είναι μια βιβλιοθήκη προγραμμένης JavaScript που επιτρέπει ευκολότερη πρόσβαση σε όλη την ανάπτυξη του ιστότοπου ή της εφαρμογής σας. Για παράδειγμα, μπορείτε να συμπεριλάβετε ένα αντίγραφο της φιλοξενούμενης βιβλιοθήκης jQuery της Google χρησιμοποιώντας το παρακάτω απόσπασμα.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

• jQuery: A fast, small, and feature-rich JavaScript library.
• BackBoneJS: Give your JS app some backbone with models, views, collections, & events.
• D3.js: A JavaScript library for manipulating documents based on data.
• React: Facebook’s JavaScript library developed for building user interfaces.
• jQuery UI: A curated set of user interface interactions, effects, widgets, and themes.
• jQuery Mobile: HTML5-based user interface system designed to make responsive web sites.
• Underscore.js: Functional programming helpers without extending any built-in objects.
• Moment.js: Parse, validate, manipulate, and display dates in JavaScript.
• Lodash: A modern utility library delivering modularity, performance, & extras.
• Vue.js: An open source JavaScript framework used for building user interfaces.

Front-end Frameworks

Τα πλαίσια διεπαφής συνήθως αποτελούνται από ένα πακέτο που αποτελείται από άλλα αρχεία και φακέλους, όπως HTML, CSS, JavasScript κ.λπ. Υπάρχουν επίσης πολλά αυτόνομα πλαίσια εκεί έξω. Είμαστε μεγάλοι θαυμαστές του Boostrap και ο κύριος ιστότοπος του KeyCDN είναι χτισμένος σε αυτό. Ένα σταθερό πλαίσιο μπορεί να είναι ένα ουσιαστικό εργαλείο για προγραμματιστές front-end.

• Bootstrap: HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Foundation: Family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
• Semantic UI: Development framework that helps create beautiful, responsive layouts using human-friendly HTML.
• uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Web Application Frameworks

Το πλαίσιο εφαρμογών ιστού είναι ένα πλαίσιο λογισμικού που έχει σχεδιαστεί για να βοηθά και να ανακουφίζει μέρος του πονοκεφάλου που σχετίζεται με την ανάπτυξη εφαρμογών και υπηρεσιών Ιστού.

• Ruby: Ruby on Rails is a web-application framework that includes everything needed to create database-backed web applications, with the MVC pattern.
• AngularJS: Lets you extend HTML vocabulary for your web application. AngularJS is a framework, even though it’s much more lightweight and sometimes referred to as a library.
• Ember.js: A framework for creating ambitious web applications.
• Express: Fast and minimalist web framework for Node.js.
• Meteor: Full-stack JavaScript app platform that assembles all the pieces you need to build modern web and mobile apps, with a single JavaScript codebase.
• Django: High-level Python Web framework that encourages rapid development and clean, pragmatic design.
• ASP.net: Free, fully supported Web application framework that helps you create standards-based Web solutions.
• Laravel: A free, open source PHP web application framework to build web applications on MVC pattern.
• Zend Framework 2: An open source framework for developing web applications and services using PHP.
• Phalcon: A full-stack PHP framework delivered as a C-extension.
• Symfony: A set of reusable PHP components and a web application framework.
• CakePHP: A popular PHP framework that makes building web applications simpler, faster and require less code.
• Flask: A microframework for Python based on Werkzeug and Jinja 2.
• CodeIgniter: Powerful and lightweight PHP framework built for developers who need a simple and elegant toolkit to create full-featured web applications.

Task Runners / Package Managers

• Grunt: JavaScript task runner all about automation.
• Gulp: Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
• npm: Pack manager for JavaScript.
• Bower: A web package manager. Manage components that contain HTML, CSS, JavaScript, fonts or even image files.
• webpack: A module bundler for modern JavaScript applications.

Languages / Platforms

Πίσω από όλα τα εργαλεία ανάπτυξης Ιστού βρίσκεται μια γλώσσα. Μια γλώσσα προγραμματισμού είναι μια επίσημη κατασκευασμένη γλώσσα που έχει σχεδιαστεί για να επικοινωνεί με έναν υπολογιστή και να δημιουργεί προγράμματα στα οποία μπορείτε να ελέγξετε τη συμπεριφορά. Και ναι, συνειδητοποιούμε ότι μερικές από αυτές μπορεί να μην αναφέρονται πάντα ως γλώσσα.

• PHP: Popular general-purpose scripting language that is especially suited to web development.
• NodeJS: Event-driven I/O server-side JavaScript environment based on V8.
• JavaScript: Programming language of HTML and the web.
• HTML5: Markup language, the latest version of HTML and XHTML.
• Python: Programming language that lets you work quickly and integrate systems more effectively.
• Ruby: A dynamic, open source programming language with a focus on simplicity and productivity.
• Scala: Scala is a pure-bred object-oriented language allowing a gradual, easy migration to a more functional style.
• CSS3: Latest version of cascading style sheets used in front-end development of sites and applications.
• SQL: Stands for structured query language used with relational databases.
• Golang: Open source programming language that makes it easy to build simple, reliable, and efficient software.
• Rust: Systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.
• Elixir: Dynamic, functional language designed for building scalable and maintainable applications.
• TypeScript: Open source programming language that is a superset of JavaScript which compiles to plain JavaScript.

Databases

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

• MySQL: One of the world’s most popular open source databases.
• MariaDB: Made by the original developers of MySQL. MariaDB is also becoming very popular as an open source database server.
• MongoDB: Next-generation database that lets you create applications never before possible.
• Redis: An open source, in-memory data structure store, used as a database, cache and message broker.
• PostgreSQL: A powerful, open source object-relational database system.

CSS Preprocessors

Ένας προεπεξεργαστής CSS είναι βασικά μια γλώσσα δέσμης ενεργειών που επεκτείνει το CSS και στη συνέχεια το μεταγλωττίζει σε κανονικό CSS. Φροντίστε επίσης να ελέγξετε σε βάθος την Sass vs Less.

• Sass: A very mature, stable, and powerful professional grade CSS extension.
• Less: As an extension to CSS that is also backward compatible with CSS. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
• Stylus: A new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

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

Text Editors / Code Editors

Είτε κρατάτε σημειώσεις, είτε γράφετε κωδικοποίηση είτε σημειώνετε, ένας καλός επεξεργαστής κειμένου είναι μέρος της καθημερινότητάς μας!

• Atom: A text editor that’s modern, approachable, yet hackable to the core.
• Sublime Text: A sophisticated text editor for code, markup, and prose with great performance.
• Notepad++: A free source code editor which supports several programming languages running under the MS Windows environment.
• Visual Studio Code: Code editing redefined and optimized for building and debugging modern web and cloud applications.
• TextMate: A code and markup editor for OS X.
• Coda 2: A fast, clean, and powerful text editor for OS X.
• WebStorm: Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.
• Vim: A highly configurable text editor built to enable efficient text editing.
• Brackets: A lightweight and powerful modern text editor; written in JavaScript, HTML and CSS.
• Emacs: An extensible, customizable text editor with built-in functions to aid in quick modifications of text and code.
• Dreamweaver: Not your typical code editor, however, Dreamweaver can be used to write code and build websites through a visual interface. Learn more in this simple Dreamweaver tutorial.
• SpaceMacs: A text editor design to operate in both Emacs and Vim editor modes.

Markdown Editors

Το Markdown είναι μια γλώσσα σήμανσης σε απλό κείμενο που χρησιμοποιεί μια εύκολη σύνταξη που μπορεί στη συνέχεια να μετατραπεί σε HTML αμέσως. Σημείωση: Αυτό είναι διαφορετικό από ένα πρόγραμμα επεξεργασίας WYSIWYG. Οι συντάκτες Markdown αναφέρονται μερικές φορές ως οι ενδιάμεσοι WYSIWYG και απλώς γράφοντας κώδικα.

• StackEdit: A free online rich markdown editor.
• Dillinger: An online cloud-enabled, HTML5, buzzword-filled Markdown editor.
• Mou: Markdown editor for developers on Mac OS X.
• Texts: A rich editor for plain text. Windows and Mac OS X.

Μερικοί από τους επεξεργαστές κειμένου που αναφέραμε παραπάνω υποστηρίζουν επίσης το markdown. Για παράδειγμα, υπάρχει ένα πακέτο προεπισκόπησης σήμανσης για το atom.

Icons

Σχεδόν κάθε προγραμματιστής ιστού, ειδικά προγραμματιστές διεπαφής θα χρειαστεί κάποια στιγμή εικονίδια για το έργο τους. Παρακάτω υπάρχουν μερικοί σπουδαίοι πόροι τόσο για δωρεάν όσο και για επί πληρωμή εικονίδια υψηλής ποιότητας.

• Font Awesome: Scalable vector icons that can instantly be customized – size, color, drop shadow, and anything that can be done with the power of CSS.
• IconMonster: A free, high quality, monstrously big and continuously growing source of simple icons. One of our favorites!
• Icons8: An extensive list of highly customizable icons created by a single design team.
• IconFinder: Iconfinder provides beautiful icons to millions of designers and developers.
• Fontello: Tool to build custom fonts with icons.
• Noun Project: Over a million curated icons. Available in both free as well as paid versions for greater customizability.

Git Clients / Services

Το Git είναι ένα σύστημα διαχείρισης πηγαίου κώδικα για λογισμικό και ανάπτυξη ιστού γνωστό για τον κατανεμημένο έλεγχο αναθεωρήσεων. Όταν εργάζεστε με ομάδες, η χρήση ενός πελάτη git για την προώθηση των αλλαγών κώδικα από προγραμματιστή σε παραγωγή είναι ένας τρόπος για να διατηρήσετε το χάος και να διασφαλίσετε ότι τα πράγματα ελέγχονται, ώστε να μην σπάσουν τη ζωντανή εφαρμογή ιστού ή τον ιστότοπό σας.

• SourceTree: A free Git & Mercurial client for Windows or Mac. Atlassian also makes a pretty cool team Git client called Bitbucket.
• GitKraken (Beta): A free, intuitive, fast, and beautiful cross-platform Git client.
• Tower 2: Version control with Git – made easy. In a beautiful, efficient, and powerful app.
• GitHub Client: A seamless way to contribute to projects on GitHub and GitHub Enterprise.
• Gogs: A painless self-hosted Git service based on the Go language.
• GitLab: Host your private and public software projects for free.

Ο διακομιστής ιστού που τελικά θα χρησιμοποιήσετε θα εξαρτάται συνήθως από έναν συνδυασμό προσωπικής προτίμησης, λειτουργικότητας ή προϋπάρχουσας υποδομής. Οι Nginx και Apache είναι οι δύο πιο ευρέως χρησιμοποιούμενοι διακομιστές ιστού, ωστόσο, υπάρχουν και άλλες επιλογές.

• Nginx: An open source and high-performant web server. Handles static content well and is lightweight.
• Apache: Currently powers almost 50% of all websites. Has a larger community around it and a great selection of modules.
• IIS: An extensible web server created by Microsoft. Offers excellent security and corporate support, therefore is not open source.
• Caddy: A relatively new web server. It is an open source, HTTP/2 web server with automatic HTTPS.

API Tools

Οι προγραμματιστές Ιστού συνήθως ασχολούνται με API σε καθημερινή βάση. Είναι απαραίτητα στο σημερινό περιβάλλον ανάπτυξης ιστού, ωστόσο, μερικές φορές μπορεί να είναι δύσκολο να αντιμετωπιστούν από την άποψη της παρακολούθησης, της δημιουργίας ή του συνδυασμού. Ευτυχώς, υπάρχει μια ποικιλία εργαλείων που είναι διαθέσιμα για να κάνουν την εργασία με API πολύ πιο αποτελεσματική.

• Runscope: An API performance testing, monitoring, and debugging solution.
• Zapier: Connect the APIs of various apps and services in order to automate workflows and enable automation.
• Postman: Complete API development environment. Everything from designing, testing, monitoring, and publishing.
• SoapUI: Advanced REST and SOAP testing tool. Ability to perform functional testing, security testing, performance testing, etc.

Local Dev Environments

Ανάλογα με το λειτουργικό σύστημα που εκτελείτε ή τον υπολογιστή στον οποίο έχετε πρόσβαση αυτήν τη στιγμή, μπορεί να είναι απαραίτητο να ξεκινήσετε ένα γρήγορο τοπικό περιβάλλον προγραμματιστή. Υπάρχουν πολλά δωρεάν βοηθητικά προγράμματα που συνδυάζουν Apache, mySQL, phpmyAdmin κ.λπ. όλα μαζί. Αυτός μπορεί να είναι ένας γρήγορος τρόπος για να δοκιμάσετε κάτι στον τοπικό σας υπολογιστή. Πολλά από αυτά έχουν ακόμη και φορητές εκδόσεις.

• XAMPP: Completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.
• MAMP: Local server environment in a matter of seconds on OS X or Windows.
• WampServer: Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.
• Vagrant: Create and configure lightweight, reproducible, and portable development environments.
• Laragon: A great fast and easy way to create an isolated dev environment on Windows. Includes Mysql, PHP Memcached, Redis, Apache, and awesome for working with your Laravel projects.

Diff Checkers

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

• Diffchecker: Online diff tool to compare text differences between two text files. Great if you are on the go and quickly need to compare something.
• Beyond Compare: A program to compare files and folders using simple, powerful commands that focus on the differences you’re interested in and ignore those you’re not.

Code Sharing / Experimenting

Υπάρχει πάντα εκείνη η στιγμή που βρίσκεστε στο Skype ή στο Google hangout με έναν άλλο προγραμματιστή και θέλετε να ρίξετε μια γρήγορη ματιά στον κώδικα σας. Υπάρχουν εξαιρετικά εργαλεία για την κοινή χρήση κώδικα, όπως το Slack, αλλά δεν είναι μέλος της ομάδας σας, υπάρχουν μερικές εξαιρετικές γρηγόροι εναλλακτικές. Θυμηθείτε να μην μοιράζεστε τίποτα ασφαλές.

• JS Bin: Tool for experimenting with web languages. In particular HTML, CSS and JavaScript, Markdown, Jade and Sass.
• JSfiddle: Custom environment to test your JavaScript, HTML, and CSS code right inside your browser.
• codeshare: Share code in real-time with other developers.
• Dabblet: Interactive playground for quickly testing snippets of CSS and HTML code.

Collaboration Tools

Κάθε μεγάλη ομάδα ανάπτυξης χρειάζεται έναν τρόπο να παραμένει σε επαφή, να συνεργάζεται και να είναι παραγωγική. Πολλές ομάδες εργάζονται από απόσταση τώρα. Η ομάδα του KeyCDN είναι στην πραγματικότητα εξαπλωμένη σε πολλές διαφορετικές ηπείρους. Εργαλεία όπως αυτά παρακάτω μπορούν να βοηθήσουν τους υπαλλήλους να βελτιώσουν τη ροή εργασιών ανάπτυξής τους.

• Slack: Messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive.
• Trello: Flexible and visual way to organize anything with anyone. We also use this as KeyCDN.
• Glip: Real-time messaging with integrated task management, video conferencing, shared calendars and more.
• Asana: Team collaboration tool for teams to track their work and results.
• Jira: Built for every member of your software team to plan, track, and release great software or web applications.

Έμπνευση

Όλοι χρειαζόμαστε έμπνευση κάποια στιγμή. Ειδικά για τους προγραμματιστές front-end, από καιρό σε καιρό, μπορεί να είναι ωφέλιμο να ελέγχουν τι κάνουν άλλοι άνθρωποι. Αυτό μπορεί να είναι μια εξαιρετική πηγή έμπνευσης, νέες ιδέες και να βεβαιωθείτε ότι η εφαρμογή ιστού ή ο ιστότοπός σας δεν θα μείνει πίσω από την εποχή.

• CodePen: Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.
• Dribble: A community of designers sharing screenshots of their work, process, and projects.
• Behance: Another community-driven resource where users can showcase and discover creative work.

Website Speed Test Tools

Η ταχύτητα ενός ιστότοπου μπορεί να είναι κρίσιμος παράγοντας για την επιτυχία του. Οι ιστότοποι με ταχύτερη φόρτωση μπορούν να επωφεληθούν από υψηλότερες κατατάξεις SEO, υψηλότερα ποσοστά μετατροπών, χαμηλότερα ποσοστά εγκατάλειψης και καλύτερη συνολική εμπειρία και αφοσίωση χρήστη. Είναι σημαντικό να επωφεληθείτε από τα πολλά δωρεάν εργαλεία που είναι διαθέσιμα για τον έλεγχο της ταχύτητας του ιστότοπου.

• Website Speed Test: A page speed test developed by KeyCDN that includes a waterfall breakdown and the website preview.
• Google PageSpeed Insights: PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
• Google Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome.
• Dotcom-Tools Speed Test: Test the speed of your website in real browsers from 25 locations worldwide.
• WebPageTest: Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
• Pingdom: Test the load time of that page, analyze it and find bottlenecks.
• GTmetrix: Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

Web Development Communities

Κάθε προγραμματιστής  είναι εκεί. Έχουν πρόβλημα και τι κάνουν; Λοιπόν, πηγαίνουν στο Google για να βρουν μια γρήγορη απάντηση. Ο Ιστός προσφέρει τόσο πολύ περιεχόμενο στα χέρια μας που διευκολύνει τη διάγνωση και την αντιμετώπιση προβλημάτων όταν προκύπτουν. Δείτε μερικές καλές κοινότητες ανάπτυξης παρακάτω.

• Stack Overflow: Community of 4.7 million programmers, just like you, helping each other.
• Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community.
• Hashnode: Global community for software developers to connect and learn programming from each other.
• Refind: Community of founders, hackers, and designers who collect and share the best links on the web.
• Google+ Web Developers Group: Web developers, web designers, and web coding.
• Google+ Web Developers Group: Java, PHP, Ruby, JavaScript and Python Resources
• Facebook WordPress Front-end Developers Group: WordPress Front End Developers is a group for devs to ask questions, share their work, discuss emerging trends, and collaborate.
• LinkedIn Web Design and Development Professionals Group: Networking and information sharing resource for professional Web Designers, Web Developers and Web Masters.
• LinkedIn Web Site Development Group: Website design & programming.
• LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
• LinkedIn WordPress Developers Group: WordPress Codex. Using WP as CMS and CMF.
• Webdeveloper.com: Where web developers and designers learn how to build web sites, program in HTML, Java and JavaScript.
• Sitepoint Forums: Web development discussion.
• /r/perfmatters: The #1 subreddit about web performance and web development.
• /r/webdev: What’s new for web developers.

Web Development Newsletters

• wdrl.info: A handcrafted, carefully selected list of web development related resources. Curated and published usually every week.
• webopsweekly.com: A weekly newsletter for Web developers focusing on web operations, infrastructure, deployment of apps, performance, and tooling, from the browser down to the metal.
• web tools weekly: A front-end development and web design newsletter with a focus on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of various apps, scripts, plugins, and other resources.
• https://freshbrewed.co: A weekly reading digest for front-end developers and UX designers.
• smashingmagazine.com: Smashing Magazine is an online magazine for professional web designers and developers. Useful tips and valuable resources sent out every second Tuesday.
• front-end dev weekly: Front-end developer news, tools, and inspiration hand-picked every week.
• friday front-end: Front-end development links tweeted daily, emailed weekly.
• /dev tips: Receive a developer tip, in the form of a gif, in your inbox each week.

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