A year of publishing the MDN blog title. A vibrant gradient behind artwork representing different web technologies and categories including JavaScript, HTML, CSS, accessibility, and a running computer terminal.

MDN 部落格釋出一週年

閱讀時間 5 分鐘

當我們在 2023 年 5 月推出 MDN 部落格 時,我們既興奮又好奇,想看看讀者會有什麼想法,以及一年後的部落格會是什麼樣子。我們很高興看到 MDN 團隊、客座作者和合作夥伴撰寫了各種出色的文章,我們認為這些文章有助於開發者構建 Web 應用。

我們建立部落格的初衷是希望有一個獨立於常規參考文件的渠道,在那裡我們可以更自由地嘗試內容格式。我們還決定包含合作伙伴贊助的內容以及客座作者的投稿,內容重點關注 Web 開發主題,特別是關於新功能或即將推出的功能。我們還希望有一個地方可以釋出 MDN 平臺上的有趣開發動態,並分享我們正在開發和釋出的功能。

一年之後,這是一個回顧我們已釋出文章的亮點並瞭解我們共同取得成就的絕佳里程碑。讓我們看看我們釋出了哪些內容,以及我們訪問量最高的文章的一些資料,我們與誰合作了贊助內容,客座作者精選文章,以及團隊的其他更新。

MDN 部落格上的內容

我們總共釋出了 38 篇文章,細分到以下類別:

A donut chart showing the percentage posts on MDN blog per category. The percentage by category is 39.5% 'News & Launches', 20.9% 'JavaScript', 18.6% 'CSS', 11.6% 'DevOps', 4.7% 'HTML', and 4.7% 'Dev tools, coding'.

這些類別之間存在重疊,因此此圖表提供了我們已釋出內容的大致概覽。我們釋出了大量新聞,例如 MDN 最新新增內容的摘要、MDN 網站新增功能的公告,以及關於 Web 平臺和 MDN 本身即將推出的內容的更新。

DevOps 對某些人來說可能是一個出人意料的類別,但它非常適合描述我們的一些文章,這些文章指導人們測試和部署他們的專案,並將本地檔案集合轉化為一個可維護、可擴充套件的 Web 應用程式。

我們閱讀量最高的文章

讓我們來看看總體上最受歡迎的內容。這是我們訪問量最高的文章,按訪問次數排序:

  1. MDN 上關於JavaScript 正則表示式的新參考頁面
  2. 使用HTML 地標角色來改善可訪問性
  3. 介紹 AI Help (Beta):您的 Web 開發伴侶
  4. CSS 中的滾動進度動畫
  5. 介紹 MDN Playground:讓您的程式碼煥發生機!

JavaScript 正則表示式位居榜首,這證明了它是一個令讀者難以掌握的主題,無論您是否具備 HADC0FFEE 的技能。

js
function isHexadecimal(str) {
  return /^[0-9A-F]+$/i.test(str);
}
isHexadecimal("HADC0FFEE"); // false

我們很高興地注意到,可訪問性是閱讀最多的主題之一。地標角色文章位居我們列表的前列,表明讀者對此領域很感興趣,這對於設計和推廣可訪問的 Web 體驗來說是一場勝利。

html
<aside aria-labelledby="pizza-recipe-heading">
  <h3 id="pizza-recipe-heading">Make your own pie!</h3>
  <p>Below is a list of our favorite pizza recipes.</p>
  <ul>
    <li><a href="/mushroom-pizza">The shroom</a></li>
    <li><a href="/smokey-joe">Smokey Joe</a></li>
    <li><a href="/fromage">Fromage</a></li>
  </ul>
</aside>

在過去的一年裡,CSS 領域發生了許多事情,而我們的前五名列表肯定離不開 CSS 主題。有什麼比帶有啟發性示例的 CSS 驅動動畫更好的呢?

css
.progress {
  height: 1rem;
  background: blue;
  transform-origin: 0 50%;
  animation: scaleProgress auto linear forwards;
  animation-timeline: scroll(root);
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

毫不奇怪,JavaScript、CSS 和 HTML 在閱讀量最高的文章中都佔有一席之地,因為它們是我們記錄在 MDN 上的主要技術類別。我們前五名中的另外兩篇文章是關於 MDN 平臺新功能釋出的公告,這表明我們的讀者對了解 MDN 上的動態以及我們不斷改進網站的方式很感興趣。

客座博文

我們釋出了七篇客座博文,作者包括 Terence EdenMichelle BarkerChris Mills,他們撰寫了關於安全、效能、Web 可持續性以及 CSS 主題(如容器查詢、滾動驅動動畫等)的內容。以下是我們客座作者的一些精選文章:

像這樣的客座博文不僅可以傳播 Web 平臺更新的訊息,還可以推廣和揭秘有助於開發者提高應用程式和網頁安全性的技術。SRI 文章中的這個片段是一個很好的例子,它可以在 SHA-256 雜湊值不匹配我們預期時阻止瀏覽器執行指令碼。

html
<script
  src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
  crossorigin="anonymous"></script>

我們希望透過提供像上述這樣的實用技巧,傳播更佳實踐,推動 Web 成為一個對開發者及其應用程式使用者更安全的地方。

2023 年,GitLabTestGridVultr 選擇 MDN 部落格作為釋出面向開發者的贊助內容的平臺。我們與合作伙伴一起,付出了巨大的努力,以確保內容對 Web 開發者具有教育意義、實用且及時,同時也為我們的讀者群體帶來了寶貴的價值,因為他們是其產品和服務的理想受眾。以下是我們合作伙伴的一些精選文章:

我們很高興能夠分享讀者認為具有教育意義和實用性的高質量資源,例如使用 Bun 作為 Node.js 替代方案的潛在效能優勢。

js
Bun.serve({
  fetch(req) {
    return new Response("Bun!");
  },
});

MDN 團隊更新

當然,我們也樂於分享我們在 MDN 上的工作,從文件專案到平臺特性和功能。以下是 MDN 團隊的一些亮點:

Baseline 引起了很多開發者的共鳴,幫助他們快速確定功能是否具有穩定的瀏覽器支援。我們非常好奇該專案未來將如何發展。

MDN reference page for the border-image CSS property with the green Baseline widget on top. On the widget, there's a big green checkmark, Baseline widely available title, and four browser logos, all with checkmarks.

我們對收到的關於 MDN 課程 的反饋感到非常激動。我們很高興初入 Web 開發領域的人們能像我們釋出和維護這份精心策劃的學習資源一樣,對使用它充滿熱情。

感謝閱讀

這是我們“年度回顧”文章的結尾。我們要感謝所有讀者和社群的支援、反饋和參與。感謝您的閱讀!我們期待聽到您對未來希望看到更多內容的建議。歡迎 與我們聯絡,告訴我們您的想法!