Introduction to C++ C++ is a general-purpose, statically typed programming language that supports multiple paradigms. It is known for its efficiency, scalability, and flexibility, and is commonly ...

30 items of modern C++ (from c++ 11 to c++20)(English)

30 items of modern C++ (from c++ 11 to c++20)(中文)
C++ 介紹 C++ 是一種通用的、靜態類型的、支援多範式編程的程式語言,它具有高效性、可擴展性和靈活性,常被用於系統開發、遊戲開發、嵌入式系統、高性能運算等領域。C++語言最初由 Bjarne Stroustrup 於1980年代開發(哇賽,我都還沒出生ㄟ) ,它是在C語言的基礎上進行擴展和增強而成的。 優點:它運行很快(但並不代表你可以快速 coding 完成) 缺點:難學!因為語言...

TypeScirpt in Docker
JavaScript 的主要問題 你習慣寫物件導向的 code 嗎?像是 C#, Kotlin,Java, C++ ..等。 只要一種物件導向的程式語言熟悉,要上手其他的語言其實都很容易,因為物件導向的核心概念,不外乎封裝、繼承、多型、抽象。 然而當你想要寫點網頁前端時,看到 JavaScript 這種解釋性的動態類型編程語言應該很崩潰。 光是隨便一個 function,傳進來的參數到...

Github Action to GCS
Github actions GitHub Actions 是 GitHub 提供的一套 CI/CD(持續整合/持續部署)工具,讓開發者能夠自動化執行各種工作流程。例如,當你提交程式碼變更到儲存庫時,GitHub Actions 可以自動執行測試、編譯專案、部署應用程式,甚至可以進行檔案格式檢查或其他任務。 以下是 GitHub Actions 的一些主要特點: 工作流程 (Workf...

Service Worker of PWA
Web app Progressive Web App (PWA) 的核心技術 Service worker,可讓 Web App 的使用體驗,更加接近 Native App。以下我們來看一下什麼是 Web App 吧! Web App(網頁應用程式)是一種透過網頁技術建構的應用程式,用戶可以透過網頁瀏覽器直接訪問和使用,而不需要下載和安裝傳統的應用程式。Web App 的外觀和操作體驗...

Google OAuth in fastapi
為什麼需要 OAuth 生活當中我們常用的服務越來越多了,這時候會發現,如果每種服務都要記一組帳號,常常會”忘記密碼”,不然就是所有的帳密都是同一組,這是很危險的。 OAuth 可以幫助我們使用既有的帳號做第三方應用的登入,常見的有 google, facebook, wechat..等。這樣不只使用者不用記住各種密碼,對於服務的提供者,也不用存下敏感的使用者資料,提高了資訊的安全性。 ...

(前端)Webpack with Node.js
Node.js 前端應用 這篇主要要介紹 Node.js 前端的開發,使用 Webpack 做為例子 Webpack 用於模組打包工具,可以將 JavaScript、CSS 等資源打包成瀏覽器可以載入的靜態資源,優化前端的加載速度 以下我們示範使用 Webpack 打包 Lodash, 但啥是 Lodash ?? 先簡單介紹一下 Lodash 吧 Lodash 是一個功能強大且廣泛...

Node.js 開發
Node.js 能幹嘛 相信很多人查了 Node.js 的資源要學習時,常常會被搞得暈頭轉向,在 Node.js 的環境下,可以同時進行前端和後端的開發,所以一下是前端開發,一下又是後端開發, 又 Node Package Manager(NPM)…等,各種工具術語滿天飛,實在讓人難消化。 在前端開發中,Node.js 主要用於工具鏈、打包工具和伺服器端渲染,佔比約 30-40%。 事...

(後端)Websocket with Node.js
Node.js 後端應用 這篇主要要介紹 Node.js 後端的開發,使用 Websocket 做為例子,為了整體完整性也為了讓你可以直接將 code 複製下來 rework, 因此也會提供前端 html 的部分,但 html 部分你可以放在任意的 web server, 不一定要跟 server 的 code 放在一起。 現在人的生活完全離不開通訊軟體,像是 Line, WeChat....

TTF 檔轉 WOFF2 檔
TTF 檔太肥了 上一篇 示範在網頁上使用 TTF 檔,讓國字的旁邊出現注音,但是 TTF 檔 size 太大了,網頁需要不少時間載入,嚴重影響使用者體驗。 因此,必須想個辦法幫 TTF 瘦身一下。 TTF 檔介紹 TTF(TrueType Font)是一種字型檔案格式,最早由 Apple 和 Microsoft 於 1980 年代共同開發(很難想像這兩家公司竟然有共同開發的東西...

Node.js in Docker
Node.js 不管你有沒有開發過 web 前端,你一定(可能)聽過 Node.JS 。網路上 Node.js 的介紹看了一大堆, 但完全不知道到底要怎麼用,阿它到底是要寫前端還是要寫後端的 ? 我相信大部分的人都要這個疑問。 此篇會用簡短範例(4個檔案),展示如何快速建立 Node.JS 的環境,然後你就可以自行開發啦。 以下簡單介紹一下 Node.js 及 NPM Node.js...

Vue-i18n 多國語言
多國語言 當你辛辛苦苦寫了一個服務或是 App, 理所當然的希望越多人用越好,這時候可以動態切換文字顯示的語言就顯得十分重要。 當你的前端 UI 使用 Vue 實現,就可以使用 vue-i18n 這個方便的插件。 Vue I18n 是 Vue.js 的國際化插件,主要用來為 Vue 應用程式提供多語言支持。它簡化了應用程式中的語言切換,並提供了動態加載語言資源的功能 主要功能 多語...

數學運算 (中文)
數學運算相關 header 這邊介紹一下標準庫與數學運算相關的內容,主要為 <numeric> <numbers> <cmath> header。 特別講一下 <numbers> , 它提供了很多常用的常數,這樣我們就不用自己去定義。 最怕在 code 中看到有人去定義 Pi 之類的常數,因為根本不知道到底從哪邊抄來的,如果在大型專案中,...

Mathematical Operations (中文)
Math-Related Headers Here’s an introduction to the standard library headers related to mathematical operations: mainly <numeric>, <numbers>, and <cmath>. Let’s talk about <nu...

std::variant (English)
Variant std::variant is a type-safe union introduced in C++17 that allows a variable to hold one of several different types at runtime. This is similar to union types in Java or TypeScript but pro...

std::variant (中文)
Variant std::variant 是 C++17 引入的類型安全的聯合(union),允許變量在運行時持有多種不同的型別之一。這類似於 Java 或 TypeScript 中的聯合型別,但在 C++ 中提供了編譯期的型別安全性。 講 variant 之前,必須先提一下 union, 因為 union 這個東西實在太特別了。 傳統聯合(union)是 C++ 和 C 語言中的一種...

Debugging Python code in Visual Studio Code (English)
Debugging Python code in Visual Studio Code (VS Code) is very convenient. Just follow these steps to start debugging your Python code Install Python Extension Here are the steps to set up and use...

VS Code 調試 Python (中文)
在 Visual Studio Code (VS Code) 中調試 Python 代碼非常方便。 只要以下的步驟就可以開始 debug 你的 python code 了 安裝 Python 擴展 以下是設置和使用 VS Code 進行 Python 調試的步驟: 安裝 Python 擴展: 打開 VS Code。 進入擴展市場(左側活動欄的方形圖標)。 搜索並安裝「Python」擴...

networkx 視覺化 python 套件相依性(中文)
視覺化 python 套件相依性 上一篇示範如何使用 pipdeptree 輸出套件彼此之間的相依性,但不論輸出 console 或 json 都很難閱讀。 特別當套越裝越多的時候。 這邊我們使用 networkx 來視覺化 python 套件相依性,讓相依性在一張圖片上就完整顯示。 networkx 介紹 NetworkX 是一個用於創建、操作和研究複雜網絡結構(或稱圖)的 Pyth...

Visualizing Python Package Dependencies via networkx(English)
Visualizing Python Package Dependencies In the previous article, we demonstrated how to use pipdeptree to output the dependencies between packages. However, both console and JSON outputs can be di...

pipdeptree 查看 python 套件相依性(中文)
套件相依性 當我們開發 python 程式的時候,通常只要求執行順利功能正確就好了。 但當我們透過 pyinstaller 打包的時候,會發現執行檔的 size 比想像大很多,這是因為 套件之間有複雜的相依性,所以打包時所有相依關係的套件都會被引入。 這時我們就可以透過 pipdeptree 來看套件彼此之間的相依性 pipdeptree 介紹 pipdeptree 是一個用於顯示 ...

pipdeptree views Python Package Dependencies (English)
Package Dependencies When developing Python programs, we usually only focus on running the code smoothly and ensuring functionality. However, when packaging with pyinstaller, you might notice that...

Github 上開發教學 Step by Step(2/3)(中文)
Git clone 方式有什麼差異? 剛開始接觸Git的人,無論是使用GitLab 還是 GitHub 在clone專案複製連結的時候都會發現有HTTPS和SSH可以選擇 兩者有什麼區別呢? HTTPS 優點: 簡單, 只需要 GitHub 帳戶的使用者名稱和密碼。 通用, 無需額外配置即可在任何有網路的地方使用。 缺點: 安全性較低, 每次操作都需要輸入使...

將內容加入 google 搜尋中
將內容加入 google 搜尋中 當你辛苦產生的內容希望被別人搜尋到時,這時候就需要將內容加入 google 搜尋中。 以下分享一個不容易注意到的問題,這會大大的影響你的內容是否會被別人搜尋到。記得看到最後! 先介紹一下 google search console 吧! Google Search Console Google Search Console 是 Google 提供的...

Adding Content to Google Search(English)
Adding Content to Google Search When you want your hard-earned content to be searchable by others, it’s crucial to add your content to Google Search. Here’s a problem that’s often overlooked but ...

Android app 版本更新(中文)
Android app 版本更新 因為收到 GOOGLE 的通知版本目標太舊需要更新,所以順便研究如何更新APP的版本。 以下分享我的摸索出的更新歷程。 修改程式 上傳新版本 修改程式 主要更新 compileSdk、targetSdk。 versionCode 跟 versionName 是為了上傳 google 的時候使用,所以必須與之前的版本不同。 修...

Android app Version Update(English)
Android App Version Update I received a notification from Google that the version target is too old and needs to be updated. Therefore, I researched how to update the app version. Below, I’ll s...

Item 26 - 範圍 for 迴圈增強(中文)
範圍 for 迴圈增強 來講個比較小範圍的增強吧,c++20 支援 for 迴圈的初始化語句(init-statements)和初始值設定項(initializers) 直接看 code 吧! #include <iostream> #include <vector> int main() { // 使用範圍 for 迴圈進行初始化語句 for...

Item 26 - Range-based for Loop Enhancements(English)
Range-based for Loop Enhancements Let’s talk about a relatively small enhancement. C++20 supports initialization statements and initializers in the range-based for loop. Let’s look directly at th...

Item 30 - likely 和 unlikely 屬性(中文)
c++ 屬性 在 code 中,偶爾會看到 [[nodiscard]]..加在神奇的地方, 這些語法稱為屬性,屬性要幹嘛用的? 屬性 C++ 中的一種語法,用於向編譯器提供額外的信息,這些信息可以影響程序的編譯或執行方式。這些屬性可以應用於各種程式元素,如類、結構體、函數、變量等。 常見的屬性 [[nodiscard]]: 標記一個函數的返回值不應該被忽略。 [[deprecated...