Skip to main content

1-5

JS 30: Day 3 - Playing with CSS Variables and JS​

  • <input type="color" value="#ffc600"> input 有許多 type 可以選，根據瀏覽器有不同樣式
  • :root 等同於 <html> 元素 = document.documentElement
  • CSS3 新增變數，宣告：--primary: #fff，引用：color: var(--primary) ，但目前瀏覽器支持度僅 chrome、firefox
  • 複習：在標籤元素上設 data-test=“123” ，可在 JS 內透過 object.dataset.test 得到該值，也能用此方式動態新修標籤元素自定義的值和 key

額外補充，偽類、偽元素：https://segmentfault.com/a/1190000000657084

  • 寫 IAM role 時的 resource：S3Bucket、S3Bucket/* 是代表對 bucket 本身或是 bucket 底下的資料做存取的權限，同理可用在其他服務
  • Code Build 時起的 contianer 內會自動帶入一些環境變數：https://docs.aws.amazon.com/zh_tw/codebuild/latest/userguide/build-env-ref-env-vars.html
  • 給 Code Build 的 IAM role 會做為在 container 中執行 AWS 服務的 credential (等於 aws profile 資料，就不用另外給了
  • AWS Systems Manager 的 Parameter Store 是存放敏感資料變數的區域，設定好後可在 template.yaml 的 Parameters 取得，default 要給對應的名字才抓的到值：
GithubOAuthToken:
    Type: AWS::SSM::Parameter::Value<String>
    Default: 'Sample-CodePipeline-GithubOAuthToken'
  • 承上，在 Code Build 時，buildspec.yaml 內寫這樣取得：
env:
  parameter-store:
    GithubSshKey: Sample-CodeBuild-GithubSshKey
  • CodePipeline 創建也需要一個 bucket 存放自動化流程相關資料，名叫 ArtifactBucket
  • CodePipeline 可與其他三方儲存庫做連接(需對應的 SSH 與 token)，與 GitHub 做連接可在設定的 branch 更新時啟用自動部署

JS 30: Day 4 - Array Cardio 1​

  • sort() 目前是穩定排序，即數值若相同會照原本順序不會變動，以前瀏覽器會不穩定排序
  • 其餘皆複習加深印象(nodeList 轉陣列、reduce 參數1可帶物件、foreach不會回傳陣列....等等)

JS 30: Day 5 - Flex Panels​

  • transitionend 會根據有變化的屬性做多次觸發，如搭配 classList.toggle() 的話要注意判斷指定的屬性變化，不觸發多次 toggle 會抵銷掉

  • flex:1 給定伸縮值會讓元素自動擴展，而動態伸縮值變化 transition 屬性有支援

  • 關於 flex 屬性在不同瀏覽器的小差異

  • / Safari transitionend event.propertyName === flex / / Chrome + FF transitionend event.propertyName === flex-grow /

Vue.use 和 Vue.prototype.$xx​

  • 相關文章：https://juejin.im/post/5d15be07e51d4556be5b3a9c
  • Vue.use(xxx) 需要對象有 install() 的函式供 Vue 使用，其內定義 Vue.prototype.$xx 會用到的東西，簡言之是使用一個較複雜的對象可用 use 掛進來，若只要簡單幾個功能則直接用 prototype (但這情況用 mixin 會比較好)，prototype 還是給 install 內定義用就好
  • git worktree 可讓本地開發時，要作業兩個以上分支的情況可把工作目錄做分開：$ git worktree add -b <new_branch_name> <folder_path> <source_branch>

AWS Serverless Application Model

Gogoro 的 cdn vue component(defer 載入)

  • 在 **** DOMContentLoaded 事件觸發(為了等html tag 都解析完後)掛載到指定的 tag 標籤內做 vue 實例化，但會有多個實例化在同一個頁面中
  • 普通掛載 cdn vue plugin 的做法是普通載入，在 main.js 入口點實例化前掛載( vue.use()、vue.component()：https://unpkg.com/browse/vue-slim-tabs@0.4.0/dist/vue-slim-tabs.js

Athena

<textarea></textarea> 不能自封 <textarea />，但 input 可以

async/await

  • async 函式被呼叫時會回傳一個 promise ，如果 async 函式有回傳值則 promise 的狀態為一個帶有該回傳值的 resolved; 如果 async 函式拋出例外或某個值，Promise 的狀態為一個帶有被拋出值的 rejected(常用 try/catch 語法)
  • async 函式內部使用 await 表達式可讓此函式暫停並且等待傳遞至表達式的 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行
  • await a(); await b();算依序執行，若變成在同一個運算內，await a + await b; 則會同時執行，但要同時執行建議還是用 Promise.all
  • AWS lambda 的特性是執行 node.js 程式時不會進到 Event ** Queue，Stack 跑完就會關起來了，此時正在進行的非同步操作會被中斷，因此官方範例也是用 async/await 等到 promise 回傳才繼續執行下一步，若是要在 export.handler 主要執行函式中呼叫其他含非同步操作的函式(this.other()，可呼叫 export.other )，其他非同步函式用 return new Promise() 包起來再回傳 resolve 或 reject 會比較保險，(用 async/await 也行但不知是不是 babel 轉譯過，打包丟上去執行會非預期順序做)

Athena

  • AWS Glue 建 table 可指定尚未建立的資料夾路徑 (但 s3 bucket 還是要有)
  • table 路徑下的檔案有變動(新增或修改刪除)都會同步更新 table 資料
  • 定義的 column 若未符合資料檔案內資料型別，查詢會失敗
  • 不能重複建相同名稱的 table

SQL 語法

  • 當查詢有要做計算時，GROUP BY 敘述句搭配聚合函數可將相同欄位值作為群組並回傳一筆運算後的資料
  • 常用聚合函數：AVG()、SUM()、MAX()、MIN()
  • WHERE <colume> in (‘string1’,‘string2’,‘string3’) ，做為欄位中資料篩選，即必須是 string1 or string2 or string3
  • SQL 語法搭配圖片解說會比較好明白，以後有空再做

Amplify API​

  • Get 方法像明信片一樣將資訊寫在 header，在 queryStringParameters 或 pathParameters 中
  • 這時如果傳的參數是陣列，依照不同的後端語言、供應商等等會有不同的解析方式。https://medium.com/raml-api/arrays-in-query-params-33189628fa68
  • 像 AWS 會轉換成字串，例：{array: [‘test’, 1234,‘test2’]} 變成 {array: ‘test’, array: ‘1234’, array": ‘test2’} ，這種很奇怪的東西。解法是傳送前轉 JSON 字串或改用 Post 方法
  • Post 方法像信封一樣，除了將資訊寫在 header，在 body (信封內)，可傳入任何資料

Athena​

  • 查詢時步驟為呼叫 startquery 並給相關查詢參數，因查詢需要時間所以拿取結果需呼叫另一個方法
  • 接者再呼叫 getQueryResults，但有時查詢會很久所以會回傳含目前查詢狀態的 error 字串，可判斷字串內含 QUEUED 或 RUNNING 則再呼叫一次直到有結果資料回傳或是查詢失敗的 error 訊息

AWS IOT​

  • iot.listThingGroups(params) 可以用 parentGroup 參數抓其全部底下的子孫 thinggroup，或是用 namePrefixFilter 參數去篩選出符合前綴的 thinggroup (此 API 僅回傳 thinggroup 的 name 與 ARN，詳細資訊要再呼叫抓取單一 group 資料的 API)
  • iot.listThingsInThingGroup(params) 給定 thingGroupName 僅可抓取其底下所有的 thing，此 API 僅回傳 thing 的 name 與 ARN，詳細資訊要再呼叫其他 API，若要篩選(lems 做法是每個 thing 都做呼叫並檢查其屬性是否符合)

滾動數字效果套件​

replace()​

  • 實作判斷顯示多人按讚訊息：
function likes (names) {
      var templates = [
        'no one likes this',
        '{name} likes this',
        '{name} and {name} like this',
        '{name}, {name} and {name} like this',
        '{name}, {name} and {n} others like this'
      ];
      var idx = Math.min(names.length, 4);
      
      return templates[idx].replace(/{name}|{n}/g, function (val) {
        return val === '{name}' ? names.shift() : names.length;
      });
    }
Last updated on