Software Can Become Our Greatest Asset in Reducing Our Impact

With our newly connected world, it is easy to become enamored with new technologies and new devices that are coming out. Many tech companies come out with a new phone or device almost annually to keep the forward march of progress and growth anew. According to Statista.com, over 200 million iPhone shipments were recorded in 2020. That is more than the mind can comprehend in a single device. That doesn’t include other Android phones. That is a lot of mobile device that all at the end of the day, have one destination at the end of their life, the graveyard. Mobile phones are made almost to be in a commodity state at this point. They have non-replaceable parts like batteries and ports. These are common things that wear over time that could be replaced to expand the lifespan of these products, but they are not. Why is that? Well, it could be a complex answer.

The expected lifespan of a mobile device is about 2 years. This is when the battery will be at its end of life expectancy usually. It makes sense to just replace the battery correct? Well, it can be argued that by allowing easy replacement of the battery, the IP rating is degraded, but this has been proven wrong. (See the Samsung S5 Active with a IP68 rating and user replaceable battery, unlike the iPhone 13 and Samsung S22 of now with IP68 ratings and no battery replacement.) So what can we do to fight this? If major phone manufactures do not want to make the hardware more durable, what else can we do?

Luckily, the software side has answered this issue. While Apple is seen as a clear argument about e-waste on their products, they do have a very powerful weapon against e-waste, “Long Term Support”. Looking at their support page for the most recent iOS 15.2 release at this time, they have support still listed for iPhones from 2016. Namely the iPhone 6S, 6S Plus, and iPhone SE (1st generation). These are almost 6 year old phones that have the latest security updates and software features. Keeping an older item going reduces your impact more than you can imagine. It much like scrapping an old car for a newer, more efficient car might not necessarily be more impactful to reducing energy consumption. Contrast this with Android. Android has finally started to get to a more stable place in terms of core updates for Android devices. The darkest of times are behind us, but the way updates are pushed for Android phones outside of the Pixel lineup is very archaic. An Android phone that is not mainstream can stop receiving updates within a year or so. It also does not help that a majority of mobile network tied devices also require a custom build of that update to the device. This means that a certain phone could be updated on one carrier and not the other. This fragmentation leads to more phones not getting the proper updates that they need. While forking software can lead to more long term support, it has not seemed to be so.

So how do we go further than our current standard? It again is a complex answer. The most obvious answer would be to implement both a mix of long term software support and replaceable parts, but that future is far from right now. (Luckily, some uncommon players are leading this charge like Steam with their upcoming Steam Deck device.) Though the easiest answer at the moment would be to open up platforms. While an Apple is never going to open up their mobile hardware platform, Android could go far in this field. Manufactures such as Samsung opening up hardware drivers to open source to allow open source software to run on them. Imagine, you could use older mobile phones to build things like an easy security camera setup with the amazing cameras they have now. Heck, with the high speed connectivity and powerful processors phones have now, running a file server could be easily done on the device if the open source community had the official drivers from Samsung themselves. Giving purpose to an older device so that it does not land in a landfill is the ultimate way to reduce our impact. This does not even need to be a fully functioning open phone, but giving drivers for open source bootloading of an operating system with wireless drivers would help immensely.

While our impact on the world is not going to end abruptly, we know the steps that corporations need to take to reduce e-waste for consumers. Building products that continue to sell, but also opening up longevity can become a huge plus in this day and age.

Hardware vs Software in 2022

For the last few decades, it seems like hardware and software have been playing this tug of war. What side is more “advanced” in this day and age? What does it mean to be “advanced” compared to the other. Looking back to previous times in history might give a better view on it and what the future looks like for both realms of technology.

If you were born in the 90s, you grew up in a time where technology transitioned from being a specialized item to being dominate in our lives. Technology in the 90s was cutting edge, but by far from a clear cut, standardized item. Anything went. Then, the 2000s hit. IBM is not longer a household brand. Apple unveils the iPod. Mobile phones were as fragmented as can be. It was a lawless land. Your PC was only as fast as Moore’s law could make it. Windows XP was really just DOS perfected and Vista was an attempt at something new. Anything was possible in this day and age. But then, something changed, Moore’s law, was… broken… Hardware screeched to a halt. The same tech that revolutionized before became bloated, requiring more power and creating more heat. Though at the same time, something new happened…

The smartphone took off. These mobile devices needed to be power efficient. They need to cut down that bloat. It reframed what technology was. It wasn’t going to the moon with what hardware could do, while software just road the wave. It was what software could do to squeeze out performance of the now. The creation of ARM was arguably one of the biggest shifts in technology of all time. x86 computing, carried on from the Intel 8086 chip in the 80s, tried to keep as much backwards compatibility with existing technology. The band-aids kept being applied. While x86 has come a long way in 2022, it had a wake up call. It no longer was the end all, be all. ARM could do what it did, but more efficient. So what did x86 do to change? Well, it didn’t really need to. Software was the one who took notice…

Software took a very big turn at this time. Programs no longer focused on taking advantage of a large desktop PC, they focused on being as small and efficient as possible. You no longer had spinning hard drives with large GB capacity. You had flash memory that was in the MB. Hardware was placing heavy constraints on software to power these new interactions with technology. Libraries were smaller. Programs had to be more streamlined. With this, your desktop PC experienced a rebirth. No longer was anyone concerned with continuous leaps in technology, but rather software to be more compact. If you remember the problems with Chrome Random Access Memory, it was a wake up call for everyone to cut down bloat with software.

So in 2022, what is the focus? What is more advanced? Well, we are at a new renaissance because of a new obstacle. Supply Shortage. Because of the new supply problems created by COVID-19, technology is more expensive to produce and sell. What has come of this? AMD, a processor company, has now added support to previous platforms for new processors not previously supported. (X370 chipset to 5000-series processors) Nvidia, a graphics processor company, reusing older technology to keep up with demand. (RTX 2060 from 2 years ago is now being manufactured again.) Because of new constraints on this, software companies have now had to work around this. Microsoft is introducing Windows 11, which requires a TPM (Trust-Platform Module). They have walked this back to help support older systems going forward. Video games are having to support multiple older platforms due to scarcity of newer consoles. (Games running on PS4 and PS5.) It has learned from the efficient days to a time of compatibility again. It must support as many platforms as possible, while also keeping streamlined to run on older platforms.

If you are looking inward on the situation, software right now is way ahead of hardware at the moment. It is at the moment being as flexible as possible to hardware in its current state. As far as even being able to pipe ultra-streamlined products virtually. (Remote Desktops and Cloud gaming) Hardware for most of the time has lead the way while Moore’s law was king. It seems like for the last few years, software has taken that crown.

Getting ready to pivot into tech. How did I begin?

You are reading every article you can find on Computer Science. You are reading SubReddits to figure out what you need to do to get into Software Engineering. But there is one big problem? You aren’t a high school senior, you aren’t even in college. Better yet, you have already graduated college. One day you decided, do I have what it takes to get into a tech career at this point?

A brief overview of my journey is that I graduated from college with a Bachelor’s in Biology, looking to go to Physician Assistant school, only to get to the point where I realized that I didn’t want to work in the healthcare field after almost two years of working in one in preparation to that next step. As you can imagine, it looked bleak. The one thing I did have going for me at that time was a solid support system of friends and family. I have always had a background in technology, but never at the level of sitting down and building programs, websites, the like. Jobs in tech all had the same tag line: “Degree in Computer Science.” I could work to build my portfolio and skills on my own. I could even go through a bootcamp that still to my knowledge, can be effective, but can be a hit-or-miss. I needed the piece of paper and the knowledge to get me there. Like a lot of people, I typed in Google, “Computer Science degrees.” What came up was the usual local colleges and such. One though happened to be at the top of the search results. “Oregon State University Online – Postbacc degree.” I instantly wanted to know everything about it. I applied almost immediately. I knew I wanted a second chance, but before I could apply, I needed to prove something to myself. Is this something I could do? Could I build anything?

The first things you should ask yourself before going into anything highly committal is, “is this something I think I could do?” Luckily, computer science and development is a plethora of knowledge outside the bounds of traditional learning. I simply typed in Google, “how to become a developer,” and I was presented with many guides. I eventually found, Python Crash Course by Eric Matthes. I told myself that I could not go back to school until I completed this book. I know the Oregon State program started with Python. If I could learn the basics of Python, I knew I could be better positioned. After a lot of confusion, but a lot of hard work. (You know, typing every single thing out and not copy and pasting? Especially since this was a physical book.) I eventually was to the point where I could make simple programs with logic. I learned I was accepted shortly after completing it and knew exactly it was what I wanted to do.

Pivoting into tech after being established was a very interesting time. Not only did I go back to school, but also a pandemic started at the same time in March 2020. I also decided to switch jobs. I said goodbye to healthcare and said hello to finance. I became a service professional in investments for a large financial firm at the same time. It was a lot but I never faltered from my goal of changing my life into tech. I have been blessed that the Oregon State program has given me the availability to learn a degree at the same time as working full time. I never could have done it without them.

Since coming to the end of the program here at Oregon State, it definitely has not been the traditional Computer Science path of grinding Leetcode and such that was described to me, but it has been a lot of networking with individuals to build a portfolio. I have been making a lot of strides to pickup where I had failed before in my career with this new second chance. I am really excited for the next chapter in my life going forward.

A CS student’s shallow dive into Home Networking

Generally, when you think of your home network, it includes a router that provides internet to the whole house, be it through a wired connection or a wireless signal. I have always believed to have a decent understanding of making a home network until recently when I was thrown to the fire. What happens when you have most of your family working from home at all times and you start to have issues with the internet? Chaos ensues. That is what happens. So, I started my journey to become a network administrator for my house to build a “pro-sumer” network on a home network budget. There are some huge pitfalls and small tips and tricks for creating a powerful network.

So how did I get into this mess? Our family will have several people working on the internet at once, anywhere from 3-4 people. We have a full gigabit fiber connection as well so more than enough bandwidth. We had a pretty decent router. It was a newer Wifi 6, gigabit router from a reputable manufacture. Wifi coverage was okay. We recently added a mesh device with it to help cover our decent sized house. It worked for our needs until suddenly it did not. Every hour, the router would start to lose the WAN connection and require a reboot. Even after a factory reset, same behavior. It has a two year warranty so I reached out to their customer service, but they wanted to have us try new settings with DNS and experiment around, but here is the problem, people are working. I can’t just experiment with the internet when people need to use it for work. What is even harder is after work, guess what, they want to use it for leisure. I found my first hurdle in network admin, RELIABILITY. I did a few of the changes to see if I could take care of it and nothing. Same behavior. I had also used an older “Fast Ethernet” (limited to 100Mbps, 10x slower than our connection) equipped router to make sure it wasn’t an issue with our ISP. After determining that the ISP was not the issue, the support staff still wanted to keep experimenting on settings. I didn’t have anymore time. I had family members who were mad at slow and unreliable internet. Time for a change.

First thing first was getting our internet back online at full capacity without waiting on a new router. Luckily, I have an old dual gigabit Network Interface card. I know I can spin up a PFSense router with that on my home server. I have only experimented with it in the past with no real premise, but after seeing the current build of PFSense, it actually has become rather user friendly. After installing the card and then telling my host operating system (Windows Server 2022) to give the entire card to the PFSense VM, I was up and cooking within a few minutes of installing. All of a sudden, with very little infrastructure, I was able to get our router up with a free solution! Obviously, if my server died, the internet could go down, but I am able to make a copy of my configuration and can get the firewall back on almost immediately on my desktop on Hyper-V or an old computer with two network interfaces. That easily solves that. I chose obviously to keep things simple and have PFSense be my firewall and DHCP server. Though in the future, I could role up a separate DHCP server that then could handle all of my LAN interfaces separately than my firewall. It gives me a solid base. Now, up to this point, I have been using the separate mesh device to provide Wifi from PFSense. It only had a 100Mbps port so now only wired clients were getting that full gigabit speed. Now a journey down wireless networking.

So we have actually been through many routers in my house. We have had a gigabit connection at our house since they offered it in my area in 2014. Most either die after a year or two. Most have terrible wireless signal. The recent Wifi 6 router we had was the best solution so far, but something had to change. Time to look at the business sector. Since our gateway was taken care of, we just needed an access point. These will get you into a rabbit hole real quick. It essentially is investing into an ecosystem with a specific brand. Some brands have cheaper points, but require a “management” application that can either be ran on a paid for cloud experience or local machine. Since I have a server in use, this was an option. Some do run in a “standalone” mode for basic use, but you lose out on features if you want to add more. After reading a lot of reviews, I decided on a brand which is an enterprise brand, but not as mainstream as other popular solutions based on price, Wifi 6, and free cloud management. It was here within a day off Amazon. I do not want to reveal the brand on this blog, but for a enterprise/business product, setting the product up was easier than most consumer routers. I chose to go with the cloud management for the feature set. It was as simple as scanning a QR code on the device, signing up an account, setting the SSIDs and the passwords. After having to resort to a mesh system before for our Wifi to cover our house, I was scared I would need another access point. That was easily subsided within a quick walk around the house. I easily get full speed anywhere in the house on Wifi where my phone is the bottleneck first. After years of degraded Wifi and being in the consumer space, I finally found the endgame solution for internet.

So takeaway from this. First, the best part of this? When your family no longer asks about the internet, it means it is working. Second part, I learned a lot about larger networking. Solutions that 10 years ago would have been left to classically trained network admins are now very accessible for the consumer. I was able to spin up a small business capable network for less than 100USD. I learned a lot about network settings and practices from the new material out there. Building a modular network with redundant points of failure instead of everything on one single point of failure and stop a lot of headache down the road. I implore everyone to do a little reading into your own network as it opens a world of possibilities. I now am running a VPN from my own home so I can access everything and also have a DNS sinkhole for blocking ads. It makes homelab outside of programming possible. It gives me a further understanding of how our world stays connected.

Increasing Access to Programming Education in US High Schools

It is no new fact that computers have become a huge piece of the classroom, especially in the post-pandemic world that we live with remote learning. Computers are now an integral part of academics within the United States. Their use has accelerated and streamlined teaching of subjects from Mathematics to English. But this leaves us a question, what about the subject of the device they use for those other subjects?

When I was in high school from 2008-2012, there was no access to a “Programming” class. The closest class that was available was your standard “Microsoft Office” class where you could automate your “Excel” sheets with formula and that is it. Upon checking the current curriculum guide for the high school, a basic programming class is not offered yet. I have also seen this reflected in other high school curriculum in my area, while some private schools do have introduction courses. So what are the challenges to this that could explain the absence of curriculum, and what can be done to increase adoption.

Challenges that face US high schools for adoption of Computer Science programs are mainly wrapped around Computer Science’s greatest strength, cost. It can be argued that most of a Computer Science curriculum could be taught with Open Source technologies that effectively bring the cost of software to zero. Great! Sounds promising! Not quite… While the software could be reduced, it is where the hardware comes into play. School systems nationally have been tasked with getting a large amount of students connected properly through the use of a number of tools. The greatest asset to school systems have been Chromebooks. Chromebooks are like any other computer. They run an operating system. They run applications. They connect to a network. Though, they have an Achilles heel for programming. They don’t have quite the freedom of a “full” operating system for the user. Most programming experiences will be either browser-based or half-baked applications. You can use browser items to accomplish simple coding, but this can be extremely limiting once you build larger programs. Fortunately, it seems there have been attempts by Google to open up the operating system to run a bash shell with access to Debian underneath, but a school system isn’t about to put money into a curriculum with beta use. What will need to come from this will need to better in browser coding experiences to offset experiences on all platforms for further adoption in a limited ecosystem. The next part of cost is faculty. According to Salary.com, the average salary for an entry level Software engineer in the US is $72,049. The average high school teacher salary is $63,001. That is an $11,000 dollar difference and does not take into account other benefits and costs associated with the two fields. There is also higher growth in the industry rather than teaching for Computer Science. While the upstart costs of these programs could look promising, it could face long term costs..

What is a school to do about these challenges to offset costs? Luckily, there are quite a few ways around this. Going back to Chromebooks. I hope you didn’t think I was giving them grief, because they really are a great solution to a problem. (If their slow specs and limited support time window are great for the environment remains to be seen though.) Though, you definitely can access a better way to create larger products. With virtualization technology at its current level, it would be very easy to create a large group of remote desktops that students could access further resources to develop and code on. This also would allow the teacher access to their coding environments as well so they can help students diagnose issues. Increasing access to new technologies to implement in the curriculum would be an easy way to do so. As far as salary is concerned, well that is quite a bit different of a challenge. A good short term would be creating interest for current teachers to expand their knowledge to cover Computer Science. Teachers that currently teach items like Physics or Engineering would perhaps already have some exposure to programming and able to develop a suitable introduction curriculum.

While it should not be instituted to make programming a mandatory skill, allowing further access to Computer Science and Programming at the high school level would be beneficial to increasing the available interest in the topics for students. This would prepare students going into degree programs at a better rate than others. By eliminating further barriers, you could help all demographics of students in the country as well.

Sources:

https://www.salary.com/tools/salary-calculator/software-engineer-i

https://www.salary.com/tools/salary-calculator/high-school-teacher

Using Chart.js with Vue.js v3

Introduction

I recently needed a way to integrate a charting utility into a Vue.js project of mine and needed to find a way to do so. I really enjoyed the flexibility of Chart.js, but at this time, there is no integrated implementation of Chart.js into v3 of Vue.js. I experimented with some npm packages with no luck. So it was time to get dirty and fake it until I made it work.

In this post, I will be showing a quick way to make a Chart.js component that can react to props for re-usability multiple times in your Vue.js projects.

Prerequisites

To complete this tutorial, you will need the following:

  • Node.js and NPM package manager installed locally
  • Basic Knowledge of Vue.js components (I recommend using the Vue CLI to create a project)

This tutorial is being prepared with Node v14.17.1, @vue/cli 4.5.15, npm 8.3.1, and Chart.js 3.7.0.

Step 1 – Creating Your Vue Project and Install Chart.js

Let’s create our project directory using Vue CLI and use default to use Vue 3

$ vue create vue-chart --default

Then let’s change to the directory.

cd vue-chart

Now, we can install Chart.js into our project using npm package manager.

npm install chart.js

At this point, we have created our vue-chart sample project and installed our Chart.js dependencies. Let’s get to the fun work now!

Step 2 – Create a Vue Chart Component

I will provide our sample data later in this tutorial, but lets immediately get into creating the Vue component that we can import to other components in our Vue application.

Under your src directory, you will have a components directory. You might notice it has the default HelloWorld.vue file if you used the Vue CLI as before in step 1. In this folder, create the file Chart.vue.

Now, we will want to properly format our component into what Vue likes to see including our template and script elements. We will also include the canvas element with a specific id that Chart.js relies on and import it into our component. It is also a good idea to wrap our canvas component into a div for Vue to properly operate.

<template>
 <div>
  <canvas id="chart-example"></canvas>
 </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: "Chart"
}
</script>

At this point, you have created the base Vue component. Now what? Well, we will need to add just a few more lines to allow Chart.js to do its thing and Vue to accept props from parent components.

Let’s first take care of props, Vue’s way of sending data to child components so we can make this truly reusable.


<template>
 <div>
  <canvas id="chartexample"></canvas>
 </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: "Chart",
  props: ['chartData']
}
</script>

chartData will be our general prop that we import to provide Chart.js the data it would like to create our graphs. The power of usability!

Now, our canvas chart element needs that linked to our prop. This is where a lot of functionally breaks down if we do not properly link them. For this, we are going to use vanilla JavaScript and DOM manipulation in conjunction with Vue’s mounted lifecycle hook to make sure it is updated when Vue renders our component instance.


<template>
 <div>
  <canvas id="chart-example"></canvas>
 </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: "Chart",
  props: ['chartData'],
  mounted() {
    const chart = document.getElementById('chart-example');
    new Chart(chart, this.chartData);
 }
}
</script>

Okay, we just added a lot there. What essentially is happening is during the mounted hook of Vue, the chart variable now points to our canvas element that Chart.js can use. This is all we have to do now for our component. If this is your first time making a Vue component, congrats! You just made your first reusable component in Vue!

Step 3 – Import Your Chart Component

At this point, we want to display our component on our Vue app. You will want to navigate to App.vue in the src directory. This is your main parent component if you are new to Vue. If you used Vue CLI, you will have a populated page. We do not need any of this. Let’s make some changes to App.vue by removing the “HelloWorld” component, import, and element to make sure we do not have any extraneous items.

<template>
  
</template>

<script>


export default {
  name: 'App',
  components: {
    
  }
}
</script>

Looks similar to our Chart.vue component base template right? Now let’s start importing our Chart.vue component.


<template>
  <Chart/>
</template>

<script>
import Chart from "@/components/Chart";

export default {
  name: 'App',
  components: {
    Chart
  }
}
</script>

Awesome! You now imported your created Chart.vue component to your parent component. Time to give it some data to create a chart now!

Step 4 – Feed Your Chart Some Data

You cannot have a chart without some data, so let’s build an object that we can feed our Chart.vue component to digest!

For Chart.js, when you make a chart object, it requires an internal data object that has arguments that can be populated. In the interest of time, I would recommend going through the Chart.js documentation to learn more, but because we built our Chart.vue component to be reusable, you can change anything! Line graph, bar graph, animated graph, doesn’t matter!

Now let’s use Vue’s powerful data() property to store objects and return data in conjunction with v-bind to send this chart internal data object through our prop earlier. For our chart data, I am just going to use the provided example on Chart.js.

<template>
    <Chart/>
</template>

<script>
import Chart from "@/components/Chart";

export default {
  name: 'App',
  components: {
    Chart
  },
  data() {
    return {
      chartObject: {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      }
    }
  }
}
</script>

And now, let’s use v-bind on our <Chart/> tag. This will take our parent component data and give it to our Chart.vue component. Essentially, the parent has the data, but doesn’t know how to make a chart; the child knows how to make a chart, but doesn’t have the data. We now get to combine them to complete it! (I am also going to wrap our Chart in a <div> so we can give it an inline style of max-width so our chart is manageable when we serve it.)


<template>
  <div style="max-width: 900px">
    <Chart :chart-data="chartObject"/>
  </div>
</template>

One thing to note if you are new to Vue bindings, our child element has the prop “chartData” if you remember from Step 2. How does this relate? Well, HTML inline attributes must be kebab-case so when you have to pass with a v-bind to a prop that is in the lowerCamelCase that Vue uses, Vue will automatically convert that from “chartData” to “chart-data” in this instance. Cool huh? More create and less syntax drama.

Alright, last step is next. Let’s see that creation!

Step 5 – Serve Your Chart!

At this point, everything will be connected and ready to serve! If you have a Vue background, you know the magic words, if not, go back to your terminal that has the project directory from Step 1 and enter the magic words.

$ npm run serve

Open up a browser to see your Vue application. By default, Vue will serve locally at port 8080.

http://localhost:8080/

What you should see is this in your browser!

Our Vue application is alive! You have successfully made a reusable Vue component with Chart.js accepting any data prop you give it.

Conclusion

So what, you made a chart you might be thinking? Well, let me close on some hidden superpowers that your Chart component possesses. First, you get all the power of Chart.js that will not break as you build out your Vue application. It is isolated to its own component. Second, you can use Vue’s power of rendering to change the Chart without changing the web page! There are various conditions under which a component will re-render. I will link Michael Thiessen’s blog post on this topic. It has a lot of information on this for re-rendering a component. It will work directly with this if you want to start building methods on your parent component to alter data, say for a dashboard of some sort.

And there you have it! A quick and dirty way to integrate arguably the best chart Javascript library into your Vue.js 3 projects without Chart.js support out of the box!

The Art of Vue.js

Much like Sun Tzu’s The Art of War, the documentation is a collection of skills on how to create a simple and quick single page application. I recently took an open source class in our Computer Science curriculum at Oregon State where you can focus on one or multiple FOSS projects. I slowly have been working to deepen my knowledge of front-end frameworks and I decided to go with Vue.js for its appeal in the open source community compared to its arch-rival, React.js. (Technically, open source under Facebook so…) It was through this time to interact with the open source community behind Vue is when I discovered my absolute love for Vue and the ecosystem around it for creating single-page applications. I want to use this post to tell you some simply awesome things Vue offers for anyone wanting to learn it and add Vue to your war chest.

First thing is first, lets talk about the ecosystem and how easy it can make getting started. You should immediately install the Vue CLI (Command Line Interface). Some IDEs will automatically do this, but with the simple “vue create” within a directory, it will completely setup your environment to get you right off the ground. Then you can continue to use the CLI to install things like Vue Router which is a powerful tool to take care of all the routing in your web application. You can build a full web application within a few lines of code so you can get right to it.

Secondly, the use of components will make your life much better. This is a lot of other framework’s basis, but Vue makes it very simple. You do not need to worry about importing and exporting specific variables. You can get anything done within the Vue component. Then, you can go down the rabbit home of importing components within components. Everything is reusable. You don’t have to rewrite a whole component to import it into anything else.

Thirdly, integrating it into other code. You can easily integrate Vue into other projects. I have built a full profile website in Github Pages with routing and everything within one HTML file. It makes life easy and simple. You can build a web application within anything. It is great and highly flexible. A tenet of Vue is that it is “Progressive” so you can implement it in bursts.

These are only a few of the great points of Vue.js and why I love it. It can do just about anything you want. I won’t even go into binding inline styles and classes to allow everything to be dynamic.

What led me to Computer Science and where do I want to go?

Like everyone, you don’t just wake up one day instantly knowing what you want to do or what your interests are. It is always a gradual progression of being introduced to something. For me, computers have always been a part of my life and identity.

I owe most of my interest into computers to that family Dell Dimension that every family had. It ran games like The Sims easily enough. It wasn’t until my older brother bought a new game called FEAR to play on it that I started to learn how PCs work. It was playable, but it was on the lowest settings possible. Why I wondered? I started to research more and more into PC specs and figured out that our Dell was not enough. As any nine year old(Yes, my parent’s did not know the game was rated M.), I couldn’t convince my parents to buy a new family computer or upgrade it. I knew there was only one way to play it and all it’s glory, to build one. It took me a few years of saving so unfortunately I couldn’t buy one to play FEAR immediately, but I finally was able to build my first computer. This allowed me to introduce my friends to building PCs and make new friends from it. Computer hardware was always my jam.

So easy decision to start a career in computers right? Not really. I viewed computers as my hobby and I didn’t want to mix that with my life. I decided to purse a career track to be a physician assistant out of high school. I earned a degree in Biology and started working in a hospital laboratory to get patient hours. I started to realize that it wasn’t meant for me and experienced real burnout. I liked patients and staff I worked with, but I wanted something different. I wanted to ultimately go back to school, but try something different. I wanted to do something I never tried out, building software. I found Oregon State’s online degree and knew it was the perfect match for me. It came at the right time right when the pandemic started so being locked in the house was a good reason to start online classes. Though the program, I found that I enjoy software development as much as I love the computer hardware side.

Currently, I have really delved into full stack development and starting to get into mobile development. I have become a huge Vue.js junkie and know the documentation like the back of my hand. Honestly, learning how to use Vue.js has accelerated my learning in other subjects. I am hoping to really delve into React and React-native to get more into the world of front-end, but also new ways to enable a solid back-end. I really want to purse a future in full stack going forward.