SoberMa

一直以来，很想把我使用的Notepad++这款文本编辑器(TextEditor)和QuickText这个标签代码替换和文本自动完成插件介绍给大家，但是一直疏于整理，一直没能放出，只是私下给几个朋友做过简单的介绍和演示。

近来发现好多网友开始关注编辑器的标签代码替换或者自动完成等相关功能，这也是我一直在使用的一个功能。的确，这是一个很好的功能，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率。

其实，具有文本替换或者代码自动完成这个功能的软件也是挺多的，Windows环境下，至少TopStyle、Komodo IDE、EditPlus、VIM、Emacs等编辑器都具有类似功能的插件。这些编辑器我个人也都曾经用过一段时间，就功能、授权方式以及资源占用方面比较来看，Notepad++和VIM无疑是最好的选择，两者功能都比较强大，都是开源软件，软件本身都比较小，占用系统资源也很少。但是VIM的前期学习成本却太大，全代码的操作方式学习起来确实很令人头疼。这也是我最终选择基本不用学习就可以轻松上手的Notepad++的原因所在。

前面说了一堆不知道算不算废话的废话，本想继续废话，但是想想这些废话本已经存在，我也就不再废话了。想详细了解Notepad++这款软件的请移步Notepad++官网或者维基百科。想了解QuickText这个插件的请移步SourceForge。

废话结束，下面开始上图，用图片的方式给大家带来一个从Notepad++下载、安装、配置，到QuickText下载、安装、配置，到体验快速代码自动完成的全过程。

• 1、打开Google，在搜索框中输入notepad++并搜索
  
• 2、在Google搜索结果中点击进入Notepad++官网
  
• 3、在Notepad++官网中点击上导航的“下载专区”进入下载页面，然后点击“下载Notepad++可执行程式码”
  
• 4、在打开的SourceForge页面中点击绿色的“Download Now!”按钮下载最新的Notepad++程序
  
• 5、双击下载的Notepad++程序进行安装
  
• 6、选择安装位置
  
• 7、如果你想把Notepad++设为默认的IE浏览器源代码查看程序，请勾选“As default html……”选项
  
• 8、完成安装并运行Notepad++程序
  
• 9、Notepad++运行后会打开一个显示软件最新属性的页面
  
• 10、点击下载我提供的Notepad++插件风格包并解压缩
  
• 11、复制QuickText.dll到Notepad++安装目录下的plugins文件夹中
  
• 12、复制QuickText.ini到Notepad++的安装根目录下
  
• 13、复制stylers.xml文件，XP用户到C:\Documents and Settings\用户名\Application Data\Notepad++\ Win7用户到C:\Users\用户名\AppData\Roaming\Notepad++\目录备份并替换原有的stylers.xml文件
  注意：Application Data和AppData两个目录为隐藏目录
  
• 14、打开Notepad++，在菜单中选择设置-管理快捷键
  
• 15、选择Main menu中36行单词自动完成
  
• 16、双击在弹出的窗口中勾选SHIFT选项完成更改
  
• 17、在Notepad++菜单中选择插件-QuickText，可见默认的Repalce Tag快捷键为Ctrl+Enter
  
• 18、点击插件-QuickText中的Options选项可进入QuickText的选项设置窗口
  
• 19、打开Notepad++，在语言菜单中将当前文档语言设置为HTML
  
• 20、在文档中输入dtd
  
• 21、按Ctrl+Enter快捷键，dtd标签自动替换为
  
• 22、打开Notepad++，在语言菜单中将当前文档语言设置为CSS
  
• 23、在文档中输入w
  
• 24、按Ctrl+Enter快捷键，w标签自动替换为
  
• 25、本篇教程也是用Notepad++写成的，截图如下：
  

俗话说，师傅领进门，修行在个人。我不敢自称师傅，只愿这个小小的分享能够有助于大家学习Notepad++和QuickText并利用它们有效地提升你的工作速度和效率。Notepad++的更多功能和技巧，需要在使用中慢慢探索。

点击查看全文 »

PPT内容：关于如何书写高效、可维护、组件化的CSS。内容很有料，很值得深入去看看。

由腾讯Webteam的Jeanne同学翻译自Russ Weakley的《Efficient, maintainable CSS》

Slideshare官方可以直接下载，如果你实在想偷懒，可以留言把邮箱给我，我可以抽时间发给你。

点击查看全文 »

世界万物，不管什么发展都是有一个循序渐进的过程的，Web前端开发在企业中的发展也不例外。前面在说Web前端的相关职位的时候，我简要说了一下公司规模扩大和前端相关职位的变化，Web前端在企业中的发展其实也是有这样一个相应的发展过程的。

公司初创期，Web前端可能都没有专门的人员来做，而是由美工兼任，而其职责主要是完成Web前端页面的HTML和CSS。而对于Web页面的实现方式，则没人去关心。

之后，随着Web标准概念的普及，稍具规模的公司一般单独分出一两个人来做Web的前端制作。这个时候的前端人员主要是用重构的理论和思想完成Web前端页面的制作，但是对于复杂绚烂的的交互效果则只能叹息。

随着Web前端制作的渐入佳境和自我的技术追求以及公司对个人的更高要求，我们开始逐步实现页面的基本交互效果，并制定出自己初步的基本前端架构方案。这个时期所能实现的功能和效果都是极其简单的，而架构规划也是不够清晰且问题多多。

更进一步，人员可能有所增加，也就三五个人而已，但是却要负责整站的Web前端页面了。这个时候，基本的控件都有了，内部也有相应的规范了，各种文档也逐步建立起来了，算是一个逐渐成熟的上升期，看起来已经像是前端开发了。但是这个事情也有很多问题显现，由于我们已经逐步按照Web标准来实施了，但是编辑同学们却还停留在远古的table时代，因而你在做好工作的同时还要抽出相应的时间去进行孜孜不倦的布道和不厌其烦的讲解。而且，由于承接全站的Web前端，还要兼顾培训，所以这个时期的工作压力也是非常大的。

接下来，当你的Web前端团队达到10个人左右的时候，就是另外的一番景象了。这个阶段差不多也是Web前端现有的较高级阶段了，这个时期你需要制定详细的规范，还要去控制项目的整体流程，当然，文档也是必不可少的。你不但要做好Web前端本身，还要做好内部的规范，控制好流程，做好团队的协调配合以及项目文档的撰写和跟踪。

达到这样一个阶段，你也就差不多从Web前端的游兵散勇成长为Web前端正规军的正式一员了，而这个时期也就完全有能力为用户体验的提升提供能量了。但是有时候却要感慨，用高射炮打蚊子到底值不值，而我们制定的规范到底提高了多少效率，而又限制了多少的创新呢？

那到底怎样才算是终极阶段呢？我们正在继续追求！正规军是不是还要继续修炼呢？是的，这就是我们的终极目标，做一名合格的Web前端正规军。

点击查看全文 »