I couldn’t find anything out of the order, and I checked some of the other sites I run on the server, they were ok.

Then I paid attention to the error chrome was giving, it said something about DNS error. so I went to cloudflare.com to see what was going on, but their page was down as well.

I headed over to their twitter and facebook to see if they had some information about this issue.

The problem affected both their proxy service as well as their DNS service and was a result of bad routing, and appeared around 11.00 CET and lasted for about 1 hour.

A simple search for #cloudflare on twitter yielded alot of frustrated peoples and customers pulling their hair out because of this “blackout”

The post Over 785.000 websites were down due to an system wide network issue with CloudFlare appeared first on Web Developers Corner.

Don’t worry, we all have been there, well most of us at least. And there is only one thing to do about the problems, fix them. If your site is using html5, then you probably have a lot of errors complaining about a bad value for your rel attributes (rel=”category tag”)

If this is the error you are searching for then you can relax because there is an easy solution for this problem.

• Line 562, Column 288: Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces.
  …press" title="View all posts in WordPress" rel="category tag">WordPress</a></p>

  Syntax of link type valid for <a> and <area>:

  A whitespace-separated list of link types listed as allowed on <a> and <area> in the HTML specification or listed as an allowed on <a> and <area> on the Microformats wiki without duplicate keywords in the list. You can register link types on the Microformats wiki yourself.

  Syntax of absolute IRI:

  An absolute URL. For example: http://example.org/hello, but not /hello. Spaces should be escaped as %20.

The problem is not within your theme but in fact inside the core of WordPress, more specifically the function the_category() And to fix this all you need to do is add a few lines of code to your themes functions.php file

add_filter('the_category', 'fix_cat');

function fix_cat($text) {
    return str_replace('rel="category tag"', '', $text);
}

What we have done here is adding a filter to the the_category function. This filters the contents from the function through a function I have chose to call fix_cat(). On the next lines we can see what the function does. I takes 1 argument $text and returns it after we have replaced all occurenses of rel=”category tag” with a blank string (“”)

The post Make WordPress validate for HTML5 by getting rid of rel=”category tag” appeared first on Web Developers Corner.

mod_pagespeed is built on PageSpeed Optimization Libraries, deployed across 100,000+ web-sites, and provided by popular hosting and CDN providers such as DreamHost, GoDaddy, EdgeCast, and others.

mod_pagespeed works is using input/output filters that attaches them selves to the Apache kernel, these filters filters and rewrites data from http requests and response. It looks at the content and caches optimized versions of your assets (Images, CSS and JavaScript)

A good example of this is when someone use a large image for a thumbnail and resize it in the html code instead of making a smaller copy of the image. This makes the visitors download a much lager image than they need to, which takes up bandwidth and adds to the loading time of the page

One solution would be to make smaller versions of the image, either using php or another server side language when the image is uploaded or manually, which is a painstaking process. But with mod_pagespeed there is no need for either of this, since it resizes images on demand.

So how does this work?

The first time a page is requested apache sends the original page, the content goes through the output filter which parse the html code, when the parser see a img tag it checks if this image with this dimensions are in the cache, if not, the original image is sent, and the image is added to the queue for later processing.

Later processing?

This is a process that runs in the background so it wont affect the page speed. This process creates an optimized scaled down version of the image using the height and width from the html code, and saves it to the cache.

Next time this page is requested, the parser finds the image in the cache and rewrites the img tag on the fly, making the browsers download the much smaller optimized version of the image.

Notice what happened to the filename there, the output filter appended a string containing the tag pagespeed and a hash, when the browser requests an asset with the tag pagespeed the input filter will know this is a cached asset and will use the cached resource instead of the original.

Is that all it does?

No-no, it also compresses the images by lowering the quality of them to an acceptable value if set, and optimizes images by removing meta-data.

mod_pagespeed also works with css and javascript files, removing whitespace and comments, this allows you to have readable files with comments if you like, saving you the trouble of minification.

It also concatenate serveral files into one file. This is great for WordPress blogs with alot of plugins, since they tend to have a lot of extra javascript and css includes.

There are 40+ available optimizations filters, which include:

• Image optimization, compression, and resizing
• CSS & JavaScript concatenation, minification, and inlining
• Cache extension, domain sharding, and domain rewriting
• Deferred loading of JavaScript and image resources
• and many others…

The post Need for speed: mod_pagespeed an Apache module for faster websites appeared first on Web Developers Corner.

First let’s see a standard if/else, this example should look familiar.

if($age > 50) {
    echo 'You are old!';
} else {
    echo 'You are young!';
}

Now let’s try that with the shorthand version of if/else

echo ($age > 50 ? 'You are old!' : 'You are young!');

[adsense-banner]

What was that you say? That is about what I said the first time I encountered this type of conditional statement. If you look closer at this example you can see the same conditional expression from the first example followed by a question mark. Then we have 2 strings divided by a colon. The first of the 2 strings is returned if the condition is true, and the second is returned if the condition is false.

If you are new to programming this kind of operations may be hard to follow,  at least to remember when writing your own code. But as soon as you get used to it, you will end up with much cleaner code provided that you don’t pull any crazy stunts using this method.

What about elseif?

Yes it’s possible to do elseif statements using this method as well if your’e willing to sacrifice some of the readability. To do elseif you need to wrap a ternary operation as the false part of you main if/else statement.

echo ($age > 50 ? 'You are old!' : ($age < 20 ? 'You are too young!' : 'You are young!'));

And if you really want to get down and dirty you could replace the true part with another shorthand version although this is not something I would recommend doing.

echo ($age > 50 ? ($age > 75 'You are too old!' : 'You are old!') : ($age < 20 ? 'You are too young!' : 'You are young!'));

The post Shorthand if/else for PHP appeared first on Web Developers Corner.

[adsense-banner]

Option 1: PHP’s built-in mail function (Not recommended)

Sending mail with PHP is quite easy if the server is set up for it. The server needs to have SendMail installed and configured correctly in php.ini. There are also some people reporting that mail doesn’t reach the destination, even though the mail was sent without an error message and some providers does not allow mails sent by php mail() to prevent spam.

Also if you want custom headers and attachments or special encodings you have a lot of job in front of you. I had this issue myself  a while ago when a clients script was sending a PDF file as an attachment using the php mail() function. It worked just fine in testing, I was testing with Gmail, but some recipients got the PDF code garbeled inside the body of the mail.

If this is fine with you, and you are only going to send a mail to yourself and want something simple then you can go ahead and try it out:

mail('recipient@email.com', 'PHP test mail', 'This is a test mail');

If the mail appear in your inbox, the server is configured correctly and you can use it for simple mails, but bear in mind that this is not stable.

Option 2: Use a dedicated mail class

If you want something more stable than the php mail function you should try a mail class that gives you a lot of functionality and options, and handles the hard work with attachments and headers for you.

There is a open source project called PHPMailer available that handles file attachments, SMTP servers, CCs, BCCs, HTML messages, word wrap, and more. This class gives you the options to send emails via sendmail, PHP mail(), QMail, or using your own SMTP server.

All you need to do is download the class files and include it to your project to get going.

A simple example showing how to send emails using your own SMTP server.

include 'class.phpmailer.php';
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPAuth=true;
$mail->Host = 'smtp.yourmailserver.com';
$mail->Username="your@email.com";
$mail->Password="your_password";
$mail->SetFrom('your@email.com', 'Your name');
$mail->AddReplyTo('your@email.com', 'Your name');
$mail->Subject = 'PHP test mail';
$mail->ContentType="text/plain";
$mail->Body('This is a test mail sent from php'); 
$mail->AddAddress('recipient@email.com');

if(!$mail->Send()) {
    echo('Mail not sent: '.$mail->ErrorInfo;
} else {
    echo('Mail sent successfully!');
}

If this example does not suit your needs, you can find more advanced examples over at the developers website using other choices to send mail, and Gmail SMTP.

[adsense-banner]

The post How to send mail with PHP appeared first on Web Developers Corner.

[adsense-banner]

WordPress has built-in functionality for parsing RSS files from other sources, this means that you can fetch the latest blog posts or articles from another site and display them on your own site. The RSS parser shipped with WordPress let’s you define an RSS feed to read from and gives you an array where each entry describes a single post or article.

include_once(ABSPATH.WPINC.'/feed.php');
$parser = fetch_feed('http://www.webdevcorner.net/feed');

This code includes the file we need for the feed parser, fetches the feed from the specified url, make sure to specify a valid RSS feed, the resulting feed is returned as a standard SimplePie object. Now lets do something with this object.

if (!is_wp_error( $parser ) ) :
    // Fetch only the 5 last items from this feed
    $maxitems = $parser->get_item_quantity(5); 

    // Create an array holding the items
    $items = $parser->get_items(0, $maxitems); 
endif;

Here you can see we fetch the 5 last items from our RSS feed, note that we put this inside a if statement that checks if our parser object has an error. Then we create an array ($items) to hold our items.

    The feed is empty.';
    else
        // Loop through each feed item and display each item as a hyperlink.
    foreach ( $items as $item ) : ?>;
        

            
            get_title() ); ?>
        
    ;
;

Here we looped through our items and output a simple list of links with the titles from our RSS feed. You don’t have to worry about this code pulling the RSS feed on every request, because by by default the function fetch_feed caches the results for 12 hours. This may be way too long for some people. But don’t worry, on the next page you will learn how to change this interval so hang tight.

The post WordPress RSS – Display data from external sources appeared first on Web Developers Corner.

The complete internet experience

In 2007 Adobe were active marketing Flash for mobile, the only alternative to enjoy the complete internet experience on a mobile device according to Adobe.

When Flash finally got available on Android the industry was getting ready to move on to HTML5 . a way more flexible, safe, and not least non-proprietary solution. Flash support is also the number one advantage Android have had over iOS, but this has now come to an end.

[adsense-banner]

Stop for android

Today is the beginning of the end for the Flash standard which has provided Adobe a solid foothold, not only as the developer of flash, but also creative suites for designing flash content.

Adobe has benefited from their strong position in the market for a very long time now, but surely has to adapt to more and more HTML5 competition in the future.

Today Google Play stopped providing Flash for their user, now it’s not possible to download and install Flash from their market service. This is good news for web developers that has adopted to HTML5.

The post Flash support for Android is history appeared first on Web Developers Corner.

Nowadays many web developers around the world underestimate the impact page size has on their sites performance. Back in the days before broadband was considered a standard, people was sitting on slow internet connection with their modems. Back then web developers had to make their pages small enough for those modem users, the page structure was not that complicated, the images and javascripts were kept to a minimum or else people had to wait for ever to load a single webpage.

New times

Today the story is different, most visitors are sitting on lightning fast internet connections, so the page speed doesn’t have such an impact on the visitors anymore. This has given web developers the freedom to utilize much more images, css and javascript in their designs which has resulted in some pretty amazing designs. The focus has been shifted from optimizing the code and minifying images to perfecting the design inside photoshop or fireworks. This shift of focus has made designers sloppy, they doesn’t have the optimizing mindset in the back of their head like the old school designers had to have.

Not only have the load time of the pages improved (a lot), but peoples expectations has gotten higher, if a page takes too long to load people are getting annoyed and bored, and the threshold for pressing the back button and go to the next page in the search results are considerably lower now than before. Studies have shown that most people lose loyalty and interest for your page if it loads slow, and are not likely to come back.

[adsense-banner]

Search Engine Optimization

The visitors are not the only ones that get bored with slow pages, now Google also takes page load times into account when calculating page ranks. And since the goal in SEO is to get to the top of the search results in search engines this is a area we as web developers can’t ignore, although pages speed doesn’t have a huge impact on page ranks as other factors of SEO has it’s worth taking a look at.

Minify Page size

This step is pretty straight forward, go through your HTML or template files, see if there is some way you can simplify your design, remove unnecessary elements, maybe you can do somethings a different way, try utilize CSS to get the same results. Make sure all your CSS is in external files instead of inline mixed with your HTML. Also make sure you properly reset your CSS styles and remove unnecessary styles and that CSS shorthand is used.

Remove Whitespace

Unnecessary whitespace does not add any value to your page other than making it larger in size. The web browser strips it away before rendering the page anyways, so you can lose some weight by removing them for good. How far you want to take this is up to you, by removing the whitespace you also reduce the readability, so if you plan on editing the code later on I would recommend you to only remove as much as you can while still being able to read it, take away double line breaks, If you plan on keeping indentations make sure they are done with tabs instead of spaces (1 tab usually converts to 4 spaces – This would cut the “indentation cost” by 75%) You have to consider how much you can get out of this, and if it’s worth it.

[adsense-banner]

Optimize images

Make sure your images aren’t stored in larger dimensions than you are presenting them to the visitors, it’s a waste to have the visitor download a 1024×768 image if all they see is a thumbnail or sized down version of the image. When you are sure your images aren’t unnecessary large, make sure they are compressed and optimized to decrease the file size. You can use an online tool like Smush.it to remove unnecessary data from the images.

Parallel loading

Browsers has a limitation on how many concurrent connections they can open to a single domain, this means it will queue the downloading of resources from your server, but if you place your javascript and images on multiple domains e.g. www.domain.com and images.domain.com (it can still be on the same server) the browser won’t have to wait for 1 resource to finish before starting on the next one. You should also considering a content delivery network for storing your resources on. Note that the client will have to do a DNS look-up for each domain you present it with, so it’s not recommended that you use more than a few since it takes some time to look-up the domain.

Caching resources

Check that all your static resources are being cached properly, this can be done by placing a .htaccess file inside the folder for your resources that will add and Expires header to all files inside that folder.

  ExpiresActive on
  ExpiresDefault "access plus 1 year"

Placement of JavaScript

Place JavaScript that is not precarious for the loading of the page at the end of the document. This is because the sequential processing of JavaScript holds up the rendering of the page. You should also consider compressing the JavaScript files if you have lots of JavaScript.

Compressing files

There are several ways to compress our files before sending them to the client, if you are running apache there is mod_deflate which will compress the files you have specified in the .htaccess file like this:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

If you are using PHP you got an even more powerfull compression at your disposal, namely gzip. To enable gzip compression of your output you need to enable output buffering at the beginning of your php files and specify that it will compress using gzip before sending it to the client. Be sure to check if the client accepts gzip, or else it will get garbled data.

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
else
    ob_start();

The post Optimizing your page speed for visitors and SEO appeared first on Web Developers Corner.

Today I tried logging in to twitter, but I could not connect to the server, all other webpages worked as a charm, so I was sure this only affected Twitter, are we under attack?! The logical answer would have been yes, but no there was no foreign planes in the sky, no explosions or enemies in sight. No signs of an attack at all. So we were safe.

According to their Status page they had some problem and their engineers were working to resolve the issue.

Phew! No invasion, we are safe.. ..for now..

[adsense-banner]

Twitter is now back online, we survived the first attack

The post Twitter is down: Are we under attack?! appeared first on Web Developers Corner.

[this]

What this means is that you can write a function in PHP, this could be anything you like, as long as it return some data. The data returned will replace the shortcode before the page is sent to the visitor. A popular use for this is Google AdSense, this would allow you to insert ads into your post by entering the code you defined for adsense. Now you can easily place ads where ever you want in your posts.

First let’s try something simple

First let’s create a simple function that returns the word bar. Open the file functions.php which is located in your theme’s directory.

function sc_foo() {
    return 'bar';
}

Now whenever we call this function it will return a string with the word bar. it’s pretty straight forward.

[adsense-banner]

Now that we have our function in place let’s associate this function whit a shortcode. Place this line of code just below the function we just made. This code tells WordPress that whenever the word foo comes up in the form of a shortcode it should replace it with the data returned from the function sc_foo.

add_shortcode('foo', 'sc_foo');

Now that we have this in place, let’s try it out shall we? Create a new post and type this inside the content text field:

 I did it! Now raise the [foo]...

Now you can preview the post to see what it looks like. Now it should say I did it! Now raise the bar… If it does, it works great. If it did not work, make sure your installation of WordPress is up to date. (Shortcodes has been available in WordPress since version 2.5.1)

Let’s raise the bar

The previous example was pretty straight forward, a simple function called from a simple shortcode. We could make the function more complex to return something more useful than bar, the sky is the limit for what we can make of this, if you want you can make shortcodes to display a gallery of images, calculate something, display a graph, or just a simple advertisement.

But there is much more to this API than displaying the output of simple functions, you can also pass arguments to the functions, and make the function wrap elements around some content text by using opening and closing tags.

How to handle arguments

You can set attributes inside the shortcode like this:

[banana color="yellow"]

The attribute color now has the value of “yellow” and this will be sent as an argument to the function through the associative array $atts. Let’s see how we can access this atribute in our function.

function sc_banana($atts) {
    return "The banana is {$atts['color']}";
}
add_shortcode('banana', 'sc_banana');

This would return The banana is yellow, which they usually are if they have not been lying on the kitchen counter for weeks. So why should we have to define the color of the banana if it’s yellow, can’t we set the default color to yellow and define the color if it’s not yellow? Sure.

function sc_banana($atts) {
    extract( shortcode_atts( array(
        'color' => 'yellow'
	), $atts ) );
    return "The banana is {$color}";
}

[adsense-banner]

Now we have defined the default color to be yellow, if it’s set in the attributes then it will be overwritten with another color, if the attribute is left out it will still be yellow. The extract function will extract the attribute name from the array and set it to a variable

[banana] -> The banana is yellow
[banana color="brown"] -> The banana is brown

Wrapping around some content text

Now let’s write a function that wrap some text into a box for us, let’s call it something sketchy as coolbox, notice that we now will add the argument $content to our function.

function sc_coolbox($atts, $content) {
    extract( shortcode_atts( array(
        'class' => 'coolbox',
        'float' => 'left'
        ), $atts ) );
    return '
'.$content.'
';
}
add_shortcode('coolbox', 'sc_coolbox');

This function will wrap the text into a div with the default class of coolbox

[coolbox]This text will be wrapped into a div with the class coolbox,
the box will have a default floating of left[/coolbox]

We can also give our box a custom class, or float it left and right.

[coolbox class="coolbox-blue" float="right"]This text will be wrapped
into a blue div with right floating applied to it[/coolbox]

Note: If you change theme you would have to update your functions.php file in your new theme folder with this code.

The post WordPress Shortcodes appeared first on Web Developers Corner.