近況與 React 初體驗

Standard

好一陣子沒有更新部落格了,年初到現在依然在渾沌瞎忙碌中度過,讓人有些倦怠,暫時沒寫文的靈感。

不過這篇也不是技術文,就當給蜘蛛網密佈的部落格澆個水吧…。

那麼,這陣子除了工作之外,還做了什麼呢?


參加 Modern Web 2015

距離上次 WebConf 2013 也好久了,參加這樣的大型研討會對我來說就是吸收新知,了解一下現在職場上大家都玩些什麼東西。

社交嘛…個性低調的我對在社群 social 總覺得彆扭不自在 XD 還是跟同行的朋友聊聊、交換筆記就好。

  • 最喜歡的場次:
    • 唐鳳 的 《開源之道》
       非技術場,但講到一些社群中人與人間相處、溝通的觀念相當有感觸呢,同理心、分享、尊重等等,在職場、交友上也很受用。

  • 前端相關場次:

    • 阿當 的 Pinkoi 把手機版網站變好用了
       WebConf 2013 中阿當 分享的場次 相當有收穫,這場關於 Pinkoi 手機版網站優化的經驗分享依然如此。
       雖說有些我已經有在工作中實做過了(例如 RESS、pushState、PageSpeed),但也有許多細節未曾注意到。
       在與設計師合作、給使用者更佳的體驗、前端效能細節方面,前端還有好多部分可以努力的,希望自己也能繼續往這方面精進。

    • Chris 的 從技術角度看 Responsive Web Design
       講者分享了許多 RWD 實作技巧,而其中講到跟 PM、設計師溝通這部分特別讓我會心一笑啊 XD
       我覺得設計師、PM 能擁有網頁基礎概念的話…,嗯,應該說是無論職務,都能對彼此的領域有所涉略、了解彼此的難處與需求的話,在實做產品上能夠有很大的幫助啊。(消弭認知落差、找到彼此合作的最佳解)

    • Eric Chuang 的 當網頁遇上原生 App
       由於我目前待的公司主要產品是 App,也曾有人提過想用網頁技術來實做 App 中的內容頁,「用網頁來做,覺得這樣成本比較低」,但身為第一線網頁前端開發才會了解 – 實際上其中血淚與坑的成本並不會比較低 XD
       看到簡報中介紹各家手機廠自幹 ─ “Improve" ─ 原生手機瀏覽器導致的後果與靈異事件,真的是心有戚戚焉(哭)。

針對這些前端場次,我也在公司的開發者分享時間做了個大補帖式的分享了 XD

不過比起 WebConf 2013,個人覺得這次有點小失望呢,大概是門票價格跟我想聽的場次(跟我聽得懂的 XD)沒有成正比吧 Orz


不定期的週末技術小聚會

前同事牽線下,認識幾位前端、設計師朋友,分享彼此在工作上遇到的前端心得與疑難雜症,另外聽聽不同公司對於前端開發上的做法也滿有幫助的,無論是好是壞。

因為身為從來沒掛過前端工程師職稱的前端工程師,在公司想不斷針對前端開發、設計議題討論,總是有種難逢知音的感覺。

也許這種前端朋友間的交流是另一種解決方式吧…


React 初體驗

實做在公司專案上

覺得一直瞎忙很難進步啊,另外也想追一下前端圈滿熱門的 React,觀察到前端人力市場這個技術需求越來越常出現了。

所以抽空自己默默研究了 React,並在公司專案的某功能實做看看。從原本用 Python 接公司 API 再於 template 印出的方式,改寫為 React 元件。另外因為公司案子要兼顧 SEO,所以就在 Server 上透過 python-reactpython-webpack 跑專案的 React 程式,讓內容是可被搜尋引擎蒐錄的。

實做完的心得是 – 所有東西都元件化,拆解,然後被 React 規範該怎麼寫元件的原則下,寫起功能來挺能專注的,回頭看也比較清晰明瞭。


寫了兩個 React Components

手法還很拙劣,未來進步再來改進。

不過真的有包元件包上癮的感覺 XD


最近大概就是這樣,依然是在瞎忙 loop 中找些讓自己過得有趣一點的方式(遠目

啊,轉眼 2015 的一半就這樣過去了…

網站前端調校之「禁止轉譯的 CSS」

Standard

網站前端載入校能優化上,可透過 Google PageSpeed Insights 來評估與抓出問題,還會根據待改進項目的多寡及嚴重性給予優化上的分數。

最近在製作公司網站的專案,雖然沒什麼內容,但趁上線前就試著用 PageSpeed Insights 掃了一下。下圖是一開始的情況:

啊,雖然我不是分數控,但顯示紅色驚嘆號好像不大酷。

Continue reading

在 Google 試算表中實作抽獎功能

Standard

最近公司的活動網站剛結束,接下來要準備抽獎了。
由於沒有後台抽獎功能,趁著下個案子還在 pending 的空檔,來試試看如何在 Google 試算表 中達成抽獎功能,方便行銷夥伴們一鍵抽獎。
最近也是尾牙的季節,也許抽獎也用得上噢。


首先,假設名單資料長這樣:

佈置抽獎所需的物件。我們手動加上一欄「亂數」,並在右方空白處新增抽獎結果的表格,包含對應的獎品、希望呈現的相關資訊等。

接下來是重頭戲,撰寫抽獎相關的 Apps Script
Continue reading

在 Flask 中處理 JavaScript 裡指定 route path 的問題

Standard

目前的工作,開發團隊使用的框架是 Python 的 Flask;而身為小小前端的我在撰寫 Javascript 時,經常會遇到要在 JavaScript 中送 AJAX 到某個 route path 的實作,聽起來並不麻煩,但這個 route name 是在 Flask 中指定的,日後有可能更改,情況一多就改不完了,所以在 JavaScript 中寫死不是個好辦法。

記得之前在搭配 Rails 進行前端工作時,可以在 .js.erb 中寫 <% url = Demo::Application.routes.url_helpers %> 再用 url.某個 route name 來達成指定 route path 的目的。

可惜 Flask 好像沒有…,直接在 JavaScript 裡面寫 url_for 是沒用的(不考量更動結構,.js 依然都還是放在 static/ 目錄底下);比較直觀的作法大概是在 template (會引入該 .js 的那支 .html 檔案)裡面加上 js 變數,再透過 url_for 指定 route path 給它:

<script>
  var path = "{{ url_for('.test') }}";
</script>

嗯,是啊,在 template 中本來就可以使用 Jinja 語法的,只是我仍覺得這個解法不大漂亮。

所以想了些繞路的作法(若熟 Flask 的朋友路過,知道怎麼解才比較漂亮的話,請不吝賜教呀~),記錄於下:

Continue reading

十個行動版網頁(Mobile Web)開發輔助工具

Standard

近期筆者執行了滿多行動版網頁(Mobile Web),同時也是 RWD 設計的專案。光測不同的瀏覽器(IE 8-11、Chrome、Firefox、Safari)就夠忙了,而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD

而有時候光用桌面瀏覽器模擬手機瀏覽器,並無法完全真實呈現在行動裝置的情況,所以在開發的過程中使用了許多工具來輔助,在開發期就力求盡量測到(並進而解決)不同裝置的「近似」真實的情況。

以下列出十項,個人覺得還不錯的行動網頁開發輔助工具:

Continue reading

在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

Standard

最近在執行的手機版網頁專案,針對其中許多 icons,我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片,銳利的向量圖片放大縮小也不怕,真棒。

但在進行不同裝置的測試時,發現在某些 Android 上用原生瀏覽器瀏覽時,某些 SVG 圖片特別模糊,毛邊都相當明顯,但又不是每張 SVG 圖片都是如此,相當詭異。

舉個例子:


(可點圖放大)

  • 左方是正常的情況,SVG 圖檔相當清晰
    (Chrome for Android v36)
  • 右方則是在 Android 原生瀏覽器上的情況
    可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現,在我這個專案的情境中,只有被套上 transform: rotateposition: fixed,且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看,果然有類似的問題被提出(雖然提問者的情境與我不同),而也有人提出了 workaround 來暫時解決這個問題。

根據討論串,這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue,這個 issue 會使符合上述情境的 SVG 圖片,以 CSS 像素的密度(density)被繪製出來,但多數高階 Android 手機中,CSS 的 1px 並不等於裝置的 1px,所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋,但也滿有意思的,是在 SVG 檔案中嵌入一個透明(opacity=0)的文字物件:

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片,就連 zoom in 也一樣清楚噢。

[Rails] 修正 simple_form 2.1 中 input value 使用英文之外的多語系字元,導致無法正常產生 label for, input id 對應的錯誤

Standard

近日在解票時,遇到一張關於 simple_form 表單問題的 ticket。
(註:該專案使用的 SimpleForm 是 v2.1.1 版本)

# 先聲明小弟是前端工程師,完全的 Rails 生手,有說明錯誤的地方請多多包涵哦 :$

情況是這樣子的,在這個專案裡,使用者個人資料的表單中有個這樣的欄位:

它是以群組核取框(checkboxes)呈現,使用者同時可以核取多個項目。

但奇怪的是,用 SimpleForm 產生的這個欄位,在點選「科技」、「網路」、「手機」的文字(label)時,預期行為應是「讓點選的 label 文字左方的核取框作用(勾選或取消勾選)」,但無論按哪個文字,都是第一項「科技」的核取框有反應而已。

這是因為產生的 HTML 語法有誤導致:

<div class="input check_boxes optional">
  <label class="check_boxes optional" for="user_profile_attributes_preferred_info">喜歡哪類資訊</label>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="科技">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">科技
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="網路">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">網路
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="手機">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">手機
    </label>
  </span>
</div>

不大正常,每個 input 的 id 以及 label 的 for 屬性值都一模一樣,當然選不到預期對應的項目囉。

Continue reading

將 DigitalOcean 主機地點從 San Francisco 搬遷至 Singapore 小記

Standard

之前有提到我的主機從家裡的舊主機搬到 DigitalOcean 了,而前陣子(差不多 2014 年 2 月初),DigitalOcean 官方宣布了即將在近期增設新加坡機房的消息

就地理位置而言,對亞洲用戶來說新加坡理論上應該會比舊金山的機房連線來的快。

但經過 traceroute 觀察的結果(我使用 HiNet 光世代),連到新加坡主機的過程似乎會先去香港再繞去日本 NTT 再過去啊…
不過單純就 ping 值來說,舊金山主機的延遲時間在 155ms 上下,而新加坡主機則是 60~80ms 間,雖仍不理想但還是稍快一些(要是有日本機房就好啦),嗯…反正是個人使用的小站,就來試試看囉。

不過搬家 IP 會變,找個比較不忙的時候來一一處理。
以下就簡單記錄一下搬家過程。

Continue reading

淺談第三方 script cache 與自動升級的作法

Standard

最近工作上遇到了「實作一段類似廣告嵌入的 JavaScript 程式碼(有點拗口,實際上就像是加入 Google Analytics 的追蹤碼那樣,動態產生 script tag,然後指定其 src 是某一段網址。),而該 script 於 server 端打了 expire max 的 cache,但又希望安裝該段 js 的網站不必更動 js 檔名(或 querystring)的原則下,能夠自動吃到最新修改版本的程式碼」的 issue,解票過程中嘗試了幾種方案,雖最後未採用此篇提到的「自動升級法」解決,不過覺得此解滿有意思的,特此記錄。

Continue reading

Fire.app 安裝 extensions 的方法 – 以 compass-rgbapng 為例 (Windows & Mac)

Standard

前陣子購買了 Fire.app 這套加速前端 prototyping 的好工具,也透過它將個人作品集網站的 CSS 改寫成 SCSS 作為練習。

期間因為需要用到 compass-rgbapng 這套 Fire.app/Compass 的 exntension,它可以將 CSS 中 rgba 改為 transparent PNG 來處理,這都是為了 Internet Explorer 啊….

這邊便簡單紀錄一下 Fire.app 安裝 extensions 的方法。

Continue reading