發表文章

精選文章

Youtube iframe 影片自動縮放大小

步驟一 點選影片的分享功能,選擇「嵌入」,會跳到以下畫面,請把右方的 iframe 原始碼 複製起來,貼到需要放影片的地方。 iframe 原始碼 <iframe width="560" height="315" src="https://www.youtube.com/embed/SORD03t7nlo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 步驟二 接著請在 iframe 的外面包一層 div(筆者命名為 videobox),利用 videobox 來控制大小縮放的比例,並清除掉多餘的 Code。 width 和 height 也一並清除,得到一個乾淨的 iframe。 <div class="videobox"> <iframe frameborder="0" src="https://www.youtube.com/embed/SORD03t7nlo" allowFullScreen="true"> </iframe> </div> 步驟三 關鍵的來了!請在 CSS 的部分加入以下程式碼: CSS Code .videobox { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .videobox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 用途在於將 iframe 的寬度與高度設定 100%,並絕對定位於外層 videobox,且自適應 videobox 的大小比例做伸縮。...

如何學習Linux

圖片
如何學習Linux 大綱 前言 選擇適合你的 Linux distribution 從頭學習 Linux基礎 選擇一本易讀的工具書 涉足 Linux社群和網站 實作、增加自身的價值 發生問題怎麼處理啊?建議流程是這樣... 前言 一開始多使用文字介面、命令提示來操作Linux比較好! 為什麼大家老是建議學習Linux最好能夠先捨棄X Window的環境呢? 這是因為X window了不起也只是Linux內的『一套軟體』而不是『Linux核心』。 此外,目前發展出來的X-Window對於系統的管理上還是有無法掌握的地方,舉個例子來說,如果 Linux本身捉不到網路卡的時候,請問如何以X Window來捉這個硬體並且驅動他呢? 還有,如果需要以Tarball(原始碼)的方式來安裝軟體並加以設定的時候,請以X Window 來架設他!這可能嗎?當然可能,但是這是在考驗『X Window開發商』的技術能力, 對於瞭解Linux架構與核心並沒有多大的幫助的!所以說,如果只是想要『會使用Linux』的角度來看, 那麼確實使用X Window也就足夠了,反正搞不定的話,花錢請專家來搞定即可;但是如果想要更深入 Linux的話,那麼指令列模式才是不二的學習方式! 以伺服器或者是嵌入式系統的應用來說,X Window是非必備的軟體,因為伺服器是要提供用戶端來連線的, 並不是要讓使用者直接在這部伺服器前面按鍵盤或滑鼠來操作的!所以圖形介面當然就不是這麼重要了! 更多的時候甚至大家會希望你不要啟動X window在伺服器主機上,這是因為X Window通常會吃掉很多系統資源的緣故! 再舉個例子來說,假如你是個軟體服務的工程師,你的客戶人在台北,而你人在遠方的台南。某一天客戶來電說他的Linux伺服器出了問題, 要你馬上解決他,請問:要您親自上台北去修理?還是他搬機器下來讓你修理?或者是直接請他開個帳號給你進去設定即可? 想當然爾,就會選擇開帳號給你進入設定即可囉!因為這是最簡單而且迅速的方法!這個方法通常使用文字介面會較為單純, 使用圖形介面則非常麻煩啦!所以啦!這時候就得要學學文字介面來操作Linux比較好啦! 另外,在伺服器的應用上,檔案的安全性、人員帳號的管理、軟體的安裝/修改/設定、 登錄檔的分析以及自動化工作排程與程式的撰寫等等,都是需要學習的, 而且這些東西都還未涉...

Linux簡介

圖片
Linux簡介 前言 相信大家對Linux核心為基礎的Android系列一定毫不陌生,但你可能不知道,從架設網站、物聯網、穿戴式設備、崁入式作業系統、工業自動控制....幾乎無所不在 OS(作業系統) 幾乎都用 Linux。 Linux的誕生,就是在1991年,一名芬蘭大學生Linus Torvalds托瓦茲 ,就藉由GNU計劃的協助下,發展出了著名的Linux,一個讓大眾可以自由參與、集體協作、開源免費的OS。 大綱 Linux 的由來 Linux 發行版 各大 Linux Distributions發行版的主要異同:支援標準! 主要的 Linux distributions發行者 Linux OS(作業系統)  架構 核心(Kernel) Linux的核心版本 奇數、偶數版本分類 主線版本、長期維護版本(longterm version) 關於 GNU計畫、自由軟體與開放原始碼 自由軟體的活動 自由軟體的版權GNU GPL 1991年:芬蘭大學生Linus Torvalds的一則簡訊 自由(Free)的真諦 自由軟體與商業行為 開放原始碼 專屬軟體/專利軟體 (close source) Linux 的發展-Torvalds 與Minix之間 對386硬體的多工測試 初次釋出Linux 0.02 Linux 的發展:虛擬團隊的產生 Linux在台灣 選擇適合你的Linux distribution Linux 的由來 Unix的前身是由 貝爾實驗室 (Bell lab.)的Ken Thompson利用組合語言寫成的。 1969年,Unix在美國 AT&T 公司的貝爾實驗室開發出來。 1977年由Bill Joy釋出 BSD (Berkeley Software Distribution),這些稱為Unix-like的作業系統。 1983年,Richard Stallman創立 GNU 計劃。這個計劃有一個目標,是為了發展一個完全自由的類Unix作業系統。 1984年由Andrew Tanenbaum開始製作 Minix 作業系統,該系統可以提供原始碼以及軟體。 1985年,發表GNU宣言。 1989年,發表GNU通用公眾授權條款( GPL )。GNU計畫中的其他部份,如編輯器、編譯器、shell等都已經完成,獨缺作業系統核心...

JavaScript程式設計規範

JavaScript程式設計規範 前言 程式設計規範是編程的風格指南。它們通常包括: 變量和函數的命名和聲明規則。 空格、縮格和註釋的使用規則。 編程實做和原則。 程式設計規範確保質量: 提高代碼可讀性。 讓代碼維護更簡單。 大綱 變量和函數的命名 運算符前後空格 代碼縮格 語句規則 物件規則 語句長度< 80 個字 命名規範 在 HTML 中加載 JavaScript 存取 HTML 元素 文件擴展名 文件名使用小寫 註解 comment 避免全局變量 開頭聲明 初始化變量 不要使用 new Object() 小心自動類型轉換 盡量使用 "===" 比較運算符號 使用參數默認值 用默認值結束你的 switch 避免將數字、字符串和布爾值作為物件 變量和函數的命名 使用 駝峰(camelCase) 命名法作為變量和函數的命名。 所有名字都以字母開頭。 若是有幾個分別意義的幾個字組合的詞,第一個字開頭小寫,後幾個字開頭用為大寫。 firstName = "John"; lastName = "Doe"; price = 19.90; tax = 0.20; fullPrice = price + (price * tax); 運算符前後空格 始終在運算符 ( = + - * / ) 和逗號之後放置空格。 let x = y + z; const myArray = ["Volvo", "Saab", "Fiat"]; 代碼縮格 始終使用 2 個空格來縮進代碼區塊。 function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); } 不要使用 Tab鍵 進行縮進。不同的編輯器對 Tab鍵 的解釋不同。 語句規則 簡單語句的一般規則: 總是以 分號 ";" 結束簡單的語句。 const cars = ["Volvo", "Saab", "Fiat"]; 複合語句的一般規則: 將左括號放在第一行的末尾。 在左括號前使用一個空格。 將右括號放在一個新行上...

VSCode安裝與使用

圖片
VSCode安裝與使用 大綱 下載安裝 VSCode 在 Windows 上 建立專案目錄、開啟VSCode 安裝 Python 相關擴充插件 選擇 Color Theme主題外觀 客製化設定 好用的 Extension 擴充插件 General 通用 Coding AI Assistant Html/CSS JavaScript Python Flutter/Dart Excel BackEnd/Database Shotcut 快捷鍵 General通用 檔案、目錄 編輯 Navigation Display Emmet/Html Doc FAQ-VSCode 前言 Visual Studio Code 簡稱 VS Code,VS Code 是一個由微軟開發 IDE,支援各平台的免費程式碼編輯器,它支援測試程式、Git 版本控制、代碼補全、豐富的插件 ...... 等等常用功能,幾乎可以開發任何程式語言,實用工具非常多,全球使用者佔據絕對優勢,並且奪得了 2021 年 StackOverflow 上的使用者統計第一名。 下載安裝 VSCode 在 Windows 上 安裝非常簡單,網路上也有非常多的介紹文章,這裡就不做詳細介紹了。 1:雙擊 下載  選擇合適的版本後,執行安裝,以安裝 Windows 版本為例。 2:勾選同意,然後點擊下一步。 3:選擇安裝位置,我這裡選擇的是D盤  4:下一步  5:勾選創建快捷方式,下一步  6:點擊安裝,開始安裝  7: 等待安裝結束。 另外,VSCode 也有網也版本,詳細說明請參閱► 2021/10/22微軟發表網頁版VS Code(外連結) 。 建立專案目錄、開啟VSCode 我們在 C:\Users\Administrator\Desktop\Code\Python\ 路徑下建立一個 Folder 目錄  startUp。點擊滑鼠右鍵,用 VSCode 開啟: 安裝 Python 相關擴充插件 開啟後,我們先安裝必須且常用的 Extension 擴充插件。 點選 Extension 擴充插件圖示,安裝必須且常用的擴充插件。 左下角顯示預設的 Python 版本,表示安裝成功。 右邊大區塊的...

VirtualBox的虛擬主機網路設定

圖片
VirtualBox的虛擬主機網路設定 前言 這裡介紹如何調整 VirtualBox 的網路設定,讓開發者可透過網路連線至虛擬機器做測試。 大綱 虛擬機連網設定步驟 Virtual Box 網卡的幾種設定模式 虛擬機連網設定步驟 步驟 1 假設我們已經安裝好了一個新的 Linux 虛擬機器,此時從「檔案」中點選「主機網路管理員」 步驟 2 在主機網路管理員中,建立新的子網路。 步驟 3 在 VirtualBox 的主要控制畫面上,選擇測試用的 Linux 虛擬主機,然後點選「設定值」。 步驟 4 選擇「網路」的設定籤頁,在這裡可以設定虛擬主機的網路卡,通常第一張是預設以 NAT 上網的網路卡,所以不要更改第一張的設定,否則到時候對外連線容易出問題。 在「介面卡 2」的地方,勾選「啟用網路卡」,選擇「僅線主機」介面卡,名稱的地方就選擇剛剛上面新增的子網路。 這樣就完成 VirtualBox 的設定了,接下來就可以打開虛擬機器,讓虛擬機器裡面的 Linux 自動透過第二張網路卡取得 IP 位址,與實體的本機連線了。 如果不想要每次開機都確認 DHCP 抓到的 IP 是那一個,可以將上面子網路的 DHCP 伺服器功能關閉,並調整虛擬機的網路設定,將 IP 位址設定為靜態的,這樣就可以把 IP 固定住 Virtual Box 網卡的幾種設定模式 有關網卡幾種設定模式: Not Attached  NAT (Network Address Translation) NAT網路(Network Address Translation Service (experimental)) 橋接介面卡(Bridged networking) 僅限主機介面卡、Host-only Adapter模式(Host-only networking) 內部網路 (Internal Networking) 通過這張圖就很容易看出這4種方式的區別。 詳細說明請參閱:► VirtualBox Network Settings: Complete Guide 、 徹底理解Viutual Box四種網路連線方式(外連結) 參考資料 特色、摘要,Feature、Summary: 關鍵字、標籤,Keyword、Tag: Virtual-Box,Ubuntu,Linux,Networ...

作業系統、瀏覽器通用快捷鍵

圖片
作業系統、瀏覽器通用快捷鍵 前言 你可能也不知道的經典小技巧:看網頁看了十年,卻不知道 Ctrl+F/Command+F 為何物? Ctrl+F/Command+F 人人都曉得用搜尋引擎鍵入關鍵字搜尋網頁,但不見得都能從文章中快速找出需要的內容, Google 搜尋專家 Dan Russell 指出有大部分網路使用者不會用「Ctrl+F /Command+F」這種基礎搜尋功能,只會逐行掃描文章找出關鍵字,費時費力。 Ctrl+F組合鍵,是在Windows 作業系統上的,而 Command+F 是在 Mac OS 上的組合鍵。 可以用在文件中搜尋關鍵字串。 Word、Excel Ctrl+F 搜尋功能 也可用在瀏覽器中搜尋文件中的關鍵字串。 透過 Ctrl+F能快速在文章中搜尋到關鍵字 作業系統、瀏覽器通用快捷鍵: Ctrl+F(或直接按F3):開啟搜尋功能 Ctrl+A:全選 Ctrl+X:剪下 Ctrl+C:複製 Ctrl+V:貼上 Ctrl+Z:還原 Ctrl+P:列印 Ctrl+滑鼠左鍵:以新分頁開啟連結網頁 Shift+滑鼠左鍵:以獨立新分頁開啟連結網頁 Ctrl+R(或直接按F5):重新整理網頁 Ctrl+T:開啟新分頁 Ctrl+W:關閉分頁 Ctrl+Tab:切換分頁 Ctrl+D:將網頁加入書籤、我的最愛 Alt+D(或直接按F6):移到網址列 Alt+Tab : 切換工作室窗 F11:切換全螢幕 參考資料 特色、摘要,Feature、Summary: 關鍵字、標籤,Keyword、Tag: ToolsWorkingLearning,Tools,Shortcut,

如何安裝配置Python開發環境

圖片
如何安裝配置Python開發環境 前言 程式設計最讓人頭痛想放棄的癥結點,很多時候是搞定開發環境跟工具,也就是一開始被架構好,後面的工具、套件安裝時就會出現許多問題。另外,每個人使用的硬體跟軟體規格版本不一,常常會出現相容性議題。 大綱 在 Windows 安裝 Python 執行環境 Python IDE 整合開發工具 在VS Code上設置 Python 編程環境 在Windows 安裝 Python 執行環境 連到Python官網的Windows下載頁面 Python 官網的 Windows下載頁面 勾選「Add Python 3.X to PATH」 進行安裝的第一個畫面中,先勾選「Add Python 3.X to PATH」然後再按「Install Now」繼續安裝程序。 按一下「Close」就完成了 當看到這個畫面,按一下「Close」就完成Python執行環境的建置了。 確認安裝完成 在終端命令行輸入 "> py -V ",確認安裝的 Python 版本。 Python IDLE Python有兩種介面。Python IDLE,是一個整合型的編輯器。 Python Terminal 另一種是 Command Line, 終端機模式。 模組安裝 安裝模組的指令為「 pip install <模組名稱> 」,例如想安裝「requests」模組的話就輸入「 pip install requests 」後按鍵盤上的「Enter」即可。 模組的導入 模組安裝之後就可以引用,而引用的指令為「 import 」。例如若要在開發程式時引用requests模組,就在開頭加上「 import requests 」就行了。 Python 開發整合工具 雖然以上下載 Python 原生環境就可以執行 Python,但是選擇自己合適的 IDE (整合開發環境),是開發專案不可或缺的選項。 以下是推薦常用的  IDE : VS Code : VS Code為微軟開源的編譯器,豐富的插件已經澎湃到幾乎可以開發任何程式語言,實用工具非常多。 Colab : Colaboratory (簡稱為「Colab」) google的雲端 Python 筆記本,每個筆記本都是一個 Linux 虛擬機,還可以結合雲端硬碟IO,更可以...