「时光不负,创作不停,本文正在参加2021年终总结征文大赛」
大家好,我是掘金收割鸡本🐔...
太招人恨了,重来~重来,大家好!
我叫大帅
,一个老
程序猿
。本文会在评论中抽一个幸运鹅获得掘金周边鼠标垫1份。
特别感谢
在此要先感谢一个人,那就是 @大圣。如果没有他在HR面前力保我(面试前我还不认识大圣
),我恐怕很难在37岁高龄,仅凭一个高中学历
再次步入职场。如果没有他在团队里的鼓励,我恐怕也不会这么积极的写文章,从而获得成就感满足感,继而致力成为技术内容的终身创作者。
感谢优弧,船长,小帅,村长,老夏,小蝴蝶,倩姐,思宇,Alex,SSH,秋风,Coco,Kagol,崔cxr,三元,winter等等【所有】在今年交流过的新老朋友,还请继续支持大帅哟。排名不分先后,如果漏写了也别生气,来找我请你吃羊腿
感谢完,先来点肝货吧!
我肝了一周,用Three.js
创建了一个"掘金城市"
“肝”货?
先看最终效果
数据来源
2021我在掘金写了多少篇文章?
我很想知道我这一年究竟在掘金写了多少篇文章,每篇文章多少赞。但掘金没有提供以年
为单位的接口。不得已呢,我只好使用文章列表接口去遍历,一旦发现创建时间早于2021年1月1日 0时0分0秒
的文章则结束遍历,以此来获得今年我发布的全部文章。
//获取指定指针位置的10篇文章
function getArticles(uid,cursor='0'){
const res = await uniCloud.httpclient.request("https://api.juejin.cn/content_api/v1/article/query_list",{
data:{
"cursor": cursor,
"sort_type": 2,
"user_id": uid
},
headers:{
"Content-Type":"application/json"
},
method:"POST",
dataType:"json"
})
return res.data.data;
}
//获取文章直到xx时间戳
function getArticlesAfter(uid,unixtime){
let dataByYear = {};
let cursor = 0;
async function getNextArticles(){
let res = await getArticles(uid,cursor);
console.log(res);
if(!res)return dataByYear;
let getTheLast = false;
for(let i = 0;i<res.length;i++){
var article_item = res[i];
//发现小于时间戳的文章则停止遍历
if(article_item.article_info.ctime<unixtime){
console.log('结束了,去年最后一篇是:');
console.log(article_item.article_info.title);
getTheLast=true;
break;
}else{
//发现文章的时间晚于2021年12月31日的话则跳过
//2022年还有人访问这个接口,不至于出问题
if(article_item.article_info.ctime>1640966400)continue;
var cDate = new Date(parseInt(article_item.article_info.ctime)*1000);
var month = cDate.getMonth();
if(!dataByYear[month])dataByYear[month]=[];
//用不了那么多字段,重新梳理数据结构
var sItem = {
title:article_item.article_info.title,
author_name:article_item.author_user_info.user_name,
article_id:article_item.article_info.article_id,
view_count:article_item.article_info.view_count,
digg_count:article_item.article_info.digg_count,
comment_count:article_item.article_info.comment_count,
ctime:article_item.article_info.ctime
}
dataByYear[month].push(sItem);
}
}
cursor+=res.length;
if(!getTheLast)return getNextArticles();
else return dataByYear;
}
return getNextArticles();
}
复制代码
然后把所有文章按照月份重新组织数据,最终数据结构如下:
这个接口我也提供给大家,如果你不满意我的表现形式,也可以自己处理这些数据。
但我不保证接口长期有效哦!
https://e0b75de1-90c7-4c11-9d12-a8bc84c4d081.bspapp.com/http/jjskyline?uid=你的掘金uid
复制代码
数据的表现形式
原本我是打算直接照抄 skyline.github.com
结果光一个底座,我就折腾了大半天,完全完全没想到在Three.js
里画一个立体梯形结构体还挺麻烦。
最后请教了webgl
大佬,他教我用bufferGeometry
,需要把梯形体所有的点计算出来,一个梯形体不过8个点,还好算。
囧的是,就在我最后画出来梯形体的时候,我发现打不上光。
因为要接受光照信息,还得计算全部的顶点法线...
头秃!由于代码太长,并且最后也没用上梯形体,我就不贴代码了。
另外,我发现github skyline
的表现形式其实也并不适合呈现掘金全年文章数据。
所以干脆原创
一个吧!
这是为掘金社区定制
的
喂,有没有人买个单呐?
好吧,没有人
就当我闲得蛋疼吧
看着还不赖吧~当然一开始它也不是长这样的,为了让整个城市
看起来更“美观”,我可真是揪光了头发。边开发边设计边直播...尝试了各种布局
- 初版
一开始,我为创建城市设定了以下基本规则
1、每个月是一个区块,一共4x3。
2、每篇文章是一个建筑物,每月最多显示30篇。
3、文章的赞越多则建筑物越高。
复制代码
然后我发现有一些文章的点赞数据确实太少了,原封不动的照数据画出来,并不好看。
- 第二版
接着我设定了创建城市的基本规则2.0
4、建筑物的单层面积由当月文章数量决定。
5、区块内建筑物的排布根据当月文章数量决定。
6、区块内所有建筑物的整体区域与区块面积居中。
7、建筑物的高度有一个基数,确保不会出现太矮的。
复制代码
现在是不是舒服多了,错落有致,大小不一,但又很整齐。只是当月份是奇数时,最后孤单的建筑让整体看上去不太舒服,所以继续升级。
- 第三版
创建城市的基本规则3.0
8、区块内建筑物的如果是奇数,最后一个宽度加倍,填满空间
复制代码
现在看上去是不是舒服多了?
但是,也叫城市,怕不是个芯片样板?
恰好,网抑云里正在播放一首歌,歌词是这样的
这城市那么空
这回忆那么凶
这街道车水马龙
我能和谁相拥
复制代码
咦,街道! 城市那必须得有街道呀!
- 第四版
纯手绘街道贴图,每一个像素都是我用鼠标在PS里画出来的。
我真是闲得蛋疼,again!
TADA!是不是有点感觉了?做到这,我发量已经告急了!
- 第五版
城里哪有那么清澈的空气!
加点雾(mai
)吧~
scene.fog = new THREE.Fog(0xffffff, 0.01, 6);
复制代码
- 第六版
就在我觉得大功告成的时候,我测试一下 @大圣老师 的账号数据。
嗯,绿化面积
很大,证明了他真是摸鱼
摸到Lv5
的。
得给他整得难看点,谁叫他不写文章的(此句优弧
非要加上)
好吧,没有文章的月份就弄一个工地的贴图把
你看看
城乡结合部的既视感是不是就出来了
- 第7版(未遂)
方块城市没有感觉,干脆加点建筑物模型吧。我随即打开unity3d
的assetsstore
这一套模型太好看了,太合适了吧!
竟然只要9.99!
买它!买它!买它!
就在我准备下单支付的时候
告别unity3d
吧,瞧不起我mainland
是怎么滴?
不买了~
就这样吧!没头发揪了~
开发的最后
其实整个原创设计
的开发过程远远不止7版,最近几天我都一直在小破站直播写这个小网页,很多朋友是见证了这个开发过程的。
当我还想继续摸鱼,开发这些没用的东西的时候。
被掘金张哥来催稿了
算了,就开发到这吧...
还是努力写专栏吧~
体验地址
没做移动端适配,请用电脑访问
ezshine.jnsii.com/juejincity/…
uid改成你自己的掘金uid即可看到你的掘金之城
我的2021
时间过得真tmd快呀...
sorry,原谅我粗俗了,但不这么表述真的没有feel~
我们竟然和新冠疫情共存两年
了,出门习惯了随身戴口罩,回家第一件事是洗手....
疫苗打了三针
往年换季总要感冒个2-3次
今年还没感冒过(好的不灵坏的灵,文章还没发,我似乎感冒了
)
去年Flag的完成情况
去年的文章,《2020,疫情重创了我的第三次创业 | 掘金年度征文》。原标题是《从事前端16年四套房两辆车》,哈哈,你们看过这篇文章吗?
- 持续输出原创优质技术内容
这一年我在稀土掘金社区升级到了
Lv.6
,一共写了39篇原创文章,其中有两篇的点赞数都在短时间内破了2000+,这算是相当不错的成绩。
- 文章类要努力写得更加系统,更加深入。
已经在写小册啦~
- 踊跃尝试视频类的技术内容。
我在小破站也发布了20几条技术视频教程,总计13w+的播放量。不过还没摸到小破站的G点,但心里差不多有数啦。
- 尝试技术内容的直播,甚至尝试下虚拟主播的形式。
都试了,继续干就完了。
- 努力成为一名合格的讲师
那必须合格了呀。
- 拥抱开源
2021的提交记录比以前多了不少,但跟很多大佬比差远了。
2021总结
我竟然都做到了?除了这些,我好像还做了不少事
- 猿创聚合助手小程序
一个帮助技术内容创作者聚合掘金、B站的小程序,还有很多帮助萌新程序猿学习的小工具,打开微信搜索
猿创聚合助手
自行探索吧。
- 程序员交流QQ群、微信群
竟然已经建立4个2000人群了
如果要给2021一个关键词,我认为不惑
特别恰当
虽然我距离不惑之年还差那么一丢丢...
但是2021真的彻底想明白了一些事
根据祖上三代的数据
我家族的男性基本在60+就会拜拜
那么接下来的20多年(也可能没有这么多)
我究竟要做什么呢?
给 2022 立个Flag
- 持续赋能
从现在起,我要把自己这套
用输出倒逼自己输入
的学习方法,教给更多小伙伴,培养更多的掘金收割机。从2002年我拥有人生第一台电脑开始自学Flash
,2008年又自学iOS
开发...到现在是一名全栈全端的技术内容创作者。我的经历一定能帮到很多和我一样热爱编程的小伙伴。
- Q1一定要完成小册
拖延症真的要不得~
- 和全职打工拜拜
虽然我计划的房车旅行要等我女儿幼儿园毕业,也就是2023年。但我想早点开始享受自由职业的快乐了!
- 摩托车驾照
驾龄17年的老司机,想耍耍帅所以学了摩托。开始报了个两轮,结果在科目二竟然考挂了,哈哈哈哈。现在改成三轮了,希望能过~
除此之外,继续稳定的,坚持的输出技术内容是我永远不会改变的目标!
感谢大家,记得评论抽奖哦~
本篇文章配有小破站视频