Category: Uncategorized

寫程式的心得

寫專案就像一堆小小的程式的集合。每個程式幾乎都可以拆開來變成一個小部份，一個小部份就像MDN看到的那樣，有時候會覺得寫一個小部份可以做到，但整合成一個大部份就覺得複雜亂亂。可能可以先想好每塊部份要怎麼寫，然後畫個流程圖，就會好寫很多。（流程圖是寫扣的流程圖）

不過以前的專案大多都是舊有專案要增加新功能，所以還變得要再花時間去讀懂別人寫的程式。

最好寫到一點就看一下console有沒有什麼錯誤訊息，這樣以後要追BUG比較好偵錯，比較知道剛剛改了什麼造成什麼錯誤。

敏捷開發筆記

 

  1. 敏捷其實不是代表快，它只是讓自己可以早點發現作品符不符合需求。
  2. 敏捷開發其實也可以當成一個自我管理的方法。
  3. TASK想到什麼就加上去，不是一定只要做只有planning的時候開的需求。
  4. 你沒有去溝通的話，溝通是不會發生的。通常客戶把需求告訴PM後，PM如果吸收了百分之八十％算強了，他再傳給主管，主管再傳給組長，組長再傳給工程師，其中就會有很多遺漏資訊了，所以最好還是工程師直接去和客戶確認需求。
  5. end to end 團隊指的是，這團隊可以做到全端後端都包。
  6. 有統計指出軟體業的離職率是20%。
  7. SCRUM是敏捷的一個方法，大約有80%人用，其它是用什麼KANBAN。
  8. AGILE短周期就上線，代表持續的跟客戶確認需求，一個很大的專案拆分成很多細項來做，不像以前都是做到完才上線，Agile是產品做好的地方就先賺錢（例如建築，蓋好的地方先擺攤或開店，沒蓋好的地方繼續蓋）
  9. 敏捷追求的是透明化，例如貼很多紙條的看板…
  10. PO決定每次的Sprint要做什麼，產品不賺錢是PO要扛責任。
  11. PO說了待辦清單之後，團隊每天的Standup meeting決定今天要做什麼，撕便利貼貼來貼去的概念（類似在櫻桃時那樣）

https://lunamiou.atlassian.net/

 

reorder list

export const langMapDataA = {
  sports: "Sports",
  casino: "Casino",
  esports: "E-Sports",
};


const reCraftArray = Object.keys(viewLang).map((key) => ({
  key: key,
  value: viewLang[key],
}));


const [list, setList] = useState(reCraftArray);


React.useEffect(() => {
  const reOrderSort = list.reduce((a, c) => {
    return a.concat(c.key);
  }, []);
  setProp((props) => (props.order = reOrderSort));
}, [list]);

// 每次list有變化都再變成陣列一次，然後再傳給元件

Array.prototype.slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

slice就像：我要刪除前面的二個！ animals.slice(2)
（實際上是index為2保留，之後的也保留。刪掉０、１）
我要刪除前面的二個，第四個以後的也都刪掉 animals.slice(2, 4)
（實際上是index為2的保留，保留到四的以前…不包含四，記起來比較麻煩。）
只刪除一個的情況：
我要刪除第二個，只刪除一個(第二個參數變成要刪幾個)
months.splice(2, 1);

react-select 小教學

react-select

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)
menuIsOpen={true}

貼上這個可以每次都是展開的，要inspect比較方便

blurInputOnSelect

這個props可以讓選擇後失去焦點，不會有focus效果

要客製化style的話，可以寫一個客製化風格物件，
文件教學在這。另外可以看DOM結構的classname來對應

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

  const App = () => (
    <Select
      styles={customStyles}
      options={...}
    />
  );

不過做這個我覺得也許可以搭配Storybook。