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!
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>Free Eevee Material Library Download
Here is a collection of various procedural/non-image based EEVEE materials embedded in a single Blender-file and mapped to spheres.
This has been created based on the Cycles Material Library here:
https://blendswap.com/blend/6822
Here is a render:
Here is the download link to the Blender-file:
Anyone can try NeRF now with a free app!
The 3D industry has been buzzing about Nvidia’s Instant NeRF (which stands for neural radiance fields) ever since they published their first demo video.
This technology has since been in rapid development and we now have a free iPhone app called Luma AI that anyone can use to capture NeRFs.
I tested the app with a toy robot, here’s a automatically generated video of the result:
The amazing thing about NeRF renders is that they can handle light reflections and bounces in a very realistic manner. This makes it a good fit for VFX work. We can also export a textured 3D-model from the Luma AI app, but it’s not as impressive as rendering with NeRFs. It’s still quite good compared to a basic photogrammetry process, especially considering that the surface of our object was quite reflective. Here’s a screenshot from Blender:
Here is how the mesh looks like (very dense):
Here’s another cool shot from a Robotime Ball Parkour toy:
Best free 3D-scanning app for iPhone in 2023
I have been testing out a lot of 3d-scanning apps for my iPhone 12 Pro recently. The Lidar sensor on the phone was one of the major reasons why I decided to make at least a temporary switch from the Android ecosystem to the iOS world. I’m especially interested in creating 3d-versions (or digital twins) of different rooms and spaces. Here are some of the apps I have already tried:
DotProduct ios app
3D Scanner app
Scandy Pro
Qlone
Kiri Engine
Widar
RTAB-Map
3D Scanner
Scaniverse
Modelar
Polycam
RoomScan
Pix4DCatch
Metascan
Heges
Trinio
ItSeez3D (iPad only)
Most of the apps in the list use the freemium model, where you can do a basic scan for free, but in-app purchases are often required at the export stage. There were two exceptions that were free from start to finish:
3D Scanner App and RTAB-Map of which the latter is open source.
I did some scans of the same space with both apps and the process was quite enjoyable with both. The quality was however somewhat more limited with the 3D Scanner App and in the end I was able to to get best results with RTAB-Map. So out of these scanner apps that I tested I would recommend RTAB-Map. It has versions not only for iPhone, but turns out it’s a very versatile app used for many purposes and it has also desktop releases for the major operating systems, including Windows, Mac and Linux.
I did experience some problems when I tried to do a really detailed scan. RTAB-map probably ran out of memory on my iPhone and crashed quite frequently when post-processing the scans. Luckily it turns out that you can simply export the database from the iPhone in order to do the processing on the desktop version instead. It might not be obvious at first how the RTAB-Map database can be accessed or exported on the iPhone, but you simply need to long-press on a scan in the library and choose “share”.
After you haved shared your database and downloaded it to your desktop computer, you can simply import it to the desktop version of RTAB-Map. I must say I found the interface to be rather confusing. For example, when I was looking for the option to export a textured mesh, the way to do it was to choose the “export 3d clouds” option, although one might thing that a mesh is not exactly a “cloud”. And there wasn’t a typical option to just “export a textured mesh” but you have to check the “meshing” checkbox and then the “texturing” checkbox for the texture options. And after that I actually had to close and the re-open the export to be able to see the “save” button. So quite quirky, but it worked out well in the end.
One more piece of information I want to share about using the RTAB-map on the iPhone: one time I had it crash right after a scan and at first I thought the scan had disappeared completely but after some searches in the “issues” page of their Github, I found out that some kind of recovery might be possible in the latest version. The problem was that I just couldn’t find any recovery option in the app interface. Finally I gave up and decided to do a rescan and when I chose to do a new scan, that’s when the recovery dialogue for the previous scan finally appeared and I was able to recover my crashed scan.
