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

HTML Tips (2020)

markodenic.com

Post reply on HN
Print view View original

61–70 of 136 posts

Re: HTML Tips (2020)

#61

Post by zozbot234 »

asddubs wrote: post #24
intergalplan wrote: post #14

Earlier quoted context omitted.

There's so much stuff in HTML that's almost good enough to replace things we use Javascript for. We should also have had built-in pagination and sorting on tables, like, years ago, with some kind of (optional, if your data aren't all available on the initial page load) back-end spec for how the requests will be shaped and for delivering the data. An awful lot of "AJAX" Javascript use could just be frames and iframes,…

drag and drop rearrangeable lists as a form element!

Drag and drop is not actually very usable. It's nice to have it as an option, but the main approach to rearrangeable lists should just be a list widget w/ selectable items and [↑] [↓] buttons to shift the currently-selected entry upwards or downwards.

Re: HTML Tips (2020)

#62

Post by beachy »

yummybear wrote: post #17
beachy wrote: post #5

Earlier quoted context omitted.

Why not just give it a new url?

It was kind of tounge-in-cheek, but giving a new url may require a redeployment which isn’t always practical

True. But I can't really think of any app that has the use case where it refreshes images in place.

Possibly an app that did that sort of thing would be some kind of gallery or other very image-centric app.

And if that were the case, then I would think the image URLs would be dynamic, not burned into the deployment.

Re: HTML Tips (2020)

#63

Post by livinginfear »

Awesome list! The ' tip reminds me that I wish there was a better way to do nested list numbering of the kind you'd likely find in a table of contents, such as "1.1.2" and so on. As far as I'm aware there's no simple way to do this natively without using CSS or JS to change the list item prefix.

Re: HTML Tips (2020)

#64

Post by monsieurbanana »

intergalplan wrote: post #39
asddubs wrote: post #24

Earlier quoted context omitted.

drag and drop rearrangeable lists as a form element!

Business users looooove drag and drop. I've seen products burn a stupid amount of money to have it, and decision-makers insisting it was a must-have no matter the cost in time and ongoing overhead in time & bugs for everydamnthing else added to the UI after. I've seen business-side people favor terrible products because they have drag-n-drop, while a better alternative doesn't. They love it. It's heavy-weight, fragil…

Has this improved? I've seen recently browser built in drag and drop (that people don't use as of, but as a base in lightweight dnd librairies).

I don't remember having that last time I had to implement serious drag and drop, about 4 years ago.

Re: HTML Tips (2020)

#65

Post by robertoandred »

Jiocus wrote: post #10
chrismorgan wrote: post #6

Some remarks, with some opinions, some caveats, and some extra info that I find interesting: 1. Lazy loading: generally speaking, just don’t do this. It’s much better than doing it in JavaScript (especially when combined with a blurry image until it loads, which I and many others find surprisingly disconcerting), but if you’re not very close to the server (which very commonly means “if you’re not in the USA”) then it…

> 15. .webp: significantly overrated, in my opinion. It doesn’t give anywhere near as big a boost in compression relative to properly-done JPEG as people think (like under 10% a lot of the time). Now AVIF, that’s another matter. I was saying the same thing but then I realized something. The thing about webp isn't about how it compares to jpg[0]. Png on the other hand, with all those logos and some with transparency.…

Try https://tinypng.com/ for png compression.

Re: HTML Tips (2020)

#66

Post by mohanmca »

rayrag wrote: post #35
didymospl wrote: post #31

Is there any good 'linear'(with a clear learning path, e.g. course/book, as opposed to MDN) resource to learn modern HTML/CSS? Preferably not one starting at Hello World. The thing is I'm primarily a BE developer but I have to do some front-end tasks every now and then and I often catch myself reinventing the HTML5 wheel.

Not linear but I recommend: for HTML read chapter 3 & 4 of HTML spec - https://html.spec.whatwg.org/ For CSS I recommend Wes Bos tutorials about flexbox and grid - https://wesbos.com/courses and this blog: https://ishadeed.com/articles/

Thanks for the pointers!

Re: HTML Tips (2020)

#67

Post by marcosdumay »

livinginfear wrote: post #63

Awesome list! The ' tip reminds me that I wish there was a better way to do nested list numbering of the kind you'd likely find in a table of contents, such as "1.1.2" and so on. As far as I'm aware there's no simple way to do this natively without using CSS or JS to change the list item prefix.

Hum... Are you referring to the numbers that appear when you nest lists? As in putting an ol inside an item of another ol?

Re: HTML Tips (2020)

#68

Post by zamadatix »

zamadatix wrote: post #38
lucb1e wrote: post #30

#1, images that load only when they scroll into view, bother the hell of out me. I doubt there's a website that enabled this where I haven't noticed the constant flashing of content as I scroll down. Looks rather glitchy and constantly distracting from the text you're reading. Luckily not that many sites have it, but come to think of it, does anyone know of an add-on or something to disable the lazy attribute?

In Firefox you can set "dom.image-lazy-loading.enabled" to false in about:config. In Chromium based browsers set "Enable lazy image loading" to disabled in about:config In Safari it's still an experimental feature you have to enable manually. . Of course since Safari doesn't support it yet plenty of sites lazy load via classic JS style solutions and trying to fix those is like playing whack-a-mole.

Too late to edit but it chromium browsers it's about:flags not config

Re: HTML Tips (2020)

#69

Post by jabits »

zozbot234 wrote: post #61
asddubs wrote: post #24

Earlier quoted context omitted.

drag and drop rearrangeable lists as a form element!

Drag and drop is not actually very usable. It's nice to have it as an option, but the main approach to rearrangeable lists should just be a list widget w/ selectable items and [↑] [↓] buttons to shift the currently-selected entry upwards or downwards.

I strongly disagree. It’s the most natural thing in the world for GUI/mouse users to drag-n-drop objects. It’s even nice for touch with the right OS/hardware support.
Post reply on HN