云空调,便携小空调

本文最后更新于 over 3 years ago,文中所描述的信息可能已发生改变。
GitHub Repo stars

简介

❄️ 云空调,便携小空调,为你的夏日带去清凉!

这又是一个差不多两年前的坑。

那么它能做什么呢?没错,随时随地打开空调。唯一的缺憾是,没有。但我们也许可以「望空调止热」。

遵从最宽松的 MIT 协议,你可以自行 clone 本项目,并自定义地构建它。当然也可以通过 iframe 的方式直接嵌入你的网站。

html
<iframe height="700" src="https://ac.yunyoujun.cn"></iframe>

对了,最近因为小空调又火了起来。浮现出了许多去除页脚、售卖源码和冒名顶替的情况。

MIT 协议虽然允许你以任何方式使用,但仍然规定署名作者,且原作者不承担代码使用后的风险。

当然,国内并无法律承认开源协议,所以这更像是君子协定,各自问心无愧即可。

前言

最近似乎总是在 GitHub 开源个项目,README 里介绍一遍,然后又在自己的博客介绍一遍,而显得产生了许多冗余信息。

这似乎是不「优雅」的。

不过我更倾向于在 GitHub 的 README 中介绍正经的启动、使用方式,而在博客中则更个性化地介绍一下我做它的原因、衍生的内容和中途遇到的各种各样有趣的事情。

因此勉强也算各自有其存在的意义。


这篇文章实际是在 4 月 17 日 开始着手写的,未曾想到 4 月 18 日 突然因为被诸多 TG 和微博的沙雕频道转发,有些爆火,增加了很多 Star 和访问量。 让人诚惶诚恐,受宠若惊。

来历

因此不妨借此机会,说说它的前世今生。

很早以前我看过的是一个电风扇 APP 截图(但我确实不记得来源了),这种冷笑话精神,着实让人心领神会。

于是几年前的我写了一个使用 CSS 动画的线上电风扇 electric-fan | 夏日清凉小风扇。 当然囿于技术和设计能力,美观上可以说是非常欠缺。

那么,夏天还有什么呢?没错,那就是「空调」。

因此后续则想着不妨试试实现一个空调,也就是「云空调」的来源了。

因为初衷便是一个玩具项目,所以我通常喜欢使用我最不熟练的技术来完成它,并借此学习一些东西。(所以它的代码可能并不是最最优雅的方式。)

也正因此技术栈我则选用了 React + Material-UI

实现的话,说难也不难,说简单自己又不想承认是那么简单。 除去冷笑话本身的特点,最大的亮点想必便是纯 CSS 绘制了,比如能效标签。 当然这本质是一个苦力活,对着真实的能效标签,配合框架的循环语法,用 CSS 一个个画下来就是。

实质上在 2019 年的年底,我便实现了它,而后续的 2020 我又进行了一些细节样式的调整与依赖更新。 尽管也收到了一些 Star,但不温不火。

在 4 月 18 日前一周,我发现 CDN 的流量费用似乎有所上升,于是乎查看了下流量的统计,发现有不少的资源来自小空调的音频加载。 此前我使用的是未经压缩的 wav 格式,相比压缩后的 mp3 文件要大上数十倍。 于是我急忙压缩了下音频资源,后续还将线上的音频资源加载切换到了 jsdelivr。 也多亏于此,后续的流量暴增也没有过多地消耗我的 CDN 费用。(一看账单,没想到大头变成 CDN 的 HTTPS 请求费用了。)

后话

最近的实习将将尘埃落定,网友们却人人化身产品经理,给小空调提起 Feature Request 来。

苦于实力、精力有限,加之 React 仍旧并不熟悉,我也只能慢慢追加功能了。(当然,欢迎 PR!) 最近刚追加了 LED 字体,Redux 的全局状态管理和适应系统的亮暗模式。


最后的最后,说件趣闻,此前腾讯二面的时候面试官问我会不会 React,我只得老实承认自己主攻 Vue,React 的经验仅局限于小小的 Demo 们。

于是乎,我开启了屏幕共享,给面试官看了下我的小空调……


云空调,便携小空调-后记 | 微信公众号

Q.E.D.

又拍云—年轻人的第一个 CDN
char-dust 一个图片转字符画的 npm 包与示例站点