My Experience With Rule 3: Buy Time

Rule Three: Buy Time

Buying time. It could be argued that rule one covers buying time, however I have about a month under my belt of learning about the power of delegation.

A really excellent service I have been trying out for the last month is http://getleverage.com (formally less doing). I have to say that this service has been fantastic for me. The whole idea behind get leverage is to offload time consuming tasks to someone else. In essence, you are buying time.

Here’s a few examples:

  • Find a restaurant in Seattle that can seat 40 people for our conference.
  • Find transportation for 40 people to and from hotel for the dinner.
  • Make travel arrangements.
  • Convert a screen shot of a table (why do people do this?) into a spreadsheet so we can actually work with it.
  • Update a website
  • Create a webpage
  • Find a driver to haul a trailer from one state to another.

There are more, but each of these tasks took time. I could have done each and every one of these myself, but by delegating these tasks I freed up nearly 20 hours in a month.

Not only that, I learned to:

  • be clear about the outcome I wanted before I started a task
  • gather all the necessary resources into one place so that the person I was paying to do the work could be more productive
  • set the context for a task so the person doing the work could improvise correctly if necessary.

So far I have been really happy with the service and it has expanded the capability of our organization without the need to add more staff, but more importantly it has freed me and some of my team members up – giving us to more high value tasks.

I am sure there are other ways to buy time, but for me this has been one of the most effective.

 

Clunkdroid- Why does Android Still Feel Unfinished?

Is it Just Me?  Or does Android still feel unfinished?

Recently I had to switch to owning a connected a google device for one simple reason.  I needed my Google Calendar when I was on the road.  I don't know what's going on or why, but my Apple Calendar will not sync with my Google Calendar and we pretty much run our whole company on Google Apps (gmail, calendar, docs). 

While  I could use the google iOS apps, for reasons unknown I am required to login every, single, time.  This is a huge problem for me as I use a complex password with lots of symbols.  Try typing a 16 character (4×4) password with symbols and case changes on an iOS keyboard.  It's PAINFUL to impossible.

Therefore, I went to the AT&T store and they tried a couple of things, but nothing seemed to produce the consistent sync I need.  This has been made worse given a recent change in the way we operate.  Our new task management process relies heavily on Calendar scheduling.  So not having my schedule has become a very real problem.

The most cost effective mobile solution for me is the new Samsung Galaxy Tab 4 eight inch tablet.  While the Galaxy Note phone looks appealing, the cost is more than twice as much ($700 instead of $300) and the monthly charge is was < 1/4 – about $15 a month to add to our business plan instead of $65 for a new phone line.  So here I sit and type. 

It works.  Mostly.

Well, the number one critical feature I needed works like a Champ.  I can get my Google calendar but with one caveat.  The Samsung application does not fully sync with google either.  So the default calendar from Samsung is almost completely useless.  Changes made to the default calendar app do not propegate through the Calendar ecosystem.

Despite that, I now have reliable email and Calendar for the road.  But what about my other critical apps?

The quality of Apps for iOS really seems to outshine Android.  I have not one, but 3 decent Markdown editors on my iPad.  My favorite right now is Editorial because of the power it has to format your markdown into HTML you can paste into web apps like WordPress and so on.  ByWord is another classic editor that is extremely powerful.  What I really like about both of them is

  • They format the markdown in the text.
  • They have lots of options like setting the font size, or saving to dropbox.

These features really make these applications easier to use.  The formatting is like syntax highlighting.  It's eye-candy, does not change the actual content but helps you catch mistakes in real time. 

The options like setting font sizes let older folks like me concerned with eye strain pick a comfortable font.  The linking to DropBox gives me confidence I can get my files later from another device.

On Android?  Not only are there very few markdown editors, not a single editor offers all three of these features.  Writely Comes close, but they don't support indocument formatting.  Writer supports in document formatting, however you are stuck with their "font for 18 year olds", and no linking to an external service.

Given the sheer number of Android devices in the world it is shocking that more apps are not available.

Device Compatibility

So I have my shiny new state of the art Android device, but I kid you not, two apps I went to download right away had warnings that the apps were not compatible with my device.  Seriously?

In another review, the app maker complained that they could not garunatee their app would work in the future.  They already supported 1,200 devices.  With all the changes they had no idea if they would or could support what ever new things came along.

Nice.

Is Android a Viable Market for Independent Develpers?

The other challenge with Android devices is that because they are cheap, so are many of the clients.  Apple users pay a lot.  They expect to.  But this also means they will pay for quality.  I have never seen one, but I would love to see a comparison if Android software developers actually can make any money.  The numbers are huge so I would assume so, but I don't understand why there are so few quality apps that maximize the latest hardware.  Even Microsoft seems to understand that when you release new tech there should be marquee apps to give you reasons to buy the newer hardware. 

This seems lost in the Android space.  My Samsung tablet has an absolutely amazing screen.  And yet most of the games play at a very low resolution and look terrible.  That is hardly what I would think either Samsung or Google would want – their latest tech looking bad.  But I don't know why that is.  I think I take it for granted what Apple has built.

On the surface, they are so similar, but just below that shallow surface is a depth of features and quality that only seems to exist in the Apple-sphere. 

I can go on, the list of applications that are available on my iOS and work flawlessly that I can find no equivalent of on the Android.  There are a few notable exceptions, mostly business and productivity apps like Everynote, and Todoist, but where is Solebon the outstanding solitaire game for iOS?  Or how about Textastic?  And while it gets slammed more often than not, I would love to have Safari on my Samsung.  I long for a browser that does not freeze during page loads or jump around constantly as it rerenders the page adverts during loads.

AngularJS for jQuery Developers – Part 3: Modules

In part 1 we talked about Angular JS compared to jQuery, direction instead of manipulation. Then in part 2 we reviewed that AngularJS wants you to be able to do virtually everything with JavaScript, including test.

AngularJS for jQuery Developers – continued

Let’s get down to some coding shall we? Our original Angular JS file looked like this:

While it feels like we might be far away from our original topic, AngularJS for jQuery developers, we are just about to dive into the heart of it, how to make test part of our regular development. As a refresher, let’s take a second to look at what we have in our angular module..

ng-app tells the angular engine that this block contains an angular application.
ng-init runs some initialization code. Here it creates our trivial model, the variable named name.
{{ name }} is a handlebars like template substitution. The angular engine replaces the double braces with the results of the expression. You could just as easily have put {{ 1 + 2 }} inside the code and it would have evaluated the expression and put the number 3 into the document and rendered the answer in the browser. (Try it if you like).

Finally, the <input> tag is perhaps the most interesting. After specifying a text field, we use the attribute, ng-model. This binds the input element to the model.

But what if we want to do something more complex? Chances are we want to create a controller.

Making our first controller

First, we need to remove the ng-init and introduce the ng-controller directive.

The HTML File or VIEW Code

Here is the html file, updated to use the most trivial controller possible:

So what changed? First, we moved the ng-app to the <html> tag. Now we replaced the ng-init with the ng-controller directive and told it which controller to look for.

Also, I moved the script calls to the end of the <body> tag which is fairly common with Boostrap applications (I’m thinking ahead). It runs just as well with the scripts at the top as the bottom, but putting them at the end prioritizes the page load.

This script also demonstrates a problem we will come back to later to address. Namely, we get a FUCO – a Flash of Unformated COntent. The template expression {{ name }} is briefly visible until the controller script runs.

The Controller Code

The controller code is overly simplified. In fact it is too simple. Why? Because it puts all of our data and functions into the global scope. We don’t want that. However, we’ve already taken a lot of time on peripheral topics and as much as I would love to talk about scope, here let’s just stay on task, getting the simplest possible controller to run.

As you can tell, the controller MyCtrl is passed a parameter named $scope. The angular framework creates $scope and passes it to the controller. The scope of $scope is the block where the controller is active. If we assign any values to any members of $scope inside our controller code, those members will show up as variables inside the body block. Hence the name in the ng-model attribute is referring to the $scope.name inside our controller.

If you want to make Javascript functions available to your HTML page, you would assign those to the $scope variable as well inside your controller.

You could then call {{ mySquare(2); }} to print the number 4 in your document. Trivial, but you get the point. At this point we are not concerned with the complexity of the functions, just the complexity of the relationships of how things fit together.

To test this you load the file into your web browser and look at it. I use MAMP so I am using a genuine apache webserver. In my experience loading from a file does not always work and can cause more problems then it is worth. Besides, MAMP pretty closely imitates my target environment, an inexpensive shared linux host like those available from (1and1, Dreamhost, and A Small Orange).

Despite the fact this javascript controller is a tad simple, now is a great time to introduce the idea of testing. Notice that our “controller” has no idea of the HTML document structure. That means it should be easy to test this functionality independent not only of the browser, but of the application itself. In short, we should be able to test it as an isolated unit.

So how would we go about doing that?

To answer that question we are going to touch three technologies:

  1. Jasmine
  2. Node.JS
  3. NPM

Hello Jasmine

Jasmine is a nifty unit test framework for Javascript. What makes it nifty is that it lets you write JavaScript tests with Javascript. Do you sense a theme here?

By focusing on one language we just might be able to make our lives easier… maybe.

We are going to look at Jasmine 1.3.1. Jasmine 2.0 is in development but none of the tutorials I had found worked with it so I am sticking with 1.3.1.

There are probably many ways to do this, but here is how I did it. I found this tutorial: How Do I Jasmine. It refers to a stand alone version of the library. I wanted to learn Jasmine before I got into node.js and npm. It turns out the standalone version of Jasmine is a little hard to find. At the time of writing this, I located the files on Github.com/pivotal/jasmine under the Distribution Tab.

When you download the library and unpack the zip file you get the following:

The SpecRunner.html is an html file that loads the source files and and the specification files (test suites). It then runs the Javascript tests against the source files and displays the results in your browser.

The output looks like this:

Jasmine_Spec_Runner

The SpecRunner.html file looks like this:

So let’s review. You write your javascript controller. You then write a test suite for that functionality. You include both the controller file and the test suite (called a spec) in the ScriptRunner.html file and the simple act of loading this document will test your function.

Let’s try it.

A Trivial Test File for a Trivial Function

So how do we write test scripts? By using three key Jasmine functions:

  • describe()
  • it()
  • expect()

These functions will be the backbone of your testing tools. The describe() function creates a scope for your testing, and will group a number of tests into one logical block. The it() function logically handles a single test or specification. The expect() function tests the results of your functions to make sure they behaved as expected.

Here is a prototypical Jasmine script:

Let’s break this down.

describe is a function that takes a meaningful label and associates it with an anonymous function. This manages Javascript’s scope (scope is a really big deal in Angular development). Then comes the test. The it() function also takes a meaningful label and it is attached to another anonymous function. This is the test. The expect() function determines whether or not a test passes or fails.

In our first example, the test passes. If a test fails (say edit the expects() to be different) and this is what you get:

Jasmine_Spec_Runner-2

Failing a test immediately raises the red flag.

The Big Idea

The big idea is that if you consistently test your software, you can catch bugs before they are hard to find. Expanding your test suite as you develop will make it easier to implement with confidence. As we expand our modules functionality we are going to also expand our suite of tests.

Controller Test

So how do we test our simple controller?

Copy the Jasmine 1.3.1 folders into your project. We want the SpecRunner.html file in the root folder. Source files go into the src directory, Spec files go in the Spec directory.

Now let’s write a test for MyCtrl. Since it does one thing, we only need one test. Create a file called MyControllerSpec.js and enter the following code:

This test file contains a describe() function call which groups together all the tests. It contains an it() function call to define our first specification.

Now why are we declaring a scope variable? Because angular will not be calling our module, our test code will. So we have to create the context. One of the biggest challenges we will deal with later is how to integrate all the dependencies from angular. Just trust for now that the smart people at Google figured all of this out and it is possible.

Finally, we expect(scope.name).toBe("World-Controller"). It almost reads like english does it not?

Try it out.

Running Your Test

Edit the SpecRunner.html file to look like this:

The source files are included before the test files.

If you load SpecRunner.html into your browser you would see…

Jasmine_Spec_Runner-4

This is just about the most trivial test you could run. One function. One specification. We are testing to see if our controller function sets the scope member name to be a certain string.

If something went wrong (say the name string was different) then you would see:

JasmineFailedTest

Go ahead and edit MyController.js and try it out. Or change the specification to expect a different string. Either one will cause the test to file.

This is great and all… but do I have to load SpecRunner.HTML?

You now have an environment where you could play around all day learning Jasmine. You can add more complexity to MyCtrl and you can write more tests. Have at it.

However, loading and reloading the SpecRunner.html by hand is hardly ideal. If we want an automated build process, manually executing tests is a problem. How do we solve that?

Enter Node.JS

I won’t waste your time on how to install NodeJS. (I do everything on a Mac, so my examples will reflect that). Please install it then continue.

To make sure you have node.js open a terminal and run

You should get a version very similar to the one shown in the example. What are we going to do with nodejs? We are going to set up jasmine tests we can run from the command line. So see how this works, run a trivial JavaScript using node.

Create file is called alive.js

Yup, it is a one line Javascript file that writes a single message to the console. Let’s run it with node. To do that enter the command:

Not terribly exciting, but you get the idea. Node.js can execute javascript outside the browser! How cool is that?

Well, it’s about to get a lot more interesting…

NPM – The Node Package Manager

Like many other scripting languages, Node operates on the idea of packages, external bits of code you can include into your runtime environment. PHP has PEAR, Python comes with a host of powerful packages. NodeJs includes a utility called npm. Npm allows you to install packages for nodejs.

You can find a vast library of packages at the website npmjs.org. Nearly all packages come with instructions on how to install them. There are two ways to install packages.

Global Installation

Using the -g argument will require the use of sudo, or at least you need to be running with root level capability on most *nix installations. Why? Because this will install the package for ALL users.

Local Installation

Or, you can install modules locally, so they are only available in your project, on your account.

In this case, it matters where you run the npm command because the package will be installed inside your project directory, into the node_modules subdirectory. This can be good if you want to have different modules that do similar things for different projects.

Now, what if we could find a command line version of Jasmine?

Turns out there are lots and lots of them. The one we are interested in is jasmine-node. It can be found at: https://github.com/mhevery/jasmine-node. To install it run

You need to use the -g option otherwise the you have to do a lot of work to make this run properly from a local installation.

To use Jasmine with Node.js we also have to make a couple of key changes to both our controller and our spec file. Basically, it is time to make our controller a real module and tell our script to require it.

Feasts and Fits: JavaScript / NodeJS and Modules

Once upon a time, a consultant once taught me certain words are “feast” words. He meant that some words have so many meanings attached to them that no one can be sure what anyone is talking about when they use those words. A great feast word is quality. MVC has become very feast like – it means different things to different people.

Module has become another feast word.

Just google “JavaScript” and “Modules” together and you will likely come across the excellent tutorial on JavaScript module patterns, however this will not explain how NodeJS handles modules.

Basically, NodeJS uses different rules. NodeJS is not a browser so it behaves differently than javascript running in a browser. It turns out the runtime environment for a language can have a very powerful if subtle impact on the language itself and it’s behavior. For example, if there is no HTML document to render, how do you include other files in your application?

Please check out Node.js, Require and Exports for more details, but here’s the core idea. In a browser environment, we create modules to achieve a level of isolation because JavaScript makes everything global if it can (not completely true, but true enough).

Node.JS on the other hand inherently restricts scope to the file level. This means our test script can not access MyCtrl because it is in a different file. Put another way, ScriptRunner.html made our test file aware of MyCtrl because the document included it which put it into the global scope. With Node.js (a command line environment) we need to be more explicit.

In short, we need require() and we need module.exports to indicate which JavaScript files have access to which modules. So Let’s update our JavaScript source file:

The key here is that we added that last line. module.exports makes MyCtrl available to other modules (files), such as our test file. I feel compelled to let you know that how module.exports is used makes a difference, but you can see the above mentioned tutorial for a great explanation. I want to get on with running a command line test suite.

Next, we have to tell our test spec to require our controller.

At the top of our file we added the call to require(). Now from the command line we can run:

Voila! We can now run test scripts in a batch file! Wow, that was a long time in coming. Getting a module that we can test using a batch file. But we got there.

AngularJS for jQuery Developers : Recap

So with AngularJS you isolate your functionality into a standalone module. Jasmine provides a nice behavior driven library we can use to write test specifications for our code. Using NodeJS and its package manager we can automate our testing.

We have covered a lot of ground, but we are still not where we want to be. AngularJS for jQuery Developers is supposed to help you use angular – but we took a detour to talk about test. Because Angular test uses so many different technologies, we needed to touch each of those to get an understanding of what they are and where the come from. Now that we have done that, we can move onto the next part of the process.

Completely automating test with Karma, and starting to explore more complex controllers.

Part 4 – Karma, Karma, Karma Cameleon

AngularJS for jQuery Developers – Part 2: Test

Thanks for joining me in part 2. Now in this edition there will be very little code. Okay, there won’t be any code. I have to introduce some concepts first. I know, I know, but this is the stuff I was looking for when I started digging into Angular and I could not find it. Hopefully, armed with some context you will be more productive as we progress.

AngularJS for jQuery Developers – Part 2

In part one, we learned that AngularJS handles updating the DOM very differently than jQuery. jQuery< is a great tool for manipulation HTML documents. Angular does that manipulation for you by letting you “direct” how the HTML should change when a data model changes.

Angular is much different in jQuery in another respect, however.

When I first used jQuery I only needed to learn jQuery to use it. For me a website was simple. Put your JavaScript in the js folder, the CSS in the css folder, images in the img folder and go to work. That was it. Testing meant, “Does this look good in my browser?”

The AngularJS community has a very different approach to web application development. In short, they are extremely passionate about application development. That means they want you to learn many, many new things.

Here’s a short list of the tools that sprang out of the AngularJS box at me, BEFORE I found one shred of documentation or tutorials on how to handle forms:

What!?
All of these tools fall into ONE big idea. If you are going to make web applications, you need a process. It’s not enough to just throw some files in directories and start hacking. The AngularJS community wants you to know that if you plan to build a web application, then you need to understand how applications are built.

AngularJS for jQuery Developer Screen Shot - Coda2

Most of the web development tools I have used, whether it was Dreamweaver, or the excellent Coda 2, or Komodo IDE have virtually no concept of a build process. Or to put it more accurately, they do not require that you have a build process.

AngularJS for jQuery Developers- jQuery tools

Most of these tools help you manage and move files from your local machine to the server. The interaction of three technologies (css, html, and javascript) is daunting enough.  Add server side scripting with PHP and a MySQL database and in that context jQuery (and Javascript) is just one tiny part of a whole website creation chain.

But Angular wants to turn all that on its head. With Angular, Javascript is the be all, end all, of your application. We are not building websites. We are building applications. And as much as possible you should do it all with javascript.  Ah… The tyranny of the should…

So how does that effect you the jQuery developer? You have to understand…

Angular Loves Test.

AngularJS – because of the code can be so completely separate from the HTML document, it is now easier (possible even?) to create automated tests for your javascript. What’s more, if you are releasing code into the wild, you will likely have more than one kind of build. You may have a build for development – readable javascript and css files, lots of debugging information. But when you release it into the wild for users, you want your code fully optimized. This means minification (uglify), concatenation (stick files together to reduce server requests), and things that generally make your code hard to understand but improve performance.

You might also want to incorporate tools that help you keep your code clean and bug free like lint, or give added functionality like LESS and SASS, but at the expense of requiring you to compile files first before you include them in your html.

All this means you will start to get comfortable with some software you never knew you needed.

Node.JS

– The software you did not know you needed,

   – Did not ask for,

      – And don’t know how to use.

Node.JS is also a piece of software you can’t live without. If you want to build AngularJS applications, you will want to know about node.js.

 AngularJs for Developers - key tool Node.js

Here’s the big idea: JavaScript as a language has evolved and matured. For most of its life it was that funny little language that ran inside the browser to help you manipulate HTML. Then in the 2000’s, people started writing some applications with it – all still in the browser. Now people are writing serious applications, and they want it out of the browser. Developers want Javascript on par with Python, Ruby, and Perl. They want it in a stand alone context.

Enter Node.JS.

Node.JS takes javascript out of the browser and lets you run it as a true scripting language. What’s more, putting JavaScript in a stand alone environment opens up other interesting possibilities such as… batch scripting Unit Test.

But I thought this was a tutorial about AngularJS!?

It is.  However, we have to back up for a second and wrap our heads around the idea that part of the “angular” way is to test code as we write it. And that is exactly what we are going to do.

I am now going to show you how to write an AngularJS controller, and then test it.  In order to do that, I plan to share with you what I had to do. I stopped and learn each piece along the way.

The biggest challenge I found with AngularJs is that most angular developers assume you already know about Node.js and karma and Jasmine, all these other tools. The trouble is that I never needed any of these other tools when I used jQuery.

Now I need them.

So, let’s dive in… On to Part 3

AngularJS for jQuery Developers

Or… AngularJS for people with less than 80398091709870 transactions per second

A friend of mine mentioned that he was working on his application using AngularJS. AngularJS is Javascript framework created by Google. It sounded very interesting to me so I checked it out.

AngularJS for jQuery Developers

If you are like me, most of your coding has been in jQuery. Now am I a jQuery developer? Not professionally no, but I do use the framework to make my life easier. I own several websites. WordPress is my CMS of choice. I write plugins and small apps. I’m curious about writing more complex web applications. AngularJs intrigued me.

AngularJS is great – it’s the rest of the baggage that’s heart breaking. In a nutshell, Angular is a very clever active template technology that tightly binds a JavaScript data object to an HTML document. The Data object is the model. The document is the view. Model-View. And yup, you guessed it, there is also a controller. MVC.

How is Angular different from jQuery?

For me, jQuery is great for manipulation. jQuery makes it trivial for you to navigate and manipulate the DOM, or Document Object Model. jQuery has very poweful selectors which help you locate, and then modify elements on your web page. jQuery’s write less and do more philosophy probably resonates with you as well.

AngularJS, however is a different beast. It uses what are called directives. Directives are fundamentally different than selectors and manipulators. Basically, AngularJS binds data to an element in the DOM. With binding, changes in the data automagically produce changes in the DOM.

Why is data binding special?

Because it means your JavaScript code – the code you write – does not actually need to know anything about the structure of the document displayed to the user.

Let me Give you an Example

Let’s say, I wanted to capture the data entered into a text input field, and as the user types I want that text to update in the page heading. Yes, this is the classic web version of hello world.
Menubar_and_the_jQuery_Way_and_Angular_vs_jQuery_md_and_AngularJS_—_Superheroic_JavaScript_MVW_Framework

The jQuery Way

Now, you my choose to do this your own way, is how I’ve seen it done.

So if you look at our file we have two elements, an h1 header and a text input. The scripts are loaded after the document is loaded and parsed. Our Javascript is saved in a separate file.

The jQuery code that makes it work is:

Now.. What is the code doing?
First, we have our snippet to tell the JavaScript to wait until the document is ready…

Then, we use jQuery selectors to find the input and attach a keyup handler. When the user releases a key, we will take the results from the input and copy them over to the span.

Finally, as a bit of book keeping we initialize the Span to say something. This is probably unecessary but it is what it is.

Not overly complex, but… you can tell right away that our Javascript MUST know something about our document to make this work. Also note that I don’t even have a variable here that stores the value. It’s saved in the input field right?

Angular Way

With Angular, this exact same functionality is done using directives. In fact the demo renders the same in the browser.

The_Angular_Way-2

Okay, you are probably wondering where the JavaScript file is listed. It isn’t. There is no JavaScript file.

At this point you say, What!?

You probably noticed that the HTML file had a few extra attributes. If you are like me someone told you ages ago not to add extra attributes to HTML files because that’s BAD. You might get in trouble.

However, some clever fellow at Google decided to break the rules (good for him). These extra attributes are called directives, and they represent a completely new way of manipulating a web page. In fact, you don’t think of it as a web page at all. Here’s how you think of it.

With Angular, there is a model, in this case our simple variable named… well name. And we bind that model to the DOM. When the model changes, Angular updates the DOM automagically.

How cool is that?
But how did it do it? That’s what the Angular engine does. It uses the browser itself to parse the dom and when it comes across custom attributes it does it’s magic. In essence it extends the HTML language. Very slick indeed.

The key AngularJS directives used in this example are:

  • ng-app tells us that it is an angular application.
  • ng-init is a bit of a hack, it lets me initialize the model, there are better ways to do this (if you had not guessed).
  • ng-model binds our model to the input field.
  • {{ name }} This little bit of sweetness is an expression. Angular replaces double curly braces with the values of the expressions contained in them. This is very similar to the handlebarsjs Javascript Template language.

Angular does all the magic of keeping the document in sync with the data. This is what it means to declare instead of manipulate. We use these extra attributes inside the tags to declare how we want them to behave. Then we let the framework do all the nitty gritty work of making that happen.

It’s Extremely Cool

No doubt about it…

But…

But… Google does not write apps for 1 or 2 people. Or 100 or 200. or 1,000 or 2,000. They write applications for everyone. That’s right. The whole planet. One million people a minute search google looking for something. When google builds something they expect 7,000,000,000 people to use it. Probably all at the same time.

So?

So, Google wants their applications to be robust. They want to make applications, real bonafide, performance tuned applications. If you came into this like I did, looking for a nifty way to make adding some functionality to your web site easier you are in for a nasty shock….
Suddenly your nice simple development environment starts to look like a franken-monster. It reminds me of the line from Wreck-It Ralph when Sergeant Calhoun said, “Doomsday and Armageddon just had a baby and it is ugly!”

Please don’t misunderstand. I love open-source, but angularJS is more than a framework, it is a way of life and a school of thought all rolled into one. Still don’t know what I’m talking about? Then read on to Part 2 where we talk about… shudder… test.

Sometimes it takes a day or two

One of the things I have come to learn about technology is that you may not get it right away.  I think that makes Apple products pretty magical as you tend to get them instantly.  This makes them “intuitive”.  However, for other things it takes a few passes.

Yesterday NextGen Gallery  was hopeless.  Today?  I figured it out and it’s pretty nice.  Sometimes you have to give it a day or two.

Turkey Cooking Time Start Calculator

Okay, I realize this may be late for this year (given that Thanksgiving was last week), but I have noticed that useful websites can last for years and I know I will need this next yar. So, I thought I would put this up.  This little web-app/form helps you calculate when to start your Turkey Bird!  It’s a Turkey Cooking Time Calculator.

Turkey Calc

You know the Turkey size! You know when you want to eat! But when do you START to cook it? How do you substract 280 minutes from 4:30 PM!? It is enough to give you a headache!

The solution? Turkey Calc! This little calc will tell you when to start your Turkey if you know how long it will take to cook. The cook types are averages, or you can simply enter your estimated cook time in minutes.

mpp = minutes per pound



 Oven (20 mpp)
 BBQ Grill (15 mpp)
 Deep Fry (3 mpp)
 Infra-Red Frier (10 mpp)

lbs
(in min)
Please enter dinner time as h:mm p


Start Prep at: 10:45AM

Start Cooking at: 11:00AM

Start Carving at: 3:15PM



— Scott

Cooking

Every year I cook at least 2 birds, one on the Grill (BBQ Style) and one fried. Since the cooking times vary with the cooking methods I wrote this tool to make it easier to know when to start each bird.

Turkey cooking time

This year I tried the Char-Broil Infra-red turkey frier and I have to say everyone loved it. The Turkey was incredibly juicy, but it did cook much faster than I expected. At the same time I put a nice big 20 pounder on the BBQ (shown in the picture). That one cooked quite a bit faster also. So I still have some work to do. The math is not precise.

Turkey Cooking Times

The Infra-red cooked a fully thawed 15 pound bird in just about 2 hours. I would suggest you use a real meat thermometer and not the plastic pop up, as the plastic pop up on mine stuck causing me to leave mine in 15 minutes longer than I wanted. The BBQ cooked in just 3 hours – finishing a whole hour ahead of schedule. Again that was something I did not expect.

So the key is to play it safe and check your Turkey often while it is cooking. Turkey cooking time is just as much an art as a science. The Turkey Cooking Time Calculator is more of a guide than a hard rule.

On the US Gov Site for food safety they point out that Turkey cooking is not linear. But once you cross the 12 pound threshold (which is typical for big holidays) they are more uniform. I don’t think I have ever even seen a 6 pound turkey.

Useful Links

About.com Turkey Roasting Times Chart

Butterball Calculators

Government Roasting Chart

Easy Picture Posting With Markdown

Okay, I lied. Putting pictures in your post is not easy with Markdown. It’s not easy with anything really. However, if you are like me and you think of your photos while you write, then markdown can make putting pictures in your blog posts manageable. Follow the Jump top find out how.

The trouble with images

Look, there are lots of ways to post a single image in your post. WordPress does a very nice job with Instagram, and there seem to be lots of ways to get one image posted. But what I am talking about is embedding several images in the body of a post. That is problematic on everything except a desktop.

Let’s look at how images are handled now with WordPress. Don’t get me wrong, I love the WordPress uploader. I will also admit that the WordPress iOS app does a decent job of inserting images into posts. I think it is a huge improvement. However, I find it a rather tedious process to upload images and then insert them where I want them in my text. I guess my host is just slow, but I find the steps are slow pretty much on any host or server I use.

What I want is the ease of dragging images into my document while I write, and then having those images uploaded automagically, or I want to be able to refer to my images as I author. The major trouble with most image hosting solutions is that they refuse to give you a direct link to the image file, something you can paste into the src attribute of an img tag.

For example, DropBox, Flickr, and Instagram all make it easy to upload images, but they give you links that wrap your images in an html page. The links are not suitable for pasting into an img tag. Now it is possible to get a link from Flickr, but wow is it tedious.

SkyPath and ImageShack

For my workflow, I have found two approaches that work. First, SkyPath is an iOS app (available on android as well) that makes it trivial to upload groups of files to a hosted server, and get a link directly to your hosted image.

20130604-235652.jpg

Once you have the link, then you are free to paste this link into your markdown document. The ease of uploading and getting a direct link is about as simple as I have seen. After the file is uploaded you just tap and hold over the image and SkyPath will copy the link to the clipboard. Your image is now available online.

Preview

The key to making sure everything works is to preview your markdown file. Some editors like Markdown Pro do this in real time, but I am also a fan of Marked which can update the preview every time you save your work. On my iPad Elements is brilliant. And once you can host your images online, preview should let you know how your images will appear in your final document.

Place holders

Using an image editor like Pixlr, or Acorn, I created a set of place holder images and uploaded them to imageshack. With these in place, I can quickly and easily put in place holder images while I am writing then go back later and replace the placeholders with the real images.

Summary

Working with multiple images inserted into a single post always feels a bit tedious. It would be wonderful if you could copy and paste a whole formatted word document with images into WordPress, but I have never gotten that to work. What’s more I have other software I use which is unlikely to ever support cut and paste from MS Word. So work flow is my next best thing.

Markdown lets me put in simple place holders for images, with links to where I can find that file online. This allows me to write quickly, block out key data I may have to upload later, and keep going. It is not ideal, but for me it makes working with images in blogs manageable.

How To Use Markdown For Blogging

Would you like to know how to use markdown for blogging on any device you own? Would you like to spend more time capturing ideas and less time futzing over formatting? Finally, would you like to be able to port your work to virtually any online publishing service? I use markdown to do all of these things. Read more to find out how you can too.

Continue reading How To Use Markdown For Blogging

How to get the product URL from your Amazon affiliate product links

This little trick will show you the quickest way to extract the amazon affiliate product links from the HTML code Amazon presents. This way you can create your own image, or word links that do not look so distracting. This process works on a Macintosh, but could work with any text editor that supports regular expressions. Usually you find these in programmer’s editors. There are tons of free programmer’s editors.

The process I will outline here uses Mac Software, but you could easily do this with Komodo Edit, or any other free editing software.

What You Need

First, you need a piece of software to run the regular expression. I use RegExRX. This is a $5 app you can purchase on the iTunes App store. It is a great little programmers helper that lets you debug regular expressions. It is quick to load and easy to use. You can learn more about it from Mac Technologies Consulting.

.

Getting the URL

Once you have a piece of software that can run a regular expression 1, then you can get to work.

First, launch your Amazon website logged in as an affiliate. You will need to get your affiliate link.

After you are on the affiliate page, select the Text Only tab, and then the click the Highlight HTML button. Finally, copy (Cmd-C) the highlighted text.

Now extract the URL with RegEx

The key to pulling the Amazon link out of all this code is a small bit of text called a regular expression. The magic instructions are:

I won’t try to explain it here, it’s way too technical. If you are really interested you can find an excellent description at http://stackoverflow.com.

Next, launch your program that can run a regular expression (RegExRX for me), and then paste in the code above in the search box, then paste in the text from Amazon into the Source Text box. On RegEx RX it looks like this:

Step_1b_-_Get_the_Text_URL-4

Once you have the expression entered, it will highlight the text that is matched. Then you just copy this text and voila! You are ready to create your own links.

Summary

If you want to make your own image links, or text links using your Amazon Affiliate id, this is one way to quickly extract the link from the Amazon HTML. Note that this omits the tracking pixel that Amazon likes to include (a one pixel wide image they hide in your page so they can see how many clicks or views you are getting). You affiliate link will work just fine without it, but you lose a little tracking data. If you are not worried about that this process should make it much quicker and easier for you get grab the URL you need without errors.

  1. A regular expression is a bit of programming jargon. It is simply a set of rules that tells a text search engine what bit of text you are searching for in a larger body of text. Think of it as a program that searches for a needle in a haystack.