傻猫网络日志 Samool's blog - 二十年老博客 - 设计
type: channel
link: https://samool.com/tag/%E8%AE%BE%E8%AE%A1/
items: Fibonacci 在 UI 设计中的应用
items: 成都新公园，418万平方米的公园
items: 大成都5条新线车站齐亮相！
items: 关于px、em、rem、rpx、upx的知识
items: Golang 汇编入门知识总结
items: 如何学习一门新的语言
items: 常用的Firefox插件

Fibonacci 在 UI 设计中的应用
type: item
date: 2025-11-27T14:51:07+08:00
description: AI摘要 Fibonacci序列在UI/UX设计中扮演着重要角色，其相邻项比值趋近于黄金比例，带来舒适自然的视觉体验。在UI设计中，Fibonacci可用于布局、网格系统、字体层级、容器与卡片大小、间距和配色等方面，有助于形成自然层次、清晰的重点和舒适的视觉流，提高信息的易吸收性，并在复杂界面中形成和谐。Fibonacci的应用不仅提升了视觉节奏、信息层级、可读性、界面统一性，还降低了设计复杂度，是构建设计系统的有效方式。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 📘 《Fibonacci 在 UI 设计中的应用》Fibonacci Sequence in UI / UX Design一、什么是 Fibonacci？Fibonacci（斐波那契） 是一组遵循“前两项之和等于后一项”的数学序列：[1, 1, 2, 3, 5, 8, 13, 21, …]它的相邻项比值趋近于 黄金比例（0.618 / 1.618）。黄金比例被证明能带来更舒适、更自然的视觉体验，因此 Fibonacci 广泛用于：建筑视觉艺术摄影构图产品工业设计平面设计UI/UX 交互数据可视化大屏展示布局二、为什么 Fibonacci 在 UI 设计中这么重要？✔ 1. 它让界面布局更自然界面中的模块大小、边距、间距采用 Fibonacci 比例，可以呈现：自然层次清晰的重点舒适的视觉流不死板，不平均，不僵硬。✔ 2. 信息更易被用户吸收因为黄金比例符合人类视觉习惯，信息结构按 Fibonacci 排布会让用户感到“顺眼、舒服、有秩序”。✔ 3. 在复杂界面中形成和谐大屏、仪表盘、后台系统往往内容多、层级多。Fibonacci 的不均衡关系（1→1→2→3→5）能让复杂信息变得有序。✔ 4. 自动形成信息权重大模块 = 5次模块 = 3辅助信息 = 2小标签、状态 = 1标注、徽章 = 1这就是天然的信息架构。三、Fibonacci 在 UI 设计中的 6 大应用场景⭐ 1. 布局（Layout）使用 Fibonacci 作为布局比例，例如：主区域：5 份次区域：3 份图表区：2 份数据卡片：1 份高亮警告：1 份示例布局（大屏）：[ 5 ] 主展示（地图 / 网络拓扑 / 运营总览） [ 3 ] 次展示（告警 / 趋势图） [ 2 ] 辅助信息（指标卡片） [ 1 ] 高亮（KPI） [ 1 ] 功能区域（过滤器 / 时间选择）⭐ 2. 网格系统（Grid System）将 UI 网格按 8/13/21/34 划分，而不是平均等分，会让界面更加动态、有韵律。⭐ 3. 字体层级（Typography）Fibonacci 用于字体大小体系非常自然：12 → 14 → 16 → 20 → 24 → 32 → 48这是完美的标题层级体系（非常适合大屏标题）。⭐ 4. 容器与卡片大小（Card / Widget）卡片尺寸建议按 Fibonacci 增长：144px233px377px610px…这种大小之间的“跃迁感”明显，但又统一。⭐ 5. 间距（Spacing）间距系统可以这样设计：4, 6, 10, 16, 26, 42 （≈Fibonacci）比传统 “4/8/12/16” 更有韵律和节奏。⭐ 6. 配色（Color Harmony）这是你最关心的。用 Fibonacci 做配色分成三个方向：（1）颜色数量1 → 极简 3 → 标准系统 5 → UI 完整体系 8 → 大屏图表体系（2）颜色面积比例5 : 3 : 2 : 1 : 1背景：5（50%）主色：3辅助：2强调：1点缀：1（3）HSL 色相偏移主色 H：H + 30° × (1, 2, 3, 5)这就是黄金色相分布。四、Fibonacci 在大屏系统中的实战应用以你正在设计的：综合资源大屏物理层逻辑层用户层运维业务我们可以这样应用 Fibonacci：1. 布局将主区域占比设为 5（40%~55%），次区域 3（20%~30%）。小组件分别是 2、1、1。2. 字体体系H1：48H2：32H3：24H4：20正文：16辅助：14 / 12完美从 Fibonacci 推导。3. 色板体系每个大屏 5 色：背景（5）主色（3）辅助（2）强调（1）点缀（1）这就是你前面用的“黄金配色法”。4. 图表层级大屏图表线条粗细、透明度、颜色权重用 Fibonacci 来体现“信息权重”。…

成都新公园，418万平方米的公园
type: item
date: 2020-12-07T19:53:32+08:00
description: AI摘要 成都新公园天府艺术公园占地418万平方米，位于成都老西门，旨在再现“蜀风揽胜画卷”。公园内包含天府艺术馆、天府美术馆和天府图书馆，其中美术馆屋顶设计为芙蓉花瓣形状，艺术馆和图书馆屋顶为斜向上的斜面曲面。公园预计将于2021年8月前开放，有望成为成都新地标。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 初次对成都加深印象是在什么时候呢？应该是那句歌词唱的那样，走在成都的街道上也停不下来，这首歌火遍了校园，到处都能听到哼着小曲的人。成都的这个热闹的大城市，一个又一个远方的游客的吸引着人们，成都的发展观光业也在这里盛行，父亲总是一种令人羡慕的语气，他的旧同学谁又说成都旅行了，这样，这里真的是一个好地方，这个公园的名字叫天府艺术公园，地点在成都老西门，这个公园的建成范围有多大？这个公园的目的是再现“蜀风揽胜画卷”，既然是艺术类的，那一定展示了艺术性的内容，这个公园还引进了展馆。有天府艺术馆、天府美术馆、天府图书馆，下面详细说明这些展馆。天府美术馆，这个展馆富有艺术性，屋顶是用芙蓉花瓣形状的金属素材建造的，从远处看，这个美术馆是盛开在湖里的芙蓉花。天府艺术馆和图书馆的屋顶造型是斜向上的斜面曲面，对面就是美术馆，今后，如果小队友们如果有读书的欲望，在图书馆中读书，读着书，同时可以欣赏美丽的设计，精神的喜悦心情，同时也能好转，这是什么人的人梦想的生活！该公园的建设是一个文化艺术爱好者争相，但他们在图书馆里徜徉中，美术馆也培养情操，比他们两人呐喊，也在一个地方停留的时间长了，特别是也改变了，从任何角度而言的一种心情，这是文艺爱好者的理想的天堂，今后，这里很有可能成为成都的“新地标”，对这里感兴趣的朋友们不要着急，这个公园将在2021年8月之前亮相。

大成都5条新线车站齐亮相！
type: item
date: 2020-12-07T19:50:37+08:00
description: AI摘要 成都轨道交通5条新线6项目车站集体亮相，各线路车站设计融入沿线特色，展现天府文化。6号线以“科技华章、创新菁蓉”为主题，8号线以“音乐地铁，国际文创”为主题，9号线以“锦绣芳华，绿裳画图”为主题，17号线以“水育柳城，丝织锦绣”为主题，18号线福田站以航空器造型和机舱设计为主题，各线路车站设计展现成都世界文化艺术名城气息。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 就在今天！！！备受关注的5线6项目车站集体“闪亮登场”！5条新线串联成都多个区域，站厅设计也囊括了科技华章、音乐地铁、锦绣芳华、水育柳城等多元风格，将沿线特色融入厅站风貌，用轨道交通串联天府文化！6号线一二三期主题：“科技华章、创新菁蓉”6号线根据站点周边文化定位全线站点，共设两个层级，其中一般艺术站45座（不含西博城站和西北桥站），重点艺术站9座。9座重点艺术站望丛祠站、金府站、西南交大站、建设北路站、牛王庙站、三官堂站、金融城东站、秦皇寺站、天府商务区站。01望丛祠站以“望丛二帝”为主题，灵感源自都江堰的地势水形及成都平原综合交错的自然形态，通过深色的天花格栅和不同层次的绿色片状金属板以表达自然形态中“水与田”的元素。02金府站以“青春活力”为主题，灵感源于紧邻的欢乐谷过山车等游乐设施的曲线造型，通过优美的曲线造型和流光溢彩的色带，表达欢快和动感的游乐气氛。运用鲜明的色彩对比，展现出一个梦幻的世界。03西南交大站以“天堑变通途”为主题，提炼了西南交大象征性的桥梁、隧道、大门的拱形元素作为空间构成的基础要素，以表达“传承、纪念、学术、探索”的主旨；车站艺术品名为“天堑变通途”。04建设北路站以“时光穿梭”为主题，营造科技、未来的空间气质，通过深色的天花背景和线性格栅、灯具，形成明暗对比强烈的震撼的视觉感受，整个地铁站成为链接川蜀工业过去与未来的“时空虫洞”。05牛王庙站以“市井牛王庙”为主题，从老的历史街区场景中提取元素，经过现代手法的演绎，形成一种穿越时空、传统与现代再次对话的独特空间，使人们再次体验到昔日散发浓厚酒文化的市井场景，感受成都老街巷的独特魅力。06三官堂站以“成都工业文明”为主题，提取自四川机械总局旧址建筑的元素，通过回应拱券的造型，使用木纹格栅和混凝土饰面材料，展示出“工业、高大，张力、厚重”的历史感，经过现代手法的演绎，形成一种穿越时空、传统与现代再次对话的独特空间。07金融城东站以“科技金融创新”为主题，通过对可视化的“金融数据”及代表科技核心的“芯片电路”提取动感、强劲的线性元素，并以白色金属为基底，金、银作为点缀性主题色，赋予金融城东站时尚、科技的空间特征。08天府商务区站以“科技创新·AI智能”为主题，提取“人工智能虚拟大脑”的三角形元素，通过重复连续的设计手法，将整个车站空间联系起来，塑造出形式统一并富有变化的多维空间。09秦皇寺站以“科技创新·互联共享”为主题，将抽象的“互联网”、具象的“川西竹编”两种元素相融合，这是刚与柔的碰撞，形与光的契合。体现科技与传统的交织，传达出互联网共享与文化传承欣欣向荣的发展意向。45座一般艺术站6号线一二期工程一般艺术站根据区位，共划分为三个段落，从望丛祠站到西华大道站，为“先进制造业集中、复合型产学研新城”的高新西区展现出“青春创业活力”的文化个性；从金府站到琉三路站，为“历史悠久、文化商业活力强盛”的主城区段展现出“历史科技华章”的人文情怀；从金石路站到观东站，为“现代商务中心、高端产业新城”的高新南区能展现出“时代科技创新”的艺术格调。三期工程整体空间着重于功能性、舒适性，采用空间一体化打造手法，通过将天花、墙面相连，统一设计打造，使整个车站空间浑然一体，塑造出具有“科技感”的空间氛围。8号线一期主题：“音乐地铁，国际文创”8号线一期所经区域覆盖众多教育、音乐及文创产业，故将“音乐地铁，国际文创”作为本线路设计主题，以文创方式多维表现音乐主题的地铁空间，个性鲜明，独具特色。5座重点艺术站川大江安校区站、芳草街站、川大望江校区站、东郊记忆站、理工大学站。01川大江安校区站以“风华正茂”为设计主题，将展开的“书本”作为空间延展的主体装饰构造，“书页”片状的组合形式活泼、清逸，通过冰蓝色灯光的渲染，形象的展现川大新校区现代、朝气的精神风貌和活力。02芳草街站以“玉林百态”为设计主题，提取玉林片区街景风貌的特点，以绿色为基调，通过对金属材料的镂空处理，将空间营…

关于px、em、rem、rpx、upx的知识
type: item
date: 2020-09-30T11:11:48+08:00
description: AI摘要 本文介绍了CSS中常用的长度单位px、em、rem、rpx和upx。px是像素单位，与显示器分辨率相关；em是相对长度单位，相对于当前对象内文本的字体尺寸；rem是CSS3新增的单位，相对于HTML根元素；rpx是微信小程序的尺寸单位，根据屏幕宽度自适应；upx是uni-app的尺寸单位，也是根据屏幕宽度自适应。选择合适的单位取决于项目需求和浏览器兼容性。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点em的值并不是固定的；em会继承父级元素的字体大小。注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。所以我们在写CSS的时候，需要注意两点：body选择器中声明Font-size=62.5%；将你的原来的px数值除以10，然后换上em作为单位；重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。REMrem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：p {font-size:14px; font-size:.875rem;}注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。px 与 rem 的选择？对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。rpxrpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpxUPXuni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upxupx在2018年就推出了，其初衷是为了让微信的rpx机制可以跨全端使用。在普通css写法里，upx会被编译器编译。但动态绑定时，upx无法被准确编译，此时官方提出了使用uni.upx2px()方法，用来…

Golang 汇编入门知识总结
type: item
date: 2020-09-27T14:35:04+08:00
description: AI摘要 本文是一篇关于Golang汇编入门的知识总结，作者分享了自己在学习Golang底层实现机制时对Golang汇编的理解。文章首先解释了为什么需要汇编语言，然后介绍了程序与进程的概念，接着深入讲解了Go汇编的相关知识，包括核心寄存器、常用操作指令等。文章还提供了如何输出Go汇编的方法，并通过对一个简单Go函数的汇编代码进行分析，帮助读者理解Go汇编的实现过程。最后，文章还介绍了一些Go调试工具，如gdb和delve，并总结了学习Go汇编需要熟悉的几个方面。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 作者：ivansli，腾讯 IEG 运营开发工程师在深入学习 Golang 的 runtime 和标准库实现的时候发现，如果对 Golang 汇编没有一定了解的话，很难深入了解其底层实现机制。在这里整理总结了一份基础的 Golang 汇编入门知识，通过学习之后能够对其底层实现有一定的认识。0. 为什么写本文平时业务中一直使用 PHP 编写代码，但是一直对 Golang 比较感兴趣，闲暇、周末之余会看一些 Go 底层源码。近日在分析 go 的某些特性底层功能实现时发现：有些又跟 runtime 运行时有关，而要掌握这一部分的话，有一道坎是绕不过去的，那就是 Go 汇编。索性就查阅了很多大佬们写的资料，在阅读之余整理总结了一下，并在这里分享给大家。本文使用 Go 版本为 go1.14.11. 为什么需要汇编众所周知，在计算机的世界里，只有 2 种类型。那就是：0 和 1。计算机工作是由一系列的机器指令进行驱动的，这些指令又是一组二进制数字，其对应计算机的高低电平。而这些机器指令的集合就是机器语言，这些机器语言在最底层是与硬件一一对应的。显而易见，这样的机器指令有一个致命的缺点：可阅读性太差（恐怕也只有天才和疯子才有能力把控得了）。为了解决可读性的问题以及代码编辑的需求，于是就诞生了最接近机器的语言：汇编语言（在我看来，汇编语言更像一种助记符，这些人们容易记住的每一条助记符都映射着一条不容易记住的由 0、1 组成的机器指令。你觉得像不像域名与 IP 地址的关系呢？）。1.1 程序的编译过程以 C 语言为例来说，从 hello.c 的源码文件到 hello 可执行文件，经过编译器处理，大致分为几个阶段：编译器在不同的阶段会做不同的事情，但是有一步是可以确定的，那就是：源码会被编译成汇编，最后才是二进制。2. 程序与进程源码经过编译之后，得到一个二进制的可执行 文件。文件这两个字也就表明，目前得到的这个文件跟其他文件对比，除了是具有一定的格式（Linux 中是 ELF 格式，即：可运行可链接。executable linkable formate）的二进制组成，并没什么区别。在 Linux 中文件类型大致分为 7 种：b: 块设备文件c：字符设备文件d：目录-：普通文件l：链接s：socketp：管道通过上面可以看到，可执行文件 main 与源码文件 main.go，都是同一种类型，属于普通文件。（当然了，在 Unix 中有一句很经典的话：一切皆文件）。那么，问题来了：什么是程序？什么是进程？2.1 程序维基百科告诉我们：程序是指一组指示计算机或其他具有消息处理能力设备每一步动作的指令，通常用某种程序设计语言编写，运行于某种目标体系结构上。从某个层面来看，可以把程序分为静态程序、动态程序：静态程序：单纯的指具有一定格式的可执行二进制文件。动态程序：则是静态可执行程序文件被加载到内存之后的一种运行时模型（又称为进程）。2.2 进程首先，要知道的是，进程是分配系统资源的最小单位，线程(带有时间片的函数)是系统调度的最小单位。进程包含线程，线程所属于进程。创建进程一般使用 fork 方法(通常会有个拉起程序，先 fork 自身生成一个子进程。然后，在该子进程中通过 exec 函数把对应程序加载进来，进而启动目标进程。当然，实际上要复杂得多)，而创建线程则是使用 pthread 线程库。以 32 位 Linux 操作系统为例，进程经典的虚拟内存结构模型如下图所示：其中，有两处结构是静态程序所不具有的，那就是 运行时堆(heap)与 运行时栈(stack)。运行时堆从低地址向高地址增长，申请的内存空间需要程序员自己或者由 GC 释放。运行时栈从高地址向低地址增长，内存空间在当前栈桢调用结束之后自动释放(并不是清除其…

如何学习一门新的语言
type: item
date: 2020-09-13T17:14:29+08:00
description: AI摘要 本文探讨了学习新编程语言的方法和常见问题。作者指出，仅阅读官方文档和查看开源项目代码对初学者来说并不足够，因为这些资料可能过于复杂或不全面。作者建议初学者从官方提供的Step-By-Step代码开始学习，这些代码由浅入深、有质量保证且更新及时。同时，作者强调了实践的重要性，建议初学者通过小项目逐步提高。最后，作者呼吁开发者社区中的老手和新手之间需要更多的耐心和理解，以减少信息不对称带来的矛盾。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 首先要说，这并不是一篇教你如何学习的文章，因为到今天为止我也没有找到一种通用的方法来解决如何学习的问题。但是在探索的道路上，我确实产生过一些思路，我想把这些思考的过程分享出来让大家探讨。如果这对你有帮助的话，那我会非常高兴。我最近在学习 Rust ，这是一门很酷但是相对冷门的语言（学习冷门语言可能是我的一大爱好，比如我就非常喜欢 CoffeeScript ，这是 JavaScript 的一门方言）。自从在某些语言的舒适区待久之后，经常会产生自己无所不能的错觉，这也是我不断想学习新语言的一大动力。而我的学习过程跟大多数人类似，就是先在网上找文档然后自学。而在看文档的过程中，我就发现了一些问题。手册的作用“去看文档喽。”这是老鸟在面对新手时最喜欢扔的一句话，我通常也是这么扔给自己的。但当你打开一门语言的手册，你会发现它除了教你语法外，几乎没有教你什么其它东西。于是你会陷入这样一个境地：“背下来了么？”“背不下来，太难懂了。”“再看一遍，给我背下来。”。。。“背下来了么？”“大部分背下来了。”“给我写个程序，实现个XX功能。”“不会。。。”“。。。”在一个高级开发者眼里，你会了语法理所当然就应该会写程序了，但实际情况并非如此。这让我想起前段时间跟一个朋友关于目前编程教育市场的一个讨论。我出于自己的经验提出一个想法：让大牛开发者来教新手入门。在我的设想中，大牛开发者拥有强大的实战经验，以及丰富的专业知识，更是自带光环，这不比现在市场上那些半吊子的讲师好多了。在我为自己“伟大”的想法得意的时候，朋友给我浇了一盆冷水。他告诉我这样根本行不通，大牛根本不知道菜鸟需要什么知识，你可能以为基础语法讲清楚就好了，人家却连编辑器是什么都不清楚。设想一下，让一个大学教授去教一群小学生，这对两者来说都是一种灾难吧。这些语言的创造者，或者文档的作者，无疑都是一些大神。它们在撰写一个语言手册的过程中，只能尽量负责地把这个语言的全貌准确地有组织地展现给你。然而这种全面的展现，对于一个没有任何引导的初学者来说并不完全是一件好事。简单来说就是，你会在一些次要的事情上浪费太多时间，而一些主要的概念又没有理解透彻。关于看真实代码当觉得文档满足不了你的时候，老鸟们往往会扔给你第二招：看代码。看什么代码呢？那还用说，当然是被业界奉为经典的，在 GitHub 上至少有一万颗星的知名开源项目代码啦。当你怀着崇敬的心情，打开扔给你的网址，看着满屏幕的代码时，你会对自己问出那三个经典的哲学问题。这是什么东西？它是怎么做到的？为什么要这么写？搞不好某些人还会因为惊吓过度，从而失去了学习下去的信心。那么让我们一起来看看这些代码里有什么鬼东西，会吓得新手信心不足。大段的注释说一件事你们不要笑，在我还是个萌新的时候，我曾经对这些穿插在代码中的神秘文字产生了深深的困惑，我还以为它们对代码有某种加成作用，以至于我还试验过把注释去掉会对代码执行产生什么影响。而现实中好的代码会让后面的维护者方便很多，但不好的甚至错误的注释会让人迷惑不已。语法糖语法糖是个好东西，它大大简化了我们的编程过程，高手用起语法糖写起代码来简直不要太爽，所以越强大的项目这玩意儿越多。但是对于初学者来说，语法糖隐藏了一些细节，而且让语法看起来很怪异。有些代码如果你用标准语法来写是很好懂的，但如果用语法糖来写的话很难让人一下子明白。初学者为了弄懂这些语法往往要花大量时间，但其实这些时间在这个阶段是没必要的浪费。你看不懂它觉得它是一个很重要的东西，其实它只是一个做工精巧的小玩意儿，离开了它这些代码照样能工作。而随着你的经验丰富，也可以随时随地用起来，用的方法可能也不尽相同。代码里的重点对于一个开源项目来说，往往 50% 的代码可能都是在适配各种不同的运行环境，将系统的 API 抽象成项目里通用的接口，这部分代码除非你自己要做类似的项目，要不然的话对初学者…

常用的Firefox插件
type: item
date: 2007-10-11T13:08:36+08:00
description: AI摘要 这篇文章介绍了作者在制作网页时常用的Firefox插件，包括Web Developer Toolbar、CssViewer、Firebug、IEtab、X-ray、FasterFox、HTML Validator、ColorZilla、MeasureIT等，这些插件分别用于网页设计、调试、浏览器兼容性测试、性能测试、校验XHTML标准、获取网页配色、测量页面区域大小等。此外，作者还推荐了一些日常使用的Firefox插件，如Fireftp、AdBlock Plus、All-in-one Gestures、FlashGot、Foxyproxy、MediaWrap、Performancing、Search Status、Tab Mix Plus、Videodownloader等，这些插件功能涵盖FTP、广告过滤、鼠标手势、下载、代理切换、在线音频播放、博客写作、SEO工具、标签浏览、视频下载等。作者还表达了对一个类似Putty的SSH功能的Firefox插件的期待。 document.addEventListener('DOMContentLoaded', function() { const urlDisplay = document.getElementById('urlDisplay'); urlDisplay.textContent = "此内容根据文章生成，更内容请访问：" + window.location.href; }); 我制作网页时会用的几个FIREFOX插件1. Web Developer Toolbar功能非常强大，是做网页设计师的必备工具。2. CssViewer可以在网页中查看某个区域的CSS， 我常常用它研究一些特别的效果是如何做出来的。3. Firebug用来调试网页，如果HTML，CSS或者JS出错，它会有对应提示。4. IEtab在FF切换到IE，省去再打开一个IE浏览器的麻烦。对于测试页面在各种浏览器的兼容时特别有用。5. X-ray名副其实的插件-> X射线，使用了之后直接在页面中查看网页对应结构，比较直观，而不需要查看源代码，这个插件和CSSViewer配合特别有用。6. FasterFox提升FF性能的工具，我用来测试页面的载入时间。7. HTML Validator校验XHTML是否标准，虽然比不上W3C的validator, 但是对于一般应用而言已经足够。8. ColorZilla截取网页的配色工具。9. MeasureIT尺子，量取页面的某个区域的大小。另外有一些我日常使用FF插件，虽然不用于网页制作，但是也很有用。1. FireftpFF的FTP插件。2. AdBlock Plus过滤网页广告的插件。3. All-in-one Gestures鼠标手势4. FlashGot调用下载软件替代FF的下载功能5. FoxyproxyFF的代理切换软件，可以设置白名单，黑名单，自带TOR配置向导，配合TOR可以冲破GFW的封锁。6. MediaWrapFF的在线音频播放插件。7. PerformancingBloging 工具，这篇日志就是通过它写成。支持许多BLOG软件，比如Wordpress, MT.8. Search Status查看网页的PR，Alexa工具。SEOer 必备。9. Tab Mix Plus标签浏览10. Videodownloader 可以下载Youtube等网站的 .flv 视频。我想要的FF插件:希望有一个类似Putty.exe的FF插件，这样我就可以直接在FF的窗口中 SSH 。 了不过我想很多人不需要用到这个功能的，因为不管是Linux,还是Mac OS X, 都可以直接SSH， 而且即使在Windows下，也有Putty.exe可以用。但是我觉得，如果Firefox有这样一个插件的话，那么，所谓的 WebOS 就不远了。文章来源：http://blog.vingel.com/post/23.html