Yearly Wrap Up - 2023

joanna-kosinska-0CQfTLOVTPU-unsplash

Photo by Joanna Kosinska

2023 is nearly coming to an end and so are the holidays. It has definitely been quite a fast year, if I say so myself; with so many things happening, this year has been quite the speedy year.

Therefore, what better time to self-reflect than near the end of the year? After all, with the new year coming closer and closer each second, it's a good time to reflect on my development journey and create goals for the upcoming year. Self-reflection time!

Previous Goals

emile-perron-xrVDYZRGdw4-unsplash

Photo by Emile Perron

There were several goals that I had created upon entering the year of 2023:

  • Continuously improve my own JavaScript skills
  • Improve on CSS
  • Learn a frontend framework (or frameworks) to become job-ready

Software development is an incredibly large field with various applications and languages and for me, I entered 2022 with my choice of frontend development. This would mean I had to choose my set of skills and languages in order to become accustomed within the field.

Of course, this would mean I would have to start building the foundation by learning the following:

  • HTML
  • CSS
  • JavaScript

and I have done just that! Afterward, it was just a matter of continuous practice to expand my mastery on the subject; hence 2023 is the year of just that!

Enter.. 2023!

2023 would become the year where I put full focus into developing my frontend skills. At first glance with the amount of languages, technologies, and frameworks out there, learning the minimum requirements would appear to be quite a daunting task but like learning any other skill, it's all about putting the first step forward and gradually build up the craft over time.

Learning Never Ends

For software development, learning is all about putting your skills into practice. Without enough practice, then the knowledge that you acquired may not fully stick and thus restarts the cycle of tutorial hell.

If I wanted to escape tutorial hell, then I needed to find a way to apply the skills I have learned constantly. Thankfully, having access to the internet means I can comb through to find various resources to help practice these skills enough for it to stick.

Modern JavaScript

modern-js-tutorial

JavaScript is fundamentally a large language. Due to its scope in size, there is quite a lot to take in to fully learn the unique appeal of the language and how it differs from other languages. Sure, I do know my if-else statements, my try/catch, and how to create functions in JavaScript but there are certain features unique to JavaScript that makes JavaScript what it is today.

I came across The Modern JavaScript Tutorial, a free web resource that teaches the fundamentals of the language in a modern way for programmers to dive deep into JavaScript.

I originally learned my JavaScript from freeCodeCamp's JavaScript Curriculum where it taught JavaScript within a 2-panel window: one that taught JavaScript concepts and one that had an interactive IDE that allowed you code right into the browser.

Don't get me wrong, the entire curriculum is quite solid as it taught me what I needed to do what I can today with examples and questions that helped solidify my knowledge of the language. However, the slight problem I had with their curriculum is that their tutorials were way too short for me to fully grasp the concept completely before I had to solve their challenge questions.

This is where Modern JavaScript proved to be superior where their tutorials were much more fleshed out with various examples and present situational use cases where such concepts could be applied in modern programming. Although I didn't completely read the entire web tutorial, I read up on subjects that I felt weak on and it left me feeling more confident in the language (and possibly even learning something new that I didn't before!).

Codewars

codewars

I came Codewars this name a couple of times while surfing about on Reddit. Upon research, Codewars is a platform that allowed users to improve their programming skills by practicing small programming challenges.

Challenge yourself on small coding exercises called "kata". Each kata is crafted by the community to help you strengthen different coding techniques.

When you sign up for an account, your account starts at the lowest rank and as you progress more Kata, your account rank increases and thus, the difficulty of the Kata does too. Of course, this does not mean you cannot go back to Kata you have already done before; you can reattempt old challenges anytime you want to further your skills.

What makes the platform unique is that upon submitting your results, you get instant feedback on whether your attempt is right or not by comparing the code you've written against test cases to help reinforce new optimized ways to solve the given problems.

I often find myself wondering where to go to to apply the concepts I learned and after months of using this platform, I find myself feeling more confident in my JavaScript skills as the challenges I come across can be quite difficult. After all, what better way to actually apply the concepts you learn than to challenge yourself with a programming exercise to test whether the concepts stuck or not?

Frontend Mentor

I have made a blog post about this one already so for further information on this platform, do check the blog post here

I had platform that helped solidify my JavaScript skills but now I wondered if there was a similar platform but for HTML/CSS instead. Thus, Frontend Mentor came to the rescue.

Frontend Mentor challenges provide nothing but design/figma images and a style guide to follow. The goal of each challenge is to replicate the design images as close as possible while following the given style guide.

Throughout the year, I have challenged myself by completing several of these challenges of varying difficulty. One weaknesses I had when I initially learned HTML/CSS was how to approach a given problem effectively.

There were many times in my early development journey where I had thought I had a good HTML foundation, started styling my site, and realized that my HTML foundation isn't as great as I thought. This resulted in amending my code and an additional hour of troubleshooting to make sure everything is solid!

Repeatedly practicing these challenges improved my insight on how to tackle these problems better, resulting in less total time taken to accomplish the task while providing me a better understanding on how to write

Tailwind

Similar to Frontend Mentor, I have also made a blog post about Tailwind, so check the blog post here if you're interested in my thought's about it.

Tailwind has always been a hot topic no matter where I go and after months into my development journey, I wanted to try picking up Tailwind to add to my toolbox and see what's the hype about.

After months of usage, Tailwind has been incredibly pleasing to use. By simply adding CSS classes to my code, I have been able to product stunning results at the fraction of the development time that it would have taken with traditional CSS.

Of course, when comparing to traditional CSS, Tailwind does have flaws and is not an entirely perfect framework; nevertheless, Tailwind is a definitive addition to my toolbox to style my sites.

Frameworks and their Importance

webstacks-WbOR54pzvLM-unsplash

Photo by Webstacks

More often than times when given a task, we have to choose the right tools that fit our use cases. Having the right tools not only prepare a suitable foundation on how to build it but also boosts productivity.

For this field, frontend frameworks are essential within our toolkit and it's what I have also chosen to study within the year.

Sure, you could say that regular HTML, CSS, and JavaScript would do just fine and honestly, props to you since even with the most basic, those would do just fine.

However, where frameworks shine the most would be their ability to speed up the development process by giving developers a foundation to work with, so most of the development time can instead be focused on creating responsive layouts and dynamic UIs for the end user.

Although there are many frameworks out there to choose from, I wanted to focus on some frameworks that go hand-in-hand with what I initially learned at freeCodeCamp.

Next

Apart of freeCodeCamp's frontend development curriculum, React is the focus of their courses. Since React is what I initially learned, I wanted to choose a framework where React would be the sole language for me to apply. Enter Next

Next.js is a React web framework that extend current React features as well as integrate existing tooling, resulting in an all-in-one framework that provides everything you need to create dynamic web pages.

I do plan on writing a blog post that explains my experience with Next but simply put, this framework is absolutely amazing when it comes to working with React, providing ample features out of the box that I would have to take time to integrate elsewise with vanilla React.

In addition, reading the documentation and following their official tutorials helped me learn a bunch of web development concepts such as Middleware, CSR vs SSR vs ISR, server components, etc.

Astro

I have definitely written a post about this one, so if you're interested in learning more, read more here at Astro - First Experience

Astro is a dynamic web framework built on speed, offering very similar capabilities such as Next, resulting it being a competing framework.

What makes Astro unique though to me is the ability to integrate several different languages within one framework, offer various complexities that otherwise would take awhile to implement, all within very little syntax.

For content-based websites or websites that do not require complexity, then Astro has been the go-to for many of my projects due to how simple, easy, and honestly fun it is. I always learn something new whenever I come back to this framework.

2024 - New Goals New Me

ian-schneider-PAykYb-8Er8-unsplash

Photo by Ian Schneider

We're finally at the end and this post has been the longest post I have made so far compared to all the other ones but for the occasion, why not?

Only when we're about to step towards a new year is when we should be thinking back on the actions we have taken for ourselves and create new plans for the future.

After thinking long and hard, I would like to focus on these concepts for 2024:

  • Backend integration, shifting focus to full-stack development
  • Practice more advanced CSS techniques
  • Contribution to Open-Source projects
  • Expand my knowledge on anything development/technology related really

Being in this field, you're expected to always be continuously learning in order to keep up with today's technology and personally speaking, with so many different choices and options out there to choose from, it can be quite difficult at times.

But for me? I'm fine with it. After all, the learning process is both struggling and rewarding, which to me, is fun on it's own. As long as I am actively picking something new up, no matter how big or small it is, I would consider it a success towards my well-being.

2024 - This year, will be better than ever!

References

  1. Astro
  2. Next.js
  3. freeCodeCamp
  4. Tailwind
  5. Frontend Mentors
  6. Codewars
  7. The Modern JavaScript Tutorial