distinctUntilChanged – RxJS

distinctUntilChanged is a very useful RxJS operator that comes in handy when you need to make sure that your observable emits value only when the current value it is about to emit is different from the last emitted value.

Let’s understand this in detail using following example;

import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

from([1, 2, 3, 3, 3, 3, 3, 3, 4, 5, 5])
  .pipe(distinctUntilChanged())
  .subscribe(num => console.log(num));
// output: 1, 2, 3, 4, 5

Although values 3 and 5 appears multiple times in the above code, these values will be logged only once as the distinctUntilChanged operator will emit the values for first time and will discard the duplicate ones.

Let’s consider one more example;

import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

const cities = [
  { name: 'Pune', country: 'India' },
  { name: 'Hyderabad', country: 'India' },
  { name: 'Pokhara', country: 'Nepal' },
  { name: 'Kathmandu', country: 'Nepal' }
];

from(cities)
.pipe(
  distinctUntilChanged((prevCity, nextCity) => prevCity.country === nextCity.country)
)
.subscribe(city => console.log(city));
 
// output:
// { name: 'Pune', country: 'India' }
// { name: 'Pokhara', country: 'Nepal' }

Above code will skip Hyderabad and Kathmandu since there is no change between previous object’s country and current object’s country.

Must Read: delay – RxJS

RxJS Operators – delay

The delay operator in RxJS delays the emitted value by specified time.

Consider the following example. The name$ observable will produce output almost instantaneously without any delay.

const name$ = of('Harshal');
name$.subscribe(name => console.log(name));

To add a delay to the above observable we need to first import the delay operator.

import { delay } from 'rxjs/operators';

Next we need to add pipe to Observable to consume the delay operator.

const name$ = of('Harshal').pipe(delay(4000));
name$.subscribe(name => console.log(name));

This will add a delay of 4000 milliseconds i.e 4 seconds to the name$ observable.

You can also pass Date to delay operator.

const date = new Date('Dec 31 2050 23:59:59')
const message$ = of('Happy New Year!').pipe(delay(date));
message$.subscribe(name => console.log(name));

In the above example, the value within the message$ observable will be emitted only after the specified date.

Git Hooks Made Easy – Husky

Git hooks are custom scripts that you can drop inside your .git directory which are executed at a specified point in time. These scripts are usually executed after a certain event is occurred or about to occur. For example, we can have a script i.e. executed before commit or after the commit has happened. These scripts can be used to perform automated tasks such as executing all the test cases before pushing the changes to the git or sending an email notification to all the members when a user pushes the changes to git.

The Problem!

The git hooks are located inside the .git/hooks directory. The problem with hooks is you cannot commit and push your hooks and share it with your team members since the .git folder is not versioned.

Husky to the rescue!

To install husky in your project all you need to do is open your terminal and type following npm command.

npm install --save-dev husky

You could also use yarn to install this package.

yarn add husky --dev

Now, to add new hooks to you’re project open your package.json file.

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

In the above example, we’re using to hooks first executes linting before committing the changes and second runs all your tests before pushing the changes to the repository. If any of the npm scripts fails the git action following the script won’t be executed. You are free to replace npm run lint or npm test with your own npm scrips.

You can also run more then one script in your hook using the &&. For example npm run lint && npm test.

For more Information:

  1. https://git-scm.com/docs/githooks
  2. https://github.com/typicode/husky

Must Read: Angular Meta Service for Meta Tags

Object.freeze() vs const

In this post, we’re going to explore the difference between const keyword and the Object.freeze method and understand how we could utilize these features to gain better control over our object properties.

const

The const keyword was introduced with ES6 as a way to create constant variables in JavaScript. It is used to create an immutable binding i.e. you cannot re-assign a new value to a variable created using const keyword.

const person = { name: 'Harshal' }
person = { name: 'John' } // Uncaught TypeError: Assignment to constant variable.

The above code will trigger error as we’re trying to assign a new value to person variable.

However, one point we need to understand is const keyword makes the binding of the variable immutable, not the value itself. Let’s understand this using an example.

const person = { name: 'Harshal' }
person.name = 'John';
console.log(person.name); // John

As you can see in the above example, we can change the value of the property name on the object person even after being assigned.

Object.freeze

Object.freeze is used to freeze an object. Once an object is frozen no value modifications are allowed on that object. Let’s understand this in detail using a code sample.

let person = Object.freeze({ name: 'Harshal' });
person.name = 'John';
console.log(person.name) // Harshal

As you can see in the above code, although we’re modifying the value of name property it is simply ignoring all the modifications and simply holding on to the value used while freezing the object.

One important thing to note is the Object.freeze method makes the object immutable not the binding i.e it is possible to re-assign a new value to a frozen variable.

let person = Object.freeze({ name: 'Harshal' });
person.name = 'John';
console.log(person.name); // Harshal

person = Object.freeze({ name: 'John' });
console.log(person.name); // John

As you can see in the above code, we’re not able to modify the value the person but we can assign a new value to the object.

Must Read: Angular Meta Service for Meta Tags

Conclusion

The const keyword creates immutable bindings i.e you cannot assign a new value to a variable once it is created however you can modify the existing values of the constant.

The Object.freeze method creates immutable object i.e. it’ll not allow you to modify, create or delete properties of a frozen object but it doesn’t prevent you from assigning a new value to the object.

How to Disable Theme and Plugin Editor from WordPress Admin Panel

WordPress comes bundled with a code editor which allows you to edit your theme and plugin files from your Dashboard. To access theme editor you need to navigate to Appearance > Editor and to access plugin editor you need to navigate to Plugins > Editor.

Although this feature comes in handy, it can lead to serious issues like source code modifications by someone with the admin access who is not familiar to programming, leading to the website crash or malware installation by a malicious user who somehow managed to gain admin access.

You can easily avoid these issues by disabling the theme and plugin editor from the dashboard. All you need to do is open your wp-config.php file located inside your root directory. And drop the following code before the line that contains /* That’s all, stop editing! Happy blogging. */ comment.

define( 'DISALLOW_FILE_EDIT', true );

And that’s it! This will remove both theme and plugin editor from your WordPress dashboard.

Quick Tip: How to Remove URL / Website Field from WordPress Comment Form

Angular Meta Service for HTML Meta Tags

HTML meta tags are used to provide metadata about the HTML web page such as page description, author name, important keywords or other metadata. Meta tags play an important role in search engine optimization.

Angular comes bundled with Meta service which allows us to deal with these HTML meta tags. In this post, we’re going to understand how we can leverage various methods available within this service to manage the meta tags more efficiently.

Usage

To use this service first you need to import it from @angular/platform-browser.

import { Meta } from '@angular/platform-browser';

Once the service is imported you need to inject it inside your component via the constructor like any other service.

constructor(private meta: Meta) {

}

Adding Meta Tags

Meta service comes bundled with two methods which allow you to add meta tags to your web page i.e. addTag and addTags.

addTag method accepts only a single object at once and generates only one meta tag.

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'author', content: 'Harshal Limaye' });
  }
}

If you wish to create multiple tags using addTag you need invoke it multiple times.

constructor(private meta: Meta) {
  this.meta.addTag({ name: 'author', content: 'Harshal Limaye' });
  this.meta.addTag({ name: 'description', content: 'Front-end developer' });
}

You could use addTags method to set multiple tags in a single call. This method accepts array of objects that describes the meta tags.

constructor(private meta: Meta) {
  this.meta.addTags([
    { name: 'author', content: 'Harshal Limaye' },
    { name: 'description', content: 'Front-end developer' }
  ]);
}

Note: You could pass a second parameter as a boolean value to both addTag or addTags methods to determine if tag needs to be added even if it already exists. The default value is false.

this.meta.addTag({name: 'author', content: 'Harshal Limaye'}, true);

Retrieving Meta Tags

You can use getTag and getTags methods to retrieve the values of existing meta tags. the getTag method returns a single element whereas the getTags method returns an array of the element.

constructor(private meta: Meta) {
  const author: HTMLMetaElement = this.meta.getTag('name=author');
  console.log(author.content); // Harshal Limaye
}

If no meta tag is found for specified selector method returns null.

Updating Meta Tags

updateTag method could be used to update the value of a HTML meta tag.

constructor(private meta: Meta) {
  this.meta.updateTag({name: 'keywords', content: 'Angular, React, Vue, D3'});
}

The above code will update the value of keywords meta tag to “Angular, React, Vue, D3”

Removing Meta Tags

removeTag method could be used to remove existing HTML meta tags.

constructor(private meta: Meta) {
  this.meta.removeTag('name=author');
}

The above code removes author meta tag from the web page.

removeTagElement method could also be used to remove a meta tag. Unlike removeTag which accepts attribute selector it accepts HTMLTagElement as a parameter.

constructor(private meta: Meta) {
  const author: HTMLMetaElement = this.meta.getTag('name=author');
  this.meta.removeTagElement(author);
}

Conclusion

The Angular Meta service allows us to add, retrieve, update and remove HTML meta tags from the web page. This could be very helpful to dynamically update meta tags based on the currently active route in your application.

Must Read: Using Custom Pipes in a Component Class in Angular

Maximize The Browser Window Using Protractor

Protractor is browser automation and end-to-end testing framework built on-top of JavaScript Selenium webdriver for testing Angular based applications. It tests your applications like a real user by running your tests using the real web browsers.

In this post, we’re going to learn to maximize the browser window while running the automation tests.

Protractor comes bundled with feature which allows you to do the same

browser.driver.manage().window().maximize();

To maximize your window all you need to do is use above code inside your tests.

describe('testing super calc using protractor', function() {
  it('should maximize the web browser window', function() {
	browser.driver.manage().window().maximize();
	browser.driver.get('https://juliemr.github.io/protractor-demo/');
  });
});

If you wish to run all your tests in maximized window, you can take advantage of onPrepare method inside your configuration file.

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['*.spec.js'],
  onPrepare: function() {
    browser.driver.manage().window().maximize();
  }
};

And that’s it! In case if you’ve any query or feedback feel free to drop a comment.

Recommended: How to Run Protractor Test Cases in Firefox Browser

How to Run Protractor Test Cases in Firefox Browser

Here’s a quick tip on how to run your Protractor end-to-end test cases using Firefox web browser.

To use Protractor with Firefox all you need to do is you need to specify browser name inside your Protractor configuration file within the capabilities object.

capabilities: {
    'browserName': 'firefox'
}

And that’s it. If you’ve any query or feedback feel free to drop a comment.

Must Read: Managing Node.js Versions with NVM

Using Custom Pipes inside an Angular Component Class

In this tutorial, we’re going to learn to use Angular Pipes inside a component class. In one of my previous tutorials, we’ve created a custom pipe that accepts a number and returns its square. For this tutorial we’re going to inject that pipe inside a component

Before you can use your pipe inside a component class you need to add it to providers array of your module.

providers: [SquarePipe,...]

Next thing you need to do is you need to inject the pipe as service in the constructor of your component class.

// ...
import { SquarePipe } from './square.pipe';

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

  constructor(
    private square: SquarePipe
  ) { }

  // ...
}

And, To use this pipe you need to simply utilise the transform method on the instance of pipe object injected in the class.

getSquare(val): void {
  this.squareVal = this.square.transform(val);
  // ...
}

And that’s it. In case, you’ve any query or feedback feel free to drop a comment.

Method Chaining in TypeScript

In this post, we’re going to implement method chaining pattern using TypeScript.

What is method chaining?

Method chaining is a pattern which allows the developers to invoke multiple methods on the same instance of object. When used efficiently, this pattern makes the code a lot more readable.

If you write JavaScript for living, chances are you’ve already used method chaining in one way or another.

Here’s an example of method chaining in jQuery.

$("#card")
  .css('background', 'red')
  .width(400)
  .text('hello world!');

Implementing method chaining

Let’s start by building a Calculator class

class Calculator {
    private _value: number;
 
    constructor(value: number) {
        this._value = value;
    }
 
    add(num: number): Calculator {
        this._value = this._value + num;
        return this; 
    }
    subtract(num: number): Calculator {
        this._value = this._value - num;
        return this;
    }
    multiply(num: number): Calculator {
        this._value = this._value * num;
        return this;
    }
    divide(num: number): Calculator {
        this._value = this._value / num;
        return this;
    }
    result(): number {
        return this._value;
    }
}

As you can see, each method on the class returns this i.e the current instance of the object.

Now, lets create an object using out Calculator class and call it’s methods.

const calc = new Calculator(10);
console.log(
    calc.add(10)
        .multiply(5)
        .divide(10)
        .subtract(4)
        .result()
);

The above code will output 6 in the console.

That’s it! I hope you liked this post. If you’ve any query or feedback, feel free to drop a comment.