一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服

微软 Bing 搜索引擎,搜索关键字 初中生 win12,能找到一个 github 仓库,地址如下:github.com/tjy-gitnub/...

这个代码仓库一度冲上了 GitHub 的 Trending 热榜,目前已经获得了 6100 多个 stars.

这个开源项目,作者没有使用任何诸如 Angular,React 和 Vue 等前端开发框架,而是纯 HTML 加上 JavaScript 编程,对照着前段时间微软发布的 Windows 12 概念版(Powered by PowerPoint),在浏览器里以网页版的形式实现了出来。

这个 Github 仓库有何特别之处?

第一,就是其作者的身份。根据 Github 仓库上公开的信息,提交代码量排名前三的开发者,依次是 Github id 为 tjy-gitnub 的初三学生,id 为 NB-group 的小学六年级学生,和 id 为 User782Tec 的初一学生。

是的,你没看错。

查看 tjy-gitnub 在 Github 上的账号得知,这位同学名叫谭景元,他左下角的个人介绍很有意思,看得我一头雾水,为了避免被 he xie,我也不敢把文字贴出来。

他还专门强调自己的账号是 tjy-gitnub 而不是 tjy-github, 这背后或许有什么梗,我就无从得知了。

谭同学的个人主页地址:tjy-gitnub.github.io/

一看就是通过 Github Pages 托管的,首页如下:

内容采取 Scroll Down 的方式进行 Lazy Load:星源的网站。背景图片和"星源"二字倒是很契合。

关键字:成都七中,CSP普及组一等奖,蓝桥杯国赛三等奖。

当我继续往下滑动屏幕,看到谭同学提到自己精通各种语言时,我不禁微微一笑,少年人有如此傲气丝毫不奇怪。我原来大学毕业找工作时,也敢厚着脸皮在简历上写着精通 C++ 编程。

但当编程语言这个区域的界面渲染完毕之后,我发现谭同学又很谦虚地把 Python 和 JavaScript 这些上手容易精通难的编程语言的技能熟练度,绘制成低于 50%.

好一个机智的少年!

另外谭同学的 Scratch,想必已经到出神入化的程度了。

再看 contributors 排名第二位,这位小学六年级的开发者。嗯,今年应该已经初一了吧。

梁同学的项目经验,好卷啊:

  • 基于 LLM,语言识别,语音克隆的流浪地球 MOSS 完美还原项目
  • 基于计算机视觉的学生上课行为实时采集分析系统
  • Windows 12 团队核心成员
  • 开发 NB 系列软件
  • 参与上海知至恒信息技术有限公司交易警报系统的开发

又双叒叕是一个学霸。

梁同学发布在 Github 上的 NB 系列软件的源代码。啊,原来 NB 前缀出处在此。

限于篇幅,这里不再八卦这些少年开发者们了,大家感兴趣的到这些同学的个人主页上继续查看。

回到正题,说说他们的 Win 12 网页版项目吧。在线演示地址:tjy-gitnub.github.io/win12/deskt...

登录界面:

登录之后:

双击我的电脑:

进入 C 盘,新建一个文件夹:

新建一个文本文件:

可以进行文本文件的编辑:

试试网页版的 Microsoft Edge:

设置界面:

连蓝屏界面都模拟实现了:

Win 12 的技术实现

可以看出这些同学们实现的 Windows UI 效果,视觉上还是非常精美的。我把源代码克隆下来大致阅读了一遍。

整个桌面效果实现的代码,编写在一个巨大的 desktop.html 里,界面和动画特效都采用 css 完成。前端代码没有采用 Angular,Vue 和 React 等框架,仅仅用了 jQuery 来减少一些 DOM 操作的体力活。

看到代码注释里真正的 SEO 强者,是不会用 Keywords 的,我不禁对着电脑屏幕微笑。我也是一个小学生的父亲, 这个梗我是 get 到了。

从源代码不难看出,这些少年开发者们无疑是对计算机编程有着浓厚的兴趣的,愿意牺牲一部分玩和平精英的业余时间投入到这个项目上来。从他们编写的源代码里面,也能读出他们对于前端开发,也有一些自己的理解。

我相信他们一定已经从开发过程中,享受到了编程那纯粹的快乐,也收获了满满的成就感。当然,他们在这一领域的水平,也超过了很多的同龄人。

该项目的未来

Github 的 readme.md 里罗列了一些谭同学对 Win 12 网页版的前景规划,比如建立自己的可执行文件机制,将 .exe 文件转化并执行,设置封装成独立的操作系统,适配量子计算机。

可惜谭同学在随后的公告里提出,后续的项目维护被迫只能移交给项目组其他成员了,原因是摆在所有成都初中生都要面临的一道坎:成都中考。

谭同学真的是一个内心细腻的开发者,他的中文更新提到,自己的中考志向是七中林荫,英文描述则写成了 do something almost impossible.

七中林荫这四个字意味着什么,相信每一位成都家长心里都有数,当然也包含我在内。

对于这个项目,网络上也存在一些质疑的声音,我罗列了一下:

  • 这个是从一个 web 版的 win11 改过来的,换了 UI 而已
  • 跟家长一起完成的,但署了他的名
  • 高保真还原能力,不可能由一个孩子解决
  • 谁会精通 scratch 啊
  • 这玩意本来就没啥技术含量,也就外行看着兴奋
  • 类似 win11 的前端项目有很多,随便魔改一下就是 win12
  • 这玩意本来就没啥技术含量,也就外行看着兴奋
  • 看看就行了,工作量不是一个小朋友能搞定的
  • 谨慎怀疑。不怀疑 14 岁能不能达到这个能力,怀疑 14 岁有没有这个时间精力

我有些奇怪,为什么键盘侠和喷子们无处不在呢?在网络上和这些 losers 哪怕讨论一分钟的时间,我觉得都是一种浪费生命的行为。直接无视。

幸好还有我们的梁同学,正是血气方刚的年龄,对于这种脑残评论,直接毫不客气的啪啪打脸,看得我拍手称快。

当然也有朋友认真发表了看法,我也认真阅读了他的看法:

这位朋友的建议或许是正确的吧,他的出发点或许是"如何开发出一个真正有用的项目"。但我觉得只要孩子们在开发这个项目中觉得开心,那这也能算一个有用的项目。退一万步说,就算用到的只是在一些前端专家眼中不值一提的技术,但至少也学会了如何利用 Github,同来自祖国各地志同道合的其他少年开发者们,共同协作开发一个项目,这种体验可不是目前国内的中学生随随便便就能拥有的。

要是我儿子和他同学搞了一个类似的项目的话,我不会过早地告诉他"你应该这样做,你不应该那样做",而是让他们随心所欲,想怎么玩就怎么玩,充分享受编程本身纯粹的快乐。因为我不希望孩子们还在初中的时候,就过早地被前端工程化的各种枷锁封闭住他们的思维------这些东西留到他们大学或者工作时再去弄吧。

如果有一天我有机会同谭同学和梁同学见面,我想对他们说,"你们能不能别这么卷?你们这么卷,让我这种 40 多岁的叔叔级程序员,心里好慌。"

最后祝这些可爱的少年开发者们能够学业有成,也祝愿谭同学在今年的中考里金榜题名,考上自己梦想中的学校。

相关推荐
优雅永不过时·39 分钟前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
神夜大侠3 小时前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱3 小时前
【Electron】Electron Forge如何支持Element plus?
前端·javascript·vue.js·electron·node.js
柯南二号4 小时前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts
wyy72934 小时前
v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
前端·ui·html
前端郭德纲4 小时前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6
王解4 小时前
【模块化大作战】Webpack如何搞定CommonJS与ES6混战(3)
前端·webpack·es6
欲游山河十万里4 小时前
(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数
前端·ecmascript·es6
明辉光焱4 小时前
【ES6】ES6中,如何实现桥接模式?
前端·javascript·es6·桥接模式
PyAIGCMaster4 小时前
python环境中,敏感数据的存储与读取问题解决方案
服务器·前端·python