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/

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.

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!

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.