Month: March 2014

An Example of How To Remove Empty HTML Tags with PHP

In his latest blogpost Tom McFarlin gives us “An Example of How To Remove Empty HTML Tags“. Empty tags can be a real nightmare, since they can really destroy the layout of an article. Take for example empty<p>-Tags, which easliy produce huge spaces between paragraphs. There is no solution in CSS for such a problem and to call the designer is a wasted call. Especially WYSIWYG editors produce these problems easily and probably a lot of WordPress users know, what I am talking about.

So I was quite curious about this topic and read his blogpost. I was a bit disappointed, when I saw, he was facing the problem of empty HTML Tags with an Javascript solution:

( function ( $) {
	'use strict';
	$( '.comment code' ).each(function() {
		if ( '' === $.trim( $( this ).text() ) ) {
			$( this ).remove();
		}
	});
}( jQuery ) );

This solution is neat, no question: for Javascript enabled browsers. But for sure, this solution has some disadvantages:

  • the browser has to keep care of the problem, which basically costs time. First you retrieve data you don’t need and in a second step, you need to remove this data.
  • Empty tags are something like silent conversations. What does <em></em> mean? I emphasize nothing?
  • Your browser needs to have Javascript enabled

So, a server side solution would be my preferred way. I was searching a bit, if there might be such a solution, and I found this blogpost by CodeSnap:


 * @version    1.0
 * @param    string    $str    String to remove tags.
 * @param    string    $repto    Replace empty string with.
 * @return    string    Cleaned string.
 */
function remove_empty_tags_recursive ($str, $repto = NULL)
{
    //** Return if string not given or empty.
    if (!is_string ($str)
        || trim ($str) == '')
            return $str;

    //** Recursive empty HTML tags.
    return preg_replace (

        //** Pattern written by Junaid Atari.
        '/<([^<\/>]*)>([\s]*?|(?R))<\/\1>/imsU',

        //** Replace with nothing if string empty.
        !is_string ($repto) ? '' : $repto,

        //** Source string
        $str
    );
}
/*
+=====================================
| EXAMPLE
+=====================================
*/
$str=<<

Hello User,
Welcome to our domain.

EOF; echo remove_empty_tags_recursive ($str); /* +===================================== | OUTPUT: +===================================== */ /*
Hello User,
Welcome to our domain.
*/

Code Snap is using Regular Expressions to identify empty HTML Tags. The advantage of this solution over DOM-solutions is obvious: It doesn’t need to be a valid DOM-path. But for now, this solution only removes for example <a></a> but not <a href=”” class=”external link”></a>.

So its time to play with the regular expression. In order to fix this, I would suggest this solution:

'/<([^<\/>]*)([^<\/>]*)>([\s]*?|(?R))<\/\1>/imsU'

This removes properly <p> as well as <p class=”entry”></p>

For me, the proposed Javascript solution is like: First you smash a glas and then you present the broom to fix it. A server side solution doesn’t smash the glas in the first place.

photo credit: Eldkvast cc

Mobile users want to call you

I won’t start now and telling you again: Yes, the web is moving to mobile, layouts have to be responsive and so on. You know it already. What you might don’t know: Mobile users want to call you!

Still, a smartphone is a phone. One of its main purposes is to gather information by calling people. So, even if they go to your website, they might want to have a personal contact, or as webdesignledger points it out:

Many visitors head to your website just to find your phone number, so make it prominent on your homepage. The top right corner is usually best – or, I’ve also seen it down in the footer. Regardless, put it up there!

Call me

But, these days, we are mobile. So, there should be a better way than copy&paste to call you. And there it is! Usually you write something like

+123 123 123 someone@example.com

With one click, you can write an Email, you just click the mailto:-Link. Isn’t there something similar for phone numbers? There is:

0123 123 123 someone@example.com

So, how to use it? You see the difference between the number which is shown and the number in the “tel:”part of the URI. The URI scheme for “tel:” is well defined in RFC5341, RFC3966 and RFC280.

Don’t forget: The internet is a global institution. You’re visitors might want to call you from Malaysia, Japan or Russia. In order to do so, the number format needs to be represented in a global format. As RFC3699 states it:

All phone numbers MUST use the global form unless they cannot be represented as such.

Well, there are some exceptions, and you can also use local numbers, but I think, since the internet is a global one, we should stick to global numbers or again, as the RFC3699 says:

Local numbers SHOULD NOT be used for several reasons. Local numbers require that the originator and recipient are configured appropriately so that they can insert and recognize the correct context descriptors. Since there is no algorithm to pick the same descriptor independently, labelling numbers with their context increases the chances of misconfiguration so that valid identifiers are rejected by mistake. The algorithm to select descriptors was chosen so that accidental collisions would be rare, but they cannot be ruled out.

A global phone numer has to start with a ‘+’, as it shows in the Request for Comments.

Okay, but enought of the RFCs. Its pretty easy:

tel:+49123123123

will call the phone numer 0123123123 in Germany.

Write me

photo credit: Curtis Gregory Perry cc
photo credit: Curtis Gregory Perry cc

But, mobile devices are so much more. You can also write SMS. And maybe, you want to provide such an link too. And yes, you can:

Write me a SMS

Again, its a very simple and clear way, how to do it. While “tel:” opens your phone, “sms:” will open your SMS editor. And also for this URI Scheme, we have a well defined documentation: RFC5724.

You remember “body” you may have used in the “mailto:”-scheme? It also exists for “sms:”! So, you might want to create a Complain Message Service, where you’re client can instantly complain. You could use something like

Complain instantly!

When the editor opens, half of the message is already written and maybe your customer looses some of his anger even before getting in touch!

Conclusion

There are quite some possibilites, to integrate your website into the mobile device of your visitors and it would be a waste not to use them. Especially the “sms:” URI scheme can be used for a lot of purposes. With its “body”-field, you can easily create interactions with mobile payment platforms and other SMS services! I wonder, why you rarely see this opportunity spread, but I guess, since mobile grows, these functions will become more and more inevitable.


photo credit:

Mobile users attention: Editing blogposts from mobile can inject wrong image paths

Mobile BMI No Picture

Today, I had a talk with one of my clients about quite a strange behavior of his WordPress webpage. Sometimes, he uses mobile in order to update and edit his blogposts. The strange thing. After a while, the pictures in his blogposts didn’t work anymore. What did happen?

His mobile internet provider is Vodaphone, who obviously works together with ByteMobile. According to their webpage, they are working together with more than 100 companies. What does ByteMobile do?

bytemobile-chart

Since mobile internet provider try to reduce bandwith, one of the offers ByteMobile has for his clients, to compress images, before they are delivered to the client. This video explains a bit, whats going on:

While this technique may have real advantages, making the mobile internet expierence quite fast, it can be a huge problem for WordPress administrators and editors, who edit their blogposts online. With the compression technique, ByteMobile actually changes the Image-URLs in the HTML-Code and links them for example to

http://1.1.1.1/bmi/my-blog.com/wp-content/uploads/2014/03/my-image.jpg.

So, while I want to show a picture at http://my-blog.com/wp-content/uploads/2014/03/my-image.jpg, my inserted SRC-Attribute actually changes to http://1.1.1.1/bmi/my-blog.com/wp-content/uploads/2014/03/my-image.jpg because this is the picture I am looking at. While I edit the page or post, there is no difference, but as soon as I access the blogpost from another provider, another time or whatever: The picture is gone. And there is no hint, what is going on. If you try to access this new address, no information is given, what is going on here.

About a year ago Marcus Rönz from Webmaster Glossar wrote a blogpost about this issue.

For WordPress users who run into this problem, I wrote the plugin BMI Remover, which solves this problem by hooking into the ‘save_post’ and ‘edit_post’ filter and rewriting misleading URLs. This is the currently known ByteMobile-URL-List, which can be rewritten:

  • 1.1.1.1/bmi/
  • 1.1.1.2/bmi/
  • 1.1.1.3/bmi/
  • 1.1.1.4/bmi/
  • 1.1.1.5/bmi/
  • 1.2.3.4/bmi/
  • 1.2.3.9/bmi/
  • 1.2.3.10/bmi/
  • 1.2.3.11/bmi/

If you no other URLs, please let me know.

Profi Search Form as Widget

Profi Search Form as Widget
Profi Search Form as Widget
A while ago, I uploaded my latest Plugin “Profi Search Form” to CodeCanyon. Just wanted to show the latest developments here.

For the first update, I decided to deliver the search also as an widget. Till now, it is only possible to include a shortcode, in order to display the search. Now, in addition, there will be also a nice widget, which can be placed into sidebars etc.

The idea behind

Configure the Widget
Configure the Widget
To create a widget, you basically operate like usually and create a search. But instead of posting a new page with the shortcode [search-form id="name_of_form"], you go to the Widget Section and Create a new Widget.

You select the Search Form, you want to use and you have to define a page, where the search results will be displayed. On this page, you will have to add the shortcode [search-form-results].

So, the widget keeps more or less the same smooth workflow in order to create a search form. The widget already runs quite nicely, but at the moment I am still catching some bugs. So stay tuned, and I hope you will like it.