Forem: Olayemi Elsie

My Learning Journey as a Developer

Olayemi Elsie — Mon, 30 Mar 2026 09:23:28 +0000

I started this learning journey with a mix of anxiety and determination.

At the time, I relied heavily on tutorials and artificial intelligence. If I couldn’t find a guide that matched my exact problem, I often felt stuck.

Today, that has completely changed.

When I began, I struggled with low confidence in making technical decisions. My mindset was simple: find a tutorial, follow it, and make it work or use AI to generate code without really thinking about why the implementation was done a certain way. My goal was just to make things work, but I wasn’t truly learning. I was copying patterns without understanding them.

The Turning Point: Learning “Why,” Not Just “How”

One of the biggest shifts in my journey was how I approached learning.

I started doing deeper research, reading documentation more carefully, and breaking problems down before jumping into code. It was harder and sometimes slower, but it pushed me beyond my comfort zone and helped me gain a real understanding of what I was building.

What I’ve Gained

I’ve seen real growth in my JavaScript, and I’ve become more independent in how I approach problems.

More importantly, my mindset has changed.

I’ve learned that real growth starts when you slow down, ask why, and challenge yourself to think critically.

It’s not always easy.
But it’s always worth it.

Vue 3 Task Manager App: Problem-Solving Approach

Olayemi Elsie — Sun, 01 Mar 2026 14:04:16 +0000

Developing a Task Manager application using Vue 3 focused on:

Component composition
Props and events
State management
Composables
Clean structure and separation of concerns

What the Task Manager App Does

The Task Manager allows users to:

Add tasks
Mark tasks as completed
Delete tasks
Toggle all tasks (Check All / Uncheck All)
Delete all tasks
Switch between dark and light mode
Edit tasks inline

PLANNING PHASE

Before writing code, I thought about:

Where should the task state live?
How will components communicate?
Should I use local state or a shared composable?

Breaking Down the Problem

I split the app into smaller parts:

TaskManager (parent)
CardViewComponent
CheckAllBtns
EmptyState
useTasks (composable)

This made the app easier to understand and maintain, though I didn't
plan all the UX requirements at first.

KEY DESIGN DECISIONS

Composable for State Management
- Problem: Multiple components needed access to task data
- Decision: Created useTasks composable
- Reason: Centralizes task data and most operations
Separate Components
- Problem: App growing too large
- Decision: Split into focused components
- Reason: Easier to read, maintain, and debug
Slots in EmptyState
- Problem: Need flexible empty state content
- Decision: Use slots instead of props
- Reason: Slots pass content (HTML), props pass data
CSS Classes for Theming (Not Dynamic Components)
- Initial mistake: Created both CardView and ListView thinking I needed separate components for light and dark modes
- Problem: Both components had identical code only CSS colors differed
- Realization: Dark/light mode is a styling concern, not a component structure concern
- Decision: Deleted ListView, used CSS class binding instead: :class="isDark ? 'dark' : 'light'"
- Reason: One component with dynamic CSS classes is cleaner than duplicating components for themes
- Lesson: Dynamic components are for structurally different layouts (grid vs list), not for styling variations (light vs dark)

CHALLENGES & SOLUTIONS

Challenge 1: Misunderstanding Dynamic Components and Duplicate State

What went wrong: Initially thought I needed separate components (CardView and ListView) for light and dark themes. While building ListView, I created a local tasks array in both files
Problems discovered:
1. Both components had identical structure only CSS differed (wrong use of dynamic components)
2. ListView's local tasks array didn't sync with CardView's composable based tasks (duplicate state)
Why sync failed: CardView and ListView were using two separate task arrays in different locations, not one shared source
Fix:
1. Realized theming is a CSS concern, not a component concern
2. Deleted ListView entirely
3. Implemented theming with CSS class binding: :class="isDark ? 'dark' : 'light'"
Lessons learned:
- Dynamic components = Different structures/layouts (e.g., grid vs list)
- CSS classes = Different styles/themes (e.g., light vs dark)
- Multiple views must share the SAME data source from composable, not create separate copies
- Don't duplicate components when CSS can solve the problem

Challenge 2: deleteAllTasks location

What went wrong: Placed in child component initially
Problem: Child shouldn't manage global state
Fix: Moved to parent component, triggered via events
Current state: Still in parent (TaskManager.vue)
Lesson: Child emits events; parent/composable manages state

Challenge 3: Missing UX requirements

What went wrong: Didn't plan for:
- Text overflow (long task names)
- Empty state display
- Visual feedback for completed tasks
Fix:
- Added truncateText() function (max 30 characters)
- Created EmptyState component
- Added linethrough styling for completed tasks
Lesson: Plan UX requirements well before implementation, not just functionality

Challenge 4: Slots vs Props

What went wrong: Tried passing empty state content via props
Problem: Props only handle simple data (strings, numbers), not HTML or components
Fix: Used slots for flexible content can now pass any HTML, icons, or components
Lesson: Props = data, Slots = content

KEY TAKEAWAYS

Component vs CSS: Don't create separate components for styling differences use CSS classes for themes. Dynamic components should only be used when components are structurally different.
Single Source of Truth: Multiple views must share the SAME data source (composable), not create duplicate state. Changes to shared data should reflect everywhere immediately.
Architectural Consistency: All operations on shared state should live in one place (composable) for consistency and maintainability.
UX Planning: Important UX requirements (empty states, text handling, visual feedback) should be considered during planning, not added during execution.
Understanding Tools:
- Dynamic components = Different structure/functionality (CardView grid layout vs ListView vertical layout)
- CSS classes = Different appearance/theme (light mode vs dark mode)
- Using the wrong tool leads to code duplication and complexity

Planning and breaking the app into components made implementation easier. Recognizing when I was overcomplicating things (separate components for themes) and understanding the right tool for each job (CSS vs dynamic components) were important lessons in building maintainable Vue applications.

Component Composition & State Flow

Olayemi Elsie — Sat, 14 Feb 2026 06:41:48 +0000

Component composition is how we build complex UIs by combining smaller, reusable components.

Instead of one big component, we break it into smaller pieces.

These smaller components can be nested, reused, and organized to create the full UI.

State flow is how data moves between components in an application.

Parent → Child: via props

Child → Parent: via events ($emit)

Shared / global state: for siblings or distant components (using reactive stores or composables)

Key idea: State flow ensures all components stay in sync and respond correctly when data changes.

Props

Props are communication between Parent & Child Component. (short for “properties”)

A parent component sends data to a child component through props. A child component cannot send data directly to its parent. Instead, the parent passes a function as a prop to the child, and the child calls that function to send data back up

Passing props from Parent → Child

Passing props from Child → Parent Component

Example

Parent Component

Child Component
const props = defineProps({
title: String
})

Accessing prop in the template

Accessing prop in script

const props = defineProps({
title: {

type: String,

default: "No title specified"

}})

Composables

Composables are the Vue3 equivalent of mixins in the options API.
They allow us to extract reusable logic (state and functions) into a separate file so we can reuse it in different components.
Instead of repeating code in many components, we write the logic once and import it where needed.

Creating a Composable

A composable is a function that contains reactive state and methods are returned what we want to use and then we export it.

Note:
It is important to name composable files starting with "use" e.g useDarkMode.js and to use camelCase for the file name.

Example:
useCounter.js

import { ref } from 'vue'

export default function useCounter() {

const count = ref(0)

function increment() {

count.value++

}

function decrement() {
count.value--

}

return { count, increment, decrement }
}

ref(0) → creates reactive state

increment() and decrement() → functions that modify state

return {} → exposes what we want to use in components

export → allows us to reuse it anywhere.

The return exposes the composable’s state and functions as an object.
When you import the composable in the vue component and destructure it, the component can see and use those state values and functions directly.

useCounter.vue

useCounter.vue
// object destructuring gives you access
const { count, increment, decrement } = useCounter()

Events

Events are how a child component communicates with its parent.
A custom event is like a special message that the child sends to the parent to notify it about something.

Dynamic Component

A dynamic component allows the switch between different components at runtime without manually nesting them all in the template.
Instead of writing all possible components in the template, it can render one component at a time based on a variable.

How it works
<component :is="currentComponent"></component>

:is → binds to a variable that holds the component to be rendered.

currentComponent → can be a component object.
When currentComponent changes, Vue automatically renders the new component.

Example
Example: Light Mode / Dark Mode

import { ref } from 'vue'
const currentComponent = ref('LightMode')
function toggleMode() {
currentComponent.value = currentComponent.value === 'LightMode' ? 'DarkMode' : 'LightMode'}

Toggle Mode

currentComponent determines which component is shown.
Clicking the button switches between LightMode and DarkMode.
replaces the need to manually nest and

State Management

State management is how data is shared and kept in sync between multiple components.

Use props and events to pass data between a parent and child.
Use global/reactive state when siblings or multiple components need the same data. ' Example:

// store.js
import { ref } from 'vue'
export const userName = ref('Olayemi')

import { userName } from './store.js'
function changeName() {
userName.value = 'Olusegun' }

Change Name

import { userName } from './store.js'

Changing the value in one component will update it everywhere that uses the same store.

Notes:

The default value is shown if the prop is not specified in the parent component.
defineProps() – No need to import it.Props from Vue docs are automatically available.

Events

A way a Child Component communicates with Parent Component.
A custom event is like a special message that a child component sends to its parent saying something.
Example (Child)

Dynamic Component

Switches between different components dynamically.
Example:

Let’s say we have a Light Mode and Dark Mode.
You want to click on a button to switch between Light & Dark.
This can be achieved by dynamic component.

is used instead of nesting components directly.

Composable

The equivalent of mixin.
It allows us to extract reusable logic & methods and keep them in a separate template so we can reuse them.
Creating a Composable

We need to create a function for it & export default function.
Example:

export default function useCounter() { const count = ref(0) function increment() { count.value++ } return { count, increment }}

Inside Vue file, we need to import and use it.

import useCounter from './useCounter'const { count, increment } = useCounter()

NB
When importing a module:

import xxx from '...'

When importing a specific named export:

import { xxx } from '...'

Key Points

Use dynamic v-if if we have many components.

Use composables to make use of reusable logic in Vue.

JavaScript Concept

Olayemi Elsie — Fri, 30 Jan 2026 14:21:09 +0000

One of the first and most important concepts you encounter in JavaScript is variables

JavaScript provides three main ways to declare variables:

var,
let, and
const

While they may look similar, they behave very differently.

Variable

A variable is like a container that holds a value. You give it a name so you can reference or update that value later in your code.

Example:
let age = 16;

Here, age is assigned to a value of 16.

var – The Old Way: var is the older method of declaring variables in JavaScript.

Key features of var:

Function scoped
Can be redeclared
Can be updated

Example:
Redeclaration
var fruit = "orange"; // declearation
var fruit = "apple"; //redeclearation
console.log(fruit); // apple

Making update
var fruit = "orange";
fruit = "apple"; // update
console.log(fruit); // apple

Redeclaring a variable may overwrite values unexpectedly, making bugs harder to track.

let – This was introduced to fix many of the problems caused by var.

Key features of let:

Block scoped can be updated
redeclared.

Example:
let age = 16; // declaration
age = 17; // updating (allowed)
console.log(age); // 17

// Redeclaring in the same scope will cause an error:
let age = 16;
if (true) {
let age = 18; // allowed, block-scoped
}

const – const is used for Fixed Values. const is used for values that should never change.

Key features of const:

Block scoped,
Cannot be updated and
Cannot be redeclared.
It Must be initialized immediately

Example:

const country = "Nigeria";

Using the correct variable type helps:

Prevent bugs
Make your code more readable
Improve maintainability

Best Practices for Declaring Variables in JavaScript:

Use const by default — for values that should not change.
Use let only when you need to update or reassign a variable.
Avoid var in modern JavaScript to prevent unexpected redeclarations and scope issues.

Forem: Olayemi Elsie

My Learning Journey as a Developer

Vue 3 Task Manager App: Problem-Solving Approach

Component Composition & State Flow

{{ title }}

State Management

Events

JavaScript Concept