Andy Blog
0%

Posted on Edited on Disqus:

Tailwind CSS安裝方式

這邊紀錄三種安裝方式，詳細可參考 安裝方式。

Webpack

這種作法主要是要將Tailwind CSS做為postcss的插件，並透過webpack打包處理。

  1. 安裝tailwindcss package，若本身已經配置postcss和autoprefixer，後面兩個package可以不安裝。
    1
    $ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    若為現有專案要加入tailwind，且postcss不是最新的8.x.x版本，可參考連結去進行調整。連結

  1. postcss加入tailwindcss plugins

    1
    2
    3
    4
    5
    6
    7
    // postcss.config.js
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      }
    }

  2. 產tailwindcss設定檔

    1
    $ npx tailwindcss init

    透過上述指令，產生tailwind.config.js檔案，其格式如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // tailwind.config.js
    module.exports = {
      purge: [],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
    }

  3. 最終將tailwindcss樣式庫加入css檔案，並導入會被webpack打包之js檔案。

Tailwind CLI

Tailwind CDN

Posted on Edited on Disqus:

題目

完整題目

算出所選張數最大的數字合。

因為題目有要求第一步驟要先在陣列頭或陣列尾選取。

解題想法

將可選擇的張數組合先選取好，再根據可選張數一組一組去比較大小。

初試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
 * @param {number[]} cardPoints
 * @param {number} k
 * @return {number}
 */
var maxScore = function(cardPoints, k) {
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    if(cardPoints.length === k){
        return cardPoints.reduce(reducer);
    }
    let newArr = cardPoints.concat(cardPoints);
    
    const arr = newArr.slice(cardPoints.length - k, cardPoints.length + k);
    
    let max = arr.slice(0, k).reduce(reducer);
    let now = max;
    
    for(let i=0; i<k; i++){
        let sum = now - arr[i] + arr[i+k];
        console.log(sum, max);
        if(sum > max){
            max = sum;
        }
        now = sum;
    }
    return max;
};

這個寫法在題目給的cardPoints長度不大且可選取張數k不大時是可以用的，但同樣的當cardPoints和k變大時(題目給的範圍是1<=cardPoints.length <= 10^5, 1<=k <=cardPoints.length)，在先列出組合的array就很容易導致memory吃很大且運算時間拉長。

可修改地方

我們用上面那張圖來說明。根據圖，這時的cardPoints長度會為6，假如我們k為3，那我們可選取的組合應該會有

  • [R, O, Y] => sum = R + O + Y
  • [I, R, O] => sum = sum - Y + I
  • [B, I, R] => sum = sum - O + B
  • [G, B, I] => sum = sum - R + G

在算出第一個組合的總和後，可以明顯發現接下來的組合大小就是減去從陣列頭開始的數字，並加入陣列尾的數字。

也就是說我們要比較各種組合的大小時，我們是有一個規律去控制取陣列頭或陣列尾的元素。因此也就不必再把各種組合的陣列給組出來。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @param {number[]} cardPoints
 * @param {number} k
 * @return {number}
 */
var maxScore = function(cardPoints, k) {
    let max = cardPoints.slice(0, k).reduce((a, b) => a+b);
    let now = max;

    let left = k - 1;
    let right = cardPoints.length - 1;
    
    for(let i=0; i< k; i++){
       now = now - cardPoints[left--] + cardPoints[right--];
        max = Math.max(now, max);
    }
    
    return max;
};

Posted on Edited on Disqus:

題目

完整題目

找出人口最多的最早年份

題目難易度

Easy

解題想法

先透過字典的概念將每個年份的人口統計出來，再找尋年份最早且人口最多的。

初試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * @param {number[][]} logs
 * @return {number}
 */

var maximumPopulation = function(logs) {
    const dict = new Map();
    let max = 0;
    let num = 0;
    for(let i=0; i<logs.length; i++){
        for(let j=0; j<=1; j++){
            max = logs[i][j];
            
            logs.map((item) => {
                if( item[0] <=max && item[1] > max){
                    num += 1;
                }
            })
            
            dict.set(max, num);
            
            max = 0;
            num = 0;
        }
    }
    
    let re = 10000;
    let ma = 0;
    
    
    dict.forEach((value, key) => {
        if(value > ma){
            re = key;
            ma = value;
        }else if(value === ma && re > key){
            re = key;
            ma = value;
        }
    })

    return re;
};

可修改地方

組成字典部分，因為題目有限制說年份會在1950-2050之間，也可以直接對這個區間去進行統計每個年份有幾人(這樣也不用用字典概念，用array直接存)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
 * @param {number[][]} logs
 * @return {number}
 */
var maximumPopulation = function(logs) {
    const arr = new Array(101).fill(0);
    
    let pre = 1950;
    
    for(let [b, d] of logs){
        for(let i = b - pre; i < d-pre; i++){
            arr[i]++;
        }
    }
    
    
    let maxNumber = arr[0];
    let maxNumberIndex = 0;
    for(let i=0; i<arr.length; i++){
        if(arr[i] > maxNumber){
            maxNumber = arr[i];
            maxNumberIndex = i;
        }
    }

    return maxNumberIndex+pre;
};

這個做法可以減少記憶體的存取，但相對的找最找年份因為都是用101個年份的資料去比對，在運算時間會較久。

Posted on Edited on Disqus:

Docker基本指令

這邊不對Docker的Image、Container和Repository多做說明，只針對常用的指令做紀錄。

Image

一般來說，我們會從Docker Hub抓取我們說需要的Image，如要從非Docker Hub的地方下載Image，需在指令中加入Docker Registry地址。

1
$ docker pull [OPTIONS] [Registry: Port Number] NAME[:TAG|@DIGEST]

如果未加入TAG，會自動使用預設的latest這個TAG。

Posted on Edited on Disqus:

Git Config

Git config是定義了Git環境的設定檔，這些檔案可以被存放在三個地方。

Git Config環境層級

  1. System層級的：/etc/gitconfig/

    用於針對所有用戶的設定

    可以透過以下指令來針對system層級做設定。

    1
    $ git config --system

  2. 用戶層級的：~/.gitconfig

    用於針對個別使用者的設定

    可以透過以下指令針對用戶層級做設定。

    1
    $ git config --global

    個人是習慣git的相關設定會設置於用戶層級的，因此大多設定內容都在~/.gitconfig內。

  3. 專案層級的：/.git/config

    個別專案設定的

    可以透過以下指令針對專案層級做設定。

    1
    $ git config

    大多如remote倉庫的位置等資訊都是設置在這個層級的。

在這三個層級裡，專案層級的東西會去覆蓋用戶層級的，而用戶層級的內容會去覆蓋System層級的。

Git規格覆蓋的準則：專案層級 > 使用者層級 > 系統層級

Posted on Edited on Disqus:

React Native Firebase

要在React Native使用Firebase，我們可以使用React Native Firebase這個package，但在此package中有提到此package不能使用Expo CLI，因此我們要使用React Native CLI作為開發模板。詳細安裝方法參考。

在官方文件中有提到，若之前有安裝過react-native-cli這個package，要把它移除。

React Native Firebase安裝

根據自己的習慣使用npm或yarn安裝。

1
2
3
4
5
# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

在這個@react-native-firebase/app套件中，並不包含firebase的功能，僅是可以使用firebase，但其他功能的package會根據需求再來安裝。

根據要開發iOS或Android App進行個別設定

首先我們先到Firebase網站開一新專案，是否要使用GA功能可以自己選擇。專案設立完畢且進入後，在專按名稱下方可選擇新增應用程式
。並分別設定將Firebase綁到iOS和Android。

iOS 安裝

Firebase安裝步驟第一步，會要我們一定要輸入軟體包ID，而這個軟體包ID，就需要我們進入資料夾內尋找。

在我們前面使用React Native CLI作為開發模板時，會產生兩個資料夾，一個名稱為ios，一個名稱為android。

根據官方說明，我們要先開啟/ios/{projectName}.xcodeproj或/ios/{projectName}.xcworkspace檔案，來查看軟體包ID。

接著我們使用Xcode開啟專案，點選最上層，右側即可找到Bundle Identifier，這也是我們要將Firebase註冊到iOS第一步驟所需輸入的iOS軟體包ID。（若是使用mac進行開發，在使用React Native CLI安裝完後，ios資料夾內就會有xcworkspace的檔案）。

接下來回到Firebase安裝第二步驟，會提供一個GoogleService-Info.plist檔案，將他下載下來後，複製進去我們的專案內，可參考官方文件。（注意：此檔案是要複製到內層的專案內容中，並不是最外層的project中，以Xcode來看就是黃色資料夾的那層）

回到Firebase安裝第三步驟，新增Firebase SDK，這邊基本上就跟著網站上的內容操作（如果是使用mac來建立React Native CLI模板，則不需要額外建立Podfile）。

Firebase安裝第四步驟，會要我們新增初始化的code。這邊我會選擇Objective-C版本，並參考React Native Firebase的官方文件，先開啟/ios/{projectName}/AppDelegate.m文件，並在前面的import新增Firebase SDK

1
#import <Firebase.h>

並且找到此文件中的didFinishLaunchingWithOptions方法，在此方法最前面新增

1
2
3
if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }

並重新building或linking。

1
2
3
4
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

接下來就可以進入第五步驟。

在第五步驟，Firebase會測試專案是否連接Firebase，若連結成功，基本上Firebase安裝在iOS上就成功了。

Android 安裝

Android安裝過程基本上與iOS大同小異。

一樣參考官方文件。

第一步一樣要找Android套件名稱（其實就跟iOS找軟體包ID一樣），只是這次我們要到/android/app/src/main/AndroidManifest.xml找；第二步驟將google-services.json移入專案；第三步驟根據React Native Firebase文件新增Firebase SDK，基本上就安裝完成，較iOS還要簡單。

Posted on Edited on Disqus:

curl

curl是一個同wget為Linux上方便的指令，可把網頁抓下來進行分析。一般來說當工程師撰寫完API後，都需要進行HTTP Request來測試，目前有像postman方便的GUI tool，但如果懶惰或不想啟動較吃資源的GRU tool，此時我們就可以透過curl指令幫助我們測試。

以下我紀錄個人覺得較常用之指令。

curl GET

crul預設為使用GET請求，一般來說指令組成結構為curl [option] [URL]

下方我們會以httpbin作為HTTP Request的URL並說明常用option選項。

補充：httpbin回傳會以JSON格式為內容格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
curl https://httpbin.org/get
//取得對httpbin進行get的回傳內容

curl -I https://httpbin.org/get
//只需要顯示response header
//其實就等於 curl --head hhttps://httpbin.org/get
//-I為簡寫，可透過curl -help查詢

curl -o abc.txt https://httpbin.org/get
//將httpbin進行get的回傳內容儲存下來，並存在一為abc.txt的檔案內
//小寫"o"為下載請求資源到新的檔案
//檔案之名稱與副檔名可自行設定

curl -O https://httpbin.org/get
//同為將httpbin進行get的回傳內容
//大寫"O"為使用指定網址伺服器的檔名作為下載之檔名

curl -L google.com
//檔網頁進行redirect時，連到redirect網址
//可以試看看沒有加上"-L"的狀況

curl https://httpbin.org/get -H "accept: application/json"
//設定request所要挾帶的header
//這邊設定告知伺服器用戶端可解讀JSON內容

curl POST/PUT/……

除了最基本的get，可以使用”-X”決定要進行”GET|POST|PUT|DELETE|PATCH”哪個http method。

在我們使用-X得時候，我們常常會使用到下列的指令。

1
2
3
4
-H 夾帶的header
-d 夾帶post data內容
-u 夾帶使用者帳號密碼
-b 攜帶cookie
1
2
3
4
5
6
7
8
9
curl -X POST "https://httpbin.org/post" -d "email=abc@gmail.com" -H "accept: application/json"
//進行post時，夾帶email內容
//要使用其他的http method 更改-X後面的名稱

curl -X POST "https://httpbin.org/post" -b "num=20"
//設定cookie num=20

curl -u "abc:200" https://httpbin.org/get
//若網頁有使用basic auth，可以使用-u夾帶帳號密碼過驗證

Posted on Edited on Disqus:

Julia

有使用過Python的人，大致上都了解Python雖然易學，但執行效率低的問題。而Julia是一個新興語言，它號稱與Python一樣易學，但又有著C的高效能。

這邊會說明Julia的安裝過程。

Julia安裝

到The Julia Language網站，點選上方的Download，選擇要安裝目前最新版本還是LTS版本。

如使用mac，會下載一dmg檔，直接拖曳進Application內即可安裝完成。Windows會下載一.exe檔案，雙擊安裝。

windows和mac安裝完後，建議添加PATH到環境變數。未來要使用terminal啟動Julia較為方便。

IDE選擇

Julia安裝完後，選擇欲撰寫Julia的IDE。
目前可以使用的IDE很多，Jupyter Notebook、Atom、Visual Studio Code…。

個人自己比較喜歡VSCode，這邊會用VSCode做說明。
打開VSCode的Extension，搜尋Julia並安裝。

安裝完成後，至Settings>Extensions>Julia 找到Julia Executable Path，輸入Julia的Path。
在MAC上，Path原則上是/Applications/Julia-<version>.app/Contents/Resources/julia/bin/julia。

設定完成後，如果前面有將Julia路徑新增至環境變數，則可在資料夾路境內執行julia name.jl。

但目前Julia與VSCode相容並沒有說很好，所以還是來使用Jupyter Notebook (x

補充

mac環境變數添加Julia Path

我自己的mac是使用zsh，而不是bash。因此在添加環境變數我會編輯zshrc。

  • sudo nano ~/.zshrc
  • 新增 alias julia='/Applications/Julia-1.4.app/Contents/Resources/julia/bin/julia'，要使用export也可以。
  • Terminal輸入julia，即可使用julia。