芳草苑

Month: February 2011

  • Learned something basic

    今天又长知识了。

    首先，最简单的，更正了长久以来的想当然，php 下 explode(‘,’, ”) != array()，而是得到长度为 1 的数组，key 是数值 0，value 是空字符串。天哪，我有多少个程序是基于 explode(‘,’, ”) == array() 写下去的，这下影响大了，得好好查一查。

    其次，发现一个不晓得是 sshfs 的 bug 还是 gedit 的 bug。复制错误的过程是：用 Nautilus 或 Dolphin 打开 sshfs 挂载的目录，右击创建一个新文件。文件创建是成功的，属性是 774，用 gedit 打开它却无法保存，提示是没有写权限；但用 kwrite 编辑保存一切正常；用 gedit 再编辑 kwrite 编辑过的文件又能保存。或者，在右击创建一个新文件后，执行一次 chmod 774 filename，也能用 gedit 编辑保存了。

    再次，发现在 IE6 下，用 javascript 增大元素的尺寸（比如 jQuery widget 化，增加 border，增加 padding，等），会增大父元素的尺寸。哪怕父元素已用 css 静态赋以宽度值，宽度也会被改变，这是某些精心布局在标准浏览器下很好看，到了 IE6 就面目全非的一大原因。万恶的 IE6 啊，当然从另一方面，说明精心布局仍不够“精心”。为 IE6 布局好比极限运动，挑战好心情的极限；如果看到下属多花一倍时间 fix for IE6，挑战的也是老板的心理极限。

    然后，发现 jQuery gallery 里有两个 themes (Humanity, Vader) 的参数不太正常，多了 tr 参数，不知道怎么多出来的，删了似乎没影响。

    最后，如果父元素包含所有的子元素都是 float:left 或 float right 的话，不做特殊操作，父元素是没有高度的。父元素的后续元素用一个 clear:both 就能站到该站的位置，但如要为父元素本身画一个边框就稍有难度。最早我用的办法是在这个元素所有的子元素之后增加一个隐形的<div style=”height:0; clear:both;”></div>，但这个硬生生加进去的元素改变了 DOM 结构，破坏了语义，不够 SEO。在 Magento 里学到了另一个方法 :after { clear:both; }，如 .clearer 的示例，但要为低版本的 IE 专门写 clear after fix。我维护一份自己的 style.css，override Magento 原版的 style.css。我觉得这个任务就很“繁重”，如果再来一份自己的 style-ie.css，override Magento 原版的 style-ie.css，就为 clear after fix？总觉得小题大作。今天发现一个 clear after all floating children 的 neat solution，就是在父元素上设定 style=”overflow:auto; zoom:1″。overflow 让父元素调整到应有的高度，zoom 也是必须的，否则 IE6…，唉！

    最后的最后，发现 z-index 值在 IE6 下被重置的简单通用的 fix。这个问题的来源是若干个 position 后的元素，给它们设定 z-index，IE6 下根本不按设定值 layout，而且还摸不到规律。比如下拉菜单，有时被其他东西给压住。fix 是赋予下拉菜单 z-index 时，赋予父元素（整个菜单）更高的 z-index。

  • Living in the UK

    今天得到感想都是来自生活中的琐事。

    • 因为按揭，我在新的银行开了户。以前没接触，初次合作就发现她能提供一堆比汇丰好很多的服务，比较之下，过去的一个月，汇丰让我损失了 £200 左右（包括多收费和少收益）。
    • Phones4u 还在卖 HTC Wildfire，£129.99 including VAT。隔壁 Carphone Warehouse 在卖 £229.99。大牌就需要这么标价吗？
    • 从 Debenhams 买了件休闲服，was £50, now £25，我花了一分钟试了一下就决定买了。用的是三年前的 gift voucher，刚好面值 £25，付款也很顺利。Gift voucher 给我的印象这玩意一不留神就过期了，虽然三年前我用第一张 gift voucher 时，我就问过 counter 这玩意什么时候过期，她说永不过期。三年后我把第二张 gift voucher 递给 counter 时，我心里还在想，“你敢说过期俺就找经理”？因为咱们吃过很多多变政策的苦了。事实是，counter 拿起 barcode scanner 一扫，就开始 print receipt，中间没多一句话，我很满意。
    • 从 Sainsbury’s 买的便当里的白饭竟然是夹生的。机器化大生产出来的食品连生熟都控制不好，让我实在怀疑 Sainsbury’s 的整体水平。

  • Create a Magento admin panel user with read only privilege

    A third party Adwords professional requested a read only access to Magento admin panel, which raised the question to me: how to create a Magento admin panel user with read only privilege?

    I am keen to do this job via ACL. Magento ACL role resources start from module to controller to action, I can not differentiate read/write privilege at the root level of role resources. It means it involves a lot of hassle coding up ACL in adminhtml.xml when creating a role with read access to all modules, because I have to code for every action, for example, indexAction is a read role resource, saveAction is a write role resource, editAction can be a write role resource if it actually saves data itself, or be a read role resource if post data are posted to saveAction.

    Luckily, in my case, the Adwords professional only requested access to two modules – Catalog and Reports. As for Reports module, I treat the whole module as read only, so I simple check “Reports” node in the role resources tree.

    As for Catalog module, the Adwords professional only requested to view product list, so I create several children of “Manage Products” node. The children map to all actions in Mage_Adminhtml_Catalog_ProductController, for example, product list maps to indexAction, product detail maps to editAction, product add and update maps to saveAction. I check indexAction node. I could check editAction (because it is read only process) as well but the Adwords professional did not see its necessity.

    The last thing left to do is differentiating privilege by role resources node. It is a very simple change – override Mage_Adminhtml_Catalog_ProductController’s _isAllowed() method from

    protected function _isAllowed()
{
	return Mage::getSingleton('admin/session')->isAllowed('catalog/products');
}

    to

    protected function _isAllowed()
{
	$action = $this->getRequest()->getRequestedActionName();
	return Mage::getSingleton('admin/session')->isAllowed('catalog/products/'.$action);
}

    I think there may be another to differentiate read and write role resource using ACL, because when I look at a sample adminhtml.xml file, it says

    	<acl>
		<resources>
			<all>
				<title>Allow Everything</title>
			</all>
		</resources>
	</acl>

    What does it means? Does it imply I can do something like

    	<acl>
		<resources>
			<read>
				<title>Read only</title>
			</read>
			<write>
				<title>Read and write</title>
			</write>
		</resources>
	</acl>

    ?

  • Feed ThemeRoller with current theme parameters

    If you are working on jQuery UI site to roll your own theme, you can always load your theme parameters by copying and pasting a long string into address bar, such as:

    ThemeRoller

    But, when you are working on your own site, using ThemeRoller Dev Tool for FireFox, you can not load the current page’s theme parameters into ThemeRoller easily. I find two workarounds. I must admit the workarounds are not easy either. There must be some easy “click-to-load” method, but I did not figure it out.

    My solutions require FireBug.

    Solution One.
    1. Copy your theme parameters string to clipboard. The string is as you see before:

    ffDefault=Lucida+Grande,+Lucida+Sans,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    Please do not include “#” or “?” at the beginning, because when you paste, sometimes it requires a hash separator, sometimes a question mark separator. You’d better enter the separator separately at the time it requires.

    2. Launch FireFox, Go to the web page to custom a theme for, Launch ThemeRoller, Launch FireBug

    3. Find ThemeRoller <iframe> element, which is inside <div id=”inline_themeroller”> element, change <iframe> src by appending a hash and pasting theme parameters string. In another words, change src from

    http://jqueryui.com/themeroller/developertool/appinterface.php

    to

    http://jqueryui.com/themeroller/developertool/appinterface.php#ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=138b14&bgTextureHeader=01_flat.png&bgImgOpacityHeader=75&borderColorHeader=138b14&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=138b14&fcContent=138b14&iconColorContent=222222&bgColorDefault=138b14&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=7…=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=ffffff&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    4. By now, you will see ThemeRoller “Roll your own” tab has loaded your custom values. However, the page appearance does not change until you enter any value box and hit Enter out.

    Solution Two. It enables you to add your customised theme to ThemeRoller Gallery (temporarily), so you can switch and compare.

    1. Same as Solution One

    2. Same as Solution One

    3. Find an <a> element of a Gallery theme and change its href. For example, the first theme in Gallery, its href is

    http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgI…gOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px

    Change to

    http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Lucida+Grande,+Lucida+Sans,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    The thumbnail of the theme won’t change unless you change the src of <img> inside <a>. I assume you won’t bother about changing the thumbnail as long as you know which thumbnail represents your theme.

    You can change more than one theme in Gallery to various versions of your theme, so you can click and switch between them quickly.