戴兜

戴兜

Coding the world.
github
bilibili
twitter
cover
cover

Google Summer of Code & Chrome Extensions

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…
cover
cover
cover
cover
cover

xLog 样式分享

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

SCSS+WindiCSS实现主题色切换

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

Plaid CTF Writeup [Treasure Map/CSS]

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

写一个炫酷的个人名片页✨✨

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

【戴兜的游戏安利】Hi-Fi RUSH,不可多得的动作爽游

“你这是个技术博客么” “不全是” “那怎么只有技术文章” “……” 我很少对玩过的游戏发表看法,但是今天要推荐的这款游戏 Hi-Fi RUSH,它实在是太好玩了。Hi-Fi RUSH 是 Tango 开发的一款动作游戏。在今年 1 月底就发售了,但当时正好在玩鬼泣 5…
cover
cover
cover
cover

Manifest V3扩展Content Script绕过CSP限制点击页面内元素

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

在 Nuxt.js 中配合 windicss 实现暗黑模式适配

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

实现滚动时Header自动隐藏

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

你好!2023

一晃眼就到 2023 年了,时间过得真快啊🤯 在过去的一年里,戴兜做了些什么呢? Ⅰ. 游戏🎮# 回坑了明日方舟(之前因为玩原没时间导致方舟弃坑),欢迎来加好友 (官服) 戴兜 #7341 经过了 2 年,原神终于成为 60 级萌新!官服 104003683 成为了…
cover
cover

!important导致TransitionGroup失效

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

CSS Layout API初探:瀑布流布局实现

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

手撸一个前端天气卡片

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

Hi!2021

2020 年转瞬即逝,上一次写年末总结,仿佛还在昨天… 恐怕这一年对于我们来说都是印象深刻的一年,新冠疫情的爆发,让我们改变了太多。对于我来说,2020 年同样意义非凡 ——2020 年 9 月,我成年了。2021 年 1 月,参加了人生中第一次 “小高考…
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover
cover

base64数据隐写实现原理分析

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

明日方舟人物立绘反混淆

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

Hi!2020

转眼间 2019 年就过去了,感谢过去的一年里陪伴着我的小伙伴们。 Ⅰ. 过去一年的 戴兜的小屋# (数据来自 Google Analytics,由于蜜汁原因缺失 5 月初 - 8 月中旬的数据) 2019 年戴兜的小屋有效访问量:16,050 次,相比去年增长 94…
cover
cover
cover
cover
cover

B站直播弹幕ws协议分析

Chrome DevTools 可以直接查看 binary 类型数据包了! 连接# 通过 Chrome DevTools 可以看到,网页版 B 站直播的弹幕通过 wss://tx-sh3-live-comet-04.chat.bilibili.com/sub 传输…
Ownership of this blog data is guaranteed by blockchain and smart contracts to the creator alone.