DEV Community: Karlo Dela Rosa

Image source from Google Drive

Karlo Dela Rosa — Tue, 12 Jan 2021 12:37:52 +0000

This is just a short document on how we will use google drive images in <img> tag.

This is a working solution as of this day. I posted this answer in Stackoverflow last October 2020.

Steps

Upload your image to google drive.
Share your image from the sharing option.
Copy your sharing link (Sample: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
Copy the id from your link, in the above link, the id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
Have a look at the below link and replace the ID. https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

After Replace ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Now insert the link to your <img> tag.

Create a simple Deno + MySQL API

Karlo Dela Rosa — Wed, 20 May 2020 20:08:04 +0000

This is a simple concept of how we can make a REST API using Deno and Typescript.

Here's my simple RESTful API

If you are in a hurry just click here for the source code.

Here are the stacks:

Deno
Docker
MySQL

Why Docker?

Because I want you to experience real data manipulation using the database rather than text files or objects, so I provided a local Database.

Why I didn't containerize Deno?

Because I don't want Docker to be a bottleneck. If you don't want Docker, it's fine you can use your own DB and run Deno server alone. I'm just giving you options.

Let's Start

Install Deno:

curl -fsSL https://deno.land/x/install/install.sh | sh

Install Docker for local database (If you have personal DB, just use it and create the table needed)

Clone the repository:

git clone https://github.com/karlodelarosa/deno-rest-api.git

Run Deno:

deno run --allow-net --allow-read --allow-write index.ts

Run MySQL Container:

docker-compose up -d

You should be able to see a running container for MySQL and Adminer

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                     NAMES
fa3924041b59        adminer             "entrypoint.sh docke…"   6 seconds ago       Up 4 seconds        0.0.0.0:50000->8080/tcp   deno-adminer
7bf14f3a94ca        mysql:5.7.12        "docker-entrypoint.s…"   6 seconds ago       Up 4 seconds        0.0.0.0:3306->3306/tcp    deno-db

Open Adminer

localhost:50000

Credentials:

server: deno-db
user: root
password: root
db: deno-db

You should automatically see the user table and one test data

User Schema:

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `country` varchar(50) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Steps:

1. Create index.ts this will serve as our server for this App

import { Application } from 'https://deno.land/x/oak/mod.ts'
import router from './routes/routes.ts';

const app = new Application();

app.use(router.routes())
app.use(router.allowedMethods())

app.use((ctx) => {
  ctx.response.body = "Welcome to deno-rest-api";
});

await app.listen({ port: 8000 });

2. Connect to MySQL Database, create db/MySqlClient.ts

import { Client } from "https://deno.land/x/mysql/mod.ts";

const client = await new Client().connect({
  hostname: "localhost",
  username: "root",
  db: "deno-db",
  password: "root",
});

export default client

3. Create routes/routes.ts

import { Router } from 'https://deno.land/x/oak/mod.ts'
import { getAllUsers } from '../handler/getAllUsers.ts';
import { getUser } from '../handler/getUser.ts';
import { addUser } from '../handler/addUser.ts';
import { updateUser } from '../handler/updateUser.ts';
import { deleteUser } from '../handler/deleteUser.ts';

const router = new Router()

router.get("/users", getAllUsers)
.get("/user/:id", getUser)
.post("/user", addUser)
.put("/user/:id", updateUser)
.delete("/user/:id", deleteUser)

export default router

4. Create a contract, it's an Interface for our data model

export interface UserInterface {
    name: string;
    country: string
}

5. Create handlers, this will catch the requests and process the logics.

getAllUsers.ts

import client from '../db/MySqlClient.ts';
import { search } from '../repository/user.ts';

export async function getAllUsers ({ response }: { response: any }) { 
  const result = await search();
  response.body = result.rows;
}

getUser.ts

import client from '../db/MySqlClient.ts';
import * as doesUserExist from '../specification/doesUserExist.ts';
import { search } from '../repository/user.ts';

export async function getUser ({ params, response }: { params: any; response: any }) {
    const hasRecord = await doesUserExist.isSatisfiedBy(params.id);
    let status = 200;

    if (hasRecord) {
      const result = await search(params);
      response.body = result.rows;
    } else {
      response.body = { "error": "User not found!" };
      status = 400;
    }

    response.status = status;
};

addUser.ts

import client from '../db/MySqlClient.ts';
import { insert } from '../repository/user.ts';
import { UserInterface } from '../contract/userInterface.ts';

export async function addUser ({ request, response }: { request: any; response: any }) {
    const body = await request.body();
    const userInfo: UserInterface = body.value;
    let status = 200;

    if (userInfo.hasOwnProperty('name') && userInfo.hasOwnProperty('country')) {
      response.body = await insert(userInfo);
    } else {
      response.body = { "error": "Invalid request!" };
      status = 400;
    }

    response.status = status;
}

updateUser.ts

import client from '../db/MySqlClient.ts';
import * as doesUserExist from '../specification/doesUserExist.ts';
import { UserInterface } from '../contract/userInterface.ts';
import { update } from '../repository/user.ts';

export async function updateUser ({ request, response, params }: { request: any; response: any; params: any }) {
    const body = await request.body()
    const userInfo: UserInterface = body.value 
    const hasRecord = await doesUserExist.isSatisfiedBy(params.id);
    let responseMessage = {};
    let status = 200;

    if (hasRecord) {
      responseMessage = await update(userInfo.name, userInfo.country, params.id);
    } else {
      responseMessage = { "error": "User not found!" };
      status = 400;
    }

    response.body = responseMessage;
    response.status = status;
}

deleteUser.ts

import client from '../db/MySqlClient.ts';
import * as doesUserExist from '../specification/doesUserExist.ts';
import { remove } from '../repository/user.ts';

export async function deleteUser ({ params, response }: { params: any; response: any }) {
    const hasRecord = await doesUserExist.isSatisfiedBy(params.id);
    let responseMessage = {};
    let status = 200;

    if (hasRecord) {
      responseMessage = await remove(params.id);
    } else {
      responseMessage = { "error": "User not found!" };
      status = 400;
    }

    response.body = responseMessage
    response.status = status
}

6. Create specification. Read about Domain-Driven Design.

doesUserExist.ts

import client from '../db/MySqlClient.ts';

export async function isSatisfiedBy(id:number) {
    const result = await client.query(`SELECT COUNT(*) count FROM user WHERE id = ?`, [id]);
    return result[0].count >= 1;
}

7. Create the User Repository, this is where queries are stored for User APIs

user.ts

import client from '../db/MySqlClient.ts';

interface Key {
    id?: any
}

export async function search(params:Key = {}) { 
    const isSpecific = Object.keys(params).length !== 0;
    if (isSpecific) {
        return await client.execute(`SELECT * FROM user WHERE id = ?`, [params.id]);
    } else {
        return await client.execute(`SELECT * FROM user`);   
    }
}

export async function insert({ name, country }: { name: string; country: string }) {
    return await client.execute(`INSERT INTO user(name, country) values(?,?)`, [
        name, country
    ]);
}

export async function update(name: string, country: string, id: string) {
    return await client.execute(`UPDATE user SET name= ?, country= ? WHERE id = ?`, [
        name, country, id
    ]);
}

export async function remove(id: string) {
    return await client.execute(`DELETE FROM user WHERE id = ?`, [id]); 
}

Try it on POSTMAN.

Follow me on twitter

Source code: GitHub

Font Awesome 5 as a component for Vue JS

Karlo Dela Rosa — Mon, 04 May 2020 18:19:06 +0000

Introduction

Have ever you installed this package?

@fortawesome/fontawesome-free

And imported those packages like this?

import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";

And somehow, used the icons like this?

<i class="fa fa-image"></i>

If you encountered the same problem where the icons are not updating dynamically using these packages, this one is for you.

Solution

Use Font Awesome 5 Vue component
Full documentation

Step 1: Install packages

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

As you can see, there are different FontAwesome packages available for use.

Solid
Regular
Brands

If you are a Subsriber of Font Awesome Pro, you can install these packages as well.

$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

Step 2: Import

Go to your main js/ts file src/main.js or in my case, src/main.ts as an entry point file

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fab, fas, far);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

This will allow you to use all the icons inside those packages. But the documentation says it's still better to import the icon you just need to use.

Usage

After you have successfully imported the packages you should now be able to use them in your Vue template files.

Solid icons: @fortawesome/free-solid-svg-icons

<font-awesome-icon :icon="['fas', 'image']" />
<font-awesome-icon :icon="['fas', 'user']" />

Regular icons: @fortawesome/free-regular-svg-icons

<font-awesome-icon :icon="['far', 'image']" />
<font-awesome-icon :icon="['far', 'user']" />

Branch icons:@fortawesome/free-brands-svg-icons

<font-awesome-icon :icon="['fab', 'twitter']" />

Extra

You can also specify the icon you just want to use.

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faTwitter, faUserAstronaut, faUser);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Solid icons:

<font-awesome-icon icon="user-astronaut"/>

Regular and Brand icons should be implemented the same as the above

<font-awesome-icon :icon="['far', 'user']" />
<font-awesome-icon :icon="['fab', 'twitter']" />

The only difference is, you cannot use any icons aside from what icons are imported.

This codes should not show any icons on your page using specific icon imports

<font-awesome-icon :icon="['far', 'user-secret']"/>
<font-awesome-icon :icon="['fab', 'facebook']" />

For the full documentation of the installation just click this link

If you have questions, concerns, or additional about this topic, just send me a DM on my twitter.

Thank you! Happy coding!

Designing Step Progress using Tailwind CSS

Karlo Dela Rosa — Sat, 02 May 2020 12:49:36 +0000

This is a very simple component that will help you visualize your progress in a divided form.

Tailwind Version
tailwindcss@1.3.4

You should know how many steps you need in your website. Count them all including the arrows.

Step 1: Create a div portions (Text are just used for the div visualization)

<div>
    <h1 class="mb-4 text-center font-black text-gray-700">STEPS</h1>
    <div class="flex">
      <div class="w-1/3 text-center px-6">
        Step 1
      </div>
      <div class="flex-1 flex items-center justify-center">
        Arrow 
      </div>
      <div class="w-1/3 text-center px-6">
        Step 2
      </div>
      <div class="flex-1 flex items-center justify-center">
        Arrow
      </div>
      <div class="w-1/3 text-center px-6">
        Step 3
      </div>
    </div>
</div>

Steps 2: Design your progress step card

<div class="bg-gray-300 rounded-lg flex items-center justify-center border border-gray-200">
    <div class="w-1/3 bg-transparent h-20 flex items-center justify-center icon-step" >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.995 24h-1.995c0-3.104.119-3.55-1.761-3.986-2.877-.664-5.594-1.291-6.584-3.458-.361-.791-.601-2.095.31-3.814 2.042-3.857 2.554-7.165 1.403-9.076-1.341-2.229-5.413-2.241-6.766.034-1.154 1.937-.635 5.227 1.424 9.025.93 1.712.697 3.02.338 3.815-.982 2.178-3.675 2.799-6.525 3.456-1.964.454-1.839.87-1.839 4.004h-1.995l-.005-1.241c0-2.52.199-3.975 3.178-4.663 3.365-.777 6.688-1.473 5.09-4.418-4.733-8.729-1.35-13.678 3.732-13.678 4.983 0 8.451 4.766 3.732 13.678-1.551 2.928 1.65 3.624 5.09 4.418 2.979.688 3.178 2.143 3.178 4.663l-.005 1.241zm-13.478-6l.91 2h1.164l.92-2h-2.994zm2.995 6l-.704-3h-1.615l-.704 3h3.023z"/></svg>
    </div>
    <div class="w-2/3 bg-gray-200 h-24 flex flex-col items-center justify-center px-1 rounded-r-lg body-step">
        <h2 class="font-bold text-sm">Personal Info</h2>
        <p class="text-xs text-gray-600">
            Just your personal information
        </p>
    </div>
</div>

Step 3: Add arrows in between the steps (Inside the flex-1 class)

<div class="flex-1 flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z"/></svg>
</div>

Step 4: Just copy and paste the steps and arrows inside the divs we created from the first step.

And the final code will looks like this:

<div>
  <h1 class="mb-4 text-center font-black text-gray-700">STEPS</h1>
  <div class="flex">
    <div class="w-1/3 text-center px-6">
      <div class="bg-gray-300 rounded-lg flex items-center justify-center border border-gray-200">
        <div class="w-1/3 bg-transparent h-20 flex items-center justify-center icon-step">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.995 24h-1.995c0-3.104.119-3.55-1.761-3.986-2.877-.664-5.594-1.291-6.584-3.458-.361-.791-.601-2.095.31-3.814 2.042-3.857 2.554-7.165 1.403-9.076-1.341-2.229-5.413-2.241-6.766.034-1.154 1.937-.635 5.227 1.424 9.025.93 1.712.697 3.02.338 3.815-.982 2.178-3.675 2.799-6.525 3.456-1.964.454-1.839.87-1.839 4.004h-1.995l-.005-1.241c0-2.52.199-3.975 3.178-4.663 3.365-.777 6.688-1.473 5.09-4.418-4.733-8.729-1.35-13.678 3.732-13.678 4.983 0 8.451 4.766 3.732 13.678-1.551 2.928 1.65 3.624 5.09 4.418 2.979.688 3.178 2.143 3.178 4.663l-.005 1.241zm-13.478-6l.91 2h1.164l.92-2h-2.994zm2.995 6l-.704-3h-1.615l-.704 3h3.023z"/></svg>
        </div>
        <div class="w-2/3 bg-gray-200 h-24 flex flex-col items-center justify-center px-1 rounded-r-lg body-step">
          <h2 class="font-bold text-sm">Personal Info</h2>
          <p class="text-xs text-gray-600">
            Just your personal information
          </p>
        </div>
      </div>
    </div>
    <div class="flex-1 flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z"/></svg>
    </div>
    <div class="w-1/3 text-center px-6">
      <div class="bg-gray-300 rounded-lg flex items-center justify-center border border-gray-200">
        <div class="w-1/3 bg-transparent h-20 flex items-center justify-center icon-step">
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 22h-24v-20h24v20zm-1-19h-22v18h22v-18zm-4 13v1h-4v-1h4zm-6.002 1h-10.997l-.001-.914c-.004-1.05-.007-2.136 1.711-2.533.789-.182 1.753-.404 1.892-.709.048-.108-.04-.301-.098-.407-1.103-2.036-1.305-3.838-.567-5.078.514-.863 1.448-1.359 2.562-1.359 1.105 0 2.033.488 2.545 1.339.737 1.224.542 3.033-.548 5.095-.057.106-.144.301-.095.41.14.305 1.118.531 1.83.696 1.779.41 1.773 1.503 1.767 2.56l-.001.9zm-9.998-1h8.999c.003-1.014-.055-1.27-.936-1.473-1.171-.27-2.226-.514-2.57-1.267-.174-.381-.134-.816.119-1.294.921-1.739 1.125-3.199.576-4.111-.332-.551-.931-.855-1.688-.855-.764 0-1.369.31-1.703.871-.542.91-.328 2.401.587 4.09.259.476.303.912.13 1.295-.342.757-1.387.997-2.493 1.252-.966.222-1.022.478-1.021 1.492zm18-3v1h-6v-1h6zm0-3v1h-6v-1h6zm0-3v1h-6v-1h6z"/></svg>
        </div>
        <div class="w-2/3 bg-gray-200 h-24 flex flex-col items-center justify-center px-1 rounded-r-lg body-step">
          <h2 class="font-bold text-sm">Account Info</h2>
          <p class="text-xs text-gray-600">
            Anything you want for your credentials
          </p>
        </div>
      </div>
    </div>
    <div class="flex-1 flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z"/></svg>
    </div>
    <div class="w-1/3 text-center px-6">
      <div class="bg-gray-300 rounded-lg flex items-center justify-center border border-gray-200">
        <div class="w-1/3 bg-transparent h-20 flex items-center justify-center icon-step">
          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"/></svg>
        </div>
        <div class="w-2/3 bg-gray-200 h-24 flex flex-col items-center justify-center px-1 rounded-r-lg body-step">
          <h2 class="font-bold text-sm">Confirmation</h2>
          <p class="text-xs text-gray-600">
            Finish it!
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

This is just a simple design for the progress step component and you can customize it to whatever design you want, and this component works the best when used with active and success states.

If you want to see more about it, just follow me on twitter https://twitter.com/KarloDelaRosa3

Source code: https://tailwindcomponents.com/component/progress-steps

Credits to https://iconmonstr.com/ for the SVG icons used here