2021年6月17日 星期四

閱讀筆記:洪荒年代 The Year of Flood

洪荒年代,是作者愛特伍末世三部曲的中篇,相較於首部末世男女(連結),後者雖然沿襲了前者的社會架構和時間軸線,但人物設定和待闡述的理念卻截然不同。作者一改首部曲中宏大的故事架構和光怪陸離的劇情,而是細細刻劃大時代下,幾個底層小人物在挫折中奮力求生的速寫。雖然缺少高潮迭起緊張刺激感,但如此貼近常民生活的描寫,反而賦予了文學應有的真實。

底層社會與小人物的生存方式

第一部曲中,作者透過男主角克雷科Crake視角,架構出所謂上層菁英眼中的世界觀,也以電影導演的手法,展現了世界逐步毀滅的過程。故事緊張刺激且引人入勝,但明顯集中於少數人視野,少有社會層次的生命關懷。二部曲描述的對象不再是主導和改變世界的菁英階級,而是中下階層升斗小民在貪婪、無情的亂世洪流中努力掙扎求生存的故事。

主人翁桃碧(Toby)的父母因為堅持原則,分別病死和自殺。桃碧付不出龐大債務,只能到中下階層換了身份過活。在秘密漢堡店忍辱求生仍被性變態的經理布朗可盯上,成為他的性奴隸,雖然在園丁會的協助下逃了出來並加入園丁會,但她從未認同園丁會的價值觀,只是以其穩健的性格穩定著組織發展,並成為帶領倖存者度過災難的最主要力量。

亞曼達(Amanda)的個性類似第一部曲的Oryx,為適應環境練就出一身見機行事的能力,雖然短暫進入園丁會,但因為個性不合而離開,在匱乏、卑微的社會處境中,雖然外表頑強,但她是比誰都渴望著溫柔與安全。

第二主人翁芮恩(Ren)是無法選擇成為會眾的類型,她本是園區裡的人,媽媽琉森(Lucrene)與澤伯(Zeb)私奔,才開始了園丁會的童年生活,幾年後隨琉森回到園區生活,之後成為舞店女郎。

作者以極大篇幅描寫這三人食衣住行和到處逃亡的瑣碎故事。與想像中的末世男女續集截然不同,不免有些錯愕。但越是翻看內容,越覺得我們這些芸芸眾生,和書中的桃碧、亞曼達、甚至是芮恩有那麼些相似處。對中下階層的小市民來說,世界總有太多不可知,要求解答或真理,都是種奢侈。三位女主角雖有不同經歷,但都渴望擁有不同的人生,但書中能看到的,就是整個世界不停地令他們失望,連好不容易找到的殘破信仰,都只是某個大計劃的一部份。即使莫名其妙成為末世洪水後僅存人類,難過之餘還是得無奈收拾殘破的心情,繼續使上一身不怎樣的本領活下去。實在是對小人物最生動的寫照。

宗教組織,園丁會

園丁會的信仰核心是聖經的教義並且推崇過往聖徒的言行,會眾必須茹素並且過著簡樸及無為而治的生活,藉此度過無水之洪的試煉。但與所有新興組織相同,園丁會內同樣會充滿問題跟矛盾,對內,成員多半是志同道合者,但也不排除有人只是將其當成亂世中的避風港,或是陽奉陰違。組織上,會內亞當和夏娃們實際運作方式與宣揚的也是表裡不一,甚至還形成某種統治階級。對外,更有綿密情報網路蒐集當下最新資訊。這也是愛特伍在不同小說中常常傳遞的概念,所謂組織,永遠都不是外表看到的那麼簡單而是充滿著矛盾的潛規則。

畸形的理性主義

書中亞當一認定人類正在無可救藥的墮落中,並且得出唯有毀滅所有人類,然後再造新的人類才是人類能生活下去的唯一方法。

從理性分析來看,人類對自然環境、生態系統、和人類社會的畸形發展,的確導致地球環境和人文社會的破壞。亞當一的假設和邏輯看似合理,但卻帶出明顯地不可接受的結論。要正確處理這個悖論,便要指出其問題,亞當一的癥結是,不甘心只是亞當而要成為造物主,其後所做所為,雖然看似合理但更像是為了滿足私欲。

但是否真有能重建人類社會,建立與自然和諧共榮永續關係的方法呢?或許答案就在第三部曲,瘋狂亞當。

2021年6月11日 星期五

技術筆記:CSS與JavaScript

kayjean.idv.tw

去年底,因為工作需要複習了架網站技術,雖然內容都是些老掉牙的東西,如Servlet和Spring Framework(連結),但好歹還是程式範疇。沒想到,最近的新任務,幫太座架設攝影作品網站,連伺服器程式都省了,直接使用CSS和JavaScript這類原始工具,實在是越混越回去啦。

抱怨歸抱怨,實際上,考量攝影作品網站特性,因為都是靜態照片,的確不需要如PHP、AJAX之類互動架構。例如影像分享平台,如Format等,雖然猛一看會覺得琳瑯滿目,但仔細觀察就會發現也僅僅是許多CSS和JavaScript堆疊。

kayjean.format.com

除Format(連結,kayjean.format.com),參考曹良賓(連結),藍仲軒(連結)攝影師網站後,發現此類共同特色是畫面簡潔且功能性強,適合瀏覽形式。

  • 內容分為相片集,和附屬的About、Contact兩類。
  • 版面上,左側為導覽區(樹狀條列式),右側為內容區,有兩種呈現方式,縮圖和投影片播放,彼此間可互相切換。
  • 版面會因為電腦筆電或手持裝置而動態調整。

掌握以上原則後就是實作,原本是打算偷用這三者的CSS和JavaScript,但研究後發現,為了應付各式各樣商業需求,這類網站的功能都異常複雜,使用手法也都高深莫測,不是三兩天可以熟悉。就改為研究些較小型的專案,如下。

  • Portfoliojs(連結),左右橫向滾動swipe,沒有slide show,也不能單點某張。我喜愛這類簡潔又直覺的版面,老婆不然,她認為此種方式僅適合同質性很高的照片,否則會非常雜亂。
  • Photobox(連結),縮圖呈現,點擊後啟動slide show,視窗會蓋掉全畫面,類似還有連結連結連結

即使有這麼多參考資料,最後反而是參考W3.CSS Template Portfolio (連結)。雖然版面神似,但因為有清楚說明,且CSS和JavaScript全是自己能看懂的,更沒有引用第三方檔案。自行研發的好處是,後續的維護或增添新功能都更方便,且更有成就感。

縮圖版本

完成靜態網頁後,更陸續加入幾項功能。

  • 嵌入youtube影片。Youtube有提供影片縮圖,可下載當成概念圖,並嵌入個大大的撥放標誌。實際播放是透過iframe,必須另外寫程式啟動和關閉其中JavaScript。
  • 使用lazysizes-js 連結,達到預設讀取低品質縮圖,畫面實際呈現時,才陸續讀入高品質照片。這需要編輯端程式配合,為照片預先製作出不同解析度照片備用。

編輯作業

    程式設計的第一原則是:能簡單就不要複雜。這也是網頁端選擇靜態網頁的原因。而後端編輯作業,也很單純,以C#,直接分析檔案架構即可,概念上類似(連結)。

    • 掃描目錄,生成各目錄對應的基本檔案,並且製作出左側NAV需要的文字。
    • 掃描個目錄下檔案,複製各相片,並且將照片資料填入套版中相對應位置,更改NAV中標記部分,動態產生網頁。
    • 沿用套版,產生About和Contact網頁。
    • 複製到Synology的Web Server目錄,即可提供對外服務。

    網站資料

    自pchome購買kayjean.idv.tw的domain name,並由其託管DNS,如下圖(連結)。


    備註一:CSS及JavaScript搭配語法

    CSS(Cascading Style Sheets),印象中就是用在字型、間距和顏色等控制,與JavaScript這類邏輯性控制截然不同,以往都是一知半解,無非是拷貝、貼上,修修改改後就完事,知其然不知其所以然。這次比較認真了解。

    • 基礎版面flex和layout,連結
    • 基礎版面padding若只有兩個數字表示,上下及左右,連結
    • 控制物件,因為要不斷切換視窗,可以控制區塊的出現和隱藏。ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it.  Class can be used to identify more than one HTML element.
    • PC螢幕和手機會有不同顯示方式
    • Load larger image on high DPI displays 連結

    JavaScript

    • PC螢幕和手機會有不同顯示方式 respond的JS,使用JQUERY,連結,throttledresize,使用JQUERY,連結
    • chrome開發者工具,console能看錯誤訊息
    HTML
    • 使用圖標,來源(連結)
    • 使用mail標記,參考(連結)

    備註二:持續修正項目

    • 不同解析度讀取不同大小的圖片,這部分要再研究lazysizes功能
    • 加入次數統計
    • 測試MAIL功能
    • 改變字體
    • AWS取消AWS和FORMAT