潮流最前端 第 3 期:Webpack 5 终于发布啦!

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 潮流最前端 第 3 期火热出炉啦~每周与你分享最潮流的前端资讯。

image.png

image.png

栏目主编:平侠

The Developer Experience Gap

https://redmonk.com/sogrady/2020/10/06/developer-experience-gap/

If there is and can be no Apple-equivalent enterprise vendor arriving to make sure the enterprise telephone app team plays nicely with the enterprise music player team, what progress can be expected? It’s early, and the next few quarters should provide hints at who has accurately identified the depth of the problem and taken steps to address it. In the meantime, here are five adjectives that will describe the next generation of developer experience: Comprehensive, Developer Native, Elegant, Multi-Runtime, Multi-Vendor.

Faster Web App Delivery with PRPL

https://addyosmani.com/blog/the-prpl-pattern/

PRPL is a pattern for structuring and serving web applications and Progressive Web Apps (PWAs) with an emphasis on improved app delivery and launch performance. The letters describe a set of ordered steps for fast, reliable, efficient loading.

Webpack 5 release

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

The major version was also the chance to revise some of the defaults and to align with proposals and specifications that come up in the meantime. Relaeted: Webpack 5 Headache, How to Set Up webpack 5 from Scratch.

Temporal: Open Source Workflows as Code

https://mikhail.io/2020/10/temporal-open-source-workflows-as-code/

Microservices, serverless functions, cloud-native applications—distributed event-driven business applications are hot, and we will deal with them for years. I worry that the application development industry underestimates the complexity of such systems. Ad-hoc solutions to common problems may rapidly increase the technical debt and slow down the ability to innovate. I’m excited to see tools like Temporal enter the space of open-source workflows, or rather the space of asynchronous data processing. Releated: Why the Serverless Revolution Has Stalled, Serverless Horror Stories.

Emerging Architectures for Modern Data Infrastructure

https://a16z.com/2020/10/15/the-emerging-architectures-for-modern-data-infrastructure/

And yet, despite all of this energy and momentum, we’ve found that there is still a tremendous amount of confusion around what technologies are on the leading end of this trend and how they are used in practice. In the last two years, we talked to hundreds of founders, corporate data leaders, and other experts – including interviewing 20+ practitioners on their current data stacks – in an attempt to codify emerging best practices and draw up a common vocabulary around data infrastructure. This post will begin to share the results of that work and showcase technologists pushing the industry forward.

image.png

栏目主编:侑夕、紫益

🧐一周精读🧐《设计模式 - Factory Method 工厂方法》

https://github.com/dt-fe/weekly/169.精读《设计模式 - Factory Method 工厂方法》.md

通过三个生动的例子与 JS 示例代码,帮助前端的你理解设计模式,让我们一起积累不过时的知识!

Factory Method(工厂方法)属于创建型模式,利用工厂方法创建对象实例而不是直接用 New 关键字实例化。意图:定义一个用于创建对象的接口,让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。

ECMAScript 2020 新增特性

https://juejin.im/post/6883306672064987149

ECMAScript 2020 是 ECMAScript 语言规范的第 11 版,新增的这 9 个新特性值得一学。

Serverless 未来十年发展解读

本文整理自 Johann Schleier-Smith 在 ServerlessDays China 的演讲,主要分为四个部分:首先阐述 UC Berkeley 怎样来定义 Serverless ,之后会分享一些近期的研究成果和进展,最后提出对云计算未来的一些预测和设想。

浏览器是如何工作的

https://king-hcj.github.io/2020/10/05/google-v8/

一篇文章方方面面的介绍到了 Chrome V8,让你更懂 JavaScript,很是详细。

超全的 Linux Shell 文本处理工具集锦

https://segmentfault.com/a/1190000037480939

每周学一点新知识,用过 Shell 处理一些文本才知道原来这么简单方便,此文将一些处理文本常见的工具都介绍了一个遍,可先了解到用的时候再查。

一文了解文件上传全过程

https://segmentfault.com/a/1190000037411957

一篇很详细的介绍文件上传流程的好文,从前置知识、请求端、服务端、接收端一层一层来带着入学的感觉。

image.png

栏目主编:侑夕

Zipson - Json 压缩工具

https://github.com/jgranstrom/zipson

Zipson 是一个让原本JSON.parse/stringify增加了压缩和流媒体支持的临时替代方案,感觉前后端传输中,接口先压缩吐出数据,前端通过解压获取 Json,可让传输数据变小 50%。

Bubble Tea:一个强大轻量的 TUI 框架

https://github.com/charmbracelet/bubbletea

Bubble Tea 一个基于 Elm 架构的 Go 框架,借此可用有趣、函数式、带状态的方式去编写命令行 APP,效果很不错,虽然是 GO 语言,不过可触类旁通研究一波。
640.gif

BlurHash: 图片懒加载舒服的占位符

https://github.com/woltapp/blurhash

之前我们一般使用纯灰色亦或是骨架占位符的方式来缓存暂未出来的图片,虽然看起来没问题但是不讨设计喜欢,BlurHash 这个模糊彩色的占位符值得试试。

Drogon:一个基于 C++14/17 的 Http 应用框架

https://github.com/an-tao/drogon

Drogon 是一个基于 C14/17 的 Http 应用框架,通可以方便的使用 C构建各种类型的 Web 应用服务端程序,写习惯 Node 的同学看看这个会让你惊讶的。

detect-gpu:一个 GPU 的检测库

https://github.com/TimvanScherpenzeel/detect-gpu

根据 GPU 的 3D 渲染基准分数对 GPU 进行分类,开发人员可借此结果为图形密集型应用程序提供合理的默认设置。

Plausible Analytics:Google Analytics 替代品

https://github.com/plausible/analytics

Plausible Analytics 是一个简单、轻量且隐私友好的 Google Analytics 替代品,不使用 cookie,自托管或者云上部署都可以。

Awesome YouTubers

https://github.com/JoseDeFreitas/awesome-youtubers

以上这个 Awesome YouTubers 将技术领域值得关注的 YouTuber 给挑选出来了,适合那种看视频学习的同学来有选择关注~

image.png

栏目主编:大漠

[mediaqueries-5] Updating the CSS media feature syntax for foldable & dual-screen devices #5621

https://github.com/w3c/csswg-drafts/issues/5621

@zouhir 和他的同事@dlibby是最早提出了跨媒体特性,主要用来解决微软双屏幕设备,然后拓展到可折叠屏幕,甚至是可以通过创建更多枚举值来表示新硬件的屏幕拓扑。这是目前解决双屏幕和可折叠屏幕的技术方案之一。现在该特性已提交W3C规范中 Media Queries Level 5进行讨论。

The --var: ; hack to toggle multiple values with one custom property

https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property

你肯定知道使用JavaScript来动态更新或者应用CSS的属性值,但你肯定不知道如何在CSS中采用自定义属性的特性来决定属性运用哪一个值。时至今日的CSS自定义属性也可以做到JavaScript中真( true )和假( false )的切换。

Logical layout enhancements with flow-relative shorthands

https://web.dev/logical-property-shorthands/

很多开发者都习惯于物理属性,但在Web的布局当中物理属性将会带来很多令人感到困惑,甚至是麻烦。特别是有着国际业务需求的同学,那么CSS逻辑属性的到来,将会改变这一切,再也不会让你为不同语言排版,布局感到头痛。而且CSS逻辑属性真的要到来了,甚至说已经到来了。

Dynamic Element Scaling in CSS

https://levelup.gitconnected.com/dynamic-element-scaling-in-css-7e35ed9a3914

使用CSS给HTML元素做动态缩放,比如 width 、 height 或者 font-size ,可能会想到的是使用CSS媒体查询特性,在不同的屏幕下使用不同的值。但这将会增加代码的冗余度,也会让你的代码变得越来越难维护。在这篇文章中,作者通过CSS的 calc() 函数,向大家展示了如何动态修改元素大小。

一个Div的能做什么:Demo1

这是一个 div 构建的纹理背景效果。

image.png

栏目主编:彼洋

TC39 9月会议提案进度报告

https://www.yuque.com/alibabaf2e/vab8a9/czwuqv

本次会议上,我们主持了 Error Cause 提案进入了 Stage 1,作为阿里巴巴集团内 JavaScript 错误处理模式的一个总结,将这个行为写入标准,便于更多的开发者工具如 Alinode、阿里云 ARMS 等改进异常分析的体验。

Chrome 86 重要更新

https://www.yuque.com/alibabaf2e/gt3np7/ullslm

Chrome 86 在2020年10月推出了稳定版,现已全面应用于Android、Chrome OS、Linux、macOS 和 Windows等平台,我们一起来看下这次的重要更新。

image.png

栏目主编:十吾

为什么智能手机会导致颈部综合症可视化

https://multimedia.scmp.com/lifestyle/article/2183329/text-neck/index.html

现在,全球手机用户数量超过了 50 亿,这个世界上三分之二的人口都拥有手机。我们大多数人每天至少要弯腰 2 个小时,这将让我们的颈部承受的重量增加多达 27 千克。如果在走路时使用手机发消息,则可能会带来各种意外事故。该可视化作品通过交互的形式,展示了颈部是如何承受压力的。
image.png

名作失窃可视化

https://www.informationisbeautifulawards.com/showcase/3266-you-could-fill-a-museum

联邦调查局的数据库全球数据库包含7,200多种失窃的名作,包括斯特拉迪瓦里小提琴、卡尔德手机、蒂法尼灯、小丑画等。
image.png

对 tensorflow 中数据流图的可视分析

Tensorflow 是谷歌开发的当下最流行的机器学习软件之一。它采用数据流图(Dataflow Graph)来表达机器学习算法的计算过程,用户可以定制不同的数据流图来构建自己的算法。然而,随着深度学习的兴起与流行,各类神经网络渐趋大规模、复杂化,算法开发者仅凭借自身的理解与记忆,很难把握算法的各部分体系结构,相互之间也难以进行沟通。为此,这篇文章提出了可视化工具 TensorFlow Graph Visualizer,通过可视分析帮助用户在 TensorFlow 中进行算法分析与开发。该文章荣获了 IEEE VAST 2017 的最佳论文奖。
image.png

查看更多墨者修齐: https://www.yuque.com/mo-college/weekly/syvbtp

image.png

栏目主编:平侠、侑夕

Thoughts writing a Google App script

https://martinfowler.com/articles/202009-google-app-dir.html

Recently a friend of mine asked for a simple program that would correlate some data drawn from a couple of online services. I decided the best way to do this for him would be to use a google spreadsheet as the host, putting the code into the spreadsheet's script area. I'm no expert in Google App Script, but the exercise led to a few observations, which I feel compelled to share.

How AI is powering a more helpful Google

https://blog.google/products/search/search-on/

When I first came across the web as a computer scientist in the mid-90s, I was struck by the sheer volume of information online, in contrast with how hard it was to find what you were looking for. With recent advancements in AI, we’re making bigger leaps forward in improvements to Google than we’ve seen over the last decade, so it’s even easier for you to find just what you’re looking for. Today during our Search On livestream, we shared how we're bringing the most advanced AI into our products to further our mission to organize the world’s information and make it universally accessible and useful.

Help kids Be Internet Awesome

https://beinternetawesome.withgoogle.com/en_us/interland

To make the most of the Internet, kids need to be prepared to make smart decisions. Be Internet Awesome teaches kids the fundamentals of digital citizenship and safety so they can explore the online world with confidence.

编码技巧(五):适当可扩展

https://zhuanlan.zhihu.com/p/266076082

本文介绍了一个新的编码技巧:“适当可扩展”,什么样的代码才能成为 “适当” 的呢?文中详细的进行了解释。值得一提,代码的各种优秀特征,都是需要花费精力来写出来的,也就说需要成本,我们才能有收益。所以,提供 “可扩展性”,必然得是满足了相关的需求,不能是开发者一厢情愿而为之。当然为了追求技术精进,高度可扩展的案例,也是非常值得学习的。这并不冲突。我们可以身怀绝技,但用的时候却只 “恰到好处”。这才是行家的手笔呀。

企业文化建设需要适度“用力过猛”

https://mp.weixin.qq.com/s/fTqMP7vbunhWyDOleyYgvw

企业文化建设,是一个有破有立的过程,破在固有的思想观念和行为模式,立在新的思想观念和行为标准。按照惯性定律,没有外力作用时,事物总是处于匀速运动或静止状态,因此成功的企业文化建设,多少会给人一种“用力过猛”的感觉,否则不足以打破当下的惯性;即便是自我心灵觉醒,同样也需要外力。海尔砸冰箱,就是一种适度“用力过猛”的外力,张瑞敏砸的不是冰箱,砸的是当时干部员工队伍中落后的思想观念,不光在企业内部,甚至在整个企业界唤醒了人们沉睡的质量意识。适度“用力过猛”,为的是让人从习以为常的稳态中惊醒,迈向需要做功的激活态(非稳态)。

当百度to B

https://mp.weixin.qq.com/s/xS5ACCrgh0C5w_rUL2gwJg

当云计算进入以各行业传统企业和政府部门为主力客户的“下半场”,一个行业共识是,计算与存储的基本能力之外,云与AI的结合将成为接下来的关键竞争点——云计算负责新型IT基础架构,AI负责具体业务问题。而在云和AI两个领域,尤其是二者的结合上,百度都是重要的玩家。

iOS 后台锁屏监听摇一摇

https://juejin.im/post/6881420727371694093

不会吧这也行系列,一般情况下出于省电、权限、合理性等因素考虑一些奇怪的需求 iOS 不是很好实现,如当 APP 处于后台或锁屏状态时,依旧可以监听到摇一摇,看看这里是怎么做的。

Flutter 1.22 正式发布

https://juejin.im/post/6879048672597213198

来看一看 Flutter 1.22 趁着 iOS 14/Android 11 发布季,都更新了一些什么样的功能?

1 分钟将 vscode 撸成小霸王

https://juejin.im/post/6882576431503638536

这个是真的“浪”,借助JSNES模拟器弄了一个 VSCode 的小霸王游戏机,VScode 插件搜索「小霸王」即可使用,这个想法很是不错~

哪些工具使你成为一个更好的程序员?

https://news.ycombinator.com/item?id=23468193

Hacker News 上面比较热烈的一个讨论,看看国外的程序员怎么说?

很炫酷的 3D 可视化的星空

http://stars.chromeexperiments.com/

一个可交互式的三维可视化恒星邻居,包括超过 10 万颗附近的恒星,点击 URL 进入很是不错。

Blush:插图定制生成工具

https://blush.design/zh-CN

这个工具不错的是可以自定义插图的每一部分来创建自己的构图,同时种类也很多,对于前端同学写一些图文搭配 PPT 蛮适合。

2020 中国奢侈品消费者数字行为洞察报告

https://mp.weixin.qq.com/s/fsBblPTiTjYXg1vUKzK_Jw

从此文来了解下后疫情时代中国奢侈品消费市场呈现的趋势、消费链路以及品牌打法,还可结合“名媛拼团”侧面来剖析下。

查看更多: https://www.yuque.com/awesome/fe_weekly/20201019

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

相关实践学习
部署Stable Diffusion玩转AI绘画(GPU云服务器)
本实验通过在ECS上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。
相关文章
|
6天前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
8 3
|
9天前
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
13 0
|
1月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
1月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
75 13
|
2月前
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
37 1
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
43 0
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
71 0
|
3月前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
61 6
|
3月前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
47 1
|
4月前
|
前端开发 JavaScript 架构师
Webpack模块联邦:微前端架构的新选择
Webpack的模块联邦是Webpack 5引入的革命性特性,革新了微前端架构。它允许独立的Web应用在运行时动态共享代码,无需传统打包过程。基本概念包括容器应用(负责加载协调)和远程应用(独立应用,可暴露模块)。实现步骤涉及容器和远程应用的`ModuleFederationPlugin`配置,以及在应用间导入和使用远程模块。模块联邦的优势在于独立开发、按需加载、版本管理和易于维护。通过实战案例展示了如何构建微前端应用,包括创建容器和远程应用,以及消费远程组件。高级用法涉及动态加载、路由集成、状态管理和错误处理。
88 3