It's a CANVAS PARTY!

Yoav Mendelson — Sat, 03 Dec 2022 20:28:36 +0000

Introducing Canvas Party, a NPM package i made a while back.

table of content

Overview
Basic Usage
Frameworks integration
- with React
- with Vue
Basic Usage
Why i made it?
Summary

Overview

Canvas Party is an HTML canvas animations library. It was created for adding highly interactive backgrounds with ease. It has full support for both Vue and React and a documentation guide with examples.
Check out the Canvas Party website here.

Installation

To install simply run this command at the root directory of your project.

With npm:

$ npm install canvas-party

With yarn

$ yarn add canvas-party

If you are using a JavaScript framework see the Frameworks integration.

Basic usage

To add Canvas Party to your app first import the useCanvasParty function from canvas-party, this function
will receive two arguments:

Wrapper element in which the canvas will append to.
Options object that will specify the type and optional customizations.

This will return an object with a custom canvas element and some methods related to it.

import { useCanvasParty } from 'canvas-party'

const wrapper = document.createElement('div')

const canvasParty = useCanvasParty(wrapper, {
  type: 'confetti',
  options: {
    colors: ['#A3F7B5', '#EB5160', '#B0F2B4'],
    count: 450,
  },
})

wrapper.appendChild(canvasParty.canvas)

Frameworks Integration

Canvas party has full support for both Vue and React.

With React

installation

$ npm install @cavnas-party/react

Then import the CanvasParty component and give it the desired template type.

import { useState } from 'react'
import CanvasParty from '@canvas-party/react'

function reactApp() {
const [canvasType, setCanvasType] = useState('confetti')

  return (
    <>
      <button onClick={() => setCanvasType('trippy')}></button>
      <CanvasParty type={canvasType} />
    </>
  )
}

export default reactApp

With Vue

installation

$ npm install @cavnas-party/vue

Then import the CanvasParty component and give it the desired template type.

<script setup>
import { ref, reactive } from 'vue'
import CanvasParty from '@canvas-party/vue'

const canvasType = ref('confetti')
const canvasOptions = reactive({
  colors: ['#399E5A', '#5ABCB9', '#63E2C6'],
  count: 350,
})
</script>

<template>
  <div>
    <CanvasParty :type="canvasType" :options="options" />
  </div>
</template>

Why I made it?

In my short time of building websites, I stumbled upon a lot of cool looking sites with beautiful designs. Those sites more often than not have some kind of "wow" effect, whether it's a cool scrolling behavior, complex typography animation or lively backgrounds.

Those backgrounds in particularly capture my eye so I started to dig into their code. I asked myself "how can I make these kind of backgrounds?" I knew immediately that I was looking at a canvas - a tool with unlimited potential in the right hands.

I wanted it to be as easy as adding a chart component in React, not being bothered by all the logic, just getting a background with minimal effort.

Summary

Canvas party is an amazing tool for adding "spice" to your next project, with a variety of templates and customization you could upgrade your application in a matter of seconds.
However, it's still a relativity new project and expected to go through changes in the future.

Thank you!

Web thoughts

Yoav Mendelson — Thu, 29 Sep 2022 18:39:15 +0000

Here are some topics that I found myself thinking about regularly.

Influencing Hunt:

I guess this topic is not bound just to the software development world, but still a one I think about everyday.

If you would open my LinkedIn feed you’ll see a never-ending posts of people typing to impress with generic career stories and mediocre solutions to problems that have been solved for years.
It might be a good way to boost up your network, I’ll give you that, but at the same time it decrease that same person credibility (for me at least).

I do encourage people to write and share ideas that worth spreading, however, there is fine line between an article that was written for likes, and a one written from a genuine will to share. In today’s day and age, people notice whenever people acting out. So if you don’t care about what you're writing, i’ll know, and so are many others.

HTML / Less JS trend:

The JavaScript eco system as been growing rapidly, it’s hard to keep track of all the new changes.
In the last year, there is new direction that increasingly growing - and that is HTML, or in other words - less JavaScript. It just makes sense, the number one reason for slow reload time and bad performance is the amount of JavaScript we ship to the browser.

The web development world has notice that problem and came up with new solutions: Astro build, Qwik and Partytown, just to name a few.. all found new ways to deal with unnecessary JavaScript that just sit there while you read a shitty blog post about the “5 facts that you won’t believe about JavaScript“.

This is not a new concept, however, we just now start to feel this mindset of “ship less JS”, And for all the people that say “html is not a real programming language” I say: “maybe but it’s all you need”.

most of the world hasn’t adopt these technologies yet, as they are still new. But they are amazing to say least and Im excited to see their effects on the future.

React nation:

Full disclaimer, I’m not using react regularly, I’v been using Vue pretty must since the beginning and find it absolutely fine. One thing I’v notice about react, is the amount of “buzz” it gets. React can fart and whole web would shake a little bit. Because of it popularity react can simultaneously be most hated framework, sorry, library and the most loved one.

This of course comes with plenty of “Hot takes” and debates about whether or not react is doing a good job. The fact is, that React is in the summit, and even though it’s overlay complex at times, it keep most devs happy, plus it got the coolest logo.

At one point I even consider switching to react for my side projects until I realized, there is no good reason to. And I’m happy I didn’t because Vue is pretty awesome too.

Having a Vue developer like myself this engaged with a framework, sorry, library that’s not even mine is a task worth acknowledging, i envy the richness and the overall vibe the react eco system brings.

Summary

It’s my first time blogging, and I find it pretty fun. This post might not bring any new information to the average developer, it was merely a presentation of the web as I see it.

Forem: Yoav Mendelson

It's a CANVAS PARTY!

Introducing Canvas Party, a NPM package i made a while back.

table of content

Overview

Installation

With npm:

With yarn

Basic usage

Frameworks Integration

With React

installation

With Vue

installation

Why I made it?

Summary

Web thoughts

Influencing Hunt:

HTML / Less JS trend:

React nation: