$0 Development Tools: Build Products Faster

Developers are always looking for better ways to build their products and services, and with more and more tools and resources being made all the time, it can be hard to sort through all the chaff. We’re much the same—we’re constantly looking for better ways to do our frontend development here at SSD Nodes.

So, as we’re assessing a bunch of these new tools, we thought it would be interesting to put together a “toolkit” of what we’d love to build new products on top of if we could wipe start from scratch.

Below, check out 13 of our favorite development tools to help you build your next minimal viable product (MVP), FOSS project, or production-ready product.

UI library: Moon

Moon

If we were planning on building a JS-based webapp any time soon, we’d probably go Moon. It’s inspired by Vue, which is a plus in our opinion, and it’s packed into a tiny 6kb size. With “blazing fast” speed and most of the features you need from the more popular (and bigger) JS libraries, it’s a good alternative for quick development.

CSS framework: Milligram

Milligram

Big CSS frameworks like Bootstrap have their place (we use it on this very site), but its complexity can be overwhelming. Milligram takes a different course with simple typography and a Flexbox-enabled grid all in a package that’s 2kb when gzipped. A simple yarn add milligram gets you going.

CSS preprocessor: Sass

Sass

Not to be mistaken with SaaS (software-as-a-service), Saas is a CSS preprocessor that takes CSS-like code, with new features like variables, nesting, and if else loops, and churns out browser-ready CSS code. Sass has been around for years, and is the foundation of countless websites and other projects.

Dependencies: Yarn

Yarn

Hey, it’s not easy getting screenshots of package dependency software.

Yarn is a new dependency manager platform that helps developers install and keep track of every other tool—like Milligram—that they use to create their product. By keeping tabs on all your NPM installations, you can move your repository to any new machine and know you have a solid platform to work from.

Task runner: Gulp

Gulp

With all these Sass and complex Javascript files running around, you’ll need some way to control them. Gulp is a toolkit that automates the tasks you would need to put all this code together. For example, Gulp can easily be configured to automatically compile new CSS files every time a Sass file is edited, and then automatically inject the new code into your page via Browsersync. Neat.

Development environment: Docker

Docker

If you’re spending all this time setting up a perfect build system, why not take it a step further and set up the perfect development (and deployment) environment. With Docker, you can create exactly the environment you need with a simple docker-compose.yml file, and then use that same environment on your deployed VPS.

Continuous integration: Jenkins

Jenkins

As projects get bigger, it can become tricky to figure out where and how things might go wrong. A continuous integration (CI) platform aims to simplify that process, and Jenkins is the biggest open source, cross-platform option out there. With tons of plugins and many ways to control your code, your code will suddenly get a lot more reliable.

Responsiveness: Sizzy

Sizzy

Building responsive websites is tricky, but thanks to Sizzy, it doesn’t have to be unmanageable. This simple tool shows you how your in-progress website looks on devices of all shapes and sizes so you can build the best mobile experience possible.

Documentation: Slate

Slate

Most developers want to write code, not documentation. Slate aims to make that easier by letting you write in Markdown, with tons of built-in syntax highlighting. The processing engine takes care of the rest, and you get a polished, responsive product that’s easy to maintain.

Favicon: Favicon.io

Favicon.io

Favicons are often overlooked for those quick-and-dirty projects, but having a proper one can make a big difference when it comes to professionalism. Favicon.io offers the easiest way to create a unique favicon with your brand colors and fonts.

Icons: Feather

Feather

Most SaaS applications need a handful of small icons to help guide users through the interface, and there’s a lot of good ways to do that. FontAwesome has been the standard for a while, but their site is now filled with modals asking for cash. Feather is SVG based, open source, and super easy to use.

Design: Gravit

Gravit

Previously, we would have recommended Canva, but after discovering Gravit, we shifted over immediately. Gravit has more features than most other free design tools, and is available on all the major platforms. Simply put, it’s the easiest way to dive into design that we’ve ever known.

Colors: Colormind

Colormind

For those non-designers who still want to build websites or SaaS apps, getting colors down can be tricky at best. Colormind is a color scheme generator that gives you unique, compelling color schemes, and helps you figure out how to actually implement them in your design.