453 lines
19 KiB
HTML
453 lines
19 KiB
HTML
{{/*
|
|
This is a copy-paste from base.html because we want to preserve the unique
|
|
style of this page no matter what future changes we make to the base.
|
|
*/}}
|
|
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "wheeljam2022/favicon-16x16.png" }}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "wheeljam2022/favicon-32x32.png" }}">
|
|
|
|
{{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
|
|
{{ range .OpenGraphItems }}
|
|
{{ if .Property }}
|
|
<meta property="{{ .Property }}" content="{{ .Value }}" />
|
|
{{ else }}
|
|
<meta name="{{ .Name }}" content="{{ .Value }}" />
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if .Title }}
|
|
<title>{{ .Title }} | Handmade Network</title>
|
|
{{ else }}
|
|
<title>Handmade Network</title>
|
|
{{ end }}
|
|
<meta name="theme-color" content="#346ba6">
|
|
|
|
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
|
|
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
|
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
|
|
|
<style>
|
|
:root {
|
|
--content-background: #f8f8f8;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(#346ba6, #814cb7)
|
|
}
|
|
|
|
.user-options,
|
|
header form,
|
|
header .menu-bar .wiki,
|
|
header .menu-bar .library
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
header {
|
|
border-bottom-color: white;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.hmn-logo {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
header a, footer a {
|
|
color: white !important;
|
|
}
|
|
|
|
header .submenu {
|
|
background-color: #346ba6;
|
|
}
|
|
|
|
#top-container {
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
#logo {
|
|
width: 16rem;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
margin-bottom: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#title {
|
|
color: white;
|
|
font-size: 2.4rem;
|
|
line-height: 0.8;
|
|
margin-top: 2rem;
|
|
letter-spacing: -0.06rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#dates {
|
|
font-variant: small-caps;
|
|
font-size: 1.6rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
#tagline {
|
|
font-size: 1rem;
|
|
margin-top: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
#top-container a {
|
|
color: white !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#actions {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
#actions a {
|
|
text-decoration: none;
|
|
line-height: 1.4;
|
|
font-weight: 500;
|
|
|
|
transition: background-color 50ms ease-in-out;
|
|
background-color:rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
#actions a:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
#actions a:active {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.section {
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.section h2 {
|
|
font-variant: small-caps;
|
|
font-size: 2.2rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.section h3 {
|
|
font-variant: small-caps;
|
|
font-size: 2rem;
|
|
line-height: 0.8;
|
|
margin-top: 1.4rem;
|
|
}
|
|
|
|
.section p {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.section a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.flex-fair {
|
|
flex-basis: 1px;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
li {
|
|
margin-top: 0.6rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.section li p {
|
|
margin-top: 0.6rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
footer {
|
|
border-top: 2px solid white;
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer h2 {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.carousel-thinger {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 6rem;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
|
|
border-radius: 0.5rem; /* br3 */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carousel-thinger.prev {
|
|
left: -7rem;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
|
|
}
|
|
|
|
.carousel-thinger.next {
|
|
right: -7rem;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
/* not small styles */
|
|
|
|
#top-container {
|
|
margin: 5.4rem 0;
|
|
}
|
|
|
|
#logo {
|
|
width: 31rem;
|
|
}
|
|
|
|
#title {
|
|
font-size: 5.2rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
#dates {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
#tagline {
|
|
font-size: 1.2rem;
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
#actions {
|
|
margin-top: 2.2rem;
|
|
}
|
|
|
|
#actions a {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 3.4rem;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 2.4rem;
|
|
margin-top: 1.6rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="{{ static "js/carousel.js" }}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="left white">
|
|
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
|
|
{{ template "header.html" . }}
|
|
</div>
|
|
|
|
<div id="top-container" class="flex flex-column items-center ph3">
|
|
<img id="logo" src="{{ static "wheeljam2022/logo.svg" }}">
|
|
<h1 id="title">Wheel Reinvention Jam</h1>
|
|
<h2 id="dates">August 15 - 21, 2O22</h2>
|
|
<div id="tagline" class="center">
|
|
A one-week jam to change the status quo.
|
|
</div>
|
|
<div id="actions" class="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">Choose a project</a>
|
|
{{ else }}
|
|
<!-- TODO: A reasonable call to action! -->
|
|
{{ end }}
|
|
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="https://discord.gg/hmn">Join the Discord</a>
|
|
</div>
|
|
</div>
|
|
|
|
<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".
|
|
</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".
|
|
</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.
|
|
</p>
|
|
<p>
|
|
This is your chance to reinvent something.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section bg-black-20 pv4 overflow-hidden">
|
|
<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:
|
|
</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 "wheeljam2022/scroll.png" }}">
|
|
<h3>Scroll</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.
|
|
</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>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="br2" src="{{ static "wheeljam2022/nearmanager.gif" }}">
|
|
<h3>Near</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.
|
|
</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>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="br2" src="{{ static "wheeljam2022/visaviz.png" }}">
|
|
<h3>Twitter Thread Graph Explorer</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.
|
|
</p>
|
|
<p>
|
|
This project was featured as a demo at Handmade Seattle 2021.
|
|
</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>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="br2" src="{{ static "wheeljam2022/databaseexplorer.png" }}">
|
|
<h3>Database Explorer</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.
|
|
</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>
|
|
</div>
|
|
<div class="carousel-thinger next"></div>
|
|
<div class="carousel-thinger prev"></div>
|
|
</div>
|
|
<div class="carousel-buttons mt2 pv2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt4 pb3 pb4-ns">
|
|
<div class="section mw8 margin-center ph3 ph4-l">
|
|
<h2>Details / Rules</h2>
|
|
<p>
|
|
The jam takes place from Monday, August 15 through Sunday, August 21. Here's how you can participate:
|
|
</p>
|
|
|
|
<h3>Pick a project and form a team.</h3>
|
|
<p>
|
|
Find a project idea that excites you! Whether there's a project you've always wanted to start, or you're looking for inspiration, join the conversation over on our <a href="https://github.com/HandmadeNetwork/wishlist/discussions" target="_blank">Wishlist</a>, brainstorm project ideas, and find a team.
|
|
</p>
|
|
|
|
<h3>Jam.</h3>
|
|
<p>
|
|
Create a personal Handmade Network project to track your work. Then, build your program over the course of the week. Sharing your work in progress is highly recommended - you can share WIP content in #project-showcase on Discord, or directly from your project page.
|
|
</p>
|
|
|
|
<h3>Submit your work!</h3>
|
|
<p>
|
|
Your Handmade Network project acts as your submission. 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 on the project with video of your program in action!
|
|
</p>
|
|
|
|
<h3>Rules</h3>
|
|
<ul>
|
|
<li>Any tech is allowed, but in the spirit of the <a href="https://handmade.network/manifesto">Handmade ethos</a>, 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>Working with a team is strongly encouraged, but working solo is allowed.</li>
|
|
<li>
|
|
<p>Submit your work by the end of August 21 in your local timezone.</p>
|
|
<ul>
|
|
<li>Update the description of your Handmade Network project. The project is your submission.</li> {{/* TODO: dynamically link to their project? */}}
|
|
<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?</li>
|
|
<li>
|
|
<p>
|
|
Your description must contain multiple screenshots of your software in action. You should ideally also share a project update with a demo video.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
</li>
|
|
<li>If at all possible, please provide a way for people to either build or download your program.</li>
|
|
</ul>
|
|
</li>
|
|
<li>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.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-black-20 pt4 pb3 pb4-ns">
|
|
<div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
|
|
<div class="section flex-fair mb4 mb0-ns">
|
|
<h2>Make it by hand.</h2>
|
|
<p>
|
|
The Handmade ethos and Handmade community are software development superpowers. Don't be afraid to question your foundations and rebuild what needs rebuilding. The community is here to help you take on those challenges and do what others might consider impossible.
|
|
</p>
|
|
<p>
|
|
Of course, this is a jam, so focus on what matters to your project. There are many excellent libraries in the community that can save you time and help you focus on your core ideas. Don't be afraid to use them. But don't be afraid to do your own thing if they're holding you back.
|
|
</p>
|
|
</div>
|
|
<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.
|
|
</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.
|
|
</p>
|
|
<p>
|
|
In the end, this is a jam. Get weird and try something different.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mw8 margin-center ph3-m ph4-l">
|
|
{{ template "footer.html" . }}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const carouselContainer = document.querySelector('.carousel-container');
|
|
|
|
const { next, prev } = initCarousel(carouselContainer, {
|
|
onChange() {
|
|
if (carouselContainer.getBoundingClientRect().top < 0) {
|
|
carouselContainer.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
},
|
|
});
|
|
|
|
document.querySelector('.carousel-thinger.next')
|
|
.addEventListener('click', () => {
|
|
next();
|
|
});
|
|
document.querySelector('.carousel-thinger.prev')
|
|
.addEventListener('click', () => {
|
|
prev();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|