target=”_blank” validation

target=”_blank” is not valid code within webpages with a strict doctype declaration.

A valid replacement is :

<a href = “http://www.example.com” onclick = “window.open(this.href); return false;”>my link </a>

The onclick=”window.open(this.href); return false;”  is an inbuilt javascript method and needs a <meta> declaration  to work properly in in xml, strict xhtml or html4 source code pages.

<meta http-equiv=”Content-Script-Type” content=”text/javascript”>

target=”_blank” is however 100% valid in HTML5.

Facebook Feed Dialog

The Facebook Feed Dialog prompts a user to publish an individual story to a profile’s feed. This does not require any extended permissions. Every dialog has a method name and parameters. The URL to a dialog always starts with

http://www.facebook.com/dialog/

followed by the name of the dialog and parameters.

To ask a user to post a story to their Wall, the Feed Dialog with required parameters is used :

http://www.facebook.com/dialog/feed?parameters

The following parameters are available :

  • app_id : required application’s identifier
  • redirect_uri : required URL to redirect to after the user clicks a button
  • from : optional ID or username
  • to : optional ID or username
  • message : optional (see Facebook policies) text to prefill the data field that the user will type in
  • link : link attachment
  • picture : url of picture
  • source : url of media file; if specified, picture will be ignored
  • name : name of the link
  • caption : caption of the link; will appear beneath the name
  • description : description of the link; will appear beneath the capation
  • properties : several JSON objects of key/value pairs; will appear in the post beneath the description; key=string; value=string or JSON object with keys text and href
  • actions : one JSON object with keys name and link; will appear next to the “Comment” and “Like” link under posts

To integrate a Facebook dialog in a webpage, the URL can be constructed on the server or client side. Helper methods are available in the form of Javascript, iOS and Android SDK’s. A Javascript Test Console is available to debug common methods. The tag ?ref=nf is added by the Facebook platform to the links.

Please visit My favorite artist at Leslie’s Artgallery to see a working example of a Facebook dialog.

Website with GZip compression

last update : 20 August 2012
Compression is a simple, effective way to save bandwidth and speed up a website. The browser sends a header telling the server it accepts compressed content (Accept-Encoding: gzip ; Accept-Encoding: deflate). The server sends a response if the content is actually compressed: Content-Encoding: gzip. If the server doesn’t want to send back compressed content, the browser has to make do with the heavy regular version.

A webserver can be configured (in the settings or in the .htaccess file) to return zipped content if the browser can handle it, saving bandwidth for everyone. If you use the Amazon AWS S3 service as a webserver, you can upload compressed files in the AWS management console and add a metatag

Content-Encoding: gzip

in the HTTP header of the files.

I use the WinGZip utility (version 1) created by Irnis Haliullin to compress the content uploaded to my Amazon AWS S3 buckets. An online tool GIDZip Test to check compressed websites is available at gidnetwork.com.

Some useful documentation about Gzip compression is listed herafter :

YUI compressor for Javascript and CSS

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).

The YUI Compressor is written in Java and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a letter symbol wherever such a substitution is appropriate . The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source.

Several GUI’s are available :

Online versions are available at the website of Zileex Media, of  Rodolphe Stoclin and of gpbmike.

WordPress plugin & theme development

WordPress Codex provides a huge documentation for programmers who want to develop plugins or themes for the WordPress Blog program.

WordPress Plugin: A WordPress Plugin is a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress API.

Resources :

WordPress Theme : A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files, style sheets, custom pages, as well as any necessary code files and scripts.

Resources :

WordPress Templates : Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates are used on all the web pages, while others are used only under specific conditions.

Resources :

How to make an iPhone web app ?

Tetris web app for iPhone

An iPhone web application (web app) uses Web 2.0 technologies to deliver a focused solution that looks and behaves like a native iPhone application. iPhone web apps run in Safari on iPhone, the unique implementation of Safari that provides full-featured web browsing on iOS-based devices and responds to touch-based gestures.

The Apple Safari Developer / Reference Library provides guides, tutorials, code samples, FAQ’s  and best practices about the creation of web content for iOS devices. The Safari Web Content Guide, the HTML Reference, the CSS Reference and the JavaScript Guide are key documents.

A very useful tutorial about the creation of an off-line Tetris game for an iPhone has been published by Alex Kessinger on the Six Revisions Website. A tutorial about how to install a web app on iPhones has been written by jeshyr on the iTalk Magazine.

There are several tools and frameworks available to build html5/css3 web apps for iPhones or for other mobiles (cross-platforms). A list of a few ones is shown herafter :

  • iWebKit 5 : an outstanding kit with copy and paste elements designed by Christopher Plieger and Johan Van Wilsum to create iPhone web apps.
  • Appcelerator Titanium : an SDK for different application environments. The SDK provides the necessary tools, compilers and APIs for building for the target platform.
  • Sencha Touch : a free HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices.
  • PhoneGap : an open source development framework for building cross-platform mobile apps with support of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.
  • Corona : fast and easy development tool for iPhone, iPad and Android games and applications.
  • jQuery Mobile : Touch-Optimized Web Framework for Smartphones & Tablets.
  • iUI: iPhone User Interface Framework
  • Dashcode : part of Apples iPhone SDK

There are also tools and simulators to test created web apps :

  • Bugaboo : an App for debugging web apps on iPhone, iPad, and iPod touch devices, downloadable from the Apple App Store.
  • iPhone  simulator : web browser based simulator

You have to be aware that there are some differences between iPhone native Apps and web apps.

A native App runs code (Objective-C program) on the device and is installable through the App store (if approved by Apple). You have access to all the UI elements the iPhone uses and can do things like 3D which are impossible in the Safari browser. You need a mac to make a native App, but you can make web apps with any platform of your choice.

A web app is accessed via the Safari browser and requires no install. You are just going to a website that has a special stylesheet for the iPhone. Because a web app can also be installed on an iPhone with a custom icon, a custom startup screen, a native look-and-feel and can be used even when the phone is not connected to the Internet, the differences between Apps and web apps are becoming very small.

There are a lot of native Apps that could be run more efficient as web apps. And there are tools to convert a web app into a native App. Make your choice !

Manipulating HTTP Headers with .htaccess

Last update : July 25, 2013

.htaccess is a very ancient configuration file that controls the Web Server running your website, and is a very powerful configuration file. htaccess is sometimes called “HyperText Access” because of its ability to control access of the WWW’s HyperText Transfer Protocol (HTTP) using Password Protection, 301 Redirects, and much much more.

The AskApache website offers a lot of tutorials, tricks and hacks for webmaster and online tools related to .htaccess.

.htaccess tips and tricks are available at the corz.org website.

Facebook Javascript API

The new Facebook Javascript API handles the following methods :

Core methods

  • FB.init : Initializes the library
  • FB.login : Login/Authorize/Permissions
  • FB.logout : Logout the user in the background
  • FB.api : Make a API call to the Graph API
  • FB.ui : Method for triggering UI interaction with Facebook as iframe dialogs or popups, like publishing to the stream, sharing links
  • FB.getLoginStatus : Find out the current status from the server, and get a session if the user is connected
  • FB.getSession : Synchronous accessor for the current Session (less overhead as the asynchronous access)

Data Access Utilities

  • FB.Data.query : Performs a parameterized FQL query and returns a FB.Data.query object which can be waited on for the asynchronously fetched data
  • FB.Data.waitOn : Wait until the results of all queries are ready

Event Handling

XFBML methods

Canvas methods

Some useful tutorials about the new Facebook Javascript SDK are listed hereafter :

  • Mahmud Ahsan on Thinkdiff.net: Graph api & javascript base Facebook Connect tutorial
  • Abu Ashraf Masnun on masnun.com : Using The Facebook Graph API with js-sdk : An explanatory Tutorial
  • timware on Hyperarts : How to Add Facebook’s XFBML Like Button & Social Plugins to Your Web Pages & WordPress Posts

A very useful development tool is the Test Console made available by Facebook.

Errror-reporting in php

The error_reporting() function sets the error_reporting directive at runtime. PHP has many levels of errors, using this function sets that level for the duration (runtime) of your script. If the optional level is not set, error_reporting() will just return the current error reporting level. Some examples are given hereafter:

// Turn off all error reporting
error_reporting(0);

// Report simple running errors
error_reporting(E_ERROR | E_WARNING | E_PARSE);

PHP-Developers appreciate the 

// Reporting E_NOTICE can be good too (to report uninitialized variables or catch variable name misspellings ...)
error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);

// Report all errors except E_NOTICE
// This is the default value set in php.ini
error_reporting(E_ALL ^ E_NOTICE);

// Report all PHP errors
error_reporting(E_ALL);

PHP-Developers appreciate SimpleTest, a PHP unit test and web test framework. The most recent version is 1.0.1 released 2008-04-08, available at SourceForge. JAVA-Developers are  familiar with JUnit, originally written by Erich Gamma and Kent Beck. SimpleTest Interfaces are similar to JUnit.