VB.NET and project imports

Posted on by
2 Replies

Much to my displeasure, I’ve recently inherited an ASP.NET 1.1 website. After a bit of a wrestle they eventually handed over the source code (Why are .NET developers so precious over their code?). Unfortunately they didn’t hand over the Visual Studio project or solution files as well.

Fair enough, I can easily create a new solution and import all the code…no problem. Except there were problems, 104 of them. If you’ve used Visual Studio before you’re likely to know what that means. It means: a shit load of errors, except I’m only going to show you 104 of them.

The kind of stuff I was getting was:

Type 'Control' is not defined.

…and there were no error messages for missing imports. I scratched my head for ages until I thought of the notion of “automatic imports”. What if, these guys have somehow specified a set of imports that get appended automatically to each file…which I haven’t defined?

Turns out, you friggin can do exactly that. In Visual Studio 2003 it is: Right click on project > properties > project properties > imports.

Who the hell thought of that? Surely it is a completely ludicrous idea! It means that if the code gets separated from the project (which is exactly what happened) it won’t work correctly. Not only that, but how the hell am I supposed to know if MyClassName belongs to com.companyX.package or com.companyY.package???

So I’m just totally guessing at the moment, and I’m down to 18 errors. Man I hope it eventually runs.

Website design refresh

Posted on by
7 Replies

It has been nearly 3 years since I first launched the freestyle developments website and it was long overdue for a design and code refresh. Today I finally relaunched the site.

For me, the biggest change has been to move to a HTML5 doctype. The site now utilises many of the new HTML5 tags, such as header, footer, nav, section, article, aside and time as well as some of the new HTML5 forms attributes. Many thanks goes to @rem and @brucel for their fantastic HTML5 book, which I gleaned a lot of useful information from.

I’ve also given it a bit of a visual refresh, to use some CSS3 properties that I’m now regularly using on sites I build: drop shadows, rounded corners – that sort of eye candy. It means that my CSS no longer validates with no errors, but I’m hoping people in the know will be able to see past the vendor specific CSS property prefix errors e.g. “-moz-”, “-webkit-”.

I’ve gone for a Jello Mold layout to give me the flexibility of a fluid layout within parameters I control. I love fluid layouts, but their biggest enemy is widescreen displays, which makes reading text difficult due to the long line lengths, which is minus points for accessibility.

Assuming your default font size is 16px, my site is fluid between 700px and 1280px. Outside of these browser widths the site is rigid. It means that the site never gets so small that the content is unreadable, and never become so wide that the line width is a hindrance to legibility. Another nice thing about the Jello Mold is that between the max and min, the site re-sizes itself in an organic way, which really has to be experienced to be appreciated (give it a go now, go on).

I’ve also updated my CSS to use the YUI reset sylesheet. I don’t agree with absolutely everything that YUI are doing with their CSS stylesheets, but they have some really interesting ideas and valid points. Either way, it is nice to have part of my styles coming off a CDN and is a bit more up to date than the reset I used to use.

In accordance with my post on the EM unit and browser zoom, I’ve updated my stylesheets and removed all references to pixels in favor of EM’s like I have been doing with all my new website builds for a while now. I don’t set a font size for any of my pages html or body elements, allowing the user to choose the size of my website by setting their default font size for their browser, which is 16px for most browsers.

Anyway, I think that is all I have to say for now. Enjoy the new site and all the interesting tech that comes with it. If this all sounds good to you, and you’re looking for a freelancer like me. Get in touch.

HTML5 <article> for WordPress comments

Posted on by
6 Replies

WordPress natively allows us to wrap comments in <div>’s or <li>’s but not HTML5 <article> elements. If you want to do this, add an ‘end-callback’ param to the wp_list_comments function call and set ‘article’ as the style (in comments.php):

    wp_list_comments(array('callback' => 'twentyten_comment',
                           'style' => 'article',
                           'end-callback' => 'twentyten_comment_end'));

…then in functions.php, add the callback function:

    if(!function_exists('twentyten_comment_end')) :
    /**
     * Allow HTML5 <article> (or anything else) for comment container.
     */
    function twentyten_comment_end($comment, $args, $depth) {

        switch($args['style']) {
            case 'ol':
            case 'ul':
            case '':
                echo "</li>\n";
            break;
            default:
                echo '</' . $args['style'] . ">\n";
        }
    }
    endif;

Update: Hardware accelerated alternative to jQuery animate() top, left, width, height and opacity CSS properties for iPhone/iPad

Posted on by
2 Replies

Update to my post here – I’ve tweaked the script to use CSS3 transitions on Firefox 4+ and Opera 10.50+ as well as modern webkit based browsers such as Chrome and Safari.

The CSS3 transforms and transitions enhanced carousel can be found here:
freestyle-developments.co.uk/demo/public/portsurf/?css3

…and the normal carousel:
freestyle-developments.co.uk/demo/public/portsurf/

Source code for CSS3 transforms and transitions enhanced carousel

N.B. The normal carousel works in IE7 and IE9 beta, but not in IE8 (it seems IE8 can’t figure out the dimensions of DOM elements properly).

em, and the two zooms

Posted on by
4 Replies

Back in the days before browser “zoom”*, making text bigger on the page was done by incrementing all the font sizes in the document. All fonts set at 16px became, for example 18px, and all fonts at 20px became 22px.

The problem with this was that often text would outgrow the element it appeared in, because the element was also given a width and height in pixels and this didn’t get scaled as the text size increased or decreased.

Sometimes even if you built a site that allowed text to grow and wrap, it would get to a stage where a single long word was wider than its container, and the overflow would have to either be hidden, or just left visible to run into whatever element was placed on the immediate right. Not only that, but there are just some situations where you don’t want elements to wrap – whether they’re text nodes, floated elements with text in them, or inline-bock elements that you often find in navigation lists.

We didn’t want text zoom, we wanted magnification zoom i.e. the zoom that we have nowadays…but it didn’t exist.

Em to the rescue! Luckily, the em unit is intrinsically linked to text size. It is a relative unit, meaning that the actual size of an em depends on the font-size of its container. Clever people figured out that you could simulate magnification zoom if you measured all your widths and heights using relative units.

How does that work?

Well, if your font sizes are all increased, and everything else is measured in em’s (the width of the letter ‘M’), then everything else gets bigger as well, in proportion. Hooray!

Sure, but why would we use them nowadays?

Firstly, if someone is using an old browser that doesn’t support magnification zoom, or is using the (still existing) older text size zoom, you don’t get the problems I’ve just described above that are inherent to text zoom.

Secondly, if you never define an absolute text size for your document, your viewers are free to set their own default text size (On Firefox you can do this by visiting preferences > content > fonts & colours), and your layout will change size to accommodate. Almost all browsers set their text size at 16px by default, so if you use this as your base – i.e. 16px = 1em, then your site will be the size your designer is probably expecting it to be.

I use em’s for almost all units that could also be expressed in pixels, or percentages or whatever. Percentages almost certainly have a very important place as well, but unless you’re working with a fluid design they’re not a necessity.

* Which, for your reference, works by changing the definition of how big a pixel is on your screen. It means you’re really working with points, not pixels, but that’s by the by.

Hardware accelerated alternative to jQuery animate() top, left, width, height and opacity CSS properties for iPhone/iPad

Posted on by
8 Replies

I was recently asked to quote for a proof of concept HTML5 alternative to a flash carousel, specifically to run on iPad. I said I’d do it, but the agency later decided that others had tried to create a HTML5 version and had not been able to create a version that performed well enough for the client. From my point of view they were under the impression I couldn’t do any better. So naturally, I spent a few hours of my spare time proving this wrong, just for the fun of it.

Step 1 was to build a version of the carousel in HTML5. I chose to use the jQuery framework because…well, I felt like it. The fruits of my labour are here:

http://freestyle-developments.co.uk/demo/public/portsurf/

Now, you can view this on any browser. All that is happening is that there are a set of list items absolutely positioned in a container, when you click/touch an item on the left/right jQuery animates the top, left, width, height and opacity CSS values for each item.

Fantastic, but, it feels really sluggish on iPad and iPhone 4. Go on, try it out.

Fair enough, they are resource constrained devices. What to do though? I’ve already used all the tricks I could think of fast loops, select operation caching etc. etc. So what now?

Luckily, in iOS, transitions and animations of the -webkit-transform and opacity properties are performance-enhanced. Sweet! These correspond exactly to the two CSS properties I’m trying to manipulate for each item in my carousel. Implementation was a simple case of swapping out the jQuery animate function, for the css function. Passing in the webkit transition, webkit transform and opacity values in its place.

For example:

items[itemIndex - 3].css({
	opacity:1,
	'-webkit-transform':'translate3d(' + carousel.itemPosition.medium.left.x 
            + 'px, ' + carousel.itemPosition.medium.left.y + 'px, 0) scale(0.5)',
	'-webkit-transition':'opacity 0.4s linear, -webkit-transform 0.4s linear'
});

The webkit transition property is saying “transition these CSS properties from what they were previously to their new values, using these transition parameters (0.4s linear)”. The webkit transform property is saying “move this element to the following coordinates, and scale it by a factor of 0.5″.

Check out the hardware accelerated version on your iPad/iPhone and compare it with the other:

http://freestyle-developments.co.uk/demo/public/portsurf/?ha=1 (Note: webkit only)

Here is a video demonstrating the performance differences those of you without iPads.

Implementation of HTTP Digest Authentication in PHP

Posted on by
23,225 Replies

So I could only find one other PHP based HTTP digest auth example on the internet…and it looked as though it might not even work. I wrote an abstract class as a base that allows you to easily build your own implementation.

You’d use it like so:

class MyAuth extends HTTPDigestAuth {
    // Implementation of abstract methods
}

$authenticator = new MyAuth();
$user = $authenticator->authenticate();

if(!$user) {
    die();
}

Continue reading →

Migrating WordPress to a new URL

Posted on by
34 Replies

WordPress is a nonsense, and stores it’s URL in multiple places in the database. If you want to move your WordPress install to a different host, exec the following MySQL commands to change the URL in all instances:

UPDATE wp_options 
   SET option_value = REPLACE(option_value, "[Old site URL]", "[New site URL]")
 WHERE option_value LIKE "%[Old site URL]%";
 
 UPDATE wp_posts 
   SET post_content = REPLACE(post_content, "[Old site URL]", "[New site URL]")
 WHERE post_content LIKE "%[Old site URL]%";
 
  UPDATE wp_posts 
   SET guid = REPLACE(guid, "[Old site URL]", "[New site URL]")
 WHERE guid LIKE "%[Old site URL]%";

   UPDATE wp_postmeta
   SET meta_value = REPLACE(meta_value, "[Old site URL]", "[New site URL]")
 WHERE meta_value LIKE "%[Old site URL]%";

Replace [Old site URL] and [New site URL] appropriately

Use this form to generate the SQL for YOUR database

JavaScript Namespace

Posted on by
1 Reply

I normally put my JavaScript function/classes/other things in namespaces. Namespacing your JavaScript is good, it avoids conflicts between scripts on the page and keeps the global namespace clean. I could go into more detail, but luckily it has been done for me.

Declaring namespaces, and checking they exist before using them is a bit of a pain. You might find yourself doing something like:

if(!window.com) window.com = {};
if(!com.mycompany) com.mycompany = {};
if(!com.mycompany.mypackage) com.mycompany.mypackage = {};

…and then add things to it like:

com.mycompany.mypackage.myfunction = function() { return 138; };

To make things worse, if your webpage includes a different script that uses slightly different namespace, say "com.mycompany.mypackage2" you’ll have to check again that the objects "com" and "com.mycompany" already exist.

The following function allows you to use a namespace, without having to manually go through the throws of checking each "space" exists and creating an empty object for each level.

/**
 * I declare a namespace if it doesn't already exist.
 *
 * @param {String} ns The namespace to create/use
 * @param {Object} parent (Optional) The parent object onto which this namespace will be attached.
 * @return True if the namespace was created successfully.
 * @type Boolean
 */
function namespace(ns, parent) {

	if(!parent) {
		parent = window;
	} else {
		// Parent must be an object
		if(typeof(parent) != 'object') {
			return false;
		}
	}

	var names = ns.split('.');

	if(!names.length) {
		return true;
	}

	var name = names[0];

	if(!parent[name]) {
		parent[name] = {};
	}

	if(names.length > 1) {
		names.shift();
		return namespace(names.join('.'), parent[name]);
	}

	return true;
}

…and is used like so:

namespace('com.mycompany.mypackage');
com.mycompany.mypackage.myfunction = function() { return 138; };