There is no direct function for this in my knowledge. But it can be done easily like so.
if ( mb_strlen( $string, 'ASCII' ) === mb_strlen( $string, 'utf-8' ) ) {
return true;
}
Categories
Category: Coding
Google Chrome on Android tries to show pages in user’s preferred language by continuously showing translation pop-up on each page load. This happens when website content is in a different language than user’s preferred language.
But this creates issues in user experience by hiding bottom content on website. My site had fixed bottom navigation bar which was getting hidden by the translation pop-up and was badly ruining user experience by making it unusable at times.
So, to disable these translation features, there are some meta tags that you can add to the head section of all your webpages.
<!-- Disable translation in Google search -->
<meta name="googlebot" content="notranslate" />
<!-- Disable translation widget on Chrome -->
<meta name="google" content="notranslate" />The first meta tag disables translation in Google Search results, and the second one disables translation pop-up in Chrome.
Problem solved.
References:
This code will restrict html multi select input to given number.
document.addEventListener( "click", function( event ) {
if ( event.target.matches( '.input-checkbox' ) ) {
var inputCheckboxes = document.querySelectorAll( '.input-checkbox[type="checkbox"]:checked' );
if( inputCheckboxes.length > 3 ) {
event.preventDefault();
alert( 'You cannot select more than 3 categories for a post.' );
}
}
} );
Categories
MySQL Disk Size Issue
I was facing a strange issue on one of my servers. Storage was getting full even when I did not upload any extra files.
Turned out it was a MySQL logging issue and got resolved only when I disabled logging.
References:
Categories
Why click event not working on SVG
I created a simple menu with SVG icons and to my surprise, clicking on the icon was not taking me to the linked url.
It turned out that as SVGs are independent HTML objects, the target element is actually nested path. So, it does not match with the clicked element and thus click event listeners does not work on it.
Similarly, if you add others event listeners to the parent element of the SVG’s, it does not work.
There are multiple ways to fix this-
-
Disable click on SVG elements by adding the CSS- pointer-events: none;
-
Add event listener to the path element of SVG.
Problem solved.
References:
Categories
Add event listener on SVG element
I was facing problem while adding event listener to an svg element.
Then I added event listeners to both svg and path tags, and it worked.
To hide the address bar in a TWA app, you must have setup and asset links file on our server with valid SHA certificate fingerprint. Sometimes the app works fine when we test it by directly installing through apk, but address bar is shown when we download the app from play store.
The reason for this is that when we upload an app to the play store, Google sign the APK with its own signing key which changes the SHA certificate fingerprint.
So, to solve this issue, we need to add both the SHA certificate fingerprints in the asset links file so that our app works fine whether we install it directly or through play store.
The Trusted Web Activity (TWA) in Chrome has made it so easy to package and publish any website as an app.
But the problem arises when we want to track when your website was opened inside the TWA app.
Usually we can easily do this in a webview app by appending a custom string to the user agent. But that option is not available in TWA.
However, we can easily track the entry into the app using a custom query string.
TWA apps allow us to set start_url of the app to include any custom query string. So, when the app will be launched, it will open the first page after appending the given query string. You can detect that to track the entry into the app.
But this does not work when app is directly opened because of the intent when user clicked on a link to the website. In that case, you can detect the HTTP referer which is in the format- android-app://<package name>/
So, to summarize, you just need to check both these conditions to identify if a user has opened a page in your app.
If you want to track each and every page view of the user inside the app, it is possible by persisting the state through the query string. I have written an article about persisting state through query string using Javascript- How to persist state through query string in url
But this query string method may or may not be reliable as TWA apps allows users to directly open links from inside the TWA app into the main Chrome app. So, query string will then be passed to the Chrome app and your analytics will be skewed. But in any case, you will get a fair idea about user activity inside your TWA app.
In some cases when you do not have the option of cookies to manage state, query string can be a good option.
In this article, I am going to use some Javascript to persist state through a query string in the url. The Javascript code is added to head section of html when the desired query string is present in the url and then that Javascript will add that query string to all the internal urls on that page.
Here is the code-
const elements = document.querySelectorAll("a");
var url ='';
var theURL = '';
elements.forEach(function (element) {
url = element.getAttribute('href');
if ( url.startsWith('https://example.com') ) {
try {
theURL = new URL(url);
if ( theURL ) {
let params = new URLSearchParams(theURL.search);
params.set( 'key', 'value' );
theURL.search = params;
element.setAttribute('href', theURL);
}
} catch(e) {
}
}
});
Now you can persist the query string throughout the user session. You can use the query string to identify the session details on the server.
Hope this helps.
To change page title tag in WordPress, use the pre_get_document_title filter.
Most of the answers on web have mentioned the filter wp_title, but do not use it as wp_title function will be deprecated in future and wp_title hook will not work.
At present, wp_title filter does not work when modifying the title tag.
Categories
Prevent Form Resubmission on Page Refresh
We face a common issue on many websites that whenever a form submits to the same page, and then we refresh the page, the form data is submitted again. Sometimes the browser asks for confirmation, sometimes it does not. It becomes really frustrating if it causes an operation to happen twice.
To prevent this on our website, all we need to do is add a small Javascript code snippet, and the form resubmission issue will be gone.
Here is the code-
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
Most of the older programming languages are sequential in nature. That means, when the code runs, it is executed line by line. If there is a function call, the next line is executed only when the function has been executed and returned control. This is blocking in nature and helps programmers easily predict the output of their code.
But when we move to async languages like Javascript, code is non-blocking in nature. That means, execution does not wait for any function to return response. This is good for performance, but creates a problem when the next line of code requires output from the function call made in previous line.
To solve this problem, Javascript provides Promises. Promises allow us to write a callback function to process the response of the called function. But their syntax requires to write another function to handle the response. Also, if there are multiple functions, it may lead to callback hell.
The syntax of a function returning a promise is:
function add(a, b) {
return new Promise(function(resolve, reject) {
resolve(a+b);
});
}And this is how we handle the returned Promise:
add(2,3).then(function(response) {
console.log(response);
}This becomes cumbersome if there are a lot of function calls nested inside one another. To simplify this code, there are two keywords in Javascript to write promises in a very simple way- async and await.
async
async can be placed before a function definition. It means that the function will always return a promise. If the returned value is not a promise, it will wrap it in a promise and return.
async function demoFunction() {
return 1;
}await
await can be placed before any line of code to ensure that Javascript hold the execution till that line is executed. If there is a function call in that line, Javascript is wait till the function returns a response.
async function demoFunction() {
let sum = await add(a, b);
console.log(sum);
}In the above example, we are calling a function called add and saving its value in a variable called sum. The await ensures that the next line is executed only after we get the value returned from the function add. If we remove the await keyword from this, console.log may print an empty variable.
So, even if the called function is returning a promise, there is no need of defining any callback function. Just simply store its return value in a variable and process it in the next line of code. This is pretty much like we do stuff in C or PHP.
Note: await can only be used inside an async function.
This is such a simple syntax that can easily make Javascript code sequential whenever needed.
To read the detailed description of these keywords, you can refer to the following articles:
In Javascript, there are a lot of instances when you want to find multiple elements on a page to apply a common operation to all of them.
Suppose you want to hide elements of a particular class present on your web page. To do this, first get an array of all such elements using querySelectorAll and then loop through that array items to change the display property of all such elements.
But there is an issue. querySelectorAll also returns additional data, a static NodeList. If you iterate through all the items, you will hit the static NodeList which will give error.
So, what is the solution for this?
First, find the number of elements found matching the given selector using length property. Then use a for loop and iterate upto length number of items.
This will be more clear through following code example.
// Let's assume that we are looking for all elements with class "demo-item"
elements = document.querySelectorAll( '.demo-item' );
var i = 0;
for ( i = 0; i < elements.length; i++ ) {
elements[i].style.display = "none";
}Hope this helps.
How to count words in Unicode string using PHP? This sounds too easy. After all, PHP has so many string manipulation functions. To count words, we can simply use str_word_count and we are good to go. But there is a problem.
While this function works fine for English strings, developers find this function unpredictable as sometimes it also counts some symbols. But the real problem is that this function doesn’t work accurately for Unicode strings.
I faced this problem while working on one of my websites which is entirely in Hindi. When I searched, I was surprised to find that there is no straight forward solution or function to do this. There should be a standard function which should work for all languages, but the variation in structure of languages does not allow this.
A new function to count words in Unicode string using PHP
So, I wrote a small function which can be used anywhere to count the words in a Unicode string and works for a large number of popular languages. It first removes all the punctuation marks & digits to ensure that we do not count them as words. Then it replaces all white space blocks, including tab, new line etc., by a single space character.
Now all words of the string are separated by a single space separator. We can simply split/explode them into an array and count its elements to find the word count.
You can see the code below.
Just copy this code to your PHP project and start using this function to count words in any Unicode string.
And this is equally good for English strings as well. I found it more accurate than str_word_count.
Remember, it will work accurately for all those strings where spaces are used for word separation. But it may not work accurately for languages like Mandarin, where words are not separated by spaces.
Please do let me know how you like this article "How to count words in Unicode string using PHP" through comments section below.