«

»

06 2018

新版个人主页开发日志

花了整整一个月的时间,重新做了个人主页

可以说过程极为不顺利了。我也是没有意料到会面临这么多问题。
main.png

使用到的组件和库

设计过程

定义

如果是商业项目的话,反而会很好解决:用户希望实现什么产品,根据产品定义拆分成产品需求,再分解成功能定义,再设计功能实现和数据流程,最后代码实现。

这个个人项目要面临的第一个巨大难题就是定义了。简单来讲就是要做一个用于展示个人信息的网站,而实际上,该做成啥样完全没有头绪。

我专门到网上寻找一些参考,得到的结果相当不尽人意。单考虑国内软件开发者的话,超过99%的开发者是没有自己的网站的,剩下那1%中,有博客的都是用自己的博客顶着二级域名,剩下的如果是有个人主页的,也都是随便搞个框架往那一怼就拉倒了。

于是放开眼光,把范围由软件开发者扩大。

整个过程最有参考意义的是 Phyrnna 的主页。 Phyrnna 并不是软件开发者,而是 Professional Composition & Audio Production 。她的网站很简单,映入眼帘的,中间是一些简单的介绍,左上是 Logo , 右上则是外链导航。继续往下滚动查看的话,是用 Parallax 对板块做的分隔,其中有一个板块是她的作品介绍,最后一个板块则是联系方式。

其他的个人网站比如 画师 SquChan 和 作曲家 LukHash 也很有价值。

数据源

有一个良好的参考,但是接下来还有问题。首先就是作品展示这里。上面列举的几位,作品展示都很简单,画师和作曲只要将自己的作品展示出来就好了,都是一目了然简单明白。

而作为软件开发者,就没有这么一目了然的便利了。前端我这几年做的项目都是绝大多数都是商业项目不说,一方面保密协议在那扣着不能开源,另一方面这些玩意都是用于管理后台系统和功能模块而存在的,在没有其他模块同时运行的大环境下,这些玩意就连展示都做不到。我总不能撇个截图扔那吧。而且就算是撇截图,顶多也只能展示出“美工”的存在,我这几年做项目就没碰上过一个靠谱的,全部都是我自己拿前端组件应付,公司顶多也就能协助切个公司Logo罢了。

而后端像 PHP 、 Node 、 Docker 这些,也想不出什么实际的法子。

当然,能力不行也是一方面。像国内大神们自己做个Bootstrap出来到处吹牛逼,我只想放到个人主页上却没那个能力。

切图

代码半小时,切图花一天。

这种时候就非常羡慕 Phyrnna 他们了,从游戏到动画到美术到音乐,亲朋好友兄弟姐妹的力量。

而当我在朋友堆里提出什么想法概念的时候,就会变成一把年纪老大不小了瞎整什么。结果还是只能自己动手。

框架

考虑了具体放什么内容之后,接下来就是代码设计了。

原本计划是做一个通用模板型的框架。也就是说,日常只维护一个配置文件,由框架自己生成页面。

这里就必须舍弃 vue 和 webpack 一等了。我还没见到过有人用这些玩意做出后期免编译维护的网站出来。当然舍弃 vue 和 webpack 并不只有这一点理由。用 VUE 的话,的确能做出很好的 SPA 出来,但是搜索引擎的收入如何,完全没有明确地信息,而后端渲染就更离不开性能差爆的 Node 环境。

效果

滚动

原本是想把所有页面都做成 https://www.catscarlet.com/tools/ 一样的效果,一次滚动一整页,背景图片跟随滚动瞬间切换。最初的确是这么做的,而且配合 CSS transition 做的话,视觉效果非常好。奈何 jQuery Scrollify 经常抽风,页面经常会出现莫名其妙卡住不能翻动的问题。我甚至连背景图片预缓存的功能都实现了。

功能 VS 视觉效果,果断且只能舍弃视觉效果。

当然,我还是把他保留在了一个低优先级页面。

背景图片

背景图片没打算用 Parallax ,而是一个版块一张背景图片,用模糊和透明度做出虚化效果,这样就可以用低分辨率图片做到减少带宽消耗的同时保证美观。

然而舍弃 jQuery Scrollify 之后,面临的第二大问题就是如何实现背景图片了。

原本使用 jQuery Scrollify 时,是依靠 jQuery Scrollify 的 trigger 来渲染一个 z-index: -1<div>。没有了这个 trigger 之后,想要动态更换背景图片,就需要 Scrollfire 来实现。很可惜,没找到靠谱的 Scrollfire 插件。Materialize 在新版中移除了这个组件,网上也没找到好用的。尝试用 Materialize 的 Scrollspy 来实现,结果发现 getActiveElement 不好使。

于是放弃 更换背景图片效果 。改成每个板块使用的背景图片随板块一起随页面滚动。

需求变得简单了,但是并没有变得容易实现。

想要实现模糊效果,需要对 <div> 设置样式 filter: blur。一般有两种实现方式:

  • 专门渲染一个 z-index: -1<div> 用于设置背景图片。其他内容的 z-index 都设置得比这个高,就可以显示在这个的上层。
  • <div> 专门设置一个 :before 并设置背景图片,这样背景图片就会有独立的一套样式,而标准内容不会受影响。

难点就在于,每个版块是根据配置文件生成的,所以没法通过 class 来控制了。

平台

我就觉得,在你就坐在电脑旁边,却拿手机刷网页看视频甚至办公,是件很傻逼的事情。
014952.png
另外微软和一大堆国产浏览器这些玩意真是烦人,还得专门针对这些破玩意做适配。还好我就干脆没做!爱崩不崩!

加密

邮箱

把邮箱明文放在网页上是一件有风险的事情,毕竟垃圾邮件仍然很流行。所以我用了 CryptoJS 进行加密。本来是打算使用 固定秘钥+随机iv 来做的,下次吧。

解密效果使用的是 Textillate.js ,Lettering.js 和 Animate.css 是其依赖。

微信

并没有把微信二维码图片保存到服务器上,而是像邮箱一样是一段文本。

没找到任何一个靠谱的二维码生成库。我的期望是在二维码生成后进行回调来在页面上渲染。

二维码这事,我还专门到网上查了,结果呢,全球除了一个特殊国家之外,没有哪个国家对这玩意有重视。本来就是嘛,这种短文本标识也只能被某特殊国家使用出这么多花样。那么问题来了,这个特殊国家是有多少开源只为了贡献而存在的开源项目呢?各种乱七八糟的二维码我倒是都见识到了,一个有靠谱 callback 的二维码生成库都没见到。

另外微信这破玩意,不把 canvas 当图片,所以用微信打开时,没法按住二维码来直接识别。

014915.png

开源

这个项目没有开源的计划。
理由:原本架构设计的很好,但是由于需求在这一个月内被我变动来变动去,原本是设计成通用模板型的框架,结果已经被我在一个页面之内就碎片化了。当然,这事情不是不能解决,但是这个项目耗时已经超出预期了,没什么继续开发的心情了。而所有预期功能现在都能正常工作,只要改配置文件就能满足使用(但是配置文件格式就有4种!)。

最后

“都是经历都是锻炼都是经验”这样的,或者“重在坚持”这样的的破评论,就不要留了,我会统一标记为 akismet 垃圾评论的。

12 comments

Skip to comment form

  1. 大致
    Firefox 62.0 Firefox 62.0 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

    我觉得你可以做多个,然后表达出一种“只要我想抄,就没有抄不成”的solgan,这样可能更利于接活。
    第一页用模糊的背景图感觉不太好,因为第一页的字本身就不多。后面的页没问题。

    1. 石樱灯笼
      Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

      唉,跟你说啊,容易找的私活全部都是钓鱼网站……所以我做东西一直不会给别人“我可以抄”的感觉。

  2. 灰狼
    Google Chrome 67.0.3396.99 Google Chrome 67.0.3396.99 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

    败在背景图~

    1. 石樱灯笼
      Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

      此话怎讲?

      1. GlacJAY
        Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Android 8.1.0 Android 8.1.0
        Mozilla/5.0 (Linux; Android 8.1.0; ONEPLUS A5000 Build/OPM1.171019.011) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36

        以为是图片加载比较慢所以盯着看了半天😂

        1. 石樱灯笼
          Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
          Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

          美其名曰:恶意占用增加用户停留时间

      2. 灰狼
        Google Chrome 67.0.3396.99 Google Chrome 67.0.3396.99 Windows 7 x64 Edition Windows 7 x64 Edition
        Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

        图片用CSS处理了模糊,而且处理过度了。另外不知是不是我的屏幕问题,图片作为背景刚好与字重叠,看起来比较难受。

        1. 石樱灯笼
          Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
          Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

          这就很难办了。首先模糊就是为了解决背景文字重叠问题而刻意过度模糊的。如果不想看模糊效果你可以试试用 IE ,IE 是不支持 filter:blur 的所以模糊效果在IE浏览器上毫无效果。
          你提出的两个问题本来是两个对立的问题,处理其中一个问题必定会导致另一个问题加重,除非完全去掉模糊效果,相当于删除一个功能项。

  3. sqliuchang
    Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

    我这才意识到我关注了一位前端大佬

    1. 石樱灯笼
      Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

      你看评论就会觉得没人觉得这破玩意管用。

  4. 陈大猫
    Google Chrome 68.0.3440.106 Google Chrome 68.0.3440.106 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

    每次打开你博客都很慢,不晓得是什么原因。

    1. 石樱灯笼
      Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

      这个不清楚。服务器现在是放在海外,没有CDN,同时除文章引用的图片以及Creative Commons之外,所有静态资源都是同域同源的,没有引用任何第三方脚本。
      首次打开首页需要流量约353KB,北京联通2.57s之内可加载完毕,鹏博士旗下宽带的确有较严重的图片服务器(在另一个机房)无法打开的问题。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.