a pleasant descent into madness

Tag: fix

materialize.css & parallax

IMPORTANT:
I’m explaining this problem from an “ember” point of view, still, this solution fits multiple frameworks and is a general fix to get materialize parallax working – stay tuned!

If you know web frameworks, you know the dreaded word

DEPRECATED

from any log at any time, everywhere!

Some time ago i encountered a familiar error message while updating an ember project:

using this.$() in a component has been deprecated, consider using this.element
[deprecation id: ember-views.curly-components.jquery-element] 

Ember 3.9 deprecation (2019)

To read a detailed description on the reason this deprecation was introduced and the details on upgrading on it, please click the link in the quotation, it’ll lead you to deprecations.emberjs.com

The actual reasoning behind this change is not relevant for the fix that i’m going to introduce.

Anyhow, this change affected the parallax background(s) on my webpage, it didn’t break anything, but it would surely introduce a problem on the long run, so i was going to update the deprecated line.

The line looked like this:

 this.$(‘.parallax’).parallax();

The full deprecation warning looked like this:

deprecate.js:136
DEPRECATION:
Using this.$() in a component has been deprecated, consider using this.element [deprecation id: ember-views.curly-components.jquery-element]
See https://deprecations.emberjs.com/v3.x#toc_jquery-apis for more details.

I looked all around and found a solution on the original materialize documentation (and copies of this solution on the StackOverflow)

So i applied the “fix” and replaced my line with this:

 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });

The above code implies that you somehow import “M” from materialize css, which would add this entry to the top of the page:

import M from ‘materialize.css’;

And you know what?

It didn’t work.
I didn’t get an error, and i didn’t get a parallax.
The page was just showing no background…

Next thing i did was contacting a good friend to ask him about his opinion.
He told me, first of all, that materialize.css does not have to be imported anymore on the latest versions of ember, it’s globally injected, automagically.

So ok, we throw out the import.
The code still doesn’t work.

He tells me that it’s not a good idea to add an eventListener like this in ember, unsure if this listener like this would actually be triggered , prefering that we use the ember native method “later” to execute the code at the end of the runloop, when the dom has been build.

So we import “later” and change the code, like following:

import { later } from ‘@ember/runloop’;


later(()=>{         
var elems = document.querySelectorAll(‘.parallax’);         
window.M.Parallax.init(elems, options);});

nope, still a white background, nothing parallaxy going on here.

So then, something caught our eyes..
what’s that “options” variable doing there?
Where does it come from?
It’s never been introduced, it’s undefined, and i assumed it would be passed on as undefined, not having an effect on further execution.

Some “stepping into” later, we notice that, since the options variable is undefined, the initialization code is never executed by materialize.

We change the code like following:

import { later } from ‘@ember/runloop’;


later(()=>{         
var elems = document.querySelectorAll(‘.parallax’);         
window.M.Parallax.init(elems);});

Passing no options, alternatively, you may pass an empty hash like so “{}” as second parameter.

Bam, fixed. Parallax’es going for you.


ENJOY!

WSL2 Docker not talking to Windows Host

Or: “WSL2 Docker is not connecting to my Host!!!! HELP!”

In another post i already talked about a setup to get both Windows Host / Windows Host Docker and WSL Docker talking to each other.
The setup broke at some point and i figured out a pretty automated solution for this… for now, let’s hope it works after the next WSL or Docker update.

My solution was following Setup:

1- Start Docker in WSL automatically on BOOT

2- Wait a minute after Logon and start Docker Desktop (this post)

Prerequisites:
– Docker Desktop WSL Integration is turned off.
Docker on WSL has been detached from Docker Desktop for the Windows Host
– Docker Desktop Autostart is disabled

Now, assuming you followed part 1.
Let’s continue and create a file and paste this powershell script provided by StackOverflow User StingyJack (Thanks m8!).

In my case, the file is running in “C:/Sources/Scripts_Autostart” and is called “docker-restart.ps1”.

Write-Output "$((Get-Date).ToString("HH:mm:ss")) - Restarting docker"

foreach($svc in (Get-Service | Where-Object {$_.name -ilike "*docker*" -and $_.Status -ieq "Running"}))
{
    $svc | Stop-Service -ErrorAction Continue -Confirm:$false -Force
    $svc.WaitForStatus('Stopped','00:00:20')
}

Get-Process | Where-Object {$_.Name -ilike "*docker*"} | Stop-Process -ErrorAction Continue -Confirm:$false -Force

foreach($svc in (Get-Service | Where-Object {$_.name -ilike "*docker*" -and $_.Status -ieq "Stopped"} ))
{
    $svc | Start-Service 
    $svc.WaitForStatus('Running','00:00:20')
}

Write-Output "$((Get-Date).ToString("HH:mm:ss")) - Starting Docker Desktop"
& "C:\Program Files\Docker\Docker\Docker Desktop.exe"
$startTimeout = [DateTime]::Now.AddSeconds(90)
$timeoutHit = $true
while ((Get-Date) -le $startTimeout)
{

    Start-Sleep -Seconds 10
    $ErrorActionPreference = 'Continue'
    try
    {
        $info = (docker info)
        Write-Verbose "$((Get-Date).ToString("HH:mm:ss")) - `tDocker info executed. Is Error?: $($info -ilike "*error*"). Result was: $info"

        if ($info -ilike "*error*")
        {
            Write-Verbose "$((Get-Date).ToString("HH:mm:ss")) - `tDocker info had an error. throwing..."
            throw "Error running info command $info"
        }
        $timeoutHit = $false
        break
    }
    catch 
    {

        if (($_ -ilike "*error during connect*") -or ($_ -ilike "*errors pretty printing info*")  -or ($_ -ilike "*Error running info command*"))
        {
            Write-Output "$((Get-Date).ToString("HH:mm:ss")) -`t Docker Desktop startup not yet completed, waiting and checking again"
        }
        else
        {
            Write-Output "Unexpected Error: `n $_"
            return
        }
    }
    $ErrorActionPreference = 'Stop'
}
if ($timeoutHit -eq $true)
{
    throw "Timeout hit waiting for docker to startup"
}

Write-Output "$((Get-Date).ToString("HH:mm:ss")) - Docker restarted"

Next up: Open Task Scheduler and create a new Basic Task

Name it like you want, i chose “Start Docker Desktop after WSL Docker”.
Next, then select “When i log on”

Next: set “Program/Script” to Powershell
Then set argument to

-windowstyle hidden -ExecutionPolicy Bypass -file C:\Sources\Scripts_Autorun\docker-restart.ps1

Of course you will choose the folder where you put the script.
don’t forget to add quotations if your path contains spaces!

Click next and after finishing the setup open the Task back up again. (Edit properties)

In the General Tab set “Run only when user is logged on” and “Run on highest privilegues”

Open the Trigger in the “Triggers” tab and set a Delay for 1 minute.

That’s it!
Have, of course you will have to chill about a minute or two after rebooting your pc.
If you’re faster than your scripts, this won’t work.
You might also want to adjust the delay time for the script for part 1. and 2.

Start WSL 2 Service on Host startup

Or: “I don’t want to manually startup everything in WSL after every boot”

For me, that’s docker.
My docker is running independantly of docker desktop on the host so i want it to startup when the PC is booted.

Following easy steps to set it up in Task Scheduler:

  • Open up Task Scheduler
  • Create new Basic Task
  • Name it like you will, mine was “Autostart of WSL Docker service on boot”
  • Next, then choose “When the Computer Starts”
  • Next, then “Start a program”
  • In “Program/script” find WSL.exe, it should be located like so:
    “C:/Windows/System32/wsl.exe”
  • In “Add arguments (optional)” enter following:
    -d Ubuntu-20.04 -u root service docker start
  • Finish the setup via “Next” then “Finish”.
  • Run it to test it.

Instead of “Ubuntu-20.04” you might want to find your correct distro name by entering
“wsl –list” into a commandline on windows, you’ll need to use the same distro name displayed for the distro of your choosing.

Edit:
if this doesn’t immediately work for you, you might want to open up the task in task-scheduler, navigate to “triggers”, open the trigger and set “Delay Task for” to 30 seconds or any amount that makes sense for your system start-up time.

That’s it.
Enjoy.
Many thanks to StackOverflow user octagon_octopus

WSL2 fix clockskew

(For people who like to hibernate/sleep rather than reboot.)

So after keeping you machine running for some days, weeks, or in unlikely cases maybe months without a reboot, you might notice that wsl has trouble retrieving packages from the web and maybe even other strange problems.

This might be related to “clock skew”, an issue where the clock in WSL (2) desynchronizes with the host clock.

There’s an easy fix which sadly requires you to run a sudo-ed script in wsl on startup.

So, let’s start by disabling the sudo password

And now we should open a new WSL 2 instance, this should locate us in our userprofile directory (user home).

Run following command

sudo nano .bashrc

Then add following line to the end of the file

sudo ntpdate ntp.ubuntu.com &>/dev/null

now press CTRL + O and exit the script

After the next WSL instance start, you should not have a clockskew problem anymore.

© 2022 Yavuz-Support Blog

Theme by Anders NorenUp ↑