Journal

Underline

Web development is all about solving problems. That's what makes it so fun. I thought I'd share some of the problems I came across recently and how I solved them, in hope that it will also help out others searching for a solution.

Adding a icon thumbnail to your WordPress plugin on the WordPress.org repo

Since the release of WordPress 4.0 you can now add a thumbnail icon to your plugin, which is featured in the WordPress.org plugin repo. Doing this is very similar to adding a banner to your plugin. Simply create a 128 … read more >>

The best WordPress Facebook plugin

string(0) "" bool(false) test3string(0) "" bool(false) test3string(0) "" bool(false) test3string(0) "" bool(false) test3

I decided to write this post as I was so impressed by a WordPress plugin I used on a project lately. Not only was the plugin great, but the support I received was out of this world! The least I … read more >>

Using jQuery to expand a text box on hover

Let’s say you have limited space on a page so you want to display blocks of content which expand when hovered upon, as shown below. The boxes expand when hovered, with a slight delay when hovering off to aid in … read more >>

Preventing duplicate event handlers in jQuery

I was working on some plugin development lately and ran into an issue where I needed to remove any event handlers already attached to an element before attaching a new one. I found the easiest way to do this was … read more >>

Can I use the Myriad font on my website?

You sure can.  But as it’s a commercial font then you can’t host that font yourself unless you have expressed consent from its creators. This is to prevent other users who haven’t purchased the font file from taking it from … read more >>

Hide the tooltip bubble thing in a Google Maps embed

In case I’m not the only one who doesn’t like Google Maps popup tooltip info speech bubble thing, I thought I’d share how to not show it. Here’s the regular Google Maps embed code: <iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ … read more >>

Lets convert JSON_decode float values to strings

I was working on my Custom Facebook Feed plugin and recently ran into an issue. When using PHP’s json_decode function to parse the JSON data returned from Facebook it would convert certain ID values to floats instead of giving them … read more >>

HTML5 video won’t play in Firefox

What the…?  I added the .ogv video file, why isn’t it playing in Firefox!? I don’t know about you, but I don’t exactly love having to convert videos and provide 3 file formats for every video I need to self … read more >>

Why is this random HTML button submitting my form…?

Good question.  And the very same one that I had. Here’s something new I learned: If I have a button anywhere on the same page as my form, then that button decides that it wants to submit that form.  Even … read more >>

Force sections of your webpage to print on separate pages

I recently created a “Print Portal” for a client’s site.  They wanted to be able to print all (or some) of their WordPress pages to a single PDF.  This is actually pretty simple to accomplish, just loop through all of … read more >>

Multiple Flexsliders causing a weird background flash/flicker

I don’t often use many jQuery plugins, I like building custom widgets and plugins myself – it’s way more fun!  But time and budget doesn’t always allow that, and with the demand for responsive sites these days a great little … read more >>

How to link two jQuery UI sliders together

I recently used jQuery UI sliders on a project and had to link them together so that the value of one couldn’t be greater that the value of the other, and the value of the other couldn’t be less than … read more >>

Adding a (more advanced) Facebook news feed to a website

A while back I wanted to add a custom Facebook feed to a website in order to display posts from a client’s Facebook page.  The website was beautifully designed and I didn’t want to ruin the aesthetic by plonking a … read more >>

Use jQuery to grab the absolute path of a relative image

Good old jQuery has a function for everything it seems.  I was trying to obtain the absolute source path of an image which was linked relatively (eg: ‘/imgs/godsavethequeen.png’) but jQuery gives you just that – the relative path. Sure you … read more >>

Can I use the Avenir font on my website?

Yes. Yes you can.  But as it’s a commercial font then you can’t host that font yourself unless you have expressed consent from its creators. This is to prevent other users who haven’t purchased the font file from taking it … read more >>

Facebook is caching my website sharing information…

So I recently found out the hard way that Facebook likes to cache sharing meta information for pages which have been shared on there. The Problem I was working on a site where I was testing some social media sharing … read more >>

How to split a dynamic list into two equal columns using jQuery

Let’s say you have a dynamically generated list.  You don’t know how long this list will be, but you want it to be displayed in 2 columns rather than just one.  An example could be a list of posts in … read more >>

Design websites with a British accent

If you’re an established web designer/developer then I’m sure that this situation sounds familiar to you: Client: “This design is great, but this lorem ipsum placeholder text you put in doesn’t sound intelligent enough.” You: “I know. This has been an … read more >>

Targeting a specific word using JavaScript and jQuery

Ever needed to target a specific word in a paragraph?  Using a little jQuery you can do just that… Say you have the following paragraph of text: John Ipsum rule britannia lorem fish and chips ipsum going to the loo … read more >>

Firefox and it’s CSS :focus outline bug

I’ve recently been working with an online university where there’s understandably a large emphasis on accessibility.  Part of this is being able to navigate through a site using only the keyboard.  This is when I discovered a little bug in Firefox … read more >>

IE doesn’t like jQuery’s $(‘title’).text(var);

Changing the title of a web page on the fly can be useful for a bunch of reasons. Say you’re creating an app using jQuery for example and using a single page to house content which might be different depending … read more >>

Calculating the background-position for image sprites

So everybody knows that using an image sprite in place of multiple background images is a good idea.  It increases performance by reducing HTTP requests, means you don’t have to preload any images for hover states etc etc… but if … read more >>

Getting your PHP HTML email to render in Gmail

Ever needed to send an HTML email via PHP only to find that it won’t freakin render as HTML in Gmail?  Well I did.  Of course the email renders correctly in every other mail provider (Yahoo, Hotmail, Outlook etc..). Turns … read more >>

John Brackett… As seen in magazine

Earlier this year I was honored to be featured in one of the world’s leading Web Designer magazines – ‘Web Designer‘ – and thought it was about time I threw a picture of it up here, so at the very … read more >>

Adding a Facebook news feed to a website

A while back I wanted to add a custom Facebook feed to a website in order to display posts from a client’s Facebook page.  The website was beautifully designed and I didn’t want to ruin the aesthetic by plonking a … read more >>

Centering an element using jQuery

After you have a good grasp on both HTML and CSS you can create some great websites, but what if you want your website to do more?  To really build websites which are dynamic on the front-end and powerful on … read more >>

Dogs vs Stuffed Toys

Dogs are great animals. You pet them and they lick your hand, you throw a ball and they go and fetch it.  They are so lovable because they respond and interact with you.  Stuffed animals, on the other hand aren’t … read more >>

It’s about time…

So I’ve wanted to get this little blog started for a while now but had a little trouble with a hosting company who shall not be named. Let’s just say that my daddy wasn’t going as well as I would … read more >>