Creating an application using Vite

Up until recently, you could create a React application using Create-React-App. It was a lightweight way to create React applications quickly and was supported by the React documentation. Create-React-App has been discontinued - it will still work I suppose, but it is no longer the recommended way to create React applications.

I first came across Vite while going through freeCodeCamp's new curriculum. About a week later, while furthering my React studies on Scrimba, they also suggested using Vite as a worthwhile replacement. After building a few projects, I definitely agree.

Vite is a build tool for creating React applications. Of course, I could try to create my own React applications using no build tool, but that can take a long time and there are many files to configure. If someone else has done this work already, I'm going to take advantage of that! 

In order to use Vite, you need to install Node.js if you haven't already, and it needs to be a version higher than 18.0.0. Originally I had a higher version of Node installed (I think it was 22.0.0. or 23.0.0, I can't remember), and that caused some trouble with using Vite. Currently at the time I'm writing this, I'm using Node version 20.0.0 with zero issues.

Once Node is installed, do the following steps:

1. Navigate in your terminal to the folder you want your project to be stored in. For me, I usually change my directory to Desktop and store my project there.
2. Run npm create vite@latest 
3. This will start the tool's prompts. It will ask you just a few questions:
1. What is the project's name? 
2. What library/framework are we using? 
3. What language do you want to focus on? (For example, when I choose React for question #2, it will then ask if I want to focus on JavaScript, Typescript, or a few other options).
4. Once these questions have been answered, Vite will build out the project. At the end, it will give you three commands to run in a row:
1. cd <project-name>
2. npm install
3. npm run dev
5. That last command will be one you probably use a lot, as it is the command that starts up the live server so you can see your work rendered in the browser. I personally find myself starting and stopping the server as needed, usually when I need to use my terminal for something.

And that's it! In the folder you selected, your new Vite project will be created. At this point, you can go into the project itself and clear out all the default stuff (styles, text, images, favicons) and begin creating your JSX files, stylesheets, and link them together.

Documentation link: https://vite.dev/guide/

Watching Claude play Pokemon

Currently Claude is playing Pokemon Red on Twitch. It was hard to tell what game it was playing, since the color palette of the game is very colorful with reds, greens, blues, and different shades of others (much unlike the real games being played in a blue or red hue). Now that I'm reading the Twitch "about" section, I see they are using Danny-E 33 + FroggestSpirit's full color patch which helps Claude see the screen better apparently.

This looks to be a passion project, likely a Claude super-fan or someone from Anthropic doing this on their own time. This is an experiment to see if Claude can actually beat the game on it's own with no outside help. It can learn the game, develop strategies, develop a battle theory when fighting other trainers, have goals for Pokemon levels, and learn the maps to move around.

I'm pretty fascinated right now while watching. Claude is moving very slow. Veeery slow. But I'm reading the left-side thought process that Claude has while seeing the game on the right, and I'm thinking to myself "This is exactly what my 9-year old brain was thinking when playing this game for the first time." I had Pokemon level goals, I had certain strategies to beat Brock's rock Pokemon at the very beginning (I had yellow and found out the hard way that Pikachu has zero use in that gym fight). It's pretty neat now to see an AI developing these same goals.

But as I mentioned above, it's very slow. I suspect in 5-10 years we'll have models that can play this game much quicker. But it soon gets a little boring watching the stream intensely, and the game music gets repetitive when listening to the same Viridian Forest theme for 30-40 minutes.

I've given it a follow and will be lurking to see how far we get. At the time of this writing, Claude has made it to Pewter City, and it has one Pokemon above level 10. That's expected for a player who has just entered Pewter City but it looks like it has several hours of training before it's ready to fight Brock.

You can follow along here: https://www.twitch.tv/claudeplayspokemon

Making the most out of a meetup group in 2025

Yesterday I went to my first Programming meetup for 2025. A goal of mine has been to go to more of these this year. I went to one in 2024 and had a great time, then completely let it slide for the rest of the year. Not this year! There are a few meetup groups for software development who meet less than 30 minutes from my house, so I hope to visit both several times this year.

I saw a question on LinkedIn yesterday on a similar note which asks the question: "What are some actionable steps you can take to make the most out of attending a meetup?" That's a great question and one that I wanted to write a bit more in depth about. Going to a meetup group is essentially networking. It's very similar to conferences, but meetup groups are generally smaller. There may be conference-like presentations, or they may be more casual and people just show up, talk, and code, all while probably drinking some sort of coffee.

In my area, we have a Coffee and Code meetup which is perfect for me. It starts around 10am and goes until 1pm which is the perfect time for me and how I operate (I'm definitely more of a morning person). A little after 10am, we have a standup where we go around the circle and introduce ourselves, talk about any job openings we may know of, and what events are coming up that people can check out. Then we go back to our computers and either code, chat with others, or do little demos with folks on what we are working on and see what others are working on. I had a fantastic time meeting a gentleman who had built out a really neat event application for a non-profit's annual fundraiser. He showed me how he built the mobile app using XCode and Swift.

So what are actionable steps that I'd recommend to others when going to a coding meetup group? See below for a few pointers:

1. Go with a completely open mind. Who knows where your next connection will lead or who you will meet there. And this is also the first point I'm writing about, since I think all the other points below it can fit under this umbrella.
   
   
2. Don't think only about yourself. A mistake I made earlier in my career when "networking" was getting immediately benefits from networking and being in groups. For context, I was in sales and "social selling" had become all the rage. I'd show up to a group or connect with someone on LinkedIn and immediately try to get a sale without a relationship. Don't do this! People can sniff it out when you show up to a meetup only thinking about yourself and what you can "get." Instead, show up with an attitude of what you can GIVE to the group. Reaping rewards (new friends, a job opportunity, project collaborations) will happen with time.
   
   
3. Balance time working on coding projects and talking with people. I went to the meetup this past week for a little over 2 hours. I spent the first hour hacking away on my friend's website I'm building in React, and I spent the next hour or so talking to a few people seeing what they were doing.
   
   
4. Understand that you can contribute to the group no matter your coding experience. There were several people at our meeting this weekend who were JUST learning how to code. They knew some HTML, a little CSS, and were just getting their feet wet with JavaScript. But when they introduced themselves, they said they could help others with HTML and CSS. The point: even if you have just written your first line of HTML, you have something you can contribute or give to the group. Heck, just being there at the meetup and talking to others and listening to them explain their projects and passions is giving to the group. If you are new at coding, take some encouragement that you can contribute to a meetup group almost immediately.

I may revisit this post sometime in the future and add to it, but for now these are some basic points to remember with a meetup group. Don't be nervous or feel any pressure that you have to come away with something from the group. Just go and hang out with fellow programmers!

Making a reusable footer in React

freeCodeCamp's new front-end technologies content is still under construction, but they have released a few lessons for their React fundamentals. You can click here to find the referenced lab activity from this blog post.

React is a JavaScript library that focuses on the UI of a website. To put it another way, it is concerned with the "View" of a page. It is component-based, and the components can be written in two ways: (1) Class-based components, and (2) Functional components. The first way is an older style that apparently is no longer used as much. Functional components is the current "in" way to create components. Instead of using JavaScript classes, you instead use a JavaScript function.

I've created a few React applications in the past, but this was my first using the newer Functional components. freeCodeCamp provided the index.html file already, however the CSS and React code was all up to me. Here is the completed code in a Github Gist page.

I started with the React part and made sure to finish the bones of the page before writing up the CSS. You really do not get a lot of leeway on the "how" here, as freeCodeCamp's user stories specifically ask for a certain setup.

Index.jsx uses one functional component to return a <footer> element. JSX only lets you return one top-level element. While I used <footer> here, most of the time you can use <Fragment> or simply < >. Inside the <footer> is an unordered list. I added a quick <div> there so I could separate the list from the copywrite paragraph below. The entire component is exported with the keyword at the top of the component.

With that code in place, technically I would pass the challenge (it does not check for styles). But where is the fun in that! So I added some CSS code. In order of how the selectors are written:

• I gave the footer a calming light blue background
• I removed the bullet points and default padding for all list items in my list
• I gave each specific list item some extra padding to spread out the items
• I centered my copywrite and made sure there was some bottom padding between it and the footer border
• I turned the list container into a Flexbox and gave it space around each unordered list

After all that, it looked good! Below is a picture of the final product:

It's basic but functional. Below the copywrite, I can include social media links in the future as well as remove some of the default browser styling for links (the blue color and underlines). Overall though, I'm pretty happy with how it turned out! I did a project a few years ago which involved a footer and it was very cumbersome to put together. Having a reusable component with this CSS will make it easier to include the same footer on every page of a future site.

Social media in 2025

Time for another blog post, but instead of focusing on what I've been learning, I'm writing a bit about the state of social media as I see it here in the beginning of 2025. It's topical, and probably in the future if you're reading this, things may look very different.

The state of social media in general is still very strong. Apparently around 3 billion people use Meta's services, 300 million use Twitter/X (claimed), and Bluesky is going strong at around 29 million active users. That's a lot of activity! But social media through the years has morphed into something much different than what it originally was.

I used Myspace back in 2006, I started using Facebook once it opened to non-college students (around 2007?), and I made my first Twitter account in 2009 - my first Tweet was to Freddy Adu, naively thinking he would respond. It was all pretty fun - I saw most of the activity from my friends. Pictures, status updates, trips - it all (especially Facebook) felt like one giant club we were at 24/7, commenting and "liking" and poking (remember the poke feature?) each other. I actually did feel connected, and I was on Facebook for a few hours a day IMing friends and seeing updates from them.

Then came the algorithm. I can't remember when I started noticing, but I started receiving less and less from my friends. First, I noticed that I was seeing posts out of order of time - a post from a few days ago would appear above a post from 10 minutes ago - why? That was weird. I'd log out for class and log back in later only to see that same post from a few days ago near the top of my page along with some new posts. I noticed that I started seeing content mainly from about 10-15 people, even though my friends list was over 500.

I'd click into the profile of some of my closest friends who I hadn't seen updates from in awhile, only to find a slew of updates on their profile that I wasn't seeing. I found a feature to label them "close friends" or something of the sort to see if that would help - it did a little. But now I was realizing that Facebook was no longer connecting me to all my friends. In late 2024 before I deactivated Facebook, my timeline had become almost nothing except content from groups I was not a part of, advertisements, people's Instagram reels, and more advertisements and content from random groups I was not a part of (Historical Pictures of Downtown Annapolis...what???).

Twitter was still awesome though - it became my favorite social media site. I am a big sports fan, and live tweeting sports and network shows when they aired (The Office finale, #AnniesMove from Community) became a cultural phenomenon. And I followed whoever I wanted and saw their content in a nice timeline of curated profiles solely determined by me.

Then came the algorithm. I started seeing advertisements in the content section of posts. I started seeing posts from people I didn't follow and didn't care to follow. Soon, about 50-60% of my timeline was full of people I didn't follow. Gone were the follow-Fridays, #FF, and I also found less and less people interacting with my posts. My timeline was less interesting to me, and I started spending less time scrolling on the content. Then in 2022, Elon Musk bought Twitter and that was the last straw for me.

It's funny - corporate social media (Meta and Twitter) connect and expose us to more content than ever. But I feel less connected at the same time. Mark Zuckerberg always claimed he wanted Facebook to connect the world, but at the same time Facebook became a lonely place surrounded by all of this "connection."

So I've left Facebook. It's something that I didn't think I'd ever do, but seeing them pull back on fact checking in the name of some weird (also inaccurate) definition of "free speech" has been a big part in my decision. The thought of leaving had been rattling around though for over a year, because it just wasn't fun anymore. The same for Twitter - Elon buying it and remaking it into Parler Part II wasn't the sole reason I left Twitter, but it did help in making my decision certain.

A few takeways from the past seven to eight years of corporate social media is this:

• The algorithm sort of ruined my experience with traditional social media by showing me less of my friends and more of random stuff I had no interest in
• Advertisements became so numerous they were annoying
• Corporate social media can be completely changed almost overnight on the whims of the CEO (hello Reddit and their API changes)
• All of this degrades the once-great experience I had

This isn't to say an algorithm has no place in social media. Tiktok got very popular in 2020 because of their algorithm, and Instagram's algorithm is decent and fun. I found a few Twitch streamers from Instagram's algorithm and have learned to cook a few new foods for dinner from watching short-form videos in a random algorithmic feed. I think video-form social media can benefit from a good algorithm in an Explore section, although I'm still turned off to it on my main feed.

As of the start of 2025, I'm on Instagram (but the thought of leaving is there) and that's it when it comes to corporate social media. I'm on Bluesky the most and really enjoy it (so far), and I'm on Mastodon as well. I've become a big fan of the Fediverse and the interconnectedness between apps it offers. The ability to have a Mastodon account and see pictures from Pixelfed, videos from Peertube, and soon will see long-form posts from Ghost is a very cool experience, something corporate social media never offered.

I'm very optimistic about the Fediverse. It may never reach the numbers that corporate social media has, but I don't care. It's free, it's open, and there are no advertisements and very few algorithms unless you are on Threads. Threads by the way is the one fediverse social media site I am no longer on - mainly because it's Meta and I frankly don't want to use their services much any longer.

If you've made it this far, I appreciate your interest in my ramblings. I'll write soon about the Fediverse and how I explain it to people - I have found a lot of people in my IT department at work don't even know what it is, so it's time they learned! But here we are, the state of 2025 social media. It's still dominated by corporations and shareholders, blows to and fro at the whims of their CEOs and their politics, and that's not likely to change. But the smaller yet better connected Fediverse has offered a nice alternative which I hope sticks around.

Reviewing HTML concepts and establishing a habit

 In my planner each week I write out three things automatically.

1. Some sort of motivational theme or (soon) a bible verse as my "theme of the week"
2. A task each day to exercise
3. 30 minutes of freeCodeCamp

Exercising is still something that I need to improve on the habit front. Last week was a bit of a downer, and I think partially it's because I didn't drink enough water, exercise, and eat healthy (hello popcorn for lunch twice).

But with freeCodeCamp, I've been able to establish a nice rhythm. Either in the mornings or during my lunch break, I'll set aside 30-45 minutes to work on the new full-stack developer content they recently released (linked in my previous blog post). I decided to just do everything in the cert, even though I've previously finished their HTML/CSS content and most of their vanilla JavaScript content. It's good review, and I'm a completionist I suppose.

And I'm glad I've taken time to review the HTML content. First off, it's been way more in depth than their previous courses. There is a much higher focus on accessibility and semantic HTML. A few things which have stood out:

• Presentational vs Semantic HTML: Presentational is older and includes elements that are no longer supported, and it's main focus is just on the look of the content on the screen. CSS has made most of these elements relatively pointless now. Semantic HTML involves using elements that are more descriptive in their purpose (as opposed to the older <div> element), and they are better for accessibility and website SEO.
  
  
• HTML Forms have four states:
• Default: which is editable
• Focused: when you're in one of the form inputs specifically (i.e. clicking into a text field and the box highlighting a blue border)
• Disabled
• Read-Only
• (The HTML Form states sort of mimic what I'm used to with Harness rules in Pega, so I found it interesting.)
  
  
• HTML Entities: these provide a way to write out certain symbols that are usually code in HTML. For example, if I want to write out <div> in HTML text, without HTML entities I cannot accomplish this because the browser will think I'm trying to start a new <div> container. With HTML Entities, I can use a combination of letters and/or numbers to have the browser render symbols like < and >. These combinations are called references:
• Named character references start with "&" and end with a ";"
• &lt; is the < symbol
• Decimal numeric references are similar but use numbers instead of letters
• Hexadecimal numeric references are similar but use hexadecimal instead

I'm currently going through the lecture video series for accessibility, which is a deeper dive into screen readers and tools that come native with operating systems to help with viewing or listening to content. Additionally freeCodeCamp is reviewing various peripherals like larger-text keyboards and different input devices like trackpads and mouse-balls and joysticks. All must be taken into consideration for modern development.

That's all I have for this week. I'm also glad I could sit down for 20 minutes or so and type this out this week. I want to blog (ideally) every week, so this week was a success!

Setting 2025 developer goals

2024 is behind us and 2025 is here. New year. Clean slate. Last year was my first full year as a developer and it was full of learning, moments of extreme doubt in my abilities, and some fantastic moments as well. To recap, I attempted the Pega SSA exam three times and fell one question short twice. At some point I plan to study and take the exam again, but I'll be taking some time off from that.

My overall personal goal in 2025 is using a planner for the full year and being more organized through consistent planner use. That sets up the foundation for smaller goals that I hope to achieve this year for myself, which are listed below.

So without much else to add, below are the developer goals I hope to achieve in 2025. Unlike last year, I'll try to keep the blog updated with my progress.

1. Blog more. This is sort of a gimme. I blogged just a handful of times in 2024, mostly because I was busy studying or working. Taking a break from studying will hopefully allow for more casual learning and time to write. My goal is one post a week, and I'll review at the end of January to see how that goes. I may adjust it in February if needed.
   
   
2. Work through freeCodeCamp's new curriculum. freeCodeCamp just released new updated content and have started focusing on free developer certifications. The content includes video lectures, workshops, labs, quizzes, reviews, and one large final exam. I'm very excited for this, and will probably write more about it in the future, but I think this is the type of setup I've been waiting for. Currently I'm in the HTML section doing review before moving on to CSS, but once we get to more advanced topics, I think this will be a massive help for my learning. Most blogs will probably be geared around new things I've learned while going through the certification program. While I won't be spending a lot of time each day on it (due to life and such), I'm going to be extending this into 2026 and hope to earn the certification during that year.
   
   
3. Pass the Pega SSA exam. This will be in the later part of 2025, but I want to attempt the SSA exam again and hopefully pass. It's not required for my job, but everyone else on the team has it at this point and I want to be able to say the same. Related, I'll need to renew my Security+ this year as well, as that's an exam I never ever want to take again!
   
   
4. Read more. I'm aiming to complete six books this year - an average of one book every two months. That's a good goal for me, but it's also something I can also surpass pretty easily. I'll be writing on some books I read this year here on the blog, so be on the lookout for some of those. I've started 'Chip Wars' by Chris Miller, which my manager read and said it was very good. President Obama as well mentioned this book as one of his favorites in 2023. But I won't be reading just tech-focused books. I hope to read a fiction book or two, or maybe some random non-fiction historical books. I'm taking it one book at a time.

So there we have it - these are the developer goals I'm shooting for in 2025. These are not resolutions, and they may not all happen. But it's something to work towards and share with others. 

What goals do you have for 2025?

Common String methods in Java

Almost all programming languages use Strings I'm sure. In Java, they are used a lot, and the language even made Strings it's own class. So, unlike other data types like `int` or `boolean`, Java's String data type is actually an object which is why we capitalize it when initiating a string.

Since String is an object, it also comes with it's own String methods. A full list of String methods can be found at this W3Schools link: https://www.w3schools.com/java/java_ref_string.asp

Below are some common ones:

• length(): returns the length of a String as an int
• concat(arg): returns a combination of String1 and the arg of the method - which could be another String or a mixture of blank spaces and a String.
• String1.concat(" " + String2); as an example of multiple values in the argument
• indexOf(arg): returns the index of the argument given
• charAt(arg): returns a character at index arg
• equals(arg): you cannot use the == operator to compare two strings in Java, so you need to use this method instead. This is case sensitive, but you can also use equalsIgnoreCase() as an alternative if you don't care about the case (or don't want to for the sake of your program's objective).
• substring(arg, [arg2]): this returns a String that falls in line with the argument(s) you give the method signature. If you give just one argument, it will return a String that starts at that index all the way to the end of the String. If you declare two arguments, it will return a String that starts at the index of the first argument and will go up to but not including argument two.
• toUpperCase()/toLowerCase(): these return a string in all caps or all lowercase. This is good for situations where you want to make sure case is ignored and you just want to compare the characters in the String.

Installing Java on my laptop computer

Last year I purchased a new Macbook which uses the M2 chip. I haven't come across any questions when installing apps, since most sites just give a MacOS option. But currently, Apple has active support for two types of MacOS computers (laptop, desktop, minis) - the Intel computers which are older and being phased out, and the newer computers with M-series processors. For some sites that are more technical or detailed, this has changed the way they display install instructions for their software, because the file types could be different between the two types of MacOS options.

I bet most sites determine your computer's processor and just display the right option automatically. But the Java site currently does not. It gives you two options for MacOS Java downloads (well actually they give you four). Below is a screenshot of what you will see if you download it from Oracle's site.

Looking at it, there are two main types of install files here: ARM64 and x64. What does this mean?

If you have an Intel MacOS computer, you'll want to install the x64. This is the traditional way to refer to the Intel processors (if you're old enough, you'll remember x86 being the 32-bit version). x64 is the 64-bit version of an install file, which probably won't matter these days since most computers out there do not use the 32-bit operating systems. AMD64 is another option for this type of architecture.

If you have a MacOS M-series computer though, you'll want to get the ARM64 file. Some You sometimes may see "aarch64", and this is the same thing as ARM64. This type of file is what you will want if you download to a computer with Apple silicon.

How can you tell which you have if you are using a Macbook? Well find the "About Your Mac" menu and take a look at the processor if comes with. If it says Chip  Apple M1 Pro (or M2, M3, soon to be M4...), that means you will want the ARM64/aarch64 file. 

Otherwise it would give you an Intel chip type by saying something along the lines of Intel Core i5 (or i3, i7, and i9). These are various Intel chip levels, and you'd want the x64 file type.

Adding a modal to my portfolio page

As a note, at the time of this blog post, my portfolio site is at this URL: https://aaronmccollum.github.io/personal-site/. I plan to update it in the future with a custom domain, but I just need to buy it first. Also, in the future this site will probably change as I update it. So any pictures below may be outdated by the time you read this.

In the Codecademy career path for Full Stack Developer, one of the projects early on is to create a simple portfolio webpage that highlights your projects, and potentially includes a biography, picture, ways to connect on social media, and links to a blog (like this one). I've skipped some of the earlier Codecademy projects, since I've done similar things in the past, but this one was interesting and it was on my to-do list.

I mainly wrote it in HTML and CSS and did it in a night. I didn't wireframe it, but I did use Codecademy's sample site as a detailed wireframe of sorts. Here's how it looks:

 

It's pretty basic. I need to get rid of the underline for the Blog link, but other than that it's nice. When you hover over the links, there is a CSS animation rule that causes them to expand a bit - to add some fun little interactivity there.

One of the requirements though was to implement some JavaScript. For a site like this though, there isn't a lot of places to add it in a way that adds value to the page. Then it hit me - why not create a modal that appears when you click "Contact" that includes links to my social media page? That was a great idea! At my job, I've created a few modals already, but that uses low-code methods that are unique to Pega. How would I do it with HTML, CSS, and JavaScript?

Thank goodness for the internet. A quick search led me to this very useful guide from W3 Schools: https://www.w3schools.com/howto/howto_css_modals.asp

As you can probably tell, it's dated. The JavaScript uses var keywords and uses the .onclick method, both of which are older ways of declaring variables and adding event listeners. And the HTML isn't semantic - there is no <dialog> tag anywhere. As a note, I also didn't add a <dialog> tag in my HTML, but it's on my to-do list soon to get that updated.

The first thing I did was insert the HTML code. I updated some of the class and ID names to make it more related to my page. I added it around the top of the page, but due to the CSS rules hiding it, you won't see it by default.

I then went over to the CSS rules and added those in, making sure to update the rules to share the same names as my HTML classes and IDs. The CSS rules are great, but because the modal is hidden by default (and before the JavaScript is added, there is nothing to un-hide it), you won't be able to see it. Even if you click on the 'Contact' link at the top, no modal will appear. It's a ghost modal for now!

Lastly I added the JavaScript. Here is where I made the most changes:

• I updated all the variable declarations to use const
• I added my IDs and class names to the DOM calls
• I changed the .onclick methods to .addEventListener() methods instead, and used callback functions to cause the modal to appear and close
• I omitted the function to cause the modal to close if the user clicked anywhere outside the modal, as I didn't want that one (also, replacing it with the addEventListener() method doesn't work on it's own, which I'll need to figure out).

After testing it, I adjusted the size to make it smaller than 80% of the screen width, and I added some padding to make it longer after my social media icons were added. Below is how it looks:

The X will close out the modal, and the screen darkens a little to emphasize the modal. And each of these social media icons will link to my pages, so you can easily connect.

I'm pretty happy with this, and I will be using this project to build on future projects that require more complex modals. These are great for forms too - and next time, instead of an X, I can add a Cancel or Close button instead.