SEO 作为 Growth 团队的重要一环, 成了我现在对前端项目的主要优化方向. 除了一些常规内容(TDK, sitemap, robots.txt)的优化, 手头上的一个 SPA 项目也是工作重点: 这个项目信息多, 链接多, 是索引的重点. 那为什么不一开始就放弃 SPA 走 SSR? 原因是立项之初有此页面并不向公众开放, API 需要登录认证才可访问. 后续, API 随着策略调整放开了身份验证. 因此, SEO 的需求也就接踵而至. 对 SPA 的 SEO…
公司第一个(也是我的第一个)小程序今天上线了! 总得来讲, 整个开发过程是一个吃 💩 吃到习惯, 到最后觉得再吃一点也还可以接受, 大概就是斯德哥尔摩综合症吧. 在正式开始原生小程序开发之前, 还使用了好评较多的TaroJs来开发 KYC 的 H5(这 tm 的发明的这个词...)App. 尽管 Taro…
Talk is cheap, show me the GitHub 前言 听说到scala.js已经有一两年了吧。印象已经不深，只记得还在知乎上面劝别人不要用这个。当然，不是因为对scala本身有什么意见，而是这个东西剑走偏锋又脱离社区太远，必定不会是一个愉快的开发体验。 虽然这个偏负面的判断不是实践得来，却是合理甚至是必然的。 x = 。这个套在/这一对好基友上面就是相互放大。反看, 两个因数都是小于…
水一篇代码相关的 blog. 最近在做微信小程序, 设计稿上有一个省略号依次颜色变化组成的 loading 组件. 据说来自微信 UI 设计标准, 可是哪里都找不到, 只能自制了. 顺便吐槽一下小程序的设计和文档, 真是 tmd... 思路 效果主要就是省略号中各个点周期性交替闪烁. 闪烁可以有多种表现形式, 如颜色或者透明度变化, 这方面倒不是什么大问题. 如何支持任意个数的"点"是需要思考的地方. 经过一些实验, 打算采取通过子元素作为 stub…
最近在把前面做的几个视(wan)觉(piao)向的代码迁出到新的repo, 并添加了一些新的效果. 除了巩固了一下 Canvas API 和高中三角函数知识外, 还是学到了若干 Tricks. 其中一个是 Canvas 的尾迹效果, 或者说淡出(fade out)效果. example 如果独立思考的话, 首先想到的方法大概是: 缓存上一帧 Canvas 在渲染当前帧之前, 先把缓存帧加一个 alpha 值并绘制在 Canvas 上 继续当前帧所有元素的绘制 但这个方法的问题是, Canvas…
Talk is cheap, show me the GitHub 想尝试这个玩意很久了. 早先听一个独立游戏开发者讲自己心路历程, 提到了自己一直维护的消除类游戏并赚点小钱的故事. 就像一道上好的面试题一样, 切入起来很简单, 要多少有多少要多深有多深. 整个实现过程也没什么好说的, 都是可以预见情况. 设计和实现并无什么优劣之分, 毕竟只是最小实现, 50…
注: 本页的 demo 需要较新的浏览器(推荐 Chrome70+)才能正常执行 大概<妇联 4>上映的时候, google 也上线了一个无限手套的特效(点此链接再点屏幕右侧的手套). 搜索结果中的条目, 随机的一半机会随风消逝, 同时附加一些屏幕滚动以及搜索总数目的变化. 除了敬佩还是敬佩! 从那时就有了复刻一下这个效果的想法. 简单考察了一下, 控制台打出了的 log…
这是一道我经常在面试中会问的css题：如何实现Android平台上常见的，线条长度会变化的Loading组件： 这是一个我自己也答不出来的题, 问这个题的目的只是试探一下候选人是不是思维特别敏捷或者真的有深厚的css知识，而且也只当附加题助兴。如果真的思路正确甚至能完美答出，那真是遇见水平超出自己的人了。可惜并没有遇到，哪怕是思路靠边的也没有，看来此题并不是一个特别好的面试题。 第一次发现这个的纯css实现， 是在使用公司的。具体Inspect的细节已经不急不清楚了，只记得是根据边框dash…
4 月 1 号打开了 StackOverflow, 看见满屏幕中二元素还以为自己走错了板块. 后来才想到愚人节的事情. 除了独角兽和超 gay 配色, 还有个鼠标下雪的效果还行, 就想着做做看. 思路 目标区域监听事件, 获取鼠标位置. 图形: canvas 还是 DOM? 仔细看原实现, 雪花其实就是*号. 这样 DOM 会方便一些, 但 canvas 也不是不行. 动画: 动画部分由, 和 x, y…
在测试前端解析一个比较大的 Excel 文件时候, 发现我们的 button 的 spinner 卡住了. 印象中即使线程阻塞了, 有些 GPU 加速的东西依然应该有效. 怀疑又是某种 css in js 的弱智用法(没错, 我就是讨厌 css in js). 查看了一下元素发现是用了 svg 的animateTransform. 写法上面感觉跟 css 差不多都是一堆 + . 难道这样也会阻塞吗? 所以做了个测试 demo 结果是, 虽然长得像, 但 css animation…
本来是在网上闲逛看看现在有什么适配React Hooks的库, 发现有一个rxjs-hooks还行. 竟然是LeetCode开源的, 于是就点进去看看. 发现了一个hire的repo. 编写复杂的 TypeScript 类型 用 Webpack 实现 predictable long term cache 编写工程化的组件 用 RxJS 处理复杂的异步业务 3, 4做得多了没什么新鲜感, 只能感叹下现在前端招聘确实越来越注重工程化和实用性了, 没想到一个OG网站的前端题竟然没有一个是算法的.…
公司的iPhone交还了回去，换了安卓的新手机。安卓现在真的挺不错的，用了5年iOS换回来竟然没有任何不适，唯一的缺点是没有iOS的handover功能。即使是iOS也无法跟家里的台（you）式（xi）机做到共享一些东西。`对于极度讨厌在桌面上开微信的人来说，急切希望有个跨平台的剪切板。也找过一些软件，都挺麻烦的，本来挺简单一件事还要装这装那。所以呢，就自己做个基于web的剪贴板试试。 先放链接 https://xiuz.hu/clipboard Github…
今年6月份B站暗搓搓(反正我觉得是)上线了个"智能防挡弹幕". 已经记不得自己是什么时候发现的了, 只是觉得有点好玩, 但也仅此而已. 现在闲着无聊, 猜测一下其原理并验证一下. 如果更无聊的话, 再做个demo. What is 智能防挡弹幕 其实就是视频中的人形区域允许弹幕从其"底下"穿过, 做到防止关键♂部位被文字盖住的劳什子功能. 效果见Banner, 虽然雷总没啥可挡的. 多见于尬舞区视频, 我并没有看到很多, 真的. Brain Storm…