DEV Community: AlekseiKorolev

Implement pinch gesture

AlekseiKorolev — Sat, 04 Sep 2021 15:59:17 +0000

To recognize the gesture, we use two events 'touchestart' and 'touchend'.
Start will fire first, and we have to check exactly how many touches we need. In this case, two should be enough.
End will fire twice. The first will contain only one touch data. The second one will be empty.
What we do is save the coordinates of the start touches and compare them with the end ones. If the end touch is outside the range between the start touches, this means that we are zooming in, otherwise, we are zoomin out.
Live example (use on phone)

Debugging an Angular mobile app

AlekseiKorolev — Fri, 27 Aug 2021 18:23:41 +0000

When working on a mobile app in Angular, we need to test and debug mobile events (such as pinching) that are not triggered from the desktop chrome or Android simulator.

Run the application on the local network

ng serve --host 0.0.0.0

Reach app from mobile phone use ip address and port number
Activate developer options on phone - tap 7 times on Build Number (Settings > About Phone > Build Number)
Enable USB Debugging (Settings > System > Developer Options > USB debugging)
Connect phone to computer via usb and allow usb debugging
Add to address line chrome://inspect#devices
Inspect app

Create Linked List with .reduce

AlekseiKorolev — Tue, 13 Oct 2020 21:39:00 +0000

Easy, readable, and simple way create linked list use built-in function.

    // Array
    const linkedList = arr => arr
        .reduce((next, val) => { return {val, next} }, null)

Can use any type of data

    // Map or Set
    const linkedList = map => Array.from(map.values())
        .reduce((next, val) => { return {val, next} }, null)

Can use .sort or .reverse() to change direction and order

    // Object
    const linkedList = obj => Object.keys(obj)
        .map(key => obj[key])
        .sort((a, b) => b - a)
        .reduce((next, val) => { return {val, next} }, null)