JSFiddle - React, Tailwind, and code Playground

by serebrov

HTML

<body>
<ul class="summary">
<li class="line-1">In 2016, Uber undertook a massive rewrite of its Rider app, codenamed Helix, which involved over 100 iOS and Android engineers and a new architecture called RIBs.</li>
<li class="line-2">The rewrite had to be completed in less than three months, with a hard deadline of September 16th, due to Apple's app store freeze at Christmas.</li>
<li class="line-3">The project faced numerous challenges, including slow tooling, long test suites, and a 100MB over-the-air update limit imposed by Apple, which threatened to halt the company's high growth.</li>
<li class="line-4">Despite these challenges, the team managed to release the app on November 2nd, using a risky "YOLO" strategy that replaced the old app with the new one on the store, with only a week to fix known issues before it went out to millions of users.</li>
<li class="line-5">The launch was initially smooth, but the team soon faced launch woes, including a bug affecting 15% of users, which required a client-side fix due to legal reasons.</li>
<li class="line-6">The team worked around the clock to fix the bug and release a new build, which was tested by multiple engineers before being shipped.</li>
<li class="line-7">The article describes the launch of Helix, Uber's Rider app rewrite, which was a challenging project for the engineering team.</li>
<li class="line-8">The team faced many difficulties, including a tight timeline, a high volume of traffic, and critical bugs.</li>
<li class="line-9">Despite the challenges, the launch was a success, with over 1 million people using the new iOS app in the first 24 hours.</li>
<li class="line-10">The project had a visible impact within Uber, with the next app rewrite being more gradual and cautious.</li>
<li class="line-11">The article includes quotes from other engineers who worked on the project and highlights job opportunities for senior engineers and engineering managers.</li>
  </ul>
  <button>🪄</button>
</body>

CSS

button {
    font-size: 64px;
  }
  .header {
    font-size: 24px;
    font-weight: bold;
    list-style: none;
  }

JavaScript

function reorderJavascript(newList) {
    var oldList = document.querySelector('ul.summary')
    // Get all old items, convert to array
    var oldItems = Array.prototype.slice.call(oldList.querySelectorAll('li'))
    var newItems = []

    // A map of class names and old top positions
    var oldItemsMap = {}

    for (var i = 0; i < newList.length; i++) {
      var item = newList[i]
      var oldItem = oldList.querySelector('li.' + item.class)
      if (oldItem) {
        newItems.push(oldItem)
        oldItemsMap[item.class] = oldItem.getBoundingClientRect().top
      } else {
        // Element is not present in the old list
        var newItem = document.createElement('li')
        newItem.classList.add(item.class)
        newItem.textContent = item.text
        newItems.push(newItem)
      }
    }

    // Insert new items into the oldList, preserve the order of newList
    var current = null
    if (oldItems[0] === newItems[0]) {
      current = firstOld
    } else {
      oldItems[0].before(newItems[0])
      current = newItems[0]
    }
    for (var i = 0; i < newItems.length; i++) {
      var newItem = newItems[i]
      current.after(newItem)
      current = newItem
    }

    // Animate items
    var top = newItems[0].getBoundingClientRect().top
    for (var i = 0; i < newItems.length; i++) {
      var newItem = newItems[i]

      var itemClass = newItem.className
      // if new item was present before
      if (oldItemsMap[itemClass]) {
        var newTop = newItem.getBoundingClientRect().top
        var oldTop = oldItemsMap[itemClass]
        var dy = oldTop - newTop
        newItem.style.transform = 'translateY(' + dy + 'px)'
      } else {
        // if new item was not present before
        // animate from the top
        newItem.style.transform = 'translateY(-100%)'
      }

      top += newItem.getBoundingClientRect().height
    }

    // https://aerotwist.com/blog/flip-your-animations/
    window.requestAnimationFrame(function () {
      for...