I quite often leave a link to a GitHub repo to share my source in these posts, and on a few recent ones, a link to a live version of a page on my github.io. In a recent installment of CWD, Andrei shared some previous students’ solutions, and some were hosted on CodePen.io which I hadn’t seen before.
It’s a cute concept, you can enter HTML, CSS & JS and see a live view of the page below. It looks super extensible – there’s mentions of SCSS, Typescript and preprocessors for JS in the settings.
There are a few quirks – you don’t enter all the DOCTYPE/<html><body> etc in your HTML- presumably that’s because they already need that for their page. There are settings for some of these for example if you need to add a clss to the <html>. I couldn’t see how to do that for the <body> though so I needed to change the JS for this project a bit.
It seems pretty great – sort of like Playgrounds for web dev. It’s not quite a full debugging IDE – that doesn’t seem to exist for web dev. There’s no intellisense, but it was flagging problems in my JavaScript, so I’ll use it for a few of these tutorial pages and see how it goes.
Here’s a link to the tutorial app above on CodePen.
dev.endevour 
Leave a comment