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!

Advertisements

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.

JS_RUnit Reformulated

November 17, 2009

js_runit is now a standalone JavaScript testing framework. So if your into a minimalist JavaScript testing experience, this tool is for you. Two files to download. The html file and the JavaScript file. Included with this is an example of Passive View with unit tests.

To really appreciate this see the passive view example.

The unit tests for the above example can be found here.

Happy unit testing.

JavaScript Test First Presentation Patterns Part 1

October 17, 2009

Why Presentation Patterns?

Presentation patterns can give separation, between display elements and logic performed on the elements, reducing accidental complexity. Mixing display elements with logic leads to a pattern called Big Ball of Mud. This pattern is very common, because as more time goes by you end up adding more and more mud to the code base. Now you may say Oh, but the code I write isn’t complex and the more JavaScript I add the longer it takes to load my pages’. I would argue that the minute you hit CTL-S on your code, it has the potential for complexity in the future. Maintenance is the key ingredient that adds complexity. Code bases can spend more time in maintenance; bug-fixes and new features. As more bug-fixes and features are added to the code-base, more complex the code becomes. By using separation between display elements and logic, accidental complexity is decreased.

The future of web design is to use even more scripting in web pages. The visual presentations that JavaScript offers is too good a thing to pass up. It isn’t the 80s any more. It is the 21st century. Dynamic pages are here to stay.

Load speed can be ameliorated to a certain certain point by compressing the JavaScript file that gets served to the web browser. Compression consists of removing whitespace (spaces and carriage returns), and replacing variable names and functions names with minimal sized tokens.

Why Test First?

I’m an ordinary programmer. I can’t dream up this wonderful and beautiful super kick-ass application. I can’t keep of track of 400,000 states the application is in, when executing. I just can’t. Test First helps me handle all the above deficiencies that I have as a programmer.

There are some advantages for following the TDD way. One, it creates a regression test for your code base. Two, it allows you to refactor your code safely. Three, it drives the code base to a good design.

One thing, I personally think is very important, is it helps you to write in a more functional style. In JavaScript you have first-class functions. These functions (named or anonymous) can be assigned to variables and passed around. This can be a powerful abstraction tool.

The unit testing framework I use is called js_runit. My web development right now is done from Ruby on Rails.

What Are Some of the Presentation Patterns?

Humble Dialog/Passive View
MVC
MVP
Presenter First

 

Please feel free to disagree with some of opinions. Debate is good.

Javascript Complexity

October 14, 2009

Javascript is a language used in web development. I would argue that it is Object Oriented (OO). And due to this the principles guiding development in an OO language apply.

When developing software, at its basic level, you have three responsibilities that need to be managed.

  1. Input: consist of user actions.
  2. Output: change to the web browser.
  3. Logic: any piece of code where a decision is made.

To manage this complexity, you should be Unit Testing if not testing-first.

A simple Javascript unit testing framework used for Rails.

 

js_runit

Shiny Penny Scenario

September 24, 2009

Do you find yourself moving elements and widgets around your presentation? If so then your going down the path of the shiny penny scenario. This scenario is where you have some pennies that you just move around. You’re not doing anything productive. See 37-Signals post.

It is not very productive, because you’re not actively adding business functionality to your application.

If you develop for functionality then presentation will follow. The functionality will constrain the the presentation to what it needs. If you develop from the presentation direction to functionality, you will be constraining the functionality.

Business needs define the functionality. Functionality will define the presentation.

So my recommended process is:

  • Define the business need.
  • Implement the functionality that satisfies the business need.
  • Implement the presentation that utilizes the functionality.