[**RACQ**](https://racq.com.au/) offers insurance, assistance, banking, car and solar products across Queensland and Australia. RACQ is owned by over 1.7 million members and have been a force for good in Queensland communities for over 117 years.

I took on a six month contract role at RACQ to help build out a new car comparison tool with a focus on EVs and low emission vehicles.

The tech stack included Vuejs, TypeScript and Pinia integrated with a headless Sitecore JSS implementation using GraphQL.

Some notable highlights include:
- Integrating vehicle data from the Australian Motoring Service API
- Creating complex filter controls to allow users to search, sort and filter vehicles based on a wide range of vehicle data
- Presenting complex data sets with a major focus on UI/UX best practices
- Numerous bug fixes and enhancements

The RACQ car comparison tool can be viewed at [https://www.racq.com.au/car/compare](https://www.racq.com.au/car/compare)

RACQ offers insurance, assistance, banking, car and solar products across Queensland and Australia.

RACQ

Hi there, my name's Jack Lyons. I'm an expert Front End Developer from Gold Coast, Australia 🇦🇺. My preferred tech stack includes Vue.js or React.js on the front end coupled with Node.js on the back end. I enjoy working on responsive, mobile-first websites, web app's and SaaS products.

When I'm not coding you can usually find me outdoors rock climbing, travelling the world, digital nomadding from cafes and coworking spaces or attending dev meetups. I also write rock climbing and travel articles on my other blog called [**Adventureinmyveins**](https://www.adventureinmyveins.com). It's an adventure publication crafted for rock climbers and mountain lovers who want to travel the world & build a location independent lifestyle.

My background is in Urban Planning and I have a degree from the University of Queensland. I have also studied abroad in Austria 🇦🇹, where I learnt German and studied Environmental Sustainability at the Karl-Franzens-Universität in Graz. It was there at university where I also met my wife Zoe [***@wildblend.***](https://www.instagram.com/wildblend/)

While I don't work as an urban planner anymore, I am still deeply interested in the emerging wave of "[**urban tech**](https://www.quora.com/What-is-urban-tech)" and "[**smart city**](https://en.wikipedia.org/wiki/Smart_city)" startups around the world. I would love to one day merge my passion for web and software development to solve the challenges of our modern built and natural environment. If you are looking for a front end developer for your urban tech startup, then please let me know!

Currently I am living on the Gold Coast, after travelling the USA 🇺🇸 for 12 months in 2019. During that time I was fortunate enough to work for some excellent clients both in Australia and in the United States. This included [**Adore Beauty**](https://jacklyons.me/portfolio/adore-beauty/), [**SoldNest**](https://jacklyons.me/portfolio/soldnest/), [**EvacGuide**](https://jacklyons.me/portfolio/evac-guide/) and [**Paleo Hacks**](https://paleohacks.com/)**.**

If you are looking for an expert Front End Developer for help on your next project, feel free to message me via the [**contact page**](https://jacklyons.me/contact).


I'm
 a front end web developer from Gold Coast, Australia. I enjoy building 
modern web sites and applications with TypeScript, Vue, React, ES2020+, Node, GraphQL, 
TailwindCSS and Sass.

About Me


Recently, I was lucky enough to get my hands on the new [**Advanced Vue**](https://www.vuemastery.com/courses/advanced-components/the-introduction/) course by Gregg Pollack over at [**Vue Mastery**](https://www.vuemastery.com/). This course definitely packs a punch and dives deep into the Vue.js source code. It might take you out of your comfort zone but that's OK. Be sure to grab yourself a strong coffee and get ready!

For those who are just starting out with Vue.js then you might not find this very helpful. If this sounds like you, then I would highly recommend you first take a look at the Vue Mastery "[**Intro to Vue.js**](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance)" course and then come back.

At the time of writing this is 12 videos long, which I initially thought was kind of small. But I gotta say, what it lacks in size, it absolutely makes up for in quality!

This course runs through the following advanced Vue concepts:

- Learn how to Reactivity works (_using pure JavaScript_)
- Where Reactivity lives in the Vue.js source
- The inner workings of Vue's template compilation
- How to create render functions (_extremely powerful for advanced component creation!_)
- How to use functional components (_a must know for applications with large data sets_)
- Vue's internal mounting process and how it works
- How to use render props & scoped slots (_a really cool technique for reusing components_)
- Cover other design patterns and techniques

Below you'll find a short summary of some of the main concepts covered in the course along with my thoughts and remarks. If you just want the _TL;DR_ cliff notes, [**click here to read the final score**](#final-score).

---

#### Building a Reactivity System

To kick the course off, Gregg demonstrates how one can easily to construct their very own reactivity system in plain JavaScript. I always thought Vue was full of crazy functions build only for magicians and ninjas to decode. However, Gregg shows us that the magic behind Vue can be broken down into a simple object with some basic methods.

This little demonstration shows us how to make variables or _data_ reactive by storing and subscribing them to a JavaScript instance. When a variable is updated, the subscribed functions or variables are notified and subsequently updated, resulting in a new value output. All this is achieved with some good old fashioned Object Oriented JS.

After this video you'll probably feel a little out of your comfort zone. Luckily Gregg's video footnotes are very detailed and well documented. If you're not already familiar with some of the more modern Object Oriented JavaScript features then I highly recommend **[Kyle Simpsons "You Don't Know JS" book on _this & Object Prototypes_](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch4.md).**

---

#### Proxies and their potential in Vue.js 3.0

The [**2x @next branch**](https://github.com/vuejs/roadmap) of Vue is moving toward the use of proxies to enhance reactivity. The [**Proxy**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) **Object** ( part of the ES 2015+ spec ) is used to define custom behavior for fundamental operations ( e.g. property lookup, assignment, enumeration, function invocation ). The major benefits of using Proxies are that we no longer have to worry about Vue’s gotchas when it comes to reactivity. In other words, this may well mean no more writing:

data() {
return {
names: \[\]
}
}

**Vue.set(this.names, 0, 'John Elway');** // With Proxies, we no longer have to use _Vue.set()_

This essentially helps us write more reactive code without really needing to tell Vue "_hey, I just pushed an item onto the names Array!_". From the outset, the data will be tracked via a more intricate method of getting and setting with proxies.

Gregg also chats with the founder of Vue, Evan You, about proxies and how they could significantly speed up Vue's already powerful reactivity system. His deep insights are really valuable, which is something you certainly wouldn't get from other courses.

---

#### **Reactivity in Vue**

Now that you have gained some familiarity with the concept of reactivity in JavaScript, Gregg  takes you deeeeep into the Vue source code. What's really cool is that Gregg breaks each step down into bite-size chunks. He essentially follows one function through to another, and another, and another to truly get to the bottom of Vue's incredible reactivity system.

By tracing Vue's execution stack down to it's core you can truly learn about how our data changes and is observed over time. This is really quite helpful when it comes to debugging and it certainly helps to decrease the friction when parsing through Vue's source code.

This is also really helpful to know because if you are looking to write extremely performant code, then you really need to understand how best to leverage Vue. Concepts like lifecycle hooks, watchers and changing data properties are all very important to understand deeply.

Below is a snapshot parsing through each file and function to help you understand Vue's reactivity system at large.

![Reactivity in Vue](images/Screen-Shot-2018-08-30-at-2.33.54-pm.png)

---

#### **Template Compilations & Render Functions**

Now this is where things get really interesting. I never knew truly how powerful Vue.js was until I watched this video and learned about Vue's [**render functions**](https://vuejs.org/v2/guide/render-function.html). The pure fact that Vue allows render functions and JSX templating, just like React, makes it incredibly versatile. If you are coming from a React background then I bet you'll be pleaed to know that you can use render functions. This certainly might help you transition across to Vue, which in my opinion, leverages all the best parts of React, and much more!

This section also explores how Vue's [**Virtual DOM**](https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20) works and why it is so powerful. It then follows on with some easy to digest diagrams that explain render functions and how they can be applied in the real world.

I enjoyed this episode as it acted as a gateway to understanding how to truly leverage the power of Vue using smart template and component design patterns. Plus, there's nothing like hearing from the Vue creator, Evan You to help break down these advanced concepts!

---

#### **Functional Components**

Again, another high quality video covered by Gregg in the course. Functional components are important to learn because they allow you to gracefully create fast-loading presentational or wrapper components. If you're coming from the React world, you might known them as _"dumb components"_.

In a nutshell, a Functional Component:

- **Can’t have** its own data, computed properties, watchers, lifecycle events, or methods.
- **Can’t have** a template, unless that template is precompiled from a single-file component. That’s why we used a render function above.
- **Can** be passed things, like props, attributes, events, and slots.
- **Returns** a VNode or an array of VNodes from a render function. Unlike a normal component that has to have a single root VNode, it can return an array of VNodes.

You might be wondering why functional components are worthwhile, seeing as they don't really allow you do to that \_\_much\_\_. However, functional components are important to understand because they are:

a.) faster to load

b.) allow for the insertion of other _entire components_ into the DOM based on an if/else condition, for example. In other words, they are great to use when you need a way of programmatically delegating to a specific component.

I haven't personally run into any performance issues on my own Vue.js projects when rendering components. However, if you're a working on a large scale application that needs to render hundreds or thousands of similar components, then functional components might help.

This topic is huge, and there is a lot of information to digest. Luckily, with Gregg's expert teaching and Evan You's first hand explanation, you'll definitely come away with a great understanding of when and _why_ you would want to use functional components.

---

#### **The Mounting Process & Why Vue is so damn awesome**

The best thing (in my opinion) about Vue is that it can compile down to basically any platform (Mobile, Web, Desktop). This is possible because of it's powerful "_Patching Algorithm_". I really loved learning about this topic because Vue is seriously revolutionizing the way we write front end code, regardless of the platform.

In this video, Gregg walks us through the `createPatchFunction()` which is a factory function that allows Vue to map the Virtual DOM onto the platform display (i.e. web, iOs, Desktop or Android). For example when mapping to web browsers, the DOM APIs are used inside these operations (think `document.createElement`).

At the moment there is platform-specific code inside Vue Core (Web & Weex). As you might imagine, this doesn't separate concerns optimally just yet. It's still a very new concept and a major upgrade at that! In Vue 3, Evan You states that he would like to provide a first class renderer API. This would help to separate platform specific code from Vue core. This would make it easier for other platform developers to integrate with Vue.

I'm really excited because [_**NativeScript-Vue**_](https://nativescript-vue.org/) just hit 2.0 and it's freaking powerful! With NativeScript-Vue you can build your apps rapidly, because you don't have to learn any new languages. Just write your code, compile it down to your desired platform, and run!

---

Phew! If you made it this far, well done. There is a lot of meaty information in Advanced Vue Components. I have emphasize that this course is _not for a beginner_ - it covers a lot of advanced JavaScript and Vue concepts. I would say that you probably require at least 6-12 months of experience with Vue before diving into this. And it's not like you'll get it first time over, these concepts require a lot of practice and experimentation.

#### Final Score: 8 / 10

**Does really well:**

- Video Quality
- Explanations and video notes
- Exclusive bonus footage with the creator of Vue, Evan You
- Gregg covers advanced topics that aren't often taught in other courses

**Could do better:**

- Reinforce each concept with short exercises and real-life examples
- Potentially add more videos in the future??
- Have some performance tests to compare differences in component rendering

**Is it worth it?**

I think this content is super high quality but it really depends on your current situation when it comes to extracting value from the course. If you are a professional developer who works with and relies upon Vue.js, then this course will certainly help you become a better. You'll become a more _aware_ Vue developer. In my opinion, it's essential for a developer to know when to use a variety of language tools and be able to explain why. That's what separates the juniors from the seniors.

The advanced concepts covered in this course will definitely take some time to sink in. For me personally, I would have liked to have some supplemental exercises alongside each new concept. For others, you might want to do some extra research on the side.

It would be amazing to have a completely separate course that purely focuses just on implementing these advanced concepts. Perhaps a course on building a series of real-world components using these advanced concepts? Maybe Gregg is working on this.... ? 😉

All in all there's plenty to take away from this course and I think it's worth it. Buy this course if you want to learn how to truly boost a Vue applications' performance. This course will help to DRY up your codebase significantly. Afterwards, you'll know how to apply a wide variety of complex design patterns. If you're working on a large codebase where performance is important, then this course will surely help you.

---

For those that are interested in [**Advanced Vue Components by Gregg Pollack**](https://www.vuemastery.com/courses/advanced-components/template-compilation) simply enter the codeword **"JACK25DISCOUNT"** at checkout to get a whopping 25% off when you sign up today!


Advanced Vue Course Review by Vue Mastery


In this [**Free Code Camp Bonfire**](https://www.freecodecamp.com/challenges/caesars-cipher) we will be doing some deciphering! One of the simplest and most widely known ciphers is a **Caesar's cipher**, also known as a shift cipher.

In a shift cipher the meanings of the letters are shifted by some set amount. A common modern use is the cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.

**Helpful Links**

- **[String.charCodeAt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)**
- **[String.fromCharCode()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)**
- **[Array.indexOf()](http://www.w3schools.com/jsref/jsref_indexof_array.asp)**
- **[Caesar's Cipher in action!](https://www.nayuki.io/page/caesar-cipher-javascript)**

So, in the beginning we are given some gibberish that looks like this:

```
// Change the inputs below to test
rot13("SERR PBQR PNZC");
```

In my head, this problem makes sense: all you need to do is subtract each letter by 13 places. For example "S" - 13 = "F". But then how do we translate my simple English explanation into JavaScript? Let's take a look:

[Rot 13 code](/images/ROT13.png)
The action of a Caesar cipher, also known as ROT 13,  is to replace each letter with a different one a fixed number of places down the alphabet.

**Step 1: Create an alphabet**

To the pro's out there this way probably seems a bit verbose, however I am learning and am seriously just happy to get a correct answer. I'm sure a year from now I will have a much greater understanding of JS and web development!

To create an alphabet, simply create a new Array with each letter:

```
var abc = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
```

**Step 2: Decode the Array with a _for loop_**

If there is one thing I have learnt to do well thus far in my course, it's a **for loop.** They are so handy! In this instance, the for loop is created to work through the abc Array and create our new "decoded" ABC. Our new language will take every letter and add 13 places.

```
var decodedArr = [];
for (i = 0; i < str.length; i++) {
var newArr = abc.indexOf(str[i]) + 13;
```

As you can see, I create a new Array and used the **.indexOf()** method to search and modify every letter in the string. **Eventually we will push arr into the newArr.**

**Step 3: Only check for letters!**

The question hints that "_all letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on"._ A simple _if statement_ can sort that out!

```
if (abc.indexOf(str[i]) == -1) {
  decodedArr.push(str[i]);
} else {
  decodedArr.push(abc[newArr]);
}
```

By using the indexOf == -1 we are basically saying if there is "no match found", do something. In our case if there are no fancy numbers, spaces or characters etc, we still want to push through the **str**. But if there are (there will be spaces!) we want to return the new "decoded Array" with our new formula to transform the letters.

**The answer:**

```
function rot13(str) {
var abc = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','A','B','C','D','E','F', 'G','H','I','J','K','L','M'];
var decodedArr = [];
for (i = 0; i < str.length; i++) {
  var newArr = abc.indexOf(str[i]) + 13;
  if(abc.indexOf(str[i]) == -1) {
  decodedArr.push(str[i]);
} else {
  decodedArr.push(abc[newArr]);
 }
}
return decodedArr.join("");
}
// Change the inputs below to test
rot13("SERR PBQR PNZC");
```

**FREE CODE CAMP :)**

If you found this lesson helpful or have any questions please feel free to contact me or subscribe to my mailing list.


Free Code Camp Bonfire Solution - Caesar's Cipher

Front end developers are constantly exploring creative approaches to build scalable and maintainable UIs and apps. Amid a plethora of web frameworks and libraries to choose from, Stencil.js has surged as a promising tool for developing web components due to it's simple API and performant runtime.

In this post I am going to give [Stencil.js](https://stenciljs.com/) a test run in order to assess its merits, drawbacks, and overall standing. Mind you, this is going to be a brief post and it will not cover all there is to know about Stencil. Think of it as a primer - it's just me messing around with a tool over a weekend. I've built a fun little Freelancer widget to put all my learnings to the test which you can check out below. OK, so let's dive in.

### Understanding Web Components

[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) are a set of web platform APIs that allow developers to create reusable and encapsulated custom elements in web applications. They are designed to address the challenges of building modular and maintainable web apps by providing a standardized way to create and use components across different frameworks and libraries. Web Components consist of four main specifications: Custom Elements, Shadow DOM, HTML Templates, and HTML Imports.

**Custom Elements** enable developers to define their own HTML elements with custom behavior and properties. This promotes code reusability and modularity by encapsulating functionality within a self-contained custom element.

**Shadow DOM** allows for the creation of encapsulated and isolated DOM trees, ensuring that the styling and behavior of a component do not interfere with the rest of the document.

**HTML Templates** provide a mechanism for declaring reusable chunks of markup that can be cloned and inserted into the DOM as needed. 

Web Components offer a powerful solution for building modular and maintainable web applications, fostering a component-based development approach. They can be utilized independently or integrated seamlessly with various web frameworks, providing developers with the flexibility to choose the best tools for their specific needs.

### Understanding Stencil.js

Simply put, Stencil.js is a library for building web components and Progressive Web Apps (PWAs). Unlike conventional frameworks, it doesn’t dictate specific structures. Instead, it compiles your code into standard JavaScript and web components, empowering developers to maintain familiarity with the ecosystem while leveraging the potential of modern web standards. 

Stencil uses JSX / TSX to render components with heavy use of Decorators (if using TS). Here is a snippet of code from my Freelancer Widget project:

```html
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'minimal-profile',
  styleUrl: 'minimal-profile.scss',
  shadow: true,
})
export class FreelancerScore {
  @Prop() user;
  @Prop() rating;
  @Prop({ mutable: true }) bgColor: string = '#345589';

  render() {
    const cardBg = `.card::after{ background: ${this.bgColor}; }`;

    return (
      <article class="content">
        <a target="_blank" href={`https://www.freelancer.com/u/${this.user.username}`} referrerPolicy="no-referrer">
          <style>{cardBg}</style>
          <div class="card">
            <div class="profile-card">
              <img class="profile-card__img" src={this.user.avatar_cdn} />
              <div class="profile-card__info">
                <div class="flex">
                  <h1 class="profile-card__username">{this.user.public_name}</h1>
                  <star-rating rating={this.rating} />
                </div>
                <h3 class="profile-card__tagline">{this.user.tagline}</h3>

                <img alt="Freelancer logo" class="profile-card__freelancer-logo" src="https://www.f-cdn.com/assets/webapp/assets/freelancer-logo.svg" />
              </div>
            </div>
          </div>
        </a>
      </article>
    );
  }
}
```

As you can see it looks very much like React and Vue, just with Decorators to define props and other attributes. You can [read more about Stencil components in the docs](https://stenciljs.com/docs/component).

#### The Pros

1. **Efficiency**: Stencil.js uses lazy-loading to only load components when they are needed, leading to a considerable performance boost. This vastly reduces initial load times, making apps built with Stencil.js remarkably fast.

2. **Stencil.js CLi**: Stencil's CLi is included in the compiler, and can be invoked with the stencil `command`. With the command `stencil generate` you can build a new component complete with css module files, unit test and e2e test files. I love this.

3. **Future-proof**: Capitalizing upon the standardized features of Web Components, Stencil.js secures your investment from the volatile evolution of JavaScript ecosystem. Even if you decide to shift to another framework or the framework you are using becomes obsolete, Stencil.js-compiled components will continue to work.

4. **Support for Service Workers**: Stencil comes with robust support for service workers as it is built on top of [Workbox](https://developer.chrome.com/docs/workbox/), an open source Service Worker library by the team at Google Chrome. When doing a production build of an app built using Stencil, the Stencil compiler will automatically generate a service worker for you and inject the necessary code to register the service worker in your `index.html`. This is what makes Stencil.js great: they have gone the extra step to make the DX exceptional.

After playing with Stencil.js I have to say, it is refreshingly simple to learn and use. It's very similar to React in the way that you must return a `render()` function to your Class component, along with JSX to interpolate your data.

While it is preferred to write your component code as a Class component, there's no headaches around binding `this` and calling a `constructor` to initiate state. I also love the fact that you can simply write `class` instead of `className` for your styles. After working with React for so long, it's these little things that simply improve DX just that one little bit that I love.

To sum up the pro's: Everything just works. It's fast, it's simple and it's future friendly.

#### The Cons

I'm sure this isn't the case, but honestly as of right now I can't really find anything wrong with Stencil. It is simple, efficient and has all the tools you would need to build a collection of web components. However, that being said, I have only played around with building a simple web component and not a full blown application. Here are a couple of things that you might consider drawbacks:

1. **Limited Ecosystem and Community Support:** Compared to more established frameworks, Stencil.js has a smaller community and a more limited ecosystem of pre-built components. Developers might find themselves reinventing the wheel or investing extra time in crafting custom solutions for functionalities readily available in other ecosystems.

2. **Functional Component Limitations:** Stencil.js primarily utilizes Class components for building web components, however Functional components are available for use. One notable limitation is the absence of lifecycle methods in Functional components, restricting developers from incorporating logic that relies on component lifecycle events.

    Functional components lack the ability to hold local state, making it challenging to manage and update component-specific data efficiently. While Stencil.js provides a 'host' function to work around this limitation, it adds complexity to state management. Another drawback is the limited support for decorators in Functional components, restricting certain advanced features and optimizations available to class components.

I'll keep playing around with Stencil and whenever I come across something I think the library could be doing better, I'll add it here.

### My experience building a widget using Stencil.js

#### Crafting a Widget UI with Freelancer API

To familiarise myself with Stencil I decided to build a simple Freelancer card component. The primary goal was to fetch user data from [freelancer.com](https://www.freelancer.com/) and present it in a visually appealing UI card component. Any given freelancer could then take this card web component and render it on their website.

I designed two distinct styles for the widget. The first, a minimalistic horizontal card displaying a profile avatar image, along with some basic data about the user. The second design is a vertical card that includes more data around the user's rating, their hourly rate, location and online status. The card gracefully flips around 180 degrees, revealing a detailed description of the user on its back.

Stencil.js made it remarkably easy to structure and manage these components.
What surprised me the most about Stencil.js was its ease of use. If you're familiar with React, working with Stencil.js feels like second nature. Everything worked seamlessly out of the box, allowing me to focus on the creative aspects of my project rather than grappling with intricate configurations and learning new syntax.

#### TypeScript Integration and VS Code Intellisense

I opted to use TypeScript for my project, and Stencil.js made the integration effortless. The synergy between Stencil.js and VS Code's intellisense provided a smooth development experience, catching potential issues and offering helpful suggestions as I coded. Decorators are used extensively throughout components, which isn't my favourite syntax, but hey it's no big deal. If I really wanted to, I could write Stencil components without decorators.

#### Effortless Production Build and npm Publishing

One of the standout features of Stencil.js is its simplicity in building for production. With just a few commands, I could generate optimized, production-ready code. Publishing my widget component to npm was a breeze, thanks to Stencil's (and npm's) clear and concise documentation.

Here's how my widgets turned out:

<FreelancerWebComponent />

<br />
<br />

You can find the published widget on [npm](https://www.npmjs.com/package/freelancer-web-app). The web component code to embed is dead-simple, it looks like this:

```html

<script
  type="module"
  src="https://unpkg.com/freelancer-web-app@0.0.11/dist/freelancerwebapp/freelancerwebapp.esm.js"
></script>


<freelancer-score
  bgColor="#7FDBFF"
  type="card"
  username="jane_smith_freelancer"
></freelancer-score>


<freelancer-score
  bgColor="#345589"
  type="minimal"
  username="john_doe_freelancer"
></freelancer-score>
```

If you have any feedback or questions, or would like to contribute to building out the widget, please reach out. This was a first pass over a weekend, and I already know that I could improve it by adding more features and tweaking a few styles here and there.

### The Verdict

I really like Stencil and I believe it holds a lot of promise. Its focus on modern web standards and interoperability makes it a strong contender among other libraries and frameworks.

However, the adoption in 2024 is not as widespread compared to more established solutions. This is surprising to me, but also not, given the hesitance for most developers to use Web Components. Front end libraries like React and Vue have such a strong presence that it makes it hard for other libraries to compete. 

But honestly, I don't see this as being an issue because Stencil has carved out its niche in the world of Web Components and has been around since 2017, so the team there have had plenty of time to iterate and improve. I feel like it's only going to get better and better.

If you're a developer who is eager to utilize the latest web standards and if you value efficiency and portability, Stencil.js is worth considering. As we embrace 2024, the world of web development is in dire need of standards-compliant, high-performance applications and Stencil.js seems to be a solid answer to that call. It truly possesses the potential to be a gamechanger in the long-term. And lastly, I like Stencil.js as has safeguarded itself from front end framework fatigue. Write your component code once, and port it everywhere knowing that it will "just work".

Diving into Web Components (Part 1) with Stencil.js


In this post I will describe the method I used to solve the [**Free Code Camp DNA Pairing Algorithm challenge**](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing). It's a great exercise to build up your of Array strength! I'm going to show how I solved this challenge using two different methods.

To solve this challenge I used the following helpful hints:

- [**String.protoype.split()**](https://www.w3schools.com/jsref/jsref_split.asp)
- **[Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)**
- [**Switch Statement**](https://www.w3schools.com/js/js_switch.asp)

Of course, in true JS style, you may not even need the above suggestions. If that's the case, please do share your solution in the comments box below :)

## **How to solve the DNA Pairing challenge:**

### **Step 1: Split the String**

First things first: by now you should be familiar with splitting strings. Basically, whenever you call **.split("")** on a string, you're going to get an array filled with each letter in that string. Simple stuff. We will then go ahead and iterate over that array using a *for loop.*

### **Step 2: Iterate over the split Array**

The DNA Pairing challenge tells us, that for each character, we must add it's pair value and join them together in an individual Array. For example, for the input "GCG", we must return \[\["G", "C"\], \["C","G"\],\["G", "C"\]\].

With an in put of "GCG" your split Array should look like this \["G","C","G"\]. To make things easier, I created a new variable to store this Array in. I did some fancy ES6 work here to create a new Array for each item, and then I used the cool **[.fill()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)** method to add two items to the new Array. Completely unnecessary, but a cool feature of JS :)

```

function pairElement(str) {
    // ES6 Map Method
    let refArr = str.split("")
       .map(item => new Array(2).fill(item));
```

### **Step 4: Switch it up!**

So, seeing as we are only given a set number of DNA pairs, it's easy enough to just write up a *switch statement* and fill in that second Array spot with the correct DNA element. While looping over each item in the array, we will add in our required cases. For example, if Array item 1 === "A", then the DNA Pairing for Array item 1 will be "T". And so on. This is a very clean, easy to read solution:

```

function pairElement(str) {
  let refArr = str.split("").map(item => new Array(2).fill(item));

  for (let i = 0; i < refArr.length; i++) {
    switch (refArr[i][0]) {
      case 'A':
        refArr[i][1] = 'T';
        break;
      case 'T':
        refArr[i][1] = 'A';
        break;
      case 'C':
        refArr[i][1] = 'G';
        break;
      case 'G':
        refArr[i][1] = 'C';
        break;
    }
  }

  return refArr;
}

```

---

### **That's all! But wait, surely there's a cleaner, more ninja-like way!?**

Of course there is, I'm glad you asked! Let me show you how do remove the *switch statement* altogether. You can in fact, create a simple Object to store all your DNA pairs and refer to it when creating your new Array. This method would be better for if you needed to continually update your DNA Pairing database. You can simply add the new pairs to the Object on the fly. Here's what it would look like:

```

function pairElement(str) {
  var pairs = { 'G': 'C', 'C': 'G', 'A': 'T', 'T': 'A' };
  // for each character, return itself as well as it's key/value pair.
  return str.split('').map(char => [char, pairs[char]]);
}

pairElement("GCG"); // => [["G", "C"], ["C", "G"],["G", "C"]]
```

---

So there you have it, two solutions to the same problem. Of course, there are probably 100 other ways to do it, too. If you have a cooler / better solution, please let me know!


DNA Pairing - Free Code Camp Algorithm Scripting Solution


This is a post borne out of frustration. It's a last-ditch effort to help all those poor souls out there scratching their eyeballs out trying to find a solution to the dreaded IE white screen of death. I don't want to over-promise and say this will fix every single IE edge case, but I will offer some helpful steps to debug your Vue app in IE 11. Hopefully, at a minimum, it takes you one step closer to fixing your app so you can (finally) go to bed and sleep like a rock.

Here's some of the errors you might have encountered when running your Vue app in IE 11:

- **SCRIPT1002: Syntax error**
- **SCRIPT5022: Exception thrown and not caught**
- **SCRIPT438: _Object_ doesn't support property or method '_defineProperty_'**
- **Object doesn't support property or method 'bind'**

... Sound familiar?

The error in your console might vary, but if you're getting a white screen of death, or perhaps a partial white screen, then try the steps outlined in this post to diagnose and fix the issue.

**TL;DR:** [**click here** **to stuff this code in your app and see if it works.**](#how-to-transpile-your-vue-code)

**Note:** If you're on a Mac and don't have Internet Explorer installed on your computer, check out the [Microsoft Virtual Machines page](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) to download a complete VM setup with IE 11 installed.

**Note 2:** This post assumes you are using [**Vue Cli 3**](https://cli.vuejs.org/)\* or later. This means, you have a dedicated `vue.config.js` file. If you don't, then you can still follow along and update your \*webpack configurations accordingly (no guarantees though).

OK, now the housekeeping is done. Lets begin:

#### **Why is this error happening?**

The main reason why your Vue app is breaking in IE11 is because the browser does not support modern JavaScript syntax. By that I mean ES2015 and beyond. The Internet Explorer browser was deprecated in favour of Microsoft's more modern Edge browser. I recently downloaded Edge on Mac and gotta say, it's actually really good!

Despite Edge being the default browser for modern Windows machines, IE11 still takes up [1.75% of global browser market share](https://www.w3counter.com/globalstats.php). In tech terms, IE 11 is truly a dinosaur, but the reality is that there are still thousands of government sites, enterprise systems and web applications that require long term support for older browsers.

So if IE11 can't run modern JavaScript code, what can you do? In most cases you can either:

- **transpile** your code (transform modern code and replace with older, supported code) or;
- **polyfill** your code (emulate certain APIs, so can use them as if they were already implemented) or;
- combine both approaches where necessary.

#### Where is this error happening?

Sometimes it can be incredibly hard to trace the true source of the error in your Vue code. This is because Webpack bundles all the modules required by the app into one giant script (usually called _vendors.js, chunk-vendors.js,_ or _app.js)_. If you try to follow the error stack trace, it generally ends up something like this:

![](/images/ie-11-syntax-error.png)

Clicking on **chunk-vendors.js** in the console brings up the code file in the debugger. Your error and the broken code will vary, but here's an example of what you might see:

![](/images/ie-11-script-error-in-debugger.png)

So, we get here but there isn't any obvious line of code that is broken. Webpack minifies everything and uses the **eval( )** function to parse our Vue code. There is absolutely no way that we can go through this code line by line.

So what then? Well, if you look up on line **7562** you'll see that we get a little hint of what code is being compiled. In this case it is a **debug** module found in the app's node modules.

#### <a name="how-to-transpile-your-vue-code"></a>How to break up your node modules for easier debugging

Did you know you can break down your node modules into separate JS files? This allows you to load each individually instead of a massive 7000+ line webpack blob!

Add this to your **vue.config.js** file.

        configureWebpack: {
          optimization: {
            runtimeChunk: 'single',
              splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                  vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                    // get the name. E.g. node_modules/packageName/not/this/part.js
                    // or node_modules/packageName
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                    // npm package names are URL-safe, but some servers don't like @ symbols
                    return `npm.${packageName.replace('@', '')}`;
                  }
                }
              }
            }
          }
        }

Basically we are splitting our node modules into chunks so that we can identify exactly which package contains the code that is breaking our application. This is really helpful because you can now do your research and check out the package's GitHub / npm page and see if there are any issues relating to IE11.

In most cases this trick will help you find the package that is causing the error/s in your code. However, there will unfortunately be some cases where a package simply will not support IE 11 (eg) [**vue-page-transition**](https://github.com/Orlandster/vue-page-transition/issues/26).

### **How to transpile your Vue code**

**Method 1: Use core-js upfront**:

If you've used Vue Cli 3 to generate your app, then core-js comes built in. Core-js is a JavaScript library which includes polyfills for [ECMAScript up to 2020](https://github.com/zloirock/core-js#ecmascript): [promises](https://github.com/zloirock/core-js#ecmascript-promise), [symbols](https://github.com/zloirock/core-js#ecmascript-symbol), [collections](https://github.com/zloirock/core-js#ecmascript-collections), iterators, [typed arrays](https://github.com/zloirock/core-js#ecmascript-typed-arrays), many other features. You can load only required features or use it without global namespace pollution.

The easiest way to include it in your app is to add it at the top of the _main.js_ file:

```
// main.js

// Transpiler for older browsers
import 'core-js/stable';
// optional but required for transforming generator fns.
import 'regenerator-runtime/runtime';

... main.js file here ...

```

In your package.json file you can add a list of browsers you wish to support, which means core-js will run only in those browsers.

```
"browserslist": {
  "production": [
    "ie 11"
  ],
  "development": [
    "ie 11"
  ]
}

```

You can also extract this out into a ._browserlistrc_ file instead of putting it in with your other package.json configuration.

**Method 2: Add your dependencies to "transpileDependencies" in vue.config.js**:

Inside the **vue.config.js** file you can include an option called **_transpileDependencies_**. You can [**read more on the Vue docs here**](https://cli.vuejs.org/config/#transpiledependencies). By default `babel-loader` ignores all files inside `node_modules`. If you want to explicitly transpile a dependency with Babel, you can list it in this option.

```
module.exports = {
  ... vue config stuff ...
  transpileDependencies: ['packageX', 'packageY']
}
```

If you followed the tip above and broke up your dependencies then it will be much easier to know which package is causing the issues. In the example case above, it was the _debug_ package. When I added that to the _transpileDependencies_ list, my app worked again.

<FeedbackForm />

#### Watch Out: Your dependencies might rely on other dependencies!

The _transpileDependencies_ option will transpile your package.json dependencies, however, it does not include the dependencies of those dependencies 😱. In other words, if the "_debug"_ package uses a fancy ES2020+ package for it's fancy debug algorithm, then you will also need to include that package too!

> **Tip:** You can find out what other packages a dependency relies on in your _package.lock.json_ file.

Here's a real example case that I ran into recently:

As I was poring over my dependencies trying to understand where the issue was, I realised that I was running into some code that wasn't being fixed with the transpile step noted above. I was using a package called `lru-memoize` and knew the error occurred there because I had broken down all my packages in the aforementioned step.

I found out that the code was breaking after requiring another package: `lru-cache.` When I also added that to the _transpileDependencies_ list, things started working again!

---

I hope these tips helped. If you have any other helpful suggestions, please leave me a comment below and I'll be sure to update this post!

#### [Learn Vue _fast_ with The Complete Guide (inc. Vue Router, Vuex, & Vue 3 Composition API)](https://bit.ly/39CwzPZ)

Learn and master one of the hottest JS frameworks out there! You will learn everything there is to know about VueJS with **real examples and demo projects.** This course is full of exercises, challenges and bigger web app projects that allow you to directly practice what you learned. This a serious portfolio booster if you're looking to learn a _modern JavaScript framework similar to React and Angular._

[View course »](https://bit.ly/39CwzPZ)


Is your Vue app not working in IE 11? Here's how to fix it.

I write about code & creativity, travel & adventure, investing & business

Blog


> If you don't have a plan, you become part of somebody else's plan.

In my 2020 Annual Review I will answer three key questions:

1.  **What went well this year?**
2.  **What didn’t go so well this year?**
3.  **What am I working towards?**

I can't believe 2020 is over already (_I'm sure literally everyone feels the same way)._ On the on hand I feel relieved because I can finally allow myself to take stock and look back on what the heck really happened. But on the other, I know that the world will _never_ go back to how it was.

But, you know what? That's life. All we can do is suck it up and move on with what we've got.

Let's begin!

---

### **What went well this year?**

**Work**

Work-wise 2020 went exceptionally well. I landed a contract working with a great team of folks over at [**Pipefish**](https://pipefish.com.au/home). My role as a as a Senior Developer initially involved the development a MVP solution for the Queensland Government's Department of Small Business, Employment and Training (DESBT). The MVP was written in Vue.js which allowed us to move fast and leverage some great tools like the [**Vuex ORM**](https://github.com/vuex-orm/vuex-orm).

Upon the successful delivery of the project, I jumped over to another Queensland Government project for the Department of Housing and Public Works. We worked on building an online portal called myQLD and it's aim is the be the myGOV for Queensland residents. That project was nuts and I was quickly thrown in the deep end, having to hire four new devs and get the team off the ground in no time! Luckily I was in good company working with an incredible team of folks who put in some massive  hours to get this project over the line.

However, after about a months time we received approval from DESBT (the first project) to build the "real thing" and so I was asked to lead another phase of work there.

This second milestone involved developing a full-stack application for small business users to create an account and walk through a tailored set of questions to help identify the specific forms a user needs to read, fill in, and submit to successfully apply for any licenses and permits. The app uses an online form viewer called PDFTron to view, fill-in and submit forms while also dynamically pulling in the user's data from their authentication credentials. This dynamic data is used to "prefill" form fields, making for a more efficient or "smart" application process.

My role as the Principal Developer involved hiring new a couple of new dev's, and managing the team, while also getting deep in the trenches with application development and project management. The app was written in React.js with TypeScript on the front end and TypeScript, GraphQL (Apollo) and SQL on the back end.

Overall, it was a fantastic year full of new and exciting work. I spent a lot more time working with React.js than ever before and I absolutely loved writing code in TypeScript. I really enjoyed working with my team despite everyone being remote for the best part of the year. This was probably one my most interesting and intense years of work to date.

**Doggo**

Freyja the Frenchie came into our lives in early March, just around the time when the coronavirus outbreak took flight. Lucky for us, we had this cute little pupper to keep us smitten. Freyja is nothing but pure love - she has a heart of gold and is always happy when she gets to meet new pups and people (more so than doggos).

What has been great about having Freyja is that we have now become consistent early risers. We usually take her for a morning walk in the park or on beach every day of the week. There's no better feeling than getting out of the house first thing and starting the day with some sunshine, fresh air and a swim in the ocean.

Thanks to Zoe for taking the chance and bringing Freyja into our lives. I cannot imagine life without her.

**Finance**

2020 was a great year for me financially. I was able to put away a large portion of my paycheck each fortnight to save our house deposit and also set up a stock portfolio with Zoe. Furthermore, I set up a salary sacrifice plan to contribute pre-tax income my superannuation fund, thus reducing my overall taxable income for the financial year.

I'm really blessed to be in this position and I'm so grateful for how things have worked out this year. What's great about working in tech is that there is a never-ending list of jobs out there. This has become even more evident now that COVID has fast-tracked tons of digital projects and brought the world online like never before.

The plan for 2020 was to buy a house here on the Gold Coast in the Currumbin area. We got all our finances sorted and arranged pre-approval in order to put a serious offer in on a home. However after a follow up inspection we realised there were a few non-negotiables that we simply couldn't agree to. Despite all the up's and down's, we have definitely learned a lot more about first home buying, so I feel as though we are in a good position to buy a house 2021.

**Health**

In 2020 I divided my "health" time between yoga at home, fitness classes and workouts at the local gym, bouldering at the rock climbing gym and climbing outdoors (which also includes hiking). Climbing is the perfect sport for me as it integrates a wide range of movements all while working both the aerobic and anaerobic energy systems. Climbing outdoors requires stamina and endurance usually over a period of 5 to 20 minutes, whereas bouldering requires a ton of raw power only for about 10 to 30 seconds. For the past eight years I have consistently stayed within a healthy weight range of around 70 - 73kg all because of climbing 💪.

Aside from climbing, my regular gym routine would generally consist of HIIT classes and kettlebell workouts. I like keeping things simple and I've found that the kettlebell is really the only piece of equipment I need to have a good workout. The kettlebell swing alone has been proven to build muscle, boost endurance, as well as improve posture by strengthening the posterior chain - perfect if you're like me and suffer from lower back pain.

One thing that has stayed relatively consistent over the past few years is my morning yoga practice. Usually I spent about 15 - 20 minutes going through some stretches for my back, side and hips, as that's where I tend to hold the most tension from day-to-day. I have a few yogi's on YouTube that I like to follow, notably [**Travis Eliot**](https://www.youtube.com/channel/UCHTisXO8TeozyYOxEZGC8XQ) and [**Yoga with Kassandra.**](https://www.youtube.com/channel/UCX32D3gKXENrhOXdZjWWtMA)

**Personal Development**

This past year definitlely made me realise the importance of personal development and mental health. I've always been an open and curious kind of person when it comes to self-improvement, so when I was asked if I wanted to attend a "plant medicine" ceremony I cautiously (and naively) accepted. Actually this year I participated in two separate ceremonies with different medicines, but I'm not going to go into full details here (for numerous reasons). However, I will share some insights from my experience:

Firstly, let me start by saying that this is not for everyone as it is an intensely overwhelming experience. It takes a lot of courage to simply "let go" and allow the medicine to do it's work. It literally felt as as though I was no longer one with my body -  like my consciousness had simply detached from its host and blasted off into the ether. It's insanely beautiful and equally terrifying for I immediately realised that there is SO much we (as humans) don't know about the world and the universe at large. It is such a pure sensation; utterly ineffable and completely beyond language. Both experiences have been incredibly cathartic and have offered a genuine opportunity for me to shake up my mind and hit reset.

Since my experiences I have become engrossed in areas of inquiry that, if you were to ask me twelve months ago, I wouldn't have even known existed.

Things like:

- the intelligence of plants,
- theories on the origins of DNA,
- how (and why) a large percentage of our genetic code is shared with other life on earth,
- the history of religion dating back to paleolithic ages,
- the history of ancient Mayan, Aztec, and Egyptian cultures,
- the Schrödinger theory of the zero point field
- the evolution of consciousness

Anyway, without getting too woo-woo, all I can say is that there's a lot I'd like to unpack and integrate throughout 2021!

**Travel**

While it wasn't the best year for travel, Zoe and I still managed to go on a couple of climbing trips as well as a few weekends away at Byron Bay. We also went on an incredible road trip down to the Snowy Mountains where we hiked Australia's highest peak, Mt. Kosciuszko. Unfortunately that trip got cut short because of COVID and we had to frantically race home to Queensland, driving 13 hours straight to make it back right before the borders closed. So yeah... Not the best year for travel.

---

### **What didn't go so well this year?**

Well, a lot didn't go so well this year. COVID messed up literally every single humans life in 2020 so there's no need to talk about it. But I will outline some of the main problems COVID caused for me:

**Zoe's family had to cancel their Australia trip!**

This trip had been YEARS in the making. Zoe's sister has three kids which has always made it difficult to organise a time for her family come to Australia. They had planned to come in Feb/March and stay for three weeks. Unfortunately, once COVID broke out there was no chance things were going to pan out. We were looking forward to having them here and I know Zoe was really upset because of this. What's worse is that Zoe couldn't even go back home and visit, which means it's now been over two years since she has seen her family. I really hope things turn around in 2021.

**I didn't take proper care of myself and worked way too much**

I'm sure there were lot of people in this boat in 2020. Working from home is usually quite fun and liberating, however my contract role was quite demanding and I found that I was working early mornings and late evenings on the regular. The problem was that I knew I could "jump online" at any second which lead to plenty of late nights where I would dig myself into a hole trying to finish a task off.

I never made time to prepare proper meals during the day because I was always pulled into meetings. Combined with the fact that there was an infinite list of many problems to solve, which only stressed me out further. There was a large chunk of time in 202 where every day just felt like groundhog day.

**Made little progress on side projects, online coursework**

Because things were so demanding at work I simply had no energy to work on personal projects. After a massive day of coding, answering emails and attending meetings, the last thing I wanted to do was return to the computer. It's really a shame because I love what I do and there's so much new exciting tech that I want to play around with. I have a bunch of ideas for side projects but none of them even got off the ground.

So yeah, that was 2020... I'm grateful that I at least had a job and some solid recurring income for the entire year. I've got to work on taking better care of myself so I can sustain the rapid pace of the tech industry. And hopefully in 2021 we are allowed to travel again!

---

### **What am I working towards?**

**Still looking to buy our first home**

2021 will be the year Zoe and I buy a house (hopefully). We've been saving our pennies and have got everything ready to go, now we just need the right house to come along. We came close a couple of times last year but things just didn't quite feel right on either occasion, so we pulled out.

It's a stupid system when you think about: how can you _really_ know if a house is right for you in a single inspection? There are SO many variables at play and you will NEVER have the chance to fully determine whether a property is right for you in that very brief (and stressful) moment. The property market is ballistic at the moment and it's tough to get a good opportunity at a reasonable price. Fingers crossed the property comes our way!

**Creating a solid daily routine by developing simple & effective systems**

Aside from house goals, I don't really have any major material goals. Instead I'd like to spend my time and energy setting up a solid, and reliable daily routine.

For me a good day consists of yoga, healthy eating, spending time outdoors with Zoe and the dog, working _and_ keeping stress levels low, reading a good book, and if it's the weekend, surfing or climbing outdoors and catching up with friends. At the moment I am reading [**Atomic Habits**](https://jamesclear.com/atomic-habits) by James Clear to help figure out how I can integrate all of this into a regular daily routine.

**Figuring out where I want to take my career**

This year I want to start thinking about how I can use my skills to contribute towards projects and causes that I am passionate about. I'm really interested in nature conservation and climate change, as well as urban planning and the development of "smart cities".  I don't have the answer for what sort of change I can help to make, but I am planting the seed in my mind right now. I realise that in order to see a change in the world you have to become that change.

**Settling in here on the Gold Coast**

It's a great feeling to finally have found a place to call home. This year I would like to get into surfing and also get out a bit more with Zoe to enjoy everything that is on offer in the region. It'd be great to make some more close friends in and around the activities we love to do (hiking, climbing, surfing, etc). I'm sure things will fall into place, as long as we don't get a horror COVID outbreak 😬.

---

Whew, that was 2020. I'm glad it's over. Here's to 2021!


My 2020 Annual Review


As a front end developer, I've never been interested in dealing with databased and back end code. Unfortunately, it's hard to avoid as more and more companies are calling out for full stack developers. Front end developers are still in high demanding today's modern age, don't get me wrong. Although, I have learned both as a freelancer and working on enterprise software that it is absolutely vital to have a decent understanding of the _whole tech stack_. If you're keen to get your feet wet and learn some full stack development basics, then perhaps it's time you took a look at [**Firebase**](https://firebase.google.com/).

I really like Firebase is because it allows you to hook up to a database, authenticate users, add real-time updates and upload files without a back end server! Simply install the [**Firebase SDK,**](https://firebase.google.com/docs/admin/setup) configure your Firebase instance and you're good to go.

In this post I'm going to take a look at some of the advantages and limitations of using Firebase coupled with Vue.js to build a Full Stack application. I built a simple "_Best of FreeCodeCamp"_ voting app to help me learn about Firebase and to explain things in this post. You can view the app and source code by clicking the links below.

[**View the Application here**](http://best-of-fcc.firebaseapp.com/)

[**View the Source Code here**](https://github.com/JackEdwardLyons/best-of-fcc)

[Best of free code camp website screenshot](https://jacklyons.me/images/best-of-fcc-app.png) Here's what the app looks like on the homepage.\[/caption\]

---

### **Firebase Pro's and Con's**

While I did say Firebase was used in this app, what I actually meant was the next generation real time database called _Firestore._ There isn't much of a difference, but for those who want to learn more and compare, [**click here to go to the official Firebase docs.**](https://firebase.google.com/docs/firestore/rtdb-vs-firestore) Moving forward I will use both _Firebase_ and _Firestore_ interchangeably.

### **Advantages**

#### Real time data updates

This is an awesome feature of Firebase! With real time data updates you can now build a dynamic web application in only a few lines of code. For example, you could [**build a chat application by following this tutorial**](https://vueschool.io/courses/vuejs-firebase-realtime-database). Once your app is connected to Firestore, your data syncs automatically through a single [**WebSocket**](https://www.youtube.com/watch?v=ZbrEztkwcw8). When your client saves a change to the data, all clients who are connected, receive the updated data almost instantly. There's a lot of server-side magic going on behind the scenes, but fortunately you won't have to touch a single line of code on the back end.

**Easily configure and edit your database from the console**

To store data in Firestore you simply need to create a new _[**collection**](https://firebase.google.com/docs/firestore/data-model#collections)._ A collection is like a store for a unique piece of data: you can think of it just like a plain old JavaScript object. For example, in my demo application there are collections for "_likes", "posts"_ and _"users"_ (see screen shot below).

Inside the collection you store [_**documents**_](https://firebase.google.com/docs/firestore/data-model#documents), which are (again) just like objects. Each document within the collection has it's own unique key to make it easy to identify and to query when desired. You can have as many documents as you like within the collection. For example, if a new user signs up, a new document will be created under the "_users"_ collection. Finally, inside the document is where the schema for your data is created. Firestore is a NoSQL database, which means that your data is built from key / value pairs. Again, just like an object in JavaScript.

#### Authentication with Google, GitHub, Facebook, Phone Email, and more!

Firebase authentication provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, plus more. If you're strapped for time, or simply want to get a proof of concept up and running then you can also use the [**FirebaseUI Auth component**](https://github.com/firebase/firebaseui-web#demo). This pre-built authentication UI implements best practices for authentication on mobile devices and websites.

Probably one of the most important reasons why I like and trust this feature is because it handles all the security behind the scenes. Once authenticated, Firebase sends back a user token with all the data you need. For example, in this demo app I used the [**GitHub Auth**](https://firebase.google.com/docs/auth/web/github-auth) service. It was dead simple to implement. With only a few lines of code, I was able to wire things up and build a unique user with an access token for their session.

```lang="js"
loginWithGithub ({ dispatch, commit }) {
  const provider = new firebase.auth.GithubAuthProvider()
  const FIREBASE_DB = firebase.database()

  firebase
    .auth()
    .signInWithPopup(provider)
    .then((result) => {
      const user = result.user
      // store user in DB, if not already stored
      FIREBASE_DB.usersCollection.doc(user.uid)
      .set({
        name: user.displayName,
        uid: user.uid,
        email: user.email,
        photoURL: user.photoURL
      })
    .catch((e) => alert('error storing user in db: ', e))
        dispatch('setCurrentUser', { user })
        dispatch('fetchUserProfile')
        return user
    })
    .then((user) => {
      dispatch('setLoadingToFalse')
      commit('SET_SUCCESS_MSG', 'Welcome aboard ${user.displayName}')
    })
    .catch((error) => {
      commit('SET\_ERROR\_MSG', '${error.message} (Error Code: ${error.code} }.')
    })
}
```

#### Free Hosting

Firebase Hosting provides fast and secure hosting for your web app and your static and dynamic content. Hosting gives your project a subdomain on the `firebaseapp.com` domain. Using the **[Firebase CLI](https://firebase.google.com/docs/cli)**, you can deploy files from local directories on your computer to your Hosting server. To setup hosting you really only need to enter a few commands:

```lang="js"
npm install -g firebase-tools

firebase login

firebase init

firebase deploy
```

#### Tons of cool features like Machine Learning, Analytics and Cloud Functions

While I didn't actually use these features on my project, I still think they deserve a mention. There are so many amazing things you can do with Firebase. I think the best part is you don't have to write that much configuration code at all. [**Click here to read more about the Machine Learning Kit**](https://firebase.google.com/products/ml-kit/).

---

### **Things that could be improved**

#### More advanced database queries

When building out the filters for this app, I immediately wanted to use a search tool. To me this sounded pretty basic right ... Just enter a word and check the database to see if it matches the title of a post. Well, there are ways to do this, but there isn't a basic or standard "approach" out there.

The most basic approach would be to use the _**startAt**_ query. As the name suggests, you could simply allow the user to start typing a title and only return the results that start with the search term. **[You can read more about _startAt_ here](https://firebase.google.com/docs/reference/js/firebase.database.Query#startAt).** Naturally, this has it's limitations.

Coming straight from the Firebase documentation, the most robust and recommended approach is to use [**Algolia**](https://www.algolia.com/)**.** However, Algolia is not the only third-party search provider. Consider alternatives such as **[ElasticSearch](https://www.elastic.co/)** before deploying any solution to production. [**Click here to read the docs on how to implement Algolia Search with Firestore**](https://firebase.google.com/docs/firestore/solutions/search).

It's not like I'm upset with this, but it is just another hoop you need to jump through in order to build a robust search input filter. If you have experienced any other limitations to Firestore when building your app, then please add a comment below!

---

### **Vue.js**

**Advantages**

Well, this is easy. I don't think I need to spell it out for too many people these days. But for those that don't know about Vue, then I highly recommend you jump on board and give it a try. The thing I love about Vue is that it combines the best of [**AngularJS**](https://angularjs.org/) and [**React**](https://reactjs.org/). Like standing on top of giants, Vue was built using all the acquired knowledge from all the smart people in Google and Facebook. Vue's creator, [**Evan You**](http://evanyou.me/), is an absolute genius! So without going into too much detail, here's what I love about Vue.

- Great documentation. It's well maintained and easy to follow. There's even a "cookbook" section that provides you with best practice solutions to common problems. [**Click here to read the Vue documentation**](http://vuejs.org/).
- Easy to understand and the perfect first "modern framework" to learn. It's especially great for those coming from a jQuery background.
- Robust enough to be used and trusted by large companies such as Adobe, Grammarly, GitLab, Laracasts and Alibaba. With the help of [**Vuex**](https://vuex.vuejs.org/), Vue's very own state management system, applications can be modularized and managed on a large scale.
- A huge variety of helpful [**_directives_**](https://vuejs.org/v2/guide/syntax.html#Directives) that super charge your HTML and reduce the amount of boilerplate code required.
- Amazing developer tools and a brilliant CLI.

**Disadvantages**

It's hard to actually think of some major disadvantages off the top of my head. But that's not to say that it's absolutely flawless. On this project the only real challenges I did come across were to do with code organization. This application is relatively small, but I still opted to use Vuex as I wasn't sure how big it would get. From past experience I have learned that it's better to be prepared early than completely overhaul your app's architecture later on.

When writing Vuex code, things do start to get quite repetitive. Without going into too much detail, let me just say that for a single event to be emitted oftentimes you have to follow this process: dispatch an _action ->_ commit a _mutation -> update_ the state -> write a _getter_ to receive the updates. Here is a small snippet of my actions and mutations code to demonstrate:

```lang="js"
actions: {
  setLoadingToTrue ({ commit }) {
    commit('SET_LOADING_TO_TRUE')
  },

  setLoadingToFalse ({ commit }) {
    commit('SET_LOADING_TO_FALSE')
  },

  clearAuthMessages ({ commit }) {
    commit('CLEAR_AUTH_MESSAGES')
  },

},

mutations: {
  SET_LOADING_TO_TRUE (state) {
    state.loading = true
  },

  SET_SUCCESS_MSG (state, payload) {
    state.successMsg = payload
  },

  SET_ERROR_MSG (state, payload) {
    state.errorMsg = payload
  },

  CLEAR_AUTH_MESSAGES (state) {
    state.successMsg = ''
    state.errorMsg = ''
  },

  SET_LOADING_TO_FALSE (state) {
    state.loading = false
  }

},
```

As you can see it's all very _basic._ However, it is very clear and easy to trace as the state is only updated in one place (the mutations). I'm on the fence as to whether this whole process is an actual disadvantage to Vue. As I said, the real disadvantage is in poor code organisation - which kinda isn't a Vue issue at all ¯\\\_(ツ)\_/¯.

Asides from that, another disadvantage \_might\_ be that, as a modern framework, Vue actually hides away a lot of the complex JavaScript code that one would usually need to write. Junior developers should to be weary: while Vue is extremely powerful and productive, it may actually hinder one's overall JavaScript abilities with it's sugar coated syntax.

I feel like that's why so many developers love React. React requires a large degree of *fundamental* vanilla JavaScript knowledge as well as all the powerful syntax of ES2015. It feels more like writing a pure JavaScript application. Although I must say that once you understand the fundamentals, it doens't really matter which framework you choose. They both practically do the same thing.

---

So there you have it! Here's my simple recap on what it's like building a simple full stack application with Vue and Firebase. I hope this helps, and if you have any questions please leave a comment below 😀.

[**View the Application here**](http://best-of-fcc.firebaseapp.com/)

[**View the Source Code here**](https://github.com/JackEdwardLyons/best-of-fcc)


Lessons learned from building a Full Stack Vue + Firebase app!


Moving from WordPress to a static site generator like Next.js has been a huge goal of mine for over two years! I wish I got to it sooner, but moving content from one platform to another can be incredibly time consuming. Plus, I was scared of losing valuable SEO rankings for my popular posts. But when I ran my site through a Google Lighthouse test, I was horrified to see that it was taking up to 10 seconds to load on mobile devices!

This was simply unacceptable, and thus provided the motivation to simply make the change! While my SEO will likely suffer short-term, I think this is a better long-term decision for numerous reasons, many of which I will outline below.

In this post I will describe what went into making the change from a bulky and slow WordPress site over to a blazing fast server-side generated web app. Here's what I was looking to achieve with my site migration:

- My website has to be fast and score above 90 when running a [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) test.

- I want to use modern tech such as [React.js ](https://reactjs.org/)or [Vue.js](https://vuejs.org/), coupled with static site generation.

- I want to host my site on GitHub and write my posts in markdown.

- I don't want to use a server to load my content and I don't want to pay for a server too!

- I want a tool to help with content management, SEO and basic page and asset updates.

- I want my site to be hosted on [Netlify](https://www.netlify.com/) so I can control deployments, form submissions and asset optimisations

- I want full control over my site styles, components, configuration and dependencies.

Was it all achievable? Yes, yes and yes. Here's how I did it:

#### Choosing the tech stack

As a Front End Developer, the two main libraries I regularly work with are React.js and Vue.js. What I love about both of these libraries is that you can generate a static website that is blazing fast with server-side rendering tools such as Next.js (using React) and Nuxt.js (using Vue.js). Gone are the days of clunky webpack configurations to bundle assets - Next and Nuxt makes server-side rendering a breeze.

I chose Next.js in the end because it was the easiest option to get set up with Stackbit. I was able to leverage a starter template called [Exto](https://github.com/stackbit/stackbit-theme-exto) and hit the ground running. I can build out new templates and components with ease and intergrate them into the StackBit Studio to create new pages in no time at all.

Because I am familiar with the React ecosystem, I can leverage whatever npm packages I want in my application. Furthermore, Next.js is improving rapidly and I can easily update to the latest major version whenever I like.

#### Finding the right tool to manage my content

What I love about StackBit is that I can update content and application code side-by-side in the StackBit Studio. If I don't like the styles of a component, then I can dig into the Sass files and make the necessary changes. If I then want to update the content, I can open the WYSIWYG editor and type away, click Save, and it's automagically published to GitHub.

StackBit also has a simple SEO interface which makes it easy to optimise my posts and pages. I can add new images by simply uploading them into the image gallery which directly links to my GitHub repo. If I want to write a post in Markdown, I can create a new `.md` file and get to work. If I want to update metadata without using the StackBit Studio, I can open my code editor and edit the relevant `.yaml` file.

It's just nice to have total flexibility. If I am honest, StackBit still has a long way to go to meet the needs of the mass market. But it's perfect for developers and Indie Hackers who are fed up with bulky content management systems. I know StackBit will improve greatly over time and I am really impressed with it so far. Best of all, StackBit is free to use and their customer support is fantastic!

#### Linking to GitHub and Netlify

What I love about StackBit is that it automtically version controls any updates I make directly to my [GitHub repo](https://github.com/JackEdwardLyons/jacklyons-me-beta). There are two branches in my repo: `preview` and `master`. The `preview` branch is connected to StackBit Studio in real-time. Any change that happens there is instantly reflected in my repo. Code is committed to the `master` branch whenever I wish to deploy the changes to my site.

I've always had difficulty in the past when trying to version control WordPress websites. Most WP sites are fully customized with plugins and custom code snippets. Each plugin has it's own interfaces with options panels and configuration fields. Controlling all the changes across each screen in the dashboard is just hard. Again, it's just nice to keep things simple with Git.

All of this coupled with Netlify makes for an absolute dream developer experience. I love Netlify. It's easy to use, simple and "just works". I can check my build and deployment logs in real-time, trigger webhooks and integrate forms with ease. My contact form uses [Netlify Forms ](https://www.netlify.com/products/forms/) and all it took was one line of code. All of that, and so much more!

#### Google Lighthouse

Yes, my site consistently scores above 90 when I run it through Google Lighthouse. That's the power of static site generators like Next.js coupled with dead-simple hosting and deployment on Netlify. Geez, I sound like a real fanboy here, but it makes me genuinely happy when things are this simple and effective!

At the time of writing, there are a few more things I can do to further optimise the site. I'm thinking about storing my assets on [Cloudinary](https://www.cloudinary.com/) and leveraging the `next/image` component for a better experience across all devices. I can also look into cache policies and see if Netlify can be optimised further. All in all, it's much better than my old site!

#### Plausible Analytics

[Plausible Analytics](https://plausible.io/) is an open-source project dedicated to making web analytics more privacy-friendly. Their mission is to reduce corporate surveillance by providing an alternative web analytics tool which doesn’t come from the AdTech world (ie) Google. I love how simple this tool is and how easy it is to integrate. It's not going to bloat your JavaScript bundle size nor is it going to slow down your page load times. Plausible is less than 1kb in size! **That’s 45 times smaller than the Google Analytics Global Site Tag**. I am a huge fanboy of Plausible and I plan to remove Google Analytics from all my sites in place of Plausible.

---

In conclusion, I am absolutely amazed at how quickly I was able to pull this off. In total, it took a couple of nights here and there over the weekend and after work. That's all. It's going to be a pain to move across all of my old WordPress posts, but for now, I will simply leave that for a rainy day and focus on future posts!

If you have any questions, comments, feedback or tips, please get in touch via my Contact form! Thanks for reading.


There are no excuses for having a slow website in 2021!

Moving from WordPress to Next.js with StackBit


In my 2022 Annual Review I will answer three key questions:

1. **What went well this year?**
2. **What didn’t go so well this year?**
3. **What am I working towards?**

Writing a yearly review is one of the best ways for me to check in on the year that’s passed. Now that I am a father I feel like I need to remember more of the milestones that were because right now life seems to be flying by at warp speed. Watching my little girl grow up is an amazing experience. However, with the groundhog day rush of morning and evening routines, working all day, and the general chaos of raising a child, I simply can’t keep on top of everything. This is my chance to pause and reflect.

### 1. What went well this year?

#### Koa growing up

2022 has been the year of watching Koa grow 😅. When anyone asked me how I was doing the conversation would inevitably wind up talking about Koa and her development. It was impossible not to think of her before myself. It’s cliche to say, but even with me working from home and being there every day, I still can’t believe how fast she’s grown.

It’s been really incredible to be part of this journey. I never really thought of being a dad in the literal sense but I deep down always knew I wanted to have a family. Now that I am a dad I can say that it really is an amazing gift to watch your own child grow and develop before your eyes. Koas fiery spirit, her cute little giggle and constant seek for new and interesting things has definitely kept me on my toes. It’s been one of the most challenging years of my life (of which I will discuss later) but I feel like, looking back on it all, it all went pretty damn well. I mean, she’s alive and healthy, so I’m grateful for that!

Things are getting easier with Koa and life in general. With every month she grows things just get a little easier, a little better and my confidence grows with it. She’s capable of so much right now and it’s really fun taking her around with me. We go for morning and evening walks and spend plenty of time down at the park. She’s full of giggles and always excited when she sees something new, especially animals! It’s getting easier for me as a dad to take Koa for longer, and give Zoe more time off. I’m getting better at being prepared, ensuring she's dressed properly, has food for the road, fresh clothes and nappies, and all that fun stuff.

#### Austria trip

By far the biggest and best milestone of the year was our family trip to Austria for a month over May-June. Both Zoe and I were nervous about the flight with Koa only being nine months old at the time. Luckily I had lowered my expectations because as it turned out, it really was a horrible experience 😅. But like all things in life, we eventually made it to the other side and were warmly welcomed by Zoes family.

The trip didn’t start off too great though; we all ended up getting COVID from the flight. First Koa, then Zoe and then me, all a few days apart from each other. Luckily, we all fought it off within a week or so and I’m just so proud of Koa for battling it out to make a full recovery at on nine months old.

Despite COVID, we did not let it get in the way of our holiday plans. I spent a ton of time climbing outdoors with my mates and sampled all of the top bouldering gyms in town. It was epic. After nine months of just being in hardcore dad-mode I finally had the free time to climb my heart out. Over the entire month I climbed almost every second day. My body felt amazing and I gained strength quickly. I really wish I could climb more. This trip gve me massive motivtion to get outdoors more often.

For me, our trip to Graz was probably the biggest highlight of the year. Catching up with family, friends, making new friends, and just soaking up the vibrancy of Europe in springtime is all just so good for the soul!

#### Work

Workwise things went well this year. I started out the year in a full-time role that wasn’t quite a good fit for me, but in the end it wasn't a big deal to pivot. I handed in my resignation after four months on good terms with everyone at the company. I knew my old company well and I could see that the pipeline of work just didn’t fit in with my personal career goals. They were grateful for my honesty and we ended things amicably. I’m still in contact with the team at Pipefish and wish them all the best for the future!

Shortly after I found a new contract for a government agency called CleanCo. That role only lasted six months as I did not feel the need to renew. And now I am currently on another contract working with Nintendo Australia as the main client.

I have realized that I am just more suited to short-medium term contract work. As a contractor I can pick and choose from a wide range of industries and technology stacks, plus it’s a great way to stay sharp and continually learn new tech. It’s also nice to be my own boss. Some contracts last longer than others and that's fine. For me, the best part about contracting is that if I am in a role that I realise is not a good fit, I can simply move on once the contract date is up. If I find a company and culture that I really connect with then I can choose to renew or move into a full-time position.

Although, I will say that deep down I don't think I am well suited to full-time work. I have so much creative energy inside that I feel restricted when doing only one thing week-in-week-out. Furthermore, when I say "yes" to one role, I inevitably have to say "no" to many other roles. I find this extremely difficult to deal with because there are just so many great opportunities out there in the world.

#### Plant medicine ceremonies

This year I had two major plant medicine journeys that have truly blown my mind and forced me to reevaluate everything that is holding me back. It’s taken a lot of courage to want to do these journeys but I’m glad I have persevered even in the presence of an unclear intention or not knowing what I am actually going to get out of the experiences. However, on both occasions this year I was rewarded with some incredible insights into life, death, consciousness, health, wellness and love.

I was most nervous about the first journey earlier in the year because about a year prior I had a really intense and confronting journey that I wasn’t prepared for. I was scared of having the same experience again, but I knew deep down that I had to face my fears and build the courage to give it another go. It was vital that worked to resolve all the things that came up for me previously.

The biggest difference from past journeys was that on both occasions this year I went in with a clear intention as to why I was taking the medicine. The first journey I focused on tuning into my body and exploring areas that needed healing. I followed a mostly vegetarian diet on the lead up and I practiced a lot more yoga, meditation and calming exercises to get in the right headspace.

These ceremonies are incredibly taxing experience both mentally and physically and the effects can last anywhere from four to six hours, sometimes more. These medicines need to be treated with absolute respect for their power to take control of the body and mind. I know a lot of people who liken plant medicine journeys to that of a near death experience. I certainly can vouch for that.

During my first journey of the year I was taken on a full inner body excursion. It felt like I was a microscopic voyager gliding through my bloodstream. There were these moments along the way where I would run into blockages in my body. When this occurred there was an immense rush of “beings” that came to force out whatever was obstructing the flow. Like little lemmings, or worker bees; they came in such numbers and with so much force that eventually they pushed the blockages free. In those moments I felt a surging rush of warmth to areas of my body: my eyes, my stomach, my back. All areas where I had experienced some form of chronic pain throughout my life. It was such an amazing feeling and unlike anything I’ve ever experienced before.

What was sad and beautiful about this experience was that these little worker beings fought their way through my body and purged me of these blockages only to go on and sacrifice themselves, all for nothing in return. Their sole purpose was to heal and to love and I felt so selfish for being on the receiving end of such a wonderful gift. I was grateful, happy, sad and just amazed at the beauty of it all.

On my second journey, which occurred just before Christmas, I had an intense ego dissolving experience that lasted the better part of five hours. It was strong and relentless, but exactly what I needed after such a tough year. During this experience there were many moments where I completely disconnected from all thoughts and bodily experiences and simply merged with a field of pure consciousness. I could see clearly what it’s like to just exist as my pure self without anything holding me back. The journey gave me a lot of great insights into who I am right now and _who I know I am_ deep inside.

What does this mean exactly? Well, it is my interpretation that the self is the purest form of who you are. It is where you don’t have to act a certain way or be a specific kind of person, you just are “you” without any limitations.

Our past experiences play a big role in shaping who we are today. What I didn't realize until a few years ago is that our not-so-great experiences lead us to build a kind of shield to keep us safe from future pain. This shield ends up sticking with us through life unless we consciously deal with it. Behind this shield, negative emotions and past experiences act like hidden wounds, affecting our minds and bodies. While it might not be backed by Western science, many texts in Eastern medicine suggest that negative emotions can contribute to health issues.

It’s not until we have a realization moment, either through plant medicine, deep meditation or therapy, that we recognise the role these “guards” play in our lives. When you are able to know your guards you can then look behind them to see the wound as well. And when you work through healing the wound you can release it, which inevitably leads to greater health and happiness.

I know it sounds bizarre and I don’t expect everyone to believe it. All I can say is that these medicines are very powerful as they have the ability to open up your mind and body to an elevated level of consciousness unlike anything you've ever known. I’m drawn to these experiences because I can see just how important they are to helping me unblock all my past patterns, behaviours and limiting beliefs.

On closing, I will say that this kind of work isn’t for everyone. If this is something that sounds interesting and you would like to chat about it more then feel free to reach out.

### 2. What didn’t go so well this year?

#### Full time work

The year started off with me working at a startup spinoff that my previous employer, Pipefish, had founded. Initially I was really excited to be back on board with the team because I had a really great working relationship with them throughout 2020-21. The product, called SyncFish, is an extremely promising piece of commercial technology. I have absolutely no doubt that it will do well. However, the role just didn’t suit me and the pipeline of front end development work was actually quite limited. Anyway, after about four months or so I let them know it just wasn’t for me and luckily they were great about it and actually really appreciative that I was honest and upfront.

I followed that role up with a new contract with a government owned renewable energy company called CleanCo. That role focused on developing a trading platform for electricity traders to buy and sell wholesale renewable energy from various electricity production facilities across Queensland. The work was somewhat interesting and I did get to work on some fun features, but the workload and intensity of output was massive. After working on various government contracts for the past 2+ years, I felt that it was time to try something new and move on. All in all, while these two roles weren’t so aligned for me personally, I still feel as though I learned a ton of valuable skills professionally.

#### Stress and burnout

Unfortunately this year was marked with a lot of stress and tension, fighting and anger due to the overwhelming nature of raising a newborn. Both Zoe and I have had a hard time adjusting to this new life, despite the fact that we love Koa to death. Managing work, all the responsibilities of parenthood as well as household duties has just been too much. We have both suffered without proper support from family. I hate that we have both been so rattled by this experience, but I also know that it’s an integral part of the journey.

With the new year comes a dedicated effort to resolve all that isn’t serving me and to be better in every way I can. The difficulties of this past year have been a huge driver for me to look inward and go on these plant medicine journeys I highlighted above. I know things will get better, but I don’t want to sugar coat the pain and suffering that we have both had to deal with throughout this past year.

#### Lack of outdoors time

Lastly, what didn’t go well this year was my lack of climbing outdoors. While I had an epic month of climbing in Austria, the rest of the year I only got outdoors two or three times. Climbing outdoors is a huge part of my life and one of the best ways to reduce stress and rebalance. I need it in my life and feel like a piece of me is missing or broken when I’m not getting my outdoor climbing fix! Hopefully all that will change in 2023 because we have some pretty big plans!

### 3. What am I working towards?

#### Living in Austria for 12 months

In 2023 Zoe and I plan to move to Austria for twelve months or more. We are looking to set off in May once my current work contract ends. After getting a taste of Austria for a month in 2022, we are both super excited to move there and settle in for a year of wacky adventures! I am excited because I know I will be able to climb outdoors a lot more. I have an amazing group of friends there who all just love being out in the mountains. For me, the best part of living in Austria is that the mountains are just so close and accessible, unlike here on the Gold Coast where the closest climbing area is about 45 minutes away + 45 minute hike.

We will be close to Zoe’s family so it will be great to have some extra support to help out with Koa. It’s also a great chance for me to continue learning German as well. And of course, it’s an opportunity for us all to travel Europe as a family!

I haven’t quite figured out what I’ll do for work at this stage, but I’m not overly worried. I can freelance or contract, or even work for a company in Austria as I’m planning to get a permanent residence visa. More importantly I think this is a great chance to reset and realign my career goals and potentially try something new for a change.

#### Diving deeper into Ayurveda

In 2023 I am working towards building a more consistent and well rounded yoga practice. I am also deeply interested in the ancient Indian health science of Ayurveda, of which yoga is a part. Ayurveda covers everything from diet, exercise, home remedies and wellness practices all the way through to the treatment of diseases including cancer and parkinsons. It’s a holistic solution that looks to nature for answers and explains disease in terms of imbalance of our core natural elements, referred to as our _doshas_.

For me, Ayurveda explains a lot about who I am and why I am how I am. The more I read and learn the more I have these “aha” moments where everything makes sense why things are how they are. So in 2023 I would like to expand my daily routines to incorporate more Ayurvedic practices and learn to cook more holistic, healing meals. I genuinely believe the practice of Ayurveda is the answer I've been looking for when it comes to health and wellness.

The reason why I am so interested in these ancient healing practices is because they aren't focused on packaging up a solution in a pill or cutting you open to remove diseased tissue. Ayurveda looks for balance in everything, for that is what nature innately strives for. Our bodies need to be balanced in order to thrive. However, that requires awareness and openness as well as a commitment to bring the mind and the body together as one. From this perspective activities such as yoga, meditation, walking in nature or even simple breathwork exercises can all be used as medicines.

This approach isn't easy for most westerners because it's not convenient. It means peering within oneself to realise all the behaviours or habits that might actually be causing harm. Oftentimes, western medicine simply prescribes a pill and sends you on your way. Or even worse, they tell you there is no cure and there's nothing they can do.

I call BS on that. I believe Ayurveda has the answers and I'm excited to continue down this path in exploring how it can help me thrive.

---

So there you have it, my 2022 annual review. It's been a really intense, stressful and emotional year. However, from this comes a new beginning and I'm really excited to move forward in a new light with a much more positive outlook. In 2023 I plan to do a lot more work from within so that I can rid myself of any limiting beliefs, internal stressors and self talk that is holding me back. I'm exctied for 2023. Bring it on!
d


My 2022 Annual Review


In my 2023 Annual Review I will answer three key questions:

1. **What went well this year?**
2. **What didn’t go so well this year?**
3. **What am I working towards?**

Drafting a yearly review has become a ritual for me to take stock over the passing years. Since becoming a father, the need to capture and remember key milestones has intensified, as life appears to be racing ahead right in front of me. In the midst of juggling a never-ending and intensely demanding work schedule, parenting a __lively__ toddler, and navigating the perpetual challenge of carving out personal time, the practice of crafting an annual review is a valuable compass for self-reflection.

I do want to highlight the things I was working towards in 2022 though. A year ago I was convinced that I would be living in Austria with my wife and daughter. Oh how wrong I was about that!

Well, to be fair, 2023 started out with the best of intentions to move there. I studied for and passed the required German exam in order to apply for a Visa. I made some calls to the Austrian Embassy and got all my paperwork in order. Things were looking good...

As the months rolled on I did keep asking my wife if this was still what she wanted to do; she was unsure but also quite open to the idea so it wasn't completely off the table. The whole point of moving was for her to be close to her family. But then, it wasn't until around May when Zoe decided to pull the plug on the whole idea, and that was that. I agreed and supported the decision because I do still love where we live and the life we have here in Australia. Luckily though, for as you'll read in the post, this was for the best. Moving to Austria would have been an extremely disruptive plan, and I'm glad to be here in Australia in 2024.

As for my other goal to practice Yoga more and continue learning about Ayurveda; well that is definitely underway and happening, and I'll share more about that below!

### 1. What went well this year?

#### Zoe's family coming to visit

One of the highlights of the year was having Zoe's family come to stay with us for three weeks. Their presence brought so much joy and a real sense of connection for Koa to really get to know her cousins. We had a couple of amazing weekend getaways in Byron Bay and North Stradbroke Island. This was the first time Zoe's sister and family had been to Australia, so this trip really was a big deal for us all. It was great for them to see why we live here and what Australia is all about.

#### Koa growing up

Being a dad to a two-and-a-half-year-old is like living on a non-stop rollercoaster. Some days it's a comedy show full of hilarious moments and funny phrases, other days it's a non stop barrage of tears and screaming and total meltdowns. Koa's tantrums are like mini hurricanes, and there are many days where I question my life choices.

There are days when it feels like you're running on empty, dealing with the "I don't want to do this or that" battles or the meltdowns that seemingly come out of nowhere. The struggle to get through the day without losing your cool becomes a real challenge. The constant negotiation and figuring out what will keep the tiny human happy is an endless puzzle, and there are moments when you wonder if you're doing it all wrong. Every single day I get a crash course in patience and resilience.

While it is incredibly tough, I also realise that right now Koa has become my biggest teacher in life. She makes me realise that I need to never stop doing the work to better myself. It's grappling with self-doubt and trying not to lose your mind when nothing seems to be going your way. Yet, on the more positive and meaningful side, in the midst of the chaos, there's this strange beauty in the imperfect moments. The messy, unfiltered reality of parenthood is part of the deal, and even on the hardest days, there's a unique bond that makes it all worthwhile (in hindsight). So, yeah, it's hard – really hard – it's a messy, real, and oddly beautiful journey that makes you dig deep and discover strengths you never knew you had.

#### Work

This year of work was BIG. It was exhausting and extremely challenging. My contract at RACQ saw myself leading the front end development of a car comparison tool, which focused on providing consumers with up-to-date information on the latest electric and low emission vehicles. You can view the site at [https://www.racq.com.au/car/compare](https://www.racq.com.au/car/compare).

We worked closely with the Australian Motoring Service (AMS) in order to align our UI/UX goals with their gargantuan data set of vehicles and vehicle related data. There were also many unique challenges when it came to managing the content on the site, and I worked closely with some very smart people to merge the front end with the backend services and content management system.

For me this project was incredibly demanding but also really quite rewarding. I was lucky enough to work and collaborate with an amazing team, which made the challenging work schedule worthwhile. This tool has been a much anticipated release from RACQ and the feedback across the company has been extremely positive.

#### Overseas travel

This year's overseas trip comes in two parts (the good and the bad). Despite the challenges of this year's Europe trip, there were some really memorable experiences. I was able to catch up with a good mate of mine in Belgium for a long weekend. We stayed in Ghent, and visited Bruges, and Brussels as well. We had a blast. Belgium is awesome! Ghent was a great place to stay; it's a beautiful city, full of charming medieval buildings, cobblestone streets, and canals that look like they're straight out of a fairytale. It's got that old-world vibe with the Gravensteen Castle and the Belfry of Ghent towering over the city.

What's more, Ghent knows how to party! We were there at the right time, with a lively art and music festival pumping through the entire city. Plus, the city's all about being eco-friendly and sustainable; we got around town on bikes and it's such an easy city to walk, there's really no need for a car at all. And lastly, the beer! Oh man, the beer is amazing. There's so much to choose from, and it's all so so so SO good. I truly had a fantastic time in Belgium, in great company with my mate who I always love to catch up with when I'm in Europe.

On top of that, we had some really special times with Zoe's family, just hanging out at her family home and taking it easy. We shared some really simple, but special moments just hanging out at her family home. Watching Koa play with her cousins was adorable. They had a blast together, and it was just one of those feel-good moments seeing them interact with each other. One of the highlights was going to see the horses with Zoe's sister and kids. Koa loved pottering around the stables, picking flowers and brushing the horses. It was adorable.

We also had a beautiful weekend away at an amazing family hotel overlooking the mountains of Carinthia. It was such a special treat. The food was amazing, the kids play room was huge and there was a beautiful little lake to swim and sunbake during the day.

And lastly, on our final weekend I went to Paris to visit some old school mates and to go watch Australia play in the Rugby World Cup. Needless to say this was a massive weekend. So. Much. Beer. It was a wild weekend; classic boys weekend. I'm not a big drinker these days, so the hangovers for me were brutal. But it really was a great time full of hilarious moments and wild adventures.

So yeah, looking back it was a good trip in many aspects. I'm glad we went, despite the fact that it wasn't quite the holiday we were looking for (more on that below).

#### Yoga and Vedic Meditation

Diving into the realms of yoga and Vedic Meditation this year has been a game-changer for me. In the midst of life's chaos – juggling work, parenthood, and the constant demands of life – these practices became my sanctuary. For me, it's not just about the physical postures in Yoga, it's the little nuggets of wisdom from the teacher while you're moving through the practice, followed by the deep inner calm that I feel at the end of practice.

Vedic Meditation, in particular, has become a vital anchor in my daily routine. It's like a reset button for my mind and soul. The regular moments of tranquillity that it offers allows me to step back from the hustle and bustle, out of the busy monkey mind, and to recalibrate. The profound sense of inner peace that follows these sessions permeates into my daily life, fostering a more grounded and centred approach to all of life's challenges. For me the meditation is not about escaping reality or feeling the effects only while in the practice, but about finding a steady ground within myself to navigate the ups and downs throughout the entire day.

As I look ahead to the coming year, the commitment to these practices is a non-negotiable part of my well-being journey. Further exploration into the depths of yoga philosophy and a continued dedication to Vedic Meditation hold the promise of enhancing my overall mental, emotional, and physical well-being. It's not just a routine, it's a conscious investment in self-discovery, resilience, and a pathway to a more balanced and fulfilling life. So, in the quiet moments of meditation and the flow of yoga postures, I am learning to discover not just how to pause but how to cultivate a profound connection to my inner self which then shapes how I engage with the world around me.

### 2. What didn’t go so well this year?

#### Office pod construction

Building an office pod in the backyard has been a project I've had in mind for quite a while now. It's hard working from home because there's just no divide between work and homelife. I don't often get full privacy to work in peace because I can hear everything going on outside, plus I continually get bombarded with knocks on the door from my wife and from Koa, and even Freyja scratching on the door wanting in. It's annoying for Zoe too because I am taking up a whole room that could be used for other things. So at the start of the year I started doing my research and looking around for an office pod builder.

I wanted to do things the right way so that the pod would be approved by the city council and everything would check out. However, this has caught me in a never ending saga of delays, information requests and difficulties simply getting a straight answer. What's more, the builder hasn't been completely transparent with me either. At first the builder seemed really trustworthy, reliable and honest. Now I'm not so sure. I'm starting to get pretty frustrated to be honest. I'm really hoping it will be done by March, but even that I feel will be wishful thinking. I can't believe it - this is just a simple rectangular office pod and it's causing so many headaches and hiccups. Imagine building an entire home! So yes, this is a good learning experience, making me realise that I would NOT ever want to build my own home.

#### Austria trip

Oury trip to Austria was quite the rollercoaster this year. Travelling all the way from Australia with a 2-year-old in tow turned out to be a mammoth task. The exhaustion hit us hard, and the jet lag was real.

Adding to the struggle was the fact that I decided to keep on working while abroad, in order to keep our project deadlines on track and to continue to pay the bills at home. Waking up at the crack of dawn, around 4 or 5 am, to hop on work calls, while Zoe tried to keep Koa entertained was nothing short of a challenge. Zoe is NOT a morning person, so the early morning starts were absolutely brutal for her. We really were juggling more than we could handle and it wore us both out very quickly.

The accommodation situation didn't help either. The Airbnb we stayed in was a far cry from the cosy setups we're used to. It was small, cramped, and situated in a rough part of town, making the entire stay less than ideal. Getting around with a pram added an extra layer of difficulty, and Koa's meltdowns didn't make the situation any easier. No matter where we went, things didn't really end well.

In essence, the trip didn't feel like a holiday at all. Instead of exploring new places or trying out local delicacies, we were there for a family check-in and to just make everything work without falling apart ourselves. It made us realise how much we missed the easygoing lifestyle back in Australia. The contrast was stark, and the realisation hit hard that ripping up our lives for this venture was 10 times more stressful than anticipated.

Financially, it was a hit too. Everything seemed more expensive this time around, with inflation and the Aussie dollar performing poorly. Balancing the demands of work, Koa, and attempting to find some personal time left me feeling stretched thin. I didn't get to climb outdoors as much as I had hoped, which was a major disappointment.

However, amidst the chaos, there was a silver lining. The trip served as a stark reminder of how good we have it in Australia. The familiar surroundings, the comfort of routine, and the sense of belonging all made us appreciate our home country even more. In the end, the challenging Austrian escapade reinforced the notion that, no matter the hardships, Australia is where our hearts truly find peace and comfort. Of course we will be back to visit Austria, but for now it is clear that we need to dedicate our lives and our energy to nurturing our home life, our friendships, and Koa's day to day routine here on the Gold Coast.

#### Stress and burnout (again)

Work-related stress and burnout reared their heads, emphasising the need for a healthier work-life balance. The complexities of work demands, coupled with insufficient time for recuperation, have prompted a self-awareness about the toll on mental and physical health that I simply cannot ignore. As mentioned above, I've really gotten a lot out of my yoga classes and Vedic Meditation practice, so that is going to play a big role in my life in 2024.

#### Relationship ups and downs

Navigating relationship challenges with my wife and daughter has been extremely difficult this year. The stressors brought by parenthood and overwork underscored the importance of self-care. Acknowledging the toll on health and well-being prompted a realisation that adjustments for my wife and I are absolutely necessary for a more sustainable and fulfilling future. Prioritising rest and recovery are imperative for keeping stressors at bay. For Zoe, things like ice baths, gym and sauna are her happy place. For me, it's Yoga, meditation and time outdoors. I know we can overcome anything together, and this is just one of life's many challenges. It's a long road ahead with a child, but I know deep down it's all worth it.

### 3. What am I working towards?

#### More side project and learning new tech in 2024

As I dive into 2024, I want to continually work on learning new tech and keeping my developer skills sharp, despite the perpetual challenge of juggling a demanding job and parenting a lively toddler. First and foremost, I'm eager to deepen my knowledge across the front-end space. Enhancing my proficiency in JavaScript and TypeScript is a priority, as I aim to unlock their full potential for crafting clean and efficient user interfaces with React and Vue. Delving into the intricacies of CSS and embracing the utility-first approach with TailwindCSS is another facet I want to build upon, aiming to refine the visual aesthetics of my projects.

However, my ambitions extend beyond the front-end realm. Venturing into full-stack development is a key objective, and I'm setting my sights on mastering the trifecta of React, NextJS, and Prisma (MongoDB, Postgres, etc). This comprehensive stack promises a holistic approach to web development, and I'm excited about the possibilities it opens up for creating dynamic and scalable applications.

AI has always intrigued me, and in 2024, I'm committed to exploring this cutting-edge field. Playing around with artificial intelligence will not only broaden my skill set but also introduce a layer of innovation to my projects, bringing a new dimension to the user experience.

Building a robust portfolio is not just a checkbox on my to-do list; it's a tangible representation of my growth and capabilities. The projects I undertake will not only serve as a testament to my skills but also as a source of pride in my professional journey.

Lastly, I'm looking to take on more side projects and jobs. It's a balance – the desire to expand my skill set and take on new challenges while managing the responsibilities of work and parenthood. Each side project is not just an opportunity to learn but also a chance to contribute meaningfully to my portfolio.

In the midst of the chaos, my goal for 2024 is to carve out the time for continuous learning, experimentation with cutting-edge technologies, and the fulfilment of my ambitions as a front-end developer. Balancing the demands of a dynamic career and the joys of fatherhood, this year is all about growth, innovation, and crafting a professional narrative that reflects my evolving skill set and passion for the ever-evolving world of web development.

#### Yoga teacher training

In 2024 I have enrolled in a 200 hour Yoga Teacher Training! This adventure into teaching yoga is a conscious move, a real effort to make my mental and physical health a priority. The pursuit of personal growth through yoga not only offers physical benefits but also promises a transformative journey to help me build resilience and maintain stability and calmness throughout life's ups and downs.

Honestly, I don't really know where this training will take me, and I'm not going into it in order to make money or be a teacher, per se. I love my work as a coder and will always want that to be part of my career. However, I can imagine doing small side gigs here or there, be it a workshop, a retreat or event - that sort of thing. I can also imagine that this is something I can do (teaching or practicing) throughout all stages of life.

I'm really excited to take on this new challenge and deepen my Yoga practice. It has always been such a grounding, calming and energising activity. I would love to learn all the in's and out's of each and every pose so that I can truly understand what's actually going on at a mental and physical level. It's going to really help me craft more meaningful sequences when I practice at home on my own, and it will give me the ability to help others too.

---

And that wraps up my 2024 annual review. It's been a year marked by intensity, stress, and a rollercoaster of emotions. Yet, within these challenges, I find the seeds of a new beginning. I'm genuinely thrilled to step into the upcoming year with a fresh perspective and a considerably more positive outlook.

In 2024, my focus is on internal growth and building resiliencing, aiming to shed any limiting beliefs, internal stressors, and self-talk that may have held me back. I also want prioritise self care and wellness. Working from home and having a career in tech typically means working through lunch, long meetings all day, coding non stop for hours and sitting all day every day. It's incredibly exhausting when I don't schedule in proper breaks, and active steps to relax and recharge when it's time to slow down. So that is a big goal for 2024: more time for self care, more breaks, eating on time and not skipping meals, more time in nature, and less stress.

Here's to the anticipation and excitement that 2024 holds—bring it on!

My 2023 Annual Review


This Roman Numerals Converter challenge is a great way to show you how to manipulate elements based on a particular number/value algorithm. In this post I show you how to solve this bonfire using the forEach method.

I must admit, this challenge could not have been done without a bit of help from the awesome [**Free Code Camp forum**](http://forum.freecodecamp.com/) :) Like all challenges, it's always really, really, *really* hard to know how to begin. I just find it difficult to truly *visualise* the problem and understand the logic to unlock it.

In this post I break things down and take a much more deliberate approach to problem solving. So with that being said, lets jump into the challenge and unlock the logic!

### How to solve the problem:

---

#### Step 1: Map out both the numbers and the numerals.

So first things first, what do we know about Roman Numerals? Well of course most people know that `V = 5` and `I = 1`... But what about the bigger, more crazy numbers? If you're not sure about how to begin coding, I would definitely recommend getting out a pen and paper to simply scribble down _what you know._ In this case, here's a list of numbers and their RN translations:

```bash
// Write out what you know...
const numbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const roman   = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
```

In the challenge we are given the following tips to help guide us to the solution:

- [Roman Numerals](http://www.mathsisfun.com/roman-numerals.html)
- [Array indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
- [Array splice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
- [Array join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

---

#### Step 2: Nut out the logic.

I'm sure there are a million different ways to solve this problem, but nonetheless, here's my _pseudo_ logic:

1. Create a numbers array that has the same number values as roman numeral values <br /> (eg) `5 = V, 10 = X`
2. Create a [**map**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) or forEach loop to iterate over each number in the numbers array and compare the index against the roman numerals array.
3. **While** *the* number to translate is *greater tha or equal ton* the individual number we are iterating over...
4. Store the current roman numeral index in a holding variable (ie). `tempValue = 'V'`
5. Subtract the number from the original number to convert (the num passed into the function as an argument).
6. With the remaning number, if the value is greater than 1, keep looping and continue steps 3 - 5

In other words, Imagine the number was `10`.

The first thing the function will do is check if `10` matches a roman numeral. In this case it does, so `10` will convert to `X`.

Imagine the number was `11`.

The function will check if `11` matches, which it doesn't. The next highest roman numera after `X` is `XL` which is `40`. Because `11` sits in between `XL` and `X` the function will add `X` to the result because it's greater than or equal to `10`.

The function removes `10` from the original number which leaves `1` remaining. Again, we loop over the numbers and see if there is a match against the roman numerals. In this case, `1` is equal to `I`. The final result is `XI`.

You could easily use a for loop for this problem. However, the more I learn about ES6, the more I hear how awesome (and much more efficient) the new array helper methods like *map, forEach and filter* are. Therefore I decided to take this new approach and test my newly acquired ES6 knowledge. **[If you would like to learn more about ES6 then I highly recommend ES6 the course on Udemy.](http://click.linksynergy.com/link?id=Vlcp1fzKAPM&offerid=323058.861624&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fjavascript-es6-tutorial%2F)**

---

#### Step 3: Test it out

Now to add the finishing touches: I realise that the result array could be an empty string or array. This code will work either way - as long as you have somewhere to store the result! The plan here is to **find the matching numeral to the iterating number.** If you can't find an exact numeral to match, then find the next closest. For example, if the number is 55. Begin with iterating until you find 50. Then you subtract the original number from the found number (ie) 55 - 50.

The result is 5. So, then we iterate again until we find the matching numeral, which in this case is "V". Here's what the resulting looks like from start to finish:

```bash
function convertToRoman(numToConvert) {
  // list all relevant numbers and numerals
  const numbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  const roman = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];

  // Create an empty string for the result
  let result = '';

  // Loop through the numbers while the numToConvert is greater than the number, keep looping
  numbers.forEach(function(number, i) {
     while (numToConvert >= number) {
       // add numerals as you go eg. 55 --> loop numbers, find L, loop again, find V
       result += roman[i];
       numToConvert -= number;
     }
  });

  return result;
}

convertToRoman(52); // LII
convertToRoman(1120); // MCXX
convertToRoman(09); // IX
```

---

Yay! That's it :)

If you found this lesson helpful or have any questions please feel free to leave a comment below.

---

## **[The Web Developers Bootcamp.](http://click.linksynergy.com/link?id=Vlcp1fzKAPM&offerid=323058.625204&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fthe-web-developer-bootcamp%2F)**

### A n00b friendly guide to becoming a pro!

Learning to code can be seriously hard work. While I am oh so grateful for the opportunity to learn through Free Code Camp, I still find that learning to code alone and without proper guidance extremely exhausting.

Which is why I've started to substitute my education with an incredible online resource called the **[Web Developers Bootcamp](http://click.linksynergy.com/link?id=Vlcp1fzKAPM&offerid=323058.625204&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fthe-web-developer-bootcamp%2F)** courtesy of Udemy. This course has helped me brush off the cobwebs, unlearn my self-taught bad habits and gain a solid understanding of the true fundamentals of web development. It has helped me **see why it is important to understand these JavaScript problems and how they apply to the real world.**

This bootcamp will teach you how built beautiful sites with Bootstrap, add in functionality with JavaScript and write back end code with Node.js all in a series of short, sharp, no BS video modules. I seriously could not recommend it any higher. Check it out and let me know what you think :)

** [The Web Developers Bootcamp](http://click.linksynergy.com/link?id=Vlcp1fzKAPM&offerid=323058.625204&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fthe-web-developer-bootcamp%2F)** is the only course you need to learn web development - HTML, CSS, JS, Node, and More!

![](https://ad.linksynergy.com/fs-bin/show?id=Vlcp1fzKAPM&bids=323058.625204&type=2&subid=0)


Learn how to manipulate elements based on a particular number/value algorithm in JavaScript.

Free Code Camp Intermediate Scripting - Roman Numerals Converter SOLUTION


Are you an IT recruiter who is constantly getting shut down when calling developers?

If you do get through, are you the "_the 5th person to call with a ‘really cool role’_" on any given day?

---

It must be frustrating as an IT recruiter to constantly get shut down. As a developer, it's also frustrating being bombarded with phone calls from strangers trying to pitch a role to you.

As you can see, there's frustration on both sides:

- As a recruiter, it's very likely that you have will have some deep knowledge about the role and a phone call is the only way to get that knowledge across.
- As a developer, the problem isn't you personally - it's the straight up fact that good developers get bombarded with calls from recruiters all the time.

Personally, I'm OK with hearing a recruiter out. Oftentimes though, I'm just time poor and / or I'm already employed and not interested.

But speaking as a developer on behalf of developers, I also know there's more to it than just that...

In this post I'd like to explore why that is and provide some helpful tips for you as a recruiter to increase your success rate.

If you're an IT recruiter in software or web development please read this post carefully as I'm going to explain why a cold call approach usually won't work when trying to fill a new developer role.

#### It's not you, it's me.

Developers are logical creatures who are always looking to optimise any given outcome. While this usually only matters in day-to-day coding, it also translates over to personal life from time to time. This is especially true when both **time** and **money** enter the equation. Put simply, developers don't want to waste their time on the phone if it doesn't make logical sense, especially if the salary or day rate isn't known upfront.

The number one reason why most developer's don't (or won't) pick up recruiters phone calls is because there is too much uncertainty at stake. **Developers need answers to the hard facts first before engaging in a time-consuming endeavour.**

As a recruiter, I know you so eagerly want to explain how great Company X is with their great culture, ping pong table and open-plan office. But the reality is that it's not important. Well not initially anyway.

That's because they want to optimise their lives away from a cold call towards **a data-driven solution that can quickly (and logically) be determined.**

#### Before calling a developer, make sure you can answer these 4 simple questions:

1. How much does it pay?
2. What is the tech stack?
3. Can you send me a clearly defined job description?
4. Can I work from home or do I have to go into an office from 9 to 5?

---

If you, the IT recruiter can follow these steps then I guarantee your success rate will go up. It will be easier to get a developer on the phone as they know the score.

As a developer, personally my best recommendation is to contact developers via email or LinkedIn with answers to the above 4 questions first. Keep your message short and sharp.
If the developer chooses to engage with you by showing interest, then you'll have a much greater chance at progressing to the next step over the phone.

And hey, maybe they will like the idea of that ping pong table after all 😄

#### In summary

State the facts upfront & you should have a better chance of getting a developer on the phone.

It's not that developers are against phone calls. it's just that **the phone call should be the second step in the developer-recruiter relationship**. The developer must first determine if the opporunity is of interest and that can only happen if the facts are provided upfront.

If the dev likes what they read then your odds of getting them on the phone will skyrocket! 🚀

---


If you're a recruiter in software or web development please read this!

Why developers won't pick up your phone calls (and how to get them to)


Looking for a web developer to boost your project or to join your team? Got questions about your upcoming website or web app project? Or simply want to reach out to say hello? I'm here to help! Feel free to reach out – I'm just an email away!
***

name

email

subject

message

Contact

I build sleek, modern and responsive website solutions using React, Vue, TypeScript and GraphQL. My experience spans across Government, eCommerce, SaaS, Logistics, Real Estate and Enterprise Software. [Contact me today for help on your next project.](/contact/).

I'm a Front End Developer from Gold Coast, Australia.

Explore some of the projects I've worked on

Recent Work

- Vue.js / Nuxt.js
- React.js / Next.js
- TypeScript / JavaScript / jQuery
- HTML5 / CSS / SCSS
- TailwindCSS / MaterialUI / Bootstrap
- GraphQL / REST APIs
- WCAG Accessibility 

Front End Development

- WordPress / WooCommerce
- Shopify
- PHP / Laravel
- Gridsome / Gatsby
- MongoDB / Firebase
- Dato CMS
- Contentful

CMS and eCommerce

- Cross-team collaboration 
- Stakeholder engagement
- Code reviews and quality assurance
- Project planning and estimation
- Complex problem solving
- Technical team leadership
- Development team mentorship

Leadership & Mentorship

Here's just a short list of my skills, experience and services on offer.

Services

What others have to say

Jack is a fantastic talent and an absolute legend of a guy. He works 
fast and absolutely embodies the startup mentality. Jack is a highly 
proficient front-end developer and has a great handle on the Vue JS 
framework.

Jack was an incredible asset to our team. He continued to provide quality suggestions to improve our project and supported these suggestions with high quality work. I always felt comfortable with Jacks capabilities and his level of communication was beneficial.     I highly recommend Jack!

Jack coded a large eLearning project with us at ACRRM. He was always enthusiastic, knowledgable and has an obvious passion for his work.. Hire him.

Jack has been one of the best developers I’ve had the pleasure to work with. He’s not only competent in what he does, but he also has outstanding communication and leadership skills. 

Testimonials

Looking for a web developer to boost your project or to join your team? Got questions about your upcoming website or web app project?  <br /><br /> Head on over to the [contact page](/contact) to get in touch. I'll be sure to get back to you as soon as possible.

Let’s Work Together!

Home

Adore Beauty is Australia’s longest-running online beauty stores, and an official stockist of over 200 leading global beauty brands. Over the past 12 months Adore has spent a great deal of energy updating their online platform and user experience. As a result they have selected a highly modern tech stack utilising Nuxt (server side Vue.js) on the front end and Laravel on the back end.

My role as a front end developer included building out new User Interfaces and web pages using the Nuxt.js framework. Some notable pieces of UI that I built included:
*   Product Image Carousel, Zoom tool and Modal Gallery
*   Product Reviews & Create Review Product Pages
*   Product Tooltip components
*   Product Information components
*   Modal Popup components
*   Google / Facebook / Email Authentication component
*   Recommended and Related Products components
*   Performance upgrades using asset lazy loading
*   SEO and Google Structured Data schema creation


I worked with the Adore Beauty team as a contractor for approximately four months. I really enjoyed my time with the team and wish them the very best!

Australia's largest online beauty store

Adore Beauty

[**Adventure In My Veins**](http://www.adventureinmyveins.com) is an adventure publication crafted for wanderlusting, thrill seeking, mountain lovers who want to build a location independent lifestyle. It's a passion project for me and a place where I show you how to become a digital dirtbag and travel the world sustainably. My background is in web development but things didn't actually start out that way. I was initially inspired to learn to code when I started travelling. Along the way I some amazing freelancers, creatives, business owners and freelancers from all around the world. One of the most interesting and inspiring things about these people was their ability to work and travel wherever they liked.

Naturally, with my passion for rock climbing, I decided to build a blog around rock climbing "digital dirtbags". During my travels I met a ton of great climbers who also had a creative passion project on the side or as part of their full-time income. I would interview them and share their story on the blog. Just this year I decided to give my blog a complete facelift. I chose to build the blog with [**Gridsome**](http://gridsome.org/) and [**Vue.js**](http://vuejs.org/)**.** It's super fast and efficient because each post is a simple markdown file and everything is served statically on [**Netlify**](https://www.netlify.com/)**.**

Now that the site is live I plan to blog there more regularly and interview more digital dirtbags!

A rock climbing blog for digital dirtbags

Adventure In My Veins

[Class Ltd](https://www.class.com.au/) is Australia’s pioneer in cloud-based wealth accounting technology. They are an ASX listed company serving over 3,600 accounting and administration firms nationally and internationally.

My role as a lead front end developer included building out Class's new [Trust Tax Return](https://www.class.com.au/our-solutions/class-trust/) form experience. The solution was written in TypeScript and Vuejs using Nuxt. Some notable milestones and key pieces of UI included:

- The complete development of the Trust Tax Return form solution from scratch.
- Closely working with the design team to deliver a high quality and meaningful user experiences through modern user interface design and development
- A scalable and highly flexible series of form builder components to allow the Class Ltd team to rapidly create new forms and fields
- Mentoring the entire Class Avante Garde team on best practices with Vue.js and TypeScript as well as front end fundamentals
- Liaising with key stakeholders to understand the core project requirements and drive out critica decisions for the successful delivery of the project
- Ensuring the delivery of the core solution well within the time frame allocated

Overall it was a fun experience consulting and working with Class Ltd. I wish them all the best on their future development of the Trust Tax Return solution.

Australia’s pioneer in cloud-based wealth accounting technology.

Class Ltd


[**CleanCo**](https://cleancoqueensland.com.au/) is a renewable energy company owned by the Queensland Government. It was created with Queensland’s most flexible low-emission generation assets to put downward pressure on electricity prices, integrate renewables while preserving reliability, and support the transition to clean energy in a way that drives regional growth and jobs.

I took on a six month contract role at CleanCo to help build out new features for the CleanCo Physical Trading Platform (PTP). The platform is the core system for CleanCo traders to buy and sell wholesale electricity that is generated from their various facilities across the state. My work involved building out complex settings and configuration controls to allow the traders to work more efficiently and seamlessly.

The tech stack included React, TypeScript, Redux, Material Design, Styled Components hosted on Azure.

Some notable highlights include:

- Building a real-time task manager system for traders to manage their daily activities as well as "handover" tasks that are transferred between traders.

- Adding new features to the trading grid and allowing all changes to be configured in an admin settings portal.

- Numerous bug fixes and enhancements.

- Integrating a suite of new API endpoints into the application.

- Upgrading packages to ensure the codebase is up to date with the latest syntax and features.

CleanCo Queensland is a government-owned electricity generation and trading company - fuelled by a mix of renewable energy and innovative energy solutions.

CleanCo


[**Explorate**](https://www.explorate.co/) is a really promising startup out of Brisbane, Australia. The company has a massive vision to update the shipping and logistics industry. The team are passionate about changing the worlds interaction with freight. They plan make it easy to simply book and track a shipping container from start to finish.

I took on a short-term role at Explorate to help the co-founders build out their application front end using Vue.js. As the sole front end developer at the time, my role was to develop the admin panel, booking system and user profiles from scratch.

This meant making a lot of large upfront decisions on the tech stack, which subsequently lead me to choosing Vue.js for the front end and Node.js for back end. Asynchronous state management was made possible with Vuex using named modules. I also provided  guidance for the development their internal API for more efficient requests and data flow.

Some of the complex pieces of UI involved an intricate Gantt chart system. The chart visualizes all the available freight carriers for a particular journey. It can be filtered by carrier, date, price and transit time. Below you can see a screenshot of the chart in action.
Working with the team at Explorate gave me a fun insight into the world of logistics and now it makes total sense why this solution is so sorely needed. I truly do wish the team at Explorate all the best for the future.

A shortcut to seamless freight forwarding & logistics.

Explorate

A collection of my work.

Portfolio

Throughout 2020 and midway into 2021 I contracted as a Principal Developer for Pipefish on behalf of the Queensland Government. There I worked with the team to develop a tool called the Business Launchpad.

The [**Business Launchpad**](https://launchpad.business.qld.gov.au/) is an interactive tool to help business owners find relevant legislative information relating to their business needs and requirements. Imagine you’re a cafe owner and you want to throw a live music event and serve liquor. By using the Business Launchpad you simply log in with your online myGov business account and step-through the interactive questionnaire. The user can navigate to a “dashboard”  where they will find a detailed list of all the legislative documents they will need.

Currently, if you’re thinking of opening a café and wanted to prepare fresh food on-site, sell alcohol with meals, provide background music and alfresco dining, and have a new sign on the footpath, you’ll need licences from multiple agencies across all 3 levels of government. Keeping track of everything you need can be time-consuming. That’s where the Business Launchpad really shines.

I’m really proud of this project and cannot believe how much effort was required to bring it to life. I am grateful for the opportunity and proud of the teamwork involved. We were able to deliver the project successfully, on time and under budget.

The technology used on the Business Launchpad includes:
- React
- TypeScript
- GraphQL and Apollo
- TypeORM
- Gatsby
- Azure
- Aus Gov Design System
- Tailwind CSS

The Business Launchpad makes it easier to discover licences, permits and regulatory information tailored to your business needs.

QLD Business Launchpad


This is a paragraph. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Fringilla urna porttitor rhoncus dolor purus. Consectetur purus ut faucibus pulvinar. Nullam non nisi est sit. Tellus in metus vulputate eu scelerisque felis. Nunc congue nisi vitae suscipit tellus mauris. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Fermentum iaculis eu non diam phasellus vestibulum. Faucibus turpis in eu mi bibendum neque egestas congue.

# This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

## This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

### This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

#### This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

## Quoting

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.
>
>&mdash; Scott Adams

Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

## Unordered and Ordered Lists

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

***

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

```
let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}
```

## Inline Elements

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **_asterisks and underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Inline `code with back-ticks around` it.

This is <mark>marked or highlighted</mark> text.

This is [an example](http://example.com) link.

## Tables

<table>
    <caption>Table with thead, tfoot, and tbody</caption>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>


The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.

Style Guide

Hi there, thanks for contacting me! <br /> I will be in touch with you soon.