---
# System prepended metadata

title: '[LOG]_Side-Project'

---

# [LOG]_Side-Project
 
![](https://img.shields.io/badge/Created_Date-26_Feb_2022-orange)  [![hackmd-github-sync-badge](https://hackmd.io/wo8sk25aQUqPwGId58DCXA/badge)](/wo8sk25aQUqPwGId58DCXA?edit)
 
![](https://i.imgur.com/97AFS5b.png)

---

[TOC]

---

## Round-AM

### [10:30]_Start

- Why
    - Career
    - 了解框架、模組、語言
    - 總是有很多 idea ~~-> 幻想能成為 richman~~
    - 自動化很方便 ~~（我就懶）~~
    - 不想被上班使用的語言框住，讓自己可以不斷學習

---

### [10:40]_分享-May

- 目標：找工作

- `React`
    - 縮網址的專案

- 遇到困難
    - `Google`

- 參考資料
    - `frontendmentor`

> 
> - https://www.frontendmentor.io
> 

---

### [10:49]_找靈感


---

### Free-AM

#### [11:00-13:00]

---

## Round-PM

### [13:00]_Lightning-talk

#### Victor

- `Spotify`- 自動切換歌曲
    - `token`
    - copy sample code



---

#### Ruby

- T2-1
    - 類似 `TODO-list`
    - 新增、刪除

- 排版苦手

---

#### Mike

- T2-3
    - review

- 練習象棋排版

> - 感覺圍棋比較容易

---

#### Chris

- T2-1

- Personal Portfolio
    - React
    - first landing pages

---

#### armo

- 畢業仔

- 網頁遊戲
    - 足球
    - first 先構圖

- 命名苦手
    - 想從設計方面開始下手

---

#### B0

- T3

- 還在找遊戲的靈感
    - connect14
    - Youtuber

- 這禮拜練習 memory game
    - 覺得邏輯比較弱
    - 喜歡排版

---

### Charles

- 先有想法
    - 購物車

---

### Angela

- T2-3

- 蒐集資料
    - 覺得溫度計很有趣
    - 想要做小東西
    - 還在思考


---

### Connor

- T2-1

- 還沒想到
    - 可能先靜態排版

---

### Neil

- T1

- 主要想練習排版的部分

- `Wix`
    - 有很多模組
    - 雖然是本科系出身的
    - 之前工作室接案的攝影助理
    - 也有網頁設計
    - 所以找相關的範例
    - 想找複雜一點的 `JavaScript`

> - https://themeforest.net

---

### Free-PM

#### [13:30-17:00]

---

## Round-Finale

### [17:00]_Share

- 踏出小步就可以了
    - 從滑板車開始先能使用

#### Victor

- playlist
    - group

- `Spotify`-`API`
    - 換歌很像被別人卡掉
    - 網路不好就沒辦法換歌
    - 下次想換成 `mp3`

- 以及未來的計劃

---

#### Chris

- 先放在 `GitHub`
    - 後來解決了


>
> - `Bikeshedding`
> 


#### Ako

- 也常常會把事情放在小地方

- 圓角跟陰影會做
    - 但卡在 `padding`、`margin`
    - https://codepen.io/yuh0206/pen/LYOJegM

- 今日也是有發現小收穫

> https://codepen.io/yuh0206/pen/LYOJegM 問題：如何消除h3和p之間多餘的空白~還有如何讓最底下的文字(challenge~)的部分跟中間的圖片呈垂直狀態~ 原本的project連結：https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H

#### Ruby

- 推到 Github pages

---

#### armo

- 畫面先排出來
    - 想要有 `RWD`
    - 但先延後

- 先往 `JavaScript` 的方向走


#### Naomi

- `Bootstrap` 
    - 黑暗料理展示

---

#### Cornor

- 大富翁網頁版
    - 先排版


---

#### Ara

- 剛好要做畢業作品
    - 打工換宿的平台

- 目前先畫框線稿


#### Rachel

- 網路不太好QQ
    - 會後再貼去 Slack


#### May

- 幫之前的專案加入臉書登入的功能

- 找了套件不太實用
    - 要重新整理才會出現
    - 而且無法登出
    - https://www.npmjs.com/package/react-facebook-login
    - 3 年沒有維護的不太適合使用惹

- 後來找官方的文件

> - 同學：firebase

---

#### Neil

- 用自己拍的作品放到網頁上
    - ~~FULL FULL FULL Stack Engineer~~


---

### Mike

- 先做了一半
    - 用網格系統

- 卡在想把真正的線條印上去
    - 順便練習排版



 


---
---


## Notes

### AM

>
> - [#Free-AM](#Free-AM)
> 

- [x] 整理筆記與資源
- [ ] 構思要做什麼

---

#### AC

- 統整同學們的分享
    - https://hackmd.io/@ac-let-s-study-together/S1ZeUSIxc

- 很強的同學
    - https://tzynwang.github.io/archives/
    - https://codepen.io/Kate-Chu
        - https://medium.com/@amber.fragments/2022-daily-coding-challenge-35f753e9ea2c

- 可參考的資源
    - https://backendflow.tech/coding-side-project-ideas/
    - https://www.frontendmentor.io




---

#### if-sad-send-cat 

>
> - https://healeycodes.com/when-im-sad-my-computer-sends-me-a-cat
> 


#### 工具類

- 及時推播訊息（試用期：30 日）
    - https://pushover.net

- random-API
    - https://randomuser.me/api/
    - https://api.thecatapi.com/v1/images/search

- HackMD
    - https://hackmd.io/@hackmd-api/developer-portal/https:%2F%2Fhackmd.io%2F@hackmd-api%2FrkoVeBXkq


### PM

>
> - [#Free-PM](#Free-PM)
> 


![](https://i.imgur.com/w2XysST.png)


- 為何不是從輪子開始？
    - 因為要看目標是什麼

- 滑板車、汽車 ➜ 可以懶得走路
    - 雖然沒有做出汽車
    - 但滑板車也能提供類似的功能 ➜ 懶得走路

- 目標 ➜ 想解決哪些問題

---

#### 【想解決哪些問題】

- 看線上影片時，可以方便做筆記


#### 【目前有哪些類似的工具】

>
> Clarity notes 最簡潔快速的 YouTube 邊看影片邊寫筆記工具
> https://www.playpcesor.com/2021/11/clarity-notes-youtube.html
> 

- 如何改造：能否讓這個工具支援別的影音平台？
    - 結果找到了
![](https://i.imgur.com/Aj79jbz.png)


>
> Beastnotes ▪ Take notes for online courses
> https://chrome.google.com/webstore/detail/beastnotes-%E2%96%AA-take-notes-f/ijdbgcbejbmcfcglmbahkfpadjbebgal
> 

- 試用 `Beastnotes` 
    - 有符合自己的需求嗎？
    - 大概有 8 成了
        - 還有哪些可以改造的部分？


#### `Beastnotes` 

- 可以改善的部分
    - 免費仔只有 3 則可以用
    - 而且即便訂閱了，也不知道新創公司何時會倒閉
    - 筆記放在上面不夠保險
    - 最後還是會把筆記備份出去

- 所以要做什麼？
    - 【A】：複刻 `Beastnotes`
    - 【B】：讓 `Beastnotes` 用起來更懶人


#### 【現階段可以做的事情】_B

- LV.1 ➜ 用腳本寫出【漂浮按鈕】
    - 點下去會自動複製文字框裡面的筆記內容
    - 讓使用者可以貼到愛用的筆記軟體裡面
        - `Obsidian`, `Evernote`, `Bear`, `OneNote`...
        - 不用擔心資料被公司綁架

- LV.2 ➜ 點下按鈕之後
    - 可以把文字傳送到 【HackMD】 自動備份成筆記

>
> - 【HackMD】_API
> 
>   - https://blog.hackmd.io/zh/blog/2022/02/11/api_beta_zh
>     - https://documenter.getpostman.com/view/68277/UVeNmhpT
> 

