# Mac - Build Front End Developer Environment 趁入手新 Mac 順便重溫一下如何建立給前端攻城獅爽爽用的開發環境 大部分都會涉及 terminal 操作 由於 Mac 是 unix, 基本上 terminal 操作指令都跟 Linux 一樣 常見的指令 Mac 上取代預設 terminal 的好物 - iTerm 2
# 1. 套件與環境 ## Xcode 必裝 雖然前端攻城獅幾乎沒什麼人有在同時寫 ios 或 Mac 的 app, 但是還是要裝 Xcode, 不然會有不少東西裝不了(在裝 oh-my-zsh 和 Homebrew 時就被警告了) 裝完後至少要先開過一次, 不然會當做沒裝過
## Homebrew Mac 上好用的套件管理工具, 相當於 linux 的 apt-get 用它安裝了 wget 與 git
brew install brew uninstall brew list brew search brew update brew info // example brew install wget brew install git Mac入门笔记（3）：一键装机
...
# Samsung Samrt TV - volume OSD 假如要做影片類的 App, 音量控制算是重要的一環 建議維持 Samsung Samrt TV 預設的 OSD(On Screen Display), 假如自己刻 UI, 會有許多要顧及的地方, 會較費時
## How to add code to show volume OSD HTML <!-- for volume SOD --> <object id="pluginObjectNNavi" border="0" classid="clsid:SAMSUNG-INFOLINK-NNAVI" style="opacity:0.0;background-color:#000000;width:0px;height:0px;"></object> <object id="pluginObjectTVMW" border="0" classid="clsid:SAMSUNG-INFOLINK-TVMW" style="opacity:0.0;background-color:#000000;width:0px;height:0px;"></object> <!-- add plugin js --> <script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Plugin.js'></script> JavaScript // add pluginAPI var pluginAPI = new Common.API.Plugin(); // set volume OSD(On Screen Display) window.
...
# miiiTV for Samsung Smart TV ## Time 4~5 week(20 days) TV 註冊(app info(partner, brand, model, language, mac) to server get did) brand TV info data add url post data sha1 encodeJavascript: Equivalent of PHP’s hash_hmac() with RAW BINARY output?CryptoJS 3.1 jsonp getChannelList/pid jsonp post {source: tv} User 和 TV 綁定(與取消 User) TV 取 Channel 列表 資料儲存(以檔案的方式儲存) 4000 videos data read 3s did + secret code appInfo.data appInfo = { did: <did>, secretCode: <secret code> } 儲存 user data uid.
...
# Samsung Samrt TV - save / load data 如果要儲存資料(ex: 使用者資訊…)建議使用 Samsung 的 file API 使用 HTML5 的 localStorage 在電視關機後會被清掉
File API Refer - Can I access a local file from JavaScript code? Refer - openCommonFile Refer - readAll
## example var fileSystemObj = new FileSystem(); function save() { if (fileSystemObj.isValidCommonPath(curWidget.id) == 0){ fileSystemObj.createCommonDir(curWidget.id); } var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w'); fileObj.writeAll('test save'); fileSystemObj.closeCommonFile(fileObj); } Main.save = save; function read() { var file = fileSystemObj.
...
# CSS - 文字圍繞陰影 ## text-shadow 利用 text-shadow 可達到文字陰影的效果, 但如果要讓陰影圍繞著文字就需要一點技巧了
CSS
h1 { text-shadow: #ff0000 1px 2px 3px; /*-- 顏色 x位移 y位移 模糊度 --*/ } 要達到圍繞的效果, 必須有上、下、左、右、左上、左下、右上、右下, 最少 8 個方向的位移
左上 上 右上 左 文字 右 左下 下 右下 h1 { text-shadow: #ff8800 5px 0 1px, #ff8800 -5px 0 1px, #ff8800 0 5px 1px, #ff8800 0 -5px 1px, #ff8800 5px 5px 1px, #ff8800 -5px -5px 1px, #ff8800 5px -5px 1px, #ff8800 -5px 5px 1px; } ### codepen See the Pen text shadow by Ted (@tedshd) on CodePen.
...
# JavaScript - jsonp ## If only get data(read) Use callback
// javascript // build from javascript var scriptEl = document.createElement("script"); scriptEl.src = "http://tysh310246.blogspot.com/feeds/posts/default?alt=json&callback=myFunction"; document.getElementsByTagName("head")[0].appendChild(scriptEl); or
<!-- html --> <!-- embed from HTML --> <script src="http://tysh310246.blogspot.com/feeds/posts/default?alt=json&callback=myFunction"></script> myFunction is callback function handle json data
// javascript function myFunction(data) { // data is json console.log(data); } ### example <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <!-- <script src="http://tedshd.lionfree.net/demo/php/api_test.php?callback=test"></script> --> <script> var scriptEl = document.
...
# JavaScript - YouTube API note player demo YouTube JavaScript Player API Reference YouTube 嵌入式播放器参数 YouTube Embedded Players and Player Parameters YouTube Player API Reference for iframe Embeds
Use YouTube video must init a youtube player There have 2 player we can use
flash player iframe player I suggest use iframe player because it can support flash and HTML5 If use Apple mobile devices, they can’t support flash Use iframe player can solve this problem We can use javascript control player
...
# Konami 密技 JavaScript 簡單實作 最近有一個網站很紅 vogue 上上下下左右左右BA 接下來就狂按 A
KONAMI 密技阿
身為一個宅宅前端攻城獅一定要學起來這招(以後就藏一些東西在程式中)
Demo
var keyCount = 0; window.onkeydown = konami; function konami(e) { if (e.keyCode === 38 && keyCount === 0) { keyCount++; console.log(keyCount); } else if (e.keyCode === 38 && keyCount === 1) { keyCount++; console.log(keyCount); } else if (e.keyCode === 40 && keyCount === 2) { keyCount++; console.log(keyCount); } else if (e.keyCode === 40 && keyCount === 3) { keyCount++; console.
...
# JavaScript - Some Articles Collection 给JavaScript初学者的24条最佳实践
全栈式JavaScript
前端工程師必看 JavaScript The Right Way
Web 技術中的 Session 是什麼？
A first-person engine in 265 lines
JavaScript 語言核心（11）this 是什麼？
How can I get the progress of a downloading
...
# Develop Samsung Smart TV Apps 由於最近應公司需求而開始要開發 Samsung 的 Smart TV 上的 App 身為一個前端攻城獅要去開發電視的 App? 沒想到 Smart TV 的 App 竟然是用前端技術寫的(HTML, JavaScript, CSS) Smart TV 是 base on Linux 所以效能似乎 OK? 於是就來研究一下 SAMSUNG SMART TV APPS Developer Forum 載 SDK 與 TV 模擬器(除非 money 多多直接買一台 Smart TV, 不過有開發過 Android 的都知道 模擬器都是假的 ) SDK Download(Software development kit) 載 virtualBox Oracle VM VirtualBox
## 建立開發環境 裝 virtualBox 開 SDK(用超吃資源的 eclipse Orz) 開 virtualBox, 掛 Smart TV Emulator 檔案 -> 匯入應用裝置(選擇下載的 Smart TV Emulator) 設定值 -> 共用資料夾 -> 編輯(資料夾名稱 / Apps, 資料夾路徑 / /Users/tedshd/Documents/workspace (SDK workspace 路徑)) ## 開始開發 懶得看下去有 YouTube 影片 Samsung smart tv development tutorial - 01 Samsung smart tv development tutorial - 02 Samsung smart tv development tutorial - 03 GTUG 的 Samsung Smart TV開發簡介 圖文版
...