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

339 Bytes of Responsive CSS

blog.koley.in

Post reply on HN
Print view View original

81–90 of 101 posts

Re: 339 Bytes of Responsive CSS

#81

Post by nailer »

notahacker wrote: post #57
nailer wrote: post #48

Earlier quoted context omitted.

> It becomes hard when you need a grid CSS includes a grid. It works in every current browser.

Sure, but that's only easy if you choose to ignore the 1 in 10 users that it doesn't work for, which is too many for most real world use cases, especially for something as fundamental as the layout of the page.

Those 1 in 10 users don't provide enough revenue to warrant doubling our front end budget to support every polyfill, every workaround for every non-polyfillable thing, and the vast quantities of extra support they require.

If they do in your case, though, I understand.

Re: 339 Bytes of Responsive CSS

#82

Post by zichy »

1. Please do not import external resources from Google Fonts if you don’t have to. (Hint: You never really have to.)

2. If you want to use as little CSS as possible, simply use `sans-serif`. Otherwise try this font stack: http://markdotto.com/2018/02/07/github-system-fonts/

2. Fira Sans is actually quite nice, but please do not use `font-weight`s below `400` for continuous text. That’s really hard to read.

3. Since only the `300` weight is imported, the entire text will be thin – even headlines and `strong`.

4. Please leave the link text underlines for accessibility: https://webaim.org/techniques/hypertext/link_text#underlinin...

bettermotherfuckingwebsite.com did a better job.

Re: 339 Bytes of Responsive CSS

#83

Post by tasuki »

boomlinde wrote: post #26

339 bytes which load an additional 241 bytes of CSS to load a 53k custom font... What is the point people are trying to make with titles like this? It's like claiming "50 bytes to make a website" after you figure out that you can just iframe Google.

The less code you write the less you have to maintain.

Or at least that's how I understood this. Not attempting to save the few kb of network traffic, rather trying to reduce the complexity and the amount of code one has to maintain in the future.

Re: 339 Bytes of Responsive CSS

#84

Post by ChrisGranger »

DanBC wrote: post #76
mort96 wrote: post #34

Earlier quoted context omitted.

It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason. I…

Fira looks fucking terrible. Light weight, small, skinny, sans-serif is hard to read for most of the population. It might be okay for 20 years olds with great monitors. It's tedious for everyone else.

I agree completely regarding light weight fonts. Wikipedia recently changed their mobile view font to Segoe UI Light for body text, and my old eyes can barely read the damn thing.

Re: 339 Bytes of Responsive CSS

#85

Post by stupidthrottle »

moreira wrote: post #63
mort96 wrote: post #34

Earlier quoted context omitted.

It's 339 bytes of CSS which loads 2.3k of font css which loads 21k of woff2. 23k requiring two round trips (three if the stylesheet is in a separate file, four including the initial HTML load), and to prevent FOUT, the browser won't show any text at all until all the round trips are completed (or it decides it's taking too long and shows the wrong font). Plus you're adding a dependency on Google for no good reason. I…

Bear in mind, the parent is talking about the page where this article is posted, not the CSS itself or the font.

As an end-user... why should I care if the bloat I download is CSS, or assets pulled via the CSS?

There’s literally no distinction.

Re: 339 Bytes of Responsive CSS

#86

Post by kstenerud »

arkokoley wrote: post #44
andrepd wrote: post #43

Why such thin grey text? Why sacrifice readability as a matter of principle? What's wrong with black on white, like a regular f*cking book or newspaper?

Because paper is paper and screens are different. The white paper is slightly on the grey side compared to white on screen. And that hurts to look at for long. Thin text is a personal preference that I made here. No principles there.

It becomes an accessibility problem, because the contrast is too low, and not all eyeballs are the same. Low contrast combined with a thin font makes it very difficult to read.

Re: 339 Bytes of Responsive CSS

#87

Post by moreira »

stupidthrottle wrote: post #85
moreira wrote: post #63

Earlier quoted context omitted.

Bear in mind, the parent is talking about the page where this article is posted, not the CSS itself or the font.

As an end-user... why should I care if the bloat I download is CSS, or assets pulled via the CSS? There’s literally no distinction.

We're talking about different pages - one is the page with the blog post about this 339 bytes of responsive CSS (it's 2+MB). The other is the demo page with 339 bytes of CSS + the web font. The former is what the parent was talking about.

Re: 339 Bytes of Responsive CSS

#88

Post by rchaud »

jypepin wrote: post #41
new_here wrote: post #25

All this CSS minimalism reminds me of Dan Luu's post about Web Bloat: https://danluu.com/web-bloat/ His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.

a lot of people would argue that his website is very hard to read

That website looks like a professor's hand-coded attempt at a course website for his Combinatorics class.

The text layout alone could have been lifted straight from any academic journal, aka the densest, least readable typographic style.

Re: 339 Bytes of Responsive CSS

#89

Post by rchaud »

fastbeef wrote: post #9
Cthulhu_ wrote: post #4

A nonoffensive version of "better motherfucking website"?

Ughn, I really thought that this rah-rah pseudo-masculine tough guy aesthetic was something we've collectively moved on from?

It was funny the first time, but the gimmick was run straight into the ground with all the followup versions that tried to double down on the writing style.

Same will happen with this. Yesterday it was 55 bytes of CSS or whatever, today it's 339, pretty soon people will be creating "Responsive CSS in 69 lines LOL GEDDIT" and the cycle will begin anew.

Re: 339 Bytes of Responsive CSS

#90

Post by rchaud »

davidhyde wrote: post #79

Is CSS considered responsive if there are no CSS media queries? I didn't see any media queries in the authors css script.

It's "responsive" in the way a single column of content can be responsive. Really the only gain was that a max-width property was set, so content won't stretch to the edges of your desktop display.
Post reply on HN