Fun With Numbers

See the Pen Fun With Numbers by jonclawson (@jonclawson) on CodePen.

React Version

See the Pen React with Numbers by jonclawson (@jonclawson) on CodePen.

Angular VX

See the Pen Angular 6 starter by jonclawson (@jonclawson) on CodePen.

I had some free time last Saturday, so I decided to play with d3.format() and created an AngularJS number filter for formatting numbers in common formats you might see on a website or application. This is what I came up with.

Just to be fair, I decided to make a React as well as an Angular 6 version too.

D3.js (Data-Driven Documents) is an open-source JavaScript library for creating dynamic and interactive data visualizations in web browsers. It allows developers to bind data to Document Object Model (DOM) elements and then apply data-driven transformations to create complex and customized visual representations of data.

Key features and concepts of D3.js include:

Data Binding: D3.js enables you to bind data to DOM elements, associating data values with visual elements like SVG shapes, HTML elements, or Canvas graphics.

Data-Driven Transformations: D3.js allows you to apply data-driven transformations to manipulate the visual properties of elements, such as position, size, color, and shape.

SVG and Canvas Support: D3.js works with Scalable Vector Graphics (SVG) and HTML Canvas, giving you flexibility in choosing the appropriate rendering technology for your visualizations.

Selections: D3.js provides a powerful selection mechanism that allows you to select, filter, and manipulate DOM elements based on data conditions.

Data Joins: D3.js supports data joins, where you can efficiently join data with existing DOM elements or create new elements based on data.

Transitions and Animations: D3.js allows you to create smooth transitions and animations to enhance the visual experience of your data visualizations.

Scales and Axes: D3.js provides scale functions to map data values to visual attributes, such as positioning data on axes or determining the size of elements.


Measuring Up

Measuring Up

Measurabl is a software platform designed to help organizations manage and report on their sustainability and environmental, social, and governance (ESG) performance. It provides tools for collecting, analyzing, and reporting data related to sustainability initiatives, energy usage, water consumption, greenhouse gas emissions, and other key metrics.

For the past 6 years I spent with Measurabl, I led the upgrade of a web application to a modern framework with a custom build with new dependencies for theming, internationalization and deployment chosen and implemented by me. Over the years, I directly engineered a library of reusable presentational components such as tables, forms, maps and charts which I used in multiple premium subscription features of the application. Additionally, I integrated many 3rd party services into the app with internationalization, reporting and deployment/debugging technologies. 

In collaboration with the development team, we developed a web application and optimized the quality and efficiency of the CI/CD process. With a passion for building rich UI frontend applications and efficient APIs and proficiency in software technologies has allowed me to bridge the gap between technical and non-technical audiences. Resolving client demands and simplifying technical issues.

One of the premium subscription features I engineered was the Physical Climate Risk Report. This report required a client side component base UI to communicate with a REST API to render climate risk data as a report for the customer's portfolio. The UI report consists of filters to refine the results to specific climate risks and locations with the results produced on a page with charts, tables and a maps. There is also a PDF export rendered on the backend server with additional charting libraries.


MEAN Stack

MEAN Stack
MEAN Stack
MEAN Stack
MEAN Stack

My MEAN Stack App

Here is a personal project of mine. It is a MEAN stack app with Angular4. The purpose of this app is right now is to demonstrate the foundation of any app performing authentication, user management, content management complete with custom fields and custom content forms. It is sort of a MEAN Stack CMS if you will. I intend to give it some purpose and publish it to the app store. For now it is a demonstration of the type of coding I have done with past projects that I am not allowed to show off. 

The MEAN Stack is a popular open-source web development stack that consists of four main technologies: MongoDB, Express.js, Angular, and Node.js. These technologies are combined to create a full-stack JavaScript development environment for building dynamic and modern web applications.

Here's a breakdown of each component in the MEAN Stack:

MongoDB: MongoDB is a NoSQL database that stores data in a flexible, document-based format known as BSON (Binary JSON). It is designed to handle large amounts of unstructured or semi-structured data and is particularly well-suited for applications that require scalability and real-time data updates.

Express.js: Express.js is a lightweight web application framework for Node.js. It provides a set of features for building web servers and APIs, handling routing, managing middleware, and interacting with databases. Express.js simplifies the process of creating server-side logic and handling HTTP requests and responses.

Angular: Angular is a popular front-end JavaScript framework for building dynamic and responsive web applications. It provides tools and features for building single-page applications (SPAs) and offers a component-based architecture, dependency injection, data binding, and other advanced features for creating rich user interfaces.


Parse it

Parse it is or was an online Mongo database service and API for web applications. Parse provided a nice GUI complete for managing the data complete with Class Level Permissions which made it very easy to get user role permission based application up and running. Not to mention that they provided their own API libraries for Javascript, PHP, Android and IOS. It provided a REST API or you could just use one of ther API libraries to connect and transfer data. I used it developing a real estate search application for web and mobile. 

Founded in 2011, Facebook purchased in 2013 for $85 million and recently announced that it will be shut down in January 28 2017. Thanks Facebook. I guess they just wanted to keep it all to them selves. Well not necessarily. Parse has been porting the server and other components to git hub and now it os open source so all the existing customers can continue running the Parse framework on their own servers. I personally love the GUI for managing the database. It very useful. 


Mystery of the favicon file

Mystery of the favicon file

The mystery of the favicon file or the .ico extention has been solved. No need for the favicon .ico extention for photoshop. All you simply  need to do is set the the final image size to 16px x 16px at 72dpi and set the color mode to indexed color. To set the color mode go to the main menu>image>mode>indexed color. Then Save as .bmp but save the file as favicon.ico. Done.



This true evidence makes a lot of sense if you consider the water theory mentioned in my previous blog post.


Building the Pyramids of Egypt ...a detailed step by step guide.

Of all the ideas of how the pyramids were built, I find this the most practical concept. This video proposes that water was used in canals to move and shape the giant blocks. This is the only science backed explanation I know of.


Charge it

Charge it

For this project, I worked on a team to convert a very large and successful site to Drupal 7. I rewrote 90% of the CSS and created template files as well as set up many views for the content pages. The site is a review driven site that offers many affiliate links to apply for credit cards. It is a very lucrative business by the way.



Real smart guy

Yo have probably heard about Tesla. Well here is a documentary all about him.



Historical Anomalies

This information punches holes in main stream archeology.