Build the path in a controller…

$dir_opencart = str_replace('\\', '/', DIR_OPENCART);
$dir_template = str_replace('\\', '/', realpath(__DIR__ . '/../../view/template'));
$data['dir_twig_include'] = str_replace($dir_opencart, '', $dir_template) . '/';

$this->load->view('folder/name', $data);

Then use it in a template…

{% include dir_twig_include ~ 'folder/filename.twig';

🍻

The Chromium Project intentionally ignores standard W3C specifications by not honoring the autocomplete="off" attribute of forms and inputs when their heuristics discover credential fields.

Some credentials have nothing to do with the current domain, are not auto-fillable by browser password managers, and should not require developers to deploy workarounds like the auto-fill trap below.

I’m conflicted on whether I prefer this, or the default search engine loading in every new tab. That being said, here’s how to prevent your default search engine from loading every time you open new tabs in Google Chrome.

Useful CSS transformation classes for use with Content Security Policy (CSP).

/* Flip Horizontal */
.flip-h {
	transform: scaleX(-1);
}
/* Flip Vertical */
.flip-v {
	transform: scaleY(-1);
}
/* Rotation */
.rotate-0, .rotate-360 {
	transform: rotate(0deg);
}
.rotate-45 {
	transform: rotate(45deg);
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-135 {
	transform: rotate(135deg);
}
.rotate-180 {
	transform: rotate(180deg);
}
.rotate-225 {
	transform: rotate(225deg);
}
.rotate-270 {
	transform: rotate(270deg);
}
.rotate-315 {
	transform: rotate(315deg);
}

Combining flip and rotate classes can achieve most desired display transformations.

We recently ran into an issue where CodeIgniter’s cache() produced unexpected results during development. Our problem was forgetting to change the cache handler from ‘file’ to ‘dummy’ outside of the production environment. So we do not have to remember to change the handler, we modified our App’s Config\Cache::handler as follows…

public string $handler = (ENVIRONMENT === 'production') ? 'file' : 'dummy';

That one simple “set it and forget it” change could have saved wasted time spent debugging the problem.

Update: While discussing this with other developers, one alternative would be updating the .env file.

Here’s an easy way to hide Bootstrap tooltips onclick. Useful for focusable elements that do not change the current document’s location.

document.querySelectorAll('[data-bs-toggle="tooltip"], .add-bs-tooltip').forEach(element => {
	new bootstrap.Tooltip(element)
	
	element.addEventListener('click', event => {
		bootstrap.Tooltip.getInstance(event.currentTarget).hide()
	})
})

Bonus: Our .add-bs-tooltip selector is for eliminating the need to wrap other Bootstrap elements that already have the data-bs-toggle attribute (modals, dropdowns, etc). 😉

Initially we had a long list of “From ends with” filters like below trying cut down on our most common spam sources.

From ends with .ru
From ends with .pk
From ends with .in
From ends with .de
From ends with .jp
From ends with .kr

Recently I noticed those rules were effectively blocking those TLDs. It did not take long to figure out why. Here are example FROM headers email systems might encounter.

From: "John Doe" <john@example.com>
From: Jane <jane@example.com>
From: bob@example.com

The problem with using “From ends with” is the header frequently ends with a greater-than symbol. So we decided to use “From matches regex” instead.

Below is an unobtrusive way to ensure AJAX headers are set with every fetch() request, which compliments our post regarding fetch() wrappers.

const originalFetch = fetch
fetch = ((url, options) => {
	if (!options) options = {}
	Object.assign(options, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
	const promise = originalFetch(url, options).catch(error => { console.error(error) })
	return promise
})

Now every fetch() request includes the X-Requested-With: XMLHttpRequest header.

We ultimately ended up with the following alternative to avoid replacing other existing headers.