Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 7 ay önce •via X (Twitter)

42 Yorum

Samiullah Khan profil fotoğrafı
Samiullah Khan7 ay önce

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

CSS by T. Afif profil fotoğrafı
CSS by T. Afif7 ay önce

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 😉

._. profil fotoğrafı
._.7 ay önce

pffffff… are youn human? 🧐

CSS by T. Afif profil fotoğrafı
CSS by T. Afif7 ay önce

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

._. profil fotoğrafı
._.7 ay önce

😆😆😆

CSS by T. Afif profil fotoğrafı
CSS by T. Afif7 ay önce

In case you want more CSS fun👇

Marchen profil fotoğrafı
Marchen7 ay önce

pure css doing graph theory. wild

David K 🎹 profil fotoğrafı
David K 🎹7 ay önce

This is insanely cool

SolusOps profil fotoğrafı
SolusOps7 ay önce

is CSS Turing complete now?

Amphlux.ye profil fotoğrafı
Amphlux.ye7 ay önce

I submit 1571 as my top score

Kris des Chacals ∞ profil fotoğrafı
Kris des Chacals ∞7 ay önce

Next step: solve the travelling salesman problem with CSS 😄

Andy profil fotoğrafı
Andy7 ay önce

You are stacked and overflowing with talent.

Nakumbo profil fotoğrafı
Nakumbo7 ay önce

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

IGuano profil fotoğrafı
IGuano7 ay önce

is this just running dijkstras

rifusaki (woke izutsumi) profil fotoğrafı
rifusaki (woke izutsumi)7 ay önce

data analysis idea @ohsweetnothin

SuperKreator profil fotoğrafı
SuperKreator7 ay önce

@DaegoDaeki espabila

huehue profil fotoğrafı
huehue7 ay önce

Are you real ?

Starálfur profil fotoğrafı
Starálfur7 ay önce

CSS gone wild.

D7460N profil fotoğrafı
D7460N7 ay önce

This is amazing dude. Great job.

Josh profil fotoğrafı
Josh7 ay önce

@samwhoo Very very cool!

ultimatepissmaxerpissmaximizerpisscollector8000 profil fotoğrafı
ultimatepissmaxerpissmaximizerpisscollector80007 ay önce

Wow that's really cool

honeybbqchicken profil fotoğrafı
honeybbqchicken7 ay önce

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

CSS by T. Afif profil fotoğrafı
CSS by T. Afif7 ay önce

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

Niko Alifero profil fotoğrafı
Niko Alifero7 ay önce

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 profil fotoğrafı
CSS by T. Afif7 ay önce

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 profil fotoğrafı
Niko Alifero7 ay önce

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

64s profil fotoğrafı
64s7 ay önce

okay cool - brute force but very neat

duar profil fotoğrafı
duar7 ay önce

God damn u... what a beautyy

apiep profil fotoğrafı
apiep7 ay önce

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

Dev Sharma -e/acc profil fotoğrafı
Dev Sharma -e/acc7 ay önce

Perfect 🤩

Broda Noel profil fotoğrafı
Broda Noel7 ay önce

With CS… WHAT?!

I profil fotoğrafı
I7 ay önce

Pec

Possible Pilot Deviation profil fotoğrafı
Possible Pilot Deviation7 ay önce

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 profil fotoğrafı
ANDRÉ ALFIERI7 ay önce

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 profil fotoğrafı
CSS by T. Afif7 ay önce

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 profil fotoğrafı
santi 🔜 hell7 ay önce

holy shit

kaiser.eth profil fotoğrafı
kaiser.eth7 ay önce

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

Jasiarz profil fotoğrafı
Jasiarz7 ay önce

CSS is not blo...

wsquarepa profil fotoğrafı
wsquarepa7 ay önce

damn, no js is wild

Madhusoodan profil fotoğrafı
Madhusoodan7 ay önce

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

CSS by T. Afif profil fotoğrafı
CSS by T. Afif7 ay önce

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

IsoWeeb profil fotoğrafı
IsoWeeb7 ay önce

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

Benzer Videolar

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 görüntüleme • 2 yıl önce