close
免費資源網路社群

免費資源網路社群:Pastery 更簡單的 Pastebin!一鍵分享內嵌程式碼或文字內容服務 與其他 1 篇新文章

Link to 免費資源網路社群

Pastery 更簡單的 Pastebin!一鍵分享內嵌程式碼或文字內容服務

Posted: 17 Feb 2016 11:45 PM PST

Pastery 更簡單的 Pastebin!一鍵分享內嵌程式碼或文字內容服務

很多人都聽過 Pastebin,號稱原始碼儲存分享始祖,2002 年開始提供服務,如果你時常在網路上查找資料,可能曾經看過或使用過類似平台。後來有不少文字分享工具應運而生,但大多都大同小異,最近發現一個名為「Pastery」的文字分享服務,網頁整體介面設計相較於原始的 Pastebin 更為乾淨簡單,可以讓你快速在線上共享文字或程式碼。

Pastery 和 Pastebin 功能差異不大,但它在介面設計上相較之下更容易上手,支援大多數程式語言,整合「私密、安全、簡單」三大特色。透過 Pastery,無須註冊登入帳號,只要把你想分享的文字(或者程式碼)複製貼上,就能產生隨機的分享鏈結。

為什麼要把文字或程式碼轉為鏈結呢?因為你可能需要在 Facebook、LINE 與其他人共享長篇文章或原始碼,直接貼上不但有洗版疑慮,排版也令人難以閱讀。

利用 Pastery 隨機產生鏈結特性,其他人難以存取你要共享的內容網址,除此之外,所有過程都經過加密處理,以避免在傳輸途中被第三方擷取。Pastery 允許使用者自訂網址失效時間,從十分鐘至一個月,當然也能選擇永久保存。

網站名稱:Pastery
網站鏈結:https://www.pastery.net/

使用教學

STEP 1

開啟 Pastery 後,將你要分享的純文字內容複製、貼上,這項服務只能分享文字內容,無法貼圖或插入影片。在左下角選擇分享頁面過期時間,例如:10 分鐘、一小時、一天、一週、兩週、一個月或永久有效,當超過你設定的時間後分享頁面就會自動失效。

原則上 Pastery 會自動分析你貼入的程式碼類別(Autodetect),為你加入適當的色彩效果,讓其他人閱讀使用更方便,不過你也可以自己手動選取。

Pastery

STEP 2

點選下方的「Create」後,Pastery 就會將你貼上的文字或程式碼轉為網頁。下圖是我使用 WordPress 設定檔建立的範例,其中有包括中文註解,Pastery 都能很正確顯示出來。

Pastery

STEP 3

比較特別的是 Pastery 能讓其他使用者快速複製(Clone)內容,經過編輯後產生全新的共享鏈結,也有內嵌(Embed)及 Raw 檢視功能,可以在頁面右上角找到。

Pastery

雖然 Pastery 也有登入和註冊功能,用來管理你建立的每個網址,但在寫這篇文章時是使用 Firefox 旗下的 Persona 服務,這項服務將在年底結束,或許之後會轉成其他模式也不一定,若有使用 Pastery 的朋友可以注意一下變化。

喜歡免費資源網路社群的文章嗎?歡迎追蹤我們的 FacebookTwitterGoogle+,或是透過 Email 訂閱更新

Responsive Web Design Tester 響應式網頁開發工具,在瀏覽器測試網站顯示效果

Posted: 17 Feb 2016 05:30 PM PST

Responsive Web Design Tester

當今開發網站不僅要顧及不同瀏覽器,還要同時滿足在電腦、平板電腦及行動裝置各種尺寸螢幕都能正確顯示,最常用的技術是響應式網頁設計(Responsive Web Design, RWD)。技術細節我就不多做介紹,但我想透過本文推薦一款很實用的開發工具,讓你在瀏覽器輕鬆模擬、切換不同裝置類型,協助測試自適應網頁設計是否能正確顯示內容。

Responsive Web Design Tester 是一個瀏覽器擴充功能,支援 Google Chrome、Firefox 及 Opera ,使用非常簡單,安裝後就能快速切換要模擬的行動裝置類型,內建包括 Android 手機、Nexus 平板電腦、BlackBerry、Kindle Fire、iPad 和 iPhone,也能依照開發者需求來自訂加入要測試的裝置解析度。

因為我們不可能找來這麼多的裝置實際測試網頁顯示情形,藉由 Responsive Web Design Tester 便能將瀏覽器模擬成各種行動裝置解析度,實際測試網頁顯示效果。

以往我都是使用 User-Agent Switcher 功能來自訂瀏覽器的 User Agent,不過這方法其實沒那麼好用,又要經常切來切去實在很不方便,使用 Responsive Web Design Tester 徹底解決開發上的問題,讓開發者在修改網頁時能更加得心應手。

網站名稱:Responsive Web Design Tester
網站鏈結:http://responsivewebdesigntester.com/

使用教學

STEP 1

在瀏覽器安裝 Responsive Web Design Tester 後,點選該按鈕會顯示工具的主功能,我們從「Select Device」選擇要測試模擬的裝置名稱類型。

Responsive Web Design Tester

可以看到 Responsive Web Design Tester 預設已提供約 24 種的裝置類型,包括大家熟悉的 HTC One、Nexus 7、BlackBerry、Kindle Fire、iPad、iPad Pro、iPad Mini 及 iPhone 。

注意每一種裝置都會有兩種選項,分別為橫幅式(Landscape)直立式(Portrait)。這也會模擬手機或平板電腦在直立或橫放時呈現出的不一樣的解析度。

Responsive Web Design Tester

STEP 2

試著選擇直立的「iPhone 6(s)」來模擬瀏覽免費資源網路社群的樣式,Responsive Web Design Tester 會在瀏覽器內再開啟一個適當大小的視窗。

比較特別的是在測試中我發現網頁被正確載入為行動版頁面,這也表示 Responsive Web Design Tester 並不是只有調整視窗解析度,而是連 User Agent 也一併修改了!

Responsive Web Design Tester

接下來我再使用「iPad」模擬瀏覽網頁的效果,這次使用橫幅式的裝置,可以看到網頁依舊能在該解析度範圍內正確顯示,這也就是前面提到的使用「響應式網頁設計」優勢。

Responsive Web Design Tester

STEP 3

當然,測試環境可能會依照每個人的情形而有所不同,內建的行動裝置類型並不一定符合每一位開發者。還好 Responsive Web Design Tester 內建選項設定,能讓我們自由調整要模擬測試的裝置類型和解析度,同時也能編輯群組來管理更多的裝置,非常強大!

Responsive Web Design Tester

值得一試的三個理由:

  1. 支援 Google Chrome、Firefox、Opera 三大瀏覽器
  2. 內建 24 種平板電腦、行動裝置,可自由調整設定選項
  3. 除了調整解析度外,也切換 User Agent 達到最正確的模擬效果

喜歡免費資源網路社群的文章嗎?歡迎追蹤我們的 FacebookTwitterGoogle+,或是透過 Email 訂閱更新

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()