🤓 Design Pakialamero Ep. 01: Kalibrr Skill Cards

paulo-p — Thu, 24 Aug 2023 08:14:40 +0000

Pakialamero is a Filipino word that means meddler or busybody.

Hello everyone! I've dabbled too much in the backend, and I am itching to write front end code on my free time, so today we will be medicating ourselves with making stuff that may or may not look better.

The Guest

To start off this series, I will be looking at this cool website called Kalibrr, it's an app for looking for jobs (I'm open to hire!). Specifically, their skills component in their profile route.

Amazing, very professional looking. But I think it lacks a bit of flair. Firstly, it's pretty hard to distinguish between different levels of skill, and secondly, it's even harder if someone is visually impaired or looking from afar. Also yes, I completely understand that this is a nitpick.

Now I for one, am an advocate for showing important information more visually. In my opinion, a design is good, if even when you're looking at it from afar, it's instantly recognizable and intuitive.

What did I do?

I added a bit of color to distinguish between levels, and in order to make the knowledge of skills more intuitive, I added a little bar on top of the card.

Here I added my favorite JavaScript framework called PHP. It's a great language to learn on!

Here is the full set:

Love all those JavaScript libraries. They're all amazing.

Here it is from afar:

I feel like jobseekers and recruiters will benefit from this. It may show a better summary of someone's skills, and the recruiters will spend less time looking at someone's background in technical skills.

What do you think?

Does my design look better? Or have I broken too much design consistency for the page? I believe the small sacrifice is needed for more informative content. Let me know what you think!

PS. If you haven't already known,

I use TailwindCSS, btw. And for those who are annoyed with all that ugly-ass HTML that comes with it, go download inline-fold on VSCode.

Mimic a Desktop Window Using Vue

paulo-p — Wed, 19 Jul 2023 04:13:04 +0000

I want to make a draggable Windows-type component in my app. So today we'll be doing just that with v-drag.

Step 1: Initialize a Vue app.

npm init vue@latest window-vue
cd window-vue
npm install

Step 2: Install TailwindCSS, Font Awesome Icons, and v-drag!

We'll use Tailwind and FontAwesome to style our component.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now go to your tailwind.config.js file and paste this.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Paste this into your src/assets/main.css file...

@tailwind base;
@tailwind components;
@tailwind utilities;

Then install Font Awesome Icons for beautiful logos...

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest-3

Step 3: Install and use the last library `v-drag`.

npm install v-drag

Now that you have v-drag, let's set it up on our src/main.js or src/main.ts.*

*Note: If you're using Typescript, add a src/declarations.d.ts file anywhere inside your src/ folder.
Inside your src/declarations.d.ts, add this bit declare module "v-drag";

// ...
import App from './App.vue'
import router from './router'
import drag from "v-drag";

const app = createApp(App)
app.use(router)
app.use(drag)

app.mount('#app')
// ...

Step 4: Time to make something cool.

We'll only be using Font Awesome's fa-circle logo.

To make something draggable, we just use the v-drag directive to move it around.

<script setup lang="ts">
import { faCircle } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faCircle);
</script>

<template>
  <div v-drag>
    Hello! Drag me.
  </div>
</template>

Now that we know how to use v-drag, let's add in a few styling on our component!

<script lang="ts" setup>
// ...
const handleWindow = {
  handle: "#window-handle" // Will be the only element that can be clicked to drag the entire v-drag.
}
</script>

<template>
  <main class="bg-black w-screen h-screen relative text-gray-200 overflow-hidden">
    <div v-drag="handleWindow" class="bg-slate-950 max-w-2xl border rounded-lg absolute w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
      <div class="flex border-b">
        <div class="flex items-center px-2 w-full" id="window-handle">
          <p>Window in Vue</p>
        </div>
        <div class="w-fit text-xs flex items-center justify-end px-2">
          <font-awesome-icon class="ml-2" icon="fa-solid fa-circle" />
          <font-awesome-icon class="ml-2" icon="fa-solid fa-circle" />
          <font-awesome-icon class="ml-2" icon="fa-solid fa-circle" />
        </div>
      </div>
      <div class="p-4">
        <h1 class="text-lg">Need Money</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae velit eaque, sunt temporibus expedita alias accusamus mollitia ut qui quasi cumque facere. Deserunt incidunt voluptate iste ex laudantium recusandae nostrum!</p>
      </div>
    </div>
  </main>
</template>

v-drag accepts an options object containing handle that will be used to point to an element that can be used to drag the entire element using v-drag.

So I guess that's it!

DEV Community: paulo-p