6 ms·

It's always neat to see where one's ideas go! AFAIK, I was the first person to create dynamic railroad diagrams for regular expressions (maybe 12 or 13 years a

by ken 9y ago

It's always neat to see where one's ideas go! AFAIK, I was the first person to create dynamic railroad diagrams for regular expressions (maybe 12 or 13 years ago). I got the idea from json.org, which I think was Douglas Crockford's brainchild. My initial implementation was strfriend.com (in Lisp: well under 1,000 lines, including views), and I think its main claim to fame was that Jeff Atwood made fun of it on Twitter. (I was truly clueless at promoting myself back then. Not only did I not have a Twitter account, but it didn't occur to me to submit it to HN.) Every so often, I toy around with the idea of making it into a proper local/native application -- maybe someday. In the meantime, my obsession with regular expressions lives on in my current application (see bio) where I parse and rewrite the user's entered regex syntax (ICU) into whatever regex syntax the backend requires. I don't know of any other application that does this, but I predict that in 15 years it'll be commonplace (and I'll still be poor)!

kyberias 9y ago
I was taught the algorithms to do this stuff in my Computer Science class over 20 years ago (RE is equivalent to DFA). You weren't the first person to implement regular expression visualizations.
- skate22 9y ago
  A dynamic visualization on the web 13 years ago? He may have been the first.
  - osteele 9y ago
    It was pretty hard to do viz on the web 13 years ago. In 2006 I made a web tool to turn regular expressions into NFAs and DFAs and animate their states as you typed. It took a lot of code (drawing and animating along beziers, AJAX to a server for graphviz and a regex compilation and minimization package I wrote for this). https://imgur.com/gallery/Yqqoh https://imgur.com/gallery/Yqqoh These days there’s a lot more tooling and components that can snap together to make this kind of thing.
  - dspillett 9y ago
    > A dynamic visualization on the web 13 years ago? Depends on what you count as dynamic, but I think so yes. There was one in use at my Uni ~2000. Obviously there were no fancy canvas/svg options to work with client-side (though IIRC flash was very much a thing by then so that could have been used) so it produced an image server-side that was updated when you submitted a change. Not entirely dynamic due to the manual post to the server for each update of the diagram, but it counts IMO. It could have been more automated via the JS/Dom methods available at the time I'm sure, I can think of a couple of ways, but I don't remember it being so. > He may have been the first. I'd say not the first. He may well have come up with the combination of ideas independently. How many times have you thought "X would be brilliant, I'm a genius" only to find when describing the idea to other that several "geniuses" preempted you and it already exists (or worse: it has been tried and proven to be a terrible idea in practice)! It has certainly happened to me a fair few times, and back then it wouldn't have been as easy to search out similar ideas/implementations.
- ken 9y ago
  I studied computer science, too. DFA graphs are not the same as railroad diagrams.
ghusbands 9y ago
Railroad diagrams for regular expressions were common long before 2005, and generating such images on demand isn't that unusual, so your work is unlikely to have been a major influence here. Similarly, automatically translating regular expressions from one engine to another is something that people have done before (out of necessity, for compatibility).
- ken 9y ago
  Do you have an example? I love reading original sources. I'd never seen a regex as a railroad diagram before that, though I admit it's entirely possibly I'd seen it somewhere and forgotten. I don't know of any software that translates regular expressions, either, though I'm sure I can't be the first.
  - dc_gregory 9y ago
    This fairly common piece of software does it. https://www.regexbuddy.com https://www.regexbuddy.com 4th result on google for "regex conversion" for me. Seems like there are quite a few others.
    - ken 9y ago
      I'm familiar with that program, but I see no railroad diagrams there.
      - ghusbands 9y ago
        They're replying to the "convert" part, which regexbuddy does [1] [1] https://www.regexbuddy.com/convert.html https://www.regexbuddy.com/convert.html
  - pdubroy 9y ago
    I think the first place I such a diagram was in the Smalltalk blue book. It has railroad diagrams for the language grammar. So not regular expressions, but very similar.
  - 9y ago
patpatpat 9y ago
Strfriend was very good, it helped me learn regex in a big way. Thanks!
theknarf 9y ago
According to Wikipedia's article on railroad diagrams one of the first appearances of it was in "Pascal User Manual" written by Niklaus Wirth in 1973. Hardly a new idea. It's been used in academia for ages when first teaching regular expressions and Extended Backus–Naur form to students.
petagonoral 9y ago
couldn't find jeff atwoods comment on twitter but he did have this to say on Stack Overflow back in 2009 [ answered Jan 13 '09 at 10:15 ][ https://meta.stackexchange.com/a/79880 https://meta.stackexchange.com/a/79880 ]: It's even worse: those strfriend URLs in the form of http://strfriend.com/vis?re=(Zip%3A\s*\d\d\d\d\d)\s*(State%3A\s*\w\w)* http://strfriend.com/vis?re=(Zip%3A\s*\d\d\d\d\d)\s*(State%3... are really painful.You'll have to encode almost everything in it. See my edit.* Works now, but not worth it IMO. str friend? more like str ENEMY.

by ken 9y ago

kyberias 9y ago

I was taught the algorithms to do this stuff in my Computer Science class over 20 years ago (RE is equivalent to DFA). You weren't the first person to implement regular expression visualizations.

skate22 9y ago
A dynamic visualization on the web 13 years ago? He may have been the first.
- osteele 9y ago
  It was pretty hard to do viz on the web 13 years ago. In 2006 I made a web tool to turn regular expressions into NFAs and DFAs and animate their states as you typed. It took a lot of code (drawing and animating along beziers, AJAX to a server for graphviz and a regex compilation and minimization package I wrote for this). https://imgur.com/gallery/Yqqoh https://imgur.com/gallery/Yqqoh These days there’s a lot more tooling and components that can snap together to make this kind of thing.
- dspillett 9y ago
  > A dynamic visualization on the web 13 years ago? Depends on what you count as dynamic, but I think so yes. There was one in use at my Uni ~2000. Obviously there were no fancy canvas/svg options to work with client-side (though IIRC flash was very much a thing by then so that could have been used) so it produced an image server-side that was updated when you submitted a change. Not entirely dynamic due to the manual post to the server for each update of the diagram, but it counts IMO. It could have been more automated via the JS/Dom methods available at the time I'm sure, I can think of a couple of ways, but I don't remember it being so. > He may have been the first. I'd say not the first. He may well have come up with the combination of ideas independently. How many times have you thought "X would be brilliant, I'm a genius" only to find when describing the idea to other that several "geniuses" preempted you and it already exists (or worse: it has been tried and proven to be a terrible idea in practice)! It has certainly happened to me a fair few times, and back then it wouldn't have been as easy to search out similar ideas/implementations.
ken 9y ago
I studied computer science, too. DFA graphs are not the same as railroad diagrams.

ghusbands 9y ago

Railroad diagrams for regular expressions were common long before 2005, and generating such images on demand isn't that unusual, so your work is unlikely to have been a major influence here. Similarly, automatically translating regular expressions from one engine to another is something that people have done before (out of necessity, for compatibility).

ken 9y ago
Do you have an example? I love reading original sources. I'd never seen a regex as a railroad diagram before that, though I admit it's entirely possibly I'd seen it somewhere and forgotten. I don't know of any software that translates regular expressions, either, though I'm sure I can't be the first.
- dc_gregory 9y ago
  This fairly common piece of software does it. https://www.regexbuddy.com https://www.regexbuddy.com 4th result on google for "regex conversion" for me. Seems like there are quite a few others.
  - ken 9y ago
    I'm familiar with that program, but I see no railroad diagrams there.
    - ghusbands 9y ago
      They're replying to the "convert" part, which regexbuddy does [1] [1] https://www.regexbuddy.com/convert.html https://www.regexbuddy.com/convert.html
- pdubroy 9y ago
  I think the first place I such a diagram was in the Smalltalk blue book. It has railroad diagrams for the language grammar. So not regular expressions, but very similar.
- 9y ago

patpatpat 9y ago

Strfriend was very good, it helped me learn regex in a big way. Thanks!

theknarf 9y ago

According to Wikipedia's article on railroad diagrams one of the first appearances of it was in "Pascal User Manual" written by Niklaus Wirth in 1973. Hardly a new idea. It's been used in academia for ages when first teaching regular expressions and Extended Backus–Naur form to students.

petagonoral 9y ago

couldn't find jeff atwoods comment on twitter but he did have this to say on Stack Overflow back in 2009 [ answered Jan 13 '09 at 10:15 ][ https://meta.stackexchange.com/a/79880 https://meta.stackexchange.com/a/79880 ]: It's even worse: those strfriend URLs in the form of http://strfriend.com/vis?re=(Zip%3A\s*\d\d\d\d\d)\s*(State%3A\s*\w\w)* http://strfriend.com/vis?re=(Zip%3A\s*\d\d\d\d\d)\s*(State%3... are really painful.You'll have to encode almost everything in it. See my edit.* Works now, but not worth it IMO. str friend? more like str ENEMY.