上傳圖片
純html＋JavaScript的圖片上傳功能很簡單，可以看這篇 How To Display Uploaded Image In Html Using Javascript ? 可是假設又有「拖曳上傳」需求的話，這篇就沒辦法滿足，所以用套件先擋擋...
文章 - 第 17 頁
react-select 小教學
react-select import React, { Component } from 'react' import Select from 'react-select' const options = [ { value: 'chocolate', label: 'Chocolate' }, ...
peerDependencies, devDependencies, dependencies
dependencies 跑這個程式需要的套件 devDependencies 開發的時候需要的套件，例如Jest之類的測試工具，但是執行的時候不需要（例如babel） peerDependencies 告訴安裝這個套件的人，需要自己安裝什麼套件 --save-dev 存到devDependenci...
npm 套件製作
6/16的時候開始研究怎麼做npm套件，爬了一些文章，發現網路很多文章沒有交代很多 細節，需要爬很多文章才知道怎麼做。 在babel編譯的過程中也蠻多問題的 如果使用create-react-app的話，babel的config這樣設定就好 "babel": { "presets": [ [ "re...
flex 必讀文章
A Complete Guide to Flexbox | CSS-Tricks A Visual Guide to CSS3 Flexbox Properties ― Scotch.io Flexy Boxes — CSS flexbox playground and code generatio...
promise
promise是一個根據你給的callback function回傳的物件 ．callback在目前的promise沒跑完前，絕對不會執行 ．在then()裡的callback，不管promise有沒有成功，絕對會執行 參考文章： Using Promises...
slick react jest
在react裡使用slick.js雖然簡單又方便，可是加入Jest snapshot test就錯誤百出了，亂試了一下解決方法。第一個錯誤解決了之後又有其它的錯誤。 第一個錯誤可以從issue看到有人也有一樣問題 Testing with Jest causes error #472 Jest te...
Jest手把手教學
首先開啟一個資料夾，乃做做Jest的測試。 mkdir jest-try 開啟好資料夾，在裡面開新專案 npm init -y 接下來就可以安裝Jest yarn add --dev jest 安裝好之後要幹麻？寫一個JavaScript檔案囉！ 開一個檔案叫 double.js function ...
storybook
利用storybook可以更直觀的知道元件在各種UI互動狀態下應該怎麼呈現！ 下面的那些就是stories啦！ 下面這三個就是它的test cases title（螢光筆劃線的地方）不能重複 title在這裡定義(export default是寫metadata的地方) Task.stories.j...
JavaScript var v.s let
const arr1 = []; for(var i = 0; i < 3; ++i) { arr1.push(() => i); } const arr2 = arr1.map(x => x()); const arr3 = []; for(let i = 0; i < 3; ++i) { arr...
2020面試心得
《華奧科技有限公司》 一開始先簡單的自我介紹一下，我覺得我在講工作的部份應該再講仔細一點， 例如前幾年比較多工作在切版、做特效，用jQuery維護網站， 這幾年用的是前端框架，學習它的ecosystem，也會不時上網查看新知 應該說明一下我除了工作之外還會多上網看有出什麼新東西… 1. React....
react-addons-update
react-addons-update 這個套件legacy嘍，要做新專案可以改用 immutability-helper 可以解決深淺拷𢭲的問題，這本書有寫一個應用例子： ReactJS by Example – Building Modern Web Applications wi...
deep copy & shallow copy
A deep copy means that all of the values of the new variable are copied and disconnected from the original variable. A shallow copy means that certain...
moment.js
const yes = moment().subtract(3, 'days').startOf('day'); const no = moment().subtract(1, 'days').endOf('day'); 最後面沒加 .format() 的話，出來的是物件，想要有字串或時間，要加上 ...
telegram 機器人使用
@Customize_Captcha_Bot 自訂型入群驗證 加入群組之後，記得輸入 /switch 機器人才會切換到你目前的群組 接下來新增問題，在機器人那邊打 / new 1.先輸入問題： 你是什麼？ 2.輸入選項： 天才 白痴 3.輸入答案: 白痴...
webstorm 怎麼看git
https://www.jetbrains.com/help/idea/adding-files-to-version-control.html 按 Alt + 9 或是按下面的Version Control 看Git版本控制的提示顏色不喜歡，也可以按快捷鍵 Ctrl + Alt + S 來修改… ...
讀書的小小心得
最近覺得一直狂寫代碼，也是會進步，但是也是應該要多讀點書。因為讀書是吸收，而寫代碼是把已吸收的實現出來…或者是邊讀書邊實作，但一般開發除非專案時程不急，不然不太能這樣做。讀書跟實作是應該相輔相成的。有空可以抽空出來多讀書，反省自己寫的好不好，能做些什麼樣的修改、下次可以試試哪種方式等等。...
React Tips
要設中斷點的時候，發現選第一個不對，要選第二個才行… 要挖洞的時候一定要記得開洞（例如傳 dots={true} 給 Slider的時候 <Slider {...settings} autoplay={autoplay} dots={dots}>...
面試心得
工作覺得遇到最難的地方是？ 我回答一些業務上的邏輯。 感覺可以再說些其它東西 1. 不同的手機會有不同的渲染，有時候顧客反應的問題，其實有可能是手機本身的問題，當然沒有那麼多的手機能去測試，可能需要估狗看看這個手機 2. 在網站跟在手機上的程式需求會不太一樣，例如有一次我負責開發web端，同事開發手...
react常見bug
ReactJS: Warning: setState(…): Cannot update during an existing state transition 在把function當props傳給子元件的時候，子元件要呼喚此function是要這樣叫：() => this.props.onHand...
Visual Studio Code tab縮排問題
發現縮排很大，在這邊調設定： Tab Size 改成想要的數字，我這邊改成２。然後點進去Editor: Detect indentation 假設它有打勾的話，把它勾掉，就可以嘍！ 再回頭來看看我的代碼…好，很好，很完美。...
Imperative Pattern vs Declarative Pattern
在讀JavaScript的時候，這兩個Pattern常常被提到，做了一下筆記。 假設我們要做一個包含很多人物的物件。 const characters= [ {name:'Curapica', age:15}, {name:'Killua', age:13}, {name:'Gon', age:12...
#100DaysOfCode react專案
Day 1, Dec 12 2019 目前不支援直接用create react app指令來創專案，前面要加個npx 詳見 https://create-react-app.dev/docs/getting-started/ A template was not provided. This is ...
Node with React 課程筆記
進度：3-17 Dec.5.2019 首先看教學說要新增一個資料夾，叫server，還要創一個package.json， 使用npm init -y來創造出package.json檔案。 這個指令就是 npm init –yes 的意思，可以省去按Enter的步驟。 參考閱讀： The ...
JavaScript sort()
const numbers = [1, 2, 4, 3]; numbers.sort(); // 1, 2, 3, 4 sort是一個不錯的方法，可以排順序，例如排商品的價錢、時間的遠近，又或是誰快生日了、誰的年紀最大…等等。另外也可以自己寫一個陣列order，處理中文字串的排序。 例如 const...
更新Node.js
Photo by Brett Sayles from Pexels 一開始是因為create-react-app這個指令不能跑，才來重新安裝一下node.js 首先確認node的版本，需要更新一下惹。 接著啟動魔法指令 npm install -g node 然後再檢查一次版本 噹噹～更新完成！！（...
React Patterns
來解析一個奇怪的pattern…我只能說我很少看過，所以覺得很怪。 const Width = ( { children } ) => children( 500 ); 這裡表示 width是一個function 這個function的參數也是一個function 就是children，...
潮到出水不得不用的My JSON Server
Photo by Krisztina Papp on Unsplash 如果後端一直拖著不給api…最好的方法就是 肛爆他們 自己做一個假的api！ My JSON Server 使用方法敲級簡單： 1.在自己的git repo上面新增一個檔案叫db.json 內容可以隨意自訂，一開始要測試就直接複...
react router 更新
本來想更新但發現出現錯誤訊息， 好像是eslint的關係 發現安裝eslint也會出現一樣的提示 查了一下eslint-config-airbnb@15.1.0這個關鍵字，找到它的官網 https://www.npmjs.com/package/eslint-config-airbnb 隨意爬了一下...
如何計算rem
Photo by Jan Piatkowski on Unsplash 首先呢，假如是負責既有的專案的話，就找它的html 的 font-size是什麼 現在負責的專案是10vw，所以就看目前的視窗大小（右鍵F12點body，會在左下顯示大小） 看了一下是1920，所以1920 / 10 = 192...