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.
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!”
How to Go back in time with a Github Repository
In this video we are loading an older version of a Github repository in order to inspect the code at an earlier point.
Developer tools: Pause code execution with a breakpoint only when a certain loop index is true
If you want to pause your code execution in Chrome developer tools only after a certain iteration number of a loop has been reached, simply right click on the line number and choose “add conditional breakpoint”. Then just type in your condition and your done. Now the execution will only pause if the variable value is what you defined!
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>How to fix the “Could not read source map for file” error when trying to setup Tensorflow.js
If you are getting a “Could not read source map for file” error in the console when trying to link to a JavaScript library like Tensorflow, the solution is simple. You propably don’t need the source map anyways unless you are planning to really digging into the code base of the library. So simply:
- Open the script file in your code editor
- Scroll all the way down
- Remove the source map link at the bottom of the file