Download a basic empty WordPress Block theme

If you are looking to download a basic, barebones WordPress block theme to test this new feature in WordPress, look no further. Below is a download link to a basic empty block theme, generated with the Create Block Theme plugin from the WordPress developers. Simply unzip this file into your themes-directory, activate it in the themes section of the dashboard and you should be good to go.

Basic block theme

How to pause browser execution when F8 is not working

Let’s break down a simple trick that can help you manipulate and understand your code better.

To begin with, access your developer console. This can usually be found in your browser’s Developer Tools under the ‘Console’ tab. Depending on the browser you’re using, you might need to use different shortcuts (like F12) or methods to open it. But don’t worry, a quick search on how to open the developer console in your specific browser should get you on the right track.

Once you’ve opened the console, the next step involves entering a particular command. All you need to do is simply paste the provided command line in the console. This is what we’re going to use to manipulate our code. After pasting the command, hit the ‘Enter’ key to execute it.

document.addEventListener('keydown', function (e) {

if (e.keyCode == 119) { // F8

debugger;

}

}, {

capture: true

});

Now, your code should still be in an ‘unpaused’ state. But when you press F8 on the keyboard, it should pause. It’s like freezing a moment in time, letting you thoroughly inspect and understand how your code behaves for specific elements. This can be especially useful when debugging hover-effects and mouseovers.

With this simple trick, your web development toolkit has a new superpower! Experiment, explore, and let your code reveal its secrets to you. Happy coding!”

Priority system for console.log()

When developing websites and applications with JavaScript we often write console.log() messages between our lines of code.

Things can get a little bit annoying when your console starts to fill up with a lot of these messages and you might feel like you want to focus just on a certain part of the program.

I have wished many times that there would be an easy way to temporarily turn off messages that I don’t need, but commenting them out one by one feels a little bit too tedious. That’s why I decided to develop a custom console log function that will only log I messages that have the highest priority number that way I can basically shut off all other messages by giving one of my messages up higher priority value. This lets me really focus on the message that I need to focus on . So here is a custom myLog() function that I’m now calling instead of console log and it takes two arguments:

the thing to log

and a priority number

If I set the priority number of one of my calls to be high higher than the others then only that message will be shown. So for example if other priorities are number one but I do a new console log that has a priority of two, then only that log message with the highest priority will be shown .

let priority = 0;
let lastLog;

function myLog(message, logPriority) {
    if (logPriority >= priority) {
        lastLog = message;
        priority = logPriority;
    }
    console.log(lastLog);
}
//use like this
myLog(`my log message and variable ${myvar}`, 1)

One downside with this method is that unlike regular console logs it doesn’t automatically show you the file and line of code that produced the console log. We can remedy this by writing a little helper function that will use the error logging capabilities in order to also include the file and the line information together with the console log. The fileInfo is now an optional third argument that you can use:

let priority = 0;
let lastLog;

function myLog(message, logPriority, fileInfo) {
    if (logPriority >= priority) {
        lastLog = message;
        priority = logPriority;
    }
    console.log(lastLog);

    if (fileInfo){ //check that it's not undefined
        console.log(`Current file: ${fileInfo.filename}, line number: ${fileInfo.lineNumber}`);

    }

}

//for getting line number and file name


function getFileInfo() {
    const err = new Error();
    const stackTrace = err.stack.split('\n')[2].trim();
    const matchResult = /\((.*):(\d+):\d+\)/.exec(stackTrace);
    const absoluteFilename = matchResult[1];
    const lineNumber = matchResult[2];

    const currentDir = window.location.href.split('/').slice(0, -1).join('/');
    const relativeFilename = absoluteFilename.replace(currentDir, '');

    return {
        filename: relativeFilename,
        lineNumber: lineNumber
    };
}

//use like this:
    myLog(`dialogueIDSent: ${dialogueIDSent}`, 1, fileInfo = getFileInfo());

Google Family Link: After Unlocking your child’s device with parental access, how do you re-lock it?

I have been using Google Family Link recently in order to keep my child’s mobile phone online while safeguarding it against mature content.

Sometimes I have logged in to the device using the parent access code and that has brought up a question that doesn’t seem to have great answers in the manual of this software: How does one logout from the child’s device after accessing it with the family link parent code?

Here’s the answer: in order to quit accessing the child’s device as a parent, go to the Google Family Link app on the parent’s device and right beneath the circular image on the top, there should be your child’s device listed. Click on the name of the device and click on “lock”. Now the device should only be available if there is screen time left and the time is withing the allowed time limits.

Several blog rolls on a single WordPress site using categories

Here’s a simple code example of how you can have separate blog roll areas on your WordPress website which show different types of blog content. Just add this query to your template file:

<?php
  $query = new WP_Query(array('category_name' => 'reviews'));
  
  if ($query->have_posts()): while ($query->have_posts()): $query->the_post();
?>

<div class="review">
  <h1><?php the_title(); ?></h1>
  <?php the_content(); ?>
</div>

<?php
  endwhile;
  else:
    echo 'No posts';
  endif;
?>

If you don’t want to hard code the blog roll in a template file, another option would be to add the category rolls to your menu in the menu editor. That way clicking on such a menu link will take you to the blog post list (archive) of the posts that belong to that archive.

How to allow a specific app on your child’s device using Google Family Link

I have set the app age restriction on my child’s device to PEGI 3 to make sure only the most child friendly content is available. There is one exception though, my child really loves Sim City Build It which is PEGI 7 and I was okay with making an exception for that specific game.

How to actually accomplish a special exception to the general age restriction rule was not so obvious however. I thought that I could just login with the parental access code and override the limits as the parent, but Play store was still complaining about Sim City being limited by the age restriction.

The only solution I eventually found for this problem was to login to Family Link on my own device (or alternatively just using the internet browser on a desktop computer) and then temporarily change the age restriction to PEGI 7. This can be done under controls –> content restrictions –> Google Play.

After that I was able to install the app, then immediately set the age restriction back to PEGI 3. The app is still working even after dropping the age restriction back to 3, so this ended up solving the issue.

CSS-only 3D fly-in animation

Have you ever wondered how to create a 3D-transition in which an element should fly past the camera onto the webpage? Here’s how you can do that using CSS-transforms:

See the effect in action here:

FLY IN!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 300px; /* the smaller, the stronger sense of perspective (like short focal lenght) */
            min-height: 95vh;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            text-align: center;

        }

        h1{
            grid-column: 2/3; /* Just for putting the h1 to center of grid */
            grid-row: 2/3; /* Just for putting the h1 to center of grid */
            transform: translate3d(800px, 200px, 1500px); /* Set the start position for the element */
            animation: myflyin 2s; /* Activate the animation called myflyin */
            animation-fill-mode: forwards; /* Keep the position from the last keyfframe */
            
        }

        @keyframes myflyin { /* Define the keyframes */

            from {
                transform: translate3d(800px, 200px, 1500px); /* Starting position */
            }

            to {
                transform: translate3d(0, 0, 0); /* End position */
            }
        }
    </style>
</head>
<body>


        <h1>FLY IN!</h1>


</body>
</html>

Force refresh on Brave mobile

 Have you ever needed to force refresh a website with the Brave browser on a mobile device like iPhone or Android phone?

The need to do that may arise, for example, when developing websites for WordPress, because WordPress will attempt to cache the CSS files and your latest changes might not be reflected even if you reload the page.

Many websites advice you to go to the browser cache settings and clear the entire cache. But that is an overkill -there is a better and simpler way:

The easiest way to force Brave to force refresh on your mobile device is to switch the browser to desktop mode from the menu with the three dots. The feature is called “Request desktop site”. After switching to that, you can then switch back to a regular mobile page and the cache should be updated.

It’s as simple as that!