Visualizing the Browser Object Model

I’m working on conceptualizing how web apps relate to the browser. Thinking about single page (and multi-page) apps and the different elements they need to control.  It became apparent to me that there are two models and two sets of state that exist side by side.

There is the browser, along with the DOM and all it’s related elements:  window, location, status, history — and then there is the application, with it’s model, state, and actions.

Turns out the W3C (*ahem* Netscape) did a pretty good job of of designing the browser object model.  Here’s a diagram I drew to help me visualize the browser object model based on the documentation at W3Schools:

browser object model

The actual Browser Object Model is almost exactly what I conceptualized needing to work with (in an abstracted way) for my applications.

Next step is to design an application so it interacts with the BOM (not just the DOM) in a clearly isolated way.

BTW, pro-tip for those of you building “single page apps” and want to keep it on a single page. Don’t set window.location.href=url Instead, use window.location.replace(url) and keep your back button gray.

A workflow for building, testing, and deploying apps

I put together this diagram to show the workflow I like to use for building, testing, and deploying applications.

Build and Deployment Process - New Page (2)

There are 4 stages:

Develop

A developer checks out source code into his local environment.  He builds the source code and runs the automated unit tests to verify it is working.  He then makes changes that can be viewed and tested interactively in his local setup.  When his changes are tested and completed, he checks them back in.

With git, this would involve a pull and a push — but not a push to master.  Every developer should have a remote repository that functions as a backup.  This could in theory be a branch, but I don’t like proliferation of branches.  Consistent naming makes it easier to keep track of what should be merged.

The developer then sends a merge request to the central project repository from his own repo.  So you have something that looks like:

pull request from fijiaaron/feature_branch to project/feature_branch

Package

The central project repository then pulls the changeset from the developer’s repo and does whatever automated and manual checks deemed necessary.

These could include code reformatting, style checks, static analysis, code coverage, code reviews, etc.  The project is built from scratch and unit tests are run.

If all checks pass, a package is built and pushed to the artifact repository.   If not, it is rejected and the developer is notified.  The developers master (or feature) branch still contains his commit, but the central repo remains untainted.

The artifact repository could be your git repo (but probably shouldn’t be) or a package tool such as maven’s artifactory, nuget, or an RPM repository.  It doesn’t matter as long as the packages are well named and versioned — and you have a way of keeping track of versions and a way to promote them (a simple database of artifact->version->promotion status).

The central source repository should be tagged for each package version created.

Test

Formal system testing occurs next.  I thought about naming this step “QA” to distinguish it from developer testing, but quality is everyone’s job, right?

At this stage, the source code is left behind, and a known good artifact is downloaded and deployed to a test environment.  Automated and/or manual tests are run that exercise the full system as it runs in a production-like environment.  How production-like is a decision best made by you.

At the end of the system test stage, the decision is made to promote it as ready for production or not.

Note that there can be several levels or stages of testing that run sequentially or in parallel.  This allows for a deployment pipeline that might include an environment with mocked services, ones for formal QA and stakeholder acceptance, performance & security testing, and staging environments.  The main idea is that there is a flag that denotes an artifact (or collection of artifacts) as ready for production deployment at the end of it.

Production

This is the final stage, and it’s really just another section in the deployment pipeline that happens to be the final one — or ones if you roll out in stages to some customers (eg. a beta site or A/B testing.)

Simpler and better text formatting than markdown

I was reading What’s Wrong with Markdown by Adam Hyde this morning.  Coincidentally, I’ve been researching and weighing my options for a simplified markup syntax for a Test Case Management system I’m working on.

While I agree with most of what he said, the thing that really struck home (and rang false) is that Markdown is meant as a way to visually markup text — not a shorthand syntax to translate into HTML.

When editing test cases (or comments, or really any simple form of documentation, you don’t want to get too fancy.  You don’t want to hide complexity, you want to eliminate it.  So, here is my proposal for a complete structured text format designed to be read as is … or translated into HTML or other inputs.

Text styles:

Forget about all those weenies who think they’re hip talking about semantic markup (which is really just semantics) nobody ever said, I wish I could tell people my text has emphasis or “strong”.  People want text that is bold, italic, and underlined.

*bold*

/italic/

_underline_

~strikethrough~

No further explanation needed.

Headings:

The same goes for headings. Who cares what an H6 is?  What you really care about is font size.  But, here, a little bit of semantics is useful for creating an outline or table of contents — or just a tiny bit for SEO.

= Heading 3 =

== Heading 2 ==

=== Heading 1 ===

Which heading is bigger? I bet you can tell.  A document really only has one main heading, and several nested under that.  So you should spend less time typing the headings you use more often.  Let the parser figure out which heading level is biggest and adjust accordingly.  HTML got the way headings are numbered wrong, but that’s not my problem.

And I don’t think you need more than 3 levels.  But you can make it bigger for more emphasis if you want:

================= You’ll really notice this heading (but you shouldn’t have to count dashes =================

Lists

This one isn’t hard.  But so many parsers screw it up — so does MS Word, but what’s your excuse?

Bulleted lists

* item a

* item b

* item c

Numbered lists

1. item 1

2. item 2

3. item 3

Indentation creates nesting.  That is all.

Indentation

Four spaces or a tab.  I’d restrict it to only tabs, but textareas can’t handle tabs (unless you paste them.)

indented

Links

If it looks like a url, it’s a link.  Too bad if the parser makes a mistake.  But you can create links with labels, and use anchors

[link:label]

[#anchor]

A footnote would look (surprisingly) like a footnote

see footnote [1]

[#1] This is my footnote

Images

Images (and why not, even flash or an HTML canvas if you really want) can be embedded with curly braces.  If a link looks like an image, you could embed it by default.

{embeded url}

Preformatted text and code

This is important, and github’s triple tilde is a good solution, but how about just a triple dash?

—single-line preformatted—


multi-line
prefomatted
text

You could also just use a HTML-like tag

<code>

This is a code block.

</code>

Tables

Why not?  If you’re willing to draw it, render it.  Along with alignment like github markdown uses

+------------+-----------+--------+
| :left      | :center:  | right: |
+============+===========+========+
| the above rows are headers      |
+---------------------------------+
| don't | worry | about | cells   |
+-------+-------+-------+---------+

Number of dashes determines width in ems — or just default to 100% — or something like that.

Do you really need anything else?  Especially because this should be a simple text block.  I’m not sure that embedding images or rendering tables is even called for.

Let me know what you think.

Setting up OpenDNS Family Shield on your router

You can protect your local network from unwanted adult content by changing the DNS nameserver settings on your router to use the OpenDNS FamilyShield DNS servers.  It’s a free service that blocks most adult content at the networking layer.

I have a Linksys WRT-54GL with DD-WRT installed.  Here’s a good video that explains how to set up DNS servers on your DD-WRT.  Add the Family Shield DNS servers under Settings->Basic Settings -> Network Address Server Settings (DHCP) Just make sure the first nameserver in your DD-WRT settings is your router’s IP address (e.g 192.168.0.1)

DD-WRT Family Shield DNS setup

You can also add these DNS settings to your local /etc/resolv.conf on Linux or TCP-IP Settings on Windows.

The IP Addresses of the OpenDNS FamilyShiled nameservers is (in resolv.conf format):

nameserver 208.67.222.123

nameserver 208.67.220.123

Trying to use a Mac for a month

About a year ago, I bought a MacBook Pro. I bought it for an intern who worked for me at One Shore. But after the internship was over it sat on the shelf.

Until today.

I’ve used a Mac before. I bought a Mac Mini several years ago as a test system — so I could cover all major operating system. And I wanted to learn iOS development.

I never got around to building that killer iPhone app so I still do test consulting and use my Mini from time to time for cross platform testing or when my other computer is busy (installing updates, etc.)

I’ve always struggled working with (or against) the operating system. I’m comfortable on Windows and Linux, so I did my best to make my Macintosh as familiar as possible, which meant changing keyboard shortcuts, installing familiar apps, and working from the command line as much as possible. OS X is Unix underneath, but it felt a bit like using Cygwin.

But now I’m going to make a concerted effort to learn to do things the Mac way. I’m sure I’ll have to cheat along the way — I intended to use Pages as a word processor, but to get started, I installed Sublime Text and started typing.

(Note: I just found that vim comes installed — once I found the terminal — so I could have used that. Or TextEdit, which is Apple’s version of Notepad, which I found under Applications after installing Sublime.)

I decided to create a blog and document my process learning to use a Mac as a software developer.

I hope it will also help me get motivated to write and learn a bit about engaging a community I’m not familiar with.

This is the start of it.  I’ll continue posting on monthofmac.com once I have the domain set up with DNS and WordPress.

Healthcare startup in Bangladesh

I’ve just started working as an advisor to a healthcare startup in Bangladesh called EMFIXR.

Emfixr has the goal of connecting doctors and patients in rural & under-serviced areas in developing countries.  They’re starting in Bangladesh where some of the founders are from.

Dan Mustafa, a founder of Emfixr reached out to me through Angel List originally looking for a developer.  I don’t have the time, but I agreed to do what I can to help.  I also plan on coming on as an investor once they’re ready.

Besides technical advisory work, I’m helping Emfixr build publicity and marketing by creating a Kickstarter campaign.

I connected Dan with MovingWorlds to find someone to help creating a documentary about their project connecting doctors with patients in Bangladesh.

Here is a video by Roger Huang describing Emfixr.

And here is the Emfixr promotion video presentation.

If you’re interested in working with Emfixr in any way (development, social media marketing, investment, etc) please contact me.

What do you need to start a product business

I was reading @patio11′s description of how he started a “microISV” (remember that term from a few years back) from a simple Bingo Card Creator in 8 days.  It got me thinking about what you really need to start a product business online these days.  Besides the flippant answer “not much”, here’s the list I came up with:

What do you need to start a product business?

  • a product
  • a place to advertise that product
  • a description of the product and reasons to buy it
  • a way to market that product
  • a way to take money
  • a way to deliver the product to customers
  • a way to handle customer support

Technically, you don’t need to be able to handle customer support until you have customers.  But once you do, you’d better be ready.  Don’t get too worried about it at first.  Email is probably good enough until you have more emails than you can respond to.

You have to have a product, but you don’t necessarily have to have built the product yet.  But you do need to be able to fulfill orders once you have customers  If you don’t that’s called fraud.

A web site fits the need of advertising the product.  You have to tell people what your product is and why they should buy it. Coming up with decent marketing copy is actually one of the most difficult and dreaded aspects of self-promotion.  At least for me.  This can be as simple as a blog or hosted shopping cart.

But no one is going to read that if they never see it, so you have to have a way to drive traffic.  This can run the spectrum from AdWords to outbound sales calls.  It also includes SEO and networking.  You won’t know what works for you without some experimenting and market research.

So you have a product, a way for people to learn about it, and a way to get them to find out about it, and now they want to buy it.  You need a way for them to pay you (this is the core of the business.)  But once you have a website with a landing page that tells people about your product, and people who are in the market for your product are actually seeing that it exists, and are convinced it will solve their problem, you need to be able to close the deal, take their money, and deliver the product to them — you have the core of a business that can scale from a single downloadable e-Book to Amazon.com.

Ok, you may have some scalability issues, but nothing you can’t overcome, right?

As long as you’re making enough profit to make it worth your while.  Don’t forget to balance the books — or get someone else to fund you.

Some other things it might be nice to think about, but not technically necessary up front:

  • a way to communicate with prospects & customers – an online newletter?
  • a cool product name and fancy logo
  • SEO and organic marketing
  • analytics to tell you what works and what doesn’t work
  • recurring billing
  • business organization (LLC, Corp, etc)

You first need to:

1. Find something people want and build it

2. Inform people that you have a product that fulfills their desire

3. Convince them to buy your product

4. Be able to take their money & deliver the product

5. Handle customer issues