Well it was a long cold winter and I have been in deep with the JavaScript. Now that spring is here, I am booting up with some good old Java Rest because I would like to do some more backend development now. I've done backend work here and there through out my career, but really need to to do more Java. 

So I put together a simple REST API in Spring Boot with authentication that could be used to start any project. I like JWT personally over other methods I have used in the past. This simple api lets you register, login and create and edit post articles. I set it up with the database with Docker for easy installation.

In case you don't know, Spring Boot is an open-source Java-based framework that simplifies the process of building production-ready, stand-alone, and highly scalable web applications and microservices. It is a part of the broader Spring Framework ecosystem and aims to provide developers with a rapid development and deployment experience by offering a set of pre-configured defaults and conventions.

Key features and concepts of Spring Boot include:

Opinionated Defaults: Spring Boot comes with a collection of sensible defaults and pre-configured settings for common tasks, reducing the need for manual configuration. This allows developers to get started quickly without the need for extensive boilerplate code.

Auto-Configuration: Spring Boot employs auto-configuration to automatically configure application components based on the classpath and the dependencies present in the project. It simplifies the configuration process and reduces the need for explicit configuration.

Embedded Web Server: Spring Boot includes a choice of embedded web servers like Apache Tomcat, Jetty, and Undertow. This means that you can package your application as a standalone executable JAR or WAR file without needing to deploy it to a separate web server.

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.
https://mx-bind-html-compile.stackblitz.io

Developing apps with Docker is pretty much the standard these days.

Docker is an open-source platform that enables developers to automate the deployment, scaling, and management of applications using containerization. Containers are lightweight, portable, and self-sufficient units that encapsulate an application and its dependencies, allowing it to run consistently across different environments, from development to production.

Let's write a Dockerfile to spin up a Node App in Ubuntu.

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,

Selenium is an open-source software suite used for automating web browser interactions. It provides a way to simulate user actions and interactions with web applications, allowing developers and testers to automate various tasks, perform functional testing, and ensure the quality and correctness of web applications.

Key features and concepts of Selenium include:

Web Testing Automation: Selenium is primarily used for automating web testing scenarios. It can interact with web elements, fill out forms, click buttons, navigate pages, and validate expected behaviors.

Cross-Browser Compatibility: Selenium supports multiple web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and more. This allows you to test your web application's compatibility across different browsers.

Programming Language Support: Selenium supports several programming languages, including Java, Python, C#, Ruby, and JavaScript. This enables you to write tests in a language of your choice.

Web Element Locators: Selenium provides various methods for locating web elements on a page, such as by ID, name, XPath, CSS selectors, and more. These locators help identify elements for interaction.

Test Scripts: Selenium test scripts are written to simulate user actions and validate expected outcomes. Test scripts can be executed sequentially or in parallel, depending on your testing needs.

Selenium WebDriver: WebDriver is a component of Selenium that provides a programming interface for interacting with web browsers. It allows you to control browsers programmatically and perform actions like clicking, typing, and navigating.

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.

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.

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

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.

youtu.be/YTgxGJfXRQ0

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