Yassir Ah yakserr

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

Use Chart.js with Nuxt v2.11.0

Line chart example

Run npm i vue-chartjs
Run npm i chart.js hchs-vue-charts
Create a file called chart.js and save it in the /plugins directory
Give chart.js the following contents

import Vue from 'vue'
import { Line } from 'vue-chartjs'

	What Is OpenGL?
	OpenGL is a Graphics rendering API which is operating system independent, window system independent and has high-quality color images composed of geometric and image primitives.
	OpenGL APIs can use following …

	Gl
	OpenGL API implementation (http://www.opengl.org)
	Glu
	OpenGL Utility
	Glut – GLUT (OpenGL Utility Toolkit) – Glut is portable windowing API and it is not officially part of OpenGL.
	OpenGL Utility Toolkit (http://www.opengl.org/resources/libraries/glut/)

	# Based on this answer: https://stackoverflow.com/a/61859561/1956278

	# Backup old data
	Rename-Item -Path "./data" -NewName "./data_old"

	# Create new data directory
	Copy-Item -Path "./backup" -Destination "./data" -Recurse
	Remove-Item "./data/test" -Recurse
	$dbPaths = Get-ChildItem -Path "./data_old" -Exclude ('mysql', 'performance_schema', 'phpmyadmin') -Recurse -Directory
	Copy-Item -Path $dbPaths.FullName -Destination "./data" -Recurse

	<!-- jsfiddle : https://jsfiddle.net/yakser/7ove0ky8/2/ -->
	<!-- in production, please install Tailwind CSS instead of CDN -->

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- Tailwind CSS CDN -->

	"use client";
	import { useState } from "react";

	export default function Page() {
	const [noCount, setNoCount] = useState(0);
	const [yesPressed, setYesPressed] = useState(false);
	const yesButtonSize = noCount * 20 + 16;

	const handleNoClick = () => {
	setNoCount(noCount + 1);