Robert 雜記

發表於 更新於 分類於 Disqus：
文章字數： 1.8k 所需閱讀時間 ≈ 2 分鐘

import 匯入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// import 不用加 _ 及 .scss
@import 'reset';
@import 'common';

/* 檔案 (檔案前 "_" 表僅為合併用)
		_reset.scss
		_common.scss */

// 架構
@import 'variable';
@import 'mixin';
@import 'grid';
@import 'reset';
@import 'common'; // 名可用名稱 layout
@import "module/button";
@import "page/index";
     or
 @import "page/member";
閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 9.8k 所需閱讀時間 ≈ 9 分鐘

index.scss

1
2
3
4
5
6
@import "variable";
@import 'mixin';
@import 'grid';
@import 'reset';
@import 'layout';
@import 'pages/index';
閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 543 所需閱讀時間 ≈ 1 分鐘

Chrome special key

  • Esc - 停止載入目前網頁
閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 4.2k 所需閱讀時間 ≈ 4 分鐘

Flex

Flex - align-items/align-content stretch 無作用

如果子容器或是元件，在有設定高度（height）的情況下，這個 stretch 會被忽略，自動變成 flex-start(align-items/)/normal(align-content)

閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 27k 所需閱讀時間 ≈ 24 分鐘

CSS(Cascading Style Sheets) 階層式樣式表

閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 14k 所需閱讀時間 ≈ 13 分鐘

說明

  • 同源政策 (Same-origin policy)
    • 跨來源寫(Cross-origin writes)通常被允許，例如有連結、重新導向以及表單送出。少數某些HTTP請求需要先導請求。
    • 跨來源嵌入(Cross-origin embedding)通常被允許。
    • 跨來源讀取(Cross-origin read) 通常不被允許，不過通常可以藉由嵌入來繞道讀取，例如嵌入影像寬高讀取、嵌入程式碼或嵌入資源。
  • 跨源資源共享（CORS）
    • 簡單請求
    • Preflight Request(預檢請求)
      有時會看到發兩次 request,因為只要發送請求到不同 origin 就會有 cors 的問題,所以 server 必須先確定 client 端是合法請求，也就是,Preflighted 要先發一次 request 去驗證是否合法 domain,成功了才能發真正的 request

HTML example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Title icon -->
	<link rel="shortcut icon" href="images/title-img.png" type="image/x-icon">

	<!-- web title -->
	<title>Pure Bootstrap Website</title>

</head>
<body>

</body>
</html>

SEO(Search engine optimization)搜尋引擎優化 與 meta 標籤

閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 24k 所需閱讀時間 ≈ 22 分鐘

簡介

HTTP API(Application Programming interface) 即 Web API,串接 API 即使用 API 提供者提供的 API

閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 855 所需閱讀時間 ≈ 1 分鐘

Chrome local test 使用 network monitor 有問題

改用 Brave 正常

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
// http_server1.js
let http = require('http');
let server = http.createServer(handleRequest)

function handleRequest(req, res){
	console.log(req.url)
	if (req.url === '/') {
		res.write('welcome')
		res.end()
		return
	} else if (req.url === '/hello') {
		res.write('hello')
		res.end()
		return
	}else if (req.url === '/redirect') {
		res.writeHead(200, {
			'name': 'Robert'
		})
		res.end()
		return
	}else if (req.url === '/redirect2') {
		res.writeHead(302, {
			'location': '/hello'
		})
		res.end()
		return
	}
	res.writeHead(404)
	res.end()
}

server.listen(5000)
閱讀全文 »

發表於 更新於 分類於 Disqus：
文章字數： 1.5k 所需閱讀時間 ≈ 1 分鐘

Yarn 是 Facebook 發佈的一款 JavaScript 套件管理工具，其功能與 npm 相同，速度較快

install by npm

1
npm install -g yarn
閱讀全文 »