An Introduction to CSS-Doodle | Hacker News Reader

An Introduction to CSS-Doodle

yuanchuan.github.io

94 pointsspirit2329 comments

Meta point - this page has one of the nicer "snap" scrolling mechanisms I've seen on Mac with a touchpad - scrolling still feels natural, but when I let go it snaps to a single slide. Scrolling with momentum seems to work naturally too. Can't comment on keyboard or mouse scroll wheel navigation though.

That's because it's native to the browser and not hijacked by JS: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap...

Interesting, because it's barely usable on my android phone

What browser? It works fine for me in Firefox, aside from the page scaling.

Chrome

Same here. Chrome android

I find it extremely annoying (using a mouse wheel).

So what is CSS-Doodle then? I still have noe idea after this so called «introduction»

This website is totally illegible to me

I appreciate the minimalistic design, but a paragraph or two (even three) of explanation at the top would have made me give it a better look instead of just closing it quickly.

Scrolling is totally broken, use keyboard arrow to change pages.

Scrolling push a new page in the browser history, i have now 40 items in the browsers history :|.

I once wrote a Chrome web browser extension that removes these duplicated browser history entries. The Chrome store denied it, citing that it didn’t have enough functionality to be valuable.

That means your problem is obviously not big enough to complain about ;)

Because its a presentation not a website.

I really see the potential here for visual prototyping before moving to D3 or Inkscape/editing SVGs by hand. It seems easy enough to setup a visual goal, or even reusing elements as it is all 'just DOM'.

Very nice & creative! Love it.

Very much a 'hey you could do this....but dont' kind of thing. The website tanks massively (Chrome, M3 Pro).

This page could barely load on Firefox for Android

Mine was lagging quite a bit in some demonstrations, but even worse: I had Fennec crash on me in one of the demonstrations a few pages down. I'm running 127.0, which has received some performance improvements (according to release notes).

I was surprised to see so many negative comments focused on the website itself rather than the actual content. Despite this, it's still worth sharing if even only one person finds it interesting.

Scrolling with the mouse wheel doesn't update the URL fragment, breaking navigation when switching back to keyboard arrows as of Chrome 126.0.6478.62

And the scrolling IMO ought to be instant like arrow key navigation

Another consequence of this is that there's no way to share a specific "slide", which is a shame because there's an example about 2/3s of the way down that's really cool but there's no simple way to send anyone straight to it

It works for me. Maybe the author fixed it in the meantime?

Example: https://yuanchuan.github.io/intro-to-css-doodle/#13

Like like a fun project, although I kinda doubt the mass appeal. I think visual code projects are great though so I like it from a creativity perspective.

Processing but for webdevs?

Beautiful, I love it!

It breaks for almost any android browser

Is there a talk to this slides?

Seemingly the user has the perl "abbreviate everything" virus. Very nice nonetheless.

Reply on news.ycombinator.com