bbasic layout and 01
parent
0a50cbd86a
commit
fe4621281c
@ -0,0 +1,142 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01 - Pathways</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
doc
|
||||
doc
|
||||
doc
|
||||
</h1>
|
||||
<div class="sub">
|
||||
documenting code documentation
|
||||
</div>
|
||||
|
||||
|
||||
<div class="info">
|
||||
|
||||
hello! welcome
|
||||
|
||||
this is an archive to navigate through different ways of making code documentation
|
||||
navigate in the sense of learning how to find things, like
|
||||
there is no clear path / a practice to learn / shared practice personal practice
|
||||
|
||||
</div>
|
||||
|
||||
<div class="attempt">
|
||||
first attempt focuses on:
|
||||
tag system as a writing machine,
|
||||
navigable both as an index but also through several pathways
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Pathways</h2>
|
||||
<p>
|
||||
Every pathway is a (semi) curated collection of entries.
|
||||
It groups together different experiences.
|
||||
It's different by just filtering by tag,
|
||||
because it provides also context around the entries
|
||||
|
||||
note:
|
||||
|
||||
a pathway could be also imagined as (written with) a markup languge
|
||||
using tags to insert entries in a broader text,
|
||||
either specifying a particular entry or just referring to a generic tag
|
||||
(and then for example fetch an entry from that category)
|
||||
|
||||
it could be a way to play with the tag system as a writing machine
|
||||
</p>
|
||||
|
||||
<ul class="pathways">
|
||||
<li>
|
||||
<a href="pop">Politics of Participation</a>
|
||||
</li>
|
||||
<li> <a href="rs">Representation Specs</a></li>
|
||||
<li> <a href="hw">Hello Worlding</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tags</h2>
|
||||
<ul class="tags">
|
||||
<li>docstring</li>
|
||||
<li>personal project</li>
|
||||
<li>worlding</li>
|
||||
<li>workshop</li>
|
||||
<li>situated</li>
|
||||
<li>feminist servers</li>
|
||||
<li>fediverse</li>
|
||||
<li>academia</li>
|
||||
<li>education</li>
|
||||
<li>readme</li>
|
||||
<li>javascript</li>
|
||||
<li>python</li>
|
||||
<li>course</li>
|
||||
<li>OS</li>
|
||||
<li>tutorial</li>
|
||||
<li>series</li>
|
||||
<li>decoupled</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Entries</h2>
|
||||
<ul class="entries">
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">The screenless office</div>
|
||||
<div class="tags">docstrings, python, personal project, worlding</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">360 degrees</div>
|
||||
<div class="tags">workshop, situated, feminist servers, fediverse</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">Sharing programming knowledge</div>
|
||||
<div class="tags">workshop, accademia, education</div>
|
||||
|
||||
</li>
|
||||
<li class="entry">
|
||||
<div class="title">pad-bis</div>
|
||||
<div class="tags">readme, situated, worlding</div>
|
||||
</li>
|
||||
<li class="entry">
|
||||
<div class="title">drw</div>
|
||||
<div class="tags">readme, situated, javascript</div>
|
||||
</li>
|
||||
<li class="entry">
|
||||
<div class="title">Plan 9 from Bell Labs</div>
|
||||
<div class="tags">explanations, research, OS</div>
|
||||
</li>
|
||||
<li class="entry">
|
||||
<div class="title">From NAND to Tetris</div>
|
||||
<div class="tags">course, academia, OS, abstraction</div>
|
||||
</li>
|
||||
|
||||
<li class="entry">
|
||||
<div class="title">Programming projects for Advanced Beginners</div>
|
||||
<div class="tags">series, decoupled, tutorial</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>doc doc doc</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
doc
|
||||
doc
|
||||
doc
|
||||
</h1>
|
||||
<div class="sub">
|
||||
documenting code documentation
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
|
||||
hello! welcome
|
||||
|
||||
this is an archive to navigate through different ways of making code documentation
|
||||
navigate in the sense of learning how to find things, like
|
||||
there is no clear path / a practice to learn / shared practice personal practice
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class='section'>
|
||||
|
||||
|
||||
<h2>How</h2>
|
||||
|
||||
how does this archive hold its material? different perspectives to look at code documentation practices:
|
||||
|
||||
|
||||
<ul>
|
||||
<li>different formats</li>
|
||||
<li>different languages / tones</li>
|
||||
<li>different contents / approaches</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why</h2>
|
||||
|
||||
no clear recipe for (writing/reading/finding) code documentation.
|
||||
what is missing ?
|
||||
what the archive add ?
|
||||
|
||||
<ul>
|
||||
|
||||
<li> - to infiniltrate technical world</li>
|
||||
<li> - inject contexts into code</li>
|
||||
<li> - entry points for people to participate and learn in coding</li>
|
||||
<li> - entry points to know and participate in these contexts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Daily prototypes</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="01">01 - Pathways</a></li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
html,
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-bottom: 32px;
|
||||
line-height: 1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.attempt {
|
||||
position: relative;
|
||||
margin-block: 48px;
|
||||
display: inline-block;
|
||||
max-width: 40ch;
|
||||
padding: 1ch;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.attempt:before {
|
||||
content: "Attempt";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0 4px;
|
||||
translate: -1px calc(-100% - 1px);
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tags {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tags > li {
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tags > li:hover {
|
||||
background-color: #eec;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.entries {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.entry {
|
||||
margin-block: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.entry > * {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
|
||||
<style>
|
||||
|
||||
.section {
|
||||
white-space: pre-wrap;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class='section'>
|
||||
|
||||
<!-- what -->
|
||||
|
||||
Hello!
|
||||
|
||||
Welcome, this is an archive to navigate code documentation practices.
|
||||
Navigate in the sense of learning how to find things, like
|
||||
Gathering mushrooms in the woods: there is no clear path / a practice to learn / shared practice personal practice
|
||||
|
||||
|
||||
<!-- how -->
|
||||
|
||||
how does this archive hold its material
|
||||
|
||||
different perspectives to look at code documentation practices:
|
||||
|
||||
- different formats
|
||||
- different languages / tones
|
||||
- different contents / approaches
|
||||
|
||||
- politics of participation
|
||||
- representation specs
|
||||
- hello worlding
|
||||
|
||||
why
|
||||
|
||||
no clear recipe for (writing/reading/finding) code documentation
|
||||
|
||||
what is missing ?
|
||||
what the archive add ?
|
||||
|
||||
- to infiniltrate technical world
|
||||
|
||||
|
||||
- inject contexts into code
|
||||
|
||||
- entry points for people to participate and learn in coding
|
||||
|
||||
- entry points to know and participate in these contexts
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="tags">
|
||||
|
||||
docstring
|
||||
personal project
|
||||
worlding
|
||||
workshop
|
||||
situated
|
||||
feminist servers
|
||||
fediverse
|
||||
academia
|
||||
education
|
||||
|
||||
</ul>
|
||||
|
||||
<ul class="pathways">
|
||||
|
||||
|
||||
<li>
|
||||
<a href="pop">politics of participation</a>
|
||||
<a href="rs">representation specs</a>
|
||||
<a href="hw">hello worlding</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">The screenless office</div>
|
||||
<div class="tags">docstrings, personal project, worlding</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">360 degrees</div>
|
||||
<div class="tags">workshop, situated, feminist servers, fediverse</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="entry">
|
||||
|
||||
<div class="title">Sharing programming knowledge</div>
|
||||
<div class="tags">workshop, accademia, education</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue