分類
程式技術

iframe RWD化的方法(CSS only)

基本上, iframe 的 RWD 方法有很多種, 不過都需要在外層有個 div 來包裝出比例的尺寸, 才能達成 RWD化, 可以參考:

若只有 iframe tag 本身的話, 不在外層加裝 div 時, 如何達成呢? 可以利用這個 css 屬性: aspect-ratio

以 Youtube 的 embed code 為例:

<iframe width="560" height="315" src="https://www.youtube.com/embed/JtFI8dtPvxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我們將 iframe 設定以下屬性:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

即可順利在不外加 div tag 的條件下, 將 iframe 本身保持指定比例(如 16:9)的 RWD化.

來看看範例吧:

https://codepen.io/timhuang/pen/BaYdMmN

至於這個 CSS 屬性 aspect-ratio 的支援性如何呢? 可以看一下 can i use 網站的資料囉:

https://caniuse.com/mdn-css_properties_aspect-ratio

看起來除了 IE 外, 其他主流瀏覽器都有支援呢.

分類
好用軟體

WordPress的網站縮圖API-mShots

這個是依附在 akismet 下的透過網址可以成生網站的縮圖, API的語法如下:

https://s0.wp.com/mshots/v1/https%3A%2F%2Fdiary.tw%2F?w=800

其中有兩個部分, API為: https://s0.wp.com/mshots/v1/ 後面直接加上 urlencode 後的網址, 另外有個參數是 w 為指定寬度.

以上面的網址來看, 就是本站的首頁 https://diary.tw/ , 而 urlencode 後就是 https%3A%2F%2Fdiary.tw%2F , 並加上 ?w=800 來產出圖檔囉.

像是

這個專案的 GitHub 連結: https://github.com/Automattic/mShots/

PS: 在 WordPress後台留言管理介面會用到這組 API, 若要停用可以參考這篇: https://wordpress.org/support/topic/how-to-disable-mshots-service/

繼續閱讀:

https://shkspr.mobi/blog/2018/12/using-the-wordpress-mshots-screenshot-api/

Windows環境下安裝PHP 8.1.3與Composer

今天來介紹安裝 PHP 8.1.3 於 windows 環境下.

首先至 PHP Windows版本下載的連結:

https://windows.php.net/download

可以安裝 VS16 x64 Non Thread Safe (2022-Feb-16 08:50:36) 這個版本即可, 至於 Thread Safe 與 Non Thread Safe 有什麼不同可以參考: https://stackoverflow.com/questions/1623914/what-is-thread-safe-or-non-thread-safe-in-php, 原則上是與 Apache  Web Server 應用時會需要 Thread Safe 版本, 其他不需要.

解開後放在自己想放的資料夾中, 例如 c:\php (預設也會是這個, 若不是也沒關係), 例如 c:\tools\php813, 然後將這個路徑加入環境變數 PATH 中, 供執行時, 可以執行 php.exe 這個執行命令.

在 console 下, 可以利用以下指令:

C:\Users\tim> PATH %PATH%;C:\tools\php813

接下來的步驟很重要, 先將目錄下的 php.ini-production 或 php.ini-development 複製一份為 php.ini , 調整兩個重要的內容:

  • extension_dir = “ext”
  • extension=openssl

這兩行前面的註解 “;” (分號) 要拿掉.

以上都完成後, 你就可以在 console 下執行 php -v 來看 php 是否可執行, 與版本資訊:

C:\Users\tim>php -v
PHP 8.1.3 (cli) (built: Feb 16 2022 08:20:53) (NTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.1.3, Copyright (c) Zend Technologies

快速學習WordPress Child Theme製作方式

在 WordPress 中, 佈景主題 (Theme) 是很重要的功能之一, 不過往往因為需要自訂一些特殊功能或介面, 需要調整 Theme 的檔案.

一旦更新了 Theme, 又會將原本自行調整的功能覆寫掉, 如何能解決這個問題? 可以使用子佈景主題功能.

先來看看官方資料:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

我們可以自建一個子佈景主題來達成這樣的應用需求, 簡易步驟說明如下:

  1. 在 wp-content/themes/ 建立一個目錄, 以 twentyfifteen 佈景主題為例, 我們就建一個 twentyfifteen-child 這個目錄.
  2. 在這個子佈景主題目錄下建立兩個檔案:
    1. style.css 內容用註解的方式, 但需要有以下兩項屬性, Theme Name 與 Template, 例如:
      /*
      Theme Name: Twentyfifteen Child
      Template: tweentyfifteen
      */
    2. functions.php 內容需要加入引用原始 style.css 功能, 如下:
      <?php
      add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
      function enqueue_parent_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
      }
      ?>
  3. 其他若是有需要調整的程式碼, 以複製同檔名方式放在這個子佈景主題裡, 例如 header.php, 把原始 header.php 複製一份到子佈景主題, 再依自己客製求修改調整即可.

接下來只需要到管理介面啟用這個子佈景主題即可, 而未來的主佈景主題更新也不會影響這個子佈景主題, 但若是 header.php 有一定幅度的更新時, 自行修改的部分, 也是需要留意與主佈景主題的相容性狀況.

另外也請參考 hubspot 的這篇:

https://blog.hubspot.com/website/wordpress-create-child-theme

 

 

分類
程式技術

取得Youtube影片的縮圖

之前介紹過 Youtube Data API (https://diary.tw/archives/2032), 其中利用 part=snippet 可以取得縮圖的網址, 不過仔細看一下, 目前應該都統一了, 其實只需要 videoId 就可以自行組合出對應的縮圖, 清單如這裡:

https://developers.google.com/youtube/v3/docs/thumbnails

其中預設會出現的有: default, medium, high, standard, maxres 共計5組, 不過再觀察 player用的縮圖, 預設也會有 0, 1, 2, 3 共計 4組, 合起來就會有 9組圖檔.

網址也很單純, 也就是:

https://img.youtube.com/vi/[videoId]/[thumbnail_type].jpg

分類
程式技術

Youtube Data API 中的Category ID

上次寫了 Youtube Data API (https://diary.tw/archives/2032) 來看看若要加上分類要如何進行.

當然需要先取得 category id 囉 (API中的欄位是 videoCateogryId), 從網路上找到的資料如下:

https://gist.github.com/dgp/1b24bf2961521bd75d6c

由於各國家/地區的 category 也可能有不同, 在台灣的清單如下(由上傳分類項目取得): 電影與動畫、汽車與車輛、音樂、寵物與動物、體育、旅遊與活動、遊戲、人物與網誌、喜劇、娛樂、新聞與政治、DIY 教學與生活風格、教育、科學與科技、非營利組織與社運活動.

對應上面的網址如下:

id 中文 英文
1 電影與動畫 Film & Animation
2 汽車與車輛 Cars & Vehicles
10 音樂 Music
15 寵物與動物 Pets & Animals
17 體育 Sport
19 旅遊與活動 Travel & Events
20 遊戲 Gaming
22 人物與網誌 People & Blogs
23 喜劇 Comedy
24 娛樂 Entertainment
25 新聞與政治 News & Politics
26 DIY 教學與生活風格 How-to & Style
27 教育 Education
28 科學與科技 Science & Technology
29 非營利組織與社運活動 Non-profits & Activism

所以若是需要找出教育的排行, 可以利用相同的API, 但多加上videoCategoryId=27:

https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&regionCode=US&videoCategoryId=27&key=[YOUR_API_KEY]

這樣即可取得囉.

[2022/2/17 15:30]

實作出國家/地區與分類項呈現方式, 請參考範例:

https://sample.diary.tw/yttrend/detail.php

 

ISO3166 ALPHA2對照

ISO 3166 是國家/地區的代碼, 其中 ALPHA-2 為兩碼國家代碼, 可以由 wikipedia 這裡整理好的資料查得:

https://zh.wikipedia.org/wiki/ISO_3166-1%E4%BA%8C%E4%BD%8D%E5%AD%97%E6%AF%8D%E4%BB%A3%E7%A0%81

將 table 轉成 csv, 再利用 csv to json (https://csvjson.com/csv2json)轉出即可.

利用了兩碼英文字元的國家/地區代碼, 取得對照的中文名稱, 內容如下:

如何在repl.it上執行flask並啟動瀏覽器預覽

Flask, 一個 python 上的輕量 web server:

https://palletsprojects.com/p/flask/

可以直接在 repl.it 上執行一個 flask 測試環境嗎? 是可以的, 而且很方便. 我們可以先參考官方的資料 flask quick start:

https://flask.palletsprojects.com/en/2.0.x/quickstart/

程式碼為:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

https://repl.it/ 上建立一個 python 專案, 並且輸入上面的程式碼, 按下執行, 就會開始編譯與執行, 不過什麼事也不會發生, console 又會回到  > 的提示符號.

[Javascript]Arrow function

在 Javascript 中, 使用 Arrow function 是個十分精簡的方式來呈現函數, 一般使用在匿名函數.

這篇寫得十分詳細:

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions

由於 Arrow function是精簡型函數表示法, 所以有許多限制, 在一般使用時需要留意, 但在匿名函數使用時, 常常可以達成許多更精簡更便利的呈現方式.

這個語法是在 ES6 (EMACScript 6, EMACScript 2015)起開始, 也請參閱這裡:

https://ithelp.ithome.com.tw/articles/10195669

 

分類
程式技術

css grid方法來排版網頁

利用 css 排版頁面的新方法, 除了 flex 外, 還有 css grid 排版方式, 以常見的 header, sidebar, content, footer 來看, 我們可以這樣進行:

先定義外面的 div.conatiner 為 display: grid;

再來依序在該 container 中新增 4個 div 分別為 header, sidebar, content, footer.

我們希望 siderbar 與 content 比例為 1:4 所以在 div.container 設定 grid-columns-template: 1fr 4fr; (這裡的 fr 是 fraction)

不過因為 header 與 footer 都是全寬, 所以需要指定為 column 的起始位置, 所以加上 grid-column: 1/3; (這裡是指從 line 1 ~ line 3, 因為共兩欄, 所以會有三條縱線)

來看看 example 吧: https://codepen.io/timhuang/pen/xxdayNW

目前的 modern browser 都可以支援, 可以參考 caniuse 資料:

https://caniuse.com/?search=grid-column

繼續閱讀:

https://dev.to/cenacr007_harsh/complete-introduction-to-css-grid-2ffh