经验分享
Sticker-Heo表情发布:个人博客的基础表情系列
张洪Heo创作的通用基础表情 本表情仅免授权个人非盈利性质博客使用,禁止商业使用,请须知。 表情预览 GitHub该表情文件已发布在GitHub。源文件正在准备中,未来会发布在GitHub上,共同创作。 访问GitHub TwikooTwikoo可以在json文件中添加: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970"Heo": { "type": "image", "container": [ { "icon": "<img src=\"https://cdn.jsdelivr.net/gh/zhheo/Sticker-Heo@main/Sticker-100/再见.png\"> ...
自研工具
DelSpace2 for Mac - 文本处理工具|去空行 去空格 正则表达式替换 繁简 去重工具
本软件将会在近期使用SwiftUI重构,重构之后因为个人的编程能力提升,新重构的应用将会在界面和性能上都有一定的提升。目前重构版本正在编写。 DelSpace是一款简单的文本处理工具,它支持清除空行、空格、查看文本信息和正则表达式替换等功能。最新还增加了繁简转换、文本去重等实用功能。 平常去空行的需求很多,最初都是用的在线工具,后来觉得用Chrome切来切去太麻烦了还不如自己写一个,于是就有了这个。 说明 1.本软件全程使用无联网行为 2.本软件目前发行的全部版本免费提供 最新版下载地址立即下载 使用场景 更新日志v1.13 20200115新增每行文本中插入一个空行(保持每一行文本只有一个空行,原文本有多个空行时会只保留一个) v1.12 20200103立即下载 现在提取重复项时,重复三次及以上的内容只会在右侧显示一次而不是多次 往期更新日志 v1.11 20210103立即下载 支持提取重复项 v1.10 20200910旧版本立即下载修复了重要的BUG,建议所有用户更新 修复修复了删除空行和空格功能只能删除空行的问题优化了空格的算法,现在所有空白都算成空格优化了 ...
自研工具
Sketch 行高模拟 iOS/Android 原生默认行高插件 v2.0.2 | 下载
非常好用的CTLT更新啦!全新更新了2.0版本。本次版本增加了行高清除功能。 有小伙伴设计sketch文件的时候不喜欢sketch的行高功能,他们可能是做banner、做平面设计,有的时候并不需要行高。所以这个版本增加了清除字体行高功能! 如果你嫌弃它有很多功能或者你是其它倍图设计师不需要@1x的功能,我还单独推出了清除字体行高特别版~(特别版可以到本博客的特别版专属下载链接中下载) 下载清除行高专用版 支持批量清除、支持多选清除,不需要手动一个一个该了!从此跟杂乱的行高说拜拜~ AutoChangeTextLineHeightTool2.0 行高解决方案 注意本版本只针对**@1x设计师**使用,@2x及其他倍率设计师仅清除行高功能可用。 相关阅读为什么CTLT能够模拟真机行高? 下载须知 插件主要代码由@baobaoxi,apudou完成,youngxkk辅助一些bug;@zz379 York01完成安卓版本的尺寸计算和制作,zhhoo(也就是我)增加了1倍图版本并将前人的结晶融合了一下。本插件适用于单行文本,段落文本或多行文本会非常丑(系统自带行间距丑到哭),涉及到多行文 ...
优质推荐
Mac软件推荐:装机必备软件和实用工具合集之实用工具篇
从黑苹果到现在这台笔记本用macOS已经接近三年了。作为一个非常喜欢折腾的人来说,在这三年时间里软件也是换了又换,最后留下的其实都是我目前用起来最顺手的。这篇文章从我个人向出发去做一些软件推荐,大家都熟知的软件就不在这里写了。这里不提供下载地址,有兴趣的小伙伴可以自行去App Store、官网、下载网站上装。 因为应用数量非常的多,所以这里就根据软件的分类分成了多个文章,每章推荐10个左右的软件。干货满满。大多数人可能只用过其中不足5成的应用。 下载网站推荐先安利一波下载软件的网站吧,MacWk,里面有非常多的开源和免费软件可以下载,还有一些付费软件可以免费试用。网站设计非常好看,下载体验特别棒。强烈推荐。 Downie网络视频下载应用,复制视频网站地址,CMD+V粘贴到软件里就可以直接下载了。操作简单,windows几乎没同样体验的应用。 网易mumu最好用的android虚拟机,因为用的iOS手机,很多应用都只有安卓独占版本,所以网易mumu可以作为一个游戏机、安卓独占软件的虚拟机。 Snipastemac上最好用的截图应用之一。满足我截图复制到剪贴板并产生一份本地文件的需求 ...
经验分享
滚动条在不滚动时自动隐藏和滚动时自动显示,不占用网页布局
博客的滚动条有个问题,就是点搜索的时候网页会有一定的偏移。这个问题是由于滚动条占用了DOM,导致当不能滚动的情况下,滚动条不显示导致整体网页会鬼畜一下。其实只要一条css就能搞定。 修正滚动条位置通过overlay可以将滚动条独立出来。 123html { overflow-y: overlay;} 滚动条自动隐藏滚动条在需要显示的时候显示,在不滚动的时候完全可以隐藏起来。没有滚动条的视觉效果还是很不错的。 Demo本站采用该滚动条方案 引入引入js地址: 1https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/hidescrollbar/hidescrollbar.js 引入css地址: 1https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/hidescrollbar/hidescrollbar.css 参考文档Javascript监听滚动条 ...
闲聊杂谈
iPad手柄游戏推荐,好玩的支持手柄的iPad游戏
最近同学买了重生细胞,在玩的时候感觉下蹲跳还有一堆操作通过搓平板的方式操作起来太难又太累。没办法只好搞了一个手柄。操作体验确实好很多。翻了一堆游戏推荐,装了一堆游戏又卸载,现在pad上没剩下几款了。这个文章就推荐这几个游戏。 重生细胞因为这个游戏入坑的手柄,对于我这种没玩过主机游戏的人来说这个操作难度真的是灾难性的。记不住技能,基本上就是靠平砍和翻滚来打。对于喜欢玩主机游戏的人来说应该是非常耐玩的一款游戏。普通玩家容易买完吃灰。 App Store 上的“重生细胞” 狂野飙车9我非常喜欢这个游戏,首先他操作足够简单,只需要两个键就可以了。游戏中几乎所有的按键都可以通过手柄来完成。操作性还不错。画面表现很棒。非常值得用手柄玩的游戏,是不是来几把,不太会吃灰的游戏。 App Store 上的“狂野飙车9: 竞速传奇” 比特小队闯关地牢的玩法,操作感非常强,武器系统丰富。我非常喜欢它的电磁枪。总而言之也是不会吃灰的游戏。整体节奏快捷不拖沓,非常值得一玩。 App Store 上的“比特小队” 总结以上就是我目前比较喜欢的手柄游戏了,个人喜好。当然还有很多类似于「光遇」等优良的 ...
经验分享
Dribbble 作品更新:寻找音乐APP设计
通过分别提取每个音乐中特别吸引人的部分,让每个人通过这些音乐剪辑将他们最喜欢的音乐添加到播放列表中。当你不知道要听什么音乐时,这个程序会让你找到很多你可能会喜欢的音乐。 By extracting the particularly attractive parts of each music separately, let everyone add their favorite music to the playlist through these music clips. When you don’t know what music to listen to, this program will allow you to find a lot of music you might like for a while. 假期画的,做了俩小时快完成的时候sketch崩了,然后我心态也崩了,最后还是又熬了一个多小时完工。 Dribbble传送门
经验分享
痛苦面具视频表情包制作保姆级教程,B站痛苦面具
我们经常能在b站或者抖音等奇怪的地方看到一些生草的视频,比如痛苦面具是我们喜闻乐见的一个视频形式,在视频进行的时候突然静帧,然后将痛苦面具的内容替换到视频上实现局部运动的效果。 网上找到的教程没有图片说明,不知道因为什么原因连个好好的教程都没有,导致做起来的时候踩了不少坑。既然踩了这么多坑,干脆写一篇文章来说一下。 效果预览(实际输出为mp4) GoogleDrive使用谷歌硬盘创建一个first-order-motion-model文件夹。 然后访问资源文件(占用4.9GB)将所有文件选中后,右键点击复制。这些文件都会以副本的形式进入到你的硬盘。 如果访问不了还可以进入备用地址 右键单击重命名将(副本)删除,并拖拽到我们创建好的first-order-motion-model文件夹。 将自己需要的图片作为02.png覆盖掉网盘现有的02.png。 图片越接近04.mp4理论效果会越好。 Colab运行代码进入Colab项目按照顺序点击代码块前面的播放按钮。 运行第一个代码块时需要授权 谷歌网盘授权执行Mount your Google drive folder o ...
转载内容
滴滴是如何设计并落地一个插画系统?插画系统该如何构建?
本文为转载内容,来自公众号CDX创意设计中心推荐访问原文地址:立即访问转载内容须知 拥抱变化,是互联网人的座右铭。 小步迭代,快速响应,只为降低成本、提升效率。 一切都在变,对效率的追求不变。 插画,作为一种高效的视觉设计形式,自然备受互联网公司的青睐。 但是,“插画”真如我们想象的那么“高效”吗? 不,答案是否定的,未经整合形成系统的插画,会造成元件重复设计、无法最大程度提升公司的生产效率,并且会影响品牌一致性。我们要拥抱的高效插画,不仅是一个高效的单次产出,更是一个高效的生产系统。 围绕效率,滴滴CDX品牌设计将为大家介绍: 插画风格该如何选择? 插画系统的效率究竟有多高? 十几个部门该如何协作共建? 插画所服务的业务目标是什么?在滴滴,插画系统与图片、三维合成等视觉形式,共同构建出了一个综合的“画面视觉系统”,这三个系统所服务的传播目标侧重点有所不同。 1.传播目标是品牌品质,实景图⽚是最适合的画⾯形式 实景拍摄可以体现足够高的画面品质。但成本高,效率低,在时间紧或预算不足的项目中,难以执行。 2.传播目标是促销促活,氛围活跃的三维合成是更有效的画面形式 日常的促销类 ...
经验分享
视差卡片效果的分类页面,三维效果卡片制作
之前用的一直是图片画廊,感觉图片画廊的样式不是很好看,最近寻觅的时候发现了一个比较有趣的方形卡片的视差效果感觉很不错。所以就将原本的项目移植到了分类页面。整个移植是针对Hexo博客来的,不过应该是能通用更多的页面。 展示效果 Demo(目前采用非三维效果)立即访问 代码编辑source/categories/index.md,将type对应的值删掉。粘贴以下代码: 不兼容Safari兼容Safari但无三维效果123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/3dCard/in3d.css"><div id='lib ...
自研工具
快捷指令:将图片上传到7bu去不图床并将url复制到剪贴板
这算是短文向发图片迈进的一小步,一直以来不太清楚快捷指令是如何上传图片的,根据从冰老师那拿来的快捷指令掌握了发图片的技巧,但是这个快捷指令能力有限。所以改进了一下。 快捷指令特性 支持图片直接上传并将url复制到剪贴板 配合mac接力可实现手机端传图无需经过电脑自动复制链接 支持共享表单,通过图片app中的分享直接调用快捷指令 运行截图 指令地址使用手机打开此链接
经验分享
Sketch教程:已关联的素材使用方法,JSON素材,链接数据(Linked Data)
Sketch71版本支持了全新的链接数据功能,这个功能支持设计师自己编辑json文件,将多个文本/图片参数作为一个整体嵌入到设计稿中。相比过去单一的批量嵌入,使用json可以将多个素材的关系链接起来,作为一个整体。让设计稿更加真实。 通过链接数据,您可以使用以有意义的方式组合不同数据集的JSON文件,从而更轻松地对设计进行更实际的压力测试。 制作JSON文件JSON是常见的数据存储格式,被应用于各个场景。对于没有开发经验的设计师来说其实想要用这个功能也无需去研究JSON文件的格式等。在这里推荐没有开发经验的设计师使用Excel来完成这个工作。 首先按照下面的格式来填写内容。第一行填写类型,第二行之后添加对应的数据。 然后打开Excel转Json网站,将填写好的内容粘贴到工具中。 制作数据将JSON文件和所需要的图片文件放到一个文件夹中。 添加数据进入首选项->素材中点击添加素材,选择我们的json文件。 创建组件通过组件我们能够更好的管理我们的展示效果。我们根据我们在表格中制定的类型来作为图层名创建图层,然后再创建组件。 注意:当使用图片数据时,如果使用矩形来填充,需 ...
经验分享
如何用Sketch制作斜体文字,不支持斜体的字体如何做斜体
在调文字的时候想要给文本增加一个斜体效果,但是选了半天的字体原生并不支持斜体。那么这个时候一般就会用变换工具了。变换工具和photoshop的自由变换工具很像,但是缺少了一点点自由。大致能调整的就是8个点。 将文本轮廓化因为变换工具无法针对文本图层和组件进行操作,所以我们需要将文字图层转换为路径。 选中图层后选择轮廓化。 使用变换工具在菜单或者工具栏找到变换工具,打开变换控制点。 使用上下两个倾斜控制点,然后左右拖动 大功告成如果字体本身带斜体,可以通过更改字形为Italic更换为斜体。
经验分享
基于Hexo的Butterfly下自定义指定首页文章卡片高度
列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措,例如文章置顶。但是文章置顶多了就会看不见新文章,置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的,丰富层次。 这个文章的核心思路就是给文章的markdown文件里添加一个large参数,当large=true时,则文章会添加一个class。然后针对这个class进行css的调整。让我们开始吧。 样式预览 Demo 修改源文件编辑themes/butterfly/layout/includes/mixins/post-ui.pug 12345mixin postUI(posts) each article , index in page.posts.data if article.hide !== true- .recent-post-item+ .recent-post-item(class= (article.large === true) ? 'post-card-large' : ' ...
经验分享
Mac下使用访达或者聚焦搜索指定类型文件
我们都知道在Windows下可以通过*.txt这种格式来搜索指定格式的文件,那么在mac上可以怎样搜索指定类型的文件呢? mac上搜索指定类型文件 在搜索中输入种类:文件类型即可。例如以下例子都可以使用。 1234种类:sketch种类:sketch种类:文件夹种类:音频 使用聚焦搜索指定类型文件相同的功能也支持在聚焦中使用 要在 Mac 上显示某个文件的位置,请从结果列表中选取这个文件,然后按住 Command。预览窗口的底部将显示这个文件的位置。要打开这个文件的位置,请按下 Command-R。要在 Finder 中查看来自 Mac 的所有结果,请滚动到结果列表的底部,然后连按“在访达中全部显示”。
经验分享
Js如何针对不同城市的访客提供不同的服务,屏蔽指定地区访问
有些时候我们需要对不同地域的用户做一些限制,比如在北京的用户不能查看文章正文等。如何判断用户所在的地域并针对不同的地域做出限制呢?这里利用sohu的地域判断API。这篇文章用Butterfly的评论功能做地域限制为例子。 本文以pug代码为例,html代码在文章后面。 城市获取1234script(language='javascript', type='text/javascript', src='//pv.sohu.com/cityjson')script(language='javascript', type='text/javascript'). var city = returnCitySN['cname']; //- console.log(city) city变量则为城市名。例如北京市。然后可以通过city变量内容字符串是否包含北京即可。 判断 ...
经验分享
SwiftUI关闭presentationMode窗口,全屏弹窗怎么做
presentationMode在iOS算是一个特色了,非常方便的全屏弹窗,可以下拉关闭窗口。弹出的动画非常流畅。这里来记录一下如何写一个presentationMode弹窗和关闭presentationMode的窗口。 样式presentationMode弹窗非常常见,在iOS几乎无处不在。 示例 示例源代码 创建presentationMode例如要打开EditingView(),则需要有一个@State的变量,用来监听弹窗时机。 1@State var showEditing = false 关联变量并设定弹窗内容在任意层Stack后面添加.sheet 1234.sheet(isPresented: $showEditing, content: { EditingView() .environmentObject(userData) }) 然后利用Button或者是onTapGesture改变变 ...
经验分享
乐理笔记:找音位置、黑键、五线谱、音程
找音在钢琴上找哆音位置 钢琴上的黑键表示方法 五线谱五线谱名称 五线谱上哆音位置 五线谱上黑键表示 音程音程度数计算 八个标准音程 音程计算 计算键数与标准音程键数的差别 参考乐球网