Author’s Note: HTML5 Streetmaps

“A good programmer looks for ways to create ‘layers of abstraction’ that hide the complexity of the lower layers of a given software language or library…a better programmer eliminates the need for programming altogether.”

– Data Ninja 10/1/2016

I wrote HTML5 to give web designers who know HTML/CSS (but not not jquery and javascript) an easy way to create sophisticated leaflet/mapbox streetmaps for their web pages, without writing a single line of javascript code.

The technique used in this script is to leverage jquery’s class selector functionality – e.g. $(‘.myclass’)… – to create custom tags. By eliminating the dot ‘.’ in the class selector search string, jquery grabs any tag with a tag name that matches what is specified in a ‘dot-less’ class selector entry.

For instance, to create the custom tag, this script starts by using the following code – ‘$(“streetmap”)… that finds every instance of the streetmap tag on a web page, reads its attributes – ‘data-…’ – and renders the streetmap accordingly.

Now, with a single javascript declaration at the top of any webpage, streetmaps leveraging leaflet/mapbox advanced features – including markers, heatmaps, markerclusters, polygons and other shapes – can be rendered with straight HTML.

Eliminating the need for programming altogether!

I hope non-programmers and programmers alike find this script useful. Drop me a note if you have any questions.

HTML5 Streetmaps – available NOW at codecanyon.net! Click here!

Tanoshinde (‘Have fun!’),
Data Ninja
my email: dataninja.at.codecanyon@gmail.com
my codecanyon portfolio: click here
Advertisements

Just Released! HTML5 Cloud Dashboard Designer

Just Release!!! – New Script – HTML5 Cloud Dashboard Designer – available at codecanyon.net! Click here!

WHAT IS HTML5 CLOUD DASHBOARD DESIGNER?

HTML5 Cloud Dashboard Designer, provides an easy to use, drag and drop user interface that allows non-programmers (and programmers alike) to build sophisticated dashboards (think dashboards you see in your favorite sci fi/action hero/spy movies) in minutes leveraging an extensible collection of popular Javascript and jQuery data visualization plug-ins. The script currently supports Highcharts, Highmaps, Highstock,Leaflet.js, Datatables.js but will support many many more in the future (d3js, Mapbox maps in next release).

This dashboard designer uses standard (non-proprietary) HTML5/jQuery/Javascript to create a very light, easy to share dashboard. Dashboards can be previewed, shared and saved, jsfiddle-style (on the cloud thru automatically generated URL links). The script also includes a code generator that generates standalone scripts (4 different flavors – HTML5 Only, HTML/jQuery, URL string, Silent Form Post) to render the dashboard you created. Chart data can be loaded from a file in a folder where you have this script installed or typed directly into the chart’s settings panel. Finally, full source code is available with every script purchase for you to customize, extend and incorporate into your own software.

WHY HTML5 CLOUD DASHBOARD DESIGNER?

Today’s “leading” data visualization tools are expensive, thick/heavy, closed/proprietary(e.g. source code not available) software products that produce average dashboards from a limited/closed selection of chart types and data visualizations (for list of current market leaders, see – 2015 Magic Quadrant for Business Intelligence and Analysis Tools).

In the meantime, open source Javascript and jQuery community software development has produced an exponentially growing catalog of innovative, next generation data visualization plugins/scripts (Highcharts, Highmaps, Highstock,Leaflet.js, Datatables.js, d3js, Mapbox etc.) that when assembled (using my new script) into ultra-light data visualization web page using standard HTML5, jQuery and Javascript, produces sophisticated dashboards that provide the next generation data visualiation solution from the “leading tools” of today.

KEY FEATURES

  • Create dashboards of any size form factor – any width by any height. Default is 5000×5000 pixels.
  • Extensible rotating carousel “palette of JS/jQuery charts” including Highcharts,Highmaps, Highstock, Leaflet.js, Datatables.js. Many, many more to come including , d3js, Mapbox available next release<
  • Easy to use drag and drop dashboard designer user interface to create beautiful interactive dashboards in minutes. No coding necesarry! (see How to Videos)
  • Settings panel for “no coding” chart customization – setting itles, text font, text size, chart background, series colors, etc
  • DB agnostic data sources – Hand enter data or load data from a JSON file on your server.
  • jsFiddle style saving/sharing – Ability to preview, share and save your dashboard on the cloud using auto generated URLs (* these features require PHP/MySQL webserver).
  • Code Generator – auto generates code to render your dashboard in a standalone script. Different flavor scripts including: HTML5 Only, HTML5/jQuery, URL string (GET), Silent Form (POST)
  • Theming capability. Change color scheme, fonts, background of dashboard by changing a single theme setting.
  • Full source code available with every script purchase(< 10k lines) for you to extend, customize and incorporate into your own software.

SYSTEM REQUIREMENTS

  • Any browser that supports HTML5/Javascript, jQuery (2.1.4). Tested with Chrome Version 49.0.2623.110 (64-bit), Safari Version 5.1.7 (7534.57.2), Internet Explorer 11.0.9600.18230, Firefox 5.0.2
  • A PHP/MySQL supported webserver is required for jsfiddle features (preview, share, save) and render script options #3 and #4 – click here for phpinfo for PHP/MySQL versions and configuration options of the server serving up the demo. IMPORTANT: make sure to compare with phpinfo of your installation. Many PHP/MySQL errors stem from configuration options of customer php server instances.
  • This script uses hosted libraries for Highsoft (code.highcharts.com, etc) and no installation required. It does require you to procure the appropriate Highsoft (Highcharts, Highmaps, Highstock) license based on your use. Click here for details.
  • See ‘Installing this Script’ How To Video above for a demo of installation.

HOW TO VIDEO LIBRARY

VERSION HISTORY

  • VERSION 1.0 (4/15/2016) – Initial Launch Version
    • Create dashboards for any size form factor – create dashboard of any width and any height.
    • Extensible rotating “palette of JS/jQuery charts” including Highcharts, Highmaps, Highstock, Leaflet.js, Datatables.js. Many, many more to come including , d3js, Mapbox available next release.
    • Easy to use drag and drop dashboard designer user interface to create beautiful interactive dashboards in minutes. No coding necesarry! (see How to Videos)
    • Settings panel for “no coding” chart customization – setting itles, text font, text size, chart background, series colors, etc
    • DB agnostic data sources – Hand enter data or load data from a JSON file on your server
    • jsFiddle style saving/sharing – Ability to preview, share and save your dashboard on the cloud using auto generated URLs (* these features require PHP/MySQL webserver).
    • Code Generator – auto generates code to render your dashboard in a standalone script. Different flavor scripts including: HTML5 Only, HTML5/jQuery, URL string (GET), Silent Form (POST)
    • Theming capability. Change color scheme, fonts, background of dashboard by changing a single theme setting.
    • Full source code made available with every script purchase(< 10k lines) for you to extend, customize and incorporate into your own software.
  • Upcoming VERSION 1.1 (ETA 6/30/2016) – 2nd release
    • d3js carousel of charts (see Sneak Preview tab today)
    • Mapbox carousel of charts
    • More Highmaps (international)
    • More Leaflet js maps
    • Horizontal/Vertical carousel widgets
  • VERSION 1.2 (ETA 7/30/2016) – 3rd release backlog

It’s brand new and I’d love your feedback. Please let me know what you think. (Also, if you like the script, please pass on this post to your own LinkedIn network to get the word out.)

Regards,
Ninja

my email: dataninja.at.codecanyon@gmail.com
my codecanyon portfolio: click here

Becoming an Author

I started with Envato as a customer. I wanted to add sophistication to the UX/UI (user experience/interface) of the data visualization scripts I developed for my clients.

Themeforest (another Envato marketplace) has an amazing selection of ready to use HTML themes that allow software freelancers (like myself) to save themselves days, weeks, even months of work to incorporate a great user experience into their custom software.

Someone else took the time to perfect the UX/UI (using the latest jQuery slideshows, navigation and other animation plug-ins) into a turnkey theme, which can be purchased by developers and easily incorporated into the software they develop. The price point for these themes was amazing, many themes ranging from $5 to $25 (US), making the evaluation and trial of these themes virtually risk free.

This allowed me to focus on what I knew best (data visualization) and thru the themes I bought at Themeforest, I was also able to incorporate into my software the skills of other developers who were experts in other areas of software design and programming.

I started to think about becoming an author when I noticed that some of the more popular themes have sold downloads in the ten’s of thousands. Simple math showed me that there was significant earnings in store for the author(s) of a popular script.

I wanted to jump in as an author. Now the big question was what could I develop that would be useful for other developers. I was not a web designer so I didn’t think I could develop better themes than what was already available at Themeforest.

Searching thru Envato’s website I discovered the other marketplaces of Envato, specifically Codecanyon where programmers like myself could sell turnkey code snippets, just like web designers sold their themes. I decided since expertise was developing custom dashboards that visualized complex data…I would sell scripts that would help other developers (and non-developers) easily and quickly incorporate complex data visualization into their own scripts in a turnkey way.

This is when my journey began as an author.

Regards,
Ninja

my email: dataninja.at.codecanyon@gmail.com
my codecanyon portfolio: click here

Uberization of Software Development

Hello everyone. My name is data ninja (my pseudo name, of course…can’t be too careful with your real identity on the web these days) and I am a Code Canyon author based out of San Jose, CA. For those of you who are unfamiliar with San Jose, it is in the heart of Silicon Valley, where many iconic startups like Apple, Google, Yahoo got their ‘start’ and are currently based. There are many, many, many startups in the Silicon Valley area that employ many many many software developers like myself.

I am by trade a freelance UI (user interface) developer and my professional specialty is in the data visualization area, creating custom software scripts for my clients that visualize complex data using mostly jQuery, Highcharts/stock/maps, d3js, and JavaScript. When my projects require a database I usually develop using PHP/MySQL.

I have been dabbling in online software marketplaces like Envato’s Code Canyon over the last two years and have tried a few submissions with enough success to convince me that one day, if I dedicated myself to it, I could stop working as a freelancer by generating enough earnings entirely from script sales to make a living as a software author. That’s the plan, anyway.

I want to use this blog to document my journey from ‘software sword for hire (ninja)’ to ‘successful software author’, and maybe help other software developers to do the same along the way. I truly believe ‘software authoring’ represents a mainstream employment model for software developers like me all over the world in the near future.

Software marketplaces like Envato will do for software developers like me, what Uber does for drivers all over the world today – the Uberization of Software Development.

Let’s see…

Follow me on my journey and check in from time to time by commenting on my posts (I’d especially love to hear from those who are on the same, or even better have successfully completed this journey already).

Regards,
Ninja

my email: dataninja.at.codecanyon@gmail.com
my codecanyon portfolio: click here