And boy, did I find some stuff.

The old web is alive and, well, its alive at least. I have a bucket-full of bookmarks I have to sort through but, I'd like to post them here soon, under some undecided context.

Update: this is now a growing list of sites from the old web.

Various sites from the old web

Some of these sites haven't been updated in decades, some are still updated regularly.

1. There was Tigerden's Big Page of Furry Links, which delivers exactly what it promises (I wouldn't click on the links in that list, though. The site is twenty years old, who knows where those URLs go to now).

2. There's the Project Xanadu page from the folks who invented the concept of hyperlinks (jump-links to them). They're snarky and stubborn in their philosophy. I love it. Here's a 1995 article from Wired about their story titled The Curse of Xanadu. Good read.

3. Stinkymeat— A well documented three week prank.

4. Internet Explorer is Evil— haven't read the entire site but I vibe with its premise. Wonder though if sites like this were a precursor to the Bill Gates micro-chip conspiracy theories?

5. The Internet Pizza Server is a charming little oddity. Here's the pizza I ordered with pepperoni, green peppers, and fingers.

6. A forum discussing 9/11 as it was happening. Eerie and surreal stuff. “I was on the “E” Train, which heads straight into the WTC, only seconds before the crash, when I decided to switch to the “R” Train (which avoids the WTC). I would probably still be stuck on the train now, and for hours afterwards.”

7. The LoserUsers— I can't make heads or tails on what this site is in reference to.

Special Interests

1. Lost Parks— a page dedicated to all of Florida's lost tourist attractions. Started in 1997 and was updated as recent as 2015 from what I can tell

2. A brief history of Psychological Operations from a Desert Storm Vet. A fascinating read. I couldn't find any mention of the internet as an effective medium for PSYOPs, to give you an idea how old the site is.

3. “Weird Al” Yankovic Homepage

Guides & Tutorials

Detailed instructions for accomplishing something.

1. DIY Cellphone is a guide that literally shows you how to make your own cellphone, by a couple of MIT folks.

2. An old HTML Tutorial from Stanford with a fun writing voice. “...we'll share what we've learned over the months in the School of Hard Knocks. Of course, everything we tried worked...NOT!!“

3. Cold Water Reactor

4. The SECRET Guide to Computers

Digital Repositories, Collections, & Archives

Writings, graphics, gifs, and other things made of 1s and 0s from the old web.

1. Iconology

2. Hacked Sites

3. Complete Review— A Literary Saloon and Site Review

4. Ascii Art Dictionary from Andreas Freise

5. Lies, Damn Lies & ICQ Messages

Vintage Digital Gardens

Personal homepages from the old internet dedicated to documenting their lives, experiences, and interests.

1. Dennis M. Ritchie

2. Julia A. Ziring's Home Page

3. Ziring MicroWeb Homepage

4. Paul Burgess

5. Blaisdell's Little Corner of the Web

6. Sprott's Gateway

7. Phil Reynolds' Home Page

8. Ivy's Domain

9. Phillip Helbig

Contact me about this list

How to reach me.

If a listing is harmful: While I always poke around, I haven't thoroughly reviewed all of the sites listed. If you see something listed you think is harmful, please contact me so I can remove it.

If you have an addition: I can't promise I'll add everything submitted, but I welcome contributions!

If you want your site removed: If your site is listed and you want it removed, let me know. I'll be happy to remove it.

If a link is broken: If you come across a broken link, let me know.

• Categories
  • Type: #Note
  • Re: #OldWeb #DigitalGarden #Collection
• Dates
  • Created: 10/01/2023
  • Last Edited: 10/01/2023

Ideally, I could style a <div> to look like a bootstrap-style “card” with padding and a border.

Challenge: The issue is that hashtags in write.as don't activate within HTML tags added in the editor. But if the html is added using markdown the hashtags work.

So, I'll need a markdown solution that:

1. Wraps an html tag around the metadata so I can reference in CSS.
2. Isn't an element I'll use for anything else since I cannot use CSS IDs or Classes with the write.as implementation of markdown.

Option 1: Unordered List

I can use unordered lists as markdown wraps them in <ul>. A screenshot of what it looks like with a bit of CSS:

Con: Reserving unordered lists exclusively for this purpose doesn't seem reasonable.

Pro: I at least have ordered lists <ol> as a second option for everything else.

Pro: It appears I have more styling control over lists than tables.

Option 2: Table

I can use tables as markdown wraps it with <table> tags. Here's a screenshot:

Con: But, again, I'd have to reserve tables exclusively for this use. At least with lists, I have a second option. If I take tables off the uh, table, that's it. I can't use it anymore.

Con: I have less CSS control, apparently. Tables are set to display: table-row-group which won't allow me to add padding or border radius to the <table> tag. I guess I could try changing the display value but it could mess up something else.

Pro: Tables default to columns. Single-column lists create a lot of wasted space. I would have to play with the float properties which, blah.

Experiments

For Option 1, there's a lot of wasted space as the list can only populate in a single column by default. I'm wondering if I can created a nested list and then float the parent <li> to make two columns.

Take 1: Looks like I get close to what I need with the display: table properties:

Take 2: Taking shape on desktop:

Take 3: Mobile formatting:

Current View

• Categories
  • Type: #Experiment
  • Re: #Markdown #DigitalGarden
• Dates
  • Created: 9/30/2023
  • Last Edited: 9/30/2023

Conclusion

I opted for the unordered list solution for now. We'll see how well it holds up and scales. I'll update with more if I change stuff up.

Bug: The <hr> loses its margins in the #collection view on the homepage for some reason. Can't figure out why.

Code

The markdown and css is below. I also put on my Notion for easier copy / paste.

https://fromjason.notion.site/Code-Experimenting-with-markdown-CSS-in-write-as-8c50bc0e767445c78f99c1e460330424?pvs=4

# Markdown for nested list

* Categories
    * Type: #Experiment
    * Re: #Markdown #DigitalGarden
* Dates
    * Created: 9/30/2023
    * Last Edited: 9/30/2023

 
/* Css for styling nested list in article*/
 #post article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
}
 #post article ul li{
     display: table-cell;
}
 #post article ul li ul{
     display: table-row !important;
     border: 0;
}
 #post article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #post article ul li ul li{
     display: table-row;
}
 #post article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
/* reverts back to inline-block for mobile */
 @media only screen and (max-width: 576px) {
     #post article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #post article ul li{
         display: inline-block !important;
    }
     #post article ul li:nth-child(2){
         margin-top: 15px;
    }
     #post article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #post article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #post article ul li ul li{
         display: inline-block;
    }
     #post article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}

p.description a{
     color: #555;
}
 p.description a:visited{
     color: #555;
}
 p.description span{
     color: #888;
}
/* list css for extended meta data in article*/
 #post article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
}
 #post article ul li{
     display: table-cell;
}
 #post article ul li ul{
     display: table-row !important;
     border: 0;
}
 #post article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #post article ul li ul li{
     display: table-row;
}
 #post article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
 @media only screen and (max-width: 576px) {
     #post article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #post article ul li{
         display: inline-block !important;
    }
     #post article ul li:nth-child(2){
         margin-top: 15px;
    }
     #post article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #post article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #post article ul li ul li{
         display: inline-block;
    }
     #post article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}

/* Collection View: list css for extended meta data in article*/

 #collection article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
     margin-top: 20px;
     margin-bottom: 20px;
}
 #collection article ul li{
     display: table-cell;
}
 #collection article ul li ul{
     display: table-row !important;
     border: 0;
}
 #collection article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #collection article ul li ul li{
     display: table-row;
}
 #collection article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
/* reverts back to inline-block for mobile */
 @media only screen and (max-width: 576px) {
     #collection article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #collection article ul li{
         display: inline-block !important;
    }
     #collection article ul li:nth-child(2){
         margin-top: 15px;
    }
     #collection article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #collection article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #collection article ul li ul li{
         display: inline-block;
    }
     #collection article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}
 

Sources

http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

https://www.sitepoint.com/community/t/display-table-row-and-padding/6032/2