Archive for March, 2010

I don’t need no sticking tests!

March 29, 2010

This is a very good question:

Chocolate Covered Unit-Tests

Advertisements

RU A Developer Using Firefox?

March 27, 2010

XRefresh

This program is for you!

I want you image

It does an automatic refresh of the pages that are being served by your development work. Whenever you save it will automatically do a refresh on the the web page.

How it works, is it has two programs. One is an add-on to Firefox. The other is an application you run from your desktop.

The application on the desktop monitors your development work directories. If any saves are done on the files in those directories, it will let the add-on for Firefox know to do a refresh on any pages for those directories.

Scenario:

Joe Sofwarer TDDs his code using qunit.

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. Goes to Firefox.
  8. Refresh button pressed.
  9. Reruns unit-test page.
  10. All is (GREEN).

Ten steps required for development.

Add XRefresh

  1. So he writes a test (RED).
  2. Ctl-s.
  3. Loads up the unit-test page in Firefox.
  4. Gets his results.
  5. Writes code to make his (RED) test a (GREEN) test.
  6. Ctl-s.
  7. All is (GREEN).

Seven steps required for development.

Faster feedback. Now there is more time to design and write code.

Or even blog about saving some time.

Recommend you check out there page, XRefresh.

Ugly Developing!

quicBlog Placeholder Functional Specification

March 25, 2010

Reason:

Need to be able to have placeholders introduced into output stream to automatically add empty-links.


Source:

quicBlog


Overview

At present when using showdown you specify a link by putting the text you want to be a link into brackets: [].

Now when you do this all the text is still surrounded by the brackets. You then have to go the bottom of your text page and add the actual link information (meta-link information). Here is an example:

link–> [showdown]

paragraph–> some text below the brackets placeholder

meta-link info–>[showdown]: #

See this is what I’m talking about; circularity at its worst while trying to put this post together I’m using showdown, but I have to go to the bottom of the page to put the meta-link information. Something like a chicken-egg problem. At least I’m dog-fooding code that I’m using in this web app

Note: The showdown tokens for placeholders

link = [link-text]

image = [image-holder][alt-text]

#


This spec is not complete!


Objects

placeHolder

There are five objects. The main architecture will use Atomic Object‘s Presenter First Pattern.

User Input

User will enter a character at a time which will get sent to the text model

Text Controller

Just forwards the character to the text model

Text Model

The text model will pass character to placeholder recognizer. If a place holder it will the generate the meta-link information for the placeholder and store it in the text. The revised text is then sent to showdown. the showdown information is then sent to the HTML presenter

HTML Presenter

Forwards data to the output.

HTML Output

Displays HTML.


Source:

quicBlog

quicBlog Functional Specification

March 25, 2010

Reason:

To learn to TDD a web application using jQuery/qunit and markdown language while using qithub to manage project


Source:

quicBlog


Overview

quickBlog is a text editor that uses a variant of markdown; showdown, to quickly enter hyperlinks and images. hyperlinks and images can be added after typing. The links will use the Google search function to find link looking for. What this will allow is to create a blog entry with out breaking concentration to find links or add images.


This spec is not complete!


Scenario 1: Joe opens up editor and starts typing. As he type ungrammatical incorrect English, he realizes that he need to add a link to one of his favorite gurus blog entries. He will create a place holder for the link. Now he realizes that he needs to add an image. Another place holder required. After finish typing he will then have his placeholder hyperlinks do automatic Google searches (?API?) for the keywords. He will also be able to supply locations for images.


Main Screen Image

main image

showdown input box

enter markdown text as normally

display output box

  • Display as a web page on box
  • Displays as web page in its own window ( Joe is a bad-ass programmer and uses a dual monitor setup).

HTML output box

display HTML

Controls

Links

links button

This control is a slide down. It can be minimized. The ‘link text buttons hold the search-able terms. Clicking on this moves word into ‘search box’. Click on ‘search button’ and send search request to Google. ‘Search results’ will display result from google. When you clock on a single result, the link will be inserted into ‘shadowdown input box.

Images

TBD

Save

TBD


Source:

quicBlog


Is it jQuery’s fault it has leaky abstractions?

March 25, 2010

Yes and no.


No its not their fault it has a leaky abstraction.

An example of jQuery not being responsible is here:

    $('#content').css('border');

This is due to several things. One is that different browsers give different result. Two, a border actually consists of four sides (top, bottom, left, and right), and lastly each border side has three properties (style, width, and color). WOW, just looking at a border really includes TWELVE pieces of information.

The only responsibility I see that the implementation .css should return undefined instead of just returning whatever the browser implementation returns. It should force you to select for a very specific border side and property (opinionated software):

    $('#content').css("border-left-style")

Yes it is their fault it has a leaky abstraction.

An example:

    $('#content').addClass('outline');

That’s perfectly good semantics for adding classes to a selector. I say you’re right, but where it breaks down is if you need to add more than one class to a selector. you end up with this:

    $('#content').addClass('outline');
    $('#content').addClass('left_position');
    $('#content').addClass('reset_left');

or you could do this:

    $('#content').addClass('outline').addClass('left_position').addClass('reset_left');

Yawner, everybody understands method chaining. But isn’t one of the powerful tools of jQuery, is the iteration function .each. Shouldn’t we have something like this:

    $('#content').addClasses('outline left_position reset_left');

Let jQuery parse the string into an array of classes and apply it to selector.

And here is how you extend jQuery:

    jQuery.fn.addClasses = function(cssClasses) { 
        // function logic for adding
        // individual classes to selector
    }  
    $('#content').addClasses('outline left_position reset_left');

See: Adding Functions to jQuery


But hey they are only at revision 1.4.2

And those leaky abstractions can be overcome with some extension or changes in behavior. Overall even with the leaky abstractions jQuery is very powerful and useful. I recommend it for everybody.

just a test showing some program shadowdon html output

March 23, 2010

Showdown Demo

You can try out Showdown on this page:

  • Type some Markdown text on the left side.
  • See the corresponding HTML on the right.

For a Markdown cheat-sheet, switch the right-hand window from Preview to Syntax Guide.

Showdown is a JavaScript port of the original Perl version of Markdown. You can get the full source code by clicking on the version number at the bottom of the page.

Also check out WMD, the Wysiwym Markdown Editor. It’ll be open source soon; email me at the address below if you’d like to help me test the standalone version.

Start with a blank page or edit this document in the left window.

printf("goodbye world!");  /* his suicide note
                              was in C */
    function buildTestResult(hook, assignId) {
            var result = id(hook);
            if ( !result ) {
                    result = document.createElement("p");
                    result.id = (config.stats.bad ? "qunit-testresult-fail" : "qunit-testresult-pass");
                    result.className = "result";
                    tests.parentNode.insertBefore( result, tests.nextSibling );
            }

            return result;
    }

tada

File versus HTTP (localhost) in Firebug

March 21, 2010

I learned something today.

I use NetBeans 6.8 PHP for developing web apps. My external web browser is Firefox 3.6.

In the the HTML editor of NetBeans you right-click and select View. This sends the HTML file to Firefox. No requests will ever be generated.

So to correct this use HTTP://localhost instead of file://c:\whatever.

In the editor “run” the file instead of “view” (CTL-F6). BTW, why would anyone ever want to view the HTML instead of run it?

This really helped me out when debugging jQuery post request, using JSON format.