Archive for the ‘Web Development’ Category

Recommended WordPress Plugins

Thursday, February 20th, 2014

Here’s my list of recommended WordPress plugins which I find myself using again and again:

Contact form 7
Very good for doing contact forms. Sends the result to an email address. If you want to save the entries to a DB couple of with “Contact Form DB”.

W3 Total Cache
For site optimisation / speed up. Does a lot of the work for you. Generally enable this when the site is finished.

Infinite-Scroll
Fantastic plugin that converts post index page to load posts in an infinite scroll fashion, either automatically or twitter style. Paul Irish heavily involved with this. Uses progressive enhancement so crawlers can still access the posts via traditional pagination links.

Google XML Sitemaps
Automatically generates XML sitemaps for you, submits them to Google.

Google Authenticator
Adds more security to backend login by adding two-step auth.

Multiple Post Thumbnails
Sometimes you want a post or more often a custom post type to have support for more than one featured image. This plugin allows you to do that.

Add Custom Post Types Archive to Nav Menus
Wordpress doesn’t support this by default but this plugin will allow you to add a custom post type archive page (which usually lists the items) into your menu via the wordpress backend.

WP-PageNavi
Great for traditional style page navigation rather than the simple ‘next post’ / ‘previous post’ links that wordpress provides

Media Tags
Allows you to add ‘tags’ to the media section. Useful if you want as section on your site that lists photos in a particular group.

Breadcrumb NavXT
Very flexible plugin to cover all of your breadcrumb needs.

Social share plugin
Easy way of adding share buttons from several networks under each post.

When using multisite:

WordPress MU Domain Mapping
Allows each site to have it’s own domain which WordPress doesn’t support out of the box.

ThreeWP Broadcast
Allows you to copy / share one post/page to other sites in the network. Works with custom post types too.

Web developer tools in Firefox 10

Saturday, February 18th, 2012

This video from the Mozilla blog gives an overview of some of the web developer tools available in Firefox 10.

The inspector replicates some of the features available in Firebug, but I don’t think I’m quite ready to uninstall it yet! Also available are listing of network requests (something that’s been available in Chrome since day 1). This might mean I no longer need the HttpFox plugin. The scratchpad feature is possible the most intriguing of the features demoed – it allows you to easily run arbitrary javascript code on the current page.

How to add admins to a Google+ page

Thursday, January 26th, 2012

I’ve used the term admins as that is what Facebook calls them, but Google+ refers to extra users that are able to manage a business page as Managers.

  1. Go to your Google+ business page and make sure you are using Google+ as the page, not your personal account. The page name should be displayed at the top right.
  2. Click on the options icon (the cog) at the top right-hand side of the screen, then select ‘Google+ settings’
  3. On the following page you should see an option called ‘Managers’ on the left-hand side. If you don’t see it, double check that you’re signed in as the page and not your personal account.
  4. Select the Managers option and on the following page you are able to add another manager to the page via entering their email address. Make sure you enter the email address that is associated with the user’s G+ account.
  5. The user is then sent an invite which they must accept before they can manage the page. Until that time the invite is marked as ‘pending’.
  6. Once the user has accepted the invite you have the option to remove them from the same page. There’s also the option to transfer ownership if you’re no longer involved with the project or business the page is promoting.
Adding Google+ page Managers

Adding Google+ page Managers

 

Protocol Relative URLs

Tuesday, January 17th, 2012

Thanks to the excellent Paul Irish and HTML5 Boilerplate, I discovered an excellent nugget of information recently, that’s incredibly useful when building sites / web apps that need to work both on secure (https://) and non-secure (http://) URLs. This includes all Facebook apps since October 2011.

When linking to an external JS, css or image file that is available over both https:// and https://, you can use a URL of the form:

//domain.com/path/to/asset

for example (loading the jQuery library from Google’s CDN):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Your browser will request the asset using whichever protocol you’re viewing the current page in.

This has implications if your viewing a page locally via file://, which is why you’re always better off using a local web server rather than opening a file directly. There’s also an issue that causes IE7 and IE8 to download the file twice when this method is used in <link> tags or @imports statement within CSS, so I would say it’s best of avoided there. More details here.

This technique allows you to quickly and easily avoid the dreaded ‘this page contains both secure and nonsecure items’ warning in Internet Explorer.

 

How to change browser language in Firefox 4

Tuesday, May 31st, 2011

One method is to uninstall Firefox then download and install another version in a different language. This can be incredibly time consuming though. An alternative is to download a language pack and then change the internal locale string of the browser:

1) Download language pack from here. This mozilla.org page has language packs for most languages. After installing a language pack you will need to restart your browser

2) Change locale string. Navigate to about:config in your address bar. After accepting the ‘here be dragons’ warning set the filter to ‘general.useragent.locale‘, right mouse click on the value and choose modify. Change the language string to the preferred value, for example ‘en-GB’ for British English or ‘fr-FR’ for French.

After a browser restart your Firefox should be in the preferred language.

The beginning of the end for Internet Explorer?

Friday, January 22nd, 2010

In my years of developing for Internet Explorer I’ve been continually having to battle with it’s half-assed implementation of web standards and non existent debugging tools, but have to continue supporting it because so many people don’t know any better. A small ray of hope has emerged in the last few days off the back of the Google/China showdown. Apparently the Chinese hacks were taking advantage of an undisclosed security flaw in Internet Explorer. Because of the this on the 15th Jan the German goverment issued a warning to Internet users to avoid using Internet Explorer. They were followed by the French government on the 18th who issued a similar warning.

Now it seems the malicious code only targets IE6, and Microsoft released a patch for it yesterday (the 21st). Hopefully these security alerts will have caused some people to jump ship from Internet Explorer to one of the alternatives, and we can see those usage stats, particularly of IE6, start to drop off.

Source: StatCounter Global Stats – Browser Market Share

10 Recommended Firefox extensions for web programmers

Tuesday, January 19th, 2010

Firebug

If you spend time building web pages, working with CSS, Ajax, javascript etc this plugin can be amazingly helpful. It allows you to inspect DOM elements on the page, see what css styles they have applied to them, where these CSS styles are defined and even preview changes without having to modify the source.

HttpFox

HttpFox allows monitoring of http traffic between your browser and the web server. Also allows you to inspect headers, POST data, cookies etc. Incredibly useful when working with Flash applications when you want to see what data is being loaded in, and also for easily checking for missing or broken page components.

YSlow

Another tool for website optimisation. Developed by Yahoo, YSlow analyses various components of a web page and gives you tips on areas that can be improved based on Yahoo’s rules for high performance web sites. It also includes neat tools to do things like image optimisation. YSlow runs on top of Firebug and so you’ll need to have that installed before you’re able to use it. Yahoo’s Best Practises for Speeding Up your Website are a real goldmine of information and well worth looking into if you’re involved with making sure your getting the best possible performance from your website.

HTML Validator

The benefits of having correct, cleanup HTML/XHTML markup are obvious. This extension parses and validates your markup using two tools from the W3C – Tidy and OpenSP. You are then presented with a list of issues, making fixing poor markup a quick and easy process. It also has a useful feature that allows you to view html source after javascript execution, which is useful when working with Ajax.

Web Developer

The web develper extension brings together stacks of different tools that are useful for web development, tools for inspecting web pages, validating, disabling components, resizing the browser window, etc etc.

Flash Tracer

Very useful if you work with Flash, this extension allows viewing of trace statements from a Flash movie when it is embedded in a web page. Requires you to use a debug Flash Player.

Flash Switcher

I use this in conjunction with Flash Tracer. As the debug flash players can be slow compared to the normal player, you ideally don’t want to be running it all the time. Flash Switcher gives you a quick and easy way to switch between different flash versions. It also allows you to test your flash under different flash player versions.

FireShot

This extension doesn’t feel quite as slick as other extensions but provides some neat functionality. It gives you a quick and easy way to take a screengrab of the current page (either visible area or the entire page), and then carry out simple edits and make annotations to the grab before saving it off or sending it via email. Very useful when you want to send someone a screengrab highlighting an issue or area of interest.

ShowIP

A simple extension that tells you the IP address of the site you are visiting. If you maintain several servers this can be useful to tell you where a page is hosted

Clear Cache Button

Allows clearing of your web cache without having to delve through submenus. if you find yourself doing this a lot, this extension is worth getting.