feat(software): document my competitive programming setup
This commit is contained in:
parent
d6666d991e
commit
28d047813f
5 changed files with 116 additions and 95 deletions
|
|
@ -1,95 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/styles/common.css" />
|
||||
<link rel="stylesheet" href="/styles/post.css" />
|
||||
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
||||
<title>competitive programming setup</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">competitive programming setup</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2025-04-15">15/04/2024</time>
|
||||
</p>
|
||||
</header>
|
||||
<article class="post-article">
|
||||
<h2>HTML, JavaScript, and CSS</h2>
|
||||
<p>That's all there is to it.</p>
|
||||
<p>I thought about using the following frameworks:</p>
|
||||
<ol>
|
||||
<li><a target="blank" href="https://react.dev/">React.js</a></li>
|
||||
<li><a target="blank" href="https://nextjs.org/">Next.js</a></li>
|
||||
<li><a target="blank" href="https://gohugo.io/">Hugo</a></li>
|
||||
<li><a target="blank" href="https://astro.build/">Astro</a></li>
|
||||
</ol>
|
||||
<p>
|
||||
But I did not actually <i>need</i> any of them to make this site
|
||||
look decent.
|
||||
</p>
|
||||
<h2>What I've Learned</h2>
|
||||
<p>
|
||||
Of course, most people build simple websites like these to learn a
|
||||
new technology or framework, not to use an optimal tool. That's
|
||||
actually why I
|
||||
<a
|
||||
target="blank"
|
||||
href="/posts/software/from-github-pages-to-aws.html"
|
||||
>hosted this website on AWS</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
Building this website with truly bare-bones technologies has made me
|
||||
appreciate <i>why</i> these web frameworks have emerged.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Writing JavaScript to manipulate the DOM works just fine but lacks
|
||||
the readability and composability that many JavaScript frameworks
|
||||
bring to the table.
|
||||
</li>
|
||||
<li>
|
||||
Re-using code is odd. For example, I created a
|
||||
"common.js" with general utilities—there is zero
|
||||
indication (both to me and my language servers) that these
|
||||
functions are exposed to other scripts included by the same HTML
|
||||
file.
|
||||
</li>
|
||||
<li>
|
||||
JSX is great. Dynamically inserting HTML as raw strings or writing
|
||||
them line by line with the DOM is a pain, and a verbose one at
|
||||
that.
|
||||
</li>
|
||||
<li>
|
||||
Similarly, CSS styling (inline/stylesheet) works at the small
|
||||
scale. However, with styles being completely divorced from the
|
||||
HTML itself, much is left to be desired.
|
||||
</li>
|
||||
<li>
|
||||
Reusing HTML, styles, and JavaScript feels extremely fragile.
|
||||
Innovative type-safe, optimized, and composable solutions
|
||||
definitely have their place in the web.
|
||||
</li>
|
||||
<li>
|
||||
<b>You can be efficient with HTML, JS, and CSS.</b> My iteration
|
||||
speed on on this site versus other React.js/MDX blogs I have
|
||||
worked on is the same if not faster. While this may be a testament
|
||||
to my lack of JavaScript experience, I think people conclude too
|
||||
early that their task is beyond the technologies that form the
|
||||
foundation of the web today.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<site-footer></site-footer>
|
||||
<script src="/scripts/common.js"></script>
|
||||
<script src="/scripts/post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
111
posts/software/my-cp-setup.html
Normal file
111
posts/software/my-cp-setup.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/styles/common.css" />
|
||||
<link rel="stylesheet" href="/styles/post.css" />
|
||||
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
||||
<title>my cp setup</title>
|
||||
</head>
|
||||
<body class="graph-background">
|
||||
<site-header></site-header>
|
||||
<main class="main">
|
||||
<div class="post-container">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">my cp setup</h1>
|
||||
<p class="post-meta">
|
||||
<time datetime="2025-04-15">15/04/2025</time>
|
||||
</p>
|
||||
</header>
|
||||
<article class="post-article">
|
||||
<p>
|
||||
Source code
|
||||
<a
|
||||
href="https://github.com/barrett-ruth/dots/blob/main/nvim/lua/cp.lua"
|
||||
target="_blank"
|
||||
>here</a
|
||||
>.
|
||||
</p>
|
||||
<h2>my goals</h2>
|
||||
<p>
|
||||
I wanted the following features in my competitive programming (cp)
|
||||
setup:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<u>Flexibility</u>: support various environments (codeforces,
|
||||
USACO, cses, etc.) with ease
|
||||
</li>
|
||||
<li>
|
||||
<u>Speed</u>: instantaneous, non-blocking running/debugging;
|
||||
automatic environment configuration and easy code testing
|
||||
</li>
|
||||
<li>
|
||||
<u>Editor-Agnostic</u>: while I do provide first-in-class NeoVim
|
||||
integration for my setup, it should be easily portable to
|
||||
<i>any</i> os/editor.
|
||||
</li>
|
||||
</ul>
|
||||
<h2>the solution</h2>
|
||||
<p>
|
||||
Some (POSIX-compliant, of course) scripts and a
|
||||
<code>makefile</code> are more than enough. I created the following
|
||||
intuitive way to interact with my CP setup:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<code>make setup</code>: populate the environment with
|
||||
configurations in <code>~/.config/cp-template</code> for
|
||||
<code>clang-format</code> and <code>clangd</code>
|
||||
</li>
|
||||
<li><code>make run file</code></li>
|
||||
<li><code>make debug file</code></li>
|
||||
<li><code>make clean</code></li>
|
||||
</ol>
|
||||
<p>
|
||||
That's it. The <code>makefile</code> relies on some scripts that
|
||||
compile code and run the corresponding executables.
|
||||
</p>
|
||||
<h2>neovim integration</h2>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<img
|
||||
width="80%"
|
||||
src="/public/posts/my-cp-setup/cp-setup.webp"
|
||||
alt="screenshot of my neovim competitive programming setup"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Leveraging
|
||||
<a href="https://github.com/L3MON4D3/LuaSnip" target="_blank"
|
||||
>LuaSnip</a
|
||||
>, a custom <code>CP</code> user command, and some scripting for
|
||||
window management and asynchronous jobs, I'm able to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Asynchronously format, run, and debug code (<code
|
||||
>:h vim.system</code
|
||||
>)
|
||||
</li>
|
||||
<li>Use a three-window (input, output, and code) view</li>
|
||||
<li>Toggle between problems instantly (yes, the windows update)</li>
|
||||
<li>
|
||||
Automatically populate my coding buffers with competition-specific
|
||||
templates (i.e. USACO, CSES, etc.)
|
||||
</li>
|
||||
<li>Run the code from the CLI in less than a second</li>
|
||||
<li>
|
||||
Easily tweak and change the setup—there's absolutely nothing
|
||||
fancy.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<site-footer></site-footer>
|
||||
<script src="/scripts/common.js"></script>
|
||||
<script src="/scripts/post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/posts/my-cp-setup/cp-setup.webp
Normal file
BIN
public/posts/my-cp-setup/cp-setup.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -2,6 +2,7 @@ const postMapping = new Map([
|
|||
[
|
||||
"software",
|
||||
[
|
||||
"my cp setup",
|
||||
"from github pages to aws",
|
||||
"designing this website",
|
||||
// "working in the terminal",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -25,6 +28,7 @@ li {
|
|||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue