惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
IT之家
IT之家
博客园 - Franky
Stack Overflow Blog
Stack Overflow Blog
宝玉的分享
宝玉的分享
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
S
SegmentFault 最新的问题
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Last Week in AI
Last Week in AI
H
Help Net Security
V
V2EX
H
Hackread – Cybersecurity News, Data Breaches, AI and More
量子位
博客园 - 叶小钗
J
Java Code Geeks
博客园 - 【当耐特】
月光博客
月光博客
爱范儿
爱范儿
人人都是产品经理
人人都是产品经理
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件

MDN Blog

Introducing the MDN MCP server | MDN Blog Under the hood of MDN's new frontend | MDN Blog Image formats: Codecs and compression tools | MDN Blog A beginner-friendly guide to view transitions in CSS | MDN Blog Launching MDN's new front end | MDN Blog Image formats: Pixel data from encoders to decoders | MDN Blog Celebrating 20 years of MDN | MDN Blog Image formats: Color models for humans and devices | MDN Blog Default styles for h1 elements are changing | MDN Blog Implications of Global Privacy Control | MDN Blog JavaScript Temporal is coming | MDN Blog Fix your website's Largest Contentful Paint by optimizing image loading | MDN Blog MDN 2024 content projects | MDN Blog A new learning experience on MDN | MDN Blog Countdown to the holidays with daily coding challenges | MDN Blog Monitoring and optimizing website performance | MDN Blog How to land your first developer job | MDN Blog Introducing the new MDN Community page | MDN Blog Fixing your website's JavaScript performance | MDN Blog Get back to school! Supercharge your learning with MDN and Scrimba | MDN Blog Efficient data handling with the Streams API | MDN Blog Locale-sensitive text segmentation in JavaScript with Intl.Segmenter | MDN Blog Optimize your workflow with Git stash | MDN Blog How to debug mobile apps across devices | MDN Blog Exclusive accordions using the HTML details element | MDN Blog Exploring the Broadcast Channel API for cross-tab communication | MDN Blog MDN partners with Scrimba to enhance web development learning | MDN Blog Introducing the MDN HTTP Observatory | MDN Blog Static Site Generation (SSG) with Next.js | MDN Blog New JavaScript Set methods | MDN Blog
A year of publishing the MDN Blog | MDN Blog
The MDN Team May 3, 2024 5 minutes read · 2024-05-03 · via MDN Blog

When we launched the MDN Blog in May 2023, we were excited and curious to see what our readers would think and how the blog would look like one year on. We're thrilled to see that there's a wonderful variety of articles from the MDN team, guests, and partners that we think help developers build for the web.

We launched the blog with the intention of having a channel that's separate from our usual reference docs where we could experiment more with the format of the content. We also decided to include content sponsored by partners and contributions from guest authors, focusing on web development topics, especially about features that are new or just around the corner. We also wanted to have a place to announce interesting developments on the MDN platform, and share features we're working on and shipping.

A year later is a perfect milestone to look back over highlights from articles we've published and see what we've achieved together. Let's have a look at what we've published, some numbers on our highest-visited articles, who we partnered with for sponsored content, picks from our guest authors, and other updates from the team.

What's published on the MDN blog

We published 38 articles in total, and it breaks down to the following categories:

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'.

There is an overlap between these categories, so this chart presents a general overview of the content we've published. We're posting a lot of news, such as summaries of the latest content added to MDN, announcements of new features added to the MDN website, and updates on what's coming soon to the web platform and MDN itself.

DevOps might be a surprising category for some, but it is an excellent way to describe some of our articles, which guide people in testing and deploying their projects and moving from a collection of files on their machines to a working, maintainable, and scalable web application.

Our most-read posts

Let's take a look at the most popular content overall. Here's our most viewed articles, ordered by number of visits:

  1. New reference pages on MDN for JavaScript regular expressions
  2. Using HTML landmark roles to improve accessibility
  3. Introducing AI Help (Beta): Your Companion for Web Development
  4. Scroll progress animations in CSS
  5. Introducing the MDN Playground: Bring your code to life!

JavaScript regex tops our list, and it proves to be a tricky subject for readers to master, whether or not you've HADC0FFEE:

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

We're happy to note that accessibility is one of the most-read topics. Having the landmark roles article high up on our list shows that readers are interested in this area, which is a win for designing and promoting accessible web experiences.

<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>

A lot has happened in the CSS domain over the last year, and our top-five list would certainly not be complete without a CSS topic. What could be better than CSS-driven animations with inspiring examples?

.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);
  }
}

It's no surprise that JavaScript, CSS, and HTML each have a spot in the most-read posts, as these are the main technology categories that we document on MDN. Our other two posts in the top five are announcements about new functionality shipping on the MDN platform, showing that our readers are interested in finding out what's happening on MDN and the ways that we're continuously improving the site.

Guest posts

We've published seven guest posts, by Terence Eden, Michelle Barker, and Chris Mills, who have written about security, performance, web sustainability, and CSS topics such as container queries, scroll-driven animations, and more. Here's a few highlights from our guest writers:

Guest posts like these are a way to not only spread the word about web platform updates, but to promote and demystify techniques that help developers make applications and web pages more secure. This snippet from the SRI post is a great example that prevents the browser from running a script if the SHA-256 hash doesn't match what we expect it to be:

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

We hope that by providing practical hints like the one above, we can propagate better practices and push the web to be a more secure place for developers and everyone who uses their applications.

In 2023, GitLab, TestGrid, and Vultr choose the MDN Blog as a medium to post developer-facing sponsored content. Together with our partners, we've put a lot of effort into making sure the content is educational, helpful, and timely for web developers, while also bringing value to companies who see our readers as a perfect audience for their products and services. Here's a selection of posts from our partners:

We're happy to be able to share high-quality resources that our readers find educational and practical, like the potential performance benefits of using Bun as a Node.js alternative:

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

MDN team updates

Of course, we're also happy to share what we're working on at MDN, from documentation projects to platform features and functionality. This is a short list of highlights from the MDN team:

Baseline has really resonated with a lot of developers, helping them quickly determine whether features have stable browser support. We're very curious to see how the project grows in the future:

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.

We're also thrilled about the feedback we've received about the MDN Curriculum. We're glad that people getting started in web development are as excited about using this carefully curated learning resource as we are about publishing and maintaining it.

Thanks for reading

That's a wrap for our 'year in review' post. We want to thank all of our readers and community for the support, feedback, and engagement you've provided. Thank you for reading! We're looking forward to hearing your thoughts on what you'd like to see more of in the future. Feel free to get in touch with us and let us know what you think!