How I built a responsive and semantic “Contact Me” page in under 16KB | Hacker News Reader

How I built a responsive and semantic “Contact Me” page in under 16KB

shkspr.mobi

60 pointsedent38 comments

>Depending on your hardware, the entire page should load and render in under 3 seconds.

And this is an achievement?

There must be some kind of law, like Guido's law or something, that the more hardware improves, the slower and worse software becomes, so that due to poor software, one ends up with exactly the same speed as one had in the 1980s.

I think it's "Andy [Grove] gives, Bill [Gates] takes away"

AFAIK, something similar applies to road infrastructure, at least sometimes: There are rush hour traffic jams on the highway so the government adds lanes. As a result, more people move homes and offices to locations near the highway and the traffic delays remain the same.

Perhaps it tells us something about what users really want: More (functionality on websites / homes in the suburbs) as long as it doesn't increase latency beyond (3 seconds / 45 minutes).

One reason: the hardware has "improved" in ways that are not directly helpful for software. Executing CPU instructions more quickly doesn't help if you can't improve memory speed. Having more cores doesn't help if you can't utilize them efficiently in your problem.

But I agree with the meat of your point: modern software sucks and is getting worse.

He should probably be more specific about what devices and conditions he's tested with. It loads for me in a fraction of a second in any web browser on a 2013 Macbook Pro Retina. So it's not that bad.

It loads in way under that time on a OnePlus 3 over LTE, and most of the time is spent connecting, from what I can see.

That's probably referring to the time it takes to download 16KB on a 56Kb connection (about 2 seconds plus latency).

This is a demonstration that messaging is really screwed up. It's like email in the 1980s, when people had MCIMail addresses, Usenet addresses, ARPAnet addresses, CompuServ addresses, X.400 addresses, and maybe a cable address. People put all of those on their business cards.

Somebody needs to gateway messaging, whether the vendors like it or not.

> Usenet addresses

Sorry to detract from your main point with minor nitpicking, but I don't think there were ever usenet addresses. Usenet used people's email addresses.

UUCP addresses:

    decwrl!kremvax!yeltsin

UUCP was also used as transport for Usenet.

Great idea! I'll just leave this here: https://xkcd.com/927/

https://xkcd.com/1810/

One day, XKCD will become Turing-complete.

They did. It was called Trillian IM. Let you talk to people on many networks. Those networks started obfuscating where possible. The asymmetry of between reverse engineering and developing gave IM vendors an advantage. They collectively also had more developers. The result was lowest, common denominator experience with plenty breakage at times.

Most users voted against it by using competing offerings. Anyone doing this kind of thing needs a lot of labor. May be willing to operate at financial loss.

I remember when AOL kept trying to lock 3rd-party clients out of their Oscar protocol (for AOL IM). They resorted to requesting random chunks of the official AOL IM binary to verify that it was an official client. To keep up with this, 3rd party clients would have to distribute AOL's client with theirs, and then AOL could sue them for unauthorized distribution.

Oh yeah, I forgot all about that! Thanks for reminder. It was both ingenious and really screwed up.

Just for fun, I was able to get your contact page down to 75 bytes. It is now an inline HTML 5 element you can include on any page, for example in the footer. It is semantic, responsive, cross-platform and mobile optimized, and plays well with screen readers. It can be served with a single http request and can be included statically by any web server. It should be served and render in 0.001 seconds plus the single http request latency. Try it:

   <a href="mailto:contact@shkspr.mobi?Subject=web%20contact">Send me mail</a>

Exactly. Chasing this illusive "ultimate design" is a rainbow whose end forever is just out of reach.

Most importantly, when all the flashy crap stops working, it needs to remain useable. A large percentage of the world still runs XP, with speeds less than dial up.

This site has a small file size and doesn't use JavaScript - then requires manipulation of complex SVGs? 3 seconds to load? Doesn't work properly in IE8? It's a nice site, but ultimately it's for modern devices only.

I can't say I'm understanding why you got downvoted. A <=16KB contact page shouldn't be something to brag about--it should be pretty standard.

Sure, this page has some extra bells and whistles to look like a phone (very original), but the design is quite amateurish to be frank. Either make it simple and fast, or truly beautiful and unique.

They are getting downvoted because they are snarky + dismissive, the ol HN combo.

Here's the page: https://edent.tel

Their snark doesn't even make sense. They probably didn't even click in to the blog post. It's more than an email address.

You wouldn't make that page personally? Ok. Nobody asked. But don't shoot someone down who's trying to have a little creative fun in life. Other commenters already beat you to it.

Totally hilarious. Exaaaaactly.

O.M.G.... 25 ways to reach someone, and no one is home. What is wrong with folks? Is this guy desperate for contact? And yet, is there an actual contact form on that mess of icons? What are even half those networks?

This guy must drink a lot of coffee (I didn't check out his Amazon Wishlist... one of his icons).

Seriously, can I just send the guy an email? Nope... I still have to decide between work and personal.

I could reach the President of the USA with greater ease.

And how he thinks 16kb is an achievement is beyond me. That's 16,000 bytes roughly... of nonsense.

Heck, if you really want to save even more bytes. Just put an email only (no HTML). The spammers will still figure it out and the rest of us and can do some cutting-and-pasting to help our caloric offsets after reading through that pile of self-promoting krap.

Interesting site. One thing I'm confused about, is why PHP? The content is essentially static, of at least infrequently updated. It seems like a waste of processing resources, even with caching, to repeatedly re-process the page in an interpreter. Why not just generate the static content, or even roll it by hand?

Maybe he's using a front-end cache like Varnish which is effectively generated static content held in memory.

    All CSS and Images are inline - that reduces the number of requests which need
    to be made to the server.

    They are so small, web browsers spend longer connecting to the server than the
    time taken to download them. So I placed them inline to the HTML - that saved
    a heap of downloading and rendering time.

I'm curious how it would compare to an alternative solution that does not inline anything, but instead relies on HTTP/2 and/or HTTP/2 server push [1]. Go recently added support for the latter in Go 1.8 [2].

[1] https://en.wikipedia.org/wiki/HTTP/2_Server_Push

[2] https://golang.org/doc/go1.8#h2push

I'd imagine it'd be faster since multiple cores can be used for requests.

Before http/2 multiple static asset domains were used to allow for parallel downloads.

You are downloading the same amount of stuff either way.

I was looking at the source, and came across this URL:

  https://gmpg.org/xfn/11

the HTTPS cert isn't signed correctly, and if you accept it, you just get a 404. I decided to see what https://gmpg.org is, and (to my surprise) was presented with a login page for RBC.

Looks like all of the pages work over non-secure HTTP, though. Looks like they got hacked?

Maybe some sort of malicious redirect?

From wget:

  WARNING: cannot verify gmpg.org's certificate, issued by ‘CN=online.rbcaccessverifcation.fotomateo.com’:
    Self-signed certificate encountered.

I followed the same chain of logic as you; certainly looks like gmpg.org has been compromised. The entire root domain that the cert is signed for (fotomateo.com) is on Chrome's phishing block list too.

Odds are that gmpg.org never set up https for themselves. Someone hacked their web server and installed a new Apache instance or VirtualHost config for port 443 without them having noticed.

In any case, no danger in loading the OP's article.

Slightly off topic - Is it still a concern in 2017 that spammers will get hold of email addresses which are displayed publicly on the internet? Is it worth the effort to put stuff like this behind a form with captcha and all?

>> Slightly off topic - Is it still a concern in 2017 that spammers will get hold of email addresses which are displayed publicly on the internet?

Depends what email provider you're using. But most modern email providers (Gmail, Yahoo, AOL) are so good at spam filtering it makes no difference. We run a high traffic website (1 million visitors / month +) and have posted Gmail-hosted addresses directly on webpages and had nothing hit the inbox but legitimate mail.

>> Is it worth the effort to put stuff like this behind a form with captcha and all?

Contact forms are still worth CAPTCHA'ing, because you will get bots that fill out these forms, and because the email is coming from your website's address, your email provider will not block it. We forgot to protect a contact form behind CAPTCHA recently, and the employee whose inbox it passed messages to drowned in SEO spam link emails until we fixed it, from bots filling out the form that thought they were filling out a website comments box.

1987: "Hey guys look at my 16k C64 demo"

2017: this

Ah, yes. I like looking at a rendered iphone inside of my Android phone.

jeez, so much criticism. if it's not your cup of tea then move on.

There was a competition last year for making websites under 10kb. In my opinion there are some truly amazing entries: https://a-k-apart.com/

About the OP, take into account that repeated markup sum up to little more than just 1 when gzipped; and any non-svg image is going to eat your quota REALLY fast.

It's impressive what you can achieve in under 16kB:

    https://www.youtube.com/watch?v=ZaVo-OffZD8

Nowhere near as impressive as a demo, but I made a little visual novel thing fit in 10KB.

http://nagato.ezhik.me/

For the love of God get rid of the glowy text.

Reply on news.ycombinator.com