github Source code
希望透過了解預設的 Angular 樣式機制（模擬封裝）在底層的工作原理來幫助我們更清楚的如何使用 Angular 所提供的一些特殊選擇器(如： :host、:host-context、::ng-deep等)的用法。
在下面的實作過程將會使用到下列技術:
Angular cli 16 Angular 16 Router Standalone component CSS & SCSS 瀏覧器的開發者工具 CSS 的樣式污染 css 沒有作用域的概念，這就導致 css 在書寫的時候都是全局作用域。造成開發者在撰寫過程中會造成因 classname 相同而產生樣式污染及 css 規則層疊(CSS Cascade)。 隨著 SPA 應用的興起，全部的 css 會在同一個環境中同時進行加載，相互影響的問題更加嚴峻。
Angular 元件樣式原理 Angular 以元件組合為基本原理來建構一支 web application，在 Angular 元件中預設採用的“檢視封裝”(View encapsulation)是“ViewEncapsulation.Emulated” (模擬封裝)。在這個設定值下 Angular 會修改元件的 CSS 選擇器，使它們只應用於元件的檢視，不影響應用程式中的其他元素(模擬 Shadow DOM 行為)。
建立 Angular Web Application 使用 npm init 指令建立一支 web application:...
github Source code
在網頁上實作可拖曳的使用者介面可大符增加應用程式使用操作的友善性。
透過拖放，使用者可以使用滑鼠或觸控板點擊檔案並將其拖曳到可放置元素（放置區域），然後透過釋放滑鼠按鈕來「放置」檔案。這使您可以相對輕鬆地建立非常直觀的用戶體驗。
要在 angular app 上實現這樣的功能除了可以透過第三方的 UI Component (如：igniteui、ngx-drag-drop)的支援外，最方便的解決方案是使用 Angular 內建的功能 Material CDK 來實作。
Angular Drag and Drop CDK（元件開發套件）提供自由拖曳、清單內排序、清單之間移動項目、動畫、觸摸裝置、自訂拖曳手把(handle)等的支援。
在下面的實作過程將會使用到下列技術:
Angular cli 16 Bootstrap 5 (UI Framework) Angular 16 Router Standalone component Angular Material CDK CdkDrag CdkDragHandle CdkDropList CdkDropListGroup moveItemInArray 建立一個 Angular 應用程式 使用 angular cli 建立應用程式 將採 standalone 架構來建置這個應用程式，使用以下指令如下
$ npm init @angular dragDropApp -- --routing --style scss --standalone && cd dragDropApp Need to install the following packages: @angular/create@16....
Python 安裝程式除了會在本機安裝進執行檔外，也會連帶安裝一些標準函式庫的套件，但Python 應用程式通常還會用到不在標準函式庫的套件和模組。由於某些特殊的臭蟲修正應用程式有時候會需要某個特定版本的函式庫，或是不同應用程式是根據某函式庫特定版本的介面所撰寫。
這意味著不太可能安裝一套 Python 就可以滿足所有應用程式的要求。如果應用程式 A 需要一個特定的模組的 1.0 版，但另外一個應用程式 B 需要 2.0 版，那麼這整個需求不管安裝 1.0 或是 2.0 都會衝突，以致於應用程式無法使用。
Python 的虛擬環境是用來管理使用套件版本問題的解決方案，實務上有許多不同的方案，包含有：venv、virtualenv、pipenv、conda…等。
本編筆記先來介紹 Python 內建的 venv 這個虛擬環境管理工具。“venv” 是 Python 的預設內建的模組，自 Python 3.3 版本以來就存在，因此不需要額外安裝任何其他套件即可使用，方便就是它的最大好處，但相對於其他解決方案，它也就陽春了許多。
在介紹 venv 前讓我們先從安裝 Python 說起。
在 windows 系統中安裝 Python 在 windows 作業系統上安裝 Python 有許多不同的方式，這裡只展示最典型、最簡易的方式 - 使用安裝執行檔。
先確認你的作業系統上是否已經安裝了 Python 及其版本 在 cmd 程式中輸入 python –version，如果執行本指令後顯示空白則表示尚未安裝任何版本的 python 開啟 cmd.exe，在 windows 桌面上按下快速鍵 Window + R (組合鍵)叫出 “執行視窗”，輸入 “cmd” 後按下“確定”按鈕來啟動 cmd 程式 (註：若你要以administrator身份開啟 cmd 程式的話，請使用 “ctrl+shift+enter"組合鍵來取代按下“確定”按鈕的動作)...
Install Rust on ubuntu 20.04 透過 rustup 來安裝 Rust 此安裝方式是官方所推薦。rustup 是負責安裝及管理 Rust 的工具。在 Rust 開發環境中，所有工具都安裝在 ~/.cargo/bin 目錄中。您也可以在這裡找到 Rust 工具鏈，包括 rustc、cargo 以及 rustup。
進行安裝前可以透過以下指令來確認是否已經安裝了 Rust:
$ rustc --version 如果顯示出 rustc 版本，則表是在你的環境中已安裝好了 Rust:
rustc 1.70.0 (90c541806 2023-05-31) 下載 rustup 先確認你的 ubuntu 已安裝了 curl。
$ curl --version curl 7.68.0 (x86_64-pc-linux-gnu) libcurl/7.68.0 OpenSSL/1.1.1f zlib/1.2.11 brotli/1.0.7 libidn2/2.2.0 libpsl/0.21.0 (+libidn2/2.2.0) libssh/0.9.3/openssl/zlib nghttp2/1.40.0 librtmp/2.3 Release-Date: 2020-01-08 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtmp rtsp scp sftp smb smbs smtp smtps telnet tftp Features: AsynchDNS brotli GSS-API HTTP2 HTTPS-proxy IDN IPv6 Kerberos Largefile libz NTLM NTLM_WB PSL SPNEGO SSL TLS-SRP UnixSockets 若已安裝了 curl，再使用以下指令來下載 rustup:...
github Source code
Context API in ReactJS Context API 是 ReactJS 中的一項功能，它允許跨組件樹共享資料，而不必通過樹的每一層向下傳遞 props。它提供了一種通過組件樹傳遞資料而無需使用 props 的方法，使用 props 這對於具有多層組件的大型應用程序來說可能會變得很麻煩。
使用 vite 建立一支 react web app 樣版 使用 yarn 語法
$ yarn create vite react-context -- --template react && cd react-context $ yarn $ yarn dev 使用 npm 語法
$ npm create vite react-context -- --template react && cd react-context $ npm i $ npm run dev 使用 props 來傳遞資料 先來看看原來使用 props 來傳遞資料給子元件的方式。...