The 50+ Best Tools and Resources for Web Developers
Being a web developer is one of the most beautiful jobs there is, but also one of the most demanding. You need to stay up to date at all times and learn actively instead of resting on your oars. Adapting to new requirements is key. Basic SEO knowledge is required, and you need to acquire new techniques such as responsive web design. Being able to optimize websites is important, and of course, getting to know new working methods is vital. To ensure that you stay on top of the game, we've collected a list of the best tools and resources for web developers.
These newsletters bring you the best articles on web development and performance and are editorially prepared. This way, you can be sure to only find useful things in your inbox.
Every web developer gets stuck at some point and doesn't know how to continue. That's when it is helpful to be able to talk to other people that can give support fast and unbureaucratically. Here are some communities specifically for web developers and designers.
A website's speed is a crucial factor in its ranking in the Google index. Fast loading times often equal better bounce rates, a better general user friendliness, and higher conversion rates. Thus, I recommend using these free tools to test and optimize your website's loading time. Before digging too deep in the article, you should check the article called “What are the Effects of Website Performance (Inc SEO and Conversion Rates)” in order to improve page speed/conversion rates.
These tools ease cooperation of teams that work on one commission together. By now, many teams consist of workers that live and work scattered all over the world. Keeping in touch and arranging with each other is of particular importance. These tools allow you to make cooperation and workflow significantly more efficient.
Sometimes, you might have a fruitful conversation with another developer on Skype or via Google Hangouts, and want to share some code so that your interlocutor can take a look at it. Of course, large team tools like Slack can do that. However, they make no sense when you're not part of a team. There are a couple good, and fast alternatives. Sometimes, even quick experiments are crucial, which is why you'll find tools for that in this list.
The "diff checkers" help you visualize and, if wanted, connect differences between file versions. Sometimes it can be helpful to have such a visual display.
Markdown is a markup language with a simple syntax that can be converted into HTML (and other formats) fast. Note: Markdown editors can be used for desk work as well as simple code.
A CSS preprocessor basically consists of a scripting language that expands CSS and can compile to regular CSS. CSS preprocessors ease working with CSS. Here's an article on the basics of Sass and Less.
Working with frameworks is becoming more and more popular, as using a predefined frame, or a compact package can ease work significantly, and allows you to get to results faster. Usually, frameworks consist of some files and folders, like CSS, HTML examples, and JavaScript. Twitter's Bootstrap framework is one of the most popular frameworks of them all and the foundation of many sophisticated websites. However, other frameworks also deserve to be tested.
Git is a source code management system for software and web development. It offers distributed version control. Git's advantages become the most evident when working in teams, as code changes can be traced back, and brought from the development to the live stage. It's a way of minimizing chaos, and to make sure that nothing goes online until it was tested.
Lifelong Learning: Resources for Web Developers
Newsletter for Web Developers
These newsletters bring you the best articles on web development and performance and are editorially prepared. This way, you can be sure to only find useful things in your inbox.
- Web Development Reading List - Out once a week and introduces you to new resources and tools.
- Web Operations Weekly - A newsletter on web applications, performance, web development, server technology, and tips.
- WEB TOOLS WEEKLY - A newsletter on the latest tools for web developers and web designers. Mainly deals with front-end design.
- freshbrewed.co - This newsletter about Front-end and UX design is published once a week.
Communities for Web Developers
Every web developer gets stuck at some point and doesn't know how to continue. That's when it is helpful to be able to talk to other people that can give support fast and unbureaucratically. Here are some communities specifically for web developers and designers.
- Stack Overflow: 4.7 million programmers and developers help you fast.
- Front-end Front: A community specifically for front-end developers. Here, you can ask questions and share important links.
- Hashnode: A global community of software developers made to network and learn from each other.
- Refind: A community that collects and shares the best links of the web.
- Google+ Web Developers Group: Web development, web design, and web programming.
- Google+ Web Developers Group: Java, PHP, Ruby, JavaScript, and Python resources.
- Facebook WordPress Front-end Developers Group: This is a new group for developers that want to ask and answer questions, share their work with others, or discuss new, upcoming trends.
- LinkedIn Web Design and Development Professionals Group: A group for networking and sharing of information for web developers, web designers and webmasters.
- LinkedIn Web Site Development Group: Website design and programming
- LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
- LinkedIn WordPress Developers Group: WordPress Codex. Using WordPress as CMS and CMF.
- Webdeveloper.com: Here, web developers can learn how to develop a website. It deals with HTML, Java, and JavaScript.
- Sitepoint Forums: Discussion group about web development.
- /r/webdev: The most recent news on web design and web development.
Tools for Online and Offline Use: Resources for Web Developers
Website Speed Test Tools
A website's speed is a crucial factor in its ranking in the Google index. Fast loading times often equal better bounce rates, a better general user friendliness, and higher conversion rates. Thus, I recommend using these free tools to test and optimize your website's loading time. Before digging too deep in the article, you should check the article called “What are the Effects of Website Performance (Inc SEO and Conversion Rates)” in order to improve page speed/conversion rates.
- Website Speed Test: The rather new speed test tool by KeyCDN with "cascade" display of the results and a preview of your website. Recommendable.
- Google PageSpeed Insights: PageSpeed Insights analyzes your website and gives you many useful tips on how to improve the site's performance.
- Google Chrome DevTools: Explains the developer tools built into Google Chrome in a detailed way.
- WebPageTest: This tool allows you to test the performance of your websites from many locations on earth in real browsers like Firefox, IE, and Google Chrome.
- Pingdom: One of the best tools to test a website's loading time. Different locations can be set.
- GTmetrix: Gives you an insight into your website's speed, and a bunch of tips to help you improve it.
Collaboration Tools
These tools ease cooperation of teams that work on one commission together. By now, many teams consist of workers that live and work scattered all over the world. Keeping in touch and arranging with each other is of particular importance. These tools allow you to make cooperation and workflow significantly more efficient.
- Slack: A messaging applications for teams working on a commission. The app promises to make your work life easier and more productive.
- Trello: Trello is a flexible and visual way of organising teams. The software is based on »cards« that are commented and to which you can assign priorities. It's simple and can be learned quickly.
- Glip: Glip provides real-time messaging with an integrated task manager, video conferences, shared calendars, and a lot more.
- Asana: With this collaboration tool, teams can keep an eye on their work and look into existing results. A perfect way to see what stage the project is in.
- Jira: All members of your software team can plan their work, look at results, and release the software afterwards.
Code Sharing and Experiments
Sometimes, you might have a fruitful conversation with another developer on Skype or via Google Hangouts, and want to share some code so that your interlocutor can take a look at it. Of course, large team tools like Slack can do that. However, they make no sense when you're not part of a team. There are a couple good, and fast alternatives. Sometimes, even quick experiments are crucial, which is why you'll find tools for that in this list.
- JS Bin: A tool to experiment with programming and markup languages. You can use HTML, CSS, JavaScript, Markdown, Jade, and Sass.
- JSfiddle: A tool that allows you to test your JavaScript, HTML, or CSS code directly within the browser.
- Codeshare: Share your code with other developers in real time.
- Dabblet: An interactive "playground" to enable quick testing of CSS and HTML snippets.
Diff-Checker Tools
The "diff checkers" help you visualize and, if wanted, connect differences between file versions. Sometimes it can be helpful to have such a visual display.
- Diffchecker: An online tool for quick comparison of text-based files. Useful, when you're on the go and need a quick comparison of two files.
- Beyond Compare: A program to compare files and folders via simple, effective commands which determine the area you care about. Things that you're not interested in can be faded out.
Markdown Editors
Markdown is a markup language with a simple syntax that can be converted into HTML (and other formats) fast. Note: Markdown editors can be used for desk work as well as simple code.
- StackEdit: A free-to-use online editor for Markdown.
- Dillinger: Dillinger is a cloud-capable HTML5 Markdown editor.
- Mou: Markdown editor for developers that use Mac OS X.
- Texts: A simple text editor for Markdown. Available for Windows and Mac OS X.
- MarkdownPad: MarkdownPad is probably the best Markdown editor for Windows. It can directly provide a live preview next to the input area.
- ByWord: ByWord is the definite favorite in the Noupe Team when it comes to editors for Mac.
- Sublime Text: In this article on German magazine Dr. Web, Peter Müller explains how he found the Markdown editor of his dreams in Sublime Text.
CSS Preprocessors
A CSS preprocessor basically consists of a scripting language that expands CSS and can compile to regular CSS. CSS preprocessors ease working with CSS. Here's an article on the basics of Sass and Less.
- Sass: A very mature, stable, and efficient professional CSS expansion.
- Less: An expansion of CSS that is also backwards compatible. This makes learning it a cakewalk.
- Stylus: A new language that provides an efficient, dynamic, and expressive way of generating CSS. Stylus supports both indented and regular CSS.
Front-End Frameworks
Working with frameworks is becoming more and more popular, as using a predefined frame, or a compact package can ease work significantly, and allows you to get to results faster. Usually, frameworks consist of some files and folders, like CSS, HTML examples, and JavaScript. Twitter's Bootstrap framework is one of the most popular frameworks of them all and the foundation of many sophisticated websites. However, other frameworks also deserve to be tested.
- Bootstrap: An HTML, CSS, and JS framework for the development of responsive, mobile-first websites.
- Foundation: A family of responsive front-end frameworks that are supposed to ease the development of responsive websites, apps, and emails.
- Semantic UI: A framework for the development of responsive websites with semantic, readily understandable HTML.
- Uikit: A lightweight and modular framework for the development of fast, efficient web interfaces.
Git: Clients and Services
Git is a source code management system for software and web development. It offers distributed version control. Git's advantages become the most evident when working in teams, as code changes can be traced back, and brought from the development to the live stage. It's a way of minimizing chaos, and to make sure that nothing goes online until it was tested.
- SourceTree: A free Git and Mercurial client for Mac and Windows. A Git client for teams - Bitbucket - is available as well.
- GitKraken (Beta): A free and intuitive, fast client available for all platforms.
- Tower 2: Version control with Git made simple. This is what this app promises to do. Only for Mac.
- GitHub Client: An easy way of working on projects on GitHub and GitHub Enterprise.
- Gogs: A simple Git client to host yourself.
- GitLab: Here, you can host your private and public projects for free.
Great collection! Bookmarked. We use to use many of these tools for the web design process, but is very useful to have them in one place.
I like this markdown editor for Mac OS X better than MOU. It’s called MacDown:
http://macdown.uranusjr.com
Also not maintained since two years, however.
This is just incredible. All under one roof. This makes it a lot easier for all. Thanks for this wonderful collection. I have already shared it with my web design company
.
thanks… for the list! ON Richards tool box there’s a bunch of web developer and SEO tools combined, may be interesting to check out
Andreas, thanks for sharing the apps! One more tool for the list – Freeter (https://freeter.io) to organize the workflow ?
Looks interesting, thanks for the addition..