Reacting to the state of Javascript


React is an open-source JavaScript library developed and maintained by Facebook (and a community of developers) for building user interfaces, particularly for web applications. It's widely used to create dynamic, interactive, and reusable UI components.

The primary goal of React is to provide a flexible and efficient way to create user interfaces that update and render efficiently when the underlying data changes. It uses a concept called the "Virtual DOM" to optimize the process of updating the actual browser DOM, making UI updates more performant.

Key features and concepts of React include:

1. Components: React applications are built using components, which are modular, reusable building blocks for UI elements. Components can be composed together to create complex user interfaces.

2. Virtual DOM: React uses a Virtual DOM to represent the structure of the actual browser DOM. When data changes, React calculates the difference between the previous and new Virtual DOM states (known as the "diffing" process) and updates the actual DOM efficiently.

3. One-Way Data Binding: React enforces a unidirectional data flow. Data flows from parent components to child components via props, and child components can't directly modify the data passed to them.

4. JSX: JSX is a syntax extension that allows you to write HTML-like code within your JavaScript code. It makes it easier to describe the structure of your UI components.

5. State: React components can have internal state, which allows them to manage and respond to changes in their own data. Stateful components re-render when their state changes.

6. Props: Props (short for properties) are data passed from parent to child components. They are immutable and allow you to configure and customize components dynamically.


Angular & the Future

Angular & the Future

Angular is an open-source web application framework developed and maintained by Google and a community of developers. It's used for building dynamic, single-page applications (SPAs) and web applications with rich user interfaces. Angular provides a comprehensive set of tools and features to help developers create complex and scalable applications.

Key features and concepts of Angular include:

1. Component-Based Architecture: Angular applications are built using components, which are reusable and encapsulated building blocks for UI elements. Components are organized in a hierarchical structure and communicate with each other using inputs, outputs, and services.

2. Dependency Injection: Angular has a built-in dependency injection system that manages the creation and sharing of application components and services. This promotes modularity and testability by making components more independent and easier to test.

3. Templates and Directives: Angular templates use a declarative syntax to define the structure and behavior of the UI. Directives, such as `ngFor` and `ngIf`, allow you to manipulate the DOM, apply conditional rendering, and iterate over data.

4. Reactive Programming: Angular leverages reactive programming concepts with the RxJS library. Observables are used to handle asynchronous data streams and facilitate real-time updates in the application.

5. Services: Services in Angular are used to encapsulate business logic, data manipulation, and interaction with external resources (like APIs). Services are injectable and can be shared among components.

6. Routing: Angular provides a powerful routing system that allows you to create multi-view applications with client-side routing. You can define routes, navigate between views, and load components dynamically.


Watching your weight

I created a BMI calculator to watch my weight. This is simple Javascript skinned with BootstrapJS

Bootstrap is an open-source front-end framework for building responsive and visually appealing web applications. It provides a collection of pre-designed HTML, CSS, and JavaScript components, as well as a responsive grid system, that streamline the process of designing and developing consistent and modern user interfaces.

The primary goals of Bootstrap are to:

Ease of Use: Bootstrap simplifies web development by offering a set of ready-to-use components and styles. Developers can quickly build and prototype web interfaces without having to start from scratch.

Responsive Design: Bootstrap's responsive grid system allows developers to create layouts that adapt to different screen sizes and devices, ensuring a consistent user experience across desktops, tablets, and mobile devices.

Consistency: By using Bootstrap's design and components, developers can achieve a consistent and cohesive look and feel throughout their web application, regardless of the team's design skills.

Customizability: While Bootstrap provides a default theme, it's highly customizable. Developers can easily modify colors, typography, and other design elements to match their branding.

Cross-Browser Compatibility: Bootstrap is designed to work across different web browsers, helping ensure that your application looks and functions consistently for users.

Key features and components of Bootstrap include:

Responsive Grid System: Bootstrap's grid system allows developers to create flexible and responsive layouts by organizing content into rows and columns.

Typography: Bootstrap provides a set of typography styles for headings, paragraphs, lists, and other text elements.

CSS and Components: Bootstrap offers a wide range of CSS classes and components for buttons, forms, navigation bars, modals, alerts, cards, and more.


Message Writer

Message Writer

I have been working I18n localization. It has caused me to need to generate large list of messages in JSON, YAML and Java properties. So I got creative and made this little app to generate them. I call it Message Writer.

I18n, short for "Internationalization," is the process of designing and developing software applications in a way that makes them adaptable and culturally relevant for users from different regions and languages. The goal of internationalization is to create software that can be easily localized for different languages, cultures, and regions without requiring significant changes to the underlying codebase.

Key concepts and practices related to internationalization (I18n) include:

Localization (L10n): Localization is the process of adapting an application or content to a specific locale or language. It involves translating user interface elements, text, dates, numbers, and other content to make the application culturally relevant to a target audience.

Unicode and Character Encoding: Unicode is a character encoding standard that represents characters from virtually all written languages in a consistent manner. It allows software to handle different scripts and languages without encoding conflicts.

Text Externalization: In internationalized applications, text strings and other user-visible content are externalized into resource files or databases, making it easier to replace and translate them for different languages.

Date and Time Formatting: Internationalized applications consider regional date and time formats, including different date orders, time zones, and localized date representations.

Number and Currency Formatting: Different cultures use varying formats for numbers, currencies, and decimal separators. Internationalized applications adjust these formats based on the user's locale.


Spring is time to boot up

Spring Boot

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.


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,

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.


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.


Real smart guy

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



Wireless Audio

Wireless Audio

I bought this Veho 360bt speaker on Ebay for $30. It connects to your a2dp compatible Bluetooth device such as a phone, tablet, or pc just as any wireless headset but it produces nice loud audio perfect for playing music at remote locations such as the beach or picnic. It also features a standard 3.5 audio jack for non-Bluetooth devices. It is powered by a lithium battery that lasts 4 hours and charges through usb. I recommend picking one of these up at your first most convenience.


I got the optoma pk201 to go with my asus

Overall, it works with anything vga, hdmi, and av plug. Plus it fits in your pocket and packs a nice quality picture being hd. also has an sd card,micro usb, head phone jack and internal speaker. I would call it the swiss army knife of projectors. I use it mostly to watch movies on with my new asus tablet.


I bought the Asus e slate

Its pretty awsome overall. Everything you want in a touch pc not limited by IOS or Android markets, It runs windows 7 and can handle Adobe CS. Even pressure sensitive in photoshop. The only downside is even though the tablet never gets hot, for some reason the fan is always on. I read that this is a bug not yet solved. Still, I find it to be the best computer for all general purposes.

UPDate: After sending the tablet into Asus, the tablet was returned With a quiet fan making this the Best Tablet on the market.


The Sixth Sense Device