Debugging iOS Safari on Windows 10

Stephan Petersen december 2020

Recently I ran into an Issue when I had to inspect my I-Pad with Chrome DevTools. Nothing easier then that... I thought.

When my IPad told me that safari could not establish a connection to the server I started to search the web for a solution.
I had allready read the Chrome Dev Tool Tips by Kayce Basques, but with Safari it didn't work as expected. Another article by John Washam and one by michal turzynski published by Medium.com helped me along, so that I was able to inspect live websites with Chrome DevTools.

Here I just put the things together.

• Run PowerShell as Administrator
• The first step was to install the RemoteDebug iOS WebKit Adapter npm package:   npm install remotedebug-ios-webkit-adapter -g

• Then I downloaded Scoop a command-line installer for Windows with the following command iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh')
• With scoop you have to add the 'extras' scoop bucket before you're able for the last step. scoop bucket add extras https://github.com/lukesampson/scoop-extras.git
• The last thing to do is to install the iOS WebKit Debug Proxy with the following command: scoop install ios-webkit-debug-proxy
• Now you can run the WebKit Adapter with the following command: remotedebug_ios_webkit_adapter --port=9000 "You can run it from any Terminal"

Make shure that your firewall isn't blocking the proxy.
You can now go to the "chrome://inspect/#devices" and configure the network Target to "localhost:9000" Then inspect like usually

3D animations fundamentals

Stephan Petersen december 2020

You have to have a few things in mind when you draw 3D animations into your website

First of all you can be forced to do some serious calculations to end in an acceptable solution that satisfies your expectations.
If you want to check the limits Keith Clark has some realy cool demos on his website.
But with simpler means you can create original eye-catchers for your work.

These are the Basics

• The element you want to create needs perspective to end up in three dimensions
• You can add perspective directly on the Element   transform: perspective(var(--perspective) rotateY(var(--degreesY)))
• Or You can add the perspective, with the same named property, to the parent container. In relation to the W3C "3D rendering context" I think this is the recommended way. .parent-div { perspective: var(--perspective)} You will see that your 3D object will grow or shrink in the Z-axis when you experiment with the perspective values.
• If you set up you objects like this they will stay in the same three dimensional stack wich makes perfect sense.
• If You need more information I recommend the website of David DeSandro who is diving deeper into the details and gives a few examples.
• In my own small examlpe the ul is the parent with theperspective: