I’ve got sick of moderating spam comments in my blog, so I’ve installed Math Comment Spam Protection Plugin. Hope not to receive those “Please moderate” emails anymore.
This plugin is easy to install - it took 3 minutes to download the zip-archive, unzip it, activate plugin in admin panel and to add some piece of code in the comments.php of my theme.
Yesterday I installed Mozilla 2 RC2 on my pc and I have to say I’m rather contented with it. They have implemented such things as saving tabs on exit, spell checking, suggestions in search bar, better support for reading RSS feeds. But what makes Firefox really convenient is a huge amount of add-ons which extend the browser functionality and are easy to install and configure.
Here is a short list of extensions I recommend to try:
I didn’t like any of extensions for RSS reading I’ve seen (Newsfox, Sage, Info RSS, Feedview, Habari Xenu) - I tried to find something similar to Opera’s feed-reader, which I like more than other. Probably it is better to use some web-based ones (Google Reader), I just haven’t got used to it yet.
I’ve used Opera for several years and I like it a lot, but when you spend nearly 70% of your computer time with your browser you want it to be really yours. I mean that the possibility of using Firefox as a platform for different tools you need while surfing the web is priceless.
Needless to say, social bookmarking is one of the best ways to drive traffic to your website nowadays. The power of bookmarking services comes from simplicity of their use and easy accessibility. Some people speak about importance of social media optimization (there’s a nice post on it) and you have all grounds to believe them.
Since there is a variety of different bookmarking services it’s obvious that linking to only one or two of them is not enough. Go-social is a simple way to make your pages “social-friendly”.
Read more
As web2.0 concepts had become extremely popular, it led to rise of new unofficial standards: it’s really hard nowadays to find a recent web application which is not ajax-powered. Perhaps it has become a stereotype but if you want your application to look good and to be a success you have to use ajax-like technologies. It is absolutely obvious that not everyone wants to get lost in thorough study of ajax basis when there’s a possibility to use ready-made libraries and frameworks that allow you to use the full power of ajax.
script.aculo.us is one of the most popular JavaScript libraries to do such kind of things. They use Prototype framework as a basis.
Your pages are supposed to require prototype.js-file to support ajax-based controls or widgets, but this file is rather big (~50KB) in comparison to the filesize of your page itself. It makes your users wait while this library is loaded every time they visit your page. Well, I don’t want to say that it’s irritating for surfers with poor connection, this is not the point. The worst thing about all of this is that people often use a steam-hammer to crack nuts, and what’s more - they use ajax-based elements in wrong ways!
Let’s say you have a blog. Do you really need to have ajax-based comments? Well, what is the advantage of ajax here? - you don’t have to reload the page. But it doesn’t matter if the page is reloaded after you submit a comment. After you submit a comment you usually leave the page! Don’t tell me that it reduces the traffic. It doesn’t reduce the traffic, because prototype.js has bigger size than your page, so it’s better to load the page twice than to load prototype.js with the first load. Certainly, it works if you want to submit several comments at one time, but it’s not rather common.
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly
I haven’t tried to use script.aculo.us in my projects yet (and I don’t really think I’m going to), so I can’t say if it’s easy-to-use (I think it is - it wouldn’t become so popular if it wasn’t), but as for cross-browser’ness - their scripts don’t work correctly in Opera 8.51 (they work in 9.00), and at last.. huh.. yes, your applications fly but you have to wait a little before they ascend.
So, what is bad about script.aculo.us? People who use it where it’s not needed.
If you need something really simple it is much better to do some custom work on it than to use heavy library (especially if you don’t use its full functionality). Here you can read more about proper use of JavaScript in your applications.
This trick is useful when you need to show some expanding lists or you want to have a possibility to change the content of the page without reloading it. I’ll show you the core principle and some common examples.
Click the link below to try the first example.
Here is the code for this example:
<script type="text/javascript">
function showBlock(blockId)
{
document.getElementById(blockId).style.display = "block";
}
function hideBlock(blockId)
{
document.getElementById(blockId).style.display = "none";
}
</script>
<a href="javascript:showBlock('block1')">Show hidden text</a>
<div id="block1" style="display: none">
This text can be hidden again if you click
<a href="javascript:hideBlock('block1')">here</a>.
</div>
Let’s improve this code: when hidden text is shown we don’t have to display the “show”-link. We can describe this link as another block and use the same functions:
Modified code (the script remains the same):
<div id="block2">
<a href="javascript:showBlock('block3');
hideBlock('block2');">
Show hidden text</a>
</div>
<div id="block3" style="display: none">
This text can be hidden again if you click
<a href="javascript:hideBlock('block3');
showBlock('block2');"> here</a>.
</div>
If you need to display expanding list you can do it in this way:
<script type="text/javascript">
function expand(ID)
{
document.getElementById('item'+ID).style.display = 'block';
document.getElementById('expander'+ID).innerHTML =
'<a href="javascript:collapse('+ID+')" title="Collapse">[-]</a>';
}
function collapse(ID)
{
document.getElementById('item'+ID).style.display = 'none';
document.getElementById('expander'+ID).innerHTML =
'<a href="javascript:expand('+ID+')" title="Expand">[+]</a>';
}
</script>
<style>
.expander a {
font: normal 10px Courier;
text-decoration: none;
color: black;
}
</style>
<dir>
<li>
<div id="expander1" class="expander" style="display:inline">
<a href="javascript:expand(1)" title="Expand">[+]</a>
</div>
<div style="display:inline">Item 1</div>
<div id="item1" style="display:none">Content for item 1</div>
</li>
<li>
<div id="expander2" class="expander" style="display:inline">
<a href="javascript:expand(2)" title="Expand">[+]</a>
</div>
<div style="display:inline">Item 2</div>
<div id="item2" style="display:none">Content for item 2</div>
</li>
<li>
<div id="expander3" class="expander" style="display:inline">
<a href="javascript:expand(3)" title="Expand">[+]</a>
</div>
<div style="display:inline">Item 3</div>
<div id="item3" style="display:none">Content for item 3</div>
</li>
</dir>
And here’s the result:
Summing up
If you want to be able to change visibility of some elements at your page you have to wrap it into <div></div> and use unique id for this div, then you decide when you need to display your elements and use this code:
document.getElementById("YOUR_ELEMENT_ID").style.display = "block";
to show and this code:
document.getElementById("YOUR_ELEMENT_ID").style.display = "none";
to hide.
