‘ Net ’ Category

Automatically fade background with Canvas and javascript

Comments // Written on Mar 26, 2009 // Net, Open Source

Using complex background images for div elements is very useful to create nice effects on web pages. Most of the images used as BG have a central pattern and then a gradient which ends at the image borders. If you use one of these image as background of a div you need to make them of the same size of the div (or bigger) so that it is able to cover the whole space with the gradient. Doing this means manually manipulating an image, increasing and decreaing its width/height.

I created a JS library that provides a simple way to avoid image manipulation, using Javascript to retrieve colors informations about the latest pixels of the image and to repeat that pattern until the end of the div. You don’t need to open any graphic program, you don’t need to add other divs, just include the script and it will do the dirty job for you.

If you’re interested on how this script works and what you could achieve by using it, you can retrieve more informations on the project page. Also take a look at the labs page, where you can see the script in action.

Running apache2 virtualhost with different users

Comments // Written on Mar 21, 2009 // Net, Open Source

On my dedicated server (running Debian Lenny) I run different websites and some of them are managed by other people. This means I had to give those people access via ftp and/or ssh to my box. As most of those sites use cms to manage content, they usually need the user which is running the webserver to be able to write their domain folders too.

In the past I managed to make folders writable both from the webserver and the user, adding every user I created for ftp/ssh access to the www-data group and then giving directories 664 permission. This way both the webserver and the user were able to write but I was not satisfied with this solution.

I knew that it was possible to wrap everything with SuExec and Cgi but I preferred running php forked by apache without CGI so this solution didn’t fit my needs.

I recently came to know the wonderful apache2-mpm-itk module. By enabling this, it is possible to achieve a true multiuser apache2 installation without wrapping anything to SuExec. Following some easy steps you would be able to specify an user+group for each virtualhost you run.

On Debian installation is quite easy as the apache2-mpm-itk module is on the repo. Note that installing it would remove common apache2 installation and the apache2-mpm-prefork as the module is compiled inside apache2. So to install it just

$ sudo apt-get install apache2-mpm-itk

As the module is built in you do not need to a2enmod anything. Just go straight on your virtualhosts folder ( /etc/apache2/sites-available ) and enable it by adding this line for each virtualhost.

<IfModule mpm_itk_module>
AssignUserId USER GROUP
</IfModule>

If you do not specify any user for some virtualhost they are going to run with default apache2 user (www-data, apache2, httpd or the one you specified on the configuration file).

Now, before reloading apache2 configuration be sure to reset permissions on your virtualhost, changing them from www-data to the new user:group using chown and if needed chmod. I usually do this

$ sudo chown USER:GROUP /var/www/some-virtualhost/ -R
$ sudo chmod 644 /var/www/some-virtualhost/ -R

Now you can safely reload your apache2 configuration and you’re done

$ sudo /etc/init.d/apache2 reload

Translate This 9.03.12

Comments // Written on Mar 12, 2009 // Net

In the latest release of Translate This I fixed a bug which affected wordpress installations that are not located in the root of your domain. This means that if your blog address is something like

http://my.domain.com/

everything worked fine, while if you have something like that

http://my.domain.com/myblog/

the old version would have returned a 404 error. This error was due to an absolute path used to indicate the iframe location and was fixed with the suggestions of Marco Battistoni.

Older Releases

As I didn’t publish anything about latest releases changes I will resume them below

9.03.11

In this release I added a very useful JS script that has the duty to hide the ‘Translate This’ icon on your editor when you move from visual to HTML mode. This is necessary as the script still do not support code editor for translation. I will try to realize that in the future but in the meantime I believe that is safer to disable the icon so that people do not try to translate in HTML mode.

I also improved the graphics inside the popup, moving elements and fixing some styles, and added language flags inside the selectbox. Icons have been realized by Icon Drawer and all the rights about them are their property.

9.03.09-1

This is a miny-minor release, needed to fix an incompatibility issue with contact-forms-iii. That was suggested by Rajesh in the comments .

9.03.09

In this release I fixed paths problem that where caused from the change of the plugin folder from translate to translate-this. That was my bad fault .

Koego blog analytics

Comments // Written on Mar 11, 2009 // Net

I have been using koego since its alpha version and as today it reached the beta status I decided to write something about it.

Home PageKoego is not just a web analytics tool with some gadgets for bloggers. It was conceived, designed and realized just for blogs. Even if it is still in development it is clear that it’s going to be a complete platform to supervise a blogger activity in all its aspects.

The layout is very minimalistic, simple and clear with few and relaxing colors. The homepage resumes some reports, pointing out the ‘ego‘ of your site. As the name suggests the ego is a kind of score assigned to your site based on many parameters (i don’t know them exactly I think it’s based on visits, visitors, kind of referres, comments and something like that). The ego score is shown in any report you see in the homepage, so that you can understand which referrer/keyword or generic activity is increasing your score the most.

ReferrersInside the platform there are a couple of reports that really impressed me. First of all the referrers (sources of traffic) report is very useful. Different kinds of referrers are grouped in a logical order. After the common ‘direct access’, ’search engines’ and ‘direct link’ you can find Social network, Social bookmarks and Blog Related groups. Social network and Social bookmarks are obviously the respective categories of websites and my favourite Blog related consists in websites which are commonly used by bloggers to improve their blogging experience. So in this category you can find wordpress, mybloglog, various aggregators etc. On the right image you can see grouped referrers and complete referring links. Below the complete referrer report, grouped in the categories I described.

Referrers

Operative SystemsOther interesting reports are the System related ones. Particulary I appreciated the attention paid to categorize and version all the most common operative system. So if you have a visitor coming to your blog with a Mac you will be able to know if he has the latest X version or the previous ones. Linux OS are divided in their most famous distributions, so you can have the detail of Gentoo users (probably if you find someone on your blog from gentoo it’s just me :D ), Ubuntu ones and so on… Windows is divided by versions too.

The resolutions report is very uncommon too. Insted of giving the single resolution data, it is grouped by types. So you got datas for mobiles, smartphones, small, standard, wide and large screens and finally TVs. You can have a look to OS report on the left image while below you can see the resolutions report for my account.

Resolutions

The latest thing I want to point out is that Koego does not use any flash for charts. Everything is realized by Javascript, drawing in canvas. This makes the page load so much more fluid and quick than in flash based analytics platforms. Also using JS allows users to interact directly with the chart, hiding or showing some datas. Below two lines charts where it is possible to interact.

Chart 1 Chart 2

If you want to use Koego you can ask for an invite to the beta using the form in their sign up page.

Translate This – Translate wordpress posts as you type!

Comments // Written on Mar 08, 2009 // Net, Open Source

Playing with APIs is very funny, especially if you can obtain a lot, coding a few. This time I realized Translate This a simple wordpress plugin using Google Ajax APIs for Languages to translate the post you’re writing, directly from wordpress administration interface.

It was easy to create the plugin but it’s also very simple to use!
In fact it just adds an icon in the toolbar above wordpress text editor. Clicking it will open a popup containing a select for the language you want to translate your text to and a quick preview of what you will obtain. You change the language from the select and the preview updates itself. When you’re satisfied you press save and your text is automatically replaced with the translated one. There are 42 languages in which you can translate your text.

That’s amazing in my opinion…. here is a quick screencast to show what I’m talking about

As I’m still waiting for wordpress to accept my plugin on their directory you can visit the dedicated page on this blog.

.

Improve Wordpress .htaccess

Comments // Written on Mar 07, 2009 // Net

Url rewriting is very (very very) important for seo and Wordpress users can easily avoid ugly urls like ?p=43 using permalinks in their installations.

To achieve the result of a true rewrite (no index.php file in the url) wordpress requires apache mod_rewrite module, and uses an .htaccess file that has the only purpose to redirect everything that does not exists physically to your index.php file. The default htaccess file looks something like that

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Apart from the comments let’s see quickly what most important line means

  • <IfModule mod_rewrite.c>

This just checks if your apache server has mod_rewrite installed and enabled

  • RewriteEngine On

Enables the rewriting engine

  • RewriteBase /

Sets the base url for the rewrite rules

  • RewriteCond %{REQUEST_FILENAME} !-f

Checks that the path requested is not present on your server.  This means that the server will  redirect on the index.php just addresses that do not match any physical file.

  • RewriteCond %{REQUEST_FILENAME} !-d

Checks that the path requested is not present on your server.  This means that the server will  redirect on the index.php just addresses that do not match any physical directory.

  • RewriteRule . /index.php [L]

Tells the server to redirect anything to the index.php file.

Let’s do some examples to clarify how does it work exactly. Imagine that the following files are your wordpress directory content

index.php

somepic.png

So if an user come to your websites with this url

http://www.yoursite.com/an-article.html

he will be redirected to the index.php file which will show the article, as the file does not exist on your server.

If instead an user arrives to

http://www.yoursite.com/somepic.png

he won’t be redirected because that image exists. He will just see the image, and this is correct.

Now suppose that someones arrive in your page

http://www.yoursite.com/an-article.html

and that in your template there is an inclusion of a js script (not present on your server) called

myscript.js

Including a script is like making an other http request to the server so it’s just like if the browser opened this page

http://www.yoursite.com/myscript.js

Wordpress htaccess file, will redirect the user to the index.php as the JS does not exists!!

This means wordpress will try to treat that JS as an article and so it will search on its database for any article having that name.

This  means that opening http://www.yoursite.com/an-article.html with a missing js file has nearly the same weight of calling two pages!

This is a big problem when you got an heavy installation of Wordpress with a lot of traffic, because it’s like doubling the traffic.

Yes that’s obviously an human error that can be avoided as you should always check for every image,js and css to exist.

However I prefer being sure that such problems do not verify so I just added some more rules to my htaccess,before the file and directory existence checks.

RewriteCond %{REQUEST_FILENAME} !^.*\.png [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.css [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.jpg [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.js [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.gif [nc]

As you can guess it’s just an other check before doing the redirects. If the file requested is not a css, a js or an image (gif,png, or jpg) then do the redirect.

So if any user come to my website and opens a page which contains an image that is no more there Apache will just launch a 404 not found error but won’t weigh down the server.

So here’s my full htaccess file, I bet you just wanted to see that without the explanations uh?

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !^.*\.png [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.css [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.jpg [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.js [nc]
RewriteCond %{REQUEST_FILENAME} !^.*\.gif [nc]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Dropbox without Nautilus in Fluxbox

Comments // Written on Mar 02, 2009 // Net

Dropbox is unquestionably a convenient utility for any Desktop Environment. For those who don’t know it, it’s a file sync service, useful to share files beetween two or more computers and keep them syncronized. It’s useful, for example, when you need to
keep your home computer up to date with the work one.

I used to make an intensive use of dropbox last year, but then I switched from Gnome to Fluxbox in my Gentoo work installation and stopped using Nautilus and its dropbox plugin. Since then I began starting Dropbox manually launching Nautilus when I needed to sync the files. That was really annoying…

Yesterday reading Francesco’s blog, I discovered Dropbox wiki and that it was possible to launch it from the command line! As I had it already installed on nautilus it was just a matter of starting the daemon, and that can be easily achieved by using a  python script .

The script can do a lot of things, such as installing the daemon on a non graphical environment, but I just use it to start the daemon on fluxbox startup.

Here’s how I did it on fluxbox:

1. Download the python script

cd ~ && wget https://dl.getdropbox.com/u/43645/dbcli.py

2. Open the fluxbox start script

vim .fluxbox/startup

3. Find this line

exec fluxbox

4. Before that, insert

exec python dbcli.py status &

Yes, it’s that easy! And we just have to thank Filip L. who published this script on Dropbox forums..

If you are interested on knowing all the fantastic feature of Filip’s script please have a look at DropBox wiki page

Twitter Avatars on Wordpress

Comments // Written on Feb 03, 2009 // Net

A few days ago Smashing Magazine, one of my favourite daily readings,  pulicized a Wordpress plugin which is able to search the avatar of  a user both from gravatar and from Twitter.

As the gravatar one even the twitter avatar is searched by email address so obviously the user will be recognized just if he set the same email address he used on Twitter.

The plugin was originally realized by Ricardo Sousa and you can try it in this blog, leaving a comment to this or other posts.

The installation is quite simple, just like all the others wordpress plugin you need to download, extract and upload it to your /wp-content/plugins/ directory. Then you need to locate your comments.php under themes->editor and finally just add the code for the image inside the comment loop.

<span><span><?php twittar(size, placeholderimg, border, </span><span class="keyword">class</span><span>, usegravatar, rating); ?> </span></span>

For more informations, instructions and updates please read Smashing Magazine original post .

Afisufi High Tech usplash theme – 0.1 Alpha 2

Comments // Written on Jan 30, 2009 // Net, Open Source

I finished realizing the second alpha of Afisufi High Tech usplash theme.  In this release I just added the possibility to show the booting text in the bottom-right corner area, matching bacgkround and text color to the theme.

I also finished working on the sources to be able to redistribute them under the terms of GPL v.3. You can find the binary and the sources in the project page.

Below you will find an updated screenshot and the new screencast.

usplash-150x150 Afisufi High Tech Usplash Theme

Page 3 of 512345