第11话

date
Jul 4, 2022
tags
summary
type
Post
status
Published
slug
week-11

学习屏幕选购时的知识

现在用的是 戴尔 S2716DG，它是一块 2K 144Hz 的 TN 屏幕的显示器，打 FPS 游戏是足够好用的。但平常写代码、看网页就会感觉分辨率不够，色彩也看上去灰蒙蒙的。
所以就想挑选一台合适自己工作用的显示器。但显示器的各种参数太多，在不理解它们的情况下很难做出准确的判断。在周末花了半天时间看了硬件茶谈的系列视频。把主要的参数指标，比如色域、色准、色深、OLDE 和 LCD 面板… 都有了更进一步的理解。
目前看中了 飞利浦 27E1N8900 这款
【硬件科普】全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普
OLED屏幕，这个名词想必各位并不陌生了，如果你是最近购买过手机的，你应该发现了目前大部分手机都在使用OLED屏幕，为什么手机厂商都争先恐后的推广OLED屏幕，OLED屏幕相较于传统的LCD屏幕来讲有什么优势和劣势，他的工作原理是什么，这期视频我们就带你详细了解OLED屏幕的那些事。
【硬件科普】全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普
https://www.youtube.com/watch?v=gZriQjtABCk
【硬件科普】全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普
小雪人评测官网 | 显示设备专业评测 | 天梯榜 | 面板型号查询
https://xxrsm.com/
小雪人评测官网 | 显示设备专业评测 | 天梯榜 | 面板型号查询
EIZO monitors for offices, photos & design, medicine, gaming and industry
Assess the uniformity of the image using various grayscales. The brightness should be equally distributed across the entire image, and the image shouldn't have any colorful areas. Check the extent to which your monitor can display similar colors while keeping them differentiable. You can create two color patches to do so.
EIZO monitors for offices, photos & design, medicine, gaming and industry
https://www.eizo.be/monitor-test/
EIZO monitors for offices, photos & design, medicine, gaming and industry
TestUFO: Framerates-versus
AREA 187 - SECRET MOTION TEST INSTALLATION ATTENTION - You have reached a top secret beta test UFO research facility. Use of alien abduction force is authorized. Restricted area. It is unlawful to enter this area without permission from the UFO captain.
TestUFO: Framerates-versus
https://www.testufo.com/framerates-versus#photo=lol-bg.jpg&pps=1080&framepacingerror=0.1&direction=rtl&framerate=60&compare=2&showfps=1
TestUFO: Framerates-versus

Hoppscotch

Postman 的替代工具，在日常工作中最常用的场景是把 Curl 格式接口导入进去做接口调试工作。因为都是临时的，所以偏好这种网页版的工具用完即走。有更复杂需求的时候会用到 Paw

试用 3 个月的 Inoreader Pro

notion image
重点评估 Pro 版本中的几个功能：
  • 订阅未提供 RSS 的网站，定时爬取网站来生成 RSS
  • Newsletter to RSS

购买 Bob Pro

notion image

小爱音箱出乎意料的好用

notion image
notion image
notion image
由于目前家中没有的任何智能家居电器。但小爱音箱另辟蹊径的方式，通过模拟遥控器的红外光信号来控制传统家电。现实方式可能没有 Zigbee 等智能家居方案来得 Fancy，但它足够的实用。
这套方案很好的解决了当下普通家庭中传统家电设备接入智能家居系统的问题。100 块钱就能实现喊一句：“小爱同学开空调、开电视”的需求，谁会不爱呢？（对了，本来的买小爱音箱的目的是给孩子听儿歌用的 😂）

Git Message 格式和 Changelog

看到一些网站的的 Changelog 有感，对比自己日常的发版流程，发现自己以前发版都没有修改版本号 🤣，强迫症有点发作了，所以决定 “抄” 一波。
React ChangeLog
React ChangeLog
先安装 conventional-changelog-cli：
npm install -g conventional-changelog-cli
之后的工作流：
  • 提交更改，输入规范信息 fix: xxxx (issuesID)
  • 修改 package.json 的版本号
  • 生成 CHANGELOG.md 文件，conventional-changelog -p angular -i CHANGELOG.md -s
  • 提交 Push

代码优先与产品优先

Code-first vs. Product-first
notion image
一般来说有两种侧重点的程序员分别是 “代码优先” 和 “产品优先”，前者痴迷于代码的架构、使用什么工具、库和语言，使用最新的语言功能、删除死代码时会很兴奋。后者当然关心这些东西，但是只是作为达到目的的一种手段，代码是脚手架、支撑、建筑物中的钢梁，而不是最终产品，对他们来说更重要的是该产品实际上解决了潜在问题的程度。

如何构建好软件 - 流水沉微

  • 软件所蕴含的主要价值不是为了构建软件而编写的代码，而是构建软件的开发者所积累下的知识
  • 在软件开发过程中，绝大部分想法都是糟糕的，但这不是任何人的错。这是因为可能的想法实在是太多了以至于任何一个想法都可能没办法正常工作，哪怕它是经过仔细筛选和认真思考之后得到的。为了推动开发过程的前进，你需要从一堆糟糕的想法开始，去其糟粕，培育其中最可能有价值的。Apple，视觉设计的典范，会遍历数百个原型才能得到最终的产品。最终的产品可能会看似很简单，但是其背后会有错综复杂的知识来保证它是最合适的那个方案
  • 这就是为什么依靠外包来维护你的核心软件开发是非常困难的。你可以通过外包团队获得一个可以运行的系统和它的代码，但是属于无价之宝的那些构建软件的过程和构建过程中做过的决策、都不在你的组织里了。
  • 优秀的工程师的生产力比平庸的工程师高不止10倍，这不是因为优秀的工程师敲键盘的速度快10倍，而是因为他们作出的好选择能节省10倍的工作量
  • 构建软件不是为了避免失败和犯错，而是战略性地快速试错，以尽快获取到足够你构建好软件所需的信息

显示屏 16:9 和 21:9

办公室显示屏太垃圾了，想买一个显示屏拿去公司，分配一下工作时 App 窗口大小和视野范围 🤣
notion image

Ant.Design 的延伸品 ahooks 和 ProComponents

Ant.Design 脚手架起的后台项目，总会有些地方没有封装，会有很多重复代码，不尽人意，这个时候可以用它们封装好的一些库，🤣 不用写太多代码，爽到了

ProComponents

经常用到的是 ProTable 和 ProFormText，ProTable 的好处是它自带搜索表单、刷新、表格调整等小组件，还有一些 API 如 formRef 可以直接刷新、提交参数，valueType 针对数字状态 1、2、3 直接映射文案。
notion image
ProForm 则是经常用于添加、修改页面/Modal，配合 ProFormFields 也精简了代码，比如表单添加一个字段的校验码需要写 Form.Item 和 Input，而 ProFormFields 只需要直接写 ProFormText 就行了：
const ProFormText = (props) => {
  return (
    <ProForm.Item {...props}>
      <Input placeholder={props.placeholder} {...props.fieldProps} />
    </ProForm.Item>
  );
};
ProFormSelect 还有 valueEnum 可以和 Table 里面 valueType 共用，总之就是有很多语法糖，可以不用多写一下代码

ahooks

阿里家的一些工具 hooks，功能、特性可能没有其他库那么丰富，但是有些工具函数比较兼容 Antd 组件库，毕竟都是从 Antd 大量的业务提炼出来的 useRequest： 请求函数，可以少写请求的 loading、refresh，还有防抖、节流、轮询等 API
const books = useRequest(async () => getBooks(), {
	refreshDeps: [bookID]
})
useAntdTable： 普通的 Antd Table 组件请求封装，封装接收分页、过滤、排序等参数，方便接口的入参，还有搜索、重置等
const {
  tableProps: {
    dataSource: any[];
    loading: boolean;
    onChange: (
      pagination: any,
      filters?: any,
      sorter?: any,
    ) => void;
    pagination: {
      current: number;
      pageSize: number;
      total: number;
    }
  },

  search: {
    type: 'simple' | 'advance';
    changeType: () => void;
    submit: () => void;
    reset: () => void;
  }
} = useAntdTable(({ current: number; pageSize: number, filter?: any, sorter?: any }) => Promise);
useToggle： 用于在两个状态值间切换的 Hook
const [state, { toggle, set, setLeft, setRight }] = useToggle('dark', 'light');

toggle(); // light
toggle(); // dark
useSetState： 赋值 Object 不用剩余符号操作了
// old
const [params, setParmas] = useState({ username: 'abc', email: '' })
setParams({ ...params, email: 'hello@me.com' })
// params => { username: 'abc', email: 'hello@me.com' }

// new
const [params2, setParams2] = useSetState({ username: 'abc', email: '' });
setParams2({ email: 'hello@me.com' })
// params2 => { username: '', email: 'hello@me.com' }
还有其他的，就不复制了

时间选择器 “快捷时间范围” 多语言版

项目全部的时间选择器都需要加上 “快捷时间范围” 这个功能，所以需要抽离封装，但是遇到了数据格式和多语言冲突问题，ranges 对象里的 key 必须要根据当前的多语言显示对于的翻译文案
notion image
// 官方例子
<RangePicker
	ranges={{
		'Today': [moment(), moment()],
		'This Month': [moment(), moment()],
	}}
/>
最后的解决方案：
/**
 * 时间选择器 - 获取快捷时间范围
 * @param {*} formatMessage
 * @returns {Object}
 */
export const getDateRanges = (formatMessage) => {
  const languageKeys = [
    { id: 'global.Today', value: [moment(), moment()] },
    {
      id: 'global.Yesterday',
      value: [moment().startOf('day').subtract(1, 'day'), moment().endOf('day').subtract(1, 'day')],
    },
    { id: 'global.Last 7 Days', value: [moment().startOf('day').subtract(7, 'day'), moment()] },
    { id: 'global.Last 14 Days', value: [moment().startOf('day').subtract(14, 'day'), moment()] },
    { id: 'global.Last 30 Days', value: [moment().startOf('day').subtract(30, 'day'), moment()] },
    { id: 'global.Last 60 Days', value: [moment().startOf('day').subtract(60, 'day'), moment()] },
    { id: 'global.Last 180 Days', value: [moment().startOf('day').subtract(180, 'day'), moment()] },
  ];

  return languageKeys.reduce((obs, cur) => {
    return { ...obs, [formatMessage?.({ id: cur?.id })]: cur?.value };
  }, {});
};

// 使用
import { useIntl } from 'umi';
import { getDateRanges } from '@/utils';
/*...*/
const intl = useIntl();
const ranges = React.useMemo(() => {
	return getDateRanges(intl?.formatMessage);
}, [intl]);
/*...*/
<RangePicker ranges={ranges} />
更新为 hooks
import React from 'react';
import { useDateRanges } from '@/hooks';

const HomePage = () => {
  // 获取日期范围，同时支持多语言切换
  const dateRanges = useDateRanges()

  return <RangePick ranges={dateRanges}>;
};

// src/hooks/useDateRanges.js
import * as React from 'react';
import { useIntl } from 'umi';
import moment from 'moment';

const useDateRanges = () => {
  const intl = useIntl();

  const dateRanges = React.useMemo(() => {
    const languageKeys = [
      { id: 'global.Today', value: [moment(), moment()] },
      {
        id: 'global.Yesterday',
        value: [moment().startOf('day').subtract(1, 'day'), moment().endOf('day').subtract(1, 'day')],
      },
      { id: 'global.Last 7 Days', value: [moment().startOf('day').subtract(7, 'day'), moment()] },
      { id: 'global.Last 14 Days', value: [moment().startOf('day').subtract(14, 'day'), moment()] },
      { id: 'global.Last 30 Days', value: [moment().startOf('day').subtract(30, 'day'), moment()] },
      { id: 'global.Last 60 Days', value: [moment().startOf('day').subtract(60, 'day'), moment()] },
      { id: 'global.Last 180 Days', value: [moment().startOf('day').subtract(180, 'day'), moment()] },
    ];

    return languageKeys.reduce((obs, cur) => {
      return { ...obs, [intl.formatMessage?.({ id: cur?.id })]: cur?.value };
    }, {});
  }, [intl])

  return dateRanges;
}

export default useDateRanges;

刷剧 📺

正义的算法：还挺搞笑的 🤣 你见过凌晨 3半点的深圳吗？感想 - 金融和法律还是有很强的依赖的 (法外狂徒张三贼有钱 🤣)

© Craig Hart 2021 - 2024