DEV Community: Santiago Salazar Pavajeau

Fixing Prometheus namespace monitoring

Santiago Salazar Pavajeau — Wed, 17 Dec 2025 20:20:34 +0000

The Setup

I’m running a Kubernetes cluster with Prometheus Operator and a pretty standard discovery pattern:

ServiceMonitor objects
Namespace-based scrape selection
Grafana dashboards and Alertmanager rules downstream

The key piece is that Prometheus only scrapes namespaces with a specific label.

Here’s a simplified version of the ServiceMonitor:

apiVersion: monitoring.coreos.com/v1
kind: ServiceMonitor
metadata:
  name: app-servicemonitor
spec:
  selector:
    matchLabels:
      app: payments-api
  namespaceSelector:
    matchLabels:
      monitoring: enabled
  endpoints:
    - port: metrics
      interval: 30s

At this point, namespace labels are effectively part of the monitoring config.

Breaking It

For the exercise, I removed the monitoring=enabled label from the namespace.

Nothing crashed.

Pods kept running.

Metrics quietly disappeared.

Exactly the kind of failure that’s easy to miss.

Detecting What’s Wrong

First thing I checked was whether Prometheus itself was unhealthy:

kubectl get pods -n monitoring
kubectl logs prometheus-k8s-0 -n monitoring

Everything looked fine.

Next, I checked whether Prometheus was scraping anything from the namespace:

up{namespace="payments-prod"}

No results.

That tells me Prometheus isn’t scraping targets — not that the app is down.

Finding the Cause

Next step was checking the namespace itself:

kubectl get namespace payments-prod --show-labels

Output looked like this:

monitoring=disabled

Since the ServiceMonitor relies on:

namespaceSelector:
  matchLabels:
    monitoring: enabled

Prometheus was doing exactly what it was configured to do.

From Prometheus’ perspective, nothing was broken.

Fixing It

Restoring the label was enough:

kubectl label namespace payments-prod monitoring=enabled --overwrite

Metrics came back within a scrape interval.

Quick check to confirm freshness:

time() - timestamp(up{namespace="payments-prod"})

Everything was visible again.

Why This Is a Sneaky Failure

The interesting part of this exercise:

No alerts fired
Dashboards were empty, not red
Prometheus treats missing data as “nothing to evaluate”

If something real had broken during this window, I wouldn’t have known.

This is how you end up trusting “green” systems that you’re actually blind to.

Hardening Things Afterward

Alerting on Missing Metrics

I added an explicit alert to catch telemetry loss:

- alert: NamespaceMetricsMissing
  expr: absent(up{namespace="payments-prod"})
  for: 5m
  labels:
    severity: critical
  annotations:
    summary: "No metrics from payments-prod"
    description: "Prometheus is scraping zero targets in this namespace."

Silence should page you.

Network configuration on Linux

Santiago Salazar Pavajeau — Fri, 07 Jun 2024 18:25:55 +0000

This is how a network needs to be configured when spinning up a linux server. For example for a fresh install of a local lab on of linux virtual machines on VMware Fusion, Virtualbox or AWS, etc. These are some of the technical details that need to be verified and configured properly.

Host Address: The unique IP address of your system on the network.
Network Subnet Address: Defines the local network's range.
Default Router/Gateway: The device that routes traffic to other networks.
System Host Name: The name by which a system is identified on a network.
DNS Server Address: Used for resolving hostnames to IP addresses.

Network Configuration Files:

Linux systems use systemd-networkd service for network interface detection and configuration.
Different distributions have different files for network settings, such as:
- Debian-based: /etc/network/interfaces
- Red Hat-based: /etc/sysconfig/network-scripts directory
- OpenSUSE: /etc/sysconfig/network

Configuration Methods:

Manual Editing: Directly modify network configuration files.
Graphical Tools: Use distribution-provided GUI tools.
Command-Line Tools: Utilize terminal commands for configuration.

Examples:

File Configuration

For CentOs file /etc/sysconfig/network-scripts/ifcfg- (such as eth0 or enp3s0)

DEVICE=<interface_name>
TYPE=Ethernet
ONBOOT=yes
NM_CONTROLLED=yes
BOOTPROTO=static
IPADDR=192.168.1.100
NETMASK=255.255.255.0
GATEWAY=192.168.1.1
DNS1=8.8.8.8
DNS2=8.8.4.4

Command Line
There are multiple types of commands, most common are ifconfig, ip, nmcli.

ifconfig: it's legacy but commonly known.
nmcli: for simple network configurations.
ip: for advanced configurations, which could involve scripting and more complex scenarios.

ip command example:

# Set IP
>> ip addr add 192.168.1.100/24 dev <interface_name>

# Activate the interface device
>> ip link set <interface_name> up

# Set Default router
>> ip route add default via 192.168.1.1

# Set DNS (not included in ip commands, gotta write directly to file)

>> echo "nameserver 8.8.8.8" | sudo tee /etc/resolv.conf
>> echo "nameserver 8.8.4.4" | sudo tee -a /etc/resolv.conf

# ONBOOT=yes has to be set manually as well

nmcli command example

nmcli con mod "ConnectionName" ipv4.addresses 192.168.1.100/24
nmcli con mod "ConnectionName" ipv4.gateway 192.168.1.1
nmcli con mod "ConnectionName" ipv4.dns "8.8.8.8,8.8.4.4"
nmcli con mod "ConnectionName" ipv4.method manual
nmcli con mod "ConnectionName" connection.autoconnect yes

Simplest permutations

Santiago Salazar Pavajeau — Fri, 16 Apr 2021 11:23:19 +0000

This is a review of backtracking and putting this algorithm together in its simplest form, which is still complex with many different factors at play.

The complexity of backtracking starts with the arguments passed into the function. In its simplest form backtracking for permutations includes:

result // a result array of arrays

current // contains the current elements of each permutation

nums // the actual numbers to be permutated

With these three arguments for the backtracking callback we then either check if the current permutation elements are the same length as the nums array as the base case to exit.

Or loop through the nums array making sure there are unique elements on the current permutation candidate, to then add new elements to current from nums and then remove them as we exit the recursions.


var permute = function(nums) {
    let result = []
    backtracking(result, [], nums) 
    return result
};

const backtracking = (result, current, nums) => {
    if(current.length === nums.length){
        result.push([...current]) // add a copy of current
    }else{
        for(let i = 0; i <nums.length; i++){
            if(current.includes(nums[i])) continue // skip rest of loop 
            current.push(nums[i])
            backtracking(result, current, nums)
            current.pop()
        }
    }
}

Current permutations array

This array (current) will only store the elements if we define it in the local scope of backtracking, but also we have to create a new array in this case with the spread operator when we enter the base case.

Simple trapping rainwater

Santiago Salazar Pavajeau — Fri, 09 Apr 2021 10:24:23 +0000

This is a fast and simple solution for the trapping rainwater problem. We just use two pointers, for the start and end of the list. Then keep track of the highest columns so far from the start sMax and the end eMax.

        sMax = Math.max(sMax, height[str])
        eMax = Math.max(eMax, height[end])

Then, the pointer that is higher stays in its position, and the other moves.

        if(sMax < eMax){ // move start pointer
            water+= sMax - height[str++]
            // highest left yet, minus current 
        }else{ // move end pointer
            water+= eMax - height[end--]
            // highest right yet, minus current
        }

This allows calculating the water by subtracting the current height from the max height.


// [0,1,0,2,1,0,1,3,2,1,2,1] result: 6
// [4,2,0,3,2,5] result : 9

// calculate the water between the columns of height -> height[current]

const trapRainWater = (height) => {
    let str = 0, 
    end = height.length - 1, 
    water = 0, 
    sMax = 0, 
    eMax = 0;

    while(str<=end){
        sMax = Math.max(sMax, height[str])
        eMax = Math.max(eMax, height[end])

        if(sMax < eMax){ // move start pointer
            water+= sMax - height[str++]
            // highest left yet, minus current 
        }else{ // move end pointer
            water+= eMax - height[end--]
            // highest right yet, minus current
        }
    }
    return water
}

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, and check out my portfolio!.

DOM in the java spring framework

Santiago Salazar Pavajeau — Sat, 03 Apr 2021 07:39:59 +0000

Coming into the java spring framework I can't help but associate the concepts from javascript. In this case, it's the document object model (DOM) that has parallels for me.

Javascript pairs up with HTML to build the DOM we use on browsers.
Java pairs up with XML to also build a DOM in the creation of an app.

However, with javascript, the main use is to manipulate the DOM in order to make changes in the drawing of the browser web page.

But with java, the main use specific to the spring framework is to implement dependency injection and inversion of control.

//left out configration for readability
<beans ...>
     <bean id="store" class="com.santiago.springlab.Store">
        <property name="city" value="Viña"></property>
        <property name="state" value="Valpo"></property>
        <property name="zipCode" value="10000"></property>
    </bean>

    <bean id="prod1" class="com.santiago.springlab.Product" init-method="customInit" destroy-method="customDestroy">
        <property name="pid" value="1"></property>
        <property name="pname" value="cake"></property>
        <property name="store" ref="store"/> <!-- dependency by setter -->
    </bean>
</beans>

Here, this XML associates a Product class with a Store class through the object model, and Product now has access to the Store methods.

However, in the Java class definition, they are not explicitly associated.

//Product.java
package com.santiago.springlab;

public class Product {

    int pid;
    String pname;
    Store store;

    public Product (){
        System.out.println("PRODUCT CONSTRUCTED");
    }

    public Product(Store store) {
        this.store = store; // injection 
    }

    public Product(int pid, String pname, Store store) {
        super();
        this.pid = pid;
        this.pname = pname;
        this.store = store;
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public Store getStore() {
        return store;
    }

    public void setStore(Store store) {
        System.out.println("setter");
        this.store = store; // setter injection
    }

    public void customInit() {
        System.out.println("Custom initialized");
    }

    public void customDestroy() {
        System.out.println("Custom destroyed");
    }

    @Override
    public String toString() {
        return "Product [pid=" + pid + ", pname=" + pname + ", store=" + store + "]";
    }


}
// Store.java
package com.santiago.springlab;

public class Store {
    String city;
    String state;
    int zipCode;

    public Store() {

    }

    public Store(String city, String state, int zipCode) {
        super();
        this.city = city;
        this.state = state;
        this.zipCode = zipCode;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public int getZipCode() {
        return zipCode;
    }

    public void setZipCode(int zipCode) {
        this.zipCode = zipCode;
    }

    @Override
    public String toString() {
        return "Store [city=" + city + ", state=" + state + ", zipCode=" + zipCode + "]";
    }


}

So the 'DOM' or context in java can be manipulated with XML beans, just like we modify the 'DOM' with HTML and javascript.

In the end, it is the same tree data structure in both cases, but the uses are different.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, and check out my portfolio!.

Some simple tips for Combination Sum -Backtracking

Santiago Salazar Pavajeau — Fri, 26 Mar 2021 20:20:04 +0000

We are asked to find all the combinations that sum a target, from a list of integers. And in this case, the combinations can contain duplicates from the original list.

This type of problem is a common interview algorithm, but it might take some 'digestion' over time to get familiar with. Even though the code is short and relatively simple, the concepts behind it like depth-first search, stacks, recursion, and backtracking, are a lot of information to take in. So I will simplify some of the steps in the algorithm but by no means can explain all of these concepts in a short article.

Backtracking

The main steps to do a backtracking algorithm involve: making a recursive callback function which in this case is called combinations.

Then adding a base case to exit the recursion:

if(target === 0 )

And lastly doing a depth-first search:

for(let i = start; i < candidates.length; i++)

Then a temporary list stack considers each option:

stack.push(candidates[i])

Next, the current number being considered is subtracted from the target and passed into the recursion.

target - candidates[i]

And last we move on from that option:

stack.pop()

Needless to say, recursion callbacks are very complex to visualize step by step, but all these operations are 'stacked' on a 'waiting list' as the code runs line by line and then ran one by one as they are popped out of the runtime waiting list.


let combinationSum = (candidates, target) => {

    let result  = []
    candidates.sort((a,b) => a - b)

    combinations(candidates, target, [], result, 0)

    return result
};

let combinations = (candidates, target, stack, result, start) => {

    if(target < 0 ){
        return
    }else if(target === 0 ){
        console.log(stack)
        console.log(target)
        result.push([...stack])
        console.log(result)
    }else{
        for(let i = start; i < candidates.length; i++){
            stack.push(candidates[i])
            combinations(candidates, target - candidates[i], stack, result, i)
            stack.pop()
        }
    }
}

Scope

This is an interesting factor about these backtracking problems because we define the result array outside our combinations callback and it is modified inside the recursion scope and then returned as the answer back in the outer combinationSum scope.

However, the array that contains the inner list of combinations which I call stack in this case, has to be defined in the scope of the combinations recursive function and not in the outer combinationSum scope for it to properly store the values of the different recursions.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Easily test React-Redux with Cypress

Santiago Salazar Pavajeau — Fri, 19 Mar 2021 09:51:38 +0000

Cypress is a very visual Javascript testing framework that can do end-to-end, integration and unit tests. One of its cool features, is the ease of querying elements with the tool on the test browser, especially when using frameworks like Semantic UI, Bootstrap, etc. because UI components are pre-defined and it's harder to know the underlying HTML elements making up the components.

Quickly testing from the user's perspective

    it('New project modal form is controlled', () => {

        cy.get('.eight > .button')
          .click()

        cy.get(':nth-child(2) > .ui > input')
          .type('Test title')
          .should('have.value', 'Test title')

        cy.get('textarea')
          .type('Test description')
          .should('have.value', 'Test description')

        cy.get('#new-project')
          .click()
   })

Cypress will give you the selectors like: cy.get('.eight > .button') (from their browser testing select feature), which give access to the element from the DOM. In this case, it is an input element so we can .type something into the input, check the updated value it .should have, and finally .click() on the submit button.

Testing the store and the backend API

Cypress allows for end-to-end testing having access to asynchronous calls, and also the application environment. However, having access to our redux store can be a little tricky.

First, because this data is only meant to exist inside the React application, and making it available to an external environment like Cypress can be insecure.

...
export const store = createStore(reducer, 
  applyMiddleware(thunk)
  );

...

if (window.Cypress) {
  window.store = store
}
...

Second, if the application state updates asynchronously, this requires the tests to only run after the state has updated. Cypress has several ways to deal with this like only testing the DOM elements on the surface instead of the Redux store underneath or testing the backend with asynchronous requests tests.

But if we want to build an application starting from Redux, and focus on developing tests for the store we can use the cypress-pipe package, which helps Cypress wait to test the store when it's actually updated.

    it('Adds a new user', () => {
      cy.visit('/projects')
      cy.get('[href="#/new-project"]').click()
      cy.get(':nth-child(2) > .ui > input').type('Test Title')
      cy.get('textarea').type('Test Description')
      cy.get('[type="submit"]').click()

      cy.request(`${URL}people`)
        .then((response) => {
          expect(response.status).to.eq(200)
        })

      const getProjects = (window) => window.store.getState().projects

      cy.window().pipe(getProjects).should('have.length', 5)
    })

Here we make a test of a new project feature on the site. So the test types the title and description and then submits it. We can have access to the store through the window object on the Cypress browser environment and test our Redux state with the right timing.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Simple bit manipulation

Santiago Salazar Pavajeau — Thu, 11 Mar 2021 15:40:51 +0000

While looking at algorithms in the past, whenever I came across a bitwise operator like <<, >>, &, |, ^, I would think: "this is too complicated". However, with time learning is amazing because we can start accepting new concepts and they stop being unreachable.

Simply put these are some 'binary numbers'. As we move a 1 to the left the previous number multiplies by 2.

0001 is 1
0010 is 2
0011 is 3 // 3 is 2 and 1 combined
0100 is 4

To know why binary to regular numbers(decimal) converts like this in more depth check this out.

Taking these fundamentals into account operations with binaries or bit manipulation allows to make modifications or also to compare different numbers, and even also do the same with characters converted to binary.

So bitwise operators are similar to math operators or logical operators but they deal with binary numbers.

As a quick example of a bitwise operation if we do 2<<1 the result is 4. This is because the left shift << serves to move all 1 bits in a binary number to the left so:

2 which is 0010

moves left and becomes

4 which is 0100

So a left shift << 1 by one space, multiplies by two.

Same with the right shift >> 1 and it simply divides by two.

Now with the other operations & | ^ or ~. We are able to compare two binary numbers. And with this context a video like this might make more sense.

Mapping characters to Binary

So to achieve this we have to recall that letters have the corresponding number codes called ASCII codes. In javascript, we can get this code with the .charCodeAt() method.

For example, a lowercase 'a' has an ASCII code of 97 and a lowercase 'b' is 98.

Then a character can be mapped to a binary by moving a bit to correspond to an ASCII code.

let anumberOfLeftShifts = 'a'.charCodeAt(0) - 97 // returns 0 bc 97 - 97

let aInBinary = 1 << anumberOfLeftShifts
// => 0001

let bnumberOfLeftShifts = 'b'.charCodeAt(0) - 97 // returns 1 bc 98 - 97

let aInBinary = 1 << bnumberOfLeftShifts
// => 0010

So mapping a number and a character to binary is a different process but both ways allow to do bit manipulation.

As a quick example, we can see if two strings have the same letters.

let s1 = "hello"
let s2 = "loeh"

let s1Mask = 0
let s2Mask = 0

for(let i = 0;i<s1.length; i++){
 s1Mask = s1Mask | 1 << targetString[i].charCodeAt(0) - 97
// add each character to as a bit in corresponding position to mask
}

for(let i = 0;i<s2.length; i++){
 s2Mask = s2Mask | 1 << targetString[i].charCodeAt(0) - 97
// add each character to as a bit in corresponding position to mask
}

if(s1Mask & s2Mask === s1Mask){
 // compare masks to see if all bits match
 // by comparing the result of an AND bitwise operation
 // to the original mask
 console.log('strings have the same letters')
}

Here a list of what bitwise operators do in comparing bits:

& AND if they are the same returns same bit, if they are different returns 0
| OR if they are the same returns same bit, if they are different returns 1
^ XOR if they are the same returns 0, if they are different returns 1

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Letter combinations of phone number with a queue

Santiago Salazar Pavajeau — Thu, 04 Mar 2021 14:18:28 +0000

Here I try to break down and simplify an algorithm that can be solved iteratively with a queue (BFS) or recursively (DFS). Javascript has the simplicity of allowing any array to become a queue, but a LinkedList can also be used as a queue, which is how the algorithm is implemented in Java.

The quick overview of the algorithm is to consider every number in the digits array e.g. '23' and for each number combine the corresponding letters each keypad (abc and def) in this case would result in:

ad, ae, af, bd, be, bf, cd, ce, cf.

Photo by Charisse Kenion on Unsplash

The queue keeps track of the letters we have to combine (next) at the beginning and also stores the result of the combinations at the end (next + char).

The most challenging part of this algorithm is that it has three nested loops, but the first one iterates over the digits, the second one makes sure that all pending combinations in the queue are made, and the third one iterates over the letters of each number in the phone keypads.

const letterCombinations = (digits) => {
    if(digits.length === 0) return []

    let queue = []

    queue.push('')

    let mapping = {
        '2': 'abc',
        '3': 'def',
        '4': 'ghi',
        '5': 'jkl',
        '6': 'mno',
        '7': 'pqrs',
        '8': 'tuv',
        '9': 'wxyz'
    }

    for(let i = 0; i < digits.length; i++){ // digits '23'

        let currQL = queue.length

        while(currQL > 0){ // consider all elements in current queue
            console.log(currQL)
            // stay in the while loop until all pending items in queue have been processed

            console.log(i, queue[0])

            let next = queue.shift()

            console.log('next:', next )

            for(let char of mapping[digits[i]]){ // specific letters on phone number keypad

                console.log('char:', char )

                queue.push(next+char) // concatenate strings

            }
            currQL--

        }
    }
    return queue
};

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Traversing DOM nodes in JavaScript

Santiago Salazar Pavajeau — Fri, 26 Feb 2021 13:42:04 +0000

Here, I explore the underlying tree structure of the DOM, with a very simple example.

The DOM is literally a tree data structure of javascript objects as nodes. So HTML elements can be accessed as javascript objects with these properties and methods. A practical example is the following algorithm. When we get the top element in the body of the HTML document, for example:

const root = document.getElementById("root")

Then we can access and traverse the rest of the children nodes with a simple recursion algorithm.

function getByClassName(root, className) {

  let result = []
  result.push(root)
    let traverse = (node) => {
        let nodeCh = node.children


        for(let ch of nodeCh){


            if(ch.className === className){
                result.push(ch)
            }

            if(node.children[0]){ // only call recursion if
              traverse(ch)
            }
        }


    }

  traverse(root)

  return result
}

So the parent nodes which are javascript objects (key-value pairs) contain the .children property that contains all the children, as well as many other properties and methods.

This Tree data structure of nested javascript objects is the basis of DOM manipulation (HTML) and libraries like React use the same tree structure but with components to create the virtual DOM Tree. Of course, there are other complexities, but simply put, when we see HTML elements as nodes of the Tree, we can see how they can be traversed with recursion. Just like any other algorithm that uses nodes, and this is the bottom line of how HTML and javascript work together.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Using a heap to find the minimum cost to modify an array

Santiago Salazar Pavajeau — Mon, 22 Feb 2021 01:39:11 +0000

Javascript doesn't have a heap data structure like java does PriorityQueue so an external library or an own implementation is needed.

const minCost = (numbers) => {
    return Math.min(up(numbers, numbers.length), down(numbers, numbers.length))
}

const down = (numbers, length) => {
    let sum = 0
    let diff = 0

    let minQueue = new MinBinaryHeap()

    for(let i = 0; i < length; i++){
        // console.log(minQueue.getTop())
        if(!minQueue.isEmpty() && minQueue.getTop() <= numbers[i]){
            diff = numbers[i] - minQueue.getTop()
            sum += diff
            minQueue.getTopElementAndReorder()
            minQueue.insertElement(numbers[i])
        }
        minQueue.insertElement(numbers[i])
    }
    return sum
}

const up = (numbers, length) => {
    let sum = 0
    let diff = 0

    let maxQueue = new MaxBinaryHeap()

    for(let i = 0; i< length; i++){
        if(!maxQueue.isEmpty() && maxQueue.getTop() >= numbers[i]){
            diff = maxQueue.getTop() - numbers[i]
            sum += diff
            maxQueue.getTopElementAndReorder()
            maxQueue.insertElement(numbers[i])
        }
        maxQueue.insertElement(numbers[i])
    }
    return sum
}

This algorithm calculates the minimum amount of changes that are needed to make an array ascending or descending.

Each value in the array is added to the binary heap then if there is a larger or lower (correspondingly) number in the heap than the current value then the difference between the values is accumulated in the sum variable.

Using the heap allows for storing and retrieveing elements relatively fast and always in a sorted manner.

Here is my max binary heap and min binary heap priority queue implementation

Simple separation of concerns in JS Part 2

Santiago Salazar Pavajeau — Thu, 11 Feb 2021 13:25:58 +0000

This is an example of separation of concerns in an app with heavy use of the vanilla DOM manipulation and event handling methods like document.createElement, querySelector, and addEventListener. In JS there are several ways to approach modularity, like the major frameworks and libraries, but this is what worked for me in vanilla JS to take a step forward towards cleaner code in that continuous pursuit of improvement.

Mixed DOM Manipulation and Event Handling

This type of functions would be taking care of many tasks at the same time a simple example is:


function renderPlayButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`

    playButton.addEventListener("click", ()=> { // add event listener to button to play song

        updateNewSong()
        newSong.playSong()

    }) 
    trackBtns.appendChild(playButton)

}

However, in functions with more lines of code, mixing dom-manipulation and event handling creates low readability.

Separation of Concerns

DOM Manipulation Methods

I put all the methods in the app that use document.createElement in a file called DOMHelpers.js. A sample method would look like:

function createPlayButton(){
    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`
    return playButton
}

Event Handling Methods

The event handling methods would then become cleaner as we use the helpers that create dom elements from an external source.

function playButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = createPlayButton()

    playButton.addEventListener("click", ()=> {

        updateNewSong()
        newSong.playSong()

    })
    trackBtns.appendChild(playButton)

}

I think this is a simple but powerful pattern, and it is a great way to make code look cleaner in JS.

Take a look at the rest of the code here.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.