Windows 上使用 Github 手记

本准备玩一下 Google Code 上的 Git ,孰料 Google 提供的这个服务极其蛋疼,也许是本人才疏学浅吧,那个莫名其妙的 .netrc 文件就是不能让我免于在 pull/push 时输入密码,各种文档和解释也是含糊其辞,忍无可忍,纵然作为一名 Google 粉丝,我也只有投入 Github 的怀抱了(当然,该使用 SVN 的地方还是继续)。直接进入正题吧,首先是环境的搭建(本人使用的是 Git + msysgit + TortoiseGit + Putty 的组合):

1. 先下载所需要的安装程序:Gitmsysgit、TortoiseGit(32bit64bit)、Putty (以上均为官方下载链接,如担心有毒请自行Google);
2. 顺序安装以上下载的程序(先关闭所有的窗口,360会报不安全,信任就好),基本就是一路Next了,这个没啥好说的;
3. 注册一个Github帐号:https://github.com/plans,不必理会那些Plans,免费账号就可以创建无限制的开源项目了,只是容量小点(300M,不知道是每月还是总共,反正小项目来说是够用了);
4. 创建一个新的项目:https://github.com/repositories/new
5. 在开始菜单中找到Putty的文件夹,打开PuTTYgen(密钥生成器),点击生成,然后出来一个类似于这样的东西(公钥):
PuTTY密钥
点击保存私钥,随便起个名字随便放在哪(无视关于叫你填写密码的提示);将图中显示的公钥复制,打开Github中Account Setting页面里的SSH Public Key 选项卡,选择 Add another public key ,将刚才复制的公钥复制进去,随便起个名字,提交;
6. 在开始菜单中找到Putty的文件夹,打开 Pageant ,选择增加密钥,把刚才保存的那个后缀名为 ppk 的私钥导进去;
7. 在 Dashboard 页面的 Your Repositories 栏目下可以找到自己创建的那个项目,点击进去。能得到该项目的 Git 地址,比如我创建的 Shadowblue 地址就是:

找到你要放置项目的地方,右键选择 Git Clone , Url 处填入刚才那个地址,点击 “OK” ,项目就应该在本地成功建立了。

然后就是使用了:

1. 在本地项目目录中添加或进行改动以后需要先 Commit(你也可以用命令行,不过我这里示范时使用右键菜单中的 Git Commit -> “master” ),选择需要提交的改动,点击“OK”,这个时候项目的版本就在本地维护起来了;
2. 选择右键菜单中的 Git Sync .. ,在出现的界面中先选择 Pull,然后 Push,全部顺利的话,就会将本地的版本管理与服务器上的同步了。
3. 使用的时候稍显蛋疼的是每次开机或退出Pageant以后都要重新打开它并导入密钥以后,Git的验证才能通过,不像TortoiseSVN是自动保存的(可能是我没研究透彻吧)在TortoiseGit -> Setting -> Remote -> origin 下的 Putty 项中通过浏览加载先前保存的 ppk 文件并保存,Sync 的时候勾选 Autoload Putty key 选项,每次就会自动打开pageant载入key了;
4. 当服务器上的代码有变更以后,本地必须先 Pull 以后才可以 Push ,有效地避免了 SVN 上你刚上传一个东西,就被别人覆盖掉的坑爹情况,麻烦就麻烦一点吧,习惯就好;
5. 推荐使用 WinMerge 取代 TortoiseGit 自带的 Merge 工具,因为自带那个太蛋疼了。WinMerge 安装以后,在 TortoiseGit -> Settings 中,将 External Programs 下的 Diff Viewer 及 Merge Tool 中的 TortoiseMerge 改为 External ,下面填写 WinMergeU.exe 的路径即可,比如:

当然你如果觉得自带的 Merge 工具更好那就当我这条没说吧~
6. Have fun with Git ~

PS:这里不想讨论 SVN 与 Git 孰优孰劣的问题,有此兴趣的朋友请绕道。

图片预读

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 <script/>块里(事先请保证已加载jQuery类库):

调用的时候,使用以下代码:

如果不喜欢使用jQuery,那么可以将这个方法改写为:

用DD_belatedPNG插件修复IE6 PNG

IE6是一个令人作呕的话题,个人极为厌恶IE6,并且恨屋及乌,不过没有办法,中国就是这么一个神奇的国度,到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣,不知道浏览器为何物的也更加不提了,而这种人往往又是互联网中广告点击的生力军,消费能力强,所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一,恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果,到了IE6这儿就得纠结蹉跎,虽然IE6勉强的支持PNG-8格式的伪半透明,但这个和GIF图片的效果相差并不大,如果你使用PNG-32的话,你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具,各有千秋,大多数使用了IE的一个滤镜:AlphaImageLoader,使用后会有各种诸如问题(比如background-position和background-repeat属性支持的不完善,有些还会擅自更改背景图片的尺寸)。DD_belatedPNG提供了一种新的选择,他使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难,先在此下载DD_belatedPNG ,然后插入head标签中:

将所有需要需要修补的元素加上class=”png”即可

PS:对于:focus和:hover伪类,则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW:虽然这样可以缓解IE6下PNG的问题,不过会带来性能问题,还有一些其他的问题,自然是不如对png半透明有原生支持的浏览器的。所以,赶快让该死的IE6下地狱吧。阿门!

一个最简单的基于PHP+jQuery的AJAX例子

说在前面:本文只作为一个笔记留存用以达到语言重用的效果,可能对于很多大虾过于入门级,请直接无视。

基本上一说起ajax,大家都感觉到比较神秘,我以前也是这样,总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码,以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解:html、css、js(jQuery等)是给浏览器看的,PHP是给服务器看的,js可以和php对话,而php可以生成html、css和js,以前我们浏览网页的时候,总是通过操作html,通过php告诉服务器我们需要什么内容,然后服务器会在一个新的页面将你请求的信息展示给你;而ajax,即是我们操作html时告诉js,然后js告诉php,php得到命令以后到服务器去取了你要的信息交给js,js再将此信息展示给你。这么看来ajax貌似更复杂一点,但是他带来几个好处:1. 你不需要进入一个新的页面就可以看到你所请求的信息;2.php只需要提取出产生了变化的有限信息即可,减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为,但是把刷新页面这件事交由js在后台偷偷完成了。
继续阅读一个最简单的基于PHP+jQuery的AJAX例子

Wdorpress 模板:ShadowBlue 0.5 Beta

Shadowblue这模板发布也有一段时间了,正式发文也就是0.1 alpha 的时候,其后陆陆续续修改了一些小BUG,更新到了 0.3 。过年期间到现在一直很忙,所以一直没有什么大的更新,这两天抽空添了点儿内容,升级到 0.5 Beta ,也算是一个迟到的新年礼物吧。

Shadowblue 0.5 beta 在外观上和前面的版本没有什么太大的不同,就是增加了一个后台,可以用来控制顶部广告位、社会化链接显示的内容,切换内容部导航栏分类与标签的选项,也增加了一个底栏的开关(因为我发现有很多朋友不大喜欢底栏)。本人实属懒人,十分能理解懒人们的疾苦,有了后台朋友们就不用去改代码了。

目前后台可控的项目不多,本人会逐步改进并即时更新到 SVN 中并在Demo中体现出来,有稳定版本也会直接升级到下载地址,如果您喜欢这个主题,请关注开发页面,欢迎提供各种意见和建议,我会在后续版本中改进,谢谢!

下载请移步开发页面