# 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開發簡介 圖文版
...
# CSS - Opacity effect child element 在利用 opacity 做背景時常遇到個問題就是子元素也被設置 opacity 這時就可以利用 CSS 的 :before 或 :after
<div class="bg-2"> <h2>Title</h2> <p>Content</p> <img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" alt="google play" /> </div> .bg-2 { position: relative; &:before { content: ""; z-index: -99; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; @include opacity(0.8); } } CodePen
See the Pen qeojf by Ted (@tedshd) on CodePen
...
# Website switch layout 之前看過不少網站有切換 layout 的功能 於是就試著做做看
Demo
主要利用定義在 body 上的 class 去做不同 layout 的切換
Sample code
var node; function node(selector) { return document.querySelector(selector); } // set style var layoutList = 'layoutList', layoutGrid = 'layoutGrid', layoutFull = 'layoutFull', layoutCard = 'layoutCard'; function changeLayout(style) { // maybe make loading? node('body').setAttribute('class', style); } // bind click change style node('#style_1').addEventListener('click', function () { changeLayout(layoutGrid); }); node('#style_2').addEventListener('click', function () { changeLayout(layoutList); }); node('#style_3').
...
# Detect mobile device Use PHP or JavaScript detect mobile device like iPhone, iPad, iPod or Android…
## Android ### PHP <?php $ua = strtolower($_SERVER['HTTP_USER_AGENT']); if(stripos($ua, 'android') !== false) { echo 'Android!!'; exit; } ?> ### JavaScript var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("android") > -1) { document.write('Android!!'); } Refer - Android Detection with JavaScript or PHP
## Apple mobile device Refer - How to detect iPhone, iPod and iPad with PHP Refer - How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website
...
# JavaScript - Easy to get DOM It is old way to use getElementById, getElementsByTagName …
New method is use querySelector and querySelectorAll
If use IE, it only for IE8 up.
Make them as a method
var node; function node(selector) { if (selector.indexOf('.') === -1) { if (document.querySelectorAll(selector).length === 1) { return document.querySelector(selector); } return document.querySelectorAll(selector); } return document.querySelectorAll(selector); } And then use it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>querySelector</title> </head> <body> <div id="box" class="area"> test </div> <div class="area"> test2 </div> <div id="selector" class="area"> <p class="con"> content </p> </div> </body> <script> var node; function node(selector) { if (selector.
...
# Google map api - research log ## Introduction 使用 Google Maps JavaScript v3 static map 嵌入地圖到網頁中以圖片方式呈現 使用限制 基本上不要一日載超過 25000 次都沒事 區域化 - 語系
Library
## Init map <!DOCTYPE html> <!--使用 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5--> <html> <head> <meta charset="utf-8"> <title>Google_map_api_basic</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現，也就是說，您的應用程式應更具備跨瀏覽器相容性。此外，DOCTYPE 也設計成會逐漸適應，但無法理解它的瀏覽器將會忽略它，而採用「快速模式」顯示內容。請注意，有些 CSS 在快速模式中可以運作，但在標準模式中卻無效。具體來說，所有百分比的大小都必須繼承父區塊項目，但這些上階中如有任何一個無法指定大小，就會假設為 0 x 0 像素大小。基於這個理由，我們加入了下列 <style> 宣告--> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 100%; } </style> <!
...
# Facebook api get UID & AccessToken Build App in facebook APP_ID is a facebook App id Must set facebook App’s web url and use code in it’s domain <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fb_oauth</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div id="fb-root"></div> <p> <input id="FBLogin" type="button" value="登入臉書" /> </p> <p> <span id="uid"></span> <br> <span id="accessToken"></span> </p> </body> <script src="http://connect.facebook.net/zh_TW/all.js"></script> <script> FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true, oauth: true }); $('#FBLogin').
...