
How I built a responsive and semantic “Contact Me” page in under 16KB - edent
https://shkspr.mobi/blog/2017/04/how-i-built-a-responsive-semantic-contact-me-page-in-under-16kb/
======
aisofteng
>Depending on your hardware, the entire page should load and render in under 3
seconds.

And this is an achievement?

~~~
Safety1stClyde
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.

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

------
Animats
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.

~~~
nickpsecurity
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.

~~~
pyre
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.

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

------
logicallee
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>

~~~
fiblye
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.

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

Here's the page: [https://edent.tel](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.

------
Twirrim
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?

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

------
shurcooL

        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](https://en.wikipedia.org/wiki/HTTP/2_Server_Push)

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

~~~
chrischen
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.

~~~
iainmerrick
You are downloading the same amount of stuff either way.

------
pyre
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](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.

~~~
developer2
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.

------
siddhant
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?

~~~
throwaway7312
>> 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.

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

2017: this

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

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

------
franciscop
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/](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.

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

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

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

[http://nagato.ezhik.me/](http://nagato.ezhik.me/)

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

