Skip to main content

Welcome to Geoff Hayward's Weblog

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

You can get the Open Graph metadata properties used by Facebook to validate. It's easy and it does not require any hacks. Read this if you need to get your Open Graph metadata to validate.

Open Graph validating

First Step to Validating Open Graph: HTML5

Your first step to getting Open Graph to validate is to check that your HTML is using a HTML5 doctype. The Open Graph metadata properties used by Facebook are designed to be used with HTML5.

If you are uncertain about the doctype you are using, you can get the W3C's Markup Validation Service to tell you.

Second step to Validating Open Graph: OG namespace

Your second step to getting Open Graph to validate is to get the OG namespace in scope. The OG namespace is what you see prefixed to the value of each of the property attributes of each of the Open Graph meta elements, such as: 'og:title', 'og:image', and so on.

You import the Open Graph schema and create the OG namespace using the HTML5 native attribute named 'prefix'. The import instruction of the Open Graph schema can be added to the HTML element named 'HTML' or to the element 'HEAD'.

<!DOCTYPE html>
<html prefix="og:  http://ogp.me/ns#">
<head>
[...]
<meta property="og:title" content="...">
<meta property="og:image" content="...">
<meta property="og:site_name" content="...">
<meta property="og:description" content="...">
<meta property="og:url" content="...">
<meta property="og:type" content="...">
</head>
[...]
</html>

That's all there is to it. Just import the OG schema in a HTML5 doctype and your HTML will validate.



Read

Most software that the Window OS has installed can easily be pinned to the Windows 8 start menu. However, not all software out there is installed onto your system via an installer. Some software is just an executable file or folder. This is fine but how do you pin it to the Windows 8 start menu? Easy, just follow my tip.

Pinning via a Shortcut

Let say you have downloaded software like PuTTY and you would like to use it often. In the past you may have kept it on your desktop. You still can, however, the start menu is kind of the new desktop when it comes to shortcuts.

The first thing to do is put the unzipped executable software into a tidy place within your system. I normally manually add software of this sort to program files. Once you have added the executable program to a tidy place head over to the Windows desktop. Right click the desktop's main area and select 'add a new shortcut'. The shortcut is only temporary so don't worry about adding clutter. Step through the new shortcut wizard. Once the shortcut has been created, simply right click it and select the option 'Pin to Start'.

Tidying up the Shortcut

If you have followed the steps in the last section of this post, you will find that the software linked to the shortcut is now pinned to your Windows start menu. To tidy up, all you need to do is drag the shortcut over to the recycle bin. After emptying the recycle bin, you will find that the executable software continues to be pinned to the start menu.

You will find that the pinned item will stay pinned until you decide to unpin it yourself. Assuming that you have not unpinned it, you will also find that the start menu's search will list the software for you now too.



Read

Being able to consume RSS feeds online via Google Reader was awesome. One of the greatest things about Google reader was the ability to centralise your personal pool of RSS feeds. With Google Reader it was possible for some of the best RSS reader apps to synchronise with that pool. Finding a replacement to Google Reader that is as cool now that Google reader has gone has been difficult. However, I have finally found a replacement worth shouting about.

Tiny Tiny RSS is a Worthy Replacement

The replacement RSS reader that I have found is a self-hosted open source project named Tiny Tiny RSS. Tiny Tiny RSS is specifically designed to allow you to read your RSS feeds from any ware just like Google Reader was.

With Tiny Tiny RSS your RSS feeds are safely tucked away behind a login screen. They are tucked away on a URL where you put them. And I found it all simple to set up.

Once it is up and running you can access all of your feeds via a web browser and via apps. I will get to apps soon. Also, as an added bonus, in the Firefox web browser you can 'one click' subscribe to new feeds once you have enabled the Tiny Tiny RSS Firefox button. I think that is cool.

A screen capture of the Tiny Tiny RSS reader

The Tiny Tiny RSS User Interface

Tiny Tiny RSS has a nice desktop style user interface that is Ajax driven. I have been finding my way around its user interface quite well so far. I haven't found any major user interaction defects yet.

The user interface provides a substantial preference area too. Its defaults have been chosen well as I have not needed to play with the preferences very much yet.

I found the user interface to be slightly slow in loading but, I admit, I haven't tweaked with anything server side.

RSS Reader Apps

Online browser-based tools are great but, as you know, sometimes you need an app for that. On Google play there are several RSS readers that interact with Tiny Tiny RSS's API. I checked out an app called 'Tiny Tiny RSS' itself. But there are many more apps listed including free ones.

A screen capture of the Tiny Tiny RSS Android App

The Tiny Tiny RSS app works great. Once I provided my login details all the feeds that I have subscribed to via the web browser interface were instantly available via the Tiny Tiny RSS app.

Conclusion

I am totally sold on Tiny Tiny RSS as a replacement for Google Reader. For anyone who is confident with installing and self-hosting their own RSS reader software; I highly recommend Tiny Tiny RSS.

Why not subscribe to my RSS feed once you have Tiny Tiny RSS up and running for yourself? Thanks for reading this post.

You can get more information over at the Tiny Tiny RSS's project website tt-rss.org.



Read

I don't know about you but my problem with business cards is I never give them all away before some of the information has become out of date. Whether the out of date information is a phone number or an email address, it is almost granted to change before getting to the bottom of the card stack.

I have been giving an out of date card for the last two years. I have been issuing each card with a line through an old phone number and giving an apology each time. Basically, I had given up trying to keep up with ever changing information and just went with what I had.

Then one day out of nowhere sat with friends on a beautiful sunny afternoon a solution came into my head. Reduce the information you give on the card and then the odds of out of date information will reduce too. I know it is obvious now! But it was not something I had paid much thought too.

So once I began thinking about what information I can reduce I asked myself: what do we have business cards for? It's a very simple answer: we give people business cards so people can find out more information about us and to contact us should the information agree with their needs. Again it is obvious, I know now, but it is in the making of the connections that matter.

I therefore realised that if you have a website that is in line with the goal of providing all the information people need, such as links to social media and ways to contact you, the card only needs to direct people there.

It also adds a spam firewall into the mix for free. Have you ever not given someone your card because they seem like they are a spammer? Well by directing new people to your website you get to see what they send you before giving away your email address. That is as long as your contact form handler does not send it to them for you.

Going with a card that only has your website address may be too minimal though. People may easily forget who to associate the card with. I thought a photograph is a good reminder of who they met. A picture should last ten years before people notice that I am aging away from it. As a male I am also unlikely to change my name so I thought that my name can be printed too.

Having a way of contacting you and a face and name to put the card to my just about be enough information. However, a job title is important, I thought, because it helps give a reason for why they may get in contact. I was careful to encapsulate what I do without being too specific as this is not necessarily timeless information.

A print of my business card

Hey presto! I have a business card that should last the whole box. Check it out.



Read

Before CSS3 came along turning HTML 'A' tags into cool dynamic text buttons was not as simple as it is now. However, I had a solution that worked back then. Now I use this old solution to provide fall-back for the old IE browsers.

The first step in providing fall-back buttons for old IE with CSS2 is to follow an HTML pattern. This pattern puts a HTML 'SPAN' within the HTML 'A' tag. The 'SPAN' then wraps all the dynamic text as shown in the example below:

<a class="button"><span>BUTTON TEXT</span></a>

This HTML pattern means you get two items within the DOM to style. For this solution you need both items. As you will see below the outer item, the HTML 'A' tag, mainly provides a hook for the styling of the left hand side of the button. The inner item, the HTML 'SPAN' tag, mainly provides a hook for the styling of the right hand side of the button. I use the word 'mainly' loosely here because the CSS2 pattern works in accord.

.button,
.button:link,
.button:visited
{
    background: url("button.gif") no-repeat scroll left top transparent;
    padding: 0px 0 0px 28px;
    color:#FFFFFF;
    display:inline-block;
    width:auto;
    height:38px; 
    border:none;
    cursor:pointer;   
    font-size: .9em;
}
.button span,
.button:link span,
.button:visited span
{
    background: url("button.gif") no-repeat scroll right top transparent;
    padding: 0 40px 0 0;
    height: 38px;
    display:inline-block;
    border:none;
    line-height:38px;
    margin-right: -20px;
}
.button:hover,
.button:focus,
.button:active
{
     background-position: left bottom;
}
.button:hover span,
.button:focus span,
.button:active span
{
     background-position: right bottom;
}

You will notice from this CSS example that a background image is being used. Remember, the goal is to get rid of the image text. We get rid of image text because actual text is accessible and image text is not accessible.

This method turned out to be a good way to do buttons a couple of years ago. The background image makes it possible to have round corner and or horizontal gradients and or a graphic next to the dynamic text.

For the background you will need to put the button's normal default state and its hover state onto its own image sprite. I always opt for a silly length so that the dynamic text can also be a dynamic size on the X axis (limited at size silly of course). The sprite needs to be of a height dividable by two.

In your CSS the height and line-height needs to agree with the buttons background height. In the example CSS shown above the button is 40 pixels high. The HTML 'A' tag gets the left padding and the HTML 'SPAN' tag gets the right padding. This then gives you the flexibility to have horizontal centring or an offset to accommodate a graphic.

In the case of round cornered buttons you need a negative right margin on the 'SPAN' tag's CSS.

margin-right: -5px;

That's it. Check out the example CSS2 button.

I am thinking of making a tool soon that will produce the CSS and background image based on a specification given via an HTML form. Please let me know if you are interested in this tool by contacting me.


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