Web technologies move so fast that it can be tough to keep up. New tools pop up every year and it seems like old tools often fall by the wayside for newer emerging tech.
Frontend development is a huge part of the web and has grown into its own career path. And whether you look at frontend dev as just another skillset or as a viable career, you’ll need the right tools for the job.
I want to share my top 10 must-have tools for modern frontend development. These are allcompletely free and they’re mostly webapps made to help you create awesome websites.
1. Grid Guide
First on my list is Grid.Guide, a free webapp that lets you generate grids on the fly. This tiny app lets you define custom gutters and columns based on your own grid preferences.
First you input your preferred width for the website along with total number of columns. From there Grid Guide generates a handful of options to pick from.
You can even download a PNG of each grid to import into Photoshop or Illustrator. This makes it so much easier to create new grids from scratch without doing all the calculations manually or relying on a cookie cutter grid library.
2. Foundation
Most frontend devs prefer Bootstrap and I have to admit it’s great. But Zurb’s Foundationrecently got an overhaul and I think it deserves just as much attention.
The Foundation library is just like Bootstrap when it comes with predefined CSS classes for grids, typography, buttons, and other dynamic elements. But the design is a bit simpler so it’s easier to customize a layout that doesn’t look like a generic framework.
And the new Foundation has a sister library called Foundation for Email. This is a framework specifically made for email development.
Both Foundation libraries are fantastic and they’re heavily supported by the Zurb team.
3. CodePen
Most developers already know about cloud IDEs and how easy they make frontend development. You can write code from any computer and even save your projects in the cloud to share online.
But even with so many options I have to say CodePen is the best one out there. It’s lightning fast, super reliable, easy to get started and auto-updates whenever you make changes.
Not to mention it also supports almost every library you could imagine. You can write code in LESS or SASS along with preprocessors for HTML like Haml or Slim. And CodePen lets you add external resources so you can use a site like cdnjs to include other relevant libraries.
Hands down this is the best dev tool for writing code and toying with new ideas. There are some alternatives but in my experience nothing can beat CodePen.
4. Unheap
It’s tough to find a curated list of the newest JS plugins. Most of the time you’ll have to browse through GitHub repos or check Twitter for projects that go viral.
But with a site like Unheap you can quickly browse through the latest jQuery plugins with ease. They’re organized by type like navigation, forms, web media, and other categories.
It’s basically a repository for all the best jQuery plugins on the web. And it’s updated frequently so you can always find new stuff.
5. LivePage
Browser extensions are some of the best tools you can use for development. LivePage is a free Chrome extension that’ll auto-update the page whenever you make changes to a local file.
This means you can edit your HTML/CSS/JS files locally and the browser will refresh with each save. It may only take one second to refresh, but do that enough times and you’ll see how annoying it can be.
LivePage also has a companion for Firefox called LiveReload.
6. Fullpage Screen Capture
I use this extension all the time and it’s one of my favorite tools when designing a layout.Fullpage Screen Capture lets you pull a full PNG screenshot of an entire website.
You simply click the button in Chrome’s extension panel and it’ll automatically create a full snapshot of a whole website stitched together into one image. You can use this to study designs as a whole which is useful when crafting your own site.
7. WhatFont
Typography is a huge choice for web design and it’s not something to take lightly. Finding the right font can be grueling, but with an extension like WhatFont you can alleviate some of the pain spent searching.
You just add WhatFont to Chrome and whenever you see a font on a website you can click and hover. This gives you all the details including the fonts style, size, and even hosting location if applicable(like TypeKit or Google Webfonts).
8. Node/npm
This might be obvious but Node has changed the face of web development. It brought JavaScript to the backend and gave us npm, one of the fastest growing package managers ever.
This is almost a necessity and for good reason. At this point all frontend developers shouldlearn the command line because it’s now an essential tool in the webdev workflow. But npm is also part of this process and it’s fully managed by the command line.
You can pull new packages, update old ones, and there’s a lot you can do with npm scriptstoo.
If you’ve never tried npm before then I highly recommend dipping a toe to see what all the fuss is about.
9. Mobile Speed Tester
Google knows great UX and they’re always trying to help webmasters build better sites. One of their best tools is the Mobile Speed Tester which rates any website’s score based on responsivity and loadtime for desktop and mobile.
It gauges both the speed and user experience of a website to determine if it’s mobile-friendly.
This is far from an exhaustive report and it’s not a replacement for usability testing. But for a free tool this offers some nice feedback and it can get you started on the right track.
10. Responsive Test
Last but certainly not least is the Responsive Test webapp. It’s an open source project released on GitHub that lets you test any website’s responsive design right in your browser.
You simply enter a URL and drag the window to whatever width you’re trying to test for. There are also small buttons for predefined sizes for iPhone, iPad, and generic laptop/desktop resolutions.
There’s another similar tool by Matt Kersley but it doesn’t have adjustable sizes. Instead you get a few predefined windows to use for testing.
Both are excellent tools and they’re much easier than dragging your browser window back and forth.
And with that we’ve reached the end of my top 10! I hope this list can prove useful and I certainly hope there’s at least one thing in this list for everyone.
And since the landscape of frontend development changes so quickly you can expect many more awesome tools in the near future.
