Web Dev tools & resources

Anh-Thi Dinh
draft
⚠️
This is a quick & dirty draft, for me only!

URLs

  • CSS Battle -- take challenge to create CSS objects.

Tools for Web Dev

  • appium — Automation for Apps (used to testing UX on different devices, more exact than Browser Inspector).
  • 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.
  • 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.

Frameworks

  • 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.