视野修炼-技术周刊第69期

粥里有勺糖2024-01-14 19:56

欢迎来到第 69 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

🔥强烈推荐

  1. 2023 CodePen Top 100
  2. CSS Hooks | 原生内联样式解决方案

🔧开源工具&技术资讯

  1. 2024 年前端预测
  2. 媒体查询 scripting
  3. vscode-common-intellisense - 主流前端组件库提示
  4. 在线截图编辑

🤖AI工具&资讯

  1. AI Search
  2. 阿里 AnyText 模型

​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）

下面开始本期内容的介绍，预计阅读时间 8 分钟。

🔥强烈推荐

1. 2023 CodePen Top 100

一起来看看前 3 效果。

1：拖转+旋转卡片

2：3D Hover卡片效果

3：发光悬停效果

直呼牛逼！都很哇塞！

里面肯定有你觉得有趣与新颖的例子，或多或少有借鉴的地方

2. CSS Hooks | 原生内联样式解决方案

很新的一个东西！一种为原生内联样式带来高级 CSS 功能的样式解决方案

jsx 复制代码 
<a
  href="https://css-hooks.com/"
  style={css({
    'color': '#03f',
    'fontSize': '1rem',
    '&:hover': {
      color: '#09f',
    },
    '&:active': {
      color: '#e33',
    },
    '@media (1000px <= width)': {
      fontSize: '1.25rem',
    },
  })}
>
  Hooks
</a>

可以看这个在线的 Demo

js 复制代码 
import { createHooks } from '@css-hooks/react'

export const [hooks, css] = createHooks(
  {
    '&:hover': '&:hover',
    '&:active': '&:active',
    '@media (prefers-color-scheme: dark)':
      '@media (prefers-color-scheme: dark)',
  },
  {
    sort: true,
  },
)

看了一下实际编译后的 hooks 内容，就是自动生成CSS 变量插入到了 style 标签中

jsx 复制代码 
import React from 'react'
import ReactDOM from 'react-dom/client'
import { hooks } from './css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 这里就是最后生成插入的内联 style 样式 */}
    {/* 都是一些CSS变量 */}
    <style dangerouslySetInnerHTML={{ __html: hooks }} />
    <App />
  </React.StrictMode>,
)

🔧开源工具&技术资讯

3. 2024 年前端预测

2023回顾： SSR，AI，浏览器/JS引擎，JS运行时，跨平台框架，构建系统（Turbopack，RsPack）。。。

2024预测： Bun，Biome，刚刚开始的AI，大型UI框架。。。

4. 媒体查询 scripting

可以通过 scripting: none 检测网页是否支持脚本加载。

html 复制代码 
<div class="no-scripting">
    No scripting so here's a specific set of content and styles
</div>

<style>
    @media (scripting: none) {
        .no-scripting {
            display: flex;
            color: green;
        }

        .initial-scripting {
            display: none;
        }

        .full-scripting {
            display: none;
        }
    }
</style>

支持情况如下：

5. vscode-common-intellisense - 主流前端组件库提示

一个 VS Code 插件，集成常见 UI组件库的代码提示。

目前支持vant,antd,element等 16+ 主流组件库

6. 在线截图编辑

项目代码开源，目前开就是常规的一些调整，可以完成一些简单的变换

🤖AI工具&资讯

AI 驱动的搜索引擎。

出结果挺快的，和之前推荐的 Devv 类似。

百度的开发者搜索引擎就该学学🤔

8. 阿里 AnyText 模型

多语言可视文本生成和编辑工具，AI生成图片可以包含指定文字。

在线体验地址 huggingface

文字生成 文字编辑

😛趣图

你多久没创建.js文件了？了 AI 赋能？

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）移步博客

⭐️强力推荐关注

欢迎来到第 69 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

🔥强烈推荐

  1. 2023 CodePen Top 100
  2. CSS Hooks | 原生内联样式解决方案

🔧开源工具&技术资讯

  1. 2024 年前端预测
  2. 媒体查询 scripting
  3. vscode-common-intellisense - 主流前端组件库提示
  4. 在线截图编辑

🤖AI工具&资讯

  1. AI Search
  2. 阿里 AnyText 模型

​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）

下面开始本期内容的介绍，预计阅读时间 8 分钟。

🔥强烈推荐

1. 2023 CodePen Top 100

一起来看看前 3 效果。

1：拖转+旋转卡片

2：3D Hover卡片效果

3：发光悬停效果

直呼牛逼！都很哇塞！

里面肯定有你觉得有趣与新颖的例子，或多或少有借鉴的地方

2. CSS Hooks | 原生内联样式解决方案

很新的一个东西！一种为原生内联样式带来高级 CSS 功能的样式解决方案

jsx 复制代码 
<a
  href="https://css-hooks.com/"
  style={css({
    'color': '#03f',
    'fontSize': '1rem',
    '&:hover': {
      color: '#09f',
    },
    '&:active': {
      color: '#e33',
    },
    '@media (1000px <= width)': {
      fontSize: '1.25rem',
    },
  })}
>
  Hooks
</a>

可以看这个在线的 Demo

js 复制代码 
import { createHooks } from '@css-hooks/react'

export const [hooks, css] = createHooks(
  {
    '&:hover': '&:hover',
    '&:active': '&:active',
    '@media (prefers-color-scheme: dark)':
      '@media (prefers-color-scheme: dark)',
  },
  {
    sort: true,
  },
)

看了一下实际编译后的 hooks 内容，就是自动生成CSS 变量插入到了 style 标签中

jsx 复制代码 
import React from 'react'
import ReactDOM from 'react-dom/client'
import { hooks } from './css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 这里就是最后生成插入的内联 style 样式 */}
    {/* 都是一些CSS变量 */}
    <style dangerouslySetInnerHTML={{ __html: hooks }} />
    <App />
  </React.StrictMode>,
)

🔧开源工具&技术资讯

3. 2024 年前端预测

2023回顾： SSR，AI，浏览器/JS引擎，JS运行时，跨平台框架，构建系统（Turbopack，RsPack）。。。

2024预测： Bun，Biome，刚刚开始的AI，大型UI框架。。。

4. 媒体查询 scripting

可以通过 scripting: none 检测网页是否支持脚本加载。

html 复制代码 
<div class="no-scripting">
    No scripting so here's a specific set of content and styles
</div>

<style>
    @media (scripting: none) {
        .no-scripting {
            display: flex;
            color: green;
        }

        .initial-scripting {
            display: none;
        }

        .full-scripting {
            display: none;
        }
    }
</style>

支持情况如下：

5. vscode-common-intellisense - 主流前端组件库提示

一个 VS Code 插件，集成常见 UI组件库的代码提示。

目前支持vant,antd,element等 16+ 主流组件库

6. 在线截图编辑

项目代码开源，目前开就是常规的一些调整，可以完成一些简单的变换

🤖AI工具&资讯

AI 驱动的搜索引擎。

出结果挺快的，和之前推荐的 Devv 类似。

百度的开发者搜索引擎就该学学🤔

8. 阿里 AnyText 模型

多语言可视文本生成和编辑工具，AI生成图片可以包含指定文字。

在线体验地址 huggingface

文字生成 文字编辑

😛趣图

你多久没创建.js文件了？了 AI 赋能？

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）移步博客

⭐️强力推荐关注

相关推荐
全栈弄潮儿14 小时前
《小项目实战 1：用 AI 从零搭一个 API 服务》
aigc·openai·ai编程
m4Rk_15 小时前
【论文阅读】Agent 记忆机制（83）：Inside Out——用可演化 PersonaTree 构建 Agent 的核心长期记忆
论文阅读·人工智能·学习·开源·github
FungLeo15 小时前
成为全栈·React 管理后台篇·总复盘：从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn16 小时前
并发模式：让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_16 小时前
新手梳理：M3U8 线上问题，哪些是前端锅，哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt16 小时前
Linear 用 1000 个 PR 换掉 styled-components，我写了 200 个按钮，把这笔账复现了一遍
前端·css·preact
m4Rk_17 小时前
【论文阅读】Agent 记忆机制（81）：EMR——用情景记忆避免 Agent 在多步推理中反复绕圈
论文阅读·人工智能·学习·开源·github
JavaGuide17 小时前
NVIDIA 又开源了！这次给 AI Agent 加上权限管控
前端·后端
excel17 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
来福猿18 小时前
手把手教你本地部署 HeyGem：离线生成数字人直播视频
aigc
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03Telegram APK 下载安装完整指南 — 2026年最新04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的09给AI一张“业务概念地图“：本体如何从哲学走向企业智能10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）