St. Cloud, MN
619 W St. Germain St., Suite 214
St Cloud, MN 56301
(320) 203-4840
Green Bay, WI
520 N Broadway, Suite 270
Green Bay WI, 54303
(920) 884-1496
As the great Emmert Wolf once said, "A man is only as good as his tools." OK, I'm not sure who Emmert Wolf is and if in fact he IS great, but that saying ... THAT is great.
The tools that I've come across in my career as a Front End Developer have indeed turned me into well, perhaps not great, but a greater developer. One can never be great until their potential has run its full course. And I don't feel my potential has run it's course yet. There's many things to learn and there are many tools to be had.
So with that said, here's a list of tools that I have in my developer toolbox. Hopefully I can introduce you to a great tool!
Sublime Text
Every developer has their personal preference on a text editor. There's a whole slew of programs to choose from and I've dabbled in quite a few over the course of my career. Dreamweaver, Notepad++, Brackets, Coffee Cup, Coda; the list goes on. Each one of these programs were in my wheelhouse anywhere from a week to a few months, with the exception of SublimeText. I fell in love with SublimeText the day I opened it and never looked back. The perfect balance of speed, simplicity and extendability creates an editor that fit me like a glove.
One of the key features that I fell in love with was the multiple cursors. This allows you to quickly edit multiple lines of code at the same time, not one line of code multiple times. Other built in features like Split Editing, Distration Free Mode and Go To Anything make SublimeText a crowd favorite.
SublimeText also offers a tremendous amount of add-ons (Package Control) that help you customize the program to suit your needs. My packages of choice are:
A handy dandy plugin that allows you to write code with shortcuts. Something like ul>li*5>a{Link $} will create:
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Shortcuts like these have improved my development speed ten-fold and I don't know where I'd be without this one. Just check out their shortcut cheat sheet!
SublimeText doesn't come with an FTP client built in like Dreamweaver or Coffee Cup, however you can install this package to take care of that! Quickly configure your FTP settings and viola, you've got ultra-quick FTP client with highly customizable settings.
HubSpot COS
As Leighton Interactive is a HubSpot Agency Partner, it's fitting that I would use HubSpot's COS to build websites. The COS gives you the ability to easily create websites with their easy-to-use template builder or for the advanced user like myself, use custom code (aka HubL) to tap into everything HubSpot and build a a highly custom website all while collecting all that valuable user data that HubSpot is famous for. For more info, check out my blog on how to develop for the HubSpot COS.
JPEG Mini
Let's face it, attention spans have decreased as technology has increased. So when a user comes to a website they want their information quickly. In fact on average, if a website doesn't load in three seconds, a user leaves the site. That said, as a developer I need to develop fast sites. Most text and code doesn't take too long to load, but images! Oh images do. So when I receive beautiful imagery from a designer, the file size is typically quite large. I use JPEG Mini to compress the image files while retaining the quality. This software does a great job at just that and I highly recommend it.
Bootstrap
Another developer preference is whether or not to use a framework and if so, which one? First off, I use a framework to give me a jumpstart on development. It saves me a lot time and energy. And you know, time is money. So which framework should one use? Bootstrap? Foundation? Skeleton? Again, there a many to choose from so you need to find the one that suits you best. Since HubSpot is built off of Bootstrap, and since Boostrap has everything one needs and more, it's my chosen framework. Some say that using a framework like Bootstrap carries quite a bit of bloat and I agree. But to avoid all the uneccesary bloat, I customize the framework on a site-to-site basis to fine tune it and elimate any uneccessary code and plugins.
MAMP
MAMP allows you to create a server environment on your local computer, giving you access to Apache, PHP and MySQL. It's quick and easy to install. I use MAMP for development and staging before pushing a site live.
BrowserStack
One of the pain points as a developer is ensuring that your sites look good for everyone. But people use different operating systems (Mac or PC), different browsers (Chrome, Firefox, Internet Explorer), and different versions (IE10, IE11, IE Edge). And each combination tends to render websites just a little differently. BrowserStack gives you the ability to test these variations in a live environment to ensure the website both looks good and functions as expected for all users.
I also use BrowserStack on a case by case basis when users are experiencing issues with a website. I will ask the user what their specs are (OS, Browser & Version) then run a test with those specs to troubleshoot the issue.
A few others to check out:
to each their own
You'll want to use a toolbox that fits your needs as a developer. But I hope reading this list can give you a head start if you're starting out as a developer or if you're seasoned, open your eyes to a new tool that can help you out in the future.
Feel free to comment below if you've found success with any of these tools, or your tools of the trade.
