Top 10 Web Design Tools (Spring 2014)
Lately I have been writing a lot of code and learning about a variety of technologies. Along the way I discovered some pretty cool tools and time savers. I figured I’d write a list that highlights some of the best people and projects on the web today. As always, tell us about your favorites in the comments section!
No matter how great the writer, it is really difficult to see the big picture of complex problems with text alone. When faced with a complex code or design challenge, I often start by searching a few articles to get a sense of the vocabulary and the solution. Then I can then use that info to find a few video tutorials. Seeing someone solve the problem in real time is often very helpful. Beware, as with anything on the internet, not every solution is a good one.
My Favorite Channels
W3Schools is a great resource for the basics. Not only can you you find loads of snippets and examples, with their “try-it” feature, you can also edit and manipulate the snippets to get a sense of how they work.
8. Komodo Edit
Komodo Edit is great text editor and as far as I know, it’s still totally free! While it may not have every single feature in the world, it has the ones that count. Komodo edit provides intellisense that doesn’t lag and it is always improving. If you are need of a new text editor checkout Komodo Edit.
6. Clipping Magic
Clipping Magic is a great tool for removing the background from your web assets. Not only does it do a great job of stripping backgrounds, but it is user friendly, accessible on just about any machine and there is nothing to install.
5. Stack Overflow
Typically I would give Stack Overflow a higher spot on the list but there are just too many cool new things right now. To be fair, most every exciting new project was likely assisted in some way by the Stack Overflow community. If you are struggling to squash a bug, check out Stack. Chances are someone has been there before.
4. Develop PHP
3. CSS Tricks
2. Compass and Sass
Compass is by far the most exciting technology that I have adopted this year. Even on a good day organizing a stylesheet is a nightmare. Compass really streamlines the process of designing an organized and maintainable style library. With Sass you can write CSS in a rich, object oriented fashion. The addition of variables and mixins lets you create sleak, reusable patterns. Compass extends the language even further with dozens of pre-coded patterns. If you already read and write CSS the language is easy to implement and learn. You can find a more in depth look here.
Compass and Sass require some knowledge of the command line and that often scares people away. Luckily, In the number one spot of this list we have an application allows us to tap into some pretty amazing technology, and do it without ever working in the command line.
Incident 57′s CodeKit get’s my number one spot. I purchased this app (for $29) just after version 2 was released. The app is truly awesome. If you don’t trust me, checkout the free trial and see for yourself. Among it’s best features are:
It’s a compiler
Automatically checks your syntax for your not-so-smart days.
Automatically Refreshes Devices
When the code is updated, it refreshes EVERY device and browser that is viewing the project, even mobile.
Minify on the fly
Automatically minifies source code.
With CodeKit, all of your favorite frameworks and tool kits are one click away.
Lastly, it is super user friendly. If you can hand-code a website, you can easily start doing it faster with CodeKit.
So there you have it, my Top 10 Web Design Tools for spring 2014. We should all be thanking the brilliant creators of the projects in this list and beyond. Their work and dedication keeps the web moving forward. Rock on!