2019-03-24

Postman Imgur OAuth 2.0 Setting

postman
- 建立變數
- global、collection、environment
- 用環境管理不同的變數
- 每一個Oauth的請求都有自己的token_url、authorize_url、callback_url

OAuth四個步驟:
- 註冊、授權、請求、取得token
  - 註冊:獲得client_id和client_secret
  - 授權
    - 詢問使用者是否願意提供個人資料讓應用程式存取資料
    - refresh and access tokens, an authorization_code, or a PIN code.
    - 用這些東西來換access_token and refresh_token.
  - 授權種類:
    - access token:把它想成是存取使用者資料的一組資訊(像帳號密碼一樣)，一個月之後會過期
    - refresh token:不會過期的access token
    - authorization_code:伺服器用來取得access token和refresh token(存在只是為了交換token使用)
    - PIN code:使用者用來取得access token和refresh token的方式(存在只是為了交換token使用)
- https://api.imgur.com/oauth2

Imgur PostMan Setting

 Uri:https://api.imgur.com/3/account/me/images

Testing OAuth2 Authorization Flow with Postman

2019-02-20

Room Manager In React/Vue.js

標題放置於圖片前面的技巧
- 外面圖片cover設定為relative
  - 裡面設定absolute
  - 就可以讓標題指定到想放的位置，通常一開始會跑到很上面的地方
- 把圖片置中，讓縮放不會怪怪的
  - background-size: cover
  - background-position: center center
- 偽元素增加錢字號
  - 讓使用者可以直接複製金額而不會複製到錢號
- 設置圖片滑鼠移入放大縮小效果
  - background-image: url();
  - background-size: 110% auto;
- 外框邊框效果與隱藏超出外框的設定
  - border-radius: 2px
  - overflow: hidden
- 外框滑鼠滑入背景陰影
  - box-shadow: 0 10px 1px -5px rgba(0, 0, 0, 0.1)
- 利用標題屬性來排列元素，讓外面的元素可以設定邊距
  - h5英文說明欄位
  - h4排列下方的價錢(本身已經是粗體字，而且在同一行)
Vue元件的第一個參數首字母可以是大寫也可以是小寫，之後一律小寫(把元件想成是自定義的html tag比較好明白)
- computed()方法沒有辦法用在background-image:url()，要改用methods
- 透過使用methods，可以在設定style的時候，把url傳入，此時會產生相對應的css設定
- component目前還不知道要怎麼繼承父類別的methods，先將methods寫在component裡面
使用font-awesome加入小圖示
- input是當行元素，要用v-model來綁定值
- select的值要用:value關聯回去原本的data
CSS hack
- room_edit:設定邊框和邊距
- room_tag:呈現三個元素
  - h4:標題和垃圾桶
  - input.toggle-check(type=“checkbox”):利用checkbox的偽元素隱藏或顯示編輯區域
  - .edit_part:真正的編輯區域
- ＊外層要用label包住所有作用的區塊checkbox才有作用
Room Manager In React
Room Manager In Vue.js

2019-02-15

Color Picker Tool In React/Vue.js

這次的練習在於熟悉Vue元件的寫法，以及Bootstrap 4版面布局，Vue的元件第一個參數必須全部小寫，這點要特別注意。

Html
- 注意codepen引用bootstrap時使用的版本(bootstrap 4)
  - 如果想要同一行顯示用row包起來
React
- 思考如何取得與處理textarea的內容
Vue
- 元件:第一個元件的參數開頭需要全部小寫
  - 使用元件的好處，能夠有自己的計算屬性
  - 從父類別繼承下來的屬性可以再重新計算成新的屬性
Javascript
- Vue裡面的東西都是物件
- html中都是用等號和引號取得vue的物件或資料
- 用:style屬性接收物件的css設定的物件
  - :style=“card.csscolor”
  - :v-model=“color_cards”
  - :v-for=“card in color_cards”
- computed裡面接的是object類型的東西
  - 計算出color_card字串切割後的值
CSS
- hover:設定移動效果
  - transform: translate(5px, 5px);
  - transition: 4s
- codepen編譯pug和sass差異
  - 編譯pug會重新整理頁面
  - 編譯sass不重新整理頁面,但會動態替換頁面的內容

Source Code如下:

📗:使用Vue.js建立sass色票工具

2019-02-13

Introduction to Algorithms Third Edition

問題
- 問題的難度
  - 由問題的規則決定問題的難度
  - 會影響computation model
  - 限制魔術方塊只能往前轉，就會增加解題的難度
- 解決問題的定義
  - 用了兩個反證法來說明擂台法的正確性
  - 證明j*是最大的
    - j*=1的情況，不需要執行for loop，直接return j
    - j*>1的情況，比j大執行for loop，j被換成j*，最後回傳j
  - 證明困難度不能再比n-1更低
    - 如果是n-2的話,就會存在有兩個第一名,沒有辦法分出勝負
problem instance就是input
- 任何的input都要能夠滿足rule(algorithm)

Algorithm and problem instances

problem instance:所有輸入的序列串
algorithm:
- problem-oriented programming
- 用執行的速度衡量演算法的好壞
- 多個輸入經過演算法的處理之後產生唯一正確答案
- 生活中的演算法，用最少做最好
  - 評估東西的好壞
    - 是不是盜版的商品
    - 東西的CP值/性價比高不高
  - 找出最佳路徑
少用遞迴，用for while代替
- 遞迴是用stack的方式來存放未處理的函式
- 不但當前的問題沒有解決還會產生很多子問題(以2的n次方產生問題)

Big O Complexity

2019-02-12

Learning Object-Oriented Programming In Java

Class和Object的差別
- class代表廣泛的非具體的抽象概念,可以是任何東西
  - 例:IDE、圖書館、書
- object是具體的東西
  - Netbeans、Eclipse、台北圖書館、倚天屠龍記
Java和C語言的差異
- Java在編譯的時候需要和其他Java文件一起編譯成一個工程(package)
- C語言直接編譯即可(gcc test.c -o test)
- 定義類別的時候也不太一樣(全域變數)
兩個例子分別說明類的概念
- 張三和李四到銀行存錢
  - 存款、提款
  - 建立帳戶的時候就需要給名稱和存款的額度
- 二哈繼承狗的類別
  - 一般會給狗取名字,而狗也有自己的年齡和性別
  - 二哈繼承狗的類別,在eclipse當中可以直接override父類別建構方法
子類繼承父類
- Eclipse產生的建構子會自動為相對應的成員變數進行賦值
- UML類圖,哈士奇繼承狗的類別
- overload:相同名稱不同參數會找到對應的方法呼叫
- override:覆寫父類別的方法
  - 當子類出現和父類別一樣的方法時,就用子類別的方法
  - 子類只能夠存取protected的成員變量

ArrayListTest.javalink

// 沒有加會有小紅線提示
import java.util.ArrayList;
public class ArrayListTest{
	public static void test1{
		int[] arr = new int[10];
		arr[0] = 2;
		arr[1] = 3;
		for(int i=0; i< arr.length; i++){
			System.out.println(arr[i]);
		}
	}
	public static void main(String[] args){
		// 沒有指定型別的話會出現小黃線
		ArrayList<Integer> arr = new ArrayList<Integer>();
		arr.add(1);
		arr.add(3);
		arr.add(5);
		arr.remove(1); //移除第二個元素
		for(int i=0; i<arr.size(); i++){
			// 使用get來取得陣列的值
			System.out.println(arr.get(i));
		}
	}
}

Java面向对象简介

2019-01-21

A Brief History of Tomorrow

目前才看到40幾頁,就用好幾個有趣的例子來解釋人類的發展史,非常值得一看。

Ted演說筆記:

Why humans run the world

Because we can create something that people believe , the fictional entities become more and more powerful
rich people become god, poor people become useless

Ted演說影片:
Why humans run the world | Yuval Noah Harari

40幾頁的筆記:

Homo Deus The Brief History of Tomorrow

2019-01-16

SDL圖形編程

配置方法

Code Block
- 需要再Build Options中設定Libraries和Linkers
  - 方便Code Block調用第三方函式庫
- 出現dll找不到的問題,需要把MinGw下的dll放到專案下
autocomplete配置
- Settings可以配置libraries路徑,配置完成後重新開啟專案就有自動提示功能
主函數要傳兩個參數進去
- int argc
- char** argv
SDL_Create_Window
- 建立視窗
  - 視窗標題
  - 設定位置:x,y
    - 不設定視窗位置,讓系統決定出現的位置
      - SDL_WINDOWPOS_UNDEFINED
  - 設定視窗大小
  - 設定狀態:SDL_WINDOW_SHOWN
SDL_Surface生命週期
- SDL_GETWindowSurface(window)
- SDL_FreeSurface(surface)
- SDL_DestoryWindow(window)
- SDL_Quit()
把窗口卡住
- 不利於動畫製作
  - SDL_Delay(3000)
- 用死循環卡住窗口
  - 占用資源太大(CPU資源)
- 用事件比較好,窗口運行不斷查看事件
  - SDL_Event event
  - SDL_POLLEvent(&event)
  - 沒有寫任何定義會關不掉窗口(因為不知道要幹嘛)
- SDL_FillRect(surface, NULL, 0)
  - 把移動之後出現的空白軌跡給塗成黑色
更新Surface
- 每一個圖片都需要貼到一個Surface上面
- 用SDL_BlitSurface()貼上去
- SDL_UpdateWindowSurface(window)
- 載入圖片
  - Load_BMP:24位圖(不支持alpha通道,不支援透明度)
  - IMG_Load:載入Png(SDL_Image)
- 載入音效
  - mixer(SDL2-mixer)
  - wav:無損壓縮,適合用於短的音樂
  - mp3:壓縮格式,適合用於長的音樂(背景音樂)
SDL教程

SDL Render template

#include <stdlib.h>
#include <stdbool.h>
#include <SDL2/SDL.h>

#define WINDOW_WIDTH 800;
#define WINDOW_HEIGHT 600;

int main(int args, char** argv) 
{
	SDL_Window* window = SDL_CreateWindow("Hello", SDL_WINDOW_UNDEFINED, SDL_WINDOW_UNDEFINED, WINDOW_WIDTH,WINDOW_HEIGHT,SDL_WINDOW_SHOWN);
	SDL_Render* rend = SDL_CreateRender(window, -1, SDL_RENDER_ACCELERATED);

	bool quit = false;
	SDL_Event event;
	while(!quit){
		while(SDL_PollEvent(&event)){
			if(event.type == SDL_QUIT) {
				quit = true;
			}
		}
		SDL_Delay(10);
	}
	SDL_DestroyWindow(window);
	return 0;
}

2018-12-28

Learn React

Why react
- Virtual DOM
- Reusable(and clearer) Web Components
- Maintained by Facebook
  - Hirable
jsx是甚麼?
- 可以用來把html轉換為javascript語法
- 所以在jsx裡面的class不能只寫class,要寫成className
  - 通常一個html的元素會有很多class,叫做classList感覺比較符合使用的情境
  - 一般的javascript是使用document DOM api進行元素的讀取與解析
- import React from 'react’來解析jsx
  - ReactDOM專門負責render
- virtual DOM
  - component tree
    - 只能定義一個元素,但互相嵌入的方式合併數個不同的元素
    - 最後都會被jsx解析成一般的元素(html tag)
常用寫法
- 命名camelcase
- 命名的時候function的名稱和檔案名稱大小寫相同,方便之後維護
- 使用function直接return元素
- 不加路徑位置es6會找已經安裝的module
不同的寫法
- 單行寫法
  - 可以使用arrow function、匿名函式
- 不加上分號(;)
  - for loop要用分號,為了區別不同的statement
- 大括號用來解析Javascript

1 2	{`${variable} ${variable2}`} {variable}

在設定style的時候需要傳入object進去
- 用大括號刮起來的地方jsx會去解析

1	{{color:#ccc, paddingTop:'10px'}}

- 設定元件的屬性可以透過props參數來取得

Anki React
- ReactDOMServer.renderToNodeStream(element)
- ReactDOMServer.renderToStaticNodeStream(element)
  - simple static page
- React.createElemnt(type, [props], […children])
- React.cloneElement(element, [props], […children])
  - 複製指定的元素,本身有的屬性會進行合併
- React.isValidElement(object)
Props and Styling Practice
彻底理解React 之React SSR、React服务端渲染，教你从零搭建配置

2018-12-13

Find The Parity Outlier

Find The Parity Outlier
- javascript filter練習
考慮
- 陣列的總個數會影響加總最後是奇數還是偶數的結果
  - 偶數個奇數相加會變成偶數
測試
- 針對奇數個數的情況進行確認
- 測試順序互換是否影響最後的結果

function findOutlier(integers){
   let evenNum = 0, oddNum = 0;
   for(let i=0; i<integers.length;i++) {
      if(integers[i] % 2 == 0) {
         evenNum++;
      } else {
         oddNum++;
      }
   }
   return integers.filter(val => {
     val = val < 0 ? -val : val
     return (val % 2==0 && evenNum == 1) ||
            (val % 2==1 && oddNum == 1)
   })[0]
}

Test.assertEquals(findOutlier([ 0, 2 ,-1]), -1)
Test.assertEquals(findOutlier([1, 2, 3]), 2)
Test.assertEquals(findOutlier([2,6,8,10,3]), 3)
Test.assertEquals(findOutlier([0,0,3,0,0]), 3)
Test.assertEquals(findOutlier([1,1,1,0,1,7,7,1]), 0)
Test.assertEquals(findOutlier([17,6,8,10,6,12,24,36]),17)

2018-12-07

NPM Portable

情境:

為了在不同的電腦都能使用nodejs搭配sublime text 3開發,如果是windows系統可以嘗試以下步驟:

配置:

先在官網下載最新的nodejs zip
https://nodejs.org/en/download/
解壓縮後,切換到資料夾下確認版本
node -v
npm version:查看所有版本號
設定環境變數
- echo %PATH%
- set PATH=%PATH%;%cd%
- 當前解壓縮後的nodejs路徑
sublime text 3

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

https://packagecontrol.io/installation

Edwardyi Blog

To go forward you must backup