Web Design

How to Remove All Line Breaks from Text Using Regex

#

If you are generating <meta> description tags automatically (e.g. by including all headings of the document), chances are that you’re extracting it from various sources of content that contain different HTML elements and line breaks in them. Here is a simple regular expression to remove all line breaks, carriage returns and tabs, and replace them with an empty space.

$text = preg_replace("/\r\n+|\r+|\n+|\t+/i", " ", $text);

HTML5 Notepad App Update

#

I have released an updated version of my HTML5 Notepad app which features a new user interface, adds support for Markdown syntax (along with a simple editor and preview) and fixes a synchronization bug which in some cases converted line breaks into text.

HTML5 Notepad with Markdown syntax and sync support

Please note that there could still be some bugs and the code hasn’t been polished for a production use, but it serves as a very useful example of some of the most interesting HTML5 features such as localStorage and offline cache.

You can fork it on GitHub or download from the project page.

How to Embed Your YouTube Channel as a Playlist

#

Update: There is an undocumented ID of your channel playlist which is available in the current beta version of YouTube UI as described by Federico in the comments.

For some reason YouTube doesn’t offer a simple way to embed your YouTube channel. The only official method is to manually create a playlist with all your videos and embed that. However, it requires additional work after every upload which is not cool, especially if you’re on a mobile. Here is a simple script that creates an HTML5 (iframe) player using the YouTube API:

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no" frameborder="no">');
            ifr.addClass('player');
            if (options.playeropts)
                ifr.attr(options.playeropts);
        }
        var src = 'http://www.youtube.com/embed/' + video;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src+= k + '=' + options.playopts[k] + '&';
            }
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }
    var defoptions = {
        autoplay: false,
        user: null,
        player: createPlayer,
        playeropts: {},
        loaded: function() {},
        playopts: {
            fs: 1,
            showinfo: 1,
            modestbranding: 1
        }
    };
    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            var allopts = $.extend(true, {}, defoptions, options);
            $.getJSON('http://gdata.youtube.com/feeds/api/users/' + allopts.user + '/uploads?alt=jsonc&v=2', null, function(data) {
                var videos = [];
                var playlist = '';
                $.each(data.data.items, function(i, item) {
                    videos.push(item.id);
                    if (i > 0)
                        playlist += item.id + ',';
                });
                allopts.playopts.playlist = playlist;
                allopts.player(md, videos[0], allopts);
            });
        }
    });
})();
$(function() {
    $('#player').youTubeChannel({user:'kasparsdambis', playeropts: { width: 400, height: 280 }});
});

WebKit Bug: Anti-aliasing for @font-face fonts

#

This is a known Webkit bug — any text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. Usually those are fonts smaller than 5px or monospaced fonts at small sizes which are rendered without anti-aliasing.

I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.

Here is a live demo of the bug.

Akismet, Akismet, Akismet

#

Akismet is a fantastic service that does only one thing and does it very well — it fights comment spam. Their homepage, however, is full of various keywords that dilute that simple message:

Here are a few things that are wrong with this design: dictionary definition cliche; why is the spam count so prominent and has two versions — I bet that most people can’t even pronounce that number; too many words to explain a simple idea.

Here is a suggested re-align:

Replace WordPress Login Logo With Your Site’s Name and Link

#

There are several plugins out there that allow you to replace the WordPress logo on the login screen. Here is a simple way to replace that logo with your site’s name — place this in your theme’s functions.php:

add_filter('login_headerurl', 'my_login_url_local');
function my_login_url_local() {
	return get_bloginfo('url');
}
add_filter('login_headertitle', 'my_login_title_attr');
function my_login_title_attr() {
	return esc_attr(get_bloginfo('name'));
}
add_action('login_head', 'my_style_site_name');
function my_style_site_name() {
?>
	<style type="text/css">
	h1 a { width:auto; height:auto; text-indent:0; overflow:visible; text-decoration:none; color:#666; display:block; margin:0; padding:0 10px; background:none; }
	h1 a:hover { color:#000; background:none; }
	h1 { font-family:'helvetica neue', arial, sans-serif; font-weight:bold; text-align:center; font-size:2em; width:310px; position:relative; right:-8px; margin:0 0 1em 0; }
	</style>
<?php
}

Here is how it will look:

How to Add Simple Google Site Search to Any Website

#

Built-in search engines of WordPress, Drupal and other content management systems are good, but not as good as Google. Here is a simple way to create a Google search form that will return results only from your site:

<form name="google-search" method="get" action="http://www.google.com/search">
	<input type="hidden" name="sitesearch" value="http://yourdomain.com/" />
	<input name="q" type="text" />
	<input type="submit" name="sa" value="Google" />
</form>

which will look like this:

This form does redirect your visitors to Google, but the results returned are only from your site, so there is nothing to worry about. And with Googling indexing blogs almost instantly, there are actually very little drawbacks from using this approach for site search.

The Price of Software and WordPress Themes

#

If the price of OS X is $29 or $300 for Windows 7, then how come that WordPress themes cost $50 and more? Sure, the real profits for Apple come from selling the hardware or from partnership agreements with hardware vendors in case of Microsoft. They also sell much more copies of the software compared to that of WordPress theme shops, but then what are the development costs of each?

It would be really interesting to know if there would be enough demand for $10 themes to cover the reduced markup.