1<!DOCTYPE html> 2<html lang="en-us"> 3<head> 4 5 6 <meta charset="utf-8"> 7 <meta name="author" content="Muhammad Yasoob Ullah Khalid"> 8 <meta name="keywords" content="Yasoob, Yasoob Khalid, Python Tips, Intermediate Python, Pakistan, Programmer, Blogger, Muhammad Yasoob Ullah Khalid, Software Engineer"> 9 10 <meta property="og:image" content="https://yasoob.me/images/reorder-items/header.png"> 11 12 <meta property="og:url" content="https://yasoob.me/posts/how-to-efficiently-reorder-or-rerank-items-in-database/"> 13 <meta property="og:title" content="How to Efficiently Reorder or Rerank Items in Database - Yasoob Khalid"> 14 <meta property="og:type" content="profile"> 15 16 <meta name="description" content="I was once thinking about Trello and Jira and wondered how they implemented the sorting functionality in their drag & drop interface. You can have a million items/cards and both of these platforms will allow you to change the order in a simple drag and drop manner and efficiently update their position in the database. 17How could I implement such a system? It was hard to do research on this topic because most queries returned results from blogs that showed how to implement a drag and drop component using React DnD and similar libraries but did not show how to persist the new order in a database."> 18 <meta property="og:description" content="I was once thinking about Trello and Jira and wondered how they implemented the sorting functionality in their drag & drop interface. You can have a million items/cards and both of these platforms will allow you to change the order in a simple drag and drop manner and efficiently update their position in the database. 19How could I implement such a system? It was hard to do research on this topic because most queries returned results from blogs that showed how to implement a drag and drop component using React DnD and similar libraries but did not show how to persist the new order in a database."> 20 <meta name="twitter:description" content="I was once thinking about Trello and Jira and wondered how they implemented the sorting functionality in their drag & drop interface. You can have a million items/cards and both of these platforms will allow you to change the order in a simple drag and drop manner and efficiently update their position in the database. 21How could I implement such a system? It was hard to do research on this topic because most queries returned results from blogs that showed how to implement a drag and drop component using React DnD and similar libraries but did not show how to persist the new order in a database."> 22 23 <meta name="twitter:site" content="@yasoobkhalid"> 24 <meta name="twitter:title" content="How to Efficiently Reorder or Rerank Items in Database - Yasoob Khalid"> 25 <meta name="twitter:card" content="summary"> 26 <meta property="profile:first_name" content="Muhammad Yasoob Ullah"> 27 <meta property="profile:last_name" content="Khalid"> 28 <meta property="profile:gender" content="male"> 29 <meta name="google-site-verification" content="h-RrQYj6aNBgcXU7M49xoUoksuI0WuJnbcJbFPJMqc4"> 30 31 32 <link rel="icon" type="image/png" href="/images/logo.png"> 33 34 35 <meta charset="utf-8"> 36 <meta name="generator" content="Hugo 0.88.1" /> 37 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 38 <link href="//fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"> 39 <link id="light" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/github.min.css"> 40 <link id="dark" rel="alternate stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/dracula.min.css"> 41 <link rel="stylesheet" href="/css/normalize.css"> 42 <link rel="stylesheet" href="/css/skeleton.css"> 43 <link rel="stylesheet" href="/css/custom.css"> 44 <link rel="alternate" href="/index.xml" type="application/rss+xml" title="Yasoob Khalid"> 45 <link rel="webmention" href="https://webmention.io/yasoob.me/webmention" /> 46 <link rel="pingback" href="https://webmention.io/yasoob.me/xmlrpc" /> 47 <title>How to Efficiently Reorder or Rerank Items in Database - Yasoob Khalid</title> 48</head> 49<body> 50<div class="announcement"> 51 <p>Practical Python Projects book is <a href="https://practicalpython.yasoob.me/">now available!</a>
51 Learn how to implement 12 end-to-end projects to enhance your Python knowledge.</p> 52</div> 53<div class="container"> 54 <header onclick="nav_display()" id="nav" class="hide-nav" role="banner"> 55 <div class="header-logo"> 56 <a href="/"><img alt="website logo" src="/images/profile.jpg" width="60" height="60" alt="Yasoob Khalid"></a> 57 </div> 58 <h1 class="site-title"><a href="/"><img alt="website logo" src="/images/logo.png" /></a>Yasoob Khalid<span class="toggle"></span></h1> 59 <p class="tag-line">Author, Blogger & artist who can't make up his mind.</p> 60 <div class="nav-links"> 61 <nav> 62 <ul> 63 <li><a href="/">Home</a></li> 64 <li><a href="/arts">Art Projects</a></li> 65 <li><a href="https://yasoob.github.io/learn-git" target="_blank">Learn Git</a></li> 66 <li><a href="/about">About</a></li> 67 <li> 68 <a id="darkModeToggle">ð</a> 69 <a href="/index.xml"><img alt="rss" class="rss" src="/images/rss.ico"></a> 70 </li> 71 </ul> 72 </nav> 73
73<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7IP53Y&placement=yasoobme" id="_carbonads_js"></script>
73 74 <h3 class="book-header">My Books</h3> 75 <div class="book-promo"> 76 <a href="https://practicalpython.yasoob.me/"><img src="/images/practical-python.png"/></a> 77 <h4><a href="https://practicalpython.yasoob.me/">Practical Python Projects</a></h4> 78 <p>In 325+ pages I will help you implement 12 end-to-end projects to enhance your Python knowledge.</p> 79 </div> 80 <div class="book-promo"> 81 <a href="https://book.pythontips.com/"><img src="/images/intermediate-python.png"/></a> 82 <h4><a href="https://book.pythontips.com/">Intermediate Python</a></h4> 83 <p>In this free, open-source, and widely-read book, you will learn some intermediate Python concepts.</p> 84 </div> 85 </div> 86 </header> 87 88 89 <div class="tableOfContentWrapper"> 90 <aside class="hidden tableOfContentContainer" id="tableOfContentContainer"> 91 <h3>Table of contents</h3> 92 <nav id="TableOfContents"> 93 <ul> 94 <li><a href="#problem">Problem</a></li> 95 <li><a href="#approach-1-order-items-in-increments-of-100">Approach 1: Order items in increments of 100</a></li> 96 <li><a href="#approach-2-order-items-using-a-floating-number">Approach 2: Order items using a floating number</a></li> 97 <li><a href="#approach-3-order-items-using-lexorank">Approach 3: Order items using LexoRank</a></li> 98 <li><a href="#further-reading">Further reading</a></li> 99 </ul> 100</nav> 101 </aside> 102 </div> 103 104 <main role="main" class="single-main"> 105 <article class="single" itemscope itemtype="http://schema.org/BlogPosting"> 106 <span class="git-source"> 107 <a target="_blank" href="https://github.com/yasoob/personal_blog/tree/master/content/posts/how-to-efficiently-reorder-or-rerank-items-in-database.md">Source</a> 108 </span> 109 110 <div class="featured-image"> 111 <img src="/images/reorder-items/header.png"> 112 </div> 113 114 <h1 class="entry-title" itemprop="headline">How to Efficiently Reorder or Rerank Items in Database</h1> 115 <span class="entry-meta"> 116 117 <time itemprop="datePublished" datetime="2023-02-12">February 12, 2023</time> 118 119 </span> 120 <section itemprop="entry-text"> 121 <p>I was once thinking about Trello and Jira and wondered how they implemented the sorting functionality in their drag & drop interface. You can have a million items/cards and both of these platforms will allow you to change the order in a simple drag and drop manner and efficiently update their position in the database.</p> 122<p>How could I implement such a system? It was hard to do research on this topic because most queries returned results from blogs that showed how to implement a drag and drop component using <a href="https://react-dnd.github.io/react-dnd/">React DnD</a> and similar libraries but did not show how to persist the new order in a database. Nevertheless, I kept on searching and was able to read up on 3 different methods and want to share them with you.</p> 123<h2 id="problem">Problem</h2> 124<p>Let’s set up the problem that motivated this research. Imagine you have a list that has associated items. The db models might look something like this:</p> 125<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">List</span>(models<span style="color:#f92672">.</span>Model): 126 name <span style="color:#f92672">=</span> models<span style="color:#f92672">.</span>CharField(max_length<span style="color:#f92672">=</span><span style="color:#ae81ff">100</span>) 127 128<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Item</span>(models<span style="color:#f92672">.</span>Model):
129 list <span style="color:#f92672">=</span> models<span style="color:#f92672">.</span>ForeignKey(List, related_name<span style="color:#f92672">=</span><span style="color:#e6db74">'items'</span>, on_delete<span style="color:#f92672">=</span>models<span style="color:#f92672">.</span>CASCADE) 130 name <span style="color:#f92672">=</span> models<span style="color:#f92672">.</span>CharField(max_length<span style="color:#f92672">=</span><span style="color:#ae81ff">100</span>) 131 order <span style="color:#f92672">=</span> models<span style="color:#f92672">.</span>IntegerField(default<span style="color:#f92672">=</span><span style="color:#ae81ff">1</span>) 132</code></pre></div><p>Now imagine you have 10 items and the order goes from 1-10 for these 10 items. For simplicity’s sake, this is how they might look like:</p> 133<pre tabindex="0"><code>|order | name | 134|------|-------------| 135| 1 | Item No: 1 | 136| 2 | Item No: 2 | 137| 3 | Item No: 3 | 138| 4 | Item No: 4 | 139| 5 | Item No: 5 | 140| 6 | Item No: 6 | 141| 7 | Item No: 7 | 142| 8 | Item No: 8 | 143| 9 | Item No: 9 | 144| 10 | Item No: 10 | 145</code></pre><p>Now, you are are being asked to update the order of the 10th item to 2. The resulting list will look something like this:</p> 146<pre tabindex="0"><code>|order | name | 147|------|-------------| 148| 1 | Item No: 1 | 149| 2 | Item No: 10 | 150| 3 | Item No: 2 | 151| 4 | Item No: 3 | 152| 5 | Item No: 4 | 153| 6 | Item No: 5 | 154| 7 | Item No: 6 | 155| 8 | Item No: 7 | 156| 9 | Item No: 8 | 157| 10 | Item No: 9 | 158</code></pre><p>Now the problem is, how can you make this reordering operating efficient? In this nieve example, you will have to re-order each successive item in the database and modify its order. This will lead to 9 total database calls for modifying the order of item 10 from 10 to 2.</p> 159<p>For a small list, this brute-force approach might work. At most you will have to update the ordering of all the items between the current order position and the new order position. If this is the solution you want to go ahead with, you can read <a href="https://www.revsys.com/tidbits/keeping-django-model-objects-ordered/">this post on the Revsys blog</a> on how to implement something like this in Django. However, this solution will not scale so lets look at a few diffrent approaches to fixing this problem.</p> 160<h2 id="approach-1-order-items-in-increments-of-100">Approach 1: Order items in increments of 100</h2> 161<p>The first approach is to set the initial order value in multiples of 100 (or any other large number). This is how the default ordering will look like:</p> 162<pre tabindex="0"><code>|order | name | 163|------|-------------| 164| 100 | Item No: 1 | 165| 200 | Item No: 2 | 166| 300 | Item No: 3 | 167| 400 | Item No: 4 | 168| 500 | Item No: 5 | 169| 600 | Item No: 6 | 170| 700 | Item No: 7 | 171| 800 | Item No: 8 | 172| 900 | Item No: 9 | 173| 1000 | Item No: 10 | 174</code></pre><p>When you have to modify the order of item 10 and move it to position 2, you can simply update the order value to be between 100 and 200. This will result in an order value of 150 for item 10. This will not require any changes to the ordering of the rest of the items as long as the difference between the order value of adjacent items is more than 1.</p> 175<p>This is what the newly ordered table will look like:</p> 176<pre tabindex="0"><code>|order | name | 177|------|-------------| 178| 100 | Item No: 1 | 179| 150 | Item No: 10 | 180| 200 | Item No: 2 | 181| 300 | Item No: 3 | 182| 400 | Item No: 4 | 183| 500 | Item No: 5 | 184| 600 | Item No: 6 | 185| 700 | Item No: 7 | 186| 800 | Item No: 8 | 187| 900 | Item No: 9 | 188</code></pre><p>This approach allows us to reorder and place 100 items between any 2 items with default ordering before it runs into problems. What would you do when two adjacent items have an order difference of only 1? Let’s take a look at the next approach and see how to get around this.</p> 189<h2 id="approach-2-order-items-using-a-floating-number">Approach 2: Order items using a floating number</h2> 190<p>This approach suggests to ditch integers and start using floating point numbers to keep the order. This will result in such a table structure:</p> 191<pre tabindex="0"><code>|order | name | 192|------|-------------| 193| 1.0 | Item No: 1 | 194| 2.0 | Item No: 2 | 195| 3.0 | Item No: 3 | 196| 4.0 | Item No: 4 | 197| 5.0 | Item No: 5 | 198| 6.0 | Item No: 6 | 199| 7.0 | Item No: 7 | 200| 8.0 | Item No: 8 | 201| 9.0 | Item No: 9 | 202| 10.0 | Item No: 10 | 203</code></pre><p>Now when you reorder and move Item no 10 to position 2, it will get an order value of 1.5. You can keep on moving items around and there will always be room to add more items as the order is now a floating point number.</p> 204<p>Pretty good approach! This solves the previous issue where we ran out of values to assign to the order key when adjacent values had an order difference of only 1. However, the floats also have a limit. I doubt you will encounter that limit in most typical cases but it is there and it is good to be aware of it. Most databases have their own limit for how big a float can be so I will not go into too much detail.</p> 205<p>There is one more approach that overcomes these limitations.</p> 206<h2 id="approach-3-order-items-using-lexorank">Approach 3: Order items using LexoRank</h2> 207<p>LexoRank is currently used by Jira for ordering and ranking issues. You can read <a href="https://tmcalm.nl/blog/lexorank-jira-ranking-system-explained/">this article</a> to get some idea of how it works inside Jira from an admin standpoint.</p> 208<p>The word LexoRank can be divided into two parts:</p> 209<ul> 210<li>Lexo: refers to the word lexicographical which basically means alphabetical ordering.</li> 211<li>Rank: refers to the position of Jira issues on a boardâs backlog, on a kanban board itself or in the active sprint on a scrum board.</li> 212</ul> 213<p>
213It basically makes use of alphanumeric strings to keep the order. By default, the items might be ordered like this:</p> 214<pre tabindex="0"><code>|order | name | 215|------|-------------| 216| a | Item No: 1 | 217| b | Item No: 2 | 218| c | Item No: 3 | 219| d | Item No: 4 | 220| e | Item No: 5 | 221| f | Item No: 6 | 222| g | Item No: 7 | 223| h | Item No: 8 | 224| i | Item No: 9 | 225| j | Item No: 10 | 226</code></pre><p>If you want to move item 10 to position 2, you can simply append “a” at the end. The updated order will look like this:</p> 227<pre tabindex="0"><code>|order | name | 228|------|-------------| 229| a | Item No: 1 | 230| aa | Item No: 10 | 231| b | Item No: 2 | 232| c | Item No: 3 | 233| d | Item No: 4 | 234| e | Item No: 5 | 235| f | Item No: 6 | 236| g | Item No: 7 | 237| h | Item No: 8 | 238| i | Item No: 9 | 239</code></pre><p>Now if you want to move item 9 to position 3, the updated order might resemble this:</p> 240<pre tabindex="0"><code>|order | name | 241|------|-------------| 242| a | Item No: 1 | 243| aa | Item No: 10 | 244| ab | Item No: 9 | 245| b | Item No: 2 | 246| c | Item No: 3 | 247| d | Item No: 4 | 248| e | Item No: 5 | 249| f | Item No: 6 | 250| g | Item No: 7 | 251| h | Item No: 8 | 252</code></pre><p>This way you can either keep on appending characters at the end of the order value or update one of the characters whenever you want to modify the order. The actual LexoRank implementation is not this simple but uses the same concept. It offsets each new order value and also makes use of buckets. These buckets come into play when individual order values become too long and need to be normalized. You can read <a href="https://stackoverflow.com/questions/40718900/jiras-lexorank-algorithm-for-new-stories">this StackOverflow answer</a> to get a better sense of how it works.</p> 253<p>And that’s it! One thing I could have done better while doing this research is to search for “ranking” algorithms on top of “ordering” algorithms. That might have yielded better results much quicker. If this post helps you in any way, please do let me know.</p> 254<p>I plan on keeping future articles short and to-the-point so that I can keep writing more often. A long post takes too much time and requires a ton of editing. I will keep writing those as well but I don’t want most new ideas to end up on my drafts folder and never see the light of day. One such draft has been open in a separate tab on my laptop for more than 2 months now ð Wish me luck and pray that I stick to this new plan of publishing more frequently.</p> 255<h2 id="further-reading">Further reading</h2> 256<p>Here is a list of articles that might help if you want to read more on this topic:</p> 257<ul> 258<li><a href="https://stackoverflow.com/questions/40718900/jiras-lexorank-algorithm-for-new-stories">Jira’s Lexorank algorithm for new stories</a></li> 259<li><a href="https://cs.stackexchange.com/questions/60530/terminology-what-does-alphanumeric-order-mean-in-relation-to-decimals">Terminology - What does alphanumeric order mean in relation to decimals?</a></li> 260<li><a href="https://medium.com/whisperarts/lexorank-what-are-they-and-how-to-use-them-for-efficient-list-sorting-a48fc4e7849f">LexoRanks â what are they and how to use them for efficient list sorting</a></li> 261<li><a href="https://www.revsys.com/tidbits/keeping-django-model-objects-ordered/">Keeping Django Models Ordered</a></li> 262</ul> 263 264 265<div class="related"> 266 <h2>You might also like</h2> 267 <ul> 268 269 <a class="previous" href="https://yasoob.me/posts/spotify-synced-and-translated-lyrics-display/">ð Project Write-up: Display Spotify lyrics on external display</a><br> 270 271 272 <a class="next" href="https://yasoob.me/posts/how-to-use-vision-framework-via-pyobjc/">ð How to Use Apple Vision Framework via PyObjC for Text Recognition</a> 273 274 </ul> 275</div> 276 277 <section id="privacy-button-links"> 278 279 280 281 282 <ul class="index_category"> 283 284 <li> 285 <a href="https://yasoob.me/categories/programming/">programming</a> 286 </li> 287 <li> 288 <a href="https://yasoob.me/categories/database/">database</a> 289 </li></ul> 290 291 <div> 292 <a 293 target="_blank" 294 style="background-color: #1877f2;" 295 rel="noreferrer" 296 referrerpolicy="no-referrer" 297 href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fyasoob.me%2fposts%2fhow-to-efficiently-reorder-or-rerank-items-in-database%2f?utm_source=facebook&src=sdk
297preparse" 298 ><svg 299 xmlns="http://www.w3.org/2000/svg" 300 width="24" 301 height="24" 302 viewBox="0 0 24 24" 303 fill="white" 304 > 305 <path 306 d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" 307 /></svg 308 ></a 309 > 310 311 <a 312 target="_blank" 313 style="background-color: #1da1f2;" 314 rel="noreferrer" 315 referrerpolicy="no-referrer" 316 href="https://twitter.com/share?url=https%3a%2f%2fyasoob.me%2fposts%2fhow-to-efficiently-reorder-or-rerank-items-in-database%2f?utm_source=twitter&text=How%20to%20Efficiently%20Reorder%20or%20Rerank%20Items%20in%20Database" 317 ><svg 318 xmlns="http://www.w3.org/2000/svg" 319 width="24" 320 height="24" 321 viewBox="0 0 24 24" 322 fill="white" 323 > 324 <path 325 d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" 326 /></svg 327 ></a 328 > 329 330 <a 331 target="_blank" 332 style="background-color: #1ebea5;" 333 rel="noreferrer" 334 referrerpolicy="no-referrer" 335 href="https://api.whatsapp.com/send?text=How%20to%20Efficiently%20Reorder%20or%20Rerank%20Items%20in%20Database - https%3a%2f%2fyasoob.me%2fposts%2fhow-to-efficiently-reorder-or-rerank-items-in-database%2f?utm_source=whatsapp" 336 ><svg 337 xmlns="http://www.w3.org/2000/svg" 338 width="24" 339 height="24"
340 viewBox="0 0 24 24" 341 fill="white" 342 > 343 <path 344 d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" 345 /></svg 346 ></a 347 > 348 349 <a 350 target="_blank" 351 style="background-color: #2867b2;" 352 rel="noreferrer" 353 referrerpolicy="no-referrer" 354 href="https://www.linkedin.com/sharing/share-offsite/?url=https%3a%2f%2fyasoob.me%2fposts%2fhow-to-efficiently-reorder-or-rerank-items-in-database%2f?utm_source=linkedin" 355 ><svg 356 xmlns="http://www.w3.org/2000/svg" 357 width="24" 358 height="24"
359 viewBox="0 0 24 24" 360 fill="white" 361 > 362 <path 363 d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" 364 /></svg 365 ></a 366 > 367 </div> 368</section> 369 </section> 370 </article> 371 <div id="mc_embed_signup"> 372 <form action="https://wordpress.us3.list-manage.com/subscribe/post?u=20b1036063aec6dbf068cc8c0&id=b8eab6bd54" 373 method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" 374 novalidate> 375 <div id="mc_embed_signup_scroll"> 376 <h2>Newsletter</h2><span id="close-btn">Ã</span> 377 <p>If you liked what you read then I am sure you will enjoy a newsletter of the 378 content I create. I send it out every other month. It contains new stuff that I make, links 379 I find interesting on the web, and occasional discount coupons for my book. 380 Join the 5000+ other people who receive my newsletter:</p> 381 <div class="mc-field-group"> 382 <input placeholder="Your Email" type="email" value="" name="EMAIL" class="required email" 383 id="mce-EMAIL"> 384 </div> 385 <div id="mce-responses" class="clear"> 386 <div class="response" id="mce-error-response" style="display:none"></div> 387 <div class="response" id="mce-success-response" style="display:none"></div> 388 </div> 389 390 <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" 391 name="b_20b1036063aec6dbf068cc8c0_f6ee678b65" tabindex="-1" value=""></div> 392 <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" 393 class="button"></div> 394 <p class="subtext">I send out the newsletter once every other month. No spam, I promise + you can unsubscribe at anytime</p> 395 </div> 396 </form> 397</div> 398 399<section id="comments"> 400 401 <h3 class="title"><a href="#comments"><span class="comments-emoji">âï¸</span> Comments</a></h3> 402 <section class="staticman-comments post-comments"> 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 <div id="commentid-fb9a8b00-ab0c-11ed-8fc1-a55ac59411fb" class="post-comment"> 621 <div class="post-comment-header"> 622 <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/b342b1c4e83326b85e31640c8f21d58d?s=70&r=pg&d=identicon"> 623 <p class="post-comment-info"> 624 <span class="post-comment-name">Yasoob Khalid</span> 625 <br> 626 <a href="#commentid-fb9a8b00-ab0c-11ed-8fc1-a55ac59411fb" title="Permalink to this comment"> 627 <time class="post-time">Sunday, Feb 12, 2023 at 19:39 UTC</time> 628 </a> 629 </p> 630 </div> 631 <div class="comment-message"> 632 Hi guys! Sorry I just fixed the static comments on my blog and this is me just testing them out :) 633 </div> 634 <div class="comment__reply"> 635 <button id="fb9a8b00-ab0c-11ed-8fc1-a55ac59411fb" class="btn-info" href="#comment-form" onclick="changeValue('fields[reply_to]', 'fb9a8b00-ab0c-11ed-8fc1-a55ac59411fb')">Reply to Yasoob Khalid</button> 636 </div> 637 </div> 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 <form id="comment-form" class="post-new-comment" method="post" action="https://staticman-blog.fly.dev/v2/entry/yasoob/personal_blog/master/comments"> 690 691 <h3 class="prompt">Say something</h3> 692 <input type="hidden" name="options[redirect]" value="https://yasoob.me/posts/how-to-efficiently-reorder-or-rerank-items-in-database/#comment-submitted"> 693 <input type="hidden" name="options[slug]" value="how-to-efficiently-reorder-or-rerank-items-in-database"> 694 <input type="hidden" name="options[origin]" value="https://yasoob.me/posts/how-to-efficiently-reorder-or-rerank-items-in-database/"> 695 <input type="hidden" name="options[parent]" value="https://yasoob.me/posts/how-to-efficiently-reorder-or-rerank-items-in-database/"> 696 <input type="text" name="fields[name]" class="post-comment-field" placeholder="Name *" required/> 697 <input type="email" name="fields[email]" class="post-comment-field" placeholder="Email address (will not be public) *" required/> 698 <input type="hidden" id="comment-parent" name="fields[reply_to]" value=""> 699 <textarea name="fields[comment]" class="post-comment-field" placeholder="Comment (markdown is accepted) *" required rows="10"></textarea> 700 <div class="comment-subscribe"> 701 <input type="checkbox" id="comment-form-reply" name="options[subscribe]" value="email"> 702 Send me an email when someone comments on this post. 703 </div> 704 <label for="name_try">Fill this in only if you're trying to spam me</label> 705 <input name="fields[name_try]" id="hp" type="text"> 706 <input type="submit" class="post-comment-field btn btn-primary comment-buttons" value="Submit"> 707 </form> 708 </section> 709 710 <div id="comment-submitted" class="dialog"> 711 <h3>Thank you!</h3> 712 <p>Your comment has been submitted and will be published once it has been approved. 😊</p> 713 714 <p><a href="#" class="btn btn-primary comment-buttons ok">OK</a></p> 715 </div> 716 717 718</section> 719 720 721 </main> 722 723 724 <footer role="contentinfo"> 725 <div class="hr"></div> 726 <div class="footer-link"> 727 <a href="mailto:[email protected]" rel="me" target="_blank">Email</a> 728 <a href="https://twitter.com/yasoobkhalid" rel="me" target="_blank">Twitter</a> 729 730 <a href="https://www.linkedin.com/in/yasoob/" rel="me" target="_blank">LinkedIn</a> 731 <a href="https://github.com/yasoob" rel="me" target="_blank">GitHub</a> 732 733 </div> 734 <div class="copyright"> 735 <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
736 <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"> 737 </a> 738 </div> 739 </footer> 740 741</div> 742
743<script>
vendor: 348 bytes, lines 743-748
743 744 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 745 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 746 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 747 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 748 ga('create', '
748UA-97849776-1
vendor: 40 bytes, lines 748-749
748', 'auto'); 749 ga('send', 'pageview');
750</script>
750 751
752<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
vendor: 1 bytes, line 752
752
753<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
753<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
vendor: 1 bytes, line 753
753
754<script src="/js/main.js"></script>
754 755</body> 756</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.