Categories
Development

Firebase limit access to certain domains

While I was developing Iridescent, due to the fact that it’s a internal project, I had to limit the access only to user with email of certain domains.

Categories
Development

Firestore Pagination

Cloud Firestore, aka Firestore, is an NoSQL database released by Google on October 2017, currently it is on beta stage. It’s the successor of old Firebase database (Realtime Database), and in my opinion, the biggest change would be querying. Firestore allows you to do query based on multiple fields, which is very useful to handle data.

When I was carrying out my project Iridescent, I realized that I needed to paginate data. As the project grows up, I can’t load 100+ data all by once. Firestore has a daily limit for document reads and bandwidth, so I have to try to reduce the usage.

At the same time, a long waiting time is not part of good user experience, and loading all data by once might cause lag on low-performance devices.

Categories
Development

Disqus2WP

Update: this tool does not work anymore due to Disqus’ export format change (GDPR), which removed commenter’s IP address and Email.

I had been using Ghost on 2015 ~ 2017. It’s a good blogging-platform, but it doesn’t have a built-in comment system, so I had to use a third-party comment service, which is Disqus.

Disqus isn’t a bad platform, in fact, I think it’s a great solution for those who doesn’t want to spend a lot of time investigating how to avoid spams or maintaining. At the same time, it has some great features like “Real time comments” or voting.

Except the loading speed.

Categories
Development

Hugo 获取文章特色图片

静态博客基本上都支持 Front Matter,用来添加标题、日期、标签等等信息,但也可以用来储存别的数据。同样的功能也能在 WordPress 和 Typecho 上找到。(自定义字段)

从Hugo内置的 Opengraph.html 模板中可以看出,官方想让我们使用的字段是 images ,用来添加多张特色图片。不过由于历史原因,我还是习惯使用 image 来添加单张图片。

Categories
Development

Yellow

花了一天时间写了个新主题,名为 「Yellow」,取自Coldplay 2000 年的Parachutes专辑中的同名歌曲。

既然取了这个名字,就顺便上了个偏黄色的配色。使用到了在水八口记发现的Coolors.co工具,非常好用,点按空格即可随机生成,也可参考他人的分享。

也发现一起的博客主题配色都偏冷调,例如蓝色或者是绿色。这次也算是换个口味了。

去年暑假写的那个未完成主题的有些部分被我放到了这里,例如固定在侧边顶栏的侧栏。手机上会固定在顶部,毕竟手机上最缺的就是宽度。

那个主题里面还有一些样式其实也可以拿来单独做个主题,例如那个时间线的样式,但现在对写主题也没那么大动力了。


这次也没搞花里花哨的效果,尽量简单点,有些想过加的功能还是被我否决了。

大量使用Flexbox,已经放弃了float,再也不用担心clearfix了。

另外,首页的文章样式参考自Artifact.


最后放上马山芋和狼姐几个礼拜前的Yellow现场,非常好听。❤

Look at the stars,
Look how they shine for you,
And everything you do,
Yeah, they were all yellow.

Categories
Development

Hugo 本地搜索

静态博客的搜索功能实现基本上可以分为两种:第一种是生成所有数据,客户端下载这些数据并进行搜索;第二种是借助第三方服务来进行索引,并返回匹配的数据。

前一种实现起来很简单,毕竟不需要研究第三方API。但如果需要搜索的数据非常大,或者是客户端的性能不够就容易导致卡顿。

这篇文章就写写第一种在Hugo上的实现方法好了。