Jon Bukiewicz • Web Solutions Engineer • Chicago, Illinois

Woww, ok – so today’s lesson was especially mind blowing. Check out the codepen below, which allows you to click and drag in order to create a line which changes in hue and width as you move.

See the Pen JavaScript 30: Day 8 – Wes Bos by Jon Bukiewicz (@tenebroso) on CodePen.

I’ll admit, today was packed, so while I watched the walkthrough, I did not re-create this from scratch as I did the others. It’s just how it will have to be today. I’m grateful for the introduction, but I don’t see myself being able to create something like this without a pretty solid reference to multiple MDN tabs, so when I do, I’ll try to change it up a bit and make it my own. I’ll add it to the list of takeaways, which seems to be growing.

That said, it was really the problem solving that I liked most about today’s video. Wes was able to break down each feature into really logical steps and it resulted in a really elegant approach. How do you track the mouse cursor in order to start the line when it is clicked? How best do you handle colorizing the line? How can you add to and then subtract from the line width, reliably? Everything really “clicked” as he went through the process and it was great today to be able to see that type of clear approach to a visually complex project.