Expressing IT

With my limited skill-set with tools like Photoshop and Illustrator, I can honestly confess that I’m a better developer than I am a designer. But my background with core (server side) development with Java/PHP/COBOL , has been a very positive influence on my UI development skills. What I mean is, while creating my designs,i.e. whenever I do design, I think about how the design can be best converted into HTML-CSS and while doing the HTML-CSS, I give a thought about the backend technology and make reasonably sure that the HTML can be easily implemented into XSL loops or PHP snippets etc.

Over years, I have been thrown head on to designs by UI designers who probably donot have a clue what HTML or CSS is. All these years I have been thinking that I would asking for too much, If I just expect the designer, who is trying to shov his “impossible to code” design down my throat, to understand just a little bit what his design would be converted into. THAT would help right?

Then, I came across this post today … Web designers who can’t code …Thanks Lord! I’m just one of many who feel the same … The above artitle is a bit a long winded .. but worth the read, every word of it.

Thanks Elliot Jay Stocks … I feel relieved!

Here is some excerpts from Elliots article.

Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. It appears there are some very strong opinions held on the subject of whether web designers should be able to code.
…
So, before we get into this, allow me to quickly recap what I said on this morning on Twitter:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

… I should’ve been a little more specific in my tweet. I was talking about designers who don’t have even the most basic HTML and CSS skills to turn a flat design into an actual site. Not people who intentionally choose not to code; those who can’t. And I’m also referring only to front-end code here; of course it’s ridiculous to think that designers should also be amazing back-end programmers …

We get ‘web’ designs sent in Illustrator, 300dpi, impossible to code, no consistency / usability.
~ Amy Mahon

It’s getting late, and I’ve got to wrap this up somehow. I know there will be many who disagree with me, and my intention is not to offend or upset anyone who can’t code, but I hope that some of what I’ve said reflects some of the points that always come up when delving into this debate.

At the end of the day, I don’t lose any sleep over who can code and who can’t. I’m just genuinely surprised to find so many designers that lack front-end skills, as I thought this was a thing of the past.

Also read the comments , there were around 320 comments, as i write … they are worth a read.
Please read Elliots full post here .. Web designers who can’t code

• The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode.

• In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.

BENEFITS OF USING HTML

• Backwards compatible with existing browsers
• Authors are already familiar with the syntax
• The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
• Convenient shorthand syntax, e.g. authors can omit some tags and attribute values

BENEFITS OF USING XHTML

• Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
• Integrates directly with other XML vocabularies, such as SVG and MathML
• Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes

Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome… I thought of digging a bit deeper into the area of  User Agent Style Sheets …
Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

For a full list of CSS 2.1 User Agent Style Sheets defaults click here

Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link to read more on User Agent Style Sheets

CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

Another old school memory supplemental…

Why do we to enable windos.status?
Javascripts could to be a nightmare when you have something to debug .  Firefox does have a few handy addons, like Firebug thats makes our lives easy  and   Also , the vote for the  most popular debug  technique in Javascript must go to “ALERT()” .  Anywaz! There are few instances when adding ALERT do debug your mis-behaving Javascript  is just isn’t a good idea. For example! you have dragble item whose position  needs to be alerted …. NO NO! Dont do it! … you will  just get  infinite alerts  or you wont be able actually drap your dragable. Well! There are more good situations, where you might writing out debug texts to the status bar, much more usful… Believe me! Its Experience!

IE by default left you write to the browser STATUS Bar  using the syntax “window.status = ‘ something to debug’ “, but FireFox doesn’t  . So to enable windows status change , you can do either of the following.

Open about:config in browser ( type “about:config“ this into the address bar )  and search for
dom.disable_window_status_change.  Change it to false… just click on the entry to toggle its state.

OR Alternatively

“Tools → Options → Content → Enable JavaScript / Advanced → Change status bar text“

And also note that … to write to the status bar in your Javascript, IE is just ok if you use a short syntax i.e. status =’ some debug text’ but in FireFox, you have to use in full syntax i.e.  window.status = ‘ something to debug’

Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

SO … Help rid the world of IE6 with one line of javascript!

http://code.google.com/p/sevenup/

I’m so excited about the increasing number of page views on my blog, that I check my Google Analytics almost everyday. I noticed that my blog is being referred to by sites in many other languages and by people around the world. SO Nice !!!!
To make life a bit easier for my NON-ENGLISH viewer ship, I have added a Google Widget/Plugin called “Global Translator”.

The Global Translator says that it “Automatically translates a blog in 41 different languages by wrapping four different online translation engines (Google Translation Engine, Babelfish Translation Engine, FreeTranslations.com, Promt)” … If you want to add it to your own wordpress installation … check it out here http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Not sure, how good the translation is but I sincerely hope that it helps a few fellow developers out there, who end up reaching my blog, only to be disappointed , that it is in English ….

The translator links are at the Bottom of Side Bar ….

Heres another little peice of Javascript trickery that I had to dig around because the situation commaned it. In one of my web sites, I had this situation where I had to implement “windows.onload” twice. The first thing that would came to an inexperienced mind like mine ( I have to honestly say that, since I have been using javascript Frameworks and libraries, I have forgotton to do simple things on my own… sad but true), is the following method…

window.onload=onloadfn1;
window.onload=onloadfn2;
window.onload=onloadfn3;
etc...

Sorry to say but, this wont work… dont want to discuss the execution science of Javascript much … but according to my recent experience, only the last function (onloadfn3) will ill actually get executed.

In normal situations, unlike mine (which I’ll talk about a little later)… you could do one of the following to execute mutliple onload functions ….

OR something like this

function doOnLoad() {
        onloadfn1();
        onloadfn2();
        onloadfn3();
}
window.onload = doOnLoad;

For my current situation , I cannot use either of the above…
Why did I need to call windows.onload twice, rather that calling two functions within a single onload function? Here is quick look at my problem statement…

“My Site pages are structured like the WORDPRESS theme…. i.e. there is a common Header.php and Footer.php that gets included into all the site pages. There is an onload function implementaion in the Footer.php to do some common onload functions. AND there are few pages that need to something of their own ONLOAD , apart from those done by the common onload function. If I assign callback function directly to the window.onload handler, it will over-ride previously assigned callbacks in the Footer.php”

…. Is my problem understood ?

Well! there are few solutions that I did find. They all are very similar and mainly implementions of a solution given by Simon Willison (http://simonwillison.net/2004/May/26/addLoadEvent/)…

Solution :

Simply add this javascript code to site …

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
       window.onload = func;
    } else {
       window.onload = function() {
           if (oldonload) {
                  oldonload();
          }
          func();
       }
   }
}

And call it instead of the usual “windows.onload”

addLoadEvent(FunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
}); 

Advantages of this code snippet …
1. Primarily, It lets you have multiple windows.onload events, called from seperate parts of your code, without overridding the previous definition
2. It is really unobtrusive. It can be placed in a file with your other scripts or in a separate file.
3. It works even if window.onload has already been set.

I thought this one will be a doodle to find in google, as many you us UI and script writers would need to do this on a day to day basis, that is include a bit of peice of PHP code snippet(.php) into a Smarty Template (.tpl).  I realized that easier/popular  your query, even more difficult to find the exact answer…   a million search results but most of them reffered to “file” includes in Smarty … which has the following syntax

    {include file=”include/header.php”}

This actually inlcuded the file fine but as text , What I wanted was the result of  included file .(Note the above is used include template inside a template file). Finally with a bit persiverance …. I stumbled across a slighty modified syntax, which was the answer to my requirement … so here it is… if you havn’t found  one already

{include_php file=”include/header.php” }

This question crossed my mind a few times before, when I was working on sites earlier too, which used WordPress to show blogs or new kind of content in some part of the site/portal.Being a novice in PHP and around WordPress, I kept procastinating it, thinking ” this isnt my peice of cake”. Finally! this requirement came upto my nose, when started diggin around a bit for solution.
I was surprised to find that it really was easier than I actually thought it was, to display a list of headlines or the latest post on any other page outside of the Wordpress-powered section, just using a little bit of PHP and the Wordpress API.

Here is what to do :-
For reasons of explanation, assume that your site is http://www.inchembur.com/ and you have the news section for this site on http://news.inchembur.com/ ( which is running WordPress). Now the requirement is to show the latest post from http://news.inchembur.com/ on the home page of the main site ,i.e. http://www.inchembur.com/index.php

Step1: In your index.php add the following peice of code , Include the Wordpress API file. You can add this to the top of the page you want your post to appear on.

<?php
define(‘WP_USE_THEMES’, false); // Disbable use of Wordpress Theme
require (‘/var/news.inchembur.com/wp-blog-header.php’); // Include Wordpress API
query_posts(’showposts=1′); // Get Latest Post
?>

In the above peice of include , we are getting only the single most recent post. if you want to try more variations feel free to dig into, query_posts() documentation .

Step 2: Now, In the part of the Index/Home page where you want to show the latest Wordpress post from http://news.inchembur.com , use the following code. Needless to say, feel free to ad your styling divisions, spans and classes as per your design needs.

Step3 : There is no Step 3 … Thats it … you are done!

How show a specific post/page as opposed to the latest post:-
This can easily achived by altering the arguments to query_posts() to include the page ID or page slug

query_posts(‘page_id=7′);
query_posts(‘pagename=about’);

or You can control the number of posts:
query_posts(showposts=3);