How to make sure your og:image is used by Facebook

You can define custom meta tags on your website to decide it will appear when shared on Facebook. One of them is the og:image tag. Unfortunately, it does not work reliably, and even their Open Graph debugger won’t help you. For instance, I got the following message: og:image should be larger: Provided og:image is not […] does not work on iOS

The recommended method to give a text field focus and select its contents is the following: document.getElementById(‘myInput’).select(); However, this does not work in iOS. The correct way to do it is to use setSelectionRange on an already focused input. var input = document.getElementById(‘myInput’); input.focus(); input.setSelectionRange(0,99999); setSelectionRange will not work on iOS if the element doesn’t […]

Telling if a field is required in Django templates

If you want to tell whether a field in a template is required, use form.myfield.field.required as in the example below: {% for field in form %} <label for=”{{ field.id_for_label }}”> {{ field.label }} {% if field.field.required %}*{% endif %} </label> {{ field }} {{ field.errors }} {% endfor %} In this example, there will be […]

Using X-UA-Compatible with valid HTML5

If you were using <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> to force IE to use the most recent rendering engine and disable compatibility mode, you might have discovered that it’s not a valid HTML5 meta tag. The easiest way to solve it is to use .htaccess or your Apache config to always send X-UA-Compatible in the HTTP […]

What is XSS injection?

XSS injection (XSS stands for Cross-Site Scripting) works a bit like SQL injection: improperly sanitized user-submitted data is used to alter the application’s functionality. Instead of altering SQL queries, XSS injection alters HTML and JavaScript. For example, a hacker could leave the following comment on a vulnerable site: <script>alert(‘Your site was hacked!’);</script> When the site […]

How to force Apache to serve UTF-8 by default in .htaccess

If you want to serve all text files as unicode by default, add the following line to your .htaccess: AddDefaultCharset utf-8 You can also set the encoding on individual file types using AddCharset: AddCharset utf-8 .html .css .js .php

How to force IE8 to render without compatibility mode

Some companies force Internet Explorer 8 to render all pages using the Internet Explorer 7. This is what Microsoft calls “compatibility mode”. Fortunately, you can override that setting and force IE to render the page using the latest version of its rendering engine (IE8+) with a simple meta tag. Place this before all other tags […]

How to use the HTML5 full screen API (with examples)

The new HTML5 fullscreen API allows you to build full screen web applications very easily. Before we get started, there are a few things you need to know: Only user events (click, keyup etc.) can trigger full screen mode. This prevents pop up ads from going full screen. The API is supported by IE9+, Chrome […]

Mobile web design: how to disable zooming on your mobile sites

When you are making a mobile website, you might want to disable sideways scrolling and zooming. Although I wouldn’t personally recommend disabling zooming, it’s easily done. In your head tag, insert the following meta tag: <meta content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′ name=’viewport’ /> This tag is recognized by all major browsers, including Chrome on Android and […]