Skip to content

Instantly share code, notes, and snippets.

View drikusroor's full-sized avatar
🏠
Working from anywhere

Drikus Roor drikusroor

🏠
Working from anywhere
  • Utrecht, Netherlands
View GitHub Profile
@drikusroor
drikusroor / page.tsx
Created August 13, 2024 13:23
How to CRUD collections and items in a Wix App Dashboard using the Wix Data API
import {
Button,
FormField,
Input,
Page,
WixDesignSystemProvider,
} from "@wix/design-system";
import "@wix/design-system/styles.global.css";
import React, { useEffect, useState } from "react";
import { withDashboard, useDashboard } from "@wix/dashboard-react";
@drikusroor
drikusroor / functions.php
Created December 3, 2023 16:53
How to Display Custom Field Values in WordPress Admin for Custom Post Types
<?php
// ... Rest of functions.php
/**
* Add the question code column to the question custom post type.
*/
function add_question_code_column_to_question_cpt($columns) {
$columns['question_code'] = 'Question Code';
return $columns;
@drikusroor
drikusroor / Modal.test.ts
Last active November 22, 2023 13:25
React modal component styled with TailwindCSS in TypeScript
import { fireEvent, render, screen, waitFor } from 'from '@testing-library/react'
import Modal from './Modal'
describe('Modal', () => {
it('renders successfully', () => {
const onCancel = jest.fn()
expect(() => {
render(<Modal isOpen onCancel={onCancel} />)
}).not.toThrow()
@drikusroor
drikusroor / tailwindcss-masonry.html
Created November 18, 2023 18:41
Masonry using TailwindCSS
<div class="h-screen w-full bg-slate-300 p-5">
<div class="p-5 columns-3 gap-3 bg-white rounded-lg drop-shadow-lg">
<div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
Lorem ipsum
</div>
<div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
Lorem ipsum, hello world!
</div>
<div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
Mary had a little lamb. Its fleece was white as snow.
@drikusroor
drikusroor / gpt.sh
Last active April 13, 2023 21:07
Simple GPT CLI
#!/bin/bash
function print_help() {
GREEN="\033[1;32m"
BLUE="\033[1;34m"
RESET="\033[0m"
echo -e "${GREEN}Usage:${RESET}"
echo -e " ${BLUE}gpt [options] [question]${RESET}"
echo ""
@drikusroor
drikusroor / summareview.sh
Last active April 25, 2023 10:40
ChatGPT prompt generation script to help me with Pull / Merge Requests
#!/bin/bash
# This script will help you to generate a ChatGPT prompt that you can use to summarize and review the changes between two branches.
# It will prompt you for the feature branch, the branch to compare to, the ticket/story/bug description, and any additional feedback.
# It will then output the changes and the prompt to a file called summareview.txt.
function usage {
echo -e "\033[1mUsage:\033[0m $0 [-h | --help] [-o output_file] [-p]"
echo ""
echo -e "\033[1mOptions:\033[0m"
@drikusroor
drikusroor / fade-out-text.html
Created March 13, 2023 21:45
Fade out text using a gradient and Tailwind CSS
<div class="mt-24 w-96 p-4 mx-auto rounded-lg shadow-lg overflow-hidden relative after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent after:to-white">
<h1 class="text-3xl mb-3 font-bold underline">
Hello world!
</h1>
<p class="leading-snug">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
@drikusroor
drikusroor / functions.php
Last active March 10, 2023 22:13 — forked from gmmedia/functions.php
Add featured image column to WP admin panel - posts AND pages
<?php
/**
* Add featured image column to WP admin panel - posts AND pages
* See: https://bloggerpilot.com/featured-image-admin/
*/
// Set thumbnail size
add_image_size( 'j0e_admin-featured-image', 60, 60, false );
@drikusroor
drikusroor / Tooltip.jsx
Last active January 21, 2023 12:14
React & Tailwind CSS Tooltip Component
export function Tooltip({ content }) {
return (
{/* Tailwind's group class will be used trigger the hover */}
<span className="group">
{/* Font Awesome question mark icon */}
<i className="fas fa-question-circle text-black group-hover:scale-120 ml-1 cursor-pointer ease-in-out duration-300 transition-transform"></i>
<span
className={`
w-full absolute rounded shadow
@drikusroor
drikusroor / square-loading-favicon.ts
Created June 30, 2022 12:27
Square loading favicon using canvas in Typescript
/**
* Square loading favicon in Typescript
* Author: Drikus Roor
* Original author: https://github.com/rpsthecoder/square-loading-favicon
*/
interface IFavicon extends Element {
href: string;
}