27 votes

Suggestion: Make tildes completely text-based?

Posted by Ark
Tags: design, graphics

I like the idea of the site being entirely dependent on text with not a single graphic downloaded. I do like the little logo in the top left, but I think it would be even cooler if it was literally just the plain-text symbol ~.

This would also apply to the small little icons next a link post, as the site to which the post takes you can simply be read below the post itself.

I know the website already loads super fast which I am very grateful for, but I think a purely text-based site would promote the overall discussion focused goal of tildes as there would be no graphics in the way. I may be biased towards this style of website, but I think it's worth seeing if other users would like the site to become text-only. This is one main reasons I disliked the new Reddit design, the old site was nice because the graphics were kept to a minimum and therefore more of the screen could be used to show the content.

42 comments

  1. [20]
    Comment deleted by author
    Link
    1. Deimos
      Link Parent
      Huh, interesting, I've never thought of it as arrows or associated it with reddit votes at all. It's just a zig-zag (basically a pixelated tilde ~), and the colors are just all the Solarized...

      The coloring delineates the tilde into two arrows, and they use the same colors as Reddit’s upvotes and downvotes, but they’re swapped around the wrong way. It really feels like the logo either needs to be rotated or recolored.

      Huh, interesting, I've never thought of it as arrows or associated it with reddit votes at all. It's just a zig-zag (basically a pixelated tilde ~), and the colors are just all the Solarized "accent colors", since at least originally those were the only color schemes.

      9 votes
    2. [14]
      Ark
      Link Parent
      Maybe meet halfway and simply keep the colour without the graphics? For example, if the upper left logo was replaced with just the symbol itself, everytime the page refreshes it could change to a...

      Maybe meet halfway and simply keep the colour without the graphics? For example, if the upper left logo was replaced with just the symbol itself, everytime the page refreshes it could change to a random colour to keep it fresh? Also if the favicons were removed, the small bit of text that tells you what site it comes from could be coloured to suit that site, i.e. YouTube = Red. I guess I just prefer the very minimalist look.

      I do agree, the logo does seem a bit funny. A simple white tilde symbol on black would look rather nice personally, or a colour spectrum along the entire symbol similar to what it looks like now.

      4 votes
      1. [14]
        Comment deleted by author
        Link Parent
        1. [13]
          Ark
          Link Parent
          Fair enough, I don't really mind them that much I just like the idea of no graphics. I'd be pretty happy if there was just a simple toggle option in the settings that allows you to turn them on or...

          Fair enough, I don't really mind them that much I just like the idea of no graphics. I'd be pretty happy if there was just a simple toggle option in the settings that allows you to turn them on or off, sounds like a good compromise.

          1 vote
          1. [9]
            Deimos
            Link Parent
            As with most minor styling preferences, you should probably just install a browser extension that lets you set up your own CSS rules. It would probably only take a couple of CSS rules to hide all...

            As with most minor styling preferences, you should probably just install a browser extension that lets you set up your own CSS rules. It would probably only take a couple of CSS rules to hide all the graphics, and that's much simpler than the site itself having to build and maintain a separate user preference for each minor adjustment people want to see.

            5 votes
            1. [2]
              Tetracyclic
              Link Parent
              The logo is so simple that you could express it as single box-shadow statement. (Colours are a close match, not the actual Solarized colours.) <div class="logo-container"> <div...

              The logo is so simple that you could express it as single box-shadow statement.

              (Colours are a close match, not the actual Solarized colours.)

              <div class="logo-container">
  <div class="tilde-logo"></div>
</div>

.logo-container {
  width: 100px;
  height: 100px;
}

.tilde-logo {
  box-shadow: 
    45px 30px 0 0 #2196f3,
    30px 45px 0 0 #00bcd4,
    60px 45px 0 0 #673ab7,
    120px 45px 0 0 #ff9800,
    15px 60px 0 0 #8bc34a,
    75px 60px 0 0 #e91e63,
    105px 60px 0 0 #ff5722,
    90px 75px 0 0 #ff0000;
  height: 15px;
  width: 15px;
}

              You could also use CSS grid and nth-child to represent it, but box-shadow is more universally supported.

              2 votes
              1. Elijah
                Link Parent
                Table with 1 pixel cells would probably work too. And give off a dawn-of-the-web vibe just like ~ in links.

                Table with 1 pixel cells would probably work too. And give off a dawn-of-the-web vibe just like ~ in links.

                1 vote
            2. [6]
              Ark
              Link Parent
              Yeah that makes sense, time to read up on some CSS!

              Yeah that makes sense, time to read up on some CSS!

              1 vote
              1. [2]
                Deimos
                Link Parent
                I think it should be pretty straightforward, I think even this might do it: .topic-icon { display: none; } .site-header-logo { background: none; padding-left: 0; }

                I think it should be pretty straightforward, I think even this might do it:

                .topic-icon {
    display: none;
}
.site-header-logo {
    background: none;
    padding-left: 0;
}
                2 votes
                1. Ark
                  Link Parent
                  Huzzah, I’m on my way to becoming a coding genius, thanks man!

                  Huzzah, I’m on my way to becoming a coding genius, thanks man!

                  2 votes
              2. [4]
                Comment deleted by author
                Link Parent
                1. [3]
                  Ark
                  Link Parent
                  I think @Deimos has me covered but thank you very much for the offer!

                  I think @Deimos has me covered but thank you very much for the offer!

                  1 vote
                  1. [3]
                    Comment deleted by author
                    Link Parent
                    1. [2]
                      Ark
                      Link Parent
                      Haha I’ll test it as soon as I get back on my laptop. My real question is how do I do that? Never really used a custom CSS script before, help a noobie out please!

                      Haha I’ll test it as soon as I get back on my laptop. My real question is how do I do that? Never really used a custom CSS script before, help a noobie out please!

                      1. [2]
                        Comment deleted by author
                        Link Parent
                        1. Ark
                          Link Parent
                          Excellent, thank you for pointing me in the right direction fellow user!

                          Excellent, thank you for pointing me in the right direction fellow user!

                          1 vote
          2. [3]
            crius
            Link Parent
            You asked, we deliver: https://imgur.com/jRUWQ9e https://github.com/theCrius/tildes-extended

            You asked, we deliver: https://imgur.com/jRUWQ9e

            https://github.com/theCrius/tildes-extended

            1 vote
            1. [2]
              Ark
              Link Parent
              Amazing, thank you!

              Amazing, thank you!

              1. crius
                Link Parent
                I forgot to add, thanks to @Bauke that curate most of the CSS part of the extension ;) The tildes is text if you activate the feature and change colour at every refresh :)

                I forgot to add, thanks to @Bauke that curate most of the CSS part of the extension ;)

                The tildes is text if you activate the feature and change colour at every refresh :)

                1 vote
    3. [2]
      TrialAndFailure
      Link Parent
      I'm confused. Aren't Reddit votes colored either orange or purple? Tildes's logo has more colors than that. I also don't see any arrows there at all.

      I'm confused. Aren't Reddit votes colored either orange or purple? Tildes's logo has more colors than that. I also don't see any arrows there at all.

      2 votes
      1. [2]
        Comment deleted by author
        Link Parent
        1. TrialAndFailure
          Link Parent
          I mean, I guess I can see it. The arrows would have to be asymmetrical and lopsided, though, given where the colors transition.

          I mean, I guess I can see it. The arrows would have to be asymmetrical and lopsided, though, given where the colors transition.

    4. [2]
      Corin
      Link Parent
      Counterpoint:

      The logo and favicons add a touch of color and serve to break up the waterfalls of text;

      Counterpoint:

      “Confusion and clutter are the failure of design, not the attributes of information.” – Edward R. Tufte

      1. [2]
        Comment deleted by author
        Link Parent
        1. Corin
          Link Parent
          That tildes isn't cluttered is the point I was trying to make. The 'waterfall' of text isn't any more or less readable by its nature. It all depends on how blocks are arranged and relate to each...

          That tildes isn't cluttered is the point I was trying to make. The 'waterfall' of text isn't any more or less readable by its nature. It all depends on how blocks are arranged and relate to each other.

          You don't need a graphic to break up text. You can break up text with space.

  2. [3]
    Tenar
    Link
    fwiw this got me to see if I could browse/post using lynx (text only/cli browser) and it works pretty well. I'm testing posting etc because of your comment, we'll see if it appears. More on-topic:...

    fwiw this got me to see if I could browse/post using lynx (text only/cli browser) and it works pretty well. I'm testing posting etc because of your comment, we'll see if it appears. More on-topic: I think the site is pretty, still light, but if you want a super-light version with only text I would personally refine your suggestion to be adding/making a light.tildes.net version, eventually.

    7 votes
    1. [2]
      Comment deleted by author
      Link Parent
      1. Ark
        Link Parent
        I think the prefix of text would be the best, exact description of the format of the modified site.

        I think the prefix of text would be the best, exact description of the format of the modified site.

        9 votes
    2. Ark
      Link Parent
      Ah so two separate websites, that makes a bit more sense. I just assuming the transition to completely text-based would be easy as the site is pretty much like you said super-light. Depends how...

      Ah so two separate websites, that makes a bit more sense. I just assuming the transition to completely text-based would be easy as the site is pretty much like you said super-light. Depends how other people feel about it though.

      1 vote
  3. [2]
    chyyran
    Link
    The Tildes logo is simple enough that it can be expressed as SVG, which is strictly speaking purely text, and is generally smaller than a binary image. Some legacy browsers won't be able to render...

    The Tildes logo is simple enough that it can be expressed as SVG, which is strictly speaking purely text, and is generally smaller than a binary image. Some legacy browsers won't be able to render the SVG, but demographics wise it seems likely that most ~ users are on a relatively recent browser.

    5 votes
    1. Corin
      Link Parent
      svg is only text in as much as a jpeg or png is?

      svg is only text in as much as a jpeg or png is?

  4. [8]
    crius
    Link
    Well, that would go perfectly with the Terminal/CRT Theme! Screenshot: https://i.imgur.com/scwKpAX.png, https://i.imgur.com/ArtwT6w.png Style: https://gitlab.com/snippets/1721975

    Well, that would go perfectly with the Terminal/CRT Theme!

    Screenshot: https://i.imgur.com/scwKpAX.png, https://i.imgur.com/ArtwT6w.png
    Style: https://gitlab.com/snippets/1721975

    4 votes
    1. [2]
      rorso
      Link Parent
      I could pretty easily modify my theme to replace the logo graphic with a ~ It's not a bad idea actually. I'll do it when I next work on it.

      I could pretty easily modify my theme to replace the logo graphic with a ~

      It's not a bad idea actually. I'll do it when I next work on it.

      1 vote
    2. [3]
      Ark
      Link Parent
      Nice. Very Nice!

      Nice. Very Nice!

      1. [2]
        crius
        Link Parent
        Linked the wrong links on the first try, updated with the right ones :)

        Linked the wrong links on the first try, updated with the right ones :)

        1 vote
    3. [2]
      rib
      Link Parent
      Nice! That looks so satisfying. How do I use the github code to modify Tildes theme?

      Nice! That looks so satisfying. How do I use the github code to modify Tildes theme?

      1. crius
        Link Parent
        You can download any browser extension that allow you to inject your custom styles in websites or you can download tildes extended that I'm developing with @Bauke (and whoever want to join...

        You can download any browser extension that allow you to inject your custom styles in websites or you can download tildes extended that I'm developing with @Bauke (and whoever want to join honestly).

        There is a setting to inject an external or user defined CSS.

        If you choose to load it as external css you just have to past the url to the source CSS, in this case: https://gitlab.com/snippets/1721975/raw

        4 votes
  5. [3]
    Luna
    Link
    Are you asking about having ASCII art instead of CSS or you just want to do away with images? If it's the former, it's a fun idea, but I know that can be a PITA to implement, and it doesn't scale...

    Are you asking about having ASCII art instead of CSS or you just want to do away with images? If it's the former, it's a fun idea, but I know that can be a PITA to implement, and it doesn't scale well if you resize the window. If the later, I think there should be a setting "display no images", and the logo could be replaced with a ~. (The favicon likely couldn't be disabled, as the browser will always look for /favicon.ico, and I don't know if you can 401/404 that on a per-user basis.)

    2 votes
    1. Ark
      Link Parent
      The latter, a simple "remove all images" button. I could still deal with having the little favicons, I just like the idea of being able to switch between the normal site and barebones.

      The latter, a simple "remove all images" button. I could still deal with having the little favicons, I just like the idea of being able to switch between the normal site and barebones.

      1 vote
    2. OptimalBasis
      Link Parent
      I̴̴͠͡͝ ̢҉́͟҉a̵̶̴̵̴ḿ͢ ҉͜h̕͟i̴̸g̵̡͘͡h͏̴͢l̵̵ý̸͠ ̷̛͝͠i̕͠n̶͢͡͞ ̵́̕͡͏f͟͝͞a̴͜v̴̢͝͡o̵̡͡͏ŗ̴͡͞ ̵̡͘̕͞ơ͝͡͝f̢̨͡ ̶̷̢͟͏r̸̨͜͝͠e̛͠s͘͢͞t̵̢̢ŗ̕i͡҉̴͜c̶̶̢t͏̡̨̨͞i̶̸͢n̨̛͟͝ǵ̷̡͞͏...

      I̴̴͠͡͝ ̢҉́͟҉a̵̶̴̵̴ḿ͢ ҉͜h̕͟i̴̸g̵̡͘͡h͏̴͢l̵̵ý̸͠ ̷̛͝͠i̕͠n̶͢͡͞ ̵́̕͡͏f͟͝͞a̴͜v̴̢͝͡o̵̡͡͏ŗ̴͡͞ ̵̡͘̕͞ơ͝͡͝f̢̨͡ ̶̷̢͟͏r̸̨͜͝͠e̛͠s͘͢͞t̵̢̢ŗ̕i͡҉̴͜c̶̶̢t͏̡̨̨͞i̶̸͢n̨̛͟͝ǵ̷̡͞͏ ̢c̵̵̴͞͞h̢a̵̷͟r̕͞a̴̸̢̨͠c҉̕͠t͘͞ę̸̕͘r̷̛̀͢͠s̨̀́͜͝ ̸͢͠s҉͠҉ų͡ç̵̨̧͟h͝ ͟͜ţ̶̴h̡͡͡a͏̵͏̴͟t̛́͟͝͡ ̨͞͠ń̴̨̛o̴̶̴̕n̵͟ś̷̴͜͝e͜͠͝͡ņ̴̢͡͞ś͘͢͞è͞ ̸͏͢l͏҉̵̵͠i̴͢k̵͟͟ȩ͞͠ ̧҉͡͞͞ţ͟h̷́͡i̸͝s͞͞ ̵̧͢͢i̵̷͠s̵̨͞͠҉ ̵̛n̡ó̸̶t̡͜͢͝҉ ̨͝p̷͞͞o͘͟͜s̴̛̀͝s̴ì̡̧͟b̴̀͡l̕͟͜͞e҉̸.̨̨̕͘͜

      🤢💩🇰🇵

      It should be possible to sanitize Unicode input to avoid this. Even then stuff like this can pop up:

      ¯\_(ツ)_/¯

      1 vote
  6. [4]
    TrialAndFailure
    Link
    I find that Tildes loads quite a bit more slowly than other websites, so I don't think removing the few graphics it has would help that.

    I find that Tildes loads quite a bit more slowly than other websites, so I don't think removing the few graphics it has would help that.

    1. [3]
      elf
      Link Parent
      Where do you live? That might just be the ping from the server being in Canada.

      Where do you live? That might just be the ping from the server being in Canada.

      4 votes
      1. [2]
        TrialAndFailure
        Link Parent
        That could be it. I'm squarely within the States.

        That could be it. I'm squarely within the States.

        1. elf
          Link Parent
          How slowly is the site loading? If you're in the continental US, I don't think you should have more than around a 100ms ping to the tildes server.

          How slowly is the site loading? If you're in the continental US, I don't think you should have more than around a 100ms ping to the tildes server.

          1 vote
  7. [3]
    hook
    Link
    Ooh oooh, we should have a ~binaries where all non-text submissions should go to, such as ~binaries.photography ~binaries.sound.music etc. SCNR...

    Ooh oooh, we should have a ~binaries where all non-text submissions should go to, such as ~binaries.photography ~binaries.sound.music etc.

    SCNR...

    1. [2]
      Elijah
      Link Parent
      And we could post source code there in shar files.

      And we could post source code there in shar files.

      1 vote
      1. hook
        Link Parent
        Ooooh, in sliced up ARJ archives ;)

        Ooooh, in sliced up ARJ archives ;)

        1 vote