DEV Community

Siddharth
Siddharth

Posted on

Bored of code blocks? Check out Codeview!

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.

This is is just a proof of concept, if there is enough demand I will refine and improve it (although I consider most of the bugs in Codeview to be features)

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!

Discussion (7)

Collapse
nombrekeff profile image
Keff

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.

Collapse
frontender profile image
Frontender

Same with me it's automatically scroll

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

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.

Collapse
adam_cyclones profile image
Adam Crockett

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 😅

Collapse
siddharthshyniben profile image
Siddharth Author

Definitely, this is mainly meant for explanations. It could also be paired with text/scroll, for this cool effect:

Code Scroll

If I build a blog, I'll definitely add this!

Collapse
adam_cyclones profile image
Adam Crockett

In context, yes, yes I love this

Collapse
giseleml profile image
Gisele Leonardi

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