Recent Posts
How to switch the Command (⌘) and the Option (⌥) keys on macOS
If you are working on Mac devices but you are using a keyboard with a Windows layout, you might have encountered this problem: You press the key combination Alt key + C to copy something, but it triggers Option + C, resulting in a confusing character appearing on your screen instead of the expected copy action. This can be a frustrating experience, especially for those who frequently switch between Mac and Windows environments.
read more
How to Display Custom Field Values in Wordpress Admin for Custom Post Types
Problem: Custom fields not visible in admin overview Have you ever struggled with the lack of visibility of custom fields in your WordPress admin dashboard, especially when working with custom post types? It can be challenging to quickly view the specific metadata associated with these posts. This is a common issue for WordPress developers and content managers who need a streamlined way to manage and display custom data. The good news is that with a bit of code, you can easily add custom columns to your admin dashboard to display these values.
read more
React modal component styled with TailwindCSS in TypeScript
This React component provides a flexible and animated modal dialog, using Tailwind CSS for styling. It’s designed to be easily integrated into any React project that already includes Tailwind CSS for its styling needs.
Features: Animations: Smooth transition for opening and closing the modal with fade and translation effects. Backdrop: Includes a clickable backdrop that closes the modal, enhancing the user experience and interaction. Accessibility: Implements focus management and can be closed with the Escape key, adhering to good accessibility practices.
read more
Masonry using TailwindCSS
This code snippet demonstrates a simple yet effective way to create a masonry layout using TailwindCSS. Utilizing the columns-3 class, it organizes content into three neat columns, ideal for various types of content. The gap-3 class adds horizontal spacing between these columns, while mb-3 on each block ensures vertical spacing, maintaining a clean and organized look.
<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!
read more
Simple GPT CLI
Using my friend ChatGPT I made a little CLI to talk to… GPT. It’s basically a bash script that you can place in one of you bin folders and execute from wherever in your terminal:
gpt "I need a new cactus, what is a nice type that needs little maintenance?" After which GPT will answer you with (hopefully) a nice answer:
GPT-3 answers: One type of cactus that is low-maintenance is the Peruvian apple cactus.
read more