atomjoy

Fetch API JavaScript

Upload avatar

Image upload form in html

<img src="/default/avatar.webp" alt="Avatar image" id="avatar">

<form method="post" enctype="multipart/form-data" onsubmit="getData(event)">

atomjoy

Laravel Custom Exception Handler

Laravel custom exception handler with service provider (modules).

ExceptionHandlerProvider.php

<?php

namespace App\Providers;

atomjoy

// First example
export default class Singleton {
	number = 0;
	constructor() {
		if (!!Singleton.instance) {
			return Singleton.instance;
		}
		Singleton.instance = this;
		// return this;
	}

atomjoy

<script setup>
import editIcon from '@/assets/svg/edit-svgrepo-com.svg?raw';
</script>

<template>
	<div class="svg-icon" v-html="editIcon"></div>
</template>

<style>
.svg-icon {

atomjoy

<script setup>
import { useAttrs, ref } from 'vue';

const emits = defineEmits(['update:modelValue', 'valid', 'invalid']);

const props = defineProps({
	modelValue: [String, Number],
	name: { type: String },
	label: { type: String },
	placeholder: { type: String },

atomjoy

Product Attribute Management in Laravel

Product Attribute Management in Laravel, storing Product attributes such as Size, Color, Weight. See: https://github.com/atomjoy/laravel-products/tree/main

Product variants (many to many)

Products (id, name, desc, visible)
# 1, Shirt, Description, true
# 2, Laptop, Description, true

atomjoy

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Concerns\HasUuids;
use Illuminate\Support\Str;

/**
 * Uuid class

atomjoy

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	--color-gray-50: #fafafa;

atomjoy

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	--bw-text-1: #0f0f0f;

atomjoy

<script setup>
import { ref } from 'vue';

function htmlEntities(str) {
	return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

let code = ref(`
<span style="color: red;">Hello</span>
<?php