Skip to content

Instantly share code, notes, and snippets.

View AnoRebel's full-sized avatar

Ano Rebel AnoRebel

119 followers · 217 following
View GitHub Profile
@AnoRebel
AnoRebel / spiral.vue
Created January 6, 2024 10:23
Vue 3 spiral component copied from an instagram reel
<script setup>
import { ref, onMounted } from 'vue'
const ANIMATION_DURATION = 4000; // ms
const spiral = ref(null);
const spiral_1 = ref(null);
const words = ref("anorebel");
onMounted(() => {
@AnoRebel
AnoRebel / knexPostgresFullTextSearch.js
Created November 8, 2023 07:35 — forked from cameronblandford/knexPostgresFullTextSearch.js
Implement full text search using Knex + Objection
// Because we're using an ORM (Objection), it's a pain to add a tsvector when inserting,
// since tsvectors and FTS aren't supported by Objection. Instead, I've added a hook that
// fires on insert which auto-generates the tsvector field for each newly inserted entry.
// This is an example knex migration file for said behavior.
const addUserIndex = `
ALTER TABLE public.user ADD "document" tsvector;
CREATE FUNCTION my_trigger_function()
RETURNS trigger AS $$
@AnoRebel
AnoRebel / CodeGenerator.ts
Last active August 2, 2023 12:34
Bar and QR code generator in Vue 3 using `jsbarcode` and `qrcode`
/**
* Script made from https://github.com/fengyuanchen/vue-qrcode and https://github.com/fengyuanchen/vue-barcode
*/
import { defineComponent, h, watch, ref, onMounted } from "vue"
import * as JsBarcode from "jsbarcode"
import { toCanvas, toDataURL, toString } from "qrcode"
const EVENT_READY = "ready"
export default defineComponent(
@AnoRebel
AnoRebel / OTP_Input.html
Created May 22, 2023 16:23 — forked from tinshade/OTP_Input.html
Simple Bootstrap, JS code for OTP styled inputs. Feel free to make this mobile responsive.
<!DOCTYPE html>
<html>
<head>
<title>OTP Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
*{
margin:0px;
padding:0px;
}
@AnoRebel
AnoRebel / index.ts
Last active May 14, 2023 12:02
A Vue 3 Typescript composable remade from https://github.com/sirxemic/jquery.ripples
import { type Ref, ref } from "vue";
import type {
IConfig,
ILocations,
IOptions,
IRipples,
IUniforms,
} from "./types";
import {
@AnoRebel
AnoRebel / Drawer.vue
Created March 15, 2023 15:56
Vue 3 Drawers
<template>
<section v-if="enabled">
<aside class="sidebar" :style="style" ref="element">
<slot></slot>
</aside>
<div class="overlay" ref="overlay"></div>
</section>
</template>
<script setup>
@AnoRebel
AnoRebel / neumorphic_loader.css
Created February 28, 2023 14:53
A cool neumorphic loader
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
@AnoRebel
AnoRebel / hacker_effect.html
Created January 27, 2023 13:32
Dope hacker effect from [Hyperplexed](https://www.youtube.com/W5oawMJaXbU)
<style>
div {
font-family: `Monospaced font`;
}
</style>
<div data-value="AnoRebel">AnoRebel</div>
@AnoRebel
AnoRebel / anim_submit.js
Created October 15, 2022 18:47
A collection of button effects in html, css, javascript
$(function() {
$( "#button" ).click(function() {
$( "#button" ).addClass( "onclic", 250, validate);
});
function validate() {
setTimeout(function() {
$( "#button" ).removeClass( "onclic" );
$( "#button" ).addClass( "validate", 450, callback );
}, 2250 );
@AnoRebel
AnoRebel / VGauge.vue
Created September 7, 2022 17:33
Vue 3 Gauge remade from `https://github.com/amroessam/vgauge`
<template>
<div>
<div class="gauge-title">
<span ref="gauge_value" v-if="top" :class="gaugeValueClass"></span>
<span v-if="top" :class="gaugeValueClass">{{ unit }}</span>
</div>
<canvas ref="gauge_ref" :class="canvasClass" :height="height" :width="width"></canvas>
<div class="gauge-title">
<span ref="gauge_value" v-if="!top" :class="gaugeValueClass"></span>
<span v-if="!top" :class="gaugeValueClass">{{ unit }}</span>