第40期:追求用户体验至上的工具

date
Mar 18, 2022
slug
2022-weekly-11
status
Published
tags
weekly
Cooking
React
summary
VSCode Snippets,Decorator 装饰器,styled-jsx ,JavaScript 进阶问题列表,微前端接入跨域问题解决,Clickup-All-In-One 的项目管理应用工具
type
Post
weixin
authors
topic
Description
Link
 
🗞️ 文章推荐
Solid.js 就是我理想中的 React—— 其强大性能的一个关键来源是它直接与 DOM 交互(无虚拟 DOM)并执行“细粒度”的 DOM 更新。
 
 

⚒️ 开源与库

nodemon —— 23.7K ⭐️ 监视node.js应用程序中的任何更改,并自动重启服务器
notion image
notion image
fast-json-stringify —— 2.7K⭐️ 2x faster than JSON.stringify()
csso —— 3.5K⭐️ CSS压缩优化。
 
 

🍻 技术专题

持续关注CSS IN JS解决方案

CSS IN JS

styled-jsx —— 7K⭐️ Full CSS support for JSX without compromises
之前项目一直使用 styled-components,可以尝试一下 styled-jsx 。
uicolors.app —— Create Tailwind CSS color families
notion image
 
Tailwind CSS Docs Workflow for Alfred
notion image
 
mailwind —— 2.1K ⭐️ Use Tailwind CSS to design HTML emails.
tabby.sh —— 30.4K ⭐️ 现代命令行工具
notion image
 
 

🎉 经验教程

 
❤️ JavaScript 进阶问题列表 42.1K ⭐️ 从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试! 💪 🚀 每周都会在这个仓库下更新新的问题。

React

微前端接入跨域问题
1、跨域问题
nginx 配置允许对应域名
add_header 'Access-Control-Allow-Origin' *

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

if ($request_method = 'OPTIONS') {

	return 204;

}
........
 
2、micro-app 微前端接入路径问题 publicPath
如果自动补全失败,可以采用运行时publicPath方案解决。
这是由 webpack 提供的功能,会在运行时动态设置 webpack.publicPath,详细配置参考webpack文档 publicPath
设置方式
步骤1: 在子应用src目录下创建名称为 public-path.js 的文件,并添加如下内容
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量

if (window.__MICRO_APP_ENVIRONMENT__) {

// eslint-disable-next-line

__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__

}
步骤2: 在子应用入口文件的 `最顶部` 引入 `public-path.js`
// entry

import './public-path'
 
3、跨域请求携带cookie
在前端请求的时候设置 request 对象的属性 withCredentials: true;
什么是withCredentials
XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的
如果在发送来自其他域的XMLHttpRequest请求之前,未设置 withCredentials 为true,那么就不能为它自己的域设置cookie值。而通过设置 withCredentials 为true获得的第三方cookies,将会依旧享受同源策略,因此不能被通过 document.cookie 或者从头部相应请求的脚本等访问。
export const axiosInstance = axios.create({

	timeout: 20 * 1000,
	
	baseURL: '',
	
	headers: { 'X-Requested-With': 'XMLHttpRequest' },
	
	withCredentials: true, // 跨域请求携带cookie

});
跨域前后端设置
  • 前端请求时在 request 对象中配置 withCredentials: true;
  • 服务端在 response 的 header 中配置 Access-Control-Allow-Origin: http://xxx.jd.com;
  • 服务端在 response 的 header 中配置 Access-Control-Allow-Credentials", "true";
 

🌋 开发周边

hue.tools —— 配色生成工具
notion image
notion image
clickup.com —— 一个 All-In-One 的项目管理应用工具, Clickup是运行任务管理的有效工具之一,它与Google、Airbnb、Uber、Netflix和Nike等公司都有合作。它可以让用户轻松地为团队持续重新制定任务。作为一款出色的软件,您可以将Clickup视为Asana、Airtable和Monday之类软件的替代品。
ClickUp 由 Zeb Evans 于 2017 年创立,是一个 All-In-One 的项目管理应用。 和其他产品从单一功能切入不同,ClickUp 拥有强大的功能组合和易用性,包含文档、即时通讯、OKRs、销售自动化、图形设计、视频、白板等几乎所有东西。仅 4 年时间,它已获得数百万用户,并转化了 80 万付费团队, ARR 在过去 2 年翻了 17 倍,达到 7000 万美元。
2021 年 10 月,ClickUp 完成了 a16z 和 Tiger Global 共同领投的 4 亿美元 C 轮融资,估值达到 40 亿美元。 这是办公生产力领域目前金额最大的 C 轮融资。
“用户体验至上”是 ClickUp 的第一价值观, 它迭代的功能列表不由创始人决定,而是与用户共创 —— 将用户最迫切需要的功能开发出 MVP 版本就上线,随后根据社区反馈逐步迭代。
notion image
 
 

⭐️ 欢迎订阅投稿