Thursday, October 22, 2015

Preparing for the MEAN Stack Workshop

To maximize our time together for learning the MEAN stack, please take care of the following before the workshop. The total time to install the software should be less than an hour. If you have questions, please contact me via email: rockncoder@gmail.com.

  1. Install a web development IDE
    1. For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.
  2. Install Git
    1. We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.8.1. If have it already, but your version is older than 2.6, please update it.
    2. Git is free.
  3. Install Node.js
    1. We need node.js installed on our development machines. If you have a version older than 5.0, please upgrade. I will be using node version 6.0.
  4. Upgrade npm
    1. NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:
    2. npm install npm -g
  5. Heroku
    1. We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop.
  6. mLab
    1. mLab is a fully managed MongoDB-as-a-service provider and a partner of Heroku. Will host our MongoDB service on it instead of install Mongo on our machines. mLab gives us a free developers account tied to our Heroku account. You may need to supply a credit card but you will not be charged so long as you choose the free sandbox account. This is a small 500 MB database on a shared instance but it is more than enough for the class and gives you real world experience.
    2. Nothing more to do
  7. MongoChef
    1. MongoDB includes the Mongo Shell, its REPL, but using it quickly gets tiresome. SO, we will also use a GUI based program, MongoChef. It has a free non-commercial version that we will use for the workshop.

Please take care of everything on the list before the workshop. We won't have time to do it during the workshop. If you have questions, please feel free to contact me by email: rockncoder@gmail.com.

Tuesday, August 11, 2015

Intro to Angular 2.0 - An Online Lunch and Learn

AngularJS is by far the most popular JavaScript MVC framework. Version 2 of this framework is already in developer preview and will soon be officially released. Angular 2 is not compatible with Angular 1. 

Don't fall behind. Attend the Rockncoder's first online lunch and learn covering the next version of Angular.
In this talk we will build an app using Angular 2. We will compare and contrast it to a similar app built using Angular 1. We will write our app using TypeScript and show how to get your dev environment set up.

This lunch and learn is free. It will take place online on October 8, 2015 from 12 to 1 PM PDT. While this event is free, you must register to attend. Don't wait too long, there are only 50 seats available.




Thursday, August 6, 2015

Upcoming Talks


Here are all of my upcoming talks. I will try to keep this list updated as events pass and new ones are added. The best way to get updates on my talks is to follow me on Twitter, @therockncoder.
  1. 14 November - SoCal Code Camp, USC (FREE)Getting Ready for Angular 2: Fighting Fear with Code (FREE)Functional Programming in JavaScript (FREE)http://www.socalcodecamp.com/sessions.aspx
  2. 18 November, 9AM PST - LearnNowOnline Webinar
    Getting Ready for Angular 2: Fighting Fear with Code
    http://www.learnnowonline.com/webinars
  3. 2 December - Calance, SoCal .NET
    Functional Programming in JavaScript
    http://www.meetup.com/SoCalDevNet/events/225714066/
  4. 5/6 December - WeLabs, Long Beach, CA
    JavaScript Foundations Workshop
    http://www.meetup.com/code-district/events/225950308/
My video series on Ionic Framework is available now! Learn to:

  • Develop a hybrid mobile application with Ionic and AngularJS
  • Explore key commands of the Ionic CLI for an efficient development experience
  • Manage application data easily with AngularJS services and Ajax
  • Incorporate interactive mobile features to create intuitive user experiences
  • Beautify the application further by calling upon Cordova plugins
  • Fetch real-time data by making interactive calls to third-party websites
  • Deploy your application to the emulator for testing

    Find it at: https://www.packtpub.com/web-development/beginning-ionic-hybrid-application-development-video

Tuesday, June 16, 2015

Internet Explorer, Flash Player, and z-index

At work we are encouraged to pick up and fix medium bugs when we have time, especially the ones which are out of their SLA time period. I like to challenge myself and attempt to fix the older bugs because they usually have been looked by other devs who gave up on them. So this particular bug seemed juicy to me. It was two months old and on the surface seemed easy. The Brightcove flash player was appearing in front of the modal window instead of behind it, but only in Internet Explorer. 

When I went to the link supplied in the bug report in IE 11, I saw the issue. I went to same URL in Chrome and Firefox and there was no issue. I tried IE 10 as well and the issue was there too, so it is definitely an issue only with IE. 

Eventually I tracked the issue down to a missing <param>. It seems Brightcove player markup on that particular page is missing a 

<param name="wmode" value="transparent" />

When that <param> is missing Brightcove uses what appears to be the default:

<param name="wmode" value="window" />

This is the statement which gives the flash player the ultimate z-index in Internet Explorer. So fixing the bug once I understood what was causing it was pretty easy. In order to test if my idea was correct, I actually wrote some code in FiddleScript to inject the missing markup onto the page. This was faster than fixing directly in the source code since this page was in our CMS system not in our source code. 

Sunday, May 31, 2015

JavaScript Hands-on Training

JavaScript is one of the most popular languages in the world. It is the dominate language of the browser and is growing increasingly popular outside of it. It is used to create servers with Node.js, and to create mobile apps with frameworks such as Titanium and Ionic. It is even used to create levels in many popular computer games.

But inspite of its popularity most programmer never bother to study it. Partially it is because it looks familiar. If you program in C, C#, C++ or Java, JavaScript seems like a language you already know. But looks can be deceiving.

Unlike other object oriented languages, JavaScript lacks classes, so people waste valuable time trying to create them. Instead of class inheritance, JavaScript has prototypical inheritance. It is a strange but beautiful way of doing inheritance. Too bad most developers never learn to use it.

There is a trend in many imperative languages of late, adding functional programming features. A few years ago C# added lambdas and LINQ and recently Java 8 also adds lambdas. What is a lambda? It is a fancy way of saying anonymous function. JavaScript has had that ability since 1995. It also has first class functions, which means functions can be used almost anywhere a value can. They can be passed as parameters, returned from functions, stored in variables, arrays, and objects. This also means that JavaScript has high order functions. What are high order functions? It is when a language can both pass functions as parameters to functions and also return functions from functions.

I am going to be teaching hands-on JavaScript in the Los Angeles area later this summer 2015. Why should you study JavaScript? Because understanding JavaScript will give you the ability to unleash it. You will understand concepts that you may have only glossed over before.

  • What the "use strict" expression actually does
  • Why there are four different ways to call functions
  • How to remove nasty loops from your code by using recursion
  • How to write pure and compose-able functions
  • How write mutation free code
  • How to write code which is easier to unit test
  • and much, much more

I will have more information once the dates have been confirmed.

The Rockncoder Reference Page

When I tell people that I've been developing software for over 35 years, first there is disbelief and occasionally the very flattering, "You don't seem old enough". But I have been at this a long time now. I sold my first application a learning game while still in high school in the l979. 

Recently I've decided to create a list of my talks, apps, games, conference appearances, videos, etc. together in one place. The list isn't complete yet but here it is:

SoCal Code Camp San Diego 2015

The always free SoCal Code Camp is coming to UCSD in San Diego the weekend of June 27th and 28th. I am actually going to take it a bit easy this time around and only do one talk titled, Functional JavaScript. This is something that has grown closer to my heart the last few months as I've ponder why my code isn't quite as nice as I'd like it to be. In my search for new ideas, I've run it an old one: functional programming.

Functional programming has been apart of computer science pretty much since the beginning with Lisp, invented in 1958, being the first major language using its techniques. Functional programming eschews mutating variables and espouses pure functions. Things which are very hard to do right in OOP, like compose-ability are trivial in FP.

Please come and check out my talk and be sure to check your interest so that we can get the proper size room. For those who have never been, UCSD is in the amazingly beautiful La Jolla area of San Diego. It is very close to the ocean, shops and restaurants. Code Camp is a perfect excuse for a weekend vacation. Who knows maybe you can get your company to pay for a hotel room since there is no cost for the training.

To rate this talk: http://spkr8.com/t/59461

Here is the full talk description:

For most of its nearly 20 years, developers have tried to make JavaScript more like other imperative languages like Java and C#, but was that wise? Unlike those languages JavaScript doesn't have class inheritance or information hiding, but it does possess high order functions. What are high order functions? Function which can both be sent to functions and return from functions. This allows JavaScript to be programmed more functionally.


Functional languages like Lisp, Scheme, Clojure, and Haskell espouse the beauty of pure functions. What are pure functions? Functions which always produce the same output when given the same input without mutating any variables along the way. This also makes it trivially easy to compose new functions by combining older ones, while in imperative languages, creating compose-able objects can be rocket science hard. The difference between functional and imperative programming can be described as the difference between telling the computer what to do (functional) and how to do it (imperative).


Functional programming can be a bit difficult to wrap your head but in this session I will give some examples of common programming problems that we face everyday in JavaScript and see how functional programming can help us.



Wednesday, April 8, 2015

Getting Going with PhoneGap

PhoneGap is Adobe's free cross-platform hybrid mobile app framework. It allows you to use the web technologies that you know and love to build mobile apps. Like many open source projects PhoneGap can be a bit of a pain to get started since it also relies on other open source frameworks. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:
  1. Mandatory Components
    1. Git
    2. Node (includes npm)
    3. PhoneGap (npm module)
  2. Optional Android Components
    1. Java SDK 7
    2. Android Studio + the latest SDK
    3. VirtualBox 
    4. Genymotion Android Emulator
  3. Optional iOS Components
    1. XCode
Most of PhoneGap will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator and be able to play around with PhoneGap without having to install all of the device components.

PhoneGap is delivered as an NPM module. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed. None of these is difficult to install, but you will need a few hours if you plan to install everything. 

Prerequisites


You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Complete the installation


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number)




Install Cordova
  1. Instal PhoneGap globally with the following command: npm install -g phonegap

    You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of PhoneGap from the command line: phonegap -v

At this point you can play with PhoneGap in your browser. If you wish to deploy apps to devices please continue with the instructions below.
Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step.

Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Click the install packages button
  7. Accept the license agreement
  8. Click Install


Be patient, it can take an hour or so to install the SDKs.


Genymotion Emulator
https://www.genymotion.com

Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.




VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.

Xcode
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12

Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.

Install Xcode
  1. Download the installation package
  2. Launch it

Ionic Framework Mac/Linux Install

Just in case you've been off the planet for a while and don't know what the Ionic Framework is, you are in for a treat. Imagine combining Google's JavaScript MVC framework, AngularJS with Apache's cross-platform hybrid app framework Cordova and throwing in a lot of custom-tuned CSS3 and JavaScript in order to make fast and beautiful apps for smartphones and tablets. You would have the Ionic Framework, which you can seem cooler by simply calling it Ionic. 

Like many open source projects the Ionic Framework can be a bit of a pain to get started since it also relies on other open source frameworks. But don't worry my friend, we are here to help you out. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:

  1. Mandatory Components
    1. Git
    2. Node (includes npm)
    3. Cordova (npm module)
    4. Ionic (npm module)
  2. Optional Android Components
    1. Java SDK 7
    2. Android Studio + the latest SDK
    3. VirtualBox 
    4. Genymotion Android Emulator
  3. Optional iOS Components
    1. XCode
Most of Ionic will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator then you will have a pretty good way to get a feel for Ionic development without the pain of installing everything.

Ionic and Cordova are delivered as NPM modules. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed.

None of these is difficult to install, but you will need a few hours if you plan to install everything. These instructions are for Mac OS X, but should work for Linux as well. If you need Windows specific instructions, please go to:



If all you want is to get your toes wet in the Ionic pool, probably the best way for you to go is with the Ionic Box. The box uses a tool called Vagrant to create a linux VM via VirtualBox and  chock it full with all of the tools you will need to build Ionic apps. All you will need to do is install VirtualBox, then install Vagrant, then download the Ionic Box and tell Vagrant to install it.


Prerequisites


You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Complete the installation


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number)




Install Cordova
  1. Instal Cordova globally with the following command: npm install -g cordova

    You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Cordova from the command line: cordova -v




Install Ionic
  1. Install ionic globally with the following command: npm install -g ionic

    Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Ionic from the command line: ionic -v
  3. It should respond with the current version number

At this point you can play with Ionic in your browser. If you plan to deploy to a device as an app, you need to continue. If you plan to use Ionic's View app, you don't need to continue.
Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step.

Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Click the install packages button
  7. Accept the license agreement
  8. Click Install


Be patient, it can take an hour or so to install the SDKs.


Genymotion Emulator
https://www.genymotion.com

Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.





VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.

Xcode
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12

Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.

Install Xcode
  1. Download the installation package
  2. Launch it