2021年1月25日 星期一

重新踏入網頁開發 (7) - React

 React - Introduction

    A JavaScript library for building user interfaces. React 在 MVC 分類上屬於 View，也就是主要用來開發前端。比起直接使用 npx create-react-app，我這裡想紀錄一些較簡單且原始的 React Sample Code。
  • 原本既有的程式碼 
        <!-- Some HTML -->
    <div id="mydiv"></div>
    <!-- Some HTML -->
  • 導入 React library 
        <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  • React Code 
        <script type="text/javascript">
      class HelloWorld extends React.Component {
        render() {
          return React.createElement('h1', {}, 'Hello React');
        }
      }
      const domContainer = document.querySelector('#mydiv');
      ReactDOM.render(React.createElement(HelloWorld), domContainer);
    </script>
  • Result 
        <div id="mydiv">
      <h1>Hello React</h1>
    </div>

 React - JSX ver

    現今 React 大多都會用 JSX 語法，較為便捷直觀。這裡附上上面純 React 跟 React ＆ JSX 的 Sample Code。 
  <!DOCTYPE html>
  <html>
    
    <!--這兩個 script 讓我們可以在 JavaScripts 寫 React Code -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    
    <!--這個 script 讓我們可以使用 JSX 和 ES6，即使瀏覽器較舊 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    
    <body>

      <div id="mydiv"></div>
      <div id="mydiv_JSX_ver"></div>

      <!-- 純 React ( 不用 JSX ) -->
      <script type="text/javascript">
        class HelloWorld extends React.Component {
          render() {
            return React.createElement('h1', {}, 'Hello React');
          }
        }
        const domContainer = document.querySelector('#mydiv');
        ReactDOM.render(React.createElement(HelloWorld), domContainer);
      </script>

      <!-- JSX 版本 -->
      <script type="text/babel">
        class Hello extends React.Component {
          render() {
            return <h1>Hello React with JSX!</h1>
          }
        }
        ReactDOM.render(<Hello />, document.querySelector('#mydiv_JSX_ver'))
      </script>

    </body>

  </html>
參考資料 :

2021年1月21日 星期四

重新踏入網頁開發 (6) - Express - 5

 Express - sendFile()

    用 sendFile 把寫好的 HTML 傳出去，然後準備開始前端的開發。 
    import express from 'express'
    import path from 'path';

    // 建立 express 這 module
    var app = express()
    const port = 8888
    const __dirname = path.resolve();

    // This responds a GET request for the homepage
    app.get('/', (req, res) => {
        console.log("Got a GET request for the homepage, from");
        res.sendFile(__dirname + "/hello.html");
    })

    var server = app.listen(port, function () {
    var host = server.address().address
    var port = server.address().port
        console.log("Example app listening at http://%s:%s", host, port)
    })
參考資料 :

2021年1月15日 星期五

重新踏入網頁開發 (6) - Express - 4

 Express - App v.s. Router

    Express 通常都是用 app.Method 來做 request 的 routing。而 Express 4.0 加入的 router 則可視為可以掛載的迷你 app。 
    import express from 'express'

    var app = express()
    var router = express.Router() 
    const port = 8888

    // Some router level function
    function logger (req, res, next) {
        console.log('Request URL:', req.url)
        console.log('Request Type:', req.method)
        next()
    }
    function welcome (req, res) {
        res.send("Welcome to the localhost!\n")
    }
    function hello (req, res, next) {
        res.send("Hello " + req.params.userName + "\n")
        next()
    }

    router.use(logger)
    router.get('/', welcome)
    router.get('/user/:userName', hello)

    // load router，就可獲得兩個 page ( '/' 跟 '/user/:userName' )
    // 這裡要注意的是要掛載 router 的 app 要用 app.use() 而不能是 app.Method()
    // 若用 app.Method()，'/user/:userName' 就會被 app.Method() 濾掉
    // 只剩一個 page
    app.use('/', router)
    app.listen(port)
上一篇 :
參考資料 :

2021年1月14日 星期四

重新踏入網頁開發 (6) - Express - 3

 Express - Middleware

    Middleware 是會處理 req, res, next 三個物件並在 routing 時執行之 function，基本上就是 routing 時會處理的 callback function。是 Express 中蠻重要的概念。但用例子來理解比較容易。 
    import express from 'express'

    // 建立 express 這 module
    var app = express()
    const port = 8888
    var userName = "Unknown"

    function hello(req, res) {
        res.send("Hello " + userName + "\n")
        res.end()
    }

    // 中間的匿名 function 就是 Middleware
    app.get('/hello/:userName.:userPassword', function (req, res, next){
        userName = req.params.userName
        console.log(userName)
        next()
    },  hello)
    
    app.listen(8888)
    所以 Express 可以用這些 Middleware 來作到流程控制，而非使用傳統的 if else。

 Express - Middleware Using

    Middleware 除了自己塞也可以有 2 種 Express 提供的方式使用。
  • Application-level 
        import express from 'express'

    // 建立 express 這 module
    var app = express()
    const port = 8888

    function reqType (req, res, next){
        console.log('Request Type:', req.method)
        next()
    }

    function timer (req, res, next){
        var date = new Date()
        console.log('Time:', date.toString())
        if (req.params.userName == "Admin") {
            next('route') // 只能在 app.Method() 使用，在 use() 裡就會只是普通的 next()
        } else {
            next()
        }
    }

    function logger (req, res, next){
        console.log
        (
            'User Date:', '\n',
            'User:', req.params.userName, '\n',
            'Password:', req.params.userPassword, '\n'
        )
        res.end()
    }

    function warning(req, res, next) {  
        console.log("Warning: Your village is under attack\n")
        res.end()
    }

    // app.use() 在 route 之前，所以會先執行 use 裡的 Middleware function
    // 之後在依照 Request Method 去找相對的 app.Method() 做 Reuest Handle
    app.use('/hello/:userName.:userPassword', reqType)

    // 正常來講，若 Request 是 GET 且 URL 符合的話，會依照順序執行 routing function
    // 但 timer 裡有 next('route')，符合條件的話會直接把控制權交給下個 routing function，
    // 忽略它本身後面的 Middleware function，這裡就是 logger。
    app.get('/hello/:userName.:userPassword', timer, logger)
    app.get('/hello/:userName.:userPassword', warning)
    app.listen(8888)
  • Router-level
        使用方法跟 app (express()) 一模一樣，差把 app 改成 router (express.Router())
上一篇 :
下一篇 :
參考資料 :

2021年1月11日 星期一

重新踏入網頁開發 (6) - Express - 2

 Express - Route parameters

    Route parameters 可以用來擷取 URL 上的 value。
  • server.js 
        import express from 'express'

    // 建立 express 這 module
    var app = express()
    const port = 8888

    // 回傳 { "userId": xxx, "bookId": xxx }
    app.get('/users/:userId/books/:bookId', function (req, res) {
        res.send(req.params)
    })

    // 可以用 "-" 分割，回傳 { "userId": xxx, "authorId": xxx, "bookId": xxx }
    app.get('/users/:userId-:authorId-:bookId', function (req, res) {
        res.send(req.params)
    })

    // 可以用 "." 分割，回傳 { "userId": xxx, "authorId": xxx, "bookId": xxx }
    app.get('/users/:userId.:authorId.:bookId', function (req, res) {
        res.send(req.params)
    })

    app.get('/users', function (req, res) {
        res.send("/users\n")
    })

    var server = app.listen(port, function () {
        var host = server.address().address
        var port = server.address().port
        console.log("Example app listening at http://%s:%s", host, port)
    })
  • Testing ( curl筆記 ) 
        $ curl -X GET http://localhost:8888/users/34/books/8989
    {"userId":"34","bookId":"8989"}

    $ curl -X GET http://localhost:8888/users/34-789-456
    {"userId":"34","authorId":"789","bookId":"456"}

    $ curl -X GET http://localhost:8888/users/34.123.258
    {"userId":"34","authorId":"123","bookId":"258"}

    $ curl -X GET http://localhost:8888/users/
    /users

 Express - Route handler

    Route handler 的 callback function 可以使用複數個，只要呼叫 next() 這個 function，便可執行下一個 callback function。
  • server.js 
        import express from 'express'

    // 建立 express 這 module
    var app = express()
    const port = 8888

    // 可以塞複數個 callback, 只要確保你有傳和呼叫 next()
    app.get('/normal', function (req, res, next) {
        console.log('Hello from the first callback function!')
        next()
    }, function (req, res) {
        console.log('Hello from the second callback function!')
        res.send("Hi, this is the second callback function!\n")
        res.end()
    })

    // array 版
    function callbackA(req, res, next) {
        console.log('Hello from callbackA function!')
        next()
    }
    function callbackB(req, res, next) {
        console.log('Hello from callbackB function!')
        next()
    }
    function callbackC(req, res) {
        console.log('Hello from callbackC function!')
        res.send("Hi, this is callbackC!\n")
        res.end()
    }

    app.get('/array', [callbackA, callbackB, callbackC])


    var server = app.listen(port, function () {
        var host = server.address().address
        var port = server.address().port
        console.log("Example app listening at http://%s:%s", host, port)
    })
  • Testing - client( curl筆記 ) 
        $ curl -X GET http://localhost:8888/normal
    Hi, this is the second callback function!
    $ curl -X GET http://localhost:8888/array
    Hi, this is callbackC!
  • Testing - server( curl筆記 ) 
        $ node Learning/11.Express\&ES6/Route_handler.js 
    Example app listening at http://:::8888
    Hello from the first callback function!
    Hello from the second callback function!
    Hello from callbackA function!
    Hello from callbackB function!
    Hello from callbackC function!
上一篇 :
下一篇 :
參考資料 :

2021年1月7日 星期四

重新踏入網頁開發 (6) - Express - 1

 Express

    Fast, unopinionated, minimalist web framework for Node.js，這是 Express 的自我介紹。這裡的 unopinionated 之於 opinionated 較為信任開發者，所以你可以擁有很多作法去達到相同的目的，例如像 PERL/PHP。而 opinionated 的 software 則會只提供一個方法去達到目的，例如撰寫維基百科。沒寫過維基百科，但很顯然維基百科有他的格式存在，而格式都是維基百科的設計師所規定的。他不會讓你自由地的操作 HTML 把它當成你的部落格在寫，你只能照他的方式去更新內容。
    安裝
    npm install express

 Express - Routing

    之前 Routing 的實作是用原生 module: http、url 和自製的 dict 去實現，現在用 express 來達成。
  • server.js 
       import express from 'express'

   // 建立 express 這 module
   var app = express()
   const port = 8888

   // This responds a GET request for the homepage
   app.get('/', (req, res) => {
      console.log("Got a GET request for the homepage");
      res.send('Hello GET!\n')
   })

   // This responds a POST request for the homepage
   app.post('/', function (req, res) {
      console.log("Got a POST request for the homepage");
      res.send('Hello POST\n');
   })

   // This responds a GET request for the /list_user page.
   app.get('/list_user', function (req, res) {
      console.log("Got a GET request for /list_user");
      res.send('Page Listing\n');
   })

   var server = app.listen(port, function () {
      var host = server.address().address
      var port = server.address().port
      console.log("Example app listening at http://%s:%s", host, port)
   })
  • Testing ( curl筆記 ) 
        $ curl -X GET http://localhost:8888/
    Hello GET!
    $ curl -X POST http://localhost:8888/
    Hello POST
    $ curl -X GET http://localhost:8888/list_user
    Page Listing
    第一個參數，字串支援 Regular Expression
  • server.js 
       // This responds a GET request for ab*cd, abxcd, ab123cd, and so on
   app.get('/ab*cd', function(req, res) {   
      console.log("Got a GET request for /ab*cd");
      res.send('Page Pattern Match\n');
   })

   // This responds a GET request for book1, book2 and book3
   app.get('/book[123]', function(req, res) {   
      console.log("Got a GET request for /ab*cd");
      res.send('Page Pattern Match\n');
   })
  • Testing ( curl筆記 ) 
        $ curl -X GET http://localhost:8888/ab123cd
    Page Pattern Match

    $ curl -X GET http://localhost:8888/ab123456cd
    Page Pattern Match

    $ curl -X GET http://localhost:8888/book1
    Page Pattern Match

    $ curl -X GET http://localhost:8888/book2
    Page Pattern Match

    $ curl -X GET http://localhost:8888/book3
    Page Pattern Match

    $ curl -X GET http://localhost:8888/book4
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Error</title>
    </head>
    <body>
    <pre>Cannot GET /book4</pre>
    </body>
    </html>
上一篇 :
下一篇 :
參考資料 :


LINUX - cURL 筆記

cURL - Client URL

    cURL is a command-line tool for getting or sending data including files using URL syntax。網站在開發 Restful API 時，測試會用到的最基本工具。這邊紀錄一些常用的參數
  • 基本的 request 
        # Default 是 GET
    curl http://localhost:8888/
    # 指定 request (--request 可用 -X 代替)
    curl --request GET http://localhost:8888/
    curl --request POST http://localhost:8888/
  • 將 response 存成檔案 
        # -o 加檔名, -O 直接將 URL 當檔名 (ex. list_user)
    $ curl -o temp  http://localhost:8888/list_user
    $ curl -O http://localhost:8888/list_user
  • 若 response 301/302(redirect)，會跟著 redirect 
        # 會 redirect 到 http://www.google.com    
    curl -L http://google.com
  • 把整個 request 流程 trace 儲存到 file 
        curl --trace-ascii debugdump.txt -L http://google.com
參考資料 :


2021年1月5日 星期二

英文歌詞翻譯 Taylor Swift - Red


Loving him is like driving a new Maserati down a dead end street
愛著他就像開著全新的瑪莎拉蒂在最後是死路的街道上
Faster than the wind, passionate as sin, ending so suddenly
原先破風而行、衝動而不自知的情感，卻倉促地結束
Loving him is like trying to change your mind
愛著他就像試圖改變你所有想法
Once you're already flying through the free fall
就像體驗自由落體前後的想法改變
Like the colors in autumn, so bright, just before they lose it all
就像秋天的顏色，在消逝的前一刻是如此地鮮明

Losing him was blue, like I'd never known
失去他憂鬱地像未曾見過的藍色
Missing him was dark gray, all alone
想念他孤獨地像晦暗的灰色
Forgetting him was like trying to know
忘記他像是試圖認識
Somebody you never met
一個從未見過的人
But loving him was red
但愛著他卻像是鮮明的紅色
Loving him was red
愛著他像是熱情的紅色

Touching him was like realizing all you ever wanted
觸摸他就像是發現你這輩子最想要的
Was right there in front of you
就在你的眼前
Memorizing him was as easy as knowing all the words
回憶他就像是簡單地記憶起每一個字
To your old favorite song
在那首你最愛的老歌
Fighting with him was like trying to solve a crossword
爭吵他就像是解一個填字遊戲
And realizing there's no right answer
卻發現沒有正確答案
Regretting him was like wishing you never found out
懊悔他就像是希望你自己永遠不會發現
That love could be that strong
愛是可以如此地強烈

Losing him was blue, like I'd never known
失去他憂鬱地像未曾見過的藍色
Missing him was dark gray, all alone
想念他孤獨地像晦暗的灰色
Forgetting him was like trying to know
忘記他像是試圖認識
Somebody you never met
一個從未見過的人
But loving him was red
但愛著他卻像是鮮明的紅色
Oh, red
熱情的紅色
Burning red
熱情如火的紅色

Remembering him comes in flashbacks and echoes
"回億他"像幻燈片、回音一般襲來
Tell myself it's time now gotta let go
我告訴我自己是時候放手了
But moving on from him is impossible
但離開他卻像是不可能
When I still see it all in my head
尤其是在我腦海裡仍然能看到他的全部
In burning red
是如此鮮明的紅色
Burning, it was red
如火焰般鮮明的紅色

Losing him was blue, like I'd never known
失去他憂鬱地像未曾見過的藍色
Missing him was dark gray, all alone
想念他孤獨地像晦暗的灰色
Forgetting him was like trying to know
忘記他像是試圖認識
Somebody you never met
一個從未見過的人
'Cause loving him was red
因為愛著他是鮮明的紅色
Yeah, yeah, red
熱情的紅色
Burning red
熱情如火的紅色

And that's why he's spinning 'round in my head
而就是為什麼他仍然在我腦海裡盤旋
Comes back to me, burning red
回來吧，火焰般的紅色
Yeah, yeah
His love was like driving a new Maserati down a dead end street
他的愛就像開著全新的瑪莎拉蒂在最後是死路的街道上
Note :
passionate as sin : 人性本善的情況下，人犯罪的當下都是衝動不自知的，罪惡感是犯罪後自覺而來。

面試心得 - Houzz

Job

Company :  Houzz
Job :  Back-End Software Engineer
Source :  Recruiter on LinkedIn
Result :  止步二面

Summary

1. 英文程度不佳 :  純英文溝通 Coding 時的想法及實作方法等相關經驗幾乎為零。
2. 資歷不夠 :  有接受履歷但分數肯定不高。
3. Coding :  沒拿出應有的水準。
4. Q&A 發揮趨近於零 :  除了一面，二面QA都跟啞巴一樣

面試流程及其內容

    共三次，三個面試官 ( 一面 1 個，二面 2 個 )。每次的面試官流程都一樣，大略分三部份，簡短自我介紹->Coding->Q&A。時間大概都 1 小時 10 分左右，可能我 Coding 解太久，因為表定都是 1 小時。
  • 一面 ( Coding Q1 )
    自我介紹: 
簡短的自我介紹

Coding:
Coding Question: 3 sum (LeetCode -> Problem -> 0015)
因為當下解不出 O(n^2)，所以沒有第二題。
  • 二面 - 1 ( Coding Q2 )
    自我介紹:
問了為什麼想應徵這份工作。

Coding 第一題: 
Design a data schema for google questionnaire
一份 questionnaire 有很多 question
每一 question 會秀相關 option 供填問卷者回答

Coding 第二題:
給一個只包含數字的 string，分割成質數回傳。
example:
Input: 11373
Output:
["11", "37", "3"]
["113" "7", "3"]
["113" "73"]
...
  • 二面 - 2 
    自我介紹:
問了近期 Coding challenge or breakthrough。
因為回答 Regular expression，所以後面問了如何實作。

Coding 第一題: 
Given an array of letters and an array of dictionary.
Return WORD if there is a pumutation of all letters can be found in given dictionary 
The time of any operation on dictionary can be ignored.
Example: 
Input: ["E", "H", "L", "O", "L"]
Dictionary: ["Apple", "Banana", "Hello", "Tree", "Zebra"]
Output:
Hello
(整題完全展現出我英文有多爛，一直跟 Interviewer 雞同鴨講)


Popular Posts

  • C/C++ - 左值、右值 ( lvalue、rvalue )
    lvalue 、rvalue 基本概念 左值 (lvalue) : 一個佔據某個特定記憶體的值。 右值 (rvalue) : 一個 expression 結束後就消失的值。 基本上這兩個定義包含了全部的值，非左即右，非右即左。 int var = 4; // v...
  • 英文歌詞翻譯 Jonathan Roy - Keeping Me Alive
    You try to hold me down so I became a soldier 你想要控制所以我成為了戰士 Built up all theses walls and now I'm climbing over 監牢般的城牆如今我已越過 Thos...
  • 面試心得 - Houzz
    Job Company  :   Houzz Job  :   Back-End Software Engineer Source  :   Recruiter on LinkedIn Result  :   止步二面 Summary 1. 英文程度不佳  :...
  • 英文歌詞翻譯 Bruno Mars - Finesse
    Ooh, don't we look good together? 我們看起來是不是很棒? There's a reason why they watch all night long 這就是為何他們整晚都看著我們的原因 Yeah, kn...
  • 英文歌詞翻譯 Gryffin, Elley Duhé - Tie Me Down
    Don't lie, I know you've been thinking it 別說謊了，我知道你一直很渴望 And two times, you let it slip from your lips 兩次了，你那不想讓人聽見的低語 You...
  • BCB 筆記7 (StrToInt)
    報告在製作時，一定會遇到要字串轉數字 在 BCB 裡有方便的函式 常見的有 String str = "123" int x = StrToInt(str); float y = StrToFloat(str); 但有時候...
  • BCB 選擇路徑(資料夾)
    BCB 選擇路徑(資料夾) 工作關係要將各式各樣的資料彙整並輸出 各式各樣的資料都放在同一目錄下 所以在設計程式就必須設計可以給使用者選擇目錄 但BCB10似乎沒有這種元件 (其實有 DirectoryListBox 但我駕馭不了) 於是Google發現大家用的...
  • BCB 筆記2 (TDateTime)
    BCB TDateTime 時間操作及應用 在 BCB 裡有關時間的操作幾乎都是與 TDateTime 這個 Class 相關 若找不到相關資料可以用 BCB 的 HELP ( 游標移到要查詢的函式或Class 並按 F1 ) 介紹幾個個人有在用的函式 TDate...
  • Python Error - UnicodeDecodeError: 'cp950' codec can't decode
    讀檔時 UnicodeDecodeError: 'cp950' codec can't decode 老實說這非常常見，即使你的檔案是用 UTF-8 編寫，而且用 Python3 ( 絕大部分 default 是 utf-8 )，仍...
  • Google API 筆記總覽
    Python Google API - Python 學習筆記 Google API - Python 學習筆記 - Upload post