Learning the Basics — Machine Code and High Level Languages

Now we know how a CPU executes a program, let’s move on to understanding machine code and high level languages. This is the next step in understanding core concepts.

Understanding Machine Code and High Level Languages

The above nice illustration video shows how machine code gets converted by assembly into machine understandable format.

Low-Level Languages

Low-level languages are referred to as ‘low’ because they are very close to how different hardware elements of a computer actually communicate with each other.

Example: 10010101100101001111101010011011100101

High-Level Languages

A high-level language is a programming language that uses English and mathematical symbols, like +, -, % and many others, in its instructions.

Example:

Compiler

Computer program that translates a program written in a high-level language to the machine language of a computer.

Example: gcc, clang, go

Interpreter

Computer program that simulates a computer that understands a high-level language (or) a program that executes source code or byte code.

Example: ruby, python, php.

Thats it for today in understanding machine code and high level languages. Happy learning.

References:

Learning the Basics — How does a CPU executes a Program

We are learnt how a microprocessor works, but, I didn’t learn well. All i ever want to get a degree in my engineer! Now, I am seeing myself how i lacked the basics even though I could do well in UI & Backend, I am seriously missing the basics. So, here is an awesome video showing how does a CPU executes a Program.

How Does a CPU Executes a Program

Reference

 

Geolocation API — How to get current user location

Before using Geolocation API, lets understand why need to use it.

If you are building a web application, there will come a time where your need to know the current location of the users. Why I need to know the location of the users? Because you might need to show contents relevant to the location of the user or even change your locale based on it or even you can allow use to track location using app ex. fitness apps.

Geolocation API

JavaScript has an API which can be used to retrieve the user location, only if user allows permission. Below is a script simple script to do that!

Breakup of above Geolocation API

1) Getting Geolocation object

We check for whether geolocation api is currently supported in our browser.

2) Getting Current Position

Now if the thing is supported, we can easily pull the latitude and longitude of the current user location.

Make sure to provide permission for browser to pull your current location

geolocation-api
Geolocation allowing permission

 3) Watch Position for Change.

Finally, you can use the watch to track the changes in user location and update it. (cases in which we provide mobile apps like fitness app to track user jogging locations)

4) Using Google Maps or OpenStreepMap to display the fetch information in a awesome map

Google Maps:

OpenStreeMaps: (Make sure to include OpenLayers.js)

You can even revoke permission later to any site by clicking the label in address bar.

geolocation-revoking-permission
Geolocation revoking permission

Geolocation Accuracy

Geolocation is most accurate for devices with GPS.

“W3C Geolocation” — the Web site will get the accuracy of whatever geolocation method (whether based on IP, access point MAC, GPS, cell-ID, etc.)

Some Web browsers have access to GPS receivers. Some of them (like Firefox and Chrome/Chromium) can use the MAC address of a WiFi access point to query Google’s database of the locations of WiFi access points.

Geolocation API removed from unsecured origins in Chrome 50

 According to Google API, https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
It is an important issue as it will directly impact any site that requires use of the geolocation API and is not served over https, but it is a change that we do believe is beneficial to all users on the web. This post should help you understand the reasoning and how to proceed.

 Browser Support

http://caniuse.com/#search=geolocation

geolocation browser support
geolocation browser support

References

  1. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
  2. http://caniuse.com/#search=geolocation

 

Yet another UI Framework — Aurelia For beginners

AngularJS is one of the coolest front end frameworks I’ve ever used, but it doesn’t hurt to try more Frameworks. One Em is Aurelia, a actually simple JavaScript framework or say framework of tomorrow. (Just like AngularJS). Below aurelia for beginners provides an insight of how to install and also know the difference between AngularJS and Aurelia.

Getting started with Aurelia for Beginners

Why aurelia is awesome? Because of the few below stuffs which makes it easier to run and understand at the same time, it still gives the power to write very simple code. So, anyone can easily write a Aurelia code.

  1. Focus on business logic, not on framework
  2. For users looking for fast development also providing a structured UI FRAMEWORK
  3. Written with next-generation EcmaScript. Integrates with Web Components.
  4. Similar to AngularJS, “Two-way” Binding
  5. Can be written using ES5, ES 2015, ES 2016 and TypeScript

Installation

There are lots of way to install Aurelia, you can use Yeoman, Webpack or simple Aurelia-CLI

Pre-requirements

  1. NodeJS 4.x
  2. npm 3
  3. npm aurelia-cli

To make it less dependent on machine installation (Ubuntu/Windows), lets install aurelia in Docker. So, it can run in any machine! Cool!!

Installing Aurelia on Docker for Windows

1. Create a Dockerfile with below content

2. Now run docker build -t aurelia/cli

3. Now you have the Docker image lets create a container for this image and bash into it!

4. After executing this command, you will be inside the container. lets check whether it is installed correctly with the $ aurelia

checking aurelia in windows
checking aurelia in windows

Starting your project

Using the in-built Aurelia CLI command lets create a project. (Since you previously ran docker run command, you’ll be inside the container now)

  1. Now cd /Aurelia
  2. Run the command to create a new project au new --here
  3. The wizard you can keep hitting enter (unless you want to modify the default value. I’ve choose Sublime Text editor instead of VS Code)
  4. Now see the project directory, it’be created.
    aurelia-cli-new-project
    aurelia-cli-new-project

    5. Finally after confirmation you have created a project successfully (with everything you needed for awesome in a jiffy)

Aurelia Vs. Angularjs

Now we’ve created a project, you can simple create a todo example and try it http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1 (skipping the setup part)

1. Syntax: No weird symbols or abstract naming, just similar syntax to what you can already find within Javascript itself.

2. ES6 Support: You write web applications using ES6 syntax and not have to worry about ES5 support because the included build system and configuration. With AngularJS, you’ve to learn its abstractions; directives, controllers, services, factories

3. Pluggable & Modular: Framework that can be decoupled to the point where you can use parts of Aurelia in other applications/Node.js modules.

4. Templating in Aurelia: Utilises the W3C HTML Imports specification for importing HTML templates and logic.

5. Dependency Injection: Just define a static method that returns what you want to be injected into the application!

Overall Aurelia seems and better than AngularJs in terms of simplicity with power matching to AngularJS. But, there is one question goes in the mind of most of the UI Developers, why another UI Framework? We just learnt and starting using AngularJS and now another?

Well, Aurelia is created long back and thing is that, there is always going to be tons of ‘yet another framework’ whether is PHP or UI or whatever, you can either stick to what you like or learn something new. And there are so many “new”, so might good and provide tons of new features and browser support or some might now. So before trying a new Framework your application, it’s better know the ups and downs of a framework and its support. Both Aurelia and AngularJS are great frontend framework! But, comparatively with Aurelia, AngularJS is very well know and has tons of support over the web.

Well, thats it. Thank you for reading!

References:

  1. http://blog.aurelia.io/2015/03/16/aurelia-and-angular-2-code-side-by-side/
  2. http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/
  3. https://github.com/aurelia/framework/issues/74

Installing Docker For Windows 10

I just started another day to write some code and Aurelia Framework caught my eyes. There are several ways in which we can install but using Node and Webpack seems neater way. Also, I’m in much favour for writing programs in Linux rather in Windows (Windows 10 is awesome though!). Previously install dual boot of linux in my system but just thinking, why the hell i need a dual boot if only i need just for programming. Ta-da! There is Docker ofcourse and recent version of them even provides Docker for Windows 10 directly. So, here we are today going to see and installing docker for windows 10.

Installing Docker for Windows 10

There are ways in which you can install Docker for Windows

Pre requirements

  1. 64 bit Windows 10 Pro, Enterprise and Education
  2. The Hyper-V package (Virtual machine!)

If you have passed requirement no 1, lets started on 2. (else use Docker toolbox) Even though according Docker, “The Docker for Windows installer will enable it for you, if needed.”.

You have to enable one more thing for “Hyper-V” first, else you will get the below error message after installing docker.

Hardware-assisted virtualization and data execution protection must be enabled in the BIOS

1. How to Enable Virtualization in Windows 10:

This is a tricky part for beginners, but very simple one. You have enable it BIOS screen.

  1. Restart your system
  2. Proceed to BIOS page (F2 for ASUS)
  3. Search for Virtualization Technology and enable it
  4. Save and reboot

Thats it. For the next step.

2. How to Enable Hyper-V:

You can either let Docker do this or you can do it yourself (It’s always useful to learn it manually!)

  1. Enter Turn windows features on or off in Search
  2. Scroll and see Hyper-V and check it!
  3. Restart again!
enabling-hyper-v-in-windows-10
enabling-hyper-v-in-windows-10

Finally, all our pre requirements has been completed. Now, lets see how to install Docker for Windows 10.

3. Installing Docker

  1. Download the stable Docker for Windows
  2. https://download.docker.com/win/stable/InstallDocker.msi
  3. Follow the simple Wizard and Hit finish.
  4. Thats it, as simple as that.

Now let’s verify whether Docker is installed, go to Powershell and type docker --version. Did you get the below

docker-in-windows-10
docker-for-windows

You have successfully installed Docker in Windows 10, awesome!!!

4. Installing Ubuntu on Docker for Windows.

Next stop, let’s install Ubuntu in Docker to achieve our final goal

In powershell, give following command
$ docker run -it ubuntu bash

docker-for-windows-10
docker-for-windows

This will install ubuntu Docker Image in our Virtual Machine.
Now you are root user root@014150a01c9f:/# i.e. you are inside the Ubuntu Virtual Machine!
Type cat /etc/*release, you got the Ubuntu 16.04

Thats it!! We have installed Ubuntu 16.04 in Windows 10 Machine!

Hopefully this will give you the way to harness the power of both Ubuntu and Windows in a single machine! Stay tuned for more about using Docker

Understanding PSR — Part 1 What Does PSR means?

I keep seeing young developers these days completely depended on Frameworks, while it provides a way to finish our work faster but you won’t learn until get inside their core. when it comes to basic of understanding, it starts with how files are loaded and how various internal libraries are linked to each and easily retrieved with just using a Namespace Keyword. There it comes in Understanding PHP PSR first.

Understanding PHP PSR Means?

PSR or PHP Standards Recommendations (or sometimes called Proposed Standards Recommendation), is an attempt to standardise the way people use PHP. As the growth of frameworks has been increasing dramatically, there comes the need for “Interoperability” between these framework. So one can you other packages/plugins/modules are whatever without any trouble.

Just think about it, if each frameworks are written in different styles (like coding styles, use of including file set, linting, logging, etc) it be a hell for other developers to understand and how to use it. There comes the need for developers (Since PHP is Open Source) to come point to finding a neat way, i.e rules or proposed “standard” of how to write PHP.

I remember my time when started out programming in PHP like 7 years back, there always comes a need to use third party vendor packages, what i did was download from the web, extract and put it somewhere and use ‘require’ to load. I had no idea about standards or proper convention of how to use a component and also I put up ‘require’ in all my classes and create instance in same manner, now i look into it, it’s so stupid. Its like 5 or 10 vendor components are download and extract and placed in everywhere. When sharing with collaborators, I just blindly commit these extracted packages in my repo. Even if i dynamically include these packages, each plugin requires different ways to load in runtimes. Its like Hell, until i found it there is something called PSR and Composer.

How it Started?

  • Started as “PHP Standards Group” after a initial conference in 2009 (according to http://code.tutsplus.com/tutorials/psr-huh–net-29314)
  • Later changed to “Framework Interoperability Group” or simply FIG, as former wasn’t clear about the intention of creating such a group.

How FIG Work?

  • The whole thing is based on Voting by PSR Workflow ByLaw (http://www.php-fig.org/bylaws/psr-workflow/)
  • Proposal are made in FIG and voted for acceptance
  • Status change over from Accepted, Review, Draft and deprecated
    • Unless a PSR is marked as “Accepted” it is subject to change.
    • Also we should not use Draft which can change drastically,
    • Review will only have minor changes.
  • The above FIG has group people voters from varity of projects/frameworks Like Symfony, CakePHP and also from phpDocumentor, Composer (ofcourse!) http://www.php-fig.org/members/
  • Now hopefully we’ve understand what does PSR means. Now, lets see what are PSR accepted/approved standards. Each PSR are represented by PSR-N, where N is PSR version number.

PSR Approved/Accepted Standards:

  1. Basic Coding Standard – PSR-1
  2. Coding Style Guide – PSR-2
  3. Logger Interface – PSR-3
  4. Autoloading Standard – PSR-4
  5. Caching Interface – PSR-6
  6. HTTP Message Interface – PSR-7

In our next blog we’ll see about how to use “PSR-4” Autoloading standard and “PSR-1, PSR-2” Coding standards.

AngularJs Tutorial 8 — Simple Notification Directive Using Event Dispatcher

Now this is fast, my second article in a day. I guess its the only way to stop thinking about ‘She-Who-Must-Not-Be-Named’. Well coming to matter at hand, I worked in AngularJs for a while and always missed a good notification thingy. Twitter Bootstrap notification seems good, but, so static like a zombie. So, finally thought of creating one angularjs tutorial! A simple angularjs notification plugin/component.

Also, we are going to learn something new along the way

Event Dispatcher!!! (Taa-daa!)

Wait a minute, AngularJS has “Event Dispatcher“?? Yep! They do… and they are done using “Angular $emit“, “Angular $broadcast” and “Angular $on

Ok, before going deep, why the hell should i use “Event Dispatcher” if i could do a simple inheritance like function call?!!

Answer: Some actions or asynchronous activity should be handled in a way which shouldn’t alter the existing application flow. Like in our case, even if notification doesn’t work, its a not big deal, but, it shouldn’t interrupt our actual application flow.

And geeks used to call this as Observer pattern.

Some other good examples are ‘logging’.

Generally, an Event has ‘Publisher’ and ‘Subscriber’. In our case,

  • Publisher – $emit & $broadcast. The difference between both of’em are
    • $emit – dispatches the event upwards through the scope hierarchy.
    • $broadcast – dispatches the event downwards to all child scopes,
  • Subsciber – $on

Now, for our example we need existing cool notification library and Noty (http://needim.github.io/noty/) is one of the few best notification plugin library available. (simple and… cool)

                                         


Checkout -> https://github.com/sk8terboi87/Just-Anguled

1) jade/index.jade

2) coffee/directives/notificationDirective.coffee

3) coffee/controllers/NotificationController.coffee

4) coffee/kickstart.coffee

As you can see:

(1) Like before we created a directive, with 4 params. 

  • Always remember the rules, the only way to send a message to a directive must be through ‘isolated scope’ else, its not a reusable component. Each should independent!

(2) Our ‘notifcationDirective’. Pretty understandable!


(Note: Here we added a “$watch” on ‘uuid’. Because, we need to know whether the data outside our directive gets changed or not. Suppose, if we watch on ‘message’ and message is same for the second trigger also, $watch thinks as the previous one. So, we are watching something which changes on every action trigger.)

(3) Our Event Publisher, its Publishes data when button gets triggered

  • $scope.$emit('notifyEvent', notifyData)  – eventName and eventData (2 params)

(Note: Here we are just manually triggering sending the data. We can easily changed to how we need)

(4) Our Event Subscriber, Receives the data whenever a publisher pushes the data

  • $scope.$on(‘notifyEvent’, (event, data) 
  • From here, we are pushing the data to our jade/index.jade where our directive is located.

Thats it!! Now, try clicking all the actions….. pretty cool, huh! (Check their plugin for more options to meddle with)






(I know, screenshot is worse xD)

Thats it for now!!! An event handling in AngularJs is so very easy peasy.


Check it out —> https://github.com/sk8terboi87/Just-Anguled

References:

  1. http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs
  2. http://docs.angularjs.org/api/ng.$rootScope.Scope
  3. http://needim.github.io/noty/

AngularJs Tutorial 7 — Creating a Simple Component using Directives (with a Charts example)

Its been a while. (seriously!), its like getting awake from incubation chamber and write another angularjs tutorial!!

And, today we gonna see AngularJs Directives.

Why should i use Directives?!

  • Reusable components!
  • NEVER manipulate DOM from your Angular controller/anywhere except via directive

They are…  “A powerful tool for modifying the DOM”. As we know, AngularJs does the compilation stuffs of DOM and any other event related to it and if we directly add some event (like we do using jQuery) is seriously wrong. We surely end up messing AngularJs.

To handle this, Angular Js Directive provides a methods such $compile, and whatever we mention their will get compiled by AngularJs itself.

AngularJs Compilation Cycle:

Compile function:

  • Used for template DOM manipulation ,
  • Provided by directive, (Hence manipulations that apply to all DOM clones of the template associated with the directive.
  • Ex: Manipulation of tElement = template element)

Link function:

  • Used for registering DOM listeners and as well as updating the DOM.
  • It is executed after the template has been cloned — e.g., inside an <li ng-repeat…>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element.
  • Ex: $watch expressions on the scope, manipulation of iElement = individual instance element

Now, getting back to our example, but  before that I’m not gonna start teaching from “Hello directive”. Eventhough AngularJs documentation sucks, go through it anyway, we will get a basic idea. http://docs.angularjs.org/guide/directive

Now, lets see the AngularJs directive using ChartJs

And here is the Repo : https://github.com/sk8terboi87/Just-Anguled

1) jade/views/charts/index.jade

2) coffee/kickstart.coffee 

3) coffee/directives/piechartDirective.coffee


As you can see:

(1) We just created a directive element called trackr-piechart using an Element.

(Note: You can even create element like <div trackr-piechart=''></div>, but, as conventation to be followed according to AngularJs,

  • Use an element when you are creating a component that is in control of the template.
  • Use an attribute when you are decorating an existing element with new functionality.
  • Also, make sure to keep a ‘prefix’ for your directive element, (if in case, may be in future HTML 8 or 9 and there already existing an element ‘<piechar..’> might clash with ours. so go with prefix! 🙂

)

And, we have passed ‘title’ and ‘data’ to the directive

(2) Injection and defining our chart module

(3) In Piechart directive, we have used

  • @chartModule – using the chart module we have created to make a directive (watch the naming convention of the directive with the element, it matters!)
  • scope – Making it isolated scope. so can can use many ‘piechart’ individual components multiple times in a page.
  • restrict – Restricting only to ‘E’ means element.
  • templateUrl – We are keeping the template separate, though you can keep it here itself. Might look ugly if the template starts to grow
  • link – Whatever mentioning here will be added to the link cycle of AngularJs

Thats it. Add some data in our controller and which it make a beautiful piechart. Easy peasy!!!

(Experiment: copy and paste many <trackr-piechart> and provide different data they will work independently thats how a component should be!!! (Thank the isolated scope)

Now, the disadvantage of isolated scope is, you cannot directly tie the controller to our chart directive.

(4) coffee/directives/linechartDirective.coffee

For this, checkout our second linechart example

Setting ng-model

As you can use, we tie the input title to the directive template and added a $watch in our directive to know anything changes. Thats it!!!

Check it out —> https://github.com/sk8terboi87/Just-Anguled.git

References:

  1. http://chartjs.devexpress.com/Demo
  2. http://docs.angularjs.org/guide/directive
  3. http://stackoverflow.com/a/12570008/1172872

CakePHP — Fixing Mod Rewrite Issue in Ubuntu

Here we are going to take about how to fix ” Fixing Mod Rewrite Issue” in CakePHP. I’m sure if you have(tried) installed CakePHP in Ubuntu, you definitely would have seen this message.

” URL rewriting is not properly configured on your server.”

And the darn page opens without any css and no URL rewriting (ofcourse, duh!)

Just follow the below checklist, I’m sure you might have missed any one of’em(like i did now ^^”)

Following are the Checklist for Fixing Mod Rewrite Issue

1. Verify all three .htaccess. (yep, three!)

~/projects/cakephp/.htaccess

~/projects/cakephp/app/.htaccess

~/projects/cakephp/app/webroot/.htaccess

(Important: If you have tried unzip the content of CakePHP source, somehow, .htaccess in ~/projects/cakephp/ got left out… damn!!!)

2. Enable mod rewrite ofcourse! (just double check it :P)

3. Proper permission for /tmp and /webroot

4. Enable “AllowOverride” in Apache

5. Check for `cake.generic.css’ (Seriously, crazy fix!!!)

CakePHP guys showing the URL rewriting issue if the css is not present. sheessh!!! (pss: I’m using CakePHP 1.3, my favorite!!!)

Well,  Thats it for Fixing Mod Rewrite Issue!!!! I’m sure one em will help you fellas or else you will ended up spending hours scratching your head!! xD

AngularJs Tutorial 6 — Pt 3 — Building a RESTful Application With PHP & MongoDB

I guess all the people are same, inside. All they want is fun and when commitments comes by, they say ‘Ta-Ta’!!!. God, when are they gonna learn “You have to fight for something u believe in and nothing can be obtained without sacrificing certain things’….But, I have no regrets, I gave everything, but, you will have.

“If you love somebody, let them go. If they return, they were always yours. If they don’t, they never were.”

Anyway, back to topic.

Our final tutorial in building a Restful API – AngularJs & PHP (with MongoDB) is Complete!!!

So, What are the things we gonna see…

  • [API] – CORS!!!
  • [UI] – Advanced concepts in AngularJs $resource & Custom reusable resourceFactory

CORS – “cross-origin resource sharing”

It means “Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries.

To explain it simple, “Generally, One(web) cannot access or request or send resource to another domain, unless both present in same site(According to “Same Origin Policy“!). What CORS does is, it provides a way for cross domain access by specifying certain things in ‘header’ request, thereby allowing a site from another server can access!”

Example:

In our example, our PHP application runs in default ’80’ port. However, our AngularJS UI is executed via Yeamon-GruntJS, which is in 3501 port. So, when runned in browser, both act like in different server and our poor AngularJs cannot access our PHP/API part. 🙁

But, not to worry, Here comes CORS!!!

(https://github.com/sk8terboi87/simple-restful-tutorial-api/blob/blogs/app/index.php)

As you can see, all our response in our API are send to this ‘responseHandler’ method where we have specified our CORS.

Check here for detailed information about it

  1. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  2. http://enable-cors.org

Note: Normally, to enable CORS, you first have to send a ‘pre-request or pre-flight request’ from UI (before making the actual request). That is an “OPTIONS” (similarly to GET, POST…).

But, AngularJS is nice enough to send it automatically, so you don’t have to worry about it when using $resource.

Advanced concepts in AngularJs $resource

“AngularJS Promise variables – $then & $resolved”

Before jumping into this, some have no idea what this is.

In our blogs application, we are making a request to fetch all ‘blogs’ from API and display in a nice tabular form.

Our code is something like this,

The second line makes an ajax call to API, and the result is binded to ‘$scope.blogs’ as expected. But, JavaScript goes in ‘asynchronous’ way, what happens is, before getting the result, our third line will be executed, which causes ‘undefined’ thingy!!!

To solve this, we need to make certain things in our code, ‘synchronous’, i.e We need to bind our ‘$scope.blogs’ only when we get response from ‘blogResource’. This is where AngularJs ‘$then & $resolved” comes in.

For updated code looks like this,

‘$then’ from AngularJs will be executed only when response comes in. Thus making our two-binding works nicely.

(Note: Older version of AngularJs $resource will not send $then)

And our lastly, our Reusable ‘resource factory’

https://github.com/sk8terboi87/simple-restful-tutorial-ui/blob/blogs/coffee/Services/resourceFactory.coffee

This is a separate AngularJs factory which we used along with the controller showed before. We can use this simple usable resource methods for all of our new modules, say ‘Users’ or ‘Categories’ or ‘whatever’. Just inject in our controller, thats all. You can easily make a any kind of calls to our API.

(Note: PUT request is not directly available by AngularJs $resource, so, you noticed the difference in our code)

Thats it for our Simple Restful tutorial!!! Even though my explanation seems lil big, just browse the code to know how simple this is :). Just small bunch of files which creates an entire CRUD application.

What we have so far done is just a start, we will slowly continue to evolve… to next level. So, be sure to be with me 🙂

(And don’t forget to share :P)