# 🐱‍👤 Tools [![hackmd-github-sync-badge](https://hackmd.io/OQYEvARETq-eXOsVEvzqRw/badge)](https://hackmd.io/OQYEvARETq-eXOsVEvzqRw) - [hackmd.io](https://hackmd.io/) - [resume worded](https://resumeworded.com/resume-templates) - [sentry](https://sentry.io/welcome/) - [drawsql](https://drawsql.app/) - [inspector swagger for API](https://inspector.swagger.io/) - [roadmap.sh](https://roadmap.sh/) - [linkedin skill quiz](https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes) - [quill bot - ai rewrite](https://quillbot.com/) - [parsec - stream remote desktop](https://parsec.app/) - [fako - visual fake data generator](https://fako.microkit.co/) - [spline design - 3d design app](https://spline.design/) - [pixeltrue](https://www.pixeltrue.com/) - [urlbox - website screenshot API](https://www.urlbox.io/) - [untools - problem solving & thinking skills](https://untools.co/problem-solving) - [apple weatherkit api](https://developer.apple.com/documentation/weatherkitrestapi) - [product hunt](https://www.producthunt.com/launch) - [compiler exlorer](https://godbolt.org/) - [carbon - share source code image - embed for medium](https://carbon.now.sh/) - [regex101 - regex testing for js, python, php, go, java, C#](https://regex101.com/) - [unitag - custom styled QR codes](https://www.unitag.io/qrcode) - [ga-dev-tools - google analytics dev tools](https://ga-dev-tools.web.app/) - [codekeep](https://codekeep.io/home?ref=tailwind-to-css) - [jupyterbook](https://jupyterbook.org/en/stable/intro.html) - [bionic-reading](https://bionic-reading.com/) - [photopea](https://www.photopea.com/) - [seamless texture checker](https://www.pycheung.com/checker/) - [LeiaPix Converter | Depth Animations](https://convert.leiapix.com/) - https://etempmail.com/ - [Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI - Vectorizer.AI](https://vectorizer.ai/) - https://www.sqltranslate.app/ - https://websniffer.com - [Examples · Cloudflare Workers docs](https://developers.cloudflare.com/workers/examples/) - [Machine Learning CO2 Impact Calculator (mlco2.github.io)](https://mlco2.github.io/impact/) - [Eraser - The Whiteboard for Engineering Teams](https://app.eraser.io) | Name | Description | | --- | --- | | [HackMD](https://hackmd.io/) | A collaborative markdown editor with real-time preview and version control. | | [Resume Worded](https://resumeworded.com/resume-templates) | A platform that provides resume templates and analyzes resumes for content and formatting improvements. | | [Sentry](https://sentry.io/welcome/) | A cloud platform for monitoring, troubleshooting, and resolving software errors and crashes in real-time. | | [DrawSQL](https://drawsql.app/) | A cloud-based visual database schema design tool that generates SQL code. | | [Inspector Swagger for API](https://inspector.swagger.io/) | A web-based tool that helps developers to test, document, and debug APIs using the OpenAPI specification. | | [Roadmap.sh](https://roadmap.sh/) | A platform that provides roadmaps for learning various programming languages, tools, and frameworks. | | [LinkedIn Skill Quiz](https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes) | A GitHub repository that provides practice quizzes for LinkedIn skill assessments. | | [Quill Bot](https://quillbot.com/) | An AI-based tool that helps users to rewrite and paraphrase text. | | [Parsec](https://parsec.app/) | A low-latency, high-quality remote desktop streaming platform for gaming, creative, and professional use. | | [Fako](https://fako.microkit.co/) | A web-based tool that generates fake data, such as names, addresses, and phone numbers, for testing and demonstration purposes. | | [Spline Design](https://spline.design/) | A 3D design app that enables designers to create and animate 3D objects and scenes. | | [Pixeltrue](https://www.pixeltrue.com/) | A library of royalty-free SVG illustrations and icons for websites and apps. | | [URLbox](https://www.urlbox.io/) | An API that generates website screenshots and thumbnails in real-time. | | [Untools](https://untools.co/problem-solving) | A collection of thinking tools and problem-solving techniques to help users approach problems with a structured and creative mindset. | | [Apple WeatherKit API](https://developer.apple.com/documentation/weatherkitrestapi) | A RESTful API that provides weather forecasts and historical weather data for developers to integrate into their apps. | | [Product Hunt](https://www.producthunt.com/launch) | A platform for discovering and sharing new products and services. | | [Compiler Explorer](https://godbolt.org/) | A web-based interactive code editor that shows the assembly code generated by compiling C++ code with different compilers and settings. | | [Carbon](https://carbon.now.sh/) | A web-based tool that generates shareable images of source code with syntax highlighting and custom styling. | | [Regex101](https://regex101.com/) | An online tool for testing regular expressions for various programming languages, including JavaScript, Python, PHP, Go, Java, and C#. | | [RegExr](https://regexr.com/) | RegExr: Learn, Build, & Test RegEx | | [Unitag](https://www.unitag.io/qrcode) | A website that generates custom QR codes with various styles and designs. | | [GA Dev Tools](https://ga-dev-tools.web.app/) | A suite of tools for developers to debug and analyze Google Analytics data and configurations. | | [Codekeep](https://codekeep.io/home?ref=tailwind-to-css) | A web-based tool for organizing and sharing code snippets and bookmarks. | | [JupyterBook](https://jupyterbook.org/en/stable/intro.html) | An open-source platform for creating and publishing interactive, web-based books and documentation from Jupyter Notebooks. | | [Bionic Reading](https://bionic-reading.com/) | A web-based tool that enhances reading speed and comprehension through a variety of techniques, including rapid serial visual presentation and eye-tracking. | | [Photopea](https://www.photopea.com/) | A web-based image editor that supports various file formats, including PSD, Sketch, and XD. | | [Seamless Texture Checker](https://www.pycheung.com/checker/) | A web-based tool that checks seamless textures for tiling errors and generates a preview of how the texture will look when tiled. | | [LeiaPix Converter Depth Animations](https://convert.leiapix.com/) | A web-based tool that converts 2D images and videos into 3D depth animations using AI technology. | | [eTempMail](https://etempmail.com/) | A disposable email address service that enables users to receive emails without revealing their real email addresses. | | [Vectorizer.AI](https://vectorizer.ai/) | A web-based tool that uses AI to automatically convert pixelated images into vector graphics with full color. | | [SQL Translate](https://www.sqltranslate.app/) | A web-based tool that translates SQL code between different dialects and databases. | | [WebSniffer](https://websniffer.com/) | A web-based tool that enables users to inspect and analyze HTTP requests and responses. | | [Cloudflare Workers Examples](https://developers.cloudflare.com/workers/examples/) | A collection of examples and templates for building serverless applications with Cloudflare Workers. | | [MLCO2 Impact Calculator](https://mlco2.github.io/) | A machine learning tool that estimates the carbon footprint of running machine learning models in the cloud. | | [Eraser](https://app.eraser.io/) | A web-based whiteboard app designed for engineering teams to collaborate and brainstorm ideas in real-time. | | [DEV Community](https://dev.to/)| | | [Contentful](https://www.contentful.com/)|CMS | | [miro](https://miro.com/) |Online whiteboard for visual collaboration, like figma, good for mindmap| | [mindmeister](https://www.mindmeister.com/) |Collaborative Mind Mapping| | [个人技术分享 (qrbtf.com)](https://qrbtf.com/) |qr code| |[trello](https://trello.com/)|notion alike task list| | [sonarqube (sonarsource.com)](https://www.sonarsource.com/products/sonarqube/)|Empower development teams with a code quality and security solution that deeply integrates into your enterprise environment; enabling you to deploy clean code consistently and reliably.| |[uuidtools](https://www.uuidtools.com/generate)|List of UUID Generators & Tools| |[WebPageTest](https://www.webpagetest.org)|Test web performance| |[RIOT](https://riot-optimizer.com/)|Free Image Optimizer | |[Atlassian \| statuspage](https://www.atlassian.com/software/statuspage)|Easily communicate real-time status to your users. Just like DigitalOcean, Dropbox, and Intercom.| |[https://instatus.com](https://instatus.com/) |Get a beautiful status page in 10 seconds, without paying thousands of dollars!| |[Easy With AI](https://easywithai.com/free-ai-image-generators/)| The best AI tools & services in one place| |[cryptii](https://cryptii.com/)| Web app offering modular conversion, encoding and encryption online. Translations are done in the browser without any server interaction. This is an Open Source project, code licensed MIT. | |Source Code Search Engine |[Find any alphanumeric snippet](https://publicwww.com/), signature or keyword in the web pages HTML, JS and CSS code.| |[Semgrep](https://semgrep.dev/playground/r/3qUzQD/ievans.print-to-logger?editorMode=structure)|A language agnostic linter for custom rule| {%preview https://brandingstyleguides.com/ %} {%preview https://watabou.github.io/ %} {%preview https://pudding.cool/ %} {%preview https://www.grid-type.com/ %} {%preview https://dataurl.app/ %} ## Books - [system-design book](https://github.com/public-api-lists/public-api-lists#art--design) - [public-api-lists](https://github.com/public-api-lists/public-api-lists#art--design) - [public-apis](https://github.com/public-apis/public-apis) - [nanoGPT](https://github.com/karpathy/nanoGPT) - [Playground AI](https://playgroundai.com/) - [parse-don-t-validate](https://lexi-lambda.github.io/blog/2019/11/05/parse-don-t-validate/) ## Secure Tunnels / Reverse Proxy / Port Penetration - [ngrok](https://ngrok.com/) - [playit](https://playit.gg/) - cloudflare tunnel - [mitmproxy - a free and open source interactive HTTPS proxy](https://mitmproxy.org/) - [wireshark - The world's most popular network protocol analyzer](https://www.wireshark.org/) - [tcpdump - a powerful command-line packet analyzer 🍦](https://www.tcpdump.org/) - [ZAP zaproxy](https://github.com/zaproxy/zaproxy) # 📈Data Analysis / Visualization - [datawrapper blog](https://blog.datawrapper.de/colors/) - [data to viz](https://www.data-to-viz.com/) - [Data visualization - Data visualization - Collections | Carbon Design System](https://next.carbondesignsystem.com/data-visualization) - [The D3 Graph Gallery – Simple charts made with d3.js (d3-graph-gallery.com)](https://d3-graph-gallery.com/index.html) # AI tools - [NN-SVG](http://alexlenail.me/NN-SVG/LeNet.html) - [resumai](https://www.wonsulting.com/resumai) - [jenni ai - writing paper and thesis](https://app.jenni.ai/) - [ClipDrop](https://clipdrop.co/) - [Cohere | Building the Future of AI](https://cohere.com/) # ![](https://i.imgur.com/7Uxb1Rv.png =36x36) JS ## Books - [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/) - [深入理解 TypeScript | 深入理解 TypeScript](jkchao.github.io) - [YOU MIGHT NOT NEED **LODASH**](https://youmightnotneed.com/lodash) - [JavaScript 标准参考教程 🍔 - good low level concepts like rendering pipeline, event loop, task queue, etc](https://wohugb.gitbooks.io/javascript/content/bom/engine.html) - [现代 JavaScript 教程 🍔](https://zh.javascript.info/) - [typescript - branded types](https://egghead.io/blog/using-branded-types-in-typescript) - [usfca - Data Structure Visualizations](https://www.cs.usfca.edu/~galles/visualization/Algorithms.html) - [The Modern JavaScript Tutorial - How it's done now. From the basics to advanced topics with simple, but detailed explanations.](https://zh.javascript.info/) - [How to GraphQL - The Fullstack Tutorial for GraphQL](https://www.howtographql.com/) ### Error list - [errno(3) — Linux manual page](https://man7.org/linux/man-pages/man3/errno.3.html) - [Chromium - net_error_list.h](https://source.chromium.org/chromium/chromium/src/+/main:net/base/net_error_list.h) - [NodeJS - errors](https://nodejs.org/api/errors.html#errors_common_system_errors) ### Garbage Collection - [v8 blog - Trash talk: the Orinoco garbage collector (2019)](https://v8.dev/blog/trash-talk) - [How Does Garbage Collection Work in Java? 👍](https://www.alibabacloud.com/blog/how-does-garbage-collection-work-in-java_595387) - [Memory Management Reference](https://www.memorymanagement.org/index.html) ## Character and Encoding - [字嗨 - Unicode](https://zi-hi.com/Unicode) ## Compiler / Bundler / Babel / Polyfill - [Babel online compiler - test jsx compiling, ployfill, compilation for browser support](https://babeljs.io/repl) - [babel-plugin-import - compile import statements for modular import](https://www.npmjs.com/package/babel-plugin-import) - [Browserlist](https://browsersl.ist/) - [AST explorer](https://astexplorer.net/#/KJ8AjD6maa) - [SWC - Rust-based compiler/bundler for the Web](https://swc.rs/) - [Parcel](https://parceljs.org/) - [bundlephobia - find the cost of adding a npm package to your bundle](https://bundlephobia.com/) - [bundlejs - a quick npm package size checker](https://bundlejs.com/?q=lodash%404.17.21) - [browserify](https://browserify.org/) - [Rollup repl](https://rollupjs.org/repl/) ### Polyfill - [polyfill.io - Delivers only the polyfills required by the user's web browser.](https://polyfill.io/) - [Modernizr - detect JS and CSS features on your web site, so you can tailor the experience to the user.](https://modernizr.com/download?setclasses) ## Tools - [jsbench](https://jsbench.me/) - [Cypress - e2e testing tool](https://www.cypress.io/) - [cypress-real-events - Fire native system events from Cypress using Chrome Devtools Protocol, like hover, focus, etc](https://github.com/dmtrKovalenko/cypress-real-events) - [Playwright - Fast and reliable end-to-end testing for modern web apps](https://playwright.dev/) - [Mock Service Worker - API mocking of the next generation](https://mswjs.io/) - [Rico's cheatsheets](https://devhints.io/) - https://github.com/lokalise/i18n-ally - [jsdoc](https://jsdoc.app/#block-tags) - [jsdoc 中文文檔](https://www.jsdoc.com.cn/tags) - [tsdocs.dev - browse type documentation for npm packages](https://tsdocs.dev/) - [ts-migrate - a tool for migrating frontend application to TypeScript](https://www.npmjs.com/package/ts-migrate) - [ts-error-translator](https://ts-error-translator.vercel.app/) - [gitmoji - An emoji guide for your commit messages](https://gitmoji.dev/) - [markmap](https://markmap.js.org/repl) - [NAPI-RS - a framework for building pre-compiled Node.js addons in Rust.](https://napi.rs/) - [JSPM:Generator - tool to generate importmap and add integrity from cdn](https://generator.jspm.io/) - [Source Map Validator](https://sourcemaps.io/) - https://www.virustotal.com/gui/home/upload - [Diagram Plus - UML diagram tool by TablePlus](https://diagramplus.com/) - [Knip - Find unused files, dependencies and exports in JavaScript and TypeScript projects](https://knip.dev/) - [wrk - A modern HTTP benchmarking tool capable of generating significant load when run on a single multi-core CPU.](https://github.com/wg/wrk) - [Renovate - Automated dependency updates. Multi-platform and multi-language.](https://github.com/renovatebot/renovate) - [npkill - Easily find and remove old and heavy node_modules folders ✨](https://www.npmjs.com/package/npkill) - [memlab - an end-to-end testing and analysis framework for identifying JavaScript memory leaks](https://github.com/facebook/memlab) ### Benchmark - [A web framework benchmark](https://web-frameworks-benchmark.netlify.app/result?asc=0&l=rust,kotlin,php,python,javascript,go&metric=totalRequestsPerS&order_by=level512) ### JSON schema (API, YAML) - [quicktype - Eextract type schema (interface/type/struct/enum) from json](https://app.quicktype.io/) - [JSON Schema Store](https://www.schemastore.org/) - [online-json-to-schema-converter](https://www.liquid-technologies.com/online-json-to-schema-converter) - [json-schema.org](https://json-schema.org/implementations.html) - To specify the schema in vscode by putting it in settings.json, for example: ```json "json.schemas": [ { "fileMatch": [ "openapi.json", ], "url": "https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/schemas/v3.1/schema.json", } ] ``` or specify the `$schema` in that json, like: ```json "$schema": "https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/schemas/v3.1/schema.json", ``` ## Documentation tools - gitbook - openAPI swagger - [redocly - Make API docs your superpower](https://redocly.com/) - [docusaurus - Build optimized websites quickly, focus on your content ![](https://hackmd.io/_uploads/rJyGBoZZp.png =24x24)](https://docusaurus.io/) - [vitepress - A Static Site Generator (SSG) designed for building fast, content-centric websites](https://vitepress.vuejs.org/guide/what-is-vitepress) - [nextra - Make beautiful websites with Next.js & MDX](https://nextra.site/) - [replay.io docs](https://github.com/replayio-public/replay-documentation/tree/main/utils) - [Typedoc - TypeDoc converts comments in TypeScript source code into rendered HTML](https://typedoc.org/guides/overview/) - [typedoc own generated API doc](https://typedoc.org/api/modules.html) - [Example](https://typedoc.org/example/index.html) ## Library ### Animation library - [gsap](https://greensock.com/gsap/) - [motion canvas - A TypeScript library that uses generators to program animations](https://motioncanvas.io/) - [framer-motion - A production-ready motion library for React](https://www.framer.com/motion/) - [Popmotion - Theanimator’sJavaScripttoolbox.](https://popmotion.io/) - [snap svg - svg js library - jquery like](http://snapsvg.io/) --- - [xstate - state machine for state management](https://xstate.js.org/) - [highlightjs - code lightlighting library](https://highlightjs.org/) - [ahmadawais/Shades-of-Purple-HighlightJS: 🦄 Shades of Purple — A professional theme with hand-picked & bold shades of purple for HighlightJS.](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS) - [prism.js - syntax highlighter](https://prismjs.com) - [mathjax - render and display laTex ](https://www.mathjax.org/) - [juxtapose - comparing two images](https://juxtapose.knightlab.com) - [mermaid](https://mermaid.js.org/intro/) - [mermaid - live editor](https://mermaid-js.github.io/mermaid-live-editor/edit) - [echarts.js](https://echarts.apache.org/) - [excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams (github.com)](https://github.com/excalidraw/excalidraw) - [Excalidraw | Hand-drawn look & feel • Collaborative • Secure](https://excalidraw.com/) - [jagenjo/litegraph.js: A graph node engine](https://github.com/jagenjo/litegraph.js) - > ![image](https://hackmd.io/_uploads/BysFcmXiR.png) - [css-doodle](https://css-doodle.com/) - [StackExchange/Stacks-Editor: Stack Overflow's Combination Rich Text / Markdown Editor](https://github.com/StackExchange/Stacks-Editor) - [Testing Library](https://testing-library.com/docs/dom-testing-library/intro) - [microsoft/monaco-editor: A browser based code editor (github.com)](https://github.com/microsoft/monaco-editor) - [Monaco Editor (microsoft.github.io)](https://microsoft.github.io/monaco-editor/) - [JustJs - Essential utilities for all your javascript projects.](https://justjs.github.io/) - [reveal.js - The HTML presentation framework](https://revealjs.com/) - [lowdb](https://github.com/typicode/lowdb) - [dummyjson](https://dummyjson.com/) - https://jsonplaceholder.typicode.com/ - [CodeMirror](https://codemirror.net/) - [Rxjs](https://cn.rx.js.org/manual/overview.html) - [JSONata](https://www.npmjs.com/package/jsonata) - [playground](https://www.stedi.com/jsonata/playground?statev2=eJyVk11LwzAUhv9KCLusLh8tc14IxQ4Z%2BDGow4t1F6U9amFLapKKw87fbrp%2B2AmrCIEk531P8pxwslphLQuVAHYwfOQKtM6ksJu4JCW182ckEIpwnKaVFuFLdIhUsUyfQaFkDlX0Od5ocFpJGwVgqniEKeMuuoszgUJzHuHOk2RmVztupUa%2BeIEN6J6uTWygNlz7%2FTxZCKN2SMTbRl6GVq%2FkvVPTSpWCOsCu6qyGudOC7mhGGB0TPqaT7orKlSuZFomZB7UrmN1wdmR4K2Jhmgr4UWKWwALUUmSH%2Br2e9i43RctMSY3cQv%2FJSMmYsiHGh%2FlyenGSkRIyQElPUXr%2FpCR2DL7k4mnmTk5Sut7QUx6V0MfkP5jVtG7aQIOwhPddn4SPs2De3G37qNBGbkG1ZNPphDPayfo1y7cgGnDOKXMp%2B6Uhs8ubs%2F3QX1QQe%2FtnRujrCo3sQpas5KWL1w728PoblJf0aQ%3D%3D) - [csv-parser](https://www.npmjs.com/package/) - [Griffel.js - CSS-in-JS with ahead-of-time compilation](https://griffel.js.org/) - [Tabster - A set of tools to handle web application keyboard navigation.](http://tabster.io/) - [effect - a powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.](https://effect.website/docs/introduction) - [zod - TypeScript-first schema validation with static type inference](https://github.com/colinhacks/zod#comparison) - [polished - A lightweight toolset for writing styles in JavaScript](https://polished.js.org/) - [Picomatch - Blazing fast and accurate glob matcher written in JavaScript.](https://www.npmjs.com/package/picomatch) - [fast-glob](https://www.npmjs.com/package/fast-glob) - [dependency-cruiser - Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD.](https://github.com/sverweij/dependency-cruiser/blob/HEAD/doc/real-world-samples.md) - [Safely restructure your codebase with Dependency Graphs](https://understandlegacycode.com/blog/safely-restructure-codebase-with-dependency-graphs/) - [cli docs](https://github.com/sverweij/dependency-cruiser/blob/HEAD/doc/cli.md#--output-type-specify-the-output-format) - [Daphne's dependencies - _A gentle introduction to dependency-cruiser_ ](https://github.com/sverweij/dependency-cruiser/blob/main/doc/sample-output.md) - [themeing](https://github.com/sverweij/dependency-cruiser/blob/54fb588cec71393d4634913c4754d04b668a044e/doc/options-reference.md#theme-dot-ddot-and-archi-reporters) - [madge - a developer tool for generating a visual graph of your module dependencies, finding circular dependencies](https://www.npmjs.com/package/madge) - [dpdm - A robust static dependency analyzer for your JavaScript and TypeScript projects.](https://www.npmjs.com/package/dpdm) - [Chevrotain - Parser Building Toolkit for JavaScript](https://chevrotain.io/docs/) - Alternative: [ohm.js](https://www.npmjs.com/package/ohm-js), [Peggy](https://www.npmjs.com/package/peggy), [nearley](https://www.npmjs.com/package/nearley) - [Code Examples](https://github.com/chevrotain/chevrotain/tree/master/examples/grammars) - [playground](https://chevrotain.io/playground/) - [railroad diagram example - CSS](https://chevrotain.io/diagrams_samples/css.html) - [railroad diagram example - JSON](https://chevrotain.io/diagrams_samples/json.html) - [JSON](https://www.json.org/json-en.html) - https://blackglory.me/notes/compiler - [AST Explorer](https://astexplorer.net/) - [Shiki magic move - Smoothly animated code blocks](https://shiki-magic-move.netlify.app/) - [qs - A querystring parsing and stringifying library with some added security.](https://www.npmjs.com/package/qs) - [typos - Fast Rust based source code spell checker](https://github.com/crate-ci/typos?tab=readme-ov-file) - [fast-deep-equal - The fastest deep equal with ES6 Map, Set and Typed arrays support.](https://www.npmjs.com/package/fast-deep-equal) - [fast-equals - Perform blazing fast equality comparisons (either deep or shallow) on two objects passed](https://www.npmjs.com/package/fast-equals) - [defu - Assign default properties, recursively. Lightweight and Fast.](https://www.npmjs.com/package/defu) - [unbuild - Robust rollup based bundler that supports typescript and generates *commonjs* and *module* formats + *type declarations*.](https://github.com/unjs/unbuild) - [magic-regexp - A compiled-away, type-safe, readable RegExp alternative] - [tinybench - a simple, tiny and light-weight 7KB (2KB minified and gzipped) benchmarking library](https://github.com/tinylibs/tinybench) - [pagefind - a fully static search library that aims to perform well on large sites ](https://pagefind.app/) - [tippy.js - the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.](https://atomiks.github.io/tippyjs/) - [csstype - TypeScript and Flow definitions for CSS, generated by data from MDN.](https://www.npmjs.com/package/csstype) - [dnd-kit - A lightweight, performant, accessible and extensible drag & drop toolkit for React.](https://dndkit.com/) - [PDF.js - a Portable Document Format (PDF) viewer that is built with HTML5. PDF.js is community-driven and supported by Mozilla.](https://github.com/mozilla/pdf.js?tab=readme-ov-file#online-demo) ## Prettier - [Prettier Options](https://prettier.io/docs/en/options.html#tab-width) ## Eslint - [ESLint Docs CN](https://zh-hans.eslint.org/docs/latest) - [ESLint Rules CN](http://eslint.cn/docs/rules/) - [ESLint Rules](https://eslint.org/docs/latest/rules) - [Typescript-eslint - playground](https://typescript-eslint.io/play/) ### Configuration file Check out [Configuration Objects](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects) for available config field. `eslint.config.js` (`.mjs`, `.cjs`) ESM: ```javascript export default [ { rules: { semi: "error", "prefer-const": "error" } } ]; ``` CommonJS: ```javascript module.exports = [ { rules: { semi: "error", "prefer-const": "error" } } ]; ``` Other format: - `.eslintrc.json` - `.eslintrc.yaml` / `.eslintrc.yml` - `.eslintrc.js` - `eslintConfig` field in `package.json` file --- ### Disable next line ```javascript! // eslint-disable-next-line no-use-before-define var thing = new Thing(); ``` ### Disable line ```javascript! var thing = new Thing(); // eslint-disable-line no-use-before-define ``` ### Disable for a region ```javascript! /* eslint-disable no-alert, no-console */ alert('foo'); console.log('bar'); /* eslint-enable no-alert */ ``` ### Disable for the whole file ```javascript /* eslint jsx-a11y/alt-text:off react/jsx-no-duplicate-props:off */ ``` ## React - [React Fast Marquee](https://www.react-fast-marquee.com/) - [samarmohan/react-text-loop-next: Animate words in your headings](https://github.com/samarmohan/react-text-loop-next) - [react-colorful - A tiny color picker component for React and Preact apps](https://omgovich.github.io/react-colorful/) - [react-markdown](https://remarkjs.github.io/react-markdown/) - [redux-observable - RxJS based middleware for Redux](https://redux-observable.js.org/) - [Million.js - fast virtual DOM](https://million.dev/) - [React Hooks for Data Fetching – SWR](https://swr.vercel.app/) - [TanStack Query | React Query, Solid Query, Svelte Query, Vue Query](https://tanstack.com/query/v5/) - [useHooks - A collection of modern, server-safe React hooks – from the ui.dev team](https://usehooks.com/) - [react-use](https://github.com/streamich/react-use) - [@react-hookz/web - a library of general-purpose React hooks built with care and SSR compatibility in mind](https://github.com/react-hookz/web) - [nano-css - a tiny 5th generation framework-agnostic CSS-in-JS library](https://github.com/streamich/nano-css) - [Generations of CSS-in-JS](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation) - [Ariakit - an open-source library that provides unstyled, primitive components for building accessible web apps, design systems, and component libraries.](https://ariakit.org/) - [Sonner - An opinionated toast component for React .](https://sonner.emilkowal.ski/) - https://emilkowal.ski/ui/building-a-toast-component - [React Hot Toast - The Best Toast in Town. Smoking hot React notifications.](https://react-hot-toast.com/) - [React spinner](https://www.davidhu.io/react-spinners/) - [React helmet - This reusable React component will manage all of your changes to the document head.](https://www.npmjs.com/package/react-helmet) # Chrome pages ## Full list [chrome://chrome-urls/](chrome://chrome-urls/) - [chrome://process-internals/ - monitor processes](chrome://process-internals) - [chrome://predictors/](chrome://predictors/) - [chrome://discards/ - monitor visibility and discard count](chrome://discards/) ## Shortcuts - <kbd>ctrl</kbd> <kbd>Q</kbd> : Switch tabs - <kbd>ctrl</kbd> <kbd>shift</kbd> <kbd>A</kbd> : Search tabs - <kbd>ctrl</kbd> <kbd>shift</kbd> <kbd>T</kbd> : Reopen previously closed tabs in the order they were closed - <kbd>shift</kbd> <kbd>esc</kbd> : Open the Chrome Task Manager - <kbd>ctrl</kbd> <kbd>g</kbd> : Jump to the next match to your Find Bar search - <kbd>ctrl</kbd> <kbd>shift</kbd> <kbd>j</kbd> : Open Developer Tools # Haskell - [School of haskell](https://www.schoolofhaskell.com/) # ![](https://i.imgur.com/SL9ArXy.png =36x36) Python tools - [perfpy - good looking python code benchmark](https://perfpy.com/) - [numba - run numpy and native python faster like C](https://numba.pydata.org/) - https://pyscript.com/ - [arogozhnikov/einops: Deep learning operations reinvented (for pytorch, tensorflow, jax and others)](https://github.com/arogozhnikov/einops) - [PyO3 - Rust bindings for Python, including tools for creating native Python extension modules. Running and interacting with Python code from a Rust binary is also supported.](https://github.com/PyO3/pyo3) # UI Ø ## UI framework - [bootstrap](https://getbootstrap.com/docs/5.2/getting-started/introduction/) - [tailwind css]() - [tailwind ui](https://tailwindui.com/components#product-application-ui) - [components @tailwind](https://v1.tailwindcss.com/components/alerts) - [tailwind cheatsheet](https://nerdcave.com/tailwind-cheat-sheet) - [flowbite @tailwind](https://flowbite.com/) - [flowbite-vue @tailwind](https://flowbite-vue.com/pages/getting-started.html) - [headless ui @tailwind](https://headlessui.com/) - [smelte - base on Svelte and Tailwind CSS using Material Design spec.](https://smeltejs.com/) - [tailwindcomponents @tailwind](https://tailwindcomponents.com/) - [tailwind-elements](https://tailwind-elements.com/) - [material-tailwind 😍](https://www.material-tailwind.com/) - [chakra ui - for react, next.js, vite](https://chakra-ui.com/) [chakra ui - react playground](https://play.chakra-ui.com/playground) [OpenChakra](https://openchakra.app/) - [U;](https://ui.dev/) - [picocss](https://picocss.com/docs/classless.html) - [tailwindcss-typography - plugin for typography like markdown, pull from cms](https://github.com/tailwindlabs/tailwindcss-typography) - [daisyui - a lots of theme, color palette and corner, based on tailwind :heart:](https://daisyui.com/docs/themes/) - [Twind - The smallest, fastest, most feature complete tailwind-in-js solution in existence](https://twind.dev/) - [typora-gitbook-theme](https://github.com/h16nning/typora-gitbook-theme) - [Ant Design - The world's second most popular React UI framework](https://ant.design/) - [MUI: The React component library you always wanted - Material UI](https://mui.com/) - [radix ui - react](https://www.radix-ui.com/) - [React Aria - A library of React Hooks that provides accessible UI primitives for your design system.](https://react-spectrum.adobe.com/react-aria/) - [Mantine - react](https://mantine.dev/) - [Skeleton - The UI toolkit for Svelte and Tailwind. 🍔😍](https://www.skeleton.dev/) - [SvelteUI - A variety of components, actions, transition and utility functions](https://www.svelteui.org/) - [Bulma: Free, open source, and modern CSS framework based on Flexbox 😍](https://bulma.io/) - [Beer CSS - Build material design in record time, without stress for devs](https://www.beercss.com/) - [Agnostic UI](https://www.agnosticui.com/) - [shadcn/ui](https://ui.shadcn.com/) - [Stacks (stackoverflow.design)](https://stackoverflow.design/) - [cva](https://cva.style/docs) - [Microsoft Fluent 2 Web – Figma](https://www.figma.com/community/file/836828295772957889) - [Fluent UI official react components](https://github.com/microsoft/fluentui) - [Fluent 2 Design System](https://fluent2.microsoft.design/) - [catalyst-ui](https://catalyst-ui.com/docs) - [normalize.css](https://necolas.github.io/normalize.css/) - [[前端UI组件库](https://www.thosefree.com/web/ui "前端UI组件库")](https://www.thosefree.com/mand-mobile) :eye: - [NuxtUI - has `kwyboard shortcut`](https://ui.nuxtlabs.com/getting-started) - [Next UI](https://nextui.org/docs) - [NextUI Pro created by the team behind NextUI](https://www.nextui.pro/components#application) - [Preline UI - an open-source set of prebuilt UI components based on Tailwind](https://preline.co/) - [CodyHouse UI - a library of HTML, CSS, and JavaScript components that make it easy to create accessible websites quickly and efficiently.](https://codyhouse.co/ds/get-started) - [How to combine SASS color functions and CSS Variables](https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables) - [StyleX - The styling system from facebook](https://stylexjs.com/) - [melt ui - melt away complexity. An open-source Svelte library for building high-quality, accessible design systems and web apps.](https://melt-ui.com/) - [zagjs - UI components powered by Finite State Machines](https://zagjs.com/overview/introduction) - [Bits UI - a collection of headless component primitives](https://www.bits-ui.com/docs/introduction) - [postcss-cascade-layers - CSS polyfill for cascade layers based on postcss](https://www.npmjs.com/package/@csstools/postcss-cascade-layers) - [postcss-bundler - CSS bundler on `url()`](https://www.npmjs.com/package/@csstools/postcss-bundler) - [Lobe UI - an open-source UI component library for building AIGC web apps](https://ui.lobehub.com/) - [Open UI 😮 - specifications and test suites for built-in web UI components and controls](https://open-ui.org/) - [ariakit - Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps. 👍](https://ariakit.org/) - [Tamagui - a React Native style system for multiple platfrom](https://tamagui.dev/) - [Park UI - got good vibe](https://park-ui.com/docs/panda/components/accordion) - [Ark UI - cool multi-framework UI design system designed by Chakra UI team 🍦](https://ark-ui.com/react/docs/components/accordion) - [Zagjs - A collection of framework-agnostic UI components powered by Finite State Machines that can be used to build design systems for React, Vue, Solid.js and Svelte](https://zagjs.com/) - [Aceternity UI - awesome framer motion templates 👍👍](https://ui.aceternity.com/components) - [DevExtreme](https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/ColorBox/Overview/MaterialPurpleLight/) - [floating-ui](https://floating-ui.com/docs/getting-started) - [Franken UI - HTML-first, open-source library of UI components that works as a standalone or as a Tailwind CSS plugin.](https://franken-ui.dev/) - [Orbit design system](https://orbit.kiwi/) - [LINE Design System](https://designsystem.line.me/LDSG/components/) - [Pagedone Figma Design System](https://pagedone.io/figma) - [Flowbite Svelte](https://flowbite-svelte.com/) - [Base Design System - by Uber](https://base.uber.com/6d2425e9f/p/294ab4-base-design-system) - [Supabase UI](https://ui.supabase.io/) - [Svelte Animation Components - Free Components, Build using Tailwind CSS](https://animation-svelte.vercel.app/) - [HyperUI - a collection of free Tailwind CSS components](https://www.hyperui.dev/) - [Original UI 👍](https://originui.com/) - [shadcn/ui expansions](https://shadcnui-expansions.typeart.cc/) - [Time Picker - A `<TimePickerInput />` component built with React and Shadcn UI.](https://time.openstatus.dev/) - [Shadcn Extension](https://shadcn-extension.vercel.app/) - [enhanced-button](https://enhanced-button.vercel.app/) - [Neobrutalism components - A collection of neobrutalism-styled components based on shadcn/ui](https://www.neobrutalism.dev/) - [React Bits - Animated UI Components For React](https://www.reactbits.dev/) ## Common building block references - [flutter - gallery](https://gallery.flutter.dev/) - [stack sorted](https://stacksorted.com) - [appstack - common application layout design (dashboard, profile, settings, login...)](https://appstack-react.bootlab.io/dashboard/crypto) - [💘 Animated UI Components for React & Tailwind - Addicting, interactive, animated UI components for React, Tailwind CSS, Framer Motion & more. Copy & paste them into your code with 2 clicks.](https://www.hover.dev/components) - [Storybook glossary - actual showcase for common UI components on the web](https://storybook.js.org/showcase/glossary) ## UI tools - [shortcuts.design](https://shortcuts.design/) - [smooth shadow](https://shadows.brumm.af/) - [getwaves](https://getwaves.io/) - [haikei - background wave svg - used good lokking chakra ui](https://app.haikei.app/) - [checklist design :heart:](https://www.checklist.design/) - [Toools.design - A website that provides UI/UX design courses, guides, and tips.](https://www.toools.design/learning-ui-ux-design-courses-guides-and-tips) - [transform.tools - A set of web-based tools that helps developers to transform code between different formats and languages. (eg css to tailwind)](https://transform.tools/) - [savee.it](https://savee.it/) - [hero patterns](https://heropatterns.com/) - [css filter tricks](https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/) - [tailblocks - page layout @tailwind](https://tailblocks.cc/) - [cssgradient - a lot of gradient](https://cssgradient.io/) - [loremipsum - placeholder text](https://loremipsum.io/) - [tailwind-converter](https://tailwind-converter.netlify.app/) - [magentaa11y - aria Web accessibility checklist](https://www.magentaa11y.com/) - [mazeletter](http://mazeletter.xyz/) - [paaatterns](https://products.ls.graphics/paaatterns/preview.html) - [designstripe](https://designstripe.com/) - [huemint](https://huemint.com/illustration-2/) - [Architextures — Material Editor For Architects and Designers - pattern](https://architextures.org/) - [Figma Iphone Components | Figcomponents](https://www.figcomponents.com/components/iphone) - [AI Colors - preview app theme](https://aicolors.co/) - [cubic-bezier](https://cubic-bezier.com/) - [The Best 100% Free Wireframe Tool for Mobile and Web (justinmind.com)](https://www.justinmind.com/free-wireframe-tool) - [Free interactive UI components to design web and mobile apps (justinmind.com)](https://www.justinmind.com/ui-components) - [The Best 100% Free Wireframe Tool for Mobile and Web (justinmind.com)](https://www.justinmind.com/free-wireframe-tool) - [Storybook - an open-source tool for building and testing UI components in isolation, with extensive documentation and examples. :heart:](https://storybook.js.org/) - [Icon - Labels ⋅ Storybook (chromatic.com)](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels) - [Storybook Tutorials](https://storybook.js.org/tutorials/intro-to-storybook/react/zh-TW/get-started/) - [CSS Sprite Generator](https://spritegen.website-performance.org/) - [cssreference](https://cssreference.io/) - https://www.colorxs.com/ - [leonardo color - color compare (delta E)](https://leonardocolor.io) - [css-glow-generator](https://cssbud.com/css-generator/css-glow-generator/) - [animista](https://animista.net/play/basic) - [Open Props - Supercharged CSS variables, Expertly crafted web design tokens](https://open-props.style/) - [Panda CSS - write CSS in JS object, css-in-js, like vanilla-extract](https://panda-css.com/) - [tw2panda](https://tw2panda-astahmer.vercel.app/) - [LCH Color Picker & Converter](https://lch.oklch.com/) - [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) - [LCH Color picker Pick colors using HEX, RGB, HSL, and LCH](https://atmos.style/color-picker/lch) - [tailkits - Free & Premium Tailwind CSS Tools and Plugins](https://tailkits.com/tools/) - [CSS Portal - some generators](https://www.cssportal.com/css-scrollbar-generator/) - [CSS Background Patterns](https://www.magicpattern.design/tools/css-backgrounds) - [SVG pattern backgrounds](https://superdesigner.co/tools/svg-backgrounds) - [CSS pattern backgrounds](https://superdesigner.co/tools/css-backgrounds) - [pattern.css - CSS only library to fill your empty background with beautiful patterns.](https://bansal.io/pattern-css#dots) - [CSS Loaders - 600+ single element loaders](https://css-loaders.com/) - [web.dev Baseline 2023](https://web.dev/blog/baseline2023?hl=zh-tw#baseline_lands_on_can_i_use) - [webhint - webhint helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.](https://webhint.io/docs/user-guide/hints/hint-stylesheet-limits/) - [cssdb 💖 - a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. ](https://cssdb.org/) - [CSS Glow Generator](https://cssbud.com/css-generator/css-glow-generator/) - [Animista](https://animista.net/play) - [keyframes.app](https://keyframes.app/animate) - [waitanimate - insert a delay between each animation](https://waitanimate.wstone.uk/) - [Glyphter - Create icon fonts from SVG graphics](https://glyphter.com/) - https://component.gallery/ - https://designsystemsrepo.com/design-systems-recent/ - [Balsamiq Wireframing Academy - UI Control Guidelines](https://balsamiq.com/learn/ui-control-guidelines/) - [ShaderGradient - gradient based on framer motion](https://www.shadergradient.co/) - [Freesets](https://freesets.vercel.app/) - [CSS Clip Path Generator - Generate clip-path css from svg 👍](https://www.plantcss.com/css-clip-path-generator) ## Colors - [coolor]() - [colorbox](https://colorbox.io/) - [palettte - controlable H,S,V trends :heart:](https://palettte.app/) - [uiGradients](https://uigradients.com/) - [nippon colors](https://nipponcolors.com/) - [tailwindcolor - tailwind default color palette](https://tailwindcolor.com/) - [Adobe Color - extract theme, gradient, contrast, color blind](https://color.adobe.com/create/color-wheel) - [chroma.js api docs! (gka.github.io)](https://gka.github.io/chroma.js/#chroma-temperature) - [DOC: What is Color Temperature & Why It’s Important in Photo & Film (studiobinder.com)](https://www.studiobinder.com/blog/what-is-color-temperature-definition/) - [uicolors - map palette base on tailwind](https://uicolors.app/create) - [Realtime Colors](https://realtimecolors.com) - https://colorsinspo.com/ - https://mycolor.space/ - https://color-term.com/traditional-color-of-china/ ## Typography ### Reading [Registered OpenType features](https://learn.microsoft.com/en-us/typography/opentype/spec/featurelist) [fonttools intro](https://github.com/arrowtype/fonttools-intro/blob/main/README.md) --- Use `@font-face` to split fonts for unicode subset, for example, google do that to separate `latin` (00-FF), `latin-extension`, math, symbols, etc. Browser will scan the document body to see what font file is needed to download, so that it downloads exactly what it needs, and faster page loading if your current page only needs a subset of characters. So this optimized for the trivial page that uses common set of characters. So instead of downloading all the characters of the font, many of that aren't need right away, user downloads what the current page uses first. ```css /* latin-ext */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } ``` `@font-face` can also be used to merged font, like use `U+0000-U+00FF` from A font, and other from B font, while under the same `font-family` ```css @font-face { font-family: "Segoe UI"; src: local("SegoeUI"); font-display: swap; unicode-range: U+0042; } @font-face { font-family: "Segoe UI"; src: url("baloo2_wght@400..800_subset_latin.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-0041, U+0043-00FF; } ``` Here I changed `Segoe UI` to use `Baloo 2` only for the character `B` (U+0042), and leave the others. So 2 fonts are used but only under the same font family: `font-family: "Segoe UI"`. It can also be used fix some broken character of the font. Noticed that `local("SegoeUI")` refers to the `PostScript name`. --- Font Resources - [Fontsource](https://fontsource.org/) - [Search fonts | Adobe Fonts](https://fonts.adobe.com/fonts) - https://fonts.google.com - https://variablefonts.io/about-variable-fonts/ - [CSS fonts](https://www.cssfontstack.com/) - [CDN Fonts](https://www.cdnfonts.com/) - [typescale](https://typescale.com/) - [fontjoy](https://fontjoy.com/) - [monolisa](https://www.monolisa.dev/) - [Lab DJR - A pixel font built from a single repeating interpolated block](https://djr.com/lab-variable) - [Modern Font Stacks](https://modernfontstacks.com/) - [programmingfonts.org 👍](https://www.programmingfonts.org/) - [FontDrop - detailed page to check *table*, OpenType features, supported languages, etc of a `.ttf` file](https://fontdrop.info/) ## Icons and iconology - [zond icons](https://www.zondicons.com/) - [feather icons - can tune stroke and size](https://feathericons.com/) - [google material icons :heart:](https://fonts.google.com/icons) - [core ui icons - have brand and flag](https://coreui.io/icons/all/) - [ionic icons - have brand and logo](https://ionic.io/ionicons) - [Bootstrap Icons](https://icons.getbootstrap.com/) - [Font Awesome Icons](https://fontawesome.com/icons) - [Boxicons : Premium web friendly icons for free](https://boxicons.com/) - [tabler icons](https://tabler-icons.io/) - [use animations - animated icons](https://useanimations.com/) - [shields.io - github badge](https://shields.io/) - [flagpedia.net - Embed country flag images over CDN (HTTP API)](https://flagpedia.net/download/api) - [Icons - Lordicon - animated icons](https://lordicon.com/icons/wired/outline) - [Radix Icons (radix-ui.com)](https://icons.radix-ui.com/) - [pictogrammers - material icon](https://pictogrammers.com/library/mdi/) - [pictogrammers - pixel art icon](https://pictogrammers.com/library/memory/) - [🐦 Twitter Emoji List — Emojis for Twitter and TweetDeck (emojipedia.org)](https://emojipedia.org/twitter) - [animated emoji - microsoft-teams - emojipedia ![](https://hackmd.io/_uploads/BkVebDGK2.png =28x28) ](https://emojipedia.org/microsoft-teams) - [animated-fluent-emoji - microsoft-teams](https://animated-fluent-emoji.vercel.app/) - [Fluent emoji — 1 – Figma](https://www.figma.com/community/file/1138254942249677742) - [Fluent emoji — 2 – Figma](https://www.figma.com/community/file/1138258900298544048) - [Fluent emoji — 3 – Figma](https://www.figma.com/community/file/1138260689105864626) - [microsoft/fluentui-emoji: A collection of familiar, friendly, and modern emoji from Microsoft (github.com)](https://github.com/microsoft/fluentui-emoji) - [animated emoji - noto color](https://emojipedia.org/animated-noto-color-emoji) - [icons8](https://icons8.com/) - [家紋一覧](https://kamonya.net/?mode=f1) ## Avatar, Identicon and Illustrations - [navataaars generator ![](https://i.imgur.com/dGiSHE9.png =28x28) ](https://getavataaars.com/?topType=LongHairBigHair) - [blush - for illustration - open peeps ![](https://i.imgur.com/BPvKpe3.png =28x28)](https://blush.design/collections/open-peeps/open-peeps) - [freeillustrations - a lot of illustrations](https://freeillustrations.xyz/illustration/buttsss/) - [buttsss ![](https://i.imgur.com/UWfyC0Z.gif =28x28)](https://www.buttsss.com/) - [dicebear - avatar library ](https://dicebear.com/) - [designstripe](https://designstripe.com/) - https://thenounproject.com/ - https://storyset.com - https://www.freepik.com ## Frontend / UIUX guides and references - [github icons on stroke width](https://primer.style/octicons/guidelines/design) **don't** scale 16px and 24px icons cause the stroke will scale too! scale the padding too! ![](https://i.imgur.com/WMGDrhj.png) - [google material design :heart:](https://m3.material.io/) - [material theme-builder](https://m3.material.io/theme-builder#/custom) - [start-building-with-material-you](https://material.io/blog/start-building-with-material-you) - [css-tricks](https://css-tricks.com/) - [44 UX Case Studies To Improve Your Product Skills (growth.design)](https://growth.design/case-studies) - [laws of ux](https://lawsofux.com) - [Browse iOS Apps | Mobbin](https://mobbin.com/browse/ios/apps) - [Interface in game](https://interfaceingame.com/games/) - [game ui database](https://www.gameuidatabase.com/gameData.php?id=1495) - [Carbon Design System - BIM open source design system - well mentioned element](https://carbondesignsystem.com/) - [Carbon Design system in Vue.js](https://vue.carbondesignsystem.com/) - [Carbon Design System - guideline](https://next.carbondesignsystem.com/) - [Design - Apple Developer](https://developer.apple.com/design/) - [Apple Design Resources - Apple Developer](https://developer.apple.com/design/resources/) - [designcode](https://designcode.io/figma-components-and-nesting) - [Dribbble - Discover the World’s Top Designers & Creative Professionals](https://dribbble.com/shots) - [If Design System](https://design.if.eu/) - [Content - UX Movement](https://uxmovement.com/category/content/) - https://www.figma.com/@microsoft - [devtoolstips](https://devtoolstips.org/) - https://bezier.method.ac/ - https://color.method.ac/ - https://shape.method.ac - https://pixact.ly - [Patterns.dev - a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.](https://www.patterns.dev/posts) - [whatunit - What length CSS unit should you use?](https://whatunit.com/) - [Design Systems Database - Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams](https://designsystems.surf/) - [Blender node flow UI](https://code.blender.org/2020/03/feb-2020-ui-workshop/) - [Acorn](https://acorn.firefox.com/latest/acorn-aRSAh0Sp) # Good looking site - [supa palette](https://www.supa-palette.com/) - [ethereum](https://ethereum.org/en/) - [resumeai](https://www.resumai.com/) - [ray.so - Create beautiful images of your code](https://www.ray.so/) - [poet.so - Capture and share Twitter posts as beautiful images](https://poet.so/) - [Component Driven User Interfaces](https://www.componentdriven.org/) - [Cal.com | Open Scheduling Infrastructure](https://cal.com/) - [daisyui](https://daisyui.com/) - https://squidfunk.github.io/mkdocs-material/ - [iamsteve 🍔🐶👍](https://iamsteve.me/blog/horizontal-scrolling-responsive-menu) - https://stablecog.com/gallery/ - https://deno.com/ - https://doodles.google/ - [Filip Hric Blog](https://filiphric.com/blog) - https://stableaudio.com/ - [monkeytype](https://monkeytype.com/) # Research / Survey - [Stackoverflow developer survey](https://survey.stackoverflow.co/2023/) - [State of AI](https://www.stateof.ai/) - [State of JS](https://stateofjs.com/en-US) - [State of CSS](https://stateofcss.com/en-US) - [State of HTML](https://stateofhtml.com/en-US) - [State of React](https://stateofreact.com/en-US) # Coding Challenges & Practice - [Advent OF JavaScript](https://www.adventofjs.com/) - [Advent OF CSS](https://www.adventofcss.com/) - [Advent of TypeScript](https://typehero.dev/aot-2023) # ![](https://i.imgur.com/NVKicOc.png =36x36) VScode ## Plugins ## Textmate & semantic highlighting [Visual Studio Code Themes](https://code.visualstudio.com/docs/getstarted/themes) ## [Visual Studio Code User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) ## Turn on quick suggestion for classes (eg tailwind, bootstrap): ```yaml "editor.quickSuggestions": { "strings": true } ``` ## Turn on css intenllisence for arbitrary css: ```yaml { "editor.tabCompletion": "on", "editor.quickSuggestions": { "comments": true, //# <- AI intelliSense in comments "strings": true, //# but in strings and the other parts of source files "other": true }, "css.styleSheets": [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", ] } ``` ## Trailing space on JSDOC Vscode treat `\` as same as trailing space on markdown. So you can it if prettier would delete trailing spaces on formatting. ## Shortcuts > [color=#1F9CF0] > | Hot keys | Function | > | -------- | -------- | > |<kbd>Ctrl</kbd> <kbd>Enter</kbd> | Insert line below | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Enter</kbd> | Insert line above | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>k</kbd> | Delete line | > |<kbd>Alt</kbd> <kbd>↑</kbd> <kbd>↓</kbd> | Move line up and down | > |<kbd>Ctrl</kbd> <kbd>U</kbd> | Cursor undo | > |<kbd>Ctrl</kbd> <kbd>D</kbd> | Add Selection to next find match | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>d</kbd> | Delete all 🚀 comments (turbo-console plugin)| > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>[</kbd> / <kbd>]</kbd> | Fold / Unfold | > |<kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>a</kbd> | Toggle block comment | > |<kbd>Ctrl</kbd> <kbd>Space</kbd> | Trigger suggest | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Space</kbd> | Trigger parameter hints| > |<kbd>Ctrl</kbd> <kbd>p</kbd> <kbd>@</kbd>| Navigate symbols| > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>L</kbd>| Select all matches| > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>\\</kbd>| Go to bracket| > |<kbd>Ctrl</kbd> <kbd>T</kbd>| Go to symbol in workspace| > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>O</kbd>| Go to symbol in editor| > |<kbd>F12</kbd> | Go to definition| > |<kbd>Ctrl</kbd> <kbd>R</kbd>| Open recent ...| > |<kbd>Ctrl</kbd> <kbd>Tab</kbd>| Open previous recently used editor in group| > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>E</kbd>| Focus Explorer | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>N</kbd>| File: New File (custom) | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>M</kbd>| File: New Folder (custom) | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd>| Open New External Terminal | > |<kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>R</kbd>| File: Reveal in File Explorer | ## Emmet > [color=#FF9CF0] > | Hot keys | Function | Example | > | -------- | -------- | --------| > |-- | Emmet: Split/Join Tag | `<div></div>` -> `<div />` | > |-- | Emmet: Balance (inward) - select innerHTML | > |-- | Emmet: Balance (outward)|| > |-- | Emmet: Remove Tag| `<div>test</div>` -> `test`| > |-- | Emmet: Wrap with Abbreviation| `test` -> `<div>test</div>`| > |-- | Emmet: Go to Matching Pair - jump to the end or beginning of the tag| | ## [Vscode Updates](https://code.visualstudio.com/updates/) # ![](https://i.imgur.com/GoZFzzW.png =36x36) Figma shortcuts > <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Alt</kbd> ← ↑ → ↓ ↚ ↛ ↜ ↝ ↞ ↟ > [color=#B659FF] > | Hot keys | Function | > | -------- | -------- | > |<kbd>Ctrl</kbd> <kbd>/</kbd> | Search menus, commands and plugins | > |<kbd>Ctrl</kbd> <kbd>\\</kbd> | Show / hide UI | > > [color=#FF4D12] > | Hot keys | Function | > | -------- | -------- | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> | View distance between components | > |<kbd>Shift</kbd> <kbd>r</kbd> | Toggle ruler > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>t</kbd> | Tidy up| | > |<kbd>Ctrl</kbd> <kbd>g</kbd> | Make group| | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>g</kbd> | Make frame| | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>k</kbd> | Make component| | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>g</kbd> | Ungroup / Unframe / Uncomponent| | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>h</kbd> | Toggle hide| | > |<kbd>Ctrl</kbd> <kbd>e</kbd> | Flatten| | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>r</kbd> | Paste to replace| | > |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>v</kbd> | Paste over selection|| > |<kbd>Alt</kbd> <kbd>l</kbd> | Collapse layers| | > |<kbd>Shift</kbd> <kbd>Backspace</kbd> | Delete and heal selection| | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>c</kbd> | Copy properties| | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>v</kbd> | Paste properties| | > |<kbd>Enter</kbd> | Select nested layers| | > |<kbd>Shift</kbd> <kbd>o</kbd> | Outline mode| | > |<kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>b</kbd> | Detach instances| | > |<kbd>Shift</kbd> <kbd>c</kbd> | Show / Hide comments| | > > > > [color=#00CF7F] > | Hot keys | Function | > | -------- | -------- | > |<kbd>Shift</kbd> <kbd>x</kbd> | Swipe fill and stroke || > |<kbd>Alt</kbd> | View margins || > > - [UI2: Figma's Design System – Figma](https://www.figma.com/file/Gj9iMcTbFbHrFq1ZWbDBuyc9/UI2%3A-Figma's-Design-System?node-id=0-12840&t=vJlgeSNms3cJMl5e-0) - [Introduction | Plugin API (figma.com)](https://www.figma.com/plugin-docs/) - [GitHub - thomas-lowry/figma-plugin-ds: A small lightweight design system for use in Figma Plugins](https://github.com/thomas-lowry/figma-plugin-ds) - [GitHub - figma/plugin-samples: 🔌 Sample Figma plugins.](https://github.com/figma/plugin-samples) <!-- > [color=#b5d611] --> > > [color=#b5d611] > [name=felissi] > > [color=#00BCFF] > [name=felissi] # 🐱‍💻![](https://i.imgur.com/pMhSmSM.png =36x36) Windows shortcuts 🐱‍💻 > [color=#d83af4] > | Hot keys | Function | > | -------- | -------- | > |<kbd>![](https://i.imgur.com/pMhSmSM.png =10x10)</kbd> <kbd>v</kbd> | Clipboard | > |<kbd>![](https://i.imgur.com/pMhSmSM.png =10x10)</kbd> <kbd>l</kbd> | Lock | > |<kbd>![](https://i.imgur.com/pMhSmSM.png =10x10)</kbd> <kbd>.</kbd> | emoji | ## Web Inspector (F12) --- | Hot keys | Function | | --- | --------- | |<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>r</kbd> | Select element to inspect | | | <kbd>![](https://i.imgur.com/pMhSmSM.png =10x10)</kbd> <kbd>l</kbd> | Lock | | | Hot keys | Function | | ------------------------------- | -------------------- | | <kbd>Shift</kbd> <kbd>Esc</kbd> | Open process manager | | | | ### built-in js functions at console | | | | | -------- | ------------------------------------------------------------------------------ | ----------------- | | $() | querySelector | chromium, firefox | | $$() | querySelectorAll | chromium, firefox | | $_ | the last evaluated expression | chromium, firefox | | $0 to $4 | the recent elements selected, eg. $0 is the last selected element on inspector | chromium, firefox | | | | | ### [visualize-tabbing-order](https://devtoolstips.org/tips/en/visualize-tabbing-order/) ### [visualize-screenreader-order](https://devtoolstips.org/tips/en/visualize-screenreader-order/) # Books - https://github.com/ossu/computer-science - https://github.com/lydiarong/Books/blob/master/%E6%BC%AB%E7%94%BB%E7%AE%97%E6%B3%95%EF%BC%9A%E5%B0%8F%E7%81%B0%E7%9A%84%E7%AE%97%E6%B3%95%E4%B9%8B%E6%97%85.pdf - [OWASP security cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_for_Java_Cheat_Sheet.html#token-explicit-revocation-by-the-user) - [Tiny XSS Payloads](https://tinyxss.terjanq.me/) - [Lighthouse - Best practice - Google for developers](https://developer.chrome.com/docs/lighthouse/best-practices/doctype?hl=zh-tw) - [Inside browser - Chrome for Developers](https://developer.chrome.com/blog/inside-browser-part1?hl=zh-tw) - [Chromium Code of how Chrome sniff mime type](https://source.chromium.org/chromium/chromium/src/+/main:net/base/mime_sniffer.cc;l=5) - https://xsleaks.dev/ - [Docker — 从入门到实践](https://yeasy.gitbook.io/docker_practice/image/dockerfile/cmd) - [Dev Container metadata reference](https://containers.dev/implementors/json_reference/#lifecycle-scripts) # Standards - [ISO Language codes](https://docs.dyspatch.io/localization/supported_languages/) - The code for English (United States) 'en-US'. The prefix, 'en', is a language code following the ISO 639-1 standard. The suffix, 'US', is a country code following the ISO 3166-1 Alpha-2 standard. - [ISO 4217 Currency codes](https://zh.wikipedia.org/wiki/ISO_4217) - [ISO 8601 - date time](https://en.wikipedia.org/wiki/ISO_8601) - [RFC 7807 - Problem Details for HTTP APIs](https://datatracker.ietf.org/doc/html/rfc7807) - [RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1](https://datatracker.ietf.org/doc/html/rfc2616) - [RFC 7519 - JSON Web Token (JWT)](https://datatracker.ietf.org/doc/html/rfc7519) - [RFC 3339 - Date and Time on the Internet: Timestamps](https://datatracker.ietf.org/doc/html/rfc3339) - [RFC 7932 - Brotli Compressed Data Format](https://datatracker.ietf.org/doc/html/rfc7932) - [ARIA Authoring Practices Guide (APG) - Patterns 👍](https://www.w3.org/WAI/ARIA/apg/patterns/) # License - [fossa - Manage open source risk and protect your software against license violations, vulnerabilities, and supply chain threats](https://fossa.com/) - [tldrlegal - Software Licenses in Plain English, Look up popular software licenses summarized at-a-glance](https://www.tldrlegal.com/) - [creative commons LICENSE CHOOSER](https://chooser-beta.creativecommons.org/)