Category Archives: Web Development

Create a Django development environment on 64-bit Windows for Heroku deployment

Getting Started with Django on Heroku

This weekend I tried to follow Heroku’s Getting Started with Django article. Unfortunately for me, this article is clearly aimed at developers working in a “unix-style environment”, and I develop with a 64-bit Windows machine both at work and at home. Given that we are working with a Python-based framework, I foolishly assumed that it would be trivial to translate these instructions to Windows. How wrong I was.

This article summarises all the issues I encountered and how I eventually worked around them. I found most of the individual answers I needed via Google, but I couldn’t find a single resource that explains this whole process. I hope it saves you some time. The specific error-messages and console output were generated with 64-bit Windows 8.1, but I expect things to be basically the same with 64-bit Windows 7.

Continue reading Create a Django development environment on 64-bit Windows for Heroku deployment

How to embed third-party widgets such as Mixcloud into WordPress

There are now a huge number of third-party content providers that offer the ability to embed their content into your own website. YouTube is no longer the only media streaming service that you might want to include in one of your pages. Many other competing media streaming providers are now offering an API that should make it easy to embed their content. However, the question is what is the best way to include their content in one of your WordPress pages?

This post describes three different approaches to embedding third-party content. It is written for owners of self-hosted WordPress sites, but some of the techniques may also be applicable to sites hosted on WordPress.com. I will use the Mixcloud audio streaming service for the examples, specifically because it is not one of the out-of-the-box supported services in WordPress.

Continue reading How to embed third-party widgets such as Mixcloud into WordPress

How to Override Inline Styles from an External Stylesheet

All web developers know that by default, inline styles take precedence over styles in external stylesheets. For example, the following inline style declaration:

<span style="color: red;">Red text</span>

will ensure the “Red text” is coloured red, even if the following is included in an external CSS file, or in the <head> styles:

span { color: blue; }

Now it is generally not a good idea to use inline styles, as one should avoid mixing markup (responsible for the content and structure) with styles (responsible for the presentation format). Sometimes this is out of our control, for example if you are using a CMS which generates HTML with inline styles. In this case, how do you override these inline styles to ensure the page looks right?

Fortunately, this is easily done by using the following CSS magic:

span[style] { color: blue; }

The presence of the magic [style] attribute ensures that this style declaration overrides whatever inline styles are specified for the <span> elements.

I know this trick is generally well known, but it’s useful enough to restate it, just in case you’ve somehow not discovered it yet! In addition, please note that as with most useful CSS techniques, I believe this is not supported in Internet Explorer 6 or 7.

A slight aside – you can also use the “!important” CSS rule to assign greater priority to specific styles, regardless of where they are declared, but this approach is frowned upon as it can interfere with style customisations made for accessibility reasons, and can also be a sign of poorly defined or structured CSS.