AI note taking assistant. Created using NextJS, Typescript, Drizzle, OpenAI, Vercel.

Notes with AI

Notes With AI

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us. Her commitment to best practices in both frontend and backend development is truly inspiring. If you’re interested in connecting with Grace, you can find her on [LinkedIn here](https://www.linkedin.com/in/grace-kaberere-21512b167/).

Today, I am excited to share an interview with Grace where she offers valuable tips and tricks for coding with Django (Python). Her insights are designed to promote efficient development practices and inspire aspiring developers who are beginning their careers as Full Stack or Backend Developers.

### Q1: Introduction to Django
What are the key features of Django that set it apart from other web frameworks?

Grace: Django stands out for its simplicity and robustness, making it easy for developers to learn and use. Its built-in admin panel streamlines the process of creating and managing content. Additionally, Django's ORM (Object-Relational Mapping) simplifies database interactions, reducing the need for repetitive SQL queries.

### Q2: Best Practices and Resources
What best practices would you recommend for writing efficient Django code?

Grace: To write efficient Django code, adhere to best practices such as optimizing database queries, minimizing the use of expensive operations in views, and caching frequently accessed data. Employing Django's built-in caching mechanisms and optimizing templates can also improve performance significantly.

### Q3: Django Ecosystem
What are some must-know packages or libraries in the Django ecosystem?

Grace: Some essential packages in the Django ecosystem include Django REST Framework for building RESTful APIs, Celery for asynchronous task processing, Django Channels for real-time web applications, and Django Allauth for user authentication and registration.

### Q4: Personal Experience
What was your own journey like learning Django?

Grace: My journey with Django began with an online Udemy course, which provided a solid foundation. I then embarked on personal projects to apply what I learned, gradually tackling more complex challenges. One valuable lesson was the importance of diving deep into project tasks to understand the codebase thoroughly, enhancing my knowledge and skills.

### Q5: Advice for Aspiring Developers
What advice would you give to someone who is inspired to be a Full Stack Developer?

Grace: My advice is to immerse yourself in Django's documentation and best practices. Practice regularly by taking on projects, both personal and professional, to reinforce your skills. Don't shy away from challenges; instead, embrace them as opportunities for growth. And always remember, learning to code is a continuous journey, so stay curious and keep exploring new concepts and techniques.

### Conclusion:
In conclusion, Grace's insights highlight the importance of continuous learning, sharing knowledge, and maintaining strong development ethics. Her journey and advice underscore the value of perseverance, curiosity, and embracing challenges. **As Developers, we should strive to adopt these principles to grow both professionally and personally.** Let Grace's experience inspire you to push your boundaries and contribute to the ever-evolving world of technology. This mindset will not only make you an efficient Developer but also a valuable and ethical contributor to the Developer community.

___________________________________________________________

### Also on codewithkatyrosli.com

**Exploring Django Views: A Beginner's Guide to Managing User Profiles**,
2024-04-21

Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application. Specifically, we'll explore a simple example of a Django view that manages a user profile and allows users to view and edit their own profile information.

[**Read More**](https://codewithkatyrosli.com/blog/exploring-django-views-a-beginner-s-guide-to-managing-user-profiles)

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us.

Interview with Grace: Insights from a Seasoned Full Stack Developer

Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application. Specifically, we'll explore a simple example of a Django view that manages a user profile and allows users to view and edit their own profile information.

Before we get started, let's explore the question: 
### What is Django?

Django is a powerful, open-source web framework written in Python that makes it easier to build web applications quickly and efficiently. It's known for its simplicity and clear structure, which helps developers manage complex web projects with ease. Django provides a range of tools and components that streamline common tasks, such as managing databases, handling user authentication, and creating dynamic web pages.

In a web application, the part of the code responsible for responding to user requests is known as a view. A view is a function or class that receives a web request, processes the request data, and returns a web response. It acts as a bridge between the user interface and the server-side logic, determining what data is presented to the user and how the application responds to different types of requests.

Now that we have understand what is Django, let's dive in! A Django view that manages a user profile. Below is an example of a code that this view allows users to view and edit their own profile information:


``` python
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.contrib import messages
from .forms import UserProfileForm

@login_required
def user_profile_view(request):
    # Get the current user
    user = request.user
    
    # If the request is a POST request, process the form data
    if request.method == 'POST':
        form = UserProfileForm(request.POST, instance=user)
        
        # If the form is valid, save the changes and redirect to the profile page
        if form.is_valid():
            form.save()
            messages.success(request, "Profile updated successfully!")
            return redirect('user_profile_view')
        else:
            messages.error(request, "Error updating profile. Please try again.")
    
    # If the request is a GET request, create a form instance for the user
    else:
        form = UserProfileForm(instance=user)
    
    # Render the profile page with the form
    context = {
        'form': form,
        'user': user,
    }
    return render(request, 'user_profile.html', context)

```
### What does the code above means?

### 1) Importing Necessary Modules:
- a) The code imports functions from Django's core libraries, including render and redirect from django.shortcuts, which help with rendering templates and redirecting requests.
- b) The login_required decorator from django.contrib.auth.decorators ensures that only authenticated users can access the view.
- c) The User model from django.contrib.auth.models represents user accounts.
- d) The messages module provides a way to display messages to the user (e.g., success or error messages).
- e)The UserProfileForm class is a custom form for editing user profiles.

### 2) View Function:
- a) The function user_profile_view handles requests to the user profile page.
- b) The login_required decorator ensures that the view is only accessible to logged-in users.
- c) The function first retrieves the current user using request.user.
- d) If the request method is POST, the function processes the form data submitted by the user using UserProfileForm.
- e) If the form is valid, the user's profile is updated and a success message is displayed. The user is then redirected back to the profile page.
- f) If the form is not valid, an error message is displayed.
- g) If the request method is GET, the function creates an instance of UserProfileForm pre-populated with the user's existing data.
- h) The function renders the user profile page using the render function, providing the form and user data in the context.

### Conclusion:
In conclusion, we explored Django and how views function in a Django application. We then discussed a simple example of a Django view that manages user profiles. This view demonstrates how to handle GET and POST requests, validate form data, and provide appropriate responses to the user.

Django's views offer a convenient way to handle different types of requests and enable efficient management of user interactions in a web application. By understanding how views work, we can create dynamic and responsive web pages that enhance user experience.

___________________________________________________________

### Also on codewithkatyrosli.com

**Interview with Grace: Insights from a Seasoned Full Stack Developer**,
2024-05-19

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us. Her commitment to best practices in both frontend and backend development is truly inspiring. If you’re interested in connecting with Grace, you can find her on LinkedIn here.

Today, I am excited to share an interview with Grace where she offers valuable tips and tricks for coding with Django (Python). Her insights are designed to promote efficient development practices and inspire aspiring developers who are beginning their careers as Full Stack or Backend Developers.

[**Read More**](https://codewithkatyrosli.com/blog/interview-with-grace-insights-from-a-seasoned-software-engineer)


Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application.

Exploring Django Views: A Beginner's Guide to Managing User Profiles

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: [https://chimerical-meringue-763758.netlify.app/,](https://chimerical-meringue-763758.netlify.app/) where I used Leaflet Map, I felt ready to tackle this task.

### Research and Preparation:
My journey began with thorough research, diving into Leaflet's documentation and scouring the web for examples and tutorials. Armed with this knowledge, I was ready to embark on the implementation process.

### Implementation:
With a clear understanding of Leaflet's capabilities, I began by integrating drawing functionality into my map. Leveraging Leaflet's built-in drawing tools and exploring plugins like Leaflet.Draw, I crafted a user-friendly interface that allowed users to draw polygons directly onto the map canvas.

### Here's an example:

``` javascript
import React, { Component } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-draw';
import { csrfToken } from './utils/csrfToken'; // Import CSRF token

class LeafletMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
    this.drawnItems = new L.FeatureGroup();
    this.drawControl = null;
    this.state = {
      isDrawing: false
    };
  }

  componentDidMount() {
    this.map = L.map(this.mapRef.current).setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(this.map);

    this.map.addLayer(this.drawnItems);
  }

  initDrawControl = () => {
    if (!this.drawControl) {
      this.drawControl = new L.Control.Draw({
        draw: {
          polygon: true,
          polyline: false,
          rectangle: false,
          circle: false,
          marker: false
        },
        edit: {
          featureGroup: this.drawnItems
        }
      });
      this.map.addControl(this.drawControl);
      this.map.on('draw:created', this.onDrawCreated);
    }
  };

  onDrawCreated = (e) => {
    const layer = e.layer;
    this.drawnItems.addLayer(layer);
    this.setState({ isDrawing: false });

    // Show buttons for done, cancel, and undo
    const toolbar = this.drawControl._toolbars.draw;
    toolbar._modes.polygon.handler.enable();
    toolbar._modes.polygon.handler.disable(); // Disable drawing after polygon is created

    toolbar._modes.remove.handler.enable(); // Enable remove (undo) button
    toolbar._modes.remove.handler.on('click', () => {
      const layers = this.drawnItems.getLayers();
      if (layers.length > 0) {
        const lastLayer = layers[layers.length - 1];
        this.drawnItems.removeLayer(lastLayer);
      }
    });

    toolbar._modes.cancel.handler.enable(); // Enable cancel button
    toolbar._modes.cancel.handler.on('click', () => {
      this.drawnItems.clearLayers(); // Remove all drawn layers
      toolbar._modes.polygon.handler.disable(); // Disable drawing
    });

    toolbar._modes.edit.handler.enable(); // Enable done (save) button
    toolbar._modes.edit.handler.on('click', () => {
      // Convert drawn polygon to GeoJSON format
      const geojson = layer.toGeoJSON();

      // Send GeoJSON data to server using Django's CSRF protection and URL
      fetch('/savePolygon/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken // Pass the CSRF token in the headers
        },
        body: JSON.stringify({ data: JSON.stringify(geojson) })
      })
        .then(response => {
          if (response.ok) {
            console.log('Polygon saved successfully!');
          } else {
            console.error('Failed to save polygon:', response.statusText);
          }
        })
        .catch(error => {
          console.error('Failed to save polygon:', error);
        });
    });
  };

  render() {
    return (
      <div>
        <div ref={this.mapRef} style={{ height: '400px' }}></div>
        {!this.state.isDrawing && (
          <button onClick={() => {
            this.setState({ isDrawing: true });
            this.initDrawControl();
          }}>Draw</button>
        )}
        {this.state.isDrawing && <p>Please draw on the map</p>}
      </div>
    );
  }
}

export default LeafletMap;

```
### What this code does:

1) Component Structure and State:
We define a class component called LeafletMap that extends Component. This component represents the Leaflet map with drawing functionality.
Inside the constructor, we initialize the component's state with isDrawing set to false. This state variable tracks whether the user is currently drawing on the map.

2) Map Initialization:
In the componentDidMount lifecycle method, we initialize the Leaflet map by creating a map instance and adding a tile layer for OpenStreetMap.

3) Drawing Control Initialization:
The initDrawControl method initializes the drawing control for the map. It creates a new instance of L.Control.Draw with options to enable drawing polygons and disable other drawing modes like polyline, rectangle, circle, and marker.
This method is called when the user clicks the "Draw" button.

4) Drawing Polygon:
When the user draws a polygon on the map, the onDrawCreated event handler is triggered. Inside this handler:
We add the drawn polygon layer to the drawnItems feature group, which displays the drawn polygons on the map.
We disable the drawing handler for polygons to prevent further drawing.
We enable the remove (undo), cancel, and edit (done/save) buttons in the drawing toolbar.

5) Button Click Handlers:
Clicking the "Remove" button (undo) removes the last drawn polygon from the map.
Clicking the "Cancel" button clears all drawn polygons from the map and disables further drawing.
Clicking the "Edit" button (done/save) converts the drawn polygon to GeoJSON format, sends it to the server via an AJAX request, and saves it to the database using Django's CSRF protection and URL.

6) Rendering:
The render method renders the Leaflet map and a "Draw" button when isDrawing is false.
When isDrawing is true, it renders the "Please draw on the map" text below the map.

### Conclusion:
In conclusion, I found the process of implementing the drawing feature incredibly fulfilling. The improvements in user experience (UX) and user interface (UI) were quite satisfying. With clearer guidance provided to users, they can now navigate the drawing process with ease and confidence. It's empowering to see users have full control over the shapes they draw and the ability to save them directly onto their map.

Moreover, the collaborative aspect of reviewing and learning from the code together has been fantastic. It's not just about writing code; it's about growing and evolving as developers through shared experiences. This journey has been both enjoyable and enlightening, and I look forward to more opportunities for collaborative learning in the future.

___________________________________________________________

### Also on codewithkatyrosli.com

**Exploring Django Views: A Beginner's Guide to Managing User Profiles**,
2024-04-21

Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application. Specifically, we'll explore a simple example of a Django view that manages a user profile and allows users to view and edit their own profile information.

[**Read More**](https://codewithkatyrosli.com/blog/exploring-django-views-a-beginner-s-guide-to-managing-user-profiles)

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/ where I used Leaflet Map, I felt ready to tackle this task.

Leaflet Map: Adding Drawing Functionality

In the fast-paced world of web development, we're always striving to make websites easier to use and more enjoyable. Recently, my team has been focused on making our map page better. This page is super important for our website because it helps users find what they're looking for. Drawing from my experience working on the Geo Game App project here:[ https://chimerical-meringue-763758.netlify.app/](https://chimerical-meringue-763758.netlify.app/), where I used Leaflet Map, I felt ready to tackle this task. I knew both the good and the not-so-good things about Leaflet Map. So, I started by going back to the Leaflet Map instructions to make sure I was on the right track.

### Recap and Documentation Review:
To ensure a comprehensive understanding of Leaflet Map's capabilities, I undertook a systematic review of its documentation. This involved revisiting fundamental concepts and exploring advanced functionalities, enabling me to discern nuanced approaches for our current objectives. Such a meticulous approach not only reaffirmed my existing knowledge but also unveiled new avenues for innovation within the framework.

### Here's some of the User Stories for Desktop:
1) As a User, I am able to mouse hover on the layers, I can see the layer is set to 100% opacity.
2) As a User, when I mouse out from the layer, I can see the layer is back to its normal state.
3) As a User, I can click on the layer, I can see the layer is set to 100% opacity and the side panel slide from the left off the screen and read the information shown on the side panel.

### Here's an example of a Leaflet Map code for the User Stories above:
``` javascript
// Create a Leaflet map
var map = L.map('map').setView([51.505, -0.09], 13);

// Add a base tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Define some GeoJSON data
var geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "name": "Layer 1"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.09, 51.5],
                    [-0.09, 51.52],
                    [-0.06, 51.52],
                    [-0.06, 51.5],
                    [-0.09, 51.5]
                ]
            ]
        }
    }, {
        "type": "Feature",
        "properties": {
            "name": "Layer 2"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.07, 51.49],
                    [-0.07, 51.51],
                    [-0.04, 51.51],
                    [-0.04, 51.49],
                    [-0.07, 51.49]
                ]
            ]
        }
    }]
};

// Add GeoJSON layer to the map
var geojsonLayer = L.geoJSON(geojson, {
    onEachFeature: function (feature, layer) {
        layer.on({
            mouseover: function (e) {
                e.target.setStyle({
                    opacity: 1
                });
            },
            mouseout: function (e) {
                e.target.setStyle({
                    opacity: 0.5 // Change opacity back to original value
                });
            },
            click: function (e) {
                // Open side panel here
                console.log("Clicked on " + feature.properties.name);
                
                // Reset styles of previously clicked layers
                geojsonLayer.eachLayer(function (layer) {
                    layer.setStyle({
                        opacity: 0.5 // Reset opacity for all layers
                    });
                });

                // Set clicked layer to 100% opacity
                e.target.setStyle({
                    opacity: 1
                });
            }
        });
    }
}).addTo(map);

```

### What this code does:
1) We create a Leaflet map and add a base tile layer.
GeoJSON data representing two polygons (layers) is defined.
2) We add a GeoJSON layer to the map and define event listeners for mouseover, mouseout, and click events on each layer.
3) When the mouse hovers over a layer, its opacity is set to 100%. - When the mouse moves away, the opacity is reset to its original value (0.5 in this case).
4) When a layer is clicked, its opacity is set to 100%, and the styles of all other layers are reset to their original opacity. 
5) Additionally, we can handle opening a side panel within the click event handler.

### Conclusion:
In conclusion, the journey of refining the map page functionality underscored the intrinsic value of adopting a professional approach rooted in meticulous documentation review and strategic implementation. Through the utilization of Leaflet Map, we were able to orchestrate significant enhancements that not only elevate user experience but also reinforce the platform's commitment to innovation and user-centric design. As we continue to iterate and refine our offerings, Leaflet Map remains an indispensable ally, empowering us to chart new frontiers in web-based cartography and interactive mapping solutions.

Once again here's my Geo Game App: [https://chimerical-meringue-763758.netlify.app/](https://chimerical-meringue-763758.netlify.app/). Enjoy playing :D!

___________________________________________________________

### Also on codewithkatyrosli.com

**Leaflet Map: Adding Drawing Functionality**,
2024-02-10

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/, where I used Leaflet Map, I felt ready to tackle this task.

Research and Preparation:
My journey began with thorough research, diving into Leaflet's documentation and scouring the web for examples and tutorials. Armed with this knowledge, I was ready to embark on the implementation process.

[**Read More**](https://codewithkatyrosli.com/blog/leaflet-map-adding-drawing-functionality)



In the dynamic realm of web development, refining user interfaces to optimize functionality and experience remains a perpetual pursuit. Within my team, our latest endeavor centers on elevating the efficacy and user engagement of the map page—a pivotal component of our platform. 

Unleashing Leaflet Map Magic: Elevating User Experience with a Polished Touch

For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

### 1. Research and Understanding:
- I researched existing implementations of drag and drop functionality.
- I then invested time in understanding the underlying logic behind drag and drop operations.
- Next, I broke down project requirements into user stories.
- User stories helped articulate product functionality with clarity.
- Defined roadmap with precision, ensuring comprehensive understanding of project scope and requirements.

### 2. Frontend Focus:
- As a Frontend Developer, I not only need to make sure that the functionality works but I also focus on the UX and the visuals.
- I ensured smooth user experience through visual cues like hover outlines and graceful animations during dragging.

### 3. Collaborative Efforts:
- I collaboration with my colleague to ensure seamless integration of frontend and backend components.
- We rigorously tested the page and its functions multiple times, conducting thorough reviews of each other's code to ensure adherence to standards.
- Our focus was on maintaining code readability and simplicity throughout the development process.

### Here's my main key learnings from this project:
'splice()' is a method in JavaScript arrays that allows you to modify the contents of an array by removing or replacing existing elements and/or adding new elements in place.

```javascript
array.splice(startIndex, deleteCount, item1, item2, ...);
```
**startIndex:** The index at which to start modifying the array.
**deleteCount:** The number of elements to remove from the array, starting from the startIndex.
**item1, item2, ...**: The elements to insert into the array at the startIndex.

Here's an example of splice() can be used in a class component:

```javascript
import React, { Component } from 'react';

class ExampleComponent extends Component {
  state = {
    numbers: [1, 2, 3, 4, 5],
  };

  handleSplice = () => {
    // Remove 2 elements starting from index 2, and insert 'x' and 'y' at that index
    this.state.numbers.splice(2, 2, 'x', 'y');

    this.setState({ numbers: this.state.numbers });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleSplice}>Splice Array</button>
        <ul>
          {this.state.numbers.map((number, index) => (
            <li key={index}>{number}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ExampleComponent;

```
The handleSplice method modifies the numbers array using splice(). It removes 2 elements starting from index 2 and inserts 'x' and 'y' at that index.
Clicking the button triggers the handleSplice method, which updates the state and re-renders the component to reflect the changes in the array.

Linking back to the drag and drop task, 'splice()' is important in drag and drop operations because it allows us to dynamically modify the order of elements within an array, which is often used to reflect the visual rearrangement of items in a UI component.

### Conclusion:
In conclusion, our project journey underscored the critical importance of meticulous planning and a deep understanding of the task at hand. By breaking down the project into manageable user stories and leveraging collaborative efforts, we successfully implemented a seamless drag and drop feature, ensuring a user-friendly experience for our Admin System.


___________________________________________________________

### Also on codewithkatyrosli.com

**Unleashing Leaflet Map Magic: Elevating User Experience with a Polished Touch**,
2024-02-04

In the dynamic realm of web development, refining user interfaces to optimize functionality and experience remains a perpetual pursuit. Within my team, our latest endeavor centers on elevating the efficacy and user engagement of the map page—a pivotal component of our platform. Drawing from my involvement in the Geo Game App project **here**, wherein I previously integrated Leaflet Map, I embarked on this task armed with insights into both the merits and limitations of this renowned mapping library. Grounded in a commitment to thoroughness, I initiated the process by revisiting and meticulously studying the documentation of Leaflet Map.

[**Read More**](https://codewithkatyrosli.com/blog/unleashing-leaflet-map-magic-elevating-user-experience-with-a-polished-touch)




For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

Crafting a Seamless Admin System: Navigating Drag-and-Drop Challenges

As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

### 1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process. By dissecting each task into manageable units, I could anticipate which sections could be modularized into reusable components. This approach not only streamlined development but also facilitated future iterations and updates, promoting scalability and maintainability.

### 2. Estimating Development Time:
Understanding user stories from a technical standpoint enabled me to accurately estimate the time required for implementation. By assessing the complexity of each task and considering technical dependencies, I could provide realistic timelines for completion. This proactive approach to time management ensured that project deadlines were met consistently, minimizing delays and enhancing overall project efficiency.

### 3. Leveraging Class Components for Complex Logic:
Before this project, I primarily coded in Function Components. However, in tackling the complexities of this project, I found class components to be particularly useful for handling complex logic and managing state.

Below is an example of a Class Component that handles complex logic and manages state: 

```javascript
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  decrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count - 1
    }));
  };

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.incrementCount}>Increment</button>
          <span>{this.state.count}</span>
          <button onClick={this.decrementCount}>Decrement</button>
        </div>
      </div>
    );
  }
}

export default Counter;
```

### What this code does:
1) In the constructor, it initializes the component's state with a property count set to 0.
2) It defines two methods incrementCount and decrementCount to update the count state. These methods use setState to update the state based on the previous state, ensuring that state updates are handled correctly.
3) In the render method, it returns JSX that represents the component's UI:
It displays a header "Counter".
It renders a <div> containing:
A "Increment" button which when clicked calls the incrementCount method.
A <span> element to display the current count value from the component's state.
A "Decrement" button which when clicked calls the decrementCount method.
4) Finally, it exports the Counter component as the default export, making it available for use in other parts of the application.In other words, this Counter component can be used in other parts of a React application to render a simple counter interface where users can increment and decrement the count value.

5) To read more and understand what is Class Component, read [here](https://codewithkatyrosli.com/blog/understanding-class-components-in-react).

### 4. Embracing Rewarding Moments:
One of the most gratifying aspects of the implementation process was witnessing the tangible results of my coding efforts. The culmination of meticulous coding, rigorous testing, and collaborative code reviews culminated in the deployment of this project. Seeing the page live and functional not only validated my technical skills but also provided a sense of accomplishment and pride in contributing to the project's success.

### Conclusion:
In conclusion, the implementation of this project was a journey marked by continuous learning, problem-solving, and growth. By leveraging insights from user journeys, estimating development time accurately, and embracing class components for complex logic, I was able to navigate the complexities of the implementation process effectively. Moving forward, I am excited to apply these learnings to future projects, further refining my skills as a Developer and delivering exceptional user experiences.


___________________________________________________________

### Also on codewithkatyrosli.com

**Crafting a Seamless Admin System: Navigating Drag-and-Drop Challenges**,
2024-01-28

For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

1. Research and Understanding:
I researched existing implementations of drag and drop functionality.
I then invested time in understanding the underlying logic behind drag and drop operations.

[**Read More**](https://codewithkatyrosli.com/blog/crafting-a-seamless-admin-system-navigating-drag-and-drop-challenges)



As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process.

Implementing the "Sälj Virke" Page: Insights from a Developer

In the realm of digital product design, the pursuit of enhancing user experience is paramount. One such endeavor unfolded in the redesign of the "Sälj Virke" page on Virkesbörsen. This initiative stemmed from a critical observation: users frequently contacted sales representatives seeking confirmation on the free nature of ad creation. Recognising this as a potential barrier to user engagement, our team embarked on a journey to address this concern and fortify user trust and confidence in our platform.

Here's the process that I took:

### 1. Identifying the Problem
- Thorough analysis revealed a recurring issue: user uncertainty regarding the cost of ad creation.
- Recognizing this as a potential barrier to user engagement, we prioritized addressing this concern in the redesign.

### 2. Ideation and Collaboration:
- I engaged in collaborative sessions with stakeholders to brainstorm solutions.
- We emphasized the importance of not only clarifying the free nature of ad creation but also providing insight into the platform's operational model.
- Leveraged diverse perspectives to develop a holistic redesign strategy that catered to user needs and business objectives.

### 3. User Testing: Validating Design Concepts:
- We conducted 5 rigorous user testing sessions to gather feedback on preliminary design concepts.
- Identified user curiosity regarding the operational dynamics of the platform.
- We also utilized user insights to refine design elements and address user inquiries proactively.

### 4. Iteration and Refinement:
- I iteratively refined the design based on stakeholder feedback and user testing insights.
- I ensured alignment with user expectations and business goals.
- Together, we strived for continuous improvement to optimize the user experience iteratively.

### 5. Implementation and Performance Analysis:
- I then Implemented the finalized design into the Virkesborsen platform.
- We established comprehensive analytics frameworks to monitor performance.
- Analyzed initial data to assess the impact of the redesign on user engagement and satisfaction.

**Left is the before and the right is the after redesign:**
![Virkesborsen-redesign-SaljaVirke.png](https://imagesstrapikatyr.s3.eu-north-1.amazonaws.com/Virkesborsen_redesign_Salja_Virke_17a7b98e9e.png)

### Conclusion:
In conclusion, the redesign of this page, exemplifies our commitment to user-centric design principles and continuous improvement. By systematically identifying and addressing user concerns, collaborating closely with stakeholders, and leveraging iterative design methodologies, working together, as a team, we succeeded in enhancing user trust, and satisfaction. 


___________________________________________________________

### Also on codewithkatyrosli.com

**Implementing the "Sälj Virke" Page: Insights from a Developer**,
2024-01-14

As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process. By dissecting each task into manageable units, I could anticipate which sections could be modularized into reusable components. 

[**Read More**](https://codewithkatyrosli.com/blog/implementing-the-saelj-virke-page-insights-from-a-developer)




In the realm of digital product design, the pursuit of enhancing user experience is paramount. One such endeavor unfolded in the redesign of the "Sälj Virke" page on Virkesbörsen. This initiative stemmed from a critical observation: users frequently contacted sales representatives seeking confirmation on the free nature of ad creation.

Virkesborsen-redesign-SaljaVirke.png

Redesigning the "Sälj Virke" Page on Virkesbörsen: A Case Study in User-Centric Design

This is a continuous post about class component. [Read here](https://codewithkatyrosli.com/blog/understanding-class-components-in-react) to understand about class component. Now that we have understand what is class component, let's dive into the topic about lifecycle of a React class component.

When it comes to managing the lifecycle of a React class component, one of the key methods to grasp is componentDidMount. In this blog post, we will explore what componentDidMount is, what it does, why and when we use it, provide an example of code, and discuss three important considerations to keep in mind when using this lifecycle method.

### So, what is componentDidMount?
componentDidMount is a lifecycle method in React class components that gets invoked after the component has been inserted into the DOM (Document Object Model). It is a suitable place to perform actions that require interaction with the DOM or external data fetching.

### And what does it do?
The primary purpose of componentDidMount is to execute side effects in your React component. Common use cases include fetching data from an API, subscribing to external data sources, or initializing third-party libraries. This method is triggered only once, right after the component has been mounted.

### Why do we use it?
We use componentDidMount when we need to perform actions that should happen after the initial render. This is crucial for scenarios where you need to interact with the DOM or fetch data asynchronously. By using componentDidMount, you ensure that these actions occur after the component has been successfully rendered and attached to the DOM.

### When do we use it?
componentDidMount is the ideal place for operations that should occur once when the component is mounted. Some examples include:

1) Data Fetching: Fetching data from an API and updating the component state with the received data.

2) Subscriptions: Setting up subscriptions to external data sources, such as WebSocket connections.

3) Third-party Library Initialization: Initializing and configuring third-party libraries that rely on the DOM.

### Here's an example of code for componentDidMount:

```javascript
import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Update component state with fetched data
        this.setState({ data });
      })
      .catch(error => console.error('Error fetching data:', error));

    // Initialize a third-party library
    thirdPartyLibrary.init();
  }

  render() {
    // Render your component
  }
}

export default MyComponent;

```

### Here's 3 considerations when using componentDidMount:
1) Avoid Direct DOM Manipulation: While componentDidMount is a suitable place for DOM-related actions, it's generally recommended to use React's state and props for managing UI changes. Direct DOM manipulation can lead to unexpected behavior and is against React's declarative nature.

2) Handle Async Operations Effectively: Ensure that any asynchronous operations (such as data fetching) are handled properly, and consider using componentWillUnmount to clean up resources when the component is unmounted.

3) Optimization: If your component needs to perform additional actions when props or state change, consider utilizing componentDidUpdate in conjunction with componentDidMount for a comprehensive lifecycle management strategy.

### Conclusion:
In conclusion, componentDidMount is a powerful tool in the React developer's toolbox. Understanding when and why to use it, along with the considerations mentioned, will help you build robust and efficient React applications. By leveraging this lifecycle method, you can ensure that your components interact with the DOM and external data seamlessly, providing a smooth user experience.

Happy coding! 👩‍💻🚀

___________________________________________________________

### Also on codewithkatyrosli.com

**Redesigning the "Sälj Virke" Page on Virkesbörsen: A Case Study in User-Centric Design**,
2023-12-16
In the realm of digital product design, the pursuit of enhancing user experience is paramount. One such endeavor unfolded in the redesign of the "Sälj Virke" page on Virkesbörsen. This initiative stemmed from a critical observation: users frequently contacted sales representatives seeking confirmation on the free nature of ad creation. Recognising this as a potential barrier to user engagement, our team embarked on a journey to address this concern and fortify user trust and confidence in our platform.

Here's the process that I took:

[**Read More**](https://codewithkatyrosli.com/blog/redesigning-the-saelj-virke-page-on-virkesborsen-a-case-study-in-user-centric-design)



When it comes to managing the lifecycle of a React class component, one of the key methods to grasp is componentDidMount. In this blog post, we will explore what componentDidMount is, what it does, why and when we use it, provide an example of code, and discuss three important considerations to keep in mind when using this lifecycle method.

Understanding componentDidMount in React Class Components

Today, I'll be explaining a more about class component in React. In React, a class component is a way to create reusable and maintainable UI elements. It was a fundamental concept in React before the introduction of functional components and hooks.

### Here's an easy code example on Class Component:

``` javascript

import React, { Component } from 'react';

class SimpleClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, Class Component!',
    };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default SimpleClassComponent;

```

### Here's an complex code example on Class Component:

```javascript

import React, { Component } from 'react';

class ComplexClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    // Complex logic, API calls, subscriptions, etc.
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    // Additional complex logic on component update
    document.title = `Count: ${this.state.count}`;
  }

  componentWillUnmount() {
    // Cleanup operations before component unmounts
    document.title = 'React App';
  }

  handleIncrement = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default ComplexClassComponent;

```

### Top 5 Key Learnings on Class Components:
1. State Management: Class components use the state object for managing local component state, allowing dynamic updates to the UI.
2. Lifecycle Methods: Class components have lifecycle methods (e.g., componentDidMount, componentDidUpdate, componentWillUnmount) that enable developers to execute code at specific points in the component's lifecycle.
3. Event Handling: Class components often involve methods for handling user interactions (e.g., button clicks) and updating the component state accordingly.
4. Class-based Syntax: Class components use the traditional ES6 class syntax, providing a clear structure for organizing and maintaining the component's code.
5. Complex Logic: Class components are suitable for handling complex logic, side effects, and asynchronous operations due to their lifecycle methods and class structure.

### Conclusion:
In conclusion while class components have been a core part of React, the introduction of functional components and hooks has become more prevalent in modern React development. Understanding class components remains valuable for maintaining legacy codebases and comprehending the evolution of React's architecture.

In contemporary React development, consider using functional components and hooks for their simplicity, readability, and improved performance.

___________________________________________________________

### Also on codewithkatyrosli.com

**Understanding componentDidMount in React Class Components**,
2023-11-25

This is a continuous post about class component. Read here to understand about class component. Now that we have understand what is class component, let's dive into the topic about lifecycle of a React class component.

When it comes to managing the lifecycle of a React class component, one of the key methods to grasp is componentDidMount. In this blog post, we will explore what componentDidMount is, what it does, why and when we use it, provide an example of code, and discuss three important considerations to keep in mind when using this lifecycle method.

So, what is componentDidMount?
componentDidMount is a lifecycle method in React class components that gets invoked after the component has been inserted into the DOM (Document Object Model). It is a suitable place to perform actions that require interaction with the DOM or external data fetching.

[**Read More**](https://codewithkatyrosli.com/blog/understanding-component-did-mount-in-react-class-components)



Today, I'll be explaining a more about class component in React. In React, a class component is a way to create reusable and maintainable UI elements. It was a fundamental concept in React before the introduction of functional components and hooks.

Here's an easy code example on Class Component: