Tutorial: How to Clean Logs

edited May 4 in World Library

Table of Contents

  1. How to Edit and View HTML files
  2. Cleaning Logs
  3. Glossary of HTML and CSS

These tutorials assume no knowledge of HTML or CSS. Some suggestions here are hacks to get readable logs quickly.

🦋 Side Note: Clean code makes use of semantic elements! If interested in writing webpages from scratch or and creating your own themes (for blogs), check out tutorials like HTMLDog and resources like MDN Web Docs.

Active: Wed, Fri (what are timezones)

Avatar made through Picrew

Comments

  • How to Edit and View HTML files

    HTML files can be viewed in any Internet browser, and may open in them by default. To edit the file, you'll want a text editor, like Notepad, or a code editor, like Notepad++, Sublime, Microsoft Visual Studio (free Community edition), etc. Code editors will let you do multiline find-replace and regex find-replace, so I recommend one of them.

    Do one of the following:

    1. Right-click (on Windows) or control-click (on MacOS) to get the 'Open With' option in the menu.
    2. Click-drag the file onto the app icon in your file explorer or taskbar (Windows). Or click-drag it to your finder or Dock (MacOS).
    3. Open the app first, and browse for the file through the app

    You can have the file open in both your editor and your browser. When making edits, save the file, and refresh in your browser to view the changes.

    Active: Wed, Fri (what are timezones)

    Avatar made through Picrew
  • edited May 3

    MUSHClient

    MUSHClient makes it easy to configure 'preamble' and 'postamble', text prepended and appended to the file itself and optionally to each line. Use keyboard shortcut Alt+3, or go to menu Game > Configure > Logging...

    MushClient Logging configuration

    Replace the document preamble:

    <html>
      <head>
        <title>Log of %N session</title>
        <style type="text/css">
          body {
            font-family: "FixedSys", "Lucida Console", "Courier New", "Courier", monospace;
            background: #000000;
          }
          pre {
            max-width: 44em;
            white-space: pre-line;
          }
        </style>
      </head>
     <body><pre>

    Postamble:

    </pre></body>
    </html>

    And clear preamble and postamble for output lines, commands, and script.

    The background colour should be whatever your background is in Appearance > ANSI Colour. The `pre` tag styling (for a preformatted element) is optional, to get your log to appear as if wrapping at 80 characters. You can remove that block if you wish. The max-width depends on your font face and size and may need adjusting.

    What remains is removing your prompt. (If you have Log Commands checked, I recommend using a regex to remove those.) If your vitals don't change, you can do a quick find-replace of prompt to an empty string. Your line may look different depending on how your prompt is configured.

    Example:

    Find:
    <font color="#008000">6300h, 10800m, 9800e, 100em</font><font color="#C0C0C0"> ex-
    </font>
    
    Replace:

    If your vitals are changing (due to losing balance, Chaos Domoth blessing, etc.) then you may want to use a regex find-replace. Online regex testers like RegEx Pal may help figure out a matching regex.

    Important! If you remove any other extraneous content, make sure the closing </font> tag is removed also, like in the example for the prompt above. It may be on the next line.

    Active: Wed, Fri (what are timezones)

    Avatar made through Picrew
  • edited May 4

    Nexus

    Nexus saves everything on one line in the file. Have word wrap on in your editor. (Full-featured code editors or dev environments can also format it to be readable, but this tutorial assumes you're using something simpler.) Nexus puts lines within div elements, so for legibility, find-replace <div> with <div> plus a new line! You may need a code editor for multiline find or replace.

    Viewed in an Internet browser, your log may have text stretching across the full width of the screen. We can get it to the same width and make it the same font if desired.

    Nexus Quick edits:

    After saving a log and opening the file, you'll see this at the top:

    <html><head><style>body { background-color: black; color: #aaa; } div { ...

    For legibility, you can format it like this. Some values may be different (font, font size, colours, etc.) depending on what you've configured in your Nexus.

    <html>
        <head>
            <style>
            body { background-color: black; color: #aaa; }
            div { line-height: 120%; font-family: Verdana, Geneva, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;}
            .mono { font-family: monospace; }
            .timestamp { font-family: monospace; color: #555; }
            .timestamp { display: none; }
            </style>
        </head>

    To get lines to roughly wrap at 80 characters, you can insert `max-width: 48em;` to the div styling. You can also replace the font-family value with `monospace` if you'd like.

    <html>
        <head>
            <style>
            body { background-color: black; color: #aaa; }
            div { line-height: 120%; font-family: monospace, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; max-width: 48em; }
            // leaving rest as-is

    Important! If you remove any other extraneous content, make sure the closing tag is removed also. See the glossary at the end for details.

    Nexus Advanced edits - Paragraph spacing:

    If you want lines between blocks of text, you can add in `div:not(.mono) {padding-bottom: 1.2em;}`, but this will also put spaces between room title, room descriptions, exits, etc. If you want to remove those, you can add in another CSS class (i.e., `.no-padding`) manually or with a regex.

    <html>
        <head>
            <style>
            body { background-color: black; color: #aaa; }
            div { line-height: 120%; font-family: monospace, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; max-width: 48em; }
            div:not(.mono), div:not(.no-padding) { padding-bottom: 1.2em; }
            // leaving rest as-is

    Then either manually or with find-replace using regexes, add in 'no-padding' to divs where you don't want padding before. This works particularly well if you have a unique colour for room titles or the lines you want to replace. Examples:

    Regex replace room titles with colour `#555555`

    Find:
    <div class=""><span class="timestamp mono no_out">(\d+:\d+:\d+)&nbsp;</span><span style="color: #555555">((\w+\s?-?)+\.)</span></div>
    Replace:
    <div class="no-padding"><span class="timestamp mono no_out">$1&nbsp;</span><span style="color: #555555">$2</span></div>
    Active: Wed, Fri (what are timezones)

    Avatar made through Picrew
  • Mudlet

    Mudlet will put in line breaks based on your word wrap setting in Options > Preferences. Within the 'Main display' tab is the option to 'Wrap Lines at'.

    I keep regexes to do a find-replace of my prompt and any commands entered. Yours may be different depending on how your prompt is configured. Online regex testers like RegEx Pal may help figure out a matching regex.

    As an example, I do a find-replace of commands I've entered with a line break.

    Find:
    <span style=\"color: rgb\(\d+,\d+,\d+\); background: rgb\(\d+,\d+,\d+\); \">\d+h, \d+m, \d+e, \d+em<\/span><span style=\"color: rgb\(\d+,\d+,\d+\); background: rgb\(\d+,\d+,\d+\); \"> ex-<\/span><span style=\"color: rgb\(\d+,\d+,\d+\); background: rgb\(\d+,\d+,\d+\); \">.*<\/span><br>
    Replace:
    <br>
    

    And I delete my prompt in between other outputs.

    Find:
    <span style=\"color: rgb\(\d+,\d+,\d+\); background: rgb\(\d+,\d+,\d+\); \">\d+h, \d+m, \d+e, \d+em<\/span><span style=\"color: rgb\(\d+,\d+,\d+\); background: rgb\(\d+,\d+,\d+\); \"> ex-<\/span><br>
    Replace:
    

    Important! If you remove any other extraneous content, make sure the closing tag is removed also. See the glossary at the end for details.

    Active: Wed, Fri (what are timezones)

    Avatar made through Picrew
  • edited May 4

    Glossary of HTML and CSS

    HTML5 (Hyper-Text Markup Language version 5) is the language we use for displaying webpages. HTML elements are denoted with tags in angle brackets. Most have a opening and closing tag, e.g., a division tag is opened with <div> and closed with </div>. Our MUD Clients use this existing language, and each HTML document has these tags.

    • html - the root or container for all other elements
    • head - contains title, metadata, and style for the html document
    • body - contains the contents

    Other tags you may see multiple times in the body are:
    • div - divisions or sections; can be used for a block of text
    • p - paragraphs for blocks of text
    • span - for spans of text that may have a different style
    • font - for styling font face, color, size (used in HTML4)

    Depending on how your client handles preserving new lines, you may also see:
    • pre - preformatted blocks of text, for preserving whitespace
    • br - line breaks in text (does not have a closing tag)

    CSS (Cascading Style Sheets) is a language we use for how to present HTML documents. We can target styles to particular HTML tags (e.g., to the whole body, or to all p tags). We can also define classes that can be used repeatedly (e.g., on spans with class="timestamp"). Styles you may adjust often in logs include (linking to MDN):

    Active: Wed, Fri (what are timezones)

    Avatar made through Picrew
Sign In or Register to comment.