DEV Community: Javel Rowe

Video Annotator

Javel Rowe — Mon, 13 May 2024 06:37:13 +0000

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

VNote is a video annotation tool.

By adding a Youtube video URL to the input field on the landing page, users can access a note-taking interface integrated with the video player. This enables users to create timestamped notes directly linked to specific moments in the video, aiding in comprehension, retention, and collaboration through a shareable link.

Target Users

Educators: Create interactive video lessons with embedded notes, questions, or links to supplementary materials.
Students: Collaborate on study guides by annotating lecture videos or documentaries.
Researchers: Analyze and code qualitative video data with precise timestamps and linked resources.
Content Creators: Include additional context, behind-the-scenes details, or interactive elements to videos.

Demo

Demo Link

VNote Pro

Annotate, share, and learn from videos.

vnote.pro

Video Demo

Github Repo

perplexedyawdie / video-annotator

Annotate, share, and learn from videos.

Welcome to VNote Pro 👋

Capture and share key moments from any video with time-stamped notes, links, etc. Easily collaborate and learn by sharing your annotated videos.

🏠 Homepage

Install

Make a copy of the .env.example file and rename it to .env.local then add the required env vars.

npm install

Usage

You can run the command below or use the provided Dockerfile.

npm run dev

Author

👤 Javel Rowe

Website: https://javel.dev
Github: @perplexedyawdie
LinkedIn: @javel-rowe

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

View on GitHub

Landing Page

Taking Notes

Platform Primitives

Netlify Blobs made it super easy to quickly store/retrieve notes data.

Specifically, I was able to interact with Netlify Blobs by using the Typescript client. First, I initialized the client like so:

import { getStore } from '@netlify/blobs';

const store = getStore({
    name: 'note-store',
    siteID: process.env.NETLIFY_SITE_ID,
    token: process.env.NETLIFY_API_TOKEN,
})

then I was able to easily save data like so:

export async function saveNote(noteData: VNote): Promise<boolean> {
    try {
        await store.setJSON(noteData.id, noteData)
        return true
    } catch (error) {
        console.error(error)
        return false
    }
}

and retrieving was just as simple:

export async function getNoteData(noteId: string): Promise<VNote | null> {
    try {
        const noteData = await store.get(noteId, {
            type: "json"
        });
        if (noteData) {
            return {
                id: noteData.id,
                url: noteData.url,
                noteDetails: noteData.noteDetails ?? null
            }
        } else {
            throw new Error("Unable to retrieve note!");

        }
    } catch (error) {
        console.error(error)
        return null
    }
}

This site was hosted on Netlify & I added a custom domain.

Helm 101: Creating Helm Charts

Javel Rowe — Tue, 06 Feb 2024 15:21:25 +0000

Overview

Helm is the package manager for Kubernetes, like apt, yum, or Homebrew for traditional operating systems. It simplifies the deployment and management of applications on Kubernetes clusters by packaging all necessary components into a single, manageable unit.

Why Helm?

Simplifies Kubernetes Deployments: Helm packages, known as charts, bundle together all the Kubernetes manifests (like deployments, services, etc.) needed to deploy an application, making the deployment process straightforward and repeatable.
Manages Dependencies: Helm charts can include other charts, allowing complex applications to manage their dependencies effectively.
Version Control for Deployments: Helm tracks versions of deployments, enabling rollbacks to previous states if needed.

What is it made of?

Chart: A Helm chart is a bundle containing all information necessary to create an instance of a Kubernetes application. It includes resource definitions and configuration files.
Config: The configuration contains customizable parameters that merge with a chart to create a release. These parameters allow the same chart to be used in different environments or configurations.
Release: A release is an instance of a chart running in a Kubernetes cluster, combined with a specific configuration.

Helm Architecture Diagram

Helm Client:

Chart Development: Local chart development and managing repositories.
Release Management: Manages releases/repos and request chart installation or release upgrade/uninstallation through Helm Library.

Helm Library:

Chart Management: Handles combining charts and configurations to create releases and installing/upgrading/uninstalling charts.
Interacts with Kubernetes: Interfaces with the Kubernetes API server.

Creating a Chart

Creating a Helm chart involves setting up a predefined directory structure with at least two files: Chart.yaml for metadata about the chart and values.yaml for default configuration values.

Structure: A basic chart directory will have the following layout:

Chart.yaml: Contains metadata about the chart such as name, version, and description.
values.yaml: Specifies default configuration values for the chart.
templates/: This directory contains template files that generate Kubernetes manifest files based on the values provided.

Templating: Helm uses a templating engine to substitute values in the chart templates, creating Kubernetes manifests tailored to specific deployments. This allows for dynamic adjustment of resources, labels, and configurations without altering the original chart files.

Practice

Scenario:

A startup, "DevOps Solutions" adopts Helm to streamline their Kubernetes deployments. You're a consultant tasked with creating a basic Helm Chart for n8n. It should be customizable for different environments using values.

Clone the repo

git clone https://github.com/perplexedyawdie/helm-learn.git

Change directory to creating-charts

cd helm-learn/creating-charts

Spin up the environment using docker compose

docker compose up -d --build

SSH into the ubuntu container

ssh -o StrictHostKeyChecking=no -o NoHostAuthenticationForLocalhost=yes root@localhost -p 2222
# password: test123

Generate a chart directory along with sample files

helm create my-n8n

View the structure of the generated directory

tree .

# Output should look similar to this
#`-- my-n8n
#    |-- Chart.yaml
#    |-- charts
#    |-- templates
#    |   |-- NOTES.txt
#    |   |-- _helpers.tpl
#    |   |-- deployment.yaml
#    |   |-- hpa.yaml
#    |   |-- ingress.yaml
#    |   |-- service.yaml
#    |   |-- serviceaccount.yaml
#    |   `-- tests
#    |       `-- test-connection.yaml
#    `-- values.yaml

We'll only be using Chart.yaml , values.yaml, my-n8n/templates/NOTES.txt and my-n8n/templates/_helpers.tpl so we can remove the rest since we'll be adding our own manifest files.

rm -rf my-n8n/templates/*.yaml my-n8n/templates/tests

Update the appVersion in Chart.yaml to "1.27.2" & clear the contents of my-n8n/templates/NOTES.txt file then update with the following.

nano my-n8n/Chart.yaml
# appVersion: "1.27.2"

nano my-n8n/templates/NOTES.txt
# Welcome to n8n.
# Wait a few minutes until the status changes to RUNNING.
# After it is ready, access it from: http://localhost:2223

Update the values.yaml file with the following data

# Default values for my-n8n.
# This is a YAML-formatted file.
# Declare variables to be passed into your templates.

replicaCount: 1

image:
  repository: n8nio/n8n
  pullPolicy: IfNotPresent
  # Overrides the image tag whose default is the chart appVersion.
  tag: "1.27.2"

containerPorts:
 - name: http
   port: 5678

service:
  type: NodePort
  port: 30200

livenessProbe:
  httpGet:
    path: /
    port: http
readinessProbe:
  httpGet:
    path: /
    port: http

autoscaling:
  enabled: false
  minReplicas: 1
  maxReplicas: 100
  targetCPUUtilizationPercentage: 80
  # targetMemoryUtilizationPercentage: 80

# Additional volumes on the output Deployment definition.
volumes:
- name: n8n-data

persistence:
   claimName: n8n-data

# Additional volumeMounts on the output Deployment definition.
volumeMounts:
 - name: n8n-data
   mountPath: "/home/node/.n8n"

Create the deployment.yaml , service.yaml and, pvc.yaml files inside the my-n8n/templates folder

# my-n8n/templates/pvc.yaml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: n8n-data
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi # Adjust the size as per your requirement

# my-n8n/templates/deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: n8n
spec:
  replicas: 1
  selector:
    matchLabels:
      app: n8n
  template:
    metadata:
      labels:
        app: n8n
    spec:
      containers:
      - name: n8n
        image: n8nio/n8n
        ports:
        - name: http        
        - containerPort: 5678
        volumeMounts:
        - name: n8n-data
          mountPath: /home/node/.n8n
      volumes:
      - name: n8n-data
        persistentVolumeClaim:
          claimName: n8n-data

# my-n8n/templates/service.yaml

apiVersion: v1
kind: Service
metadata:
  name: n8n
spec:
  type: NodePort
  ports:
  - port: 5678
    targetPort: 30200
    protocol: TCP
  selector:
    app: n8n

Now, let's parameterize these using the go-template language to convert them to templates. Helm will fetch the appropriate values from the values.yaml file to generate the manifest that will be deployed on K8S.

# my-n8n/templates/pvc.yaml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: {{ .Values.persistence.claimName }}
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi # Adjust the size as per your requirement

# my-n8n/templates/deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ printf "%s-%s" .Release.Name .Chart.Name  }}
spec:
  replicas: 1
  selector:
    matchLabels:
      app: n8n
  template:
    metadata:
      labels:
        app: n8n
    spec:
      containers:
      - name: n8n
        image: {{ printf "%s:%s" .Values.image.repository .Values.image.tag  }}
        ports:
        {{- range .Values.containerPorts }}        
        - name: {{ .name }}
          containerPort: {{ .port }}
        {{- end }}        
        volumeMounts:
        {{- range .Values.volumeMounts }}
        - name: {{ .name }}
          mountPath: {{ .mountPath }}
        {{- end }}
      volumes:
      {{- range .Values.volumes }}      
      - name: {{ .name }}
        persistentVolumeClaim:
          claimName: {{ $.Values.persistence.claimName }}
      {{- end }}

# my-n8n/templates/service.yaml

apiVersion: v1
kind: Service
metadata:
  name: {{ printf "%s-%s" .Release.Name .Chart.Name  }}
spec:
  type: {{ .Values.service.type }}
  ports:
  - port: 5678
    targetPort: 5678
    nodePort: {{ .Values.service.port }}    
    protocol: TCP
  selector:
    app: n8n

Ensure that you're in the directory that contains the chart my-n8n then run the linter

helm lint my-n8n

Install the chart

helm install my-n8n ./my-n8n

Wait until the deployment is complete, you can continually check using the following command.

kubectl get all

After the status has changed to running, you should be able to access it in your browser from: http://localhost:2223

Recap

Great effort! You just learned how to create and configure a Helm chart then deploy it to a Kubernetes cluster!

Ansible 101: Modularization & Debugging

Javel Rowe — Wed, 31 Jan 2024 12:51:20 +0000

Overview

When playbooks grow in size, they become challenging to manage. Modularization helps by separating logic from data, making playbooks cleaner and more maintainable. As you introduce these abstractions, it's crucial to integrate robust error handling and debugging techniques to ensure reliability.

Roles

Roles in Ansible are units of organization that allow you to group related tasks, variables, files, and templates. They make your playbooks modular. Here’s how to create and use them:

Creating a Role: Organize your playbook into a directory structure with separate files for tasks, handlers, defaults, vars, files, and templates.
Using Roles: Incorporate a role into your playbook with the roles property or the include_role module for dynamic inclusion.

- hosts: all
  roles:
    - role: my_custom_role

Error Handling & Debugging

Error Handling

Ansible provides ways to define custom failure conditions and manage the playbook execution flow when encountering errors.

Block and Rescue: Use block to group tasks and rescue to define remediation steps if any task in the block fails.

tasks:
  - block:
      - name: Attempt to do something
        command: /bin/false
    rescue:
      - name: This will run on failure
        command: /bin/true

Debugger

Ansible’s debugger lets you interactively troubleshoot tasks that fail during playbook execution. It can be invoked by adding debugger to your playbook. Use one of the following values to control when the debugger is activated:

always: always activate debugger
never: never activate debugger
on_failed: activate only on task failure
on_unreachable: activate when a host is unreachable
on_skipped: activate when a task is skipped

- name: Install NGINX Web Server
  hosts: webservers
  tasks:
   - name: Install NGINX
     ansible.builtin.apt:
      name: httpd
      state: present
     debugger: on_failed

Core commands when working with the debugger include:

print: display task details
task.args['arg-name'] = 'updated-val': update arg value
redo: rerun the task
quit: exit the debugger

Practice

Our aim is to modularize the process of installing NGINX and updating the homepage. We also want to handle an error caused by incorrect package name and dynamically fix it.

Clone the repo

git clone https://github.com/perplexedyawdie/ansible-learn.git

2. Spin up the environment using docker-compose

docker compose up -d --build

3. SSH into the Ansible server

ssh -o StrictHostKeyChecking=no -o NoHostAuthenticationForLocalhost=yes root@localhost -p 2200# password: test123

4. Change directory to ansible_learn

cd ansible_learn

Roles & Modularization

5. Create the roles directory with the relevant folders. For this task, we'll only require tasks , templates and handlers

cd ansible_learn

mkdir -p roles/nginx/tasks roles/nginx/templates roles/nginx/handlers

6. Create the template that will generate the homepage.

Filename: index.html.j2

Location: ansible_learn/roles/nginx/templates

<html>
<head>
  <title>Welcome to {{ ansible_facts['os_family'] }}</title>
</head>
<body>
  <h1>Server running on {{ ansible_facts['distribution'] }}</h1>
</body>
</html>

7. Create the tasks that will install NGINX, generate the homepage, and copy it to the server.

Filename: main.yaml
Location: ansible_learn/roles/nginx/tasks

- name: Install NGINX for Debian-based systems   
  ansible.builtin.apt:
   name: nginx
   state: present
- name: Create Homepage with Jinja2 Template for NGINX
  ansible.builtin.template:
   src: index.html.j2
   dest: /var/www/html/index.html
   mode: '644'
  notify: restart nginx

8. Create the handler that will restart NGINX upon update.

Filename: main.yaml
Location: ansible_learn/roles/nginx/handlers

- name: Restart NGINX
  listen: "restart nginx"
  ansible.builtin.service:
   name: nginx
   state: restarted

9. Create the playbook.

Filename: nginx_setup.yaml
Location: ansible_learn

- name: Install NGINX
  hosts: all
  roles:
   - role: nginx

10. Run the linter

ansible-lint nginx_setup.yaml

11. Execute the playbook.

ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml nginx_setup.yaml

12. Confirm deployment by visiting http://localhost:2203 in your browser.

Error Handling

The aim is to use block and rescue to print a custom message on error.

13. Create a new playbook that should install Apache but use the wrong package name then add block & rescue properties.Filename: error_test.yamlLocation: ansible_learn

- name: Install Apache on Ubuntu
  hosts: all
  tasks:
    - name: Install Apache for Debian-based systems
      block:
        - name: Installer
          ansible.builtin.apt:
            name: httpd
            state: present
      rescue:
        - name: Installer errors
          ansible.builtin.debug:
            msg: "Error installing Apache on {{ ansible_facts['distribution'] }}"

14. Run the linter

ansible-lint error_test.yaml

15. Execute the playbook

ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml error_test.yaml

Debugging

The aim is to use the debugger and dynamically fix an error in a task.

16. Update the error_test.yaml playbook and add the debugger property

- name: Install Apache on Ubuntu
  hosts: all
  debugger: on_failed  
  tasks:
    - name: Install Apache for Debian-based systems
      block:
        - name: Installer
          ansible.builtin.apt:
            name: httpd
            state: present
      rescue:
        - name: Installer errors
          ansible.builtin.debug:
            msg: "Error installing Apache on {{ ansible_facts['distribution'] }}"

17. Run the linter

ansible-lint error_test.yaml

18. Execute the playbook

ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml error_test.yaml

19. In the interactive debugger, run the following commands to update the package name

# display all args in the failed task, we are interested in the name, since that contains the name of the package
p task.args

# update the package name. When installing Apache on Ubuntu, we use apache2
task.args['name'] = 'apache2'

# rerun the task
redo

# exit the debugger
quit

20. Confirm successful installation of Apache

ssh -i /root/.ssh/id_rsa_ansible root@server1 apache2 -V

Recap

Great effort! We learned how to create playbooks that are easier to extend and maintain along with how to handle errors and debug tasks to ensure reliability. For the final tutorial, we'll look at how to safely store sensitive data using Ansible Vault. Til then, take care! 👋

Ansible 101: Facts & Templates

Javel Rowe — Mon, 29 Jan 2024 12:36:16 +0000

In Ansible, variables and facts, along with templates, are foundational tools for creating flexible automation workflows. Variables allow you to manage and change your configurations dynamically. Facts are a special subset of variables that Ansible gathers from the remote systems, providing context-specific information. Templates enable the generation of variable-driven configuration files, making your playbooks adaptable to varied environments and scenarios.

These tools make playbooks reusable and adaptable, allowing you to avoid hard-coding values and enabling customization for different environments.

Variables & Facts

Variables allow for parameters to be modified without altering the playbook's core logic.

Types of Variables:
- Boolean: True or False values.
- List: An ordered collection of items.
- Dictionary: Key-value pairs for complex data structures.
- Registered Variables: Captures the output of tasks to use later in your playbook.
- Facts: Auto-collected variables that provide details about the remote systems you are managing.

NB: Avoid conflicts in variable names by using bracket notation.

- name: Print the distribution of the target
  hosts: all
  vars:
   curr_time: "{{ now() }}"
  tasks:
   - name: Distro Check
     ansible.builtin.debug:
      msg: "The target system is {{ ansible_facts['distribution'] }}. Timestamp: {{ curr_time }}"

Templates & Files

Templates in Ansible use the Jinja2 templating language to dynamically create files using variable interpolation, loops, and conditionals.

- name: Write distro name
  hosts: all
  tasks:
   - name: Write distro name
     ansible.builtin.template:
      src: distro.j2
      dest: /root/distro.txt
      mode: '644'

# src: location of jinja2 template file
# dest: location it will be copied to
# permissions that will be granted to the file

Practice

We're going to use the OS Family to determine whether to install NGINX of Lighttpd then we'll deploy a custom homepage to the remote host containing NGINX all without hardcoding hostnames.

Clone the repo

git clone https://github.com/perplexedyawdie/ansible-learn.git

2. Spin up the environment using docker-compose

docker compose up -d --build

3. SSH into the Ansible server

ssh -o StrictHostKeyChecking=no -o NoHostAuthenticationForLocalhost=yes root@localhost -p 2200# password: test123

4. Change directory to ansible_learn

cd ansible_learn

Variables & facts

5. Create a playbook called server_setup.yaml. Here, we'll setup NGINX & Lighttpd then output the name of the distro for each remote host

- name: Install NGINX on Debian & Lighttpd on RedHat
  hosts: all
  vars:
   dev1: "Debian"
   dev2: "RedHat"
  tasks:
   - name: Install NGINX for Debian-based systems   
     ansible.builtin.apt:
      name: nginx
      state: present
     when: ansible_facts['os_family'] == dev1       

   - name: Install Lighttpd for RedHat-based systems 
     ansible.builtin.yum:
      name: lighttpd
      state: present
     when: ansible_facts['os_family'] == dev2       

   - name: Display the distribution
     ansible.builtin.debug:
      msg: "The server is running {{ ansible_facts['distribution'] }}"

6. Run ansible-lint

ansible-lint server_setup.yaml

7. Run the playbook

ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml server_setup.yaml

8. Confirm that setup was successful

ssh -i /root/.ssh/id_rsa_ansible root@server3 nginx -V

ssh -i /root/.ssh/id_rsa_ansible root@server2 lighttpd -v
ssh -i /root/.ssh/id_rsa_ansible root@server1 lighttpd -v

Templates & Files

9. Create a Jinja2 template file called index.html.j2

It will get auto populated with the OS Family & Distribution.

<html>
<head>
  <title>Welcome to {{ ansible_facts['os_family'] }}</title>
</head>
<body>
  <h1>Server running on {{ ansible_facts['distribution'] }}</h1>
</body>
</html>

10. Create a playbook called custom_homepage.yaml

We're deploying the custom homepage created above to NGINX then restarting the server.

- name: Deploy Custom Homepage and restart
  hosts: all
  vars:
   dev1: "Debian"
   dev2: "RedHat"
  tasks:
   - name: Create Homepage with Jinja2 Template for NGINX
     ansible.builtin.template:
      src: index.html.j2
      dest: /var/www/html/index.html
      mode: '644'
     when: ansible_facts['os_family'] == dev1
     notify: restart nginx

  handlers:
   - name: Restart NGINX
     listen: "restart nginx"
     ansible.builtin.service:
      name: nginx
      state: restarted
     when: ansible_facts['os_family'] == dev1

11. Run the linter

ansible-lint custom_homepage.yaml

12. Run the playbook


ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml custom_homepage.yaml

13. Confirm deployment by visiting http://localhost:2203 in your browser.

Recap

Awesome effort! 🙌 We've learned how to use variables & facts in a playbook along with how to create dynamic files using templates. Next we'll look at modularization and error handling. Til then, take care!

Ansible 101: Playbooks, Task Controls & Handlers

Javel Rowe — Wed, 24 Jan 2024 08:35:58 +0000

What is a Playbook?

Ansible playbooks allow you to declare tasks to be performed on remote hosts.

Overview of Playbook Structure:

Play: specifies a group of tasks to be executed on a set of hosts.
Task: an action to be performed on the host.
Module: a piece of code for a specific task.

What is Task Control & Handler?

These are methods of controlling how and when your automation scripts are executed. Task control lets you specify conditions for running tasks while handlers are a form of tasks that you trigger only when changes need to be applied.

Task Control Overview

Task control in Ansible allows you to state the conditions under which your scripts should run. This can be implemented using conditionals such as:

When

This conditional allows you to execute a task only if it evaluates to true.

Ansible Facts

ansible_facts are variables containing information like network interfaces, operating system, IP addresses, and more, which are gathered from host machines and can be used in conditionals.

Task Handlers Overview

Handlers are tasks set to run only when certain changes occur, such as when a service's configuration file is updated by another task.

Notify

The notify directive in a task triggers a handler if the task results in any changes to the host.

Listen

The listen directive allows multiple tasks to notify the same handler even if they use different notify names.

Practice

We'll start with two pre-configured inventory files. Inventory-webserver1.yaml contains two hosts while inventory-webserver2.yaml contains one host.

Clone the repo

git clone https://github.com/perplexedyawdie/ansible-learn.git

2. Spin up the environment using docker-compose

docker compose up -d --build

3. SSH into the Ansible server

ssh -o StrictHostKeyChecking=no -o NoHostAuthenticationForLocalhost=yes root@localhost -p 2200# password: test123

4. Change directory to ansible_learn

cd ansible_learn

Working with Playbooks

5. Create playbook file


touch install_nginx.yaml

nano install_nginx.yaml

6. Add the following config to install nginx

# ansible_learn/install_nginx.yaml
# setting the state param to "present" will ensure that it is installed

- name: Install NGINX Web Server
  hosts: webserver1
  tasks:
    - name: Install NGINX
      ansible.builtin.apt:
        name: nginx
        state: present

7. Run the linter

ansible-lint install_nginx.yaml

8. Execute the playbook on inventory-webserver1.yaml

ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory-webserver1.yaml install_nginx.yaml

9. Confirm installation on server1 & server2 then check if it's installed on server3


ssh -i /root/.ssh/id_rsa_ansible root@server1 nginx -V
ssh -i /root/.ssh/id_rsa_ansible root@server2 nginx -V


ssh -i /root/.ssh/id_rsa_ansible root@server3 nginx -V

Task Controls & Handlers

We want to create a playbook that installs Apache on servers that do not have a specific file (e.g., /var/www/html/index.nginx-debian.html), and then use a handler to restart Apache if it is newly installed or updated.

10. Create & open the install_nginx.yaml file

touch conditional_install_apache.yaml

nano conditional_install_apache.yaml

11. Add condition to install Apache if /var/www/html/index.nginx-debian.html doesn't exist then add a handler to restart Apache if it is newly installed.


- name: Conditional Install and Restart Apache
  hosts: all
  tasks:
    - name: Check if NGINX Default Page Exists
      ansible.builtin.stat:
        path: /var/www/html/index.nginx-debian.html
      register: nginx_page

    - name: Install Apache
      ansible.builtin.apt:
        name: apache2
        state: present
      when: not nginx_page.stat.exists
      notify: Restart Apache

  handlers:
    - name: Restart Apache
      listen: "Restart Apache"
      ansible.builtin.service:
        name: apache2
        state: restarted

# The stat module checks for the existence of the default NGINX page. The result is registered in nginx_page.
# The installation task uses the when condition to install Apache only if the file does not exist.
# If the installation task runs, it notifies the handler to restart Apache.
# The handler listens for the notification and uses the service module to restart Apache.

12. Run the linter

ansible-lint conditional_install_apache.yaml

13. Execute the playbook on inventory-webserver1.yaml & inventory-webserver2.yaml

# webserver1
ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory-webserver1.yaml conditional_install_apache.yaml

#webserver2
ansible-playbook --key-file /root/.ssh/id_rsa_ansible -u root -i inventory-webserver2.yaml conditional_install_apache.yaml

14. Confirm installation on server3 then check if it's installed on server1 & server2


ssh -i /root/.ssh/id_rsa_ansible root@server1 apache2 -V
ssh -i /root/.ssh/id_rsa_ansible root@server2 apache2 -V


ssh -i /root/.ssh/id_rsa_ansible root@server3 apache2 -V

Recap

Awesome effort! We just learned how to define Ansible playbooks and how to control the flow of execution using conditionals. Next, we'll look on variables, gathering facts about host machines and how to manage config files using templates.

Ansible 101: Inventory Files & Ad-hoc Cmds

Javel Rowe — Mon, 22 Jan 2024 09:49:52 +0000

What is Ansible?

This is a task automation tool that uses scripts to run commands on remote or local systems. A core idea is that you input the state you want the system to be in (e.g: have docker installed) then Ansible will ensure that it maintains this state.

Basic Architecture

The main idea is to have the Ansible CLI installed on a machine you have access to, then you'll create a list of servers and IP addresses in what's called an Inventory file. After which you can use Ansible CLI to run ad-hoc commands to execute tasks on the servers you listed.

Inventory Files

This is where you define the list of hosts (this can be a local instance of a machine, remote servers etc) that you want to manage using Ansible. These files can be in .ini or .yaml format. Here's an example that defines a group of webservers:

inventory.ini

[webservers]
170.187.144.11
170.187.144.12
170.187.144.13

inventory.yaml

webservers:
  hosts:
    170.187.144.11
    170.187.144.12
    170.187.144.13

Both formats accomplish the same thing, however .yaml is commonly used in many config files and allows you to give each host a unique name so I'd recommend using that.

Ad-hoc Commands

To automate a task, you can use scripts that contain specific commands or you can run commands directly in the CLI. The latter is referred to as an ad-hoc command and allows you to execute simple one-time commands. Using the inventory.ini file we created above, we can use ad-hoc commands to do the following:

Ping

ansible webservers -m ping --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml
# -m Tells Ansible which module to use, in this case, ping
# --key-file Specifies the SSH private key file to use for connections to the remote hosts.
# -u Indicates that Ansible should connect as the `root` user.
# -i Specifies the inventory file to use.

Copy

ansible webservers -m copy -a "src=test.txt dest=/root/" --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml
# -a Specifies the arguments to pass to the module. This module copies files from the local machine on which Ansible is running to the remote hosts specified in the inventory.yaml file.

Practice

I've created a docker compose file that will provision an environment that will allow you to practice what we learned above.

Setup

Clone the repo

git clone https://github.com/perplexedyawdie/ansible-learn.git

2. Spin up the environment using docker-compose

docker compose up -d --build

3. SSH into the Ansible server

ssh -o StrictHostKeyChecking=no -o NoHostAuthenticationForLocalhost=yes root@localhost -p 2200# password: test123

4. Change directory to ansible_learn

cd ansible_learn

5. Create an inventory.yaml file and populate with hosts


touch inventory.yaml

nano inventory.yaml

# Paste the following in your inventory.yaml file.
# webservers:
#  hosts:
#    server1:
#    server2:
#    server3:

6. Ping the hosts to ensure that you can connect to them

ansible webservers -m ping --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml

7. Copy a file to each host

echo "Hello Mate!!" >> test.txt

ansible webservers -m copy -a "src=test.txt dest=/root/" --key-file /root/.ssh/id_rsa_ansible -u root -i inventory.yaml

8. SSH into a host to see your copied file

ssh -o StrictHostKeyChecking=no -i /root/.ssh/id_rsa_ansible root@server1

ls

cat test.txt

exit

exit

9. Stop and remove containers to clean up

docker compose down

Recap

You just learned the basics of Ansible automation! Specifically, how to define the hosts you want to remotely manage and how to execute commands on them. In the next article, we'll look on Playbooks along with task control mechanisms and handlers.

ClipCraft: Image Background Remover

Javel Rowe — Wed, 24 May 2023 01:30:58 +0000

What I built

For this hackathon, I built a lightweight image background remover that can be installed as a PWA. It comes as part of a suite of media editing mini apps.

Category Submission:

Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)

App Link

ClipCraft Studio

ClipCraft - Clip, Create, Share

Clip out interesting bits of your photo and remove the background

clipcraft.studio

Screenshots

Description

This app is a handy tool that focuses on simplifying various aspects of media editing. With its U2net-powered background removal feature, users can remove backgrounds from their images, making them more versatile and visually appealing. The app's backend is built using Python Flask, ensuring a smooth and reliable user experience.

In addition to the background removal feature, the app also offers multiple mini apps to enhance your media editing capabilities. Soon, you can expect the addition of a photo filter mini app, which will allow you to add creative filters to your images. Furthermore, the app will introduce a photo dump video creator, enabling you to compile your photos into engaging videos. Another exciting feature in the pipeline is the Podclip mini app, which utilizes the OpenAI Whisper model to generate transcriptions and create short videos from podcast audio clips. Lastly, the app will include a convenient Clipshare mini app that simplifies media sharing across devices through the use of QR codes.

Link to Source Code

Backend
Frontend

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

It all started when I began researching and playing around with AI tools. As I delved deeper into the world of artificial intelligence, I discovered the incredible potential and versatility of different types of models and their various use cases. One area that particularly caught my attention was media editing. I stumbled upon some fascinating models that could perform tasks like background removal seamlessly. The possibilities seemed endless, and I was inspired to build an app that could harness this power and make media editing more accessible and user-friendly. That's how the idea took shape.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

When it came to utilizing GitHub Actions and GitHub Codespaces for my project, I found them to be invaluable tools in streamlining the development and deployment process. With GitHub Actions, I was able to create a multi-architecture container build effortlessly, ensuring compatibility across different environments. Moreover, GitHub Actions also facilitated pushing the container to GitHub Container Registry (ghcr) smoothly, making it readily accessible for deployment. Speaking of deployment, I relied on GitHub Actions once again to deploy the container to my server seamlessly. These powerful features provided an efficient and automated workflow, saving me time and effort.

Throughout this journey, I learned a great deal. One notable aspect was working with the U2NET model for salient object detection, specifically for background removal. It was fascinating to explore the capabilities of this model and see how well it performs. Additionally, I picked up a new skill in utilizing Onnxruntime, which allowed me to easily deploy the U2NET model in different environments. However, it wasn't without its challenges. I encountered numerous obstacles when deploying the model, and the experience taught me a valuable lesson about the intricacies and potential pitfalls involved in deploying AI models. Nevertheless, this entire process has been incredibly enriching, from exporting models to ONNX format to setting up Onnxruntime in Python, and it has deepened my understanding of deploying models effectively. Ultimately, my aim remains to move everything client-side, and with the skills and knowledge gained, I'm optimistic about achieving that goal.

Additional Resources/Info

Onnxruntime
U2-net

Linode + DEV Hackathon WavScribe

Javel Rowe — Mon, 20 Feb 2023 23:35:45 +0000

What I built

I built an app that makes it easy to transcribe audio files.

Category Submission:

SaaS Superstars: Awarded to the team whose app shows the greatest potential for success as a Software-as-a-Service (SaaS) product or money-making venture.

Integration Innovators: Awarded to the team whose app shows the best integration with other services offered by Linode, such as managed databases or object storage.

App Link

WavScribe

Screenshots

Description

WavScribe is a web app that aims to make audio transcription accessible to everybody! It's free for now for 1 minute of transcription. You just upload your audio file then wait a short while til your transcription job is completed then voila! 🗣📝
Sound to words like magic!

After upload, you get the file id (copy and keep this!!!).
Next step is to click the status link in the nav bar.
You'll be taken to a page where you can paste the file id and poll until your transcription appears 😅

Link to Source Code

WavScribe Web App
WavScribe Python Speech2Text

Permissive License

MIT

Background

A few friends of mine started podcasts and wanted a way to generate transcripts easily. It so happened that I was playing around with AI libs and came upon openai/whisper 😁🤫
I loved the fact that it was performant even on a CPU only machine so I spun up this web app to make it easy for them to get their transcriptions!

How I built it

I used Linode Object storage to keep the audio files and generate presigned urls. I also used Linode Managed MYSQL to store the transcriptions and provide them to users!
Finally, I used Linode Domains to handle the DNS records for my domain. Instead of going back and forth between their and PorkBun, I just did everything in one place 😃 How cool is that??

For the frontend I used Nextjs with Tailwind 💕
For the Speech to Text aspect I used openai/whisper through HuggingFace transformer pipelines. It made it less stressful to work with and get a demo up and running 🤗
I learnt a lot of sys admin stuff on the journey, For example:

How to setup and configure NGINX with certbot
Using a process manager (PM2)
Configuring firewalls

On the backend side, I learnt how to use RabbitMQ! I've been hearing alot about Kafka and other queue systems so it was cool to get the chance to play around with it.
I used it to handle the influx of requests and do them sequentially.
Finally, I learnt a bit more about Docker and passing arguments. 🚢

Additional Resources/Info

I want to add a few more features:

User registration so you can see your past transcriptions
The ability to play the audio and see the timestamped transcription
The ability to generate a shareable link to that transcription with timestamps
Payment plans to allow for longer transcriptions!

Generate a resignation letter in a few steps 😀

Javel Rowe — Fri, 14 Jan 2022 07:35:12 +0000

Overview of My Submission

I've been seeing lotsa talk about the great resignation so I created a Resignation Letter generator 😁
You pretty much just enter a few details and the letter is generated right in front your eyes. There are over 15 templates available and you can generate a shareable link as well!
I tried out the MongoDB Data API. It made it pretty uncomplicated to insert and retrieve documents via API calls. All that's needed is the API key (of course). They provide excellent documentation and code samples for a few languages (I used Node.js). I'll definitely be using it going forward for the times when I might not want to install the NPM package.

Submission Category:

Choose-Your-Own-Adventure

Link to Code

Github Link

Additional Resources / Info

I used the following tools when building the web app:

Link to Resignator

Resignator
Resignator - Vercel

Demo Video

Demo

Screenshots

Resize a cross domain iFrame (the hackiest way)

Javel Rowe — Sun, 24 Oct 2021 03:35:30 +0000

Situation 🤔

Some time ago, I was implementing a cross domain iFrame in Next.js and ran into a slight problem when it came to dynamically setting its height. Due to limitations imposed by the browser, we're prevented from using JS magic to access the page and getting the actual height of the document. A library, iframe-resizer promised to solve the issue however it required a small script to be placed on the page hosting the iFrame. Unfortunately that wasn't an option 🚫

Task 📃

Fortunately, at two redbulls deep, Poros had mercy and an ✨idea✨ came outta no where. What I wanted to accomplish was, on page load, assign a height to the iFrame that will display all it's contents without unneeded whitespace. Why not do it in the most straight forward way possible? Remotely load the URL that will get displayed in the iFrame, get the height of the loaded contents then apply that height to the iFrame.

Lights, Camera... Action! 🎬

One way to do this was through browser automation. There's Selenium but I went with Puppeteer. I made an API endpoint that when hit, uses Puppeteer to load the site then get & return the height using this method I saw on stackoverflow.

Results 💯

The result was a page that takes a little longer to load but has an iFrame that correctly shows all the contents! Check out the code sample below

// npm i puppeteer
const puppeteer = require('puppeteer')

async function getContentHeight({ clientWidth, clientHeight }) {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.setViewport({ width: clientWidth, height: clientHeight })
    await page.goto('my-url-was-here-b4-yours');
    const contentHeight = await page.evaluate(() => {
        let body = document.body,
            html = document.documentElement;

        let height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
        return height
    });
    console.log(contentHeight);

    await browser.close();
}

getContentHeight({ clientWidth: 1366, clientHeight: 768 })

Disclaimer

Pleaaase don't use this in prod! But, if you do.. let me know how it goes 😂

Attribution

Cover image: Andy Park Art

TAWIL: How to use Typescript ️

Javel Rowe — Sat, 06 Feb 2021 02:24:20 +0000

Today at work I learnt how to do the above in preparation for a project where I want to use type-driven design. Let's fire up VS Code and take the four steps needed to layer a type-system onto a JS project.

Step 1 - Ingredients: Sugar, spice and everything niceee

In addition to Node.js and VS Code, we just need to sprinkle npm init onto our command line. After initializing our environment, we add a dash of npm install typescript then finish up with a side of npx tsc -v for good measure. After the smoke clears, you should see something like this appear:

Version 4.1.3

It may not be those exact version but it means we got typescript onto our system successfully.

Step 2 - Where do we put all this stuff?

We're going to end up summoning a regular degular javascript file with the concoction we created above so let's setup a space for it to appear!
In your command line, type npx tsc --init. A file titled tsconfig.json should appear. At line 17 in the file, remove comments from outDir then add "./test" as the key value.

Step 3 - It's a bird, it's a plane..... it's TYPESCRIPT!

Now, let's exercise the strength in our typing fingers and bring some typescript into existence! Create a file titled test.ts then add this bit of code:

let message:string = "Hello world!";
console.log(message);

Here message:string we are setting the type of the variable message to string. From now til the end of time it will only accept strings.

Step 4 - Compile!

The final step is to compile the file. This will output a regular javascript file that we can then use like usual. In your terminal, run npx tsc. A new file titled test.js should appear in the test folder we had created earlier.

Just like that, you've used typescript! Here's some extra enough to get you up and running:

Typescript for JS Programmers

TAWIL: How to write tests with Jest 🃏

Javel Rowe — Thu, 04 Feb 2021 00:14:00 +0000

Hello world. Today at work I learnt how to do the above. It's never too late to begin increasing your confidence in your code. In four steps, we'll have a small testing suite up and running. Let's start!

Step 1 - Dependencies

These 3 steps should be similar for all editors from VS Code to Notepad.

Check that you have Node.js installed by running node -v in your terminal. You should see something like this:

v14.9.0

CD to a folder of your choice (even Desktop, I won't judge), then run npm init then npm i jest --save-dev
Finally, in the package.json file that appeared out of nowhere, add jest --verbose under scripts in the key titled 'test' like so:

Step 2 - Functions to test

Let us create a file titled countr.js. In it, we shall write a set of functions for a counter app. The functions will accept a number as an argument then increase or decrease its value by 1.

const increase = (a) => ++a;
const decrease = (b) => --b;

module.exports = { increase, decrease };

Step 3 - A test for our functions

Now we shall write some tests! In the same directory, create a file titled countr.test.js. In here, add the following bit of code:

const { increase, decrease } = require('./countr');

test('Increaase yah noww', () => {
  expect(increase(3)).toBe(4);
});

test('Beg yuh one nuh', () => {
  expect(decrease(4)).toBe(3);
});

Teching Things Apart

This expect(increase(2)).toBe(3) bit of code does the actual work for us. The expect() function accepts as an input the value that our code ( increase(3) ) outputs. The toBe() matcher function accepts the value we hope our code will output.

Step 4 - Testing 123..

Finally, in your terminal, run the command npm test anddd 🥁 🥁 🥁 🥁
You should see these beautiful messages appear before your very eyes:

That's it! Welcome to the club!

Attributions

Header - Design vector created by macrovector - www.freepik.com