Friday, September 30, 2016

D3 Circle Packing Web Component

D3 Circle Packing Chart
D3 Circle Packing Chart

I love data visualization. It helps to understand raw data and to get info in the blink of an eye. As a developer, I like to reuse the code and libraries as much as possible. Using the web components is one of the best ways to reuse the code. I'm creating and publishing custom elements for using them whenever and wherever I want. You could check them on customelements.io.
Last week I used d3 circle packing chart for the first time. It was time to create a web component for it.

D3 Circle Packing Element

I used polymer-cli to initialize a basic custom element project. After that, I installed the only dependency, D3 library. Mike Bostock, the creator of d3, made a full example of d3 circle packing chart with zooming option. I've implemented the element based on that example. It needs some changes and bug fixes (e.g. zooming transition didn't work correctly when multiple charts were on one page).
You could check the live version of my element on saeidzebardast.github.io/d3-circle-packing.

Options

See the component page for options.

Install

You could use bower to install the element:
bower install d3-circle-packing

Usage

Tag

<d3-circle-packing data="[[data]]"></d3-circle-packing>

Data Format

{
  "name": "flare",
  "children": [
    {
      "name": "analytics",
      "children": [
        {
          "name": "cluster",
          "children": [
            {"name": "AgglomerativeCluster", "size": 3938},
            {"name": "CommunityStructure", "size": 3812}
          ]
        },
        {
          "name": "graph",
          "children": [
            {"name": "BetweennessCentrality", "size": 3534},
            {"name": "LinkDistance", "size": 5731},
            {"name": "SpanningTree", "size": 3416}
          ]
        }
      ]
    },
    {
      "name": "animate",
      "children": [
        {"name": "FunctionSequence", "size": 5842},
        {
          "name": "interpolate",
          "children": [
            {"name": "ArrayInterpolator", "size": 1983},
            {"name": "PointInterpolator", "size": 1675},
            {"name": "RectangleInterpolator", "size": 2042}
          ]
        }
      ]
    }
  ]
}

License

The license of this web component is MIT.

Monday, April 11, 2016

The Value of Software Development Infrastructure

Software Development Infrastructure
Software Development Infrastructure

Preface

During the past few years, many tools came to software development environment. These days you can automate many processes to make free time for yourself. I want to share my story about improving the development infrastructure in my work.

Why did I start?

Before 2016, we use only Git for version controlling and Redmine for issue tracking. I had some shell scripts to do some jobs such as making release and deploying to servers. I knew there were many tools for running these scripts automatically but they were some problems:

  1. Nobody was responsible for preparing development infrastructure.
  2. I didn’t have any free time to create development infrastructure (I know it's not an excuse!).
  3. Nobody knew the real benefits of development infrastructure (in our company).
  4. The cloud development infrastructures are not available from Iran or for Iranians.

What did I choose?

I’ve researched and chose the following software to build a basic development infrastructure:

  1. Redmine (for issue tracking and workflows)
  2. Jenkins (for running tests and automating builds)
  3. Git (As version control system)
  4. SonarQube (for code quality)
  5. Artifactory (for dependencies)
  6. Active Directory, LDAP (for centralizing managing users)

Integrated Infrastructure

I’ve integrated all software with AD to make managing users easier. Now, we can create a user and set roles (e.g. sudoers, developer) very quickly.
Also, I’ve integrated other software:

  • Git to Redmine and Jenkins
  • Redmine to Jenkins (and vice verse)
  • Jenkins to Artifactory (After building a package successfully, it will be deployed to Artifactory automatically)
  • Jenkins to SonarQube (Check code quality to make a build successful or failure)


What did happen after new infrastructure

After running the new infrastructure, we've got many benefits from it. I couldn't imagine how useful that is.
Continuous Delivery - accesa.eu
Continuous Delivery

  1. The pace of development was increased and so we were agiler.
  2. Now we have complete continuous integration and continuous delivery cycles.
  3. Jenkins deploys latest production and development versions to servers.
  4. Jenkins installs jar files, java source code and java docs of our java modules to Artifactory. So, developers could get jar libraries easily and see modules source code inside IntelliJ IDEA.
  5. SonarQube checks code quality and makes a build failure if there wasn't unit test or code quality was bad.
  6. The administrator could create, edit or delete a user of the whole infrastructure just by some clicks.
  7. Artifactory download and cache all dependencies. So, we save the bandwidth and download them from the local maven repository.
All these advantages help us to save time, improve code qualities and maintain the software easier.

Conclusion

There is only one thing that I regret is postponing of building development infrastructure. If you still using old ways to test, build and deploy, you are doing it wrong. Put building development infrastructure at the top of your to-do list. Don't wait for free time, make your time free by building a development infrastructure.

Wednesday, April 6, 2016

NVD3 Web Components for Polymer

NVD3 charts as web components for Polymer
NVD3 charts as web components for Polymer.

I'm using Google Polymer for a front-end project. Polymer is a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs for defining your own custom HTML elements. As it's new, there are not many available web components for it. I've decided to make a bunch of chart elements for Polymer.

NVD3 Elements

NVD3 is a charting library written in D3. It provides many chart types and supports all d3 functions. I've created the following chart elements based on NVD3:
  • <nvd3-line>
  • <nvd3-line-with-focus>
  • <nvd3-pie>
  • <nvd3-donut>
  • <nvd3-scatter>
  • <nvd3-bullet>
  • <nvd3-discrete-bar>
  • <nvd3-stacked-area>
  • <nvd3-multi-bar>
  • <nvd3-multi-bar-horizontal>
  • <nvd3-cumulative-line>
  • <nvd3-sunburst>

Installing

You could use bower for installing the elements or download the latest version from github.
bower install nvd3-elements

Demo and Options

There are many options which you could set and configure for your chart. See the component page for demo and options.


P.S.

You could check my other web components such as <github-fork-ribbon> and <d3-bubble> at customelements.io/saeidzebardast.

Sunday, October 18, 2015

Console API or How to write better logs in the JavaScript Web Application

Console API

Preface

I've started to create a JavaScript Web Application. It is a frontend of a Java Application. These are totally decoupled. It's my first major experience of creating JavaScript application. During the development, I learned a lot about JavaScript language and its concepts. One of them was how to write better logs for debugging and finding clues of errors. I use log4J in Java backend application and I need an alternative for frontend JavaScript application.

Console API

I was familiar with console.log() but it wasn't enough for logging all states. After searching for better solutions, I found out that there are several Console API  for logging in JavaScript [1],[2],[3].
The Console API is non-standard. Do not use it on production sites facing the Web. It will not work for every user.
The console object provides access to the browser's debugging console. The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

Methods

There are several methods for logging such as log(), debug() and etc. I mainly use some of them which I'm going introduce them.

console.log(object[, object, ...])

Writes a message to the console. You may pass as many arguments as you'd like, and they will be joined together in a space-delimited line.
console.log('This is a sample log');

console.debug(object[, object, ...])

Writes a message to the console, including a hyperlink to the line where it was called.
console.debug('I am debug message');

console.info(object[, object, ...])

Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.
console.info('I just want to share info!');

console.warn(object[, object, ...])

Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.
console.warn('Be quite! Big brother is watching you!');

console.error(object[, object, ...])

Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.
console.error('Something goes wrong!');

console.assert(expression[, object, ...])

Tests that an expression is true. If not, it will write a message to the console and throw an exception.
console.assert((2 + 3) === 5); // Assertation true console.assert((2 * 1 * 0) === 3, 'It should be 0!'); // Assertation faild

console.clear()

Clears the console.
console.clear();

console.dir(object)

Prints an interactive listing of all properties of the object.
console.dir(document.body);

All Console Web APIs in one place

I've created a simple reference of Console API in github. You can see them at saeidzebardast.github.io/all-in-one-console-api/.