DEV Community: Ashley D

kotlin vs java- the very basics

Ashley D — Sun, 09 Feb 2025 06:16:36 +0000

A few months after bootcamp wrapped up for me, the class attended a career fair, and a few weeks later, I learned I’d be joining a primarily backend team that works in Kotlin. Since Kotlin was a new language to me, I decided to explore Kotlin fundamentals through Codecademy 📚.

With less than 3 weeks until the start of the internship ⏳, I was initially worried I wouldn’t be able to learn it all in time 😰. But as I went through the intro course, I began to see parallels with Java ☕️—which we explored at a high level in the bootcamp.

In this post, I’ll share some beginner-friendly insights into how Kotlin compares to Java, focusing on syntactical and practical differences and similarities that stood out to me 🔍.

✍️ Syntax

Variable Declaration
No Primitive Types
String Interpolation
Null Safety
When vs Switch

💿 Functions

Defining Function
Handling Void
Lambda Expressions

💻 Misc

Collections
Class Constructors & init

Syntax

Variable Declaration

Java Approach

In Java, variables must be explicitly typed, meaning you have to specify the type of data the variable will hold when you declare it. For example:

int age = 25;
String name = "John";

If you want to make a variable immutable (i.e., its value cannot change after it's set), you can use the final keyword:

final int age = 25; // Immutable

Kotlin Approach

In Kotlin, you don't have to explicitly declare the type in most cases. The compiler automatically infers the type based on the assigned value.
Also, instead of using final, Kotlin uses val for immutable variables and var for mutable variables.
For example:

val age = 25 // Immutable
var name = "John" // Mutable

The type inference reduces redundancy, making your code more concise and readable.
However, you can still explicitly define the type if needed, especially when the type is not immediately clear from the value.

val newUser: Person = Person("John", 25)

In this example, the type of newUser is explicitly declared as Person, making it clear what type the variable will hold.

No Primitive Types

Java Approach

In Java, there are primitive types like int, double, and boolean, which are not objects. But Java also provides wrapper classes for each primitive type (e.g., Integer, Double, Boolean) that allow you to treat them as objects:

int num = 10;
List<Integer> numbers = new ArrayList<>();

Kotlin Approach

Kotlin treats everything as an object, including types that would be primitive in Java. This allows for consistent type system, making it easier to work with different kinds of variables without needing to distinguish between primitive types and objects. For example:

val num: Int = 10

String Interpolation

Java Approach

In Java, string concatenation requires the + operator, which can get messy, especially when you need to include variables in strings:

String greeting = "Hello, " + name + "!";

Kotlin Approach

Kotlin simplifies string manipulation by allowing string interpolation which can make the code more readable and concise.
This means you can directly embed variables inside strings using ${} for more complex expressions, or $ for simple variable interpolation:

val greeting = "Hello, $name!"
println("You have ${items.size} items in your cart.")

Null Safety

Java Approach

In Java, if you try to call a method on a null object, you'll get a NullPointerException. This is one of the most common runtime errors in Java:

String name = null;
System.out.println(name.length()); // Throws NullPointerException

Kotlin Approach

Kotlin introduces a safer way to handle nulls. By explicitly declaring whether a variable can be null, you reduce the risk of NullPointerExceptions. You can use the ? aka elvis operator to perform safe calls, which won't crash your program even if the variable is null:

var name: String? = null // Must handle null explicitly
println(name?.length) // Safe call, prints null instead of crashing

The String? type means that the variable name can hold a String or it can be null.
- By using the ? operator (known as the "safe call operator"), you are telling Kotlin, "Check if name is not null before accessing its length property." If name is null, it won’t throw a NullPointerException; instead, it will return null.
So in this case, println(name?.length) will safely print null instead of crashing the program.

`when` vs `switch`

Java Approach

In Java, the switch statement is commonly used to check a variable against multiple possible values. However, it requires multiple case labels and break statements to prevent "fall-through”; that means - after each case- there must be a break statement.

// let’s pretend it’s Monday
switch (day) {

    case "Monday":

        System.out.println("Start of the week");

        // No break statement here, so it "falls through"

    case "Friday":

        System.out.println("Weekend is near");

        break;

    default:

        System.out.println("A regular day");

}

Kotlin Approach

Kotlin's when expression prevents fall-through by design. Once a condition matches, it automatically stops execution without needing a break. This makes Kotlin's when expression more predictable and less error-prone, as there's no chance of accidentally executing multiple cases.

when (day) {
    "Monday" -> println("Start of the week")
    "Friday" -> println("Weekend is near")
    else -> println("A regular day")
}

Functions

Defining Function

In Java, you need to define functions with a return type, parameters, and an explicit return statement if the function has a return value:

public int addNumbers(int a, int b) {
    return a + b;
}

Kotlin Approach

In Kotlin, defining functions is more concise. You can specify the types of the parameters and the return type explicitly, just like Java, but Kotlin allows you to simplify the function body.

fun multiplyNumbers(a: Int, b: Int): Int {
    val result = a * b
    if (result > 100) {
        println("Result is large")
    }
    return result
}

fun is used to declare a function in Kotlin, followed by the function name (addNumbers).
You define the types of the parameters (a: Int, b: Int) and the return type (: Int) just like in Java. This keeps the function strongly typed, ensuring type safety.

If the function body contains only one expression aka single expression, you can omit the return keyword and simply use the expression after the = sign, making the function shorter and easier to read.

fun addNumbers(a: Int, b: Int): Int = a + b

Handling Void

Java Approach

In Java, if a function doesn't return anything, it is defined as void:

public void printMessage(String message) {
    System.out.println(message);
}

Kotlin Approach

In Kotlin, functions that don't return a value return Unit (which is similar to Java's void). You don't need to explicitly declare it in the function signature:

fun printMessage(message: String) {
    println(message)
}

Lambda Expressions

Java Approach

Java uses streams and lambda expressions to handle functions concisely. However, the syntax can still feel bulky:

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);
List<Integer> evenNumbers = numbers.stream()
    .filter(n -> n % 2 == 0)
    .collect(Collectors.toList());

Kotlin Approach

Kotlin simplifies lambda expressions by making them shorter and easier to read. The curly braces {} define the lambda block, and it is an implicit name used for the single parameter passed to the lambda:

val numbers = listOf(1, 2, 3, 4, 5)
val evenNumbers = numbers.filter { it % 2 == 0 }
println(evenNumbers) // Output: [2, 4]

In this example, filter { it % 2 == 0 } is a lambda expression that filters out the even numbers from the list. The it keyword refers to each element number that we're iterating over.

Misc

Collections

Collections are used to store multiple items in one variable. A list is a common type of collection that holds an ordered set of items, like a shopping list or a list of names.

Java Approach

In Java, you typically use ArrayList to work with collections of items. You need to manually specify whether the list is mutable or immutable, and you also need the new keyword to create the list:

ArrayList<String> fruits = new ArrayList<>();
fruits.add("Apple");
fruits.add("Banana");

Kotlin Approach

In Kotlin, you can create immutable and mutable lists more easily. The listOf creates an immutable list by default, while mutableListOf creates a mutable list.
Also, you don't need the new keyword, making list initialization simpler. Kotlin automatically initializes the list with the elements you provide with listOf:

val fruits = listOf("Apple", "Banana") // Immutable
val mutableFruits = mutableListOf("Apple")
mutableFruits.add("Banana")

Class Constructors & init

A class is like a blueprint for creating objects. It defines what properties (variables) and actions (methods) the objects created from it will have. The constructor is a special function that runs when the class is used to create an object, and it initializes the object's properties.

Java Approach

In Java, creating a class with properties involves more boilerplate code. Here, the Person class has two properties: name and age, which are set through a constructor. The constructor is a special method that takes the name and age values when a new Person object is created:

public class Person {
    private String name; // Property for name
    private int age; // Property for age

    // Constructor that sets the name and calculates age when the object is created
    public Person(String name, int birthYear) {
        this.name = name; // Initializes the name property
        int currentYear = 2024;
        this.age = currentYear - birthYear; // Calculates age based on birth year
        System.out.println("Age calculated: " + age);
    }

    // Main method to create a new Person object
    public static void main(String[] args) {
        Person person = new Person("John", 1990);  // Constructor is called to initialize the object
        // The age is automatically calculated in the constructor based on birthYear
    }
}

In this Java example:

The Person class has a constructor that takes name and birthYear as parameters.
The age is calculated within the constructor, similar to the init block in Kotlin, and is printed as part of the initialization process.
When a new Person object is created, the constructor automatically runs to initialize the object's properties and calculate the age.

Kotlin Approach

Kotlin simplifies class constructors with its primary constructor --- allowing the parameters to be directly included in the class definition. This reduces the need for a separate constructor method and makes the code more concise:

class Person(val name: String, val age: Int)

In this Kotlin example, Person is a class with two properties (name and age) declared directly in the class. These properties are automatically initialized when an object of Person is created.

Kotlin also offers a special feature called the init block. The init block runs automatically when an object is instantiated, and it allows for additional setup or property initialization. You don't need to call it explicitly---it just runs when the object is created.

For example, the Person class in Kotlin can also use an init block for initialization:

class Person(val name: String, val birthYear: Int) {
    var age: Int = 0

    // The init block is used to initialize properties or perform setup tasks
    init {
        val currentYear = 2024
        age = currentYear - birthYear
        println("Age calculated: $age")
    }
}

fun main() {
    val person = Person("John", 1990)  // Init block runs automatically
}

In this Kotlin example:

The Person class has a primary constructor with name and birthYear parameters.
The init block calculates the age based on the birthYear and prints the result.
When the object is created, the init block automatically runs to handle the initialization.

2024: retro.filter(experiences => share(experiences))

Ashley D — Sun, 02 Feb 2025 05:14:50 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

await fetch("example.com/api/opportunity")

For years, I faced rejection after rejection in my journey to enter tech. Like an async function, I kept running with no clear return value. But I kept going, not wanting to write my return statement prematurely and giving up. I found outlets to use and build upon my love of tech: training new hires on product and troubleshooting, contributing to tech projects like improving bug tracking and process enhancements, and more.

Finally, after all that waiting and uncertainty, the call came through—my opportunity was returned. ⏳. In 2024, I was accepted to a one year technical program which included a 4 month bootcamp, project phase, followed by an internship 🚀.

public void StartBootcamp() {

Joining the technical program was a dream come true after years of closed doors 🚪. However, as I’m not one to celebrate, - I was more-so my typical nervous self, fearful that I might not keep up with the program or fail to meet expectations. The first few weeks were filled with uncertainty 😟, but as time went on, I began to embrace the learning process. 📚

Overcoming imposter syndrome:
Early on, I struggled with imposter syndrome, especially when I saw classmates compiling concepts more quickly. However, my curiosity and willingness to ask questions helped me push through.
Embracing the challenge:
Initially, I saw bugs as barriers 🐞 especially when it meant being stuck on homework in the morning with the deadline ticking closer each second ⏰, but over time, I realized they were opportunities to learn and grow. I joked that I was a bug magnet 🧲. I found that a lot of my learning came from bugs and debugging 🔧.

After each project, I documented my retrospectives in GitHub READMEs, sharing bugs I encountered and how I resolved them. This process helped me reflect on my learnings and share insights with the community 🧑‍🤝‍🧑. I posted some of my retros on bugs encountered to dev.to too (example) as I wanted to normalize that failures and mistakes are just as much of a win when we approach them as a way to grow from. 🌱

I also wrote about these experiences on dev.to to help future students navigating similar careers transitions and bootcamps to emotionally navigate

git diff: expectations vs reality

As the program progressed, I worried it would become incrementally harder, like an O(n) curve on a Big O graph 📈. I discovered that while the daily challenges were daunting, my hunger to learn kept me engaged. I especially found it interesting to dive into the “how” and “why” 🤔, and exploring the mechanics of programming fascinated me 🤖.

let interest = “frontend”:
I started the program with a strong interest in front-end design 🎨, influenced by my creative outlets in dancing and singing. One of the first bootcamp projects, I used my prior experience I face with barriers to get jobs to create a frontend mockup of a "refer-All" (referral) website. As I dived deeper into backend work, I found a passion for building APIs and understanding the logic behind the code ⚙️.
interest = “fullstack”:
Reflecting on my capstone project, which focused on aggregating crowdsourced accessibility data 🗺️,, I found joy in creating meaningful insights through API and endpoint creation. 🌐 The program curriculum opened my eyes to the beauty of backend work, and I found myself falling in love with it. Towards the end, I found an interest in fullstack - especially enjoying building the endpoints to process and send data, and thinking through the logic of how to render that data on the frontend- akin to choreographing steps in a tango 🕺 💃.

while (newKnowledge) {shareKnowledge++;}

Throughout my journey, I made it a priority to share my knowledge and contribute to the community 🌍. Teaching and helping others is something that fills me, and writing things out helps me marinate and reinforce my own learnings 🧑‍🍳.

Writing Beginner-Friendly Articles:
I wanted to make learning code fun and accessible to beginners. 💕 This stemmed from my own struggles in bootcamp- noting a lack of beginner-friendly resources, and I am beyond grateful for the dev.to to allow me to share these articles publicly ✍️.
For instance, I explained Big O notation through a story of sorting laundry🗄️. I even created a humorous article of SQL joins as a couple moving in 🏠.
Collaboration and Teamwork:
Whether helping with backend issues or discussing complex topics like Spring Boot, I worked with my classmates by sharing tips and tricks on Slack, and creating resources like cheat sheets to make learning easier for everyone. Some of these cheat sheets were also shared publicly of dev.to to help the wider community.
Teachbacks:
I recorded teachbacks to better understand complex topics 🎥, talking through my thought process while having the code in front of me 👨‍💻. Sharing these teachbacks with my cohorts helped others grasp difficult concepts, such as connecting frontend and backend. Additionally, having a library of teachbacks allows me to reference them in the future, making the learning process more effective.

refactoring my post-bootcamp learnings

When bootcamp ended, instead of treating it as a breather after a marathon of a bootcamp- my first thought? Printing my 500+ pages of notes at Staples and reviewing them. I feared my brain would stream API and .filter() everything I’d learned if I didn’t immediately go back and study.

Without the structure of office hours and classes, I proactively took it upon myself to work on some passion projects. Through this, I saw how I learn best hands-on, and doing these projects helped me refactor my understanding, retaining high-level concepts and improving my approach to learning.

Slack API project: After overhearing another mentor’s painpoint for having to manually screenshot and share channels he belongs in to new hires, I built endpoints for the Slack API to allow users to fetch that list instead. While I initially impatiently tried to jump right into coding, a few unsuccessful attempts taught me the importance of reading the documentation 📄 first. I ended up sharing a more beginner-friendly version of it as a blog post 📝.
Portfolio Development: I continued my growth by building out my portfolio, challenging myself to build it full-stack. Deploying it was daunting, but the discomfort allowed me to learn about using PSQL to populate my database 💾, integrating environmental variables, Dockerizing my app 🐳, and migrating Postgres to Heroku. As there was no beginner-friendly resource on deploying backend, I published my learnings on dev.to to help others who may be looking to do the same.
Google Maps Calculator: I helped the Google Maps volunteer community 🗺️ by creating a tool that calculates customized plans to reach their points goal 📈. This project not only benefited the community but also helped me solidify my understanding of React, making concepts click in ways they hadn’t during bootcamp.

where my linked list node .next points toward

Looking back, 2024 has been a year of immense growth—both professionally and personally. I’ve learned that setbacks are part of the journey, and each challenge is an opportunity to grow stronger. I’ve embraced every bug 🦋, every failure 🚧, and every success 🏆 as part of a larger process of self-discovery.

After navigating through the twists and turns of my journey, the .next pointer in my career path led me to an internship in software development. What started as a series of small, incremental steps now feels like a well-defined path. Just like a linked list that’s constantly evolving, I’m continually learning, growing, and adding new skills to my next phase as I dive deeper into the world of tech.

Looking ahead, I know that the road ahead won’t be without its challenges, but with the skills I’ve gained and the mindset I’ve developed in 2024 —I’m ready to take on whatever comes my way. Just like a well-optimized linked list, each new node in my journey will connect me to even more opportunities to learn and grow. 💖

surviving coding bootcamp: project planning

Ashley D — Sun, 15 Dec 2024 05:43:11 +0000

Coding projects are a central part of bootcamp life, but let’s be real—when you first get that project brief, the wave of panic can be real. You’ve just learned the concepts, and now you’re expected to apply them in a limited timeframe. It’s easy to feel overwhelmed, freeze up, or even procrastinate- and I’ve experienced all those feelings. 💕👨‍💻

Here are some strategies that helped me get started and stay on track during my bootcamp projects:

I’ll include examples too of how I applied them in bootcamp’s social media site backend project and in my capstone project.

Start Small: Beat Procrastination by Taking the First Step
Plan with Diagrams
Don’t Over-Plan
Think About User Experience (Not Just CRUD)
Work on Frontend and Backend Together

1. Start Small: Beat Procrastination by Taking the First Step

When a project feels like an insurmountable task, break it down. Start with something simple:

Read through the project requirements carefully.
Highlight key points, make notes, and write down any questions you might have for your instructor. Clearing up confusion early on saves you from headaches later.
Create a checklist.
Write down the tasks you need to accomplish. A checklist transforms the project from a big, overwhelming blob into tangible, manageable steps. Plus, checking off items as you go gives a sense of accomplishment and momentum.

Here is an example of a checklist I made when working on my bootcamp’s social media site backend project:

2. Plan with Diagrams

Before diving into the code, spend some time planning your application’s structure.

Use an ERD diagram for your backend. When building out the social media site, for example, I used an Entity-Relationship Diagram (ERD) to map out entities like User, Post, and Tag. I defined their attributes (content, likes, etc.) and relationships (e.g., “one user can have many posts”).

This visual roadmap made it much easier to understand how the pieces fit together:

Draw your frontend layout. For frontend planning, tools like Excalidraw or AutoDraw are great for sketching your app’s UI. For example, before building out a login page, sketch out where the input fields, buttons, and error messages will go. Having this visual guide saves you from getting lost in your code later.

Below is an example of a wireframe I made for my capstone to represent the search page:

3. Don’t Over-Plan

Planning is critical, but bootcamp projects are short- typically a week— so limit your planning to a day. Also, aim to save at least half a day at the end for final touches, bug fixes, and polish.

And while it might be tempting to tweak things the night before, resist the urge to make big changes at the last minute. It’s easy to accidentally introduce bugs, and you’ll want that time to focus on debugging, testing, and presentation prep.

4. Think About User Experience (Not Just CRUD)

When designing your backend, don’t just focus on CRUD (Create, Read, Update, Delete) operations for each entity. Think about the user experience and build your endpoints accordingly.

For example:

In my social media project, users had associated addresses. It didn’t make sense to create a separate delete operation for an address since deleting a user should also delete their associated address.
I also realized that users might want to search posts by keywords, so I added a GET /search?keyword=... endpoint to fetch relevant posts.

Designing with the frontend user in mind not only enhances your app’s functionality but also shows a deeper understanding of real-world application needs.

You can use a Google Sheet to brainstorm those frontend user actions and endpoints. Below is a snippet of what that looked like for my backend social media project:

5. Work on Frontend and Backend Together

The capstone project is your biggest challenge— and your biggest opportunity, and it is when you will typically get to do a full-stack project.

I found it helpful to build the frontend and backend in tandem, focusing on one section at a time.

Here’s how I approached my capstone project, an accessibility app where users could crowdsource and search for accessible locations:

“Break” your app into features- for mine, that was login, user profile, search, and contribute pages.
Start with a single feature, like the login page.
Build the backend for the feature first: create endpoints, test them with Postman, and confirm they work locally.
Then, move to the frontend for that feature: integrate the endpoints and ensure the feature functions as intended.

By working one section at a time, you create “completed” parts of the app. Even if you run out of time, you’ll have fully functional features to showcase, reducing anxiety when it’s time to present your project.

By taking small steps, visualizing your app, and working methodically, you can make coding projects more approachable—and even enjoyable. Whether you’re building a backend with ERD diagrams or sketching your UI, I hope these strategies help you stay organized, make progress, and finish strong.🤗💕

surviving coding bootcamp: lessons learned

Ashley D — Mon, 28 Oct 2024 06:35:09 +0000

This year, I turned a fresh new page in my book after 10 years of client-facing work, diving into the world of tech at General Assembly’s coding bootcamp. It’s been a rollercoaster—one with plenty of code, coffee, and moments of self-doubt. Yet, every bug and roadblock has turned into an opportunity for growth. Now, as I reflect on my bootcamp experience, I want to humbly share a few lessons I gained from my journey to anyone embarking on this wild ride.

Emotionally Navigating Bootcamp: Building Resilience and Community
Mastering Homework: Strategic Approaches for Success
Working with a Mentor: Maximizing Support and Growth

Emotionally Navigating Bootcamp: Building Resilience and Community

Bootcamp is intense. It’s fast-paced and packed with new concepts, and it can feel overwhelming, especially if you’re new to coding.

Anecdote:
I was really hard on myself at first. I’m a late bloomer in my career and life, and prior rejections built up a low self-image. I worried I would get kicked out of the bootcamp after a month. When I saw classmates rapidly mastering concepts, I felt behind— especially the day I struggled to get flexbox figured out. My project looked like a melted egg during show-and-tell.

I was beyond stressed and even cried at times, often unable to celebrate my own progress and only seeing my shortcomings. I wouldn’t take weekends or evenings off, which led to a mini episode of burnout in the first month. As time went on in the bootcamp, I became stronger and found ways to reframe my thinking.

Tips:
Here’s what I learned about navigating the emotional ups and downs:

Embrace Vulnerability ❤️: Don’t be afraid to speak up if you need more time with assignments or to ask questions during class. Communicating openly with instructors not only helps you but can also benefit others in your cohort. I found that sharing my struggles (rather than hiding them) allowed me to make the most of the support offered.

Celebrate Your Journey 🎉: When it feels tough, remember how far you’ve come. Think back to Day 1 and recognize your progress. It’s easy to get caught up in the challenges, but give yourself grace and take a moment to celebrate the wins, big or small. We all learn at different paces and have varied experience levels, so there’s no need to compare yourself to others.

Use Accommodations 💻: Have your instructor take advantage of tools like Live Share during code-alongs. This collaborative feature allows you to see your instructor's screen in real-time, follow their code steps, and ask questions as they go.

Take Breaks 🌼: Sometimes, the best debugging tool is a break. Walk away, listen to music, or even grab a snack. A fresh mind often leads to breakthroughs and also prevents burnout.

Mastering Homework: Strategic Approaches for Success

Homework is where bootcamp concepts really start to sink in, but it can feel daunting.

Anecdote:
I learned this the hard way during the first few weeks. I felt overwhelmed by all the information being thrown at me and often experienced anxiety trying to process it all. For our first major assignment— a website due over the weekend after the first week of onboarding and classes—I waited until Monday evening to start. I spent Monday organizing my notes and making sure I fully understood everything, but by that night, I was freaking out.

I also remember how, in those first few weeks, when we had homework hour right after class, I often felt too overwhelmed to start. I wanted to understand everything and solve all the bonus questions too, which led me to go down rabbit holes. It would have been better to take small steps early on rather than waiting until the last minute and feeling anxious at night.

Tips:
Here’s how I learned to tackle assignments efficiently:

Start Early 🕒: If class ends early, dive into your homework. Starting promptly allows you to chip away at the assignment without last-minute stress, giving you the mental space to absorb what you’re learning.
Build the Foundation 🔧: Begin by setting up your development environment and creating any basic files or structures you’ll need. Laying out the skeleton files helps you get organized and ready to focus on the code itself.
Ask for Clarification 👨‍🏫: Use class time to ask questions about anything unclear. I found that understanding the core concepts before I left class made homework much more manageable.
Master the Basics 📚: Spend time solidifying foundational concepts. Focus on the underlying principles instead of memorizing syntax! Strengthening your basics will make advanced concepts easier as you move forward.
Leverage AI Tools 🤖: Use AI-powered platforms or chatbots to help you debug your code or clarify concepts you're struggling with. These tools can provide instant feedback, or explain complex topics in a more digestible way, enhancing your learning experience and helping you become more independent in problem-solving.
Seek Help Strategically 🆘: Work through problems on your own for 30-45 minutes before reaching out. This self-driven exploration is crucial for developing problem-solving skills. If you’re still stuck, ask classmates, instructors, or mentors for guidance, making it a collaborative learning experience.
Engage in Homework Review Sessions 🔄: These sessions are not only for clarifying any confusing parts of the homework but also for gaining new insights from instructors’ feedback. Don’t hesitate to ask questions during these reviews— understanding the “why” behind an answer can be transformative.

Working with a Mentor: Maximizing Support and Growth

Mentorship can be a lifeline in bootcamp.

Anecdote:
I remember feeling really nervous around my mentor at first, worried he’d think my questions were silly while I tried to impress him. However, midway through my apprenticeship, I realized that being more human and open improved our relationship. I started sharing consistent updates on what I was learning and working on, and during each meeting, I clearly communicated what I wanted to focus on and what I was having difficulties with. I approached our discussions with a collaborative mindset, saying, “let’s solve this together.”

Tips:
Here’s how I built a supportive relationship with my mentor and made the most of our sessions:

Establish a Consistent Meeting Schedule 📅: Regular meetings (weekly or bi-weekly) can be incredibly beneficial, especially if you’re juggling multiple projects or feel stuck. Don’t hesitate to reach out for additional meetings when needed, particularly during urgent project deadlines or if there is a week of complex concepts.
Prepare an Agenda 📋: Coming to each session with a list of specific questions and topics ensures you make the most of your time together. If possible, send code snippets or key issues ahead of time to help your mentor prepare.
Be Open About Challenges 🤝: Mentors aren’t just there to help with code. Share your struggles, celebrate your successes, and be honest about what’s tough. This transparency strengthens your connection and allows your mentor to provide tailored guidance.
Share Your Understanding 💬: During your meetings, take time to explain concepts or solutions you think you understand. Your mentor can provide feedback, correct misunderstandings, and deepen your grasp of the material.
Document Solutions 📝: Take notes on what you cover with your mentor, including any resources or solutions shared. These notes are invaluable for review and can help you navigate similar problems down the road.
Build a Connection Beyond Code 🌟: Get to know your mentor on a personal level. Whether it’s discussing their interests or sharing your own, this human connection fosters a supportive environment where learning feels collaborative, not just technical.

Final Thoughts: Embrace the Journey

Bootcamp isn’t easy. You’ll encounter bugs, setbacks, and times when you doubt yourself, but each challenge is a stepping stone. So take it all in stride, ask for help when you need it, and remember to enjoy the process.

In the end, bootcamp isn’t just about learning to code; it’s about discovering your resilience, embracing your curiosity, and finding joy in the journey. Happy coding! 💕

seeing react through java lens

Ashley D — Mon, 21 Oct 2024 07:05:07 +0000

In our coding bootcamp, as we speedran through React and sweated through our labs, our instructor would say - "If you squint, React is a lot like Java."

At first, it was just a catchy and funny phrase. 🤣 However, most recently, I revisited React while working on a personal Google Map calculator project. Days deep into it, I could start to see some of those similarities come to light.

Let’s dive into these connections and see how the foundational concepts of Java can illuminate our understanding of React. 💕

App.jsx as the Java main Class (psvm)
State Management with Hooks as Java Getters and Setters
Containers as Java Classes
Components as Java Methods
React’s Return in Components
Props as Java Method Parameters
Callback Functions as Java Methods that Return Values

1. App.jsx as the Java main Class (psvm)

Java:

In Java, the main class serves as the entry point for the program, and it initiates the execution of the program.

For instance, you might instantiate objects of different classes and invoke their respective methods:

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

React:

Similarly, in a React application, the App.jsx file plays a comparable role by orchestrating the main application flow.

Just as the main method in Java can call multiple functions, App.jsx is responsible for rendering all the components based on the application's routing and current state.

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

In the above React example from App.jsx, the components rendered in the return statement mirror the process of calling methods or initializing objects in Java.

In this case, the containers <Welcome /> and <Home /> pages are rendered based on the web page URL path.

2. State Management with Hooks as Java Getters and Setters

Java:
In Java, you manage properties with variables and public getter/setter methods to get and set properties of attributes, such as a user's username.

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

React:

React’s useState hooks handle application state similarly to how Java uses getter and setter methods to manage object properties.

The useState hook in React allows you to declare state variables that can change over time, much like Java's instance variables in a class.

const [username, setUsername] = useState("");

In the example above:

setUserName serves as the setter method, allowing updates to the username. While useState("") means username is initialized as an empty string, the setUserName updates the value.

Below we have a function handleInputChange that detects a change in a web form to update user info and updates the value of username to what the user inputs.

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

You can think of accessing username as a getter.

Whenever you reference username in a component, you are effectively using a getter to access its value. For example, my webpage could render the username by:

  <p>Welcome to our page {username}</p>

3. Containers as Java Classes

Java:
In Java, classes group related tasks and data together. They help manage how information flows in your application.

In this example, the Calculator class handles calculations and stores the result.

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

React:

Similarly, in React, containers play a key role by connecting the application's data to the components. They handle things like fetching data from API calls and managing the app's state.

In this example, the Calculator container manages the state of the input value and the result,

const Calculator = () => {
  // State variables to hold input value and the calculation result
  const [inputValue, setInputValue] = useState(0);
  const [result, setResult] = useState(0);

  // Function to calculate the sum of two numbers
  const calculateSum = (a, b) => {
    setResult(a + b); // Update result state with sum
  };

  return (
    <div>
      {/* Pass the calculateSum function to the ManualFilter component */}
      <ManualFilter onCalculate={calculateSum} />
      <h2>Result: {result}</h2> {/* Display result of the calculation */}
    </div>
  );
};

export default Calculator;

4. Components as Java Methods

Java:

Methods in Java perform specific actions, such as handling user input. These methods can be invoked as needed to facilitate various functionalities in your application.

public void handleCheckboxChange(String category) {
    // Logic to handle checkbox change
}

React:

Just like Java methods are small, focused tasks, React Components serve a similar purpose, acting as the fundamental building blocks of your user interface.

Each component is crafted for a specific functionality and can be reused throughout the application.

The ManualFilter component below is solely focused on filtering options for users. It presents checkboxes that allow users to select specific categories.

This component can then be called within a UserForm container page.

const ManualFilter = ({ onCategoryChange }) => {
  const [selectedCategories, setSelectedCategories] = useState([]);

  const handleCheckboxChange = (category) => {
    setSelectedCategories((prev) =>
      prev.includes(category) ? prev.filter((cat) => cat !== category) : [...prev, category]
    );
    onCategoryChange(category);
  };

  return (
    <div>
      {/* Render checklist */}
      {['Category1', 'Category2', ...].map((cat) => (
        <label key={cat}>
          <input
            type="checkbox"
            checked={selectedCategories.includes(cat)}
            onChange={() => handleCheckboxChange(cat)}
          />
          {cat}
        </label>
      ))}
    </div>
  );
};

export default ManualFilter;

5. React’s Return in Components

Java:

In Java, a method might return a value that another part of the program uses to generate output.

For example, the renderOutput method returns a string containing the user's goal, which can then be displayed elsewhere in the program.

public String renderOutput() {
    return "User Goal: " + userGoal;
}

React:

The return statement in React components is crucial for rendering the user interface. In React, what you return from a component dictates what the user sees on the screen.

This is similar to how as aforementioned, a method in Java that returns data intended for processing or display in another part of the program.

In this example, the UserGoal component returns a paragraph element that displays the user's goal.

const UserGoal = ({ goal }) => {
    return <p>User Goal: {goal}</p>;
};

6. Props as Java Method Parameters

Java:

You can passing arguments to a Java method, where the arguments can affect the state or behavior of the calling object.

For example, consider a simple Java method that takes a message as a parameter. The message it receives will affect what the console will show.

public void displayMessage(String message) {
    System.out.println(message);
}

React:

In React, components can receive props, which are similar to parameters in Java methods. React components use props to determine their content and functionality.

Props control how components behave and what data they display.

Let's say we have a parent component called WelcomePage that will pass a message to the MessageDisplay child component.

In other words, imagine a MessageDisplay as a section on the WelcomePage landing page where a message shows.

We can define a message in the parent component and pass it as a prop to the MessageDisplay component:

const WelcomePage = () => {
    const greetingMessage = "Hello, welcome to my app!"; // Define a message to pass

    return (
        <div>
            <h1>Main Application</h1>
            {/* Pass the greetingMessage as a prop to MessageDisplay */}
            <MessageDisplay message={greetingMessage} />
        </div>
    );
};
export default WelcomePage;

The MessageDisplay component will receive this prop and render it:

const MessageDisplay = ({ message }) => {
    return <h1>{message}</h1>;
};

7. Callback Functions as Java Methods that Return Values

Java:

In Java, you often have methods within classes that perform specific actions and return values to their caller. For example, you might have a class named Calculator with a method that calculates the difference between two numbers:

public int calculateDifference(int a, int b) {
    return a - b; // This method returns the result of the calculation to the caller
}

^In another class you create an instance of the Calculator class and call that method.

React:

React follows a similar concept, but it focuses on the relationship between components.

When you have a parent component that contains child components, callback functions help facilitate communication between them. (Remember: parent is a main container that holds the other components - similar to our earlier example of a parent "landing page" with a sub-component of a message box)

For instance, let’s say you have a ChildComponent that needs to send some calculated data back to its parent component.

Below we pass the handleCalculationResult function from the parent to the child as a prop.

This function acts like a callback:

// Parent component
const ResultsPage = () => {
  const [calculationResult, setCalculationResult] = useState(null); // State to store the calculation result

  const handleCalculationResult = (result) => {
    setCalculationResult(result); // Update state with the result from the child
  };

  return (
    <div>
       <ChildComponent onCalculate={handleCalculationResult} />
       <h2>Calculation Result: {calculationResult}</h2>
      )}
    </div>
  );
};

You can see below how onCalculate is a callback function received in the ChildComponent from the parent component.

When the button in ChildComponent is clicked, it performs the calculation and uses onCalculate to send the result back to the parent. This mimics how Java methods return values to their callers.

const ChildComponent = ({ onCalculate }) => {
  const handleCalculate = () => {
    const result = 5 - 3; // Example calculation
    onCalculate(result); // Calls the parent function, sending back the calculated result
  };

  return <button onClick={handleCalculate}>Calculate</button>; // Button triggers the calculation
};

In this way, the parent manages the overall application state and behavior while the child focuses on a specific action (in this case, the calculation).

sql joins: moving in together

Ashley D — Tue, 01 Oct 2024 06:17:05 +0000

In our coding bootcamp, as we breezed past SQL week, one of the topics that was harder to grasp was that of joins. When I looked at the fifth Venn diagram representation on a Google Image search in an attempt to better to visualize the concept then, it was then that I pictured a couple moving in and how that ties into SQL joins. 💖🏠💕

When a couple decides to move in together, the things they bring into their shared space represent how data from two tables (the guy and girl) merge through different types of SQL joins. The "love" they have for certain items (data) determines what ends up in the shared house.

Let's start off with a visual of these two tables between John and Emily (a hypothetical couple), and what they each love.

Main Tables: The Guy and the Girl

Guy Table (John's Interests)

Guy	GuyLove
John	Movies
John	Music
John	Sports

Girl Table (Emily's Interests)

Girl	GirlLove
Emily	Movies
Emily	Music
Emily	Books

Inner Join: The Love Match
Left Join: The Bossy Guy
Right Join: The Bossy Girl
Full Join: The Cantankerous Couple

Inner Join: The Love Match

When a couple shares mutual love for the same things, only those items make it into the house. If either doesn't love something, it stays out.

Analogy: They both only move in items they both love.

*SQL Code: *

SELECT * 
FROM guy 
INNER JOIN girl 
ON guy.GuyLove = girl.GirlLove;

Result Table:

Guy	GuyLove	Girl	GirlLove
John	Movies	Emily	Movies
John	Music	Emily	Music

Explanation:
An inner join finds the "love match" between the guy and girl, meaning it only brings in records where there’s a common interest between both. In our case, John and Emily both love movies and music, so only those shared loves end up in the house.

Left Join: The Bossy Guy

In this case, the guy is bossy. He brings all of his stuff into the house, even if the girl doesn’t love it.

Analogy: The guy brings all his stuff when they move in together, regardless of whether the girl loves it or not.

*SQL Code: *

SELECT * 
FROM guy 
LEFT JOIN girl 
ON guy.GuyLove = girl.GirlLove;

Result Table:

Guy	GuyLove	Girl	GirlLove
John	Movies	Emily	Movies
John	Music	Emily	Music
John	Sports	NULL	NULL

Explanation:
A left join returns all records from the guy’s table (left table aka first table specified in FROM), regardless of whether there’s a match in the girl’s table (right table). So, even though John’s love for sports doesn’t match any of Emily’s interests, it still shows up in the final result.

While John has an interest in "Sports," Emily does not share that interest, so there’s no matching value- hence we see a NULL for her in that record.

Right Join: The Bossy Girl

Here, the roles are reversed. The girl is the bossy one, and she brings all of her stuff into the house regardless of the guy's feelings.

Analogy: The girl brings all her stuff into the house, whether or not the guy loves it.

*SQL Code: *

SELECT * 
FROM guy 
RIGHT JOIN girl 
ON guy.GuyLove = girl.GirlLove;

Result Table:

Guy	GuyLove	Girl	GirlLove
John	Movies	Emily	Movies
John	Music	Emily	Music
NULL	NULL	Emily	Books

Explanation:
A right join prioritizes the girl’s table, meaning all of her interests get included, even if they don’t match with the guy’s interests. In this case, John and Emily share a love for movies and music so that record shows up in both.

However, since John does not love shopping, it appears as a new record with NULL values for John's columns, indicating he has no interest in it.

Full Join: The Cantankerous Couple

In this scenario, both the guy and girl are very stubborn and bossy. They each bring everything they love into the house, whether or not the other person loves it. No compromise here!

Analogy: They both bring all their stuff into the house, regardless of whether the other loves it or not.

*SQL Code: *

SELECT * 
FROM guy 
FULL OUTER JOIN girl 
ON guy.GuyLove = girl.GirlLove;

Result Table:

Guy	GuyLove	Girl	GirlLove
John	Movies	Emily	Movies
John	Music	Emily	Music
John	Sports	NULL	NULL
NULL	NULL	Emily	Books

Explanation:
In this full join example, we see that John brings in his love for sports, while Emily brings her love for books. The NULL values in the Girl and GirlLove columns indicate that there were no corresponding entries in John’s interests for these loves, and vice versa.

This full join captures all the items from both tables, showing how both John and Emily fill the house with their loves, whether shared or not.

using slack api to retrieve data

Ashley D — Thu, 22 Aug 2024 05:51:24 +0000

Disclaimer: This article provides a high-level overview of interacting with the Slack API from the perspective of a beginner who recently finished her 4-month bootcamp. The insights shared here are based on a mini-project and aim to guide those new to how to work with existing API- in this case Slack API integration. 🧡

Introduction

Recently, I overheard two of the mentors in my technical apprenticeship program conversing about what Slack channels we should join once we transition into a formal technical role, and they mentioned how there is no easy way to export Slack channels you are in to share with others.

As such, I embarked on a mini-project (repo) to build a Spring Boot application that could:

Retrieve both private and public Slack channels that a user is a member of, along with their details. This is super useful for onboarding new team members, giving them a comprehensive view of relevant channels.
Create a Slack command that new hires can use to quickly join essential public channels.

This project marked my first foray into data retrieval with an existing API, and as a beginner, I initially felt quite overwhelmed by where to start. However, after gaining some high-level insights and a better understanding of how to approach API documentation, I wanted to humbly share my learnings with the community. 🤗

Topics I Learned:

Slack API Library in Java
Token Management
OAuth Scopes
Jsoup Library
limit Parameter
.build() Builder Pattern
Leveraging API Documentation

1. Slack API Library in Java

The Slack API library for Java is a powerful tool that allows developers to interact with Slack's platform programmatically. This means you can write Java code to perform actions on Slack, such as sending messages, retrieving channel information, managing users, and much more.

The Slack API library has several methods. In this project, I specifically used the conversations.list method provided by the Slack API. This method is designed to fetch a list of channels within a Slack workspace that a user is a part of.
Here's a simple example of how you can import the Slack API library in Java to list channels:

import com.slack.api.Slack;
import com.slack.api.methods.SlackApiException;
import com.slack.api.methods.request.conversations.ConversationsListRequest;
import com.slack.api.methods.response.conversations.ConversationsListResponse;

import java.io.IOException;

public class SlackChannelLister {
// code here

2. Token Management

In the context of APIs, a token is a piece of information used to authenticate and authorize your requests. For Slack, this token allows your application to access and interact with Slack's data and functionalities, such as retrieving channel information.

To get your Slack API token, follow these steps:

Create a Slack App: Go to the Slack API Apps page and click "Create New App."
Install the App: Install the app to your workspace to generate a token. This token is what you’ll use to authenticate API requests.
Store the Token Securely: For security reasons, avoid hardcoding your token directly into your code. Instead, use environment variables to manage sensitive information.

^ In IntelliJ, you can access that setting from the Run menu and select Edit Configurations.
Then in your Java code, you can use this line of code so that your application can read the environmental variable value at runtime.
String token = System.getenv("SLACK_TOKEN");

3. OAuth Scopes

Now that you have your token, it needs the appropriate permissions, or "scopes," attached to it.

Think of OAuth scopes as the permissions your app requests when it needs to interact with Slack API. These scopes specify exactly what your app is allowed to do within a Slack workspace:
You'll need to specify these scopes in the app configuration:

Navigate to Your App's Settings: Go to your app's dashboard on the Slack API website.
Select "OAuth & Permissions": Here, you'll see a list of scopes you can add.
Add Required Scopes: It's a best practice to grant only the necessary permissions required for your app's functionality. As such, include the following scopes:

channels:read: Allows your app to read information about public channels that you are in .
groups:read:Allows your app to read information about private channels that are in.

4. Jsoup Library

Jsoup is a versatile Java library designed for working with real-world HTML. Using Jsoup ensures that any HTML content retrieved from APIs or user input is sanitized.
In the context of this project, Jsoup was used to clean and parse the "purpose" field of Slack channels. Sometimes, the purpose or topic of a channel may contain HTML tags or entities, and we want to extract just the plain text for display or processing purposes.

Here's an example how Jsoup can be utilized to clean HTML content:

import org.jsoup.Jsoup;
public class JsoupExample {
String htmlPurpose = "<p>Welcome to the <strong>development</strong> channel!</p>";`
    ….     
 // Parsing and cleaning the HTML content
String cleanedText = Jsoup.parse(htmlPurpose).text();

 System.out.println("Cleaned Up Purpose: " + cleanText);
 // Output: Cleaned Up Purpose: Welcome to the development channel!
    }
}

Jsoup.parse(htmlPurpose): Parses the HTML string into a Jsoup Document object.
.text(): Extracts the plain text from the parsed HTML, stripping away all HTML tags.

6. `limit` Parameter

When working with APIs that return lists of data, such as channels or messages, it's common to control how much data is retrieved in a single request. This is because fetching too much data in a single request can slow down your application and consume unnecessary resources.

The limit parameter serves this exact purpose by specifying the maximum number of items to return.

ConversationsListRequest request = ConversationsListRequest.builder()
        .limit(200)
        .build();

When dealing with larger datasets, you can also implement pagination by fetching data in chunks. You retrieve a set number of items per request and can request additional pages as needed.

A cursor is a pointer provided by Slack to fetch the next set of results. If there's more data, Slack provides a next_cursor value. You can use this next_cursor to make subsequent requests and continue retrieving data until you have processed the entire dataset. This method ensures that you handle large volumes of data efficiently without overwhelming your application or the API, and this also addresses rate limit issues.

7. `.build()` Builder Pattern

The .build() method is a fundamental part of the Builder Pattern in software design. This pattern provides a flexible and readable way to construct complex objects step by step.

In the context of Slack API requests, the builder pattern simplifies the creation of request objects, as you can see in the example below. This way we don’t have to write several lines and calling .set.

ConversationsListRequest request = ConversationsListRequest.builder()
        .token(System.getenv("SLACK_TOKEN")) 
        .types(Arrays.asList(ConversationType.PUBLIC_CHANNEL, ConversationType.PRIVATE_CHANNEL))
        .limit(100)
        .build();

ConversationsListRequest.builder(): Initializes a new builder instance for creating a ConversationsListRequest object.
token(...): Sets the authentication token for the request.
types(...): Specifies the types of conversations to retrieve (public and private channels in this case).
limit(...): Sets the maximum number of channels to return.
.build(): Finalizes the construction and returns a fully configured ConversationsListRequest object ready to be used.

8. Leveraging API Documentation

API documentation is your comprehensive guide to understanding and effectively using an API. At first I wanted to take a shortcut and just check chatGPT, however that resulted in many rabbit holes of doing things the wrong way. Making sure you read the API documentation is key, as it offers the most up-to-date user guide, Here are a few highlights I found most helpful from Slack's API documentation.

Sample Code: The documentation provides starter code for interacting with their API endpoints in various languages such as Java, JavaScript, and Python. You can find this code on the sample code tab, which is a handy resource for getting started with your project.
Detailed Method Descriptions: Understand what each API method does, required parameters, and expected responses.
Sample Tester: The Slack API tester helps show how JSON responses from the API are formatted. You can see the exact structure of the data returned. This immediate feedback helps ensure your API requests are properly configured and your token is functioning as expected.

data structures analogies cheat sheet

Ashley D — Fri, 09 Aug 2024 22:05:41 +0000

Data structures are like eating utensils, each serving its purpose. Would you use a fork or a spoon to eat soup? Would you use a cup or a plate to drink a Long Island Iced Tea after a long day of debugging? Here’s a look at various data structures through the lens of familiar objects, focusing on their efficiency for lookup, insertion, and order maintenance.

*Disclaimer
This list is simply meant to be a high level overview of some of the data structures.
Any images as well are also just high level visual representations as well.

Main Structures

Arrays: The Shoe Shelf
Linked List: The Rollercoaster
Binary Search Tree (BST): The Gossip Chain
HashMap: The Vending Machine
HashSet: The Gym Check-In

Additional Structures

Queue: The Carnival Line
Heap (Priority Queue): The Disney Fast-Pass
Stack: The Pancake Stack

Main Structures

Arrays: The Shoe Shelf

Analogy: Imagine a 5-shoe shelf that only fits 5 pairs of shoes. You can quickly access any shoe by its position.

Order: ✅ Yes - ordered when the array is initialized. The elements are in the order they were added.

Look Up: 🆗 Time: O(n) (linear) if unsorted; ✅ Time: O(log n) If the array is sorted, you can use binary search for faster look-ups, where you quickly narrow down your search by repeatedly cutting the list in half. This makes finding an item much quicker than checking each one by one.

Insert: 🆗 Space: O(n) (linear) - Resizing involves allocating memory for a new array and copying over elements. (We can’t insert to the original array as arrays are immutable in Java.)

Source: CoderMantra

Linked List: The Rollercoaster

Analogy: A rollercoaster with a head car pointing to the next car in line. The first car connects to the next car which connects to the next.

Order: ✅ Yes - ordered in the sequence nodes are added. Each node points to the next one in the list.

Look Up: 🆗 Time: O(n) (linear) - You need to traverse all the nodes to find an element.

Insert: ✅ Time: O(1) (constant) - It only takes two operations to insert: it requires initializing a new node and adjusting its pointer ✅ Space: O(1) (constant) - Only one new node is created for insertion.

Binary Search Tree (BST): The Gossip Chain

Analogy: The CEO (root node) starts a rumor, which spreads to department heads (child nodes) and then to their team leads (grandchild nodes), continuing until it reaches the interns (leaf nodes).

Order: ✅ (Binary Search Tree): Yes - ordered. Left child values are less than the parent; right child values are greater. ❌ (Binary tree): not ordered - each node has at most two children but no specific order

Look Up: ✅ Time: O(log n) (better than linear) - In a sorted BST, binary search is efficient because you only need to traverse half the tree. Root would be the middle; and if your number is bigger than the middle, you search the top half & vice versa (you wouldn’t have to search all nodes).

Insert: ✅ Time: O(log n) - Inserting into a BST is quick because you take advantage of the sorted order (as mentioned in the “look up” section above to find the correct spot).

Note: For a regular binary tree (unsorted), look-up and insert times are O(n) (linear), as you may need to traverse all nodes.

There are two ways to traverse a binary tree:

BFS (Breadth First Search): Explore all hallways on the current floor of the library before moving to the next floor (using a queue).

DFS (Depth First Search): Explore a maze by going as deep as possible into one path before backtracking and exploring other paths (using a stack).

HashMap: The Vending Machine

Analogy: Each slot in a vending machine has a unique code (key) like "A1." You input the code, and the machine retrieves the corresponding snack.

Order: ❌ Not ordered - The items are placed in slots based on hash codes, not insertion order. Think of rain falling into buckets.

Look Up: ✅ Time: O(1) (constant) - Fast look-up using hash codes with .containsKey() and .hashCode().equals().

Insert: ✅ Time: O(1) (constant) - Adding a new key-value pair is quick, as it goes to the correct slot based on hash code.

HashSet: The Gym Check-In

Analogy: The gym doesn’t care about the order in which members check in; they simply scan your ID barcode (hash code) to verify membership.

Note: HashSet uses a HashMap internally, so its performance is similar to that of a HashMap but without the key-value pair structure. It's ideal for storing unique elements.

Order: ❌ Not ordered - Elements are not kept in the order they are added.

Look Up: ✅ Time: O(1) (constant) - Fast look-up using hash codes with .contains().

Insert: ✅ Time: O(1) (constant) - Adding an element is quick, with insertion based on hash code.

Additional Structures

Queue: The Carnival Line

Analogy: In a carnival line, the first person (FIFO) gets on the ride first, and new people join at the end of the line.

Use: for in-order processing; when you need to process items in the same order they are added (FIFO- first in first out)

Order: ✅ Yes - Ordered. Items are processed in the same order they are added (First In, First Out).

Look Up: Need to traverse - To access any element other than the front, you need to go through the queue. (A queue is similar to a “linked list”, except with queues you add to one end of the list, and remove from the front.)

Insert: ✅ Time: O(1) (constant) - Adding an element to the end is quick.

Heap (Priority Queue): The Disney Fast-Pass

Analogy: The fast-pass line allows people with priority tickets to get on the ride first, regardless of their arrival order.

Use: When you want to reach into a “bucket” and always grab the highest (max heap) or lowest (min heap).

Order: ❌ Not ordered - Elements are organized based on priority, not insertion order. For example, when the top element (highest or lowest priority) is removed, the heap reorders itself by moving the last element to the top and adjusting its position to maintain the heap property.

Source: Tutorials Point

Look Up: ✅ Time: O(1) (constant) - Accessing the top element (highest or lowest priority) is fast. However, you need to traverse or use heap operations to access elements other than the top element (highest or lowest priority one in max/min heap respectively).

Insert: ✅ Time: O(log n) (better than linear) - Insertion involves adjusting the heap to maintain priority order.

Stack: The Pancake Stack

Analogy: Stacking pancakes one on top of another, you eat the last one added first (LIFO- last in first out).

Use: for reverse order processing (LIFO); typically used with recursion and function call as code calls itself.

Order: ✅ Yes - Ordered. Items are added and removed from the top (LIFO).

Look Up: ❌ Need to traverse - To access any element other than the top, you need to go through the stack.

Insert: ✅ Time: O(1) (constant) - Adding an element to the top is quick.

Source: Medium (Practicetrackever)

big 0 notation: laundry day

Ashley D — Thu, 18 Jul 2024 05:02:08 +0000

After our bootcamp, we were challenged to learn data structures, and I noticed a gap: a lot of online resources dive deep right into the math behind calculating Big O Notation through data, which can be intimidating for beginners. Instead, I want to make a beginner-friendly approach using something we all can relate to: laundry day.

The Big O Graph 📉

Image Credit: Big O Cheat Sheet

Here’s the typical Big O graph you see in many articles and videos. Let's break it down real quick:

Algorithm: A set of systematic instructions for solving a problem, like directions from your home to the grocery store for chips or the movie theater.
Operations: How many steps your algorithm will perform relative to the number of elements.
The graph's x-axis shows the number of elements to process, and the y-axis shows the number of operations necessary to process each element. If time increases too much with more elements, that's not optimal. Imagine customers having to wait longer, or an app crashing because it's taking too long to load something. But if more elements take proportionally less time (i.e. less operations) to process as the data size grows, that's good—it means we're being efficient!

What Do Those Lines Mean? 📊

Let's make this relatable. Imagine it's laundry day.... We've all been there, right?
Below you will see laundry day analogies for the various big 0 notations, in regards to time complexity.
(I’ve also grouped them by okay, good and not good for their efficiency)

Not Good 🙁

Quadratic Time - O(n^2) 😓

Imagine you are done with laundry day. You need to find the sock pairs, however the socks aren't paired up yet. To do your laundry quadratic style- you need to iterate over all laundry items, making every combination of 'two-item pairs'. Some of these will be a pair of a shirt and pants, some will be a shirt with one sock, and some will be two socks. Clearly lots of 'pairs' are needless, but this would succeed in finding the perfect pair of socks eventually.

This is similar to the idea of a nested loop in code.

for (int i = 0; i < socks.length; i++) {
    for (int j = i + 1; j < socks.length; j++) {
        if (socks[i] == socks [j]) {
            // Found a pair of socks


        }
    }
}

Linearithmic Time - O(n log n) 🪵

This is like “fancy” sorting—dividing or grouping the problem to avoid repeated steps. Imagine you need to organize all your clothes after laundry day.

First, you separate your clothes into different categories: socks, shirts, pants, etc. This initial division helps reduce the problem size (or how many clothes you have to sort through). Next, within each category, you sort the items by color. For example, for socks, you put all the purple socks together, then the green socks, and so on. Finally, within each color group, you sort by size It avoids touching each clothing repeatedly as we saw in the quadratic example above.

As you can see in the example below, once the clothes are divided into smaller groups, sorting within each category is much faster. Since each category has fewer items, you avoid repeatedly handling the entire pile- meaning operations (sorts) to go through the smaller pile.

Okay 🤔

Linear Time - O(n) 🔍

This is like opening each drawer to find your socks. The number of operations it takes grows in proportion to the number of drawers.In this case, one operation is opening each drawer to check inside.

If you have 2 drawers, it will take 2 operations. Let's pretend it takes you 5 seconds to open each drawer and look, so that's 10 seconds.
If you have 10 drawers, it will take you 50 seconds (10*5).
Now, imagine if you had 10,000 drawers—it would take you 50,000 seconds or roughly 13.9 hours! Would you want to open each of those 10,000 drawers?

In code, this is like a for loop iterating through each element (drawer) to perform an operation:

for (int i = 0; i < drawers.length; i++) {
    // Check each drawer
}

Good 🌟

Logarithmic Time - O(log n) 🔍🕵️‍♂️

Imagine you know your drawers are alphabetically sorted by clothing type. When searching for socks, you start in the middle... If you find pants, you realize you've opened too high, so you continue searching in the lower drawers. This means you don’t have to open all the drawers above the pants.

This method allows you to skip entire sections of drawers with each search, reducing the number of drawers you need to open to find your sock. Thus, it's more efficient and takes less time to locate your item compared to searching through every drawer linearly.

This is similar to a binary search.

int binarySearch(int[] drawers, int targetSock) {
    int left = 0;
    int right = drawers.length - 1;

    while (left <= right) {
        int mid = left + (right - left) / 2;

        if (drawers[mid] == targetSock) {
            return mid; // Found the target at index mid
        } else if (drawers[mid] < targetSock) {
            left = mid + 1; // Continue searching  right (upper) half
        } else {
            right = mid - 1; // Continue searching left (lower) half
        }
    }

    return -1; // targetSock not found
}

Constant Time - O(1) 🚀

This is like having your drawers labeled on the outside so know exactly where your socks are. It doesn’t matter how many drawers you have; you only need one operation where you open one drawer because you “know” where the socks are so you only have to open one drawer.

Think of a HashMap where you can quickly find an item by key. The key would be the label on the outside of the drawer (which would say socks), so you know to open up drawer 3. Regardless of how many drawers you have- you know it’s always going to be drawer 3.

HashMap<String, String> drawerMap = new HashMap<>();
drawerMap.put("favoriteSocks", "Drawer 3");
String socks = drawerMap.get("favoriteSocks"); // Instant lookup

how to deploy backend

Ashley D — Mon, 08 Jul 2024 15:50:19 +0000

After our bootcamp was done, we were instructed to create a portfolio website and given my interests in both frontend (my creative side) and backend (my curiosity for more of the technical engine that drives a site)- I decided to make my site fullstack. For example, I wanted to host my data tables for my bootcamp scores and feedback and projects on the backend.

When researching the how-to, I noticed a lack of resources for deploying a fullstack site and specifically for how to deploy the backend.

I wanted to create a resource to share my learnings on how to deploy the backend with the hope that this can help others. To preface, yes- there can be multiple approaches, but this here is specifically the approach my mentor and I took to deploy the backend. Please also note- that yes Heroku does require a card (~ $5, $9/ month), so if you want to avoid the billing - you can also just hardcode your backend data on the frontend. :)

To start off - we used Heroku to deploy and locally- we used Postgres to store the data. It is a very beginner-friendly site compared to some of the other more complex sites like AWS. In the steps below, we will go over:

Account Set Up
Postgres Set Up
Migrating Data
Connecting to Frontend

Before reading these steps, please note that the terminal commands are specific to Mac. As deployment strategies can vary based on your versions, below are the specific versions of systems I had:

React: 18.2.0
Spring: 3.3.0
Postgres: 14.12

Another optional thing to note if it makes it easier for you to organize the work, you will want to have a separate repo on Github respectively for both the frontend and backend.

Account Set Up

1. To start, you can go to heroku.com to sign up.

2. Click `Create New App` or navigate to:

https://dashboard.heroku.com/apps

3. Give your app a name.

4. From your Dashboard (https://dashboard.heroku.com/apps), click on the app name.

5. Add a system.properties file to your backend Java project.

Note: please keep the page open from step 4. This step 5 is done on your IDE to ensure proper deployment.
You will add this system.properties file to the root of your backend Java project directory. In this file, add the following:
Make sure you replace the 21 with your actual version number of Java.

java.runtime.version=21

This file helps Heroku understand which version of Java to use when running your application. Without it, Heroku might default to a version that is not compatible with your application, leading to potential runtime issues.

6. Click on deploy and click `Connect to Github`.

After connecting your GitHub repository, you'll see options to set up automatic deployments. Choose the GitHub branch you want Heroku to deploy automatically from (usually main or master). Optionally, enable automatic deploys so that every time you push to the chosen branch on GitHub, Heroku will automatically deploy those changes.

If you are having issues with automatic deployment, you may manually deploy. You will see that option at the bottom of the Deploy page.

After successful deployment, Heroku assigns a URL to your application. You can find this URL either in the output of the deployment process or by logging into your Heroku account and navigating to your app's dashboard. Make sure you write that URL down in a secure spot, as this will be the updated endpoint for your API calls.

Once you have obtained the URL (i.e. https://your-app-name.herokuapp.com), you can use it to make HTTP requests to your backend API endpoints deployed on Heroku. Replace your-app-name with the actual name of your Heroku app.

For example, if your backend API endpoint is /api/data, your complete URL for making requests would be https://your-app-name.herokuapp.com/api/data.

7. Check the logs to verify the correct Java version is being used.

Logs for both successful and unsuccessful builds are available from your app’s Activity tab in the Heroku Dashboard. You may read more steps for this under Heroku Logs documentation here.

After deploying, you should also double check the Heroku deployment logs to ensure the correct Java version is being used:

Go to the Heroku dashboard, select your app, and navigate to the "More" dropdown in the top-right corner. Choose "View Logs."
In the logs, look for lines that mention the Java runtime version. This will help you confirm that the correct version is being used.
If the version is incorrect, update the system.properties file with the correct version number and redeploy.

Postgres Set Up

Now let’s say you want to connect your existing Postgres database, i.e. say you are using Spring Boot and in the front end, you make the API call to the endpoints to get your data to display.

1. Click on the dots at top right next to your profile picture, and select `Data`.

2. Click `Create one` under `Heroku Postgres` and click on `install`.

3. Select the plan so you can host your database on Heroku.

The ones recommended for small-scale projects like a portfolio are Essential 0 ($5/month) or Essential 1 ($9/month). I got the latter.

Migrating Data

Now that the postgres instance is set up, now we can migrate our data from our local postgres to Heroku remote. An analogy is when we push code from local to your remote github repo, except in this case we are “pushing” our data.

1. First, you will want to install Docker.

Docker allows you to package an application along with its dependencies and configuration settings into a single, portable unit called a container. This makes it easier to develop and deploy applications. For example, when you use Docker to run PostgreSQL commands like pg_dump (to back up a database) or pg_restore (to restore a database), these commands execute within this isolated environment.

In our case, using Docker resolved a version conflict issue where Heroku server version of Postgres was 16.2 (and you can see that version here), but the pg_dump version was 14.12

You may type the command below on your terminal

brew install docker

… or if your terminal is being cranky and doesn’t want to work, then you can go to the Docker website and download Docker Desktop for Mac. Once installed, open the “Docker Desktop” application, skip through the various prompts until the docker daemon is running. Then you can close the docker desktop window and proceed to run docker commands in your shell session.

2. Then, you have to use `pg_dump` to create a create a backup file (*.dump) of your database for migration. You can run this command within Docker.

Type in your terminal the following:
You may see some abbreviated letters like -h and -U, etc. Here’s what they stand for and make sure to replace the word following the abbreviated letter for the following:

-h is the host name, so if you are not locally using localhost, replace it with your host.
-U is your local postgres username.
-d is the name of your local postgres database.
-f ashley-portfolio.dump: Specifies the filename (ashley-portfolio.dump) to save the dump.

docker run postgres:16 pg_dump -Fc --no-acl --no-owner -h localhost -U postgres -d ashley-portfolio-database -f ashley-portfolio.dump

Notice above we put postgres:16 so that it will match the server version of Heroku.
Note also: If you do not change directories (cd) before running pg_dump, the dump file will typically be saved in your home directory (~/) or wherever your terminal session is currently located.

Some more details if you are curious on the how and why behind this: pg_dump allows you to create a snapshot (backup) of your local PostgreSQL database (ashley-portfolio-database). This backup is crucial for preserving your data before transferring it to Heroku.

The backup file created by pg_dump (ashley-portfolio.dump) contains a consistent snapshot of your database, including the SQL commands necessary to remake the table structure. This file can then be transferred and restored into a different PostgreSQL database environment, such as one hosted on Heroku.

3. Upload your database `pg_dump` backup file to Heroku:

Now that you have created a backup of your local PostgreSQL database using pg_dump, the next step is to migrate this data to your PostgreSQL database hosted on Heroku.

Use pg_restore to upload your local database backup (ashley-portfolio.dump) to your Heroku PostgreSQL database:

docker run -e PGPASSWORD=yourHerokuDatabasePassword -v /path/to/your/backup:/my-portfolio-backup postgres:16 pg_restore -h herokuHostName -p 5432 -U yourHerokuUsername -d yourHerokuDatabaseName /my-portfolio-backup

Replace /path/to/your/backup, yourHerokuDatabasePassword, herokuHostName, 5432, the postgres version:16, yourHerokuUsername, yourHerokuDatabaseName with your actual paths and database details.

You can find this information by clicking the 9 dots at the top right of your Heroku page next to your profile picture. Click on Data. From there, it will open a page and you will see Datastores. Click on your datastore. Then you will see another page open, and at the top bar, it will say Overview, Durability, Settings. Make sure you select Settings. From there, click on View Database Credentials. Make sure that you don’t write this information down in an insecure environment.

Here is an explanation of what that Docker command means:

docker run: This command starts a new Docker container.
-e PGPASSWORD=yourHerokuDatabasePassword: This sets an environment variable inside the container. Here, PGPASSWORD is being set to your Heroku database password. Environment variables are a way to pass configuration settings to your application.
-v /path/to/your/backup:/my-portfolio-backup: This option links a directory on your host machine (your computer) to a directory inside the container. The part before the colon (/path/to/your/backup) is the path on your host machine where your backup file is stored. The part after the colon (/my-portfolio-backup) is the path inside the container where the backup file will be accessible.
postgres:16: This specifies the Docker image to use, in this case, version 16 of the PostgreSQL image. This ensures compatibility and forces the container to run with PostgreSQL version 16.
pg_restore: This is the command that will run inside the container. It restores a PostgreSQL database from a backup file.
-h herokuHostName: This specifies the host name of your Heroku PostgreSQL database.
-p 5432:This specifies the port number to connect to. The default port for PostgreSQL is 5432.
-U yourHerokuUsername: This specifies the username to connect to the PostgreSQL database on Heroku.
-d yourHerokuDatabaseName: This specifies the name of the PostgreSQL database to restore the backup into.
/my-portfolio-backup: This is the path to the backup file inside the container. It should match the directory we mounted earlier.

4. The last step is to have the migrated database appear on your local Postgres (this way if you need to view the data, or make updates- you can do so).

Using the aforementioned steps from step 3 on how to view your database Heroku credentials, make sure you keep that page open.
Open Postgres from your desktop. Right click on Servers in Postgres and then click Register and select Server.
From there, in the popup, select Connections and type in the info from your Heroku database credentials.

Now, when you open up Postgres, you should see a server called heroku. When you expand it, you will see databases. You can search for the one that matches the database name in your Heroku database credentials. Once you expand the database, click on Schemas to expand. Then, click on public to expand and then from there click on Tables to expand. Now, you can go to each table and run queries.

Connecting to Frontend

To set up the frontend you can deploy your frontend repo on Github on Netlify via these steps found in Netlify documentation.
You will want to make sure that for any API calls you make on the frontend code, that the API URL is updated from localhost to the new URL (i.e. https://your-app-name.herokuapp.com) and you may refer Account Setup Step 5 for a refresher on that. :)
After you finish deploying on Netlify, then you will get a link to your website which you can visit to visually see your fullstack site.

capstone debugging: learnings

Ashley D — Fri, 07 Jun 2024 21:34:46 +0000

The clock on my monitor silently ticked, while I cried in JSX fragments and Spring beans. It was Week 15 and 16- the final stretch of my coding bootcamp and we were tasked with creating a full-stack app. Time was tight from having to research and execute new concepts, and the bugs- oh someone call pest control! 😅

Though it was tough, I did end up finishing and learned a bunch in the process. My project was a volunteer-driven maps application that allows users to crowdsource accessibility information as well as explore and search accessible places near them.

While my Github readme shares more in-depth details of my learnings, I wanted to also share a behind the scenes view of 4 bugs I faced and how I debugged them:

Duplicate Data Seeding
Rating Button Not Showing as Checked
Uncontrolled Component Warning
Conditional API Calls

1. Duplicate Data Seeding

Issue: When seeding data without using a list, duplicate entries were created.
Solution: Created a variable to store the data seeder return and referenced this variable in other functions. This prevented duplication when checked in Postman.

To ensure the app had places loaded along with user reviews (to simulate a database of Maps places) and feature tags, a data seeding mechanism was used. 🌱. My approach at the beginning was to call the return of the entity seeder class. For example, in my reviewSeeder, I called userSeeder.seedUsers(), thinking that would just get me the return value of the initial list of 10 seeded users. Instead, I ended up with duplicates—Postman showed 20 users instead of 10 😬. When checking that list, I noticed that the usernames repeated twice, i.e. user1 appeared twice with id of 1 and 11.

After an hours-long trip down a rabbit hole, I realized that userSeeder.seedUsers() appeared to invoke the seeder function again instead of just returning the initial seeded list.
To fix this, I created a variable to hold the data seeder's return value and referenced this variable in subsequent functions. This change effectively prevented duplication, confirmed by rechecking in Postman.

     public void run(String... args) throws Exception {
            List<User> seededUsers= userSeeder.seedUsers();
            // Seed users first
            List<FeatureTag> seededTags = tagSeeder.seedTags(); // Then, seed tags first
            List<Place> seededPlaces = placeSeeder.seedPlaces(seededTags); // Pass seeded tags to places
            reviewSeeder.seedReviews(seededPlaces, seededUsers); // Pass seeded places and tags to reviews (because reviews can only exist with a place and places have tags)
        }

2. Rating Button Not Showing as Checked

Issue: **The rating button wasn’t properly working or showing as checked upon user selection.
**Solution: Used the checked attribute to control the selected radio button based on the component's state, as well as corrected mapping logic.

When adding a review, users are also prompted to rate the accessibility of the place from 1-5. Getting the rating buttons to display as checked was another challenge ⭐.

Kudos to my instructor who worked through with me during office hours.
Firstly, we fixed the mapping logic. The way rating radio buttons are generated is to take the array of ratings [1, 2, 3,4,5] and then map through them.

{[1, 2, 3, 4, 5].map((value) => { ... })}

A map typically takes 2 parameters: the value (current element of the array being processed and the index of the current element in the array. In this case, (value) => { ... } is an anonymous function that takes value as its parameter. and it is saying for each rating number, we want to have it be a radio button.

{[1, 2, 3, 4, 5].map((value) => {

    return ( // return a radio button for each number in the array 
       <Form.Check
             key={value}                  
 type="radio"
             label={value} // set label text for radio button 
             name="rating"
             value={value} // set value attribute to the current value we are mapping over 
             checked={formData.rating === value.toString()}
             onChange={handleChange}
           />
)

After that, I was able to confirm that yes, the value of the user’s selection was read by using a console.log and confirming the value was read on click. However, the button still appeared as unchecked, and that can be confusing to the end user.

We researched and learned that the checked attribute is what helps React determine which button to select when the form renders. This meant that there was an issue with how we were defining the statement in checked. The values in the bracket had to evaluate to true and we were comparing formData.rating to value (which was the value of the radio button generated from our mapping).

We confirmed that this comparison had to evaluate to true as we wrote checked = {false}; the formData.rating value was read on the console, but the button was not checked - which proves that when the comparison is false, a check will not appear visually in our UI.

Therefore, we dug a bit further into how we were getting those values and comparing them.

formData.rating is set using the handleChange which sets the rating value when the user clicks on a radio button. (Essentially, the function looks at event.target.name aka fields that triggered the change, and gets its value and sets it to form data.

const handleChange = (event) => {
    const { name, value } = event.target; // destructures the event.target with the keys in brackets 
// this way, we can use `name` and `value` variables vs `event.target.name, event.target.value
    setFormData((prevFormData) => ({
        ...prevFormData, //takes the form data and makes copy of it 
        [name]: value, //gets value for fields that triggered the change and sets it to form data.
    }));
};

We ran a console.log to compare formData.rating and value. In the end, we saw the issue was a type mismatch. After researching and seeing a suggested toString method online, we used that with our own code. formData.rating === value.toString() generated true and the check was now appearing on the UI. ✅

We could also verify this with the console.log. You can see when the user clicks 2.
Line 88 is formData.rating and Line 89 is value.toString(). You can see 5 lines appear - which is from our mapping of the 5 ratings, and for each it checks to see if the value we are mapping over from the array is equal to the user’s selection. When it is mapped over 2, that matches what the user selected, so the check appears visually in the UI.

3. Uncontrolled Component Warning

Issue: Input fields were locked because they were directly bound to userData.
Solution: Made a copy of userData to allow edits and saved changes on submit. This prevented the form from locking while enabling updates.

When designing the Edit Account page, I wanted data from My Account (which was retrieved from a GET mapping call to also populate on Edit Account). I used the UserData context provider in React to carry over those values. While the information did port over correctly to Edit Account, the input fields were locked 🔒, preventing edits.

Shoutout to my mentor who helped me to battle this bug. The console showed an error of “uncontrolled component warning.” We learned this error is when the state of a component is not being controlled by React itself, aka React doesn’t have complete control over the Edit Account form’s input fields. Yes, React is a control freak. 😉

Fields were directly bound to userData (which was set from that aforementioned API call on My Account). This resulted in the fields being "locked" and preventing any edits. This also means that when I was trying to edit the input fields, I was essentially trying to edit the original userData. React doesn't allow direct changes to props because they are supposed to be immutable. So, trying to edit the input fields directly would essentially be trying to modify immutable data, which React won't allow.

Also, when an input field is directly bound to a piece of data- in this case userData, React cannot fully control the state of that input field.

We resolved it by creating a copy of userData, allowing modifications without altering the original until submission.

  const [formData, setFormData] = useState({ ...userData });

formData is a variable that refers to that copy of userData (with its key-value pairs of data details), so in our form fields, we can use the dot notation of value={formData.email}.

This also fixed the uncontrolled component warning, ensuring form fields were populated with the initial userData values but remained editable. Upon submitting, changes were saved back to the original user data with a PUT request, ensuring a smooth and functional user experience.

Finally, the user is redirected back to My Account after a successful PUT call, and that is where GET mapping happens to retrieve the user info and set it to the userData context provider- ensuring both the backend and the frontend context providers’ values are updated 💾.

4. Conditional API Calls

Issue: Fetch API calls wouldn’t populate with data on the frontend
Solution: Ensured API call was made only if the username was truthy, triggering the call once the username was available.

A peculiar issue with populating data from fetch API arose 🚧. The first time I noticed this was when trying to get My Account details to populate by username. My API call required the username value.

 const responseData = await fetchData(`users?username=${username}`);

I started with using local storage to store the username upon a successful sign in, but the API call to get account details would not return anything. I even did a console.log to ensure the username was being correctly read. The instructor gave a hint on how local storage can be slow to load. Thus, I then tested using a username context provider to pass the value - thinking this would resolve it. Still, there was no luck in rendering the API call’s return.

To prove that it was not an issue with the system reading the username value, I even tried to hardcode a username value of const username = user1 before the API call, and that worked. Something else was brewing.

As I initially had an address entity linking to user, I tried to change the dot notation format to users.address, users. , address, etc- all to no avail either. I then thought perhaps the address entity was giving me issues due to how it was set up on Spring Boot with the one-to-one cascade, so I commented it out to see if I could at least get the user information to populate. It did!
When I uncommented out address, then the address would populate. I tested this a few times with mixed results, and noticed I had to wait a bit to uncomment out address for both the user and address to display. This gave me another hint, that perhaps we had to wait for the user information to populate.

A few hours later, what I learned is that given that API calls are asynchronous, there was a possibility that the data might not be available at the time of the call. Also, local storage and context providers are asynchronous too. That means JavaScript won't wait for the local storage or context operation to finish before continuing to execute the API calls.

That means that when we attempted to fetch "My Account" details based on the username, there was no guarantee that the username would be available immediately. It could take some time for the local storage to be accessed and the username to be retrieved.

By implementing a conditional API call that triggered only if the username was truthy, I ensured the address field was populated correctly. This method checked if the username was available before making the API call, allowing the address data to load appropriately. This method highlighted the importance of conditional logic in ensuring seamless data fetching and rendering in the UI 🎉

useEffect(() => {
  if (username) {
    fetchUserData(username);
  }
}, [username]);

spring JPA entities: cheat sheet

Ashley D — Sun, 28 Apr 2024 20:58:11 +0000

Week 10 of coding bootcamp was marked by lots of junk food, a sleepless Sunday night from drinking my coffee too late, and oh yeah learning about Spring JPA entities. Learning them felt like mental gymnastics for me. Now that my brain has shakily landed from its endless flips and rumination, I wanted to share my basic understanding of the how behind each. 😅

One to Many

Below we have two entities from the basic backend framework of an ecommerce’s app’s backend. A customer has a one to many relationship with orders. In other words, a customer can buy multiple orders.

Order	Customer
`@ManyToOne` annotation above `private Customer customer` indicates many `Order` instances can belong to one `Customer` instance.	`@OneToMany` annotation above `private List<Order> orders` means that one `Customer` instance can have multiple `Order` instances.
`@JoinColumn` indicates the foreign key of `customer_id` references the one in Customer table. `nullable=false` means that each order must have a customer instance (when being created/updated), or in other words belong to a customer.	`mappedBy= "customer"` (written above `List<Order> orders`) means that the list of orders is mapped to each customer via the `Customer customer` field on the Orders table (aka… the Orders table owns the relationship).
Hibernate then fetches the associated `Customer` instance based on that foreign key. This is how the order(s) are associated with the respective customer.	Remember how in the Order table, Hibernate gets the `Customer` instance via the foreign key and that is how it’s associated with those orders?

*Note: Even though we don’t see a list of orders or the customer object - we can access that relationship programmatically via JPA, as discussed above.

Here are how the Order and Customer Table look respectively on Postgres.

@JsonIgnore

The @JsonIgnore is to prevent “looping” (aka circular dependency) when we display the data. For example, when we made a request to get orders tied to a customer, without JSON, it would show the order, then the customer, which then shows the customer field info and then calls the order field which then calls the customer, ad infinitum.

With @JsonIgnore- only the Order information would show when making that get request.
When deciding where to place @JsonIgnore- you can think of it as we don’t need to show the customer when querying orders, but it would be more helpful to show the orders when querying a customer. An alternative way of approaching that thought process is: we put @JsonIgnore over the customer field, because a customer can exist without orders but not vice versa.

Owning Table

Orders is the owning table, which means any changes to the relationship, such as adding or removing orders for a customer, should be made through the customer field in the Order entity.) The owning side is also where the relationship is persisted in the database; that is the owning side is the one that owns the foreign key in the relationship.

We chose orders as the owning side, because of operational logic. You typically create orders and associate with customers, not the other way around.

The example code block shows how we add an order to a customer. order represents the new order we are adding (sent via the request body in the API call @PostMapping("/customers/{id}/orders")).



 public Customer addOrderToCustomer(Integer id, Order order) throws Exception {
        Customer customer = customerRepository.findById(id).orElseThrow(() -> new Exception("Customer not found"));
        order.setCustomer(customer);
        orderRepository.save(order);
        return customer;
    }

Notice how the updates in the code are done via the order’s side. The customer that has made the order is set to the customer field in the Order entity. This Order instance that now has the respective customer tied to it is then saved (persisted) to the Order database.

Bidirectional

As a side note, as cascade persist is not used above, you can set the order on the customer side as well to allow for bidirectional navigation. Cascade persist means that operations on say a customer entity would persist to the associated order entities (i.e. if you deleted a customer, then the associated customer would aso delete) …however, in our case- as we are primarily accessing orders from the orders side (i.e. we typically retrieve orders and associate them with customers), then we don’t need that bidirectional code added.

Note:

Keep in mind, for unidirectional one-to-many relationships, in most cases- you have to set both entities "to each other", in other words for example set a team to a player, and player to a team. On the other hand, many-to-many relationships are bidirectional and that means if you set a post to have a tag, you don't need to set the post to the tag- since JPA handles that on the backend (made possible by the associations between both entities via the join table).

One to One

Below we see how each record in our Address entity is associated with one record in the Customer entity., and vice versa. That is, in our hypothetical scenario: each customer can have one address, and one address can belong to one customer.

All the annotations are handled on the Customer entity side:

@OneToOne annotation in our Customer entity above private Address address means that one customer instance has one address
CascadeType.ALL in our Customer entity means that for any actions taken on a Customer instance, should also be applied to the Address. For example, if a customer is deleted, then its respective address will also be deleted. Likewise, if a customer is created, then it will be expected to have an address added.
@JoinColumn annotation indicates the address_id is the foreign key.
nullable=false means the address_id can’t be null, or in other words each customer needs to have an address associated with it. When creating or updating a user, it must have an address. -unique=true means that for each customer, they must have a unique address.

This screenshot below shows the Customer table in Postgres, and you can see the foreign key address_id as the first column- essentially allowing this table to “link” to the Address table.

Many to Many

Below we see a relationship where one order can have multiple products (i.e. TV, sofa, etc), and one product can have many orders. In other words, orders and products have a many to many relationship.

Order	Product
`@ManyToMany` above `List<Product>` means one order can have multiple products.	`@ManyToMany` above `List<Order>` means one product can have multiple orders.
`@JoinTable`is on the Order side. We query most from Orders and when we query, it allows the related products to properly display.	`@JsonIgnore` is placed over `List<Order>` to prevent that circular reference data loop. Also, we don't need a product result to show affiliated orders, whereas we want to show orders with their affiliated products.
`inverseJoinColumn` means the foreign key of `product_id` references the one in the Product table (opposite side table). Hibernate then fetches the associated `Product` instance based on that foreign key. This is how the orders(s) are associated with the respective products.	`mappedBy = “products”` means Orders is the owning side; you create Orders and associate products to orders. The list of orders is mapped to products via the Order table (through its join table). Remember how in the Order table, Hibernate gets the `Product` instance via the foreign key and that is how it’s associated with those orders?

*This below screenshot shows the Join Table that is actually created in Postgres from that @JoinTable annotation.

Side note:

On the Order table: =new ArrayList<> initializes the list of products with an empty array list, so that as products are added to an order, that array list is updated. This ensures that the products field is not null even if no products are associated with that order at initialization time.
On the Product table: =new ArrayList<> initializes the list of orders with an empty array list, so that as new orders are made with that product, then those orders can be added in. This ensures that the orders field is not null even if no orders are associated with that product at initialization time.

DEV Community: Ashley D

kotlin vs java- the very basics

Table of Contents

Syntax

Variable Declaration

No Primitive Types

String Interpolation

Null Safety

when vs switch

Functions

Defining Function

Handling Void

Lambda Expressions

Misc

Collections

Class Constructors & init

2024: retro.filter(experiences => share(experiences))

await fetch("example.com/api/opportunity")

public void StartBootcamp() {

git diff: expectations vs reality

while (newKnowledge) {shareKnowledge++;}

refactoring my post-bootcamp learnings

where my linked list node .next points toward

surviving coding bootcamp: project planning

Table of Contents

1. Start Small: Beat Procrastination by Taking the First Step

2. Plan with Diagrams

3. Don’t Over-Plan

4. Think About User Experience (Not Just CRUD)

5. Work on Frontend and Backend Together

surviving coding bootcamp: lessons learned

Table of Contents

Emotionally Navigating Bootcamp: Building Resilience and Community

Mastering Homework: Strategic Approaches for Success

Working with a Mentor: Maximizing Support and Growth

Final Thoughts: Embrace the Journey

seeing react through java lens

Table of Contents

1. App.jsx as the Java main Class (psvm)

2. State Management with Hooks as Java Getters and Setters

3. Containers as Java Classes

4. Components as Java Methods

5. React’s Return in Components

6. Props as Java Method Parameters

7. Callback Functions as Java Methods that Return Values

sql joins: moving in together

Main Tables: The Guy and the Girl

Guy Table (John's Interests)

Girl Table (Emily's Interests)

Table of Contents

Inner Join: The Love Match

Left Join: The Bossy Guy

Right Join: The Bossy Girl

Full Join: The Cantankerous Couple

using slack api to retrieve data

Introduction

Topics I Learned:

1. Slack API Library in Java

2. Token Management

3. OAuth Scopes

4. Jsoup Library

6. limit Parameter

7. .build() Builder Pattern

8. Leveraging API Documentation

data structures analogies cheat sheet

Table of Contents

Main Structures

Arrays: The Shoe Shelf

Linked List: The Rollercoaster

Binary Search Tree (BST): The Gossip Chain

HashMap: The Vending Machine

HashSet: The Gym Check-In

Additional Structures

Queue: The Carnival Line

Heap (Priority Queue): The Disney Fast-Pass

Stack: The Pancake Stack

big 0 notation: laundry day

Table of Contents

The Big O Graph 📉

What Do Those Lines Mean? 📊

`when` vs `switch`

6. `limit` Parameter

7. `.build()` Builder Pattern

2. Click `Create New App` or navigate to:

6. Click on deploy and click `Connect to Github`.

1. Click on the dots at top right next to your profile picture, and select `Data`.

2. Click `Create one` under `Heroku Postgres` and click on `install`.

2. Then, you have to use `pg_dump` to create a create a backup file (*.dump) of your database for migration. You can run this command within Docker.

3. Upload your database `pg_dump` backup file to Heroku: