Reacting to the state of Javascript


React is a popular Javascript library that you may have heard of mentioned along side of other frameworks such as Angular and Vue. I would say that it's appeal that it is more like writing Vanilla Javascript rather than learning a complex framework such as Angular. Of course, most React apps are accompanied by Redux, a predictable state container that uses the FLUX pattern of actions passed through a single dispatcher in order to control the state of the application. Together Redux and React combine to provide a light weight and stable framework for building applications. Being supported by Facebook makes it a creditable solution in app development until something new comes along. 

If you compare the weekly downloads of react vs @angular/core, you may determine that React has become more standard in JS app development. So you may want to go with React if starting a new application, so that you will be able to hire the best and brightest young devs to build your business. 


Angular & the Future

Angular & the Future

Since it's birth from the Summer of Code in 2007 Angular has taken the industry of JavaScript Applications by storm. Rising to the top with a full feature component based framework including controllers, models, directives, dynamic 2-way binding with it's own rich template engine, CSS plus an extensive community of developed and maintained plugins for routing and other solutions for your app project, Angular is here to stay owned and maintained by the world technology giant Google.

So I am not sure where it all started but a few years ago Backbone.js came out and then Ember and React and there are quite a few of these new JavaScript MVC libraries today. The reason I believe Angular will continue to dominate the market is for the same reason we all build our websites to satisfy the gate keeper of the internet, Google. Google created Angular and it has taken the development industry by storm. When I search the market for jobs, I see the most highest payed jobs with Angular in the description. Maybe it's just a trend and things will even out, but I've yet to see a search engine compete with Google. Also as an employer, I want to build my apps with a technology that the market can provide a good selection of applicants so I don't get stuck searching for employees that know how to work on my app.


$compile for the latest Angular version

At work, I was faced with the challenge of upgrading an AngularJS app with heavy use of $compile to the latest version of Angular which has no out of the box solution for compiling a template string that includes other components. So after much research I developed this component. Of course, I forked the main concept from another developer's sample posted overstack (https://stackoverflow.com/a/53739133) and I added the context input. It was hard to find on the internet, so I hope that others will benefit from this code. Enjoy.


Down by the Ubuntu Docks

Down by the Ubuntu Docks

Virtualization has been a big part of my business for the 15 or so years. I used Virtual Box pretty heavily for my development environment. A few years ago, this thing called Docker emerged and I heard a lot of good things about it but I never got around to trying it as Virtual Box worked pretty well and taking the time to setup up a new environment with a foreign tool was just not on my priority list. Then a few weeks ago, I installed it and poked around with it and found that it was pretty easy to setup compared to a virtual box image. Surprisingly, I can run a single command and spin up a fresh ubuntu image or just a MySQL container. I have only just gotten started, but I am pretty impressed with the ease of this new tool. 

With this simple command, I can create and Ubuntu image with my desktop mounted inside of it.

docker run -t -i -v ~/Desktop:/Desktop ubuntu /bin/bash

Inside the container:

apt install [anything]


Find the id of the container just created:

docker ps -a

Save a new image from the container:

docker commit [container id] [new or existing image name]

Now run the container by name you just committed to confirm your changes.


Are you afraid of snakes?

Python, Selenium

Have you ever wanted to create end to end tests for your app, but just can't find the time to get those tests working. Well, I have tried several frameworks from Cypress, to Selenium. I have always felt like this technology ought to be made simple. Just recently after taking another look at Selenium, I found the IDE to be very easy to use in order to quickly create scripts that could be improved by hand later. Here is a very simple example.

First I installed the Chrome Selenium extension.


I created a simple test using the record button and exported it as a Python test.

Then I installed the Python Webdriver using 

apt-get -y install python3.6
apt-get -y install python3-pip
pip3 selenium

Next I installed the chromedriver and I used NPM

npm install chromedriver

Now make sure you have Chrome installed. I used Headless on my server.

I may have added source first

apt-get -y install google-chrome-stable

Then I ran the following script with this command.


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.


Measuring Up

Measuring Up

Measurabl empowers companies to disclose and act upon their sustainability performance. The solution they provide helps companies large and small to collect data and prepare accurate sustainability reports. This frees up resources to actually improve performance. The result is a more sustainable future for all. 

This is why I was happy to join the team as a front-end developer to improve the usability of the software solution they provide. In addition to the opportunity to join a positive team and environment in the tech industry, I am able to contribute to a more sustainable future for all.


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. 


Parse it

Parse it

Parse.com 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 Parse.com 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.