2023/10/01

2024年React state management趨勢

輕量化


在過去Redux 是 React 狀態管理的首選函式庫。 Redux 提供了強大的功能和靈活性,但也帶來了一定的學習成本和複雜度。 隨著 React 生態的不斷發展,越來越多的開發者開始追求輕量化的狀態管理函式庫。

Zustand 和 Recoil 等庫以其簡單易用、性能優異等特點,受到了越來越多開發者的青睞。 Zustand 使用 React Hooks 來管理狀態,開發者只需了解 React Hooks 就可以使用 Zustand。 Recoil 使用 React 的預設狀態管理機制,開發者只要使用 React 的狀態管理 API 就可以使用 Recoil。

非同步處理


非同步處理在現代 Web 開發中越來越普遍。 Redux Toolkit 和 Zustand 等函式庫都提供了完善的非同步處理支持,可以幫助開發者簡化非同步狀態管理的開發。

Redux Toolkit 提供了一系列非同步處理工具,如 useSelector()、useAsync() 和 useDispatch()。 Zustand 提供了 useState()、useSelector() 和 useEffect() 等 API,這些 API 都支援非同步狀態。

視覺化工具


視覺化工具可以幫助開發者更直觀地理解和管理狀態。 Redux DevTools 和 Recoil DevTools 等工具可以幫助開發者更好地偵錯和最佳化狀態管理程式碼。

Redux DevTools 可以幫助開發者查看 Redux Store 的狀態,並追蹤狀態的變化。 Recoil DevTools 可以幫助開發者查看 Recoil 狀態樹,並追蹤狀態的變化。

2024 年 React 狀態管理的趨勢是輕量化、非同步處理和視覺化工具。 隨著 React 生態的不斷發展,這些趨勢將會更加明顯。

2021/11/27

Dropbox: 簡單的檔案同步、備份、分享軟體

1. Dropbox超好用!

以往在工作場合中需要備份各式各樣的檔案時,總是需要隨身碟到處去複製。以我自己為例,我常要將開會的簡報下載到家裡,再做修改等動作,但常常因為忘記哪一份才是最新的版本而造成極大的不方便。而Dropbox就是因應這樣的需求而產生的雲端計算軟體,它可以自動的同步多台電腦之間的檔案,而且可以穿越公司防火牆,使用上完全沒有門檻,設定相當簡單快速。
https://www.dropbox.com/static/16218/images/logo.png
Dropbox的特點有:
1. 可以在Windows, Mac, Linux, iPad, iPhone, Android, BlackBerry運行。
2. 不用每台電腦一起開機,伺服器會儲存資料,等其他電腦一開機,就會自動同步。
3. 檔案傳輸都是經過加密,不怕被竊取。
Dropbox的3大應用:
1. 自動同步、備份多台電腦的檔案
2. 透過網頁分享大型檔案給同事
3. 透過網頁分享照片集
PS:版主還試過其他的同步備份軟體,很多都要錢,不然就像MS出的Live Mesh只能在Windows 7上跑等限制。Dropbox算是簡單、沒什麼限制的軟體,強力推薦!

2. 一步一步教你設定Dropbox!

2.1 首先先到DropBox註冊新帳號
新建Drop帳號
2.2 下載DropBox,並且依照一般安裝程序,一直按Next即可
Dropbox (1)
建完帳號後,網頁會自動跳到自動下載頁面
2.3 設定Dropbox相關參數
Dropbox (2)
因為已經有帳號,選擇第2個選項,可直接登入

Dropbox (3)
這邊的computer name可以自行決定不同電腦的名稱,
比如這是家裡的電腦,我就設為home
 
Dropbox (4)
設定網路磁碟容量,選擇第一個2GB的免費方案
 
Dropbox (5)
如果要自行設定同步資料夾的位置,選擇Advanced

Dropbox (6)
這邊就可以設定同步資料夾,按下「Change」選擇D:\
這就他就會建立一個「D:\Dropbox」資料夾,以後就在這裡做同步

Dropbox (7)
由於「D:\Dropbox」底下還是可以有多個資料夾,
這邊是選擇備份「D:\Dropbox」底下所有的資料夾

Dropbox (8)
然後經過多個Next,最後就在按下Finish,完成設定囉!

3. 開始使用Dropbox!

3.1 一般檔案自動同步、備份到多台電腦
以後只要開啟桌面圖示:  Dropbox (10),就可以開啟備份的資料夾。
在那個資料夾所做的任何動作(新增、修改、刪除檔案)都會反應在各電腦上。而已經同步的資料夾或檔案會以藍色顯示,這時候Dropbox就會自動開始將檔案備份到伺服器,當你其他電腦有開機時,它就會將最新的資料同步過去,完全不用而外設定。
Dropbox (12)
這裡新建一個資料夾,藍色的標誌代表尚未同步
等待一段時間後,就會變成綠色,代表同步完成!
3.2 與你的朋友分享大型檔案
除了透過「網路的芳鄰」在同一個區域網路分享檔案外,Dropbox提供了一個更簡單,完全不用設定的分享檔案機制。而且,它是透過一般網頁下載的方式,即使你朋友遠在地球另一端,一樣可以分享喔。
在要分享的檔案上按右鍵, 選擇「Dropbox」->「Get link」,這時候下載網址就會被複製好了,直接把網址傳給你朋友就好了! PS:要等待檔案傳輸完成,下載網址才會生效。
image
Dropbox分享檔案的功能
3.3 透過網頁分享照片集
在同步的資料夾「D:\Dropbox」,裡面的「Photos」就是可以公開分享照片的資料夾:Dropbox (11)
比如裡面已將有一個內建的資料夾「Sample Album」,你也可以自行建立其他相片集名稱(就是資料夾名稱)。  Dropbox (14)
這次則是在資料夾上按右鍵, 選擇「Dropbox」->「Copy public gallery link」,相片集網址就複製好了喔!
Dropbox (15)
Dropbox分享相片集功能
Dropbox (16)
把它貼上瀏覽器,就可以看到照片囉!真的太方便啦!

2021/03/26

台灣好行:後慈湖、大溪老街半日遊

要搭台灣好行慈湖線(票價100)的朋友,可以在【中壢火車前站】出口,往左邊直走5分鐘到【桃園客運總站】搭乘。搭車到最後一站【慈湖】後可以看到導覽服務站。後慈湖算是管制區,需要先上網申請才可以進入,如果是搭台灣好行的話,可以直接在服務站登記候補。假日通常都是人滿為患,建議如果沒有預約的朋友,最好早一點到,看哪一個梯次有名額直接報名,最晚一梯是下午1:45喔~

 

SAM_1175

等待往後慈湖的梯次的時候,可以在慈湖走走。

SAM_1177

SAM_1183 SAM_1184

滿滿的蔣公銅像,晚上應該會嚇死人吧XD

 SAM_1185 SAM_1190

等買完後慈湖的票後,服務站前面就備有交通車可以直達百吉隧道。接著志工會開始帶大家慢慢爬上去,路程1.8公里,邊走邊講解路邊的植物大概花了1小時,終於到了傳說中的祕境之南-後慈湖......的路口

SAM_1198

祕境之南-後慈湖

SAM_1201

路邊的靈芝不要採,有毒阿~

SAM_1217

傳說中蔣公的狗,一直堅守其崗位,365天都不曾休息.....其實這是樹幹啦XD 

SAM_1218

慈湖之眼,不過下雨看不到倒影,殘念阿~~

SAM_1224

看看慈湖之眼的照片也好

SAM_1226

路途滿長的,累了可以到園區的咖啡聽坐坐喔

SAM_1239

SAM_1242

下山後馬上就可以看到陵寢,好天氣的時候可以看到交接表演 

 

SAM_1261

回到慈湖了

接著一樣坐台灣好行到大溪老街

SAM_1264

古色古香的大溪老街

 SAM_1267

巴洛克式建築

SAM_1269

2013-06-12 16.59.27

滷味是不是看起來很好吃呢。ㄜ....,來大溪我怎忘記點豆干呢

2013-06-12 17.12.43

月光餅一個20元,有點小貴,口感像是麻糬,最熱門的是抹茶口味

SAM_1276 大溪老街有二家賣麥芽糖的店家,我覺得吃起來差不多。吃起來甜而不膩!

2014/05/17

4種PDF轉Word的免費方法(pdf to word, pdf to doc, pdf2word, pdf2doc)

本文將介紹4種將PDF轉Word檔的方法,分別分析其效能、方便性、精確性等指標。

1. nitropdf提供的線上 Convert PDF to Word (DOC)

這是一個線上免費PDF轉Word檔的服務,網址:http://www.pdftoword.com/
選擇你要轉的PDF檔案:
pdftoword
選擇要輸出的格式:
pdftoword (1)
填入你的email,將「Receive PDF to word news」取消,並且按Convert,過一段時間後,去信箱檢查轉好的word(doc)檔案。
 pdftoword (2)
優點:免安裝軟體(網頁版)、免費
缺點:時間較慢、一次只能轉一個檔


2. pdfonline提供的線上PDF2Word Online: Convert PDF to Word for Free


這也是一個PDF轉WORD的免費線上工具。但是不用提供你的Email給對方,可以直接下載轉好的WORD檔。網址為:
按「瀏覽」選擇要轉的PDF檔案,接著按下「Upload and Convert」啟動PDF轉WORD轉換程序:
PDF to Word
PDF轉WORD的期間會出現這個畫面,不要關掉此視窗:
PDF to Word (1)
最後會出現PDF轉WORD成功的畫面,點選「Right-click here」即可下載:
優點:PDF轉WORD時間快、不用提供Email、免安裝軟體(網頁版)、免費
缺點:一次只能轉一個檔


3. Wondershare PDF to Word Converter(推薦)


AnyBizSoft PDF to Word 是一個易於上手的工具程式,專門將 PDF 格式的檔案轉換為 Microsoft Word 文件檔案 (.doc 和 .docx) 。只需按一個按鍵,便能輕易的把唯讀的 PDF 檔案轉換成可修改的 Word 文件檔案。 轉換成的 Word 文件檔案,可完全保留原始檔案的頁面佈局、文字內容及圖片。 PDF to Word 可同時間轉換最多 10 個 PDF 檔案,另外,你亦可在轉換時選取 PDF 檔內的某一頁碼。
更多介紹:Wondershare PDF to Word Converter.

最好用的PDF轉Word工具跟藏經閣合作:現在只要在這篇FB留言https://www.facebook.com/twcsie/posts/769416453077635,就有機會在2014/5/31抽到一組免費正版序號(終生)

軟體下載Wondershare PDF to Word Converter:
  1.  官方網站下載(最新)
使用方式也非常簡單,只要把PDF打拖曳進程式,按下"Convert"按鈕,就可以轉成WORD檔了。
csie-tw.blogspot.com (1)
效果如下:左邊為原始PDF檔,右邊為轉換後的WORD。
csie-tw.blogspot.com
優點:速度快、轉檔正確性高、支援中文、可以批次轉檔(一次轉多個PDF檔)。
缺點:需要申請免費註冊碼。

4. Free PDF to Word Doc Converter

Free PDF to Word Doc Converter是一款完全免費、免序號的PDF轉WORD軟體。下載點:http://www.hellopdf.com/files/pdf2wordsetup.exe
在左上角選擇你要轉的PDF檔案,接著按左下角的「Convert to Word Document」即可完成。不過經版主測試後,發現Free PDF to Word Doc Converter對中文不支援。
Free PDF to Word Doc Converter
優點:免費、免序號申請
缺點:中文不支援


四大PDF轉Word的方法評比

  1. 如果你臨時有PDF轉WORD的需求時,但是電腦又不能安裝軟體時,建議使用pdfonline提供的線上工具。轉換速度快,又不用提供Email,快速又方便。
  2. 如果你想要大量快速轉檔,還是安裝AnyBizSoftPDF to Word Converter ,轉換精確、速度又快,不會出現pdf轉word亂碼問題。竟然有免費續號可以申請,也不必pdf轉word破解下載,就花點時間免費註冊吧!

PDF推薦文章:

簡易製作PDF文件-BullzipPDFPrinter
PDF Split and Merge(PDF分割與合併)

2014/05/07

(市面上最好用PDF轉Word) Wondershare PDF to Word Converter簡易操作教學

Tags: PDF2Word Online,將PDF轉Word檔,ConvertPDFtoWord,Doc 轉換為 PDF,線上免費PDF轉Word檔,PDF-to-Word,pdf 破解,pdf轉jpg,pdf轉word檔,pdf轉word軟體下載,線上pdf轉word,pdf轉word免費,pdf轉word檔免費下載,pdf轉word亂碼,pdf轉word破解,pdf轉word破解下載


最好用的PDF轉Word工具跟藏經閣合作:現在只要在這篇FB留言https://www.facebook.com/twcsie/posts/769416453077635,就有機會在2014/5/31抽到一組免費正版序號(終生)

Wondershare PDF to Word Converter是一個易於上手的工具程式,專門將 PDF 格式的檔案轉換為 Microsoft Word 文件檔案 (.doc 和 .docx) 。只需按一個按鍵,便能輕易的把唯讀的 PDF 檔案轉換成可修改的 Word 文件檔案。 轉換成的 Word 文件檔案,可完全保留原始檔案的頁面佈局、文字內容及圖片。 PDF to Word 可同時間轉換最多 10 個 PDF 檔案,另外,你亦可在轉換時選取 PDF 檔內的某一頁碼。
當要修改或整理一些 PDF 檔案時,發現原稿遺失了 ! 但卻因為PDF檔案的唯讀性而變得束手無策。想要剪貼取得內容,重新製作,也許要花上幾個小時,甚至幾天時間,也浪費不少精力。現在有了 PDF to Word,事情就變得簡單了!

PDF to Word是一套易用、省時又高效率的軟體,是專為 PDF 格式的檔案轉換為Word 文檔 (.doc 和 .docx) 而設計。您只需要按一個鍵,就能輕易地把唯讀的 PDF 檔案轉換成可修改的 Word 格式文檔。
轉換成的 Word 文檔,能高度保留原檔的頁面佈局、文字內容及圖片。 PDF to Word 可以同時轉換高達 10 個 PDF 檔案,另外,你也可選取 PDF 檔內的某一頁作轉換,十分方便。
容易使用的介面
  • 單一操作介面
  • 所有設定均可在操作介面內進行設定。
支援格式
  • 支援輸入 Adobe PDF 1.0 - 1.7 格式 (.pdf);支援已加密的 PDF
  • 支援輸出 MS Word 2003-2013 格式 (.doc, .docx)
匯入的 PDF 檔案
  • 支援在同一時間來匯入最多 10 個的 PDF 檔案
  • 支援拖拉動作,PDF 檔案可被直接拖拉至程式中
轉換
  • 批量式轉換 ── 可在同一時間轉換多個 PDF 檔案
  • 部份轉換 ── 使用者可選取 PDF 檔內的某些頁碼來轉換
  • 快速轉換 ── 在一個 PDF 檔案上按鼠標右鍵彈出功能表再選以 AnyBizSoft PDF to Word 轉換, 而不用開啟主畫面
  • 管理匯入檔案 ── 使用者可以隨意決定匯入檔案轉換的優先次序及移除被錯誤匯入的檔案
  • 高速 ── 轉換的速度快捷。在轉換過程中,會有進度指示器顯示個別的檔案轉換進度
良好的保存
  • PDF to Word 可保留 PDF 原檔的頁面佈局、文字、列、表及圖片。而不需要重新編輯匯出的檔案。
檔案檢視
  • 匯入的 PDF files 可在轉換前於預先安裝的 PDF Reader 預覽。
  • 轉換後,使用者可直接開啟轉換檔案或在輸出資料夾打開檔案。
(以上文字介紹來源:軟體王)。

操作方法

最好用的PDF轉Word工具跟藏經閣合作:現在只要在這篇FB留言https://www.facebook.com/twcsie/posts/769416453077635,就有機會在2014/5/31抽到一組免費正版序號(終生)
軟體下載Wondershare PDF to Word Converter:
  1.  官方網站下載(最新)
使用方式也非常簡單,只要把PDF打拖曳進程式,按下"Convert"按鈕,就可以轉成WORD檔了。
csie-tw.blogspot.com (1)
效果如下:左邊為原始PDF檔,右邊為轉換後的WORD。
csie-tw.blogspot.com
PDF推薦文章:
4種PDF轉Word的免費方法
簡易製作PDF文件-BullzipPDFPrinter
PDF Split and Merge(PDF分割與合併)

2013/11/04

[ExtJS] 選取textfield部分文字

如果你想要用程式的方式去選取textfield裡特定的文字,各瀏覽器有自己的實作方法,我們使用ExtJS包裝起來,方便開發者使用。

使用案例:
我們使用ExtJS做一個FTP client,在實作"建立新資料夾"的功能時,將會跳出一個Window,裡面包含了一個path field。
參考Filezliia的做法,假設原本的資料夾叫foder1,它會在其後加上/New_Folder當作是新的資料夾名稱,並且會將New_Folder反白起來。因此,使用者可以直接使用這個資料夾名稱。或者直接輸入自定的資料夾名稱,原本預設的資料夾名稱則會被取代。


實作程式碼:
Ext.define('Ext.enhance.form.field.Text', {
 override : 'Ext.form.field.Text',
 selectText : function(start, end) {
  var field = this.inputEl.dom;
  if (field.createTextRange) {
   var selRange = field.createTextRange();
   selRange.collapse(true);
   selRange.moveStart('character', start);
   selRange.moveEnd('character', end);
   selRange.select();
  } else if (field.setSelectionRange) {
   field.setSelectionRange(start, end);
  } else if (field.selectionStart) {
   field.selectionStart = start;
   field.selectionEnd = end;
  }
  field.focus();
 }
});

使用範例:
Ext.define('TonyTuan.CreateFolderWin', {
     extend : 'Ext.window.Window',
     width : 300,
     layout : {
           type : 'fit'
     },
     title : 'Window',
     initComponent : function() {
           var me = this; 
           me.defaultFocus = 'path'; // set focus before call selectText() 
           me.items = [ {
                xtype : 'form',
                bodyPadding : 10,
                layout : 'anchor',
                defaultType : 'textfield',
                items : [ {
                     fieldLabel : 'path',
                     name : 'path',
                     itemId : 'path'
                } ]
           } ];
           me.callParent(); 
           me.on({
                // set default value for path
                show : function() {          
                           me.down('#path').setValue('folder1/New_Folder');
                          me.down('#path').selectText(6,18);         
                }
           });
     }
});

PS: 即使沒有要用selectText,養成設定defaultFocus的習慣,可讓使用者開啟視窗的時候直接輸入,不用再用滑鼠點擊field。

2013/08/21

[ExtJS] 移除File Field出現"No file chosen"(未選擇檔案)提示

當我在用js開發檔案上傳的功能時,我發現當File Field的欄位是空的時候,就會出現"No file chosen"(未選擇檔案)提示。我看了stackoverflow的一些解法,但沒有一個是成功的。



No file chosen
"No file chosen" tooltip

<html>
<head>
</head>
<body>
<input type="file" multiple/>
</body>
</html>



不過我用gmail附件功能時,發現的確是有辦法移除預設的提示,改用自訂的提示。



Gmail可以客製化檔案上傳提示



所以我花了一些時間去trace gamil的source code,發現那個Attach files”按鈕,只是一個div tag,當然可以自訂提示。但是div tag因為安全性因素,是無法trigger檔案選擇器的,一定要file input field才有這個權限。



但是為什麼gmail卻可以做到?其實呢,div tag只是一個wrapper,還是有一個file input field隱藏在背景的。一旦div tag收到click event,我們只要控制程式去trigger file input field的click event可以達到這樣的效果。然後只要在file input field聽onchange event,就可以知道user選哪些檔案了!



以下是ExtJS的範例關於file input field wrapper的範例:



Custom Tooltip for File Uploading in ExtJS



Ext.define('TonyTuan.BrowseButton', {
extend : 'Ext.button.Button',
icon : 'css/images/arrow_up_16x16.png',
text : 'Browse...',
constructor : function(config) {
var me = this;
config.tooltip = 'Attach Files'; // Show custom tooltip instead of "No file chosen".
me.callParent([ config ]);
},
handler : function() {
document.getElementById('upload-field').click(); // To trigger the file field click event
}
});

Ext.define('TonyTuan.FileGrid', {
extend : 'Ext.grid.Panel',
alias : 'widget.fileGrid',
title : 'Files',
store : 'File',
initComponent : function() {
var me = this;
me.columns = [ {
dataIndex : 'filename',
header : 'Filename',
} ];
me.tbar = [ Ext.create('TonyTuan.BrowseButton', {
itemId : 'browseButton'
}) ];
me.callParent(arguments);
}
});

Ext.define('TonyTuan.FilePanel', {
extend : 'Ext.panel.Panel',
title : 'Files',
layout : 'border',
initComponent : function() {
var me = this;
me.items = [ {
region : 'center',
xtype : 'fileGrid',
layout : 'fit',
flex : 3,
margins : '5 5 0 0'
}, {
hidden : true,
region : 'north',
xtype : 'component',
html : '<input type="file" multiple id="upload-field"/>'
} ];
me.callParent(arguments);
me.on({
afterrender : function() {
document.getElementById('upload-field').onchange = function() {
var files = document.getElementById('upload-field').files;
console.log('files', files);
// Add files to your fileGrid store
};
}
});
}
});

2024年React state management趨勢

輕量化 在過去Redux 是 React 狀態管理的首選函式庫。 Redux 提供了強大的功能和靈活性,但也帶來了一定的學習成本和複雜度。 隨著 React 生態的不斷發展,越來越多的開發者開始追求輕量化的狀態管理函式庫。 Zustand 和 Recoil 等庫以其簡單易用、性...