DEV Community

westtan
westtan

Posted on

100+ Must-Have Web Development Resources

Image description

For web engineers, keeping up with the ever-evolving web technologies is both crucial and challenging. This means that as a web developer, you need to continuously learn and adapt. Below is a list of valuable tools and resources that the author encountered during their development and learning journey, shared for everyone:

JavaScript Libraries

  • jQuery: The most well-known JavaScript library.
  • Backbone.js: Provides an MVP structure for complex web applications.
  • D3.js: One of the most popular JavaScript visualization libraries.
  • React: A JavaScript library developed by Facebook.
  • jQuery UI: An open-source library for building user interfaces based on jQuery.
  • jQuery Mobile: A component of the jQuery framework that provides a unified mobile UI framework.
  • Underscore.js: A utility library that offers a full set of functional programming helpers without extending any built-in JavaScript objects.
  • Moment.js: A JavaScript library for parsing, validating, manipulating, and displaying dates.
  • Lodash: A JavaScript utility library with a consistent interface and modular design.

Front-End Frameworks

  • Bootstrap: A well-known front-end toolkit for rapid development of responsive web applications.
  • Foundation: An easy-to-use, powerful, and flexible front-end framework for building web applications on any device.
  • Semantic UI: A fully semantic front-end development framework.
  • UIkit: A lightweight and modular front-end framework.

Databases

  • MySQL: The most popular relational database management system.
  • MariaDB: A fork of MySQL developed by early MySQL employees.
  • MongoDB: A distributed file storage database.
  • Redis: An open-source, in-memory key-value store database.
  • PostgreSQL: An open-source object-relational database management system, used early on by Uber.

Task Runners / Package Managers

  • Grunt: A JavaScript task runner.
  • Gulp: A streaming build system.
  • Bower: A web package manager for HTML, CSS, JavaScript, fonts, and even images.
  • NPM: Node package manager.

CSS Preprocessors

  • Sass: A powerful, mature, and stable CSS extension.
  • Less: A CSS extension with good compatibility and low learning curve.
  • Stylus: Provides a more efficient and elegant way to generate CSS.

Markdown Editors

  • StackEdit: An open-source, free Markdown editor based on PageDown.
  • Dillinger: An online editor that offers cloud storage and supports various export formats like HTML5 and PDF.
  • Mou: An excellent Markdown editor for Mac OS X.
  • Texts: Supports both Windows and Mac OS X.

Icon Resources

Git Clients / Services

  • SourceTree: A free and cool Git client for Windows and Mac.
  • GitKraken: A free, intuitive, and beautiful cross-platform Git client (Beta).
  • Tower 2: A beautiful app that requires payment.
  • GitHub Client: The official GitHub client.
  • Gogs: An easy-to-setup self-hosted Git service.
  • GitLab: Free for private projects.

Local Development Environments

  • Servbay: Highly recommended, a new tool in 2024 that outperforms Docker, XAMPP, and MAMP with a graphical interface for easy environment setup.
  • XAMPP: A free, easy-to-install Apache distribution that includes MariaDB, PHP, and Perl.
  • MAMP: Apache + MySQL + PHP + Python + Perl.
  • WampServer: A web development environment for Windows that creates web applications based on Apache 2, PHP, and MySQL.
  • Laragon: A quick and easy local development environment for Windows that includes MySQL, PHP, Redis, and Apache.

File Comparison

Code Sharing / Experimenting

  • codeshare: Share code with other developers in real-time.
  • JS Bin: Allows you to save edited code locally or share a URL for collaborative debugging. Supports HTML, CSS, JavaScript, Markdown, Jade, and Sass.
  • JSFiddle: Customize the environment to test your HTML, CSS, and JavaScript code.
  • Dabblet: A web playground with interactive features.

Team Collaboration

  • Slack: A communication app designed for teams, highly recommended.
  • Trello: Completely free, highly flexible, and visual for managing anything with anyone.
  • Glip: Supports real-time messaging, video, video conferencing, and calendar sharing.
  • Asana: Helps track and record team members' work.
  • Jira: A well-known team collaboration application.

Inspiration

  • CodePen: Share and discover outstanding designs, with feedback from other developers.
  • Dribbble: A community for designers to share their work.

Website Performance Testing

  • Website Speed Test: A free website debugging tool from KeyCDN.
  • Google PageSpeed Insights: Tests your site and provides optimization suggestions.
  • WebPageTest: Supports speed testing from various global locations and browsers.
  • Pingdom: Tests page load speed and identifies performance bottlenecks.
  • GTmetrix: Not only tests speed but also analyzes potential legal risks and provides optimization suggestions.

Web Developer Communities

Web Development News

  • wdrl.info: Weekly curated articles on web development.
  • Web Tools Weekly: Primarily shares web development tools.
  • WebOps Weekly: Weekly articles on web operations and deployment.
  • /dev tips: Weekly sharing of development tips.
  • Friday Front-end: Daily Twitter updates on development-related news, with weekly summaries via email.
  • Front-end Dev Weekly: Handpicked web development, tools, and creative news sent weekly.
  • Smashing Magazine: An online magazine for web designers and developers, known for high-quality content, published on the second Tuesday of every month.

Top comments (0)