Page 7 of 7

Find duplicate field values in MySQL

I recently had to clean up a database table of user data because it had the same email addresses assigned to multiple users. The first step was putting together a query that pulled only the duplicate email addresses and also told me how many times they occurred – from there the actual clean up process was fairly straight forward.

This simple query looked something like this:

I find this to be a particularly helpful SQL snippet as this kind of clean up process is fairly common. It uses MySQL’s HAVING clause because WHERE cannot handle aggregate functions – COUNT() in this case.

WordPress: Add featured image to RSS feed

I’m a firm believer in minimising the amount of plugins a WordPress site uses and instead making code changes to get what you need. This removes the overall bloat of a site and makes things far easier to manage. From time to time I come across useful plugins, but instead of using them I work out the quickest way to achieve the same goal by coding it myself. Here’s a simple function I use to show a post’s featured image in the RSS feed (something WordPress does not do by default):

Just paste that code into your theme’s functions.php file and you’re good to go. You can obviously modify the style attribute to have it display however you wish, as well as the image size (set to ‘medium’ in this example) – the options for this are: thumb, thumbnail, medium, large & post-thumbnail.

Make your WordPress content editor use HTML by default

The WordPress content editor will always show you the ‘Visual’ tab by default. If you are one of the many people who have problems with the visual editor stripping out your HTML tags or attributes, this can quickly get very annoying – every time you load a post to make changes, it lands on the Visual tab and has all your nice HTML removed.

Here’s a simple line of code that you can add to your theme’s functions.php file to ensure that it always lands on the HTML tab by default (you will still have the option of switching to the Visual tab of course):

This example will ensure that only non-admin users see the HTML editor by default.

Simple way to generate a random password in PHP

When creating web apps, there’s often a need to generate a random password for your users. There are a number of ways to do this, but in needing to do it recently I came up with this very simple function that will generate a password (or other random string) of whatever length you wish. It’s particularly useful when generating passwords for users that they will then change in the future. It uses PHP’s handy str_shuffle() function:

The only shortcoming of this method will come in when you want to generate a password that is longer than $chars, but this is rather unlikely I would think. Also, the fact that it will only ever use each character a maximum of one time means that it is more susceptible to a brute force attack (whether that’s a problem or not depends on how paranoid you are…).

Front-end & WordPress developer interview test

I recently had to create an interview test for a developer who has good skill in PHP, but is not so experienced when it comes to front-end coding. On the front-end side of things, the job they were interviewing for required decent HTML & CSS knowledge. They also were required to have a decent working knowledge of WordPress. With that in mind I created a little test to evaluate their skills – I’m posting it here for anyone else who needs something similar.

TestI gave the developer the image on the right (click to enlarge) and asked them to do two things:

  1. Code it up as a web page using whatever techniques they like.
  2. Code it up as an email optimised for as many of the common email clients as possible.

While the page looks simple enough, the way it is coded will tell you a lot about the techniques that the developer would normally use. Coding the email version of the page will also test how versatile they are and, in the case of the job I wrote this test for, is a necessary part of the job.

On top of that I also gave them one other task that would test their WordPress skill. It’s a fairly simple one that most WordPress devs will be able to, but it will effectively show the individual’s dev style in the WordPress environment. The question was simple:

  • Write a widget for a WordPress site that will contain links to the site owner’s Facebook, Twitter and LinkedIn profiles. The user must be allowed to specify their usernames for those sites when adding the widget in the WordPress back-end. The front-end design of the widget is not important.

I’m sure there are plenty of other questions that could be asked, but that struck me as a decent enough one for the situation. If you have any other questions that you think would be helpful to ask, then please post them in the comments below.

Loop through each character in a string in PHP

The other day I was working on a project that required me to extract a numeric ID from the current page’s URL. The problem was that the ID could either be at the end of the URL string or in the middle, depending if there were any parameters added on or not. Here is how I worked around the problem by looping through each character of the string.

Because the first part of the URL was formatted normally I could use a combination of strpos() and substr() to find the part of the string that contained the ID as well as all the characters that followed it (I could have used regex here, but I prefer to avoid using it if I can help it). This still left me with the problem of getting the ID out of that string, as the actual number could be any length. Luckily for me, the ID was immediately followed by a non-numeric character, so I came up with a solution where I could loop through each character in the string and use each one for the required ID, but stop the loop when I hit the first character that was not a number. In the interest of sharing some useful code, here is the simple snippet that I used to loop through the string along with my use case:

How to track if companies are selling your email address

I recently learned a handy little trick for tracking what companies do with your email address when you sign up for their newsletters, or enter a competition, or they find some other way to sucker you in to giving them your personal information. The only requirement for being able to do this is to have your own domain.

I learnt about this tracking method from reading this blog post on Lazygamer and it’s so simple and makes so much sense that I started using it immediately. Basically, any web server will have a ‘catch-all’ email address – what this means is that you can set any of your existing email address to receive emails that are sent to any other non-existent addresses. So, if you send an email to ajeyrg@hughlashbrooke.com then I will receive it at my selected catch-all address (I will, of course, immediately block any future emails that are sent to that address).

Practically speaking, how this would work as a form of tracking your email addresses would be for you to sign up for a newsletter using a non-existent email address. For example, if you sign up for a newsletter on the website of Company X just use the email address companyx@yourdomain.com. Emails to this address will be received at your catch-all address and Company X will be none the wiser. Now, a few weeks later you suddenly receive a spam email sent to companyx@yourdomain.com that comes from Company Y – this obviously means that Company X is being underhanded and giving out your email address to whoever they please. With this knowledge (and a few screenshots of the offending email) in hand you can now take to Twitter and decry the services of both Companies X & Y safe in the knowledge that you are entirely justified in your rants. Who knows, maybe one of the companies will apologies to you and sent you free stuff to say sorry.

An alternative would be to use the Gmail ‘+’ trick just add ‘+sometext’ to your Gmail username and you will receive all the emails at your normal Gmail address – however some website don’t allow you to enter email address with the + in it for this very reason.

Making a semi-transparent background behind opaque text in CSS

When I receive the final PSDs from a designer I invariably want to reach through my computer and slap him for making my life difficult. With very few exceptions, there will almost always be at least one design element that is frustratingly hard to achieve using HTML and CSS (no matter how easy the designer may think it will be). The new properties available in CSS3 have reduced this frustration thankfully, but from time to time there are problems that crop up. One design feature that can be a little frustrating to work around when coding is the inclusion of normal, opaque text on a semi-transparent background. Here is a simple solution to get round this problem.

In the past I have used absolutely positioned divs and the z-index property to achieve the desired result. There is, however, a much simpler solution.

You want the background of a div to be transparent, but not the text – this requires using an RGBa value for the background colour of the div. From time to time you may use RGB values for setting colours in your CSS (e.g. rgb(170, 187, 97)), an RGBa value simply adds an alpha-transparency value to that code, so the HTML and CSS for this is:

This would set the background of the div to have an alpha transparency value of 0.5 – this can range anywhere from 0 (fully transparent) to 1 (fully opaque). This is different from the opacity property, as it only affects the background and not the div contents as well. For browser compatibility’s sake it is always a good idea to set a fallback background colour just in case. In this case, the best option would be to set it to the same RGB value as we have already used (just without the alpha transparency). The browser support for the RGBa colour value is absolutely fine all recent browsers, but will fail in older ones (IE is the main one to watch, as it is only supported from IE 9 and up) so the fallback colour is always necessary.

CSS positioning

Understanding CSS positioning

When working with CSS, I have constantly encountered one particular property that is grossly misused – the position property. If you check out the source of almost any website you will see plenty of elements with randomly defined position properties. I just thought I’d clear up some of the confusion, as understanding this property will make your life significantly easier when creating layouts.

You have five values for the position property. They are:

  • static
  • inherit
  • fixed
  • absolute
  • relative

The default value is static – this just means the element appears in the normal flow of the document. The other obvious one is inherit – this you should be familiar with as it is used as a value for most other properties and simply means that the property value is taken from the value of the same property in the parent element.

The fixed value means that the element is positioned in a fixed position relative to the browser window. You can define the position using the left, right, top and bottom properties. This is particularly useful for creating floating menus or buttons that you would like to be permanently available to the user.

Those are the simple values – it is with the final two that things get a little more complicated. Most people use the absolute value as a way to position an element in relation to the <body> tag. In actuality, this value breaks the element out of the normal document flow and positions it in relation to the first parent element that has its position value set to anything other than the default (static). Have a look at the following code (and bear in mind that I’m definitely not advocating the use of the style attribute – I’m just using it for this example):

Because the #second-parent element has a position value of relative (i.e. not static), the #child element will be positioned against its top left corner effectively ignoring the fact that the natural flow of the document would ordinarily place it inside #first-parent. As with fixed, you can use the left, right, top and bottom properties to precisely position the element.

The final value is relative. This simply allows you to  position the element relative to where it would normally appear in the document. Just assigning an element with this value does not do anything on its own – you also need to define how you would like it positioned. This means that, in the above example, #second-parent will not have its position altered in any way by the relative value assigned to it. Once again, you will need to use the leftrighttop and bottom properties to position the element. For example:

The #child element will appear inside the #parent element as the flow suggests, but because of the combination of its position and left values, it will have a left margin of 10px so will effectively be shifted 10px to the right.

The other property that you can use with relative in order to position your element is z-index. I’m not going to go into the details of that here, but basically what it does is position elements on top of each other – the higher the z-index value, the more likely the element is to appear on top. In order to use this property you need to have the element’s position set to relative.

Understanding this CSS property well will make a big difference to how you create layouts and should help you minimise the use of repetitive child elements to apply some simple positioning. Hopefully you should now be able to minimise the clutter in your HTML and remove arbitrary position values that have no real effect.