2023-03-07 17:37:01 +00:00
{{ template "jam_2023_visibility_base.html" . }} {{ define "content" }} {{
2023-03-05 04:52:03 +00:00
$discordInviteURL := "https://discord.gg/hmn" }}
< style >
.projects {
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 30em) {
/* not small styles */
.projects {
grid-template-columns: 1fr 1fr;
}
}
< / style >
< div id = "top-container" class = "flex flex-column items-center ph3" >
2023-03-07 17:37:01 +00:00
< img id = "logo" src = "{{ static " visjam2023 / logo . svg " } } " >
< h1 id = "title" > Visibility Jam< / h1 >
2023-03-05 04:52:03 +00:00
< h2 id = "dates" > April 14 - 16, 2O23< / h2 >
< div id = "tagline" class = "center" >
2023-03-07 17:37:01 +00:00
See things in a new way.
{{ if gt .DaysUntilEnd 0 }}
{{ if eq .DaysUntilStart 0 }}
< b > Happening now.< / b >
{{ else if eq .DaysUntilStart 1 }}
< b > Starting tomorrow.< / b >
{{ else }}
< b > Starting in {{ .DaysUntilStart }} days.< / b >
{{ end }}
{{ end }}
2023-03-05 04:52:03 +00:00
< / div >
< div class = "actions flex justify-center" >
{{ if gt .DaysUntilStart 0 }}
2023-03-07 17:37:01 +00:00
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns"
href="#inspiration"
>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
>
{{ else }}
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
target="_blank"
href="{{ .ProjectSubmissionUrl }}"
>Create your project< /a
>
{{ end }}
2023-03-05 04:52:03 +00:00
{{ else }}
2023-03-07 17:37:01 +00:00
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
href="{{ .ShowcaseFeedUrl }}"
>See the results< /a
>
2023-03-05 04:52:03 +00:00
{{ end }}
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
target="_blank"
href="{{ $discordInviteURL }}"
>Join the Discord< /a
>
< / div >
< / div >
< div class = "section mw8 margin-center ph3 ph4-l mv4" >
2023-03-07 17:37:01 +00:00
< p >
Too many things in computing are < b > invisible< / b > .
< / p >
< p >
Bugs linger for years because nobody can see their effects. We run arcane command line tools just to find out what port a program is using. Your computer is full of helpful information, but no one can use it until someone < b > makes it visible.< / b >
< / p >
< p >
So for this jam, make it visible. Maybe it's a data structure in your program. Maybe it's some obscure metrics from your operating system. Maybe it's your sleep schedule. Whether you make a Graphviz diagram or an experimental code editor, you have a weekend to make it happen.
< / p >
2023-03-05 04:52:03 +00:00
< / div >
{{ if eq .DaysUntilEnd 0 }}
< div class = "section bg-black-20 pv4 overflow-hidden" >
< div class = "mw8 margin-center ph3 ph4-l" >
< h2 > Submitted projects< / h2 >
< div class = "mt3 projects g3 back-to-normal" >
2023-03-07 17:37:01 +00:00
{{ range .JamProjects }} {{ template "project_card.html" projectcarddata . "" }} {{ end }}
2023-03-05 04:52:03 +00:00
< / div >
< div class = "actions flex justify-center" >
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
href="{{ .ShowcaseFeedUrl }}"
>See all updates< /a
>
< / div >
< / div >
< / div >
{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
< div id = "showcase-outer-container" class = "bg-black-20 pt4 pb3 pb4-ns" >
< div class = "section mw8 margin-center ph3 ph4-l" >
{{ if gt .DaysUntilEnd 0 }}
< h2 > Recent updates< / h2 >
< p >
These screenshots and videos were shared by jam participants in
< b > #project-showcase< / b > on our
< a href = "{{ $discordInviteURL }}" target = "_blank" > Discord< / a > . Join us and
share what you're working on!
< a class = "b" href = "{{ .ShowcaseFeedUrl }}" > See all ➜< / a >
< / p >
{{ else }}
< h2 > Community showcase< / h2 >
< p >
These screenshots and videos were shared by jam participants in
< b > #project-showcase< / b > on our
< a href = "https://discord.gg/hmn" target = "_blank" > Discord< / a > during the
jam. Join us and chat about your favorites!
< / p >
{{ end }}
< div id = "showcase-container" class = "mw8 center-layout mh2 mh0-ns" > < / div >
< div class = "actions flex justify-center" >
< a
class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
target="_blank"
href="{{ .ShowcaseFeedUrl }}"
>See all< /a
>
< / div >
< / div >
< / div >
{{ template "showcase_templates.html" }}
<!-- Copy - pasted and mangled from showcase.html -->
< script >
const ROW_HEIGHT = 300;
const ITEM_SPACING = 4;
const showcaseItems = JSON.parse("{{ .ShowcaseJson }}");
const addThumbnailFuncs = new Array(showcaseItems.length);
const showcaseOuterContainer = document.querySelector(
"#showcase-outer-container"
);
let showcaseContainer = document.querySelector("#showcase-container");
// showcaseOuterContainer.classList.toggle('dn', showcaseItems.length === 0);
const itemElements = []; // array of arrays
for (let i = 0; i < showcaseItems.length ; i + + ) {
const item = showcaseItems[i];
const [itemEl, addThumbnail] = makeShowcaseItem(item);
itemEl.container.setAttribute("data-index", i);
itemEl.container.setAttribute("data-date", item.date);
addThumbnailFuncs[i] = addThumbnail;
itemElements.push(itemEl.container);
}
function layout() {
const width = showcaseContainer.getBoundingClientRect().width;
showcaseContainer = emptyElement(showcaseContainer);
function addRow(itemEls, rowWidth, container) {
const totalSpacing = ITEM_SPACING * (itemEls.length - 1);
const scaleFactor = width / Math.max(rowWidth, width);
const row = document.createElement("div");
row.classList.add("flex");
row.classList.toggle("justify-between", rowWidth >= width);
row.style.marginBottom = `${ITEM_SPACING}px`;
for (const itemEl of itemEls) {
const index = parseInt(itemEl.getAttribute("data-index"), 10);
const item = showcaseItems[index];
const aspect = item.width / item.height;
const baseWidth = aspect * ROW_HEIGHT * scaleFactor;
const actualWidth = baseWidth - totalSpacing / itemEls.length;
itemEl.style.width = `${actualWidth}px`;
itemEl.style.height = `${scaleFactor * ROW_HEIGHT}px`;
itemEl.style.marginRight = `${ITEM_SPACING}px`;
row.appendChild(itemEl);
}
container.appendChild(row);
}
let rowItemEls = [];
let rowWidth = 0;
let numRows = 0;
for (const itemEl of itemElements) {
const index = parseInt(itemEl.getAttribute("data-index"), 10);
const item = showcaseItems[index];
const aspect = item.width / item.height;
rowWidth += aspect * ROW_HEIGHT;
rowItemEls.push(itemEl);
if (rowWidth > width) {
addRow(rowItemEls, rowWidth, showcaseContainer);
numRows += 1;
if (numRows == 3) {
return;
}
rowItemEls = [];
rowWidth = 0;
}
}
addRow(rowItemEls, rowWidth, showcaseContainer);
}
function loadImages() {
const items = showcaseContainer.querySelectorAll(".showcase-item");
for (const item of items) {
const i = parseInt(item.getAttribute("data-index"), 10);
addThumbnailFuncs[i]();
}
}
layout();
layout(); // scrollbars are fun!!
loadImages();
window.addEventListener("resize", () => {
layout();
});
< / script >
{{ end }}
2023-03-07 17:37:01 +00:00
< div id = "inspiration" class = "bg-black-20 pt4" >
< div class = "section mw8 margin-center ph3 ph4-l" >
< h2 > Inspiration< / h2 >
< / div >
< div class = "inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll" >
< div class = "pic" >
< img src = "{{ static " visjam2023 / gource . png " } } " >
< div class = "caption" > Gource lets you watch the structure of a codebase change over time.< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / npm . png " } } " >
< div class = "caption" > See how often third-party packages ship breaking changes.< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / graphviz . jpeg " } } " >
< div class = "caption" > Graphviz can be used to make debug visuals for almost any data structure.< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / wireshark . jpg " } } " >
< div class = "caption" > Wireshark exposes all activity on all your network devices.< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / spall . png " } } " >
< div class = "caption" > Flamegraphs let you see the big picture of code execution, not just summary stats.< / div >
< / div >
< div class = "pic" >
< blockquote class = "twitter-tweet" data-conversation = "none" data-dnt = "true" data-theme = "dark" > < p lang = "en" dir = "ltr" > A recipe for finding bugs:< br > * predict what the data should look like< br > * render the data< br > * be surprised and confused< / p > — Jamie Brandon (@sc13ts) < a href = "https://twitter.com/sc13ts/status/1600907692788580352?ref_src=twsrc%5Etfw" > December 8, 2022< / a > < / blockquote > < script async src = "https://platform.twitter.com/widgets.js" charset = "utf-8" > < / script >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / v8 . png " } } " >
< div class = "caption" > Bugs can be very obvious when you render out the data. (Example: a random number generator.)< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / bundle-analyzer . png " } } " >
< div class = "caption" > Webpack Bundle Analyzer lets you see which JS libraries are causing the most bloat.< / div >
< / div >
< div class = "pic" >
< img src = "{{ static " visjam2023 / vmmap . png " } } " >
< div class = "caption" > vmmap allows you to see exactly how your address space is allocated.< / div >
< / div >
< / div >
< / div >
< style >
.inspiration {
max-height: 34rem;
scrollbar-color: rgba(189, 89, 158, 0.58) rgba(0, 0, 0, 0.2);
}
.inspiration .pic {
max-width: 18rem;
}
@media screen and (min-width: 35em) {
.inspiration {
max-height: 42rem;
}
.inspiration .pic {
max-width: 22rem;
}
}
.inspiration .pic .twitter-tweet {
margin: 0 !important;
}
.inspiration .pic img {
border-radius: 4px;
}
.inspiration .pic .caption {
color: rgba(255, 255, 255, 0.8);
font-size: 0.8rem;
line-height: 1.2;
padding-top: 0.25rem;
}
< / style >
2023-03-05 04:52:03 +00:00
< div class = "pt4 pb3 pb4-ns" >
< div class = "section mw8 margin-center ph3 ph4-l" >
< h2 > How to participate< / h2 >
< p >
2023-03-06 01:46:17 +00:00
The jam takes place from Friday, April 14 through Sunday, April 16. Here's
how you can participate:
2023-03-05 04:52:03 +00:00
< / p >
< div class = "{{ if gt .DaysUntilStart 0 }}emphasized{{ end }}" >
2023-03-07 17:37:01 +00:00
< h3 > Pick a project.< / h3 >
2023-03-05 04:52:03 +00:00
< p >
2023-03-07 17:37:01 +00:00
Pick something to visualize! If you want, you can brainstorm ideas in < b > #jam< / b > on < a href = "{{ $discordInviteURL }}" target = "_blank" > Discord< / a > . You can also use this time to form a team - or you can choose to work solo.
2023-03-05 04:52:03 +00:00
< / p >
< / div >
< div
class="{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 1) }}emphasized{{ end }}"
>
< h3 > Jam.< / h3 >
< p >
{{ if and (eq .DaysUntilStart 0) (not .SubmittedProjectUrl) }}
2023-03-07 17:37:01 +00:00
< a href = "{{ .ProjectSubmissionUrl }}" target = "_blank" >
< b > Create a Handmade Network project.< / b >
< / a >
{{ else }}
After the jam starts, create a Handmade Network project.
{{ end }}
This project will act as your submission and can be used to share your work in progress. Then get started! Share screenshots and videos in #project-showcase on < a href = "{{ $discordInviteURL }}" target = "_blank" > Discord< / a > , or directly from your project page.
2023-03-05 04:52:03 +00:00
< / 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
2023-03-07 17:37:01 +00:00
what inspired you to visualize it. Include plenty of pictures and videos!
2023-03-05 04:52:03 +00:00
< / p >
{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
< p >
Submissions close
< b > < span class = "countdown" data-deadline = "{{ .EndTimeUnix }}" > < / span > < /b
>.
< / p >
{{ else if eq .DaysUntilEnd 0 }}
< p >
< b > Submissions are now closed.< / b >
< / p >
{{ end }}
< / div >
< / div >
< / div >
< div class = "bg-black-20 pt4 pb3 pb4-ns" >
< div class = "section mw8 margin-center ph3 ph4-l" >
< h2 > Rules< / h2 >
< ul >
2023-03-07 17:37:01 +00:00
< li > Any tech is allowed.< / li >
< li > You may work solo or in a team.< / li >
2023-03-05 04:52:03 +00:00
< li > Submit your work by the end of the day on April 16.< / li >
< / ul >
< p >
2023-03-07 17:37:01 +00:00
We will not be declaring winners, but we will publicly highlight some of our
favorite entries after the jam.
2023-03-05 04:52:03 +00:00
< / p >
< h3 > Submission rules< / h3 >
< p >
< b
>{{ with .SubmittedProjectUrl }}
< a href = "{{ . }}" target = "_blank" > Your Handmade Network project< / a >
{{ else }} Your Handmade Network project {{ end }} is your
submission.< /b
>
We will be looking at the project's description and any extra updates you
share toward the end of the jam.
< / p >
< ul >
< li >
2023-03-07 17:37:01 +00:00
Explain the project and what inspired you to visualize it.
2023-03-05 04:52:03 +00:00
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
2023-03-07 17:37:01 +00:00
download your program, or to interact with any visualizations you produce.
2023-03-05 04:52:03 +00:00
< / li >
< / ul >
< / div >
< / div >
2023-03-07 17:37:01 +00:00
<!-- This block of styles removes the top border from the footer and adjusts spacing so it looks better. Use this if the final content block has bg - black - 20; comment it out otherwise. -->
< style >
footer {
border-top: none;
margin-bottom: 1rem; /* .mb3 */
}
@media screen and (min-width: 60em) {
footer {
margin-bottom: 2rem; /* .mb4-l */
}
}
< / style >
2023-03-05 04:52:03 +00:00
< script >
const carouselContainer = document.querySelector(".carousel-container");
if (carouselContainer) {
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 >
< script >
for (const countdown of document.querySelectorAll(".countdown")) {
const deadline = countdown.getAttribute("data-deadline");
const deadlineDate = new Date(parseInt(deadline, 10) * 1000);
function updateCountdown() {
const remainingMs = deadlineDate.getTime() - new Date().getTime();
const remainingMinutes = remainingMs / 1000 / 60;
const remainingHours = remainingMinutes / 60;
const remainingDays = remainingHours / 24; // no daylight savings transitions during the jam mmkay
let str = "imminently";
if (remainingMinutes < 60 ) {
str = `in ${Math.ceil(remainingMinutes)} ${
remainingMinutes === 1 ? "minute" : "minutes"
}`;
} else if (remainingHours < 24 ) {
str = `in ${Math.ceil(remainingHours)} ${
remainingHours === 1 ? "hour" : "hours"
}`;
} else {
str = `in ${Math.ceil(remainingDays)} ${
remainingDays === 1 ? "day" : "days"
}`;
}
countdown.innerText = str;
}
updateCountdown();
setInterval(updateCountdown, 1000 * 60);
}
< / script >
{{ end }}