Skip to main content

Welcome to Geoff Hayward's Weblog

Commenting on Java, JavaFX, Java EE, Joomla, and IoT.

We humans recognize a 404 error as a page not found. That is helpful nevertheless the foremost reason of a 404 error code is to let the requesting computer know that the page was not found. Most of the online Joomla 404 error tutorials are missing the point and giving developers a method that is returning a 200 OK code.

Here is How to Set up a 404 with Joomla

First, create an article. The name of the article would benefit from being called 'Page Not Found' or something similar. Within the article's content tell your users what went wrong. Hit save and make a note of the article's ID number.

Then FTP into your theme folder's root and add a new file called 'error.php'. The 'error.php' file is an override that is called by Joomla automatically if a requested webpage cannot be found. Once you have added the 'error.php' page, paste in the first template you can find below. Swap out the placeholders.

<?php
defined( '_JEXEC' ) or die('Restricted access');
if (($this->error->getCode()) == '404') {
	echo file_get_contents('http://YOUR_DOMAIN/index.php?option=com_content&view=article&id=ARTICLE_ID');
}

This solution pulls in the content of the 'Page Not Found'. In fact it goes off and gets the whole page in its own request. Don't worry about the hideous looking URL - the users will never see it. Doing it this way will send the 404 error code back as well as the human readable error page your graphic designer crafted. FYI Joomla sets the 404 code in the header.

How Not to Set up a 404 with Joomla

Most online tutorials show a redirect method similar to:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
header("HTTP/1.0 404 Not Found");
header("Location: http://YOUR_DOMAIN/404");
exit;

The problem with this is the redirect will resolve with a 200 OK code. A 200 OK code tells the browser that the request was all ok. That is not good for Google! You need to tell Google that the page could not be found too.



Read

The ever growing social media buttons are request culprits! But you can reduce the request they make and style social media buttons your way by following this simple article.

What Makes Social Media Buttons Request Heavy?

The social buttons are not only requested via your webpage; they are also requesting their own assets once they have loaded. This means several requests are made for each button. Each of these request are slowing down your web page's loading speed.

Creating a GET request that mimics the request that each social media button's JavaScript would otherwise construct will keep the extra requests made down to zero. If the button is clicked only then will a request be made.

How Can I Style Social Media Buttons?

As you are creating the mark-up for the button yourself, you are free to style the link as you wish. Tip: to keep the requests down, add the network's logos to your image sprite.

It is worth noting: the user interaction design principle of continuity. The principle's sub-principle of external continuity would suggest styling the buttons to look like the network's own buttons. Following this principle would suggest your users will already know what your buttons do and how to use them.

Here are Template Links for Social Buttons

Just swap out the UPPER CASE placeholders below . Don't forget to URI encode your variables.

Facebook

http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT

Twitter

https://twitter.com/intent/tweet?hashtags=A_HASH_TAG&related=RELATED&text=YOUR_TITLE&url=THE_PAGES URL&amp;via=THE_CLIENT_HANDLE

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=URL&title=YOUR_TITLE&summary=YOUR_SUMMARY&source=THE_CLIENT_NAME<

Google Plus

https://plusone.google.com/share?url=URL

For the maximum effect combine these links with open graph and twitter cards. Twitter lets you use Open Graph where a meta tag exists. This is good as you get a twitter card as a bonus when adding Open Graph. Here is the perfect mix of the two.

The following template needs to be added in the <head> of the HTML document.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ TWITTER NAME ">
<meta name="twitter:creator" content="@ TWITTER NAME ">
<meta property="og:title" content="">
<meta property="og:image" content=" AN IMAGE ADDRESS ">
<meta property="og:site_name" content=" SITE NAME ">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:type" content="article">

Add the following to each link and you will get the buttons to open in a small window just like how the social network's own buttons work.

onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"


Read

Once you have unpacked and installed a nice new shiny instance of Joomla what extensions take Joomla from being a fantastic CMS to being a super CMS?

I have tried many Joomla extensions, some are very good. The list of good extensions, I am happy to say, is longer than the list of bad ones. But, what extensions are so good, so brilliant, and so useful, they should be installed into each website you build with Joomla?

My Top 5 Must Have Joomla Extensions are:

#1 Akeeba Backup

Once you have made a website - losing it would not be fun. Having a recent backup means it is never lost for ever. All websites need to be backed up. Akeeba Backup is a great tool for this.

Akeeba backup is a fully automatic backup tool for Joomla. Akeeba backup makes a complete archive of your Joomla website. Akeeba backup can run as often as you need, both manually and automatically. Akeeba backup then can deposit the backup in to a separate storage drive - Dropbox is on the list.

Restoring a backup file is just as easy as running the Joomla installer using the Akeeba kick-start recovery script. Here is a bonus to note: you can use Akeeba backup to simply move a website from one server to the next - this option is so popular, it is built into the Akeeba Backup user interface.

I like Akeeba backup - it works. I have it making regular backups that are going to my choice of cloud storage. I have called on Akeeba backup on occasions without a problem.

You can find Akeeba backup via the Akeeba Backup website. Please note: I recommend the paid version. Some of the functions I have described may not be available to users of the free version.

#2 RSForm Pro

All websites need at least one form. The RSJoomla's RSForm Pro extension for Joomla enables making forms easy and even fun. RSForm Pro will help you setup forms and then mange those forms. RSForm Pro will help you with simple forms all the way through to complicated multi page forms. All types of forms are possible and made easy by RSJoomla's RSForm Pro extension for Joomla.

RSForm Pro has several plugins too. The plugins include: MailChimp integration; PayPal integration; and many more. If that is not enough, you can even map a form's field to another part of the database right from within the extension's user interface.

I like RSForm Pro. It's simple to use. Form submissions are easy to manage and exporting into other applications is not a problem.

Go get RSJoomla's RSForm pro today from their RSJoomla website.

#3 XMap

Once you have a website out there online, you want people to see it. You need it to be indexed by search engines. You need the pages to be found by search engines soon after you have added them. Most search engines accept an xml sitemap and will query it regularly to look for new content.

Vargas's XMap automatically produces your sitemaps. Once it is setup, you can leave it to it. Each time you add a page to your website, XMap will add the page to the sitemap for you. Once more, you can also have a copy of the sitemap in HTML format so that your human visitors can have a sitemap too.

I like Vargas's XMap because it's simple and lightweight. I like that other Joomla extension makers (particularly component extension makers), that are worth their salt, create XMap plugins so that content generated by their extension is mapped by XMap too.

You can find Vargas's XMap at the XMap website.

XMap Beautiful URL Tip

If you would like your sitemap to be found using www.yourdoman.com/sitemap.xml and not a long ugly string – paste this snippet into your HTACCESS file.

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/sitemap.xml
RewriteRule .* /index.php?option=com_xmap&view=xml

Note: you will need to adjust the query if you have more than one sitemap.

#4 GoogleAJAXLib

Everybody is using a CDN nowadays and why not? CDNs make your website load faster. The scripts get cached and are sent to the user from the closest data centre to them that the CDN is using.

ReSEO's GoogleAJAXLib for Joomla simply jumps in at the right point to swap the address of the Mootools JavaScript framework to the Google Ajax Lib CDN address. The GoogleAJAXLib extension will also do any of the frameworks that the Google Ajax Lib CDN will serve, this included jQuery. So if your template or other extensions are using a framework like jQuery, ReSEO's GoogleAJAXLib will swap the address for you.

As well as giving me access to the Google Ajax Lib CDN - I like ReSEO's GoogleAJAXLib extension because it has a simple lightweight implementation. The code works with the Joomla framework the way Joomla is supposed to be hooked into. In other words its implementation is not hacky at all.

You can find ReSEO's GoogleAJAXLib extension on their GoogleAJAXLib download page.

#5 Admin Tools

The Akeeba Admin Tools is the intelligent friend of Joomla. It makes Joomla run even faster, operate more securely, and looks out for Joomla to see if anything is amiss. Akeeba Admin Tools has a HTACCESS creation tool that will help you create a sweet .htaccess file suited to your needs. It has an active scanner that stops threats. The tool has a scanner that finds and identifies changes to files within your website's file system. The list of features is comprehensive.

I use Akeeba Admin Tools because they give me peace of mind. I also like that my websites are super-fast. Ok, Joomla is good at being fast and secure, I know, but we are talking super at and not just good at.

You can find Akeeba AdminTools via the Akeeba Admin Tools website.

Conclusion

After installing my top 5 Joomla extensions, you will start a new website that: backs itself up automatically and is easily recoverable. A website that can collect information from its visitors and send it to almost anywhere you like. Your new Joomla website will be easily indexable by search engines. The website will be super-fast and it will be super-secure.

What to look out for?

Look out for the age of this article! I have based this on the extensions I am using with Joomla 2.5 (The current production release). I have read on the Joomla JavaScript working group forum that there is a move to put the CDN functionality into the Joomla core.



Read

Do you need to know how to make CSS border gradients? This swift article will show you how to make a pseudo cross browser border gradient. CSS Border gradients are easy to make once you know how, and with the right tool. The border gradients in this article work across browsers without using images to fall back on.

Making the CSS Gradient

Let's start by making the CSS gradient. Surprisingly CSS gradients can be made to work across most of, if not all of, the browser you are normally developing for. The tricky part is each browser has its own implementation. However, there are great tools online to take the labour out of making gradients. So we will make life easier for ourselves and use one.

The CSS gradient tool I've found and like is the colorzilla gradient editor. The makers of the Colorzilla gradient editor tool provided a brilliant browser-based interface that comes with all the instructions you need for making the gradient.

Making the CSS Gradient a Border Gradient

In the solution below is the CSS gradient that was generated by the Colorzilla gradient editor tool. I've put the gradient CSS inside a class that is named 'border-gradient'.

Using this CSS we will make a border or at least a pseudo border (pseudo as in not real as opposed to a CSS pseudo-class). To do this just add padding and make sure the box doesn't collapse. You can stop the box from collapsing by using an in-line block or by floating the box with its overflow property set to hidden.

Then just put a box inside of the box and set the background to a solid colour. The box that is inside the box needs to be displayed as an in-line block. That is it - I said it was easy. Easy with thanks to the hard work that the online gradient editor tools of course, without them it would be tricky.

CSS Border Gradient Demo

See the border gradient example.

CSS Border Gradient Solution

.border-gradient{
	background: #58332b; /* Old browsers */
	/* IE9 SVG, needs conditional override of \'filter\' to \'none\' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4MzMyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZWYwZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #58332b 0%, #bef0e4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58332b), color-stop(100%,#bef0e4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #58332b 0%,#bef0e4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #58332b 0%,#bef0e4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#58332b\', endColorstr=\'#bef0e4\',GradientType=0 ); /* IE6-8 */
	padding: 3px;
	display: inline;
	float: left;
	overflow: hidden;
}
.border-gradient .border-gradient-content{
	background-color: #FFFFFF;
	display: inline-block;
}

Conclusion

This solution gives the effect of a gradient border. People who view it will perceive a gradient border. Importantly, this solution works across all browsers, I have tested it in IE 7 through to IE 10, Opera, Safari, Firefox, and Chrome.



Read

Internet Explorer, before version nine, did not cope with media queries, however, there is no need to duplicate your CSS stylesheets. If you need a good tip on how best to deal with Internet Explorer when it comes to CSS media queries - in the context of maintenance - then this short article will help.

CSS - the Need for Good Maintenance

Most of us know that if we get the ground work right during the development stage of a project the maintenance will be noticeably easier - not just with CSS. In fact small changes that should take five minutes can take hours on a project that either rushed or skipped the groundwork stage.

The Problem

When the project includes the use of media queries as the mechanism for enabling responsive layouts - it can be tempting to duplicate everything minus the media queries for the older versions of Internet Explorer. That is fine but this approach forks the stylesheets. Once it is time to make changes to the styles, it becomes difficult to guarantee synchronisation across the fork.

The other issue is: you are sending out a duplication set of CSS rules to Internet Explorer. That makes for an extra volume of bandwidth being used that can and should be avoided.

The Solution

First, spilt the CSS styles into two files - this may seem counter intuitive as this does create an extra hit to the server but in the context of maintenance I believe it is worth it. With proper caching, the second hit only happens once.

Once split, name the staylsheets something like: reset-generic-queries.css and large.css. You may see where I am going with this!

In the first stylesheet put your CSS resets, followed by your generic CSS rules such as the projects typography, and then your media query groups.

Finally, without any media queries put your large screen style rules in the stylesheet named 'large'.

You should have two CSS files structured something like this:

/* resets */


/* typography */


/* elements */


/* helpers */


/* small screen */
@media all and (max-width: 480px){

}

/* medium screen */
@media all and (min-width: 480px) and (max-width: 940px) {

}

For the 'reset-generic-queries.css' file; and

/* large screen */

For the 'large.css' file.

Once you have your CSS across two stylesheets, in a similar manner you can establish zero duplication in your styles without difficulty. The magic, now, of zero duplication is in how you link the stylesheets to the main document.

<link media="all" type="text/css" rel="stylesheet" href="reset-generic-queries.css" />
<link media="all and (min-width: 940px)" type="text/css" rel="stylesheet" href=" large.css " />
<!--[if lt IE 9]>
	<link media="all" rel="stylesheet" type="text/css" href=" large.css" />
<![endif]-->

As you can see, the first stylesheet labled 'reset-generic-queries' is linked as normal. The second stylesheet uses an in-line media query so that it is used only by screens large enough, in combination with an 'IF IE' for Internet Explorer support.

Internet Explorer (older IE) will not see the embedded media queries in the first stylesheet but will see your resets CSS rules and your generic CSS rules as they are not wrapped in a query. Internet Explorer will not download the stylesheet linked with an in-line media query but will download the same stylesheet using its own 'IF IE' query - therefore Internet Explorer renders all of the CSS that is meant for a large screen.

All the other browsers (and new IE) will read your resets CSS rules, your generic CSS rules, and the rules most appropriate to the screen size currently displaying your responsive layouts.

Conclusion

When using CSS media queries, you can cut out the need for duplication in your CSS. There is no need to duplicate CSS just to make Internet Explore continue to work with your otherwise responsive layouts. All you need to do is be clever in how you organise your styles and link your styles to the main document. This short article has outlined an approach to do this so that zero duplication can be achieved with media queries and this will make your CSS more maintainable in the long term.

Video Supplement



Read

Mailing List


Responsive Media

With the ResponsiveMedia plugin for Joomla it is easy to add 3rd party content from YouTube, Vimeo, and Instagram right in to any Joomla! article.

ResponsiveMedia