Tuesday, November 25, 2014

Installing Jetbrains' Webstorm on Ubuntu 14.04

Continuing on with the setup of my system, I thought I would go ahead and install Jetbrains' Webstorm and give it a go as an IDE given they have Meteor as a "first-class citizen." Here is what I did:

If you do not have a JDK installed, install Open JDK 7 from Ubuntu Software Center.

From https://www.jetbrains.com/webstorm/download/ get the latest 
In the directory of the download unpack the WebStorm-*.tar.gz file using the following command:
tar xfz WebStorm-*.tar.gz
Run WebStorm.sh from the bin subdirectory.

If you want you can create a Launcher on your Desktop via gnome-panel:
gnome-desktop-item-edit ~/Desktop/ --create-new
Then, for the name something like Webstorm.  :-)
For the Command text box browse to the WebStorm.sh file in the bin folder and select it as the command. 

Also, you can change the icon that is displayed on the desktop by selecting the default icon and then browsing to the Webstorm/bin folder and selecting the webide.png file. Finally, select the OK button and you should be good to go.

Saturday, November 22, 2014

Ubuntu Linux 14.04, Heroku PostgreSQL, and getting production data to your local DB

I just completed a clean upgrade (meaning that I did a fresh install)  from Ubuntu Linux 12.04 to the new long term support version of 14.04. Of course that means that my develope environment needed to be setup on the system. Database servers, code bases, etc. I wanted a backup of my Heroku PostgreSQL databases to restore to my local database. Since I literally just went through the process, I thought it best to record the steps:

From the command prompt:
sudo wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Then, after a successful install from the prompt:
heroku login
Validate your account.

Then do the following to create a dump from which to restore locally:
heroku pgbackups --app herokuAppNameHere

Now get the URL of the dump
heroku pgbackups:url --app herokuAppNameHere

Browse to the URL via a Ctrl+Click on the link or copy the link into a web browser. Once you have the file, change into the folder with the dump file via a cd folderNameHere.

From the command prompt:
pg_restore --verbose --clean --no-acl --no-owner -h localhost -U dbAccountHere -d dbNameHere dumpFileName.dump

If all went well you should have a local copy of your production data from Heroku.

Friday, October 24, 2014

A Review of An Introduction to Flask

Given that I am new to Flask, I found An Introduction to Flask a great initiation to the various aspects of this python based microframework. The videos, which as almost entirely code based demonstrations,  provide a format where you can stop and start the content to investigate the topic at hand as well as replay the productions to review the content at one’s own pace.

What I do below is to provide a video by video review with each topical area.

Introduction - Welcome and Set Up
As the title of the section states, this is where you are given a basic overview of how to setup your environment for the course. For me, I desired to get the latest stable python install (as of this review) which is python3.4.2 on my Ubuntu 12.04 64bit system. Instead of building from source I grabbed a PPA thinking all would be well. Unfortunately, that did not work correctly and I ended up building the latest from source. Of note was when I realized that I had a problem with the configuration I submitted an issue on the course github site. Within a few hours Miguel responded and worked with me to discover the problem and to correct it. You can see the submission and follow the discussion at https://github.com/miguelgrinberg/oreilly-intro-to-flask-video/issues/2. That is great customer service!
Hello, Flask!
In A Simple "Hello World" Application, this lesson tests that your setup from the previous video is correct.
The Introduction to Template videos take you through the use of Jinja2 Templates and Flask-Bootstrap as well as the creation of Custom Error Pages and Page Links. For me, this video not only provided a quick and understandable overview, it was the springboard for looking into each one of these technologies.

Web Forms
In Working with Web Forms, the video provides an introduction to HTTP Request Methods GET and POST and their basic uses. A basic form with a textbox and submit button and the posting of the text is discussed.
With the Form Management and Validation with Flask-WTF video, Flask-WTF is installed followed by instruction on its use with basic validation as well as basic protection against CSRF (cross site request forgeries) .
Next, the Rendering Forms with Flask-Bootstrap lesson explains how to take advantage of bootstrap when styling forms.
The final Web Forms video is File Uploads which, as the name implies, is a brief overview of using Flask to validate a filename and format and then to upload that validated file.

Flask In Depth
The Understanding Contexts video detailed the session context variable with an example application that counts number of visits.
Request Dispatching - Flask's URL map is shown and the handling of static files is introduced while covering the URL map for them.
Request Hooks - The before and after request hooks are discussed and demonstrated with an improved application that counts visits across multiple pages.
Responses - Several routes are shown for many different types of responses Flask supports, including HTML, text, XML and JSON. Responses that send cookies to the client are also demonstrated.
In Using Flask-SQLAlchemy, you will see the use of this extension that is a wrapper for the SQLAlchemy database ORM. Here you see an improved application that greets users by name and remembers their names via a SQLite3 database.

User Logins
The Password Security lecture shows the database user model expanded to support password hashing with best practices.
[pip install flask-login]
Next, the Using Flask-Login video shows how the app from the previous video is expanded to support user registration from the console, and login and logout from the web browser.
Scalable Application Structure
With in the Scalable Application Structure video there is a discussion of single-script application limitations. The previous login application is refactored into a multi-file structure that is more appropriate to medium and large applications by an demonstrating an example application structure using the concept of blueprints.
The Writing Unit Tests & Code Coverage lecture provides a demonstration of unit testing best practices in flask. Unit tests for the login application are shown, along with a runner script for them. Use of a code coverage tool is demonstrated as well.
In End-to-end testing with the Flask Test Client, that takes the place of a web browser, the test suite for the login application is expanded with route tests that use the Flask test client.
In the Running in Production Mode video a discussion of debugging being turned off and the need for error notification is presented. Here, the login application is modified to send an email to the administrators when a crash occurs in production mode.
In Deploying to Heroku, a demo is provided that shows the weather application from the templates section being deployed to Heroku.
The Deploying to a Linux Server shows a live demonstration using an Ubuntu virtual machine and a deployment script that sets up nginx and gunicorn as web servers.

In short, I recomend this video series to anyone interested in getting an introductory look at Flask.

Thursday, September 18, 2014

Meteor for Mobile

I was watching the Meteor for Mobile -- August Devshop SF I decided to do a quick dive.

From the terminal in my sandbox app I typed the following:
$ /meteor/m2 meteor add-platform android

Then after the install:
$ /meteor/m2 run android

The end result was the following:

No Java SDK to install...no simulation software...just pure JavaScript in Meteor!

Wednesday, September 10, 2014

Getting Silverlight on Firefox running on Ubuntu Linux 12.04

As a Time Warner customer I wanted to watch some programming on my desktop that uses Ubuntu 12.04 as the operating system. The steps below install a pluggin for the Firefox browser. Here is what I did. From the terminal (Ctrl+Alt+T):

sudo add-apt-repository ppa:pipelight/stable
sudo apt-get update
sudo apt-get install pipelight

Then, start Firefox and type about:plugins in the address bar and hit enter. Pipelight will install when you first open the browser. After the installation is completed you should see "Silverlight" in your plugin list and you are ready to go.

Friday, August 29, 2014

A Plunk, AngularJS, and What's Your Worldview?

Check out my initial go at AngularJS on Plunker. I recently read the booklet, What's Your Worldview?: An Interactive Approach to Life's Big Questions by James N. Anderson. What is my what? Everyone has a worldview. It may not be clear just what that perspective may be.

The book is structured in a "Choose Your Own Adventure" style where the reader can move to certain sections based on an answer to a question. This page takes you quickly through those questions and answers.

My thinking was that a single-page app would suit this style best. Enjoy!

Thursday, August 28, 2014

Example Custom Jasmine Matcher

Was needing to do a comparison of array items and the order was not important. Creating a custom Jasmine matcher made the test creation more effective.
Here is the JSFiddle of the code:

Wednesday, July 30, 2014

Review for Fluent Conference 2014 Complete Video Compilation

With almost 49 hours of video instruction, there is bound to be something for any software developer to profit from the purchase of the Fluent 2014 Conference. Within my review, I will first review the keynotes sessions and then a small sampling of the many tutorial offerings.

Unlike many developer conferences the keynotes were a pleasant surprise in that they were not the typical topical overviews. For example in the JavaScript: Taking both the High and the Low Roads, Mozilla’s Brendan Eich gives a succinct technical discussion about ES6, ES7, as well as how JS is moving forward with gaming demos demonstrating frames per second speed improvements.

In Reading, Writing , Arithmetic... and Javascript? - Using JavaScript and ProcessingJS Pamela Fox from Khan Academy provides stats from their younger uses on the potential of using Javascript as a teaching tool for not only programming but also various disciplines.

Virtual Machines, JavaScript and Assembler with Scott Hanselman from Microsoft was a humorous presentation where he subtly highlighted Azure’s strength as a VM enabler as well as showing, how ever so briefly, that Visual Studio now works with Chrome and Mozilla developer tools. Incidentally, JavaScript was termed the Assembler of the Internet.

The Humble Border-Radius - The CSS border-radius is an unsung hero according to Lea Verou from Independent. Her demo shows the CSS code in which elliptical curves, shapes , animations, as well as text content within the visual elements are produced. Finally, future derivations of the border-radius is discussed.

Next was Speed, Performance, and Human Perception by Ilya Grigorik of Google. While there is much merited concern for milliseconds and frames per seconds, engineers need to be aware of the user that is interacting with their application. Developers should consider what is the task that the user is trying to achieve? What are the performance metrics necessary to fulfill that task? Then, what do we need to do to connect the two.

Then, Keynote with Paul Irish - Delivering the Goods. Paul reviews various stats as well as the lifecycle of a web page request and response to gain a better performance concerning page load. He also examines the various protocols involved in the HTTP request and response cycles. In short, eliminate render-blocking JavaScript, minimize render-blocking CSS, and serve the content in the initial HTML (no redirects).

In Beyond Pushing “Play”: Interactive, Data-driven Videos for a Web-based World Susan McGregor from Columbia University discusses the power of storytelling on the web via video. She also highlighted the need for a new interactive experience with video with the new DataDocs platform.

The Goodness of JavaScript by Aaron Frost and Dave Geddes. In a humorous presentation Frost and Geddes share JavaScript goodness such as compare operators, the latest tools such as Node Webkit,  PLV8 (embedding Javascript in PostGreSQL), and ECMAScript 6 as well as their new tool called TrollCount that curbs trolling on the interwebs. In short, the goodness in JavaScript is not the language, but its you.

The final keynote was with Yehuda Katz and Tom Dale from EmberJS. Yehuda and Dale discuss the distinctives between a framework and a toolkit for building your own framework. In this talk they defend frameworks. In short, a framework should encourage good choices while allowing the developer the freedom to do what they want, which may mean the wrong thing.

The next set of video presentations that I jumped into were the tutorials.  I do like how O’Reilly presents the presentations with the speaker in a small window to the left or right of your view and what they are showing via a slide presentation in a large window to the side of the speaker.

The first lesson that I viewed was Mark Bates and his presentation of on AngularJS. He details the advantages of Angular in comparison to both BackboneJS and EmberJS. Angular is a more light-weight framework as well as it’s possesses a larger mindshare as more developers learn AngularJS. Also there is a comparison of the basic models of each of the above frameworks that results in Bates determining that between Angular, Backbone, and Ember, Angular is the better choice. Then a review of downloading Angular is provided. Then Bates gets into Angular controllers, templates, scope, routing, directives, events, and testing. What is nice is that there are few slides with a great deal of live coding. Go here to get the code as well as instructions on how to setup your system to follow along with the presentation.: https://github.com/markbates/fluent-2014.

Next, I viewed the JavaScript Smackdown! Choosing Your MVC between Angular, Ember, and Backbone presentation by Brian Holt of reddit. He first demos a Backbone app showing both the model and the view. Following that Holt constructs a basic Ember app. Then, he jumps into Angular by showing the basic elements of the view, model, and controller. Finally, Holt provides what he sees as the strengths of each platform and when to use that framework.

After that I watched the Meteor: A Full-stack JavaScript Framework for Modern App Development by Matt DeBergalis of Meteor. In short, DeBergalis shows the power of Meteor has a creates a fully functioning app in 20 minutes.

Finally, I watched Functional Programming Patterns for the Non-Mathematician by Brian Lonsdorf of loop/recur. Lonsdorf provides rapid review of the Lenses, Null Checker, Error Handling, Future Values, Nesting, Multiple Null Args, Accumulation, and Combinators patterns. He then provides code examples of the Lenses and Null Checker patterns. Finally, Lonsdorf provides and example of Monads in code.

In conclusion, not only is the video and audio quality great but the content is as well. Given the various topics and the skill of the presenters, it is highly probable that there is something beneficial for you from the Fluent 2014 Conference.

Thursday, June 05, 2014

Ubuntu, Icons in the Panel, and the dconf-editor.

Sometimes, after kernal updates in Ubuntu the Dropbox icon is removed from the panel. For me, it is nice to see the cycling symbol on the icon as files and folders are synced. In any event, here is what I found to get it back.

From the terminal:
$ sudo apt-get install dconf-tools
$ dconf-editor

Then in the dconf-editor dialog:
desktop -> unity -> panel

From there, add an entry 'Dropbox' into the systray-whitelist value field.

Mine looks like: ['JavaEmbeddedFrame', 'Wine', 'Update-notifier','Dropbox']

Finally, log off and back on or reboot.

Monday, May 26, 2014

Head First Design Patterns C# Code Migrated to VS Express Web 2013

I recently moved my business website from shared hosting to github pages. With that move I did not bring the historic content as I understood that it was not needed as well as no longer useful. What I omitted was a C# .Net 1.0 project download that I created for the Head First Design Patterns book published by O’Reilly. I created this project back in 2005 when the book was newly released to get my head around the design patterns. Using NUnit I created tests to run as I was constructing the objects per the book.
Now to the migration. First I took the project and loaded it into Visual Studio Express 2013 Web. The app started a migration of the projects within the main solution. Following the migration I noted a few warnings due to some obsolete syntax. Primarily, I was referencing an app.config file with MVC projects that was causing this error:
system.configuration.configurationsettings.appsettings' is obsolete: 'this method is obsolete, it has been replaced by system.configuration!system.configuration.configurationmanager.appsettings'.
Given that I am no longer using a config file the code was updated accordingly.
The main effort was changing the unit tests from the Nunit framework to the test framework in Visual Studio Express 2013 Web edition. What was changed was the method attributes for the tests. For example, changing [Test] to [TestMethod] and [Setup] to [TestInitialize]. Going to this site helped with the effort: http://xunit.codeplex.com/wikipage?title=Comparisons
The conclusion is here.

Sunday, April 27, 2014

Installing Meteor on Ubuntu 14.04 (a.k.a Trusty Tahr).

I have an old Dell Inspiron E1705 laptop on which I decided to try the latest long term support version of the Ubuntu Desktop 14.04, or also known in the Ubuntu circles as, Trusty Tahr. Here are the steps I took to get the latest version of Meteor which as of this post is Release

First, I did the usual update via:
$ sudo apt-get update

Then I installed Curl:
sudo apt-get install curl

After that I installed Meteor:
$ curl https://install.meteor.com | sh

As per the Discover Meteor book site,
Will need to ensure node and git are installed on your machine. Install them in the standard way for your OS, or try these links:

$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs

For github I found the following:

Here the following commands invoked from the terminal:
$ sudo apt-get install git-core

Then I installed the Meteorite Node Packaged Module:
$ npm install -g meteorite

Finally, I cloned my github repo of the Meteor app that I am currently coding:
and started that app:
$ mrt –settings settings.json


Tuesday, April 08, 2014

My Meteor App Upgrade from 0.7.2 to 0.8

As a matter of hoping to help someone who is also doing the upgrade of their Meteor app from .72 to .8 I have recorded my experience. After starting my app and getting the notification that 0.8 is available I updated Meteor. After restarting the app, I got the following error:
=> Errors prevented startup:
While building the application:client/views/stuff/stuff_submit.html:6: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...Your request here."/>         </div>     ...                        ^
While building package `accounts-ui-bootstrap-dropdown`:error: no such package: 'spark'login_buttons.html:89: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...n-buttons-padding" />   {{/unless}}                        ^
While building package `iron-router`:error: no such package: 'universal-events'
A quick look around stackoverflow my thinking was to brute force the update concerning iron-router with .8. While this is likely not the preferred method of many, here is what I did:
meteor remove iron-router
rm -rf packages/iron-router
mrt update
mrt add iron-router

After doing that I attempted a restart of the app and got the following error:
While building the application:client/views/stuff/stuff_submit.html:6: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...Your request here."/>         </div>     ...
I changed <textarea name="request" type="text" value="" style="width:50%;" placeholder="Your stuff here.">
<textarea name="request" type="text" value="" style="width:50%;" placeholder="Your stuff here."></textarea>

Then, in the router.js file I changed:
var routeName = this.context.route.name;
var routeName = this.route.name;

In the main.html file I changed:
{{layout}} to {{> layout}}

I then got the following error:
Uncaught Error: Couldn't find a Layout component in the rendered component tree
After looking around and found this at Stackoverflow
and removed the  {{> yield}} from the layout.html file which holds the layout template.

Now, the page will render with the header but where the layout template that used to render correctly, the rest of the page was not rendering.

When adding the {{> yield}} back in the layout.html file, there is an error in /packages/blaze-layout/layout.js file on line 373. This is where the "Couldn't find a Layout component in the rendered component tree" error is thrown. After looking on the updated Discover Meteor book in the Router chapter. The Router.configure has changed from  layout: 'layout' to  layoutTemplate: 'layout'. I also changed the before: function() in the Router.configure to onBeforeAction: function(). Moreover, I changed after:function() to onAfterAction: function as well as commenting out the this.render(page) call. Then, I removed the body tag altogether from the client/main.html file as stated in the router chapter. Now, the layout template was at least rendering correctly but links in the page using the Handlebars pathFor was not forming links properly. Looking at the browser console I noted that I was getting a number of errors:
Exception in Meteor UI: TypeError: Cannot read property 'params' of undefined    at Object.processPathArgs (http://localhost:3000/packages/iron-router.js?a4167ac4d12a73891d8a9b8c57419a347da0ee12:2200:22)    at Object._.extend.pathFor (http://localhost:3000/packages/iron-router.js?a4167ac4d12a73891d8a9b8c57419a347da0ee12:2227:34)    at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2838:23    at Spacebars.call (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:173:18)    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:110:25)    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:114:39)    at HTML.A.href (http://localhost:3000/client/views/stuff/template.stuff_item.js?e15ce9378850d2ce553c8c60647642a543534557:58:30)    at http://localhost:3000/packages/htmljs.js?697b0dd0fbdd1f8984dffa3225121a9b7d0b8609:254:14    at callWithNoYieldsAllowed (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:74:5)    at _.extend._compute (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:212:7)

The fix was to do the following in the stuff_item.html and encouragement.html file: I changed {{pathFor 'encouragementSubmit' this}} to {{pathFor 'encouragementSubmit' params=this}}.

Now all appears to be functioning. I hope that this will be of some help to others!  :-)

Saturday, March 15, 2014

The Moral of this Story: Post Working Code to Your Repo ASAP (a.k.a. I love github)

Last night, lying in bed and ready to go to sleep, I did something that I do not like to start late in the evening. I decided to open my Meteor app and check for any updates that I would need to make. Following that initial move, I just spent the following hour messing with an update to Meteor and authentication with facebook. What was happening was that after I updated the app I attempted to start it up and was getting the following error:

W20140315-08:39:31.394(-4)? (STDERR) TypeError: Cannot call method 'remove' of undefined
W20140315-08:39:31.394(-4)? (STDERR)     at app/server/facebook_login.js:1:71
W20140315-08:39:31.394(-4)? (STDERR)     at app/server/facebook_login.js:11:3
W20140315-08:39:31.395(-4)? (STDERR)     at /home/mark/meteor/m2smgrpdaily/.meteor/local/build/programs/server/boot.js:155:10
W20140315-08:39:31.395(-4)? (STDERR)     at Array.forEach (native)
W20140315-08:39:31.395(-4)? (STDERR)     at Function._.each._.forEach (/home/mark/.meteor/tools/8d9edffd4f/lib/node_modules/underscore/underscore.js:79:11)
W20140315-08:39:31.395(-4)? (STDERR)     at /home/mark/meteor/m2smgrpdaily/.meteor/local/build/programs/server/boot.js:82:5
=> Exited with code: 8

To fix you need to add a smart-package manually:
$meteor add service-configuration
Then change any code with: Accounts.loginServiceConfiguration.remove({}) to ServiceConfiguration.configurations.remove({}). This I did in  /home/mark/meteor/m2smgrpdaily/server/facebook_login.js and was good to go. Without hesitating, I pushed the fix to my github repo.

This Meteor update issue, that was found last night, was found while using my netbook. This morning I opened the app on my desktop and of course found the same thing. To correct it I simply pulled from my github repo, that I updated last night after fixing the code on the netbook, restarted the app, and I was good to go. 

Therefore, push working code to your repo ASAP!