Hey Devs,

I have been working on two projects this week and would like to share some.

Personal Website.

https://www.kevinodongo.com/

I created a personal website where I will be uploading all the working tutorials so you can test and play around to understand the whole tutorial end products.

For example here are some of the applications that I will do course tutorials and upload the application link on the website.

1. Bulk email and SMS application
2. Video and Chat application with WebRTC, AWS kinesis Video streams, AWS Websocket, DynamoDB, and Vue.
3. Video and Chat application with WebRTC, Socket.io, Node, Express, and Mongo DB.
4. API Gateway, Lambda, Cognito, Amplify, AppSync (Serverless Approach).
5. Mongo DB, Node, and Express.

From there we can go to other technology like Docker and ECS / Fargate. Terraform vs Cloudformation.

Tailwind and Vue

I loved working with Vuetify CSS and the documentation was way straight forward. Tailwind came and changed the game. Was impressed by the way Tailwind made coding easy. To transition was a nightmare. Their documentation was different they only gave free components and others you had to purchase. To begin you had to either copy the free components and edit this was challenging to someone who wants to transition. The CSS utilities were long you could ask where do I start from ?. So to make it easy I decided to separate the components as Vuetify documentation. Tailwind and Vue. Now it will be easy to work my way around each component by doing the layout and getting the component I need. This was a fun project but I realized it can help someone who is working on a Vue project.

Agenda

My agenda was to separate all components and implement them using v-if, v-for, v-once, transitions, etc. This makes working on a new site easy. Once you have made your layout with grid and flexbox the rest is a breeze.

To get the link my website is up and running just go to the project section and look for Tailwind and Vue. I'm refactoring all my applications with this.

Here is Tailwind and Vue.

Brief explanation

Let us take an example of buttons. Below is how Vuetify did theirs. You had different types of buttons to choose from. Choose, add and edit.

This is how I have done on the Tailwind and Vue application.

All the different types of buttons. Choose the one you want, get the code, and edit in your application.

Things like Navigation drawer Vuetify had a variety to start with. These are components will be working on implementing with Tailwind and Vue so it will be easy to work with as before. You will find them in the how to implement with Vue.

Sincerely I have learned the importance of positioning with Tailwinds CSS. To work with ease you will need to understand the concept of position relative and absolute.

The application layout can be achieved using Flexbox or Grid. Oh! my favorite centering on Vuetify where was I going to find you on Tailwind.

<template>
   <v-row class="fill-height" justify="center" align="center" height="500px">
    // all items are centered in the middle of the parent
     <div>Hello World!</div>
</v-row>
</template>

I got it on Tailwind.

<div style="height: 500px" class="content-center">
   // all items are centered in the middle of the parent
    <div>Hello World!</div>
</div>

What about Calendar, Tooltips, and Carousel? Go through the docs and you will find the solutions.

The project is a working project but can be used. We can add and fix as we go along.

Hope to someone it will really help them during development. I will be using it a lot in my courses and tutorials.

Thank you