Practical Web Development Tools and Resources

Any Google search for Web development tools will produce pages and pages of results. “100 MUST-HAVE Web Dev tools,” “20 Brilliant Tools For Web Design and Development,” “A Complete List of Web Development Tools.” Sure, there is some good stuff in those lists, but has the author really ever used any of them? Maybe. Is it a list for the sake of making a list? Probably. Is any of this true about this list? Of course. The list part. But this list will be short and sweet and include just a few things things we regularly use in a practical production environment. A long list is great for ideas, but too many tools can get in the way of actually producing anything. With that said, here are some of our favorites at the moment.

UxPin

Uxpin
UxPin is a wireframing and prototyping tool. As SaaS, it allows us to work anywhere there is an internet connection, and easily share and collaborate ideas. The app includes many advanced features including interaction design and PSD import as well as responsive breakpoints. An expansive list of asset libraries makes creating elements simple. From Web forms to iOS and Android UIs, ideas can come together quickly by importing elements and tweaking settings for your needs. Want to go beyond grayscale boxes, they’ve got you covered there. Style text, add color, and import image assets to make your prototypes as detailed as you like. When you’re done, share, export, or present to colleagues or clients and use the comments feature to collect feedback.

Link: Uxpin 

 

Codepen

Codepen
Have an idea you need to play with to see if it’ll work before building it into your project? Codepen provides a complete, self-contained front-end development environment with more pre-processesor options than you could ever need. Write HTML, CSS, and Javascript in the format of you choice, compile and test all on the same page with little to no setup or configuration. Just you and and your ideas. Save your pens for later and share them with anyone. This is great for proof of concept.

Link: codepen.io

 

Codekit

Codekit
Do you develop on a Mac? Like working in Sass or Less? Of course you do. CSS pre-processors are awesome, but that’s another post. Codekit takes all the console and command line out of working with Saas and Less and throws in a bunch of other treats along the way. Easily compile your CSS and javascript, check for errors as well as compress and minimize code to optimize  your sites for deployment. Further optimize your site with an included image compressor/optimizer to help with load times. It even includes its own MAMP-like server for quick testing of front-end code and style including auto refresh and mirroring to mobile devices on the same network.

Link: Codekit

 

caniuse.com

CanIUse
Want to use that new CSS code you found online? Make sure it’ll work with your target audience’s browsers before you spend hours perfecting it. This site provides browser support tables for front-end we technologies so you know if that cool new idea you have will actually be seen by anyone. Not seeing the browser support you were hoping for? Fear not, in most cases you can find links provided for fallbacks and polyfils so your great idea doesn’t have to be shelved until the masses catch up.

Link: caniuse.com

 

Font Awesome

FortAwesome
Icon fonts can easily add a little extra to your designs. There are many solid choices, but our favorite is Font Awesome. It’s constantly updated with a variety of icons and you can easily add them to your project with as little as one line of code. Once installed you can adjust size, color, add effects, even animate icons to fit your needs.

Link: fontawesome.io

 

Unsplash

Unsplash
We’ve all been there. You need an interesting image for a design and the usual stock sites aren’t cutting it. We’ll let you in on a little secret, but you have to promise not to tell anyone. We don’t want the whole world to know. Unsplash provides a large collection of high-resolution free images, updated every 10 days,with 10 new images that you can use however your heart’s desire. We find that these are typically best for large background images but the only limits are your own creativity.

Link: unsplash.com

 

So there’s our list. Is it huge? Nope. Is is practical and useful in your everyday workflow? We think so. The best toolbox is the one you fill for yourself, so find what tools work best for you and get to work.