DEV Community: GreenestGoat

embedz - Easy, dependency free embeds for Svelte and Vue.

GreenestGoat — Fri, 21 Feb 2025 06:08:14 +0000

Easy, dependency free embeds for Svelte and Vue.
hey guys just wanted to showcase a component library I've been working for a few months, I have finally released a svelte version, I'm open to feedback as id love to improve and polish this project.

if you wanna check out the project here's the repo, also a star would be awesome :33333

GitHub - Playground

Installation

# Supports only Svelte for now, requires Svelte 5 and above
npm i @embedz/svelte

<script>
  import { YouTube, Vimeo } from "@embedz/svelte";
</script>

<YouTube 
  id="KRVnaN29GvM" 
  posterquality="max"
/>

vueframe V3 is here !!!

GreenestGoat — Fri, 17 Jan 2025 22:15:35 +0000

Hey guys I officially have released V3 of vueframe, adding a bunch of quality of life improvements along with a cleaner and more consistent codebase.

What is vueframe

vueframe is a Vue 3 component library, allowing you to easily import media embed components from platforms such as YouTube and Vimeo into your projects.

heres a github link to project if you wish to check it out + a star would be amazing :)

vueframe V2 is here !!!

GreenestGoat — Fri, 22 Nov 2024 22:40:13 +0000

Hey guys I officially have released V2 of vueframe its been completely rebuilt from the ground up with major performance improvements, with a brand new mascot.

https://github.com/vueframe/vueframe

a star would be amazing + I would luv your feedback :)

vueframe a simple Vue 3 component library for embedding video players

GreenestGoat — Sun, 17 Nov 2024 17:09:48 +0000

Just wanted to share a project I've been working on called vueframe, offering a simple way to embed players such a YouTube and Vimeo easily with a universal API.

Its also the first time I've built a component library with VueJS so I would love feedback on this project so i can improve it and make it better.

here's the GitHub repo if your interested.

also a star would be Awesome :)

EDIT:

I'm also working on a documentation website

Installation 📦

# npm
npm install @vueframe/vueframe

Setup ⚙️

// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueFrame from '@vueframe/vueframe'

createApp(App)
  .use(VueFrame)
  .mount('#app')

Usage 💻

App.vue

YouTube

<YouTube id="dQw4w9WgXcQ" />

Vimeo

<Vimeo id="676247342" />

Dailymotion

This component currently does not support autoplay or muted

<Dailymotion id="x8i1ffw" />

Props 🎛️

Prop	Type	Default	Description
`id`	`string`	Required	Video ID from the platform
`autoplay`	`boolean`	`false`	Auto-start playback
`muted`	`boolean`	`false`	Initialize video muted
`width`	`string\	number`	`"1024px"`
`height`	`string\	number`	`"576px"`

Examples 🎯

With Props

<YouTube id="dQw4w9WgXcQ" autoplay muted width="800px" height="450px" />

License 📄

MIT © vueframe

Lamp - a curated collection of open-source web assets for developers.

GreenestGoat — Tue, 08 Oct 2024 22:10:55 +0000

Introducing Lamp a curated collection of open-source web assets for developers.

Also check out the GitHub repo a star would be AWESOME :)

If u have any projects u would like me to add to Lamp let me know

Loadr, an efficient solution for seamlessly loading large images in HTML

GreenestGoat — Mon, 02 Sep 2024 20:38:05 +0000

how does it work it:

it loads a low-res image first from the img src then in the hr-src atrbute it loads the high-res image in the background the once loaded replaces the low-res url with the high-res one.

Check out the repo a star would be Awesome

Demo

Installation

CDN

Import Loadr using CDN.

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

🚧 Specific Version

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

Usage

Add the hr-src to the HTML <img> element, This will be your high-res image. In the src attribute is the low-res version of your image. Loadr will load the high-res image in the background then update the src with its URL, Replacing the low-res image.

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

Call Loadr in your Javascript. That's it 🎉.

index.html

<script>
  new Loadr();
</script>

Check out the Demo on Codepen.

Extra step

Lets add some styling to the <img> element.

style.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

Customization

Loadr comes with variables that can be easily customized.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Check out the Customization Demo on Codepen.

Emojify

GreenestGoat — Fri, 09 Aug 2024 23:49:21 +0000

Emojify

Emojify is a customizable emoji trail javascript library that follows your mouse cursor, embedding playfulness and personality into any webpage.

Star the project on Github

Installation

CDN

Import Emojify using CDN.

import Emojify from 'https://cdn.jsdelivr.net/npm/open-emojify/emojify.min.js';

🚧 Specific Version

import Emojify from 'https://cdn.jsdelivr.net/npm/open-emojify/emojify.min.js@latest';

Usage

Call the Emojify library in your Javascript. That's it 🎉.

window.emojify = new Emojify({});

Customization

Emojify comes with options / variables that can easily be customized.

window.emojify = new Emojify({
    emojis: ['😊','😄','😀','😃'], // replaces default emojis with emojis within a string
    random: true, // determines if emojis should be shown random or in order
    duration: 500, // duration before hiding emojis
    delay: 5, // delay between showing a new emoji
    size: '48px', // font-size of emojis
    zIndex: 9999, // z-index of emojis
});

Check out the Demo on Codepen.

Mase JS is a new way to write HTML entirely in your JavaScript.

GreenestGoat — Sat, 15 Jun 2024 22:52:32 +0000

Introducing Mase JS a new way to write and structure html entirely inside your JavaScript. Also leaving a small footprint on your website as the library comes in at only 800 bytes in size. it uses a custom JSON like format that converts JavaScript to html on the frontend.

Planned:

Server side / Backend rendering with nodejs or express.
plugin support.

check out the GitHub to get started, also a star would be awesome, if you find an error or wanna ask me a question have a look at our Discord server.

Installation

CDN

Import Mase JS using CDN.

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';

🚧 Specific Version

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

NPM

Install Mase JS using npm and node.

npm install masejs

Import

Import Mase JS definitions from MaseJSInterpreter.

index.js

import { MaseJSInterpreter } from 'masejs';

MaseJSInterpreter.interpret(masejs);

Usage

Use the tree structure in your Javascript. That's it 🎉.

script.js

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

const masejs = {
  div: {
    center: 'true',
    class: 'button-container',
    styles: {
      height: '100%',
      width: '100%',
      inset: '0px',
      position: 'fixed',
    },
    button: [
      {
        value: 'Click me',
        styles: {
          color: 'white',
          'background-color': '#000000',
          outline: 'none',
          border: 'none',
          height: '38px',
          width: '88px',
          'border-radius': '5px',
          cursor: 'pointer',
        },
        class: 'button',
        id: 'button',
        events: {
          click: () => alert('Button clicked!')
        },
      }
    ]
  }
};

MaseJSInterpreter.interpret(masejs);

Examples

A basic form with MaseJS.
A simple sidebar with MaseJS.
Using the library with Material UI.