Iterating on gpt-4 code suggestions

Pavel Ravits — Wed, 26 Apr 2023 11:59:03 +0000

AI can give you what you want, but you should know what you want to achieve anyway.

js
given array A and array B
B is array with objects like {id:string}
write a function which gets - A, changed-B, and previous-B , detects items reorder in B and applies that on a

function applyReorder(a, prevB, changedB) {
    // Create a map of id to index for the previous b array
    const prevBIndexMap = new Map()
    prevB.forEach((item, index) => {
        prevBIndexMap.set(item.id, index)
    })
    // Create a reordered array based on the changedB array
    const reorderedA = new Array(a.length)
    changedB.forEach((item, index) => {
        const prevIndex = prevBIndexMap.get(item.id)
        reorderedA[index] = a[prevIndex]
    })
    return reorderedA
}

now write that in a more functional style

function applyReorder(a, prevB, changedB) {
    const prevBIndexMap = prevB.reduce((map, item, index) => {
        map.set(item.id, index)
        return map
    }, new Map())
    return changedB.map((item) => a[prevBIndexMap.get(item.id)])
}

use Map constractor

function applyReorder(a, prevB, changedB) {
    const prevBIndexMap = new Map(
        prevB.map((item, index) => [item.id, index])
    )
    return changedB.map((item) => a[prevBIndexMap.get(item.id)])
}

implement this in one line

const applyReorder = (a, prevB, changedB) =>
    changedB.map(
        (item) =>
            a[
                new Map(prevB.map((el, idx) => [el.id, idx])).get(
                    item.id
                )
            ]
    )

use one line implementation using findIndex

const applyReorder = (a, prevB, changedB) =>
    changedB.map(
        (item) => a[prevB.findIndex((el) => el.id === item.id)]
    )

So progressively we got one line instead of 10 and only one implementation was non working

And the final implementation:

function applyReorder(
    applyTo: any[],
    prevAccordingTo: { id: string }[],
    changedAccordingTo: { id: string }[]
) {
    return changedAccordingTo.map(
        (item) =>
            applyTo[
                prevAccordingTo.findIndex((el) => el.id === item.id)
            ]
    )
}

Web page loading optimization

Pavel Ravits — Sat, 12 Oct 2019 13:13:44 +0000

I watched this talk:
Maximiliano Firtman - Hacking Web Performance
https://www.youtube.com/watch?v=ub1wjVgE52I
And I was surprised how much I don't know about the web page loading optimization.

I had already experience optimizing a web site with the Lighthouse audit, compressed images, but I didn't know about the size of the first TCP packet and the http/2 vs http vs http/3 and other low level staff.

I started web development with React, 3 years ago, coding sort of at high level. And from time to time, in need to fine tune performance, had to get down to low level - to communication protocols.

I understand now that I have to read staff, have to make my web knowledge more complete, know the basics.

What are the must-read low level staff for full-stack web app development?
Do I need to read the protocols themselves or the documentation. Or is it suffice to read articles that summarize the relevant matters ?

DEV Community: Pavel Ravits

Iterating on gpt-4 code suggestions

So progressively we got one line instead of 10 and only one implementation was non working

And the final implementation:

Web page loading optimization