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.

Since this year I have been working on a new project for our client. A Next.js project for the first time in years. This morning I was having some problems as the Next.js website tried to fetch data from the API but receiving errors instead. A query variable in the URL was set to "undefined". After some poking around, I found out it was due to a missing environment variable in the project’s .

In a Laravel project I have a feature test in which I test an internal endpoint. The endpoint has a Controller calls a method on a Service. The Service then tries to call a third-party endpoint. It is this third-party endpoint that I would like to mock. I have looked at Guzzle’s documentation, but it seems like image/svg+xml the MockHandler strategy requires you to execute the http request inside of the test, which is not wat I want in my test.

First, install npm dependencies: npm i mysql2 @faker-js/faker dotenv Run the script with the command node ./index.js Don’t forget to add the mysql db credentials to your .env file and of course edit the getSeedQuery function if you want to use it for your own table. const mysql = require("mysql2"); const { faker } = require("@faker-js/faker"); require("dotenv").config(); function getSeedQuery(amount = 10000) { return Array.from({ length: amount }) .map(() => { const date = faker.

I don’t like to do relative imports like this: import CrazyComponent from "../../components/CrazyComponent"; Instead, I like to import my components (stores, helpers, models, etc.) like this: import CrazyComponent from "@/components/CrazyComponent"; You might want to configure some stuff to make this possible. I will outline these configurations below: ESLint First, install eslint-import-resolver-custom-alias: npm install eslint-import-resolver-custom-alias --save-dev In your eslintrc.js or the eslintConfig section in your package.json, add the following resolver under "import/resolver".

It is quite straightforward to set the cover image in Hugo’s Ananke theme. We store an image in the images folder of a post and set the featured_image variable to the images/cover.jpg path. The folder structure for a post then looks like this: content - posts - first-post - images - cover.jpg - index.md And the post’s front matter image/svg+xml in first-post/index.md would look like this:

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.

Suppose you are working on a set of interacting custom blocks in Wordpress. You have a child block that needs information from the parent block to display, in this situation, information about a specific record. In such a case you want to use Block context image/svg+xml . Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendent blocks within its own hierarchy.

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 } ?

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.

Sometimes, a local development environment can be really slow at reloading pages. If you are working on styling a page or component and you want to check your changes, every page refresh generates frustration. You can then also opt for only reloading the stylesheets of a page. This will likely be significantly faster. You can do this by using the following command in the console of your browser’s development tools:

I am currently working on dark mode support for a Wordpress theme. For that, the website will need to use different colors depending on the preference of the user. At the same time, I want those colors to be easily customizable through Wordpress' Customizer. What I don’t want, however, is 500 lines of code just to add a few colors. The hooks for adding Wordpress customizer settings image/svg+xml and controls image/svg+xml are no one-liners.

As you can extend your Wordpress theme by adding actions to the theme’s functions.php, it is safe to say that it is very easy to bloat this file with hundreds of lines of code. The nasty thing is that the usual advice is to write a function and then add that function as an action by passing the function’s name as a string. That would look something like this: <?php // file: functions.

Building an Angular app usually results in a bunch of files, mainly consisting of Javascript files, CSS files, and an index.html. An Azure App Service normally wants to host an application using a startup command for a specific stack (PHP, Node, Python, etc.). Technically, you could run your Angular app as a Node app. In that case you would run npm run start or ng serve as the startup command.

I host my Angular websites using Azure and I use Application Insights to find and report errors. Normally, the exception gets logged, but Angular builds usually have minified javascript, making it hard to debug the origin of an error. Luckily, Azure support uploading the sourcemaps of a minified Javascript bundle to a Azure Blob Storage Container, which can then be used by Azure’s Application Insights to un-minify the stack trace of an error.

Just an easy full-width embedded Google Maps snippet image/svg+xml for my own reference: <!-- In PHP --> <iframe src=" <?php $search\_terms = rawurlencode("3 Abbey Road, London, GB NW8 9AY"); $src = "https://www.google.com/maps?q=2880%20" . $search\_terms . "&t=&z=15&ie=UTF8&iwloc=&output=embed"; echo $src; ?>" width="600" height="500" style="border:0; width: 100% !important;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen="" loading="lazy"> </iframe> <!-- Or, in raw HTML --> <iframe src="https://www.google.com/maps?q=2880%203%20Abbey%20Road%2C%20London%2C%20GB%20NW8%209AY&amp;t=&amp;z=15&amp;ie=UTF8&amp;iwloc=&amp;output=embed" style="border: 0px none; width: 100% !

In my past experience with React, I have always used props.children to render children inside a wrapper or style component. It would look something like this: // Wrapper component: function WrapperComponent(props) { return <div class="wrapper">{{ props.children }}</div> } // Usage: function AppComponent() { return <WrapperComponent><div id="child">I'm a child</div></Wrapper> } Now, as I’m working with Angular, I needed to do the same thing. However, I could never find the correct way to do it.

Just for my own reference, I will publish the skeleton css gist image/svg+xml I use in many of my projects here. It is very easy to use and very easy to extend with new shapes. You can check the --card and --rounded modifiers image/svg+xml for inspiration. In Sass: .skeleton { display: inline-block; height: 1em; position: relative; overflow: hidden; background-color: #dddbdd; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(#fff, 0) 0, rgba(#fff, 0.

Today, I have added some customization settings to a Wordpress website. One of these settings consisted of a textarea input that would be used to enter and display an address. When I wanted to display the address, however, the address was displayed as one single line where it should have been displayed on three lines (Street + number, postal code, city). // Incorrect code: <?php $address = get\_theme\_mod('address', ''); if ($address) { echo $address; } ?

Since a while, I have been using Flywheel’s Local for my local WordPress development server and it has been. No time spend on configuration Docker, Apache, database connections, et cetera. However, one thing that has been bugging me is the question of how to combine Local’s configuration and my own code, which contains my WordPress themes and plugins. As Local creates its own WordPress folders (wp-content etc.) inside its configuration folders, how should I approach such a situation?

For a lot of people probably a piece of cake, but I had to look a while before I could find it. In Azure Portal, go to Alerts. Go to Manage alert rules. App names are hidden because of privacy reasons Go to the application for which you want to edit the query. Click on the condition whose query needs to be edited.

My client asked me to show a short message above every page and post and wished to be able to modify this text himself through the theme customizer. Now, this is not too hard and I have done it multiple times before, but I keep forgetting the specifics. This post is therefore meant as a quick cheatsheet for myself, but maybe it will help you, anonymous internet user, as well.

If you, like me, are using Pods image/svg+xml to create custom post types, you might have noticed that the post types created using Pods do not appear on your blog page by default. This is because Wordpress only queries posts with the post type post by default. Now, you may not even want to display your pods on the blog page, but if you do, there are several ways to do this (and the choice is yours).

I am currently duplicating entities through an API and there is no duplicate feature yet. Therefore, I am copying the JSON output of an entity and using the POST method of the API to re-create it with a different ID. In order to avoid errors, I have to delete all IDs from the JSON. To do that, I have found a regex that helps me find all the "id": "{guid}" combinations that I can then replace with an empty string using VS Code or Notepad++.

1. Make sure the function app has a managed identity Go to your Azure Function App and then go to Settings > Identity. Switch the status from off to on. Enabling System assigned managed identity in the Azure Function App 2. Create a Secret in the Azure Key Vault Go to your Azure Key Vault and then go to Settings > Secrets. Click + Generate/Import. Navigating towards Secrets in the Azure Key Vault

So I was working on creating a nice extendable skeleton image/svg+xml component when I stumbled upon a problem: I wanted to create a base skeleton style for the component that could be extended outside the component using utility classes. Something like this: // Skeleton template <div class="skeleton"></div> // Skeleton CSS .skeleton { background: lightgray; width: 100%; height: 1em; // etc. } // Implementation of skeleton component // with utility classes <app-skeleton class="rounded p-1"></app-skeleton> However, what happened during runtime was the following:

For my client I am currently building a website that makes use of tailwindcss image/svg+xml , a utility-first image/svg+xml CSS framework. With utility classes you can directly style elements using classes such as text-center (center the text) or bg-red-600 (red background, shade 600). Tailwindcss contains a lot of those classes and also allows combining breakpoints with these classes, such as md:font-bold (make font bold on medium sized devices or larger).

For a client I am currently creating a new website in Wordpress. To speed up design, I am basing my own Wordpress theme on an existing theme: Twenty Thirteen image/svg+xml . It is fairly old already (2013), but I like the general layout with a header and navigation on top. Whenever you upload a header image in this theme, the image would be displayed over the full width of the page.