#30

date
Aug 26, 2023
tags
summary
type
Post
status
Published
slug
series-30

订阅 Mobbin

之前看到 61 在 一条 Tweet 中赞叹到 Mobbin 对学习产品设计超有用。看到 DEX 群里有拼车,也尝试性的订阅一年看看

使用 Tailwind CSS 实现流星划过的效果

Meteors | Magic UI 看到的这个效果,打开开发者工具分析了一下实现原理后,把效果在 Tailwind CSS Playground 中实现了一遍

域名又要续费了

收到 NameSilo 的邮件提醒 tan61.life 域名要续费了,当初购买的时候才 $2 美刀。这次续费得花 $26.99 美元 🤑,在这个消费降级的年代真是一笔巨大的订阅开销呀!

SVG Pattern

https://magicuikit.com/components/grid-pattern
 
https://studio.tailwindui.com/
上面两种网格效果都是用 SVG 的 Pattern 特性完全成

又用回 iPhone 12 mini

notion image
就桌面这几个常用的应用养老,没用 iOS 的这一年多对 iOS 几个映像深刻的变化:
  • 第三方小组件越来越丰富了,新加的锁屏小组件也比较实用
  • 从勿扰模式演进到更为可定制化的专注模式
  • Stash 能平替 Surge 了
  • Safari 支持拓展插件

理解一下 Next.js 和 Server Component

看了一下 Josh 的这篇文章,感觉自己又行了 🤣,简单画了一个草图方便自己理清逻辑
notion image

Userscripts 给 Readwise Reader 换字体

Readwise Reader 的 iOS 版本很好用,但读一些英文文章和书籍需要用 Safari 浏览器的沉浸式翻译插件。在 Web 版本的 Readwise Reader 用 Userscripts 把字体换成喜欢的霞鹜文楷,另外再微调一些样式细节
notion image
notion image
/* ==UserStyle==
@name           readwise
@match          *://read.readwise.io/*
==/UserStyle== */

@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css");

:root {
	--reading-editable-font-family: "LXGW WenKai Screen", sans-serif !important;
}

:host > *,
:root {
	--content-gutter: var(--s1);
	--scrollbar-thickness: 0px;
	--sidebars-max-width: 320px;
}

#document-text-content img {
	object-fit: contain !important;
	height: auto !important;
}

@media (max-width: 1080px) {
    [class^="_sidebar"],
    #document-inbox > [class^="_root"],
    [class^="_actionsSidebar"],
    [class^="_hoverContainer"] {
        display: none;
    }
    .listRoot {
        padding: 0 0.8rem;
    }
}
readwise.user.css

Apple TV 升级 tvOS 17 后化身软路由

今天加班到家后第一件事就是更新 tvOS,装上 Surge 后就成为一台旁路由,即便是休眠的时候也能为其他设备提供翻墙网络。Apple TV 应该要涨价了吧📈,另外有几个印象深刻的功能
  • Apple TV 使用 iPhone 的摄像头打 FaceTime 视频通话
  • 用 iPhone 寻找 Apple TV 遥控器

ProxyMan 成为工作流中的一员

抓包体验很优秀,Map Local、Map Remote、脚本等功能在调试 API 时都很实用。还有很多贴心的小功能,比如 Automatic Setup 就能实现一键实现抓终端应用,比如 Node.js、Python 中发出的网络请求。
notion image

又开始玩世界迷雾

记录我上班的路
记录我上班的路

数据可视化

给电网干外包,大屏可视化项目中图表是页面上最主要的元素。这一周重度的使用 Echarts 过程中大量的翻阅它的配置项手册,有一些使用的感受。
  • 优点是繁重的工作都被屏蔽掉,只需简单的把配置项按文档中的说明传过去。然后一切都像魔法一般 🪄duang 的一下图表就绘制好了
  • 缺点是使用者能做出来的效果仅是 Echarts 所提供实现的子集,它不提供的功能完全没有办法(不过好在 Echarts 使用者众多,这么多年积累出的用户需求也足够大部分使用情况)
  • 另一缺点就像 Vue2 的选项式 API 一样。那就是很难通过组合的方式来组织代码,而 Vue3 推出的组合式 API 就很好的解决了这个问题,把同一个功能的代码放到一起,更有利于维护和阅读。
  • 在 React 社区中有一个 Airbnb 开源的叫 visx 的库,翻阅他的文档感觉它就很适合定制化需求很高的可视化场景,底层是使用 D3.js
  • 如果把画图表这件事比做画画,Echarts 就是有很多现成的素材拿过来改吧改吧就变成自己的、visx 就像有一些基础的图形我们拿过来调整再组合、D3.js 就像手里只有一根画笔

Photoshop 教程《最简单的魔法》

几年前在淘宝教育平台买过的 PS 教程一直都没去看,周末无聊就跟学习一下。
 

© Craig Hart 2021 - 2024