DEV Community

Santhosh Veer
Santhosh Veer

Posted on

2 2

Happy Friendship Day Greeting image With Name - HTML Canvas

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…

Final Notes

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more