About a month ago, I rounded up a set of 10 tiny but really useful free web apps for designers. Given how well the app ecosystem on the web has evolved over the years, there’s no reason to stick with the theme of designers, so here’s a list of 10 similar apps, but for web developers.
Made by one of the most prolific community of professionals on the web, for themselves and other like them. All these apps are simple, focused on doing one thing and doing it right. If you are a web developer, they all might come in pretty handy at some point or another.
Like the article? You should subscribe and follow us on twitter.
Snipt
Who doesn’t love a little optimization when it comes to repetitive tasks, especially when coding. We all have our ways of managing snippets of code for reuse across projects. If you crave for a way to have your snippets available in the cloud and on multiple devices, Snipt might be the option. It is a web code based snippet management app that lets you save, search and retrieve your most used snippets, or pick from a growing library of public snippets.
Easing Functions Cheat Sheet
If you have ever struggled when creating an animation with the CSS transition property, you know how difficult it is to remember all the easing options and their results. This cheat sheet tries to relieve you of some of the pain by presenting a library of all available easing functions along with animated previews on hover, as well as the detailed code for CSS as well as SASS.
The Responsinator
Built a responsive website and want to test it on multiple devices without having to invest in buying each one — especially in this day and age where the device is going to be obsolete as soon as you buy it? The Responsinator to the rescue! Just enter the URL of your page and see it being rendered across a multitude of the most popular mobile devices, giving you a pretty-close-to-real idea of how the layout will work on each device. This is not an answer to device testing by any means, but for simple layout testing this one can be pretty handy.
HTML5 Please
Want to use the latest and greatest features in HTML5? Be prepared to struggle with browser compatibility as older browsers struggle to figure out what the newer tags and attributes mean. Or check out HTML5 Please. The site provides a more than comprehensive list of all HTML5 features and their level of browser support. It also tells you whether you can use the feature today and provides suggestions on fallbacks to ensure compatibility with all popular browsers.
reFiddle+
I know how developers love their regular expressions — or regex, as they are fondly known. For the uninitiated, regular expressions provide a way to parse through a bunch of data to find specifically what you are looking for using a complex set of parameters, defined in plain text. If you are one of those regex fans, reFiddle will help you try out your expressions online. Just paste in the data or code and enter the regular expression to see the results highlighted in the text.
CodePen
Now you probably already know this one, but I’m going to throw it in anyways simply because how freaking awesome it is. CodePen lets you quickly test your code in a live editing and preview environment, either for quickly prototyping something, saving a technique for later use along with its output, or to share your own techniques and snippets with the world, all while synchronizing with your Github account and supporting Markdown, Sass, Less, CoffeScript and more like a boss.
Ruby Fiddle
If your weapon of choice in web development is Ruby, you might want to give RubyFiddle a try. It is like CodePen (or JSFiddle, which is probably too popular to have in this roundup), but for Ruby instead of HTML, CSS & JavaScript. Simply type your ruby code and hit the “Run” button to see it implemented. You can even switch to Vim or emacs key bindings if you are familiar with those editors and their keyboard shortcuts.
DOM Monster
When developing for the web, performance of a page or an app can mean the difference between success and failure. One of the best ways to diagnose performance issues is to look through the DOM (Document Object Model). DOM Monster automates this process for you. Just save the bookmarklet to your browser and launch it on any page for a health report of the page and tips on improving performance.
zBugs
Another surefire way of increasing website performance is to optimize your code – the smaller your JS and CSS files, the quicker they will load. Unfortunately, with the amount of functionality and visual chutzpah that goes into website and web applications these days, keeping these files small can be tough job. Enter compression. zBugs will take all the JS and CSS files on your server and compress them using Minify and GZip methods. Simply enter your website’s URL, download the compressed files and update them on the server. Done!
BuiltWith
Want to know what that awesome site you are using was built using? Go to BuiltWith, enter the URL of the website and you will get a complete list of all technologies powering the website or application. From server they’re using to the hosting provider, backend technologies, libraries, code format and much more. This is by far one of the most exhaustive resources you can get when you want to dissect how a given web application was built and what powers it.
Wrap Up
As I mentioned above, web developers are by far the most prolific community of professionals on the web today, so the list of apps I eliminated from the list is far longer. These are just the ones that I’ve found to be useful in my adventures as a designer who’s learning to float a bit into web development. Got more that you think should have made the list? Let’s hear about them in the comments below.
No comments:
Post a Comment