Felix Gondwe

keep looking, don't settle

Hybrid App vs Native App dilemma — April 10, 2016

Hybrid App vs Native App dilemma

I think of myself as a fullstack developer but the stack is becoming more complex each passing day and at times am not sure what it means anymore. For instance, before mobile development was popular fullstack mostly meant a person comfortable with back end(C#,PHP,Java,SQL,MySQL…) and front end(HTML,CSS,Javascript…) hence that’s where I fit in.

However when you start talking about native mobile application development, the stack begins to change because Android or IOS or whatever you’re into brings its own stack in some sense. As such to make sure I fit in within the ‘modern stack’, I have to be comfortable with the mobile frameworks as well, at least in my opinion. If I was still in college, it would be fun to learn all these and impress companies with my application portfolio. Now I do not have that luxury, as such I have to make sure am adding as much value as I can to my current work place leaving little time to experimentation of the ‘modern stack’.

For the longest time, I have been trying to find ways to make use of my current web development knowledge to build native mobile application as quickly as possible. I have been experimenting with Ionic, Xamarin to make applications that have same feel as native apps but haven’t had much luck with that. That’s the main difference between hybrid apps and native apps, it doesn’t just feel same no matter how hard you try. Hybrid application definitely work and sometimes an average user can’t tell difference between hybrid application and native application.

Good news is the answer is here: Angular2 and NativeScript. These two will change web and mobile development game. They are both in Alpha stage but I am taking them for a drive because I am very excited what these two guys can accomplish together. So now I can just work making my javascript or typescript knowledge better and develop across all platforms. That’s a win 🙂

I will be blogging more about these two magical things; Angular2 and NativeScript {N}.

 

Advertisements
Windows path too long issue — April 8, 2016

Windows path too long issue

Spent 3hrs the other day trying to figure out how to delete folder with node_modules in a windows box. I know you thinking, why not just google it! Trust me I did, but sometimes we look into wrong places for answers and that’s okay. I learned a thing or two in those 3 hours, they didn’t go to waste. Failing forward 🙂

Long story short here’s how you can resolve the issue: Use ROBOCOPY! Its so simple. I will not go over robocopy syntax in this blog (Let’s keep that for another day)

Steps

  1. Create an empty directory in your C:\ drive, for example mkdir emptyFolder
  2. Create another directory on your C:\ drive and copy(cut + paste rather) the folder failing to delete to that folder you just created. for example: mkdir myFolderToDelete
  3. Run the following command: robocopy <source> <destination> [command]

See below


robocopy C:\emptyFolder C:\myFolderToDelete /purge

There you have it, those node_modules or any other long path folder issues won’t bother you again 🙂

 

 

AngularJs 101.1 — March 20, 2016

AngularJs 101.1

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a sense where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun 🙂

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

  1. Working computer (PC/MAC). I will be using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.
  2. Node. Assuming you’re working in your local machine.
  3. Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual code here.
  4. Code_pen for live demos (optional)
  5. Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download from here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart 😉

Installing node via terminal using homebrew

  1. open your terminal
  2. Type $ brew install node
  3. Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

————————–

Working Examples

1. Hello world
2. Business card

 

Details

&amp;lt;div ng-app=&amp;quot;mainApp&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
;

ng-app is an angular directive where we’re declaring the module in our example.

&amp;lt;div ng-controller=&amp;quot;appController&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;

 

ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.

 

To be continued…

 

 

 

 

— March 19, 2016

Introduction

Angular is a hot trending topic in web development right now. AngularJs is a front-end de-facto open source javascript framework maintained by Google. The fact that Google maintains it shows that its reliable. This post is part of angular series tutorial project that I am working on. As of this writing Angular2 is in beta and will be released soon. The initial part of this series will take the Angular 1.* walk so we get a sense where the story is coming from and where we are going, later on after Angular2 comes out, we will make the transition to talk more about Angular2. This is an interesting journey you don’t want to miss out, I promise we will have fun 🙂

We will jump straight to code, that’s quick way to learn Angular in my opinion and we will try to explain every single step we take so we don’t lose anyone on the way. If you face any issues feel free to comment and we will try to resolve whatever issues you’re facing.

Prerequisites

  1. Working computer (PC/MAC). I will be using Mac for this series. This is the only requirement you need hoenstly, so computer + internet that’s all you need.
  2. Node. Assuming you’re working in your local machine.
  3. Editor (any editor of your choice). I will be using MicrosoftVisual Code editor. You can download visual code here.
  4. Code_pen for live demos (optional)
  5. Github. We will keep our source code in case you want to try out few things (optional)

Getting Started

Install Node

You can install node via terminal or just download from here. If you don’t want to hustle through the terminal its easier and safe to just use the link provided. Terminal is not for the faint heart 😉

Installing node via terminal using homebrew

  1. open your terminal
  2. Type $ brew install node
  3. Assuming the installation went through, now you have NPM to handle all your node packages we will use in this series.

Editor

Use whatever you want. Visual code is amazing though, feel free to try it out.

Ok that we have all that out of the way let’s do a hello world angular application then we will discuss the details.

————————–

Working Examples

1. Hello world
2. Business card

 

Details

&lt;div ng-app=&quot;mainApp&quot;&gt;&lt;/div&gt;
;

ng-app is an angular directive where we’re declaring the module in our example.

&lt;div ng-controller=&quot;appController&quot;&gt;&lt;/div&gt;

 

ng-controller is an angular directive where we’re declaring the controller in our example.

ng-model is another useful directive that we can use to “keep” data between the view and the controller.

Angular selling point is that it makes static html dynamic.

Before we get into more technical details we need to understand basic
building blocks of angular.

 

 

 

 

 

 

IIS 7 and CORS — December 8, 2015

IIS 7 and CORS

CORS stands for Cross Origin Resource Sharing

I am developing a web service using .Net framework. There is another Web service or API am trying to access in my local machine on client side of this Web Service am working on. However I was getting the following error when I try to access this other API sitting out site my local environment.

No ‘Access-Control-Allow’ origin header is present on the requested resource

I spent a lot of time trying to figure out how I could access this resource from my client side scripts. Turns out I had to add custom header to web.config file on IIS server in order for my javascripts to access the external API.

  <?xml version="1.0" encoding="utf-8"?>
     <configuration>
       <system.webServer>
          <httpProtocol>
             <customHeaders>
                  <add name="Access-Control-Allow-Origin" value="*" />
             </customHeaders>
           </httpProtocol>
       </system.webServer>
      </configuration>

I hope this saves someone some dev time 🙂

Summary
-The server/api you’re making request to has to implement CORS to grant access to javascripts(angular/jquery/*)
-The scripts can’t grant themselves access. So don’t waste time trying to implement this CORS in your scripts to get access to resources on the server. I mean you could but personally haven’t figure out a way, so let’s assume its not possible for the sake of this post 🙂

Sources:
stackoverflow
Enable CORS on IIS

JS: Prototypal Inheritance — November 19, 2015

JS: Prototypal Inheritance

Prototypal inheritance: modern way to do inheritance in javascript. Its alot cleaner way to achieve inheritance in javascript. Let’s get to it.

var employee = {
  location: "USA",
  getLocation: function(){
    console.log(this.location)
  },
  getName: function(){
    console.log(this.name)
  }

};

Inheritance

var contractor = Object.create(employee);
contractor.getBadgeId = function(){
  console.log(this.badgeId);
};

Create instances

var intern = Object.create(contractor);
intern.name = "felix gondwe"; //protoypal flexibility 😉
intern.badgeId = 10;

intern.getBadgeId(); //prints 10
intern.getLocation(); //prints USA
intern.getName(); //prints felix gondwe

In this example, you don’t have to work with the prototype object, for example: Person.prototype.SayMyName = bla bla
check code below

var Person = function(){

};
//you don'e have to work with this
Person.prototype.SayMyName = function(){console.log("my name is seth!")};

This is far easier way to understand inheritance in javascript. The whole prototype object thing can get confusing if you’re new to javascript OOP.

Let’s see more code to make this example a little more interesting

Assuming we wanted to pass limiteless amount of arguments to our constructor, lets see how we can do that.


first, we have to modify Object.create() function in our parent class

var employee = {
  location: "USA",
  getLocation: function(){
    console.log(this.location)
  },
  getName: function(values){
    console.log(this.name)
  },
  create: function(values){
     var instance = Object.create(this);
     Object.keys(values).forEach(function(){
      //maps object keys to their values in our newly created instance
        instance[key] = values[key]
     });
    return instance;
  }

};

Inheritance

var contractor = Object.create({
    name: "felix",
    title: "intern",
    location: "USA",
    office: "HQ",
    getInformation: function(){
        console.log("name: " + this.name);
        console.log("title: " + this.title);
        console.log("location: " + this.location);
        console.log("Office: " + this.office);
},
});
var emp = Object.create(contractor);
emp.getInformation();

The amazing thing about prototypal pattern is that you can change properties or override function on the fly as compare to C# for instance where you can’t modify properties or methods once an object has been instantiated

Javascript OOP —

Javascript OOP

Background

Javascript is a prototype based language. But what does that mean? First let’s work on some terminology here. Prototype basically means a model of something. I have a Java/C# background so this was pretty confusing to me at first that’s why we’re taking baby steps to understand what we’re dealing with here.

Anyone one who’s been working with Classical model of OOP thus folks doing Java/C++/C# or anything along those lines will find Javascript OOP a little weird. Let’s get to work.

We will attempt to create a class hierarchy using Employee object for instance. We will approach this from a classical model perspective and prototypical perspective to see how these two differ.

1. Classical model example: Java

public class Employee{
//properties
   private static String FirstName;
   private static String LastName;
   private static int Age;
   //constructor
  //special method btw 
   public Employee(String firstName,String lastName,int age){
      FirstName = firstName;
      LastName = lastName;
      Age = age
   }
//Methods or functions

//gets employee first name
   public string GetFirstName(){
      return FirstName;
   }
   public string GetLastName(){
      return FirstName;
   }
   public int GetAge(){
      return FirstName;
   }

}

Inheritance

public class Contractor Extends Employee{
   //properties
   private static int contractorBadgeId;
   //constructor
   //special method btw 
   public Contractor(){
      super(&quot;Seth&quot;,&quot;Johns&quot;,30);
      contractorBadgeId = 10;
   }
  //Methods or functions
   public int GetBadgeId(){
      return contractorBadgeId;
   }
}

Now create an instance of Contractor object

Contractor salesEngineer = new Contractor ();

That was a hierarchy example of classical model. Now let’s look at a similar example in javascript

2. Prototypal model: Javascript

By the way there’s no concept of public|private|protected in javascript. You could achieve similar thing but let’s save that for another day. As such we won’t be implementing getters and setters like we did in the Java example. Let’s jump to it 🙂

//Employee object
//Constructor function
function Employee(firstName,lastName,age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

Inheritance

//Contractor object
//Constructor function
function Contractor(){
   //properties
   //initialize object with Employee object 
   Employee.call(this)
   //properties
   this.contractorBadgeId = 10;
}
//inherit/associate Employee object
Contractor.prototype = Object.create(Employee.prototype)

Lets stop there for a second, I know things are getting weird now if you have Classical model kind of background. You’re not alone 🙂

In prototypal model inheritance works mainly by “association”,meaning, we’re not creating an Instance of Employee object but rather we’re associating Employee object to Contractor object. Let’s proceed.

Now let’s create sales engineer object

var salesEngineer = new Contractor();

Now we have created a hierarchy in prototypical model.

Summary
This example shows the difference between classical model and prototypical model to highlight concept of Inheritance in javascript.

We looked at inheritance in classical model and inheritance in prototypical model. Its important to understand the two especially for people like me getting deep into Javascript with a Java/C#/C++ background. Check out my next post on interacting with Javascript objects. Bye for now.

NB(update)
There’s a confusion about whether the above javascript code is “classical model” pattern or prototypal model pattern. This example is how you would do “classical model pattern” in javascript. For the actual prototypical pattern approach or the newer way to do inheritance in Javascript that most modern projects are using will be in the next post just to clear some of this confusion.

Cyberduck Mac Installation — November 15, 2015

Cyberduck Mac Installation

Setup
The setup for cyberduck is easy. Helps transferring files(ftp/ftps) to wherever you’re hosting your site

  1. Download cyberduck
    Google cyberduck download for Mac or download here
  2. Install cyberduckOnce installation is complete you can open cyberduck, you should see the following window or if you don’t see it open Cyberduck application in your applications folder.
    Screenshot 2015-11-14 19.30.45
  3. Get your FTP/FTPS server information
    Make sure you have FTP information from where you’re hosting your site. If you don’t, ask your host administrator
    ftp_connection
  4. Connect
    connected_ftp
    That was easy right, ask away if you face any issues. Setups can be annoying at times but we have to do them anyhow.
Malawi — November 14, 2015

Iterate through array
Powershell is very “powerful” and super weird when you’re used to writing code in C# or Java or anything that looks like code really. Anyhow this example demonstrates how to iterate through a an array in powershell.

Function SetNameList($dataList)
{
   #declare an empty array
   $arr = @()
   #add names from dataList to empty array
   foreach($name in $dataList)
   {
      $arr += $name 
   }
   return $arr
}