QA on the Mobile Version of Website

I am testing the new Bootstrap (that’s the the theme) version of ArborScape which has had issues with the payment page. We spent a lot of time for the client and after hours of quality assurance testing, of course, it was a simple issue of a WordPress (WP) plug-in (W3 – Total Cache specifically) not showing the new CSS for the payment page. The cart was appearing empty without any of the standard address , name and credit card fields.  The cache plug-in evidently didn’t update the cache fast enough.

Partly this is strategy as we currently encourage browser caching of the website so that it loads quickly. Obviously, customers who pay online are frequent customers of the site so they probably had a bookmarked or other cached version.

But we disabled the plug-in and now it works.

Cache plugins, they give and they take.  As you get into web applications around WP, nearly every plug-in you use seems to create a corresponding, lurking issue down the road.

It’s like it’s own Law of Conservation of plug-ins!

Tree Calendar Plug-in didn’t quite make it

Our tree care calendar wasn’t so lucky in our quest to go mobile first.  The last calendar wasn’t Bootstrap enabled, so we switched over to a new plugin that will now have to be manually updated with all the tree care content.

We are seeing real quick if we can update the data through import. I need a second opinion from the devlopers manual update prognosis.

The last calendar wasn’t too hot functionality-wise, anyways (and really neither is the bill pay page mentioned). For example, it can create thousands of future months, like 4000 years in the future and corresponding pages to match. We like to think ahead but we aren’t quite scheduling for the year 2514 yet!

Here is the visual of the calendar not behaving with new CSS.


Ugly stuff!

So to do all this, we have two plugin working so we have to deactivate the new calendar and activate the old calendar plugin to get at the content, to copy and paste.

We need to transfer info over to new tree care calendar plugin called FT-Calendar. To access the content in the old calendar go to Plugins>Calendar> Click activate.  Basically switching back and forth.

Yes, that sounds as much fun as you think:(

Once we are done, just need make sure to deactivate old calendar and the new one will default. Off to find a data import hack!

- Matt

EAB Mobile Development – Building Phase

I’ve slowly moved into the building and testing phase of the emerald ash borer app. Emerald ash borer is an insect that is very damaging to ash trees.

The last time I wrote about this project I was hating my code but today’s meeting with the developer and team made me feel somewhat better.

Well, technically we are delivering a  mobile optimized website, by the way.  But everything is running together and we are programming all kinds of functionality first, for both the app and website, and will then start to strip away what gets displayed to which audience.

Here is a screenshot to get the general gist on where I am. I’ll post our working link when we get closer.


There is the EAB calculator and then a second, more general tree care calculator. The general tree care calculator will be a true mobile app. Here is a web version of the web based tree care calculator which works well but needs a lot of design and usability work.  The app will take care of that.

The EAB calculator itself is a website designed with a “mobile first” intent. All mobile first means is starting with how the site will look on a mobile site and then building out from there to a tablet and a desktop design.

Most past work I’ve done is the opposite – starting with the desktop, so it’s exciting to stretch out especially on viewport settings.

Our main app developer on this project is Chuck Carvey who graduated form the University of Denver’s enterprise application program.

It only took him about 20 minutes, maybe a half hour, to set up a demo of the app to Android/Play Store, Apple/iOS/AppStore and Windows Phone.

All with Phone Gap, the latest innovative software to be bought by Adobe. Phone Gap allows the developer to create on the fly demo’s of an app to review by clients and other team members. You create a QR code and everytime you view the latest build or update is downloaded through the phone installer. In my case it was Android installer.

Very awesome tool! And you can uplaod one app for free if you want to try it out. Chuck said it’s programmed with “hydration” where the new build automatically searches for and uploads the latest version.

We are using a fluid design which looks up the screen size with a default size of 360px. I’ve also been learning more about viewport settings which use “1.0″ or “.05″ to specify the ratio of the displayed app to the screen size of the user’s device.

We also have the app designed for vertical scrolling which is a pretty established usability standard. You also can swipe horizontally although who really does that besides with an eBook or document.  I guess government standards strongly recommend staying away from horizontal navigation.

One thing I didn’t understand but wanted to mention was a downside of Javascript. My understanding is you have to use six different segments to account for a phone, phablet and tablet,  with a file each for  portrait and landscape presentation.

Finally, any app you build and publish needs to be maintained. Typically Apple/iOS operating system is updating once a year, typically around now in early fall. When that happens, you usually and have to fix or fine tune things to make sure the app is still working well.

Keep programming things that seem to have people interested. Hack it together, get an audience and then optimize. I keep having to remind myself of that.

- Matt














Continue Reading

I hate my mobile app code today!

Today is just one of those days that I hate all the code I’ve done. Programming doesn’t come naturally for me which, in a way helps me explain it, BUT some days I just wish I’d get it!

Get it, in the way that friend of yours (we all have THAT FRIEND) who started to code one day and never looked back! To be that guy.

Enough belly-aching as my temporary block here will benefit you in resource sharing ie the mobile platforms I looked through today.

Today I was trying out some of the free mobile app platforms suggested by Mashable.  My main objective wasn’t to build a real app but to find a tool that would generate code that I could look through to get the syntax and feel.

I’ve yet to find that.

Appypie was a pretty easy drag-and-drop solution and it said it would generate a zip file to download. It worked great until I got to the publish stage. Then it froze up and eventually got locked in some sort of loop. Strike 1!

Next I tried AppMakr which was easy enough to drag different elements such as Text Inputs and Forms into the design gig, but couldn’t figure out how to drag anything out. Delete and re-starting was the best option to work with. It was clear if I would actually see any code one done and sure enough, AppMakr, launched the application to its free provided URL which is nice for publishing to gauge interest but not great if you’re trying to learn from their code based. Also AppMakr’s included graphics are pretty tacky and old-school looking. Strike 2.

My third option, Codiqa was better (and actually not mentioned in the Mashable article’s top ten mobile platforms) but I may need to upgrade to the paid version to be able too look at the code. Here is a link to their 14-day demo which had more up to date graphics than AppMakr and was more responsive than Appypie.

As usual I didn’t get nearly as far as I thought on the next version of the tree care cost calculator app that I’ve been contributing to. I did find a nice slider feature that would be good for the user who is trying to estimate the height of the tree they are interested in.

Here is the screen shot.

Tree Care Calculator-Initial

I’m still exploring other ways but I’ll let you know if I upgrade Codiqa or find a tool that makes it easy to look at the underlying application code.

The best part about a frustrating coding day is you look back and see that those were intense learning days. I look forward to that distance and reflection. The truth is I’m deep into mobile application development but there are a lot of sharp rocks and shallows in these new waters. And they all seem to be converging on me today!

Feel free to question us if you get stuck. Helping someone else get unstuck can magically do the same for you.

- Matt

Understanding the Software Development Life Cycle

Understanding what the software development life cycle is, will help you manage that cycle better. And it helps you see where your code fits in the larger picture.

What is a software development life cycle? It is nothing more then a timeline for a given project, dividing up a larger project into smaller steps, frequently called phases.

Easy right! Well you know how it goes with software dev, the simplicity pretty much ends there. The project will theoretically help manage costs, meet deadlines and outline testing and fixing bugs after the fact.

Why is it important?

On large projects there will be a separate maintenance life cycle for the software. For example, Microsoft XP which has had a very long software maintenance schedule.

The point is managing the development life-cycle help bring code to life and make sure that your clients or bosses, who may not be tech savvy understand where the budget went and what it got.

What the phases of a software life-cycle? Glad you asked. The most common and intutive software life-cycle is called Waterfall. It has the following steps.

Stage 1: Planning and Requirement Analysis
Stage 2: Defining Requirements
Stage 3: Designing the product architecture
Stage 4: Building or Developing the Product
Stage 5: Testing the Product
Stage 6: Deployment in the Market and Maintenance

We will get into more in-depth of some of these tactics but begin to familiarize with them while also understanding that real work software processes bleed all over these steps.

Here is my definition of these stages.

Planning and Requirements Analysis – This is really about the software owner looking at a business process and deciding that the software, website, mobile application should be required to solve this business process better, more quickly or more cheaply than currently done.

Defining Requirements – Once you identify the requirements, this is the step where it’s explained in detail how the software will be required to work to deliver that solution identified in planning.

Designing the product architecture – Understanding this step helps by understanding the end product or deliverable that the software team delivers which si some sort of basic code or visual representation of how the software will work. For web development it’s frequently a wire frame or series of templates that given the layout of the website for example.

Building or Developing the Product – Or the only step your client cares about. Also mi9ght be the only step that your client or boss is truly aware of. This is the fun part too, the coding and piecing together the different pieces of code into a testable program.

Testing the Product – Stakeholders test out the program and see if it works, what needs to be altered, what is good. Ideally the target user base also gets to test it but while very important it may not be to clients.

Deployment in the Market and Maintenance – Once tested and approved, this is the stage where a design skin might be used to help the overall interface, documentation like Quickstart Guides and Tutorials, is finished and included and it becomes a full-fledged software package ready to be shipped out to the world.

Is this type of software life cycle the final word. Not by a long shot. For example, with small business web development for example and projects like that, Stage 1 and Stage 5 are non-existent as a rule. For a government project, this list probably has several sub-topics addressing the lifecycle. But this list is a good primer.

Development Life Cycle Resources

That’s right you need the tools. So you how to learn more what are the resources for building a software development life-cycle. There is also detailed analysis of common models such as,

  • Waterfall
  • Iterative
  • Agile

There is free tutorial called the SDLC Quick Guide. SDLC is the acronym for software development life cycle.

Lots of great information including the phases which I use mostly.

So what tools can you use to create a software process for your team?

There is good ole fashioned Excel which works well for accounting software life-cycle because stakeholders feel comfortable with Excel and many of the functions that accounting software will use already exist in Excel.

I love Excel for managing software cycles because when you manipulate data you see what happens with e data right before your eyes. This helps with learning and give what you are doing, a feel if you will. The dashboard templates also allow a project manager to create a Visual Development with zero coding knowledge or macro creation.

For web development software, mind-mapping software such as FreeMind and the paid Xmind can double as a flow chart manager for small teams of five or under and also provide visual representations to stakeholders especially when the planning of requirements and the requirements phase are all a big lump phase of their own. Maintaining a visual map fo the project can help create cohesiveness.

Using the Google Documents software within Google Apps and also Basecamp can help tie given tasks and topics to a given stage.

Continue Reading

Gender Breakdowns of the Silicon Valley

It’s pretty obvious to most people that computer programmer, seems to have a male bias. Is this natural? The first programmer in history, Ada Lovelace was a woman and the inventor of the modern computer compiler also invented by a woman. The perception has changed to a male-dominated once and it’s flat out wrong.

The New Yorker’s article “Pandora and the White Whale” reports on the disparity of gender and minorities in Silicon Valley companies.

One organization that I think has the best idea to solve this, emphasizes computer science education in elementary school. Teach computer science in high school seems like a good idea but gender roles are already very established by then and one thing I wanted to add, people think computer programming is hard by then. wants to introduce computer programming in elementary school before it’s a thing that boys do or a thing that math-geeks do.  I also think it should be taught before the perception becomes that it is hard to do. See, if we start taking an early approach that focuses on visual methods as well as mathematical models, which is the stereotype of how to learn software development, the perception that programming is for everyone and not this hard-to-learn, esoteric art,  will take root.

The New York Times articles “Reading, Writing, Arithmetic and Lately, Coding”   goes more into this idea and what does.

We all learn languages and that’s what programming is. If I knew that when I was 8 years old, I would never have waited so long thinking it was not my thing or too hard when it really isn’t on the basic level.  Mastery of development is another thing but that’s true of any discipline.









Coding for WordPress

WordPress (WP) coding seems haphazard especially with plug-in injecting code and templates adding complexity to the mix if unique development standards are used. However, there is a logic to WordPress (WP) coding but the standards are pretty simple. When coding themes in WP, play nice with other developers by commenting on your work, adheres to the basic practices, and you can build on what other programmers have started.

The first step is to learn the most popular standards, those commonly held by a vast majority of web developers while giving an insight or two into less common areas of WP you may used. It’s in the corners of the WP ecosystem that educated guessing sometimes needs to replace looking for a strict coding standard to follow.

I popped the hood on my template code recently and saw that code was pretty sloppy, partly from weird plug-in code and partly from pasting from other custom templates to create my template. Now a PHP parser will read through whitespace easily enough and doesn’t care too much if your code is sloppy but it may reflect poorly on your work for your human audience ie other developers.

In fixing this problem we know that properly formatted code is easier to maintain especially a year or two down the road. Deciphering code from another developer also makes the job easier and by doing it yourself hopefully that good programming karma helps you when you look at a foreign theme.

Line breaks and white space seem to be hampering the search engine findability of this website, as the content doesn’t start until line 472! So we started by formatting the code to best practices. Besides removing white space, we separated statements by a line break, place items on their lines, inserted brackets to define IF and other types of statements and it looks much better.

Continue Reading

What HTML 5 Adds to HTML 4

If you want to learn HTML 5, you’ve come to the right place. The new tags outlined in HTML 5 support several nice developers upgrades. It is a very efficient way to program cross-platform mobile phone applications.

Chances are that you’re confused about the differences between HTML 4 and HTML 5. This article outlines the three things I really like about the new standards.

Three big improvements to HTML 5 I’ve found are,

1. Tags to describe audio and video tags as well as more control over browser side cache and mobile phone usability.

  • article
  • aside
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • mark
  • nav
  • section
  • time

When looking through a WordPress site, you will see that the new types of tags are built right into the dashboard of the posting page. When you choose, “Aside” for example it creates an aside tag for that within the HTML.

These features are designed to make it easier to handle multimedia and graphical content on the web without plugins and API’s.

2.  HTML 5 tags seem designed to overcome the blandness of tags, for lack of the better word, although it seems to take a step back from full CSS control of the template.  It sort of restores some of the on-page pre-CSS in programming philosophy more than practice. Still I think its a pretty cool shift back given the mind mapping limitations of CSS. For many of us mere mortals it’s hard to imagine the look when playing with the CSS so it seems like HTML helps balance that back, in my opinion.

Here is a robust HTML5/CSS 3 Tutorial by MSVirtual Academcy

3. The feature set of HTML 5 is perfectly designed for smart-phone application development since it accounts for smaller screen devices in the new tags.  Those are the three big benefits I see in HTML 5 over HTML 4. What about you?

Learning Python – Four Kickass Resources

If you are learning Python, here are four kick ass resources that are awesome and understandable. Python is one of the common programming language taught in introduction to computer science classes. When I first started, that was the software language I learned first. And I found it easy to remember and clear to program, mainly because the operations are simple and there are very few commands.

Python is considered the easiest first programming language to learn. It’s a great way to build search engines, games and web apps while also having fun. That ‘s what programming is all about, isn’t it?

So here four great resources you can learn Python.

Learning Python – Four Kickass Resources

A tool I’ve been using lately to practice my coding is a web-based Python syntax generator.
It starts with the basics such as the PRINT function and learning about variables for working with data.

If you get stuck, going to forums and asking questions is a great way to starts building knowledge. And making friends with other programmers. You’ll probably want to start by searching for a topic that addresses your issue. If you don’t find what you are looking for, making a new post that and clearly and concisely explain the issue.

There is a Python learning forum on Reddit that I use.

On your learning Python odyssey, the acronym OOP or object-oriented programming will come up. Python is an easy to learn object-oriented programming language and serves as a gateway to other languages like C++ and Java.

Object oriented programming helps you create functions with data in addition to defining the data structures itself. This just helps with changes down the road as you define new objects within the code base without changing other objects.

If you’d like a free python learning class then the one I had fun with was the Udacity intro to Computer Science class. It offers video lectures, a built in code generator for practicing and a forum of fellow programmers. Everything is real approachable and light-hearted also. The class project is building your own search engine.

One of the best places for practicing is Learning Python the Hard Way which is deceptive because its the discipline not necessarily the technique that’s hard. You benefit by learning attention to detail and learning the Python language through repetition.

So I hope you enjoy these four Python resources as much as I do.

How to choose an online university programming department

Focusing on the tools provided by an online university programming department will get you the most value for your dollar. The choices for an institution break down to,

  • university and four year college
  • for-profit colleges
  • community college
  • correspondence and smaller vocational training

University programming departments can bog you down in beginner courses but are the best programs for learning fundamental theory of software programming.

For profit and online colleges may balance theory with helping you find a job as a junior programmer. However for-profits like Devry have been successfully sued for exaggerating job prospects and even had to pay a fine as restitution. That said I still have the opinion that for-profits are more motivated i n helping you find a job then Big State University!

Community colleges programs such as game software development or an associate degree in web development is an excellent value for the cost. And don’t be surprised if you’re making more than your friends who just got into debt for $200,000 at a four year college.

27% of associates degree majors make more than their four year counterparts and in web site design and computer science programs, that’s were a lot of those high salaries come from.

Correspondence, vocational training and webinars, you have to do more due diligence on quality. You know Stanford computer engineering is a high quality program, but may not be sure about Joe Blow’s Make Millions with Software Development program.

What programs to learn?

What style of software programs and methodology will be a consideration. Learning web development, you’ll want a program that gets you into HTML5 and CSS3 early, as this is the basis for further study into mobile application programming

Junior programming gigs at companies like IBM, Google or Microsoft you may want to generalize more by learning the basics  of both Microsoft and Linux environments and studying coding with security in mind. Many CEO’s are taking this way more seriously now that they get can get fired for major security branches such as the recent firing of Target’s top boss in response to the credit card breach during the 2013 holiday season.

If a government programming job is what you’re after then you’ll likely want a Microsoft shop with a lot of training on SQL query interfaces and Windows 8 development and how that ties into older legacy systems.

What is the cheapest way to get a computer science degree?

If you are like most people, you don’t have a firm goal in mind! To me taking one class, that you pay for, will be the best step. If you take the class and don’t finish or don’t participate well, you likely aren’t ready for a full time schedule.

Taking a live programming class at a community college or local computer training center might hold you more accountable. Just because you work online doesn’t mean you can’t go somewhere else for class, especially if you have children or a slow internet connection!

A software programming school that matches your learning style will make it more likely you see-through and finish.

That is the best education investment of all.

Continue Reading