钉子の次元

Dimpurr – 千里之行,始於足下。

校内应用个性化数据年报项目全程吐槽纪实 – 长单页面前端工程与 ECharts 图表可视化

随着校区从昌平宏福迁往西土城,一边为终于能够河北人进京城感到高兴,一边为入住人称将军冢的我校 1955 年最好的宿舍而担忧,喜忧参半的在陌生的新宿舍用 Axure 画着学院内部项目交互原型的自己,迎来了大学的第一个寒假。

恶补 React 和 ES6 知识、补习高数预习离散数学和入门 TensorFlow、组织和培训学院内团队的新人们入门 Web 前后端、在 VJudge 上参与面向 ACM 新生的 BUPT Winter Training 练习赛,前半个寒假就这么飞快的过去了。之后回到老家过年的我,除了享受和可爱妹妹和其他亲戚的团聚,其他时间就花在了这么一个 —— 类似网易云个人年报,展示校内自建应用的全局统计和用户个性化数据的单页面年报页面上。

校内应用个性化数据年报 设计稿/代码实现/图表效果

校内应用个性化数据年报 设计稿/代码实现/图表效果

当时接到这个语焉不详的任务要求之后我其实是一脸懵逼的,而且这个明显重策划设计而非技术的任务,最开始居然只安排了我和另一位(虽然非常靠谱的)后端负责。于是只好抄刀硬上,自己当策划,出了一版初步设计稿就开始动工前端,然后再想办法拜托组里的设计师们修改设计图和撰写文案。后来转念一想,虽然这个估计写出来也没多少人看 (误) 的任务不是不能随便简单点糊弄过去,但是不如也干脆作为一个重新练习快要生疏的静态页面相关前端技术们的机会。最后的结果,大概就是在一个不算很复杂的移动端长页面上,塞进去了没有必要程度的自觉好玩想复习或尝试一下的技术吧。

这篇文章就以全程实录的方式,记述了我在接到这个校内应用个性化数据年报单页面的任务之后,从初期策划和出设计稿、组织文案撰写,再到前端工程开发、处理应用统计数据、利用 ECharts 绘制可视化图表,到最后部署上线的完整过程,以及在此期间内心满满的槽点。不得不说,一个春节在老家县城天天抱着 Surface 出来找咖啡馆干活也是没谁了,而且,这些校内应用用户数据存量稀薄的凄惨现实(导员别打我 233),实在有点让人难以正确的进行小数据可视化 ……

那么,也许你可以从本文窥见一个完整有趣的项目流程,或者了解我在项目过程中收获到的经验;或者你发现了其中我犯的错误或不足,也请不吝赐教。以下。

READ MORE →

使用 TiddlyWiki 打造轻便个人 Wiki 知识库

这篇文章将简要介绍 TiddlyWiki 的特点,并且分享一些常用的参考链接、资源、插件和常见问题的解决方案,以方便有相近需求的小伙伴们。

TiddlyWiki ,按官方说法是一个「非线性个人 Web 笔记本」。相比其他笔记和 Wiki 系统,其最大的特点之一是程序本体和数据全部都在一个单 html 文件内,与此同时仍然有着非常强大的功能和插件系统。在我看来,管理以文字、代码和数学公式为主的个人知识库, TiddlyWiki 可谓是最好的选择之一。

可以在我的知识库站点「Dimpurr’s Knowledge Base #1」:http://note.dimpurr.com/ 体验一下 TiddlyWiki 的使用和效果。

注意,任意访客都可以体验到 TiddlyWiki 的全部功能,包括编辑和设置。不用担心,你可以随意折腾,因为你无法将更改保存到我的服务器上,只能下载到本地。

TiddlyWiki 效果预览

TiddlyWiki 效果预览

READ MORE →

HTML Head Generator – 纯 CSS 实现的头部元标签代码生成器

前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML <head> Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦。没有到用一行 JavaScript ,基本原理是 CSS 3 的 + 紧邻选择器和 ~ 同级后继选择器。前端攻城狮们可以用短链接 http://find.moe/headgen 快速访问,也可以拖到收藏夹备用。

感谢 电灵 酱对最终样式的建议。

Dimpurr's <head> Generator

Dimpurr’s Head Tag Generator

写的时候感觉槽点一大堆,过了一周什么都忘了 …… 简单说明一下实现的要点吧。如果有更好的实现思路或觉得有可以改进的地方敬请指教,不过,前提是无 JavaScript 。

READ MORE →

Slackview – 多级响应式 WordPress 主题

Slackview 是一个黑色扁平大气风格、 HTML5 多级响应式三栏布局的 WordPress 主题。她是 Clearision 的姐妹主题,也将是我的第二款长期自用主题。

Slackview

Slackview

READ MORE →

Tuneiz – 清新文字向单栏 Ghost 主题

这是一个简洁清新、注重阅读体验的轻量级 Ghost 主题。自用主题,庆祝 Clearision 用户数破千特别释出 ……

Tuneiz

Tuneiz

READ MORE →

Adagiio V1.1.1 – 宽屏大图 ACG 风格单栏 WordPress 主题

Adagiio 是一个 HTML5 的宽屏大图 ACG 风格单栏 WordPress 主题,又名 Sankarea ,配色灵感来自绣球花的叶。适合文艺向、动漫向个人博客和大图风格 CMS 站点。附带移动版响应式页面,支持中英文。感谢 (null) 群的各位在开发过程中的帮助,没有你们这个主题也做不出来 ……

Adagiio 首页

Adagiio 首页

欢迎在此页提出相关问题和建议!

READ MORE →

madoro – 扁平黑色自适应窄单栏 WordPress 主题

madoro 是我花了一个下午一个晚上单曲循环「まどろみの约束」速成的以星空为主题的新单栏主题,没有用背景以外的任何一张图片素材,大概可以用在文字为主或想自定义背景的简洁风格博客。附带移动版响应式页面。

madoro

madoro

千反田える (佐藤聡美) & 伊原摩耶花 (茅野愛衣) – まどろみの約束


READ MORE →

dp-card – 钉子的个人页一代

这是一个 HTML5 + CSS3 的个人名片页,附带响应式移动版,兼容 IE9 及以上浏览器。

dp-card

dp-card

最近有不少同学表示了对钉子目前个人页的喜爱,虽然个人觉得并不咋滴, 正好准备过段时间重新设计新版的个人页,于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记,把脚本也重做了,并且通过了 W3C 验证,感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面,需要请自行修改相关内容。有问题可以回复,可能不接受新的功能需求。

READ MORE →

Fly Out.

大概也不过是 2013 年 6 月 20 日,也就是正好半年前, Dimpurr 这个奇怪的拼写被赋予了含义。自此之后又过了无数个白天和夜晚,直到某天大概仅仅是觉得有必要再为自己写一篇相对详细的自述了,亦或是忽然间有些无聊,总而言之,就有了这篇间杂了回忆和痴想的意识流文章的存在。

READ MORE →

StartPress – 空 WordPress 主题脚手架

这是一个 HTML5 的空 WordPress 主题,可以基于此快速开始新主题的创作。内置了基本的输出结构和函数,没有任何多余样式标签。目前处于早期测试版本还较不稳定,欢迎试用和反馈。Github 项目地址→

StartPress

StartPress

因为连续制作了几个主题之后遇到了例如首页 meta 标签等的复用问题,于是就花了一晚上在几个主题的基础上修改合并成了这个空主题,并加上了注释。这只是一个单纯的空白主题,并且内置了一些常用函数,并不是一个框架,也没有复杂的功能。代码格式和文件结构有一定的个人风格,也欢迎诸位来添砖加瓦。预计将会在今后增加关于后台设置的框架。

READ MORE →

页面布局孰优孰劣:基于REM的EMs弹性布局——可用性的胜利

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局,到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端们在可用性方面做的努力越来越多。

REM 是一个在 CSS3 中被提出的新单位,相对 EM 变为了针对根元素 <html> 的 font-size 计算,使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前,不妨先说说为何要选择 EMs 进行布局。

脱离了表格布局的蛮荒时代后,越来越多的基本布局方式被应用在了实践中,当然也不乏多种配合。以下就是几个常用技术的对比。(响应式和自适应这两个名词经常被错误使用,例如 自适应网页设计(Responsive Web Design) 这篇文章

  • 固定 Fixed
    使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸,在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典,也是被证明极其不友好、维护困难的方法。
  • 流动 Fluid
    使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。
  • 弹性 Elastic
    使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点,又相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来,但几乎是目前最好的布局方式。
  • 伸缩 Flexbox
    使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大,但是还未普及并且兼容性较差。
  • 响应式 Responsive
    使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,但是在同一个设备下实际还是固定的布局,并且因为浏览器的支持原因对介质的检测还不实用。
  • 自适应 Adaptive
    通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。

READ MORE →

为 WordPress 主题添加文章形式支持和注册自定义类型

WordPress 3.1 之后,推出了一个模仿 Tumblr 的「文章形式」功能,可以让博客中除了默认的文章之外展现出更多的特殊样式。不同的文章形式,可以支持在输出时进行判断处理,以及列出存档等等……很多细心的主题里面都会加上对一些文章形式的支持,如果在面临特殊需求时,希望能够自定义专门的编辑器或者分类目录,那么还可以去注册一个自定义的文章类型。

一 内置形式

WordPress 已经内置对几种常用的文章形式的支持,如果可以满足需要,那么就不需要再重复造轮子了,只需要添加主题对已有形式的支持就好了。内置形式列表如下:

  • standard – 标准,也就是默认的文章形式
  • aisde – 日志,实质上就是个不显示标题的标准文章
  • link – 链接,类似 Tumblr 的链接分享
  • quote – 引语,展示为引用的一段文字
  • status – 状态,简而言之就像是一条 Tweet
  • image – 图像,发布单张图片
  • gallery – 相册,也就是扩充的图像功能
  • audio – 音频,……需要说吗
  • video – 视频,……同上
  • chat – 聊天,以专门格式显示聊天记录

如果想添加对以上形式的支持,只需要在 functions.php 里添加对应的项目即可,然后在输出文章的时候使用函数判断切换不同的样式:

READ MORE →