DEV Community: Brandon Allmark

Cloud Resume Challenge pt 5: Exploring CosmoDB and Query Languages

Brandon Allmark — Thu, 15 Aug 2024 14:36:41 +0000

Please check out my resume at https://resume.allmark.me!
All feedback, good or bad is appreciated 😄

Progress thus far:
Certification ✔️
HTML ✔️
CSS ✔️
Static Website ✔️
HTTPS ✔️
DNS ✔️
JavaScript 🚧
Database 🚧
API ❌
Python ❌
Python Tests ❌
Infrastructure as Code 🚧
Source Control ❌
Backend CI/CD ❌
Frontend CI/CD ❌
Blog Post 🚧

What was done

My plan for this part was to configure my database, connect it to my Static Web App and then create the IP Address monitor of my Visitor Counter. Developing this was going to be done in the following phases:

This is a big deal because it is one half of my final function. The function that collects the public IP, increases its visit tally by 1 and if it isn't in the database, then add it to the database and set its visit tally to 1.

How it was achieved

To do this I first had to connect my Database to my new Static Web App. This was pretty simple as Azure SWA's have a preview that allows a direct secure connection to a database without having to configure an API for it.

This means I do not have to configure an API for my project.

Creating a connection between the two required selecting the Cosmo database in the portal and creating two files:

staticwebapp.database.config.json
staticwebapp.database.schema.gql

After adding these two files to my repo, the Action workflow started detecting my build as Node.JS and then failing. I resolved this by deleting the package-lock.json file that was generated when I ran the npm commands to install the static web app cli tools.

Phase 1 turned out to be remarkably easy. This is thanks to the API from ipify.org. A simple API that returns the public address of the client that is making the request. The best part about this is that it can be queried millions of times a minute without issue, this should be sufficient for my future scaling requirements.

Phase 2 started off somewhat half complete. The process queried the entire database for the list of visitor IPs and then running a check on if the visitor is in that list. This wasn't ideal as it displayed every visitor in the console. But it did respond back whether or not the visitor was within the database or not.

The code for Phase 1 and 2 were set aside for later. I had significant difficulties with Phase 3 and decided to focus on writing the code that manipulates my database first. This meant I wasn't interested in recording IP addresses, I just had a set of static buttons on my website that performed specific GET, LIST, UPDATE and DELETE functions.

Phase 3 was easily the most difficult phase of this block. I estimate completing this phase took me about 20 hours of research , troubleshooting, and trial n error to complete. Creating a new entry in the database was a relatively simple exercise, it was the "check if exists" part that caused me the most grief. In the end, I changed from CosmoDB to AzureSQL to allow myself to remove the need for a schema file and query my DB using Rest rather than GraphQL.

The journey of coding the JavaScript to increase a value in my database by '1' was long and painful and my success was savoured by continuously mashing the "Add One" button.

Difficulties encountered

The most challenging part was writing the JavaScript that communicates with my database. When thinking about it there were so many components to the simple query. I had to write JavaScript that uses the Fetch API to send a JSON query via Rest/GraphQL to an Azure Hosted SQL database. Each of those items were a potential issue and it was difficult honing in on the exact cause.

Querying my database for its entire contents was a simple procedure, the hard part was specifically asking for a certain IP address and to return the visit count. Attempting to do this resulted in a sea of 400 errors. These were mainly caused by bad schema as defined in staticwebapp.database.schema.gql. While troubleshooting the 400 errors, I then encountered a 500 error.

Subsequent research advised me that a 500 error was related to the server, not so much the client. This sent me in the completely wrong direction and the next 10 -15 hours of pain can be summarised with:
1. Reverting to old 'working' code
2. Rebuilding the database in another subscription
3. Updating CORS rules to whitelist my domain
4. Checking health advisory for any issues
5. Rebuilding the database AGAIN, this time with serverless capacity rather than provisioned
6. Adding my Primary Key as an environmental variable to my Static webapp
7. Removed my mutations and custom queries from the schema

It turns out it was bad schema. Which means it was client issue. Caused by a simple typo I made while troubleshooting the 400 error.

With the schema situation sorted I continued working on the 400 error. At this point, I'm still stuck trying to create a query that will take the public IP address of the visitor and query the server for its existence.

After another 10 hours of reading documentation and getting no results, I gave up and decided to try using Rest to query my DB instead of GraphQL. This meant spinning up an Azure SQL resource. I deployed the Azure SQL server and Azure SQL Database via the Azure Portal. IaC be damned I just wanted my website to work.

Azure SQL also doesn't require a schema file to connect to the SWA which means my failure surface was significantly reduced. This ended up working well and I was able to create the write queries to database using Rest rather than GraphQL.

Reflecting back and what I learned

The first thing I learned is that your schema is also where you define what kind of queries you're going to be making. If you don't define the query, it can't be made and will throw a 400 error. This schema file sort of defines how you plan to interact with the database including things you directly reference within your code. It's important to marry up your code with your schema because bad configs here cause bad request errors.

I'm pretty happy to learn that and I'm just as happy to throw that knowledge in the bin because I moved to a database that doesn't require it.

I also understand the hate for Microsoft documentation. I thought Microsoft documentation was great but I have learned that I was wrong.

Cloud Resume Challenge pt 4: Spinning up an Azure Static Web App

Brandon Allmark — Fri, 02 Aug 2024 15:39:59 +0000

A nice and easy one this week. Today is a quick run through on how I configured my static web app to deploy straight from GitHub.

We're also doing all of this from the cozy embrace of ClickOps! So put on some jazz, kick up your feet and let's get started!

1. Create a new Repo for your website.

The below settings keep it simple. Set to private if preferred.

2. Spin up your Static Web App, select the repository you've just created.

If you're in a private tab, you'll need to log into GitHub.

3. Head over to your repo and click on the Actions button.

4. You'll notice your first run has failed.

If we dig down we'll find its due to a missing index.html file.

This can be avoided by pre-loading your repo with your index.html file before we connect it to the SWA but... even if we're doing things the easy way today, its still good to see what a fail looks like.

5. Fix this by uploading your index.html

This will trigger the workflow to start another deployment. Give it a few moments and it should go from a yellow pending state to a green tick!

6. Return to your Static Web App resource

You'll notice your website's status has gone from Waiting for Deployment to Ready

7. Click on Visit Your Website and you can see its already up!

And while we're riding this Victorious Wave, you'll notice we're already setup for HTTPS! This'll stay secure even after adding your own custom domain.

Bonus:
Azure Static Web apps support preview environments by default. To use them, perform a pull request instead of a commit. The workflow will then deploy a preview environment.

Cloud Resume Challenge pt 3: Exploring CosmoDB and Database Security

Brandon Allmark — Sun, 28 Jul 2024 14:37:34 +0000

Please check out my resume at resume.allmark.me!
All feedback, good or bad is appreciated 😄

Progress thus far:

Certification ✔️
HTML ✔️
CSS ✔️
Static Website ✔️
HTTPS ✔️
DNS ✔️
JavaScript 🚧
Database 🚧
API 🚧
Python 🚧
Python Tests ❌
Infrastructure as Code 🚧
Source Control ❌
Backend CI/CD ❌
Frontend CI/CD ❌
Blog Post 🚧

TL;DR
The user is working on a project where they want to track website visitors. They started with a simple visitor counter using the localStorage object, but this didn’t meet their needs. They decided to use CosmoDB for their database and created a Bicep script to deploy it. They also created a Function App to interact with the database.

However, they encountered difficulties with securing the Function App and API keys. After researching various solutions, they decided to migrate their website from Storage Accounts to an actual static webapp. They noticed that Azure Static Webapps has a preview feature that allows a direct connection to an Azure DB with built-in security, which would simplify their design. They also set up a pipeline between their GitHub and their Static Web App, so that committing to their repo triggers a GitHub action Workflow that deploys the code to their website.

They spent most of their time reading documentation and troubleshooting, and plan to detail their process in a future blog post. They also plan to find another way to incorporate Python into their project.

As complexity in this project is quickly ramping up, I opted to draw.io a map before proceeding. While mapping this out I also decided I wanted to receive an email every time someone visited my website, what their IP was and how many times they've visited.

To get myself off to a running start, I opted to start with a visitor counter as simple as possible and then add complexity. My first draft looked like this:

It stores information via the localStorage object. This means the counter is browser specific and would be cleared if the user were to clear their browser data. While it doesn't hit the criteria, the visuals gave me an idea of what to setup next:

A database to store the counter’s tally.
An API to interact with the database safely.

I chose to use CosmoDB for my database as I’ve never worked with it before and wanted to get a better understanding of how it worked.

In this project, I plan to deploy as many resources as possible using Bicep. My favourite way to do this is to first spin something up via the Azure Portal and then parse the resulting ARM template. The ARM template for CosmoDB is refreshingly simple too.

Using an ARM template as a reference, and combining that with VS Code’s IntelliSense, writing Bicep feels intuitive and satisfying. I actually enjoy it.
My first attempt resulted in the below error, I caused it by placing the location property in the wrong spot...

This is what my Bicep looked like in the end:

param dbname string
param location string = resourceGroup().location
param primaryRegion string
resource cosmodb 'Microsoft.DocumentDB/databaseAccounts@2024-02-15-preview' = {
  name: dbname
  location: location
  properties: {
    databaseAccountOfferType:'Standard' 
        locations: [
    {
      failoverPriority: 0
      locationName: primaryRegion
      isZoneRedundant: false
    }
      ]
    backupPolicy:{
      type: 'Continuous'
      continuousModeProperties:{
        tier:'Continuous7Days'
      }
    }
    isVirtualNetworkFilterEnabled:false
    minimalTlsVersion:'Tls12'
    enableMultipleWriteLocations:false
    enableFreeTier: true
        capacity:{
      totalThroughputLimit: 1000
    }
  }
}

The most important part of this code is totalThroughputLimit as it keeps me in the free tier.

Inside my new database, I created a new container called ‘VisitorCounter’ and created a list for my visitors. This is where I learned what a Partition Key was. A partition Key is basically the UID for entries in a database. As I wanted visit counts to be unique to each IP address, I set that as my Partition Key.

As the plan was to record Public IPs, I did some research into the legalities and ethics surrounding this and came to the conclusions:

A guy on StackOverflow said its fine as long as I don’t do anything malicious with them.
I’m going to ignore Copilot’s warnings about privacy and GDPR.
I can collect them using an Azure Function.

Writing the Function App Bicep was not refreshingly simple. It was leagues more difficult than the CosmoDB Bicep. When deploying resources via the Portal, you lose appreciation for all the supporting child resources that get spun up alongside the parent resource. All those supporting resources need to be configured individually and then mapped to the parent resource. Each come with their own unique properties and requirements so a simple portal deployment can turn into a complex Bicep one.

As mentioned earlier, I’ll usually create a resource in the portal and then go through the ARM template but in this case the resulting template felt like a bit of a maze, so I decided to build bottom up rather than reverse engineer top down.
This was my first draft and it actually worked.. Except it deployed an app service plan.. Not a Function App. Fast forward a few hours of trial n error with Microsoft Learn, I didn't get much further beyond this. Eventually I gave up and googled it with the specific intention of avoiding Microsoft Learn.
This landed me on this blog and about an hour later, we had success!

It did leave me with some mild frustration caused by the fact that I am simply perplexed as to how this person figured it out. I attempted to reconcile what they discussed with the Microsoft documentation and I was left scratching my head. While Copilot did a lot of heavy lifting to help me understand their code, this would’ve been a moment where I refer to my colleagues for a sanity check or Microsoft Support for reassurance.

Something I learned though is 'Action' operations in Bicep. In the below example, I used listKeys to get the keys of a storage account I just deployed.

param location string = resourceGroup().location
param name string = 'beeresumequery'

resource storageaccount 'Microsoft.Storage/storageAccounts@2023-04-01' = {
  name: '${name}storage'
  location: location
  sku: {
    name: 'Standard_LRS'
  }
  kind: 'StorageV2'
}
var StorageAccountPrimaryAccessKey = listKeys(storageaccount.id, storageaccount.apiVersion).keys[0].value

resource appinsights 'Microsoft.Insights/components@2020-02-02' ={
  name: '${name}appinsights'
  location: location
  kind: 'web'
  properties:{
    Application_Type: 'web'
    publicNetworkAccessForIngestion:'Enabled'
    publicNetworkAccessForQuery:'Enabled'
  }
}
var AppInsightsPrimaryAccessKey = appinsights.properties.InstrumentationKey

resource hostingplan 'Microsoft.Web/serverfarms@2023-12-01' = {
  name: '${name}hp'
  location: location
  kind: 'linux'
  properties: {
    reserved:true
  }
  sku:{
    name: 'Y1' //Consumption plan
  }
}

resource ResumeFunctionApp 'Microsoft.Web/sites@2023-12-01' = {
  name: '${name}functionapp'
  location: location
  kind: 'functionapp'
  identity:{
    type:'SystemAssigned'
  }
  properties:{
    httpsOnly:true
    serverFarmId:hostingplan.id
    siteConfig:{
//      use32BitWorkerProcess:true //this allows me to use the FREEEEE tier
      alwaysOn:false
      linuxFxVersion: 'python|3.11'
      cors:{
        allowedOrigins: [
          'https://portal.azure.com'
        ]
      }
      appSettings:[
        {
          name: 'APPINSIGHTS_INSTRUMENTATIONKEY'
          value: AppInsightsPrimaryAccessKey
        }
        {
          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING'
          value: 'InstrumentationKey=${AppInsightsPrimaryAccessKey}'
        }
        {
          name: 'AzureWebJobsStorage'
          value: 'DefaultEndpointsProtocol=https;AccountName=${storageaccount.name};EndpointSuffix=${environment().suffixes.storage};AccountKey=${StorageAccountPrimaryAccessKey}'
        }
        {
          name: 'FUNCTIONS_EXTENSION_VERSION'
          value: '~4'
        }
        {
          name: 'FUNCTIONS_WORKER_RUNTIME'
          value: 'python'
        }
        {
          name: 'WEBSITE_CONTENTSHARE'
          value: toLower(storageaccount.name)
        }
        {
          name: 'WEBSITE_CONTENTAZUREFILECONNECTIONSTRING'
          value: 'DefaultEndpointsProtocol=https;AccountName=${storageaccount.name};EndpointSuffix=${environment().suffixes.storage};AccountKey=${StorageAccountPrimaryAccessKey}'
        }
      ]
    }
  }
}

With the Function App deployed, I next had to figure out how to create the interaction between this app and my website.

I created a http trigger using the inbuilt templates and given I had limited experience with Python I thought it best to take my time to understand what everything was before continuing. Taking the time now will pay dividends later when I want to amend or troubleshoot things.

import azure.functions as azfunc
#This imported the Azure Functions SDK. I've always visualised SDKs as a sort of Ikea flatpack box, except for programmers. I didn't think using an SDK would be this simple though. 
#The original template imports this as 'func' but I've changed it to 'azfunc' just to make it more clear that its the SDK and not a python shorthand. 
import logging
#straight forward
app = azfunc.FunctionApp(http_auth_level=azfunc.AuthLevel.FUNCTION)
#This creates an instance of the 'FunctionApp' class within the code. FunctionApp is basically a blueprint from the SDK for creating a "function app object". 
#The section in brackets () defines what level of authentication is needed. ANONYMOUS is no auth, FUNCTION requires the function key and ADMIN requires the master key. 
#What is a class? A class is the blueprint, it defines how an object is created. Providing structure and methods for performing a specific task.  
#What is an object? It is something that is built based on a blueprint. The objects below are HttpRequest and HttpResponse.
#By creating this instance, I don't need to define what those two objects actually are. Which is good because I wouldn't know how. 
@app.route(route="http_trigger1")
#This uses app.route as a decorator to define a route for the function app. So if a HTTP request is made to my function app followed by the trigger /http_trigger1, the below function will activate.
#What is a route? A route is a pathway that can be taken within an application. The route is functionappurl.com/http_trigger1
#What is a decorator? Decorators are sort've layered functions. Do this but also do that with it. E.g You can have 'Hello World!' and create a decorator for it that converts all letters to uppercase to produce 'HELLO WORLD!'.
def http_trigger1(req: azfunc.HttpRequest) -> azfunc.HttpResponse: 
#this defines the http_trigger1 function. It notes that it requires the HttpRequest object to function. 
#"-> azfunc.HttpResponse:" is something that is referred to as 'type hinting'. It advises that the expected response here is a HttpResponse
#What is Type Hinting? Type Hinting is something you add to your code to improve readability and to know what the intention of the code is. 
#The difference between commenting and Type Hinting is that Type Hinting can be used by some tools for error checking and debugging. They're kind of like comments but for your tools. 
#Imagine an interesting future where the Natural Language from comments could be used for Type Hinting.
#I expressed the above idea to Bing and then it showed me an example of a Natural Language comment being interpreted as a type hint. 
#Bing is just showing off now. 
    logging.info('Python HTTP trigger function processed a request.')
#Straight forward, performs a logging action. I assume the .info refers to the fact that this is just information, not an error message or anything. 
    name = req.params.get('name')
    if not name:
        try:
            req_body = req.get_json()
        except ValueError:
            pass
        else:
            name = req_body.get('name')
#This script is trying to get the ‘name’ value from the request parameters. If ‘name’ is not provided in the parameters, it then tries to get ‘name’ from the JSON body of the request.
#If ‘name’ is not in the JSON body or if the body is not valid JSON, name will be None.
#If ‘name’ is found in either the parameters or the JSON body, it will be assigned to the name variable. If ‘name’ is not found in either place, name will be None.
#So basically when a HTTP request is made to the function app url, it needs to include a parameter that defines a name. E.g "Name=Brandon". If there is no name then it'll check if there is one in the JSON body. If not found then nothing happens. 
    if name:
        return azfunc.HttpResponse(f"Hello, {name}. This HTTP triggered function executed successfully.")
    else:
        return azfunc.HttpResponse(
             "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.",
             status_code=200
        )
#The above is straight forward. The previous block was looking for a name because it wants to pass that name into this block. So it takes that parameter and places it into the {name} field.
#If there is no name then it tells you to include a name in the query string. 


#Running this code 
#HTTP Method : Get / POST (If using JSON body)
#Key = The URL of my functionapp
#Query parameters 'name:brandon' or no name
#Headers. None / Content-Type:application/json (If using JSON body))

Copilot then created some simple JavaScript to test it.

<!DOCTYPE html>
<html>
<head>
    <title>Fetch Example</title>
</head>
<body>
    <button id="fetchButton">Fetch Data</button>
    <div id="data">Press the button to fetch data...</div>
    <script>
        document.getElementById('fetchButton').addEventListener('click', fetchData);
        async function fetchData() {
            document.getElementById('data').innerText = "Loading...";
            try {
                const response = await fetch('https://functionapp.azurewebsites.net/api/http_trigger1?code=1234');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.text();
                document.getElementById('data').innerText = data;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('data').innerText = error.message;
            }
        }
    </script>
</body>
</html>

This test code simply pings my Function App and returns whatever message it gets back. In this case I received an error which ended up being CORS related. CORS or Cross Original Resource Sharing determines which domains are allowed to send queries to your Function App. It also allows a wildcard to allow all.
A successful query looked like this

Unfortunately, the keys to my Function App were written in the html itself and keeping them there was a non-starter. Even though CORS ensures that only my domain can make requests to my API, intuition tells me circumventing it would be trivial.
After doing some reading, there's a few things I need to do to get this right:

CORS - ✔️
HTTPS - ✔️
Logging and Monitoring - ✔️
Network Isolation – Needs investigation.
Azure API Management – Needs investigation.
Store Keys in a KeyVault - ❌

Azure API Management seemed interesting and it didn’t support Network Isolation so I started with it first.

In the Cloud Resume Challenge briefing material, it was mentioned that many people struggle to go beyond the initial stages of deploying the website. I began to understand why while writing the Bicep for the APIM resource. There are so many new concepts that need to be learned and deploying resources with Bicep adds another layer of difficulty on top.

Writing the Bicep took a lot longer than expected but I learned a lot on the way. Cool Bicep tricks like parameter objects, parameter arrays, create if not found, modules & outputs to name a few.

After spinning up the APIM and spending time clicking around on the resource, I figured I'd think about what my secure workflow would look like:

My website queries my Key Vault for the keys to my API
This works because my website is a managed identity and has read access to those keys
My website then queries my API Service
My API Service queries my Function App
My Function App queries my Cosmo DB
It then flows backwards into a result to my website

This doesn’t make sense. My goal is simply to have my Azure Storage Static Webapp securely interact with my database. Directly referencing your KeyVault from the front end is apparently bad practice and so is putting your function and API keys in your code. Copilot suggested I spin up a FunctionApp to talk to my vault so I can talk to my APIM resource that talks to my Function App.

The next few hours researching the best way to approach this can be summarised in the following:

"You can securely access secrets by doing this…."
"Actually, this isn't secure because people can still do this..."
“Just use Azure Static Web App”

I know securing it in some form was possible as others who have completed this challenge have done it. But I set a rule that I wouldn't be copying others and instead research my own solutions. In the end, the conclusion I came to was that spending hours trying to make something work when it wasn't the best way to do it was insanity.

I decided to pivot and begin the process of migrating my website from Storage Accounts to an actual static webapp. Setting up the resource was uneventful. I did it via the Portal as I just wanted to move forward but I've made a note to write the Bicep for it when I'm not as exasperated.

I also noticed Azure Static Webapps has a preview feature that allows a direct connection to an Azure DB with built-in security, the same role-based security used to secure API endpoints. This means I won't need the Function App or an API Manager which significantly reduces the complexity of my design. I’ll find another excuse to use Python in this project as I do want to learn more about that language.

During the creation of my Static Web App, I took the opportunity to setup a pipeline between my GitHub and my Static Web App. This means committing to my repo will trigger a GitHub action Workflow that deploys the code to my website. Very satisfying!

My next blog post will go into how I did this.

Reflecting on the above, this one was an absolute slog. It’s hard to express it here but I spent about 80% of the time reading documentation and troubleshooting.

Cloud Resume Challenge pt 2: Building and Hosting my Resume.

Brandon Allmark — Sun, 21 Jul 2024 14:08:25 +0000

Please check out my resume at resume.allmark.me!
All feedback, good or bad is appreciated 😄

Progress thus far:

Certification ✔️
HTML 🚧
CSS 🚧
Static Website 🚧
HTTPS 🚧
DNS 🚧
JavaScript ❌
Database ❌
API ❌
Python ❌
Python Tests ❌
Infrastructure as Code ❌
Source Control ❌
Backend CI/CD ❌
Frontend CI/CD ❌
Blog Post 🚧

TL;DR
The user is creating an HTML version of their resume.
They started with a structured approach, using generative AI to help with HTML and asking specific questions to understand the generated content. They added CSS to their resume, implemented a dark mode, and hosted their resume on Azure using a Storage Account Static website, a custom domain, and HTTPS. They noticed some compatibility issues with auto-formatted text from Word but decided to ignore it for now. They found unlearning the preconception that CSS and JavaScript elements had to live outside of the HTML file to be the most difficult part. If they had more time, they would add more JavaScript and CSS, including a progress bar, sticky headings, and a dark mode toggle that remembers settings. They enjoyed the exercise and are excited for what comes next.

Getting Started

As I started, the nervous thoughts began flooding in. Is this going to be much harder than I imagined? Where do I even begin? Will I even end up finishing this? Have I bitten off more than I can chew?

This was exacerbated by the fact that I decided that if I were to host my resume in Html form, I would need to be faithful to the Docx version. This rule made me nervous because I genuinely had no idea how difficult that would be, and I was worried I’d hit a hard-stop right at the beginning.

Personal growth has taught me that this nervousness is usually triggered by a lack of structure. If I can build structure, I can focus. I learned this early on in my career and it helped me thrive in the chaotic world of MSPs. At work, this takes the form of colour coding and managing my calendar like a To-Do list.

Blue = To do.
Green = Done.
Red = Recurring.
Purple = Team Meeting.
Yellow = This schedule cannot be bumped and if you forget it you are in trouble.

Obvious Redactions Applied...

When working on personal projects or any large complicated task, adding structure is usually just a series of accumulative steps.
In this case:

Find and install useful HTML extensions in VS Code.
Create the headings.
Add two placeholder dot points under each.
Add some bolded words.
Add the resume content in plaintext.
Begin styling with CSS.

HTML

Getting started with HTML was easy enough with the help of generative AI. I use Edge’s Copilot as I have access to the enterprise license. This also meant I had to work on this using my company laptop. This was fine because I find I work more productively on it anyways.
I used the following prompt to generate the first draft of my website:

I'm looking to create a resume for my website. I want it to be written in only HTML. For now I just want to have 3 headings - personal details, work history, education and skills. Keep it as simple as possible as I want to build iteratively to ensure I understand each component. Also explain each component to someone who does not have any professional experience in HTML

Not Bad.

Doing it this way got me off to a running start and keeping it simple meant I was able to understand everything that was being generated. From here, I used Copilot like they were a more senior team member, just asking them simple questions such as:

How do I do a line break?
How do I do dot points, tab spaces and bold words?
What does “p style” mean and why do I need it?
What is a div? What happens if I remove it?
Is there a better way to add dot points than "li"?

I’ve always felt that generative AI was at its best as a force multiplier. That is, you need to give it some level of your own expertise if you are to get the most out of it. If you start with no expertise, then ask for everything in the simplest form and don't progress until you understand what it's generated. Doing it this way improved my prompting as I was learning how to specifically ask for what I wanted. I.E I was able to contribute increasingly more expertise which meant increasingly better results.
After a couple hours I had finished the RAW HTML outline of my resume. A very satisfying result.

I also took the liberty of adding 'Basic HTML & CSS' to my skills section.

CSS

The next part was adding CSS, which should be simple because my resume is mostly flavourless apart from the font and a couple headings like this one:

Still, it was tricky because I genuinely had no idea how to ask for this. My first attempt was simply sending the above screenshot to Copilot and telling it to “do that in css” which results in something.. not quite right:
Luckily, the legacy technology of old was still available and I was able to produce some spice after 10 minutes of google:

To feel authentic to me, it needed two more things though.

Margins because that is what I'm used to.
Dark Mode because good first impressions are important.

Both were relatively easy to implement but dark mode left much to be desired when comparing my Docx version to my Html version.

I needed the headings and Hyperlinks to update too.
The great thing about this task is that it gave an opportunity to prompt AI in my favourite way:

This is my code

This is what my code does

This is what I want it to also do

Explain each change to me so I can understand what you've done.

I told it to create a class called 'brandon mode' that set my background to yellow when I pressed a button.

Hilarious typos aside, it taught me something cool - You can have nested classes. After learning this, it wasn't too hard to figure the rest out:

I used PowerToys to rip the colours from Word. Thanks Microsoft!

Once dark mode was configured, I added a toggle button by ripping code from Stack Overflow. Just like the pros.

Don't ask me how this works..

Hosting in Azure

Uploading it to a Storage Account Static website, adding a custom domain and enabling HTTPS was fairly uneventful. I've done this previously and the Microsoft Learn documentation on it is solid. I use Cloudflare for my domain hosting and DNS.

Once it was hosted in Azure I noticed some compatibility issues with some of the auto-formatted text from Word. I ignored VS Code's warnings about these characters so this was coming back to haunt me.

I opted to continue ignoring it as there would be opportunities to fix this later down the track. It was time to wrap this one up.

Reflecting…

What aspect of Chunk 1's work did you find the most difficult?

The most difficult part was unlearning the preconception that CSS and JavaScript elements had to live outside of the html file. Things began to fall into place once I understood that.

What's something you'd have done differently, or added, if you'd had more time?

More JavaScript and more CSS. I'd like one of those tiny bars that progresses the further you get down the page. I'd also like headings to following you down until you get to the next one.
I'd like the dark mode toggle to remember your settings.

Overall this was a really fun exercise and I found myself eager to return each time I stepped away. It's very satisfying to view my resume in a form that is free from Word's page limits. Also, getting a resume pixel perfect is much easier in Html than it is in Word.

One thing is for certain – this has got me excited for what comes next!

Cloud Resume Challenge pt 1: Introduction

Brandon Allmark — Fri, 12 Jul 2024 09:13:44 +0000

What is it?

The Cloud Resume Challenge is a 16 step project designed to showcase the skills one develops while performing the steps necessary to upload their resume to the cloud as an HTML document. Choosing to upload a resume is actually optional and the challenge can be completed with any static website that you want. It's a neat challenge because it's one of those projects where the value really comes from the journey and not so much the destination. By the end you get a nifty website and something to talk about in interviews or the people you work with.

Azure Cloud Resume Challenge Steps:

Certification - Minimum AZ-900 - already done.
HTML - Your resume needs to be written in HTML.
CSS - It needs to be styled with CSS.
Static Website - It should be deployed online as a static website.
HTTPS - It should be protected by HTTPS.
DNS - You should have a custom domain name for your website.
JavaScript - Your Page should contain a visitor counter.
Database - Your Visitor Counter should store its data within a database.
API - Create an API as a middle man between your website and database.
Python - Include python code in a function of some sort.
Tests - Include tests for your python code.
Infrastructure as Code - Deploy the necessary resources via code, not ClickOps.
Source Control - Have a GitHub for your code.
Backend CI/CD - Automatically deploy your resources or Python via GitHub Actions.
Frontend CI/CD - Automatically deploy changes to your website via GitHub Actions.
Blog Post - This.

Why did I start?

To be blunt: Because the company I work for, Telstra, is doing a large round of layoffs. In May, 400 people were advised that they were losing their job, some of them I knew. In Mid-July, which is next week at the time of writing this, another 2400.

There's no sugar coating it, layoffs are rough. It's a difficult time for all those involved as for a period of a few months, you never know what your future may hold. As I've now experienced this twice at Telstra, I've come to know that people react differently to the anxiety that these times present. Some people choose to stick their heads down and get on with it, others seek out the company mental health support but unfortunately those two perfectly valid responses never really help me feel better.

As a Consultant, I've always viewed myself more as a Problem Solver rather than an IT Guy and when presented with issues, my brain automatically goes into "fix it" mode… much to the chagrin my wife. So when presented with this issue - the fact that I may be job seeking in a couple months, that's exactly what happened. My brain went into "fix it" mode.

I know its cheesy but this is what came to mind when I was presented with potential job loss.

So in this situation what did it mean to me to get to work?

Given it was early days and the announcement had just been made a few days prior, I outlined a simple list of tasks for me to complete as soon as possible to get an idea of where I stand:
1. Update LinkedIn
2. Update Resume
3. Import the above into my internal company profile
4. Apply for 20 jobs on Seek and see what bites I get.

Step 4 is where I got stuck. I realised I was in an awkward position because my preference was to stay at Telstra and I felt bad about wasting people's time.

Why is my preference to stay with Telstra, why don't I just leave?

I often get asked this question from family, friends and previous colleagues. To them, it seemed reckless to stay with a company that goes through two layoffs in two years. The reason I stay is because:

Telstra gives me reason to stay.
I genuinely care about the guys I work with and I love how smart they are.
I like my clients as people and respect them as professionals.
I use professional development to mitigate the anxiety of possible redundancy and I actually don't mind that.

Point 4 is what made me pivot. If I felt a bit awkward about applying for jobs when I had no intention to leave my existing one, then the next best option was to make myself as an attractive candidate as possible should I be force to.

Which led me to this challenge.

I chose this because I liked the learning philosophy - baptism by fire. I never really got a lot out of doing labs where everything 'just worked' and so a challenge that doesn't hold your hand but at the same time gives you space to be creative, was perfect for me.

And so I updated the focus on my whiteboard and it was time to begin.