前端周刊 | 在 M1 Mac 上跑原生Linux; TypeScript 4.7 Beta 发布; 本周Github热门前端开源项目

语言: CN / TW / HK

新的一周,快来看看上周发生了哪些新鲜事吧!

科技趣闻

1. 在 M1 Mac 上跑原生Linux

现在,M1 Mac 可以顺利运行原生 Linux 了。专为苹果自研芯片打造的 Asahi Linux 项目,Alpha 版本已经释出。在完全相同的硬件上运行某些程序,Linux 竟然比 macOS 还快!

Asahi Linux 已在官方博客平台发布了首个公开的 alpha 版本,适用于开发人员和高级用户,支持 OTA 升级。

要想安装 Asahi Linux,需要满足以下要求:

  • M1、M1 Pro 或 M1 Max 电脑(Mac Studio 除外)
  • macOS 12.3 或更高版本,以管理员用户身份登录
  • 至少有 53GB 的可用磁盘空间(桌面安装)。Asahi Linux Desktop 需要 15GB,但安装程序会在 macOS 中保留额外的 38GB 磁盘空间,以避免破坏 macOS 更新。
  • 连接到互联网,安装程序将下载 700MB ~ 4GB 的数据。

Asahi Linux 官网:http://asahilinux.org/

更新速递

1. Node.js v12.22.12 (LTS) 发布

4月5日,Node.js v12.22.12 (LTS) 发布,这是 Node.js 12 的最终版本。Node.js 12 将在 2022 年 4 月 30 日达到生命周期结束状态,之后将不会收到更新。Node.js强烈建议将应用程序迁移到 Node.js 16 或 14(两者都是长期支持 (LTS) 版本),以便在 2022 年 4 月 30 日之后继续接收未来的安全更新。

image.png

更新详情:http://nodejs.org/en/blog/release/v12.22.12/

2. TypeScript 4.7 Beta 正式发布

4月8日,TypeScript 4.7 首个 Beta 版本正式发布。可以通过以下命令来使用beta版本: javascript npm install [email protected] TypeScript 4.7 新功能如下:

  • Node.js 中的 ECMAScript 模块支持;
  • 模块检测控制;
  • 计算属性的控制流分析;
  • 对象内函数类型推导增强;
  • 引入实例化表达式;
  • infer 关键字的 extends 约束;
  • 类型参数提供可选的 Variance 注解;
  • private字段上的typeof支持;

  • 自定义模块解析策略;
  • 模块解析策略;
  • 导入语句的组织优化;
  • 对象方法。

image.png

更新详情:http://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/

开源趋势

下面来看看上周Github上有哪些热门的前端项目吧。

1. appsmith

appsmith 是一个用于构建管理面板、内部工具和仪表板的低代码项目。可以在几分钟内将任何数据源转换为内部应用程序。Appsmith 可以使用拖放 UI 组件来构建页面,连接到任何 API、数据库或 GraphQL 源并使用 JavaScript 对象编写逻辑。

image.png

Star⭐: 14.8 k

本周Star⭐️: 1220

Github:http://github.com/appsmithorg/appsmith

2. developer-roadmap

developer-roadmap 是一个开发人员路线图,包含了前端路线图、后端路线图、DevOps 路线图、React 路线图、Angular 路线图、Android 路线图、Python 路线图、Go 路线图、Java 路线图、DBA 路线图。

image.png

Star⭐: 191 k

本周Star⭐️: 933

Github:http://github.com/kamranahmedse/developer-roadmap

3. hackathon-starter

hackathon-starter 是个一个 Node.js Web 应用程序的样板。

image.png

Star⭐: 33.2 k

本周Star⭐️: 504

Github:http://github.com/sahat/hackathon-starter

4. redwood

基于 React、GraphQL 和 Prisma 构建的全栈、多客户端 JavaScript 框架。

image.png

Star⭐: 11.9 k

本周Star⭐️: 428

Github:http://github.com/redwoodjs/redwood

5. excalidraw

excalidraw 是一个用于绘制手绘图的虚拟白板,支持多种图形模板。

image.png

Star⭐: 28.4 k

本周Star⭐️: 328

Github:http://github.com/excalidraw/excalidraw

工具推荐

下面来推荐几个好用的前端工具。

1. Link-to-qr

Link-to-qr 是一个免费的网站二维码生成器。

image.png

官网:http://link-to-qr.com/

2. screen.guru

screen.guru 是一个在线工具,可为网站截取屏幕截图。

image.png

官网:http://screen.guru/

3. 3D Book Image CSS Generator

3D Book Image CSS Generator 是一个在线工具,可以快速轻松地创建 3D 书籍封面并将其应用到网站上。

image.png

官网:http://3dbook.xyz/

4. Vscode Dev

Vscode Dev 是微软推出的在浏览器中运行的轻量级 VS Code。

image.png

官网:http://vscode.dev/

5. transition.css

Transition 可以用来生成过渡动画,还提供了一组预定义的动画供我们选择。

image.png

官网:http://www.transition.style/

6. Glass UI

Glass UI 是一个基于 glassmorphism 设计规范的免费 CSS 生成器,可以用来快速设计和自定义样式属性。

image.png

官网:http://ui.glass/generator/

7. Type Scale

Type Scale 是一个可让用户按比例来显示文本大小的在线工具。内置多种比例规模,用户可以通过Scale选项来改变,还带有实时预览,简单便捷。

image.png

官网:http://type-scale.com/

8. Browser frame

Browser frame 是一个在不同浏览器框架中来进行屏幕截图的最简单方法。它支持多种浏览器、操作系统和主题。

image.png

官网:http://browserframe.com/

9. Blob generator

Blob generator 可以通过 SVG 编辑为网页创建复杂的形状。我们只需要更改提供的属性,代码就会自动生成。

image.png

官网:http://passionhacks.com/blob-maker/

10. CSS Value

CSS Value 可以很容易地确定某个 CSS 属性的值。

image.png

官网:http://cssvalues.com/