钉子の次元

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

OpenSUSE (Linux) 下安装 Sublime Text

Sublime Text 作为某人御用的编辑器已经到了没有 ST 就不想写代码的地步了 …… 当然因为是 Python 编写, ST 在 Linux 下的安装使用实际上非常简单,唯一需要注意的是输入法 bug 的修复。

Sublime Text 3 with OpenSUSE & fcitx & Google Pinyin

Sublime Text 3 with OpenSUSE & fcitx & Google Pinyin

一 下载主程序

首先进入官网下载官方提供的 Linux 版 tar 压缩包:http://www.sublimetext.com/

READ MORE →

战中考前的碎碎念

今天报道完毕,明天开学。嘛,再怎么说也是初三下学期,基本不会经常上线了呢。

结果一个寒假补课一周、回老家两周、补作业一周,就这么好像做了很多事又什么也没做的过去了。在鸟不拉屎哦不一堆鸟屎的老家看到了这辈子最璀璨的星空,还补了一堆小说,再次萌生了动笔的念头。推进某个项目以及带领其信息架构和原型设计算是最有意思也最辛苦的工作吧,希望能够平稳走入正轨。至于前端,只不过做了一个新个人页和对 Clearison 的重设计,虽然都相当的满意。

嘛,其实是因为原定这个寒假要重新写一个简洁风格的 WordPress 主题换上,结果因为时间不够只能在 Clearison 的基础上稍作修改。尽管看起来不过是换成了透明风格和毛玻璃背景,但是在颜色和阴影方面做文章的工作量实际上也相当不小。先不提好像每次在某群里提一个关乎 JavaScript 的问题不久后我的代码就会成为全群性的事件,这次的改版样式表也感谢修改过程中 @三三 的意见了 ……

嗯。对于接下来没有电脑的几个月的愿望是,在学习上取得好成绩,做一个有趣一点的人。

KDE 上安装 Elementary Luna 窗口风格

这段时间一直在 OpenSUSE 下各种折腾,当然这次明智的选择了 KDE 作为桌面环境。说实话上手相当的辛苦但是也相当的有趣。KDE 没有辜负其极其强大和可自定义的名声,但是和我一直以来的印象一样即使是在曾经号称最美 Linux 的 OpenSUSE 下也恍若上个世纪的默认视觉风格实在有点让人不满。另外一段时间后的使用后更加坚信 KDE 只有程序员没有设计师了,各种强大的一塌糊涂也滥用的一塌糊涂的界面和功能简直无法吐槽。不过无论如何,对于 SUSE 和 KDE 包括其社区自己还是非常的感冒,就是不知道会不会在 Yast2 和 Zypper 安定下来了。

前面说到过默认的 Oxygen 风格至少我是不怎么能接受,于是在调教界面设置时无意间就注意到了熟悉的 Elementary 样式。于是最终效果是这样的:

KDE4 with Elementary Theme on OpenSUSE

KDE4 with Elementary Theme on OpenSUSE

READ MORE →

Modern Sci-Fi Personal Page

唔 …… 大概可以说是预谋很久了,至少是在公布 dp-card 即上一个个人页之前,就准备好要写一个新的主页了。要说直接原因,或许是因为被 JN 吐槽了很多次请换一个,抑或是一时急躁提前公布了之前的个人页无法再用下去了?至少还是在寒假的第二天开工,花了两个下午把这个新的页面完成了。围观→

dp-modern

dp-modern

其实很早就有过好几个版本的设想了,但是脑子里浮现出来的基本上是 iOS7 风的单页长视差。大气一点的原则自不必说,之前的个人页自己烦恼了挺久的隐蔽的博客入口的问题也得好好解决。不过等到某天骑着单车准备补课的时候,脑子里却冒出来一个与之前完全迥异的思路。然后等到做完数学试卷后,某人就开始在本子上涂画了起来。

READ MORE →

一个 Div 可以做到的 ……

起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性,于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素,全部效果完全通过 CSS 实现。查看效果→

One-Div-CSS3-CD

One-Div-CSS3-CD

DOM 如下:

<body><div></div></body>

光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现,为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加,其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟,在别的内核下貌似没有效果。

READ MORE →

某钉子 2013 年的浏览器 A-Z

嗯 …… 纪念意义上。有几个字母确实是经常用到。嘛,不知道明年会是怎样的呢?

这段时间一直因为期末考忙碌的要死,当然也作死爬上来了不少次,只是,噩梦般的寒假似乎一点也不值得期待呢 …… 华丽丽上午下午晚上三个补习班,与此同时剩下的时间都必须让项目赶上进度,实在是不敢再挖坑了摔 ……

READ MORE →

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

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

dp-card

dp-card

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

READ MORE →

圣诞节的碎碎念

感觉在圣诞还继续保持沉默的话存在感就要跌到冰点了 …… 看着被菊苣博客们的圣诞贺文刷屏的 Pocket 果然自己也还是来一个例行扯淡吧,不过一直以来保持着相对有篇幅的更新,总觉得忽然间出现一篇闲话有点突兀呢。

话说昨晚用 Pixiv 站 order_by_popular 的 GET Bug 把人气前五页的小忍图全部收了 同时发现了一个绝赞的 R-18 作者 ,淡但是最后还是没有找到适合的圣诞图只好作罢。于是个人页现在居然还保持着万圣节特典的样式,不过找到了几个不错的素材果然还是抽时间 ReDesign 一下吧。

平安夜晚上大概一点也不平安,最后三三表示「你们阳光一点行不行啊」 …… 一晚上作业也没有好好写,心情烦躁最后还是打开了电脑。整个晚上除了收到了母上的一个蛋糕之外也没有什么过节的气氛,要说 Some Special 顶多算是晚上又认识了几只菊苣 ……

今天早上某同学大发善心请全班每人三颗阿尔卑斯 然后被同桌妹纸抢走了一颗 ,钉子也去买了袋薯片和百力滋给小组瓜分,结果事实证明寄放在某吃货妹纸那是十分错误的选择。除此之外和还有圣诞节相关的话大概就是在钉子的示范效应下同桌三人花了一节英语课 (……) 各出了一张意义不明的圣诞贺图,请参见姬加→

大概这个圣诞也就是这么简单的过了,不过马上学校又要有元旦晚会。这次天来对自己的表现有点失望,不过希望能够再继续加油吧。… Finally, merry Christmas.

Fly Out.

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

READ MORE →

StartPress – 空 WordPress 主题脚手架

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

StartPress

StartPress

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

READ MORE →

カラフルなのダイヤルパッド

大概当时的钉子,还处在非常好的状态。期中考做好历史新低的准备,结果是历史新高;只接过两百元的第一单,然后就接到了一千五的第二单……于是某人果断决定出血一回,稍微慰劳一下自己劳累的心灵——

钉子の无脑购物行为 案发现场底片

钉子の无脑购物行为 案发现场底片

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 →