差異處

這裏顯示兩個版本的差異處。

--- open:itroadmap [2022/05/05 17:10]
wenchin
+++ open:itroadmap [2024/09/22 19:48] (目前版本)
@@ 行 1: / 行 1: @@
 ====== IT Roadmap - 資訊技術應用 學習地圖 ======
-<text type="info">Last Updated @ 2022/05/05</text>
+<text type="info">Last Updated @ 2024/09/22</text>
 \\
@@ 行 130: / 行 131: @@
       * MVP (Model–View–Presenter) -- e.g.: Android
       * MVVM (Model–View–ViewModel) -- e.g.: JavaScript, Node.js
-      * MTV (Model–Templeate–View) -- e.g.: Python Django
+      * MTV (Model–Template–View) -- e.g.: Python Django
   * Design Patterns
@@ 行 151: / 行 152: @@
       * A software development and delivery process that emphasizes communication and collaboration between product management, software development, quality assurance (QA), and operations professionals.
       * It supports this by automating and monitoring the process of software integration, testing, deployment, and infrastructure changes by establishing a culture and environment where building, testing, and releasing software can happen rapidly, frequently, and more reliably.
-    * CI/CD (Continuous Integration / Continuous Delivery) Tools \\ Continuous Delivery and Release Management
+    * CI/CD (Continuous Integration / Continuous Delivery or Deployment) Tools \\ Continuous Delivery and Release Management
       * [[https://jenkins.io/|Jenkins]] - an open source automation server, provides hundreds of plugins to support building, deploying and automating any project.
       * [[https://www.ansible.com/|Ansible]] - Ansible delivers simple IT automation that ends repetitive tasks and frees up DevOps teams for more strategic work.
+      * Drone
+      * GitLab
+      * GitHub
+      * Travis CI
   * Type of Developer
@@ 行 226: / 行 231: @@
     * [[https://stackedit.io/|StackEdit]] -- In-browser Markdown editor
       * [[https://github.com/benweet/stackedit|GitHub Source]] -- Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
+    * [[https://www.notion.so/ | Notion.so]] -- The all-in-one workspace for your notes, tasks, wikis, and databases. :!:
     * [[https://hackmd.io/|HackMD]] -- 用即時協作的 Markdown 編輯器書寫[團隊/技術/專案]文件，讓你快速協作、輕鬆紀錄想法、隨時共享知識。
-    * [[https://www.notion.so/ | Notion.so]] -- The all-in-one workspace for your notes, tasks, wikis, and databases.
     * [[https://pandao.github.io/editor.md/|Editor.md]] -- 开源在线 Markdown 编辑器
     * [[http://dynalon.github.io/mdwiki/|MDWiki]] -- a CMS/Wiki completely built in HTML5/Javascript and runs 100% on the client.
@@ 行 237: / 行 242: @@
   * App Editor
     * [[https://typora.io/|typora.io]] -- Typora gives you a seamless experience as both a reader and a writer.
   * App + SaaS
     * [[https://simplenote.com/|Simplenote]] -- The simplest way to keep notes.  Light, clean, and free. Simplenote is now available for iOS, Android, Mac, Windows, Linux, and the web.
+    * [[https://www.notion.so/ | Notion]] -- a project management and note-taking software.
   * Document Converter
     * [[https://pandoc.org/|Pandoc]] -- A universal document converter.  If you need to convert files from one markup format into another, pandoc is your swiss-army knife.
+  * Static Site Generator
+    * [[https://jekyllrb.com/ | Jekyll]] -- Jekyll renders Markdown or Textile and Liquid templates, and produces a complete, static website.
+      * Jekyll Themes
+        * https://jamstackthemes.dev/ssg/jekyll/
+        * https://jekyllthemes.io/
+        * http://jekyllthemes.org/
+        * https://jekyllthemes.dev/ : [[https://jekyllthemes.dev/tag/resume/ | Resume]]
+\\
+===== UI / UX Design Tool =====
+  * [[https://www.layoutit.com/ | LayoutIt!]] -- Interface Builder for CSS Grid and Bootstrap
+  * [[https://m3.material.io/ | Material Design]] -- an adaptable system of guidelines, components, and tools that support the best practices of user interface design.
@@ 行 266: / 行 286: @@
     * Format
       * XMI (XML Metadata Interchange) -- an [[http://www.omg.org/|OMG (Object Management Group)]] standard for exchanging metadata information via XML.
-    * Tools
+    * UML Tools
-      * Open Source
+      * GUI Editor:
-        * Text Parser: [[http://plantuml.com/|PlantUML]] -- an open-source tool allowing users to create UML diagrams from a plain text language.
+        * [[http://www.umlet.com/ | UMLet]] :!: (Integrated with VS Code and Eclipse)
-        * Cloud Service:  [[https://yuml.me|yUML]] -- Create and share simple UML diagrams in your blogs, wikis, forums, bug-trackers and emails.
+        * [[http://staruml.io/ | StarUML]] -- Free for evaluation
-        * GUI Editor: [[https://www.modelio.org/|Modelio]], [[http://www.umlet.com/|UMLet]], [[http://alexdp.free.fr/violetumleditor|Violet UML Editor]], [[http://staruml.io/|StarUML]], [[http://astah.net/com-announcement|Astah Community]] (<del>Jude</del>)
+        * [[https://www.visual-paradigm.com/ | Visual Paradigm for UML]] -- Free for Community Edition
-    * Commercial Product: [[http://www.sparxsystems.com/products/ea/index.html|Enterprise Architect (EA)]], [[http://astah.net/editions/professional|Astah Professional]], Microsoft Visio
+        * [[https://www.modelio.org/ | Modelio]]
+        * [[http://alexdp.free.fr/violetumleditor|Violet UML Editor]]
+        * [[http://astah.net/com-announcement | Astah Community]] (<del>Jude</del>)
+        * [[https://github.com/jgraph/drawio-desktop/releases | Draw.io Desktop]] :!:
+      * Web Based Editor (Cloud Service):
+        * [[https://www.diagrams.net/ | diagrams.net (Draw.io)]] -- Diagram Software and Flowchart Maker :!:
+        * [[https://yuml.me | yUML]] -- Create and share simple UML diagrams in your blogs, wikis, forums, bug-trackers and emails.
+      * Text Parser:
+        * [[http://plantuml.com/ | PlantUML]] -- to create UML diagrams from a plain text language. :!:
+          * [[https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml | VS Code Extension for PlantUML]]
+      * Other Commercial Products:
+        * [[http://www.sparxsystems.com/products/ea/index.html | Enterprise Architect (EA)]]
+        * [[http://astah.net/editions/professional | Astah Professional]]
+        * Microsoft Visio
+        * IBM Rational Software Architect Designer
@@ 行 280: / 行 314: @@
     * [[https://atom.io/|Atom]]
     * [[http://www.pspad.com/|PSPad]]
   * IDE
@@ 行 295: / 行 330: @@
     * Google [[https://developer.android.com/studio|Android Studio]]
       * [[https://developer.android.com/guide/webapps/webview | WebView]] -- The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout.
+  * API Development
+    * [[https://swagger.io/ | Swagger]] -- a suite of tools for API developers [[https://www.keywordseo.com.tw/blog/what-is-swagger-and-why-do-you-need-it-for-your-project/|1]] [[https://ithelp.ithome.com.tw/articles/10242295|2]] [[https://en.wikipedia.org/wiki/Swagger_(software)|3]]
   * Website App Service
@@ 行 303: / 行 342: @@
       * [[https://notebooks.azure.com/|Microsoft Azure Notebooks]] -- Develop and run code from anywhere with Jupyter notebooks on Azure.
     * [[https://phantomjs.org/|PhantomJS]] - Scriptable Headless Browser
+\\
+===== Online Programming Tool =====
+  * Online Code Editor
+    * [[https://codepen.io/ | CodePen]] -- Online Code Editor and Front End Web Developer Community
+    * [[https://codesandbox.io/ | CodeSandbox]] -- Online Code Editor and IDE for Rapid Web Development
+    * [[https://jsfiddle.net/ | JSFiddle]] -- an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It allows for simulated AJAX calls.
+  * Online Judge (OJ)
+    * [[https://leetcode.com/ | LeetCode]] -- The World's Leading Online Programming Learning Platform
+    * [[https://onlinejudge.org/ | Online Judge]]
+      * [[https://oj.openedu.tw/ | oj.openedu.tw]] -- powered by https://github.com/QingdaoU/OnlineJudge
+    * [[https://zerojudge.tw/ | 高中生程式解題系統]]
+\\
+===== Online Simulator Tool =====
+  * [[https://wokwi.com/ | Wokwi]] - Online Arduino and ESP32 Simulator
@@ 行 407: / 行 465: @@
 \\
-===== Remote Work Tool =====
+===== Remote Work/Chat/Meet Tool =====
   * Ref.
     * https://wfh.iii.org.tw/ -- 遠距上班軟體工具網站 by 財團法人資訊工業策進會
-  * Meeting
+  * @ Public Cloud
     * [[https://meet.google.com/ | Google Meet]]
     * [[https://www.microsoft.com/zh-tw/microsoft-teams/ | Microsoft Teams]]
       * https://teams.live.com/
-    * [[https://meet.jit.si/ | Jitsi Meet]]
+    * [[https://meet.jit.si/ | Jitsi Meet]] :!:
     * [[https://zoomnow.net/ | Zoom]]
     * [[https://u.cyberlink.com/ | U 會議]] by 訊連科技 CyberLink
+  * @ Self Hosted
+    * [[https://owncast.online/ | OwnCast]] -- a free and open source live video and web chat server for use with existing popular broadcasting software.
@@ 行 424: / 行 485: @@
 ====== Language ======
 ===== Programming Language =====
-==== Java ====
+==== 🔹 General ====
-<panel type="default">
+  * Linux
-=== Java SE ===
+    * Shell Script: bash, csh
+    * C, C++
+  * Apple
+    * [[https://swift.org/|Swift]]
+    * Objective C
+  * Microsoft
+    * Windows PowerShell
+    * C, C++, C#
+    * F#
+    * Visual Basic
+  * Google
+    * [[https://dart.dev/ | Dart]] -- a client-optimized language for fast apps on any platform
+  * Can be run @Apache httpd
+    * [[http://php.net/|PHP]]
+    * [[https://www.perl.org/|Perl]]
+  * Based on JVM
+    * [[http://www.scala-lang.org/|Scala]]
+    * [[https://kotlinlang.org/|Kotlin]] -- a statically typed programming language that runs on JVM and also can be compiled to JavaScript source code or use the LLVM compiler infrastructure.
+      * [[https://developer.android.com/kotlin/|Android Studio]]: [[https://developer.android.com/kotlin/resources|resources]]
+    * [[http://groovy-lang.org/|Groovy]] -- A multi-faceted language for the Java platform.
+  * [[https://www.python.org/|Python]]
+    * IDE:
+      * [[https://www.anaconda.com/|Anaconda]]
+      * [[https://www.jetbrains.com/pycharm/|PyCharm]]
+      * Eclipse + Pydev
+    * Editor:
+      * Spyder
+      * Jupyter Notebook
+      * Rodeo
+  * Data Science
+    * [[https://www.r-project.org/|R]] --  a free software environment for statistical computing and graphics.
+    * [[http://www.mathworks.com/products/matlab/|MATLAB]] (Matrix Laboratory) -- a multi-paradigm numerical computing environment and proprietary programming language developed by MathWorks.
+    * [[http://www.mathworks.com/products/simulink?s_cid=wiki_simulink_2|Simulink]]
+    * [[http://www.sas.com/|SAS]]
+    * [[http://www.scala-lang.org/|Scala]] (Based on JVM)
+    * [[https://julialang.org/|Julia]]
+    * HDLs, FPGAs (Field Programmable Gate Arrays)
+  * Legacy
+    * BASIC (Beginners All-Purpose Symbolic Instruction Code)
+    * LISP, Fortran, Pascal, ProLog
+    * COBOL, IBM RPG (Report Program Generator)
+    * Assembly
+  * Others
+    * [[https://processing.org/|Processing]]
+    * [[http://www.ruby-lang.org/|Ruby]] -- A dynamic, open source programming language with a focus on simplicity and productivity.
+    * [[http://www.erlang.org/|Erlang]] -- a programming language used to build massively scalable soft real-time systems with requirements on high availability.
+    * [[https://www.haskell.org/|Haskell]]
+    * [[http://www.lua.org/pil/|Lua]] --  a lightweight, multi-paradigm programming language designed primarily for embedded use in applications. \\ Lua is cross-platform, since the interpreter is written in ANSI C,[3] and has a relatively simple C API.
+    * [[https://golang.org/|Go (Golang)]] -- an open source programming language that makes it easy to build simple, reliable, and efficient software.
+\\
+==== 🔹 Java SE ====
   * Java SE /JDK
     * JDK 5 - Annotation
     * JDK 8 - Lambda
-== Contents ==
   * Nomenclature, standards and specifications
   * General purpose packages
@@ 行 456: / 行 577: @@
     - org.omg.PortableInterceptor
   * Critical security issues with the Java SE plugin
-</panel>
-<panel type="default">
+\\
-=== Java EE ===
+==== 🔹 Java EE ====
   * Java EE
     * Applet - Java Applet
@@ 行 492: / 行 612: @@
     * WS - Web Services
-== Web Profile Specification ==
+  * Web Profile Specification
+<row><col lg="1" md="1"></col><col lg="10" md="10">
 ^  Specification  ^  Version  ^^^
 ^  :::  ^  Java EE 6  ^  Java EE 7  ^  Java EE 8  ^
@@ 行 513: / 行 634: @@
 | Contexts and Dependency Injection for the Java EE Platform  |  1.0   |  1.1   |  2.0   |
 | Dependency Injection for Java  |  1.0   |  1.0   |  1.0  |
-</panel>
+</col></row>
-\\
-==== General ====
-<panel type="default">
-  * Linux
-    * Shell Script: bash, csh
-    * C, C++
-  * Apple
-    * [[https://swift.org/|Swift]]
-    * Objective C
-  * Microsoft
-    * Windows PowerShell
-    * C, C++, C#
-    * F#
-    * Visual Basic
-  * Google
-    * [[https://dart.dev/ | Dart]] -- a client-optimized language for fast apps on any platform
-  * Can be run @Apache httpd
-    * [[http://php.net/|PHP]]
-    * [[https://www.perl.org/|Perl]]
-  * Based on JVM
-    * [[http://www.scala-lang.org/|Scala]]
-    * [[https://kotlinlang.org/|Kotlin]] -- a statically typed programming language that runs on JVM and also can be compiled to JavaScript source code or use the LLVM compiler infrastructure.
-      * [[https://developer.android.com/kotlin/|Android Studio]]: [[https://developer.android.com/kotlin/resources|resources]]
-    * [[http://groovy-lang.org/|Groovy]] -- A multi-faceted language for the Java platform.
-  * [[https://www.python.org/|Python]]
-    * IDE:
-      * [[https://www.anaconda.com/|Anaconda]]
-      * [[https://www.jetbrains.com/pycharm/|PyCharm]]
-      * Eclipse + Pydev
-    * Editor:
-      * Spyder
-      * Jupyter Notebook
-      * Rodeo
-    * Library / Package / Extension / Framework :
-      * [[https://pypi.org/|PyPI]] -- The Python Package Index
-      * [[https://scrapy.org/|Scrapy]] -- An open source and collaborative framework for extracting the data you need from websites.
-      * [[http://www.celeryproject.org/|Celery]] -- an asynchronous task queue/job queue based on distributed message passing.
-      * [[https://www.djangoproject.com/|Django]] -- Django makes it easier to build better Web apps more quickly and with less code.
-        * Django REST Framework
-      * [[https://www.djongomapper.com/ | Djongo]] -- Host Django Apps on a MongoDB database.
-      * [[https://pythonturtle.academy/|Turtle]] -- The turtle has three attributes: a location, an orientation (or direction), and a pen. The pen, too, has attributes: color, width, and on/off state.
-      * [[https://www.pygame.org/|PyGame]] -- a cross-platform set of Python modules designed for writing video games. It includes computer graphics and sound libraries.
-      * [[http://www.pymunk.org/|Pymunk]] --  easy-to-use pythonic 2d physics library that can be used whenever you need 2d rigid body physics from Python.
-        * [[https://pypi.org/project/pymunk/#files|Source & Examples]]
-  * Data Science
-    * [[https://www.r-project.org/|R]] --  a free software environment for statistical computing and graphics.
-    * [[http://www.mathworks.com/products/matlab/|MATLAB]] (Matrix Laboratory) -- a multi-paradigm numerical computing environment and proprietary programming language developed by MathWorks.
-    * [[http://www.mathworks.com/products/simulink?s_cid=wiki_simulink_2|Simulink]]
-    * [[http://www.sas.com/|SAS]]
-    * [[http://www.scala-lang.org/|Scala]] (Based on JVM)
-    * [[https://julialang.org/|Julia]]
-    * HDLs, FPGAs (Field Programmable Gate Arrays)
-  * Legacy
-    * BASIC (Beginners All-Purpose Symbolic Instruction Code)
-    * LISP, Fortran, Pascal, ProLog
-    * COBOL, IBM RPG (Report Program Generator)
-    * Assembly
-  * Others
-    * [[https://processing.org/|Processing]]
-    * [[http://www.ruby-lang.org/|Ruby]] -- A dynamic, open source programming language with a focus on simplicity and productivity.
-    * [[http://www.erlang.org/|Erlang]] -- a programming language used to build massively scalable soft real-time systems with requirements on high availability.
-    * [[https://www.haskell.org/|Haskell]]
-    * [[http://www.lua.org/pil/|Lua]] --  a lightweight, multi-paradigm programming language designed primarily for embedded use in applications. \\ Lua is cross-platform, since the interpreter is written in ANSI C,[3] and has a relatively simple C API.
-    * [[https://golang.org/|Go (Golang)]] -- an open source programming language that makes it easy to build simple, reliable, and efficient software.
-</panel>
 \\
-==== Visualized ====
+==== 🔹 Visualized ====
-<panel type="default">
+  * [[https://scratch.mit.edu/ | Scratch]] -- the world’s largest coding community for children and a coding language with a simple visual interface.
-  * [[https://scratch.mit.edu/|Scratch 2]] (in ActionScript)
+  * [[https://developers.google.com/blockly/ | Blockly]] -- a library for building visual programming editors. e.g: [[https://blockly-games.appspot.com/ | Games]]
-  * [[https://beta.scratch.mit.edu/|Scratch 3]] (in HTML5)
-  * [[https://developers.google.com/blockly/|Blockly]] -- a library for building visual programming editors. e.g: [[https://blockly-games.appspot.com/|Games]]
-</panel>
 \\
 ===== Markup Language =====
-<panel type="default">
-=== TAG ===
   * HTML (HyperText Markup Language)
     * HTML5 & Web 2.0
@@ 行 631: / 行 669: @@
   * PMML (Predictive Model Markup Language) - an XML-based predictive model interchange format.
   * KML (Keyhole Markup Language) - an XML notation for expressing geographic annotation and visualization within Internet-based, two-dimensional maps and three-dimensional Earth browsers.
-</panel>
 \\
 ===== Notation Language =====
-<panel type="default">
-=== Non-Tag / Text Based ===
   * [[https://www.json.org/ | JSON]] -- JavaScript Object Notation
     * [[https://geojson.org/ | GeoJSON]] -- a format for encoding a variety of geographic data structures.
@@ 行 647: / 行 682: @@
     * [[https://michelf.ca/projects/php-markdown/|PHP Markdown]]
     * [[https://michelf.ca/projects/php-markdown/extra/|PHP Markdown Extra]]
-</panel>
 \\
 ===== Scripting Language =====
-==== Client-Side ====
+==== 🔹 Client-Side ====
   * DOM (Document Object Model)
@@ 行 671: / 行 705: @@
-==== Server-Side ====
+==== 🔹 Server-Side ====
   * SSI (Server Side Includes) [[http://httpd.apache.org/docs/2.4/howto/ssi.html|1]]
@@ 行 708: / 行 742: @@
     * Canvas
     * Flash, ActionScript, Flex
+  * True Type Font (Free Fonts) [[https://www.storm.mg/lifestyle/4444444|1]]
+    * :?:
   * Icon Font
     * Open Source:
-      * [[https://fonts.google.com/|Google Fonts]]
+      * [[https://fonts.google.com/ | Google Fonts]]
-      * [[https://material.io/icons/|Google Material Icons]]
+      * [[https://material.io/icons/ | Google Material Icons]]
-      * [[https://fontawesome.io/|Font Awesome]] - [[https://fontawesome.com/docs/web/add-icons/how-to | How-to]]、[[https://fontawesome.com/search | Search]]
+      * [[https://fontawesome.io/ | Font Awesome]]
-      * https://icons.getbootstrap.com/
+        * [[https://fontawesome.com/docs/web/add-icons/how-to | How-to]]
-      * https://getbootstrap.com/docs/3.3/components/
+        * [[https://fontawesome.com/search | Search]]
+        * [[https://fontawesome.com/search?m=free | Search Free and Open-source Icons]]
+      * [[https://icons.getbootstrap.com/ | Bootstrap Icons]]
+        * [[https://getbootstrap.com/docs/3.3/components/#glyphicons | Components · Bootstrap Available Glyphicons]]
+        * [[https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp | Bootstrap [GlyphIcon] Components]]
       * [[https://www.typicons.com/|Typicons]]
       * [[https://octicons.github.com/|Octicons]]
@@ 行 735: / 行 776: @@
     * [[https://html-color-codes.info/ | Color Code]]
     * [[https://www.goomo.net/color.html | 色碼表]]
-    * W3Schools -- [[http://www.w3schools.com/colors/colors_picker.asp | Color Picker]] / [https://www.w3schools.com/colors/colors_converter.asp | Color Converter]]、[[https://www.w3schools.com/colors/colors_brands.asp | Colors Brands]]
+    * W3Schools -- [[http://www.w3schools.com/colors/colors_picker.asp | Color Picker]] / [[https://www.w3schools.com/colors/colors_converter.asp | Color Converter]]、[[https://www.w3schools.com/colors/colors_brands.asp | Colors Brands]]
     * Adobe -- [[https://color.adobe.com/ | 色輪、調色盤產生器]]
     * Coolors -- [[https://coolors.co|Coolors.co]] -- The super fast color palettes generator!
@@ 行 759: / 行 800: @@
 \\
 ===== Front-End =====
-==== JavaScript ====
+==== 🔹 JavaScript ====
   * General
     * [[http://jquery.com|jQuery]]
@@ 行 765: / 行 806: @@
     * [[https://github.com/jqueryfiletree/jqueryfiletree|jQuery File Tree]]
     * [[https://getbootstrap.com/|Bootstrap]] -- Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+    * [[https://get.foundation/ | Foundation]] -- The most advanced responsive front-end framework in the world. :!: [[https://www.tutorialspoint.com/foundation/foundation_javascript.htm|1]]
     * [[https://bootswatch.com/|Bootswatch]] -- Free themes for Bootstrap
     * [[http://www.jacklmoore.com/colorbox/|ColorBox]] -- A lightweight customizable lightbox plugin for jQuery.  It Supports photos, grouping, slideshow, ajax, inline, and iframed content.
@@ 行 785: / 行 827: @@
   * Web Application Framework
     * [[https://www.angularjs.org/|AngularJS]] -> [[https://angular.io/|Angular]] (by Google) [[https://stackify.com/angular-vs-angularjs-differences-between-angular-and-angularjs/|1]]
     * [[https://reactjs.org/|React (React.js / ReactJS)]] -- an open-source JavaScript library providing a view for data rendered as HTML.
       * [[https://jsx.github.io/|JSX]] -- a statically-typed, object-oriented programming language designed to run on modern web browsers.
     * [[https://vuejs.org/|Vue.js]] -- A progressive, incrementally-adoptable JavaScript framework for building UI on the web. Single-Page Application (SPA). [[https://vueschool.io|Vue School]]
@@ 行 798: / 行 840: @@
-  * Diagram / SVG
+  * Dynamic Table
+    * [[https://www.datatables.net/ | DataTables]] [[https://ithelp.ithome.com.tw/articles/10272439|1]]、[[https://datatables.club/|2]]
+    * [[http://tabulator.info/ | Tabulator]] [[https://ithelp.ithome.com.tw/articles/10197881|1]]
+  * Diagram / SVG / Modeling
+    * Ref.
+      * [[https://modeling-languages.com/javascript-drawing-libraries-diagrams/|20+ JavaScript libraries to draw your own diagrams (2022 edition)]]
     * Open Source
+      * [[https://www.chartjs.org | Chart.js]] -- Simple yet flexible JavaScript charting library for the modern web
+      * [[https://d3js.org/ | D3.js]] -- Data-Driven Documents
       * [[https://google-developers.appspot.com/chart/|Google Charts]], [[http://flowchart.js.org/|FlowChart.js]], [[http://www.cubesviewer.com/|CubesViewer]], [[https://www.jointjs.com/opensource|JointJS]], [[http://knsv.github.io/mermaid/|Mermaid]]、[[https://bramp.github.io/js-sequence-diagrams/|js-sequence-diagrams]]
-      * [[https://www.chartjs.org|Chart.js]], [[https://plot.ly/javascript/|Plotly.js]]
+      * [[https://plot.ly/javascript/|Plotly.js]]
       * [[http://js.cytoscape.org/|Cytoscape.js]] (2.7.16), [[http://dmitrybaranovskiy.github.io/raphael/|Raphaël]], [[http://processingjs.org/|Processing.js]], [[http://paperjs.org/|PaperJS]]
-      * [[http://www.draw2d.org/draw2d/ | Draw2D]]、FabricJS、JsPlumb [[http://modeling-languages.com/javascript-drawing-libraries-diagrams/|☝☞]]
+      * [[http://www.draw2d.org/draw2d/ | Draw2D]]
-      * [[https://d3js.org/ | D3.js]] -- Data-Driven Documents
+      * [[http://fabricjs.com/ | FabricJS]]
+      * [[https://jsplumbtoolkit.com/ | JsPlum]]
       * Family Tree @GitHub
         * [[https://github.com/trongthanh/family-tree | Trans Family Tree]] -- Draws a family tree in a descendant chart format (all descendants of an individual). The Tree is stored in author-friendly YAML format.
@@ 行 815: / 行 867: @@
       * [[http://gojs.net/|GoJS]] -- Interactive JavaScript Diagrams in HTML
       * [[https://www.jointjs.com/|Rappid]], Mxgraph
+      * [[https://www.amcharts.com/ | amCharts]] -- JavaScript Charts & Maps Programming library for all your data visualization needs.
   * Graphics / Animation / Game
@@ 行 824: / 行 876: @@
 \\
-==== Mobile Apps ====
+==== 🔹 Mobile Apps ====
   * [[https://flutter.dev/ | Flutter]] -- an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
+  * [[https://ionicframework.com/ | Ionic Framework]] -- Cross-Platform Mobile App Development: in Angular, Vue, React.
+    * [[https://capacitorjs.com/ | Capacitor by Ionic]] - Cross-platform apps with web technology
   * [[https://reactnative.dev/ | React Native]] -- an open-source mobile application framework created by Facebook.  It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP.
+    * [[https://expo.dev/ | Expo]] -- Build one project that runs natively on all your users' devices
   * [[https://cordova.apache.org/|Apache Cordova]] - Mobile apps with HTML, CSS & JS. Target multiple platforms with one code base. Free and open source.
   * [[http://phonegap.com/|Adobe PhoneGap]]
     * jQuery Mobile, Dojo Mobile, Sencha Touch
   * [[http://appinventor.mit.edu/|App Inventor]] -- a web application integrated development environment originally provided by Google, and now maintained by the MIT.  It allows newcomers to computer programming to create application software (apps) for two operating systems (OS): Android, and iOS.
   * [[https://thunkable.com/|Thunkable]] -- enables anyone to create beautiful and powerful mobile apps.
-==== Others ====
+==== 🔹 Others ====
   * [[https://en.wikipedia.org/wiki/Progressive_web_application | PWA]] (Progressive Web Application)
@@ 行 846: / 行 907: @@
 \\
 ===== Back-End =====
-==== JavaScript ====
+==== 🔹 JavaScript ====
   * [[https://nodejs.org/|Node.js]] [[https://nodejs.org/en/docs/ | Documentation]]
     * [[https://socket.io/|Socket.IO]] -- a library that enables real-time, bidirectional and event-based communication between the browser and the server.
@@ 行 855: / 行 916: @@
 \\
-==== JVM ====
+==== 🔹 JVM ====
   * Java VM (JDK) Framework
     * [[http://www.openxava.org/|OpenXava ]] -- an AJAX Java framework for rapid development of enterprise web applications.
@@ 行 863: / 行 924: @@
 \\
-==== Java EE ====
+==== 🔹 Java EE ====
   * Java EE Web Application Development Framework
     * Major
@@ 行 881: / 行 942: @@
 \\
-==== Others ====
+==== 🔹 Others ====
-  * PHP
+=== PHP ===
     * [[http://noeticforce.com/best-php-frameworks-for-modern-web-development|Framework]]
-      * [[https://laravel.com/|Laravel]], [[http://www.codeigniter.com/|CodeIgniter 3.0]], [[http://www.yiiframework.com/|Yii 2.0]]
+      * [[https://laravel.com/|Laravel]], [[http://www.codeigniter.com/|CodeIgniter]], [[http://www.yiiframework.com/|Yii]]
-      * [[https://symfony.com/|Symfony2]], [[https://nette.org/|Nette 2.3]], [[http://framework.zend.com/|Zend 2]], [[https://github.com/top-think|ThinkPHP]]
+      * [[https://symfony.com/|Symfony]], [[https://nette.org/|Nette]], [[http://framework.zend.com/|Zend]], [[https://github.com/top-think|ThinkPHP]]
       * [[https://www.slimframework.com|Slim Framework]] -- Slim is a PHP micro framework that helps you quickly write simple yet powerful web applications and APIs.
     * Class Library
@@ 行 892: / 行 953: @@
       * FastTemplate, TinyButStrong, Smarty
-  * Python
+\\
-    * [[https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface | WSGI]] -- Web Server Gateway Interface
+=== Python ===
-      * [[https://www.python.org/dev/peps/pep-3333/ | Python Web Server Gateway Interface]] -- Web Application Framework
+  * [[https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface | WSGI]] -- Web Server Gateway Interface
-        * [[https://www.djangoproject.com/ | Django]]
+    * [[https://www.python.org/dev/peps/pep-3333/ | Python Web Server Gateway Interface]] -- Web Application Framework
-        * [[https://flask.palletsprojects.com/ | Flask]] - [[https://flask.palletsprojects.com/en/1.1.x/extensions/|Extensions]]
-        * [[https://flask-restful.readthedocs.io/ | Flask-RESTful]] -- an extension for Flask that adds support for quickly building REST APIs. [[https://ithelp.ithome.com.tw/articles/10202886|1]]
+  * Web Apps
+    * [[https://flask.palletsprojects.com/ | Flask]] - [[https://flask.palletsprojects.com/en/1.1.x/extensions/|Extensions]]
+      * [[https://flask-restful.readthedocs.io/ | Flask-RESTful]] -- an extension for Flask that adds support for quickly building REST APIs. [[https://ithelp.ithome.com.tw/articles/10202886|1]]
+    * [[https://www.djangoproject.com/|Django]]
+      * Django makes it easier to build better Web apps more quickly and with less code.
+      * Django REST Framework
+      * [[https://www.djongomapper.com/ | Djongo]] -- Host Django Apps on a MongoDB database.
+  * SocketIO
     * [[https://github.com/miguelgrinberg/python-socketio | python-socketio]]
       * [[http://python-socketio.readthedocs.io/en/latest/ | Documentation]]
     * [[https://github.com/miguelgrinberg/Flask-SocketIO | Flask-SocketIO]]
-  * Microsoft
+  * Library / Package / Extension / Framework :
-    * ASP, ASP.Net
+    * [[https://pypi.org/|PyPI]] -- The Python Package Index
-      * SignalR (by WebSocket)
+    * [[https://scrapy.org/|Scrapy]] -- An open source and collaborative framework for extracting the data you need from websites.
+    * [[http://www.celeryproject.org/|Celery]] -- an asynchronous task queue/job queue based on distributed message passing.
+    * [[https://pythonturtle.academy/|Turtle]] -- The turtle has three attributes: a location, an orientation (or direction), and a pen. The pen, too, has attributes: color, width, and on/off state.
+    * [[https://www.pygame.org/|PyGame]] -- a cross-platform set of Python modules designed for writing video games. It includes computer graphics and sound libraries.
+    * [[http://www.pymunk.org/|Pymunk]] --  easy-to-use pythonic 2d physics library that can be used whenever you need 2d rigid body physics from Python.
+      * [[https://pypi.org/project/pymunk/#files|Source & Examples]]
+\\
+=== Microsoft ===
+  * ASP, ASP.Net
+    * SignalR (by WebSocket)
@@ 行 910: / 行 990: @@
 ----
 ===== Cloud Platform =====
-==== Google ====
+==== 🔹 Google ====
   * [[https://developers.google.com/apps-script | Google Apps Script (GAS)]]
   * [[https://cloud.google.com/appengine | Google App Engine (GAE)]]
@@ 行 941: / 行 1021: @@
     * [[https://httpd.apache.org/|Apache httpd]]
     * [[http://www.iis.net/|Microsoft IIS]] (Internet Information Services)
-    * [[http://nginx.org/|NginX 1.12]]
+    * [[https://www.nginx.org/|NGINX]]
     * [[https://www.litespeedtech.com/products/litespeed-web-server | LiteSpeed Web Server]]
@@ 行 1094: / 行 1174: @@
     * [[https://www.dbvis.com|DbVisualizer]]
     * [[http://www.squirrelsql.org/|SQuirreL SQL Client]]
-    * [[https://www.navicat.com/|Navicat]]
+    * [[https://www.navicat.com/|Navicat]] (for SQL, Redis, MongoDB, ...)
     * [[https://robomongo.org/|RoboMongo]]
@@ 行 1183: / 行 1263: @@
   * Open Source
-    * [[http://www.opencms.org/|OpenCms]] 10.5 @java - a professional, easy to use website content management system.
+    * [[https://wordpress.org/|WordPress]] @php - web software you can use to create a beautiful website, blog, or app.
+    * [[https://www.joomla.org/|Joomla!]] @php -  an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications.
+    * [[https://www.drupal.org/|Drupal]] @php - content management platform
+    * [[http://www.opencms.org/|OpenCms]] @java - a professional, easy to use website content management system.
     * [[https://www.apereo.org/projects/uportal|uPortal]] @java, by Apereo (formerly Jasig) - enterprise portal framework built by and for the higher education community
-    * [[https://plone.org/|Plone CMS]] 5.0 @python - A powerful, flexible Content Management Solution that is easy to install, use and extend.
+    * [[https://plone.org/|Plone CMS]] @python - A powerful, flexible Content Management Solution that is easy to install, use and extend.
-    * [[https://wordpress.org/|WordPress]] 4.6 @php - web software you can use to create a beautiful website, blog, or app.
-    * [[https://www.drupal.org/|Drupal]] 8 @php - content management platform
-    * [[https://www.joomla.org/|Joomla!]] 3.6 @php -  an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications.
     * [[https://www.openkm.com/|OpenKM Community]] @java - Document Management System
     * [[https://www.alfresco.com/products/enterprise-content-management/community|Alfresco ECM - Alfresco Community Edition]]
@@ 行 1194: / 行 1274: @@
   * Commercial Product
+    * [[https://business.adobe.com/tw/products/magento/magento-commerce.html | Adobe Magento]]
     * [[http://www.ibm.com/analytics/us/en/technology/enterprise-content-management/|IBM Enterprise Content Management]]
     * Oracle WebCenter Portal
@@ 行 1237: / 行 1318: @@
     * Trend Micro (http://www.mail-abuse.org/) - [[https://ers.trendmicro.com/|Global Spam Threats]], [[https://ers.trendmicro.com/reputations/global_approved_list|Global Approved List]]
-  * SPF ([[https://en.wikipedia.org/wiki/Sender_Policy_Framework|Sender Policy Framework]]) - an email anti-forgery system, by DNS record setting.  [[mailservice#spf_設定|📚]]
+\\
+===== Email System Protection =====
+  * 說明
+    * [[https://www.richesinfo.com.tw/index.php/mxmail/mxmail-faq/267-dkim-dmarc | 為郵件系統安全把關，新增 SPF, DKIM 和 DMARC 設定以避免有心人士的釣魚攻擊]]
+  * SPF (Sender Policy Framework 寄件者政策框架) [[mailservice#spf_設定|📚]]
     * [[http://www.openspf.org/SPF_Record_Syntax|SPF Record Syntax]]
     * [[http://www.openspf.org/FAQ/Examples|FAQ/Examples]]
+    * [[https://en.wikipedia.org/wiki/Sender_Policy_Framework | an email anti-forgery system, by DNS record setting.]]
+  * DKIM (DomainKeys Identified Mail 網域驗證郵件) -- 用來防止郵件內容遭到竄改
+  * DMARC (Domain-based Message Authentication, Reporting & Conformance) -- 用來輔助 SPF 與 DKIM 的不足
+    * [[https://dmarc.org/ | DMARC.org]]
+    * DMARC Record [[https://wpmailsmtp.com/how-to-create-dmarc-record/#what|1]]、[[https://support.google.com/a/answer/2466563?hl=zh-Hant|2]]
   * Anti-SPAM
@@ 行 1299: / 行 1393: @@
   * UNIX
-    * HP-UX 11i
+    * HP-UX
-    * IBM AIX 7.2
+    * IBM AIX
   * Linux
-    * Oracle Linux 7.3
+    * Oracle Linux
-    * Red Hat Enterprise Linux 7.3
+    * Red Hat Enterprise Linux
-    * [[https://getfedora.org/|Fedora]] 26, [[https://www.centos.org/|CentOS]] 7
+    * [[https://getfedora.org/|Fedora]], [[https://www.centos.org/|CentOS]]
-    * [[https://www.suse.com/|SUSE]], [[https://www.opensuse.org/|OpenSUSE]] Leap 42.3
+    * [[https://www.suse.com/|SUSE]], [[https://www.opensuse.org/|OpenSUSE]] Leap
     * [[https://www.ubuntu.com/|Ubuntu]]
-    * [[https://www.debian.org/|Debian]] 10.1
+    * [[https://www.debian.org/|Debian]]
   * Apple
-    * MAC OS 10.11.2
+    * MAC OS
-    * iOS 9.3
+    * iOS
   * Microsoft
     * DOS
-    * Windows 95/98/XP/Vista/7/8/10
+    * Windows 95/98/XP/Vista/7/8/10/11
-    * Microsoft Windows Server NT/2000/2003/2008/2012/2016
+    * Microsoft Windows Server NT/2000/2003/2008/2012/2016/2019/2022
   * Google
@@ 行 1380: / 行 1474: @@
         * Multicloud
-  * Public Cloud platform
+  * Public Cloud platform [[https://www.hostingadvice.com/how-to/best-ubuntu-hosting-services/|1]]、[[https://en.wikipedia.org/wiki/Cloud-computing_comparison|2]]
     * [[https://cloud.google.com/|GCP (Google Cloud Platform)]]
     * [[https://azure.microsoft.com/|Microsoft Azure]]
@@ 行 1387: / 行 1481: @@
     * [[https://www.openshift.com/|Red Hat OpenShift]] - PaaS, built on Docker and Kubernetes
     * [[https://cloud.oracle.com/|Oracle Cloud Computing]]
-    * [[https://www.digitalocean.com/|DigitalOcean]]
+    * [[https://www.kamatera.com/ | Kamatera]]  -- [[https://www.kamatera.com/pricing/ | Pricing]] :!:
-    * [[https://www.cloudbric.com/pricing/|Cloudbric]] (4GB Free)
+    * [[https://www.digitalocean.com/ | DigitalOcean]] -- [[https://www.digitalocean.com/pricing | Pricing]]
+    * [[https://www.hostinger.com/ | Hostinger]]
+    * [[https://www.interserver.net/vps/ | InterServer]] -- [[https://www.interserver.net/vps/ | Pricing]]
+    * [[https://www.cloudbric.com/ | CloudBric]]
+    * [[https://www.a2hosting.com/ | A2 Hosting]] -- [[https://www.a2hosting.com/vps-hosting/ | Pricing]]
+    * [[https://www.godaddy.com/ | GoDaddy]] --
+    * [[https://www.hostgator.com/ | HostGator]]
   * Serverless
@@ 行 1469: / 行 1570: @@
   * Web Storage / Cloud Storage
     * Open Source
+      * [[https://nextcloud.com/|NextCloud]] -- Online collaboration platform
       * [[https://owncloud.org/|ownCloud]] -- a suite of client–server software for creating and using file hosting services. ownCloud functionally has similarities to the widely used Dropbox.
     * Commercial
@@ 行 1512: / 行 1614: @@
     * DHCP
     * VPN / IPSec
+      * [[https://openvpn.net/ | OpenVPN]]
     * NLB (Network Load Balance)
@@ 行 1523: / 行 1626: @@
       * Linux: SELinux, iptables
     * Software
-      * Open Source: [[https://www.pfsense.org/|pfSense]], ClearOS, DD-WRT, Untangle, ZeroShell, Endian, Smoothwall Express.
+      * Open Source:
+        * [[https://www.pfsense.org/|pfSense]]
+        * ClearOS, DD-WRT, Untangle, ZeroShell, Endian, Smoothwall Express.
   * SDN (Software-Defined Networking)
@@ 行 1573: / 行 1678: @@
 \\
 ===== IoT =====
-==== Reference ====
+==== 🔹 Reference ====
   * IoT (Internet of Things)
     * [[https://en.wikipedia.org/wiki/Narrowband_IoT|NarrowBand IoT (NB-IoT)]] -- is a Low Power Wide Area Network (LPWAN) radio technology standard developed by 3GPP to enable a wide range of cellular devices and services.
@@ 行 1613: / 行 1718: @@
-==== Interface / Communication ====
+==== 🔹 Interface / Communication ====
   * Signal Interface (Reference: [[https://makerpro.cc/2016/07/learning-interfaces-about-uart-i2c-spi/|1]])
     * [[https://en.wikipedia.org/wiki/Universal_asynchronous_receiver-transmitter|UART]] (Universal Asynchronous Receiver-Transmitter)
@@ 行 1645: / 行 1750: @@
 \\
+==== 🔹 Software / App ====
-==== Software / App ====
   * [[https://www.ros.org/ | ROS / ROS2]] (Robot Operating System) -- [[https://ithelp.ithome.com.tw/articles/10237460|1]]、[[https://www.adlinktech.com/tw/ROS2-Solution|2]]
     * [[https://wiki.ros.org/ | ROS Wiki]]
@@ 行 1657: / 行 1760: @@
 \\
-==== Hardware ====
+==== 🔹 Hardware ====
-<panel>
   * Single-Chip Microcomputer (單晶片微電腦)
     * ARM Cortex-M0
@@ 行 1670: / 行 1772: @@
   * EDA (Electronic Design Automation)
     * [[https://kicad-pcb.org/|KiCad EDA]] -- a free software suite for electronic design automation (EDA). It facilitates the design of schematics for electronic circuits and their conversion to PCB designs.
-</panel>
-<panel title="Microcontroller (微控制器/微控板)">
+  * [[https://en.wikipedia.org/wiki/USB | USB (Universal Serial Bus)]]
+    * Ref: [[https://www.sct.com.tw/zh-tw-articles/usb-c-introduction-everything-you-need-to-know | 1]]((Type C 除了充電還有哪些規格？筆電也通？充電／影音／頻寬各項應用解析))、[[https://shopee.tw/product/6818608/18741451735 | 2]]((FIBBR USB-C5 USB 3.1 Gen1 Type C to Type C 光纖數據線 5m))
+\\
+=== Microcontroller (微控制器/微控板) ===
   * [[https://microbit.org/|BBC micro:bit]]
-      * Software:
+    * Software:
       * [[https://makecode.microbit.org/|Microsoft MakeCode for micro:bit]]
       * [[https://python.microbit.org/|Micro:bit - Python editor]]
   * [[https://www.arduino.cc/|Arduino]]
-      * Software:
+    * Software:
       * [[https://www.arduino.cc/en/Main/Software|IDE]]
       * [[https://mediatek-labs.github.io/BlocklyDuino-for-LinkIt/blockly/apps/blocklyduino/|LinkIt 7697 BlockyDuino Editor]]
       * [[https://code.makewitharduino.com/|BlocklyDuino Editor]]
-      * Hardware:
+    * Hardware:
       * [[https://www.arduino.cc/en/Main/Products|Arduino]]
           * Nano, Nano 33 IoT, Uno Rev3, Mega 2560 Rev3, Micro, Leonardo, MRK ...
@@ 行 1691: / 行 1797: @@
       * [[https://labs.mediatek.com/zh-tw/platform/linkit-one|MediaTek LinkIt ONE]] --  enables you to design and prototype Wearable and Internet of Things (IoT) devices, using hardware and an API that are similar to those offered for Arduino boards.
           * 7688, 7697
-</panel>
-<panel title="Single-Board Computer (單板電腦) / Autonomous Machines / AIoT Edge Computing">
+\\
+=== Single-Board Computer (SBC 單板電腦) / Autonomous Machines / AIoT Edge Computing ===
   * [[https://devblogs.nvidia.com/jetson-nano-ai-computing/|Benchmarks Comparison]]
@@ 行 1703: / 行 1810: @@
     * [[https://projects.raspberrypi.org/en/codeclub|Code Club]] -- a global network of free coding clubs for 9- to 13-year-olds.
   * [[https://www.pine64.org/|Pine A64+]] ([[https://wiki.pine64.org/|wiki]])
-</panel>
@@ 行 1710: / 行 1816: @@
 ====== Security ======
 ===== Encryption / Cryptography =====
-<panel>
   * PKI (Public Key Infrastructure) -- \\ a set of roles, policies, and procedures needed to create, manage, distribute, use, store, and revoke digital certificates and manage public-key encryption.
@@ 行 1720: / 行 1825: @@
     * TLS (Transport Layer Security, 傳輸層安全性) v1.2
     * HSTS (HTTP Strict Transport Security, HTTP強制安全傳輸技術)
-</panel>
-<panel title="SSL Certificate">
+\\
+==== 🔹 SSL Certificate ====
   * CA (Certificate Authority) -- stores, issues and signs the digital certificates.
-    * Free:
-      * [[https://freessl.org/ | FreeSSL]] :!:
-      * [[https://www.sslforfree.com | SSL for Free / ZeroSSL]]
-      * [[https://letsencrypt.org|Let's Encrypt]] / [[https://letsencrypt.org/zh-tw/getting-started/|TW]]
-        * [[https://certbot.eff.org/|CertBot]]
-          * https://certbot.eff.org/docs/install.html
-          * https://certbot.eff.org/docs/using.html#manual
-          * https://certbot.eff.org/lets-encrypt/centosrhel8-apache
-    * Commercial:
-      * TWCA, Verisign, Symantec, Google Internet Authority G2, ...
   * RA (Registration Authority) -- verifies the identity of entities requesting their digital certificates to be stored at the CA, usually called a subordinate CA.
   * VA (Validation Authority)
-</panel>
-<panel title="Domain Name Registrar">
+  * Apply SSL <WRAP>
+  * Free:
+    * [[https://letsencrypt.org|Let's Encrypt]] / [[https://letsencrypt.org/zh-tw/getting-started/|TW]] [[https://snippetinfo.net/mobile/media/1752|1]]
+    * [[https://certbot.eff.org/|CertBot]] [[https://noob.tw/certbot/|1]]、[[https://blog.miniasp.com/post/2021/02/11/Create-SSL-TLS-certificates-from-LetsEncrypt-using-Certbot|2]] :!:
+      * https://certbot.eff.org/docs/install.html
+      * https://certbot.eff.org/docs/using.html#manual
+      * https://certbot.eff.org/lets-encrypt/centosrhel8-apache
+    * [[https://freessl.org/ | FreeSSL]] :!:
+    * [[https://www.sslforfree.com | SSL for Free / ZeroSSL]]
+  * Commercial:
+    * [[https://www.ssls.com/ | Cheap SSL Certificates ($3.75)]] :!:
+    * TWCA, Verisign, Symantec, Google Internet Authority G2, ...
+</WRAP>
+\\
+==== 🔹 Domain Name Registrar ====
   * [[https://domains.google/|Google Domains]] [[https://support.google.com/domains/answer/4632243|1]], [[https://support.google.com/domains/answer/6010092?hl=zh-Hant|2]]
   * [[https://tw.godaddy.com/domains|GoDaddy]]
@@ 行 1744: / 行 1858: @@
   * [[http://myname.pchome.com.tw/shopping/price_tw.htm|PChome 網路家庭-買網址]]
   * [[https://domain.hinet.net/|HiNet 網域名稱申請服務]]- [[https://domain.hinet.net/eng-pay.html|price]]
-</panel>
-<panel title="Free SubDomain Name Registrar">
+\\
+==== 🔹 Free SubDomain Name Registrar ====
   * [[https://www.duckdns.org/ | Duck DNS]] -- Free dynamic DNS hosted on AWS
     * https://forum.automata.id/t/topic/153
@@ 行 1753: / 行 1868: @@
   * https://www.saashub.com/compare-freedns-vs-duck-dns
-</panel>
-<panel title="DNS / DDNS (Dynamic DNS) Hosting Service">
+\\
+==== 🔹 DNS / DDNS (Dynamic DNS) Hosting Service ====
   * [[https://www.namecheap.com/domains/freedns/|Namecheap FreeDNS]]
   * [[https://freedns.afraid.org/|FreeDNS]]
-</panel>
@@ 行 1898: / 行 2013: @@
       * SecureAuth IdP
       * PerfectCloud SmartSignin
+  * JWT (JSON Web Token) [[https://5xruby.tw/posts/what-is-jwt|1]] \\ -- an open, industry standard RFC 7519 method for representing claims securely between two parties.
+    * [[https://jwt.io/ | jwt.io]] -- allows you to decode, verify and generate JWT
   * Others
@@ 行 1905: / 行 2023: @@
 \\
 ===== E-Commerce =====
-<panel type="default" title="Global Payment Service / Payment Gateway / 第三方支付">
+==== 🔹 Payment ====
+=== Global Payment Service / Payment Gateway / 第三方支付 ===
   * Global
     * [[https://www.paypal.com/tw/ | PayPal]] (eBay)
@@ 行 1920: / 行 2039: @@
     * [[http://www.circle.tw/trend/third-party-payment-in-taiwan.html|台灣第三方支付的真相]]
     * [[http://www.circle.tw/twcn/third-party-payment-in-china.html|中國第三方支付的真相]]
-</panel>
-<panel type="default" title="E-Commerce, M-Commerce / 金流, 物流 / Shopping Cart 線上購物車套裝模組 / 電子發票模組">
+\\
+==== 🔹 E-Commerce / Logistic / Invoice ====
+=== E-Commerce, M-Commerce / 金流, 物流 / Shopping Cart 線上購物車套裝模組 / 電子發票模組 ===
   * Open Source Solution
     * [[https://woocommerce.com/|WooCommerce]] @WordPress -- an open source e-commerce plugin for WordPress.
@@ 行 1949: / 行 2069: @@
     * Reference :?:
       * [[http://www.bnext.com.tw/article/view/id/39356|專家解答：為什麼支付寶可以來台？Apple Pay卻不能來？]]
-</panel>
-<panel type="default" title="股市/期貨 程式自動下單">
+\\
-    * [[http://www.multicharts.com.tw/|MultiCharts 程式交易操盤軟體]]
+==== 🔹 Digital Marketplace Platform ====
-</panel>
+  * [[https://gumroad.com/ | Gumroad]] -- a self-publishing digital marketplace platform to sell digital services such as books, memberships, courses and other digital services.
@@ 行 2028: / 行 2146: @@
 \\
 ===== IoT Platform =====
-==== Protocol ====
+==== 🔹 Protocol ====
   * TCP/IP
     * WebSocket
@@ 行 2057: / 行 2175: @@
 \\
-==== Platform ====
+==== 🔹 Platform ====
   * [[https://thingsboard.io/ | ThingsBoard]] -- Open-source IoT Platform for: Device management, data collection, processing and visualization for your IoT solution.
   * [[https://thingspeak.com/|ThingSpeak]] -- Data collection in the cloud with advanced data analysis using MATLAB.
@@ 行 2069: / 行 2187: @@
   * [[http://freeboard.io/|freeboard.io]] -- Visualize the Internet of Things. Ridiculously simple dashboards for your devices.
     * [[https://github.com/Freeboard/freeboard|freeboard]] -- GitHub Source
 \\
-==== Web Hook ====
+==== 🔹 Messaging / Message Queue / Broker ====
+  * [[https://kafka.apache.org/ | Apache Kafka]]
+  * [[https://activemq.apache.org/ | Apache ActiveMQ]]
+  * [[https://www.rabbitmq.com/ | RabbitMQ]]
+  * IBM MQ
+  * Amazon SQS
+  * Zookeeper
+  * Mosquitto
+  * [[https://redis.io/ | Redis]]
+\\
+==== 🔹 Web Hook ====
   * [[https://ifttt.com/|IFTTT ]] (If This Then That) -- a free web-based service to create chains of simple conditional statements, called applets. An applet is triggered by changes that occur within other web services such as Gmail, Facebook, Telegram, Instagram, or Pinterest.
   * [[https://dweet.io/|dweet.io]] -- Ridiculously simple messaging (and alerts) for the IoT.
 \\
-==== Tunnel / Port Forwarding ====
+==== 🔹 Tunnel / Port Forwarding ====
   * [[https://ngrok.com/|ngrok]] -- tunnel local ports to public URLs and inspect traffic.
   * [[https://serveo.net/|serveo.net]] -- Expose local servers to the internet by //ssh//.
 \\
-==== Tool / Software ====
+==== 🔹 Tool / Software ====
-  * [[https://nodered.org/ | Node-RED]] (by IBM)
+  * [[https://nodered.org/ | Node-RED]] (by IBM) -- a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.
   * [[https://en.wikipedia.org/wiki/On-board_diagnostics | OBD]] (On-Board Diagnostic) 車載自動診斷系統
 \\
-===== Home Automation =====
+===== Smart Home / Home Automation =====
-  * Open Source
+  * Connectivity Standard
-    * [[https://www.openhab.org/|openHAB]] (Open Home Automation Bus) -- an technology agnostic home automation platform which runs as the center of your smart home!
+    * [[https://csa-iot.org/all-solutions/matter/ | Matter]]  [[https://en.wikipedia.org/wiki/Matter_(standard) | 1]], [[https://www.androidpolice.com/matter-smart-home-standard-explained/ | 2]]
+  * Open Source / On-Premise
     * [[https://www.home-assistant.io/|Home Assistant]] ([[https://github.com/home-assistant|GitHub]])-- home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts. Perfect to run on a Raspberry Pi or a local server.
-    * [[http://www.domoticz.com/ | Domoticz]] -- a very light weight home automation system that lets you monitor and configure miscellaneous devices.
+    * [[https://www.openhab.org/|openHAB]] (Open Home Automation Bus) -- an technology agnostic home automation platform which runs as the center of your smart home!
-  * Commercial
+    * [[https://www.domoticz.com/ | Domoticz]] -- a very light weight home automation system that lets you monitor and configure miscellaneous devices.
-    * [[https://assistant.google.com/ | Google Assistant]]
+  * Commercial / Cloud
+    * [[https://assistant.google.com/ | Google Home]]
     * [[https://www.apple.com/ios/home/ | Apple HomeKit]]
+    * [[https://alexa.amazon.com/ | Amazon Alexa]]
+  * Others
+    * [[https://hoobs.com/ | HOOBS]]
@@ 行 2142: / 行 2281: @@
     * [[https://www.maptiler.com/|MapTiler]]
     * [[https://www.mapbox.com/|MapBox]]
+    * [[https://locationiq.com/maps | LocationIQ]] -- [[https://maps.locationiq.com/#13.7/25.05422/121.56165 | @Taipei]]
+    * [[https://docs.carto.com/carto-user-manual/maps | CARTO]]
     * TomTom
     * HERE
@@ 行 2207: / 行 2348: @@
     * [[https://www.runoob.com/|RUNOOB 菜鳥教程]]-- 學的不僅是技術，更是夢想！
     * [[https://www.programiz.com/|Programiz]] -- Beginner Friendly Tutorials for Programmers: Python,  C/C++, Java, Kotlin, Swift, R, DS & Algorithms.
-    * [[https://leetcode.com/|LeetCode]] -- The World's Leading Online Programming Learning Platform
     * Linux: [[https://man.linuxde.net/|Linux命令大全]]、[[http://linux.vbird.org/|鳥哥的 Linux 私房菜]]
@@ 行 2246: / 行 2386: @@
   * Data Visualization
     * JavaScript
-      * [[https://d3js.org/|D3.js]] -- based on data manipulation documentation. D3 combines powerful visualization components with data-driven DOM manipulation methods.
+      * [[https://www.chartjs.org | Chart.js]] -- Simple yet flexible JavaScript charting library for the modern web
+      * [[https://d3js.org/ | D3.js]] -- Data-Driven Documents based on data manipulation documentation. D3 combines powerful visualization components with data-driven DOM manipulation methods.
         * [[https://observablehq.com/|Observable]] -- the magic notebook for exploring data and thinking with code.
           * [[https://observablehq.com/@d3/gallery|Gallery / D3 / Observable]]
@@ 行 2271: / 行 2412: @@
 \\
 ===== AI / Machine Learning =====
-==== Theory ====
+==== 🔹 AI Theory ====
   * [[https://en.wikipedia.org/wiki/Artificial_intelligence|Artificial Intelligence (AI)]]
@@ 行 2319: / 行 2460: @@
-==== Application ====
+==== 🔹 AI Application ====
   * [[https://en.wikipedia.org/wiki/Pattern_recognition|Pattern Recognition]]
@@ 行 2355: / 行 2496: @@
     * Car Identification System
     * License Plate Detection & Recognition
-  * Chatbot @SaaS
-    * [[https://manychat.com/|ManyChat]]
-    * [[https://www.chatisfy.com/|CHATISFY]]
   * Chess / Game
@@ 行 2364: / 行 2501: @@
-==== AI Accelerator ====
+==== 🔹 AI Accelerator ====
   * NPU (Neural Processing Unit)
   * GPU (Graphics Processing Units)
@@ 行 2374: / 行 2511: @@
-==== Framework / Library ====
+==== 🔹 AI Framework / Library ====
   * [[https://developer.apple.com/documentation/coreml|Core ML]] (by Apple) -- integrate trained machine learning models into app.
   * [[https://www.tensorflow.org/|TensorFlow]] - an open-source software library for dataflow programming across a range of tasks. It is a symbolic math library, and also used for machine learning applications such as neural networks.
@@ 行 2396: / 行 2533: @@
   * LIBSVM
+  * JavaScript Library
+    * P5.js ~ a friendly tool for learning to code and make art.
+      * https://p5js.org/
+      * https://editor.p5js.org/
+    * ML5.js ~ Friendly Machine Learning for the Web
+      * https://ml5js.org/
 \\
-===== Blockchain / FinTech =====
+==== 🔹 AI Cloud Service ====
+  * Research
+    * [[https://openai.com/ | OpenAI]] -- is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.
+      * [[https://openai.com/api/ | OpenAI API]] -- Build next-gen apps with OpenAI’s powerful models.
+        * [[https://beta.openai.com/examples/ | Example]]、[[https://beta.openai.com/overview | Overview]]
+  * Speech Recognition & Translation
+    * [[https://openai.com/blog/whisper/ | Whisper]]
+  * General ChatBot
+    * [[https://chat.openai.com/ | ChatGPT]] :!:
+  * Business ChatBot
+    * [[https://manychat.com/ | ManyChat]]
+    * [[https://www.chatisfy.com/ | CHATISFY]]
+  * Text to Image AI Generator
+    * [[https://www.midjourney.com/ | Midjourney]] :!:
+    * [[https://dream.ai/ | Dream by Wombo]]
+    * [[https://stablediffusionweb.com/ | Stable Diffusion]]
+    * 美圖秀秀
+    * [[https://openai.com/dall-e-2/ | DALL·E 2]]
+    * [[https://deepdreamgenerator.com/ | Deep Dream Generator]]
+    * [[https://deepai.org/machine-learning-model/text2img | DeepAI]]
+    * [[https://hotpot.ai/art-generator | Hotpot]]
+    * [[https://www.fotor.com/features/ai-image-generator/ | Fotor]]
+    * [[https://www.craiyon.com/ | Craiyon]]
+    * [[https://picsart.com/ai-image-generator | Picsart]]
+    * [[https://nightcafe.studio/ | NightCafe]]
+    * [[https://ai.northestcloud.com/ | 北極AI繪圖王 (Northest AI Draw Tool)]]
+  * Collaborative (協作) AI Image Generator
+    * [[https://www.artbreeder.com/ | Artbreeder (Ganbreeder)]] -- brings creativity and collaboration
+  * AI Writer
+    * [[http://jiuge.thunlp.org/ | 九歌 ~ 人工智能詩歌寫作系統]]
+    * [[https://poem.xiaoice.com/ | 少女詩人小冰 ~ 讓小冰替你創作詩歌初稿]]
+\\
+===== Virtual Currency =====
+  * Physical
+    * Commodity Money, Coupon
+  * Digital Currency
+    * Cryptocurrency (Crypto Currency) -- by [[https://en.wikipedia.org/wiki/Scrypt|Scrypt]] Algorithm (Miner)
+      * [[https://www.bitcoin.com/|Bitcoin (BTC)]] 比特幣 -- [[https://www.bitcoin.com/bitcoin.pdf|A Peer-to-Peer Electronic Cash System]]
+      * Litecoin (LTC) 萊特幣, Dogecoin 多吉幣/狗狗幣/旺旺幣, Auroracoin 極光幣, Mintcoin 薄荷幣, FeatherCoin (FTC) 羽毛幣, 懸賞幣, 西班牙幣, 黑幣, 紐約幣, ...
+    * Non-Cryptocurrency
+      * Internet coupon
+  * ICO (Initial Coin Offerings 首次代幣發行)
+\\
+===== Blockchain =====
   * [[https://www.ithome.com.tw/article/105368|Blockchain]]
     * 定義
@@ 行 2413: / 行 2611: @@
       - 病例、生產履歷
-  * Virtual Currency
+  * [[https://lbry.com/ | LBRY]] -- a blockchain-based file-sharing and payment network that powers decentralized platforms, primarily social networks and video platforms. [[https://en.wikipedia.org/wiki/LBRY|1]]
-    * Physical
-      * Commodity Money, Coupon
-    * Digital Currency
-      * Cryptocurrency (Crypto Currency) -- by [[https://en.wikipedia.org/wiki/Scrypt|Scrypt]] Algorithm (Miner)
-        * [[https://www.bitcoin.com/|Bitcoin (BTC)]] 比特幣 -- [[https://www.bitcoin.com/bitcoin.pdf|A Peer-to-Peer Electronic Cash System]]
-        * Litecoin (LTC) 萊特幣, Dogecoin 多吉幣/狗狗幣/旺旺幣, Auroracoin 極光幣, Mintcoin 薄荷幣, FeatherCoin (FTC) 羽毛幣, 懸賞幣, 西班牙幣, 黑幣, 紐約幣, ...
-      * Non-Cryptocurrency
-        * Internet coupon
-  * ICO (Initial Coin Offerings 首次代幣發行)
+\\
+===== FinTech =====
+  * Robo-Advisor / Program Trading
+    * 股市/期貨 程式自動下單
+      * [[http://www.multicharts.com.tw/|MultiCharts 程式交易操盤軟體]]
@@ 行 2430: / 行 2625: @@
   * [[https://zh.wikipedia.org/wiki/元宇宙 | Metaverse 元宇宙]]
   * [[https://www.fetnet.net/accelerator/index.html | 遠傳5G元宇宙加速器]]
+\\
+===== Virtual Reality =====
+  * VR (Virtual Reality) 虛擬實境 - VR replaces your whole worldview with a simulation in some way or another.
+  * AR (Augmented Reality) 擴增實境 - AR is any sort of computer-based system that overlays data on top of your current view of the world, while continuing to let you see the world around you.
+  * MR (Mixed Reality) 混合實境 - MR seamlessly integrates digital objects into your world making it look as if they are really there.
+  * SR (Substitutional Reality) 替代實境
+  * Comparison: [[https://qph.fs.quoracdn.net/main-qimg-58e2bd8b6b7ac957820d9a47f02ba4bf-c|1]]、[[https://media.giphy.com/media/pragpMzG8nMoE/giphy.gif|2]]
+  * Editor
+    * [[https://www.makerar.com/|MAKAR]] -- AR/VR Editor
+  * 3D Projection
+    * Holographic Projection 全息投影技術
+      * front-projected holographic display
+    * Pepper's Ghost 佩珀爾幻象
+    * 邊緣消隱
+\\
+===== Custom Virtual Space =====
+  * Video Conference
+    * [[http://www.minecraft.net/ | Minecraft]] -- In Minecraft, players explore a blocky, procedurally generated 3D world with virtually infinite terrain, and may discover and extract raw materials, craft tools and items, and build structures, earthworks and simple machines.
+  * Game
+    * [[https://www.gather.town/ | Gather Town]] -- Centered around fully customizable spaces, Gather makes spending time with your communities just as easy as real life
 \\
 ===== Multimedia =====
+  * Publishing and Typesetting
+    * Commercial
+      * [[https://www.adobe.com/products/indesign.html|Adobe InDesign]]
+    * Open Source
+  * DAW (Digital Audio Workstation)
+    * Open Source
+      * [[http://www.warmplace.ru/soft/pixitracker/|PixiTracker]]
   * HDRI (High-Dynamic-Range Imaging)
     * Gallery: [[https://hdrihaven.com/hdris/| https://hdrihaven.com/|HDRI Haven]]
@@ 行 2447: / 行 2679: @@
     * Commercial
       * [[https://www.adobe.com/products/illustrator.html|Adobe Illustrator]]
+      * [[https://www.figma.com/ | Figma]] -- a vector graphics editor and prototyping tool  [[https://hahow.in/courses/5ee4d65789dc7e4854909ba1/main|1]]
+      * [[https://pixlr.com/editor/|Pixlr editor]], [[https://pixlr.com/x/|Pixlr x]] -- free in-browser editor
     * Open Source
       * [[https://inkscape.org/|Inkscape]] -- a professional vector graphics editor for Linux, Windows and macOS. It's free and open source.
@@ 行 2453: / 行 2687: @@
       * Vectr -- a slimline vector editor available for your browser or desktop
       * SVG-Edit -- A straightforward Illustrator alternative for web developers
-      * [[https://pixlr.com/editor/|Pixlr editor]], [[https://pixlr.com/x/|Pixlr x]] -- free in-browser editor
-  * Publishing and Typesetting
+  * Photo-to-Video :?:
-    * Commercial
+    * [[https://www.canva.com/zh_tw/ | Canva]]
-      * [[https://www.adobe.com/products/indesign.html|Adobe InDesign]]
-    * Open Source
-  * DAW (Digital Audio Workstation)
-    * Open Source
-      * [[http://www.warmplace.ru/soft/pixitracker/|PixiTracker]]
   * Video / Streaming Editing
     * Commercial
       * [[https://www.cyberlink.com/products/powerdirector-video-editing-software/features_en_US.html|CyberLink PowerDirector]]
-    * Open Source
+    * Open Source  [[https://www.lifewire.com/best-open-source-video-editing-software-4590219|1]]
       * [[https://obsproject.com/ | OBS Studio]] -- Open Broadcaster Software, a free and open-source cross-platform streaming and recording program built with Qt and maintained by the OBS Project.
+      * [[https://shotcut.org/ | Shotcut]]
+      * [[https://www.openshot.org/ | OpenShot]]
+      * [[https://github.com/ozmartian/vidcutter | VidCutter @ Github]]
   * Video Streaming [[https://github.com/Rashomon511/MyBlog/issues/54|1]],[[https://codertw.com/程式語言/665333/|2]]
@@ 行 2475: / 行 2705: @@
     * RTSP (Real-Time Stream Protocol)
     * WebRTC (Web Real-Time Communication)
+  * Video Broadcasting Services
+    * [[https://www.youtube.com/ | YouTube]] -- online video sharing and social media platform.
+    * [[https://odysee.com/ | OdySee]] -- an open-source video-sharing platforms built on LBRY, have been described as decentralized alternatives to YouTube.
+    * [[https://joinpeertube.org/ | PeerTube]] -- aspires to be a decentralized and free/libre alternative to video broadcasting services. :!:
   * IP Camera
@@ 行 2510: / 行 2745: @@
     * [[https://www.unrealengine.com/|Unreal Engine 4]]
     * [[https://store.steampowered.com/about/|Steam]]
+    * [[https://gallery.styly.cc/ | Styly]] (Run in Browser)
-  * 3D Modeling, Animation, and Rendering Software
+  * 3D Modeling Editor / Animation and Rendering Software
     * [[https://www.autodesk.com/products/3ds-max/overview|Autodesk 3DS MAX]] -- helps you create massive worlds in games, stunning scenes for design visualization, and engaging virtual reality experiences.
     * [[https://www.autodesk.com/products/maya/overview|Autodesk MAYA]] -- provides an integrated, powerful toolset. Use it for animation, environments, motion graphics, virtual reality, and character creation.
     * [[https://www.maxon.net/en/products/cinema-4d|Maxon Cinema 4D (C4D)]] --  the fastest and easiest-to-use 3D animation solution.
       * [[https://www.c4dzone.com/|C4D Community]]
+    * [[https://www.blender.org/ | Blender]] :!: -- a free and open-source 3D computer graphics software toolset used for creating animated films, visual effects, art, 3D-printed models, motion graphics, interactive 3D applications, virtual reality, and, formerly, video games.
+      * [[https://blenderartists.org/ | Blender Artists Community]] --The home of the Blender 3D community.
-  * 3D Modeling Download
+  * 3D Modeling Viewer / Characters Download
     * [[https://www.mixamo.com/ | Mixamo]] -- Animate 3D characters for games, film, and more.
     * [[https://sketchfab.com/ | Sketchfab]] -- The best 3D viewer on the web
+    * [[http://www.makehumancommunity.org/ | MakeHuman]] :!: --  a free and open source 3D computer graphics middleware designed for the prototyping of photorealistic humanoids.
   * 3D Community / Library / Files Download
@@ 行 2554: / 行 2793: @@
 \\
-===== Virtual Reality =====
-  * VR (Virtual Reality) 虛擬實境 - VR replaces your whole worldview with a simulation in some way or another.
-  * AR (Augmented Reality) 擴增實境 - AR is any sort of computer-based system that overlays data on top of your current view of the world, while continuing to let you see the world around you.
-  * MR (Mixed Reality) 混合實境 - MR seamlessly integrates digital objects into your world making it look as if they are really there.
-  * SR (Substitutional Reality) 替代實境
-  * Comparison: [[https://qph.fs.quoracdn.net/main-qimg-58e2bd8b6b7ac957820d9a47f02ba4bf-c|1]]、[[https://media.giphy.com/media/pragpMzG8nMoE/giphy.gif|2]]
-  * Editor
-    * [[https://www.makerar.com/|MAKAR]] -- AR/VR Editor
-  * 3D Projection
-    * Holographic Projection 全息投影技術
-      * front-projected holographic display
-    * Pepper's Ghost 佩珀爾幻象
-    * 邊緣消隱
-\\
 ===== Education =====
   * STEAM fields -- Science, Technology, Engineering, Art, and Mathematics.