weekly
第 115 期 02/20 Web Push 拯救 Web 凉凉 Native App？
Source: Comparison of the usage statistics of React vs. Vue.js for websites
技术热闻
Web vs Native
Web Push for Web Apps on iOS and iPadOS
https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/
Web Push 拯救 Web 凉凉 Native App？
https://mp.weixin.qq.com/s/SXwtUbTPJRy5N6A7lzRVIw
本文主要结合 iOS 和 iPadOS 14.1-beta.1 的发布，介绍了其中涉及的新特性、Web Push、A2HS 以及简单聊了聊 Web App 和 Native App 开发。
What does it look like for the web to lose?
https://chriscoyier.net/2023/01/04/what-does-it-look-like-for-the-web-to-lose/
There is always some degree of tension between “native apps” and “the web” as platforms. Why do companies like Apple and Google want you to write native apps over web apps? Better yet, let’s ditch the idea of native apps. All web! All web! All web!
Library
core-js’s Maintainer Complains Open Source Is ‘Broken’
https://github.com/zloirock/core-js/issues/1179
Comparison of the usage statistics of React vs. Vue.js for websites
https://w3techs.com/technologies/comparison/js-react,js-vuejs
This report shows the usage statistics of React vs. Vue.js as JavaScript library on the web.
一图读懂
一图解读《The Guide To Responsive Design In 2023 and Beyond》
https://mp.weixin.qq.com/s/BCJ09yhuSxk6yXnFbRfC9Q
本文作者是前端兼设计师 Ahmad，围绕响应式设计 responsive design 这一话题，表达了之前 Web 页面只围绕桌面端 desktop、平板 tablet 以及手机 mobile 的设计已经过时，响应式布局不再是媒体查询的专属。阅读本文，可以了解现代基于组件式开发方式下的响应式布局，为响应式适配提供更多思路。
一图解读《How To Eliminate Render Blocking Resources》
https://mp.weixin.qq.com/s/iZSPGa3rFv4Y8uW53T1a9A
本文来自 DebugBear 官方博客，关于影响网页性能的 render blocking resources 的介绍以及如何解决带来的问题。虽然文章目的之一是为了宣传其性能检测工具，不过我们确实可以从中了解到 JS、CSS 以及其它各种资源如何在不经意间阻塞页面渲染影响页面性能的。
大前端
Image
It’s the future — you can stop using JPEGs
https://daniel.do/article/its-the-future-stop-using-jpegs/
Switching to WebP could cut the egress cost of your cloud bill down by an amount that would make it a good line item on a resume or a thing to discuss in a performance review.
Web Components
Declarative Shadow DOM
https://webkit.org/blog/13851/declarative-shadow-dom/
In summary, declarative shadow DOM introduces an exciting new way of defining a shadow tree in HTML, which will be useful for server-side rendering of Web Components as well as in context where JavaScript is disabled such as email clients. This has been a highly requested feature with lots of discussions among browser vendors. We’re happy to report its introduction in Safari Technology Preview 162.
JS
Writing Javascript without a build system
https://jvns.ca/blog/2023/02/16/writing-javascript-without-a-build-system/
I want to talk about what’s appealing to me about build systems, why I (usually) still don’t use them, and why I find it frustrating that some frontend Javascript libraries require that you use a build system. It can be hard to navigate for folks like me who write very simple small Javascript projects that don’t require a build system.
Use Maps More and Objects Less
https://www.builder.io/blog/maps
For instance, if you’re using objects in JavaScript to store arbitrary key value pairs where you’ll be adding and removing keys frequently, you should really consider using a map instead of a plain object.
CSS
组件级别的 CSS-in-JS
https://mp.weixin.qq.com/s/Wz9u_SdLs8Cw7xPpzfkRpw
在上述的对比中，其实并不能说 antd 一定优于 styled 和 emotion，而是在 antd 的组件级使用场景下，我们做了相应的优化以取得了性能上的优势。反过来说，由于『组件级』的局限性，antd 的 CSS-in-JS 方案并不能适用于日常构建应用。
The modern web’s underrated powerhouse
https://github.com/readme/featured/css-future
CSS helps define not just the look of a page, but how pages adapt to different sizes and contexts. It’s foundational for both usability and accessibility on the web.
Try out CSS Nesting today
https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
A lot of people across multiple companies have been working to bring nesting to CSS for almost five years. The syntax has been hotly debated, in long conversations about the pros and cons of many different solutions. We hope you find the result immensely helpful.
Container queries land in stable browsers
This Valentine’s day, we’re celebrating size container queries and container query units landing in all stable browsers.
When and how to use CSS will-change
https://blog.logrocket.com/when-how-use-css-will-change/
The will-change CSS property is a powerful tool that allows developers to hint to the browser about the elements on a page that are likely to change soon. This gives the browser a chance to optimize its rendering of those elements ahead of time, potentially resulting in better performance.
低代码
低代码逻辑编排观：PlayMaker
https://mp.weixin.qq.com/s/L5p_UaUK7gcoJvH3yM2nmA
今天先为大家带来游戏开发领域内的 PlayMaker。
在保险做低码的探索之路
https://mp.weixin.qq.com/s/MbSskY5L0wSALIAtNsaXHA
通过这篇文章做一个总结，也算对自己这些年建设低码研发方向的踩过的坑做一些记录，同时给其他同学后续如果要做一些基础的技术项目做一些参考。
智能化
前端智能化在淘宝的2022实践总结
https://mp.weixin.qq.com/s/L0uMk4L8r6va0NVpBZEUiQ
阿里前端智能化方向小组历经 4 年的实践和演变，在前端融入业务技术团队和终端融合的背景之下，前端智能化小组在2022年更多以优化拓展基础业务工具、落地服务业务为主。本篇重点介绍业务工具的核心进展，以及在大促期间的应用落地。
Svelte
What Things Sveltekit Offer Better Than Other Javascript Frameworks?
https://www.wahidali.dev/blogs/what-things-sveltekit-offer-better-than-other-javascript-frameworks
In the javascript war, no framework is best. You have to find that by yourself by exploring different frameworks and then stick to one framework you most like in your exploring journey. The more time you stick to one framework. The more you can able to solve web problems effectively and become able to give back to that framework community. The framework does not matter how you will handle and use that framework in your projects matters.
Vue
Vue.js 2023 年最新路线图
https://mp.weixin.qq.com/s/4gpi5K3Oj_faT_lH41Cjzg
Vue Amsterdam 2023 于 2 月 8 日至 10 日举行，在会议中，尤雨溪透露了 Vue 的一些令人兴奋的新功能，并提供了 2023 路线图的更新。
设计
cuberto hello 设计展示
提供UI/UX 设计服务公司的 hello 页面，页面效果非常炫酷
欢迎加入，一起共建。