tag:blogger.com,1999:blog-312374572024-03-05T22:42:06.624+08:00ETBlue 外星人吟遊地球一隻慵懶的外星人,搭乘銀色的 wacom 繪圖板,在真空狀態下以肉眼搜尋座標不明的故鄉。ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.comBlogger219125tag:blogger.com,1999:blog-31237457.post-9186221896716844832023-10-10T01:57:00.003+08:002023-12-24T15:39:59.158+08:00從 Frontend Engineer 轉到 Feature Analyst 的一週年心得<blockquote><p>TL;DR 總結論<br></p><p>使用 as a - I want to - so that I can 的格式撰寫 user story,就不容易漏掉開發時需要的背景資訊,可以節省工程師反覆追問使用情境的時間</p><p>使用 cross-functional process flow 的格式繪製 user journey,就不容易漏掉 happy path 以外的操作邏輯,可以節省工程師反覆確認產品行為的時間(感謝強者前同事 19 教我這個招式)</p><p>使用 given - when - then 的格式撰寫 acceptance criteria,就不容易漏掉驗收時需要一併檢查的先決條件和分支路線,可以節省功能交付後才回過頭來東敲西補的時間</p><p>把 acceptance criteria 變成自動化測試的 test cases,就不容易記錯預期的產品行為,可以節省工程師翻閱 source code 回答 PM 問題的時間,也可以降低重構時把既有功能搞壞的機率</p></blockquote><p>去年中的時候,也就是我轉職前端工程滿四年<strike>無法再藉由自稱菜鳥來逃避責任</strike>的時候,因為團隊裡寫規格的人手不夠,開始兼任文件寫手的工作</p><h3 style="text-align: left;">團隊成長的代價<br></h3><p>轉職前端的頭兩三年,團隊很小,PO、QA、客服由<strike>同一條龍</strike>同一位同事擔任,任何事情問他就能得到最終答案。因為有這麼一個會走路的 single source of truth,開發過程中幾乎沒有寫文件的必要,同事從客戶那邊帶回新需求時,會找前後端一起討論,我出 wireframes 確認以後,大家就各自散開寫 code。當時這個<strike>以一條龍為祭品</strike> conversation over documentation 的模式,從工程師的角度看,覺得運作得蠻順暢的</p><p>後來團隊跟著產品一起出售,來到一間比較大的公司,產品變複雜分工變細,溝通協調的難度也跟著變高</p><p>首先遇到的問題,是層層轉達造成的資訊衰減。客戶的意見過了 N 手、抵達工程師這裡時,我們只知道「決定要做某某功能了」,但究竟是為了滿足什麼需求、要在什麼情境下被如何使用,這類脈絡性的資訊往往會遺失</p><p>除此之外,由於產品範疇變大功能變多,超過<strike>一條龍</strike>一個人可以負擔的程度,工作自然會被拆到不同人身上。當設計跟前端由不同人處理,對介面行為的認知就會有不同版本;當 PO 跟 QA 由不同人擔任,對驗收標準的認知就會有不同版本;隨著時間過去,每個人的認知還會漸漸變模糊。由於不再有人能擔任<strike>祭品</strike>產品規格的 single source of truth,單靠 conversation 的溝通就不容易收斂出具體的結論</p><p>於是,為了讓資訊不會在多次傳遞之後衰減或佚失,以及為了找回產品規格的 single source of truth,文件的需求就浮上檯面來</p><p><span></span></p><a href="https://etblue.blogspot.com/2023/10/frontend-engineer-feature-analyst.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-58072336811473116942021-05-28T18:36:00.001+08:002021-05-28T18:36:55.618+08:00g0v summit 2020 議程與 ⟪審稿小幫手⟫<p>去年因為跳坑議程委員的關係,要幫研討會的會眾們代客選修,每個選修工具人都要看完兩百多份稿件,而且這些稿件還會不斷新增和變更內容,因為數量太大、版本太多,單純開個試算表已經無法應付,因此替自己做了審稿工具。</p><p></p><ul style="text-align: left;"><li>開發歷程與功能介紹: <a href="https://twitter.com/ETBlue/status/1280194156816564224" target="_blank">https://twitter.com/ETBlue/status/1280194156816564224</a></li><li>原始碼: <a href="https://github.com/etblue/audit" target="_blank">https://github.com/etblue/audit</a></li><li>授權:MIT</li></ul><p></p><p>事後在 coscup telegram 頻道討論審稿流程的時候,得知 pycon 有超完整的文件,這種有條有理的做事方式,個人真的非常喜歡 😍</p><p></p><ul style="text-align: left;"><li>投稿指南: <a href="https://tw.pycon.org/2018/zh-hant/speaking/talk/" target="_blank">https://tw.pycon.org/2018/zh-hant/speaking/talk/</a></li><li>審稿指南: <a href="https://pycontw.github.io/reviewer-guidebook/reviewer-guide.html" target="_blank">https://pycontw.github.io/reviewer-guidebook/reviewer-guide.html</a></li></ul><p></p><p>原本想寫一篇完整的審稿心得文,不過因為豬血糕生病的關係,就只停留在和朋友閒聊然後記錄在 SNS 的階段了。</p><p></p><ul style="text-align: left;"><li>關於代客選修的閒聊: <a href="https://g0v.social/@etblue/105567956607555131" target="_blank">https://g0v.social/@etblue/105567956607555131</a></li></ul><p></p><p><br /></p>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-8995853506660564152021-05-28T17:36:00.004+08:002021-05-28T18:01:02.074+08:00閒聊:政府適合辦什麼樣的黑客松<p>前陣子跟友人聊到政府辦黑客松,也在這邊記錄一下個人的想法。</p>
<hr />
<h4 style="text-align: left;">發散 vs 收斂</h4><p>黑客松的特性,是利用 bottom 模式產出多元的成果,因此適合運用在發散的情境。</p><p>政府單位辦黑客松,第一件事是搞清楚手上任務是發散性質、還是收斂性質。例如,政府提供 1 份素材讓民間發展成 N 個遊戲或教案,是發散性質;民間提供 N 個靈感讓政府收斂成 1 個官方網站,是收斂性質。</p><p>發散性質的任務,適合百花齊放的黑客松;收斂性質的任務,則適合諮詢少數深入瞭解脈絡的專家顧問。</p><h4 style="text-align: left;">競爭 vs 合作</h4><p>由於 bottom up 模式相當不受控,想讓黑客松的成果符合主辦單位的意志,常會用獎金當餌,引導參與者使用特定 api、開發特定用途的產品等。</p><p>既然提供了獎金,就必須有公平的方式分獎金,因此勢必得加上評審跟排名規則,於是競賽元素成為許多黑客松的基本配備,也變成很多人對黑客松的刻板印象。</p><p>有競爭,沒合作。競賽型黑客松的特性,是每個隊伍壁壘分明,參賽過程中彼此互不交流。</p><p>政府的角色通常是和利害關係人對話、 促進多方協力,因此政府辦的黑客松其實通常不適合採用獎金制跟競賽制。獎金制吸引獎金獵人的同時也會排擠利害關係人,而競賽制會遏止參與者之間的溝通合作。</p><hr /><p>發表在 mastodon 上的原文 <a href="https://g0v.social/@etblue/105697295645156851" target="_blank">https://g0v.social/@etblue/105697295645156851</a></p>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-44265430393166185212020-05-04T12:46:00.000+08:002020-05-04T12:46:30.259+08:00街舞日記:(G)I-DLE 的 Uh Oh、CHUNG HA 的 Snapping最近一期街舞課剛結束,翻了一下影片,發現去年工作變 hardcore 以後,影片就都沒貼上來 😂 趁今天連假剛放完 context switch 的時候補貼一下好惹<br />
<br />
(G)I-DLE 的 Uh Oh<br />
<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/Id8P4kIh618/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/Id8P4kIh618?feature=player_embedded" width="320"></iframe></div>
<br />
CHUNG HA 的 Snapping<br />
<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/iy4JXnRYYGM/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/iy4JXnRYYGM?feature=player_embedded" width="320"></iframe></div>
<br />
都是去年的影片了。今年全球的武漢 SARS 疫情爆發後,除了提早到教室開門時順便消毒門把、電燈開關之外,上課過程中全程開著窗戶、全班也都戴口罩,在這之後,街舞日記文應該就都是戴著口罩的版本惹 www<br />
<br />
戴口罩跳舞真的很累內 ∠( ᐛ 」∠)_<br />
<br />ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com1tag:blogger.com,1999:blog-31237457.post-8770159249476502812019-11-01T22:17:00.000+08:002020-07-01T00:01:05.431+08:00公民日記:戰爭世代、科學世代、藝術世代 Civic Diary: the War Generation, the Science Generation, and the Art Generation<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1M_XQfu8W5hETqZZJAkFwbE-yZPKjjwott-3ZA_vrch7HyoJhLaVrPFT8NcZIQUFtYE2ezlloQy230C-3gO_4Ukn91XIbGXt1zMfrUswOz9ty7z1VfYSPzLAOsJdmsvHUYFExPg/s1600/thw+war%252C+science%252C+art+generations+%25282%2529.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="601" data-original-width="961" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1M_XQfu8W5hETqZZJAkFwbE-yZPKjjwott-3ZA_vrch7HyoJhLaVrPFT8NcZIQUFtYE2ezlloQy230C-3gO_4Ukn91XIbGXt1zMfrUswOz9ty7z1VfYSPzLAOsJdmsvHUYFExPg/s640/thw+war%252C+science%252C+art+generations+%25282%2529.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: 12.8px;">Steps to Civilization Cliff / 通往文明斷崖的階梯</span></td></tr>
</tbody></table>
<br />
年初的時候寫在鎖朋友文的東西,為了方便讓人引用,也貼到部落格來。<br />
<div class="en ps">
I've written a private post early in this year. I'm posting it here too so people can quote the content conveniently.</div>
<br />
美國開國元勳之一 John Adams 格言:<br />
<div class="en ps">
John Adams, one of the Founding Fathers of the United States, used to say:</div>
<blockquote class="tr_bq">
我必須修習政治學與戰爭學,我們的後代才能擁有修習數學、哲學的自由;我們的後代必須修習數學、哲學、地理學、博物學、造船學、航海學、商學及農學,他們的後代才有學習繪畫、詩歌、音樂、建築、雕刻、繡織和瓷藝的權利。<br />
<div class="en ps">
I must study politics and war, that our sons may have liberty to study mathematics and philosophy. Our sons ought to study mathematics and philosophy, geography, natural history and naval architecture, navigation, commerce and agriculture in order to give their children a right to study painting, poetry, music, architecture, statuary, tapestry and porcelain.</div>
― <a href="https://www.goodreads.com/quotes/42294-the-science-of-government-it-is-my-duty-to-study" target="_blank">John Adams, Letters of John Adams, Addressed to His Wife</a></blockquote>
<br />
個人覺得最後面,應該要再加上一句:<br />
<div class="en ps">
Personally, I would like to append some more words:</div>
<blockquote class="tr_bq">
如果後代醉心於哲學、藝術,而遺忘了我們這一代所學過的政治學與戰爭學,那他們的後代就必需重新開始做我們這一代的事。<br />
<div class="en ps">
If their children forget about the politics and war we've learned, then the next generation will need to start over.</div>
</blockquote>
<br />
最近的感慨:<br />
<div class="en ps">
Some thoughts recently:</div>
<blockquote class="tr_bq">
開源烏托邦的理想,是屬於藝術世代的浪漫;而我們目前面對的,是戰爭世代的問題。<br />
<div class="en ps">
The open source utopian is the romance belongs to the art generation. However, the problems we are dealing with right now, belong to the war generation.</div>
</blockquote>
<br />
以上,寫給 <a href="https://etblue.blogspot.com/2014/05/g0v.html" target="_blank">五年前的自己</a> 。<br />
For <a href="https://etblue.blogspot.com/2014/05/g0v.html" target="_blank">the old version of me 5 years ago</a>.ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-84290258593095545762019-10-28T00:03:00.000+08:002019-10-28T00:49:32.654+08:00Web Front-end 菜鳥心得:用 React Custom Hooks 製作頭尾相依的連鎖反應<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-44pDgGRmes8/XbU7HhwLQ9I/AAAAAAAA1I8/hMV3GiGSszw5wVnZvh8jfY_CXDRINiKxACLcBGAsYHQ/s1600/CustomHooksChain%2B%25281%2529.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="600" data-original-width="840" height="456" src="https://1.bp.blogspot.com/-44pDgGRmes8/XbU7HhwLQ9I/AAAAAAAA1I8/hMV3GiGSszw5wVnZvh8jfY_CXDRINiKxACLcBGAsYHQ/s640/CustomHooksChain%2B%25281%2529.png" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">以下是一隻菜鳥在無窮迴圈之森與變數未宣告之谷中逃出生天的掉漆冒險故事</td></tr>
</tbody></table>
<br>
昨天花一整天才弄好的東西,過程中一度進退維谷、想衝去 slack 跟 senior 喊救命,最後菜鳥我終究還是靠著驚人的意志力,一邊維持不打擾別人休息時間的紀律,一邊奮力爬行抵達了終點... _:(´ཀ`」 ∠):<br>
<br>
<h3>
想解決的問題</h3>
<br>
系統中有三類物件,彼此互有關連,這些關連只會紀錄在其中一方,因此前端從 api 拿到資料後,會做一些計算,才能在每個物件的畫面上顯示出它和誰相關連。任一類物件新增、修改、刪除時,前端也需要重新計算,更新相關連物件的狀態。<br>
<br>
前端這邊的計算任務為:<br>
<br>
<ul>
<li>物件 A 變動時,自動更新物件 B 與物件 C</li>
<li>物件 B 變動時,自動更新物件 A</li>
<li>物件 C 變動時,自動更新物件 A</li>
</ul>
<br>
<a href="https://etblue.blogspot.com/2019/10/react-custom-hook-chains.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-16207407603315593642019-09-14T01:47:00.000+08:002019-09-14T01:47:03.239+08:00Web Front-end 菜鳥心得:將 stateful components 遷移到 React hooks 的第 17 週<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-SIgAalhVgm8/XXuV0RERj7I/AAAAAAAA08A/-OpCQrNdFesF7bEfJvqDKGG3J3n6qowTACLcBGAsYHQ/s1600/SPA%2Barchitecture%2B-%2Bhooks%2Bversion.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="763" data-original-width="803" height="608" src="https://2.bp.blogspot.com/-SIgAalhVgm8/XXuV0RERj7I/AAAAAAAA08A/-OpCQrNdFesF7bEfJvqDKGG3J3n6qowTACLcBGAsYHQ/s640/SPA%2Barchitecture%2B-%2Bhooks%2Bversion.png" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">灰底是各種跨 component 共用的東西,白底是會實際 render 到畫面上的部分</td></tr>
</tbody></table><br>
去年十月開始,egghead 電子報就陸陸續續提到 React hooks 的消息。今年二月隨著 React 16.8 發佈,hooks 正式成為內建的功能。今年四月底,Create React App 3.0 也開始支援 hooks。<br>
<br>
這段時間,菜鳥我一直抱持觀望的態度,直到最後確定 hooks 是 React 家族不可逆的大轉向,就決定要盡可能趁手上專案還沒大到改不動的時候遷移過去。現在雖然還沒全數改版完,但算是稍微做到一個段落,趕快趁記憶新鮮時記錄一下,給其他有類似改版需求的人參考。<br>
<br>
<a href="https://etblue.blogspot.com/2019/09/migrating-to-react-hooks-the-17th-week.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-58365075500842807012019-08-10T00:23:00.000+08:002019-08-10T00:23:45.095+08:00街舞日記:iKON 的 Goodbye Road、BTS 的 Boy with Luv前兩期的街舞課,一首是最近風雨飄搖的 iKON 的歌,一首是持續如日中天的 BTS 的歌。<br />
<br />
回家有練習的效果...<br />
<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/FptZOJEzW_w/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/FptZOJEzW_w?feature=player_embedded" width="320"></iframe></div>
<br />
回家沒練習的效果 www<br />
<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/WSPurvzkM9U/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/WSPurvzkM9U?feature=player_embedded" width="320"></iframe></div>
<br />
很喜歡 BTS 的 Boy with Luv,應該要跳熟一點,有點後悔回家沒練習 😅<br />
<br />
最近主要的煩惱之一就是街舞課的團購人數不足,先前在運動中心開課的時候,三不五時會有新同學路過,現在我們班自己出來外面開團,除了固定班底以外很少有接觸到新同學的管道,所以只要有同學畢業或暫時休息,人數就很容易不夠 QQ<br />
<br />
MV 舞的課程要記舞步、隊形、還要抓表演的感覺,其實蠻複雜的,大腦無法放空,所以能接受的人數一直都遠低於有氧舞蹈或重訓健身,需要對街舞或者對 kpop 有愛,然後以本團來說,還要禮拜天早上起得來這樣 XDrz<br />
<br />
住台北又喜歡街舞的朋友請趕快來當我的同學吧 😭😭😭<br />
<br />
🚨2019年第五期課程報名開始🚨<br />
上課日期:9/1、9/8、9/15、9/22、9/29、10/6、10/13、10/20(週日)<br />
費用:2400/一人/8堂<br />
上課時間:10:30 - 12:00<br />
上課地點:近捷運市府站<br />
上課歌曲:票選中<br />
<br />
有興趣的朋友趕快臉書私訊我~~~<br />
<br />ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-28548223944582011292019-07-05T00:19:00.001+08:002019-07-05T00:26:01.993+08:00Web Front-end 菜鳥心得:從 UI 轉職到前端的瓶頸們轉職到前端工程已經一年又兩個月<strike>而且公司還活著</strike>,這段期間常常卡關覺得崩潰,直到最近一兩個月,才開始有得心應手的感覺。如果有人跟我一樣從 UI 設計轉行過來,可能也會遇到類似的瓶頸,想說趁記憶新鮮的時候整理出來好了,看能不能幫到人 ٩( ᐛ )و<br>
<br>
<a href="https://etblue.blogspot.com/2019/07/ui-to-web-front-end-bottlenecks.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-16554229403927989832019-06-11T15:38:00.000+08:002019-06-17T14:04:45.551+08:00公民日記:離開 g0v 的第三年昨天 g0v 揪松團的網站上,出現這篇公告:<br>
<br>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-cNh-fZ9QYQ4/XP4QrdQ5fvI/AAAAAAAA0Pg/qaGKfj2EbOoxSvd0wLh-BUgDrTZVo8oWACLcBGAs/s1600/cropped%2B-%2BFireShot%2BCapture%2B489%2B-%2B%25E6%258F%25AA%25E6%259D%25BE%25E7%25B6%25B2%2B_%2B%25E9%259B%25B6%25E6%2599%2582%25E6%2594%25BF%25E5%25BA%259C%25E9%25BB%2591%25E5%25AE%25A2%25E6%259D%25BE%25E6%25B4%25BB%25E5%258B%2595%25E5%2585%25A5%25E5%258F%25A3%25E7%25B6%25B2%2B-%2Bjothon.g0v.tw%2Bcopy.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1600" data-original-width="1194" height="640" src="https://1.bp.blogspot.com/-cNh-fZ9QYQ4/XP4QrdQ5fvI/AAAAAAAA0Pg/qaGKfj2EbOoxSvd0wLh-BUgDrTZVo8oWACLcBGAs/s640/cropped%2B-%2BFireShot%2BCapture%2B489%2B-%2B%25E6%258F%25AA%25E6%259D%25BE%25E7%25B6%25B2%2B_%2B%25E9%259B%25B6%25E6%2599%2582%25E6%2594%25BF%25E5%25BA%259C%25E9%25BB%2591%25E5%25AE%25A2%25E6%259D%25BE%25E6%25B4%25BB%25E5%258B%2595%25E5%2585%25A5%25E5%258F%25A3%25E7%25B6%25B2%2B-%2Bjothon.g0v.tw%2Bcopy.png" width="477"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://jothon.g0v.tw/notice/" target="_blank">https://jothon.g0v.tw/notice/</a></td></tr>
</tbody></table><br>
事隔三年,當初讓我離開 g0v 的因素,終究浮上了台面。什麼情況下才會發表這樣的聲明,有概念的人應該一看就懂,不需要我多做解釋吧... 😌<br>
<br>
<a href="https://etblue.blogspot.com/2019/06/3rd-year-after-leaving-g0v.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-13216629699542728892019-06-04T06:37:00.000+08:002019-06-04T06:37:00.048+08:00Web Front-End 菜鳥筆記:React Context、React Hooks 研究心得為了即將在下個 milestone 增加的新功能,先前跟公司爭取到一週的時間做技術研究,在這邊紀錄一下結果。<br>
<br>
<hr>
<br>
<h4>
一、研究動機</h4>
<br>
希望節省手動傳遞全域性資料 / 函式所需的人工,例如:<br>
<br>
<ul>
<li>處理未登入 / 權限不足 / api 逾時的函式,需要傳遞給所有會用到 api 的 components</li>
<li>多個不同 api 回傳的資料,各自需要傳遞給多個會取用該資料的 components</li>
<li>將來可能會需要支援的 theme 設定,也會需要傳遞給所有樣式受影響的 components</li>
</ul>
<br>
<h4>
二、研究材料</h4>
<br>
<ul>
<li>[看完] <a href="https://egghead.io/courses/react-context-for-state-management" target="_blank">react context 課程</a></li>
<li>[看完] <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">react hooks 文件</a></li>
<li>[看一半] <a href="https://egghead.io/courses/reusable-state-and-effects-with-react-hooks" target="_blank">react hooks 課程(基礎)</a></li>
<li>[還沒開始] <a href="https://egghead.io/courses/simplify-react-apps-with-react-hooks" target="_blank">react hooks 課程(進階)</a></li>
<li>[完成] <a href="https://github.com/ETBlue/storyliner/commits/master" target="_blank">拿 toy project 試寫</a></li>
</ul>
<a href="https://etblue.blogspot.com/2019/06/web-front-end-react-contextreact-hooks.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com1tag:blogger.com,1999:blog-31237457.post-82353663861924249112019-04-17T23:05:00.000+08:002019-04-17T23:07:48.673+08:00成果發表:用自畫像做 LINE / Telegram 貼圖(目前非開放授權)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0n6vYVh8KFyOwSUhfOyFDqxjgtywIpJUig5xhgsH66Z45LB-BTSLqxeSAjhNx-3_Bxm3GuWq9HHfyxzKeNVNs-xZYJDV9XLzr7Mq1SZao_w9gG4aB-nJVu_2099kqZCj8mirVA/s1600/Screen+Shot+2019-04-09+at+00.39.40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1470" data-original-width="1540" height="610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0n6vYVh8KFyOwSUhfOyFDqxjgtywIpJUig5xhgsH66Z45LB-BTSLqxeSAjhNx-3_Bxm3GuWq9HHfyxzKeNVNs-xZYJDV9XLzr7Mq1SZao_w9gG4aB-nJVu_2099kqZCj8mirVA/s640/Screen+Shot+2019-04-09+at+00.39.40.png" width="640"></a></div>
<br>
前陣子和電資工會的夥伴一起發想了工會吉祥物——電資貓的貼圖,結果好像意外打開什麼開關,各種靈感源源不絕,於是拿平常在 blog 使用的 ET 自畫像畫了草稿,然後在好友們的鞭打(X)鼓勵(O)下做成 LINE 跟 Telegram 的貼圖。目前進度:第一組上架完成 XD<br>
<a href="https://etblue.blogspot.com/2019/04/line-telegram.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-82548652142024975882019-04-08T05:01:00.000+08:002019-04-08T05:04:19.484+08:00Web Front-End 菜鳥一週年:Clean Code<blockquote class="tr_bq">
Clean Code 這本書,正好適合寫作風格還沒定型的菜鳥一邊工作一邊慢慢看。原本不知要累積多少年經驗才能做出明確決斷的事情,從書本上系統性地吸收前人的思考以後,摸索的時間明顯縮短了許多。</blockquote>
<br>
這個月結束,人生中第一份 web front-end engineer 工作就做滿一年了。這段期間,每隔一陣子隨著任務變化,會跟公司要求一週不受打擾的技術研究時間,研究完馬上實做,實做完馬上寫心得筆記、跟高手求教、制訂下一階段的戰術,然後再度進入研究階段。幾個循環下來,深深覺得對技術進步幫助很大 😃<br>
<br>
繼 React patterns 跟 JavaScript testing 之後,還有一項沒有特別安排時程、僅僅耗費每天在馬桶上的零碎時間,但卻讓我覺得非常有感的技術研究:讀 Clean Code。<br>
<br>
過去曾讀過一本跟 Clean Code 有點像的書,叫做「病歷寫作」,都是在講述「特定領域的從業人員如何透過專業文件做有效溝通」,不是講技術,而是講前人曾經使用哪些工作方法來發揮這項技術、各自遇過什麼狀況、以及根據這些經驗得出的 best practice 是什麼。<br>
<a href="https://etblue.blogspot.com/2019/04/web-front-end-clean-code.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-548673438233261952019-04-07T22:35:00.000+08:002019-04-07T22:35:15.802+08:00Web Front-End 菜鳥心得:用 Cypress 寫人生中第一個測試<blockquote class="tr_bq">
目前作法 1. 挑選變化型最多(aka 人工測起來最麻煩)的 component 做自動化測試 2. 以撰寫規格書大綱的原則來替 test cases 分類與下標 3. 套用 Clean Code 第三章的原則自訂 functions 來處理同一參數的不同變化型 4. 用設定檔和自訂的 functions 開啟 / 關閉測試行程中的 screenshot 動作</blockquote>
<br>
之前上了 Testing JavaScript with Kent C. Dodds 課程後,開始替公司產品前端撰寫 end to end 測試,使用課程中介紹的 Cypress 這套工具。目前為止做了兩個 component 的自動化測試,這兩個 component 的性質分別是導覽精靈以及對話視窗。使用感想如下:<br>
<a href="https://etblue.blogspot.com/2019/04/first-test-with-cypress.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-48530483731058295652019-02-25T01:03:00.000+08:002019-04-04T19:41:01.499+08:00街舞日記:BTS 的 IDOL這期 MV 舞課上 BTS 的 IDOL,從最後一堂課的錄影裡面,可以看到這幾年間 adidas 大舉攻佔運動服飾市場的威力...<br>
<br>
<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/H6KLGVUS19M/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/H6KLGVUS19M?feature=player_embedded" width="320"></iframe></div>
<br>
真的不誇張,最近走在街上看到的運動服幾乎一半是 adidas 啊!包括肥宅我這一兩年發現 adidas 的運動服真的比較可以修飾肥肉(X)剪裁好看(O)所以也從 Nike 跳槽過來了 lol<br>
<br>
<a href="https://etblue.blogspot.com/2019/02/bts-idol-mv-dance.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-32769098356453740312019-02-19T02:05:00.001+08:002019-02-19T02:18:14.653+08:00Web Front-End 菜鳥筆記:替小型的 React App 加上測試<blockquote class="tr_bq">採用 Testing JavaScript with Kent C. Dodds 課程做為快速入門教材,採用 Create React App 內建的 ESLint 跟 PropTypes 做 static analysis,採用 Create React App 內建的 Jest 做 unit test 跟 integration test,採用 Cypress 做開發工具跟 end to end test,採用課程附件的 worksheet 決定測試對象</blockquote><br>
前陣子公司產品前端重寫完,想說整個過程蠻小心的,應該不會有太多 bug,結果被 QA 同事一測... 😅 總之,接下來除了 debug 之外,還有一整個功能區塊的操作邏輯要大改。<br>
<br>
先前開發時已經竭盡所能地謹慎,結果卻是 bug 叢生,於是不知所措的菜鳥又哭著(誇飾法)跑去跟 ddio 求救~~~原本以為我需要設計更好的架構、更乾淨的封裝來避免產生 bug,結果發現,該做的不是繼續在實做細節上鑽牛角尖,而是該面對先前因為覺得煩而從沒做過的那件事:寫、測、試!<br>
<br>
反正程式 deploy 前,一定有個倒楣鬼要去測產品,然後每次程式更新,一模一樣的操作就又要重做一遍。橫豎都要測,何不乾脆讓電腦代勞呢?你ごん對毋對? 😇<br>
<br>
去年 10 月左右,看到 egghead 電子報介紹 <a href="https://testingjavascript.com/" target="_blank">Testing JavaScript with Kent C. Dodds</a> 這個同屬 egghead 家族的課程,當時課程還沒上架但有早鳥 40% off 優惠,剛好也工作了幾個月有存點錢,就趁著打折買下去了。現在覺得有買到實在非常幸運,這正是我需要的那根浮木啊!總之,跟 PM 要了一週的時間上課,上完以後覺得像是撿到槍,手超癢超想掃射的 😂<br>
<a href="https://etblue.blogspot.com/2019/02/web-front-end-testing-react-app.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-56801678665622576232019-01-23T05:40:00.001+08:002019-01-23T05:40:44.155+08:00半成品發表:電資貓 - 電資工會 LINE 貼圖草稿發想(集體創作)某位佛心設計師替電資工會設計了吉祥物,讓敝會可以賣賣貼圖補貼家用,現在貼圖終於上架囉 😍 <a href="https://line.me/S/sticker/6337334" target="_blank">https://line.me/S/sticker/6337334</a><br>
<br>
前陣子企畫期間跟工會夥伴一起發想了不少構圖,開一篇文章來紀錄,作者應該算電資工會全體吧,我只是負責畫框線圖的 😆<br>
<br>
使用工具:iPad Air、Apple Pencil、Notability(朋友用過都說讚的筆記 app)<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-dOR4TgkQlCI/XEeMcCIOcTI/AAAAAAAAxrg/fPVCCK4V44QN1sWzZvlqmlnVdYVKMbz1ACLcBGAs/s1600/IMG_0131.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="240" src="https://1.bp.blogspot.com/-dOR4TgkQlCI/XEeMcCIOcTI/AAAAAAAAxrg/fPVCCK4V44QN1sWzZvlqmlnVdYVKMbz1ACLcBGAs/s320/IMG_0131.PNG" width="320"></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-obakXfMmQJA/XEeMcs-BdAI/AAAAAAAAxrk/fuzOMbz7iDIHQCx0zNcPbFuH5p8n_XuXQCLcBGAs/s1600/IMG_0132.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="240" src="https://2.bp.blogspot.com/-obakXfMmQJA/XEeMcs-BdAI/AAAAAAAAxrk/fuzOMbz7iDIHQCx0zNcPbFuH5p8n_XuXQCLcBGAs/s320/IMG_0132.PNG" width="320"></a></div>
<br>
<a href="https://etblue.blogspot.com/2019/01/tueeit-line-stickers-draft.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-65203331521704292632019-01-23T03:23:00.001+08:002019-01-23T05:41:39.463+08:00Web Front-End 菜鳥心得:安排自己的工作時程<blockquote class="tr_bq">
我犯的錯誤:1. 沒有把國定假日考慮進來,簡直整死自己 2. 沒有詳細分析導致漏掉一個大功能沒算進來,簡直整死自己 3. 連續排滿四個月沒有中場休息時間,簡直整死自己 4. 以為設計工時只要用產品頁面的數量來估算,簡直整死自己 5. 以為程式複雜度跟專案規模之間只是單純的正比關係,簡直整死自己</blockquote>
<br>
最近幾個月重做了公司產品的前端,不算太複雜,是一隻菜鳥勉強可以獨力完成的規模。開發時程是去年的我訂的,後來有微幅變更兩次,總之最後是從 9/24 做到 1/20,總共 17 週。<br>
<br>
前半段 UI / UX 原以為已經爛熟,結果花了快兩倍時間。後半段程式開發已經多排了一倍的時間當緩衝,結果不僅緩衝用光光、規格打折扣、還開 turbo 拿肝換,到最後關頭才追上。前陣子趕工趕得快吐血,一邊寫 code 一邊心裡狂幹譙去年的自己,超想坐時光機回去打他啦 (/‵Д′)/~ ╧╧<br>
<br>
<h3>
理論 vs 現實</h3>
<br>
這張圖的左邊,是最初的時程預估,右邊則是實際的工作記錄。黃底的那幾週,工時還算正常但有負荷過重的主觀感受;紅底的那幾週,則是毫無疑問的過勞。<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Nw8l_6et4a8/XESqI5SId0I/AAAAAAAAxp8/i86ChQGrFaQe35gasCXO5NUC2FGhKRgdQCLcBGAs/s1600/Schedule%2B%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="794" data-original-width="834" height="609" src="https://4.bp.blogspot.com/-Nw8l_6et4a8/XESqI5SId0I/AAAAAAAAxp8/i86ChQGrFaQe35gasCXO5NUC2FGhKRgdQCLcBGAs/s640/Schedule%2B%25282%2529.png" width="640"></a></div>
<br>
算一算,原本預估 4 週設計 5 週程式,穿插 4 週的休息緩衝;實際上則是 6 週設計 10 週程式,而且如果把紅色的加班工時攤開來看,其實程式需要 12 週。然後我沒寫測試,所以如果要包含測試的話,應該至少要再乘以二之類的吧 😅<br>
<br>
<a href="https://etblue.blogspot.com/2019/01/web-front-end-rookie-schedule.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-38600725416042716272018-10-31T22:36:00.001+08:002018-10-31T22:37:25.640+08:00街舞日記:MOMOLAND 的 BAAM<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/vhIwSxN2owg/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/vhIwSxN2owg?feature=player_embedded" width="320"></iframe></div>
<br>
上一期街舞課跳 MOMOLAND 的 BAAM,原本是青春洋溢又正又可愛的一首歌,本班依照慣例毫不留情地摧殘它 ٩( ᐛ )و<br>
<br>
<a href="https://etblue.blogspot.com/2018/10/dance-practice-momoland-baam.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-50190898863214956932018-10-10T15:48:00.000+08:002018-10-16T23:16:02.820+08:00演講紀錄:為什麼 Claire 會延畢?從政治學術理論與 g0v 參與經驗檢視黑客社群開源協作式的公民參與 @ g0v summit 2018<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNA0BHcJCyvjKgTNWZdb720IFaHiBnYlH1y1JMEo52D7A2i2_REeE5PyYX9uFaZqpEN0myARScIzLS7j4lWYF4xgtBNZe0f4cfR63PNwnU4XLqxv2iMQDnXw6U7ptjpQorq_LBA/s1600/43302820_287294618772278_6335034615085924352_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1108" data-original-width="1478" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNA0BHcJCyvjKgTNWZdb720IFaHiBnYlH1y1JMEo52D7A2i2_REeE5PyYX9uFaZqpEN0myARScIzLS7j4lWYF4xgtBNZe0f4cfR63PNwnU4XLqxv2iMQDnXw6U7ptjpQorq_LBA/s640/43302820_287294618772278_6335034615085924352_n.jpg" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">第一次跟家華和婷宇合體(?)最近跟政治所的特別有緣份啊...<br>
希望將來不至於淪為她們的學妹(抖)<br>
攝影 by 東霖</td></tr>
</tbody></table>
<br>
今年 g0v summit 被婷宇拎著一起投稿,原本想偷懶把時間成本控到最低,結果因為和共同作者話太投機,投入比預期多出數倍的時間,差點 delay 到工作 😱 意外的驚喜是議程組非常睿智地邀請家華當我們這軌的主持人,她直到演講前兩天才終於答應,拉了分軌群組後,在家華引導下,跟 Kobe、八六整個聊開,演講結束後過了兩天,主持人自己忍不住在群組裡面說,為什麼我們這一軌一直好像停不下來 XD ...<br>
<br>
總之,這幾天在分軌群組內收穫豐富,結果出乎意料地好,感謝 ipa 堅忍不拔地辦了大會,讓我們這軌的成員有機會湊在一起 LOL<br>
<br>
這次 slido 的考題,現場先挑了票數最高的回答,原本想說會後來好好做剩下的題目,順便解釋為何我略過數位政委的那一題,但連續幾天跟夢醒軌群組 brainstorming 下來,墨水幾乎用光,所以還是改天好了... 反正根據群組內討論的狀況,我想再過一陣子,這些題目應該都會有比現在更好的答案可以交卷 :3<br>
<br>
<a href="https://etblue.blogspot.com/2018/10/claire-g0v-summit-2018.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-7343436542287230402018-10-02T13:19:00.000+08:002018-10-03T12:20:10.623+08:00Web Front-End 菜鳥筆記:在 2018 Q4 的小型 Single Page React App 函式庫 / 框架選擇<blockquote class="tr_bq">
採用 create-react-app、react-router、axios、semantic-ui,暫不採用 redux / redux-saga、react-i18next,下階段預定採用 react-fns</blockquote>
<br>
人生中第一份前端工程的全職滿五個月了~<strike>公司還是沒倒喔</strike>(灑花)<br>
<br>
從開始學 React 到現在,做過不少小型的 single page app,但畢竟都是自己的 toy project,從沒認真以 production quality 為基準做技術研究。這次負責公司 app 改版,爭取到一兩週的時間,把之前打馬虎眼欠下的知識債一口氣還完,覺得整個人神清氣爽~非常開心 :D<br>
<br>
結果如下:<br>
<br>
<a href="https://etblue.blogspot.com/2018/10/web-front-end-2018-q4-single-page-react.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-20484137749398561312018-08-10T03:43:00.000+08:002018-08-12T17:27:14.301+08:00Web Front-End 菜鳥筆記:如何讓瀏覽器記住 form input field 的值(p.s. Chrome 的不合群行為還沒解開)人生中第一份前端工程的全職滿三個月了~<strike>公司還沒倒</strike>(灑花)<br>
<br>
這幾天解一個看起來簡單的小 issue,就是讓 browser 可以 autofill / autocomplete 登入表單中的欄位,結果意外的卡了超久 XDrz<br>
<br>
目前在 Firefox / Safari 可以正常運作,但在 Chrome 則是時靈時不靈。先簡單筆記一下給將來的自己參考<strike>,順便看看有沒有過路神明會開示一下</strike>。<br>
<br>
<h3>
如何讓瀏覽器記住 input field 的值</h3>
<br>
有兩種方式<br>
<br>
1. 由使用者自行利用瀏覽器內建的 autofill 功能<br>
2. 由開發者撰寫會觸發 form submit 事件的 html elements<br>
<br>
參考:<a href="https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/" target="_blank">Autofill: What web devs should know, but don’t - Cloud Four</a><br>
<br>
<a href="https://etblue.blogspot.com/2018/08/autofill-autocomplete-form-input-field-and-unexpected-chrome-behavior.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-34220604368489387972018-04-17T23:01:00.000+08:002018-04-17T23:08:21.374+08:00成果發表:Storyliner——輕鬆替八卦事件製作互動式懶人包,以囧星人與聯合報願景工程的採訪爭議為例<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://etblue.github.io/storyliner/?source=https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8ukLhLNcPLc20_7J2ju6_e_KSLW2RW0LDu_1_4__IvaVUCO1BhZ9RGwefcWkOVRQ8XjlYv6MSe8oA/pub?output=csv" target="_blank"><img border="0" data-original-height="1085" data-original-width="1600" height="432" src="https://2.bp.blogspot.com/-bBo9xRsBNiI/Wso68RVp0kI/AAAAAAAArOg/TEw-Mn1wRR45r8uLSovzHMWK74kT_Op0ACLcBGAs/s640/FireShot%2BCapture%2B189%2B-%2BStoryliner_%2BThe%2BInteractive%2BGossip%2BVi_%2B-%2Bhttps___etblue.github.io_storyline.png" width="640"></a></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://etblue.github.io/storyliner/?source=https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8ukLhLNcPLc20_7J2ju6_e_KSLW2RW0LDu_1_4__IvaVUCO1BhZ9RGwefcWkOVRQ8XjlYv6MSe8oA/pub?output=csv" target="_blank">《Storyliner》範例:囧星聯合爆</a></td></tr>
</tbody></table>
<br>
下個月要上班,所以最近在惡補 web frontend 的東西,看一堆 ajax 文件後覺得找專案來練習比較紮實,想說那就來順便改版《<a href="http://etblue.github.io/gw2inventory" target="_blank">Guild Wars 2 Inventory</a>》好了。結果規劃架構時,在社交網站上一直被某則網路八卦洗版,然後有天 <a href="https://www.facebook.com/ETBlue/posts/10212492870849501?comment_id=10212497714370586" target="_blank">臉友問我有沒有懶人包</a>...<br>
<br>
於是我整理癖就發作啦 ∫OoO∫<br>
<br>
《<a href="https://etblue.github.io/storyliner" target="_blank">Storyliner</a>》 開發期間共八天,企畫三天、程式五天。之所以可以這麼快速,主要是因為類似的 idea 之前已經跑過一次 ux 流程,所以規劃起來不太費力的緣故。<br>
<div>
<br>
</div><a href="https://etblue.blogspot.com/2018/04/storyliner-interactive-gossip-viewer.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com2tag:blogger.com,1999:blog-31237457.post-41337870227072977042018-04-16T18:18:00.000+08:002018-04-17T07:19:52.640+08:00新歌發表:美人魚 | Mermaid —— 洪丹《勞工童話》系列二創曲<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-IyDBEog8ZeU/WtQ-w6o2MPI/AAAAAAAArYM/KUBQPjFGujcRMOgW05du7x70vGVNlZbMACLcBGAs/s1600/og.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="630" data-original-width="1200" height="336" src="https://3.bp.blogspot.com/-IyDBEog8ZeU/WtQ-w6o2MPI/AAAAAAAArYM/KUBQPjFGujcRMOgW05du7x70vGVNlZbMACLcBGAs/s640/og.png" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">難得花三四個小時認真做的封面圖,字體是用 Adobe Typekit 找很久才選定的 Beloved</td></tr>
</tbody></table>
<br>
繼《<a href="https://etblue.blogspot.tw/2018/02/piglets.html" target="_blank">三小豬 | Piglets</a>》後 yet another 勞工童話的二創歌曲,拖了整整四個月終於編完,長這樣:<br>
<br>
<iframe frameborder="no" height="170" scrolling="no" src="https://blend.io/embed/5ab92800d1514a565d0d1917" width="100%"></iframe><br>
<div style="font-size: 11px;">
<a href="https://blnd.io/2DTQExD">Mermaid</a> by <a href="https://blend.io/etblue">ETBlue</a></div>
<br>
為了配合歌詞的意境,採用 Disney 風格,搞得非常難編也非常難唱 XD 編曲的部分用盡了 garageband ios 的音軌上限(32 軌),vocal 的部分則是練了好幾個月再錄音 n 次後努力找出沒 bug 的片段剪在一起勉強湊出來,剪完 vocal 後發現樂器的音量變得超不平衡,還大調整了一次,後來才比較正常 w<br>
<br>
<a href="https://etblue.blogspot.com/2018/04/mermaid.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0tag:blogger.com,1999:blog-31237457.post-19651003941564117002018-04-16T00:45:00.000+08:002018-10-10T06:18:39.058+08:00街舞日記:BTS 的 MIC Drop<div class="separator media-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video media-inner" data-thumbnail-src="https://i.ytimg.com/vi/RNiaroag_Mg/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/RNiaroag_Mg?feature=player_embedded" width="320"></iframe></div>
<br>
上一期街舞課跳 BTS MIC Drop 的成果影片。可能原版錄影看起來太智障了,老師還特別後製幫大家做了特效... www 這首大概是上課到現在跳過最累的,我到後半段就開始覺得力不從心,只好趁鏡頭沒 cue 到的時候偷打混,錄影完幾乎說不出話來 orz<br>
<br>
<a href="https://etblue.blogspot.com/2018/04/bts-mic-drop.html#more">看整篇文章 →</a>ETBluehttp://www.blogger.com/profile/11377113296346559861noreply@blogger.com0