Smashing Podcast 第 32 集：2020 年度回顧

在這一集中，我們回顧了 2020 年。今年我們在劇集中與誰交談，我們學到了什麼？ 讓我們回聽一些剪輯以找出答案。

顯示註釋

您可以在 podcast.smashingmagazine.com 上找到我們所有過去的劇集，包括每次採訪的完整記錄。

大家2021年見！

成績單

Drew McLellan： 1 月份，我與 Amy Hupe 討論了她在英國政府設計系統方面的工作，特別是團隊如何通過鼓勵貢獻來增加更廣泛組織對該系統的採用。 這是艾米。

Amy Hupe：我們很早就開始了。 因此，在我們擁有一種公共設計系統之前，我們就開始與我們認為會感興趣的貢獻者接觸。 我應該在這裡提到我們團隊中有一位出色的服務設計師。 她加入了我們……目前我不會以任何方式正確地確定日期，但我認為她在整個 2018 年都與我們一起工作，她的名字叫 Ignacia。 她只是在四處走動和吸引人們方面做得非常出色。 所以她做的一件事就是去識別政府中所有不同的模式以及這些模式的所有不同類型的變化。 所以走出去，有點說，“好吧。 有 10 種不同的方式可以在政府中申請地址。 讓我們一起看看它們，然後決定我們認為最合適的方法。 我們如何才能將這些合併為一個？”

Amy Hupe：她舉辦了一個大型研討會，試圖讓人們看到這些，並作為一個團隊進行那種整合。 我認為在我們真正向公眾發布任何東西之前，她以某種方式建立合作的方法確實對此有所幫助，因為這意味著人們已經有了這種意識，而且很多人已經以某種方式或另一個在我們真正公開之前。 所以我們已經領先了幾步。 所以我認為這真的很重要，而且只是堅持，整個團隊都堅持不懈地幫助人們做出貢獻。

Amy Hupe：我認為有一個想法，如果你讓人們為設計系統做出貢獻，那是一個非常棒的工作，因為你可以讓人們為你做所有的工作，你就坐在那裡，你修復你的小代碼，每個人實際上都在給你所有的好東西。 但實際上，任何從事設計系統工作的人都知道，它非常複雜。 製作一個適用於多個不同團隊的集中式解決方案非常困難。

Amy Hupe：真的，除非你從事過設計系統，否則期望任何人真正理解這需要什麼是不合理的。 所以有很多類型的手握。 支持貢獻者做出貢獻需要做很多工作。 我想我之前已經說過了，但我認為，幫助某人為設計系統做出貢獻可能需要更長的時間，而不是僅僅讓自己和集中式團隊製作東西。 但我認為認識到它帶來的價值並堅持不懈地努力讓人們意識到貢獻，幫助他們做到這一點，幫助他們感到有動力去做，我認為是的，堅持真的很關鍵我們在該領域的成功。

Drew：微軟的 Stephanie Stimac 和 Aaron Gustafson 與我們一起討論 Edge 採用 Chromium 作為其渲染引擎。 我向 Aaron 詢問了瀏覽器之間的競爭格局，以及多個瀏覽器在同一個渲染引擎上的結合會消除良性競爭，從而對開放網絡不利。

Aaron Gustafson：這確實是我長期從事網絡標準工作的人有點掙扎的問題。 我完全明白它的商業理由。 從微軟的角度來看，這很有意義。 從前端開發的角度來看，不必迎合一堆不同的引擎是件好事。 我的意思是，總的來說，我們這些在網絡上工作了很長時間的人肯定已經看到了渲染方面的很多融合。 我們沒有像我們遇到的那麼多問題，比如說在 Netscape 工作了 7 天，我們就像……我知道一些公司正在為每個不同的瀏覽器創建獨特的樣式表，這是站不住腳的。

Aaron Gustafson：但我認為現在不同的是，在最初的瀏覽器大戰中，你擁有所有這些專有引擎，並且每個人都在嘗試推出新的平台功能和新的 JavaScript 功能，或者在 Microsoft 對 JavaScript 進行逆向工程的情況下，以創建 JScript 並試圖弄清楚如何將它們組合在一起。

Aaron Gustafson：但是現在我們有能力在開源項目中實際合作，並且仍然可以進行對話，而且仍然……我不知道。 戰鬥不是正確的詞，但要認真討論不同方法的影響並彼此不同意，並真正致力於使規範真正好，並在例如 Chromium 的上下文中對底層代碼採用競爭方法Firefox 空間中的項目或 WebKit 或類似性質的東西或 Missoula。

亞倫·古斯塔夫森：是的。 一方面，我們確實失去了另一個渲染引擎，當 opera 決定使用 Chromium 時，我也感受到了同樣的痛苦。 但我在微軟內部感到有些欣慰，看到我們以一種有意義的方式實際參與 Chromium 項目，而不僅僅是坐下來接受來自 Chromium 下游的一切，實際上是在審查即將發生的事情平台並參與其中……是的。

Aaron Gustafson：所以我對此感到有點振奮，並且覺得我們不只是從那個項目中獲取，並且只是接受與該項目有利益關係的所有不同的人所傳遞的任何東西，而是為了實際上也在那里合作。

Drew： 2 月份，我與 Stephanie Walter 討論瞭如何使用 Bootstrap 等 UI 框架以及如何平衡可用界面的定制需求。 我問斯蒂芬妮是否有可能在使用現成框架的同時創建一個高度可用的 UI，或者它是否總是會有點尷尬。

斯蒂芬妮沃爾特：是的。 我認為是這樣。 但這也取決於您願意做出的妥協程度，而這對雙方都是妥協的。 目前，我正在犧牲很多按鈕，例如，因為您在材質 UI 中有一些非常具體的按鈕。 我真的不喜歡按鈕上的漣漪效應。 我認為它在移動設備上效果很好，因為在移動設備上，當用戶點擊或觸摸按鈕時，你需要一種大反饋。 但隨後他們會在按鈕上產生這種連鎖反應。 這有點矯枉過正，尤其是當有很多按鈕時。 但是我們仍然會保留這種漣漪效應，因為移除它會非常複雜，因為它是內置在 React 框架中的，並且在這個按鈕上有另一個懸停效果，更微妙的東西不會是這種濃密的東西這裡。 這將是超級複雜的。 所以這就是你所做的妥協。

Drew：倫理設計是我與 Trina Felber 和 Martin Michael Fredrickson 談話的主題。 我問，以道德的方式進行設計並避免黑暗模式是否是從長遠考慮企業的健康和增長而不僅僅是短期銷售目標的案例。 這是馬丁。

Martin Michael Fredrickson：完全正確。 我認為你必須把你在網上做的生意看作是你在一個中等城市的主要街道上有一家商店，在那裡你必須保持你的聲譽完好無損。 如果你不善待你的客戶，那麼如果你不善待你的客戶，長期來看，你就會破產，因為人們會去其他商店，或者他們會從網上購買。 所以無論你在網上做什麼，你都必須考慮到有長期的影響，而且，做複雜的事情或操縱的事情會有隱藏的成本。 如果你像 Trina 所說的那樣進行整理，就會有長期的節省，而當你談論商業模式時，這是從來沒有計算過的。 你總是談論你能賺多少錢。 你永遠不會談論賺這麼多錢的成本。

Drew： 3 月份，我與 Eduardo Boucas 討論了一個名為 Sourcebit 的開源工具，該工具從不同的來源收集內容並將其提供給您的靜態站點生成器。 我問 Eduardo，這是否可以通過啟用與無頭 CMS 等工具的集成來改善授權 SSG 的用戶體驗。

愛德華多·布卡斯：沒錯。 是的。 它可以的方式......我看到了兩種不同的方式來使用可以幫助開發人員的工具。 一種是讓 Sourcebit 成為您的部署例程的一部分。 因此，如果您使用的是託管平台，例如 Netlify，並且您將部署命令配置為，我不知道，Hugo build，是不是 Hugo 的構建命令之類的命令，為 Hugo 生成靜態文件。 您還將有另一個命令作為該例程的一部分。 這就像 Sourcebit fetch 一樣。 因此，在構建時，Sourcebit 將提取所有其他數據，生成 Hugo 需要的所有文件，然後整個部署將已經使用這些文件並部署來自 CMS 的所有內容。

Eduardo Boucas：所以這是 Sourcebit 的一種可能的用例。 另一種是在本地開發工作流中使用Sourcebit作為本地開發。 所以你可以用我們稱之為監視模式的東西來運行 Sourcebit。 所以 Sourcebit 一直在尋找遠程數據源的變化，所以在這種情況下，就是無頭 CMS。 因此，無論何時您發布文章或更改 CMS 中的條目，Sourcebit 都會承認這一點，並會在本地為您重新生成所有文件。

Eduardo Boucas：對於本地工作的開發人員來說，這意味著您可以讓您的 Hugo 站點旁邊的 CMS 窗口在本地運行，然後您可以實時看到發生的變化。 您在 CMS 上進行了更改，然後您可以看到該更改反映在本地站點上，我覺得這非常有用。 所以這些是您可以使用 Sourcebit 的兩種方式。

Drew：轉化優化是當時的話題。 當我與資深播客和顧問 Paul Boag 交談時。 我們討論了網站用來將訪問者轉化為客戶的一些技術。 但我想問保羅你如何衡量你所做的改變的影響。 保羅解釋道。

保羅·博格：是的。 絕對地。 我認為，再次，這是許多組織非常不擅長的事情，即清楚他們將如何衡量成功。 現在，是的，您的轉化率是一個指標。 你絕對應該跟隨。 但即使有轉換，你也需要比購買的人更複雜一點。 您還需要注意平均訂單價值。 您需要特別注意終身價值，對嗎？ 那麼客戶在他們整個生命中的價值是多少，因為如果您使用深色模式和類似的東西，您很可能會發現您的客戶流失率很高。 但實際上，轉化率應該只是您衡量的指標之一。

Paul Boag：您還需要注意參與度，即人們對您的內容的參與度如何，因為這對他們最終是否繼續轉化有很大的影響。 因此，您正在查看諸如您的視頻有多少、他們是否觀看、他們在您的網站上花費了多長時間以及他們在觀看時觀看了什麼？ 他們是否參與社交媒體之類的事情？ 最後一個方面顯然是可用性。 您需要衡量某人在其網站上完成特定任務的速度，以及他們發現該系統使用的難易程度以及其他各種不同的標準。

Paul Boag：有很多機制可以用來測量這些不同的東西。 有一些很棒的工具，還有一些你可以採用的好的指標。 例如，對於可用性，有一個叫做系統可用性量表的東西，它可以是一個非常有用的衡量指標。 但同樣，我經常使用像 maze.design 這樣的工具，它可以衡量某人購買商品需要多長時間，例如，通過結賬。 嗯是的。 擁有如此廣泛的指標，您不僅關注本季度的銷售額是多少？ 你必須著眼於更大的圖景。

Drew：四月份，我與 Better Blocker 的 Laura Kalbag 聊了聊在線隱私問題。 我們談到了被認為是公共的和私人的之間的界限越來越細，以及我們認為私人的東西可能不會被我們委託給我們數據的公司以這種方式看待。 這是勞拉。

Laura Kalbag：我有一個幾年前發生在我身上的經典例子。 所以我在 Facebook 上，我媽媽剛剛去世，我正在為葬禮承辦人做廣告。 我覺得這真的很奇怪，因為當時我的家人都沒有在社交媒體平台上說過任何話。 我的家人都沒有在 Facebook 上說過任何話，因為我們一致認為沒有人想通過 Facebook 找到關於朋友或家人的那種事情。 所以我們沒有說它。

Laura Kalbag：所以我問我的兄弟姐妹，“哦，有沒有人在 Facebook 上說過任何可能導致這種奇怪的事情。” 因為我通常只收到關於化妝、著裝和懷孕測試的廣告，以及他們喜歡談論的所有有趣的事情。 是特定年齡的女性。 相反，我姐姐回到了我身邊。 她說：“嗯，是的。 我的朋友住在澳大利亞。” 所以我在 Facebook Messenger 上給她發了一條消息，告訴她我們的媽媽已經去世了。 當然，Facebook 知道我們是姐妹。 它具有您可以選擇在那裡添加的關係連接。 我的意思是，不管怎樣，它可能會猜到我們是姐妹，我們在一起的地方，我們同姓的事實，並決定，“哦，這是一個合適的廣告，可以放在她的腳下。”

德魯：認為技術正在為我們做出這些決定，這真的很發人深省，不是嗎，在這個例子中，這實際上會影響人們，這是一個相當敏感或脆弱的時期？

勞拉·卡爾巴格：是的。 我們說它令人毛骨悚然。 很多時候人們會說，“哦，這幾乎就像我手機或筆記本電腦上的麥克風在聽我說話，因為我只是在談論這個特定的產品，突然間它出現在我的提要中無處不在。” 我認為真正可怕的是他們中的大多數人無法使用您的麥克風。 但事實上，您的其他行為，您的搜索，因為您彼此靠近以及您在設備上的位置，它知道您在與誰交談。 它可以將我們可能無法將自己聯繫在一起的所有事情聯繫在一起，只是為了說，“哦，也許他們會對這個產品感興趣，因為他們可能已經在思考、談論它了。”

德魯：隨著冠狀病毒大流行的爆發，許多國家進入某種形式的封鎖狀態，我與雷切爾·安德魯（Rachel Andrew）討論了 Smashing 如何調整其原定於在線舉行的面對面會議。 剛剛不得不推遲舊金山的 Smashing 會議，我問 Rachel 有什麼計劃將即將舉行的會議和研討會轉移到虛擬領域。

Rachel An Drew：非常非常快，一旦我們意識到我們將不得不推遲舊金山，很明顯，我們有工作坊，我和 Vitaly 都在粉碎和 comp 舉辦工作坊，他們在舊金山都賣光了，兩個我們的研討會。 顯然，我們有很多其他人來為我們舉辦研討會，與我們一起工作了很長時間的人，他們發現他們所有的研討會，對於我們這些做研討會的人來說，他們實際上是一個我們收入的關鍵部分。

Rachel An Drew：公開演講，你通常不會通過公開演講賺很多錢。 大多數人的薪水並不高，當你考慮到寫演講所花費的時間等等時。 對於擅長教授這些東西的人來說，研討會往往是一種很好的方式來賺錢。 所以它們代表了人們的收入。 因此，不僅需要我自己，而且 Vitaly 今年早些時候失去了我們的工作室。 我們還意識到，我們的許多 Smashing 演講者也依賴於這些研討會。

Rachel An Drew：所以我們想，“好吧，為什麼不把它們帶到網上呢？” 非常非常快，真的在那之後的幾天內，我們決定我和 Vitaly 會是第一個堅持我們的權力的人，但考慮到是我們，我們可以弄清楚如何去做。 我們也有非常不同的研討會。 Vitaly 更像是一種協作。 他有團體活動和事情。 我教課堂風格。 所以在我們之間，我們想，“好吧，我們有點覆蓋所有的基地。” 所以我們想，“讓我們去做吧。 讓我們看看它是否有效。” 所以我們給他們做廣告。 我們大概弄清楚了每個人需要多長時間，然後我們坐下來說，“嗯，在線研討會到底是什麼樣子的？ 這是什麼？”

Drew：我認為從技術的角度來看，作為 Web 開發人員，他們會立即思考，我們到底要如何提供這樣的東西，我的意思是，你必須看到很多不同的平台。 你看到了什麼不同的東西，Smashing 最終帶來了什麼？

Rachel An Drew：所以我們已經看過各種各樣的東西，而且我們仍然在這樣做的過程中。 我們目前正在使用 Zoom。 我們使用 Zoom 的原因是可訪問性。 它是最容易訪問的平台。 顯然，我們不想因為我們選擇的平台而將人們排除在外。 我認為其他平台正在變得越來越好，人們……我認為很多平台都有人來找他們說，“是的，你看起來很棒。 但我們需要你可以被訪問。” 因此，Zoom 是目前人們最容易使用的。” 所以這就是我們最終使用它們的原因。 我不知道我們是否會永遠這樣做。 但這就是我們目前正在使用的，它作為一種方法來做這些事情的效果很好。

德魯：隨著 Zoom 疲勞的出現，世界開始適應被迅速稱為新常態的事物，我與 Phil Smith 討論了技術如何幫助我們應對 COVID-19 等情況。 在短短 10 天內構建 React Native 應用程序 CardMedic。 我問菲爾，他如何平衡為工作選擇最佳技術與他熟悉並可以快速工作的技術。

菲爾史密斯：這是一個很好的問題。 我想一旦向我提到這個項目，我就想我確切地知道我將如何構建所有這些。 如果我沒有孩子，我坐在一個黑暗的房間裡，我想如果我一直在努力，我可能會在大約五天之內扭轉局面，因為要求非常嚴格符合我構建應用程序的經驗。 我已經構建了類似的東西，它調用 API，將結果存儲在狀態中並呈現它們。 我現在處於一個我喜歡的位置，“好吧，我需要回去重構它。”

Phil Smith：我談到了打字錫，但實際上應用程序中的類型可能非常鬆散，需要加強。 在後端，沒有太多測試，現在我們開始推出後端，因為很多人站出來說：“實際上，這是一個很好的資源。 我願意自願提供服務，將其翻譯成我的母語。” 後端被更多人使用，所以我只是在想，“等等，我需要在這裡進行更多測試，以確保沒有任何東西可以破壞，因為現在有人在生產中使用它。” 我想我回答了你的問題。 本質上，沒有決策。 我只需要盡快把它拿出來。

德魯：隨著工作場所關閉和我們中的許多人適應在家工作，我與 Ben Frain 談過優化您的家庭工作空間，使其成為一個舒適和高效的地方，不會導致長期的身體健康問題。 由於可用於在家設置的預算有限，我問 Ben 一把好椅子是否是最好的起點。

Ben Frain：這就是我的建議。 是的。 我的意思是，我不能自稱是這些事情的權威，但似乎這可能是你可以做的最重要的事情，讓你一整天都感到舒適。 你可以從相當昂貴的東西開始。 我犯了同樣的錯誤，最後我從亞馬遜買了一把 45 磅重的辦公椅，我沒有意識到它沒有向前傾斜，不管那個東西的正確詞是什麼，在軸上。 所以我發現它鑽進了我的大腿下面，有點在我的膝蓋後面，我在想，“為什麼我的腿在那個東西上坐了 45 分鐘後就死了？”

Ben Frain：我認為特別是如果你為一家提供像樣辦公椅的公司工作，你會認為它們是理所當然的，直到你看到那個特定的品牌和品牌，你才會去，“哦，天哪，這是700美元的椅子。” 當你意識到這個問題時，人們已經考慮了這一點並為你做了很多，然後很明顯你來到你的家庭環境中，你會想，“為什麼不花 X00 美元買一把椅子呢？” 但也許這是值得的。 特別是如果您長期來這裡。

德魯：我們得到的是長期的。 長期存在的其他東西是 Drupal。 6 月，我與 Angie Byron 就 Drupal 9 的變化進行了交談。自首次發布以來，Drupal 已經走過了漫長的 20 年。 我問 Angie，在遷移到 Drupal 9 時升級現有 Drupal 站點的過程是什麼樣的，對於那些長期運行站點的人來說，這是否可能是一個巨大的負擔。

Angie Byron：我認為基本上有三種情況。 因此，如果您正在運行 Drupal 8，並且每次出現新的 Drupal 8 次要版本時，您都會立即將其升級到新版本，並開始使用新的東西。 你的道路將基本上一無所有。 你已經做了所有的工作，你很好。 如果您不久前遷移到 Drupal 8 並且沒有跟上 BC 的變化，那麼您需要做一些工作。

Angie Byron：無論如何，這絕對是我們軟件十多年來最簡單的升級，我們有大量不同的工具可以幫助您。 有一個儀表板顯示所有貢獻的模塊以及他們的 Drupal 9 情況。 有用於檢查和檢查您的代碼並標記您擁有的任何已棄用功能的自動化工具，並且有用於自動查找和查找的工具，“哦，這是您模塊的最新版本，它已經準備好 Drupal 9 了嗎？ 你應該去下載它，”那種東西。

Angie Byron：所以從 Drupal 8 到 9，我想說那部分已經被很好地覆蓋了。 如果您來自先前版本的 Drupal，例如從 Drupal 7 或更低版本到 Drupal 9，那看起來確實有點棘手。 在我們在 Drupal 8 中所做的更改中，例如，我們完全轉向了面向對象的 PHP，並且我們開始利用在其他軟件項目中發現的設計模式，這在架構上是一件非常聰明的事情，但確實如此這意味著如果您在過去的生活中有大量自定義代碼，那麼在 Drupal 9 中，您將需要找到替代方案。

Angie Byron： Acquia 是一個名為 Acquia Migration Accelerator 的產品和開發，旨在解決這個問題，我們正在創建一個很好的 React 定義的應用程序，它讀取您的舊 Drupal 7 數據，為您創建等效的 Drupal 8 數據連同您將需要的所有模塊，映射到您的舊 Drupal 7 模塊，在可能的情況下嘗試並加快該過程，因為我們希望確保使用舊版本的每個人仍然可以使用新的世界秩序，每個人都在同一個版本上，我們都在共同努力。

Angie Byron：除此之外，我們還擴展了 Drupal 7……Drupal 的開源社區，他們將在明年 11 月結束 Drupal 7 的生命週期。 目前，無論如何，我們需要討論 COVID 是否會影響這一點。 但是有許多不同的公司，Acquia 就是其中之一，為 Drupal 7 提供擴展支持，至少到 2024 年。 這樣一來，可以輕鬆升級的人有一年半的時間來完成它，人們的升級不太容易，如果需要，可能有三年半的時間來完成它，或者更長，我們正在努力讓每個人都可以遷移，然後構建像 Acquia Migrate Accelerator 這樣的工具來幫助加快進程。

Drew：學習 React 是與 Mina Markham 對話的主題。 Mina 和我都是第一次學習 React。 考慮到像 React 這樣的框架給瀏覽器帶來了多少負擔，我問 Mina 將這麼多的控制權交給客戶端是否是一個錯誤。

Mina Markham：我想說是的，但要再次提醒我，我的經驗在很大程度上包含在大多數靜態網站中。 我不做很多產品開發。 所以也許在那個領域，這更有意義。 但從我的角度來看，當我們只需要一把黃油刀時，我覺得我們很多時候都在使用斧頭。 我不知道為什麼我們需要把所有這些都放在瀏覽器中，當我們可以做很多事情的時候，給客戶端帶來如此多的工作和如此多的壓力……我覺得我們可以做得更簡單。 一件事總是讓我對使用 React 有點猶豫，或者我說猶豫，但我的意思是當它讓我發自內心地憤怒並且我積極反對它時，我會去一個網站，實際上什麼都不會呈現，因為有一個錯誤或類似的東西真的整個頁面都壞了，因為一個功能壞了。

Mina Markham：很多時候，這讓我有點惱火，這是一種全有或全無的方法。 我過去在 AEA 和其他地方的演講之一是在談論如何包括漸進增強，而不僅僅是你的開發，還有更大的藝術指導和網站設計。 我會特別指出一些沒有進行漸進增強或任何優雅降級的網站的例子。 要么你在瀏覽器中運行了 JavaScript，要么你一無所獲。 這將只是一個簡單的網站，代表有關網頁設計歷史的信息，這是實際談論的網站之一，從 1990 年到現在的網頁設計歷史。 這是一個漂亮的網站，有很多時間線和動畫。 但它也可以只用一個列表靜態呈現。 在什麼都不展示和展示精美增強的體驗之間有一些步驟，我認為由於我們現在接近現代 Web 開發的方式而迷失了這些體驗。

Drew：我和 Andy Bell 討論了 CUBE CSS，一種採用 BEM、SMACSS 和 OOCSS 方式的樣式方法。 許多 CSS 方法都試圖對抗 CSS 的自然屬性，例如級聯。 CUBE 非常接受這種行為。 這是安迪。

Andy Bell：一個很好的類比是 SCSS，就像 Sass 一樣，是自然 CSS 語言的擴展，不是嗎？ 你在 CSS 中還是很正確的。 所以CUBE CSS就是這樣。 所以它是CSS的擴展。 所以我們還是應該寫 CSS，就像 CSS 應該的那樣……好吧，它應該是寫出來的。 老實說，這應該是怎麼寫的。 這個名字給出了它，層疊樣式表。 所以它再次接受了這一點，因為我發現我已經一路下降到微優化級別。 我一直在走這條路，最近我看到很多人在哪裡……我在文章中也提到了這一點，我可以看到……最近有一些證據。 我發現人們一直在創建間隔組件和類似的東西，我理解這個問題。 我一直處於這種情況。

Andy Bell：我修復它的方式是，我沒有深入研究並嘗試進行微優化，而是開始在組合層面上思考問題，因為你的組件有多小並不重要。 在某些時候，它們將成為頁面。 它們將成為視圖。 你無法避免這一點。 事情就是這樣。 因此，不要試圖說，“對，我需要這些小幫手來做這個佈局，”你說，“對，我有一個聯繫人頁面視圖或一個產品頁面視圖，這是一個骨架佈局組合。 然後在其中，我可以將任何我想要的組件插入其中。”

Andy Bell：我們現在有了像 Grid 和 Flexbox 這樣的東西，它們讓這更容易實現，而且你基本上可以將任何你想要的東西放入骨架佈局中。 沒關係。 然後，組件應該按照您希望它們的行為方式運行，無論是否使用容器查詢。

德魯：蓋茨比是我和馬西·薩頓聊天的主題。 雖然大多數靜態站點生成器都與前端代碼無關，但 Gatsby 使用 React，因此您最終會將 Gatsby 代碼作為最終 Web 體驗的一部分運行。 我問 Marcy 那段代碼是什麼以及它提供了什麼功能。

馬西薩頓：是的。 我想說其中最大的一部分是客戶端路由。 所以蓋茨比現在正在使用引擎蓋下的翻新機。 它只是一種自己的實現。 但這就是當您第一次加載靜態站點時，那裡有 HTML 文件。 因此，如果用戶出於某種原因關閉了 JavaScript，您的網站應該仍然存在，仍然有內容。 但是如果啟用了 JavaScript，就會發生這個水合步驟，當你在 Gatsby 站點中使用鏈接時，它會從該頁面預取資源。 所以它會加載得更快。 Gatsby 為您提供的這個 JavaScript 層啟用了所有這些功能。

Marcy Sutton：除此之外，這實際上取決於您在站點中使用的內容，以及最終在 JavaScript 包中的內容。 但是對於使用大量交互性的東西，比如可訪問的界面，這是一個很好的地方。 對我來說，我真的很喜歡隨時使用 JavaScript 並且讓我的標記處於一個好位置。 我知道這是一個偏好問題，無論您是否想要 HTML、JavaScript 和 CSS，所有這些都巧妙地耦合在一起，並且在構建 Gatsby 中存在變化的空間。 您不必總是使用 CSS 和 JS 之類的東西。 但這實際上是在您編寫網站時獲得動態 JavaScript 層的強大功能。 它不像這個插件在一個單獨的文件中。

Drew：當我想到靜態站點生成器通常是如何工作的時候，我想到的可能是 markdown 文件中的內容，生成器會運行這些內容並將其與模板合併，並創建數十、數百、數千個 HTML 文件，這些文件是您網站的頁面。 當我想到 React 站點或應用程序時，我更多地考慮單頁體驗，其中界面由 React 動態創建。 所以你是說蓋茨比兩者都做？ 它正在創建所有頁面並使用 JavaScript 對其進行增強？

馬西·薩頓：是的，是的。 Gatsby 將在構建時使用 Node.js，它會檢查你的 React 組件並將它們編譯成 HTML 文件，老實說，當我第一次看 Gatsby 時，我不會關閉 JavaScript，就像，“好吧，這裡還有其他頁面嗎？ 這是什麼？” 我很高興 Gatsby 默認就是這樣工作的。 它將從你的 React 組件創建構建文件，這太棒了。

Marcy Sutton：我已經探索了更多漸進增強的方法，因為它是在 JavaScript 中的，比如，如果你想為用戶輸出一些漸進增強的東西，如果他們確實關閉了 JavaScript，你不希望所有這些假定 JavaScript 的損壞代碼有沒有。 所以它有一些怪癖。 但是您可以解決這種問題，至少對於您希望某人仍然能夠購買東西的核心用戶流。 您可能需要為這些用例添加一些支持。 但令我驚喜的是，蓋茨比默認推出的方式。

Marcy Sutton：所以他們以這種方式構建網站是他們做出的選擇，我們一直在評估，這仍然是最好的方式嗎？ 我們需要做些什麼來為我們的用戶提供他們所要求的東西？ 因此，我們在內部進行了一些探索，繼續進行只是為了確保 Gatsby 在構建網站方面做得最好，因此保持包的大小很小，並確保在我們所說的性能代碼與 pre 之間進行權衡-fetching，我們有數據支持嗎？ 作為開發人員倡導者，我對這種事情非常感興趣，確保我們在網站上打包和捆綁的東西確實是需要的，並且真的會成為它可以製作的最好的 Gatsby 網站。

Drew：在 7 月份與 Chris Ferdinandi 交談時，我詢問現代最佳實踐是否對 Web 不利。 克里斯支持稱為精益網絡的運動，我問他這意味著什麼。 這是克里斯。

Chris Ferdinandi: When I look at the way we build for the web today, it feels a little bit like a bloated over-engineered mess. 我開始相信，我們今天認為的許多最佳實踐實際上可能會讓網絡變得更糟。 The Lean Web is an approach to web development that is focused on simplicity, on performance, and the developer experience over… I'm sorry, not the developer experience, the user experience rather, over the developer experience and the ease of building things from a team perspective, which is what I think where we put a lot of focus today.

Chris Ferdinandi: As we'll probably get into in our conversation, I've actually come to find that a lot of these things we think of as improving the developer experience do so for a subset of developers but not necessarily everybody who's working on the thing you're building. So there's a whole bunch of kind of issues with that too that we can kind of dig into. 但實際上，精益網絡關注的是用戶的簡單性和性能，並真正優先考慮或關注使用我們製造的東西的人，而不是我們，製造它的人。

Drew: In August, Chris Coyier joined us to talk about all things serverless. I asked him what sort of the tasks they were putting serverless to over at CodePen?

Chris Coyier: Well, there's a whole bunch of things. One of them is, I think, hopefully fairly obvious is, I need… The point of CodePen is that you write each HTML, CSS, and JavaScript in the browser, and it renders it in front of you, right? 但是您也可以選擇預處理器語言。 假設你喜歡 Sass。 您在 CSS 中打開 Sass，然後編寫 Sass。 好吧，有些東西必須處理 Sass。 這些天來，Sass 是用 Dart 或其他東西編寫的。 Theoretically, you could do that in the client. 但是這些進行預處理的庫非常大。 我不認為我想把整個 Sass 庫發給你，只是為了運行那個東西。 我不想。 That's not the right architecture for this necessarily. Maybe it is down the road. I mean, we could talk about offline crap, yada, yada, web workers.

Chris Coyier: There's a million architectural things we could do. 但這就是它現在的工作方式，是否有 lambda。 它處理 Sass。 它有一個微小的、微小的、微小的、微小的工作。 You send it this blob of Sass, and it sends you stuff back, which is the processed CSS, maybe a site map, whatever. It has one tiny little job, and we probably pay for that lambda like four cents or something. Because lambdas are just incredibly cheap, and you can hammer it too. 您不必擔心規模。 You just hit that thing as much as you want, and your bill will be astonishingly cheap.

Chris Coyier: There is moments where serverless starts to cross that line of being too expensive. I don't know what that is. I'm not that master of stuff like that. But generally, any serverless stuff we do, we basically all nearly count as free, because it's that cheap. 但是 Sass 有一個。 有一個少。 有一個給巴貝爾的。 TypeScript 有一個。 有一個用於……所有這些都是我們運行的單個 lambda。 Here's some code, give it to the lambda. It comes back, and we do whatever we're going to do with it. 但我們使用它的用途遠不止於此，即使是最近。

Chris Coyier: Here's an example. CodePen 上的每一支 Pen 都有一個屏幕截圖。 這有點酷，對吧？ So the people make a thing, and then we need a PNG or a JPEG, or something of it, so that we can… that way when you tweet it, you get the little preview of it. 如果你在 Slack 中分享它，你會得到它的小預覽。 We use it on the website itself to render… Instead of an iframe, if we could detect that the Pen isn't animated, because an iframe's image is much lighter, so why not use the image? 反正也不是動畫。 只是這樣的性能提升。

Chris Coyier: So each of those screenshots has a URL to it, obviously. We've architected it so that that URL is actually a serverless function. 是一名工人。 So if that URL gets hit, we can really quickly check if we've already taken that screenshot or not. That's actually enabled by CloudFlare Workers, because CloudFlare Workers are not just a serverless function, but they have a data store too. They have this thing called key-value store. So the ID of that, we can just check really quick, and it'll be, “True or false, do you have it or not?”

Chris Coyier: If it's got it, it serves it, and it serves it over CloudFlare, which is super fast to begin with and then gives you all this ability too because it's an image CDN, you can say, “Well, serve it in the optimal format. 把它當作這些維度來服務。” 我不必製作這些尺寸的圖像。 You just put the dimensions in the URL, and it comes back as that size, magically.

Drew: I talked to Next.js co-creator, Guillermo Rauch about the features on offer in Next.js and asked about its automated code splitting functionality. As the size of our JavaScript bundles can have quite an impact on performance, I was interested to know if Next had ways to tackle that. Here's Guillermo.

Guillermo Rauch: Yeah. Your observation is 100% right. So one of the biggest things with the web and one of the biggest weights on the web is JavaScript. Just like different materials have different densities and weights, irrespective of the actual physical volume, JavaScript tends to be a very dense, heavy element. Even small amounts of JavaScript compared to, for example, images that can be processed asynchronously and off the main thread, JavaScript tends to be particularly bothersome.

Guillermo Rauch: So Next.js has invested a tremendous amount of effort into automatically optimizing your bundles. So the first one that was my first intuition when I first sort of came up with the idea for Next.js was, okay, you're going to define, for example, 10 routes. In the Next.js world you create a pages directory, and you drop your files in there, index.js, about.js, settings.js, dashboard.js, terms-of-service.js, signup.js, login.js. 這些成為您可以通過各種媒體共享的應用程序的入口點。

Guillermo Rauch: When you enter those, we want to give you JS that is relevant for that page, first and foremost, and then perhaps a common bundle so that subsequent navigations within the system are very snappy. Next.js 也非常非常好，它會自動預取連接到該入口點的其餘頁面，這樣感覺就像一個單頁應用程序。 So a lot of people say like, “Why not just use Create React app if I know that I have maybe a couple routes?” I always tell them, “Well, look. You can define those as pages, and because Next.js will automatically pre-fetch ones that are connected, you end up getting your single-page application, but it's better optimized with regards to that initial paint, that initial entry point.”

Drew: In September, I had the pleasure of talking to Cassie Evans about SVG animation. We talked about the approachability of SVG for developers who are already familiar with HTML. Here's Cassie.

Cassie Evans: I think that that's what I love the most about SVG is I'm really into creative coding and also teaching people, and I found that teaching people who are more of a creative leaning, they sometimes get a little thrown off when you immediately jump in with JavaScript or Python or something like that for creative coding. But without fail, I've managed to get anyone that I taught on board with SVG because there some really approachable entry points because it does look like HTML.

Cassie Evans: So you can give someone with an understanding of HTML and how to build websites SVG, and it looks the same, but it's the graphics instead of documents, and then you can animate that with CSS to start off with, which is also a little bit more comfortable, and then you can kind of progress to animating it with JavaScript. So it's a really good learning curve.

Drew: Of course, it can be dynamic. It's not just a case of creating motion. You can actually make the properties of it dynamic. So one of the interesting things I've seen SVG used for, and it's a grand term, but data visualization, dataviz, and drawing graphs and charts and of course things like dashboards that we seem to have everywhere these days. SVG is sort of perfect for that, isn't it?

Cassie Evans: Yes, definitely. SVG is great for dataviz. All the way from kind of small dataviz up to D3 which is very well known dataviz library that uses SVG under the hood. But you could also just, if you've got a little bit of data that you wanted to show on a web page, you could create a chart in a graphics editing program, and then you could just use JavaScript to change those values and kind of change how your graph looks. So you don't have to go all in with a massive database library. You can kind of just start off small.

Drew: The Jamstack framework, RedwoodJS was the topic of conversation with Anthony Campolo. I asked Anthony what it meant to be a full-stack Jamstack framework in practical terms.

Anthony Campolo: Yeah, it's pushing the boundaries of what a Jamstack application can be. So by calling it full-stack Jamstack, it's about, how do we go beyond just the front end to having the same sort of deployment paradigm of just get pushed, getting your whole code deployed? How do we get that but also with our back end and have it all connected?

Drew: Vue.js version three was released in October, and I caught up with Natalia Tepluhina from the Vue core team. Discussing the new version, I was curious if the major version bump was just a result of a few backward incompatible modifications or if this was a very clear revisiting of Vue to make deeper changes to the framework.

Natalia Tepluhina: No. I think it was an idea to create a new version due to a few very important things. 因此，首先，有改變反應性的動機。 Previous one was built upon Object.defineProperty, and it had a few caveats. They're all documented, but still, even if you document something that people shouldn't do, they will do it anyway, and you would need to point them to the documentation. Nobody reads documentation, by the way. For some reason, it just happens. Until you point people out, it doesn't exist in docs, it does. 不過沒關係。 無論如何，我們都會教你。

Natalia Tepluhina: So reactivity was one of the things. Performance was the next. Vue 2 still had and has not the worst performance, but we had a few ideas about how to make Vue faster, and also, there was one pain point for a particular part of our, let's say audience, people that use Vue. 那是打字稿。 Vue 2 internally was written in Flow, which is still strongly typed one, but typing with TypeScript were a real nightmare especially if you were working with our state management Vuex.

Natalia Tepluhina：所以這又是一個重要的部分。 最後一個是我們有點錯過了抽象邏輯的功能，不是組件，而是可組合的邏輯部分，比如函數助手等，但它們也應該能夠包含 Vue 活動。 一個很好的例子可能是 React Hooks，對吧？ 它們允許您抽像功能的各個部分，而這在 Vue 中顯然是缺失的。 我知道現在聽起來像是“你從 React 偷了這個特性”。 事實上不是。 我相信想法異花授粉是我們生態系統中一個重要而美好的部分，它還可以幫助開發人員在收藏夾之間切換，對嗎？ 因此，我們正在研究這些主要功能，以創建 Vue 3 作為主要版本。

Drew：之後，我們與 Stefan Baumgartner 一起深入研究了 TypeScript，以了解它如何幫助我們編寫更好的代碼，減少錯誤。 觀察到組織將其代碼基礎完全遷移到 JavaScript 的趨勢，我問 Stefan，TypeScript 是否是大型團隊比個人受益更多的東西。

Stefan Baumgartner：所以我目前處於同樣的過渡期。 所以我們有很多 Java 和 C++ 開發人員，他們將在未來編寫大量 JavaScript。 TypeScript 可以成為新編程語言中那些可怕領域的某種指南。 如果你來自不同的編程語言，JavaScript 有很多怪癖、很多歷史和很多偏見。 所以 TypeScript 可以作為指南，因為在類型系統中有一些你熟悉的概念。

Stefan Baumgartner：而且，我認為，尤其是當你有很多人在同一個代碼庫中工作或有很多人需要相互合作時，這可能是你項目中額外的一層指導，而你不需要'最後沒有任何不好的驚喜。 所以當然，技術並不能解決任何溝通問題。 這不是 TypeScript 的用途。 但它可以降低，或者它可以為正確的討論騰出更多空間，如果你不必談論，你對我的代碼有什麼期望，而是你的代碼應該做什麼，或者你應該做什麼圖書館呢？

Stefan Baumgartner：我總是說，如果你曾經為其他人寫過代碼，或者如果你和很多人一起寫過代碼，或者如果你只是為自己寫過代碼，那麼你必須在第二天重新審視，考慮 TypeScript，因為它可能會幫助你長跑。 這不僅是對下週下一個項目的投資，而且對於那些說，好吧，特別是如果你有一個月、兩年或幾年的長期項目，肯定會提供的。 當你在一年前編寫一小段代碼時，你永遠不會知道你在想什麼，但是類型可以給你一個暗示你的意思。

Drew： 11 月，我和 David Darnes 聊了聊靜態站點生成器 Eleventy。 我們討論了模板，以及有多少靜態站點生成器對您應該使用哪種類型的模板非常自以為是。 我想知道十一是否也有同樣的堅定信念。 這是戴夫。

大衛·達內斯：不，我不得不說這是你所能得到的最無主見的。 有點個人觀點，但我很難看到任何框架或任何可以不受約束的東西，因為為了創造一些東西，你必須對你想如何做某事有自己的看法。 這有點矛盾。 我相信人們可以糾正我。 但是，是的。 您可以切換到您覺得最舒服的任何模板語言。 我的意思是，我們只是在談論您熟悉的語言。 Eleventy 在某種意義上吸引了這一點，因為你需要在 HTML 中使用什麼模板語言，或者甚至是你的 CSS，如果你願意的話。

David Darnes：對我來說，我直接去了 nunjucks，因為 nunjucks 是 Eleventy 內部的默認模板語言。 這意味著我可以使用點 HTML 擴展名並保持原樣。 現在，我只想讓人們更加困惑，並說：“無論如何，你可以隨意命名。 你可以玩得很開心。” 但是你可以使用車把。 我認為您可以使用常規的 JavaScript 模板並像那樣迭代它。 車把很受歡迎，Liquid 也很受歡迎。 我無法想到所有這些，但是如果您在配置中進行了所有設置，則可以隨心所欲地選擇。

David Darnes：我想說我是一個真正的模板語言的忠實粉絲。 不久前，當我發現你可以在 WordPress 中使用 twig 時，這讓我大吃一驚。 我當時想，“哦，謝天謝地。 我不必在 PHP 中處理 for 循環。” 再一次，我認為一些更舒服、更容易理解、更易讀的東西。 嗯是的。 Eleventy 有很多不同的模板選項，它應該會吸引那些對這些不同的模板感到滿意的人。

Drew：我與 Leslie Cohn-Wein 討論了 Netlify 如何使用自己的平台構建 Netlify，以及他們的 Deploy Preview 功能如何成為前端更改的有效暫存平台。

Leslie Cohn-Wein：也許整個過程中我最喜歡的部分是 Deploy Previews 的魔力，我們通過 Netlify 獲得了它。 所以發生的事情是你在 GitHub 上工作，你推了你的 PR。 因此，您在 GitHub 中打開您的 PR，這將自動創建您的應用程序部署預覽的構建。 因此，我們實際上使用應用程序本身的部署預覽來進行測試，以確保一切正常運行。 我們運行我們的測試。 這就是我們在代碼審查期間用來手動驗證的方式。 所以我們已經從 GitHub 上設置了所有的持續部署。

Leslie Cohn-Wein：那麼我們設置的另一件很酷的事情是，我們實際上有幾個不同的 Netlify 站點，它們從我們的應用程序所在的同一個存儲庫中提取。 所以我們都有我們的應用程序。 我們有一個 Storybook 實例，其中包含應用程序的一些 UI 組件。 所以我們有我們的應用程序本身。 我們有 Storybook UI 組件，我們基本上有一個 Netlify 站點來顯示我們的 Storybook UI，然後我們還有第三個站點運行 webpack 包分析器。 所以它是一種可視化 UI，為您提供所有應用程序包的樹狀圖可視化，我們可以衡量它們的大小，這只是提醒我們在每次部署應用程序時都要仔細檢查出來，我們可以檢查並確保我們在那裡的包大小沒有做任何奇怪的事情。

Leslie Cohn-Wein：所以這三個網站都是在應用程序的一個拉取請求中生成的。 因此，您將獲得應用程序 Storybook 和該應用程序配置文件的預覽鏈接，本質上是您的部署預覽，以供我們檢查。

Drew：去年 12 月，我與 Chris Murphy 討論了產品設計以及以設計為重點的企業意味著什麼。 我們討論了個人創始人的設計重點是否會洩漏到業務中，以及產品是否自然是創建它的人的延伸。

Chris Murphy：我認為這是一個非常好的問題，Drew，我認為答案取決於它。 我認為這取決於那個人，這取決於公司的規模。 如果你看一下 Hiut Denim，我在教學中經常使用 Hiut，這是一個很好的例子，說明一家公司做得很好，那就是他們的綁帶牛仔褲。 我想如果你看看大衛以前的……大衛和克萊爾，因為他們是合夥人。 如果你看看 David Hieatt 和 Clare Hieatt 以前的公司，也就是 Howies，那家公司已經發展得如此之大，參與的人也很多。

克里斯墨菲：一旦規模開始蔓延，就開始變得非常難以關注客戶旅程中所有重要的小接觸點。 我認為當他們離開豪伊斯時，這真的很能說明問題，因為豪伊斯已經被……買走了。這很複雜。 去網上閱讀吧。 但這是 Timberland，Timberland 被收購了，這就是故事。

Chris Murphy：我認為他們現在關注的是牛仔褲，這真的很有趣。 而已。 他們正在講述一個關於牛仔褲的非常好的故事。 他們還把所有東西都包裝得非常非常好，牛仔褲就像是故事的載體，真的。 德魯，我認為隨著我們走出 COVID 的另一端，這將變得更加重要，我希望我們能走出 COVID 的另一端。 每個製作牛仔褲的人都得到了適當的工資。 當我看到這個世界時，我現在遇到的問題之一是並不是每個人都得到了適當的工資，作為一個人，我發現這有點令人擔憂……看，我今年 51 歲。我兒子 25 歲、24 歲, 25, 類似的東西。 它是可怕的。 我應該知道這一切。 他是一名婚禮攝影師。 他已經做了一年多的婚禮攝影師。 他的生意被徹底摧毀了，因為現在沒有人真正結婚，因為這很困難。 他沒有薪水，因為他沒有足夠的自僱書籍來獲得支持。

克里斯墨菲：他從裂縫中跌落，還有很多其他人從裂縫中跌落。 我認為這是一個設計問題，我們需要將其視為一個設計問題。 但是，如果我也看一下 COVID 和政府以及所有這些更廣泛的問題，而不是太政治化，我昨天在衛報上讀了一篇關於馬特漢考克的鄰居的文章，以及任何不是來自英國的人，馬特漢考克是衛生部長。 他的鄰居正在經營一家企業，他正在給他發短信並詢問有關“我如何為這種 COVID 產品提供產品？”的建議。 有很多關於談笑風生的謠言，這就是報紙所說的，政府部長的朋友的朋友，他們似乎找到了工作，因為他們認識合適的人。

克里斯·墨菲：我覺得我們會走到另一端，看到這個……人們看到了，他們會想，“嗯，這些錢去哪兒了，人們得到了適當的報酬嗎？ X 店的這件 1 磅重的 T 恤多少錢？” 我不想提及任何品牌。 但是一切都必須付出代價，而所做的一切，都必須付出代價才能做到。 我認為人們越來越感興趣，人們得到了公平的報酬嗎？

Drew： GraphQL 是我們今年最後一集的主題，我和 Eve Porcello 聊了聊，詢問 GraphQL 在開發堆棧中的位置。

伊芙·波切洛：是的。 GraphQL 適合前端和後端。 所以它介於兩者之間，給前端開發者和後端開發者帶來了很多好處。 如果您是前端開發人員，則可以定義前端的所有數據要求。 因此，如果你有一個很大的 React 組件列表，例如，你可以編寫一個查詢，這將定義為該頁面填充數據所需的所有字段。

Eve Porcello：現在，有了後端，它真的是自己的了，因為我們可以從很多不同的來源收集很多數據。 所以我們在 REST API 和數據庫以及所有這些不同的地方都有數據，而 GraphQL 為我們提供了這個漂亮的小編排層，以真正理解我們所有數據所在位置的混亂。 所以它對堆棧中的每個人都非常有用。