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.