· 2 min read
My Weekend Dive into Learning Japanese
Lately, I’ve been on a mission to conquer Japanese. As I was sifting through resources, I stumbled upon iknow.jp. They’ve got some seriously good free materials to learn online, which is awesome! But – and this is a big “but” for a commuter like me – their website UI wasn’t exactly mobile-friendly. I wanted to squeeze in some study time on my train rides to and from work, and that just wasn’t happening with their setup.
So, being the curious (and slightly impatient) person I am, I started poking around their website.
Initially, my brain went straight to automation tools like Selenium or Playwright. But then I realized something crucial: the audio! Their audio lessons are key, and I absolutely needed to grab those too. That’s when I dug a bit deeper, checking out their webpage’s requests and responses. And guess what? Bingo! I discovered they’re using React, and they have this super slick API that I could call without needing any credentials. Score!
With that awesome API in hand, I fired up VS Code (my trusty sidekick!) and got to work. I whipped up a Python script to fetch all the data. Then, I used that data to auto-generate HTML files, sprinkling in some basic CSS to make them all shiny and mobile-friendly. For the audio, since the API conveniently provided the URLs, I could just embed them directly into the HTML. Easy peasy!
Now, a quick heads-up: I don’t think iknow.jp intends for this API to be public. So, to be a nice person and avoid unnecessary traffic on their servers, I set the audio preload attribute to none. This way, the audio only loads when you actually click to play it, not every time the page loads.
Once I had one course page looking good, it was just a matter of looping through their series of courses and automating the whole process. To tie it all together, I even whipped up a simple index.html file to link all the generated pages, making navigation a breeze.
Honestly, this whole idea and script came together in just a couple of hours over a weekend. It’s nothing super complex, but it’s a perfect example of why having a few extra skills up your sleeve can be incredibly handy. You never know when you’ll encounter a problem that a little bit of coding can solve!
Want to see the magic in action?
