New week, come and see what's new last week!
Technology anecdotes
1. Running native Linux on the M1 Mac
The M1 Mac now runs native Linux without a hitch. The Alpha version of the Asahi Linux project designed for Apple's self-developed chips has been released. Running some programs on the exact same hardware, Linux turns out to be faster than macOS!
Asahi Linux has released the first public alpha version on the official blog platform, suitable for developers and advanced users, and supports OTA upgrades.
To install Asahi Linux, the following requirements need to be met:
- M1, M1 Pro, or M1 Max computer (except Mac Studio)
- macOS 12.3 or later, logged in as an administrator user
- At least 53GB of free disk space (desktop installation). Asahi Linux Desktop requires 15GB, but the installer reserves an additional 38GB of disk space in macOS to avoid breaking macOS updates.
- Connect to the internet and the installer will download 700MB ~ 4GB of data.
Asahi Linux official website: asahilinux.org/
Update Express
1. Node.js v12.22.12 (LTS) released
On April 5th, Node.js v12.22.12 (LTS) was released, the final version of Node.js 12. Node.js 12 will reach end-of-life status on April 30, 2022 and will not receive updates after that. Node.js strongly recommends migrating applications to Node.js 16 or 14 (both are Long Term Support (LTS) releases) in order to continue to receive future security updates after April 30, 2022.
Update details: nodejs.org/en/blog/rel…
2. TypeScript 4.7 Beta is officially released
4月8日，TypeScript 4.7 首个 Beta 版本正式发布。可以通过以下命令来使用beta版本：
npm install typescript@beta
复制代码TypeScript 4.7 新功能如下：
- Node.js 中的 ECMAScript 模块支持；
- 模块检测控制；
- 计算属性的控制流分析；
- 对象内函数类型推导增强；
- 引入实例化表达式；
- infer 关键字的 extends 约束；
- 类型参数提供可选的 Variance 注解；
- #private字段上的typeof支持；
- 自定义模块解析策略；
- 模块解析策略；
- 导入语句的组织优化；
- 对象方法。
更新详情：devblogs.microsoft.com/typescript/…
开源趋势
下面来看看上周Github上有哪些热门的前端项目吧。
1. appsmith
appsmith 是一个用于构建管理面板、内部工具和仪表板的低代码项目。可以在几分钟内将任何数据源转换为内部应用程序。Appsmith 可以使用拖放 UI 组件来构建页面，连接到任何 API、数据库或 GraphQL 源并使用 JavaScript 对象编写逻辑。
Star⭐： 14.8 k
本周Star⭐️： 1220
Github：github.com/appsmithorg…
2. developer-roadmap
developer-roadmap 是一个开发人员路线图，包含了前端路线图、后端路线图、DevOps 路线图、React 路线图、Angular 路线图、Android 路线图、Python 路线图、Go 路线图、Java 路线图、DBA 路线图。
Star⭐： 191 k
本周Star⭐️： 933
Github：github.com/kamranahmed…
3. hackathon-starter
hackathon-starter 是个一个 Node.js Web 应用程序的样板。
Star⭐： 33.2 k
本周Star⭐️： 504
Github：github.com/sahat/hacka…
4. redwood
基于 React、GraphQL 和 Prisma 构建的全栈、多客户端 JavaScript 框架。
Star⭐： 11.9 k
本周Star⭐️： 428
Github：github.com/redwoodjs/r…
5. excalidraw
excalidraw 是一个用于绘制手绘图的虚拟白板，支持多种图形模板。
Star⭐： 28.4 k
本周Star⭐️： 328
Github：github.com/excalidraw/…
工具推荐
下面来推荐几个好用的前端工具。
1. Link-to-qr
Link-to-qr 是一个免费的网站二维码生成器。
2. screen.guru
screen.guru 是一个在线工具，可为网站截取屏幕截图。
官网：screen.guru/
3. 3D Book Image CSS Generator
3D Book Image CSS Generator 是一个在线工具，可以快速轻松地创建 3D 书籍封面并将其应用到网站上。
Official website: 3dbook.xyz/
4. Vscode Dev
Vscode Dev is a lightweight VS Code launched by Microsoft that runs in the browser.
Official website: vscode.dev/
5. transition.css
Transition can be used to generate transition animations, and also provides a set of predefined animations for us to choose from.
Official website: www.transition.style/
6. Glass UI
Glass UI is a free CSS generator based on the glassmorphism design specification that can be used to quickly design and customize style properties.
Official website: ui.glass/generator/
7. Type Scale
Type Scale is an online tool that allows users to scale text size. There are multiple built-in scales, users can change it through the Scale option, and it also has a real-time preview, which is simple and convenient.
Official website: type-scale.com/
8. Browser frame
Browser frame is the easiest way to take screenshots in different browser frames. It supports multiple browsers, operating systems and themes.
Official website: browserframe.com/
9. Blob generator
Blob generator can create complex shapes for web pages through SVG editing. We just need to change the provided properties and the code will be generated automatically.
Website: passionhacks.com/blob-maker/
10. CSS Value
CSS Value can easily determine the value of a CSS property.
Official website: cssvalues.com/