Smack Happy’s Top 7 Web Development Tools for 2017

How many different development *tools have you used or tried for your web development project? How many of those tools lightened your workload, or helped things run smoothly and seamlessly?

We literally can’t remember how many tools we’ve been through because there are so many available. However, we can give you a short list of tools that we love to use (and use daily). Ultimately, the following tools help us successfully complete projects without pulling our hair out or breaking the bank. We hope they will help you, too!

Top 7 Tools for Coding & Web Development

JQuery: Perhaps you’re thinking this is either obvious or has some limitations. Nevertheless, JQuery has been a blessing for experienced and newb developers alike.

• It’s simple to use.
• It requires much fewer lines of code.
• Enables you to write many functions compared to other Javascript libraries.
• You get access to a large, supportive open source community, and documentation.
• You receive Ajax support.

Can I say my favorite tool is JQuery? The ability to add interactive features to any website by writing just a little code? I rack my brain a little, and I just come back with …”code, I like code!”—Steve Goerger, Coder at Smack Happy

Extra Monitors 

Extending your visual workspace definitely has its advantages. Utilizing dual (or more) monitors is very resourceful for those who work with multiple programs at once.

• You can run multiple applications at the same time.
• Sharing data between applications is easy.
• One screen can be used as your workspace, while the other screen can be used to reference important data.
• Using multiple screens makes it simple to compare files right next to each other.
• Requires no extra software, but simply a small configuration of your computer device’s settings.
• Dual screens work perfectly for those working on a laptop, where the screen is typically a smaller space.

Sublime Text

ST is an easy-on-the-eyeballs, high-end text editor for code, markup, and prose.

• GoTo Anything allows users to open files with only a few keystrokes.
• Make ten (or however many) changes at the same time.
• ST’s Command Palette allows you to choose infrequently used functionality such as sorting.
• If you do not have dual monitors, ST’s split editing support allows you to edit files side by side or edit two locations of one file.
• ST is available across multiple platforms: OS X, Windows, & Linux (for all of you open-sourcers out there).
• Other benefits including Distraction Free Mode, Customization, Shortcuts, Fuzzy Search, Code Preview, Bracket and Div Highlighting, Bookmarking, Fast Loading, Requires Less Resources, and more.

I like Sublime Text, because it has a black background which is kinder on my eyes, and the bright colors of the syntax highlighting stand out—making it really easy to read. It also autocompletes what I’m coding nicely. It’s fast, easy to use and often regarded as one of the best text editors, which is probably why I got it in the first place!—Hannah Carpenter, Coder & Designer at Smack Happy

PhpStorm

If you want an editor with more advanced features to truly understand your code structure, then this tool might be better for your over another tool, such as Sublime Text.

• Great for JavaScript development, testing and debugging.
• Supports multiple OS’s.
• Quick, and easy on memory.
• Synchronizes files from local to the server, and back.
• Includes native ZenCoding support.
• Supports lint, documentation, and code completion.
• Includes full-featured web development IDE.
• Has intelligent CSS, HTML, JS & (of course) PHP editor.

MySQL Workbench

Assuming you already prefer MySQL, MySQL Workbench allows you to facilitate creation of new physical data modification and models of existing MySQL databases with reverse/forward engineering and change management functions.

• Allows you to manipulate relational databases.
• Has a built-in visual editor.
• Enables developers to build, edit and run (single or multiple) queries against MySQL server databases. If multiple can run/displayed in separate tabs.
• Queries are saved for later reference.
• Offers administrative tools such as user administration, server config, database restoration/backup, and server logs.

CodeKit, THE Mac App for Web Developers

Looking to code with responsive design in mind? This application allows you to “build websites faster and better“. If you haven’t tried this tool yet, you simply have to. Like, right now.

• CodeKit automatically compiles every language (Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF, and JPEG). And if those don’t cover it, you can add your own.
• Provides simple configuration.
• Workflows are built-in to provide you with next-generation JavaScript and faster compiling.
• CodeKit automatically refreshes browsers as you work.
• You can optimize images, minify scripts, and utilize source maps all in the same tool.
• Easily customize and build your entire project in one simple step.
• You don’t have to endlessly search for that one missing character, as you can use built-in Debug tools.

CodeKit just works. I used to use a Compass app for compiling, but it was often playing up! Nicole mentioned CodeKit when I first started working with Smack Happy and I haven’t gone back.—Hannah Carpenter, Coder & Designer at Smack Happy

Chrome DevTools

DevTools includes a set of web authoring and debugging tools (built directly into Google Chrome), that provide web developers deeper access to web applications and internals of the browser.

• You can easily identify and track layout issues.
• Set JavaScript breakpoints.
• Get insights for code optimization.
• The built-in console will help with rapid debugging, as it will direct you to errors in the code.
• Eliminates the use of a text editor to make a quick style change.
• These tools are clean,  easy to navigate.
• Can effectively be used by developers, marketers, bloggers, designers (and more) of all experience levels alike.
• Enables you to view your code to check against responsive design/mobile, without ever accessing a mobile device.
• Measure page speed and performance.
• Review SEO tags & markup.

We use plenty more web development tools during all stages of our dev projects—however—are you ready to read the mile-long encyclopedic version of our list? 😉 Our hope is that this quick run-down of our top tools can help you either identify a better tool option for your project or that the tool you’re already using has some super-cool functionality you didn’t realize it had. Happy developing!

Did we miss an awesome tool you think we should be talking about? Leave us a comment! 

*These web development tools are recommended to you by the fabulous team at Smack Happy:

Hannah Carpenter—Coder & Designer

Corina Pfeffer—Coder & Designer

Marianne Butler—Designer & Developer

Ruben van Engelenburg—Programmer & JavaScript Guru