栗子前端技术周刊第8期 - Redux Toolkit 2.0、Astro 4.0、Storybook 7.6...

🌰栗子前端技术周刊第 8 期 (2023.12.4- 2023.12.10):浏览前端一周最新消息,学习国内外优秀文章视频,让我们保持对前端的好奇心。

📰 技术资讯

  1. Redux Toolkit 2.0、Redux 5.0 和 React-Redux 9.0: Redux、React-Redux、Redux Toolkit 和 Reselect 的最新重要版本发布。其中有大量新功能、性能改进、更小的包大小以及过时功能的移除。Github 上还提供了 RTK 2.0 和 Redux 5.0 迁移指南,详细介绍了这些变化。

  2. Astro 4.0:内容网站框架 Astro 新的重要版本刚刚发布,包括新的开发工具栏、自动 i18n 路由、新的视图转换 API 等。此外,还试验性地增加了内容缓存功能。升级非常简单,对于大多数人来说,只需使用 npx @astrojs/upgrade 即可。

  3. Storybook 7.6:Storybook 新版本中 webpack 项目的启动时间缩短了 "50% 或更多",实验性支持 SWC(Speedy Web Compiler),新的 "测试构建模式",新的基于 Vitest 的测试库等等。

  4. Node's GitHub repo: NodeJS Github 仓库 star 数已超过 100k。

📒 技术文章

  1. Taking Care Beyond Code:前端开发人员的 7 项最佳设计实践 - 如果前端工程师没有考虑到设计的重要性,用户体验就会受到影响。这篇文章强调了整体方法的重要性,并提供了一些要点和最佳实践。

  2. The Complete Puppeteer Cheatsheet - 如果你想通过 JavaScript 控制无头 Chrome 浏览器,Puppeteer 就是你的最佳选择。

js 复制代码
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('<https://example.com>');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();
  1. 实战篇:带着大家用鸿蒙 HarmonyOS 做项目:HarmonyOS 开发是最近比较热门的话题,前端开发们赶紧学起来。

  2. Web Components 的前世今生:文中介绍了 Web Components 的历史、概念和开发。

🔧 开发工具

  1. ClassyFont:为字体生成 CSS 的在线工具。
  1. TSDiagram:使用 TypeScript 快速绘制图表,通过顶层类型别名和接口定义数据模型,它能以高效的方式自动布局。
  1. Timenames: 为一天中的每一秒起一个独特的名字 - 作者有一个应用程序,希望在不直接使用时间的情况下创建更有趣的独特文件名。这里有一个实时演示,展示了这些名称的实际使用情况。

🚀🚀🚀 以上资讯文章选自常见周刊,如 JavaScript Weekly 等,周刊内容也会不断优化改进,希望你们能够喜欢 💖

相关推荐
mldong5 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排6 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60616 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角7 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!7 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰8 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi9 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen10 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马11 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu11 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss