Blog Post

For a few months now, I've been viewing Twitch streams of front-end developers coding during lunch. I have found myself learning tidbits here and there that have been really helpful. It's also generally fun to be able to help when the developer is stumped.

One of my favorite users is Syntag - a frontend developer that has his own agency and codes a few hours at a time for Twitch. Through his channel, I found DevWars - "the ultimate developers battleground." They recently started weekly challenges where people code out components. The first one was a music player design from Dribble.

I had fun writing up the HTML/Sass and even challenged myself to write it in under 2 hours. While the coding challenge page included a spritesheet with the icons to use, I really like the Google Material icons so I found icons that represented the same thing from the sprite sheet and used those instead. I grabbed a song I liked and found a quick 30 second snippet of the song to play. You can play/pause the song as of now - I used jQuery to add the <audio> element and then set the attributes for it. The play/pause is controlled by an if/else statement. That was my only goal for it initially as I'm working on a ReactJS project but I will get back to it and complete it this week.

Todos:
get the progress bar to work while the song is playing
change to previous song and to next song of an array
add sharing which will just be something like a tweet that says, 'Currently playing: {{ songName }} by {{ artist }} on Codepen'.