潮流最前端 第 2 期:新潮流?用其他语言来写 JS 工具

简介: 本期刊物新增《CSS 前沿》栏目,大漠老师将作为栏目主编加入共建,希望大家喜欢。

image.png

本期刊物新增《CSS 前沿》栏目,大漠老师将作为栏目主编加入共建,希望大家喜欢。

image.png

栏目主编:平侠

The Widening Responsibility for Front-End Developers

https://css-tricks.com/the-widening-responsibility-for-front-end-developers/
Front-end development is at the intersection of art and logic. A cross of business and expression. Both left and right brain. A cocktail of design and nerdery. I love it.

I was wrong. CRDTs are the future

https://josephg.com/blog/crdts-are-the-future/
Thanks to people like Martin, we now know how to make good CRDTs. But there’s still a lot of code to write before local first software can become the default. OT - you’re clever and fascinating, but CRDTs can do things you were never capable of. And CRDTs need me. With some good implementations, I think we can make something really special. I mourn all the work I’ve done on OT over the years. But OT is no longer fits into the vision I have for the future. CRDTs would let us remake Wave, but simpler and better. And they would let us write software that treats users as digital citizens, not a digital serfs. The time to build is now.

Writing JavaScript tools in other languages – a new trend?

https://2ality.com/2020/10/js-plus-other-languages.html
Recently, we have seen an uptick of JavaScript tools being written in languages other than JavaScript. This blog post lists a few examples and explains the appeal of not using JavaScript. Releated: Boa - An experimental Javascript lexer, parser and compiler written in Rust, Volta: Install, Run, and Manage JavaScript Tools Quickly, built in Rust and ships as a snappy static binary.

What’s In The Future For JavaScript?

https://blog.bitsrc.io/whats-in-the-future-for-javascript-b58fc736f1c3
The predictions of a software developer who’s seen the language evolve for the past 17 years. What’s in our near future and what will happen 20 or more years from now?

Four principles of software engineering

https://drewdevault.com/2020/10/09/Four-principles-of-software-engineering.html
Software should be robust, Software should be reliable, Software should also be stable. Finally, software should be simple.

Redux数据流管理架构有什么致命缺陷,未来会如何改进?

https://www.zhihu.com/question/277623017/answer/1517983092
Redux最大的问题就是它本应该是一个小众的解决方案,硬生生被理论粉与名词流吹成了大众的最佳实践,因而带来了极为严重的理论与实践的gap。
image.png

栏目主编:侑夕、紫益

🧐一周精读🧐《设计模式 - Builder 生成器》

https://github.com/dt-fe/weekly/blob/v2/168.精读《设计模式 - Builder 生成器》.md
通过三个生动的例子与 JS 示例代码,帮助前端的你理解设计模式,让我们一起积累不过时的知识!
Builder(生成器)属于创建型模式,针对的是单个复杂对象的创建。意图:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。

新潮流?用其他语言来写 JS 工具

https://2ality.com/2020/10/js-plus-other-languages.html
最近发现不少比较快的 JS 周边工具都是用 Go 或者 Rust 来实现的,同时速度远快于之前用 Node 来实现,比如说比 Webpack 快百倍的 esbuild 使用 Go 来实现的,或许是一种新的潮流。

用 TensorFlow.js 来让蒙娜丽莎栩栩如生起来

https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html
深度好文,这个项目利用 TensorFlow.js、深度学习和图像处理技术,让蒙娜丽莎的眼神和头跟踪实验者的动作来移动。
1602432471441-5b7e5c0b-6cf3-4a12-a2e1-d343bdd0c271.gif

去复习一遍 Linux 的知识

https://juejin.im/post/6881755746216706062
标题是「对不起,学会这些 Linux 知识后,我有点飘」有些 2,不过用前端久了,去复习一下 Linux 用法是很不错的。

改变世界的一次代码提交

https://hutusi.com/articles/the-greatest-git-commit
本文主要是将当时 Linus 是怎么设计出来 Git 的第一个版本来的,从背景、设计、实现、启示来阐述,对于了解 Git 原理很不错。
image.png

栏目主编:侑夕

SWC- 超快 TS / JS 编译器

https://github.com/swc-project/swc
SWC 是一个用 rust 编写的超快速 typescript/javascript 编译器,类似用 Rust 写的 JS 工具还有 RSLint 格式校验工具和 Volta 项目命令行 node/npm/yarn 版本管理工具,还有用 Go 实现的 Elsa

jspm - 可直接使用的 NPM 包模块 CDN

https://jspm.org/
jspm 提供了一个模块 CDN,允许 npm 中的任何包作为原生 JavaScript 模块直接加载到浏览器或 Node 环境中使用,类似的还有 Skypack,可以和 Webpack5 中的模块联邦结合起来看。

Jazzit - 让你的脚本运行成功失败播放声音

https://github.com/Sangarshanan/jazzit
Python 的一个库,挺有新易,有兴趣的同学可以用 Node 去实现一个。

Headless Recorder Chrome 扩展

https://github.com/checkly/headless-recorder
Headless recorder 是一个可以记录浏览器事件交互行为并生成 Puppeteer 或 Playwright 脚本的 Chrome 扩展工具,在测试领域可以好好玩一玩。

Airbnb 开源的可视化组件 Visx

https://github.com/airbnb/visx
Visx 是可复用的低代码可视化组件集,将 D3 的强大功能与 React 虚拟 DOM 更新的优势结合起来,很有 Airbnb 的视觉特色(效果>>),做一些年轻化潮流的可视化场景可以试试。

PASUKON-简单的 JAVASCRIPT 解析器生成器

https://pasukon.rocks/
Pasukon 使用易于学习的语法生成解析器,基于解析器组合器,还实现了词法分析步骤,可以通过如上在线页面来试试看。
image.png

栏目主编:大漠

CSS Variables 101

https://ishadeed.com/article/css-vars-101/
CSS 变量又称为 CSS 自定义属性,其源于 CSS 处理器(比如,Sass , LESS 等)。W3C 将该特性引入到 CSS中,而且早在四年前就得到了 Web 浏览器的支持。它们非常有用且易于使用,但前端开发人员经常会误用或误解它们。这篇文章介绍了 CSS 变量并且通过大量的示例和用例可以帮助大家更好的了解关于 CSS 变量。

只用 CSS 来实现设置数字计数器动画

https://css-tricks.com/animating-number-counters/
要写一个数字从 0-100 增长的动画效果,可能首先会想到用 setInterval,但是其实你可以试试 New School 的 CSS 解决方案。

Codepen-用 CSS 来画一个 Switch

可能你画就是一个 img 标签解决啦~
image.png

栏目主编:十吾

web 可视化类库的设计空间

https://medium.com/nightingale/navigating-the-wide-world-of-web-based-data-visualization-libraries-798ea9f536e7

图形和可视化开发人员经常会纠结:“应该使用哪个可视化库?”Medium 上的这篇文章对已有的 web 可视化库进行了调查,从 API 设计和抽象基本两个角度对它们做了归类。
image.png

When Sea Levels Attact

https://informationisbeautiful.net/visualizations/when-sea-levels-attack-2/

近年来的一些研究表明,格陵兰和南极洲的冰川正在加速融化,全球海平面的上升速度可能远超预期。当海平面不断上升,向人类城市发起进攻,世界将会变成怎样?如果不采取行动,到 2100 年威尼斯将会完全被水淹没。并且,按照当前速度继续发展下去,沿海的各大城市都面临被淹没的风险,甚至会让一些陆地彻底消失。这将会给人类世界带来不可挽回的灾难。只有积极地节能减排,才有可能更好地拯救我们赖以生存的陆地。
image.png

全球漏油事件历史一览

https://public.tableau.com/profile/theodore.isaac#!/vizhome/Spillsworkbook/Dashboard1

2020 年 7 月 25 日,日本一艘邮轮途径毛里求斯东南沿海埃因尼角的时候搁浅,造成了史上最严重的漏油事件,估计泄露 1000 吨燃油。Theo Isaac 制作的信息可视化展示了 1957 年以来的全球漏油事件历史。顶部巧妙地将漏油量的面积图和油轮泄漏这一形态结合在一起,然后使用统计图表对所有漏油事件的事故原因和污染物进行了数据展示,最后的地图对漏油事故发生地点进行了统计。
image.png

查看更多: https://www.yuque.com/mo-college/weekly/oqlcu8

image.png

栏目主编:平侠、侑夕

The open source paradox

http://antirez.com/news/134
Open source is different, it’s an artifact, it’s a transposition in code of what you really want to do, of what you feel software should be, or just of all your fun and joy, or even anger you are feeling while coding. And you want it to rock, to be perfect, and you can’t sleep at night if there is a fucking heisenbug. So if a user of your software is addressing you because some part of your code sucks, and is willing to work with you to do something about it, and is very demanding, don’t think they are abusing you because they are not paying you. It’s not about money. You can ignore bugs if you want, and ignore their complains, you can do that since you don’t have a contract to do otherwise, but they are helping you, they care about the same thing you care: your software quality, grandiosity, perfection.

Writing a book: is it worth it?

https://martin.kleppmann.com/2020/09/29/is-book-writing-worth-it.html
On balance, I do think that writing a technical book is worth it. The feeling of knowing that you have helped a lot of people is gratifying. The personal growth that comes from taking on such a challenge is also considerable. And there is no better way to learn something in depth than by explaining it to others. In my next post I will provide some advice on writing and publishing from my experience so far.

The Best Design Is No Design

https://www.uxmatters.com/mt/archives/2020/10/the-best-design-is-no-design.php
One characteristic of good UX design is that it’s unnoticeable to users because it reflects the way they work. As many companies scale up—especially growing startups—they struggle to add value without adding complexity. This is one reason we’re seeing a trend toward adding secondary navigation at the left of many applications. Often, one horizontal navigation bar across the top of an application is just not scalable. Your focus should be on simplicity. Releated: What is Simplicity Theory? Why people prefer simple experiences.

Introducing Google Workspace to help you get more done

https://blog.google/products/workspace/introducing-google-workspace-help-you-get-more-done/
Whether at work or at home, people want to do great things. But for many, this means juggling a variety of apps and tools to stay connected—none of them centralized—which can make it hard to keep track of things or make progress on what matters. Today we’re announcing Google Workspace: everything you need to get anything done, now in one place. Google Workspace includes all of the productivity apps you know and use at home, at work, or in the classroom—Gmail, Calendar, Drive, Docs, Sheets, Slides, Meet, Chat and more—now more thoughtfully connected.

Figma Low Code – A new way to tackle design hand-off

https://prototypr.io/post/figma-low-code-a-new-way-to-tackle-design-hand-offs/
Figma-Low-Code is an open-source project that enables the direct inclusion of Figma designs in VUE applications. By ensuring that the Figma design stays the single source of truth, this approach reduces the need for design hand-offs and front-end code significantly.

硬核 UP 自制带屏幕的 NFC 名片

https://www.bilibili.com/video/BV1Cf4y1y7KT/
B 站一 UP 开源了一个自己实现的超迷你智能 NFC 卡片,带电子墨水屏,可以模拟各种 IC 卡,和配套 APP 使用设置显示内容等等功能,非常佩服这个全能的人才。

用 JS 来玩音乐

https://bongo.cat/
试试按一下 1 1 3 1 6 5,然后按一下 1 1 3 1 8 6,会有惊喜,更多谱子可见 Externalizable/bongo.cat,很多“闲人”,玩完以后这个 JS 音乐生成库 ZzFXM 也可以了解一下~

如何保持长时间专注?

https://www.yuque.com/deerain/wqpb2o/nwazye
本文主要针对的是无法长时间保持注意力的人,普通人能一次性保持高度专注的时长一般是 30~40 分钟,如果低于这个时间,那就阔以看看此文啦~

为什么自己照镜子感觉自己长的蛮好看,可是一拍照就觉得不咋的?

https://www.zhihu.com/question/34368524
知乎上面的一个问答,可能大部分同学都有这个疑问,为啥“我”镜子里面这么好看,拍照出来感觉差了点儿~

查看更多: https://www.yuque.com/awesome/fe_weekly/20201005、https://www.yuque.com/awesome/fe_weekly/20201012

image.png
关注「Alibaba F2E」
把握阿里巴巴前端新动向

相关文章
|
2月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
2月前
|
JavaScript 前端开发 API
淘宝店铺阿里旺旺采集工具,连接批量转旺旺ID,用Js接口实现效果
以下是淘宝店铺阿里旺旺采集工具的JS实现代码,包含批量获取店铺旺旺ID功能,当然仅
|
29天前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
535 0
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
JavaScript 前端开发 API
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
184 8
|
4月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。