PageSourceSearch

https://yasoob.me/posts/how-to-efficiently-reorder-or-rerank-items-in-database/

html yasoob.me collected 2026-10-03 21:37:27 UTC 30,866 bytes, 756 lines download raw bytes

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 &amp; 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 &amp; 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 &amp; 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 &amp; artist who can&#39;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 &amp; 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&rsquo;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">&#39;items&#39;</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&rsquo;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&rsquo;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 &ldquo;a&rdquo; 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&rsquo;s it! One thing I could have done better while doing this research is to search for &ldquo;ranking&rdquo; algorithms on top of &ldquo;ordering&rdquo; 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&rsquo;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&rsquo;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&amp;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. &#128522;</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.