Frontend Archives

Must Need VSCode extensions for Angular Development.

Here I listed the most unique , useful & must need VSCode extensions for Angular development.

With my experience and the plugins I used, Here I listed the most unique , useful & must need VSCode extensions for Angular development.

Must Need VSCode extension for Angular Development.

JSON2TS

JSON2TS is a really cool and effective extension which convert a JSON into TS interface object by simply copy & pasting the API response or API URL.

This will be more effective if you are playing with a huge JSON object responce.

cmd+alt+V or ctrl+alt+V. - Copy the JSON content and paste inside
the interface file with the mentioned shortcut.
(Rename the interface if required)

cmd+alt+X or ctrl+alt+X. - Copy the API URL and paste inside
the interface file with this shortcut

angular2-switcher

You can switch between the HTML, TS, Specs, CSS files of the respective component rapidly using simple keyboard shortcuts after adding this extension.

alt+o(Windows) shift+alt+o(macOS)if on .ts|.css|.spec.ts: go to html
if on .html: go to previous
alt+i(Windows) shift+alt+i(macOS)if on .ts|.html|.spec.ts: go to css
if on .css: go to previous
alt+u(Windows) shift+alt+u(macOS)if on .css|.html|.spec.ts: go to ts
if on ts: go to previous
alt+p(Windows) shift+alt+p(macOS)if on .ts|.css|.html: go to spec.ts
if on .spec.ts: go to previous

Angular Language Service

This is another effective extension which assist you in auto suggest variable in template file (HTML) which are declared in TS.

As you can access the TS declarations inside the HTML template which result in preventing variables mismatch & saves more time as you need not go back and refer the TS file for declaration.

Angular v7 Snippet

This extension helps you in unfold the complete code snippet by typing part of it. Really helpful if you don’t want to type the snippet by yourself altogether.

Other Extensions

TSLint – To find & fix the lint error on the go. This will align with your TSLint configuration.

Sass – Intended Sass autocomplete, snippet & prettifier.

Bracket Pair Colouriser – To identify the matching brackets with colors.

These are the extensions which I mostly use with VS code while developing the Angular application. The comment section is open to sharing the name of your favorite and recommended plugins which increase productivity on angular development.

Essential Frontend Development Tools Used By Developers

There are various factors that influence the development of a complete website or an application. Being a frontend developer, you are required to prioritize your skills and put efforts in the right direction to ensure everything is developed properly. There are scores of frontend development tools that oil the wheels of front-end development. In this article, we have discussed the essential development tools to help you develop your web project on time and within budget.

Chrome Developer Tools

What about if you could edit CSS and HTML in real-time and analyze the performance of your website thoroughly? Google’s built-in Chrome Developer tool lets you do the same on Chrome and Safari. You can get access to the internals of web application; optimize the loading flows with the help of network tools and can analyze how the browser is performing at present.

Twitter Bootstrap

Looking for an open-source web framework for front-end development of websites and applications? One of the widely used frameworks is Twitter Bootstrap that contains design templates for typography, forms, buttons, navigations and JavaScript extension. It helps developers support application’s new elements in a quick and convenient way, and cut down the amount of code and time to build your project.

Sass

Sass is something the front-end developers cannot afford to neglect. It is the most reliable and robust CSS extension language that helps to expand the functionality of an existing CSS of your suite. It helps writing maintainable and future-proof code while reducing the amount of Cascading Style Sheets (CSS) you have to write. The development tool is compatible with all CSS versions and comes with tons of features that help you meet your goals before the deadline.

Sublime Text

Sublime Text is the widely used code editor that features a well-designed and speedy user interface. The keyboards shortcuts of the program help to perform changes to multiple areas simultaneously. It also supports quick navigation to lines, symbols, and files. It is compatible with many programming and markup languages.

Foundation

Foundation is among the most advanced and responsive CSS and HTML5 frameworks that facilitate the front end development of top-notch websites and applications. It is a flexible and customizable framework that allows designing visually appealing websites, apps, and emails. The features help you prototype and modify to get your projects polished.

Emmet

Being a front-end developer you are in need to have certain tools to help you write HTML, CSS or XML coding without irregularities. The Emmet (formerly Zen Coding) is a set of plugins that help developers write and edit the code of a website in no time. It uses a specific syntax to expand abbreviations of code into complete HTML code. It has been incorporated into several plugins and text editors developed by the Emmet team. However, it is not dependant on any text editor and works directly with text rather than with any particular software.

GitHub

GitHub is another prolific development tool that lets you view the changes you’ve made and undo these changes in case of errors. The repository hosting service offers several other features such as task management, bug tracking and wikis for projects.

Hope you will find these frontend development tools helpful in developing full-fledged websites and apps within a given time frame and budget.

Author Bio:

Angela is serving as senior editor and analyst. She has tremendous expertise in Spying Apps for kids monitoring, employee monitoring, business management, and business security. The series of published articles on global forums are the testimonies that she is expressive and can naturally convince readers through her creative works. Follow her on twitter @LatestTechBlog

How To Send Push Notification In Ionic Android App

In this tutorial, I am going to explain how to send Push Notification in Ionic Apps in a simple and more efficient way. Here am using Firebase Cloud Messaging (Google Cloud Messaging) for Android push notification and OneSignal to manage more segments for push notification to users and various platforms. You can integrate OneSignal with various platforms to push Notification.

This tutorial written for ionic 2 and above but still ionic 1 and cordova projects can follow same steps except sdk installation for send push notification.

Send push notification to you hybrid ionic app in 10 simple steps

Step 1: Create Firebase account

Create Firebase account from https://firebase.google.com and Create a new project. Use your App Name for easier identification.

Step 2: Navigate to Project Settings

Once the project is created, go to the project click Settings icon and Navigate to Project Settings.

Step 3: Get Server Key and Sender ID

In the Settings page, Navigate to Cloud Messaging tab to get Server Key and Sender ID. Copy Both keys and save in secure place. We need this key to configure OneSignal platform.

Step 4: Create OneSignal Account

Now Create OneSignal account from https://onesignal.com and Create a new app. Use your App Name for easier identification.

Step 5: Select Platform in OneSignal

Now Select Android platform from the list and Click Next. You will be prompted to insert your Server Key and Sender ID.

Paste the Value which we copied from firebase in Step 3 and Click Next.

Step 6: Select SDK

Select the SDK of our Project. Currently, here we have to select Ionic/Cordova/Phonegap and Click Next.

Step 7: Install OneSignal SDK

OneSignal will generate App Id for the app. Now its time to install OneSignal SDK in our Ionic app.

$ ionic cordova plugin add onesignal-cordova-plugin

$ npm install --save @ionic-native/onesignal

After plugin installed, now add a plugin to your App Modules file “App.Module.ts”.

...

import { Onesignal} from '@ionic-native/onesignal';

...

@NgModule({
  ...

  providers: [
    ...
    Onesignal
    ...
  ]
  ...
})
export class AppModule { }

Step 8 : Configure “app.component.ts”

Usage

Let’s Initiate OneSignal and Subscribe the Device to OneSignal Service. Use the following code in “app.component.ts” file. Replace OneSignal App Id and Firebase Sender ID in the following code.

import { OneSignal } from '@ionic-native/onesignal';

constructor(private oneSignal: OneSignal) { }

...
//Replace APP ID and Sender ID
this.oneSignal.startInit('', '');

//Type of Alert
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);

//Handle Event when push notification is received when app is running foreground 
this.oneSignal.handleNotificationReceived().subscribe(() => {
 // do something when notification is received
});

//Handle Event When user clicks on the push notification
this.oneSignal.handleNotificationOpened().subscribe(() => {
  // do something when a notification is opened
});

//Subscription Initialized Successfully.
this.oneSignal.endInit();

More OneSignal functions available here https://ionicframework.com/docs/native/onesignal/

Step 9: Add Android Support repository

Make Sure your Android SDK installed with Android Support Repository and Google Repository.

Step 10: Trigger Push notification to your App

Build your app and Go to OneSignal page and click registered devices and Try Sending One.

Note: If you receive push notification when app is opened and app running in background but not when the app is closed. Then the problem is your device custom ROM terminates the GCM to save battery. Make the app trusted or add to the auto startup.

Upgrade Application from Angular 2 to Angular 4

Angular 2 to Angular 4 upgrade is much easier than you imagine. Minimal changes in your package.json and tsconfig.json is enough to run your app developed in angular 2. As Angular has backward compatibility which runs previous release apps in the new upgraded version.

Angular 2 to Angular 4

Pakage.json changes

For upgrade, just change the “Dependencies” & “devDependencies ” portion of the package.json

Upgraded Package.json content.

"dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.2.0",
        "systemjs": "^0.19.47",
        "zone.js": "^0.8.5"
    },
    "devDependencies": {
        "@types/node": "^6.0.60",
        "concurrently": "^3.1.0",
        "lite-server": "^2.3.0",
        "typescript": "^2.2.2"
    }

tsconfig.json changes:

Upgraded tsconfig.json content

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Clean your node_module directory after altering the package & tsconfig files.

Run the below command in the node root directory which will make your Angular 2 application up and run in Angular 4 framework.

npm install && npm update && npm start

Key points for Angular 4 development

Don’t use extends onInit event or with any life cycle event.
Don’t use DefaultIterableDiffer,KeyValueDiffers#factories or IterableDiffers#factories.
Don’t use deep import as it is not a part of public API.
Don’t use Renderer.invokeElementMethod as it is removed. (No replacement as of now).
Rename template tag to ng-template.
Replace OpaqueTokens with InjectionTokens.
Remove ChangeDetectorRef argument from DifferFactory.create(…).
Replace ngOutletContext with ngTemplateOutletContext.
Replace CollectionChangeRecord with IterableChangeRecord.
Import BrowserAnimationsModule if you are using animation in your application.
Replace RootRenderer with RendererFactoryV2.
By default, novalidate will add to the FormModule. To revoke the native behavior add ngNoForm / ngNativeValidate.

Finally, now you are good to go with Angular 4.

5 Essential Browser Plugins for Frontend Developers

Along with developer tool of chrome, I have 5 essential browser plugins which make me feel more flexible with developing and debugging the web application. I always keep these plugins to make my work easy. Most you may already come across a couple of these plugins but rest will lighten and faster your development process.

Essential Browser Plugins

Colorzilla

Colorzilla is a most useful and essential browser plugin for effective color sampling which allows you to pick a color from the live page or a pallet or browse colors. Along with that Colorzilla have a web page sampler that allows you to create pallet group that is used in the sampled web page. Colorzilla also has the css gradient generator which automatically generates the css code for the designed gradient.

Available for : Chrome / Firefox

Page Ruler

Most useful and flexible ruler tool to measure the pixel perfect dimension of the elements on the screen. Fast and reliable when compared to the other measuring tools available. Measuring is so simple, just click, drag and get the dimensions.

Available for : Chrome / Firefox

Note : If you need ruler for Firefox try MeasureIt

Fontface Ninja

Essential browser plugin to analyze and verify the font face used across the website. The lovely feature is the UI of the extension. You can also feel it by activate the extension and hover the mouse on the required text. A pop-up clearly shows the Font Family, size vertical and horizontal line spacing.

Available for : Chrome / Firefox

Css Viewer

This extension allows you to view the consolidated css property of the element. It’s so easy, just activate the plugin by right click in the browser window and select the Css Viewer from the right popup menu. After that hovers the mouse on the element. A new css popup panel appears and lists all the consolidated css attribute and value of the elements. Use”Esc” key to close the popup. This extension is more helpful in debugging phase.

Available for: Chrome / Firefox

Lorem Ipsum Generator

This is a handy extension to create an appealable dummy text while developing the website. If you are developing a site in WordPress or on any CMS this extension will help you to get the dummy text in a couple of clicks. The best part is it’s an open source project.

Available for: Chrome

If you need extension for Firefox try Dummy Lipsum

Also have a look on Popular Frontend Framework you must try at least once.

Popular Frontend Framework you must try at least once.

Web development reaches new era after the HTML5 and CSS3. The frontend framework is the first thing hits our mind whenever we hearing the word “Let’s develop a new website”. While architecting the project everyone prefer to use the popular front-end frameworks.

This is common that the people like to walk on their legs, Some crazy guys do it by hand, am sure it will be more fun while walking with hands. similarly, I decided to try some of the frontend frameworks which are not that frequently used as Bootstrap and Foundation.

Let’s have some fun!

Here come the heads up for some framework I tried.

Materialize

Materialize is a modern responsive framework based on the Google’s material design. The materialize frontend framework also support SCSS (CSS preprocessor). It had its own package of icons, button styles, cards etc. The developer who knows less about designing and want to implement the material design then this is the right pick.

Materialize have their own portal for showcasing the websites which are developed using their framework

UIKit

UIKit is one of the remarkable frontend frameworks which has the both LESS & SCSS support. It is considered as highly modular front end framework. The special admiring part of the framework is the naming conviction used for the class.

This framework suits for the developer who have basic knowledge on front end development.

Pure

Pure is a remarkable responsive framework from the popular brand YAHOO! It’s well known for its light weighted CSS modules. Pure doesn’t have JS support library.

Pure is preferred for the developer who wants to develop a responsive site rapidly with lightly weighted frontend framework.

Skeleton

Skeleton is more light weighted when compare to Pure as it only has the basic modules to build a responsive design. Even though it is lightly weighted skeleton is bare enough to develop a small responsive web application. It also have the responsive grids, and basic components like buttons, forms, table, list etc.

The web development doesn’t require all the styling of the large framework then skeleton is a preferred choice

Numerous frameworks are available now., in which I listed the frameworks that I tried and admired.