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.
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.
You can even revoke permission later to any site by clicking the label in address bar.
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.
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.
Focus on business logic, not on framework
For users looking for fast development also providing a structured UI FRAMEWORK
Written with next-generation EcmaScript. Integrates with Web Components.
Similar to AngularJS, “Two-way” Binding
Can be written using ES5, ES 2015, ES 2016 and TypeScript
4. After executing this command, you will be inside the container. lets check whether it is installed correctly with the $ aurelia
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)
Now cd /Aurelia
Run the command to create a new project au new --here
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)
Now see the project directory, it’be created.
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)
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.
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
Docker for Windows (recommendedfor windows 10 machine!)
Now let’s verify whether Docker is installed, go to Powershell and type docker --version. Did you get the below
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
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
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.
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
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.
(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.
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:
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)
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
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!!!
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!”
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. 🙁
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,
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)
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 🙂