CSS White-Space Property

Whitespace, line breaks, spaces and tabs are collapsed by default in HTML documents. To add space, we can add “&nbsp;” which translates to space, to add some separation between elements. In addition <br/> or line breaks can also be utilized to add space. There is a HTML property called white-space which can be used to configure how the whitespace inside the element is displayed. The following is a list of whitespace options.

Syntax

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
 
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

Usage

p { white-space: normal }

white-space: normal

This is the default format. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: nowrap

With nowrap, paragraph lines are extended out. No wrapping. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: pre-line

With pre-line, breaks are inserted between paragraphs. Paragraphs are wrapped.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The couple of examples above shows how elements can be styled using the white-space property.

How to Zebra Stripe a Table

A HTML table can be difficult to read, especially if there are hundreds of rows. Reading across a row can sometimes be a challenge. One way of making the table more legible is to alternate the background color of each row. By the way, the plugin used on this blog to display code uses zebra stripes. Zebra stripping can be done by toggling a variable and alternately displaying an odd or even CSS class as it goes through the loop.

The Code:

// set variable initially to "odd."
// loop 4 times for demo purposes.
// toggle CSS classes while in a loop.
$c = "odd";
$count = 0;
echo "<table>";
while ($count < 4) :
  if ($c == "even") : echo "<tr class='even'>"; $c="odd"; else : echo "<tr class='odd'>"; $c="even"; endif;
  echo "<td>Data</td>";
  echo "</tr>";
  $count++;
endwhile;
echo "</table>";

The Result:

<table>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
</table>

The Style:

.odd { background-color: #fff; }
.even { background-color: #eee; }

To see it in action, visit CodePad.

WP-CLI

WP-CLI is a set of command-line tools for managing WordPress websites. With just a few simple commands, you can manage WordPress from the command line without the need to login to the Admin Dashboard and navigate the pages. You can install, update and delete plugins and themes, perform backups, configure standard and multisite installs and much more — all without ever using a web browser.

How to install WP-CLI

$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Make WP-CLI Executable

$ chmod +x wp-cli.phar

Rename wp-cli.phar to wp and move to a folder where it can be executed globally.

$ sudo mv wp-cli.phar /usr/local/bin/wp

How to Install and Activate Theme from the command line

$ wp theme install twentytwelve
$ wp theme activate twentytwelve

How to Install, Activate, Deactivate a Plugin

$ wp plugin install hello-dolly
$ wp plugin activate hello-dolly
$ wp plugin deactivate hello-dolly

How to update WordPress to the latest core release

$ wp core update

How to list the last 5 posts

$ wp post list --post_type=post --posts_per_page=5 --format=json

The command above will spit out an array in JSON format.

Read the rest of WP-CLI documentation.

Password Protect phpMyAdmin

phpMyAdmin is an open-source MySQL database administration application written in PHP. The software allows database administrators, web administrators, application programmers to perform several database functions via the browser. Functions such as browse and drop databases and tables, views fields and indexes, create, copy, drop, rename and alter databases, tables, fields and indexes, perform queries, update and delete, to name just a few.

Since phpMyAdmin has direct access to your database, it needs to be secure. By default, phpMyAdmin is secured using it’s built-in login feature. If you like to make it even more secure, you can add .htaccess password protection to it by simply adding .htaccess file to the phpmyadmin pages and creating username and password file to go along with it. The following instructions will show you how to add .htaccess protection to phpMyAdmin.

Edit the phpMyAdmin Apache conf file.

sudo nano /etc/phpmyadmin/apache.conf

Add the following in the /usr/share/phpmyadmin directory section.

<Directory /usr/share/phpmyadmin>
  <IfModule mod_authn_file.c>
  AuthType Basic
  AuthName "phpMyAdmin"
  AuthUserFile /etc/phpmyadmin/htpasswd.protect
  </IfModule>
  Require valid-user
</Directory>

Make sure the htpasswd file is not accessible from the web.

Create the htpasswd file. You’ll be asked to enter the password twice.

sudo htpasswd -c /etc/phpmyadmin/htpasswd.protect username

Finally, to make sure your changes are in effect, reboot Apache.

sudo service apache2 restart