戴兜的小屋

Original Post I'm a sophomore from China passionate about web development. In my first year, I joined a technical club at our college. This…

最近在写自己的介绍页（https://im.daidr.me）。旧的数据源是 WordPress，短时间内接入 xLog 也不太实际，不如就先将阉割版的样式搬到 xLog🤯。 包含了一部分暗黑模式和自适应支持，不过可能有些遗漏，可以在评论提醒我。 主要是对 xLog…

最近在给自己写主页（同时也是博客），我做了一个切换主题色的功能。每次进入页面时，会随机选择一套配色，让页面显得灵动一些，就像下面这样： 这是如何实现的呢？不妨先从自定义颜色入手 WindiCSS 自定义颜色 定义一个固定的颜色 Copy // windi.config.js…

这两道题真是太有趣了！虽然标签是逆向，但是以前端为载体，有很多JS/CSS奇淫巧计，我已经迫不及待地想要和大家分享了。 Treasure Map 题目地址：http://treasure.chal.pwni.ng/ Ready your masts…

这篇文章主要介绍名片页的路由过渡是如何去做的 介绍 在 19 年，我就写了一个较为炫酷的个人名片页。当时的我热衷于使用各种过渡效果，当然，也尝试了很多新鲜的 css 特性，例如为了实现多种主题色使用了 css 变量（好像还是我首次使用 flex 布局呢） 但当时的我显然还尚…

背景 在Manifest V3中，谷歌对CSP策略的限制变得更加严格。例如，不允许使用unsafe-inline指令，这避免扩展执行远程代码，然而，这也意味着注入到页面中隔离环境的Content Scripts受到了扩展CSP策略的约束。因此，当页面中的链接包含内联的事件处理器/…

在 windicss 中，提供了媒体查询和 class 两种方式实现暗黑模式适配。而且比较省心的是 —— 其提供的 dark 变体会自动根据选择的适配模式，生成对应的代码，可以有效避免写出一堆没用的 css，看起来也比较清晰。 为了方便控制，我们选择使用 class…

这是掘金网页版的头部，当滚动条向下滑动时，主 header 会隐藏，次级 header 会吸在页面顶部。 样式 首先，我们先通过两个 div 来模拟这两个 header Copy <template> <div class="main-header-wrapper">…

大家如果曾经接触过 Vue， 那么大抵会对其自带的组件 TransitionGroup 有所了解。这篇文章便记录了 TransitionGroup 中「移动动画」的一些使用细节。 或许你对 TransitionGroup 的「移动动画」还不太了解，那么我在这里浅浅地介绍一下…

自己在写的小项目中有瀑布流的需求，不久之前刚刚完成瀑布流的布局部分，这部分代码也已经上传到了Github gist。写的时候我就在思考：如果能有更优雅的方式快速实现瀑布流布局该多好。于是，我便想到了之前无聊时翻看 MDN 时，CSS Houdini 里边所描述的 CSS…

自己亲手做一个天气卡片组件的想法其实很早就有了，但是做起来难度还是很大的（布局、数据源、天气展示、自适应），最终不了了之。最近学校社团面试题目是做一个天气卡片，正好可以借此机会趁着国庆小长假静下心来好好研究一番。于是就有了今天的这篇文章。 ~（实际上在国庆小长假之前就基本上把…

在开始这篇文章前，先让我们来看一组 base64 编码的字符串 Copy ZG== YY== aW== ZF== cm== aM== b2== dc== c2== Zf== 解码后的内容是 daidrhouse，似乎没有什么问题。但是仔细看，第一行和第 4 行解码后的结果都是…

明日方舟安装包和升级包解包后得到的立绘周围有多余的像素，需要通过分离出来的灰度图来获得具有 alpha 通道的立绘图片。 用 sharp 来实现还是蛮简单的，就写了一个小工具来完成这一过程（文章最后仓库内有全部立绘可供下载）。 Sharp 的实现 在老版本的 sharp 中…

Chrome DevTools 可以直接查看 binary 类型数据包了！ 连接 通过 Chrome DevTools 可以看到，网页版 B 站直播的弹幕通过 wss://tx-sh3-live-comet-04.chat.bilibili.com/sub 传输…

作为一只前端白菜，一直都不太敢碰 Canvas。最近粗浅的学习了一下 canvas 的操作，也算是了结了自己的一个心愿。简单整理了一点自己的笔记和学习心得。 目的是创建一个 Flappy Bird 的基本动画场景。 用 canvas 是真的会上头的（雾 Part.1 准备…

介绍 DouAPI DouAPI 是戴兜在 15 年底开始提供的一项服务，DouAPI 在这 3 年左右的时间里， 根据 Uptimerobot 的监控数据， 可用率基本在 90% 以上。完全可以说是戴兜维护最走心的一个项目了。寒假开始用 NodeJS 重写了 DouAPI…