Web Dev tools & resources

The last modifications of this post were around 3 years ago, some information may be outdated!

👉 Site: Collection of quick js/html tools.
👉 Note: Resources for DS & ML & DL.
👉 Note: Useful tools for working & studying.

URLs

• CSS Battle -- take challenge to create CSS objects.
• Google HTML/CSS Style Guide

Tools for Web Dev

• appium — Automation for Apps (used to testing UX on different devices, more exact than Browser Inspector).
• Facebook Sharing Debugger tool — check if your urls display correctly or not on facebook.
• Fontello — make an icon as a font (there are also Awesomefont).
• BestFonts.pro — Free fonts for WEB and Photoshop (may be illegal).
• google-webfonts-helper — A Hassle-Free Way to Self-Host Google Fonts — giving us font files and font-face declarations based on the fonts, charsets, styles, and browser support you select.
• Happy Hues — Not sure what colors to use in your designs or where to use them? Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
• HTML characters: copy & paste HTML characters.
• JavaScript Event KeyCodes — get the keycode of any key when you press.
• Regular Expression 101 — rules and transform directly.
• RequestBin — A modern request bin to collect, inspect and debug HTTP requests and webhooks.
• Responsively -- A modified web browser that helps in responsive web development. A web developer's must have dev-tool.
• Tiny helpers — A collection of free single-purpose online tools for web developers.
• Wayback mahine — an internet archive (to check old/dead websites).
• Webfont Generator

Frameworks

👉 Note: Illustration tools.

• For drawing / illustrating:
  • Chart.js — Open source HTML5 Charts for your website.
  • Excalidraw — Virtual whiteboard for sketching hand-drawn like diagrams.
  • JSXGraph — JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.
  • Rough.js
  • Three.js – JavaScript 3D library
  • Two.js — a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
  • Vector.js — Vector is an open source javascript library for creating interactive graphics.
  • Zdog — Round, flat, designer-friendly pseudo-3D engine for canvas and SVG.
• For visualizing data:
  • D3.js — a JavaScript library for manipulating documents based on data.
  • idyll — A toolkit for creating data-driven stories and explorable explanations.
  • Plotly — JavaScript Open Source Graphing Library
• Matter.js — a 2D physics engine for the web.
• Stage.js — 2D JavaScript library for cross-platform HTML5 game development.
• Text & Editor:
  • markdown-it — Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
  • Quill — Your powerful rich text editor.