barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(post): collapse entries

Browse source
This commit is contained in:
Barrett Ruth 2024-06-17 19:47:59 -05:00
parent b406a073c9
commit 409089b1d4
4 changed files with 115 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

141
posts/two-pointers.html
View file

@ -42,37 +42,41 @@
</header> </header>
<article class="post-article"> <article class="post-article">
<h2>technique overview</h2> <h2>technique overview</h2>
<h3> <div class="problem-header">
<a <h3>
target="blank" <a
href="https://leetcode.com/problems/container-with-most-water/" target="blank"
>container with most water</a href="https://leetcode.com/problems/container-with-most-water/"
> >container with most water</a
</h3> >
<p>Sometimes, the mathematical solution is the simplest.</p> </h3>
<p> </div>
The area of a container bounded by the ground and its columns at <div class="problem-content">
positions \((l, r)\) is: \[ \text{area} = \text{width} \cdot <p>Sometimes, the mathematical solution is the simplest.</p>
\text{length} = (r - l) \cdot \min\{height[l], height[r]\} \] <p>
</p> The area of a container bounded by the ground and its columns at
<p> positions \((l, r)\) is: \[ \text{area} = \text{width} \cdot
At its core, this is a maximization problem: maximize the contained \text{length} = (r - l) \cdot \min\{height[l], height[r]\} \]
area. \[ \max\{(r - l) \cdot \min\{height[l], height[r]\}\} \] </p>
</p> <p>
<p> At its core, this is a maximization problem: maximize the
Given a new column position \(l_0 < l\) or \(r_0 < r\), the contained area. \[ \max\{(r - l) \cdot \min\{height[l],
contained area can only increase if the height of the corresponding height[r]\}\} \]
column increases. </p>
</p> <p>
<!-- TODO: add footnote --> Given a new column position \(l_0 < l\) or \(r_0 < r\), the
<p> contained area can only increase if the height of the
The following correct solution surveys all containers, initialized corresponding column increases.
with the widest columns positions, that are valid candidates for a </p>
potentially new largest area. A running maximizum, the answer, is <!-- TODO: add footnote -->
maintained. <p>
</p> The following correct solution surveys all containers, initialized
<div class="post-code"> with the widest columns positions, that are valid candidates for a
<pre><code class="language-python">def maxArea(height: list[int]) -> int: potentially new largest area. A running maximizum, the answer, is
maintained.
</p>
<div class="post-code">
<pre><code class="language-python">`def maxArea(height: list[int]) -> int:
ans = 0 ans = 0
l, r = 0, len(height) - 1 l, r = 0, len(height) - 1
@ -85,41 +89,47 @@
while l < r and height[r] <= min_height: while l < r and height[r] <= min_height:
r -= 1 r -= 1
return ans</code></pre> return ans`</code></pre>
</div>
</div> </div>
<h3> <div class="problem-header">
<a <h3>
target="blank" <a
href="https://leetcode.com/problems/boats-to-save-people/" target="blank"
>boats to save people</a href="https://leetcode.com/problems/boats-to-save-people/"
> >boats to save people</a
</h3> >
<p> </h3>
Usually, the metaphorical problem description is a distraction. </div>
However, I find that thinking within the confines of "boats" and <div class="problem-content">
"people" yields an intuitive solution in this case. <p>
</p> Usually, the metaphorical problem description is a distraction.
<p> However, I find that thinking within the confines of "boats" and
<!-- TODO: footnote --> "people" yields an intuitive solution in this case.
Since only two people can fit in a boat at a time, pairing up </p>
lightest and heaviest individuals will result in the least amount of <p>
boats being used. <!-- TODO: footnote -->
</p> Since only two people can fit in a boat at a time, pairing up
<p> lightest and heaviest individuals will result in the least amount
However, the weights are given in random order. Efficiently pairing of boats being used.
up the lightest and heaviest individuals, then, requires the most </p>
common two-pointers prepreocessing step: sorting. <p>
</p> However, the weights are given in random order. Efficiently
<p>Finally, flesh out any remaining aspects of the implementation:</p> pairing up the lightest and heaviest individuals, then, requires
<ol> the most common two-pointers prepreocessing step: sorting.
<li>If one person remains, give them a boat.</li> </p>
<li> <p>
If both people don&apos;t fit, use the heavier person&mdash;the Finally, flesh out any remaining aspects of the implementation:
lighter could maybe fit with someone else. </p>
</li> <ol>
</ol> <li>If one person remains, give them a boat.</li>
<div class="post-code"> <li>
<pre><code class="language-python">def minimum_rescue_boats(people: list[int], limit: int) -> int: If both people don&apos;t fit, use the heavier person&mdash;the
lighter could maybe fit with someone else.
</li>
</ol>
<div class="post-code">
<pre><code class="language-python">def minimum_rescue_boats(people: list[int], limit: int) -> int:
ans = 0 ans = 0
l, r = 0, len(people) - 1 l, r = 0, len(people) - 1
@ -138,6 +148,7 @@
r -= 1 r -= 1
return ans</code></pre> return ans</code></pre>
</div>
</div> </div>
</article> </article>
</div> </div>

1
readme.md
View file

@ -5,3 +5,4 @@ My portfolio website
## todo ## todo
- Mobile support - Mobile support
- Problem toggler

35
scripts/post.js
View file

@ -1,13 +1,26 @@
document.querySelectorAll("article h2").forEach((h2) => { document.addEventListener("DOMContentLoaded", () => {
const mdHeading = document.createElement("span"); document.querySelectorAll("article h2").forEach((h2) => {
mdHeading.textContent = "# "; const mdHeading = document.createElement("span");
mdHeading.style.color = "#0073e6"; mdHeading.textContent = "# ";
h2.prepend(mdHeading); mdHeading.style.color = "#0073e6";
}); h2.prepend(mdHeading);
});
document.querySelectorAll("article h3").forEach((h3) => { document.querySelectorAll(".problem-header h3").forEach((h3) => {
const mdHeading = document.createElement("span"); const toggle = document.createElement("span");
mdHeading.textContent = "## "; toggle.textContent = "v";
mdHeading.style.color = "#0073e6"; toggle.classList.add("problem-toggle");
h3.prepend(mdHeading); toggle.addEventListener("click", () => {
const content = h3.parentElement.nextElementSibling;
content.style.display = toggle.textContent === ">" ? "block" : "none";
toggle.textContent = toggle.textContent === ">" ? "v" : ">";
});
const mdHeading = document.createElement("span");
mdHeading.textContent = "## ";
mdHeading.style.color = "#0073e6";
h3.prepend(mdHeading);
h3.prepend(toggle);
});
}); });

15
styles/post.css
View file

@ -85,6 +85,19 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.language-python { .language-python {
font-size: 0.9em !important; /* override prism.js styles */
font-size: 0.85em !important;
}
.problem-header {
position: relative;
}
.problem-toggle {
font-family: "Courier New", monospace;
position: absolute;
cursor: pointer;
left: -25px;
} }