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.