tools for webdev

• Thi
• URLs
• Tools for Web Dev
• Frameworks

Thi

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

The following wiki, pages and posts are tagged with web

Title	Type	Excerpt
2021-10-01-wiki-magnific-popup.md	post	지킬 블로그에 이미지 확대 기능 추가하기
Jekyll + liquid	post	Monday-jekyll-liquid, jekyll install on mac and ubuntu using docker
css tips for web development	post	Tue, Oct 19, 21, tools, fonts cascading and selectors
auto focus when page loads	post	Tue, Oct 19, 21, auto-focus media-query google-font
keycode css trics for search focus	post	Wednesday-keycode, how to find keycode for the kb input keys
using css and jquery to switch between themes	post	Wed, Oct 20, 21, toggle icon, flash loading fix, DOM loaded before show content
tools for webdev	post	Sat, Oct 23, 21, tools for webdev frameworks, drawing, visualization text-editor
Complete guide to django rest framework and vue js	post	Wed, Nov 10, 21, Build professional REST APIs and spa with django vue
mvc-mvt definition	post	Fri, Dec 24, 21, difference between mvc and mvt
로컬 구글 Apps Script 개발	post	튜토리얼 따라하기
개발자의 글쓰기	post	개발자 글쓰기의 3원칙 : 정확성, 간결성, 가독성, 변수 네이밍부터 릴리스노트...
파이썬 코딩의 기술 2판	post	똑똑하게 코딩하는 법
자바스크립트는 왜 그 모양일까?	page	더글라스 크락포드가 알려주는
javascript for impatient	page	Exploit the power of modern javascript and avoid the pitfalls
Practical Vim	post	손이 먼저 반응하는
리팩토링 2판	page	코드 구조를 체계적으로 개선하여 효율적인 리팩터링 구현하기
한 권으로 끝내는 정규표현식	page	여덟 가지 프로그래밍 언어별 완벽 해설
자바스크립트 코딩의 기술	page	똑똑하게 코딩하는 법
typescript로 개발시 파일 순서 문제	post	typescript hoisting filepushorder
css-meaning.md	post	toc의 css를 조정하다가 우연히 깨닫게 된 CSS 어원의 의미
Djangovue a fastrack to success	page	summary.
refactoring.md	post	toc의 css를 조정하다가 우연히 깨닫게 된 CSS 어원의 의미Javascript 에서 출력된 html string을 브라우저로 확인하기
wiki-favicon.md	post	favicon 추가 방법, 관련 링크
wiki-innerhtml.md	post	View 에서 가져온 data 를 표기하는 과정에서 문득 value, textContent, innerHTML, innerText의 차이
wiki-toc2side.md	post	CSS및 SCSS에 대한 정리

---