Copy updates for WRJ2023

This commit is contained in:
Ben Visness 2023-09-01 19:33:18 -05:00
parent 4533e8ae66
commit 6616e72ca6
10 changed files with 57 additions and 42 deletions

BIN
public/wheeljam2023/TwitterCard.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 258 KiB

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 472 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

View File

@ -23,7 +23,7 @@
<h1 id="title">Wheel Reinvention Jam</h1>
<h2 id="dates">September 25 - October 1, 2023</h2>
<div id="tagline" class="center">
A one-week jam to change the status quo.
A one-week jam where you start from scratch.
{{ if gt .DaysUntilEnd 0 }}
{{ if eq .DaysUntilStart 0 }}
<b>Happening now.</b>
@ -36,7 +36,7 @@
</div>
<div class="actions flex justify-center">
{{ if gt .DaysUntilStart 0 }}
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="https://github.com/HandmadeNetwork/wishlist/discussions">Find a project</a>
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="https://github.com/HandmadeNetwork/wishlist/discussions">Get inspired</a>
{{ else if gt .DaysUntilEnd 0 }}
{{ if .SubmittedProjectUrl }}
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
@ -52,16 +52,16 @@
<div class="section mw8 margin-center ph3 ph4-l mv4">
<p>
The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where we turn a fresh eye to "solved problems".
The <b>Wheel Reinvention Jam</b> is a one-week jam where we build software from scratch.
</p>
<p>
The tools we use every day are broken. Software is slow, unreliable, and bloated with thoughtless features. It <a href="https://twitter.com/ryanjfleury/status/1537278864111464448" target="_blank">disrespects the user</a> and forces settings that <a href="https://twitter.com/ra/status/1151988912845234178" target="_blank">no one wants</a>. And yet, people defend the status quo, claiming that what we have is fine, and that trying to change software is "reinventing the wheel".
Why build things from scratch? Because that's the only way real progress is made. Every impactful project started life as a small experiment. Plus, writing something from scratch turns theory into practice. You may think you know how a piece of technology works, but until you write it yourself, it won't really stick. There's no substitute for direct experience.
</p>
<p>
Screw that. Progress is only made by inventing new things. It's not "reinventing" to break new ground. Nor is it "reinventing" to take a broken thing and design something better.
And let's face it, most of the software we use is basically the same as it was twenty or thirty years ago. Our "wheels" are terrible! They need to be reinvented!
</p>
<p>
This is your chance to reinvent something.
So take this opportunity to try something ambitious, something weird, an unfamiliar take on a familiar problem. Who's gonna stop you?
</p>
</div>
@ -208,50 +208,62 @@
<div class="mw8 margin-center ph3 ph4-l">
<h2>Last year's entries</h2>
<p>
We had many incredible entries last year. Here are a few of our favorites:
We had 28 incredible entries <a href="https://handmade.network/jam/2022">last year</a>. Here are a few of our favorites:
</p>
<div class="carousel-container">
<div class="carousel bg-white-10 br3 pa3 pa4-ns">
<div class="carousel-item active">
<img class="br2" src="{{ static "wheeljam2023/scroll.png" }}">
<h3>Scroll</h3>
<video controls class="br2" src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/2c3ea96c-f246-4f03-9f2d-3538d7ffaf90/embed"></video>
<h3>SDF Atlas</h3>
<p>
Scroll is an experimental new typesetting format and editor. The document structure is inherently non-textual; in fact, even words within paragraphs are individual nodes that can easily be selected and moved as a whole. It's a great proof-of-concept of what "word processors" could be—and it even has a PDF export.
SDF Atlas is an interactive editor for signed distance fields. Signed distance fields are commonly used to make beautiful implicit geometry in shaders, but editing them leaves a lot to be desired - editing shapes with shader code is not the most pleasant experience.
</p>
<a class="b db" href="https://handmade.network/forums/jam/t/8116-jam_submition_-_scroll%252C_a_experiment_in_a_non_text_typesetting_file_format">Full Submission ➜</a>
<a class="b db" href="https://youtu.be/1RjU5XJqysc?t=1083" target="_blank">Recap Interview ➜</a>
<p>
SDF Atlas gives you an interactive UI for playing with SDFs, including transformations like repetition and reflection that make SDFs such a popular choice for shader programmers. But it also goes a step further by creating an "atlas" format that allows for easy drawing of any shapes you create in the editor, without having to write all the shader code yourself.
</p>
<p>
This project was featured at Handmade Seattle in 2022.
</p>
<a class="b db" href="https://handmade.network/p/274/sdf-atlas/">Full Submission ➜</a>
<a class="b db" href="https://www.youtube.com/watch?v=BkOsE63bGuA&t=164s" target="_blank">Recap Interview ➜</a>
<a class="b db" href="https://guide.handmade-seattle.com/c/2022/sdf-atlas/" target="_blank">Handmade Seattle Demo ➜</a>
</div>
<div class="carousel-item">
<img class="br2" src="{{ static "wheeljam2023/nearmanager.gif" }}">
<h3>Near</h3>
<video controls class="br2" src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/71201dd3-3333-4ac5-a749-2b3c5d896a85/day3_short.mov"></video>
<h3>Orca</h3>
<p>
Near (or Near Manager) is an experimental file viewer that breaks away from a plain hierarchy. By allowing you to flatten folder hierarchies, create custom groups, and reorder your files, Near allows you to tame any complex file structure and view it in a way that works for you.
The Orca prototype is "a launcher for WebAssembly applications". But in reality, it's more than that. It demonstrated the ability to use WebAssembly as the foundation for cross-platform applications while swapping out the entire web stack for something new. It's a taste of a new vision for the web.
</p>
<a class="b db" href="https://handmade.network/forums/jam/t/8120-jam_submission_-_near%252C_a_file_explorer_with_interesting_ideas">Full Submission ➜</a>
<a class="b db" href="https://youtu.be/1RjU5XJqysc?t=435" target="_blank">Recap Interview ➜</a>
<p>
The prototype version was such a success that we decided to turn it into a <a href="https://orca-app.dev/" target="_blank">proper Handmade initiative, and the author, Martin, has been working full-time on Orca since earlier this year - in fact, it's now available to use as a platform for this year's jam.
</p>
<a class="b db" href="https://handmade.network/p/294/orca/">Full Submission ➜</a>
<a class="b db" href="https://www.youtube.com/watch?v=BkOsE63bGuA&t=4409s" target="_blank">Recap Interview ➜</a>
<a class="b db" href="https://orca-app.dev/" target="_blank">Orca Website ➜</a>
</div>
<div class="carousel-item">
<img class="br2" src="{{ static "wheeljam2023/visaviz.png" }}">
<h3>Twitter Thread Graph Explorer</h3>
<img class="br2" src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/b015f14e-b51a-4df9-b2d5-6c594be25373/Screenshot_from_2022-08-22_09-44-50.png">
<h3>Bifold Text</h3>
<p>
This project extended an existing personal project with a unique way of exploring Twitter threads. When the author found existing layout algorithms insufficient, he decided to roll his own. The project submission is an insightful look at why you sometimes need to do things yourself.
Bifold text is a wonderfully imaginative and experimental project that asks the question - what if each line of code was two lines of code?
</p>
<p>
This project was featured as a demo at Handmade Seattle 2021.
Bifold Text is an experimental code format, editor, and execution runtime that allows you to write debug print statements interleaved with your actual program. Rather than harm your program's legibility by spamming your code with logs, the editor can tuck your debug code out of the way, ready to pull out and edit at a moment's notice. It also includes new graphical features for debug prints, so you can have more than just a text file - you can have a rich visual history of your program's execution.
</p>
<a class="b db" href="https://handmade.network/forums/jam/t/8137-jam_submission_-_twitter_thread_graph_explorer">Full Submission ➜</a>
<a class="b db" href="https://youtu.be/1RjU5XJqysc?t=7519" target="_blank">Recap Interview ➜</a>
<a class="b db" href="https://media.handmade-seattle.com/visa-viz/" target="_blank">Handmade Seattle Demo ➜</a>
<a class="b db" href="https://handmade.network/p/283/bifold-text/">Full Submission ➜</a>
<a class="b db" href="https://www.youtube.com/watch?v=BkOsE63bGuA&t=3665s" target="_blank">Recap Video ➜</a>
</div>
<div class="carousel-item">
<img class="br2" src="{{ static "wheeljam2023/databaseexplorer.png" }}">
<h3>Database Explorer</h3>
<img class="br2" src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/62006e6b-eaa0-495a-a4c3-7ae077e27e46/image.png">
<h3>Netsim</h3>
<p>
This project explores a new way of querying SQL databases, by throwing away SQL in favor of a visual node graph. It allows you to incrementally build queries, seeing the data at every point along the way, and to reuse smaller queries in a way SQL cannot.
Netsim is a toy network in a box, designed for education. It simulates real network and routing protocols and allows you to visualize network properties like congestion control.
</p>
<a class="b db" href="https://handmade.network/forums/jam/t/8127-jam_submission__database_explorer">Full Submission ➜</a>
<a class="b db" href="https://youtu.be/1RjU5XJqysc?t=6390" target="_blank">Recap Interview ➜</a>
<p>
The jam prototype has fairly complete implementations of TCP and IPv4 running entirely within the browser. By implementing the network stack itself, it can tune everything to make visualizations clear and easy to understand. It also makes lots of pleasant noises as traffic flows through the network.
</p>
<a class="b db" href="https://handmade.network/p/293/netsim/">Full Submission ➜</a>
</div>
<div class="carousel-thinger next"></div>
<div class="carousel-thinger prev"></div>
@ -272,7 +284,7 @@
<div class="{{ if gt .DaysUntilStart 0 }}emphasized{{ end }}">
<h3>Pick a project and form a team.</h3>
<p>
Find a project idea that excites you! Join the conversation over on our <a href="https://github.com/HandmadeNetwork/wishlist/discussions" target="_blank">Wishlist</a>, brainstorm ideas in <b>#jam</b> on <a href="{{ $discordInviteURL }}" target="_blank">Discord</a>, or just invite some friends to jam with you.
Find a project idea that excites you! Join the conversation over on our <a href="https://github.com/HandmadeNetwork/wishlist/discussions" target="_blank">Wishlist</a>, brainstorm ideas on <a href="{{ $discordInviteURL }}" target="_blank">Discord</a>, or just invite some friends to jam with you.
</p>
</div>
@ -284,14 +296,14 @@
{{ else }}
After the jam starts, create a Handmade Network project
{{ end }}
to track your work. Then, build your program! Share your work in progress in #project-showcase on Discord, or directly from your project page.
to track your work. Then, build your program! Share your work in progress in #project-showcase on Discord, or directly from your project page. Posts on Discord can be tagged so they automatically appear here on the website.
</p>
</div>
<div class="{{ if eq .DaysUntilEnd 1 }}emphasized{{ end }}">
<h3>Submit your work!</h3>
<p>
<b>Your Handmade Network project is your submission.</b> Fill out the project description, making sure to explain the goals of the project and how it improves on what came before. Also consider posting an update with video of your program in action!
<b>Your Handmade Network project is your submission.</b> Fill out the project description, making sure to explain the goals of the project and why you chose to build it. Also consider posting an update with video of your program in action!
</p>
{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
<p>
@ -310,8 +322,8 @@
<div class="section mw8 margin-center ph3 ph4-l">
<h2>Rules</h2>
<ul>
<li>Any tech is allowed, but we encourage you to use only use what you really need. If you want some lightweight templates to get you started, check out our <a href="https://github.com/HandmadeNetwork/jam_templates" target="_blank">app templates</a>.</li>
<li>You may work solo or in a team. (But we encourage you to work with a team!)</li>
<li>Any tech is allowed. Popular tech choices in the community are <a href="https://www.raylib.com/">Raylib</a>, <a href="https://www.libsdl.org/">SDL</a>, <a href="https://github.com/ocornut/imgui">Dear ImGui</a>, and <a href="https://github.com/rxi/microui">microui</a>. Or if you're feeling ambitious, you can even use our new app platform, Orca!</li>
<li>You may work solo or in a team.</li>
<li>Submit your work by the end of the day on October 1.</li>
</ul>
<p>There are no explicit winners, but we will be selecting a few of our favorite projects to highlight in a recap stream following the jam.</p>
@ -327,12 +339,12 @@
</p>
<ul>
<li>
Explain the project's goals and how it improves on what came before. Also share some closing thoughts - did it turn out how you hoped? What did you learn? If you continue the project, what will you do differently?
Explain the project's goals and why you chose to build it. Also share some closing thoughts - did it turn out how you hoped? What did you learn? If you continue the project, what will you do differently?
</li>
<li>
<b>Your description must contain multiple screenshots of your software in action.</b> You should ideally also share a project update with a demo video. We recommend Mārtiņš Možeiko's <a href="https://wcap.handmade.network/" target="_blank">wcap</a> for recording desktop video on Windows. On Mac, just press ⌘-Option-5 and record a video, or use QuickTime.
</li>
<li>If at all possible, please provide a way for people to either build or download your program.</li>
<li>If possible, please provide a way for people to either build or download your program.</li>
</ul>
</div>
</div>
@ -351,13 +363,13 @@
<div class="section flex-fair ml4-m ml5-l">
<h2>Don't just rebuild. Reinvent.</h2>
<p>
This is a chance to build something <em>truly new</em>. Learn from previous work, but don't settle for “the same, but better”. It would be a huge shame to spend a week building nothing more than a clone of the same broken software we use today.
This is a chance to build something new, weird, and different. Don't settle for “the same, but better” - it would be a shame to build a mere clone of the same old software we use today.
</p>
<p>
This is where working with a team can really help. Bounce ideas off each other, do some research, and brainstorm before the jam starts. The software you end up building might be pretty different from your original ideas.
Of course, if you want to build a clone just for educational value, that's great! But while you're doing it, why not put your own spin on it? This is the perfect time to experiment with even the tiniest ideas. And if you're out of ideas, consider working with a team - collaborating with someone is the perfect way to generate new ideas and tackle bigger projects than you could handle on your own.
</p>
<p>
In the end, this is a jam. Get weird and try something different.
This is a jam. Don't be afraid to try something weird!
</p>
</div>
</div>

View File

@ -35,7 +35,8 @@
<style>
/* Copy-paste from project.css yay */
{{ $c := hex2color "23CE76" }}
{{/* {{ $c := hex2color "23CE76" }} */}}
{{ $c := hex2color "1DB768" }}{{/* modified for contrast reasons */}}
{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
@ -60,7 +61,9 @@
}
body {
background: linear-gradient(#23CE76, #299CE0)
/* background: linear-gradient(#23CE76, #299CE0); */
/* modified for contrast reasons */
background: linear-gradient(#1DB768, #258FCE);
}
.user-options,
@ -85,7 +88,7 @@
}
header .submenu {
background-color: #23CE76;
background-color: var(--theme-color);
}
#top-container {