If you are a web developer, you would sometimes have to do double duty and balance front-end and back-end development. It’s a common thing, and a great way to learn and grow.
So in an effort to reduce your development troubles, here’s a list of time-tested tools you could need:
Note: Those who aren’t doing double duty will find something they like too in this neatly filed list of developer tools.
Front-End Development
CSS and HTML Frameworks:
Foundation by ZURB is fast, efficient, and has been (so far) used by over 36,000 websites’ frameworks. The cross-platform compatible framework is easy to work with and packs an array of features to make fluid front-end development a dream.
Bootstrap by Twitter’s developers is just as (if not more) awesome as Foundation. It’s used by over 7 million websites for building frameworks. Its sleek interface makes for speedy development, and the features add a zing to any web development project.
This super minimalist and efficient framework are for pros looking for simplicity and a clean, solid slate to work with. It only packs basics and there are no ‘advanced’ elements built-in, but that’s what makes it a superb canvas for developers who know exactly what they want and how to make it.
JavaScript Libraries and Frameworks:
AngularJS
Google’s AngularJS took the JavaScript world by storm with customizable components, dependency injections, and extensive library of directives. The learning curve has been a constant complaint, but once you master it (like developers of over 570,000 websites did) you’ll never need or want for more out of a JS framework.
jQuery
This classic library continues to be the JavaScript development’s saving grace. Whether combined with a separate framework or used on its own, it powers over 53 million websites. The numbers remain steady say it all: simple = best.
Angular Material
This library of Material Design UI elements is simply fantastic for Angular developers everywhere. So if you are using AngularJS, get this library for your front-end pronto.
Debugging Testing:
Dromaeo
At its Wiki page, Dromaeo makes a point of telling us the etymology of the name (from Dromaeosaurus, “fast lizard”).
It compiles a list of JS tests from different sources to run a thorough examination (we’re talking everything from 3D effects to DOM attributes, validation, and everything in between).
CSS Lint
This one is a short, sweet-looking CSS ‘cleaner’ with one sharp tongue and we love it for that. It is a static analyzer for your CSS code and sifts through the style sheet to bring potentially error-causing code to light.
Screenfly
Quirktools brilliant and nifty Screenfly will check your page for responsiveness. You enter your page URL and the emulator will let you test its @media queries in over a dozen different device dimensions.
I’m yet to find anything that tops it.
BugHerd
BugHerd lets your website’s (selected) audience and clients in on the visual debugging action. It’s small, elegant, and once you integrate it with Pivotal Tracker, it makes front-end debugging an art.
Backend Development
PHP frameworks and DBMS that work with it:
Zend
While server-side scripting can be done in other languages, we personally prefer PHP. Zend makes our HP coding easy.
This open-source framework uses object-oriented code that lets you develop with precision. Like Angular, it lets you build using as many or as few components as you like (they have very little internal dependencies, gives you more freedom to choose and be specific).
It lets you make the most out of PHP’s prowess.
Symfony
Another agile open-source PHP framework/component library our back-end development whizzes are partial to is Symfony.
Its component library is as comprehensive as they come and takes bits and snippets from everywhere, decouple them and make them reusable at your whim. The components are coded cleanly and ready to use, something we appreciate (and you will too) in a fast-paced development environment.
MySQL
This requires no introduction: everyone knows (or has heard of) MySQL, the single most popular database in the world. It’s open-source, scalable, and is used by most every major and minor business or website out there: Facebook, Google, Alcatel-Lucent, Adobe, and more.
Combined with PHP, you get to enable ‘harness big data’ mode with MySQL.
XAMPP Stack
This all-inclusive, all-purpose, cross-platform compatible development stack combines everything you need to start developing.
This open-source stack from the heart of Apache Friends combines Apache with MariaDB (basically MySQL before it got bought by Oracle), PHP and Perl.
Once you become a part of this 10-year old community of brilliant, giving developers, you’ll never feel like leaving.
Caching:
Memcached
You probably never realized how fast you can go before Memcached: a high-performing generic distributed memory object caching system.
This blazing fast and absolute basic: It serves to be no hindrance to rest of the development process. It’s easy to deploy. It does nothing but eases up servers’ load for dynamic apps by caching database.
Redis
This is another open source in-memory data structure store that does double… no, multiple duty, as a database, a caching layer, or a message broker.
This tool ranks right after MySQL in usage statistics. That is one solid bandwagon we don’t mind getting on.
Search Engines:
Apache Lucene
This beautifully named, supremely elegant, and brutally efficient text search engine library (brought to you by the friendly community of Apache) is written entirely in Java and cross-platform compatible.
It makes high-performance indexing an art (1 MB heap for RAM while running searches at over 150 GB/hour), supports every search algorithm your users could ever need, and allows you to configure the storage engines via codecs.
It is one key to unlock SEO success within your website.
Sphinx
This open source full-text search server is written in C++ and designed “with performance, relevance (aka search quality), and integration simplicity in mind.”
It is lightning fast (think speeds over 60MB/sec per server), super-scalable (Craigslist uses it to handle hundreds of millions of search queries a day), and still manages to retain quality and relevance (with search queries) through the algorithm.
Get it. You won’t regret it.
Version Control:
Git
Git is free and open source version control system that can handle small projects, large projects, and everything else in between with speed and efficiency.
GitHub
GitHub is the global collaborative forum for public projects that came from Git. For private projects, you’ll have to get a paid plan.
Bitbucket
This is another collaborative/sharing solution for Git repositories. The nice thing about it: it scales up with your work.
Miscellaneous
Mixed list of tools that could be of interest to full-stack developers (both front-end and back-end):
Open Iconic
If you’ve used Icomoon or Fontello icon fonts, you are going to love Open Iconic.
It has 220+ icons in SVG, raster, and webfont formats, work with Bootstrap and Foundation fonts, and completely customizable with CSS (no more gray icons).
Typetester
There’s nothing to it. It simply lets you test different types in many sizes for the way they (will) look in a browser.
CSS Refresh
CSSrefresh is a small, unobtrusive JS file that monitors the CSS-files included in your webpage.
With this: You save a CSS-file and wait for a blink-of-the-eye, and the changes are implemented without your browser refreshing all over.
Neat, huh? It also has a version for WordPress. We love that even more.
Normalize.css
Normalize.css by Nicolas Gallagher and Jonathan Neal is a nifty customizable CSS script that makes browsers render the elements in a way more compliant with modern standards.
It’s specific: it precisely targets only the styles that need normalizing. It supports all major browser (n -1 versions) and preserves defaults it knows are important, unlike other resets that will mow down ‘normalizing’ all over your stylesheet without thought for anything more than users’ browser version.
Plunker
Who isn’t sick of JSfiddle by now? Okay, maybe it’s just me then.
Plunker, on the other hand, is an online community (the editor is the bonus here, not the other way around) that helps you “create the web” by “collaborating on and sharing your web development ideas”.
It’s speedy, easy, and collaborative, and feels like that too with its non-clunky interface (JSfiddle should probably look into that).
PageSpeed Insights
Google’s PageSpeed Insights checks your front-end HTML, CSS, content and JavaScript as well as server-side configuration to score your page’s performance. It measures the time elapsed between request sent and above-the-fold rendering, and request sent and full-page rendering.
The scores can be an eye-opener for many. The insights, however, also gives you tips to correct and improve.
Modernizr
Another browser helping ‘polyfill’, only, instead of changing your markup, it serves the code selectively based on browser capability (so as not to overwhelm them).
If you develop with progressive enhancement, Modernizr is your best friend. Even if you don’t it’s still pretty useful. And it’s only a tiny bit of JavaScript code that detects browser features and renders your content/front-end accordingly.
Vagrant
Vagrant is an entire virtual development environment that makes you feel like a Bond villain (if that’s something you like to do).
It gives you complete control over an interface that has no graphics (and, therefore, works faster than you can think). Back-end development becomes exponentially faster with a VM (virtual machine) powered by Vagrant.
You can launch apps or annihilate the entire thing, with a single command and execute it before you blinked.
