DEV Community: Daniel P-G

How to solve coding problems

Daniel P-G — Fri, 09 May 2025 23:24:06 +0000

One of the most important skills in programming and software development is problem solving. This is something that I've enjoyed learning more about over the years and that I feel will always be improving. However, as I continue trying to improve my skills on solving coding interview problems, I've decided to dedicate some time to the strategy and concepts of problem solving. Here we go!

The General Strategy

Most videos and articles I've come across seem to reference the approach outlined in the book "How To Solve It" by George Polya:

Understand the problem
Formulate a plan
Execute the plan
Look back (Review and Refine)

Let's look at these in detail.

Step 1. Understand the Problem

Read it multiple times and try to define any terms you don't fully understand, to the point that you should be able to teach the problem to someone else or at least be able to fully explain it in your own words. Additionally, here are some helpful points to keep in mind during this step:

What are the inputs and expected outputs?
Restate the problem in simple terms (ie. "I need to convert X into Y").
If you're having trouble understanding "how" the inputs are transformed manually walk through a test case.
During interviews ask lots of questions. This can help you catch any edge cases.

Step 2. Formulate a Plan

Using pseudocode write out each step that you'll take in detail. Don't worry about using any code language specific syntax during this stage since you're essentially "prototyping" your solution. Using plain every-day language focus on how you would convert the given data into the desired output. Separating the "planning/problem solving" part from the "coding" part helps you avoid mistakes and can even help when naming variables and functions later based on what that step of the plan is intended to do. Here are some additional tips to keep in mind:

Break down the problem into small steps
Make your own examples and even feel free to draw it out if needed.
If problem provides any constraints these can hint at what data structure or algorithm to use.
See if you can refine your pseudocode algorithm before moving on to the implementation step.

Step 3. Execute the Plan

Now it's time to implement your carefully crafted plan. Do so carefully and line-by-line; don't take any shortcuts. You can also test each line (ie. console.log'ing) as you implement it to ensure you're getting the desired results and avoid costly mistakes down the road. Alex Mitchell from Expert Beacon suggests "emphasizing correctness over efficiency and clarity over conciseness" during this stage. Make sure the core logic is right before optimizing.

Step 4. Look Back (Review and Refine)

At this point you've implemented an algorithm that solves the problem. But you're not done yet. Here's when you can go back and look for ways to optimize your solution:

Optimize for time/space complexity
Are there edge cases you might've missed?
Can you improve the code's readability?

BONUS 🤩: Build a Mental Map of Problems to Solutions

One of the most frequent suggestions I saw in multiple tutorials was to gradually begin building a mental, and even physical, catalog of problems you solve and their respective solutions. This will help you begin recognizing patterns when you encounter new problems. Both Colin Galen's tutorial and Sahil & Sarra's tutorial use a similar concepts from the book "Thinking Fast and Slow" by Daniel Kahneman to emphasize the importance of deliberate practice to build up pattern recognition. I've not read this book yet but both of the mentioned tutorials talk about the concept of building up your intuition, or "fast brain" like the book says, in a similar way to how you train an AI model:

Feed your fast brain a lot of coding problems.
Break down these problems into components that can help you predict patterns.
Develop your own library of components (ie. a spreadsheet) by solving more and more problems.

Real Example

Now it's time to apply our strategy to a real code problem and see if it works. I've chosen the problem titled "Decoding a Message" from Codewars.com which is relatively simple and will help illustrate the strategy in practice.

Step 1: Understanding the Problem

After reading the problem once I notice that we're given a string (our encoded message) and need to return a string (our decoded message). We're told that the letters of the given string are paired with the letter in the alphabet when the string is reversed (ie. "a" => "z", "b" => "y" etc). Our task is to write a function that will decode the message. Since we're told that each letter in our provided string "corresponds" to another letter of the alphabet in reverse, I automatically think of using a Map to store the corresponding letters and loop through the string checking each character for it's corresponding letter and building up a new decoded string that will be returned at the end.

Reading the problem a second time I begin to think whether there is a way to avoid building a map of the alphabet. Perhaps using ASCII codes? I'll need to do more research to learn how to do this but my thought is that I can write an equation that gets the current character's code and converts it to the corresponding code and then back to a character. This may be a clever solution but not as straight forward.

Reading the problem a third time I catch one important detail: we must remember spaces as we traverse our string. This makes sense since the string is a message but that means we'll need to add a check for whether each character is a letter or a space. We're also told that we don't have to worry about punctuation or capital letters but there's no mention about the length of the provided string. So we must add a check for an empty string and also account for a super long string and try to avoid unnecessary operations.

To summarize we need to convert each "letter" in a provided string like this:

"r slkv mlylwb wvxlwvh gsrh nvhhztv"

To a new string like this:

"i hope nobody decodes this message"

Step 2: Formulate a Plan

I decide to go with my first idea and create a map of each letter to it's corresponding "decoded" letter. Here's my pseudocode.

function decode(message) {
  // if 'message' is empty return
  // create a map of corresponding decoded letters {a: z, b: y}
  // create 'solution' empty string
  // for each 'char' in 'message' string
  // if 'char' is NOT a space
  // find corresponding char in decoded letters
  // add decoded letter to 'solution' string
  // return 'solution' string
}

I also came up with my own, very simple example to test each line of my plan before I move on to the implementation phase: wz y => da b.

Step 3: Execute the Plan

A few things I had to look-up when converting the plan to actual code:

Refresh my memory on using a JavaScript Map instead of an Object.
- There's likely an easier way to create this alphabet map.
How to check if a character is a space or a letter and found this solution:

function isLetter(character) {
  return character.match(/[a-z]/i);
}

I also discovered that I had an error in my pseudocode algorithm 😳 - I wasn't adding the spaces to the solution string. Thankfully I caught it before it was too late, but that should serve as a lesson to not rush into implementation and really review your pseudocode and refine it before moving on.

This was my working solution before revision:

function decode(message) {
  if (message.length < 1) return "";

  const decodedLetters = new Map();
  decodedLetters.set("a", "z");
  decodedLetters.set("b", "y");
  decodedLetters.set("c", "x");
  decodedLetters.set("d", "w");
  decodedLetters.set("e", "v");
  decodedLetters.set("f", "u");
  decodedLetters.set("g", "t");
  decodedLetters.set("h", "s");
  decodedLetters.set("i", "r");
  decodedLetters.set("j", "q");
  decodedLetters.set("k", "p");
  decodedLetters.set("l", "o");
  decodedLetters.set("m", "n");
  decodedLetters.set("n", "m");
  decodedLetters.set("o", "l");
  decodedLetters.set("p", "k");
  decodedLetters.set("q", "j");
  decodedLetters.set("r", "i");
  decodedLetters.set("s", "h");
  decodedLetters.set("t", "g");
  decodedLetters.set("u", "f");
  decodedLetters.set("v", "e");
  decodedLetters.set("w", "d");
  decodedLetters.set("x", "c");
  decodedLetters.set("y", "b");
  decodedLetters.set("z", "a");

  let solution = "";

  for (let i = 0; i < message.length; i++) {
    const char = message[i];
    let charToAdd = char;
    if (isLetter(char)) {
      charToAdd = decodedLetters.get(char);
    }

    solution += charToAdd;
  }

  return solution;
}

function isLetter(character) {
  return character.match(/[a-z]/i);
}

Step 4: Look Back (Review and Refine)

This is a super important step that gets often overlooked but it can provide the biggest learning opportunity. Looking back at my solution I can tell that it is not as efficient as it can be and that there are some improvements I can make in terms of readability. Here are some of the changes I made:

Renamed char to currentChar for readability.
Realized that my use of the Map could be replaced by:
- Creating a string of the alphabet
- Creating a reversed copy of that alphabet string
- Getting the index of the currentChar within the alphabet and then
- Looking up the corresponding value in the reversedAlphabet using the index from the previous step.
I also switched my solution string to an array because I realized that concatenating to a string within the loop would create a new string every time causing the time complexity of the algorithm to be O(n^2). However, with an array I can push new characters (O(1)) and then convert the array to a string using .join('') before returning it at the end of the function. Result: O(n) time complexity with O(n) space complexity for the output string. ✨

Here's my solution:

function decode(message) {
  if (message.length < 1) return "";

  const alphabet = "abcdefghijklmnopqrstuvwxyz";
  const reverseAlphabet = [...alphabet].reverse().join("");

  let solution = [];

  for (let i = 0; i < message.length; i++) {
    const currentChar = message[i];
    let charToAdd = currentChar;

    if (isLetter(currentChar)) {
      const indexOfCurrent = alphabet.indexOf(currentChar);
      const decodedLetter = reverseAlphabet[indexOfCurrent];
      charToAdd = decodedLetter;
    }

    solution.push(charToAdd);
  }
  return solution.join("");
}

function isLetter(character) {
  return character.match(/[a-z]/i);
}

Conclusion and Lessons Learned

I really enjoyed researching this topic and going through this exercise. Taking time to use a strategy when solving coding problems can be incredibly useful and provide both time saving benefits as well as opportunities to learn in an efficient way. Remember to not rush through each step since this can lead to time consuming errors. I hope you enjoyed this post and would love to hear your thoughts in the comments below. Thanks!

Is my YouTube channel idea too broad?

Daniel P-G — Mon, 13 Nov 2023 01:22:13 +0000

Hi all, I've been teaching myself Android development with Kotlin for some time recently started a YouTube channel to improve my learning by making tutorials, and to create a portfolio of videos to show potential employers. I've also become very interested in learning about other tools and techniques such as using Postman, Charles Proxy, Docker, Selenium, Raspberry Pi and Arduinos etc. If I expand range of videos to include some of the subjects above would that be confusing for viewers or too much variety?

Is it possible to do accessibility testing using Appium?

Daniel P-G — Mon, 24 Oct 2022 21:34:00 +0000

Hi all 👋, I would like to perform an general accessibility audit of the app that I’m testing using Appium. Is it possible for me to write a test that navigates to each screen of the app, scans the screen, and tells me things like any touch targets that are below 48px, contrast issues, missing content descriptions, etc.?

I was looking into Axe Core for WDIO but not sure if something like what I need exists for Appium to work with native or a hybrid app.

Thank you so much for your help! 🙂

Big O: Time Complexity of Algorithms with Kotlin examples

Daniel P-G — Wed, 07 Apr 2021 00:54:03 +0000

One of the most fundamental and important topics I've come across on my journey to become a better engineer and improve my ability to write good scalable code is the subject of Big O. And while there are certainly many excellent resources online that provide great explanations and examples, I wanted to take this opportunity to create a simple reference using Kotlin to give myself some practice as well as help others who might also find this useful.

What is Big O notation?

The Fireship.io YouTube channels is one of my favorites to follow, and while it doesn't specifically focus on Android or Kotlin, it does provide concise and helpful explanations. This is probably one of the best and simplest explanations of Big O that I've seen.

As you saw in Jeff Delaney's video, Big O notation is...

"A way to describe how well an algorithm performs as its input size grows."

Additionally, Jeff's video above explains that Big O can be used to measure both "time complexity" and "space complexity" of an algorithm. However, for this article I'm going to focus specifically on time complexity (the amount of time that an algorithm takes to perform) and I'll leave space complexity for a separate article.

How do you calculate the Big O of an algorithm?

This awesome article by Maxwell Harvey Croy provides the following five steps:

Break up the algorithm/function into individual operations
Calculate the Big O of each operation
Add up the Big O of each operation together
Remove the constants
Find the highest order term — this will be what we consider the Big O of our algorithm/function

Let's combine this with an excellent video from Gayle Laakmann McDowell, author of Cracking The Coding Interview, that provides a great visual explanation along with several helpful tips and guidelines to use when performing Big O calculations.

In the video Gayle mentions these four helpful guidelines to calculate the time complexity of an algorithm and I've added Kotlin examples for each below.

1. Different steps get added

// O(a + b) - Different steps get added
val sweets = listOf("🍩", "🍭", "🍫")
val veggies = listOf("🍅", "🥦", "🥕")

fun printFoods(list1: List<String>, list2: List<String>) {
    list1.forEach { println( it ) } // O(a)
    list2.forEach { println( it ) } // O(b)
}

2. Drop constants

// Drop constants
val numbers = listOf(1, 2, 3, 4, 5)
fun findMinAndMax(list: List<Int>): List<Int> {
    val min = list.minOrNull() ?: 0 // O(n)
    val max = list.maxOrNull() ?: 0 // O(n)
    return listOf(min, max)
}
// O(2n) gets simplified to O(n)

3. Different inputs? Use different variables to represent them

// O(a * b) - Different inputs = Use different variables
val bugsA = listOf("🐝", "🐛", "🦋", "🐞")
val bugsB = listOf("🪲", "🪰", "🐞", "🦗")

fun similarBugs(groupA: List<String>, groupB: List<String>): Int {
    var count = 0
    groupA.forEach { bugA -> // O(a)
        groupB.forEach { bugB -> // O(b)
            if (bugA == bugB) {
                println(bugA)
                count++
            }
        }
    }
    return count
}

4. Drop non-dominant terms

// Drop non-dominant terms
val numbers = listOf(1, 2, 3, 4, 5)

fun crazyFunction(list: List<Int>) {
    // Step 1: O(n)
    val max = list.maxOrNull() ?: 0
    println(max)

    // Step 2: O(n^2)
    list.forEach { num1 -> 
        list.forEach { num2 -> 
            println("$num1, $num2")
        }
    }
}
// O(n + n^2) gets simplified to O(n^2) which is the dominant term

Basic Examples in Kotlin

While doing research for the best definitions and examples I gathered inspiration from these two articles:

O(1) - Constant Time

The runtime of the algorithm is always the same, no matter the input size. In the example below the size of the characters array does not matter as we will always be returning the first element from it.

// O(1) - Constant Time

val characters = arrayOf("donkey kong", "zelda", "mario", "pac-man")
fun firstInLine(line: Array<String>): String {
    return line[0]
}

O(n) - Linear

The runtime of the algorithm is directly proportional to the size of the inputs. In the example below the size of the desserts array determines the run time of the algorithm since we'll need to iterate through each element within it.

// O(n) - Linear Time Complexity

val desserts = arrayOf("cinnamon", "cinnamon roll", "flan")
fun contains(array: Array<String>, myFavorite: String) {
    array.forEach {
      if (it == myFavorite) println("Yas! $it is my fave!")
    }
 }

O(log n) - Logarithmic

The runtime of the algorithm is directly proportionally to the logarithm of the input size (most often the algorithm runtime will drop by half of it's input size). (Side note: If you're like me and need a quick refresher on logarithms check out this video 🤓).

// O(log n) - Logarithmic
fun halfToZero(input: Int) {
    var i = input
    var operations = 0
    while (i > 0) {
        i /= 2
        println("i is now = $i")
        operations++
    }
    println("$operations total operations")
}

halfToZero(40) // 6 total operations
halfToZero(400) // 9 total operations
halfToZero(4000) // 12 total operations

O(n log (n)) - Log Linear

As mentioned in the article by Moducode above Log Linear is a cobination of both linear and logarithmic time. This means that "every instance of n must be processed in a log n algorithm".

// O(n log n) - Log Linear
val numbers1 = listOf(1, 2, 3, 4, 5)
val numbers2 = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
val numbers3 = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)

fun logLinear(input: List<Int>) {
    var operations = 0
    for (item in input) {
        var i = item
        while (i > 0) {
            i /= 2
            println("i is now = $i")
            operations++
        }
    }
    println("$operations total operations")
}

logLinear(numbers1) // 11 total operations
logLinear(numbers2) // 29 total operations
logLinear(numbers3) // 45 total operations

O(n^2) - Quadratic

The runtime of the algorithm is directly proportional to the square of the size of the inputs. For this example we compare all elements within the array with all elements, thus squaring the number of inputs.

// O(n^2) - Quadratic Time Complexity

val numbers = arrayOf(1, 2, 3, 4, 5)
fun printPairs(collection: Array<Int>) {
    collection.forEach { num1 ->
        collection.forEach { num2 ->
            println("$num1, $num2")
        }
    }
}

O(2^n) - Exponential

The runtime of the algorithm doubles 😵 with each addition to the input data set. This excellent article also provides the example below as well as a visual representation of the call stack for this algorithm.

// O(2^n) - Exponential
fun fibonacci(number: Int): Int {
    return if (number < 1) {
        number
    } else {
        fibonacci(number - 1) + fibonacci(number - 2)
    }
}

O(n!) - Factorial

The runtime grows in proportion to the product of all numbers included. This one definitely deserves it's own article. However, for reference, one of the most commonly mentioned problems that runs in O(n!) is the Traveling Salesman problem and I found this neat repo by Thomas Nield that uses multiple algorithms to solve it 🤩.

Thank you for reading and I hope you found these examples useful. Additionally, if you notice any mistakes or information you feel I should add please leave me a comment. I welcome any feedback as it helps me learn.

Software Architecture vs Design: Takeaways from my research

Daniel P-G — Wed, 24 Mar 2021 21:27:33 +0000

Photo by Patrick Baum on Unsplash

Since the beginning of my coding journey, I've heard terms such as MVC and MVVM, associated with the words "architecture" and "design pattern". In trying to get a deeper understanding of these I decided to go in search of a definition for software architecture and had difficulty finding a clear answer. With that said, I'd like to walk you through my research as well as my perspective from a beginner's mind.

// Detect dark theme var iframe = document.getElementById('tweet-1374489560164438018-763'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1374489560164438018&theme=dark" }

I first found a great YouTube channel called A Dev Story which offers the great playlist below covering software architecture fundamentals. It provided a great general overview of the process of defining the architecture of a project based on its requirements, scalability, maintainability, and performance.

After watching this playlist, I learned that with software architecture you:

"Focus on the main structure rather than the implementation details"
"Anticipate expensive choices"
"Make explicit the core concepts that allow the software to have high quality"

Ok so now I understood architecture a bit more, but needed to know how it differed from software design, and how patterns like MVVM came into the picture. I continued my search and found a great architecture guide by a name I'd seen in a few books on the desks of fellow developers: Martin Fowler. Now I was getting somewhere! This guide provided great context for how to think about architecture and its importance. Take a look at Fowler's speech from OSCON 2015.

In his speech Fowler uses the following quote to define software architecture:

“The important stuff (whatever that is).” - Ralph Johnson

Great! I think I get it now! Software architecture seems to be about agreeing on the things that will be difficult to change later. But again how does that differ from software design or "design patterns" even? Going deeper down the rabbit hole I landed on this very thorough and interesting article. Here's a paragraph that stood out to me:

Software architecture shows the system’s structure and hides the implementation details, focusing on how the system components interact with one another. Software design, on the other hand, concentrates on the system’s implementation, often delving into considerable detail. Software design centers on the selection of algorithms and data structures, as well as the implementation details of every single component.
As expected, the concerns of software design and architecture tend to overlap. But instead of losing energy on defining rules for distinguishing them, it’s smarter to treat them as two parts of one process.

Bingo! The two concepts overlap in some areas and they're "two parts of one process." This was starting to make more sense now. I was still looking to connect one last piece of the puzzle: design patterns. I'd recently purchased a copy of Head First Design Patterns by Eric Freeman and Elisabeth Robson (I have the older edition but here's a link to the new one)and had already taken the LinkedIn Learning Course by the authors of the book. I haven't finished reading the book yet, but I did find a mention of the Model-View-Controller pattern in a chapter titled "Compound Patterns".

Towards the end of the book (pg. 604 if you're interested) MVC is also referred to as an "application pattern." I see. So these Model-View-XYZ patterns can be described as both "architecture" or "design" patterns and are used to solve common problems when building applications. Sweet! Additionally, since one of my goals with this process is to learn more about Android architecture patterns specifically, I decided to add that as my search term and found another great article with a more specific definition.

Architecture patterns are established designs and ways of structuring an application in order to minimize bugs, make code easier to read, understand, and test.

Lastly while writing this post I found this neat page which gave me the encouraging feeling that I was not alone in my original confusion of this topic 😆.

Conclusion

Alright, this is the moment you've probably been waiting for. No pressure right. Let's take a look at the original questions I had.

What is Software Architecture?
How does it differ from Software Design?
Where do patterns like MVVM and MVI come into the picture?

My conclusion is this: Software architecture is about the big picture, and foundational structure of an application. Moreover it pertains on the things that must be decided and agreed upon early in the development process to make software more maintainable, scalable, performant, and avoid a costly, difficult, and time consuming restructuring later on. Software design is closely related but gets more specific about the implementation or "how" you will actually solve the architecture requirements. And patterns like MVVM and MVI are compound pattern solutions to be used to solve application architecture and design problems.

Do you agree? Did I miss anything? Please let me know in the comments. I definitely think I have a long road ahead before I can be like Neo and see/understand the full Matrix but I have a lot more clarity now. Thank you for reading!

What is State in programming?

Daniel P-G — Mon, 01 Mar 2021 22:36:03 +0000

I often hear the term "state" being used when describing objects in a program, or even programs entirely, and decided to do a bit of research to get some clarity. I found a few helpful articles and videos (see bottom of post) which brought me to the following conclusion: The concept of State in programming refers to the value of all variables that determine the status or condition of the program or object in question. With this in mind I came up with the following analogy of a coffee maker (somehow most things in my life revolve around coffee ☕️). So in the image below, the coffee maker's state is "power = on" and "status = brewing". Also important to note that state can change based on both internal or external events, such as the user turning off the coffee maker, or it finishing the brewing process.

What's your strategy for learning through online courses?

Daniel P-G — Sat, 25 Jul 2020 04:01:37 +0000

While taking online coding tutorials, I often find that I have to rewatch the video more than once to fully grasp the material. I also rarely feel ready/confident to apply the material after following a set of instructions with the provided "starter code" and so my strategy has been to rebuild the provided app from scratch. But that also means that I take 2-3 times longer completing courses. Is there a better way? Hit me up with your best tips 😀

An important lesson for learning to code

Daniel P-G — Fri, 24 Jul 2020 22:24:13 +0000

Cover photo by Kelly Sikkema on Unsplash

This is something that I've been told by several people in different ways over the years. However, it took some time for me to fully understand it until I began applying the concept myself: learn by doing.

As many of my friends and mentors would put it…

“Build a lot of stuff!”

“Work on a personal project as you learn.”

“If you're not applying what you're learning, it almost doesn't matter because you’ll soon forget it.”

Yes, it's absolutely true that different learning styles exist. I personally tend to lean towards the “visual” learning style. But when it comes to fully learning something in a way that you can then use it I believe it is also necessary to actually apply what you learn as quickly as possible. This process forces you to not just remember what you were trying to learn but also see it take shape as you use the knowledge, which I feel further reinforces the memory in your brain.

I've also seen proof of this concept, in regards to programming, in many areas. Here are a few of my favorites for inspiration:

“180 websites in 180 days” by Jennifer Dewalt

“Learning in Public” by Tania Rascia

“Lil Software” by Jordan Singer

It is because of this that I've taken on a new approach to learning; whether it's coding or anything else. If I'm doing coding tutorials I don't just follow along or use the provided code as is. Instead I try to build the tutorial app from scratch and add new features or make a different version using the same concepts. Here are a few Android apps I've built through this process:

I've also begun using this method of applying what I learn as I go in other areas with great success. I recently read a fantastic book, called The Art of Explanation by Lee Lefever, and made a presentation to my team at work on how we could improve our processes with better explanations. It not only helped me internalize the concepts from the book but it felt great to be able to share them with others.

As a final note, I shall leave you with this awesome video and quote from Kevin Gisi’s YouTube channel CheersKevin where he says:

“Don’t learn to program. That’s like learning how to saw or > how to glue or how to hammer. Solve cool problems and make > cool things.”
— Kevin Gisi

How do I create a UICollectionView with standard layout programmatically in Swift 4?

Daniel P-G — Tue, 19 Feb 2019 17:31:37 +0000

Hello all!

I'm pretty new to iOS development and have been mostly working with Interface Builder. However, I've recently started learning how to create UI elements programmatically but I'm have found very few tutorials on doing things without IB.

I was able to piece together the code at the bottom of this post using YouTube tutorials but, while it compiles and runs, I have a few questions about how things work and why:

1) I noticed that the collection view is declared using this format:


let myCollectionView: UICollectionView = {}()

After reading the Properties page of Swift.org the format looks similar to a computed property. Is that right? Why are there parentheses after the brackets? Are we "calling" the collection view or instantiating it?

2) Is UICollectionViewFlowLayout used when one does not need a custom layout for the collection view? Meaning, is this the "default" layout? And do you always "have" to define a layout object for all collection views?

3) What does frame: .zero mean in the line let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)?

4) How do I add elements, such as a title, within a collection view cell?

Any advice or guidance is greatly appreciated! 😀


import UIKit

class FirstVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(collectionView)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(UICollectionViewCell.self, 
        forCellWithReuseIdentifier: "cell")
        setupCollectionConstraints()
    }

    let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .lightGray
        return cv
    }()

    func setupCollectionConstraints() {
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        collectionView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        collectionView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        collectionView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 2
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .white
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 250, height: 100)
    }

}