LAB.js - a nifty little javascript loader

LAB.js (Loading And Blocking JavaScript) allows you load in parallel your js scripts , speeding up the process ( sometimes a lot). But also it can force that scripts are loaded in a certain order, so this way no dependencies are broken.

The developer declares a 2x speed improvement on his site.

On an ondevelopment project , with 9 js scripts and 282k without labjs the page loaded in 8 seconds and with labjs in 2.5. So we have a >3x improvement.

Common sense accessibility 2.0

When it comes to accessibility, every coder is a small guru. On the websites where I bid for projects everybody is an accessibility and usability expert (including myself, I admit).

Altough these rules exist for quite a while there are coders who find it difficult to implement them - so I am trying to find here what are the tricks that you use in writing your code to make it accessible.  For example, altough writing semantic code helps (a lot !) it is not always enough.  Some try to view their pages with CSS and images disabled, some don’t.  Some of us have tricks that we do not want to share to other coders.  Some of us share. We’re not all gurus, right? Someone has to start from somewhere.

So if you have something interesting to say, add your own rules here.

Let’s start with basic common sense:

1. write semantic and valid code - use correct tags while trying to satisfy Google’s needs - adapt the tags to the context
2. use lists for navigation and for consecutive link blocks
3. write accessible forms : use labels, server-side validation, even fieldset where necessary. Should I use type=”image” with alt text instead of submit? I don’t know….I like submit. Camino does not :((
4. use the skip to content or skip navigation links. Everybody say you should….
5. using a .wai class to hide text that might help screen readers - some people use display:none (not so good), some use negative indent.
6. provide transcriptions for video files (does Google do that for YouTube?), alt tags, longdesc tags, explanation for graphics (the coders who built Forex sites did that?), audio CAPCHA (do you do that???)
7. other common-sense ideas - use em or percent instead of px (altough Mozilla is a very good fellow and knows how to increase em, px, % and also images), use big text on buttons, appropriate contrast colours,  no animated gifs/blinking/flickering elements, align text on the left side,  don’t use “click here” links cause they ALL are click here…
8. write accessible tables : use th scope=”row” and “column”, id and header atributes to associate data cells with header cells,  use summary and caption to give extra clues about the content of the table (altough usually tables are preceded by headings and short paragraphs of text). Use tables to display data only.
9. provide a search function  - altough I build small brochure sites and I don’t embed search in them.  Do you? For small sites?
10. provide buttons to increase font size.  Sometimes  I do, sometimes I don’t, depending on what clients ask. I believe that people who have special needs know the CTRL + combination and use it, the A-, A+ buttons seem to me like a bit redundant.  Maybe I’m wrong… Also I do not provide a button to increase the line-height and other white spaces, I set the line-height in CSS to be bigger that the default. Is it good, is it bad? You tell me, I’m keen to know.

Beside these rules there are lots more, some that make sense and are used, some that I don’t remember here. I’m having a short list of elements that I don’t use mainly because I do not have contact with them and I forget (or want to forget that)  they exist.  I’m still learning about more sensible elements for the  people in need so maybe I’m ignoring some details.

So, the next rules are not my favourites:

1. use altkeys for navigation - a lot of people still argue about it, I’m waiting to see who wins
2. use title for frames - it shoud say “avoid frames”, but for who’s using them….use titles
3. target=”_blank” issue - there is still a lot of arguing about forcing the user to an action that he/she does not want. It’s common-sense too, but for the coders not respecting the above rules this is too …. in-depth. For me, it’s like somebody adding sugar in my coffee when I mentioned that I like it black. What if I have diabetes?
4. use the focus indicator - I recognize I don’t bother too much to style it, altough I do tab sometimes through navigation links or form elements.

That’s it for now, these are some basic rules I have in mind when I code.  I do try to visualize the site with the CSS/images disabled but I am aware that this is not enough. The simple fact that I’m trying to improve my knowledge is my excuse. But I know it’s not enough and if you have similar sets of rules that guide you please share them here - to guide everyone who is trying to learn something useful.

Ohhh, I forgot: use image replacement techniques, it’s a great invention

Mootools with touch events

I am so used with MooTools as I started to forgot the basic javascript, and more, I started to dislike a lot to write code in pure js. But MooTools lacks the touch events ipod and iphone has. So I wrote a small code that adds the touchevents -  well, touch, gesture, animation and transform -  to the Element class.

This will only  help you to add and remove the touch events the MooTools way, you still need to use e.preventDefault() as e.stop() is not working, and to detect touches by yourself. But at least you can use addEvent and removeEvent.

I am sure it can be improved, so If you have any ideas, just let me know.

Oh, yes, the code is here: mootouch.js

Change Phonegap project to reflect your app name

Phonegap is a nice framework for webdevelopers. It helps to build a native iPhone( and other devices) app using what you already know.

But the submission to Appstore  can be a pain due to some app reviewers that consider PhoneGap as “private api”.

The single way to avoid this is to change any reference to PhoneGap inside the code. Is not simple but can save you few weeks of waiting.

Steps: ( considering our app named “Myapp“)

1. copy the phonegap project to another folder - Myapp.

2. change PhoneGap_Prefix.pch file name to Myapp_Prefix.pch

3. Change PhoneGap.xcodeproj file name to Myapp.xcodeproj

4. Delete the build folder

5. Rightclick on Myapp.xcodeproj ->Show Package Contents

6. Open your_user.pbxuser with a texteditor(textmate ?) and do a search replace for all  PhoneGap to Myapp ( no matter if is alone or inside a string).

7. Open project.pbxproj with a texteditor and do a search replace for all PhoneGap to Myapp ( no matter if is alone or inside a string).

8. Open MainWindow.xib with a texteditor and do a search replace for all PhoneGap to Myapp ( no matter if is alone or inside a string).

9. Open Myapp.xcodeproj in Xcode.

10. Rename here, in Xcode using rightclick-> rename all the files in Classes folder that contains PhoneGap in name with Myapp ( for example PhoneGapDelegate.h to MyappDelegate.h )

11. File by file, in folder Classes, replace inside any PhoneGap string with Myapp

12. Do a Clean all.

13. Do a Build and Go ( and pray )

This should be all.

iPhone for the rest of us

iPhone is a nice platform to develop for. The appstore made possible to transform a hobby or a simple idea into a good income source, due to the popularity of iPhone and the low prices of the apps found here .
Bu what about the rest of coders that come from the pure web side of the programming ( like me ) - php, javascript, ror, etc ?
Below I’ll try to make a list with components you can use to develop for iPhone using only what you know, or learn only few things more.
Apps for iPhone are separated into 2 groups - native apps and webapps.

Native apps use their SDK and runs native on and from the phone, while webapps run inside safari, and are fetched from an external sever.

Frameworks

Here comes one type of projects , that managed to make a bridge between the 2 types of applications, using a native instance of webkit to render and use html/css/js files - from local space of the device and/or a remote server.

Usually the frameworks expose some native device functions -  camera, accelerometer, contacts,geolocation to javascript methods, so you can use it on your apps.

Big5apps -  it lets you access some features of the device using javascript -  like image, camera,sound,geolocation

Phonegap - is intended to be a cross-device platform, covering iphone,blackberry,android.

Liquidgear - seems to be a fork of phonegap, but oriented on the iphone only, so the development of this framework get another course, more specific for the iPhone device.

Quickconnect - allows you to use a template for dashcode or for xcode to develop for iphone using web technologies.

The above frameworks needs only the effort to learn a little of xcode usage.

JavaScript/CSS/HTML  Llibraries

WebKit for iPhone or other mobile devices is a little different -  for example touch events, or hardware accelerated css transforms. For this you need to develop your own functions/methods, or to adapt other scripts to to use this.

Or, you can use one of the below js scripts/frameworks.

XUI

A simple javascript framework for building mobile web applications.XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

MagicFramework

Magic Framework is a native iPhone UI imitator and HTML5 db interface built in html/css/javascript. It’s useful for online websites or on-device Webkit-based applications looking to imitate the native iPhone UI and/or use native storage without having to write native code.

Dashcode

 Apple’s web toolkit

jQTouch

A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.

CiUI

CNET iPhone UI

Safire

Safire is an open source framework written in HTML/CSS/JS

It make’s building/porting applications to the iPhone ridiculously easy.

iWebKit

iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and profes

iphone-universal

The framework is based on 1 stylesheet and several HTML examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects.

iUi 

Based on Joe Hewitt’s iPhone navigation work, iUI has the following features:

• Create Navigational Menus and iPhone interfaces from standard HTML
• Use or knowledge of JavaScript is not required to create basic iPhone pages
• Ability to handle phone orientation changes
• Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)

Tools

Iphone Simulator

It comes with Apple’s SDK

Phonegap iphone emulator

To test apps built with phonegap

iPhoney 

iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development.

TestiPhone.com

This is a web browser based simulator for quickly testing your iPhone Applications. This tool has been so far tested and working using Internet Explorer 7, FireFox 2 and Safari 3 in Windows, but you ned Safari to get the real experience.

Safari 4

Well…no comment here

Ok, almost all the above tools needs a mac to be able to use. But  to develop for iPhone, you will need a mac anyway.

Have I missed something ? Let me know.

PhoneGap iphone emulator

I  just want to signal a great developing tool, from Nitobi, the guys that created Phonegap.

Is an mobile phone simulator ( emulator ) build in AdobeAir, that alows you to test and debug your apps developed for iphone,android,palm pre or blackberry using the Phonegap framework.

Is jut a beta version but offers a preview of the final tool that for sure will represent a great developing tool for this framework.

Right now it allows you to test the accelerator response of the device  -  a thing not possible on iPhone Simulator form Apple, and also respond to some events -  like sound or vibrate.

Wallpapers contest :)

Nicewallpapers.info is organizing a wallpaper contest with the easter subject.

All you have to do is to upload as many   wallpapers as you have ( please don’t steal other people work ), and win 100$.

nicewallpapers.info

Mootools - browser sniffing

I know, I know, browser sniffing is a bad habit and it should not be used, but still, there are cases when you will want to display a message to the user (ordinary users, that don’t hack their’s browser navigator.userAgent), or you really need to know what browser is.

For example Chrome. Is ok, is webkit, but is not webkit… transparent png, with opacity set lower then 1 will look just awful in  Chrome.

So I wrote a simple function, “stealing” some code from PPK.

Include the script in your pages, and it will give you 2 more variables in Browser.Engine:

Browser.Engine.browserName

Browser.Engine.browserVersion

Two web icons sets from semlabs

SemLabs just released two free iconsets:

The Free Web Design Icon Set is a collection of 310 icons in PNG format.
They are 16×16 pixels in diameter. The set is designed to be used on web projects, but may also be useful for systems icons and for print. This icon pack is free to use in commercial and non-commercial projects,modify and distribute.

and

SEM Labs Web Blog Icon Pack

The SEM Labs Icon Set is a pack of 52 icons in PNG format.

They are 48×48 pixels in diameter. The set is specifically designed for blogs and have an SEO theme. However over the coming months more icons will be
added to it to give them a broader scope.

They are released under the Creative Commons (by) Licence.

Unobtrusive PHP ?

Strange? 

What do you say, if we use this term for a form validation, server side? I say “Unobrusive PHP” because is what I know, but it can be any other language.

Let me explain:

We already do this in javascript. We attach a class to a field we want to validate, then, when the user try to submit, we try to validate the input by a rule associated to the class. All is fine, only that we need to make this server-side too, we cannot trust the users, don’t we.

So what if to the input name, we attach a specific segment, that will be validated once it reach the server, removes the attachment, and pass further the data like never happened?

something like:

<input type=”text” name=”email” />

for js validation would be 

<input type=”text” name=”email” class=”email”/>

for php would be

<input type=”text” name=”email___email” />

and the validation class would take the $_POST array, search for a value  that contains ___email, validates it, then simple remove the segment for further processing.

$_POST["emai"] = $_POST["email___email"];

This idea is the preamble of a next post regarding a more  universal validator for forms.
Is only a concept. Let me now your thoughts.