[譯] 已經 2019 年了，我依然赤手空拳製做網站

時間 2019-11-15

原文原文鏈接

原文地址：It’s 2019 and I Still Make Websites with my Bare Hands

原文做者：Matt Holt

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：EmilyQiRabbit

校對者：Fengziyin1234，TUARAN

我徹底不知道該怎樣像如今那些酷小孩同樣製做網站。html

我所知道的是，咱們的前端團隊爲新網站花費了一天的時間來搭建基礎框架，而後，次日我運行 git pull，下載了這些東西（在合併鉤子以後）：前端

（我必須殺掉了計算文件體積的進程，由於它佔用太多 CPU 資源了。）jquery

它顯示出了 Hello world，可是他們告訴我，它有能力作更多的事情！我想他們是想說它甚至可讓我爲 toasts 敬酒了。android

我認爲，若是有一件事（一項技術），大多數的網站開發者，甚至並不是從事計算機科學的人，在談論到本身的網站的時候，都能或多或少說一點，那麼這件事（技術）必定是 frameworks 或者 hosted services（由於我不知道這些單詞是什麼，但它們也不在個人 CS 課程裏），並且說實話，它們聽起來都很神奇。我將他們描述的和我正在作的事情作了比較，我感受我本身的知識真的很是匱乏。而他們在像 DevMountain 這樣的代碼學校，或者最新的在線課程裏學習最熱門的技術。ios

不管如何，看來我已是「老學派」了，儘管我從事網絡開發只有差很少 10 年。git

僅僅靠本身的雙手搭建代碼angularjs

19 年了。就像當初 <FONT> 標籤是正確的方法。（我...11 歲的時候，教會我 HTML 的那本有趣的書的連接）github

而後就發生了下面的事，因爲他們知道了我有多年網絡開發的經驗，有人就來請求個人幫助。隨後我就知道了我對如今的狀況已經一無所知，因此我就在谷歌搜索了 React 的雙向數據綁定和 SCSS 的動態變量，還有其餘那些我不知道的東西，可是他們卻沒有獲得和我相同的理解，由於他們本該看到答案的時候就徹底明白了，然而我本應該什麼都不懂，只能詢問「這個怎麼樣？」，可是其實他們找不到我給出的答案。web

由於我會對這些框架感到無能爲力，早晚我就必須開始詢問他們：「啊，請等等，這個是作什麼的？」指着那段我覺得是函數調用的代碼...額，哦不，這是一個類型定義，這就尷尬了！他們的回答一般也是很不讓人不滿意（答案都比較淺薄），因此我就更努力的鑽研更多知識，好幫他們調試應用：後端

「可是這部分是如何工做的呢？好比說，它其實是在作什麼？」我問道

我一般獲得的都是一段無言的凝視。他們幾乎全都不知道。

因此我就處於了這樣的境地，已經 2019 年了，我已經寫了近 20 年的代碼，我周圍的人的薪資都是個人 2-10 倍（可是我仍是個學生）可是他們殊不知道如何解釋他們本身的代碼是如何運做的。因此我認爲，那其實並非他們本身完成的代碼。就像我並不知道個人車是如何工做的，可是我依舊能夠天天都駕駛它。

可是，在你不知道工做原理的狀況下，你要如何構建應用程序呢？

爲何一個須要展現幾個列表，發送幾個 AJAX 請求的網絡應用須要超過 500M 的文件呢？（沒錯，我依然這樣稱呼它們。我也把它們稱爲 XHR，儘管 XML 已經很過期了。）

爲何不少網站要破壞個人返回按鈕或者滾動條？就像是，你必須本身努力來實現它們。

爲何打包一個有 5 個路由的網站應用須要花費時間是個人 25000 行代碼的 Go 程序交叉-編譯時間的十倍？

Papa Parse 是怎麼變的愈來愈重了

在 2013 年，我在飛往迪士尼的航班上寫了一個 CSV 解析器。個人瀏覽器須要一個快速準確的 CSV 解析器，可是已有的都不符合個人要求。因此我本身寫了一個，這就是 Papa Parse，如今被不少知名的用戶使用 —— 從聯合國到各地的公司和組織，甚至是 Wikipedia —— 我很爲它而驕傲（有點不謙虛的說，按理說它是服務於 JavaScript 的最好 CSV 解析器）。最開始它就是個很簡單的庫，運行也很是好。

而後有需求須要它兼容老版本的瀏覽器，因此我加上了 shims，嗯，也還好吧。

而後有需求但願能夠在 Node 上使用它。

接下來，不止是需求，還有問題反饋 —— 它在 <insert JavaScript framework here> 的時候沒法正常運行。這就有點讓人發狂了：添加對一個框架或者工具鏈的支持，就會讓其餘的失靈。Papa Parse 從只有幾百行代碼增長到幾千行。這已是不一樣的數量級了。從只有一個文件，到大概有十幾個。從不須要構建，到大概 3 到 4 個系統構建以及分佈式打包。

全部都是爲了瀏覽器中 Papa.parse("csv,file") 的豐富功能。

我最終放棄了它的維護，交給了社區中的其餘人。他們很是好的完成了維護工做。它的功能遠遠超出了我所能支持的。在此以前，我在我本身的小世界裏，完成很輕量、擁有它本身原本樣子的庫，自得其樂。可是如今，儘管 Papa Parse 依然是一個很棒的庫，可是我已經再也不知道它到底是作什麼的了。

（順便說一句，我依然很喜歡而且推薦 Papa Parse，萬一你正好須要 JavaScript CSV 解析器。）

按照老樣子，我如何製做個人網站

我不認爲本身是一名網絡設計師，甚至也不是網站開發者，可是當我須要的時候我仍是會製做網站（而且我常常這樣作 —— 次數很是多，因此我寫了一個完整的網絡服務，Caddy，來讓這個的過程更加快速）。

我不是開玩笑的，我仍然是這樣製做網站的：

打開一個編輯器，寫下這些（手寫，大概只須要 30 秒 —— 爲了這篇文章的真實性，我甚至真的寫了一遍 —— 除非煩人的標籤在這裏並不起做用）：

<!DOCTYPE html>
<html>
  <head>
    <title>I code stuff with my bare hands</title>
    <meta charset="utf-8">
  </head>
  <body>
     Hi there
  </body>
</html>
複製代碼

而後我打開了一個新的標籤頁，寫了 CSS 文件；也就是像這樣的代碼：

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-size: 18px;
  color: #333;
}

p {
  line-height: 1.4em;
}
複製代碼

JavaScript 怎麼辦呢？我固然也用了。可是，僅用了我懂的那部分。我有不少須要學習，尤爲是如今還出現了 ES6，以及不少新的 API 好比 fetch，可是我仍舊會在一些場景（強調下一些）中使用 jQuery —— 它能完成特定的任務，好比可以很是簡單直接的操做多個 DOM 元素，並且它幾乎是模版代碼，我能夠積累下來，還能夠從一個項目複製粘貼到另外一個項目。並不存在依賴地獄。

不管如何，我僅在這裏加入了須要的 JS 代碼。我偶爾也會加入一些僅基於原生 JS 的庫，例如用 Papa Parse 來知足高級、高性能 CSV 解析需求。（UtahJS 視頻的連接，我在這段視頻中介紹了將瀏覽器性能發揮到極限的驚人方法。）

大多數的時候，傳統的表單請求或者頁面導航沒什麼缺點。我確實常常將表單請求改爲 AJAX 請求，可是卻沒什麼須要修改 URL（它們中任何一個都不須要）。

而後我開始保存文件，在咱們項目文件夾中運行 caddy，而後打開瀏覽器。我每次修改都須要刷新頁面。十多年之後，我終於安裝了第二個屏幕，因此我不須要切換桌面了。

JavaScript 並非我吝嗇使用的惟一技術：CSS，SVG，Markdown 還有靜態站點生成器也是如此。我幾乎從不使用 CSS 庫。我只是在 CSS 3 和一些新特性好比 flexbox 和 grid 沒有被支持的時候堅持用幾個 hack 技術。可是全部的也就如今我說的這些了。就瀏覽器支持而言，SVG 依舊還處於發展中，而 Markdown 嘛...嗯...多數狀況下我仍是寧願寫 HTML/CSS，由於至少這樣子在全部瀏覽器上表現都是相同的。

我很喜歡靜態站點生成器的思想，可是一般它們都過於複雜。多數狀況下，我所須要的就只是將代碼片嵌入到個人 HTML 文件中，Caddy 只須要簡單的幾個模版操做就能夠完成：{{.Include "/includes/header.html"}}。（我甚至能夠用 git push 來部署使用了 Caddy 的網站，不須要靜態站點生成器！儘管它也支持這些功能）

優點

不使用那些花哨的，用途普適的，或者功能過多的庫、框架和工具可以：

網站代碼量少
更容易管理測試環境
調試速度快，解決問題的方法更普適
服務配置更簡單（我瞭解這方面，相信我）
網站加載更快

它還可以爲你省下好幾個 GB 的硬盤空間！

代價

既然我不瞭解 React，Angular，Polymer，Vue，Ember，Meteor，Electron，Bootstrap，Docker，Kubernetes，Node，Redux，Meteor，Babel，Bower，Bower，Firebase，Laravel，Grunt 等等，我就沒辦法真正的幫助個人朋友們，或者在個人答案中驚豔他們，或者達到如今不少網站開發工做的要求。

儘管如此，可是從技術上講，我並不能作不少事 —— 這是關鍵！僅有真正須要工具的時候，我才引入它們，不然我就選擇本身寫代碼或者從 Stack Overflow 複製粘貼過來一些小功能（我很誠實）。（提示：和 YouTube 或者 HN 不一樣，請閱讀 Stack Overflow 上的評論。）（須要絕對的瞭解你借用的代碼是什麼！）

我開發的效率下降了嗎？

也許吧。可是，其實我並不這麼認爲。

結果

這裏有幾個網站，都是我這樣赤手空拳的搭建起來的 —— 相信我，若是我有資源可以僱傭專業的前端開發者，我更願意僱傭他們的 —— 可是全部這些網站都沒有用任何框架，沒有沒必要要的、笨重的依賴庫。

我甚至沒有最小化頁面資源（除了圖片壓縮，只要拖動到 tinypng.com 就能夠了），基本上是由於我比較懶。可是你知道嗎？頁面的加載時間依舊很是短。

可是我認爲，他們的代碼中和「網絡應用」最相關的，就只是一些毛糙的 jQuery。（毛糙，其實僅僅由於我很忙）。

網站連接：

caddyserver.com
goconvey.co/
www.papaparse.com
relicabackup.com （羞恥的提一句：如今有五折優惠！）

每一個網站大概都會花費我一天到一個禮拜的時間完成（取決於頁面有多少，以及可以有多少的收入）。實質的內容固然會須要更長時間，但這都是給定的。

下面是一些我收到的反饋，是我「經典」路線的結果：

我很喜歡你網站設計的簡潔性。你是本身寫的嗎，仍是用了模版/主題？
你的網站是一個優秀的榜樣，好的網站設計應該如此。它快速，乾淨，不會加載不少沒用的東西，並且幾乎全部內容都能脫離 JavaScript 工做。
我很好奇你使用了什麼框架或者工具來構建你的文檔網站！它真的很是棒，很是輕量。

我並非說個人網站是十全十美的 —— 它們距離完美還差得遠，我只是當心的將它們用做案例研究 —— 可是不管如何，它們的功能都實現了。

給你一個小獎勵：這裏有一個頗有意思的 API 示例，是我在幾年前爲了當時的工做，使用 vanilla HTML，CSS，和 JS 製做的。

Youtube 視頻連接

我知道每行代碼都是什麼意思，而且，包括了最小化的 jQuery（未壓縮），全部內容加在一塊兒大概是 50KB。很明顯，顯示地圖圖塊時使用了另一個依賴（Leaflet），但這是很合理的，由於它們是必需的功能。例如，若是你在作複雜的和時間相關運算以及時間渲染，那麼使用 Moment.js 就沒什麼問題。我只是想要避免廣適性的框架、庫、以及工具，除非我真的須要他們或者明白它們在作什麼。