Skip to main content

My quick thoughts, back stage, and rants as I try to Teach kids about the Web while learning how to help others build a better Web.

IndieWebRing

Come Journey Through the IndieWeb Sites

🕸💍

Greg McVerry

You Learn A Lot Talking To Yourself Online in #IndieWeb Chat

2 min read

The self directed nature of knowledge quilting relies heavily on agentive . The network needs to provide resources even when experts are not around.

We handle this in a few ways. First you have Loqi, your friendly bot and therapist. You can ask them all kinds of questions.

That puts you in touch with the wiki where you can often find helpful advice and discussion of design patterns.

This means I can talk to myself and never be alone.

Learning spaces need to create environments where self-direction thrives, not rely on a myth of self direction to avoid designing community.

jgmac1106: what is pagination? [05:50am]
Loqi: pagination is a UI pattern for navigation across (typically chronologically) sequential pages that show one or more posts such as permalink post pages, archives, search results, and lists of tagged posts https://indieweb.org/pagination[05:54am]
jgmac1106: Trying to brainstorm how to add pagination and the url structure for my artilces page: https://jgregorymcverry.com/articles [05:55am]
jgmac1106: read Karthik and aaronpk do by year, was thinking every 12…not make it sate specific [05:57am]
jgmac1106: not sure about /,1,2,3 because new articles added to /, I don’t want to have to move everything once a page exceed 12 articles [06:00am]
[06:07am] jgmac1106: maybe I do articles/yyyy/mm and use that as inspiration to try and publish 10-12 articles a month
[06:58am] jgmac1106: I will add a directory of months to my page not found: https://jgregorymcverry.com/pagenotfound so if someone was just poking around archives by messing with yyyy/mm url they can find months with stuff
[06:58am] Loqi: Greg McVerry

Greg McVerry

@MGraybosch My website is https://jgregorymcverry.com. I just spent this weekend at @IndieWebCamp Online 2020 making a page for all my poetry: https://jgregorymcverry.com/mypoetry still a little rough around the edges but coming along

Greg McVerry

Greg McVerry

@IndieWebCamp Online 2020 Hack Day Update

1 min read

Goal Post

I switched it up in CSS Decided not to use my article template. Just seemed less modular to not define a grid just for my poetry stuff. longreads...and the rules that live under that original fiefdom have hobbled together houses hard to understand.

Going to write the page now.

 


.poetry .grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.poetry .featured {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  text-align:center;
  margin-bottom:.3em;
  grid-column: 3 / 7;
  grid-row: 1/5;
}
 .audiopoem {
   object-fit: cover;
  width: 100%;
  max-height: 100%;
  text-align:center;
  margin-bottom:.3em;
  grid-column: 1 / 3;

}

.smallpoems {
grid-column: 3 / 4;
grid-row-start: 6;

}

.poetry .backstage {
grid-column: 5 / 6;
grid-row-start: 6;

}

.poetcircle {
  grid-column: 6/ 8;
 
}
 .poemreads {
  grid-column: 5 / 6;
 
}

Greg McVerry

Step Three of @IndieWebCamp Online: CSS Grid of Poetry page done and ready for testing

1 min read

Goal Post

I have to run a quick errand. Hoping to finish for first demo time but may have to keep trucking until the second demo window. I didn't define rows for my poetcircle and reads, I wonder if I will need to do something so one starts after the author with my rows implictly calculated:

updated: fixed an error in grid-columns

.longreads article {

  font-family: 'Heebo', sans-serif;
    display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.longreads article .audiopoem {
   object-fit: cover;
  width: 100%;
  max-height: 100%;
  text-align:center;
  margin-bottom:.3em;
grid-column: 1 / 3;

}

.longreads article .smallpoems {
grid-column: 3 / 4;
grid-row-start: 6;

}

.longreads article .backstage {
grid-column: 5 / 6;
grid-row-start: 6;

}

.longreads article  .poetcircle {
    grid-column: 5 / 6;
    grid-template-rows: 1/5;
}
.longreads .poemreads {
    grid-template-columns: 5 / 6;
   
}

Greg McVerry

Step Two of @IndieWebCamp Online complete: I layed out my grid on paper and time to write the rules

1 min read

Goal Report

picture of my graph paper with the CSS Grid layouts mapped out

Before I even worry about how feed readers will discover poetry on my site I want to make sure it is purdy with human readable HTML first.

After sketching out what I want I determined the CSS Grid rules I needed. Now to add to the stylesheet in step three.

 

Greg McVerry

Started step two of my @IndieWebCamp Online 2020 and decided to go with 8 column grid rather than 10 since that is already the layout in my templates.

Greg McVerry

Step One of @IndieWebCamp Online 2020 Hack Day Project finished

1 min read

Goal Post

I finished step one of building my poetry page which was actually tearing apart my following page into different php files so I could move the snippets around across my website:

<?php include 'head.php'; ?>
</head>
<?php include 'header.php'; ?>
</header>
 < class="h-entry">
   < href="index.html">
   < class="p-author h-card" href="/">
          </a> 
  < class="followlist">
             
             
    < class="p-name">
      Following
    </h1>
    <?php include 'edtech.php'; ?>
     <?php include 'openpedagogy.php'; ?>
      <?php include 'indieweb.php'; ?>
      <?php include 'literacies.php'; ?>
      <?php include 'poetry.php'; ?>
      <?php include 'education.php'; ?>
      <?php include 'bloggers.php'; ?>
      <?php include 'edreform.php'; ?>
       <?php include 'instructionaldesign.php'; ?>
     </div>
    </main>
    <>
<?php include 'footer.php'; ?>
  </body>

  </html>

Greg McVerry

My Day Two 2020 @IndieWebCamp Online Goal: Build a Poetry Page

2 min read

screenshot of my layout for a poetry page

Currently I am in the middle of a 30 day pop up poetry community and I share poetry all over the web. I need one place to call home.

So for @IndieWebCamp Online I want to build a page to host all my poetry.

I am goint to use CSS (maybe subgrid if I get inspired...want to challenge myself) Grid. I will set three coulns using 2fr, 5fr, 3fr/ That means my area will be divided in 10 equal parts. the left column will be two parts, the right three, and the middle column will take up five parts.

In the left toolbar I am going to make a place for all my audio poems. I have already been putting these on my server but posting them on my Known blog. I will just use the audio element. I will add an h-feed and an rss feed for people who just want audio.

In the middle I will nest another grid and  I will have an area for a featured poem(s). Then I will have an RSS feed of places I post poetry. Probably just from Known.

Then I will make another feed of backstage posts where I explain the how to for poetry. I do not know if I will do this natively or just embed an RSS feed.

Then in the right column I will have a poet's circle where I have a feed of poets from the web I follow. I think I am going to start by cutting up my Following page. I want to take each section and make it a php file so I can use the snippets all over my website. I am going to start here today.

Finally I am going to add an h-feed and an RSS feed for any of the poetry books I am currently reading. My poems work best when I anchor them in the styles of those who have come before. I want to share these treasures. I will probably just publish these manually. I am really bad at keeping up with read posts.

For today I will be happy jjust to get the layout down. If I fill it with poems even better.

Greg McVerry

Hey everyone attending the hack day of @IndieWebCamp online please add your goals here: https://indieweb.org/2020/Online#Hack_Day_Goals.2FProjects if you need help joining the wiki or getting your post with goals added stop by chat.indieweb.org and we will help you out

CLMOOC

Prev | Home | Join | ? | Next