Happy Friendship Day Greeting image With Name - HTML Canvas
#vite#javascript#canva#html
Santhosh Veer

Santhosh Veer @mskian

About: Blogger - Web Developer - Open Source Lover

Joined:
Oct 4, 2018

Happy Friendship Day Greeting image With Name - HTML Canvas

Publish Date: Jul 26 '22
6 0

I build a Simple Wishing Site using Vite JS Vanilla - Day by Day Tech stacks are Improved & bring more funs and Magic to development.

A few years ago I use jQuery to Build Many Fancy kinds of Stuff but in the Modern day, the scenario was Different with Help of Many Frameworks I achieve Many things without external sources and Mainly Improve web App Performance.

In my Personal time, I spend my time to building a Festival related web apps and Event Blogging somehow we have to build an Earning source in Different ways Online.

Friendship Day Wishes image with Name

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

This Website Concept May be Useful for People who want to Build a Wishing Greeting site.

Utilizing Vite js for Node Modules and Optimization - Bundle Everything in Single Javascript File - Build a Static Site with Javascript Magical Stuffs - Fully Static Website.

Methods Used ⚙

  • HTML/CSS and Javascript
  • HTML Canvas - Create Wish image
  • tailwindcss - Front-end Styling
  • Vitejs - Testing, Bundling and Local Server
  • Alpine.js - For Javascript Magic
  • Eslint - Fix the Lint Error
  • Prettier - Beautify the Code files
  • Slugify - Slugify the User input and Convert to URL
  • Cloudflare Pages for Free Hosting - `npx wrangler pages publish dist

Create your Wishes at - https://wish.sanweb.info/

Happy Friendship Greeting Generator

Source Code

GitHub logo mskian / friendship-day-wishes

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

Friendship Day Wishes image with Name

⚡ Vitejs | ✨ Tailwind CSS | 📸 HTML Canvas | 🎩 Alpine.js | 🌩 Cloudflare Pages

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

Happy Friendship Greeting Generator

Methods Used ⚙

  • HTML/CSS and Javascript
  • HTML Canvas - Create Wish image
  • tailwindcss - Front-end Styling
  • Vitejs - Testing, Bundling and Local Server
  • Alpine.js - For Javascript Magic
  • Eslint - Fix the Lint Error
  • Prettier - Beautify the Code files
  • Slugify - Slugify the User input and Convert to URL
  • Cloudflare Pages for Free Hosting - npx wrangler pages publish dist --branch production

Installation 📦

  • Add funtions, logic's and Modules - /lib/canva.js

  • Edit Home page - index.html

  • CSS Styling - /styles/tailwind.css

  • Build file - main.js

  • Clone this repo or Download

git clone https://github.com/mskian/friendship-day-wishes
friendship-day-wishes
yarn install
Enter fullscreen mode Exit fullscreen mode
  • Test the site
yarn dev
Enter fullscreen mode Exit fullscreen mode
  • Build the site
yarn build
Enter fullscreen mode Exit fullscreen mode
  • Test the production…
View on GitHub

Final Notes

This website for learning Purpose Every day I keep Practicing doing some fun stuff to Enhance My Skills.

Comments 0 total

    Add comment