Day 6 - 30 Day Learning Challeng

Continuing with AngularJS at CodeSchool.  I sometimes get answers "wrong" because I added or am missing an extra semicolon.  This can be annoying and frustrating and it would be good if the "computer" would tell me visually (like some editors do).  These are the kinds of things that can frustrate students and use up time and cognitive load better spent on other tasks.

Here is an example that did not "pass" as correct:
The following code did not "pass":
  app.controller('GalleryController', function(){
    this.current = 0;
    this.setCurrent = function(imageNumber){
      this.current = imageNumber || 0;
    };
  });

Yet by simply adding a semi-colon it did pass (see below):
  app.controller('GalleryController', function(){
    this.current = 0;
    this.setCurrent = function(imageNumber){
      this.current = imageNumber || 0;
    };
  });

Now add to this from what I have read on recommendations "You shouldn’t put a semicolon after a closing curly bracket"

Of course any automated learning program that has to do checks will have issues as there is usually more than one right way to do things.  Now, it seems Code School is looking for specific formats and commands which limits the possible "right" answers.   But since there can be more than one way to do things it would be better to simply pass a set of tests and if they pass the tests you have solved the problem.  That said in the cases I am seeing for Angular the "end result" is exactly the same, but they are trying to teach you a specific way to code so I can see why they check the way they do.

I have also been thinking if Domain Specific Objects/Languages might be better approach for learning environments and also for providing ways for non-experts to "program" as part of expressing themselves and/or playing with ideas.  But right now that is just an idea germinating lets see where it leads.

Cheers,
Stephen

Day 5 - 30 Day Learning Challenge

Try Blockly!!!  I tried it when it first came out and thought well, it has some potential but needs work.  Well they did a lot of work since I last looked at it.

As far as a tool for allowing students to learn about programming using tile scripts while providing a way to switch to Javascript (and I believe also Python, but need to double check that).

I haven't tried building projects with it yet, only played the games and watched some videos.  I recommend the following two videos:

First for educators check out: 

CS4HS Blockly with Ellen Spertus

Second for a great tutorial on how to create your own blocks:

The second is rather well done and the type of supporting documentation that students and teachers need.

Plus it also does Logo see the Turtle example and it can be run Offline!!!

Cheers,

Stephen

P.S. I am having too much fun (mostly with Blockly and thinking about learning/teaching/doing programming.  Oh I also made some more progress at Code School

Day 4 - 30 Day Learning Challenge

AngularJS vs Etoys 

(as a tool for younger people to work very deeply by programming and building stuff)

First this is not a fair comparison, as Etoys was designed for this purpose and Angularjs was not.  Yet I understand the desire to have a tool to that can be used for exploring ideas, communicating and expressing themselves.  I also understand the request to have tool that can be used in a browser.

First I will start with AngularJS’s advantages:

1. It has the support of Google
2. There is a large community of people who use AngularJS and an even larger community who know JavaScript
3. There are many resources on the Web for learning about AngularJS and very good support groups willing to help beginners
4. There are lots of code examples one can learn from and play with on Plunker and JSfiddle.

The challenges of AngularJS:

1. You have to spend a lot of time learning about AngularJS and how to do things in AngularJS which takes away from the time spent  on learning/expressing/exploring.
2. It is built around the Web in particular the DOM.  Ie: you are restricted to what the DOM can do.  Okay not completely true you can blow a hole in the DOM and using SVG or Canvas but the libraries available to do things here (think D3 et al) are very specific and require high learning curves.
3. While the learning curve when compared to other Web Frameworks is not quite as steep, there is a steep learning curve for students especially if they do not have a lot of programming experience.
4. It is a text based language (as opposed to a tile based one) which means syntactical errors are easy to make and take time and cognitive load to understand and correct.

The advantages of Etoys:

1. It was designed for construction and learning by students
2. It supports tile based scripting and lets you switch to text based.
3. It lets you directly manipulate objects and extend their functionality.
4. The community to support learners is responsive and helpful.
5. There are some good educational resources for students and teachers to explore.

The challenges of Etoys:

1. There is no large organization or funding supporting Etoys.
2. The community while supportive and helpful is not large.
3. Etoys currently does not run in browsers or on tablet or phones (Yes, I know it can and there are projects which show its possible, but there is no “supported” fully functional and fast enough version that does so for all “modern” browsers).
4. Etoys is not as popular as AngularJS
5. JavaScript is more popular than Squeak (and thus has a larger base of people who could potentially support teachers and students).

So all this aside perhaps the best tests are how easy is it to:

1. For a teacher to build an educational tool for students
2. For a student to create a form of expression
3. For a student to explore certain ideas

Now to quote Seymour Papert “It’s hard to think about thinking without thinking about something.”  So I will try to think about some things and how they could be done in AngularJS and Etoys (and perhaps some other ways of doing things).  So at some point I will try and think about "something" more concrete.

Ideas and suggestions welcome for “what to build”.

Cheers,

Stephen

P.S. Also made some progress at Code School but poor internet connectivity has limited my time on the computer and increased the time spent with family :)

Day 3 - 30 Day Challenge

Well coding while driving is not easy and since we spent most of the day driving my coding was limited to a few minutes just before I crashed at the hotel.

I did think about coding though while driving which was challenging.  It forced me to a higher level rather than specific code, I thought about the general problem and how I would approach it.  My goal is to take a number of concrete examples of data sources (csv and JSON for now) and visualizations (table and graph) and "connect" those together.  Then see what general patterns I can determine/code from that.  I did manage a brief period to figure out how to walk through a javascript object to get the Keys I would need to tie a JSON feed to a visualization.  My thought is to inspect the data to determine the fields/keys that are available to connect to either a table (will look at using smart table for first attempt, since some folks I know are using that) and also either HighCharts and/or D3.

I plan on creating the data structures, directives, and controllers to allow me to connect the data source to a visualization.  Then the next step after that will be to think about and perhaps try to implement some simple user interfaces that allow a lively like drag and drop connection between the data-source and visualizations.

Cheers,
Stephen

Day 2 - 30 Day Challenge

I completed lesson 3 from Shaping Up With Angularjs.

Since we will be driving to Florida over the next two days I will be thinking about code rather than writing it.  I plan to think about how I can implement something like the lively demo using Angular.  In particular how to "connect" a data source to a visualization and allow for converter code that is all in one place.

Day 1 - 30 Day Challenge

Day 1: Learning AngularJS (vs Etoys)

So I have decided as I learn AngularJS to compare it to Etoys.  Admittedly not a fair comparison as both server different purposes, but hey its my learning journey and I will go where my strange mind and interests take me (I have found this path mostly useful and a lot of fun).

I am Shaping up with Angular.js from Code School.  I completed the first two levels.

So today I learned about:

• Modules
• Controllers
• some directives
• ng-repeat
• ng-show
• ng-hide
• ng-src
• Filters (uppercase, lowercase, currency, date, etc)
• and some things about Bootstrap

The examples used in the course center around displaying a set of product data on the web.

I found myself thinking about how you do things in AngularJS vs how I would do it in Etoys.  Why you may ask would I want to compare two very different things?  Well while they are different at a very high level they are both tools for expressing ideas and both use MVC (Model View Controller).  Now when I say MVC I am not talking about the "modern" definition and use as found in various web frameworks such as AngularJS etc, but in the original definition from Trygve Reenskaug:

"The essential purpose of MVC is to bridge the gap between the human user's mental model and the digital model that exists in the computer." (see here)

Also I feel by trying to compare two very different approaches and trying to get to the "essense" of what they do and how they go about it I may actually gain some slightly deeper understanding.

I actually spent some time trying to build "directives" in Etoys and and while I created a "toUpperCase directive" and mapped a set of data (in a Holder) to a "Form",  it didn't feel right.  

I then recalled Dan Ingalls. The Live Web - Drag 'n Drop in the Cloud (video, JS CONF USA 2012) talk and thought that using connectors and converts would be a better approach. Basically I really like the idea of "connecting to a data source" then writing a converter to massage the data into a format that can be received by a visualization tool (table, list, graph, etc).

Cheers,
Stephen

The 30 Day Learning Challenge

“I believe that we learn by practice. Whether it means to learn to dance by practicing dancing or to learn to live by practicing living, the principles are the same. In each, it is the performance of a dedicated precise set of acts, physical or intellectual, from which comes shape of achievement, a sense of one's being, a satisfaction of spirit. One becomes, in some area, an athlete of God. Practice means to perform, over and over again in the face of all obstacles, some act of vision, of faith, of desire. Practice is a means of inviting the perfection desired.”
― Martha Graham

Sadly I have not been able to spend much time writing code, which I really enjoy.  I am working with people who code, reading their code, specifying requirements and on rare occasions doing code walk throughs.  

So I have decided to take it upon myself to "practice" coding everyday for the next 30 days.  My initial thoughts were to practice coding in EtoysJS or  lively-web and perhaps I will get there at some point.  But the pressures of work push me towards AngularJS at the moment so I will start there. That said I also intend to use this not just to practice programming but to explore other topics of interest such as how to teach programming.

“What I have achieved by industry and practice, anyone else with tolerable natural gift and ability can also achieve.”
― Johann Sebastian Bach

“For the things we have to learn before we can do them, we learn by doing them.”
― Aristotle, The Nicomachean Ethics