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!

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 ".

On one of my computers I use Windows Terminal with Git Bash and PowerShell as my default terminals. For these terminals I have customized the appearance in Windows Terminal, which is a pretty nice feature. For both terminals, I had configured the NovaMono for Powerline font, which I had previously installed to Windows. On a certain day I suddenly started getting these messages while either one of the terminals was initializing:

Recently I had been working on a website that uses mix-blend-mode: color. I just found out it didn’t work on Safari. Apparently color is not supported image/svg+xml . I had to find a way to maintain this mix blend mode for non-Safari browsers, in which it worked fine, but override it in Safari. Then I found this overly verbose answer image/svg+xml on Stackoverflow.

Recently, I’ve experienced this warning multiple times since I’ve installed a new version of Node.js and npm. Apparently we can update the version of the lockfile package-lock.json. It’s apparently quite easy to do. Just run: npm install --package-lock-only Credits to this mothertrucker image/svg+xml

I have always had problems when combining Prettier image/svg+xml and ESLint image/svg+xml the same project in VS Code. Prettier would not respect my ESLint rules or vice versa. Sometimes I could mitigate the problems by using the eslint-config-prettier package in my ESLint configuration. But now, thanks to James Quick image/svg+xml I’ve found a way to get rid of Prettier while still having the format on save feature in VS Code.

Regular html & css <style> .container { display: flex; flex-direction: column; } .item { display: flex; flex-direction: row; align-items: center; align-self: center; } </style> <body> <div class="container"> <button class="item"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> Or with TailwindCSS <body> <div class="flex flex-col"> <button class="flex flex-row items-center self-center"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> See also https://stackoverflow.com/a/67819933/4496102 image/svg+xml

This happened to me today: A Gitlab CI/CD job in a valid stage without any dependencies or rules was not showing up in my Gitlab CI/CD pipeline. It looked like this: # Incorrect, job does NOT show up in pipeline as it is seen as a job template .e2e: image: cypress/browsers:node12.14.1-chrome85-ff81 stage: .post artifacts: when: always paths: - cypress/videos/**/*.mp4 - cypress/screenshots/**/*.png expire_in: 3 day script: - npm ci - npm run test:e2e After some experimenting I found out that the name of the job was the culprit.

const WrapperComponent = { components: { ChildComponent, }, methods: { onUpdate: jest.fn(), }, template: '<child-component @onUpdate="onUpdate" />', }; describe('ChildComponent', () => { let wrapper; beforeEach(() => { wrapper = mount(WrapperComponent, {}); }); afterEach(() => { wrapper.destroy(); }); it('emits onUpdate event', async () => { const spy = jest.spyOn(WrapperComponent.methods, 'onUpdate'); // do something that would make child component emit the 'onUpdate' event expect(spy).toHaveBeenCalled(); }); });

Based on rpsthecoder’s square loading favicon image/svg+xml in JavaScript, but now in proper Typescript. /** * Square loading favicon in Typescript * Author: Drikus Roor * Original author: https://github.com/rpsthecoder/square-loading-favicon */ interface IFavicon extends Element { href: string; } export function animateFavicon() { const canvas = document.querySelector("canvas"); if (!canvas) { return; } const context = canvas.getContext("2d"); if (context) { const favicon = document.

If you want to import your Vue components in the following way, so without a .vue or .js extension: import CrazyComponent from '@/components/CrazyComponent'; // instead of import CrazyComponent from '@/components/CrazyComponent.vue'; There are some things you have to configure. I will outline these things below: Rollup Add the following to your rollup.config.js: nodeResolve({ browser: true, jsnext: true, main: true, extensions: ['.js', '.vue'] }), ESLint Add the following to your eslintrc.

Every now and then I like to play my beloved Oblivion. To keep things interesting I have installed quite some mods over the years. At one point, however, my head started bobbing while walking and it seemed like I was in crouching mode when standing still. The problem persisted even until after I installed all my mods. Eventually I found the culprit, but to help other possible victims, I will list possible solutions to the problem of not being able to turn off head bobbing:

Yesterday I had to migrate a MySQL schema to a new server. Fun times. After I had finished the migration, I wanted to compare whether no data was lost. So I turned to Stackoverflow to find me a good MySQL command that would give me the row count of all tables in the schema so I could compare it to the schema on the old server. The command I used was:

As I frequently disconnect and connect monitors from and to my laptop, a bug(?) in Windows 11 causes the windows of application to disappear sometimes. This usually happens with [Zettlr](https://www.zettlr.com/), my note-taking app of choice. This frustrated me endlessly, as I want my notes to be easily accessible. But now I think I found a solution to make the window appear again. Simply press alt + space whenever the disappeared window is active.

using System; using System.Text.Json; var array = JsonSerializer.Deserialize<List<List<int>>>("[[3, 2], [1, 1], [0,3],[0,2],[0,1], [1,3], [1,2], [2, 3]]"); Console.WriteLine(JsonSerializer.Serialize(array)); // [[3,2],[1,1],[0,3],[0,2],[0,1],[1,3],[1,2],[2,3]] var sorted = array.OrderBy(y => y[0]).ThenBy(y => y[1]); Console.WriteLine(JsonSerializer.Serialize(sorted)); // [[0,1],[0,2],[0,3],[1,1],[1,2],[1,3],[2,3],[3,2]] Source image/svg+xml

class CookieBanner { dropCookie = true; // false disables the Cookie, allowing you to style the banner cookieDuration = 14; // Number of days before the cookie expires, and the banner reappears cookieName = 'complianceCookie'; // Name of our cookie cookieValue = 'on'; // Value of cookie initialBodyPaddingTop = 0; message = 'Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our {{privacyPolicy}}.

Suppose I have configured a constant in the wp-config.php of my website: <?php /\* Super important configuration constant \*/ define('SUPER\_IMPORTANT\_VALUE', '123e4567-e89b-12d3-a456-426614174000'); ?>Whenever you want to use this value in your website, it would be nice to know if the constant has been defined already. You’d expect to be able to do this using something like: <?php /\* !empty does not work for a constant \*/ if (!empty(SUPER\_IMPORTANT\_VALUE)) { // Do stuff } ?

First, define your Google Analytics constant in wp-config.php: // wp-config.php /\* Google Analytics Key \*/ define('GOOGLE\_ANALYTICS\_KEY', 'G-XXXXXXXXXX'); Then, insert the following gist inside the <head> of your website (header.php in my case): // header.php (for example) <?php if (defined('GOOGLE\_ANALYTICS\_KEY')) { ?><!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo GOOGLE\_ANALYTICS\_KEY; ?>"></script> <script> window.dataLayer = window.dataLayer || \[\]; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '<?

As I was trying to sync my Hub database to my Member database in Azure Database Sync, I got this error when trying to fetch the schema of the Hub database: Getting schema information for the database failed with the exception "Failed to connect to server databasename-0182730712073.database.windows.net.Inner exception: SqlException ID: {someGuid}, Error Code: -2146232060 - SqlError Number:40531, Message: SQL error with code 40531 For more information, provide tracing ID ‘{someGuid}’ to customer support.

If you are using Behat for testing your PHP application and you encounter the following error after trying to run your tests: In UninitializedContextEnvironment.php line 44: Tests\\Feature\\Behat\\Context\\Account\\MyOldContext\\ context class not found and can not be used. Do not forget to remove your obsolete Behat Context file (MyOldContext in this case) from your behat.yml configuration file: default: suites: default: paths: - '%paths.base%/tests/Feature/Behat/features' contexts: - Tests\\Feature\\Behat\\Context\\ApplicationContext # Remove the old context file - Tests\\Feature\\Behat\\Context\\MyOldContext - Tests\\Feature\\Behat\\Context\\EmailContext - Behat\\MinkExtension\\Context\\MinkContext - behatch:context:browser - behatch:context:debug - behatch:context:system - behatch:context:json - behatch:context:rest

As I have explained how to create some new logins and users in my previous post image/svg+xml , I now had to create some connection strings for those logins. To check if all logins were created successfully, I have created a small dotnet console application to test out the connection strings associated with these logins: using System.Data.SqlClient; class Credentials { public string Username { get; set; } public string Password { get; set; } public string Server { get; set; } public Credentials(string username, string password, string server = "sql-server.

In my previous post image/svg+xml I showed how you can convert a .bak file to a DAC file and how to fix any errors that may appear. For the same job, I had to add some new SQL logins and users after the migration of the database. This post serves as a notebook for how to do that. \-- Execute this query in the "master" database -- Create new login CREATE LOGIN \[new-login\] WITH PASSWORD = 'complex-password' GO -- Execute these queries in the target database -- Create a user and connect it to the login CREATE USER \[new-user\] FOR LOGIN \[new-login\] -- Create a role to execute stored procedures CREATE ROLE \[db\_executor\] AUTHORIZATION \[dbo\] GO GRANT EXECUTE TO \[db\_executor\] GO -- Give the user read/write/execute rights sp\_addrolemember @rolename = 'tc\_execute', @membername = 'new-user' GO sp\_addrolemember @rolename = 'db\_datareader', @membername = 'new-user' GO sp\_addrolemember @rolename = 'db\_datawriter', @membername = 'new-user' GO -- Check if roles have been assigned to the user correctly SELECT UserType='Role', DatabaseUserName = '{Role Members}', LoginName = DP2.

When you want to migrate an old (on-premise) SQL database to an Azure SQL database, you need to export the database to a DAC .bacpac file. Such an export also includes schemas, views and users/logins. It is easy to receive errors when attempting to make a .bacpac export. In this post, I sum up the errors I received and a way to fix them. 1. Drop Windows users In my case, the database that I wanted to migrate contained references to Windows users.

When hosting a React website in a subfolder, you want the paths to the images and fonts to be updated as well. When the path of an image in your development environment is /images/background.jpg and your website is hosted at https://example.com/app, you want the path to be updated to /app/images/background.jpg in the production build. You can do this using the PUBLIC_URL environment variable image/svg+xml .

This article will be filled with convenient terminal commands for my own reference. Logs Check latest logs in linux Navigation journalctl -xe Go back to previous location cd - Other List all services service --status-all Permissions Show read / write permissions as numbers find . -maxdepth 1 -printf "%m %f\\n" Services See under which user a service is running ps -ef