Skip to content

Latest commit

 

History

History
199 lines (101 loc) · 13.2 KB

WebDevTools.md

File metadata and controls

199 lines (101 loc) · 13.2 KB
Raw

Back

Web Development Tools

Free Tools For Students

  • JetBrains Student License: Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.

  • Student Developer Pack: The best free developer tools for students via @githubeducation.

Text Editors

Here is a list of text editors that may be of use to you. All have some sort of text completion and other features to make work quick and easy.

  • Atom: Open-source and free (WIN, MAC, LINUX).

  • Brackets: Developed by Adobe and Free (WIN, MAC, LINUX).

  • Sublime Text: Andrei's choice but not the only one available. (WIN, MAC, LINUX) Buy it if you like it to help the developer.

  • Visual Studio Code: Open-source from Microsoft. (WIN, MAC, LINUX) Free.

  • Web Storm: A lightweight and intelligent IDE for front-end development and server-side JavaScript.

Many others are available, just search for "text editors" on your search engine of choice.

Editor Features or Plugins

Things to look for if your editor has implementations for them. They will make your life a lot easier.

  • Atom File-icons: Assigns file extension icons and colors.

  • Atom Live Server: Launch simple development HTTP server with live reload.

  • Atom Minimap: A preview of the full source code.

  • Atom Pigments: A package to display colors in project files (CSS).

  • Atom pretty-json: A Package for automatically formatting JSON documents.

  • Atom tern-js: JavaScript code intelligence for Atom - auto complete suggestion.

  • Auto Close Tag: Automatically add HTML/XML close tag.

  • Auto Rename Tag: Automatically rename paired HTML/XML tag.

  • Autoprefixer: Shortcut browser-compatibility issues for CSS/SCSS (Plugin or Built-in).

  • Bracket Pair Colorizer: Allows matching brackets to be identified with colors.

  • Code Linters: Get immediate feedback on code logic or stylistic errors (Plugin or Built-in).

  • Color Highlight: Highlight web colors in your editor.

  • EMMET: Use shortcuts and shorthand to get work done faster (Plugin or Built-in).

  • ES7 React/Redux/GraphQL/React-Native snippets: Provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features.

  • Git: Source control is necessary (Plugin or Built-in).

  • Indent Rainbow: This extension colorizes the indentation in front of your text alternating in four different colors on each step.

  • Material Theme: The most epic theme for your editor.

  • One Monokai Theme: A cross between Monokai and One Dark theme.

  • Polacode: Polaroid for your code. This extension helps you create a good-looking screenshot of your code snippets keeping the look and feel of your code editor.

  • Prettier: Automatic code formatting to standardize style across the codebase (Plugin or Built-in).

  • Settings Sync: A VS Code extension allowing you to synchronize your text editor workflow from settings to snippets, themes, file icons, launch, keybindings, workspaces and extensions. Comes in handy when setting up your developer environment on a new computer (like on a company's work computer).

  • Waka Time: Metrics, insights, and time tracking automatically generated from your programming activity.

  • Visual studio IntelliCode: Visual Studio IntelliCode (IntelliCode) is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, argument completion, code formatting, and style rule inference

Online Editors

  • Codepen: A development environment for front-end designers and developers, to showcase user-created HTML, CSS and JavaScript code snippets.

  • Glitch: An online editor where you can mix and collaborate on code

  • Glot.io: An open-source paste-bin with runnable snippets and API.

  • Repl.it: An instant IDE to learn, build, collaborate, and host all in one place.

  • Codesandbox.io: An online code editor and prototyping tool that makes creating and sharing web apps faster.

Chrome Extensions

  • Built With Technology Analyzer: Lets you see what tools and JavaScript libraries a site is using.

  • ColorZilla: Find colours on your page with this eye dropper.

  • JSON Formatter: Just like the name says, get help with your JSON issues.

  • Pesticide: Make Box Modelling a breeze. Pinpoint issues, fast.

  • React Developer Tools: Name says it all.

  • Redux Dev Tools: Yep, dev tools for Redux.

  • SimilarWeb: Traffic Rank & Website Analysis tool for analyzing existing websites.

  • Vimeo Repeat and Speed: Consume info at faster than normal pace.

  • Wappalyzer: What technology is this site using? One click on the button and you'll know.

  • WhatFont: Instantly find out what font is being used with a click. No Developer Mode required.

  • Apollo Client Devtools: GraphQL debugging tools for Apollo Client.

  • Responsive Viewer: As the name mentions itself, Responsive Viewer helps you to view your app in one screen with multiple media sizes.

  • Fake Filler: This extension helps you to fill all the inputs in your form at once with fake/dummy data. Much better than dealing with all the inputs manually.

  • CSS Peeper: This extension helps you to inspect styles, colors, and export images. You can select and inspect any item on the page to get properly arranged info.

  • Dark Reader: We all read a lot while searching solutions to our problems on the net. Even if many sites have a dark mode feature, there are still some that don't.

CSS Tools

  • Blend: This tool creates CSS code for linear gradients, taking the guesswork out of the process.

  • Border Image Generator: A tool by Mozilla to create border images.

  • Clippy -- CSS clip-path maker : A tool that helps you create shapes and generate its equivalent CSS code.

  • CSS Arrow Please: Create and export CSS code for a custom box with an arrow extending out from the side.

  • cubic-bezier.com: A great tool for creating bezier curve animations in CSS without having to guess at the code.

  • Fancy Border Radius: Generator that helps you create organic looking shapes with border radius.

  • Tachyons: Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

  • Ultimate CSS Gradient Generator: A CSS gradient generator, that allows multiple colorstops and different kinds of gradients.

  • Easings.net: This page helps you choose the right easing function for your CSS animations.

  • Responsively App: This app helps you to get preview all target screens in a single window side-by-side.

  • Doodad Pattern Generator: Highly customizable pattern generator. Can create unique patterns and has a nice shuffle function also.

  • Neumorphism: A tool to generate soft-UI CSS code for neumorphic card designs.

Web Publishing

  • Surge: Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.

  • Netlify: Most used free plateform for static website hosting. Your static website can be anything ranging from simple HTML, CSS, JS site, React, Vue, Angular, Nuxt.js and many more. You can also install netlify-cli with which you can deploy your site from command line.You can also host your site residing on github as repo.

  • Vercel: A cloud platform to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

  • Heroku: Another cloud platform to deploy, manage and scale modern web apps.

  • GitHub Pages: Another cloud platform to deploy, Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

General Development Tools

  • ECMAScript Compatibility Table: A table for checking the compatibility of modern JavaScript elements with browsers and compilers.

  • JSONPlaceholder: A great resource for testing API calls in JavaScript development.

  • SweetAlert2: Some really nice looking alerts that you can use.

  • FrontEnd Tools: A curated repository of Tools for FrontEnd developers.

  • ExtendsClass: An online toolbox for developers: Playgrounds (XPath, Regex, JavaScript and SQL), HTTP clients (SOAP, REST), formatters, converters and encoders.

  • Pageclip: A server for your static websites and HTML forms.

  • RegExr: An online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

  • React Spinners: Really cool collection of loading spinners with React.js

  • Blobs: Generate beautiful blob shapes for web and flutter apps.

  • Sneat Free BootstraP 5 HTML Admin Template: Open-source & Easy to use Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout.

  • Meta Tags: Meta Tags is a tool to debug and generate meta tag code for any website. With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

  • DevAssets: A curated list of many different types of resources for developers.

  • Materio Free Bootstrap 5 HTML Admin Template: Open-source & Easy to use Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout.

  • Pyrexp: An online tool for testing and visualizing Regular Expressions.