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

推荐订阅源

U
Unit 42
P
Proofpoint News Feed
The Last Watchdog
The Last Watchdog
S
Secure Thoughts
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
News | PayPal Newsroom
Application and Cybersecurity Blog
Application and Cybersecurity Blog
O
OpenAI News
S
Security @ Cisco Blogs
宝玉的分享
宝玉的分享
Hacker News: Ask HN
Hacker News: Ask HN
T
Troy Hunt's Blog
Google Online Security Blog
Google Online Security Blog
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
TaoSecurity Blog
TaoSecurity Blog
Help Net Security
Help Net Security
Latest news
Latest news
NISL@THU
NISL@THU
S
Security Affairs
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 聂微东
AI
AI
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Recent Announcements
Recent Announcements
P
Privacy & Cybersecurity Law Blog
小众软件
小众软件
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Hugging Face - Blog
Hugging Face - Blog
博客园 - 司徒正美
AWS News Blog
AWS News Blog
W
WeLiveSecurity
Google DeepMind News
Google DeepMind News
I
InfoQ
Schneier on Security
Schneier on Security
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
The Exploit Database - CXSecurity.com
IT之家
IT之家
T
Threatpost
Scott Helme
Scott Helme
L
LINUX DO - 热门话题
腾讯CDC
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
N
News and Events Feed by Topic
L
LINUX DO - 最新话题
F
Full Disclosure
大猫的无限游戏
大猫的无限游戏
H
Heimdal Security Blog
S
SegmentFault 最新的问题

CodePen

433: CodePen 2.0 is Backward Compatible with Any Classic Pen or Project 432: Trends of 2026 (So Far) 431: Versions are Deeply Integrated into CodePen Chris’ Corner: Layers of Layers 430: The Wild World of Keyboard Shortcuts in Web Apps Chris’ Corner: Makin’ Stuff 429: Why CodePen Rebuilt Its Realtime Service Chris’ Corner: The Edge, Man 428: Improving The Entire Billing System (is Very Worth It) Chris’ Corner: Design Chris’ Corner: A11Y 427: Next.js and The Journey of SSR 426: Browserslist in CodePen 2.0 Chris’ Corner: Finding Type Chris’ Corner: View Transitions 425: Help Your Users Help You with Debug Logs Chris’ Corner: Check It B4 U Wreck It Chris’ Corner: Import Maps 424: File List Optimization Chris’ Corner: ZIP first? 423: 2.0 Templates Chris’ Corner: URLs 422: Supporting Packages Chris’ Corner: Share What You Do 421: View Control of the 2.0 Editor Chris’ Corner: Design Chris’ Corner: Even Grids 420: What are Blocks? Chris’ Corner: Anchors 419: Why 2.0? Chris’ Corner: Cool Things Chris’ Corner: SVG Tools 418: CodeMirror 6 Chris’ Corner: All Together Now Chris’ Corner: Light & Boxes Chris’ Corner: Lovingly Esoteric CSS Chris’ Corner: Type Chris’ Corner: Two Liners Chris’ Corner: Type Chris’ Corner: Freshly-Fallen CSS Chris’ Corner: Cloud Four Chris’ Corner: HTML Chris’ Corner: Web Components Chris’ Corner: Kagi Blog Typography 417: Iframe Allow Attribute Saga Chris’ Corner: Cursors Chris’ Corner: Browser Feature Testing 416: Upgrading Next.js & React Chris’ Corner: AI Browsers 415: Babel Choices 414: Apollo (and the Almighty Cache) Google Chrome & Iframe `allow` Permissions Problems Chris’ Corner: Stage 2 413: Still indie after all these years Chris’ Corner: Design (and you’re going to like it) 412: 2.0 Embedded Pens Chris’ Corner: Discontent 411: The Power of Tree-Sitter Chris’ Corner: Word Search 410: Trying to help humans in an industry that is becoming increasingly non-human Chris’ Corner: Little Bits of CSS 409: Our Own Script Injection Chris’ Corner: Terminological Fading 408: Proxied Third-Party JavaScript Chris’ Corner: Simple, Accessible Multi-Select UI 407: Our Own CDN Chris’ Corner: Clever Clever 406: Hot Trends of 2025 Chris’ Corner: Pretty Palettes 405: Elasticsearch → Postgres Search Chris’ Corner: Faces Chris’ Corner: Browser Wars Micro Edition 404: Preventing Infinite Loops from Crashing the Browser Chris’ Corner: Scroll-Driven Excitement 403: Privacy & Permissions Chris’ Corner: AI for me, AI for thee 402: Bookmarks Chris’ Corner: We Can Have Nice Things 401: Outgoing Email Chris’ Corner: Tokens Chris’ Corner: Modern CSS Features Coming Together Chris’ Corner: Liquid Ass Chris Corner: For The Sake of It Chris’ Corner: Type Stuff! Chris’ Corner: Doing a Good Job Chris’ Corner: Design Do’s and Don’ts Chris’ Corner: CSS Deep Cuts Chris’ Corner: GSAP, more like FREESap Chris’ Corner: Reacting Chris’ Corner: Rounded Triangle Boxes and Our Shapely Future Chris’ Corner: Fairly Fresh CSS Chris’ Corner: 10 HTML Hits Chris’ Corner: CSS Powered Componentry Chris’ Corner: The New Web Safe Chris’ Corner: PerformanCSS Chris’ Corner: Color Accessibility Chris’ Corner: onChange Chris’ Corner: Accessible Takes Chris’ Corner: Creative Coding
Chris’ Corner: Processing
Chris Coyier · 2026-03-19 · via CodePen

The other week when I was talking about Web Components in the Corner, I mentioned zero-md, a nice little Web Component for doing exactly that. I had to bite my tongue a little bit though, as the 2.0 public beta hadn’t quite made it out of the door yet.

See, the new compiler, among its many powers, has a cool trick up its sleeve we call Inline Block Processing. When you’re in any HTML-ish language, you’ve got the lang attribute you can put on elements. Our compiler sees those, and if the language matches a file extension that we currently support via Blocks, we’ll process the content of that element with that block.

Meaning you could write HTML like this:

<p>Blah blah just hanging out.</p>
<div lang="md">
  - I'm a list
  - in Markdown format
  - cool, right?
</div>
<style lang="scss">
  $listColor: red;
  ul {
    color: $listColor;
  }
</style>Code language: HTML, XML (xml)

And that will… work. As you might be able to guess, it does. In the final processed code, the lang attributes are removed and the guts of those elements are replaced with the processed code produced by the relevant Block.

It’s just a neat little ability! In the case of Markdown, it’s especially useful, and means you don’t need to reach for a client-side tool like zero-md, because the processing happens server-side, which is good for performance.


Avoiding tools, or downshifting tools from client to server, always has a nice feeling to me.

Blake Watson has a presentation-article No build tool? No problem! that has nice basic explanations of the tradeoffs. Like, is TypeScript useful? Of course it can be. Does it mean complicating your workflow? Yep. Now you’ve got a whole chain of dependencies to potentially worry about, and the potential for things to break, especially over time. It doesn’t mean don’t use it, but it’s worth thinking about, especially when there are interesting alternatives. JSDoc is the obvious one, but Blake points out you can just put // @ts-check on the top of files and VS Code will TypeScript check a regular JavaScript file, which is pretty interesting. I’d hope CodePen makes choosing tools a bit more palatable as well, since there is no setup cost and it won’t break over time, as the tool choices are locked in forever until you change them.


While considering build tools a bit, it feels like an interesting time to consider if AI could be (replace?) a build tool. Here’s an example. RIGHT THIS SECOND can you remember how to write a loop in Sass code? Or is it something you gotta look up? If you’re like me, I always try to find a reference to look at (often times Pens of my own I know I have sitting around).

But with AI, you can kinda just… fake it. Like type out what you think it might be just let it convert it. It’ll probably be right. Here’s an example:

You can’t leave that pseudo code in your codebase, of course, as AI conversion like this is non-deterministic and it would be a ridiculous waste of resources to convert it on every build, but it’s kinda interesting for one-time conversion.

In that same vein… could AI be your CMS? That silly thought passed through my mind the other day and I learned it’s already had quite a debate that I missed. So I blogged that. The gist is that, yes, it actually can be quite useful to not have your content in a CMS and have it right in your codebase instead, and potentially for LLM-related reasons. I quibbled with saying “CMS” though, as I think if your content is Markdown-and-Frontmatter and something is processing that with templates into HTML output… that already is a CMS. It’s the database part that is most relevant to this conversation.

Whether you or I like it or not, giving LLM tools access and context is where things seem to be headed.