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.

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.

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.

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!

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.

summareview.sh #!/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. # Get the current branch current_branch=$(git rev-parse --abbrev-ref HEAD) # Prompt for feature branch (default: current branch) read -p "Enter the feature branch to compare (default: $current_branch): " feature_branch feature_branch=${feature_branch:-$current_branch} # Prompt for branch to compare to (default: develop) read -p "Enter the branch to compare to (default: develop): " compare_branch compare_branch=${compare_branch:-develop} # Prompt for ticket/story/bug description read -p "Enter the ticket/story/bug description: " ticket_description # Prompt for additional feedback read -p "Enter any additional feedback (optional): " additional_feedback # Execute git log command and store the output in a variable git_log_output=$(git log $compare_branch.

To highlight search terms in the content in your Wordpress search result page, add the following function to your functions.php file: function search_excerpt_highlight() { $content = get_the_content(); $content = wp_strip_all_tags($content); // Set the excerpt length $excerpt_length = 100; // You can adjust this value to your desired excerpt length $padding = 10; // Add padding around the search term $keys = explode(' ', get_search_query()); $first_key = $keys[0]; // Find the first occurrence of the search term $term_pos = stripos($content, $first_key); if ($term_pos !

In many cases, we have reasons not to display the whole text of an article or page and we just want to show an excerpt. Sometimes we break off the text using ellipsis. But sometimes we might want to fade out the text image/svg+xml . And sometimes we want to do that in Tailwind CSS. Is that possible? Yes it is. Tailwind CSS example <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!

Wordpress’ paginate_link function image/svg+xml is pretty neat for generating pagination links without any hassle. It does not, however, give you easy control over the exact html output. This makes it hard for styling the list, list items and links when using tailwindcss as we cannot add the utility classes to the elements. To make this easier, I wrote a little procedure that will do some string replacements that allows us to have more control over the classes that we want to use.

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 text-sm font-normal font-sans bg-black text-white p-2 pointer-events-none group-hover:pointer-events-auto opacity-0 group-hover:opacity-100 left-0 -top-3 -translate-y-3/4 group-hover:-translate-y-full ease-in-out duration-300 transition-[transform,opacity]`} > {/* Set inner HTML or just output content in an expression */} <span dangerouslySetInnerHTML={{ __html: content }}></span> {/* Optional speech balloon triangle pointing down */} <div className={` absolute w-0 h-0 border-l-4 border-t-4 border-r-4 border-b-4 border-black left-1/2 -translate-x-2 -bottom-1 transform rotate-45 shadow`} ></div> </span> </span> ); } How to use Tooltip import { Tooltip } from ".