Category: Web Design

  • Run Google Lighthouse in Docker Container

    Thanks to my Colleague Simon’s suggestion, I was introduced to Google Lighthouse, an opensource nodejs framework to use Google Chrome to audit a website’s performance. I like Lighthouse because: opensource good portability can run as CLI command or as a nodejs module Here’s a sample Dockerfile to have a container ready to run Lighthouse with…

  • Build a Chrome Extension with VueJS

    It turns out quite easy to build a Chrome Extension. Basically the extension is a web application containing HTML, JS, images, etc. I tried to build a simple extension using VueJS recommended by colleagues. There’s just 1 limitation that affected me: The eval JS function is disabled in Chrome Extensions for security reasons. That means…

  • Cherokee 完美配置 Joomla! 1.7.x

    下面是从头开始配置 Joomla! 1.7.x 的步骤. 环境是 Ubuntu 11.10 64bit + Cherokee 1.2 + PHP 5.3 + MySQL 5.1: 登录到 cherokee-admin vServers > + > Manual. 以下假设建立的 vServer 是 mysite vServers > mysite > Basics : 在 Document Root 填写 Joomla! 的安装路径, 例如 /var/www … Dirctory Indexes: index.php, index.html vServers > mysite > Behavior: 添加 PHP 支持:…

  • Joomla! 1.7.x 缺省模板的 Page Class

    真是不理解, Joomla! 1.7的缺省模板Beez2里居然没有把 Page Class 写在 <body> 里面. 在菜单条目里可以给每一个页面设置 Page Class, 但如果 Page Class 不是出现在模板的 <body> 里, 那通过 Page Class 来做特定页面的 CSS 布景就不能实现. 还好, 找到了实现方法: 编辑/templates/beez_20/index.php. 在33行找到: $doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true); 在之后添加成: $doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true); $pageclass =  & $app->getParams(‘com_content’); 然后, 找到 <body> 并改为: <body class=”<?php echo $pageclass ->get(‘pageclass_sfx’); ?>”> 任务完成. 😀 参考链接: http://forum.joomla.org/viewtopic.php?f=619&t=623802&p=2653319#p2653319

  • 古董越老越好, 浏览器可不是

    今年初, 终于, 微软自己也受不了自己的IE6了. IE6倒计时网站开通后, 微软也呼吁网民放弃”好汉不提当年勇”的IE6浏览器. 遗憾的是, 尽管中国大陆毫无竞争的拿下这款娘家不疼亲家不爱的浏览器的最高份额, 但微软显然”don’t give it a shit”居然没有做个中文版出来 😀 十年前, 一款浏览器诞生了, 它的名字是IE6. 而现在是2011年, 是网络新标准的时代了. 是时候说再见了. 尽管我从2004年就抛弃IE6了, 但为了我的访客和用户们, 我不得不保留一份IE6作为测试使用(相信很多做过web前端的朋友都是如此, 并为了IE6而加班加点). 希望IE6早些安息吧. 如果想在网站中明确声明本站不支持IE6, 可以如此(下面应该写在<head></head>里面): <script type=”text/javascript”> //CHECK FOR IE6 function is_ie6(){ return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)); } function alert_ie6(){ if(is_ie6()){ alert(‘我注意到您还在使用微软IE6.0浏览器或者基于IE6.0内核的浏览器. ‘); alert(‘很抱歉本站在IE6.0下有点走样子, 因为本站采用很多新技术而IE6.0已经是10年前的产品了, 现在IE最新版是9.0, 更快也更安全, 也能更好的浏览本站.’); } } </script>…

  • 自己动手, 装修淘宝店

    前些天帮朋友公司做了淘宝店铺的模板, 我上手还是很快的, 还没老哈哈. 然后顺便的把自己的小店铺也装修一下, 秀一下成品: 新模板: 对比之前淘宝提供的扶植版 顺便做一下笔记: 制作淘宝模板并不麻烦, 只要有网页设计/制作的经验, 懂HTML/CSS就可以开始了. 首先要申请成为淘宝设计师, 然后下载淘宝SDK(这个SDK有点名不符实, 没有提供什么开发工具, 只是个本地测试环境), 本地制作好之后, 上传到淘宝等审核即可. 我用到的工具有Adobe Fireworks(设计/图片处理. 这个没有Linux版 🙁  ), Komodo(HTML/CSS/…编辑器), FireFox + FireBug/ Chrome + Developer Tools(预览, 排错).

  • 小试Joomla! 1.6

    Joomla! 1.6已经放出有一段时间了. 相比Drupal7, 我觉得Joomla! 更适合于制作企业网站, 而Drupal更适合做社区/SNS这类的网站. 下面杂乱的记一下使用Joomla!制作网站的一些笔记. 去掉缺省模板beez5里面的字体缩放, 这个还真不好找呢. 打开/templates/beez5/index.php, 找到如下一行, 应该在30多行处吧, 删除或者注释掉: $doc->addScript($this->baseurl.’/templates/beez5/javascript/md_stylechanger.js’, ‘text/javascript’, true); 图文并茂的显示banner, 这个要求不高, 不过却要修改一番. 首先要override(这个我怎么找不到对应的中文词) banner的模板. 新建或修改 /templates/beez5/html/mod_banners/default.php, 在图片代码之后添加即可: <div><span><?php echo $item->params->get(‘alt’); ?></span></div> 然后,  Alternative Text里面的文字就可以在图片后显示出来了. 为每个页面设定class. 缺省模板beez5里面, 竟然没有任何对于<body>的代码, 想给<body>添加个class对吧? 至少我非常希望这样. 编辑 /templates/beez5/index.php, 在顶部的php块里添加: $active = JFactory::getApplication()->getMenu()->getActive(); 然后把<body>改为如下即可. <body class=”<?php echo $active->alias; ?>”> 这样如果你给菜单首页链接的alias是homepage, 那么首页的body html应该就是 <body class=”homepage”> 这样接下来写CSS就非常轻松了, 例如: body.homepage…

  • WordPress & Gravatar

    WordPress 内核已经包含了对Gravatar的支持. 在Comment里看到自己的头像, 谁都不会反对吧. 如果Post标题旁边有作者的头像呢, 岂不是更好? 参考文章: How To Add Gravatars For The Post Author in WordPress 主要的代码就是一行: <?php echo get_avatar( get_the_author_email(), ’80’ ); ?> 如果希望和Comment风格保持一致, 再加上<div>就差不多了. 不过我这就不改了, 因为每一篇都是我写的. 🙂