We’re not ones to adhere to stereotypes, but it’s probably been a while since a (stereo) typical web developer shaved his damn beard, or changed his clothes, or took a bath, or shaved that damn beard…
You really can’t blame them. It’s been a while since all developers took a breather. 2015 has been a good year with leaps and bounds of advancements in web development tech, but no more can a developer just break out his Laptop/MAC (like a boss) and code for a platform at his leisure.
Now you’ve got to take care of the responsive design with multi-platform support, HTML5, PHP7 set for release a bit further on in the year, browsers like IE that won’t stop bugging everything up …the gradually growing-to-Matrix-like-levels of Internet of Things itself.
It’s all we developers can do to keep up. But we do, due mostly to these nifty tools.
Take a look.
1. Komodo Edit
Everything’s born from code for a developer, so it’s only natural to start with the best editing tool you can find. Komodo Edit is quite kosher for all that and more. It is a nice cross-platform, multi-language text-editor for you to write and edit your code in. Oh, and it’s free.
The tool works on Windows, Mac, Linux/UNIX, so no sweat there. We also like it for its auto code-completion feature for languages like HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (for the 5 or so people in the world), etc. That’s one smart text-editor.
Bonus points for added convenience of Project Manager feature for organizing and keeping track of files.
2. CSS 3.0 Maker
Let’s be honest, despite everything you love about CSS3, you can’t help but hate it a little when it comes to writing syntax for things like rounded damned edges. It’s such a trivial detail to lose your sleep over, but you do anyway. You can’t memorize more than 100 new properties and their respective prefixes. So, thank the Lord for a tool like CSS 3.0 Maker.
This neat little online tool will let you copy and paste tricky code into your style sheet. It generates code for style details like box radii, gradients, text and box shadows, transforms, transitions and rotations of your choice. It will also show which desktop and mobile browsers support those style properties. A little preview area will show the effect, the code can be copied from the view box or downloaded within an HTML file.
For those of us who can’t devote far-too-much time on seemingly banal style details, this tool is a life saver.
3. –prefix-free
“Break free from CSS prefix hell!” – Prefix-free intro page.
This is a no-nonsense tool, brought to deliver us from ‘prefix hell’ by an angel named Lea Verou of Github. It will add vendor prefix (somewhere you can’t see) to style sheets in <link> or <style> elements. Also: You won’t have to worry about new <link> or <style> elements, jQuery’s .css() prefixes, or any changes you make, ’cause it will cover it all.
What’s not to like?
4. Blokk Font
‘Lorem Ipsum’ has been the go-to placeholder text for far-too-long. Fortunately, we now have Blokk: The font to put the ‘pain’ of incomprehensible Latin to a screaming halt.
Blokk gives you block ‘text’ to be used as placeholder while creating mockups and wireframes. It also goes without saying that it won’t confuse the less, uh, web-enlightened clients during presentations.
5. Fontello
Before icon fonts became a thing, developers had to enlist the help of designers to create scalable icons. The time it took to develop them (which, by the way, includes creating, extracting, implementing, and customizing) bordered on ‘absolutely ridiculous’. But then someone turned icons into fonts and everyone lived happily… for the foreseeable future.
Fontello is a great icon font generator. It’ll let you take your pick from thousands of icons, customize their mapping or edit their names, and compile them in a single font file. It’s amazing and it’s free.
We can’t thank Vitaly Puzrin enough.
6. Typetester
Turn on your browser’s JavaScript and start testing what your chosen typeface will look like on an actual site.
Typetester is uncomplicated. It lets you enter and compare different fonts and test their appearance. You can also play around with size, tracking, color, etc. until you get what you want. You can compare up to 36 different typefaces at once. Imagine the amount of time you can save with that.
It’s pretty cool.
7. Dirty Markup
Coding can be slightly tiring sometimes, but code-cleaning exists on Level: Utter Tedium. It is necessary though, if you want to prevent errors and load faster.
Dirty Markup helps save the time you can otherwise spend pursuing more interesting activities (bacon sandwich, anyone?). This one comes with combined capabilities of other single-syntax cleaning tools. We’re talking HTML Tidy, CSS Tidy, JS Beautify, and Ace Editor. That’s one comprehensive cleaner.
It’s a web based app for cleaning and formatting your HTML, CSS, and JavaScript. We can’t possibly ask for more.
8. BugHerd
You might just become a bug-killing vigilante with this powerful tool.
BugHerd follows the age-old adage of ‘Keep it Short and Simple, Stupid”. It can capture client-feedback, resolve minor issues by itself, track bugs (for you to exterminate). It’ll also play Secretary and manage your projects.
A super-easy point-and-click UI on your site lets your users report issues. BugHerd turns them into reports with all the information you could need (like user’s browser version). It’s easy to set up, fun to use, and has features like automatic screenshots (browser extension), direct links, file attachments, full selector data, and discussions.
At $ 29/month standard subscription, that’s a catch.
9. Screenfly
Responsive Web Design is more than a new fad, in that it’s here to stay. But for now, you will find fluid layouts tricky at best. You will also find yourself worked up to a violent rage trying to test your layout on various screen sizes.
Fortunately, Screenfly is a nice little web-app that will test your @media queries for you. You plug in your URL and it’ll show how your queries handle device dimensions you’re clicking through in the top panel.
It doesn’t factor in the rendering difference between browsers, but you can use Browser Shots for that. Otherwise, it’s a simple, beautifully assembled way to see how your site looks on different resolutions.
10. Foundation
Since we’re talking RWD, we might as well start talking frameworks to develop it.
The internet debate rages on over which front-end framework is better: Bootstrap or Foundation? You can use one or the other. But Foundation is slightly more to the fore when it comes to grid systems, proportional units for designing (although Bootstrap 4.0 Alpha has moved to em and rem units), right-to-left support, pricing tables, tours, and off-canvas navigation.
It’s obvious we prefer Foundation. It works with SASS and CSS, is full of a whole band of features and generally more convenient and flexible.
We agree with Zurb on this: It is ‘crazy fast’.
11. Adobe Edge
After a decade of software that put design before code, Adobe finally gives the coders an Edge.
This frankly amazing array of tools and services is made keeping the new front-end coding trends in mind. They’ve got us quite a treat. Edge Animate to help coders create animation while simultaneously eradicating all traces of Flash. Sorry Adobe, Flash was great. But Animate uses standard HTML and JavaScript, and you know, one-size-fits-all…
There’s Edge Code for editing CSS from within an HTML document. Inspect consolidates browser test and device compatibility tests for responsive design, and synchs them all for super-fast updating/customization. The immensely popular Typekit is now a part of Edge family. Reflow is yet to release, but it will probably blow other front end CSS grid makers out of the water. And there’s still more.
We know. We had to pick our jaws off the floor too.
12. Vagrant
Vagrant is so much more than virtual development software.
This beauty allows you to create portable, easily reproducible work environments. It consolidates the virtualization software, server base box, and configuration tools in one powerful package. Basically, you no-longer have to have VirtualBox + Ubuntu + Chef. Vagrant will do the job of all three and take up less space while doing it. Power-users will also tell you how it allows you to set-up multi-VM networks easily.
It’s written in Ruby, but will work for PHP, Java, JavaScript, Python, and C#. You can work with Vagrant on Windows, Mac OSX, Linux, and FreeBSD.
It’s super-fast because it has none of the U-friendly-I going for it that looks nice but takes up much-needed space. It works well as a testing environment for developers.
That’s as close to the Holy Grail as we can get.
13. PageSpeed Insights
Google’s PageSpeed Insights does exactly-what-it-says-on-the-tin. It gives you insights on your Page’s front-end performance. That’s going to be an eye-opener for many high-and-mighty developers out there. So have a chortle-fest and begin the accelerated-balding from all the hair that’s going to be pulled.
All it does is measure elapsed time between: request and above-the-fold content rendering, and request and full-page rendering.
It will check the network-independent aspects to calculate how your page performs: server configuration, HTML structure, JavaScript, CSS, and images.
It’s razor-sharp and mercilessly fast; so it definitely will hurt your feelings and quite possibly make you cry if you score low. It will also try to make up for it by giving you pointed suggestions to improve your performance, like a condescending parent.
And we love it.
14. Git
Most modern developers are already familiar with it. That’s how you explain the existence of communities like GitHub after all.
Git is an open-source revision control and source code management system that keeps track of your project history in a repository. It’s basically an uber-fast, super-efficient PA.
It allows you to experiment freely without fear of messing everything up for all time. You can also create multiple repositories and use branching/merging to work with individual features. It’s a particularly useful tool for collaborative efforts.
It’s fully distributed, so you won’t have to fear no-net-nightmare when you’re offline (by design or accident). You can simply add the updates in your main repository, which will be waiting for you patiently back online.
15. W3C Markup Validation
This is the final rite of passage.
W3C Markup Validation is pretty straightforward and necessary. As W3C puts it, validation can: help you debug, future-proof your site (browsers are built on W3C standards), and help in maintenance.
It also teaches you how to be standard compliant by showing you the ‘errors’ of your ways.
Markup Validation shouldn’t be thought of as repressive, because really, it isn’t. It will help you learn how to write better code…
Like a pro.
Bottom Line
There are, of course, more tools, plugins, add-ons, and resources and communities in general that make developing…well not exactly easier, but less of a pain. And more are being developed right now. There’s Firebug add-on for Firefox that will let you monitor and edit HTML, CSS, and JavaScript, live. PixelDropr is a Photoshop add-on that will let you create adorable buttons and icons for your site with minimal hassle.
Every professional developer eventually has his/her own ‘tool kit’ of apps and software they rely upon to work faster and more efficiently. Some are free, some we have to pay for.
But then, who can put a price on convenience?
Visit us at InstantShift.com
