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:

  1. Open the script file in your code editor
  2. Scroll all the way down
  3. Remove the source map link at the bottom of the file

How to get site by day report in Adsense

The Adsense report system can be a bit confusing at times. I decided to write these instructions after struggling to display daily earnings information for just a single site in Adsense.

The easiest way I found was this:

Select the “entire account by day” report type.

Go to the “search or filter your data” input box and choose “site”.

Choose the site you want to see reported. Hit apply.

Now you should see a daily breakdown for just a single site.

How to keep using port 10080 after many browsers block it as an unsafe port

If you have been doing web development using port 10080 you might have run into some issues recently since many browsers including Chrome and Firefox have decided to add that port to their blocked ports list.

I use a tool called InstantWP for WordPress development and it’s using port 10080 for http by default.

I first researched the option to change the ports IWP is using. It seems like it could be done from the config file which you can open from the “Advanced” tab by clicking “Edit Config File”. In the file that opens you should see a setting called PortOffset. I tried to change that but couldn’t get it to work even after trying many different numbers for the port offset.

I also tried to add a flag into Chrome’s startup parameters by right-clicking the Chrome icon and choosing properties. Then I replaced the value under “target” with the following string:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –explicitly-allowed-ports=10080

However that didn’t seem to fix the situation in my case. I still got the same “unsafe port” error from Chrome.

What finally helped was switching to Firefox and performing these steps:

  1. Type about:config to the address bar and click on the “accept the risk and continue” button.

Then paste in this string to the search bar:

network.security.ports.banned.override

Choose “string” as the type (I know, number would seem more logical), click on the + button and enter the port number you want to allow (in my case 10080).

Now you should be able to access applications via that port!