Post #1: How Does This Damn Thing Work, Anyway?

May 29, 2020

As I mentioned on the home page, I primarily develop in Python. One of the purposes of this website is actually to showcase the projects I want to do, most of those, again, in Python.

This however leads me to a pretty important question, at least in these circumstances:

How the hell do I display python code on my website?

There are some requirements, though, that need to be laid down before I figure this out. It's very important to me that whatever solution I use fits the aesthetic of the site as a whole. I would like syntax highlighting, but I'm flexible on this.

So, the way I see it, I have a choice between 2 initial options:

• Non-interactively display the code and output with <pre> code blocks
• Interactively display the code with an online, embeddable interpreter

Both seem to be good options, so let's break them down.

Inline Code Blocks

• Already fits the aesthetic of the site
• No need for maintainence down the road
• No syntax highlighting

As an example, here's a script I wrote a couple months ago to perform the Caesar cipher on an input string:

  def caesar(n, message):
    encryptedMessage = ''

    for letter in message.casefold():
      if letter.isalpha() == True:
        encryptedLetterVal = ord(letter) + n

        if encryptedLetterVal > 122:
          offset = encryptedLetterVal - 122
          encryptedMessage += chr(96 + offset)
        else:
          encryptedMessage += chr(encryptedLetterVal)

      else:
        encryptedMessage += letter

    return encryptedMessage

  #This is a brute force decryption, rather than a cryptoanalysis one
  def decryptor(message):
    messagePossibilities = []

    for i in range(1, 27):
      decryptedMessage = ''

      for letter in message.casefold():
        if letter.isalpha() == True:
          decryptedLetterVal = ord(letter) - i

          if decryptedLetterVal < 97 :
            offset = decryptedLetterVal - 96
            decryptedMessage += chr(122 + offset)
          else:
            decryptedMessage += chr(decryptedLetterVal)

        else:
          decryptedMessage += letter

      messagePossibilities.append(decryptedMessage)

    printer(messagePossibilities)

  def printer(message):
    count = 1
    print("\nKey | Message")
    print("=========================================")
    for possibility in message:
      print("{} | {}".format(count, str(possibility)))
      count += 1

  if __name__ == '__main__':
    message = input("Type your message: ")
    key = int(input("Pick a key (must be less than or equal to 26): "))

    if key > 27 or key < 0:
      key = int(input("Key is not valid, pick a new key: "))

    eMessage = caesar(key, message)
    print("Encrypted message: " + str(eMessage))
    decryptor(eMessage)
          

So, if the input was Jordan Streete and 19, the output would be:

  Encrypted message: chkwtg lmkxxmx

  Key | Message
  =========================================
  1 | bgjvsf kljwwlw
  2 | afiure jkivvkv
  3 | zehtqd ijhuuju
  4 | ydgspc higttit
  5 | xcfrob ghfsshs
  6 | wbeqna fgerrgr
  7 | vadpmz efdqqfq
  8 | uzcoly decppep
  9 | tybnkx cdboodo
  10 | sxamjw bcanncn
  11 | rwzliv abzmmbm
  12 | qvykhu zayllal
  13 | puxjgt yzxkkzk
  14 | otwifs xywjjyj
  15 | nsvher wxviixi
  16 | mrugdq vwuhhwh
  17 | lqtfcp uvtggvg
  18 | kpsebo tusffuf
  19 | jordan streete
  20 | inqczm rsqddsd
  21 | hmpbyl qrpccrc
  22 | gloaxk pqobbqb
  23 | fknzwj opnaapa
  24 | ejmyvi nomzzoz
  25 | dilxuh mnlyyny
  26 | chkwtg lmkxxmx
          

While this does look alright, I feel like it's missing a little... je ne sais quoi. It needs some pizzazz. Plus it's a little bulky. It is a good fallback option if none of the other options work out, though.

Online Interpreters

• Interactive
• Syntax highlighting! (mostly, I think)
• Possibly doesn't fit the aesthetic of the site
• Possibly affects the loading time of the site
• If the online interpreter goes down, there is a possibility the embedded interpreter goes down too

There are 2 good options I've found, so let's go through them with the same code snippet.

trinket.io

What I notice here is that while the window is well sized, the text is small and the colors feel kind of muted. It is nice that the output is next to the code, meaning there's less scrolling you need to do. The design is pretty clean, but I feel like it could be better.

repl.it

Here the design is much cleaner, and the colors pop out from the page. You do need to do more scrolling even just in the code window, and the output is under that, meaning even more scrolling. It also has the unfortunate property where, if I run the original repl open in another tab, it replaces the output of the one on this site.

I need to do some more investigating on this one, it seems.