Now you can Subscribe using RSS

Submit your Email
Touch ME slider for IOS, Android and Desktop.
Hardware accelerated using CSS3 for supported iOS
and enjoy the Amazing Slide Experience.
20 Mar 2016
Responsive Design, that will make you blow away.
Hardware accelerated using CSS3 for supported iOS
and enjoy the Amazing Slide Experience.
20 Mar 2016
Flexible Display providing efficient compatibility.
Hardware accelerated using CSS3 for supported iOS
and enjoy the Amazing Slide Experience.
20 Mar 2016
Customize it to the deepist according to the needs.
Hardware accelerated using CSS3 for supported iOS
and enjoy the Amazing Slide Experience.
20 Mar 2016

Hide the navigation bar in jHipster Angular 2

NIFRAS ISMAIL
Hiding a navigation bar is the easiest solution on Angular 2 version of jHipster. For this, you need to create a NavService and implement it on every component you need to show the navigation bar.


Let's first create a service in the directory of your navigation component resides.

import { Injectable } from '@angular/core';

@Injectable()
export class NavbarService {
  visible: boolean;

  constructor() { this.visible = false; }

  hide() { this.visible = false; }

  show() { this.visible = true; }

  toggle() { this.visible = !this.visible; }

}

There after you need to call this service on your navigation component constructor

import { Component } from '@angular/core';
import { NavbarService } from './navbar.service';

@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html'
})

export class NavbarComponent {

  constructor( public nav: NavbarService ) {}

}

After the use, the above declared filed on your view in ngIf to show and hide the service 

<nav *ngIf="nav.visible">
 ...

</nav>

Finally, show and hide your navigation bar by injecting the service to your component and enable or diable it. By default it is disabled/hidden.

import { Component, OnInit } from '@angular/core';
import { NavbarService } from './navbar.service';

@Component({
})
export class ExampleComponent implements OnInit {

  constructor( public nav: NavbarService ) {}
}
ngOnInit() {
  this.nav.show();
  this.nav.doSomethingElseUseful();

}

That's it, now you have the custom navigation service to handling and controls the view level of your navigation bar utils. 



Debug your Laravel Application on PhpStrom

NIFRAS ISMAIL
Debugging is the key concept while we writing thousands of lines in code. In most of the cases, developers set the breakpoints and test the code it is work as expected. 

In PHP framework like laravel, normally we are using var_dump(), echo and dd command to see the values. But do you think it is a proper way to debug? 

In this session, I give you some few steps to debug your laravel applications using PhpStrom and Xdebug. Just follow the step one by one.

Download the Xdebug and Configure with your PHP installation

Go to the Xdebug download page and download the proper version of xdebug of your PHP version. If you find difficult to find the correct version of Xdebug better go to custom installation instructions link on the same page. 

If you click the custom installation page follow the instruction to install Xdebug and configure it.

After that install the browser extension for Xdebug. 



Connect PhpStrom and Xdebug


After you finish the installation, Start your laravel project by entering the following command 

php artisan serve

then go to your browser and check it. your application is run without the debugger. 

Example: http://localhost:8000 will show your welcome page. 

After that in your browser click, the bug button appears on your web page and click Debug. Then the button appears as green. 

Then, go to your PhpStrom and click the button 
 
and it will show up as
It means the PhpStrom is listening the debugging session of the browser. 

Then setting the break point on your code and refresh the page. You will point to the breakpoint when your code is triggered. 


  

Web Optimisation

NIFRAS ISMAIL
Web optimisation is the key part of web development and it is the trick to increase the viewers count.

Seeing as 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load

Eliminating the unnecessary downloads.  

Web pages are the systems installation not required. They are always downloaded from the server and show the application view to the users. So if we are not optimised the page. It is downloading whole resources and shows to the users it takes more time. So we need more concern on optimising the downloads to the user what he really wants. 

Encode and optimise the transfer size.

Improve the page speed, we have to optimise the overall download size and minimised it by using the following techniques. 

Data Compression 

The next step in the optimisation is to compressing the resources the browser has ready to download. we are able to do the pre-processing to compress the resources like texts, images, videos and etc. on the server. 

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16

AAAZZBBBBEEEMMM EEETTTAAA

The above message contains 200 character message. which include comments, headers information key value pairs and some payloads respectively,

How can we optimise this message? 

  1. The comments are awesome, but they do not affect the meaning of the image, so eliminate it when you transmitting the message to the browser.
  2. The message have format and date on all its headers so make them into id like that, we skip for now this conversion
  3. The payload has some repeated characters so we change them into another format. or we are able to use any efficient chipping techniques. 
If we do the above compression we got the compressed message as follow


format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Here this message have only 54 characters and the compression rate is 72%, But we are not the concern on the algorithms, we need to concern about the compression based on the different algorithms based on the data types so we need to do preprocessing, context-specific optimisations, and different algorithms for different content.

Minifications : preprocessing & context-specific optimisation 

The best way to redundant the arbitrary data is to reduce the size of we convert them to other optimised format without changing the meaning. 

An example below shows the simple code of a page. 

<html>
  <head>
  <style>
     /* awesome-container is only used on the landing page */
     .awesome-container { font-size: 120% }
     .awesome-container { width: 50% }
  </style>
 </head>

 <body>
   <!-- awesome container content: START -->
    <div>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>




How we are going to reduce the size of the above page?

  1. Simply we are doing this remove the comments as we did above. 
  2. Also, a smart CSS composer notifies the .awesome-container is handled on an inefficient way. 
  3. An additional composer removes the white spaces.

So our final code looks as follow

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>



After we did the compression our page goes to from  406 to 150 characters, a 63% impression. 

Similarly this technique can be extended to images, videos and other content types. 

For example, whenever you take a picture with a camera, the photo also typically embeds a lot of extra information: camera settings, location, and so on. Depending on your application, this data might be critical (for example, a photo-sharing site) or completely useless, and you should consider whether it is worth removing. [ Google Optimised Tutorial ] 

Text compression with GZIP

GZIP compression is the highest pay-off technique to compress the texts and libraries.

If you are a web developer, you should be experienced in the area of GZIP compression. Have you ever seen jquery.min.js the .min is normally used to identify the GZIP compression files? 

The compression ration of the popular libraries as follow 
















Angular 2+ Forms - Validating the Template Driven Forms

NIFRAS ISMAIL
In this mini session we are going to look after how to validate a template driven from in Angular 2 + application.

Here is the plunker :




Here we can able to use the 4 built-in type validation like HTML form validations. required, pattern,
minlength and maxlength


Angular 2+ Forms - Nesting Form Data

NIFRAS ISMAIL




Another interesting part of the Angular 2 forms is Nesting the forms data. 

Example in complex forms like sign up form to getting lot of information from the users. It is easy to grouping the data into relevant groups. 

Let's go to the real feel. Check on the below plunker and you would be feel better on filling the group field and read the JSON response rather than read from the long list of JSON








Angular 2+ Forms - Template Driven Forms

NIFRAS ISMAIL
Forms are doing a big job on I/O handling in a web application. Especially in Angular 2 application, we are using the NgForm directive to handling the normal forms with the more advanced feature enabled forms. 

In Angular 2, They introduced two types of modules to handle the NgForms. They are 
  1. Template Driven Forms
  2. Model Driven Forms
to enabling this forms in your application, you need to import some modules. as follow in your root module. 


Here we are updating two modules from @angular/forms and we put the FormsModule and ReactiveFormsModule in the imports array.

After enabling the forms we are going to look after the template driven forms.


Template Driven Forms

Template Driven Forms are enabling by importing the FormsModule in your app.module.ts,  We already show you how to enable it on above snippets. 

Here when you look on into the app.component.html 

Every form is an instance of the ngForm directive. Here the signupForm is the instance of the ngForm directive, not the form directive. If you remove the line #signipForm=ngForm to #signupForm then it only points to the form directive. 

then (ngSubmit) is the built-in method to whenever the form is submitted. 

ngModel is turned the form field to FormControl using the name property. In the method, we declare on app.component.ts ( registerUser ) we can access the signUpForm values by accessing using the signUpForm.value to getting all values of all FormControlls. Also, you can validate the fields using the signUpForm.valid, Here we don't have any validation rules. So it is by default true. 




Angular Stack -Introduction

NIFRAS ISMAIL
Angular releases are making a massive amount of concern and breakdown changes on developer world. They have released the latest version as Angular 4. The major breakdown happens on Angular 2 and it completely changes the architecture of Angular. You don't need to know any syntax or concept from Angular 1 to be a fresh Angular 2 developer.


What’s new on Angular 2



Modular Architecture: This gives easy to create a big application in modular basis, this makes easier to divide works to work in parallel. This modularity makes easier to maintenance and scales up the project easier.


Better performance comparing with Angular 1:
  1. The change detection is improved and AOT compiler to big deals with the browser. 
  2. It made to scale:
    The core is module system
    Dependency injection
  3. Supporting to the Typescript and tooling
  4. Supports to CLI, Native script and more.
  5. A complete solution for production ready



Structure of Angular 2 Application



The structure of the Angular application module is pretty clear. The application contains encapsulated as Root module and it contains for major parts, they are components, pipes, services and directives. We’ll go to see each and every part deeper in later sessions.  Also, Angular root module contains able to import components, they are feature module and built-in modules.


Angular 2 Modules
These are the so-called collection of components, directives, pipes and services. The modules are as known as elements of Angular 2. There are four types of modules in Angular 2, They are:
  1. Root module - The application only able to have one and only root module.
  2. Built-in-modules - These are modules supports you to access the complete application workflow, Example of built-in modules are BrowserModule, Forms Module and etc.
  3. Feature Module - these modules can able to create by you to give a clear explanation of the encapsulation of your project. This is an optional one. You don’t need to have it on your project all time.
  4. Third party modules - This is some additional modules getting from the community or corporate to use in your application. Angular Material, UIGrid are some famous third party modules.


Angular 2 application is the collection of modules. Which begins from the root modules. You can able to import other modules to your application and extend the functionalities from there to you.


When we see the generic structure of the module


The structure tells you to need to import the NgModule from the @angular/core and define the objects on @NgModule


As from the above code you don’t need to set all properties. You can properties what you need really.


The usage of these properties are here:
  1. imports: This is the property of array module you are importing from other modules like built-in-modules, feature modules, and third party modules.
  2. declarations: components, directives, and pipes defined in our modules.
  3. providers: services defined in our module
  4. exports: components, directives, pipes available for other modules bootstrap:
  5. the root component of the application.


We have seen the generic structure of the module and we know there is a different kind of modules.


Now we look on to the structure of the root module





This is the same as the generic structure we cover earlier. You may notice on your Angular applications, The Root Module is called AppModule in applications. This is the convention used by Angular Team.


Also, the root module doesn't use the property called exports. That mean root module could not able to reuse within the application. Only one root module in an application.


The root module always imports BrowserModule. The way to differentiate with Feature module, the feature module usually import the module called Common Module, not the Browser Module. Why we import Browser Module inside the root module? The reason is you can access easily the ngIf, ngFor like common elements.


Now we are going to cover the Feature Module.



Here in feature module you use import, declarations, providers and exports. Here all the elements are by default private. if you want to make public you put them into the exports. Here I add MyComponent and MyDirective on exports array. That means any of the module can access this.


Services are public by default. Please keep it in mind. Services is a only type element always available everywhere.


Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates