DEV Community: prodbyola

Vue3 Navigation, State Management and Form handling

prodbyola — Mon, 06 May 2024 11:09:23 +0000

This is the second part of a series of posts An Easy and Comprehensive Guide to Vue3. The goal is to provide a gentle pratical introduction to Vue3. You would find the first part here. You need to read this first part. You can also find the project's source code here.

Layout

In the first part of this tutorial, our App.vue contains a RouterView component. We need to build a layout around this view. Layout components are components shared across multiple pages in our app.

App Header

First let's create an AppHeader component.

Create a folder src/components/common and component src/components/common/AppHeader.vue.
Add this code to AppHeader.vue file:



<template>
  <header>
    <h3 class="app_title">todo</h3>
    <div class="add_icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
        <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
      </svg>
    </div>
  </header>
</template>

<style lang="scss" scoped>
  $add_icon_size: 38px;

  header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;

    .app_title {
      font-weight: bold;
      font-size: 1.64rem;
    }

    .add_icon {
      svg {
        height: $add_icon_size;
        width: $add_icon_size;
        fill: rgb(100, 99, 99);
      }
    }

    .add_icon,
    .app_title {
      cursor: pointer;
    }
  }
</style>

Now import and use AppHeader component in App.vue:



<template>
  <AppHeader />
  <RouterView />
</template>
<script setup lang="ts">
  import AppHeader from './components/common/AppHeader.vue'
</script>

App Sidebar

It's time to add Sidebar to our app layout. The sidebar will display a list of available categories for our tasks. So let's create a TodoCategory component:

Create src/components/TodoCategory.vue and add the following code:



<template>
  <div class="app_category">
    <div class="cat_color"></div>
    <p class="cat_title" v-if="title">{{ title }}</p>
  </div>
</template>

<script lang="ts" setup>
  defineProps<{
    title?: string
    color: string
  }>()
</script>

<style lang="scss" scoped>
  .app_category {
    display: flex;
    column-gap: 16px;
    align-items: center;
    cursor: pointer;

    .cat_color {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: v-bind('color');
    }

    .cat_title {
      font-size: 0.86rem;
    }
  }
</style>

Notice how we pass data from our component's props to our style section using v-bind? This is an interesting vue feature. You can directly pass data from Javascript to CSS without losing the naturality of your component structure!

Create the sidebar component in src/components/common/AppSidebar.vue and add this code:



<template>
  <div class="app_sidebar">
    <TodoCategory
      v-for="(cat, index) in categories"
      :key="index"
      :color="cat.color"
      :title="cat.title"
    />
  </div>
</template>

<script setup lang="ts">
  import TodoCategory from '../TodoCategory.vue'

  const categories = [
    { title: 'work', color: 'rgba(137, 43, 226, 0.308)' },
    { title: 'study', color: 'rgb(117, 242, 250)' },
    { title: 'entertainment', color: 'rgb(247, 147, 148)' },
    { title: 'family', color: 'rgb(184, 255, 179)' }
  ]
</script>

<style>
  .app_sidebar {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
  }
</style>

With this code, we create a list of categories and iteratively display them using TodoCategory component.

Now let's update our App.vue component to adjust our layout and import AppSidebar:



<template>
  <AppHeader />
  <main class="app_main">
    <AppSidebar class="app_sidebar" />
    <div class="app_content">
      <RouterView />
    </div>
  </main>
</template>
<script setup lang="ts">
  import AppHeader from './components/common/AppHeader.vue'
  import AppSidebar from './components/common/AppSidebar.vue'
</script>
<style lang="scss" scoped>
  .app_main {
    display: flex;

    .app_sidebar {
      width: 20%;
    }

    .app_content {
      flex: 1;
    }
  }
</style>

Our dynamic page contents will be handled and displayed by RouterView while AppHeader and AppSidebar will remain static throughout the app. Let's proceed to the next section to see how this works.

Navigation

VueJs uses vue-router to manage navigation within our apps. Let's create another page and programatically navigate between two pages.

Create a new file component, a view where we'll be adding new tasks to our app src/views/CreateTaskView.vue, then add the following code. We'll update the code later but let's take this as a new page:



<template>
  <h3>Create Task Page</h3>
  <p>This page will be used to create new tasks.</p>
</template>

Now update your src/router/index.ts file to import CreateTaskView and map it to a router path:



import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import CreateTaskView from '@/views/CreateTaskView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/create-task',
      name: 'create-task',
      component: CreateTaskView
    }
  ]
})

export default router

Now go to src/components/common/AppHeader, create a script section like below and update your template code:



<template>
  <header>
    <h3 @click="goToRoute('home')" class="app_title">todo</h3>
    <div @click="goToRoute('create-task')" class="add_icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
        <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
      </svg>
    </div>
  </header>
</template>

<script setup lang="ts">
  import router from '@/router'

  const goToRoute = (name: string) => router.push({ name })
</script>

Firstly, in the script tag, we create a new function goToRoute that accepts the destination route's name as parameter. If you go back and check src/router/index.ts, you would notice we have a name property on each defined route. You can pass a name as part of the options for router.push() and vue will take you to the destination.

Secondly, we added Click Event to both app_title and add_icon elements which respectively call goToRoute and supply the destination route names.

Now save your project, click on add_icon and you'll see this takes you to CreateTaskView. Click on app_title and it will take you back to the HomeView.

Local State Management

Before we build out the form for creating a new task, let's do a quick introduction to state management in VueJs. Think of a state as a piece of data which when updated, its changes is reflected in the UI.

Ref API

We can use vue's ref to convert a Javascript value to a vue state. As an example, let's update our CreateTaskView with this code:



<template>
  <h3>Create Task Page</h3>
  <p>My state {{ count }}.</p>
  <button @click="increment">Increment</button>
</template>

<script setup lang="ts">
  let count = 0
  const increment = () => {
    counter++
    console.log(counter)
  }
</script>

We create a variable count and function increment for incrementing count variable. Additionally, we log the current value of count. In the template, we display the value of count in increment and then add a button which calls increment everytime it's clicked.

Navigate to http://localhost:5173/create-task (if you're not there already) and click on the Increment button. Nothing seems to be happening right? If you open your browser's inspection tool and check the console tab however, you'll notice the value of count is continuously updated as you click on the button. The changes is not reflected on the UI because you didn't "mark" the count value as a state.

Now let's update the script section of our code:



<script setup lang="ts">
  import { ref } from 'vue'

  let count = ref(0)
  const increment = () => {
    count.value++
    console.log(count)
  }
</script>

We wrap the value of count in vue's ref function. This marks count as a state whose changes should reflect on the UI. To access the actual value of count within our Javascript code, we need to get the value property this way count.value. This is because ref(data) returns a Ref<T> object where T is the type of data. To access or update the actual data value, you need to get the value property. Now click the Increment button again and you'll see your changes reflecting.

Notice that calling the value property is not required within the template.

Reactive API

What if a state is an object with many properties? Calling obj.value.property to access/update each property may seem ineffecient. Let's demonstrate how using reactive instead of ref resolves this issue. Update your CreateTaskView with this code:



<template>
  <h3>Create Task Page</h3>
  <p>Your name is {{ person.name }}.</p>
  <p>Your age is {{ person.age }}.</p>
  <button @click="update">Update Person</button>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'

  const restore = ref(false) // whether to restore `person` state to default value

  const defaultDetails = {
    name: 'guest',
    age: 0
  }

  let person = reactive(structuredClone(defaultDetails))

  const update = () => {
    if (restore.value) {
      person.name = defaultDetails.name
      person.age = defaultDetails.age

      restore.value = false
      return
    }

    person.name = 'Falola'
    person.age = 54
    restore.value = true
  }
</script>

This code attempts to toggle between two person object values. When restore is true, we set person to defaultDetails. Otherwise, we update the properties of person with some values. Your real-world implementation may be simpler. For example, we had to create a deep clone of defaultDetails (using Javascript's structuredClone) because we need to use its original data to restore the value of person. The main lesson here is that we're able to access/update the properties of person state in the same way we would access/update a normal Javascript object.

V-Model

All the state changes we've observed so far are one-directional. They're based on changes triggered by our Javascript code. That is, changes only flow from script to template. What if we want to update a state based on, say user-input? Vue's v-model helps us bind user input fields to Javascript state, without the need to manually watch and update input values through events. Let's see v-model in action. Replace CreateTaskView with the following code:



<template>
  <h3>Create Task Page</h3>
  <p>Your name is {{ person.name }}.</p>
  <p>Your age is {{ person.age }}.</p>
  <input placeholder="Name" v-model="person.name" />
  <input placeholder="Age" v-model="person.age" type="number" />
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  let person = reactive({
    name: 'guest',
    age: 0
  })
</script>

Now we have two input fields, each binded to the properties of person state and changes made through the fields are automatically reflected in our template.

Creating Forms

With our understanding of vue's ref, reactive and v-model we can now build our form for creating new tasks.

Sharing Modules

First let's create a module that will hold data model shared across our app.

Create a new typescript file at src/shared.ts
Now go to src/components/common/AppSidebar.vue and cut (instead of copy) the categories array that we created earlier. Paste and export the categories array in the newly created shared.ts file:



export const categories = [
  { title: 'work', color: 'rgba(137, 43, 226, 0.308)' },
  { title: 'study', color: 'rgb(117, 242, 250)' },
  { title: 'entertainment', color: 'rgb(247, 147, 148)' },
  { title: 'family', color: 'rgb(184, 255, 179)' }
]

Now you can use the categories array anywhere in your app by import. Let's import it back into AppSidebar.vue:



<!-- Leave your template -->
<script setup lang="ts">
  import { categories } from '@/shared'
  import TodoCategory from '../TodoCategory.vue'
</script>
<!-- Leave your style -->

At this point, it's cool to rename our categories array to tags. If you're using VSCode, go to src/shared.ts, move your cursor on top of categories variable declaration and press F2 key. Rename categories to tags. This will rename the variable in all the imports.
Another thing we need to do is create and export a TaskType model that we'll use to define our task later. Add this typescript type declaration to shared.ts module after tags array:



export type TaskType = {
  title: string
  description: string
  done: boolean
  tags: string[]
}

Your full shared.ts should now look like this: ```ts

export const tags = [
{ title: 'work', color: 'rgba(137, 43, 226, 0.308)' },
{ title: 'study', color: 'rgb(117, 242, 250)' },
{ title: 'entertainment', color: 'rgb(247, 147, 148)' },
{ title: 'family', color: 'rgb(184, 255, 179)' }
]

export type TaskType = {
title: string
description: string
done: boolean
tags: string[]
}


###### Create Custom Field and Button

We need to create a custom reusable input field for our form.

- Create a new SFC at `src/components/common/InputField.vue` and add the following `template` and `script`:

```html


<template>
  <div class="app_field">
    <h3 class="field_label">{{ label }}</h3>
    <textarea v-if="type === 'textarea'" v-model="model" :placeholder="placeholder"></textarea>
    <input v-else :type="type" v-model="model" :placeholder="placeholder" />
  </div>
</template>

<script setup lang="ts">
  defineProps<{
    label: string
    type?: string
    placeholder?: string
  }>()

  const model = defineModel({ type: String })
</script>

As you may have noticed, we render a textarea tag or an input tag, based on whether the type prop of our component is "textarea" or any other string. In other words, if the prop is "textarea", we show a textarea tag else, we show input tag. Notice how we use v-if and v-else to handle this condition.

Another thing you would notice is how we use vue's defineModel API (instead of ref) to create a model variable which we then pass to our input and textarea v-model. We use defineModel here because we want our InputField component to emit its changes to its parent component, so any parent can collect changes to model by binding their own variable to InputField's v-model. We'll see all of this in action very soon.

Now add the following style to InputField:



<style lang="scss" scoped>
  .app_field {
    width: 100%;
    margin-bottom: 32px;

    .field_label {
      font-weight: 500;
      margin-bottom: 8px;
    }

    input {
      height: 42px;
    }

    textarea {
      height: 126px;
    }

    input,
    textarea {
      width: 100%;
      outline: none;
      border: none;
      background-color: rgb(241, 240, 240);
      border-radius: 8px;
      padding: 8px 16px;
    }
  }
</style>

Let's create a custom button for our app. Create an SFC at src/components/common/AppButton.vue and paste the following code:



<template>
  <button>{{ text }}</button>
</template>

<script setup lang="ts">
  defineProps<{
    text: string
  }>()
</script>

<style lang="scss" scoped>
  button {
    border: none;
    outline: none;
    color: white;
    background-color: rgb(100, 99, 99);
    height: 42px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
  }
</style>

Build New Task Form

It's time to build out our new task form.

Clear everything we've written in src/views/CreateTaskView.vue and add the following template:



<template>
  <div class="create_task">
    <div class="create_task__form">
      <h2 class="form_title">Create New Task</h2>
      <InputField label="Title" v-model="newTask.title" placeholder="add a title..." />
      <InputField
        label="Description"
        v-model="newTask.description"
        placeholder="add a description..."
        type="textarea"
      />
      <div class="tag_list">
        <TodoCategory
          v-for="(cat, index) in categories"
          :key="index"
          :title="cat.title"
          :color="cat.color"
          class="task_tag"
          :class="{
            active: newTask.tags.includes(cat.title)
          }"
          @click="() => toggleTag(cat.title)"
        />
      </div>
      <AppButton @click="addTask" class="action_btn" text="Add Task" />
      <div v-if="tasks.length" class="task_list">
        <div v-for="(task, index) in tasks" :key="index" class="task_card">
          <p>{{ task.title }}</p>
          <p @click="deleteTask(index)" class="del">Delete</p>
        </div>
      </div>
    </div>
  </div>
</template>

This template uses our custom InputField twice - one for text field and another for textarea. In both cases, we're binding the field's input to a property of newTask object. Now you should understand why we used defineModel in our InputField earlier. Using defineModel makes it possible for InputField to emit changes to model on the fly.

Now let's add our script section. Please study the code and see if you could learn some things:



<script setup lang="ts">
  import { reactive } from 'vue'
  import type { TaskType } from '@/shared'
  import { tags } from '@/shared'

  import InputField from '@/components/common/InputField.vue'
  import TodoCategory from '@/components/TodoCategory.vue'
  import AppButton from '@/components/common/AppButton.vue'

  const defaultTask: TaskType = {
    title: '',
    description: '',
    done: false,
    tags: []
  }

  let newTask = reactive(structuredClone(defaultTask))

  const tasks = reactive<TaskType[]>([])

  const isEmpty = (v: string) => v.length === 0

  const addTask = () => {
    // validate input
    if (isEmpty(newTask.title) || isEmpty(newTask.description)) {
      return
    }

    tasks.splice(0, 0, newTask)
    newTask = reactive(structuredClone(defaultTask))
  }

  const deleteTask = (i: number) => tasks.splice(i, 1)

  const toggleTag = (tag: string) => {
    const f = newTask.tags.find((t) => tag === t)
    if (f) {
      const i = newTask.tags.indexOf(f)
      newTask.tags.splice(i, 1)
    } else {
      newTask.tags.push(tag)
    }
  }
</script>

Lastly, let's style our form:



<style lang="scss" scoped>
  .create_task {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .create_task__form {
      width: 50%;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      max-width: 440px;

      .form_title {
        font-weight: bold;
      }

      .tag_list {
        display: inline-flex;
        column-gap: 24px;

        .task_tag {
          padding: 4px 8px;
        }

        .task_tag.active {
          background-color: rgb(218, 218, 218);
          border-radius: 4px;
        }
      }

      .action_btn {
        margin-top: 36px;
        float: right;
        width: 180px;
      }

      .task_list {
        width: 100%;
        margin-top: 32px;

        .task_card {
          display: inline-flex;
          width: 100%;
          padding: 16px 12px;
          border-bottom: 1px solid rgb(201, 201, 201);
          justify-content: space-between;
          align-items: center;

          .del {
            color: red;
            font-size: 0.86rem;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>

In our next lesson, we'll learn about global state management in VueJs. If you would like to connect, please contact me.

An Easy, Comprehensive and Practical Guide to Vue3

prodbyola — Fri, 26 Apr 2024 08:44:39 +0000

Vue.js is a popular open-source JavaScript framework used for building user interfaces and single-page applications. If you already understood the basics of HTML, CSS and Javascript/Typescript, then using VueJS is going to be all familiar to you. In this tutorial, we'll learn how to build interactive web apps using Vue. You can find the project's source code here.

Technical Prerequisite

It is required that you have the following tools installed in order to follow this tutorial.

Latest VSCode (or an IDE of your choice).
Latest NodeJS.
Latest Yarn (or any other Javascript package manager).

Knowledge Prerequisite

A basic understanding of HTML, CSS and Javascript/Typescript is required for this tutorial.

Create Vue Project

The first thing we're going to do is create a new Vue project:

Now open your VSCode, press Ctrl + J to open the terminal and type yarn create vue@latest into the terminal. Press Enter key.
Answer the prompts as below. Use arrow keys to navigate left/right when selecting your answers:

When you're done, type cd todo && yarn install to install the project dependencies.
Now type yarn add sass to add support for SCSS.
Type code . to load the project in VSCode. Notice the . after "code".
Once VSCode opens your new project, press Ctrl + J and type yarn dev. Your project will be launched on http://localhost:5173/.
If all went well, then you should see a page like below in your page.

Press Ctrl + C from the terminal to close your project server.

Project Structure

Before we go further, let me quckly introduce you to the src folder in your project.

App.vue is the base vue Single File Component(SFC) that holds your project together. Every component (or vue file) is an SFC. We'll talk about SFCs later but keep in mind that a Vue Component is a reusable and self-contained unit of Vue file that encapsulates a piece of UI functionality. For example, to create a custom reusable Button, you may create a simple Vue Component like AppButton.vue which will contain all the layout, styling and functionalities of the button.
The src/components folder is where you'll keep all your small units of UI (components).
The src/views folder is where you'll keep your app pages.
The src/router is where we configure the app navigation i.e, which route leads to which page.
src/stores is where we write app's global states. You'll learn more about this later.
src/assets is where we keep static assets like fonts, css and sometimes, images.

Technically, every box in the image is a vue component or SFC but we generally refer to Component.vue boxes as "components". In this structure, App.vue is the main app, HomeView.vue and AboutView.vue are different pages within the app and every Component.vue is a vue-styled UI component within each page. This is similar to how HTML DOM tree is structured: parents, children, siblings...etc.

Prepare to Build

Now let's take some steps to prepare our project for building:

Go to src/components folder and delete all the files and folders inside as we won't be needing them.
Now go to src/views folder and delete AboutView.vue file. We won't be needing that as well.
Our app router (navigator) will try to locate AboutView.vue and we get an error because we've deleted the file. To fix this, go to router/index.ts and delete the lines as in the red box:

Now go to src/views/HomeView.vue and replace the existing code with this:

<template>
  <div></div>
</template>

Go to src/App.vue and replace the existing code with this code:

<template>
  <main>
    <RouterView />
  </main>
</template>

We'll be using Google font Poppins in our app. We can import this font from Google's CDN. Go to src/assets/main.css and paste this at the top of the file @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');. Then add this CSS code to the file (below all import statements):

body {
  font-family: 'Poppins', sans-serif;
  color: rgb(100, 99, 99);
}

Now your project should be empty and you're ready to start building.

Create Your First SFC

It's time to create your First UI component, an SFC. Vue's Single File Component allows you to define the HTML, CSS and Javascript sections of your UI in just one file. You define the HTML in template tag, CSS in style tag and Javascript in script tag. Let's see how that works:

Create a file src/components/TodoCard.vue;
Put this HTML section in the file:

<template>
  <div class="todo_card">
    <h3 class="task_title">Buy groceries</h3>
    <p class="task_details">
      I'll be visiting FoodCo this afternoon to stock more Milk, eggs, bread and fruits for this
      week. Don't forget to get Elubo and Garri😂
    </p>
    <div class="tdc_footer">
      <div class="task_cat"></div>
      <div class="task_done">
        <input type="checkbox" />
        <p>Done</p>
      </div>
    </div>
  </div>
</template>

Now add this CSS section after the template tag:

<style lang="scss" scoped>
  .todo_card {
    width: 370px;
    font-size: 0.92rem;
    background-color: rgba(255, 255, 0, 0.289);
    padding: 18px 28px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

    .task_title {
      font-size: 1.2rem;
      font-weight: 500;
    }

    .task_details {
      margin: 8px auto 24px auto;
      height: 70px;
    }

    .tdc_footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .task_cat {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(137, 43, 226, 0.308);
      }

      .task_done {
        display: inline-flex;
        align-items: center;
        column-gap: 8px;
        cursor: pointer;
      }
    }
  }
</style>

Notice the scoped attribute on the style tag? This tells Vue to apply the style to elements ONLY in this particular component. If you want the style to be applied globally, remove the scoped attribute. Save your file.

Now let's import our component and display it on HomeView.

Go to src/views/HomeView.vue and add the typescript section to import TodoCard.vue:

<script setup lang="ts">
  import TodoCard from '@/components/TodoCard.vue'
</script>

Did you notice the setup attribute on the script tag? This makes the script tag to use Vue's Composition API which we'll use to interact with Vue's reactive APIs. More of this later.

Now use TodoCard component in the template of HomeView:

<template>
  <div>
    <TodoCard />
  </div>
</template>

Save HomeView file and run yarn dev in the terminal to relaunch your app.

Now we can say HomeView is the parent component of TodoCard because the former now hosts the latter.

Interpolation and Data Binding

It's time to share data between the HTML and Javascript sections of your component. The is known as data interpolation or data binding. It means you can declare a variable in script tag and attach its value to an HTML element in template tag for display. For example, let's create our task data as Javascript variables and render them in HTML. Go to src/components/TodoCard.vue and script tag below the style tag:

<script setup lang="ts">
  const taskTitle = 'Buy groceries'
  const taskDetails =
    "I'll be visiting FoodCo this afternoon to stock more Milk, eggs, bread and fruits for this week. Don't forget to get Elubo and Garri😂"
</script>

Now replace the original contents in HTML with those Javascript variables this way:

<template>
  <div class="todo_card">
    <h3 class="task_title">{{ taskTitle }}</h3>
    <p class="task_details">{{ taskDetails }}</p>
    <div class="tdc_footer">
      <div class="task_cat"></div>
      <div class="task_done">
        <input type="checkbox" />
        <p>Done</p>
      </div>
    </div>
  </div>
</template>

Save your file and you'll see your app is working. Notice how we surround the Javascript variable name with double curly brackers {{ }} to distinguish from literal HTML content. Of course we can combine this with raw HTML contents:

<h3 class="task_title">Task title is {{ taskTitle }} for this task</h3>

We can also bind Javascript variable to HTML attributes. Ok, let's say our h3 tag has an id attribute:

<h3 id="task-title" class="task_title">{{ taskTitle }}</h3>

We can pass attribute value from Javascript to this tag using vue's v-bind directive shorthand:

<template>
  ...
  <h3 :id="taskId" class="task_title">{{ taskTitle }}</h3>
  ...
</template>

<script setup lang="ts">
  const taskId = "task-001"
  ...
</script>

With this, the id attribute of the h3 tag will now be "task-001". Notice the : before the attribute. That's how we tell HTML that we're about to pass Javascript as the attribute's value. This can help us to manipulate HTML contents dynamically as we'll see soon.

Props

Let's say we want to define a task object in the parent component HomeView and display the object using TodoCard. So instead of rendering our task data directly from TodoCard, we define an object that represents this data in HomeView and pass it to TodoCard. We can achieve this with props. Props is how we pass data from parent components to child components:

Define task object in HomeView. We still have the same data as before, except we now have it in an object with an extra done member to indicate whether the task is done. We'll use this later:

<template>
  <div>
    <TodoCard />
  </div>
</template>

<script setup lang="ts">
  import TodoCard from '@/components/TodoCard.vue'

  const task = {
    title: 'Buy groceries',
    details:
      "I'll be visiting FoodCo this afternoon to stock more Milk, eggs, bread and fruits for this week. Don't forget to get Elubo and Garri😂",
    done: false
  }
</script>

Now we need to pass this data down to TodoCard but first, we should define the props signature that TodoCard must accept. Update the script section of TodoCard.vue:

<script setup lang="ts">
  defineProps<{
    title: string
    details: string
    done: boolean
  }>()
</script>

Now any parent component that uses TodoCard must supply values to these props as attributes. Let's update TodoCard template to display the props data:

<template>
  <div class="todo_card">
    <h3 class="task_title">{{ title }}</h3>
    <p class="task_details">{{ details }}</p>
    <div class="tdc_footer">
      <div class="task_cat"></div>
      <div class="task_done">
        <input type="checkbox" :checked="done" />
        <p>Done</p>
      </div>
    </div>
  </div>
</template>

Update our usage of TodoCard in HomeView to receive the props:

<template>
  <div>
    <TodoCard :title="task.title" :details="task.details" :done="task.done" />
  </div>
</template>

Iteration

Our task at the moment is just one hardcoded task object. But we'll have multiple tasks in our app. We can simulate this by creating an array of tasks and display them all using the same TodoCard component and v-for directive.

In HomeView, let's create a tasks array that contains 3 task objects:

<script setup lang="ts">
  import TodoCard from '@/components/TodoCard.vue'

  const tasks = [
    {
      title: 'Buy groceries',
      details:
        "I'll be visiting FoodCo this afternoon to stock more Milk, eggs, bread and fruits for this week. Don't forget to get Elubo and Garri😂",
      done: false
    },
    {
      title: 'Finish homework',
      details: 'Math assignment and essay due tomorrow. I have to complete them tonight.',
      done: true
    },
    {
      title: 'Call mom',
      details: "Wish her a happy birthday and remind her to get dad's pair of glasses.",
      done: false
    }
  ]
</script>

Now let's use vue's v-for directive to iterate over each task object in tasks and pass them to TodoCard for display:

<template>
  <div>
    <TodoCard
      v-for="(task, index) in tasks"
      :key="index"
      :title="task.title"
      :details="task.details"
      :done="task.done"
    />
  </div>
</template>

Notice how we add an extra key attribute that accepts index, which is the unique index of an item in the array. The key attribute is required by vue to uniquely identified each item in the DOM when you create a loop using the v-for directive.

We need to lay our items out horizontally. Let's place them in a CSS flex container.

Create style section in HomeView:

<style lang="scss" scoped>
  .task_list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
    width: 100%;
  }
</style>

Now update the template so the contents are placed within task_list:

<template>
  <div class="task_list">
    <TodoCard
      v-for="(task, index) in tasks"
      :key="index"
      :title="task.title"
      :details="task.details"
      :done="task.done"
    />
  </div>
</template>

Lastly, update src/assets/main.css so that this is all you have:

@import './base.css';
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

body {
  font-family: 'Poppins', sans-serif;
  color: rgb(100, 99, 99);
}

We're not done exploring! Proceed to Part 2.

If you would like to connect, please contact me.

CSS: Punching Through the Surface

prodbyola — Wed, 17 Jan 2024 09:59:06 +0000

While working on Cobhams Player, I needed to design a surface that gives an impression that it's been punched through. I expected the implementation of this effect to be quite straightforward in CSS. Turns out I was wrong for my use case. I ended up with my own implementation. However, I came across a certain CSS property which has proven useful in this regard: background-attachment. Let's see how it works.

<div class="container">
   <div class="surface">
       <div class="hole"></div>
   </div>
</div>

Our HTML code has a main container, a surface that we need to "punch through" and the hole we're punching. And here's our CSS code:

.container {
    padding: 28px;
    width: 100%;
}

.surface {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 300px;
    height: 300px;
    margin: auto;
}

.hole {
    height: 150px;
    width: 150px;
    border-radius: 50%;
}

As you can see, our black surface is yet to show a hole, so let's make it happen. It's quite straightforward if our container's background has a plain color, say blue. We only need to add the same background to the hole:

.container {
    padding: 28px;
    width: 100%;
    background: blue; // <-- add this
}

.hole {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: blue; // <-- add this
}

But what happens if our surface has say a gradient background?

So can we solve this by adding the same gradient to the hole?

Looks better right? But it doesn't really look much like a hole through to the background. This is where background-attachment: fixed; can be of help:

.hole {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: linear-gradient(239deg,#de2134 27.11%,#38bf8e 73.91%);
    background-attachment: fixed; // <-- Add this
}

That's it. Now we've successfully created a hole that punches through.

Thank you for reading. Let me know what you think.

You're a Programmer, not a Linguist

prodbyola — Fri, 12 Jan 2024 19:53:33 +0000

I often encourage my students to be more open-minded, to think of a programming language as a tool. The main job is not to acquaint ourselves with a programming language...

When you begin your journey as a programmer, you'd most likely have a primary programming language of choice. For example, most Data Analysts would begin with Python, Web Frontend Developers with JavaScript, Android Developers with Java/Kotlin, iOS Developers with Objective-C/Swift, and so on. It's even more so once you choose a go-to framework or library: Laravel for PHP, Flutter for Dart, Flask for Python, Gin for Go, or React for JavaScript. At this point, programmers tend to be more used to a certain language than others, so we get tagged as “JavaScript Developer,” “Python Programmer,” or “Rust Developer.” Then you would generally see this in how we passionately argue and defend our language of choice as the best programming language ever designed.

I often encourage my students to be more open-minded, to think of a programming language as a tool. The main job is not to acquaint ourselves with a programming language but to write a program that does what it’s meant to do, and sometimes, better than it should. Adopting this mindset could be helpful for beginner programmers and even for “Senior ‘Language’ Developer." Does it mean we shouldn’t have an area of specification or a favorite programming language? Absolutely not! I have a favorite language depending on a specific task. We just need to realize that the whole world of programming does not revolve around a single programming language or a specific area. Therefore, it is important for us to see the greater picture, to understand common programming concepts beyond one language of choice.

This brings us back to why I encourage beginners to learn TypeScript instead of JavaScript. There are several of these concepts (like type hinting and polymorphism) that are abstracted away in JavaScript but are made available in TypeScript. The earlier we have a foundation in these things, the better programmers we tend to become.

Thanks for reading. I’d like to know what you think or if you have any question.

We have an 8-week Interactive LIVE CODING SESSIONS on Frontend Development coming up on Feb 5, 2024. Click here to get started https://wa.link/bmondb

Why learn Typescript as a Beginner?

prodbyola — Tue, 09 Jan 2024 11:27:02 +0000

Learn to write less buggy code!

In the world of frontend development for web, three tech in a stack play major roles – HTML, CSS and Javascript. Beginners usually find Javascript to be the most dreaded of them. With HTML and CSS, you simply learn how to lay out and design web pages, but Javascript introduces beginners to the core concepts of programming. You begin to write sequence of codes that tells the computer (Browser) what to do at certain point and time.

We could say Javascript is king of the web. But like every other programming language, it’s a king with its own flaws. Since this post is aimed at beginners, the goal is not to discuss the technical down sides of using Javascript. However, we’ll mention one particular flaw that is important for beginners to be aware of – which is the fact that Javascript is a dynamically typed language, which means it applies weak rules on programmers, which means you can write a terrible line of code and no compiler will complain, which means as a beginner it allows you to easily shoot yourself in the leg, which means you begin your programming journey by learning only to write mostly buggy codes.

For example, take a look at this Javascript code:

let number = 10;
let string = "5";

let result = number + string;

console.log(result); // Output: "105" instead of 15

Does that mean you cannot shoot yourself in the leg when writing in statically typed languages? Does that mean you cannot write buggy programs in other languages? No! The chances are just slimmer even if the learning curve is higher. An advanced Javascript programmer might have learnt the rope and know how to avoid certain runtime bugs but the concepts that make this journey less difficult for beginners are often avoided in Javascript. Typescript being a superset of Javascript (i.e built on top of Javascript) is desgined to address some of these issues... as we’ll see in upcoming Part Two of this post.

Thanks for reading. I’d like to know what you think or if you have any question.

We have an 8-week online practical Frontend Development training coming starting on Feb 5, 2024. Click here to get started https://wa.link/bmondb