Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Build a Low-Tech Website

solar.lowtechmagazine.com

Post reply on HN
Print view View original

111–120 of 188 posts

Re: How to Build a Low-Tech Website

#111

Post by vanderZwan »

juliangoldsmith wrote: post #3
powellzer wrote: post #2

From clicking around this site, it looks like their image dithering technique has taken away the color quality required to properly view the graphs on this article: https://solar.lowtechmagazine.com/2015/10/the-4g-mobile-inte...

I'm not convinced it saves much in the way of bandwidth, either. If you take this[0] image, it's 43 KB for a 800x533 image. I'd expect a JPEG to be able to do that without too much in the way of artifacts. It does give the page a kind of neat newspapery vibe, though. [0]: https://solar.lowtechmagazine.com/dithers/sps_wide.png

If you look at the non-solarpowered website, it turns out that TypeKit is serving a 830,8 KiB fullcolour PNG file. AAARGH. No wonder that they think they need to use dithering and such if that is their baseline.

I tried testing some variants and made a static HTML gallery on neocieties[1]. TL;DR:

- cleaning up the photo before filtering it makes a huge difference in image quality and compression.

- quality 80 JPG is 86,6KiB in color, 70,9Kib in grayscale.

- quality 40 (which is ugly but still has readable text) uses 44,8KiB and 37,8Kib respectively. The latter looks a lot better than the dithered image IMO.

- similarly, the grayscale PNG with pushed shadows and positioned dithering has readable text and contains significantly more detail at 4 colors and 38,7KiB than the 16-color 42,4KiB image on their server.

[0] http://www.lowtechmagazine.com/2018/09/how-to-build-a-lowtec...

[1] https://blindedcyclops.neocities.org/low-tech-image-tests/ga...

Re: How to Build a Low-Tech Website

#112

Post by vanderZwan »

protonfish wrote: post #91
juliangoldsmith wrote: post #3

Earlier quoted context omitted.

I'm not convinced it saves much in the way of bandwidth, either. If you take this[0] image, it's 43 KB for a 800x533 image. I'd expect a JPEG to be able to do that without too much in the way of artifacts. It does give the page a kind of neat newspapery vibe, though. [0]: https://solar.lowtechmagazine.com/dithers/sps_wide.png

Even if it did save bandwidth, that does not equal significant energy savings. And if it did, there are better ways to save. For example, looking at their response headers I see the image cache control expires after a day, plus has validation caching. This could be significantly improved. First, get rid of the `etag`, `expires`, and `last-modified` headers and go with expiration caching only. Increase the `max-age` f…

> First, get rid of the `etag`, `expires`, and `last-modified` headers and go with expiration caching only. Increase the `max-age` from one day (86400) to one year (31536000).

Since it's a statically generated website, I'd favor never expiring the cache, and using cache-busting hashes instead. That way the cache is only emptied when the file actually changes.

Re: How to Build a Low-Tech Website

#113

Post by trqx »

azdle wrote: post #44
trqx wrote: post #19

I hope they fix the RSS feed and put the whole articles in there. It should be the norm, especially on a website with "low" uptime.

https://solar.lowtechmagazine.com/feeds/all.atom.xml ^ seems to have full articles.

I mean article content, not just the first line or the title. This way articles are cached in case of downtime.

Re: How to Build a Low-Tech Website

#115

Post by avhon1 »

azdle wrote: post #44
trqx wrote: post #19

I hope they fix the RSS feed and put the whole articles in there. It should be the norm, especially on a website with "low" uptime.

https://solar.lowtechmagazine.com/feeds/all.atom.xml ^ seems to have full articles.

Seems to have links to, and 1-sentence descriptions of, all of their articles.

This isn't very useful if you want your RSS reader to pull down articles for you to read while you're offline. For that to work, you want the feed itself to have the full text of every article embedded inside it.

Re: How to Build a Low-Tech Website

#116

Post by acheron »

seddin wrote: post #102
jtms wrote: post #81

I am going to guess they are getting a massive surge of traffic about now and yet the site still renders in a fraction of the time it takes most "modern" web apps or even just static content sites - this is how it should be.

A trillion npm packages will for sure add a couple seconds of delay to your website loading speed.

Hey, when you need to pad a string, what else are you supposed to do?

Re: How to Build a Low-Tech Website

#117

Post by wincy »

romaniv wrote: post #100
jtms wrote: post #81

I am going to guess they are getting a massive surge of traffic about now and yet the site still renders in a fraction of the time it takes most "modern" web apps or even just static content sites - this is how it should be.

Honestly, I'm not even sure what modern website are doing when they generate pages. I've had highly dynamic PHP/MySQL websites running on crap hardware, and it was trivial to attain .03 second page generation time. Didn't even need fancy caching, just some common-sense SQL optimizations.

At my last job we had an ad bidding API that would reach out to every advertiser we worked with, got the highest bid, then presented an advertisement to them.

The page was also framework after framework piled on top of each other, so they’d be using React and jQuery at the same time, stuff like that. And so marketing could change whatever they wanted whenever they wanted without breaking the entire site, everything was served from a CMS.

So it’s probably a lot of that.

Re: How to Build a Low-Tech Website

#118

Post by slater »

toss1 wrote: post #109
slater wrote: post #84

Earlier quoted context omitted.

https://the5k.org/about.php :)

Thanks, nice! Seems I'd misremembered it as being more recent than in was, last one in 2002. They apparently 'grew' to 10K, and that site is now 404 also. At this point, 50K would be a welcome respite from the mountains of cruft that download with every click...

Preach!

Re: How to Build a Low-Tech Website

#119

Post by vanderZwan »

markatkinson wrote: post #24
decasia wrote: post #10

Neat article, but I think we should distinguish basically two things here that the article blurs together: 1) Reducing website bandwidth and computational usage (static sites, small images, reducing extra resource requests). Super common topic that HN talks about all the time. 2) Reducing the electricity bill for the server and powering it with renewable resources. This part is quite neat, I think, but for a single b…

On topic 1 I was thinking to myself the other day, "I wonder if I can create a static webpage that isn't some sort of SPA or web app." It took me time to work out where to start... Once you think it through you realise it is pretty easy and obvious. But (and this gives away my age a bit), I have not built a static webpage since school (over 10 years ago), and have become so accustomed to all the crazy shit that goes…

> It took me time to work out where to start...

Neocities? It's where I occasionally dump my static-can't-be-bothered sketches.

http://neocities.org/

Re: How to Build a Low-Tech Website

#120

Post by vanderZwan »

forgotpwd16 wrote: post #55

Some cool concepts there. >Static Site This should be an obvious choice for sites not requiring dynamic elements. Also their choice of comments through email is a good solution to a problem static-made blogs have. >Dithered Images That won't work for every case, but is interesting. >Default typeface That's nice. I'm already disallowing sites to choose their own typeface. Except if a site is about design, then the typ…

> This should be an obvious choice for sites not requiring dynamic elements. Also their choice of comments through email is a good solution to a problem static-made blogs have.

This is one I find interesting. I doubt they want to manually go through every email. So some semi-automation sounds sensible too. What would be an elegant solution to that?

Post reply on HN