Monthly Archives: January 2019

AG-GRID IN ANGULAR

AG-Grid in Angular:

AG-Grid in Angular

The “ag” part of ag-Grid stands for “agnostic”. The internal ag-Grid engine is executed in TypeScript with zero dependencies. ag-Grid supports Angular through a wrapper component. The wrapper lets the user to use ag-Grid in the application like any other Angular component.

In this article, we will walk you through the essential steps to add ag-Grid to an existing Angular project, and configure some of the essential features of it.

Adding ag-Grid to the project:

ag-Grid and its Angular wrapper are distributed as NPM packages, which should work with any common Angular project module bundler setup. Let’s follow the Angular CLI instructions – run the following in the developer’s terminal:

npm install -g @angular/cli
ng new my-app –style scss –routing false
cd my-app
ng serve

Further, add the ag-Grid NPM packages and run the following command in my-app:

npm install –save ag-grid-community ag-grid-angular

Now, let’s add the ag-Grid Angular module to the app module:

import { BrowserModule } from ‘@angular/platform-browser';
import { NgModule } from ‘@angular/core';

import { AppComponent } from ‘./app.component';
import { AgGridModule } from ‘ag-grid-angular';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AgGridModule.withComponents([])],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

The next step is to add the ag-Grid styles – import them in styles.scss:

@import “~ag-grid-community/dist/styles/ag-grid.css”;
@import “~ag-grid-community/dist/styles/ag-theme-balham.css”;

The above code imports the grid “structure” stylesheet (ag-grid.css), and one of the available grid themes: (ag-theme-balham.css). The grid ships have some different themes; pick one that matches the project design.

Next, let’s declare the basic grid configuration. Edit src/app.component.ts:

import { Component } from ‘@angular/core';

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘app';

columnDefs = [
{headerName: ‘Make’, field: ‘make’ },
{headerName: ‘Model’, field: ‘model’ },
{headerName: ‘Price’, field: ‘price’}
];

rowData = [
{ make: ‘Toyota’, model: ‘Celica’, price: 35000 },
{ make: ‘Ford’, model: ‘Mondeo’, price: 32000 },
{ make: ‘Porsche’, model: ‘Boxter’, price: 72000 }
];
}

The above code represents two vital configuration properties of the grid – the column definitions and the data. In this case, the column definitions contain three columns, each column entry stipulates the header label and the data field to be displayed in the body of the table.

Finally, let’s add the component definition to the template. Edit app/app.component.html and remove the scaffold code:

<ag-grid-angular
style=”width: 500px; height: 500px;”
class=”ag-theme-balham”
[rowData]=”rowData”
[columnDefs]=”columnDefs”
>
</ag-grid-angular>

This is the ag-grid component definition, with two property bindings – rowData and columnDefs. The component also accepts the standard DOM style and class.

HANDY UTILITIES FOR NODE.JS

Handy Utilities for Node.js

Handy Utilities for Node.js

Node.js is a tool used in different ways in a variety of workflows and for a variety of purposes such as Front-end, back-end, APIs, robotics, APIs, and much more.

Node.js has been one of the best tools to build small, modular tools to make developer’s lives easier.

In this article, we have collected a list of different modules that a developer can install globally on their system to help improve their development workflow.

Create-react-app:

Firstly, install

npm install create-react-app –global

Create React App is a project to spin up a boilerplate application with React in just one command. It frames the fundamentals of React application with the necessities, including development tooling and a local server, out of the box testing, and a build step to prepare the React application for production.

Branch-diff:

Install:

npm install branch-diff –global

Branch-diff is a CLI tool that diffs two branches in a Git repository and produces a list of differences between two passed branches. The list can either be output as markdown or as console output. This small tool is useful when the developer is working across multiple branches and are looking to get a summary of the differences between the two branches.

Nodemon:

Install:

npm install nodemon –global

Nodemon is a small utility that will automate restarting a Node.js application when it detects a file change in the directory it runs in. Nodemon is a simple CLI tool that is exceptionally useful when working on a Node.js application and restating quickly – it will cut out the repetitive steps of switching to the terminal, ending the application’s process, and then restarting the application.

Localtunnel:

Install:

npm install localtunnel –global

Localtunnel is a helpful module that will expose an application running on localhost with a single command. For instance, if the developer is working with APIs and needs to provide a public URL, then the developer can use localtunnel to get an online, accessible URL without the need to deploy. Also, it is excellent for collaboration.

NVM – The Node Version Manager

Install:

# Since nvm’s not an npm module, you can install with cURL or wget

# Install with cURL:

Curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

# Install with wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
NVM is a CLI tool which is exceptionally helpful for Node.js developers. It also allows version management of Node.js. This means the developer can download, swap, and test on any version of Node.js. This is handy for testing modules on the current release line, in addition to the LTS release lines.

PATH MODULE IN NODE.JS

Path Module in Node.js

In this article, we are going to discuss building a Path module utility by using one of the module present in the Node.js modules library. There are numerous modules present in Node.js library such as OS module, path modules, net module, DNS module, and domain module. All of these modules are quite popular and used very commonly to build any Node based application.

Node.js Path Module:

1 // Command to import Path Module in Node.js.
2
3 var path = require(“path”);

Methods present in the Path Module of Node.js:

Below we have listed the basic methods and their descriptions which are present in the Path Module of Node.js.

path.basename (path, ext):

This method of the Path module is used to return the last portion of a path. It is similar to the Unix base name command.

path.dirname (path):

This method of the Path module is used to return the directory name of a path. It is akin to the Unix dirname command.

path.extname (path):

This method of the Path module is used to return the extension of the path, from the last ‘.’ to end of string in the last portion of the path. In the case, when there is no ‘.’ in the last part of the path or the first character of it is ‘.’, then it will return an empty string.

path.isAbsolute (path):

This method of the Path module is used to define whether the path is an absolute path or not. Such an absolute path will always resolve to the same location, regardless of the working directory.

path.join ([path1][, path2][, …]):

This method of the Path module is used to join all the arguments together and regularize the resultant path.

path.win32:

It is a constant that provides access to above-mentioned path methods, but it always interrelates in a way that is win32 compatible.

Illustration on use of Path Module in Node.js Application:

1 // Command to import Path Module in Node.js.
2 var path = require(“path”);
3 //1. Use of path.normalize () method.
4 console.log (‘Path normalization is : ‘ + path.normalize(‘/trail/trail1//doublehash/hash/tab/..’));
5 //2. Use of path.join () method.
6 console.log (‘joint path is : ‘ + path.join(‘/trail’, ‘trail1′, ‘doublehash/hash/’, ‘tab’, ‘..’));
7 //3. Use of path.resolve () method.
8 console.log(‘Path resolve is : ‘ + path.resolve(‘hello-nodejs.js’));
9 //4. Use of path.extname () method.
10 console.log(‘Path extension name is : ‘ + path.extname(‘hello-world.js’));
11 //5. Use of path.isAbsolute method.
12 console.log(‘Is Absolute path? : ‘ + path.isAbsolute(‘/PathModule/PathModule.js’));
13 //6. Use of path.dirname (p) method.
14 console.log(‘Path Directory name is : ‘ + path.dirname(‘/PathModule/PathModule.js’));
15 //7. Use of path.relative (from, to) method.
16 console.log(‘Relative Path is : ‘ + path.relative(‘/PathModule/PathModule.js’, ‘/PathModule/build.gradle’));
17 //8. Use of path.basename () method.
18 console.log(‘Path base name is : ‘ + path.basename(‘/PathModule/PathModule.js’, ‘.js’));
19 //9. Use of path.parse (pathString) () method.
20 console.log(‘Parsed path string is : ‘ + path.parse(‘/PathModule/PathModule.js’));
21 //10. Use of path.format (pathObject) method.
22 console.log(‘Path format is : ‘ + path.format(path.parse(‘/PathModule/PathModule.js’)));

Output:

When the user executes the above Node.js code, the user can observe the following output on the console.

1 joint path is : \trail\trail1\doublehash\hash
2 Path resolve is : C:\odesk\Abhishek Thakur\NodeJS\PathModule\hello-nodejs.js
3 Path extension name is : .js
4 Is Absolute path? : true
5 Path Directory name is : /PathModule
6 Relative Path is : ..\build.gradle
7 Path base name is : PathModule
8 Parsed path string is : [object Object]
9 Path format is : /PathModule\PathModule.js

CLASS BASED VIEWS IN DJANGO

Class Based Views in Django:

We often find that Django developers exclusively those new to the framework and even some advanced users choose to use function based views for most projects. This can be attributed firstly to the simplicity of using FBVs and a lack of understanding of the great advantages of using Class Based Views.

In this article we will be highlighting some of the major advantages and the features of CBV.

SOME OF THE PROS OF USING CLASS BASED VIEW:

  • Code reusability – In CBV, a view class can be inherited by another view class and altered for a different use case.
  • Code extendibility – CBV can be extended to include more functionalities using Mixins.
  • Code structuring – In CBVs a class based view helps the developer to respond different http request with different class instance methods instead of conditional branching statements inside a single function based view.

Django class based view provides a class instance method as_view() which serves as an entry point for any generic CBV. Django URL resolver expects to send the request passed through it to a function. The as_view() class instance method in each generic view creates a hook for calling the class just like a method.

As such, the url configuration for calling a CBV follows the pattern below:

urlpatterns = [
url(r’^homepage/’, ClassView.as_view(), name = “url_name”)
]

The as_view() method then calls the dispatch() method which in turn calls the class instance method defined for the applicable http request method if available or throws an HttpResponseNotAllowed exception.

CBV.as_view() ——> CBV.dispatch() ——————–
|       |       |      |  and so on.
v      v        v      v
get post head put

Base class attributes can be overridden in child class as with the standard Python approach. Instead, the new attribute can be passed as an argument to the as_view() method of the CBV.

USING MIXINS:

One of the benefits of using a Class based view its extendibility, this quality is further improved through the use of Mixins.

Mixins are a form of multiple inheritances that lets the combination of behavior from multiple parent classes. They are used to add additional functionality and behavior to classes. Mixins are intended to be inherited and not implemented directly. In CBVs Mixins are passed as leftmost argument while Django generic view classes are placed to the right.

Extending a class view with multiple Mixins can lead to some unforeseen behavior. However, if used with caution, mixins are great tools for adding robust functionalities to a CBV.

For instance:

class NewMixin(object):
def do_whatever(self, *args, **kwargs):
The above mixin is used as below:
from django.views.generic import TemplateView

class FreshViewClass(NewMixin, TemplateView):
def do_something_awesome(self):
continue here

The methods defined in the mixin can be called directly in the FreshViewClass class.

7 DIFFERENT WAYS OF CONDITIONAL RENDERING IN REACT

7 different ways of conditional rendering in React

A conditional render in React is no wizardry. In JSX – the syntax extension used for React – the user can use pure JavaScript. In JavaScript the user should be familiar with if-else or switch case statements, because they are the one of the vital pillars for learning React. The user can use these in JSX as well, since JSX only mixes HTML and JavaScript.

But you might ask, what is conditional rendering in React? In a conditional render a component decides based on one or several conditions which elements it will return. This article aims to be an in-depth list of options for conditional renderings in React. If you know more alternatives, feel free to contribute.

1. if else in React:

function List({ list }) {
if (!list) {
return null;
}

return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>

A component that returns null will render nil. However, the user wants to show a text when a list is empty:

function List({ list }) {
if (!list) {
return null;
}

if (!list.length) {
return <p>Sorry, the list is empty.</p>;
} else {
return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>

2.Ternary operation in React:

The user can make their if-else statement crisper by using a ternary operation. );

condition ? expr1 : expr2

3. Logical && operator in React:

It happens often when the user want to render either an element or nothing. For instance, the user could have a LoadingIndicator component that returns a loading text or nothing. The user can do it in JSX with an if statement or ternary operation.

function LoadingIndicator({ isLoading }) {
if (isLoading) {
return (
<div>
<p>Loading…</p>
</div>
);
} else {
return null;
}
}

function LoadingIndicator({ isLoading }) {
return (
<div>
{ isLoading
? <p>Loading…</p>
: null
}
</div>
);
}

4. Conditional Rendering with enums:

In JavaScript an object can be used as an enum when the object is used as a map of key value pairs.

const ENUM = {
a: ‘1’,
b: ‘2’,
c: ‘3’,

5. Multi-Level Conditional Rendering in React:

How about nested conditional renderings? Yes, it is possible. For example, let’s have a look at the List component that can either show a list, an empty text or nothing.

function List({ list }) {
const isNull = !list;
const isEmpty = !isNull && !list.length;
return (
<div>
{ isNull
? null
: ( isEmpty
? <p>Sorry, the list is empty.</p>
: <div>{list.map(item => <ListItem item={item} />)}</div>
)}
</div>
);
// Usage

<List list={null} /> // <div></div>
<List list={[]} /> // <div><p>Sorry, the list is empty.</p></div>
<List list={[‘a’, ‘b’, ‘c’]} /> // <div><div>a</div><div>b</div><div>c</div><div>
};

6. External Templating Components:

There exist external solutions to pact with conditional renderings. They add control components to allow conditional renderings without JavaScript in JSX. Then it is not question anymore on how to use if else in React.

<Choose>
<When condition={isLoading}>
<div><p>Loading…</p></div>
</When>
<Otherwise>
<div>{list.map(item => <ListItem item={item} />)}</div>
</Otherwise>
</Choose>

7. Higher Order Components:

Higher order components are perfect match for conditional rendering in React. Higher order components can have multiple use cases. Yet one use case could be used to change the look of a component. To make the use case more precise: it can apply a conditional rendering for a component. Let’s have a look at a higher order components that either shows a loading indicator or a desired component.

// HOC declaration
function withLoadingIndicator(Component) {
return function EnhancedComponent({ isLoading, …props }) {
if (!isLoading) {
return <Component { …props } />;
}
return <div><p>Loading…</p></div>;
};

// Usage
const ListWithLoadingIndicator = withLoadingIndicator(List);

<ListWithLoadingIndicator
isLoading={props.isLoading}
list={props.list}
/>

CAN YOU EXPLAIN DIFFERENT FEATURES OF DJANGO PROGRAMMING LANGUAGE?

Can you explain different features of Django programming Language?

Below is the list of features offered by Django:

  • A free, rich API
  • Automatic database table creation
  • Admin Interface
  • Tempting
  • Form Handling
  • A dynamic admin interface generator
  • A syndication feed framework
  • A powerful cache framework for dynamic websites
  • A powerful built-in template system
  • Easy database migrations
  • Security features
  • Other helpful add-ons
  • Internationalization
  • Object Relational Mapping
  • Testing Framework
  • Session, user management, role-based permission
  • Elegant URL design
  • Cache System

WHAT IS SELENIUM? WHAT ARE THE DIFFERENT SELENIUM COMPONENTS?

What is Selenium? What are the different Selenium components?

Selenium is one of the most popular automated testing suites. Selenium is designed in a way to support and encourage automation testing of functional aspects of web-based applications and a wide range of browsers and platforms. Due to its existence in the open source community, it has become one of the most accepted tools amongst the testing professionals.

Selenium is not just a single tool or a utility, rather a package of several testing tools and for the same reason, it is referred to as a Suite. Each of these tools is designed to cater different testing and test environment requirements.

The suite package constitutes of the following sets of tools:

Selenium Integrated Development Environment (IDE) – Selenium IDE is a record and playback tool. It is distributed as a Firefox Plugin.

Selenium Remote Control (RC) – Selenium RC is a server that allows a user to create test scripts in the desired programming language. It also allows executing test scripts within the large spectrum of browsers.

Selenium WebDriver – WebDriver is a different tool altogether that has various advantages over Selenium RC. WebDriver directly communicates with the web browser and uses its native compatibility to automate.

Selenium Grid – Selenium Grid is used to distribute your test execution on multiple platforms and environments concurrently.

WHY DO PEOPLE USE HEROKU WHEN AWS IS PRESENT? WHAT DISTINGUISHES HEROKU FROM AWS?

Why do people use Heroku when AWS is present? What distinguishes Heroku from AWS?

AWS / Heroku are both free for small hobby projects (to start with).

If you want to start an app right away, without much customization of the architecture, then choose Heroku.

If you want to focus on the architecture and to be able to use different web servers, then choose AWS. AWS is more time-consuming based on what service/product you choose, but can be worth it. AWS also comes with many plugin services and products.

Heroku

  • Platform as a Service (PAAS)
  • Good documentation
  • Has built-in tools and architecture.
  • Limited control over architecture while designing app.
  • Deployment is taken care of (automatic via GitHub or manual via git commands or CLI).
  • Not time consuming.

AWS

  • Infrastructure as a Service (IAAS)
  • Versatile – has many products such as EC2, LAMBDA, EMR, etc.
  • Can use a Dedicated instance for more control over the architecture, such as choosing the OS, software version, etc. There’s more than one backend layers.
  • Elastic Beanstalk is a feature similar to Heroku’s PAAS.
  • Can use the automated deployment, or roll your own.

WHAT IS THE MAIN DIFFERENCE BETWEEN WEBPACK AND OTHER BUILD TOOLS LIKE GULP OR GRUNT?

What is the main difference between webpack and other build tools like gulp or grunt?

Webpack is a module bundler, though it is quite often used instead of Gulp or Grunt task runners. This advanced tool provides developers with control of spliting the modules, allowing them to adjust builds to particular situations and workaround solutions that don’t function properly out of the box.

Comparing Webpack vs Grunt, the first of those offers more flexibility and advanced functionality for modern front-end projects. It comes with a functional core and can be extended using particular loaders and plugins. Essentially it is used for bundling JavaScript modules with dependencies into files, but for complex JavaScript applications with lots of non-code assets (images, fonts, CSS, etc.) it can provide great benefits.

Talking about Webpack vs Gulp vs Grunt performance, the two latter look into a defined path for files that match your configuration, while the Webpack analyzes the whole project. It looks through all the dependencies, processes them with loaders and produces a bundled JS file.