You are browsing the archive for Programming.

960grid versus Blueprint CSS Framework

8:13 AM in 960grid, BlueprintCss, CSS, jQuery by Vic Russell

Recently, I began using the 960grid and Blueprint CSS frameworks.

For fast page prototyping, these css libraries (i.e. grid frameworks) are very useful.  I did notice many issues when attempting to use more complex layouts – there is little room for any deviations, such as adding borders (Blueprint in particular)!

That is when I began adding float-fixes and other css classes to compensate for the issues inherent in these CSS frameworks.

This begged the question - did this truly save me time over a custom css framework based on the specific page layout?

Yes, I do believe it did save time.  The basic page structure can be created super-fast.   I didn’t have to worry about any heavy lifting just to get a container, subcontainers, and ribbon menus aligned and floated properly.  It was just a matter of adding a class definition for the element (<div id=’mydiv’ class=’span-6′>).

NOTE: I trashed the YUI layout grid trial – too much overhead for my taste.  That is not a critique, but I love jQuery and don’t want to integrate another JS lib for a basic grid system.  If I am incorrect in my assumption – and someone can point me in the direction of simplistic get-er-up-and-running-fast documentation (versus Yahoo!’s rather messy but comprehensive docs), I will invest an afternoon.

I will go into more detail as time permits, and I am going to try the YUI layout grid system.  Then I will do a comprehensive analysis of the features and drawbacks of each.

I will also cover how the following jQuery stacks integrate with each framework:

  • jQuery UI
  • jQuery plugins

Thanks,

Vic.

Quick Link To My Development Site

9:40 AM in 960grid, BlueprintCss, CodeIgniter, CSS, jQuery, Programming by Vic Russell

Here is a link to my dev server and the current dev projects I am involved with.

Finally have the CI site up and running on a hosted site:

www.randaweb.com

Here are links to our DEV server:

Page using the 960grid framework – many jQ features – check out each tab.

Page using the blueprint css framework – interesting MAC-like menu (hover over the solar system planets)

Another BP css page – sales page

linux chown example

3:55 PM in Linux, Programming by Vic Russell

chown

chown – change owner of file system resources on Linux/Unix systems

To change the owner of a file name ‘myfilename.jsp’, do the following:

sudo chown jamessmith myfilename.jsp

To change ownership AND group for All directories and files below the current working directory:

sudo chown -R jamessmith:wheel ./ .*

It IS a CAPITAL R ( – Recursive)  and there is a space between the ‘./’ and the ‘.*

NOTE: chown can be a very dangerous command – it cannot be undone.  Exercise caution when changing ownership on files/directories en mass without a more targeted wildcard (e.g. “chown  meuser:mygroup *.jsp” will change ownership of only .jsp files in the present working directory – these are NOT system files and will not result in a system-wide error – though they may mess up your Java App server :( )

PHP CodeIgniter Framework – directory helper and directory_map()

7:25 PM in Programming by Vic Russell

CodeIgniter is my (current) favorite development platform for the PHP language.  It is lightweight, robust, and fairly easy to learn compared to Zend or Symfony.

As with every framework, there are issues with the documentation being too light or too heavy – seldom just right.  CodeIgniter documentation is excellent – once you get past the first couple of days digesting the syntax of the framework.

I was attempting to use the ‘directory’ helper.  This is a helper composed of a method that gets the names of files (and subdirectories) within a path and populates a multi-dimensional array with the results.  Two lines of code rather than around 10 for a pure PHP version that has the same features.

The key to getting this method to work was using the relative path and not an HTTP request.  If you use the base_url(), it will not work.  For my need, it was simply hard coding the path into my code:

$dirPath = "./this/is/the/directory/to/scan/";
$this->load->helper('directory');
$arrDirList = directory_map($dirPath);

Then, I used

foreach ($arrDirList as $key=>$value) { ... }

using the $key as the directory names to build my anchor tags and name the link.

foreach ($themeFiles as $key=>$value)                {

I had originally used a

$dirPath = $base_url() . "path/to/directory/"; // BAD X X X

Thanks, Vic Russell

jQuery 1.4.x and jQuery UI 1.8.x tabs

10:20 AM in Programming by Vic Russell

Tabs are simple to implement in jQuery – once you understand the basic structure of the tab element.

First, be sure to include the appropriate jquery libs – jquery base and the jquery ui.  Also, the jquery ui tabs lib must be included – this is usually done through jquery.ui.base (containing only @import directives [@import url("jquery.ui.tabs.css");]).

When using the jquery ui library for tabs, you must create tabs using an unordered list and list items containing <anchor html elements:

<ul>
    <li>
        <a href='#tabs-1'>This is tab 1</a>
    </li>
    <li>
        <a href='#tabs-2'>This is tab 2</a>
    </li>
</ul>
jQuery UI Tabs thus degrade gracefully to a list of links when Javascript is turned off in a client browser

You must also wrap the tabs in a container that is bound to an object reference and listener that implements the 'hidden' jquery ui tab classes on your custom tab.

Now, wrap the ul in a tab that will not close until the content panes are defined....

<div id='tabs'>
<ul>
    <li>
        <a href='#tabs-1'>This is tab 1</a>
    </li>
    <li>
        <a href='#tabs-2'>This is tab 2</a>
    </li>
</ul>
...
<!-- close the 'tabs' container>
</div>

Now that the <div id='tabs' and the referenced <anchor tabs are properly named, you can define the contents of each tab pane.

<div id='tabs-1'>
    This is the contents of tabs-1
</div>

<div id='tabs-2'>
    This is the contents of tabs-2
</div>

Now, place the contents WITHIN the < div id='tabs' > container...

<div id='tabs'>
<ul>
    <li>
        <a href='#tabs-1'>This is tab 1</a>
    </li>
    <li>
        <a href='#tabs-2'>This is tab 2</a>
    </li>
</ul>
<div id='tabs-1'>
    This is the contents of tabs-1
</div>

<div id='tabs-2'>
    This is the contents of tabs-2
</div>

</div>

Now, we need to associate the above construct with a jQuery initializer - linking the <tabs> with the jQuery UI code containing the binding code:

<script type='text/javascript'>
// listener for profileDemogForm
$(document).ready( function() {
$(function() {
    $("#profileTabMenu_id").tabs({
        collapsible: true
    });
});
</script>

For your test page, use the default jQ UI library (after you have downloaded or linked to it via Google ...)


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<link type='text/css' href="js/jquery_ui/jquery-ui-1.8.2/themes/base/jquery.ui.all.css" rel='stylesheet' />
<link type='text/css' href="js/jquery_ui/jquery-ui-1.8.2/themes/base/jquery.ui.core.css" rel='stylesheet' />
<link type='text/css' href="js/jquery_ui/jquery-ui-1.8.2/themes/base/jquery.ui.theme.css" rel='stylesheet' />
<link type='text/css' href="js/jquery_ui/jquery-ui-1.8.2/themes/base/jquery.ui.base.css" rel='stylesheet' /><<<

Some tips:

You can name a jquery tabs container anything - you just have to use that for the content pane tabs.

<div id='myTabs'>

Each bookmark reference would then follow the following semantic:

<a href="#myTabs-1">  and <a href="myTabs-2">

The -1 and -2 (dash 1 and dash 2) are very significant and must be followed for the jQ UI to pain these anchors as tabs.

content pane (aka: contentpane) the wrapper (named anything - I like contentpane or tabs_contentpane) that contains the container divs that further contain the html to display when the tab is clicked (in focus).

This content can be

  • inline html
  • an included page  using jQuery .load("url")
  • a pre-fetched server-side include (<%@ include file='tabcontent2.jsp %> or <? include("filename.php") ?>

Agile Development

7:33 AM in management, Programming by Vic Russell

I just finished a short run using the scrum method of Agile project management:  stories, retros, sprints and all.   It was a very educational experience since I had never been a part of a project that used ‘formal’ Agile development.

- First, Agile sounds cool. There is an inherent power and affinity to like the word ‘agile’, to say ‘I am agile’, ‘we have an agile development team’, ‘our business model is agile’.  The power in a word cannot be understated – business wants to be agile; developers like to be seen as agile.

A few operational definitions. Agile software development is short term goal oriented – component directed. The idea is to get a bunch of software developers working on a project by picking components (‘stories‘) from a master list of ‘backlog’ items and completing those individual components within a short period of time – called a ‘sprint‘. The typical goal of the sprint is a complete sub-component, one that can be demonstrated during the ‘retrospective‘ as a stand-alone element.  Some shops even demand that these components are ‘go-live’ ready.

The first deficit with Agile project management appears when there are components that are comprised of multiple smaller sub-components that are not separated into different stories. For example, a form page.  A form page is composed of the following: the HTML wrapper, CSS formatting, the form proper, business rules for managing the form input/processing/output, form content validation and security, other user interface components, data definition/acquisition layers (db abstraction/ORM), and presentation components. There may be Ajax components to the form, as well as validation, and visual/auditory Fx via JavaScript.

The failings of Agile comes to light where ‘expectations’ are concerned. Business expects a completed components at the end of a sprint. Anyone who has designed and developed a full blown web application (as opposed to a ‘site’, ‘page’, or ‘component/widget’) understands the iterative nature of such a ‘process’. The final result is most often a group of components that can be reused to simplify program maintenance and improve program performance through re-factoring to optimize the total application developed over the duration of the project.

I think the best way to compare Waterfall with Agile is that Agile is concerned with ‘events‘ and waterfall is concerned with the flow of app development that results in a completed product – the  ’outcome‘. Conceptually, both are correct – an app is a bunch of ‘events’ that interact to produce some result, and, an app is a business process that must be satisfied through a series of components that elicit a specific outcome, or ‘result’.

Sprints are like a course that is made up of a bunch of quizzes with no final exam.  It is the accumulation of grades over the course.  A waterfall project is a course with NO quizzes - only a final exam, and, maybe a mid-term.

Waterfall methodology emphasizes pre-defining all components so, in theory, the development portion is very short lived.  More time is invested in defining the components and laying out the look and feel of a site than is actually set aside to code them.  Planning is everything.

What often time occurs using the waterfall method is, in Agile parlance, a bunch of backlogged items become evident very near the end of the project.  For developers, it becomes a ‘marathon’ to complete the project on time – often times with few, if any, functional components to demo for stakeholders (ie business owners).

Other deficits in the waterfall methodology are scope creep and the effects of incorrect estimation of build time (coding & system administration).  Since the planning portion is so long, items are often added that should extend the duration of coding, but seldom do.  Most projects have a go-live date that is seldom altered, even though the scope of the project increases.  As a component is added or altered, reality would dictate altering the estimated due date – but that seldom happens.

<psych aside>Human nature, for many people, dictates that we want to satisfy the needs of others – particularly superiors or people who can advance our careers.  The waterfall method plays on that human tendency to the advantage of the stakeholder at the expense of the development team.  It is difficult for many of us to say an unequivocal ‘NO’ to the VP of marketing or sales when they have a ‘really good idea’ for a feature that will add a developer-month to the project.  The problem arises when the project is past due, and that feature that the VP loved so much three months earlier in the planning stage is all but forgotten – it no longer carries the same emotional power it did earlier.  All that matters now is that the developers are late delivering the project.</psych aside>

Pure scrum can be effective when modules are very compartmentalized – there is little co-dependence on other modules.   It becomes nonsensical to use Agile when the overall system has many dependencies UNLESS there is an agreement that modules will be enhanced and integrated at a later date when the ancillary modules that, say, perform form validation, are complete.

When you get right down to it, Agile is a good way to reduce the upfront cost of a project and put most of the design and planning on the developers – which is, in my opinion, a good thing.  A less is more approach that can be effective for the largest project, so long as the stories reflect reality.

vr

Linux history – add time and date stamp to output

9:50 PM in Programming, System Administration by Vic Russell

The Linux ‘history‘ command is very beneficial when trying to debug a system, remember a previously executed command, or keep track of recent steps taken in a multi-command process.  One omission to the default setup is the time and date the command was run.

There is a file in the home directory of all users called the .bashrc file (the period is not a typo – it is a hidden file).  Add the following line to get the ‘history’ output with a time and date stamp:

export HISTTIMEFORMAT="%F %T "

You can enter this at the command line and then run the ‘history’ command to view the new output.
Read the rest of this entry →

When NOT to do a complete upgrade of a site…

7:38 AM in management, Programming by Vic Russell

To everything there is a season, and a time to every purpose under Heaven.

There is a time to sow, and a time to reap…

This Biblical verse is true in agriculture, personal life, as well as merchandising and marketing.  You can have the best new ‘feature’ to your web site, but the timing of the release should be carefully considered.  If your feature is of minimal impact to the navigation and overall familiarity (look and feel) of the site, then there is little risk in implementation.  If, however, you are planning a complete redesign of the presentation and business logic layers, you may consider the time of year for the release.

Why: One retail chain that I had worked for decided that their website needed an upgrade.  That was an understatement - the existing site was very dated in both style and functionality.  Many features that the underlying web framework offered were inaccessible due to a prior rushed upgrade that ‘broke’ what is a very robust J2EE-based framework.  Business and IT knew that a complete rewrite was the only way to efficiently keep the site extensible, maintainable, and scalable.  The initial launch date was early September, with a fudge factor of a couple of weeks.

As the months of planning a preparation, design, coding, and testing went by, it was clear that the target date would be missed – by about 2 months!  That brought the time of the upgrade to the apex of annual holiday sales season.  While this may initially sound like the perfect time to release the site to the customer base, a little more thought might suggest that the opposite is true – it may be the exact wrong time.

Read the rest of this entry →

Web Design and Development Links

2:18 PM in Programming by vrussell

Links to very interesting and useful sites that will help inspire, teach, and inform.

Design:

Smashing Magazine – User Interface concepts:  http://www.smashingmagazine.com/

Zen Garden – examples of how CSS can be beautiful:  http://www.csszengarden.com/

Design and Development:

SitePoint - amazing JavaScript and CSS references : http://www.sitepoint.com/

Read the rest of this entry →

PHP verus Java J2EE – with some Python Accolades

8:23 AM in Frameworks, Java J2EE, Linux, PHP, Programming, System Administration by Vic Russell

The ongoing debate by advocates in both camps is legion.  There are proponents of the scripting (PHP) model that argue time-to-go-live is much faster using php than java.  The Java camp argues that such a statement only makes manifest the PHP advocates ignorance of the Java web framework.

Having developed using both languages, I must say that while both are powerful, Java is hands down more powerful.  There is little you cannot do using the vast array of available libraries to perform the most complex task relatively easily.  And, there are plenty of Java developers in the world to man your project.

Having said that, Java development comes with a very high price.  Most Java-based web frameworks require a tremendous investment in initial training to learn how to use it efficiently – the available beans, servlets, and tag libraries, along with the methods and properties in each class, can be daunting.  The benefit comes once the framework is internalized by the developers – then productivity can be impressive.

PHP is a low upfront cost platform.  The language is intuitive, comprehensive, and interpreted.  Much of the overhead of Java is simply non-existent using a scripting language.

Request/Response – The nature of the web dictates that permanent connections are not established between site visitors and the server.  The stateless protocol that is HTML dictates this structural tenet.   A request is made by a client, the response is processed and delivered by the server(s).  The next request is processed, with the appropriate response, ad infinitum.  Any state fullness is handled by custom constructs – sessions or cookies are the most prevalent in use today.  Any process that can handle the request can deliver the response – the underlying program at the server does not matter to the requester, so long as the response is both valid and timely (<3 sec).

Creativity:  Java, in my opinion, takes away that freedom to quickly deploy a creative solution to a particular development challenge.  Instead of thinking outside the box, Java forces you to remain constrained within the rigorous rules of the particular framework. Since the Java app is running on the server at all times, awaiting a request to deliver a response, there is a great deal of ancillary work to do to add a single class or property.

Deployment:  In certain Java environments, you must compile the complete application, package it in a WAR file,  then move it into the application server ‘servers’ directory.  This can take many minutes given the complexity of the app and the power of the hardware and speed of the comm link.  A few simple changes can result in hours of debugging and testing.

Caching:  I would say that the biggest advantage in using Java is the caching mechanisms that are part of the web framework.  It is amazing how granular caching can be controlled.  There is an obvious performance benefit to this feature when running a very active site.

Testing:  When using an IDE like Eclipse, along with the appropriate plug-ins, one can be very efficient testing and debugging Java code.

Break-Fix: If there is one aspect of Java that really grates me it is the traceback output generated by errors.  Most of the info you get is useless; finding the key output is the challenge.  Once you get the hang of it, you learn to ignore 90% of the output.

Database Access:  Java’s JDBC interface and use of connection pools is time tested and reliable.  The connection open when the application starts, and are available immediately.  There are standard API’s for all major database platforms ready to be downloaded and configured.

Maintainability:  Maintaining an app is where most of the time will be spent on a live site.  If the application is difficult to code, it will be more difficult to de-code/debug.  Again, Java is a bit demanding when something goes awry.  To offset this challenge, very effective log4j logging should be used.

Infrastructure:  This is where the rubber meets the road – how long does it take to set up and configure a new server that can run production code and serve your customers?  Java is a real headache in this regard.  The amount of configuration files you have to update to meet the needs of your environment can take many hours to many days.  There are so many options that it becomes almost impossible to do so on the first try without the help of an experienced Java infrastructure guru.

PHP

PHP is a very comprehensive language.  There are many third party libraries that one can employ to perform the task that you need, that is, unless the build-in functions are sufficient.  I would argue that you can code 95% of a site using the built-in functions that PHP offers.  I do use the PEAR library, which is extremely useful as a DB API.

Testing is typically fast and efficient – particularly when you use Eclipse with PHP extensions or PHP Designer 7 as an IDE.   In PHP Designer 7, you can test multiple browsers without leaving the IDE.  It is a great product that is light-weight, offers Python, JavaScript, HTML, and support for may other languages.

Deployment: You copy your code to the server(s) and it is ready to be run.  That can be a single file or a directory.  There is no up-front compilation to worry about – just test the code and run.

When to use which language?

What skills do your developers have?  If they are Java guru’s, then a j2ee platform would probably be the way to go.  Those skilled in a ‘real’ programming language do not fare well when switching to a scripting language.  The complexity they are so used to is lost.

Also, a very high availability, high hit rate e-commerce web site can benefit from the J2EE framework.  The caching, db throughput, and stability of a java app (once you get it running) is impressive.

Other than the above, PHP has the advantages.  There is little argument against simplicity coupled with power.  Adding an additional os/web server VM to a (non-Windows) server farm is very inexpensive.  The added power and the redundancy of a new server is quite beneficial to any site that has a variable hit rate based on, say, time of year or time of day.

I have installed PHP on Windows and Linux systems very quickly.  That includes Apache 2 and MySQL servers that are required for a fully functional web site.  The WAMP server download (Windows, Apache, MySQL, PHP) takes about 10 minutes to download and install over a fast cable/dsl connection.

Another benefit is Microsofts support of PHP (and Python, another very robust scripting language for the web).  The CLR supports Iron PHP and Iron Python.  Your cost for adding a server will increase (MS Server License), but, if your team is .Net centric with a few PHP apps to support, this might be the way to go.

PHP is easy to learn.  With a decent mentor, a team can get up to speed in about a week.  Java can take a month to get to the same proficiency.  Now these are non-scientific estimates, so don’t flame this author for such an estimate.

Python is another language I have used.  As languages go, Python is beautiful.  By abandoning brackets and using spaces to format the various code blocks, the developer is forced into using good indentation, which results in very readable code.  Python is probably the best language for systems administration – think shell scripting on steroids.  It is blazing fast, robust, and has the advantage of many libraries to extend the base language – many coded in C/C++.  All in all, Python is the most enjoyable language I have yet to use, if that can be said about a programming language.  And, using IronPython and Microsofts CLR, you can use familiar IDE tools to develop.

If you want to get starting using Python, download the iPython application.  It is a command line environment that allows you to test simple to moderately complex code on demand.  A very effective learning tool and sys admin platform.