Nearly every developer has a collection of tools or utilities which they deem indispensable and tend to use in their daily tasks when developing. Each of these definitely serves a distinct purpose and most developers have integrated them into their workflow. The purpose of these tools or utilities is not only to make ones workflow easier and save time – but moreover to serve within a utilitarian and clutter-free way.
Regardless of whether you’re a skilled programmer looking for a few extra tools to add to your already existing arsenal – or a novice coder looking to advance your skill set, these tools will enable you to add functionality and much more to some of your projects.
We hope you will be able to find the right tool amongst the list we have collected below. If you have any suggestions on great tools or services that you’re already using or would like to suggest so that we may add them to this list – please leave a comment with a link in the comment section. Enjoy !
1. Sitespeed.IO
Sitespeed.io is an open source tool that helps you analyze your website speed and performance based on performance best practices and metrics. It collects data from multiple pages on your website, analyze the pages using the rules and output the result as HTML or JUnit XML.
2. Nightwatch.js
Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. It uses the powerful Selenium WebDriver API to perform commands and assertions on DOM elements. It includes many features such as : simple but powerful syntax which enables you to write tests very quickly, using only Javascript and CSS selectors. No need to initialize other objects and classes, you only need to write the test specs, built-in command-line test runner which enables you to run the tests either altogether.
3. Wowjs
Wow.js enables you to reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library. It is smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs), Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup, and fast execution and lightweight code: the browser will like it.
4. Editorially
Editorially is a new collaborative writing and editing platform. Their goal is to support and encourage that writing process — from the first flash of inspiration all the way through to publication, and at every point in between.
5. Total.js
Total.js is one of the best web application frameworks for creating a rich web sites and web services. The framework has good documentation and contains many examples. It supports friendly URL, XHR, JSON, LESS CSS (CSS 3), JavaScript minifier, XSS protected, resources, modules and supports MVC architecture.
The framework has no dependencies. Complete functionality is built in its core. You can install any module by the Node Package Manager. Framework doesn’t limit you. You can write whatever you want or rewrite existing functionality. It’s easy, simple and safe.
6. Modern.IE
Microsoft has recently launched Modern.IE, aimed at simplifying the sometimes arduous process of getting websites to work in older versions of the company’s Internet Explorer web browser.
There is a site scanner that will look at your code and detect potential problems for older versions of IE. And there is a cross-browser testing tool and a set of guidelines for building sites with web standards. And there are other useful tools for web developers available too.
7. Mondrian
Mondrian is a free vector graphics web app like Adobe Illustrator or Inkscape. Mondrian offers all the tools needed to create, modify, and export simple SVG files. Mondrian also supports undo/redo through a file history API that stores operations. The entire app is written in Coffeescript. You have to manually compile the app every time you make changes. Mondrian officially supports only the latest desktop stable versions of Chrome, Firefox, and Safari. All of the Mondrian code and documentation is available under the MIT License.
8. ScrollReveal.js
ScrollReveal.js is a simple way to create and maintain how elements fade in, triggered when they enter the viewport. It helps you to build declarative on-scroll reveal animations for your websites. By adding a data-scrollreveal attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport. It is released under MIT License.
9. Saved.io
Saved.io is ridiculously simple to use – just type “saved.io/” in front of any URL in your address bar, hit enter and you’ve just saved a bookmark. Anthony Feint has purposefully left out Tags, Folders, Descriptions, Notes etc. from this app. Saving a bookmark should be fast.
10. Hugo
Hugo is a static site generator written in GoLang. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website.
Hugo makes use of markdown files with front matter for meta data. A typical website of moderate size can be rendered in a fraction of a second. A good rule of thumb is that Hugo takes around 1 millisecond for each piece of content. It is written to work well with any kind of website including blogs, tumbles and docs.
11. Sculpt
Sculpt is a lightweight, mobile first, responsive HTML, CSS and SASS framework. It has been written to cater for devices with small screen sizes first, with more complexity being added through media queries as screen real-estate increases. With three grid sizes (732px, 960px and 1140px) built in and active depending on your device’s screen size you can be sure your content will be well presented no matter the conditions.
12. Gulp.js
Gulp.js is the streaming build system. It’s use of streams and code-over-configuration makes for a simpler and more intuitive build. By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.
13. Light Table
Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games. It provides the real time feedback we need to not only answer questions about our code, but to understand how our programs really work.
Light Table is based on a very simple idea: we need a real work surface to code on, not just an editor and a project explorer. We need to be able to move things around, keep clutter down, and bring information to the foreground in the places we need it most.
14. Hover.css
Hover.CSS is a useful collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.
15. Red Pen
Red Pen made it fast and productive to get feedback from your colleagues and clients. Test ideas, seek perspective, and get approval. Simply Drag and drop an image into the Red Pen homepage, and point at areas of the design and give contextual feedback. Your data won’t be sold or shared. You retain ownership of your uploads.
16. Hackpad
Hackpad is a simple tool to edit, organize and share documents. Hackpad eliminates confusion by clearly indicating who wrote what, and what changes were made to a document.
Hackpad includes many intuitive features to help you collaborate and share seamlessly. Just click the plus sign in the navigation bar to start a new pad. Check out their Hackpad Feature Help pad to learn about everything Hackpad does.
17. Rails Assets
Rails Assets is the solution to assets management in Rails. It is the frictionless proxy between Bundler and Bower. It automatically converts the packaged components into gems that are easily droppable into your asset pipeline and stay up to date. Gems created by Rails Assets work great with any Sprockets-based application.
18. Cockpit
Cockpit was born out of the need of building a simple dynamic site. Sure, WordPress, Joomla, Drupal and all the other full-stack content management systems are possible solutions for that task, but if you just want to manage a simple site, they are just too bloated and too time consuming to setup and maintain.
19. Code Player
If you’ve ever wanted to share the solution to a coding problem with someone, or maybe wanted insight into someone’s thought process as they were solving a coding problem, then HackerEarth’s CodePlayer may be of interest. It captures keystrokes as a developer works, making it possible to play back exactly what they did in the creation of a particular piece of code.
20. Jiko
Jiko is a modern and easy to use template engine for Javascript. Its objective is to provide to Javascript programmers a way to write templates with an engine as powerful as server-side state of the art template engines like Jinja and Mako.
