最新 | 最热门 | 最高评价
^..^

+0  把我的个人网站推倒重来（Part 9 - 精简 Bootstrap 编译）

Tag: autoprefixer | bootstrap | css | rebuild | scss | website
Cat Chen 发于 2020年01月03日 08:11 | 点击: 530 | 展开摘要
我在很久之前一篇文章里讲述了我为何选择 Bootstrap 作为样式框架，在那篇文章的结尾我提到了一个我当时没做的优化：去掉我不使用的 Bootstrap 模块。
我现在终于有时间把这项优化做了，我可以先说说做好的效果：Bootstrap 全部的 CSS 共 152kb，在优化后变为 72kb，节省了一半的体积。（压缩后的网络传输体积由 23kb 优化到了 11kb。）这个优化的效果还是很明显的，接下来我说说我具体做了什么吧。（具体代码可以参考我的 pull request

查看全文: http://www.udpwork.com/item/17640.html
^..^

+0  把我的个人网站推倒重来（Part 7 - Google Analytics & Facebook Pixel）

Tag: facebook pixel | google analytics | rebuild | website
Cat Chen 发于 2019年01月18日 04:01 | 点击: 1987 | 展开摘要
网站上线之后，我自然关心访客的数量和来源，于是我决定加上 Google Analytics。同时纯粹出于好奇，我把 Facebook Pixel 也加上了。
Google Analytics 和 Facebook Pixel 都需要插入 JavaScript 到每一个页面上，因此把代码加到 _layout.jade 是最合适的，因为这是所有页面共享的模板。
Google Analytics
在 Google Analytics 创建好「property」后，复制 Goo

查看全文: http://www.udpwork.com/item/17290.html
2

-2  把我的个人网站推倒重来（Part 6 - hreflang）

Tag: hreflang | rebuild | website
Cat Chen 发于 2018年11月24日 15:18 | 点击: 2452 | 展开摘要
因为我在上一篇文章讲 Open Graph 元数据时提到 hreflang，我可以用这篇文章简单讲一讲如何支持 herflang。使用 hreflang 好处的是让 Google 知道多个页面其实是同一内容的不同语言版本，这样在用户搜索时 Google 就可以尽量提供正确的语言版本。
Google 官方对 hreflang 提供了详尽的解释。要让网站支持 hreflang 有三种做法：HTML 标签、HTTP header 以及 Sitemap。我选择了 HTML 标签，因

查看全文: http://www.udpwork.com/item/17216.html
---

+0  把我的个人网站推倒重来（Part 5 - Open Graph 元数据）

Tag: metadata | open graph | rebuild | website
Cat Chen 发于 2018年11月18日 11:15 | 点击: 2369 | 展开摘要
网站发布之后我开始做各种细小的优化，其中一项是为网站加上 Open Graph 元数据（ metadata），使得网站在被 Facebook 抓取时能够显示正确的预览信息。（Google 在抓取时也会参考 Open Graph 元数据，虽然 Open Graph 是 Facebook 提出的标准。）
Open Graph 标准
Open Graph 标准本身并不复杂，看着官方的标准信息把每一项相关的属性都加上。以下是我个人网站上使用的 Open Graph 信息：

&

查看全文: http://www.udpwork.com/item/17203.html
---

+0  把我的个人网站推倒重来（Part 4 - Responsive Image）

Tag: image | rebuild | responsive | website
Cat Chen 发于 2018年10月08日 11:55 | 点击: 1941 | 展开摘要
网站整体完成后，我就可以开始做各种小优化了。其中一个优化是使用 responsive image 来适应不同分辨率和不同像素密度的屏幕，用到的是 <img /> 新增的 srcset 和 sizes 属性以及新增的 <picture /> 元素。因为现在有多套新旧并存的 responsive image 方案，而且它们使用的属性存在重叠，所以要搞清楚到底这些属性如何运作，还是要动手实验。
sizes 属性

<img srcset="

查看全文: http://www.udpwork.com/item/17123.html
---

+0  把我的个人网站推倒重来（Part 3 - 用 Netlify 做静态网站发布）

Tag: deployment | netlify | rebuild | website
Cat Chen 发于 2018年10月01日 04:42 | 点击: 2916 | 展开摘要
之前两篇文章讲述了我用 Harp 和 Bootstrap 搭建新版个人网站的过程，执行 harp compile 进行构建，输出的 www 目录就是我们想要的静态网站。我可以找个传统的静态网站 host，然后通过 FTP 这种古老的方式把文件上传上去。然而这真是我在第一篇文章中说到的一个痛点，我不希望通过 FTP 部署，最好是好像我熟悉的 Heroku 那样通过 GitHub 触发部署，我每次本地更新后执行一下 git push 就行。
Heroku
因为我已经熟悉 He

查看全文: http://www.udpwork.com/item/17102.html
---

+0  把我的个人网站推倒重来（Part 2 - 用 Bootstrap 做移动网页）

Tag: bootstrap | css | rebuild | website
Cat Chen 发于 2018年09月04日 09:38 | 点击: 2061 | 展开摘要
配置好 Harp 做静态网站构建后，就可以开始做网页了。上一个版本的个人网站样式是我自己设计的，当年用的还是 Macromedia/Adobe Fireworks，做出来一个 PNG 文件然后导出为不同的小图片。这次我也有考虑过要不要自己重新设计一个新的样式，但考虑到新设计不如解决其他几大问题重要，于是决定推迟样式设计。现在的计划是，先用 Bootstrap 解决绝大部分的问题，将来有时间重新设计样式了再做成 Bootstrap 主题。
导航栏
我的个人网站对组件的需求很

查看全文: http://www.udpwork.com/item/17073.html
---

+0  把我的个人网站推倒重来（Part 1 - 用 Harp 做模板引擎）

Tag: harp | jade | rebuild | website
Cat Chen 发于 2018年08月31日 23:29 | 点击: 1835 | 展开摘要
根据模板和数据生成静态网站的框架有很多，例如说 Harp、Jekyll、Hugo 等等。我对比了一下，最终选择了用 Harp，因为它是用 JavaScript 写的，如果我真的需要做什么改动我可以轻易地去改它的源代码。用 Harp 的坏处也很明显，这个项目在 GitHub 的源代码上已经很久没更新，搞不好将来不再有人维护。
安装 Harp 和用 Harp 编译生成静态页面很容易。因为 Harp 是「convention over configuration」的框架，所以每个

查看全文: http://www.udpwork.com/item/17047.html
---

+0  把我的个人网站推倒重来（Part 0 - 历史背景）

Tag: rebuild | website
Cat Chen 发于 2018年08月24日 21:40 | 点击: 1795 | 展开摘要
我的个人网站最初是架设在 catchen.biz 上面的，当时还在大学里，只是想做个网站存放简历和作品，方便找工作。那个时候我还自己设计了这个网站的模板，然后用上了时下最流行的 XHTML + CSS + JavaScript 来实现这个模板。每个页面顶部都有一行在 HTML5 时代早已不需要的声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

查看全文: http://www.udpwork.com/item/17029.html
---

+0  偶遇ORA-01450

Tag: 技术 | oracle | rebuild
NinGoo 发于 2012年02月29日 13:35 | 点击: 2852 | 展开摘要
这几天在测试环境部署一个适合多种操作系统多种数据库多实例的监控脚本的时候，在一台测试库上监控到一个索引失效，于是根据提示尝试online rebuild

alter index NINGOO.IDX_TEST_KPI_NAME rebuild online compute statistics;

SQL> alter index NINGOO.IDX_TEST_KPI_NAME rebuild online compute statistics;
alter ind

查看全文: http://www.udpwork.com/item/6918.html
---

+0  Index Rebuild Online 过程(9i)完整版

Tag: Index | oracle | enqueue lock | index rebuild online
jametong 发于 2010年07月28日 10:04 | 点击: 2879 | 展开摘要
昨天晚上洗澡时新想到一个可以有效测试index rebuild online的方式, 也就是同时使用10046与10704 的trace event再配合lock阻塞的机制来测试index rebuild online的过程.

测试的过程如下.

--1. 构造一个500w条记录的表. 并创建需要rebuild online的索引.
--表的数量设置到这么大,,主要是为了给后续的操作留出手工运行的时间.
create table james_t as
select row

查看全文: http://www.udpwork.com/item/2254.html
^..^

+0  WRD 2010 北京站年会总结

Tag: 崔凯杂谈 | webrebuild
崔凯 发于 2010年07月20日 19:03 | 点击: 2634 | 展开摘要
嘉宾分享的内容：

data on the web Klaus Birkenbihl（W3C | 翻译：安琪）

建立前端开发团队 蒋定宇（D-Link 台湾）

谈谈HTML5和CSS3 谢子斌（Opera 马来西亚）

网页性能优化之路 范俊豪（腾讯 深圳）

前端基础架构 张克军（豆瓣 北京）

从浏览器渲染看标准的重要性 梁璟彪（腾讯 深圳）

照片：
flickr | 崔凯的相机 | tension的相机 | rage的相机 | 右右的相机

活动总结：
同 去年的

查看全文: http://www.udpwork.com/item/2096.html
|<<<12>>>| 一共2页, 14条记录