Thursday, March 31, 2016

Code HelloWorld series: Getting started with Alexa Amazon Echo


Best practices and step-by-step notes from a recent Bloc webinar on how to get started and code HelloWorld app aka skill for Amazon Echo Alexa. This blog post provides step-by-step instruction to create a simple app for area code lookup. It covers the best practice and resource recommendations covered in the presentation. 

slides what is Alexa

Presentation slides hello world with Amazon Echo, getting started step by step:

Scroll to the bottom for presentation slides. 

Background info:

Users interact with Amazon Echo by saying Alexa,  blah blah blah  the utterance is the request to be sent to the skill's web server with data and be given a response back. Alexa will voice over the response specified in the <speak></speak>. Alexa also has online, iOS, Android portals, where users can purchase apps called skills, enable and disable skills, and view info cards.

Mark the Alexa project mentor really thinks Amazon Echo is growing in demand and is experiencing a boom in app creation. The device is growing and gaining in market share. That's where developers will want to be. 

Source: Bloc online coding bootcamp webinar on how to develop with Alexa by Henry and Mark

Bloc mentor sample code for Amazon Echo area code lookup app

Notes & Key Steps to Replicate HelloWorld with Amazon Echo Alexa and Lambda Amazon Web Services:

Amazon Echo Alexa Interaction Model Intent Schema screenshot
  • Concept: each app is called a skill that can be enabled or disabled
  • Concept: interacting with the alexa service involves user sending a request and getting a response from Alexa in audio format
  • Step - App idea generation: come up with an original or semi-original app idea for your Alexa project. Alexa has a relatively small growing app store. It's a good time to get started.
  • Step - obtaining and cleaning data: need to find either static or dynamic API data for your app. For example, a list of area codes is a static data set, versus the latest news from NYTimes via its news API is a dynamic data set. For first try, Henry recommends finding data with no copyright attached. He used a JSON converter to convert his data to JSON, which works well with AWS Lambda. 
  • Step - Get your app to work locally: use your local dev environment or use jsbin to ensure that your code can grab and process the data correctly. Then upload as a zip file. Your zip code should have a minimum of three files: your app, data file, and an Amazon specific library file. Can use the boiler plate file for now.
  • Step - Amazon Web Services Lambda: this is a free tier web services that runs on Node.js. It works well with Amazon Echo demo apps, has great out-of-the-box security. Henry recommends this for those familiar with JavaScript. 
  • Step - Build an interaction model: in your Alexa dev portal, access Alexa skill kit for the menu. This is where you can build the interaction model, make configuration changes, test, publish, twig privacy settings. 
    • Concept - testing: 
      • Testing in the Alexa skill kit does not require an Amazon Echo device. You can simulate your app experience by Entering an Utterance which creates an object to be sent to your lambda service for a response. When the response is given, can click the listen button to hear Alexa respond. 
    • Concept - privacy settings: useful for those apps that collect payment information or personal data that is transacted. 
    • Best practice: test a lot, play around a lot to cover all the scenarios of interaction. Get feedback from the Amazon team to be thorough.
  • Step - Publishing Your Alexa app: Code will be reviewed by the Amazon Alexa team. It's a real world professional code review experience for Bloc students. Once submitted, the app will queue up for a review.
Amazon Echo Alexa interaction model

Best practice:

  • It's possible to write Amazon Echo apps in any language such as Ruby and Python, but using JavaScript and JSON data formatmakes it easy to plug-n-play with Amazon Lambda Node.js server written in JavaScript. 
  • Amazon reviewing team consisted of professional developers will review each app and either approve or provide feedback for improvement.
  • Mark: best developers write the least amount of code. Use Amazon Alexa sample apps and sample code when possible. They are vetted. 
  • Resource: Alexa skill sample apps and core concepts page, demo apps

Bloc Online Coding Bootcamp and Mentorship program:

Amazon Echo Alexa programming is not a stand-alone project as of March 2016, but an integrated project block in each of the four famous Bloc tracks including Software Engineering, Full-stack, Rails and Front-end. 

Submitting the app through the Bloc program in June, students will receive a free Echo from the Amazon team. This is a seriously awesome partnership between Bloc and Amazon. May be the future of building an app store ecosystem is to partner with coding bootcamps and the fresh blood they attract. It's a smart way to build a pipeline of developers.

Next steps:

  • Subscribe to Mark's newsletter
  • Further thoughts: use case for complex Alexa skills including in app purchase, role playing games and writing (not realized skills yet).
  • Further thoughts: experiments have been done on Raspberry Pi which can run Amazon Echo Alexa functionalities. Mark thinks this is proof that Amazon Echo development skills are useful and it is growing in demand. Alexa skills should be able to be applied to run on the internet of things in the future. 

Commonly Seen Errors or Caveats:

  • <say-as interpret-as='digits'>415</say-as> will make Alexa say "four one five" instead of "four hundred fifteen". Useful when decoding area codes and phone numbers.

Tuesday, March 22, 2016

Shopify Unite Conference talk: web Accessibility is not boring it is an essential User Experience

Shopify Developer Conference: web accessibility talk. Web accessibility is about more than just accommodating a minority group of audience with special web browsing needs! It's about reading in sunlight (needing strong color contrast), night stand reading mode, on-the-go mobile browsing with audio input, desktop audio dictation and much more.

* By Steven bosworth of the themes team
* Shopify image alt texts, fall back texts are important
* Best practice: label all things in theme though tedious
* Each form field should be properly labeled even if hidden
* Form error messages need clear label that traces back to the right field
* form.error is the shopify errors object
* tables : accessibility helpers understands how the td s are tied together. Challenging on mobile - single column display. Shopify handles this for us. (Css work around, hidden span s that announce the correct data, hidden visually but accessibility engine readable
* Best Practice: User testing reveals hidden accessibility problems.
* Caveat: accessibility engines, may not understand relationship between two div s whose visual relation is obvious
* Color contrast and text: studies found white on yellow is not accessible in sunlight reading mode.
* Best practice: test color contrast while designing and developing
* Resource: Twitter #a11y topic on accessibility
* Resource: color blindness testing and simulation tools available on the web.

Friday, March 18, 2016

Udacity Class Intro to Java Programming walkthrough, review, rating and notes

Intro to Java Programming
(This document is a work in progress. Please excuse its appearance)
  • General comments:
    • Video has occasional interviews of young female coders, role models - cs students from Stanford
  • Lesson 1 - Introduction
    • Tidying Legos : 
      • Example: use lego swap, sorting, rearrangement as example of algorithm
    • Example: calculation of dinner bill and tip is a good example of an algorithm
    • Moving to the First Yellow-Blue Lego
      • Exercise: really helpful exercise writing pseudo code and understanding algorithm
    • Concept: Why is this not a correct algorithm? 01 description is ambiguous?  02 description contains steps that cannot be executed ? 03 procedure does not always terminate
Udacity Introduction to Java Programming
Move to the First Yellow-Blue
Example algorithm that does not terminate

  • Problem set 0:
    • Install BlueJ and look at folder files to find secret codes. Familiarize yourself with your programming environment
  • Objects
    • Concept - coders organize their code into objects
    • Concept - can use objects already written by other people, stand on the should of the giants
    • Concept - two important things to understand about objects: 01 what can an object do? 02 How to make the object do it?
    • Why is OOP so important?
      • Industry standard, job requirement to use object oriented programming
      • Concept - a person is a perfect analogy of an object (computer science): a person has attributes / properties like height weight, and he/she is can do all kinds of things. OOP is intuitive - it is aligned with the way we think 
    • Objects
      • Analogy - objects are like appliances in a big house. Each appliance such as a heater or the washer has some build-in functionalities 
      • Concept - Object = building block of a program, component with some desired functionality. You can ask objects to do work. 
      • Concept - You don't necessarily know how they do that - how they complete each task. 
      • Analogy - We don't know usually know the granular details how a heater works, as long as it heats water
      • Concept - it's important to understand WHAT an object can do, NOT necessarily HOW it does that
  • Lesson Title : Objects demo
    • Exercise: learn to use an existing project, and start a new instance of an object
    • Concept: It's important to not get hung up on how an object does its task exactly to the greatest details.  The amount of codes in each project can be overwhelming. It's important to follow instruction, and ignore the extra details. 
  • Lesson Title: Lesson 2 - Objects - Classes
    • Concept: in Java, class = objects with common behaviors. Example the day class, when you want to use objects in this class, look at its documentations. Example: the string class defines the common behavior of the string objects.
    • Concept: methods = actions that can be done by a class
    • Comments: this is a really good way to think about objects, for those who are new to OOP
  • Lesson Title: Lesson 2 - Drawing Pictures
    • Exercise: playing with interesting codes that can edit and modify pictures
    • Comment: this is a great exercise, showcasing a real-world application of Java, and how powerful it is for image manipulation
  • Lesson Title: Lesson 2 - Variable Names
    • Concept - Use variable to store a value that you need to retrieve later. Every variable has a name. Analogy: parking lot spot, parking structure label

  • Lesson 2 Objects An Exercise on Variable Names
    • Identify the variable names in variable declarations
  • Lesson 2 Objects Variables
    • Concept Variable Type: in Java writes the type before the variable name. Analogy: parking spot for a bike, versus for motorbikes versus for a car. In Java, we have to specify which type of data the variable holds. 
    • Concept Initial Value : when declaring a new variable, always best practice to specify an initial value. 
    • Concept data type double: a number that can have a decimal point. Ignore the curious name. 
    • Commonly seen types: string, double, int, and more
  • Lesson 2 Objects Comments
    • // double slash comments for humans to understand the code better
    • "Comments are for humans (human readers)"
  • Lesson 2 Objects Variable Declarations: The Fine Print
    • Exercises: spot mistakes in variable declaration statements

Wednesday, March 16, 2016

Udacity giving out free Google I/O 2016 tickets and trip to the Silicon Valley

Udacity gives out free Google I/O 2016 tickets (to Chinese followers and students of their WeChat official channel) and all-expense paid tours of Silicon Valley. 

It's not news that Google and Udacity are close. Previously, in 2015 Google I/O, udacity announced its newly minted Udacity Android Nanodegree track promising potential job opportunities of the brightest of graduates with its hiring partners including Google.

And Google not only gave a physical booth and meeting area to Udacity at the event, but also stages for Udacity speakers and the founder - Sebastian. Google even announced the program in the big event's keynote.

Really really wants to work for Google? May be Udacity is the way to go.

Thursday, March 10, 2016

How to startup? OneMonth (YC company) explains how to make an MVP minimum viable product

What is a MVP? The key is to follow the "minimum" part almost religiously! You need to do the absolute minimum and test out your product as soon as possible see if it gains traction. The MVP is for getting the innovators the first group of people who would adopt new products. By OneMonth, famous learn-to-code tutorial learning company, a part of the YCombinator (YC) famous Silicon Valley startup accelerator.

See this famous product adoption curve to see how people pick up new products and how products can growth hack.
Silicon Valley YCombinator Startup knowledge : product adoption curve

Wednesday, March 9, 2016

Learn Java vs .NET internet parody funny video - gems of the internet, war of programming languages

This funny internet parody movie trailer features two old school yet still very prevalent programming languages: Java and .NET (by Microsoft). The movie depicts the coming of age of Java and how it surpassed .NET as the future of technology... once upon a time. It's entertaining.

Learn AngularJS with detailed walkthrough lesson 2 step-by-step tutorial under 10 minutes

Lesson 2 Part 2 of Codecademy AngularJS tutorial step by step walkthrough. Lesson 2 Hello AngularJS II

This is the companion blog post abridged transcript about our video walkthrough.

  • Important to read the instruction line-by-line without freaking out
  • The controller uses $scope to pass model data into the view. 
  • MainController.js has the code for the MainController and its $scope special variable
  • $scope is an important AngularJS concept. This is an early exposure. No need to stress too much
  • AngularJS follows the Model View Controller framework. Model is stored in the $scope variable in this case. View is the HTML file. And the controller code is in MainController.js
  • In the HTML file, you can see a <div></div> tag essentially an HTML box or section on a website is associated with the MainController. code: ng-controller="MainController"
  • Every time, this div is asked to display a special value, it will look at the MainController and its $scope to see if there data exists.
  • $scope.product = { name: 'book name', price:19} is the same as $scope.product = {}; $ = 'book name'; $scope.product.price = 19;
  • A variable in an object is called a property. A function in an object is called a method

Monday, March 7, 2016

Code School CodeTV Screencast Rails Anatomy notes and reviews - Ruby on Rails application folder structure 101

Summary: Anatomy of a Ruby on Rails application folder. Ruby on Rails 101 explained in minutes. 

Author: Evan B. Machnic

Agenda: 1. Folder Structure 2. Key files in an app 3. Reason for defaults

Rating: 5 stars. Excellent resource for getting started learning to code with Ruby on Rails. 

  • -Section: 1.Folder Structure 2. Key files in an app 3. Reason for Defaults
  • - App directory : assets, controllers, helpers, mailers, models, views, config
  • - Assets: where all the static files will go. e.g. images, stylesheets, javascript files. They are compiled by Sprockets in the Asset Pipeline and served from the /assets directory during web requests
  • - Controllers: has the controllers, which help views and models talk to each other. 
  • - Helpers: application helpers which make maintaining code easier. Typically use helpers to remove duplications out of the views. 
  • - Mailers: classes that can handles mails.
  • - Models: models. app/models persistent and non-persistent models. 
  • - Views: where the presentation templates are. Sub folder called Layouts. HTML XML JavaScript
  • - Config directory: application configurations. Application.rb file loads the boot.rb (loading bundler which loads up libraries needed by the application) file, loads activerecords action controller, default configurations. Global configurations can be commented or uncommented. Database.yml file configure the database. environment.rb in which we require application.rb can also put environment specific configurations here. Contains the development.rb and production.rb files, can modify development or production environment configurations. 
  • - config/initializers: contains application-specific configurations, third-party access tokens, 
  • -locales: for storing different language settings if the app supports multiple languages
  • - routes.rb: contains all the routing info for the app. Can also mount other ruby application from inside this file. 
  • - db directory: database migrations, schemas, seeds. db/schema.rb is the current state of the database 

Sunday, March 6, 2016

Code School Feature Focus Basecamp Search Feature UI Code Tutorial NOTES and REVIEW for CodeTV Screencast

This is my notes from the Code School CodeTV lecture for implementing Basecamp Search Feature. I have not covered all the nuances from the lecture. It's a great real-world software engineering series. Each episode is a real scenario crystalized to 20 minutes of discussion, white boarding, sample code and more.

  • Summary: real world white boarding, discussion among software developers, implementing an important feature - search feature - from a popular software suite - Basecamp product management software. Implementing one simple solution for the advanced feature. Showcase the thought, design and code process.
  • Rating : 5 star, professional, concise, real-world coding experience, walks through the entire process
  • Environment: Rails
  • Step: first analyze the search feature and its behavior, then choose what to replicate. Basecamp dashboard search searches through entries, and makes suggestion of matching project messages and users. In case where no EXACT MATCH is found, the website does a FUZZY SEARCH, or a rough match instead. 
  • Step: analyze the data model. Simplified basecamp data model: project is the main object class, there are many projects, each can have many messages, each message has many comments. And there's the User model and user records. User can be associated with one or more projects.
  • Step: create a search form with the search keyword input field. Method is GET. 
  • Code: 

    • <%= form_tag search_path, method: :get do %> 
    • <%= text_field_tag 'keyword', nil %>
    • <%= end %>
  • Step: custom config search route. Not using any resources for this simple functionality. 
  • Code:
    • get 'search' => 'search#index', as: :search
  • Step: Search Controller code using parameter input from the search field, first search by keyword in Project, then user and redirect correspondingly. Line 3 get the keyword. Line 5 doing the first exact match - project with the same title using Rails4 .find_by(). Redirect to the specific project with that title. Line 10: custom defined Search class with .for() method. Search is a custom Ruby class not an activerecord class. This is the line for a fuzzy search. Will return an array of concatenated 
  • Code: for Rails database %, the percentage sign,  is the string wild card
Sample code for implementing Basecamp search feature search controller
Search projects by title, user by name or else do a fuzzy search

Sample code for Basecamp fuzzy search feature implemented with Ruby on Rails

Interview with David Heinemeier Hansson the famous creator of Ruby on Rails

Code School took the basecamp search implementation to show David, creator of Rails at the Chicago Basecamp office. 

  • David explains: 
    • It's indeed okay to only use RESOURCES for CONTROLLER doing more complex task than just a single action. 
    • Resources is a macro script that will create a bunch of utilities for the controller. 
    • Opinion on Exact Match vs Fuzzy Match and how to scope: 
      • Best practice, David will not use local variables when possible. Ask the question What can it offer you? Does it make the code clearer? Change code : keyword = params[:keyword] to into inline local variable instead example 
      • code: if project = Projects.find_by(title: params[:keyword]) 
      • It's a stylistic practice. Repeating hashlook up is okay, it's clear that the param is coming from outside world.
      • Rather than using REDIRECT_TO multiple times create an instance method named with jump.
      • Fuzzy search : Will have a hard time paginating the result from 3 tables. Cannot use offset properly since SQL offset is based on a single table.
      • The search class in model has a def self.for(keyword), keyword seems to be internal but actually is from the "outside world" as it is a parameter. Need to be careful of SQL injection and hacking when utilizing user inputs. Because we are using the wild card in an unsanitized input, the hacker can pass in another percentage sign - another wild card sign. And if a friendly user searches for a % percentage sign, he can mess up the query too. Sanitization is needed. 

      • Basecamp uses ElasticSearch to handle its high volume, complex and practically all of its search features. 

      • If number of records is large, also need to manage the number of results. Consider ElasticSearch or an eternal search service. ElasticSearch is made to handle this multi-table query result situation too. It can index a variety of data and return the result for you. That's how basecamp does it. It uses ElasticSearch for almost everything.
        • There's also a Ruby Gem for ElasticSearch.
David Heinemeier Hansson extracts the .find_by and redirect_to methods on Projects and User into a
jump target instance method.

CodeTV ScreenCast Unix Basics Linux Shell Commands Fundamental Tutorial Course Notes and Review

Agenda: files, directories, paths, permissions
Environment: Mac OS, Linux, Unix
Rating: 5 stars

  • - Files agenda: 1. creating files, 2. listing files, 3. alerting files 4. links
  • - Can practice in Mac OS terminal and finder file directory
  • - $ls
  • - Above command list files
  • - $cp replicator.txt tribble.txt
  • - Above command cp copies files
  • - $mv transporter.txt bridge.txt
  • - The above command effectively RENAME the first file to second file name
  • - $rm file_name.txt
  • - Rm remove one or more files
  • - $echo
  • - Print something in the terminal
  • - $echo "starship" > wormhole.txt
  • - The above command puts "starship" text into a file, effectively create a new file
  • - $cat file_name.txt
  • - Cat command prints text in a file
  • - $ln wormhole.txt gamma.txt
  • - ln is a link command, cat a linked file will show identical result, however, overriding the original file will also override the linked file. Each file refers to a storage in Unix called inode or index node.
  • - $ls -i
  • - will show all the inode number of each file
  • - Linked file will have the same inode number. It's not the same copy of file, but actually referring to the same content.
  • - ln -s wormhole.txt gamma.txt
  • - The symbolic link is a also known as a soft link by passing the -s option to ln. It works a bit differently. Soft linked files have different inode numbers. Symbolic link refers to the file name not the actual content, especially useful for linking across different storage devices such as a USB drive. The inode number has to differ because they are entirely different file systems. Trying to hard link two files across two file systems will result an error but symbolic link will be successful.
  • - Can always use the man command to read about unix commands
  • - Instruction agenda (directories): 01 displaying a directory path, 02 creating directories, 03 switching into a directory, 04 current and parent directories, 05 linking directories
  • - command: pwd
  • - pwd is short for print working directory. Displays the the current folder path. 
  • - command: mkdir <folder_name>
  • - mkdir makes a new folder with a specified name
  • - command: cd <directory_name>
  • - cd command stands for change directory. Change current directory to the specified directory. 
  • - command: cd ..
  • - cd .. changes directory, and specifically changes to the current directory's PARENT DIRECTORY
  • - command: ls -a
  • - use ls -a to list all directories including hidden directory and the parent directory
  • - use ls -a -i to list all directories and files in the current directory with their i nodes
  • - command: cp ../childdir/myfile.txt .
  • - The above command looks for the parent directory of the current directory, and find a child directory called childdir, find its file called myfile.txt and copy it into the current directory, respresented by a dot. The dot symbol refers to the current directory. 
  • - command: cp -r <directory_name>
  • - cp -r copies recursively what's in the directory. cp <directory_name> with the -r option isn't enough. 
  • - rm -r <directory_name> deletes a directory. Can't work without the -r option.
  • - Concept: linking two directories. Cannot make a hard link, can only make a symbolic link between two directory. Pass in -s option for symbolic link.
  • - command: ln -s <dir_1_name> <dir_2_name>
  • End of notes and summary for Unix Basics Part 1 by Code School

Code School Pluralsights Your Database is Your Friend Learn-to-Code Database Fundamentals Notes and Tutorial Course Review

This is my notes and review from the Code School Pluralsights database fundamental series "Database is Your Friend"
Your Database is Your Friend (Code School Pluralsights video)
made by pluralsights
Key concepts: database concepts & fundamentals (1. Data Integrity, Concurrency, Reporting), examples in Rails
Time accessed: March 6, 2016 Code School free weekend, covers best practice
Rails is not a prerequisite
Style: pluralsights, not the typical gamified Code School course completed with an opening theme song, challenges,

A lot of a use of rails * migrations * to  modify database * state *

Best practice: the presenter prefers to NOT using rolling changes forward or backward in a PRODUCTION ENVIRONMENT. Instead he uses
$bundle exec rake db:drop db:create db:migrate db:seed
to wipe out and recreate the database from scratchw when changes are needed.

- Data Modeling video agenda: 1. Not Null Constraints, 2. Foreign Keys 3. Duplicate Data 4. Polymorphic association alternative 5. Reactive integrity Checks
- Rails error example NoMethodError in Books#show occurred on line <%= @book.blurb.truncate(100) %> tried to call .truncate() on a text but didn't work. A hot fix, a trick is to convert the nil field, which caused the NoMethodError to be a string so use <%= @book.blurb.to_s.truncate(100) %> But it's a temporary hot fix. We are like to encounter unexpected nil again elsewhere or the same mistake in the future, will cause another bandage fix. If we edit a book, entered nothing in the blurb field upon saving the field will no longer be nil but emtpy string.  Nil versus Empty String not provided versus provided but empty. It's not exposed in the UI and will cause inconsistent, and does-not-make-sense data called Incoherent Data. We need to figure out where the nil comes from (may be an import script that forgot the blurb field).
- an activerecord validation may help such as validate :blurb, presence: true But this will prevent empty string as well, so we add some additional condition validate :blurb, presence: true, if: ->(record) {record.nil?} But some SQL statements and activerecord methods can bypass validations such as false)
- The best way is to fix the database scheme and make sure nil is never stored for that data field using rails generate migration add_not_null_to_blurb First we need to update all data to make valid <code> Book.update_all({blurb:''}, {blurb:nil}) </code> replacing all existing nil with empty string. The next step is to change the column to not allowing nil and set a default value <code>change_column :books, :blurb, :text, null: false, default:''</code>

Code School Ruby Programming Metaprogramming Scope Notes and Course Tutorial Review

What is scope in Ruby? 

This is the note for Code School CodeTV Series - Metaprogramming Scope online learn-to-code tutorial. It's a great, short 5 minute class, which explains computer science fundamental concept - Scope in the context of Ruby programming.

Code School 

Free weekend March 2016
Length: 5:17 min
Rating: 5 stars. Concise, useful, professional
Programming fundamentals - Metaprogramming Scopes
Agenda: 1. What are Scopes? 2. Meet your 'self' 3. Changing Scope 4. Instances and Local Variables 5. Conclusion
Background: in Ruby context

- In Ruby Scope, scope is what's visible such as variables, methods, and objects. Scope can change constantly. It's important to know the current object, 'self' and what it can see constantly. 
- Need to understand 'self' first. Self is the current object. 
- When ask Ruby for self, you will get main, and the class of self is object. Main is what self uses to refer to itself. You are at the top level scope!
[1] pry(main)> self
- self can only see things at the same level

my_class.rb file
puts self

class MyClass
puts self

def my_method
puts self

- the above code, first self outputs main, the second is MyClass, will return an instance of MyClass. Self is constantly changing as the program executes. 
- The self can change time there's a class or module definition, or within methods.
- Instance and local variables : .other_method method can access instance variables but not local variables. Local variables are truly private. 

Note: not all content included in the class is noted here.

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid