Adding a Swagger Validator Badge to you project README

The Swagger Validator project can be used to show a “valid swagger” badge on your site or github README file.


To generate a badge image for the validation of your swagger json or yaml file against OpenAPI 2.0 spec use

<img src="{YOUR_URL}">

Or using markdown

[![swagger-api validator-badge]({YOUR_URL/api_spec.yaml}task-list-api-swagger-definition.yaml)](./api_spec.yaml)


Decorating Angular $httpBackend service.

An example of how to ​decorate the angular $httpBackend mock server with custom logic. In this example, I log to console the request method and URL.

// Configure the Mock HTTP Backend
    .config(['$provide', function ($provide) {
        $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);

// Decorate Mock HTTP Backend to log requests
    .config(function ($provide) {
        $provide.decorator('$httpBackend', function ($delegate) {
            let decoratedHttpBackend = function (method, url, data, callback, headers, timeout, withCredentials, responseType) {
                console.log(method + ' ' + url);

                return $, method, url, data, callback, headers, timeout, withCredentials, responseType);

            for (var key in $delegate) {
                if ($delegate.hasOwnProperty(key)) {
                    decoratedHttpBackend[key] = $delegate[key];

            return decoratedHttpBackend;

Solve CORS Cross-origin issue in Development Environment

Developing a front-end application, let’s say an Angular app, you could run into CORS Cross-origin issues performing requests to back-end services.

XMLHttpRequest cannot load http://my-service/api/my-resource. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000&#8217; is therefore not allowed access.

In production is something that should be configured in the server adding the following header to its response:

Access-Control-Allow-Origin: *

And the same can be done in your local dev machine if you are serving the fron-end and also the back-end. But what happens if your service is in another machine or port?

We can solve this problem with a local reverse proxy, or using apps like Burp Suite. But a really quick workaround is to use the Google Chrome Allow-Control-Allow-Origin plugin.

Don’t forget to configure properly the filters to intercept only the URLs to the services that you use:



Another hacky and quick way to solve this is opening chrome with the web security disabled:

open /Applications/Google\ --args --disable-web-security

but It could be really dangerous to use that all the time.

To know more about CORS read

Design Patterns – Facade

The Facade Pattern is used to provide a simplified interface to a complicated subsystem.

The idea is to define a higher-level interface that abstracts clients from using directly a set of lower level interfaces in the subsystem. For some clients accessing directly the subsystem could make perfect sense because they benefit from the different options and flexibility of a rich API. However, most of the clients only need basic functionality, accessing a large set of interfaces only bring them complexity.

This pattern is commonly used during refactoring to simplify the use of a legacy code subsystem.

One important difference between this structural pattern and the Decorator pattern is that the goal in Facade is not to add new functionality.

Real examples

* JQuery
JQuery is a good example of Facade Pattern, providing a simple and clean interface to interacting with the complex DOM of the browser.

* Java URL class

URL url = new URL(&quot;http&quot;, &quot;;, 80, &quot;/&quot;;);

Code example

class FlightsService {
  findFlightsFor(city, date) {
    console.log(`Searching for flight to ${city} on ${date}`);

  book(flightNumber, airline, date) {
    console.log(`Booking flight ${flightNumber} - ${airline} on ${date}`);

class HotelsService {
  findHotelsFor(city, checkinDate, checkoutDate) {
    console.log(`Searching for hotels on ${city} from ${checkinDate} to ${checkoutDate}`);

  book(roomNumber, hotel, checkinDate, checkoutDate) {
    console.log(`Booking room ${roomNumber} - ${hotel} from ${checkinDate} to ${checkoutDate}`);

class TravelFacade {
  constructor() {
    this.flightsService = new FlightsService();
    this.hotelsService = new HotelsService();

  findFlightsAndHotels(city, travelDate, returnDate) {
    this.flightsService.findFlightsFor(city, travelDate);
    this.flightsService.findFlightsFor(city, returnDate);
    this.hotelsService.findHotelsFor(city, travelDate, returnDate);


Useful Faker.js API and demo page

In my angular projects,​ I use the faker.js library to generate fake data for the test fixture factories used by my unit tests and the dev application running with a stubbed back-end. It is a convenient and consistent way to generate data that looks real and makes the code of our fixtures really simple. The Faker.js API documentation is really basic and sometimes it not obvious what kind of values it can generate.
To help with that you can use the next demo page that shows examples of generated data for each of the faker.js API methods.


I encourage to use it and get familiar with the faker API to improve the quality of our test data.

Bower Guideline – Always Ignore the files that you don’t want to publish

The bower.json defines several options, one of those is the ignore option:

ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.

It is really important to use it when you are defining a bower.json of a package that is meant to be used from other apps or modules.

When a consumer installs your package via Bower, it will download your project’s entire git repository into their project. But in most of the cases, we don’t want to distribute everything. The consumer app doesn’t need things like​ tests, configuration files, tasks, etc. Only the original and minified versions of the component and the documentation. That will save time downloading the module and disk space.

The rule of thumb is to use the ignore attribute to define the list of files and directories that we don’t want to publish.

For example:

"ignore": [

Angular-ui-grid enable filtering from grid menu

In Angular ui-grid it is possible to configure the grid with filtering using the enableFiltering option.

vm.gridOptions = {enableFiltering: true};

I wanted to allow the user to hide/show the filter clicking a button.
There is an example of that in, but I wanted to add that action to the grid menu itself.



Here is the code of my solution:

            vm.gridOptions.gridMenuCustomItems = [
                    title: 'Hide filter',
                    icon: 'glyphicons filter failure',
                    leaveOpen: true,
                    order: 0,
                    action: function ($event) {
                        this.grid.options.enableFiltering = !this.grid.options.enableFiltering;
                    shown: function () {
                        return this.grid.options.enableFiltering;
                    title: 'Show filter',
                    icon: 'glyphicons filter success',
                    leaveOpen: true,
                    order: 0,
                    action: function ($event) {
                        this.grid.options.enableFiltering = !this.grid.options.enableFiltering;
                    shown: function () {
                        return !this.grid.options.enableFiltering;

You can see that doesn’t need to expose the grid to scope in a onRegisterApi block.