DEV Community

Alex Morton
Alex Morton

Posted on • Updated on

Refactoring as a Slow but Necessary Process

This post was originally published on August 28, 2020 on my blog.

I did it! I got my podcast episodes to render dynamically on the podcast page on my website.

Well, they're dynamically rendered via an object of pre-filled episode data in my JavaScript file instead of hard-coding a brand new Section element in my HTML file.

So, technically, I'm still hard-coding into the JS file, but... baby steps.

I had a total learning moment yesterday, though, when I discovered that you can't just insert a script into an 'insertAdjacentHTML' call in JS because by the time your script gets added, the page has already loaded - so, as I understood it, it's kind of like your script arrived at the station as the train had already left.

(Each script tag contained the the individual episode-player.)

To get around that, I had to create a script for each podcast-episode-section-HTML after the page was loaded and createElement('script') with and set the src of each as each individual epiosde's URL.

I also had to create a data-key attribute for each episode so that I could match up the episode to the corresponding element in the 'episodes' object that contains each episode's information.

That moment when everything came together, though - ugh! I live for that!!!

Here's the logic for rendering each episode (before adding the script tags to each episode):

function renderListItems(list) {
  let dataKey = 0;

  list.forEach(el => {

      let html = `<section class="episode" data-key=${dataKey}><h2 style="text-align: center;">${el.title}</h2> <div id="buzzsprout-player-${el.id}" class="podcast-player"></div> <span>${el.description}Music credit to <a href="https://soundcloud.com/thisislegang" rel="noopener" target="_blank">Le Gang</a></span></section>
      `;
      document.querySelector('#episode-list').insertAdjacentHTML('beforeend', html);

      dataKey++; 
  });  

}
Enter fullscreen mode Exit fullscreen mode

So, once the page loads, all the HTML is rendered, and then the program runs back through and creates/adds the script tags containing the episode-player:

window.addEventListener('load', () => {

  // Render all podcast episodes
  renderListItems(episodes);

  // Add individual script tags for each podcast player
  const episodeHtml = document.querySelectorAll('.episode');
  episodeHtml.forEach(el => {

    let i = el.getAttribute('data-key');
    let script = document.createElement('script');

    script.src = episodes[i].url;

    el.appendChild(script);
  });
});

Enter fullscreen mode Exit fullscreen mode

Next step here is to get the episodes to populate by making a call to the Buzzsprout API (Buzzsprout is the podcast hosting service I use). This is great, because I've been wanting to build more things with APIs, so I can add that in there!

That'll be on today's plate, as well as more practice in my React ebook, which I'm steadily working my way through. I'm building a clone of a file list in GitHub at the moment, so I'm going to take what I've done fully apart in order to rebuild it using the knowledge I've already gained.

I mentioned in a previous post that I'm focusing on moving through the material very slowly as a means to move more quickly over the long run.

I know, it doesn't make sense right when we first read that; but honestly, it's a game-changer. I keep telling myself that if I move on quickly and without fully understanding a concept, it's going to cost me much more time down the line to have to go back and re-learn it.

So I'm taking that extra time as I'm learning something to make sure it's 100% dialed in.

Happy Friday.


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen right over here >>

The Ladies Code Collective Podcast cover art

Latest comments (1)

Collapse
 
alexlsalt profile image
Alex Morton

This is so great, Erick! Really appreciate you taking the time to share this. Can’t wait to dig in more once I get back to my computer! 😊