MAP JSON Generator – Preview (built in React)

As web developer I daily work with the JSON format and I often need to mock data.
There are a lot of nice JSON generators (I love JSON Generator) but I have not found something useful in order to generate a list of real coordinates.

So I have created my own MAP JSON Generator to cover all my needs (using React and Google Map Javascript API):

Start reading the Map JSON generator Documentation.

(more…)

Read More

A Collapsable Panel component in Angular 2 and Angular 1.5

snippet

In my previous post New .component(…) method in Angular 1.5 I shared a snippet to create a simple CollapsablePanel component using the new .component() method available in Angular 1.5.
Now I’m simply showing you how to write the same component in Angular 2 and TypeScript.

Angular 2 is currently in beta 0 and the syntax may change

Live demo


Open fullpage Plunker

(more…)

Read More

New .component(…) method in Angular 1.5

snippet

The new .component method available in Angular 1.5.x simplify the creation of custom components (also knows as directives in the Angular world). If this were not enough to decide to use it, Angular 2 will use a similar syntax to create components so I really suggest you to take a look to this topic ;).

In the following snippet I create a simple collapsable panel ( powered by Bootstrap 4 alpha: Card ): the body of the panel is hidden or shown when user clicks the header bar.

(more…)

Read More

EaselJS: custom Display Objects in ES2015

snippet

I love HTML5 Canvas, because I’m free to draw anything I have in my mind without the limit of the DOM, and EaselJS is a great library that simplify the traditional Javascript canvas syntax.
EaselJS is based on the concept of the display list ( very similar to ActionScript ) and if you have used it for a while you probably created a custom Display Object by using the official inheritance technique.

Since ES2015 (aka ES6) is still not officially supported by the library (currently 8.x), in this post I’m basically sharing my way to create custom display objects in ES6.

Suggestions are welcome.

(more…)

Read More

Simple Modal in React (ES6)

snippet

In this snippet I have created a simple reusable Modal component in React in order to explore some of the basic features of this amazing library.

WHAT THE SNIPPET DOES

When the application starts the modal is opened by default. You can change this behavior simply passing opened="false" to the App component when it’s initialized.
After closing the modal you will able to open it again by clicking one of the buttons in the UI. Each button loads a different image in the modal.

(more…)

Read More