The most common way to show code is via code blocks. But code blocks are really boring. So, to make code blocks more fun (and easier to digest!) I made Codeview.
Code blocks are nice, but they are static, which makes it hard to really explain code. Inserting lines somewhere, replacing lines, these all are kinda confusing with ordinary code blocks. Well, struggle no more, because we have Codeview.
Codeview can automatically mesh, merge, replace, and insert code. It's pretty powerful once you wire it up properly. One potential way I'm considering using it is by linking it to scroll, so that we get a code block which changes with the content!
I have to say that this is pretty broken. One thing is that there's no syntax highlighting, and next thing is that sometimes there are some timing issues, etc. Once I fix all these I'll definitely make this a library!
Top comments (7)
Interesting concept as always! Keep the good work!
Though yeah, it's quite broken for me. It keeps automatically scrolling the page downwards.. making it a bit hard to focus on it.
Same with me it's automatically scroll
Maybe codepen sandbox is leaking because this whole page just keeps scrolling automatically, with the changes in the codepen's content. Other than that, concept of codeview is nice. I have used gif's for this in past. Maybe this can replace that. Great work.
I think it's cool but.. and there a but, code is meant to be glanced at, the animation prevents me from doing that and fills me with a small amount of rage 😅
Definitely, this is mainly meant for explanations. It could also be paired with text/scroll, for this cool effect:
If I build a blog, I'll definitely add this!
In context, yes, yes I love this
I like how you introduce it for us to "struggle no more" but I'm struggling enough to just read the text or even write this comment because it keeps scrolling up and down lol