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

Microfeatures I love in blogs and personal websites

danilafe.com

Post reply on HN
Print view View original

431–440 of 444 posts

Re: Microfeatures I love in blogs and personal websites

#431

Post by alwillis »

gwern wrote: post #428
alwillis wrote: post #420

Earlier quoted context omitted.

The site design and content are great; the execution, not so much. I only investigated because someone in the thread mentioned they had a bad experience on a smartphone; now I know why. Each font is another HTTPS request to the server; doesn't matter if they're subsetted or not. However, the combination of all the JavaScript and the multiple CSS files creates a total blocking time [1] of 5266 ms according to WebPageT…

> The site design and content are great; the execution, not so much. As I mentioned, I think it would be helpful to link an example (even just one) of a website you think is executed correctly and does similar things but much better. > the multiple CSS files creates a total blocking time [1] of 5266 ms according to WebPageTest...The page is blocked from rendering for over 5 seconds due to all of the crap he's downloa…

> Whatever Pagespeed or Lighthouse might say, we haven't found minification to be a big benefit when we turn it on.

Minify CSS Potential savings of 20 KiB Minify JavaScript Potential savings of 82 KiB

The benefit is less data going over the wire. I get it--100 KiB doesn't sound like much these days, especially given the page weight of almost 800 KiB. But it's still an extra 100 KiB that doesn't need to be transferred and it adds up over time.

If you minimized your code and did a few more optimizations, you're talking about a more significant amount of data you could be saving your viewers.

> Sometimes you need to be specific. You don't establish that that CSS is unnecessary to achieve the goal.

That selector and the many others like it is a sign of poor CSS architecture. If your design results in you having to be that specific, it means you're doing something wrong.

It's a classic case of fighting the cascade instead of having it work for you. If there was an architecture (like ITCSS or OOCSS for example) [1], you wouldn't need to write such a deeply nested selector in the first place and the dozens more just like it.

Creating reusable components in CSS would reduce the amount of code dramatically and make it much easier to maintain.

[1]: https://www.xfive.co/blog/itcss-scalable-maintainable-css-ar...

[2]: https://www.slideshare.net/slideshow/our-best-practices-are-...

[3]: https://csshell.dev/posts/overspecified-specificity/

Re: Microfeatures I love in blogs and personal websites

#432

Post by gwern »

alwillis wrote: post #431
gwern wrote: post #428

Earlier quoted context omitted.

> The site design and content are great; the execution, not so much. As I mentioned, I think it would be helpful to link an example (even just one) of a website you think is executed correctly and does similar things but much better. > the multiple CSS files creates a total blocking time [1] of 5266 ms according to WebPageTest...The page is blocked from rendering for over 5 seconds due to all of the crap he's downloa…

> Whatever Pagespeed or Lighthouse might say, we haven't found minification to be a big benefit when we turn it on. Minify CSS Potential savings of 20 KiB Minify JavaScript Potential savings of 82 KiB The benefit is less data going over the wire. I get it--100 KiB doesn't sound like much these days, especially given the page weight of almost 800 KiB. But it's still an extra 100 KiB that doesn't need to be transferred…

> The benefit is less data going over the wire. I get it--100 KiB doesn't sound like much these days, especially given the page weight of almost 800 KiB. But it's still an extra 100 KiB that doesn't need to be transferred and it adds up over time.

How much does that save, after the Brotli compression, and how much does it contribute to your supposed TTB? And why would it affect the page performance once loaded? And how does your alternate of CSS grids change that? If it is responsive, it is still going to have to define a bunch of CSS to explain what the layout is and how it changes.

> If your design results in you having to be that specific, it means you're doing something wrong.

Does it really? You keep making these assertions like 'you're using fake smallcaps' and then not backing them or explaining them, or giving any examples whatsoever of a site doing it right.

Re: Microfeatures I love in blogs and personal websites

#433

Post by gwern »

alwillis wrote: post #430
gwern wrote: post #428

Earlier quoted context omitted.

> The site design and content are great; the execution, not so much. As I mentioned, I think it would be helpful to link an example (even just one) of a website you think is executed correctly and does similar things but much better. > the multiple CSS files creates a total blocking time [1] of 5266 ms according to WebPageTest...The page is blocked from rendering for over 5 seconds due to all of the crap he's downloa…

> Uh, no? There are reasons that user-agent sniffing is highly deprecated. I never mentioned user-agent sniffing nor would I ever recommend this outdated technique. Using media queries for responsive design became a thing in 2010 with Ethan Marcotte's seminal article "Responsive Web Design" [1]. In the intervening 14 years, we have much better ways of adapting to different screen sizes. In fact, using CSS Grid for la…

This seems to be a bait-and-switch argument. I can't see how any grid feature can handle all of the media-query things you highlighted as wasteful bloat like "the drop caps and the other flourishes". How does that handle dropcaps, sidenotes & margin-notes, popups vs popovers, utility classes like disabling on mobile vs desktop, the different styling of the header, plus all of the small adjusts like fonts or line-heights or justification...?

Nothing in your first link addresses that, and this grid approach sounds limited to just moving a few blocks around to be a rectangle instead of a square or something. (Like, I am looking at random moments in these 5 hours of videos, and it all seems to be like that, like "What do CSS features like CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes mean for our design medium"? Well, for Gwern.net - they mean little. Most of the media queries have nothing to do with putting something into various kinds of grids...)

How is this is a general replacement for media-queries - as opposed to a minor technique good for rearranging some carousels or some columns?

Again, I think you would benefit from being specific. How, exactly, does CSS Grid free us from media queries and breakpoints for the things we use media queries & breakpoints for, like dropcaps or switching between popups & popovers? And what is an example of a site which uses just CSS Grid for all this and avoids downloading all that crap as you desire?

Re: Microfeatures I love in blogs and personal websites

#434

Post by aidenn0 »

account42 wrote: post #401
aidenn0 wrote: post #347

Earlier quoted context omitted.

> Subscribe to the blog's RSS feed? Which has the 10 or 20 most recent posts, but not the post from 12 years ago. If it's a wordpress blog, you can use pagination tricks to get older posts, but, AFAIK, there's no standard way to say "Give me all of the posts" when fetching the RSS feed.

It is possible for feeds to support pagination and archives in a standardized manner: https://www.rfc-editor.org/rfc/rfc5005#section-3 Not very common though in my experience.

I sampled a few of my RSS feeds. Exactly zero of them implement this.

Re: Microfeatures I love in blogs and personal websites

#435

Post by brokenmachine »

bayindirh wrote: post #424
brokenmachine wrote: post #422

Earlier quoted context omitted.

Respectfully disagree. I absolutely hate disappearing scrollbars.

I respect your view. This why we (should) have options. For example, Safari doesn't auto-show scrollbars like Firefox does, and it hinders its usability a lot, if you ask me.

The user agent should work for the user.

So we should be able to easily choose whatever default we want.

Re: Microfeatures I love in blogs and personal websites

#436

Post by adiabatty »

082349872349872 wrote: post #267
dspillett wrote: post #187

> One immediate thought is that this is completely superseded by the regular browser scroll bar that’s ever-present at the side of the page. This is unfortunately too often not the case, as people see fit to hide the default scrollbar and have something of their own that doesn't always show or is barely obvious. Though I agree with ToCs and showing progress that way, for pages long enough to make it useful rather tha…

> > Grouping Series of Posts > Yes, though I might argue that such links, or a link to a ToC page for the group, belong in a more general list of related links. Indeed, in the salad days of HTML there was some way to put related page-links in the , and Sir Tim's browser displayed UI that enabled navigation via them. Unfortunately that feature was already lost by the mid-1990s.

Seamonkey and I think Firefox, as late as the early 2000s, would expose some of those like next (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...>), but roughly nobody used them (either writing or reading) and so they got dropped or shoved off into a plugin.

Re: Microfeatures I love in blogs and personal websites

#437

Post by elric »

brokenmachine wrote: post #435
bayindirh wrote: post #424

Earlier quoted context omitted.

I respect your view. This why we (should) have options. For example, Safari doesn't auto-show scrollbars like Firefox does, and it hinders its usability a lot, if you ask me.

The user agent should work for the user. So we should be able to easily choose whatever default we want.

The user agent hasn't worked users in quite a while now. They've become optimized to work for the website owner. Scrollbar behaviour is one example of this, but so are user-hostile input fields (e.g. not being able to paste email addresses in email confirmation fields, not being able to paste passwords, autocomplete being disabled for some fields and being unable to override it, etc).

At this point, I would pay good money for an actual user agent that is worthy of the name.

I wrote a rant about this on my blog last month. https://blog.melnib.one/2024/05/19/death-of-the-user-agent/

Re: Microfeatures I love in blogs and personal websites

#438

Post by fluffery »

fanf2 wrote: post #167

Many of these suggestions are good. (I should make my subheds clickable!) But a couple of them, oh dear… I really hate progress bars, they are incredibly distracting. One of the worst examples of front end programmers wasting their time reimplementing browser functions badly. I already have scroll bars! I do not need more scroll bars! Also, link decoration: my browser already has a nice discreet indicator to tell me…

I know my website doesn't need progress bars, its bare html, no javascript, no php, no need for it

Re: Microfeatures I love in blogs and personal websites

#439

Post by Gormo »

Gormo wrote: post #331
orhmeh09 wrote: post #302

Earlier quoted context omitted.

The world's most popular podcast is the Joe Rogan Experience. Which part of Spotify is using an RSS feed for that?

The world's most popular podcast used to be The Joe Rogan Experience, but since Spotify acquired exclusive rights to it, it is no longer distributed as a podcast, and is only available as a Spotify channel. Despite continuing to call it a "podcast", it isn't actually a podcast anymore.

UPDATE: Just found out that earlier this year, Spotify abandoned its exclusive content strategy, and Joe Rogan is once again distributed as a podcast:

https://feeds.megaphone.fm/GLT1412515089

Looks like Megaphone is a real, honest-to-goodness podcast hosting service that's owned and operated by Spotify, with proper RSS feeds and everything.

Re: Microfeatures I love in blogs and personal websites

#440

Post by danilafe »

gwern wrote: post #341

> If you want to show progress while the reader is somewhere in the middle of a page, you could use a page progress bar. As best as I can tell, the standard name for these is 'scroll spy'. Gwern.nt mobile example: https://gwern.net/doc/design/2023-04-28-gwern-gwernnet-mobil... They are becoming increasingly common as web browsers/OSes kill scroll bars and you are forced to implement your own: https://artemis.sh/2023/…

Woah, it's amazing to hear from you in person.

> Gwern.net has it! It's just that because we use both margins already, there is usually not enough horizontal space.

Upon closer inspection, I do. I should say that I have missed it up until now, though. Some sort of selective blindness, probably.

> Chrome has a 'link to text fragment' feature for this which got standardized and which Firefox is supposed to support at some point. So not so necessary as it used to be. (The unique IDs are often not so unique anyway or unstable.)

Thank you for reminding me of this; I stumbled across it some time ago and was quite surprised. I myself use Firefox, so until it adds support for this feature, I don't think I'll be leaning on it myself (and thus will try to provide anchors).

I would say that another microfeature I love is having stable and unique element IDs :-)

> Links.js hasn't been used in years on Gwern.net.

Thank you, I was failed by GitHub search. I will update the post. I struggled to find the Lorem link when looking for it; I would've expected to at least find something on /about, but did not. I understand that it's a test page, but it does currently have the only description of what the icons mean, and as a reader I definitely could've used a description.

Post reply on HN