Photopea is a an awesome alternative to Photoshop!

When it comes to image editing, Adobe Photoshop is often considered the industry standard. However, not everyone has access to Photoshop due to its cost or system requirements. For students, hobbyists, or anyone who needs to make quick edits without installing software, finding a capable and accessible alternative is important. Photopea.com is a browser-based image editor that aims to fill this gap. It offers a wide range of features similar to Photoshop, supports many common file formats, and is completely free to use. Whether you’re working on graphic design, photo retouching, or preparing images for the web, Photopea provides a practical solution that’s available to anyone with an internet connection.

Here are some things to know about Photopea:

Mastering Class Structure: Constructors, Fields, Methods, static, and #private in JavaScript

JavaScript classes offer more than just a cleaner way to write object-oriented code. They define a blueprint for creating objects using a constructor for initialization, fields for storing state, and methods for behavior. Classes can also extend other classes, allowing for inheritance and code reuse in more complex systems. This structure promotes better organization and encapsulation, making your code more predictable and easier to maintain.

Modern JavaScript with ES6: Top 5 Game-Changing Features

JavaScript, was a simple scripting language for browsers, and had its share of quirks: lack of block scoping, clunky object-oriented patterns, awkward module systems, and verbose string manipulation. In 2015, JavaScript introduced a host of improvements to solve these problems evolving into a robust programming language used on both client and server sides, making JavaScript cleaner, more powerful, and easier to manage.

Creating and Using JavaScript Custom Events

What Are Custom Events?

A custom event is a user-defined DOM event you create and dispatch in your application. Once you dispatch a custom event, you can listen for it just like any other DOM event using addEventListener. This makes it easy for any part of your app to react—regardless of who fired it or where. Use them when built-in events (like click, submit, etc.) are too limiting or when you want to broadcast state changes across components or even separate apps loaded onto the same website.

Debugging JavaScript Unit Tests with Chrome DevTools (Node)

Debugging Unit Tests — Setup and Inspect

You can debug JavaScript unit tests running in Node.js (like Jest or Mocha) by launching the test runner with inspection enabled. Use the following command to start tests and pause on the first line:

node --inspect-brk ./node_modules/.bin/jest --runInBand

The --inspect-brk flag starts the V8 inspector and stops at the first line. Adding --runInBand ensures tests run in a single process, which is essential for reliable debugging.

How to Mock an API using JSON Placeholder

Public JSONPlaceholder API

JSONPlaceholder is a free, open-source mock REST API service offering realistic example data (including users, posts, comments, todos, and more) for prototyping and testing front-end applications—no sign-up or backend needed. It supports standard HTTP methods, though only GET requests return persistent data.

Semantic Versioning

What is Semantic Versioning?

Semantic Versioning uses the format major.minor.patch:

• MAJOR version for incompatible API changes
• MINOR version for added backward-compatible functionality
• PATCH version for backward-compatible bug fixes

How npm Uses Semantic Versioning

In package.json, dependency ranges control allowed updates:

• Patch-level: "~1.2.3" or "1.2.x" → versions ≥1.2.3 <1.3.0
• Minor-level: "^1.2.3" or "1.x" → versions <2.0.0
• Major-level: "*" or "x" → any version

Exporting and Importing JavaScript Modules are a Game changer!!

JavaScript modules allow you to break your code into smaller, reusable pieces. This helps keep your code organized, maintainable, and easy to understand. The module system, introduced with ES6, uses the export and import keywords to share and reuse code across different files.

---

Exporting JavaScript Modules

There are two main ways to export code from a module: named exports and default exports.

Understanding JavaScript Promises: A Guide to Asynchronous Programming

JavaScript has evolved over the years to support asynchronous programming, allowing us to handle tasks like API calls, file reading, and timers without blocking the main thread. One of the most important tools for handling asynchronous operations in JavaScript is the Promise. In this post, we'll break down what a JavaScript Promise is, how to use it, and some common patterns that make asynchronous programming more manageable.

How to Use a Callback Function in JavaScript

A callback is a function passed as an argument to another function, which is then called inside the outer function. It's a common pattern for asynchronous programming, event handling, and customizing behavior. 

What is NPM??

NPM stands for Node Package Manager and is a software registry for javaScript packages. NPM comes "packaged" with NodeJS, so you have to install node before you can use npm.  Once node is installed npm comes with its own CLI (command line interface) we will use to access, manage and install 3rd party packages we will need for our project.

If we are creating a new project, we will need to initialize the project by typing the init command below into the command line terminal in the root location of our project.

 $ npm init

This will walk us through the process of creating a package configuration file. This file holds all the configurations for our new node project. Below is an example of how the file will look after you have completed the npm init process

How to Deprecate a React Component

Deprecating a react component is a big decision, and you need to be careful not to leave our developer clients in a conundrum. To off set the pain level i have come up with some pointers that can be used to deprecate a component in a graceful way that will minimize the impact on dependent code.

Document, document, document...

It can not be overstated, you need to document your code. The first level of documentation should happen in your Wiki, newsletter, rss feed, or what have you.

Brave New World! Then there were three.

I have always used this blog sparsely to highlight really big events, but i think it is time for me to put some more effort into keeping this more updated. I want to really dive into my knowledge about web development and just share my thoughts more often.

My life is amazing!
Now, today my 3rd little baby, Josephine May, is 17 months old, she was born on October 2nd 2018, it has been a whirlwind this last year taking care of 3 little ones. Josie i can only describe as spirited and joyful! Her favorite thing to say is "Iwant...onnne" she is so cute.

What is NodeJS

Now more than ever developers are using Node.js to to configure run and build their websites. Node, according to their site, is a JavaScript (js) runtime built on Chrome's V8 JavaScript engine. Node is NOT a framework or coding language, the language is JavaScript, only it runs on your machine or container as a service instead of how it traditionally runs on the browser. In a nutshell, it allows you to run js on your server.

I will leave some links at the bottom of this article for you to dive deeper if you want, but we are just going to scratch the surface of node's capabilities in this article.

Work @ USAA

I got a job working for USAA!! They are an amazing  company that has a core value system that has impressed me more than any company I have ever worked for! I think I will have a long career here!! I, along with my team, are tasked with the maintenance and support of our enterprise component library using React, Redux, and ES2015.  I have learned a massive amount of skills including advanced git & npm commands, artifactory management, & true teamwork!

Lollipop's Uniform Shop Website is LIVE!!!

I built a website for my Mother-in-law who owns a small uniform shop in Tyler, Tx. I am proud of her accomplishment, it isn't easy being a small business owner. There are lot of taxes and unforeseen costs, but small businesses in the private sector are the back bone of America!! She has a few contracts with schools in the Tyler TX area. Used "Wix" for the first time to see how easy it is. It isn't as flexible as i would like, but it did make a month long project only take 2-3 days! You should visit Lollipop's Uniform Shop and order some school uniforms for your kids, she has good prices and is a very friendly person to do business with!!

I have a Son!!!

I am a father, again!! This time to a handsome baby boy. I cant wait to watch you grow up buddy!! you are the pride of my life. I pray protection and health in your life, may your muscles be strong and your bones be straight for all of your days!! He was born at 4:50am on Tuesday, June 15th 2017. He was 11lbs even...a big boy!! Mommy, Gabbi and I are so happy to welcome this guy into our lives!!!

Work @ RealPage

Joined the Online Leasing team. This team utilizes cutting edge technologies, including AngularJS & NodeJS to build a salable, dynamic user interface catering to our customers with an amazing user experience.
Later, I Moved to the Foundation Team. A team commissioned to rebuild RealPage Applications using modern frameworks like Angular & VueJS. We are also using Laravel, for backend development.

I am a father!!!

Kortni and I had a beautiful baby girl her name is Gabbi Jo, she is so precious. When she was born Kortni kept saying, "Awe, its ok honey.." and "Honey..I love you". This was funny to me cause I have never herd her call anyone that pet name. Anyway, she is so sweet!! She was 8lbs and 3ozs and was born at 4:27pm on Tuesday, August 12th 2014!

Show/Hide Elements Based on Form Input Values

This is a very handy tool for using forms to hide/show an element of any type. Almost every application at some point will use this. I hope this helps anybody struggling in this area, enjoy!!