分類: 程式技術

分類
程式技術

略縮語(ellipsis)的html特殊字元與直排走文

略縮語, 也就是… (這裡用三個點來表示, 但在 html 裡, 有特殊字元可用, 分別是水平用的 … 與垂直的 ⋮ 兩個特殊字元 (參考完整版本: https://dev.w3.org/html5/html-author/charref)

另外直排走文的部分可以使用 writing-mode 這個屬性來指定, 如 vertical-rl 與 vertical-lr, 一般中文若為直式走文, 應為從右至左, 所以是 vertical-rl.

不過有趣的是, 在原本的水平走文時, 使用 … 與 ⋮ 都可以正常顯示方向, 但在垂直走文時, 這兩個略縮語, 反而會造成相反的方向, 這點在使用上要特別注意, 或是反過來說, 只需要使用 … 即可, 走文方向控制會處理好這個略縮語的走向.

參考這個在 jsfiddler 的範例:

https://jsfiddle.net/timhuang/jxhhyxkz/2/

 

另外也請參考略縮語的 css 自動截字的語法: 網頁排版文字排不下的略語語法 https://diary.tw/archives/1292

writing-mode語法參考: http://ithelp.ithome.com.tw/articles/10139081

CentOS中apache與php寫入權限與SELinux設定

由於 CentOS 有 SELinux 的權限設限, 所以相對一些安全層級也都比較高, 最近有個需要用 php 寫入檔案(或是上傳檔案的應用), 原本的 php 在預設狀況下, 就會對 /tmp 有寫入的權限(預設是會在 /tmp/systemd-private-xxxxxx 下的私有 /tmp), 所以上傳時沒有問題, 但使用 move_uploaded_file() 至目的目錄時, 會有寫入的權限問題.

方式如下:

Method A
1. 要寫入需要有對應的權限, 建議方式是將要寫入的目錄給予 apache 執行用戶的擁有者, 如 CentOS 配 apache 時, user 為 apache

chown -R apache /var/www/mysite1/upload

2. 此時只需要給予對應目錄 755 的權限即可(通常預設也是這個).

chmod -R 755 /var/www/mysite1/upload

Method B (不建議)
1. 直接給予該目錄 global write 的權限, 777 即可, 不過會有安全性的考量

chmod -R 777 /var/www/mysite1/upload

完成之後, 若仍無法寫入, 則是因為 SELinux 的設限, 所以即使完成了上面的設定也無法寫入, 此時要再進一步設定 SELinux, 方式如下:

sudo chcon -t httpd_sys_rw_content_t /var/www/mysite1/upload -R

原因為預設的 webservice 能擁有的權限角色為 httpd_sys_content_t , 是無法寫入檔案的, 所以需要再進一步設定 SELinux 才行.

參考資料:
https://blog.lysender.com/2015/07/centos-7-selinux-php-apache-cannot-writeaccess-file-no-matter-what/

另外寫得很仔細的 SELinux 資料可以參考:
https://www.digitalocean.com/community/tutorials/an-introduction-to-selinux-on-centos-7-part-1-basic-concepts
https://www.digitalocean.com/community/tutorials/an-introduction-to-selinux-on-centos-7-part-2-files-and-processes
https://www.digitalocean.com/community/tutorials/an-introduction-to-selinux-on-centos-7-part-3-users

分類
程式技術

Yahoo天氣RSS API需要驗證

之前的一個使用天氣 API 的專案, 因為 Yahoo RSS API 需要驗證, 變成非公開性的 API, 例如:

http://weather.yahooapis.com/forecastrss?u=c&w=2306179

目前會回覆:
Please provide valid credentials. OAuth oauth_problem=”OST_OAUTH_PARAMETER_ABSENT_ERROR”, realm=”yahooapis.com”

而無法順利取得內容, 經查找相關資料, 應該是 3/15 起, yahoo 這組 API 需要做驗證才能使用, 於是找了資料, 可以改用 YQL 的方式來查詢, 相容的查詢指令如下:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20%20u=%22c%22%20and%20woeid%20=2306179

其中的 YQL 為:

select * from weather.forecast where u=”c” and woeid=2306179

即可獲得相容的天氣 API 回傳結果.

參考之前文章:
https://diary.tw/archives/1215

分類
程式技術

如何取消Chrome瀏覽器會出現藍色邊框的狀況

同事問到, 在 Chrome 瀏覽器中, 一些特定的連結(應該是某些已自訂的 class 狀況下), 在點擊時, 會有藍色邊框(就是 focus時), 要如何取消這個功能, 這個部分在 Firefox 與 IE 都不會發生.

模擬的狀況如下:
上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: http://sample.diary.tw/39/index.htm

如何取消這個藍框, 可以使用以下語法:

.b2:focus{
  outline: 0;
}

也就是在 focus 時, 把 outline 設為 0即可. 上面的範例連結, 其中 pink 為 b1 class, lightblue 為 b2 class, 所以 pink 會有藍框, 而 lightblue 在 focus 時, 不會出現藍框.

參考資料: http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

分類
程式技術

Google Static Maps地圖實作

Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: https://diary.tw/archives/1503 使用的 Google Maps Javascript API 需要引入 javascript library 進行程式操作, 在 Google Static Maps 則僅需要用到 img src 的方式取得圖片即可.

雖然只有圖片, 但是功能還是很強大, 而且應用在低階或網路環境不好的地方特別有用, 尤其是和地圖不互動的狀況下, 只是呈現結果的應用情境, 使用 Google Static Maps 是非常方便好用的.

Google Static Maps 資料可以參考官方網站:
https://developers.google.com/maps/documentation/static-maps/intro

記得一樣要先申請 Google API Key 來使用, 這裡用的就是 Google Static Maps API:

取得 API Key 之後, 就可以來應用了. 基本型如下:

https://maps.googleapis.com/maps/api/staticmap?parameters

其中 parameters 就是要繪製地圖的參數了, 以在地圖上某一地點畫一個座標為例,

https://maps.googleapis.com/maps/api/staticmap?center=25.052019,121.513987&zoom=15&size=320×240&language=zh-TW&maptype=roadmap&markers=color:red|label:A|25.052019,121.513987&key=[your api key]

其中 center 為地圖中心點, zoom 為放大層級, 以台北市為例, 15級或16級都OK, 看應用的狀況, size 為產出的圖片尺寸, 而 language 為地圖的語系, maptype 為地圖的格式, roadmap 為街道地圖(另有 satellite, terrain, hybrid), markers 為要標註的位置, 其中 color 為顏色, 用 | (pipe符號)區隔 marker 的參數, label 為單英數字標籤, 最後則是位置, 再來是最重要的 key 就是要輸入你的 api key, 效果如下:

這個地圖不能互動, 不過可以呈現所需要的資訊, 十分方便, 另外若是希望自訂 marker 的 icon, 可以將 markers 參數改為 icon:[url]|[position]的方式即可, 如下:

markers=icon:http://maps.google.com/mapfiles/kml/shapes/schools_maps.png|25.052019,121.513987

以上圖放到地圖中的效果如下:

另外, 若是想要畫出區域圖, 也可以用這個 Google Static Maps, 以之前文章 (https://diary.tw/archives/1503)為例, 座標點如下:
{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
{lat: 25.033116700000004, lng:121.5526271},
{lat: 25.036052399999996, lng:121.55267000000002},
{lat: 25.0374716, lng:121.55146840000002},
{lat: 25.038016, lng:121.5513396},
{lat: 25.0415348, lng:121.5474987},
{lat: 25.0416515, lng:121.5437222}

使用的參數就是 path, 語法如下,

path=pathStyles|pathLocation1|pathLocation2|… etc.

其中 pathStyles 有 wight, color, fillcolor, geodesic 4種參數, 其中 color 與 fillcolor 都是用 0xRRGGBBAA 其中 AA 由 00(不透明)到 FF(全透明) 這樣設定即可.

可以參考: https://developers.google.com/maps/documentation/static-maps/intro#Paths

產生的結果如下:

程式碼如下:
https://maps.googleapis.com/maps/api/staticmap?center=25.037789,121.547375&zoom=15&size=360×360&language=zh-TW&maptype=roadmap&path=color:0xFF0000|fillcolor:0xFF000033|25.0416515,121.5437222|25.0333111,121.543529|25.033116700000004,121.5526271|25.036052399999996,121.55267000000002|25.0374716,121.55146840000002|25.038016,121.5513396|25.0415348,121.5474987|25.0416515,121.5437222&key=[your api key]

十分好用, 但要注意不要超過 url 網址的長度上限, 參考舊文: https://diary.tw/archives/455, 在文件內說明也有, 不要超過 2048bytes: https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

另外, 這組 API 每日免費上限為 25,000, 若要更多可以付費方式使用.

[2016/4/20 10:15]
補充一下自訂 marker 的部分, 必須是用 http 而非 https 的方式, 否則將無法正常輸出該自訂 marker, 參考資料:
http://stackoverflow.com/questions/12324996/custom-marker-icon-not-showing-google-static-maps-v2

MS SQL Server將可在Linux環境下執行了

這篇文章: http://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/ 提到了, 即將在 linux 上執行 SQL Server 了.

這個微軟的當家資料庫服務器, 終於跨出了微軟的作業系統了, 有用過的應該都說好, 但到了 linux 下又是另一番風貌, 姑且不論效能如何, 微軟能走出這一步, 真的很值得肯定. 當然相信也能大幅拓展這個在微軟作業系統以外的其他平台市場, 讓 SQL Server 的優點發揮出來.

還蠻期待的.

繼續閱讀:
http://www.bnext.com.tw/article/view/id/38871

分類
程式技術

原生CSS開始支援變數了

同事傳來連結: http://muki.tw/tech/native-css-variables/ 介紹了原生的 CSS已開始支援變數了, 雖然目前支援度還不太廣, Firefox, Chrome 是都還有支援, 不過 IE 目前尚未支援, 對於前端介面設計的伙伴們, 相信在撰寫 CSS 有更多選項.

以往使用 CSS 變數, 可以用前置處理器的方式, 例如

Sass/SCSS: http://sass-lang.com/guide
Less: http://lesscss.org/

現在原生的 CSS 有支援變數了, 看起來就更加方便了, W3C相關文件可以參考這篇: https://www.w3.org/TR/css-variables/ 另外從文件上來看, 其實更久之前也就有一些 W3C文件在開始設計這樣的功能, 如這篇: https://www.w3.org/TR/2012/WD-css-variables-20120410/

對於前端的變化多端與多樣化的介面應用, 有更多的 CSS 原生支援, 對於前端工程師來說, 真的是更方便多了(當然, 也會需要學習更多了)

繼續閱讀:
http://muki.tw/tech/native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

支援度查詢:
http://caniuse.com/#feat=css-variables

PHP好用線上測試功能

這個線上的沙箱測試, 可以讓你在不同的 PHP 版本間進行 PHP程式的測試, 有時候需要一小段程式來測試與驗證時, 可以利用這樣的工具來達成, 網址:

http://sandbox.onlinephpfunctions.com/

不僅可以測試 php 程式碼, 還可以進行儲存與分享, 是在 php 程式開發時, 可以快速撰寫小程式的好用工具, 很方便快速, 請多多利用.

例如以 php 網站上的一個 callback function範例:

// Our closure
$double = function($a) {
    return $a * 2;
};

// This is our range of numbers
$numbers = range(1, 5);

// Use the closure as a callback here to
// double the size of each element in our
// range
$new_numbers = array_map($double, $numbers);

print implode(' ', $new_numbers);

放在該網站執行並存檔分享連結為:

http://sandbox.onlinephpfunctions.com/code/c9a175417fddfc1ed0aef4a48feb5de384c49e3d

真的又快又方便!

querySelector – javascript的查詢選擇器

在有 jQuery 環境下, 操作選擇器很直覺, 不過沒有 jQuery 時, 如何進行相關的作業呢? 以下幾組為可能會用到的指令:

  1. document.getElementById 指定 id 來取得該物件 (唯一)
  2. document.getElementsByTagName 指定 html tag 來取得該物件陣列 (通常為多個)
  3. document.getElementsByClassName 指定 class name (可多組 class name 一起) 來取得該物件陣列 (通常為多個)
  4. document.querySelector 使用 css selector 來取得該物件 (注意, 僅傳回符合條件的第一筆)
  5. document.querySelectorAll 使用 css selector 來取得該物件陣列 (符合條件的多筆)

當物件被選擇出來後, 就可以進行操作了, 操作的方式可以再參考這裡:

http://www.w3schools.com/jsref/dom_obj_all.asp

在沒有 jQuery 的狀況下, 也能順利選擇物件, 並進行操作了.

分類
程式技術

找不到的FlashMediaPlayback.swf

今天在查一個小問題, 就是使用 flash player 播放 video 的一個網頁, 發現完全沒有畫面, 結果是因為這個連結沒有檔案 (status=404) http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf

雖然是現在盡量不要使用 flash player 來播放 video, 不過這是因為一個 live streaming 的應用, 所以會播放一個 rtmp 的 video streaming, 也就使用了前面的官方 Flash Media Playback 播放器.

查了一會, 有篇官方的回覆在這裡: https://forums.adobe.com/thread/2013396, 說是已經停止下載了, 需要用戶自行 hosting 這個檔案, source 在這裡: http://sourceforge.net/projects/smp.adobe/files/ strobe media playback.

大家可以自行下載, 並 hosting 在自家網站上, 不要再連結到 adobe 了, 不然沒辦法使用了.

話說回來, 應該是要趕快改 html5 才對, 解決這個還在使用 flash player playback 的問題.