exPM, now UI/UX, currently learning Frontend.

Welcome to my blog!

This is a platform for sharing knowledge about design, frontend, practical tools, daily learning and research.

Here you can find the latest trend information, technical articles, as well as experiences and skills shared by me and other industry experts.

I also provide the latest tutorials and practical tools to help you learn and improve your skills.

Welcome to share your thoughts, experiences and knowledge here, so that we can progress together!

2022 – 2023 跨年博客

2022 年 2022年其实我并没有“躺平”,也无法躺平。无论是工作还是生活,经常都是处于一种忙碌的状态。 疫情 被疫情反复折腾的一年,上半年经历了上海严峻的封控措施,一个人艰难的度过了 3 个月,每天只能通过视频和老婆孩子聊天,每天都期盼着什么时候能够解封回家。 解封后更折腾了,几乎每个星期的周五都会赶最后一班高铁回家,这导致我周五、周六、周日、周一必须连续做 4 天核酸。不是抱怨,只是为了能够回家和家人团聚,当然要做。 疫情 3 年,今年终于结束了。虽然结束了,但还是受到了很大的影响。每天出门依然需要佩戴口罩,企业的经济效益也持续低迷,经常还会担心家人再次受到病毒的伤害,直到现在仍然能感受到身边很多人还没有完全恢复。 家庭 虽然 2022 年过的很辛苦,但也是幸运的一年,庆幸自己和家人都平安的度过了这一年,身边的长辈还没有因为疫情离开的,挺好。 今年和老婆的感情是升温向上的,相处和睦,彼此关心照顾。而我们家,也即将迎来一位新的成员,我们的兔宝宝预计将于 2023 年 7 月和我们见面,充满了期待。 消费 2022年的消费支出有点高,虽然我没有记账的习惯和时间,但是在整理下面的支出时,能感觉到花费了不少,有一些确实是非必要的 😂 最近已经开始消费降级了,尤其是身为 2 个孩子的爸爸后,感觉压力更大了,得把这种压力转化为动力。 工作 今年忙了 7 个月 GOV 项目,最终竟然意外流标了。期间,甲方主要负责人一直在参与项目,从产品到设计到研发,几乎每个星期都一起开会讨论(疫情封控期间线上会议)。本以为可以顺利竞标的,毕竟甲方的负责人也是项目的核心人员,由他起草的项目方案书几百页,方案涉及的理论知识非常专业。可能中标的那家拿捏到了更大的 Leader 吧,很难说清楚。 一个 GOV 的项目,经费、后期的维护以及人脉资源,其实都非常大。丢了一块大蛋糕就算了,还浪费了我们很大的人力成本,老板为此也很生气,但没办法,这个项目以后也只能以其他方式继续运作卖给他方。 学习 年底这段时间,我经常督促自己抽时间学习 Javascript,期望能够通过学习提升自己的前端能力。2023 年的重点也将放在学习前端的知识上,现在的计划是先看完 Codecademy 上的一些免费练习课程,然后再接着学习三木的 Javascript 收费课程,接着开始设计一套页面并尝试开发出来。 躺平 今年其实有一处躺平的地方,在 “Crypto” 。今年几乎没有做什么操作,只是加了几次仓,目前还是处于亏损 70% - 80% 左右的状态。只能躺平,等待这轮熊市慢慢的过去。近期行情稍微有那么一点点的起色,也不知道是不是假象,反正依然坚持躺平的策略。 拍照 今年也曾在一个固定机位,拍摄了几十张美丽的晚霞。 按ESC关闭窗口 还给女儿拍了很多好玩的照片,节选几张: 2023 年 希望家人能够健康平安。 印象深刻的一些电影/电视 名称 类型 短评 短剧开始啦 电视剧 一部很感人的日剧,笑着笑着就哭了。看完这部剧,你会想谢谢身边的朋友,并更加珍惜友情。 风骚律师 电视剧 我最爱的美剧 Top1,剧情、台词、摄影镜头、服装都堪称教科书级别的。看完这部剧像是阔别了一位老友,怅然若失的感觉,一个时代的落幕了。 怪奇物语 电视剧 怀着激动的心情迎来了第四季,孩子们都已经长大成人了,这一季多线剧情杀疯了,越看越爽。 黑暗荣耀 电视剧 上周刚刚看完,一部剧情紧凑的爽剧,乔妹依然颜值在线,演技也很不错。 阿凡达·水之道 电影 其实看之前已经听说剧情一般,不过在大银幕极质的视听享受下,潘多拉星球真的美翻了,每一帧都值得品味。 坠落 电影 评分虽然不是很高,但是,恐高的我心惊胆战的看完了,生理上的感受过于刺激。 看了些设计书 名称 打分 进度 Practical-UI ★★★★★ 已读完 Refactoring UI ★★★★★ 进行中 The UI Design Manual ★★★★☆ 进行中 Masteruibook ★★★★☆ 已读完 Web Interface Handbook ★★★☆☆ 进行中 UI/UX Design Money - 未读 The Ultimate Guide to Web Design - 未读 今年陆陆续续买了不少设计书籍,这些书籍其实大同小异,大部分围绕设计和用户体验提供一些合理的建议。推荐看看 Practical-UI 和 Refactoring UI。...

Hugo增加相册功能

相册效果如下: 按ESC关闭窗口 Github仓库地址: https://github.com/liwenyip/hugo-easy-gallery 按教程操作后,需要注意在文章中引用时,按下面的类似格式 (需去掉下方所有的 \ ): {{\< load-photoswipe >}} {{\< gallery >}} {{\< figure link="docs/hugo-easy-gallery/image1.jpg" >}} {{\< figure link="docs/hugo-easy-gallery/image2.jpg" >}} {{\< figure link="docs/hugo-easy-gallery/image3.jpg" >}} {{\< /gallery >}} 并对 CSS 样式进行了微调,修改根目录 /assets/css/core/reset.css,加入以下代码: /* 相册弹窗中的样式调整 */ .gallery { overflow: hidden; margin: 0 auto !important; max-width: 790px !important; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: #000000 !important; } .pswp img { max-width: none; /* max-height: 85vh; */ } ....

Hugo 添加相册单页

参考:Hugo 添加相册页面::木木木木木,本文仅用于备份折腾的记录。 文件目录结构: 其中 photos.html代码如下,调整了部分CSS: {{- define "main" }} <header class="page-header"> <h1>{{ .Title }}</h1> </header> <style> .main {max-width: 1008px !important;} .page-photos{width:100% !important;overflow:hidden; position:relative;} .page-photo{width:24.9%;position: relative;visibility: hidden;} .page-photo.visible{visibility: visible;animation: fadeIn 2s;} .page-photo img{display: block;width:100%;border-radius:0;padding:0px;} .page-photo span.photo-title,.page-photo span.photo-time{background: rgba(0, 0, 0, 0.3);padding:0px 8px;font-size:0.8rem;color: #ffffffb8;} .page-photo span.photo-title{position:absolute;bottom:0px;left:0px;} .page-photo span.photo-time{position:absolute;top:0px;left:0px;font-size:0.8rem;} @media screen and (max-width: 1280px) { .page-photo{width:33.3%;} } @media screen and (max-width: 860px) { .page-photo{width:49.9%;} } @media (max-width: 683px){ .photo-time{display: none;} .page-photos{margin-top:4px;} } @keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } </style> <section> <div class="page-photos"> {{ range (sort (readDir "/static/photos/") "Name" "desc")}} {{ if (findRE "^[0-9 -]+(....

Hugo 和 PaperModX 的一些配置记录

增加空格之神 使用空格之神的浏览器插件很久了,真的是阅读强迫症患者的福音,空格之神项目地址 在 Hugo的 themes/PaperModX/layouts/_default/baseof.html 内增加以下代码: <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script> <script> pangu.spacingPage(); </script> 用完后感觉整个世界都清爽了 🤣 增加 Waline 评论 依照官网的教程,部署到 Vercel上,适配了 Hugo 的暗黑模式。 最新的配置文件在:UNPKG - @waline/client 在 themes/PaperModX/layouts/partials/comments.html 里添加以下代码: <head> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@waline/[email protected]/dist/waline.css"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@waline/[email protected]/dist/waline-meta.css"> </head> <body> <!-- ... --> <div id="waline"></div> <script type="module"> import { init } from 'https://unpkg.com/@waline/[email protected]/dist/waline.mjs'; init({ el: '#waline', lang: 'zh-CN', reaction: true, // 开启反应 serverURL: 'https://chat.wananaiko.design', dark: 'body.dark', copyright: false, // 设置 emoji 为贴吧与哔哩哔哩 emoji: [ '//cdn....

让 ITERM2 实时显示梯子状态

最近在 iterm2 里使用 curl、wget、brew、git 等命令时,经常会遇到相应很慢的情况,只能慢慢的等待,网上查了查资料,可以通过以下方法实现。 修改 ~/.zshrc,并加入以下内容: export proxy_host=127.0.0.1 export proxy_port=8888//自定义梯子端口 export switch_proxy=0 export cdc_in=0 function pp(){ if [ $switch_proxy = 0 ]; then export http_proxy="$proxy_host:$proxy_port" export https_proxy="$proxy_host:$proxy_port" export ftp_proxy="$proxy_host:$proxy_port" export GOPROXY="$proxy_host:$Proxy_port" switch_proxy=l echo -e "梯子模式" else unset http_proxy unset https_proxy unset ftp_proxy unset GOPROXY switch_proxy=0 echo -e "和谐模式" fi } 保存后退出,打开 iterm2,输入pp即可在梯子模式和和谐模式之间切换。 参考:让 iTerm2 实时显示梯子状态 ,还有另外两种方法。

常用的macOS软件整理

聊一聊 macOS 的一些软件使用心得,希望能够对其他人有所帮助。 提升效率 Setapp:参加了别人的家庭计划,属于团购车,年费 285。感觉还是很划算的,可以省去你单独买一些软件授权的费用,减少折腾。 BetterZip:解压工具。Setapp 内下载。 One Switch:菜单栏快捷工具,主要用来防止电脑休眠。Setapp 内下载。 Raycast:快捷启动工具,提供了一些多应用拓展支持,对开发比较友好。目前已经代替 utools 使用,类似的还有 Alfred,本地化不如 utools,不过历史剪切板、清理垃圾箱,快捷启动等常用功能已经基本满足使用了。 Mosaic:窗口管理工具。Setapp 内下载。 Dropzone:主要用来自动整理文件,大部分文件的存储都是保存在了 Download 目录下,有公司文件、素材文件、安装软件等等乱七八糟的,时间一长就会导致下载目录很混乱,用这个来移动整理文件很方便。Setapp 内下载。 PixelSnap 和 CleanShot X:前者用标尺来大概量个尺寸,后者是截图工具,有联动。Cleanshot X 真的好用,可以云端上传截图后自动获取链接,还支持 OCR 识别,图片编辑等。Setapp 内下载。 NetNewsWire:RSS 阅读器,我把它定义为效率工具,最大的痛点是可以订阅 Twitter 用户的内容,结合 RSSHub 使用有奇效,除了订阅常见的新闻资讯网站、博客,还能订阅 Bilibili、Telegram 频道等。作为我日常主要的信息输入入口之一,不需要频繁打开很多网站去查阅。已放弃 NetNewsWire 改用 Reeder,配合 iOS 端的 Reeder,更方便好用。 Popclip:划词扩展工具,可以划词快捷复制粘贴、打开链接、搜索、翻译等。Setapp 内下载。 ARC 浏览器:交互很酷又很实用的先进浏览器,我也将它定义为效率工具,通过 Space 空间划分了工作、生活、设计、摄影几个空间,每个空间浏览不同的页面。可以看看少数派网站上关于它的介绍。目前需要邀请注册,可联系我邀请,被邀请后需要等待一段时间才能收到官方邀请。 Canary Mail:邮箱管理工具,因为经常会用 Gmail 去注册一些网站,Gmail 也是我的主要邮箱,可以用起来一键打开大部分网站的退订邮件网页,方便退订邮件。Setapp 内下载。 MenubarX:菜单栏网页拓展,结合在线翻译网页,可以当成一个简单的菜单栏翻译工具,比如火山翻译和 DeepL 翻译。Setapp 内下载。 Rime 输入法:一直在用的输入法工具,定制化输入法,我自己是觉得很好用的。推荐结合 1 个设置和 1 个词库,一起使用。主要配置文件推荐这个:ssnhd 的配置,再结合这里的 Dict 词库文件。官网下载。...

How To Be Successful → 30 条

YC 前总裁、现 OpenAI CEO Sam Altman 的这篇标题简单粗暴的 How To Be Successful 推荐去看全文,虽然标题很鸡血,但其中的一些观点也很有启发性。 翻译整理:@南小北 1 另外,这篇文章写的也挺不错,可以扩展阅读2。 在一个几乎没有人采取真正长远眼光的世界里,市场会丰厚回报那些这样做的人。 自信心是非常强大的,我认识的最成功的人几乎相信自己到了错觉的地步。 自信必须与自我意识相平衡,我曾经讨厌任何形式的批评并积极避免,现在我总是试着假设它是真的,然后决定是否要采取行动。 找到简单、快速的方法,在现实世界中测试这些想法。 “我会失败很多次,但我会真正成功一次”,你必须给自己很多机会才能获得幸运。 我的另一个重要销售技巧是,在重要的时候亲自出现。 大多数人高估风险而低估回报,冒险很重要,因为不可能一直都是对的,你必须尝试很多事情,并随着了解的更多而迅速调整。 你可以跟随你的直觉,花时间做一些可能真的很有趣的事情。 尽可能长时间地保持廉价和灵活的生活是一种有效的方法,但显然需要权衡取舍。 做正确的事比工作好几个小时重要得多,大多数人将大部分时间浪费在无关紧要的事情上。 一旦你弄清楚了该做什么,就势不可挡地快速完成其中一小部分优先事项。 你必须弄清楚如何努力工作而不精疲力尽,几乎总能奏效的一个方法是,找到你喜欢花很多时间在一起的人一起做的工作。 事实上,工作耐力似乎是长期成功的最大因素之一。 如果你在一个重要问题上取得进展,就会有源源不断的人帮助你,让自己变得更有野心,不要害怕从事真正想从事的工作。 跟随你的好奇心,对你来说令人兴奋的事情,对其他人来说往往也会令人兴奋。 一个很大的秘密是,你可以以惊人的比例让世界屈服于你的意志 —— 大多数人甚至不去尝试,只是接受事情本来的样子。 人们拥有使事情发生的巨大能力,自我怀疑、过早放弃、不够努力的结合使大多数人无法发挥他们的潜力。 设法生存足够长的时间,好运将如愿以偿。 要任性,就必须乐观。这可通过实践提升,我从未见过一个非常成功的悲观者。 伟大的工作需要团队,建立一个有才华的网络(紧密或松散)是伟大事业的重要组成部分,建立网络的有效方法是尽可能多地帮助人们。 每个人在某件事情上都会比其他人做得更好,用你的长处定义自己,而不是你的弱点。 最简单的学习方法就是结识很多人,并记录谁给你留下了深刻印象,谁没有。请记住,不要高估经验或当前成就。 我小时候最大的误解是以为人们靠高薪致富,尽管有一些例外(例如艺人),但在福布斯榜单历史上,几乎没有人拿过薪水。 让事物快速增值的最佳方法是大规模生产人们想要的东西。 大多人靠外部驱动,他们做事是想给别人留下深刻印象,这很糟糕。 你会非常在意他人是否认为你在做正确的事,你会非常专注于跟上他人的脚步,这会阻止你做真正有趣的事。 我认识的最成功的人主要靠内部驱动,他们所做的事是为了给自己留下深刻印象,因为他们觉得有必要让世界发生一些事情。 这就是为何动机如此重要,这是我试图了解他人的第一件事,正确动机很难定义,但看到时你就会知道。 在你不痴迷的任何事情上都很难取得巨大成功。 机会分配如此不均,显然是令人难以置信的耻辱和浪费,但我亲眼目睹很多人一出生就面临糟糕筹码,却取得难以置信的成功,从而知道这是可能的。 How To Be Successful → 30 条 ↩︎ YC前掌门人Sam Altman:观察成千上万创业者后,关于如何获得非凡成就的13条思考 ↩︎

基于 Vercel 和 Fly.io 免费部署的应用

Hugo 部署到 Vercel 最近考虑把 Wordpress 博客换到 Hugo,一番折腾之后,通过 Github+Vercel 的方式实现了自动部署,还挺方便的,以后只需要在本地编写 Markdown 文件并发布到 Github 就可以了。以 macOS 下为例: 登陆 GitHub,新建一个 GitHub pages,名为 username.github.io。 使用 GitHub 登陆 Vercel,Import 刚才新建的 pages。 Vercel 里的 Project Name 随便写,Build & Development Settings 选择 Hugo,Hugo 的 Version 填写最新的版本号,其他默认,最后提交。 把 Github pages 仓库克隆到本地,比如我这里为:/Users/aiko/wananaiko.github.io,终端里打开该目录后。输入 Hugo server 验证是否可以正常启动。 如果你想要安装和本站一样的主题,可以参考这篇文章:Installation | Update | PaperModX 其他参考文章: hugo自动部署到vercel 如何使用 Hugo 进行个人博客搭建 将 Memos 作为单页添加到 Hugo 中 方法参考了文章 向Hugo中添加静态单页面Static-Single 建议将 config.toml 里的 EnableInstantClick设置为 false,避免 memos 内容偶尔出现不加载的情况。...