An Introduction to CSS-Doodle

An Introduction to CSS-Doodle(yuanchuan.github.io)

94 points by spirit23 2 years ago | 29 comments

ultrafez 2 years ago |

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.

carreau 2 years ago | |

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...

schwartzworld 2 years ago | |

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

_shantaram 2 years ago | | |

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

arnorhs 2 years ago | | |

Same here. Chrome android

hexomancer 2 years ago | |

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

aeinbu 2 years ago |

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

samgaus 2 years ago |

This website is totally illegible to me

deskr 2 years ago |

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.

Kuinox 2 years ago |

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 :|.

Jakob 2 years ago | |

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 ;)

omnimus 2 years ago | |

Because its a presentation not a website.

dleeftink 2 years ago |

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'.

akie 2 years ago |

Very nice & creative! Love it.

esskay 2 years ago |

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

Minor49er 2 years ago |

This page could barely load on Firefox for Android

doodlesdev 2 years ago | |

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).

spirit23 2 years ago |

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.

nicolaslegland 2 years ago |

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

jordanwallwork 2 years ago | |

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

Jakob 2 years ago | | |

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

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

Akronymus 2 years ago | |

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

ericyd 2 years ago |

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.

Vampiero 2 years ago |

Processing but for webdevs?

RobinL 2 years ago |

Beautiful, I love it!

retep_kram 2 years ago |

It breaks for almost any android browser

mogoh 2 years ago |

Is there a talk to this slides?

lofaszvanitt 2 years ago |

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