Articles ranging from web design to tutorials and opinion pieces.

Changing the Port Number of vsftpd

By Cemmos, in Linux,

By default, vsftpd (Very Secure FTP Daemon) utilizes port 21. To change this port is a fairly quick process.

$ sudo nano /etc/vsftpd.conf

In this file, find listen_port. If you can't find it, add it in yourself.


Then restart vsftpd. $ sudo service vsftpd restart

Make sure you allow this port to be used through your firewall. If you're using CSF, add the port to the TCP_IN and TCP_OUT connections.

$ sudo nano /etc/csf/csf.conf
# Allow incoming TCP ports
TCP_IN = "20,21,25,53,80,110,143,443,465,587,993,995,202"

# Allow outgoing TCP ports
TCP_OUT = "20,21,25,53,80,110,113,443,202"

$ sudo csf -r

    # Rewrite to prettify Vanilla forum URLs
	location /forum {
	    try_files $uri $uri/ @forum;
	location @forum {
	    rewrite ^/forum(.+)$ /forum/index.php?p=$1 last;

It's that simple. Add that to your server block in Nginx, and change "forum" to where your Vanilla Forum is installed.

$ sudo service nginx reload

Don't forget to open up conf/config.php and add the following, if you didn't add the Nginx rules prior to installing the forum:

$Configuration['Garden']['RewriteUrls'] = TRUE;


Letting your visitors know that a link leads away from the site they're currently on can be a great practice to adopt. If you want to display a small icon at the end of every external link on your website, without having to add a class like "external" to your a hrefs, there's another option we can take.

For all links, we can add the below. We'll get to removing the icon on the current site later.

a[href^="http://"]:after {
    font-family: FontAwesome;
    content: "";
    margin-left: 4px;

Now, keep in mind that attribute selectors like this can be fairly heavy CSS, so it's not always advisable. But it can still beat other methods in terms of speed, so as long as your CSS is nice and clean overall, it really should pose zero problems.

In content, I've added a FontAwesome icon. If you'd rather use an image, which will again be slower unless you add it to your existing sprites, remove the quotations and then add the link to your image within. Example:

   content: url(/images/externalicon.png);

For more flexibility, you can use background image instead, as this icon can't be resized when using content in this manner.

To remove the icon from internal links:

a[href^=""]:after  {
    content: "";
    margin-left: 0;

Since the sites I run tend to use SSL exclusively, I've added only the https version. Make sure to change the site name to the site in question.

In CKEditor 4, the buttons on the toolbar are made up of various plugins, located in its /plugins/ folder. In our case, I needed to add a custom button that, when viewing the source, would look as such:

<p class="h2">H2 Heading</p>

It's a bit of a strange use-case, but it's for a website in which the software strips (sanitizes) headings, as it's built as community software and we don't want members adding headers. We then use JavaScript to convert this <p> tag into an actual <h2> tag where we want to allow it (an articles section that only team members can post to). In case you're curious, here's the jQuery:

/* Replace headings for semantic articles using jQuery */
$('p.h2').replaceWith(function() { 
    return $('<h2>').addClass('heading').append($('<span>').html($(this).html()));
$('p.h3').replaceWith(function() { 
    return $('<h3>').addClass('h3').append($('<span>').html($(this).html()));

Most search engines will be able to see these headings as normal, so SEO-wise we're in the clear.

Instead of always going into CKEditor's source tab and typing that HTML in manually every time, I figured it would be best to create a little plugin that added a heading button using the p tags with its class.

CKEditor 4 Plugin

Now we can get started. In CKEditor 4, the plugin's folder name needs to be the same as the plugin's name, otherwise it won't be recognized. We'll make a new folder in the /plugins/ directory called pheadings.

The structure will look like this:

  1. /plugins/pheadings
  2. /plugins/pheadings/icons
  3. /plugins/pheadings/icons/pheadingh2.png
  4. /plugins/pheadings/plugin.js

Let's open up the plugin.js file and add:

CKEDITOR.plugins.add( 'pheadings', {
    icons: 'pheadingh2',
    init: function( editor ) {
        editor.addCommand( 'insertPHeadingH2', {
            exec: function( editor ) {
                editor.insertHtml( '<p class="h2">Heading</p><p>&nbsp;</p>' );

And then we'll need to add this to the toolbar itself. This is added to the same init from above.

editor.ui.addButton( 'PHeadingH2', {
    label: 'Insert Heading',
    command: 'insertPHeadingH2',
    toolbar: 'insert'

Finally, we can load the plugin. In the CKEDITOR.config.extraPlugins configuration, add the plugin name along with the other plugins you're running.

config.extraPlugins = 'pluginA,pluginB,pheadings';

A couple of websites on our DigitalOcean VPS  have a great amount of traffic. Due to this traffic, I ran into the error below (edited for readability).

[crit] connect() to unix:/var/run/php5-fpm.socket failed 2 No such file or directory

This was because the amount of concurrent users was starting to get high. Instead of fiddling around too much, I thought it best to simply switch to a TCP/IP fast_param, as it's more scalable by default than using a socket.

To do this, we need to edit a couple of files.



$ sudo nano /etc/php5/fpm/pool.d/www.conf

In this file, find the below line and uncomment it.

;listen =

If you have already have listen = unix:/var/run/php5-fpm.socket; in there, or another file in the pool.d folder, comment it out or replace it with the TCP/IP.



Next, we'll need to edit the Virtual Host config files, which may be located in /etc/nginx/sites-available. Hopefully, you've used one global file for all of your PHP sites, otherwise you'll need to edit multiple files for each site. Look for:

fastcgi_pass unix:/var/run/php5-fpm.sock;

Comment it out or replace it with:



Now we can get things reloaded.

$ sudo service nginx reload
$ sudo service php5-fpm reload


Since upgrading the server from Ubuntu 12.04 to 14.04 a couple of months ago, we ran into this problem: 'lfd on High 5 minute load average alert'.

Because, during the upgrade, some files were replaced with newer versions such as PHP5-FPM's php.ini file, not all of our server configurations were exactly as they had been on the older version of Ubuntu. To quickly rectify the dreaded 504 Gateway Timeout, I needed to modify both the php.ini and www.conf files located in /etc/php5/fpm and /etc/php5/fpm/pool.d respectively.

In php.ini, I upped the max_execution_time from 30 to 300.

; Resource Limits ;

; Maximum execution time of each script, in seconds
; Note: This directive is hardcoded to 0 for the CLI SAPI
max_execution_time = 300

In www.conf, the ;request_terminate_timeout needed to be uncommented (remove the semi-colon) and upped.

request_terminate_timeout = 300

And then restart the service.

$ sudo service php5-fpm restart

Sometimes you'll need to add certain packages to your Linux server, and CSF will sometimes send emails to make sure you can keep an eye on suspicious processes and activity. If you know something is not malicious, you can add it to the ignore file to stop receiving these emails. As an example, we recently installed NixStats to keep track of server usages and uptime. This adds a user called nixstats, which will be flagged when it's used, sending a lot of emails to you.

Open up the file,

$ sudo nano /etc/csf/csf.pignore

At the bottom, along with what should be other lines, add using the following format:


Then go ahead and restart lfd.

$ sudo csf -r

For more details and information, check out ConfigServer.


Great for SEO if you use it correctly. But please don't use Javascript/jQuery to add this rel to your external links. It simply won't do anything, as most search engine bots don't parse JS on your site. Using PHPs preg_replace would actually allow bots to see this relationship on your links.

Google actually does read the DOM, but not every search engine is made equally. But it also doesn't capture the nofollow specifically, because it's created too late in the DOM. Google will catch the link first.

Using JS for similar purposes may work well, such as adding a class to your links, but definitely not for nofollowing. It will provide you with zero functionality with many search engines. I've seen it happen more than once, which is why I'm putting up this quick notice.

Better yet, just add nofollow to your links manually or, if you're using something like CKEditor, set it so that external links automatically get the nofollow relationship.

When clicking on a #link that jumps to a particular part of a page, sometimes we need to take into account the viewport. If we have a fixed header, say 80px in height, our content will be overlapped by the header. To fix this, we can use some CSS magic:

.jump_link:before {
    height: 80px;      /* Same height as your header */
    margin-top: -80px; /* Again */
    content: " ";
    display: block;

Now every link with the class of jump_link will hit 80 pixels higher on the screen, allowing content to be visible. Modify per your needs.

Counting with CSS using CSS Counters

By Cemmos, in CSS,

body {
	counter-reset: count;

li a:before {
	counter-increment: count;
	content: counter(count) ". ";
	font-weight: bold;

I needed to use something like this to count the <LI>s within an unordered list <UL> for a table of contents generated using jQuery. It's simple, so there's not too much to explain about it. It's super handy though!