tedshd's DevNote

Develop & Design Note by Ted

Work - 使用臨時的電腦做開發

前言

當有一些突發狀況是自己的開發機不在身邊時

要如何使用一台臨時的電腦開發

尤其是有跨平台的開發時

這邊分享一下使用的情境

情況

因為某一天忘了把開發機帶去公司(帶回家用但是忘了帶去公司...

這樣的情況很尷尬

就跟公司的 IT 臨時申請一台筆電...

需要注意的點

這很重要所以得寫在前面

因為不管是在外面外派駐點臨時找一台電腦

抑或像我ㄧ樣跟公司臨時借一台電腦來使用需要注意的一點就是要的使用資訊或開發的程式是不可以遺留在上面的

這是基本且重要的資訊安全問題

  1. 在瀏覽器的使用上儘量使用無痕模式操作(登入任何服務都是如此

  2. 儘量不要在該電腦上面安裝任何軟體(除非必要, 之後也請記得移除

  3. 如果有使用到 key, 之後得記得刪除(這裡額外說明一下請養成在 key 上面再額外加一組 passphrase, 這樣就算因為意外key 流出去了, 也必須要知道 passphrase 密碼才能使用

基本上大方向就是在歸還或是不在使用時得先清除使用的痕跡(怎麼聽起來像是在進行間諜活動 XD

Showcase

因為我是習慣使用 Mac

所以當然是先請 IT 申請 Mac

沒辦法的話用 Windows 也是可以, 只是會比較麻煩(太久沒用 Windows 開發了

使用到 web 的服務

使用 email, 使用公司的系統(gitlab, 內部系統 等等

大部分都會開瀏覽器來使用且都要等入自己的帳號來使用

這時候瀏覽器的無痕模式就是你的好朋友

IM 溝通

在使用 IM 上相信大家都裝了一堆 client 軟體而且都會開著以便隨時協作溝通

這在這情況我就直接放棄了這做法

因為工作需求所以手機其實也都有裝, 要用手機上的 IM 就可以了

不必特地在臨時的電腦裝

當然如果該 IM 有 web 版本也就直接在 web 開無痕來使用

開發

這也是相對較難處理的

這得端看每間公司的開發模式與環境和每個人的開發習慣而定

這邊會分享自己的經驗和一些其他的開發模式要如何對應處理

SSH key

首先先講一下 ssh key 這個最重要的關鍵

基本上你沒有 key 就不用推扣也不用連 ssh 了

那就可以掰掰了(除非再重新 gen 一組來用, 然後所有要用到的系統就得再放一次 public key, 等這些事情用完我也覺得可以掰掰了

因為大部分不管是本地開發還是連遠端開發機開發

一定都得有 key

所以 key 得有自己保管在雲端的習慣

我是都有放在 dropbox 上面

所以就算臨時換一台電腦

我都可以把 key 拿下來做開發

還得再補充一下要保持 key 都有設定 passphrase 的習慣

這要就算 key 意外流出去至少它還有一層密碼保護

拉 key 下來後通常權限會是 644

非常的不安全且使用時會警告

改成 400 就好了

Terminal

在 terminal 方面

因為 Mac 自帶 terminal, 所以就不會額外裝 iterm2

Windows 就看大家的習慣了, 我以前是用 putty 和 git bash(現在流行用啥我也不清楚了

Linux 應該就無痛使用

純遠端開發

這最簡單, key 設定好, 連上開發環境

收工

本地端開發

key 設定好

然後就開始把開發用的程式和環境等等設定好

之後還得刪掉...

相對麻煩

這邊會建議在 IDE 能使用系統自帶的就用系統自帶的免得之後還得特地移除 IDE

如果要裝 IDE 的話也就是也會看有沒有把 IDE 設定放到雲端的習慣

這樣就可以拉下來用


因為剛好我這幾天要處理的事情可以用遠端開發解決

所以就上遠端寫扣

不然自己是常習慣使用 VScode 或 Sublime

這樣就得把設定重新搞一次也是有點麻煩

但因為是使用臨時的電腦, 所以就純用 Vim 寫扣

但是也因為連遠端在上面寫扣而非 mount 回來

所以用的 Vim 也是遠端開發環境都設定好的設定

結語

基本上大致上就是這樣

在使用非開發機在開發時就是得如此的小心翼翼

很多習慣會被限制住

SEO - 增強 Youtube video SEO

增強 Youtube video SEO

Infto

最近因為公司的需求開始研究這潭深水

剛好看到一篇文章介紹的還不錯

雖然已經是 2016 的文章

但它寫的一些觀點我覺得現在還是適用

雖然這文章有在業配服務 XD

稍微整理記錄一下

英文的片段都是原文

中文會是我的總結

就當作一個紀錄吧

Video Information

Video Content
  • 以解決需求為優先
  • 產品介紹
  • 教程
  • 知識分享
Video Length

While aggregated clicks are still counted, the amount of engagement on your videos play a huge role like the likes, dislikes, comments, watch time, shares, views on other sites, engagement on other sites. This required YouTubers to create better videos with more engaging content in order to rank higher.

  • 點擊
  • like
  • dislike
  • 評論
  • 觀看時間
  • 分享到其他地方(影片的擴散)

Make your videos at least at least 2 minutes in length; it’ll be really good if it’s 10 but don’t compromise the quality for Watch Time. If your viewers are engaged in your video for a longer duration, your videos will rank better. But if you’re just stretching your videos for this, you won’t be able to keep a user on your video and they won’t rank well.

  • 最少兩分鐘
  • 十分鐘非常好
Video Name
  1. Select finished video file that you will upload. Rename the file Video Title.
  2. And then right click on the file and select “Get Info/Properties”.
  3. Then go to “Details”.
  4. Add some tags related to the content.
  5. Under “Title” or “Name & Extension”, name the file which includes your top 2 keywords.
  6. Write a short description of your video in “Comments”

先編輯好影片檔案 meta 在上傳

Description
  • Make it at least 200 words.
  • Use synonyms for your keywords.
  • Don’t stuff keywords or you won’t rank.
  • Write a different description for each video. Or it’ll go down as duplicated content.
  • Write out the video transcript using some software.
Make Playlists
Customise Thumbnails
Take advantage of Social Media

Search engine optimisation (SEO) has 3 facets:

  • On-page SEO– As in how your website is structured, image tags, keyword density, tags, etc.
  • Off-page SEO– Other domains that link back to your website.
  • Relevance– As in how many people found it helpful. This is measured by Social media engagement, like how many people liked it, shared it, etc. Make this process easier by syncing your YouTube account with your social media accounts, and post your videos on your profile and relevant pages.
Make Your Channel Page Pretty

YouTube sees a channel without a profile picture, header, description and links as spam. It is an additional ranking hack, adds a pop to your channel, and can show what your videos are about.

  • Add links to all your social media accounts.
  • Add a nice and relevant channel image and banner.
  • Write a long description in the about section (include synonym keywords).
  • Subscribe to similar channels.
Share Links

For beginners trying to understand SEO, stick with low competition/long tail keywords.

The hacks laid out above will rank any low competitive or long tail keyword. If you want to rank your video for added competitive terms you have to embed the HTML on other sites and build links to your video.

But make a few high-quality links steadily instead of spamming all at once. You can use link sources such as:

  • Private blog networks (PBN)
  • Other blogging sites like WordPress, Blogger, Tumblr
  • Social bookmarks
  • Guest posts
  • Your own site
  • Comment links on relevant places
  • Pinterest pins

利用其他 social mdeia 或管道增強曝光

TAGS

Tags aren’t the most important, but they help a lot. They help YouTube and Google learn what your video is about. Targeted tags not only help you rank for your target keyword but get you to you show up more often as a related video in the sidebar area of YouTube. When someone’s watching a video with a similar tag as your video then you’re added to the sidebar.

下 tag 會幫助你顯示在其他相似 tag 的 video 旁邊的側邊欄

Types of Tags:

Tags are another important way to get ranking in youtube search, here are few tips to put tags in your video-

  • List Specific Tags first: These are one-word keywords that represent the topic at hand. If YouTube gives you pre-filled suggestions that are essentially what you want, then use those, but also use the same words in a generic way.

  • List Generic Tags: These are words like how-to, tutorial, and vlog. YouTube offers suggestions, so use them.

  • Also, Long-Tail Tags: These are multiple-word tags. You can just copy the title and use it as a tag, leaving out conjunctions and prepositions (such as “of,” “in,” “and,” etc.), because YouTube ignores these words.

  • Don’t miss the Misspellings: Derral misspells words on purpose because people search for these words. For eg. Some tags like these: “Ellen Show” and also “elen show” , “ellen degeneres” and “ellen degenrous”

先是重要的特殊專門的 tag

再來是一般的 tag

再來是長尾的 tag

最後加上一些容易拼錯的 tag

More Dos and Dont’s:
  • You can only use 500 characters in your tags.

  • Don’t use misleading tags as this process will end up working against you in the search algorithm.

  • YouTube uses the meta information to do a quick assessment of your video, then it ignores your meta data. However, when the meta data is updated, it can help you in search after a few weeks when YouTube inventories the data again.

  • If you use repetitive keywords across all your videos, they will have a higher likelihood of referring to each other in the suggested videos column on the right of the page. Setting default tags from settings can make that process easier.

最後也附上原文

有興趣也可以去看一下

Refer - How To Rank Your YouTube Video On The First Page Of Google Search Results

Refer - How To Use YouTube Tags To Rank Higher In Search Results

補充

Call-To-Action

在影片中添加外部連結

已引導使用者去社群或者是產品連結等等

或者是引導到下一步或相關影片

8 Types of CTAs you Should Be Using in Your YouTube Channel

Tools

Tube Buddy or vidIQ

玩了一下

Tube Buddy 個人蠻喜歡的

它有個不錯的功能是會給建議的 tags

但是它應該是從 title 找出相關的 tag

測了一下還蠻實用的

行銷面

15 Inspiring YouTube Video Ideas to Build Your Brand

這篇文章說明了可以用哪些方式來建立你的品牌

可以針對要行銷的方式來決定影片用哪種方式拍攝

發現一個 Youtube 影片的搜尋結果很有趣

Google 會自動把內容擷取出來

有點類似 How to 的 video 結果

Firebase - Firebase functions 使用紀錄

Firebase - Firebase functions 使用紀錄

最近想把一些自己在用的小東西丟到 severless 的服務

因為之前發生過一次 server 掛掉過一次的情況

當時是 GCP CE 不知為何 VM 中的網卡設定出問題

整個網卡消失

然後外部根本連不進去

最後請教大大後

只好開一個新的 instance 然後把原本的那個儲存空間掛到新開的 instance

因為那台平常在試驗的 server

裡面亂七八糟而且大多的 code 都不會做 git 控管

所以就想說把一些常用的功能用 serverless 拆出來好了

就想說來研究一下火了一陣子然後設定沒設定好就會噴一堆預算和安全性問題的 Firebase 所推出的 functions

其實 GCP 自己本身也有 cloud functions

但我這是玩票性質的

所以就先用 firebase functions 來試試啦

先說一下目前 firebase functions 只支援 Nodejs

但是 Google cloud 的 cloud functions 支援 Nodejs python golnag

  1. 首先先裝 firebase-tools CLI
npm install -g firebase-tools
  1. 執行 firebase login
firebase login
  1. 到要建立 functions 的資料夾

這時候要注意如果你要做版本控管

就是直接到該 repository 的目錄下即可

下一步會在這目錄建立需要的程式

  1. 執行 firebase init functions
firebase init functions

過程中會請你選擇或新開專案

這邊的專案是指 firebase 上面的專案

可以用 JavaScript 寫或 TypeScript 寫 code

整個 functions 的結構

myproject
 +- .firebaserc    # Hidden file that helps you quickly switch between
 |                 # projects with `firebase use`
 |
 +- firebase.json  # Describes properties for your project
 |
 +- functions/     # Directory containing all your functions code
      |
      +- .eslintrc.json  # Optional file containing rules for JavaScript linting.
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- index.js      # main source file for your Cloud Functions code
      |
      +- node_modules/ # directory where your dependencies (declared in
                       # package.json) are installed

要注意的事和開始寫扣啦

index.js 就是 functions 會執行的程式

你可以依照自己的需求安裝需要的 node 套件

但需要注意的是該套件安裝完你的 package.jsondependencies 必須有紀錄該套件的版號

package.json 中的

"engines": {
  "node": "8"
}

表示使用的 node 版本

目前預設是 8

10 有支援但目前是 beta

可以看目前文件來決定用哪一版的 nodejs

exports.ok = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});

ok 就會是實際上 url path

上線後的 url 會是

http://<region>-<firebase project name>.cloudfunctions.net/<exports name>

ex:
http://us-central1-my-project.cloudfunctions.net/ok

相關 API 可以參考

很多 API 都和 express 幾乎一樣

如果要帶參數的話可以用 params

部署區域

可以決定該功能在那個區域部署

同一個 index 檔案可以部署不同地區

預設是 us-central1 (Iowa) 艾荷華

可以查看支援的 region 列表

只要添加在 code 之中即可

exports.ok = functions.region('asia-northeast1').https.onRequest((request, response) => {
...

目前沒法在程式中直接設定 multi region 得一個一個上

不然官方是建議建立不同 region 的 entry

modify-region

再把 function 邏輯抽象出來就可以了

本地測試

可以參考Run functions locally

會在本地開啟 local server

也會有對應的 url path 可以讓你直接點

如果要測試 log

在 node 中寫

console.log()
console.info()
console.error()
console.warn()

就可以了

呼叫第三方或外部 api 時出現 EAI_AGAIN

查了一下

這是 DNS 解析的問題

在 Free 方案只允許呼叫 Google service 自己的 api

要切到付費方案才可以

用 Blaze plan 就可以了

Refer - getaddrinfo EAI_AGAIN api.sendgrid.com:443

Header - Accept-Language & Content-Language

Header - Accept-Language & Content-Language

Intro

多國語系的判定主要靠這兩個來處理

Accept-Language

Content-Language

這裡的語言代碼一率遵循 ISO 639-1 codes

Accept-Language

系統或是 client 需要帶在 request header 中

表示 client 所使用的語言

有時會帶有 location 資訊(location 依照 ISO 3166-2 標準且都是大寫

多語言時用 , 分隔

會在後面用 q 表示權重

accept-language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7

這個 header 常被用來判斷 client 的主要語言來判斷處理要回給 client 用哪個語言

Content-Language

server 帶在 response header 中

用以表示該 response 是提供哪些語言的內容

一樣可以是單純的 lang 或是 <lang>-<location> 也可以用 , 分隔多語言

也可以在 HTML 中宣告

<html lang="de">

W3C I18n Checker

W3C 提供一個可以確認的網站

W3C I18n Checker

向 Google 提供網頁的本地化版本

  1. HTML meta tag
  2. HTTP header
  3. Sitemap

使用以上三種方法來讓 Google 爬

Keypoint

  1. 可以依照 Accept-Language 裡面的多語系權重去判斷要給予使用者適合的語系
  2. 不管是 W3C 還是 Google 其實都建議不能單純的依靠上述來判斷語系, 還是需要有提供能讓使用者手動切換語言的選項
  3. Chrome 的同步設定會連 browser 慣用語言的設定一起同步...

PHP - check HTTP protocol

PHP - check HTTP protocol

Use

$protocol    = (isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) || isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') ? 'https' : 'http';