分類
python

如何在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

[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

 

分類
Javascript

jQuery選擇特定元素但是不含特定class (反向選擇器)

在實作 jQuery 選擇器時, 有時會用到選擇出的 elements 不含指定的 class, 有兩種方式實現:

  1. not() method ex: $(“div.item”).not(“.red”)
  2. :not() seudo-class ex: $(“div.item:not(.red)”)

其中 2. 為 css 原本 selector 的做法.

來看看範例吧:

其中, item 1 ~5 都有 item class, 但 item 2, 3, 4 有 red class, 兩個 button 分別使用 method 1, method 2 來進行切換沒有 red class 的 item 隱藏與顯示 (toggle method).

程式如下:

$("#m1").click(function(){
  $("div.item").not(".red").toggle();
});

$("#m2").click(function(){
  $("div.item:not(.red)").toggle();  
});

參考資料:

https://stackoverflow.com/questions/2448051/how-can-i-select-all-elements-without-a-given-class-in-jquery

分類
程式技術

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

 

 

 

 

分類
Javascript

台灣寺廟地圖

想做個台灣的寺廟地圖, 我們先來找政府 opendata 資料, 可以看到在這裡有:

https://data.gov.tw/dataset/8203

內容為全國宗教資訊系統資料-寺廟

資料只有一種格式, 就是 XML, 連結在此:

https://data.moi.gov.tw/MoiOD/System/DownloadFile.aspx?DATA=78CA6206-2E8C-4688-AB54-925330B0784B

不過會被重導至一個拿不到資料的連結:

分類
程式技術

因為url過長而導致破版的調整方式

由於在現行 css 預設結構下, url 不會主動斷行, 也就是有時過長的 url 會導致破版或出版的狀況.

如何解決這個問題, 可以利用 css 的手法來調整, 利用以下參數:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

參考資料: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

分類
PHP

[PHP]使用file_get_content來進行post request

在 php 程式中, 使用 curl 來進行 web request 是常用的方式, 不過由於在 https://repl.it/ 這個服務中, php webserver 並未安裝 curl, 所以需要改用 file_get_content()這個函數來進行 web request, 然而若為一般的 get request, 直接將網址傳入即可, 但若需要進行 post request 要如何操作呢?

這時會用到一個 http context options:

https://www.php.net/manual/en/context.http.php

範例程式如下:

<?php

$postdata = http_build_query(
    array(
        'var1' => 'some content',
        'var2' => 'doh'
    )
);

$opts = array('http' =>
    array(
        'method'  => 'POST',
        'header'  => 'Content-Type: application/x-www-form-urlencoded',
        'content' => $postdata
    )
);

$context  = stream_context_create($opts);

$result = file_get_contents('http://example.com/submit.php', false, $context);

?>

也就是利用了 http context options 來組合出要傳遞的參數. 如此一來便能很快速地應用在僅有 file_get_contents() 環境而沒有 curl 的 php webserver 環境來進行 post request.

參考資料:

https://stackoverflow.com/questions/2445276/how-to-post-data-in-php-using-file-get-contents

https://www.php.net/manual/en/context.http.php

 

分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.

相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).

hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:

https://hls-js.netlify.app/demo/

(之前的 clappr demo 在這裡: http://clappr.io/demo/)

若需要公開測試的 hls 來源, 可以參考:

相信對於開發實作 hls video player 應用, 能有很大的幫忙.

 

分類
程式技術

使用Clappr Video Player時滿版需求(CSS)

之前 Flash Player 因為已經 EOL 下架了. 參考: https://diary.tw/archives/11 (相信很多人也已經改了 html5 的解決方案了).

不過若是以純 video player, 個人建議使用這個 clappr player 是適合的替代品( https://github.com/clappr/clappr) , 用純 html5 的 media element 解決方案來達成 media player 功能, 無論是 mp4 或是 hls 的 live streaming.

目前有個使用上的需求, 就是要能滿版 player , 也就是不要出現比例上不正確時的上下出黑(letterbox)或左右出黑(pillarbox)的狀況.

上下出黑的 letterbox 示意圖:

左右出黑的 pillarbox 示意圖:

而要拉伸視訊至滿版播放器要如何進行設定呢? 原本在查找 clappr doc (http://clappr.github.io/)時, 一直沒有找到對應的設定, 後來發現其實在原本的 css 就有個設定可以達成, object-fit 這個屬性: https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit

當這個屬性設定為 object-fit: fill; 時, 就可以達成 stretch to fit 的功能, 也就是不成比例的拉伸(或壓縮)為對應的尺寸, 而不會出現為了維持比例而出現的 letterbox 或 pillarbox.

可以參考這個範例:

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

繼續閱讀:

https://www.jacksonlin.net/20181218-letterbox-on-youtube/

 

分類
wordpress

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行: