Skip to main content

Greg McVerry

where I made it today's challenge contribution,. I spent time laying out collections of posts that I often organize into a publication like page.

I tried to use common card sizes others might like using CSS grid. https://postcollection.glitch.me/ here it is on GitHub https://github.com/jgmac1106/postcollection

Greg McVerry

Alright, the major part of the vita is all set! the resume is now full, just a few more grants, my service to right, and the 2018 updates and it is all set. project coming along.

Greg McVerry

I accidentally built a free blog on @glitch for the #newwwyear challenge

5 min read

I wanted just a couple of static pages, but ended up with a fully functional blog on @glitch

When Tantek posted about the challenge I knew I wanted in.

I had just launched a 100 day challenge to move my site from WordPress. I wanted to simplify. I am also trying to learn CSS Grid. I wanted to grow

The challenge provided me an opportunity to work on both goals. Double dip my challenges if you will (I failed on the 100 day challenge).

My thinking was a static site for content I consider canon and using Known, where my journey started, for my social stream

The Accidental Blog

To layout my blog I turned to Glitch, I had a bit of a heads up on the demise of Thimble and I needed a new home to code. I don't use Terminal and prefer to make websites in the cloud where the sun can peek through on my understanding. Basically, my learning gets scafolfded.

So I made a Staging site with just a homepage and a few other pages. Then I thought, I should make pages for my long form articles and other HTML projects. Sometimes I need a blank page and get stuck in the CSS of my CMS

So I styled up a long-form article page and thought while I am at it I should add the proper microformats that get utilized by cool tools. It only took me adding five classes to some HTML elements

Use Microformats

You stick an h-entry on the entire post, on the body, main, or article element usually. This includes a title, a summary, and an h-card for the author. An h-card is the business card. It contains a name, url, and stuff like a photo.

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
 
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
 
  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

Add a Four Links

I added two links to my header, One is a webmention endpoint and the other an inideauth endpoint. The webmention endpoint means I can collect comments. I did not have to do anything but signup at webmentions.io. To sign up I needed to login and thie required the IndieAuth endpoint

Many sites have an IndieLogin feature meaning get to sign in with nothing but your domain. This uses a protocol called IndieAuth and all you have to do is add a line of code to your website. If you have a link back to your website on a tool like GitHib that requires authentication you will be asked to sign in with GitHub. This works because on your website you have a link to GitHub with rel="me" and a link on GitHub back to your blog. The IndieAuth serves know that you are you.

<link rel="webmention" href="https://webmention.io/jgmac1106homepage.glitch.me/webmention" />
<link rel="pingback" href="https://webmention.io/jgmac1106homepage.glitch.me/xmlrpc" />
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">

It Just Worked

I didn't realize it but it just worked. My blog started showing up in people's readers, they were subscribing to my the feeds...on what I thought of as kind of my staging server. I started to receive webmentions.

So I kept going I built an h-feed for podcasts, and video playlist (Bonus I connected to https://archive.org to host all my media), a resume and a following page. They all just work.

I truly understand how microformats can power the social web. You just stick five classes into your HTML and four links in your header and any website gets connected to the social web.

What is Next?

Maybe I keep going. I could layout an h-feed for my photos and add a photo post template, I could do the same for notes, likes, and reads, and watches..all the post types...Should I?

I could learn to display and not just collect webmentions. Can I?

My goal was to get a few pages up on a static site and not worry about everything else.

I had no idea not worry about everything else and doing it yourself was so easy.

Now I say, easy with the caveat of people who can write HTML. Yet I take people every year who have never been online on their own site and they can build websites in a semester. 

Can I build the lightest weight blogging platform for my students on @Glitch? Here is the thing. I think I could. Wanna help?

 

Greg McVerry

Morning challenge draws to a close and the resume is getting closer: https://jgmac1106homepage.glitch.me/resume.html

Greg McVerry

Back at challenge this morning, trying to conquer an errant flexbox....after everything you realize didn't properly name class in HTMl... chalk it up as a win for a lot of free learning for a problem easy to solve. https://jgamc1106homepage.glitch.me

Greg McVerry

Well calling it a night. Will have to get back to challenge tomorrow. Got stuck on my flexbox: https://jgmac1106homepage.glitch.me/resume.html I need to qork ont he media queries.

Greg McVerry

Hanging with @dshanske as I work on my challenge and try to finsih up the resume. Adding the content and realizing I need to resize some fonts to make it do what its got to do.

Greg McVerry

fooling with my colors resolution https://jgmac1106homepage.glitch.me but I am color blind so I mix and match numbershttps://www.color-hex.com/color/6b6b6b and use a lot of greys

Greg McVerry

OMG Just used the tiniest bit of CSS and the <details> tag to add collapsible areas to my resume as part of challenge. Had I known it was this easy would have stopped messing with bootstrap accordion tables years ago.
https://jgmac1106homepage.glitch.me/resume.html

Greg McVerry

Yes! I finished the layout of my resume: https://jgmac1106homepage.glitch.me/resume.html Now content and microformats. need to be careful. h-resume as a tone of nested h-events and h-cards. Then I will strip away all borders and colors for suit and tie remixes challenege

CLMOOC

Prev | Home | Join | ? | Next