flak rss random

ssh in https

The wifi network at BSDcan, really the UOttawa network, blocks a bunch of ports. This makes it difficult to connect to outside machines using “exotic” protocols, basically anything except http or https. There are many ways to resolve this, here’s what I did.

Pick a port that’s allowed, such as 443. Unfortunately I’m already using port 443 for some very serious https business. But it’s possible to run two protocols over the same port with some smarts in the endpoint.

ssh connections start by having both client and server exchange version strings. You can observe this by running netcat.

> nc localhost 22
SSH-2.0-OpenSSH_8.0

Or start a server and observe the client, ssh -p 20002 localhost.

> nc -l localhost 20002
SSH-2.0-OpenSSH_8.0

This is convenient because many other protocols typically begin with only one party. You can’t tell you’re talking to a web server, for instance, because the server doesn’t respond until it receives a request. The upside, for ssh, is that you can probably inject it into almost anything, given some control over the software.

In my case, I’m running a web server. My request loop used to look like this:

        _, err := rw.Reader.Peek(1)
        if err != nil {
            return
        }
        req, err := http.ReadRequest(rw.Reader)

It’s reading one byte to check for timeouts and disconnects. If we read a little more, we can spot ssh connections.

        sneak, err := rw.Reader.Peek(4)
        if err != nil {
            return
        }
        if conn.sshproxy && string(sneak) == "SSH-" {
            sshconn, err := net.Dial("tcp", "127.0.0.1:22")
            sneak, _ = rw.Reader.Peek(rw.Reader.Buffered())
            sshconn.Write(sneak)
            c := make(chan net.Conn)
            go copyuntildone(netconn, sshconn, c)
            go copyuntildone(sshconn, netconn, c)
            closewhendone(c)
            return
        }
        req, err := http.ReadRequest(rw.Reader)

From there, it’s a simple matter of copying data from one socket to the other.

On the client side, this requires a simple proxy command to connect via TLS first.

ProxyCommand nc -c %h 443
Posted 17 May 2019 17:32 by tedu Updated: 17 May 2019 17:32
Tagged: openbsd software web

viewport and iphone reflow

Something that’s annoyed me for some years is that all the web sites I build don’t work quite right with my iphone. Scroll down a page, visit a link, go back, and safari jumps back to the top of the page. Very annoying. Pretty much no other site I visit seems to have this problem, yet I couldn’t figure out what I was doing wrong since I’m barely doing anything at all. There are some support forum complaints about similar bugs, but mostly from several years ago, and mostly “solved: it works now” without explanation.

Finally, figured out what seems to be the problem. The iphone introduces its own viewport meta tag, to define the screen dimensions, and control whether the user can zoom or not. A lot of sites abuse this to the point of unusability, so I very determinedly stayed clear. But without a viewport tag, safari is really dumb.

Without a viewport setting safari picks some defaults and renders the page to fit. They seem fine to me. The problem is that after leaving a page and coming back, safari has forgotten what size it picked, picks again, and then has to reflow all the page content. Even though it has picked exactly the same dimensions as the previous render. With the result that it forgets its scroll position and resets to the top of the page. Sigh. At least that’s what I’ve determined is going on.

So I finally broke down and added a viewport tag to the header. This required futzing with the CSS some more because now it rendered to a much smaller virtual canvas, but generally solvable.

Anyway, this frustrated me for a long time, I couldn’t find any useful information about it, and now it seems to work.

Posted 19 Apr 2019 17:27 by tedu Updated: 22 Apr 2019 18:55
Tagged: web

the png that squished really big

I posted a tiny png, a mastodon stepped on it, and... it got really big.

more...

Posted 16 Apr 2019 17:33 by tedu Updated: 16 Apr 2019 17:34
Tagged: software web

honk 0.1

honk is my take on a federated status updater. One might say it’s opinionated software. Since my opinions are correct, this makes honk the world’s first provably correct social media application. Here’s a formerly brief rundown of things that work, things that don’t work, and things that won’t work. Plus some complaints about how other people do things. The version number, 0.1, indicates your expected level of satisfaction.

more...

Posted 09 Apr 2019 12:36 by tedu Updated: 17 Apr 2019 00:58
Tagged: project software web

github ui

I’ve been paying a bit more attention than usual to web interfaces, and there’s a few examples which really get to me. GitHub is one that’s annoyed me for a while, but I didn’t quite know what was wrong until I looked at some screenshots to see what was frustrating me.

more...

Posted 13 Feb 2019 23:08 by tedu Updated: 14 Feb 2019 17:39
Tagged: rants web

but what about screen readers

But what about screen readers, you ask. Somebody did a web thing you don’t like. Doesn’t this break screen readers?

It seems the easy way to find out would be to test. But that requires caring about screen reader usability enough to actually have one on hand to test. Much easier to wag fingers. Screen readers are the starving children of web accessibility arguments. Why don’t you care about the starving children?

It’s borrowing somebody else’s concerns to score internet points. Oh, hi, I just wanted to try this on and post a few comments, you can have it back now. Thanks. I wouldn’t want to have to think about this all the time.

Posted 08 Feb 2019 18:02 by tedu Updated: 08 Feb 2019 18:02
Tagged: rants web

newspaper graphics

Sometimes there’s just too many words and I want to look at visualizations and graphics. A collection of links.

The Information is Beautiful Awards are a good place to start. Entry Showcase. 2017 winners. 2018 winners.

Bloomberg Graphics is a nice collection. Or follow @BBGVisualData.

The Economist Graphic detail is a nice collection.

The Financial Times Graphics is a nice collection.

The Wall Street Journal Graphics is a nice collection . Or follow @wsjgraphics. 2017 Year in Graphics. 2018 Year in Graphics.

The Chicago Sun-Times Graphics collection doesn’t see many updates.

The Los Angeles Times Graphics collection doesn’t see many updates.

The Chicago Tribune doesn’t seem to have a dedicated page. Or follow @ChiTribGraphics.

The New York Times has a multimedia section, but it’s still photos. Or follow @nytgraphics. 2017 Year in Graphics. (2018?)

The Washington Post also seems to lack a dedicated page. Or follow @PostGraphics. 2017 Year in Graphics. 2018 Best Graphics.

Posted 19 Dec 2018 00:20 by tedu Updated: 24 Dec 2018 04:48
Tagged: links web

tell your kids about css overflow-wrap

You have a blog. You write stuff. This is all good.

But it’s a technical blog. And so you write articles that include code or URLs or auth tokens or hex coded hashes or other horrors like AbstractImplementationOfBorrowCheckerFactoryPatternMatcher which results in words of unusual size. And this being important technical content, it’s styled as whitespace preserving per the fashion of our times.

This is problematic on narrower screens because those great big long words completely blow out your page width, with the resulting effect that the main content is a tiny sliver running down the side of the screen. You’ve gone to the trouble of picking a responsive layout because you want to be mobile friendly, but your selected styles respond to such content rather poorly.

There is an easy fix. Or two.

The CSS white-space property has a value called pre-wrap which in many cases is probably better than plain pre. Long code lines will wrap, so it doesn’t really look like code anymore, but hey, I’m reading this on a phone, not compiling it.

The CSS overflow-wrap property (previously word-wrap) has a value called break-word which will split up not just lines, but long words too.

There are other possible values as well, to suit your preference, but I’d be willing to bet most people (or their readers) would be happier with values other than the ones they are using (probably the defaults). Sacrificing a small amount of technical fidelity can greatly improve the readability of the prose, and with no negative effect on desktop viewers.

Posted 08 Nov 2018 19:28 by tedu Updated: 08 Nov 2018 19:28
Tagged: web

zeno scrolling

Zeno scrolling requires javascript.

Everybody loves infinite scrolling.

Which is to say everybody hates it, but we love to use it anyway.

There’s just one problem. Infinite scrolling requires infinite data.

What if we don’t have that much content? Or what if we are old school enough to still care about bandwidth?

I have just the thing. Zeno scrolling. Infinite scrolling with finite data.

You read half the content. You’re going to read the second half of the content next.

But now the content is bigger. You scroll some more. The content gets bigger again.

In order to get to the second half you have to get past the first half.

It may be a little annoying to the user never reaching the end. But that’s no different than before, right?

On the plus side, as a site operator, I can make more economical use of my limited content.

Progress is an illusion.

There is no Zuul, only Zeno.

<script>
var scroller = document.scrollingElement
var el = document.getElementsByClassName("post")[0]
var lh = 1
var fs = 2
var scrollit
function fixer() {
        var h = scroller.scrollHeight
        scroller.scrollTop = h * 0.4
        setTimeout(scrollit, 1000)
}
scrollit =  function() {
        var h = scroller.scrollHeight
        var t = scroller.scrollTop
        var p = t / h
        var r = scroller.scrollHeight / scroller.clientHeight
        var adjust = p > 0.5 || r < 2
        var withfix = p > 0.5
        if (adjust) {
                console.log("adjusting")
                fs *= 1.5
                el.style.fontSize = fs + "em"
                lh *= 1.5
                el.style.lineHeight = lh + "em"
        }
        if (withfix) {
                setTimeout(fixer, 1)
        } else {
                setTimeout(scrollit, 1000)
        }
}
el.style.fontSize = fs + "em"
el.style.lineHeight = lh + "em"
setTimeout(scrollit, 1)
</script>
Posted 01 Nov 2018 18:52 by tedu Updated: 01 Nov 2018 18:52
Tagged: web

miniwebproxy

Imagine, if you can, a smaller version of the web. A web without dickbars, or scroll jacking, or chum boxes, or popup video, but still a web filled with informative articles about the 27 blockchains you need to be using right now. The good news is this web exists, but unfortunately your browser doesn’t connect to it by default. For that, you need the miniwebproxy.

more...

Posted 24 Oct 2017 13:16 by tedu Updated: 24 Oct 2017 13:16
Tagged: go programming project web