Category: Uncategorized

如何計算rem

Photo by Jan Piatkowski on Unsplash

首先呢，假如是負責既有的專案的話，就找它的html 的 font-size是什麼
現在負責的專案是10vw，所以就看目前的視窗大小（右鍵F12點body，會在左下顯示大小）
看了一下是1920，所以1920 / 10 = 192
剛剛做了一個width 10vw的 div block，看出它的寬度也是這個大小沒錯！

假設有設計稿的話，更簡單，目前拿到的設計稿是1336，所以就把設計稿改成1920大小，再拿它的px值丟到下面網頁上
（因為我做的專案是到任何大小都是填滿整個畫面，不同專案不同情況，有的專案可能要改畫布大小但原本畫面不動）
所以就可以打開我的萬用網頁：
REM Calculator | Umbraco Gold Partner – Offroadcode Limited
用這個就可以得到rem的值來玩了

git push前的checklist

  1. 有沒有多餘的代碼（可以優化、簡潔的地方）例如重複的地方太多，可以讓它變成一個function來調用。
  2. 各模版/各品牌
  3. 有沒有 debugger
  4. Network的XHR正不正常（接口調用）
  5. 避免hardcore寫法 （if ( id === 1396 ) { ….. }）
  6. 能整合的component都整合，不要分開寫
  7. 把沒用到的程式刪掉，保持整潔
  8. 避免重複的code，若兩個地方要取一樣的值就寫成getPornId 之類的function
  9. eslint都修好
  10. API有沒有重複打
  11. 避免不必要的re-render，注重performance
  12. 做了一些設定之後，要重新打API來refresh
  13. TODO改好
  14. 先確認表單有什麼值是不能為零、不能空的
  15. 假的資料拿掉
  16. 做loading畫面
  17. 確認要不要filter掉重複的值（例如select裡的列表）
  18. 試試沒有run後端專案的時候前端會不會整組壞光光（例：TypeError: Cannot convert undefined or null to object
  19. 搜尋的input沒輸入的時候，按搜尋按鈕是不是會跑出全部資料（需確認
getCatId = () => {
  const { activeCatId ] = this;
  let catId = this.props.routeParams.catId;
  if ( theme === 'hentai' ) {
   catId = activeCatId;
  }
  return catId;
}

可以改成下面這樣

getCatId = () => {
  if ( theme === 'hentai' ) {
    return this.activeCatId;
  }
  return this.props.routeParams.catId;
}

Array.from

Array.from([1, 2, 3], ( x , y ) => x + y);

// 1, 3, 5
這裡的arrow function是map function，y就是index

const nestedArray = [['😉'],{kind: "🐦"},['😇']]

const abc = Array.from(nestedArray);

nestedArray[0][0] = "🐗";
nestedArray[1]["kind"] = "🦉";

console.log(...abc);

還有它不會深烤貝

ES6 Practice

看到一些不錯的寫法給它抄下來

"1|2|3|4|5|6|".split('|').reduce((result, val) =>
(`${result}${result && val ? ' | ' : ''}${val}`), '')
onClick={() => this.setState({ light: lightstatus === 'on' ? 'off' : 'on' })}
test({gameID});

其實就等於

"use strict";

test({
  playID: playID
});
let onFlipped = itemId => (xIndex, yIndex) => console.log (itemId, xIndex, yIndex);

如果有看不懂的，可以貼到babel網站上看它轉成ES5會怎樣

歌單

砂之塔
I beg you
Lemon
打上花火
倉木麻衣

MYTH&ROID – STYX HELIX

【一定很多人都會的】
God Knows 涼宮春日
純潔 パラドックス 水樹奈奈
深愛 水樹奈奈
ロミオとシンデレラ 初音ミク
Only my railgun fripSide
forever… 武器種族傳說
そばかす 神劍闖江湖
輪舞 少女革命
Successful Mission 機械女神
鏡の中のアクトレス 橙路
未聞花名
ドリーム・シフト

【初音ミク】
白い雪のプリンセスは
メルト
からくりピエロ Puppet Clown

LiSA – 紅蓮華
Oath Sign – LiSA

 

懷舊動畫
夢幻遊戲
美少女戰士
愛天使傳說
閃電pli車
勇者亂太狼
魔法騎士