Загрузка видео...

Не удалось загрузить видео

На главную

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩

1,202,160 просмотров • 7 месяцев назад •via X (Twitter)

Комментарии: 42

Фото профиля Samiullah Khan
Samiullah Khan7 месяцев назад

Should I stop my search for good force graph JavaScript library and use this instead

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

Not really. It's kind of a static implementation tailored to that particular graph. I am still missing features to be able to create a generic algorithm but it will happen in the future 😉

Фото профиля ._.
._.7 месяцев назад

pffffff… are youn human? 🧐

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

Now that many are hating AI more and more, I'd rather be a human 😅

Фото профиля ._.
._.7 месяцев назад

😆😆😆

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

In case you want more CSS fun👇

Фото профиля Marchen
Marchen7 месяцев назад

pure css doing graph theory. wild

Фото профиля David K 🎹
David K 🎹7 месяцев назад

This is insanely cool

Фото профиля SolusOps
SolusOps7 месяцев назад

is CSS Turing complete now?

Фото профиля Amphlux.ye
Amphlux.ye7 месяцев назад

I submit 1571 as my top score

Фото профиля Kris des Chacals ∞
Kris des Chacals ∞7 месяцев назад

Next step: solve the travelling salesman problem with CSS 😄

Фото профиля Andy
Andy7 месяцев назад

You are stacked and overflowing with talent.

Фото профиля Nakumbo
Nakumbo7 месяцев назад

I’m sorry for breathing the same air with you or ever opening a computer 😭

Фото профиля IGuano
IGuano7 месяцев назад

is this just running dijkstras

Фото профиля rifusaki (woke izutsumi)
rifusaki (woke izutsumi)7 месяцев назад

data analysis idea @ohsweetnothin

Фото профиля SuperKreator
SuperKreator7 месяцев назад

@DaegoDaeki espabila

Фото профиля huehue
huehue7 месяцев назад

Are you real ?

Фото профиля Starálfur
Starálfur7 месяцев назад

CSS gone wild.

Фото профиля D7460N
D7460N7 месяцев назад

This is amazing dude. Great job.

Фото профиля Josh
Josh7 месяцев назад

@samwhoo Very very cool!

Фото профиля ultimatepissmaxerpissmaximizerpisscollector8000
ultimatepissmaxerpissmaximizerpisscollector80007 месяцев назад

Wow that's really cool

Фото профиля honeybbqchicken
honeybbqchicken7 месяцев назад

Is this analogous to betweenness centrality? I've been trying to understand the concept behind it.

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

betweenness centrality uses the "shortest path" in its concept, it's not really analogy here.

Фото профиля Niko Alifero
Niko Alifero7 месяцев назад

Why it won't showing the closest path when only one node in between? Did you made it to need to visit 2 nodes in between?

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

There is no "one node in between" in that graph. Between S and E you have at least two nodes so any path needs to include at least two nodes and since we want the shortest path you won't find more than 2.

Фото профиля Niko Alifero
Niko Alifero7 месяцев назад

With "one node in between" i mean when the shortest path only need one node. Anyway, your second sentence answer my question. Thanks

Фото профиля 64s
64s7 месяцев назад

okay cool - brute force but very neat

Фото профиля duar
duar7 месяцев назад

God damn u... what a beautyy

Фото профиля apiep
apiep7 месяцев назад

wait, with what...? css??? 😮

Фото профиля Dev Sharma -e/acc
Dev Sharma -e/acc7 месяцев назад

Perfect 🤩

Фото профиля Broda Noel
Broda Noel7 месяцев назад

With CS… WHAT?!

Фото профиля I
I7 месяцев назад

Pec

Фото профиля Possible Pilot Deviation
Possible Pilot Deviation7 месяцев назад

It's cool but in reality that would be mandated with bunch of airspace restrictions and other caveats that flight managers need to battle every day. But a really nice concept! It has a great potential for a good flight dispatch management program/app.

Фото профиля ANDRÉ ALFIERI
ANDRÉ ALFIERI7 месяцев назад

There are some errors, some lines are missing with other possibilities, such as S > A > B > E (this path is never possible), but in any case it's an incredible piece of work

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

It's a graph; I define the lines and the nodes and I didn't define any line between B and E. There is no mistakes. All the lines I defined are the one you see.

Фото профиля santi 🔜 hell
santi 🔜 hell7 месяцев назад

holy shit

Фото профиля kaiser.eth
kaiser.eth7 месяцев назад

genius. i've always supported the idea that css is an exoteric branch.

Фото профиля Jasiarz
Jasiarz7 месяцев назад

CSS is not blo...

Фото профиля wsquarepa
wsquarepa7 месяцев назад

damn, no js is wild

Фото профиля Madhusoodan
Madhusoodan7 месяцев назад

This is cool! Can it with some config go for an infinite adjustment?

Фото профиля CSS by T. Afif
CSS by T. Afif7 месяцев назад

In a near future maybe. I actually just built one example as a proof of concept.

Фото профиля IsoWeeb
IsoWeeb7 месяцев назад

Jesus Christ, CSS is not supposed to be a programming language. wtf are we doing.

Похожие видео

25 algorithms every programmer should know: Let's start with my top favorite 10. If nothing else, you should read about these algorithms and have a good idea of how they work: 1. Linear search to find an element in a list 2. Binary search to find an element on a sorted list 3. Bubble sort to sort a list 4. Merge sort will also sort lists 5. Quicksort to sort the list and do it fast 6. Dijkstra to find the shortest path in a graph 7. Breadth-first Search (BFS) for trees or graphs 8. Depth-first search (DFS) for trees or graphs 9. Huffman for doing data compression 10. Anything related to dynamic programming Learning about algorithms is like getting tattoos: you never have enough. Here are another 5 algorithms that will help you go beyond the basics: 11. Kruskal for the finding minimum spanning tree 12. Floyd Warshall, shortest paths in a graph 13. Union Find to detect cycles in a graph 14. Bellman-Ford, shortest path in a graph 15. Lee for finding the shortest path in a maze If you are serious about this topic, I recommend learning about algorithms' space and time complexity. People usually refer to this topic as "Big O" notation. You should build a good intuition about the performance of different algorithms and learn how to evaluate them. Machine Learning will rule the next 50 years, so the next 10 algorithms you can't ignore are the following: 16. Linear Regression 17. Logistic Regression 18. Decision Trees 19. Bayes' theorem 20. k-Nearest Neighbors (kNN) 21. Every algorithm related to neural networks 22. K-means 23. Random forest 24. Gradient boosting algorithms 25. Any dimensionality reduction algorithm (PCA, for instance) There are many more mind-blowing algorithms! I haven't found a better way to understand how computers work from a first-principles point of view than reading about different algorithms. Take a look at the attached video.

Santiago

274,092 просмотров • 2 лет назад