發表文章

Uploading Files via preSignedUrl to S3 buckets directly on AWS in JavaScript

圖片
This post is about if you are going to do uploading files in JavaScript via preSignedUrl to S3 bucket directly on modern browsers, then something you should know before doing it.

1. There is a preflight (OPTION) request before your PUT request. This is a basic know-how you should know. A non-simple request will send a preflight request to check the request is safe or not for a CORS (Cross-origin resource sharing) request.

And it's interesting that AWS had a bug with it a few years ago.
draganbajcic,

Thank you, and everybody else, for the report. You are correct that pre-signed requests returning an error on the initial OPTIONS request. We are working on this issue and expect to add this support shortly. I don't have a timeline for the availability of the change but I will update this thread with more information when I have that. If you have any follow up questions let me know.

Thanks,

Carl 2. Configure your S3 bucket's Response headers to allow CORS. For modern browsers,…

An Interesting Query for Google Maps App, ibp=gwp;0,7

圖片
Couple weeks ago, my friend sent us a message in our chat group. It was a link to indicate a restaurant that we are going to have dinner days after.

And here is the link,
https://www.google.com.tw/search?client=ms-android-samsung&noj=1&hl=zh-Hant-TW&v=6.9.36.21.arm64&biw=411&bih=731&entrypoint=sh/x/kp/local&q=%E7%BE%8A%E9%9C%B8%E5%A4%A9%E4%B8%8B%E7%BE%8A%E8%82%89%E7%88%90&ludocid=16397036703207802694&ibp=gwp;0,7&kgs=c51d9d8d742e15e9&shndl=-1&source=sh/x/kp/local If you tap the link above on your laptop's browsers, you will get this,
Yep, it's a Google's 404 (Page Not Found) page.

But my friend insisted that he can see the page without any issues.

So, I turned on the developer console of Chrome and toggle the device toolbar to switch the devices.
BINGO! The same link, the same page shows up correctly!


Why?

I had some quick research by changing the User-Agent and found out the special query parameter,
ibp=gwp;0,7 And there are two …

10 天隨性地遠端工作小旅行 in Japan

圖片
上上禮拜一 (10/24),也是得知隔天生日卻要加班的日子 (哭)。由於工作上一年來緊迫的時程壓力,加上兩個甜蜜的小負擔把我壓得有點喘不過氣,任性地在徵求老婆的同意後,快速地在網上訂了票,再將兩個可愛的小搗蛋丟包委託給家人,就自已一個人跑到日本找日本人妻的老姊跟姊夫,過著一邊忙著將產品上線,一邊忙著用剩餘時間跟老朋友敘舊和呼吸東京日常特殊(乾燥)空氣的遠端上班族日子。

[ReactJS] 改變 state 要寫在 action creator 裡還是 reducer 裡?

圖片
雖然從兩年前就知道 React 了,但是直到最近這兩個月才真的有機會把它用在 production 上,忙碌的寫 code 人生中也學到了一些有趣的東西。上禮拜有幾個值得記錄下來避免忘記的討論,其中我覺得最重要的是一個是:「改變 state 要寫在 action creator 裡還是 reducer 裡?」,所以在很久沒寫網誌的情況下,還是努力對抗懶惰蟲給寫完了,希望各位先進前輩指導交流。

先提一下我們基本的 stack 是 ReactJS + Redux + redux-saga,所以下面的範例也是以這樣的基礎上敘述,同時避免文章落落長導致結論沒人看,先說我們最後的結論是
reducer 負責 state 的變化,如果有牽扯到 async 的 API 呼叫 (side effects),則是在 redux-saga 這層裡面處理。

如何在程式化腳本 (shell script) 內忽略異常錯誤結束 (exit(1))

圖片
最近在試著改善及整合公司其中一個專案的多國語系 (I18N) 自動化流程 (沒錯,又是熟悉的 I18N 好朋友)。除了根據現有的開發流程進行客製化的設計外,一路從開發、驗證、上線,每一個環節都需要考慮到流暢度與困難點,所幸有一些先前的小經驗,不過最後還是整整花了相當充實的三天半左右才完工。

在撰寫自動化流程腳本時遇到了一個有趣的小問題,解完後我覺得這問題雖然小卻也挺有意思的。於是我隔天就提出來跟公司的同事們一起討論,在產生了一些腦力激盪的小火花後,決定花點時間把問題和解法寫出來,一方面替很久沒寫的網誌灌灌水,另一方面則是希望拋出了這塊小磚後,會有一些不一樣,甚至更好、更有趣的大玉會冒出來一起討論。

問題 有一個 shell script 裡面執行了三個指令:
git add .git commit -m "blahblahblah"git push 唯一的條件是:這個 shell script 不允許有任何的異常錯誤發生,因為有異常錯誤發生會中斷這個 shell script,也就是在運行指令時都必須要是 exit(0) 才可以。所以也可以想成 shell script 是長這樣: function run_cmd(){
git add .
git commit -m "blahblahblah"
git push
}
run_cmd()
ret=$?
if [ $ret -gt 0 ]; then
    echo "Error!"
fi 
所以問題點在哪?

假設這個 script 在執行過 1. git add . 後,repo 裡並沒有任何檔案有被更改,正常來說,在執行 2. git commit -m "blahblahblah" 時 git 就會丟出類似下面這樣的訊息:
On branch master
Your branch is up-to-date with 'migme/master'.
nothing to commit, working directory clean 因為 git 發現沒有檔案可以 commit 後拋出了 exit(1) 異常結束 (可以用 echo $? 查看得知),最後進而導致 script 接到錯誤產生也異常結束。

於是,要…

用 Charles Proxy 編修前端程式 (JavaScript, CSS, Images, etc) 而不用去碰後端程式

圖片
年初加入了一個在東南亞頗具知名度,但在台灣卻沒啥人知道的社群網站公司 -- migme。目前擁有逾九千萬使用者、月活躍使用者數 (MAU) 大於兩千四百萬的 migme,後端 (Backend) 程式經過多年的演化後可謂極其複雜,不僅選用的程式語言相當廣泛,裡頭的商業邏輯與需要相容的平台很容易就可以讓一位有經驗的程式設計師感到挫折。(我們持續有在徵才,總部目前設在新加坡,年假起跳 20 天喔,歡迎一起來玩,啾咪 >_^ )

儘管我們已經用了 Vagrant (嗯,請不要問為什麼沒用 Docker,因為 Vagrant 是在 Docker 之前最紅的),努力整合所有的服務 (services) 到 Vagrant 的映像檔 (Image) 裡,試著減低捱過新手村的門檻,但是偶爾還是會因為像是某個 Library 版本不相容,或系統版本沒更新等等一些雜七雜八的事情,躲藏在暗處的小惡魔就會偷偷出來咬一口,這一口通常可大可小,一旦出現,可就會讓前端 (Frontend) 工程師或新加入的同事,耗掉一個下午或一整天時間來除這些可能跟前端完全沒關係的蟲了。

也就因為這樣,使我們依舊把成功執行開發環境視為一種成就,也是證明自己從超新手進階到新手的第一個獎盃。

那麼,該怎麼解決前端工程師的痛呢?

[開箱] Panasonic RULO MC-RS1 使用心得與評價

圖片
上個月因為全家的心血來潮,在日本料理店慶祝完老爸的生日後,突然買了機票,決定一個禮拜後飛往日本東京家庭旅遊,先不說那時候才五個月大的小傢伙的護照問題,在連證件照都還沒拍、飯店都還沒著落就訂了機票這種衝動的事情,實在有種大學時代突然就夜衝的熟悉感。

回到正題,由於這次去東京花了一筆不小的金額購買了一台小媳婦掃地機器人(折合台幣約兩萬三千元左右),在使用一個多月後,決定來分享一下使用心得,以便讓不知道該型號(Panasonic RULO MC-RS1)優缺點的朋友有個參考依據。

註:由於購買時沒有比價又趕時間,在秋葉原 Yodobashi 買到的價錢比之後亂逛 價格.com 查到的含稅價格貴了大約一萬五千元日幣左右,所以如果沒有未稅的話,大約被貴了兩萬元日幣,之後我應該不會再到 Yodobashi 買電器了......