之前我发表过一篇文章介绍我们自己的组件/模块生成器，今天在网上偶尔发现国外有一套类似的JOOMLA生成器，他有个显著的特点是生成的类使用extends mosDBTable风格，这样所有的数据库操作都可以使用ORM的方式，并且提交到页面的POST可以直接转化为一个对象，简化所需的操作。这种风格在我们开发过程中应该是积极提倡的。
Joomla Module and Component Maker 演示使用地址:http://www.joomlatexas.com/index.php
之前做JS接触到的大多是dojo,jquery,prototype，WZ之流，多少存在一些问题。
直到接触JOOMLA，发现里面有些很酷的效果，而且性能也很好才发现都是幕后功臣motools也是个不错的东东。
MOTOOLS
特点介绍：
核心feature：
Accordion：文字卷帘，可以在一页显示多页信息，点击标签卷帘收缩展开
customEvent：1.对mouse wheel的支持，2. 可以定义全局的特殊方法，比如enter事件的处理，然后做控件-方法绑定即可，使用继承方式来获得系统事件，例如：keyenter 就是原来的系统事件
Element.Events.keyenter = {
base: ‘keyup’,
condition: function(e){
// We can basically put any logic here.
// In this example we return true, when the pressed key is the
// Enter-Button so the keyenter event gets fired.
return e.key==’enter’;
}
};
绑定过程也非常简单
$(’myElement’).addEvent(’keyenter’, function(e){
// We can do everything here: submitting a form, sending an AJAX-Request and so on
// because it only fires when the user presses the Enter-Button
e.stop();
// But instead we only change the text of an element.
$(’myDivElement’).set(’text’, ‘You pressed enter’).highlight();
});
SORT/Dynamic Sortables排序
支持drag and drop 的排序。而且item可以runtime 生成
EFFECT:渐变变形/MOTOOLS 精髓
还记得JOOMLA酷酷的黑色弹出框吗？其实那在MOTOOLS不过是一DIV变型，
MOTOOLS支持的变形有morph，erase，tween，start
包括变长度，变颜色，变透明度，位置移动，或者甚至CSS的改变,可贵的是motools支持的全部都是渐变的动画效果
Slide：
变形的衍生功能，可以收缩控件做出某种slide效果，
Mouseenter和Mouse leave：加强的mouseenter和mouse leave，javascript的mouse enter 和leave 一直不太好用，要么不调，要么反复掉，现在MOTOOLS把它增强了。
Json/Ajax：仍然是很干净很简单的style来支持ajax
更多精彩请看源码！我已经把motools的sample一一下载并打包上传了，点击这里下载！
30+ Joomla Tools and Resources
Joomla, formerly known as Mambo, is a popular open source Content Management System (CMS). As with most open source projects, there’s a ton of free tools out there for you to use. We’ve chosen over 30 useful extensions and other tools to make your Joomla life easier. Enjoy.
Don’t forget to check out our post where you can suggest future toolbox topics! (this list came from one of the suggestions) Read the rest of this entry »
http://sixrevisions.com/tools/faster_web_page/
就是一些测试web page loading performance的东东.
web page的提速一般有以下几个方向:
1. 减少http connection打开的次数, 比如把所有js并成一个, 把所有css并成一个. 使用一个大的PNG把所有图标都放上面, 然后用css里不同的position去控制显示哪个图标, 这些都是尽量减少http connection连接次数
2. 压缩, gzip支持
3. 优化和压缩css和js, 减少空格和换行, 以减少文件大小
4. 减少一个page里包含很多domain下的resource. 避免多余的DNS lookup
5. 还有很多小玩意, 比如让page早点load出来, 在body和head中间flush一下…
CSS的N多跨平台的Tips, 值得一看, 值得记录一下
You might be interested to check our other related post for some inspiration:
1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. So you simply go from something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px; }To something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display:inline;
}
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}Do something like this:
#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/4- Min-Width for IE -A fix for the lack of min-width in Internet Explorer.
5-Centering Block Element- There are multiple techniques for centering a block element; and the choice for the technique depends on whether you have the size set in percentages or in more absolute values.
Centering an entire page’s contents:
body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}#wrapper {
width:530px;
height:25px;
background:url(container.gif) no-repeat left top;
padding:0px 10px;
}
#wrapper p {
line-height:25px;
}7- Top reasons your CSS columns are messed up- An easy-to understand article on how to fix common CSS Column issues with helpful diagrams and code snippets.
9- Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in positioning.
#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}
To get this:
#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}
12- CSS Float Theory: Things You Should Know- SmashingMagazine browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.
<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>
/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{display: inline-block;}
/* Hides from IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}
/* End hide from IE-mac */
15- Mike asks the CSS Guy for recommendations on rounded corners- “Simplest way is to use a giant gif, then I’ll markup my box”
<div class="roundBox">
<p>beautifully-encapsulated paragraph</p>
<div class="boxBottom"></div>
</div>“And give it the background”
.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}
17- Tips For Creating Great Web Forms- Cris Coyer shares with us some tips for floating labels, :focus Pseudo Class, using hints and more. He also created the Nice & Simple Contact Form, which he first posted about here.
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
20- Cross browser Horizontal Rule with Background Image- You’d like to create a cross-browser horizontal rule that utilizes a custom image as the content separator.
div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}<div class="hr"><hr /></div>http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html今天把Drupal里的Views测试通了, 用起来很好很强大. 只可惜是beta版, 非常多的dependence的module都不得不beta版. Drupal6出来这么久了, 这些module的porting工作进展怎么还这么慢.
今天一个收获, 找到不少发票模版, 以后给客户开局发票方便了.
研究core的api中, 目前暂时感觉很烦很不直观, 不过这种东西, 慢慢摸透潜规则才能看明白. 对里面的hook基本走了一遍, 有点感觉. DB_rewrite那个hook也太强了点…
基本玩熟了, 这种开源项目, 学习方式
发现了如下很cool的功能, 确实drupal的灵活度是joomla不可比拟的, 哪怕joomla使用sobi做后端data model.
从整个过程看出, Drupal的自己功能还是plugin功能, 都强调高度灵活性, 比joomla不是一个级别的. 里面的Action List, ACL, Module的运行方式, 各种Hooks都比Joomla强劲, 但是UI效果确实一般. 不过追求功能的今天, 更重要的其实是你的web能否便利的为用户解决一些困难. Common的UI用户也能接受.. hehe
Amazon Simple Storage Service (Amazon S3)
简单的读写功能, 比自己搭建大型的数据仓库便宜的多, 在项目还处于prove concept期间, 用这个方案即稳定, 又大大节约硬件和软件成本. 而且有很多现成的api来wrap这个S3服务, 用起来很是方便, 每个月10G的流量才1$左右. 只可惜, 目前只有US和EUR的服务器, 中国用用的话不知道速度几何?
这种online大容量存储(又叫存储服务网络)应该是个趋势, 在未来网络大一统时代, 肯定需要枪毙目前各自为政的小DB们. 应该是超级大计算机集群扮演现在的大小server.
一直做Java系统的cluster, apache, app server之流, 也曾经考察过.Net环境下windows自己的NLB (Network Load Balance)
现在来到PHP世界, 也有类似的东西, 昨天跟阿蔡聊起来, 就不要忘了, 记录一下
一个是squid http://www.squid-cache.org/ , 一个是操作系统层面的LVS http://www.linuxvirtualserver.org/
这也就解释通了, drupal, joomla, wordpress都把session default保存到数据库里去, 为了方便在cluster环境下工作, 不用在不同机器复制session了
试用了下两个做Email Marketing的tool，说白了就是专业的帮助群发邮件并且收到更好的效果的东西 -
ConstantContact - http://www.constantcontact.com
iContact - http://www.icontact.com/
主要有如下特色功能 -
1. 内置的多种email模板供选择
2. email的跟踪和反馈，比如open, click link, forward, reply, etc, 甚至还能生成一些Chart和Report，能帮助用户改变EM策略
3. Contact和Survey的管理
最后还找到一个做EM的Framework，貌似比较有名
SendStudio - http://www.interspire.com/sendstudio/
总之，当我们做推广(比如GuessQ)的时候，EM不失为一个选择。