article_image

来自 UNTAG 团队的第 43 期会员内容。会员内容会在每周一更新。

本期内容目录:

  • iPad 能不能做你的主设备?一个数据告诉你答案(肯定对)
  • 本周关注:新工具 Kombai UI,从 Figma 设计图生成可用的代码
  • 如何为 AirDrop 添加快捷键——真正的那种
  • 复制网页文字的另一种轻量级思路(以知乎为例)
  • 用 Drag & Drop 治治那些不允许在新窗口打开的国产网站
  • Photomator 与 Pixelmator Pro 的 AI 功能
  • Snailed It 将接管 Toolbox Pro 开发工作
  • 找到 iOS 最近建议的密码
  • Google Art Palette:通过配色搜索艺术品的在线工具

iPad 能不能做你的主设备?一个数据告诉你答案(肯定对)

作者:@Hum

3202 年了,没想到还能看到这个问题吧?我也没想到。

先是在 RSS 看到 Jason Snell 发的 Giving up the iPad-only travel dream,随后看到 John Gruber 的 linkblog 里特矫情地说:

When I’m packing, I generally wind up tossing the iPad in my bag, thinking I’ll miss it if I don’t. But when I do just leave the iPad at home, I don’t miss it. It’s confounding, though, because I’m going on a trip next week and I bet I’ll take my damn iPad. 在收拾行李时,我通常会把 iPad 放进包里,因为我觉得如果不这样做就会错过它。但当我把 iPad 留在家里时,我并不会想念它。不过,这让我很困惑,因为我下周就要去旅行了,我打赌我会带上我那该死的 iPad。

尴尬,实在尴尬。

简单来说,事情是这样。

有一些以 Mac 为主设备的人永远怀揣着一颗用 iPad 来替代 Mac 的心。他们因为一些 iPad 擅长的事而喜欢 iPad,但只要做正事却会毫不疑虑本能地用 Mac。而在这个时候,他乐于面对挑战的小心灵会问他一个问题——“你现在做的这个事,iPad 不能做吗?”

他陷入了短暂的思考。随后决定自己不能轻易低头,毕竟熟悉苹果生态并拥有一颗乐于挑战的心。花了数个小时甚至几天,在 iPad 上勉强完成了那件早就可以在 Mac 上完成得很好的事。甚感愉快,可能作文以记之。

然而下一次,有正事的时候,他把在 iPad 上辛苦搭建的流程一抛脑后,自然而然地摸向 Mac 去了。这种来回多了,就会写出来开头那些文章。

其实自己是不是用 iPad 做主设备的那个人,用“屏幕时间”这个系统自带的统计功能就能给出答案。

  • Mac 和 iPad 上的屏幕时间都打开。
  • 看看一天用谁多。
  • 数据记录时间越久,可信度越高。

请用不能撒谎的数据,告诉自己最真实的答案。谁跟你说他 iPad Only,先让他打开这俩设备的屏幕时间给你看看。

本周关注:新工具 Kombai UI,从 Figma 设计图生成可用的代码

作者:@沨沄极客

在开发工作中,设计人员与开发人员之间经常需要通过原型图交流,开发人员需要理解设计人员的设计思路并进行代码开发。

在 UNTAG 网站的开发初期,Hum 就经常跟我逐一过网站的开发细节,经常会发现一些原型图与实际不符的情况。Hum 表示很不理解:“为什么 Figma 中已经提供了 CSS,你开发的结果还是与设计图有不小的差别?”

实际上,Figma 内置的工具提供的 CSS 很难真正帮到开发人员。

从开发者的角度来看,Figma 提供的 CSS 是静态固定的,而开发需要找到组件中的共性并提炼成组件。

举个最简单的例子,原型图中的两个按钮,一个叫“立即登录”一个叫“注册”,就可能会因为内容的长短让按钮的宽度产生变化。这种情况如果还用 Figma 中提供的 CSS,效果只能是大相径庭。

就在 8 月 23 日,Product Hunt 上出现了一款能够通过 Figma 设计图生成代码的工具:Kombai UI,并在当日登顶,至今已经获得了 1800 个 UPVOTE。

🔗 Kombai 官网

Kombai 需要注册账号,然后用 Figma 账号进行授权。

Kombai 支持将 Figma 中的单一组件的链接复制进去,它就能为你生成相应的代码。我把 UNTAG 的原型图放进去,很快就得出了结果。

在下面这张图中,左侧是 Figma 的原型图,下方是 Kombai 识别后编写的代码,右侧则是代码渲染的结果。

客观地讲,我们可以看到生成的结果在宽度的处理上稍有问题,但基本实现了大致的代码框架,生成的代码效果也非常不错。

令我感到惊讶的是,它不仅仅可以生成 HTML + CSS 代码,还可以生成 React 代码,并以组件化的形式,给出每个组件的代码。

Figma 中的图层命名并不规范,但在生成的代码中,却识别出了 BlogPost、PopurlarArticles 这样的组件名和合适的 class 名称。

Kombai 还能一定程度上找出组件之间的共性,比如目录中的内容是相似的,它就用了同一个 class 名称,给出一套适用于目录的 CSS 代码。

在惊讶之后,我也进行了更多的尝试,发现了一些 Kombai 的弊端。比如生成的效果仍然很依赖于 Figma 设计稿的组件化程度,越是优质的设计稿,越容易还原出更真实的效果。如果设计稿中没有遵循 Figma 的最佳实践,可能就会出现与设计稿较大的不同,导致代码也还需要大改才能真正用上。

比如官方就把自家的登录界面作为一个示例展示,可以看到基本做到了 1:1 还原,组件化程度也非常高,代码也很简洁。如果所有的设计稿都能达到这个质量,我认为 Kombai 产出的已经足以节省很大一部分 HTML 和 CSS 部分的开发工作了。

目前 Kombai 还处于研究预览阶段,可供个人开发者免费试用,感兴趣的可以多多尝试。

如何为 AirDrop 添加快捷键——真正的那种

作者:@Minja

AirDrop 发布至今已经有 11 年,然而,如此常用的一个功能,居然没有快捷键。当然,网上有一些生产力博主不厌其烦地炒冷饭,但那只是打开 AirDrop 窗口的快捷键,打开之后仍然需要手动选择待发送的文件,甚至还不如去右键上下文菜单中摸索。

但显然有办法快速调出文件发送窗口,而不仅仅是 AirDrop 窗口,毕竟,LaunchBar 早好几年就有“Send via AirDrop”的内置动作,只需选中文件再运行该 LaunchBar 动作即可。但想用原生软件调出这个窗口,却非常麻烦,传统方法往往需要 AppleScript 脚本,且高度依赖 GUI Scripting,容易失效。

十多年的老问题,最后还是交到了 Shortcuts 这里,需要做一个 Shortcuts 模块来解决。我在第二十七期会员栏目中介绍了一个 AirDrop 动作,好在 iOS 中跳起镣铐之舞,未料 macOS 也需要类似的动作,将 Shortcuts 的输入交给 AirDrop:Shortcuts for macOS 中的 AirDrop 模块可以打开文件传输窗口,而非 AirDrop 在 Finder 中的鸡肋界面;而 Shortcuts 动作本身又可以绑定快捷键,于是 AirDrop 快捷键的历史问题就解决了。

Shortcuts 动作非常简单,根据上图仿制即可,不再提供下载链接。

复制网页文字的另一种轻量级思路(以知乎为例)

作者:@Minja

在 2023 年,仍然有大批网页设置了重重藩篱,限制或禁止访客复制文本。这恐怕意义不大,从开启阅读模式到检查网页源代码,有无数种方法可以绕开限制,最不济,还可以用 OCR 提取屏幕上的文本。

我偶尔会在知乎上看到几条优质回答,想从中复制一些文本,结果发现要么带上一串来源信息小尾巴,要么干脆不给复制——这纯属防君子不防小人,最后搞得越守规矩的人越难受。对于这种近乎于恶心人而没有实际防御效果的限制,传统方法可能有些尴尬,扒源代码未免大动干戈,阅读模式只能显示一条回答——很可能不是我要的那一条,至于浏览器插件,恕我古板,我怕中毒,从来不装。

其实,还有一种专属于 macOS 的超轻量方法:拖曳文本。在 macOS 中,拖曳是基本操作,从文件到文本都可以拖到别处,如果目标是网页上的文字,拖曳效果则相当于复制。拖曳下来的文本是带样式的,如果刚好需要保留样式,此方法将胜于其他方案;你也可以在拖曳后再复制、并用 ⇧Shift-⌥Option-⌘Command-V 粘贴,以获得纯文本版。

不需要任何第三方工具,不需要学习 HTML 知识,只是一个系统自带的动作,很多问题就能解决。

用 Drag & Drop 治治那些不允许在新窗口打开的国产网站

作者:@Minja

不知从何时开始,国内很多网站不再支持在后台或新窗口中打开网页,你只能在一个页面中前进、后退,分明在用浏览器,却活像被锁死在客户端中,无法享受多标签页浏览。不得不佩服设计师,他们不能强制每个人安装客户端,于是就把网页版做得和客户端一样稀烂,如果不是更烂的话。这就是笛卡尔常说的计策,一个瞎子想打到正常人,只能把人家拉到昏暗的地窖里。*

我不怎么用手机,没有安装任何敏感的网络强化类软件,因而偶尔想搜点东西,不得不用百度——什么?!你说 Bing?!那玩意儿的国内版已经不是太监了,根本就是高危截瘫啊——于是难免被前述设计恶心到。

但这些设计师(或产品经理)毕竟只是心怀鬼胎,不是也没资格十恶不赦,一个再简单不过的动作就破解了他们的阴招:Drag & Drop(拖曳操作)。Drag & Drop 是 iOS 的一个特性,用于拖曳文本、图像、文件或网页链接等对象,在 iPadOS 上用得较多,但 iPhone 其实也能用。一只手指长按链接,即可将其拖出,从而摆脱网页的控制;继续用另一指手指点击其他链接,可以持续收集,以便稍后批量在新窗口打开。

事实上,许多小肚鸡肠的伎俩,往往在原生功能面前不堪一击。本期栏目中的《复制网页文字的另一种轻量级思路(以知乎为例)》一文,便借文本拖曳提取网上上禁止复制的文字;我在别处也写过很多原生功能的妙用,例如《如何在 iOS 上免费后台播放网页视频(以 YouTube 和 Bilibili 为例)》一文,用 Picture in Picture(画中画)功能免费实现网页视频后台播放——自古以来就天经地义!

话说回来,多数厂商把原本好端端的功能锁起来,其实只是想多赚点钱,并非真的有安全、隐私方面的考量,因此平台原

机器阅读:已开放本文前 70% 的正文,剩余内容会员可见。 标准阅读页 · Markdown