#6 开源社区的暗面

codeep
cover

Hi，你正在阅读的是《Codeep 半月刊》第 6 期。本期头图来源平克弗洛伊德乐队 (PinkFloyd) 的概念音乐专辑《月之暗面》(Dark Side of theMoon) 封面，棱镜设计是封面最显著的标识，它源于三个基本元素——乐队演出时的灯光效果、歌词里写到的野心和贪婪、简单大胆且出彩的设计要求。

📍 学技术

现代 CSS 指南（2024 年春季版）

modern-css-2024.webp

链接：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/

和上期的《2024 前端开发手册》差不多，这是一份前端程序员可以添加到浏览器书签关于现代 CSS 的指南。这份列表上的 CSS 都是相当新的，而且感觉是很多人都不知道这些 CSS 功能。指南很详细而且很长，大家可以先加到待看列表，有时间再慢慢看。

纯 CSS 实现 3D 图像滑动效果

链接：https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

文中作者挑战使用纯的 CSS 技术将 3D 效果和滑动过渡应用于单个 <img> 标签上，最终实现的效果如下所示就像打开一个盒子并在里面找到一张照片一样。

下面的示例 html 就只有两个 <img> 标签，甚至都没有使用伪元素！

📕 深阅读

开源社区的暗面

https://kettanaito.com/blog/the-dark-side-of-open-source

✨新鲜货

markdowndown

markdowndown.webp

链接：https://markdowndown.vercel.app/

如果你正在寻找一种将 HTML 转换回 Markdown 的快速方法，「MarkdownDown」可以胜任，「MarkdownDown」是一个在线工具，可以直接在上面输入要转换的网址。

我自己试了下，这个工具并不算完美，网页中的代码片段等内容没有很好的还原成 Markdown 语法，但是大部分场景可以满足，有需要的可以试试！

景深模拟器

depth-of-field.webp

链接：https://jherr.github.io/depth-of-field/

一个开源的在线网站，可让你计算出相机镜头的景深。你可以调整光圈、焦距和与拍摄对象的距离，以查看景深如何变化。该模拟器还显示了超焦距以及景深的近端和远端限制。适合摄影爱好者去理解焦距、光圈和景深的关系。

🍔 技术外

如何阻止人工智能公司的爬虫

大部分人工智能公司使用互联网上免费获取内容来训练他们的模型，而像 OpenAI 这种有钱的人工智能公司则直接跟如 Stack Overflow、Reddit 和各大新闻集团合作以用这些平台上的内容来训练它们的模型。

这些平台上的内容都是由用户免费创造的，但是此时对于平台出卖他们的数据却没有任何办法。而像我们这种博客的博主，如果不想我的内容喂养 LLMs, 至少不希望这些公司默认我的内容可供他们使用，该怎么办？

理论上，可以通过在 robots.txt 中禁止人工智能公司的爬虫来选择不让自己的内容喂养 LLMs，但是这种方式更像是一种请求，爬虫可以忽略请求而直接爬取网站上的所有内容。

如果你不信任人工智能公司，你也可以完全阻止人工智能公司的爬虫。你可以在服务器上使用 .htaccess 文件，在 .htaccess 文件中的 mod_rewrite 规则中加入以下代码：

<IfModule mod_rewrite.c>  
RewriteEngine on  
RewriteBase /  
  
# block “AI” bots  
RewriteCond %{HTTP_USER_AGENT} (AdsBot-Google|Amazonbot|anthropic-ai|Applebot|AwarioRssBot|AwarioSmartBot|Bytespider|CCBot|ChatGPT|ChatGPT-User|Claude-Web|ClaudeBot|cohere-ai|DataForSeoBot|Diffbot|FacebookBot|FacebookBot|Google-Extended|GPTBot|ImagesiftBot|magpie-crawler|omgili|Omgilibot|peer39_crawler|PerplexityBot|YouBot) [NC]  
RewriteRule ^ – [F]  
</IfModule>

如果你的网站是托管在 Netlify 或者 Vercel 这些云服务商上面，则可以通过在网站的边缘功能（edge functions）进行相同的操作。下面是用于检查用户代理是否在已知机器人列表中 JavaScript 函数：

// inspired (and taken) from ethan marcotte's blog post
// https://ethanmarcotte.com/wrote/blockin-bots/
const botUas = [
  'AdsBot-Google',
  'Amazonbot',
  'anthropic-ai',
  'Applebot',
  'AwarioRssBot',
  'AwarioSmartBot',
  'Bytespider',
  'CCBot',
  'ChatGPT',
  'ChatGPT-User',
  'Claude-Web',
  'ClaudeBot',
  'cohere-ai',
  'DataForSeoBot',
  'Diffbot',
  'FacebookBot',
  'FacebookBot',
  'Google-Extended',
  'GPTBot',
  'ImagesiftBot',
  'magpie-crawler',
  'omgili',
  'Omgilibot',
  'peer39_crawler',
  'PerplexityBot',
  'YouBot'
]
 
export default async (request, context) => {
  const ua = request.headers.get('user-agent');
 
  let isBot = false
 
  botUas.forEach(u => {
    if (ua.toLowerCase().includes(u.toLowerCase())) {
      isBot = true
    }
  })
 
  const response = isBot ? new Response(null, { status: 401 }) : await context.next();
  return response
};

本半月刊在本人博客首发，每月 15 号和月底更新，欢迎您关注、转发！

codeep