像视觉设计师一样思考

10 Sep 2019

探索尝试多个布局

不要单调地只使用居中布局，可以考虑左对齐，或添加一些视觉元素等

选用好字体

几个推荐字体：

Graphik
Proxima Nova
Acumin Pro
Cerebri Sans
GT America
Inter UI ::免费::
Encode Sans ::免费::
Work Sans ::免费::

仔细选择颜色

推荐直接在 tailwindcss 中选择考虑以品牌色作为主题色

圆角

更大的圆角 - 更休闲的设计

使用颜色和字重去制造对比（而不是使用大小）

使用颜色去制造深度

例如一个主输入框，可以使用很浅的灰作背景以制造与背景白的深度差
用背景色制造分割区域：白 / 浅灰 / 深灰 / 主题色之间轮换

在色彩背景中不使用灰色字

改用背景色的浅色

重叠元素，制造多层效果

不要使用过度放大的图标（font）

一般图标设计都缺乏放大后的细节，过度放大后效果不佳不要过度使用font-awesome
几个推荐图标库：

Streamline 3.0
Pixi
Heroicons
Heroicons Duo

控制形状和尺寸

使用深色模式

更浅的颜色代表前景。
所以使用深色模式时，border应该选用比背景色更深的颜色，而前景中的文字等选用浅色或白色。

避免颜色冲突

如在深色背景中使用圆框头像等元素时，可使用细白边框进行分隔

tailwindcss最佳实践

07 Sep 2019

Tailwind - 定位：设计中的API

构建代码时，优先考虑提取公共组件，而不是公共类

对粒度较小的组件，可以考虑使用自建类+@apply提取用到的类。
对粒度更大的组件（card、modal等），应使用自建组件（html+css）。
使用laravel-blade / vue-components等工具

可以考虑不使用sass等pre-processor，只使用PostCSS

@import "tailwindcss/base";
@import "./base.css";

@import "tailwindcss/components";
@import "./components.css";

@import "tailwindcss/utilities";
@import "./utilities.css";

多使用SVG（icon等）

更方便地使用大小、色彩、不规则形状等

勇敢地扩展框架

内联样式优于怪异的自定义类

如调整一个多边形的样式尺寸，其值不应该出现在设计系统内，此时使用内联样式更为妥当

使用Purgecss清理无用类

来源

Tailwind CSS Best Practice Patterns - Adam Wathan on Laracon US 2019

如何发布副项目

06 Sep 2019

寻找灵感

可以分享的技能
你希望解决的或者可以帮助解决的问题
能带来乐趣的爱好，并且想进一步发展

如何开始（要衡量什么）

需要什么技能
需要多少成本（经济上、精力上）
需要多少时间

激励

内在期待：想在什么时间发布项目
外在期待：可以寻求他人帮助，设置期待

计划

写下你在项目中想实现的所有功能、期望、需求
选择其中最重要的2-3项开始，分解成小目标
使用追踪工具（Trello，Asana等）

时间管理

限制投入时间，不要做得太多，冲淡实现项目的喜悦感，甚至产生厌恶

发布

不要犹豫，不要有负面的想法，不要完美主义。无论项目是多么小或者简单；只要有意义，就发布。

寻求帮助

衡量在后续发展中是否需要寻求他人的帮助。因为个人的技能是有限的。比如你是iOS工程师，那么当要开发安卓版本时，可以考虑是否需要在社区里寻求雇佣帮助。

全职工作 vs 副项目

平衡好两者关系。全职工作带来的稳定很重要。
认真思考是否需要将副项目转变成一个生意。

自我关照

副项目的好处就是没人会催促你，衡量你。所以照顾好自己的精力，随时都可以做个休息，放下一段时间。

什么时候结束

项目是否已经满足了你原初的需求？
你是否已经感到满意了？
可以考虑寻求继任维护者

source

Kaya Thomas - Launch Your Side Project

Vim 随笔

05 Sep 2019

Vim：专注editing
verb + noun：最佳实践
尽量用text objects，而不是motions
比如用iw，而不是w
使用relative line number（如何解决ex命令的操作问题？）
尽量不使用visual mode
因为一般会有准确的选择方式

一些常用操作

ap ，段落在vscode里是指两个空行之间
gd: 跳到定义处
gb = cmd+d: 添加选择当前词
af: 选择模式中扩选范围
gh: 显示当前光标下的提示

extensions

vim-surround

vim-surround
ds' : 删除包围的’’
cs”’ : 将”换成’

vim.commentary

vim-commentary
gcc: 注释当前行
gc10j: 注释10行
gcat: 注释一个标签

ReplaceWithRegister

ReplaceWithRegister
griw: 粘贴替代word
grr: 粘贴替代行

Vim-Indent-Object

vim-indent-object
<operator>ii: 对当前缩写等级操作
<operator>ai: 对当前+前一行操作
<operator>aI: 对当前+前后行操作

Vim-Sneak

vim-sneak
s<char><char>: 查找下一个双字母组合
S<char><char>: 查找上一个双字母组合

#blog

Older Newer

Riverrun46 Yet Another Personal Blog