Developing a front-end template for a CMS

These are the skills and some of the projects I’ve worked on as software developer for NPR, working on a content-management system (CMS).

Disclaimer: Everything mentioned here is all public! I’m just describing the thought process behind it.

Eye & Technical Skill

This is what the player currently looks like as the time this page was written! However, before, the player had only contained the streams list under “Available on Air”. That was the same view for both live and on-demand audio, so not only was it not super great for livestreams but also you couldn’t see detailed information or play/pause/seek on-demand audio at all on mobile. Working with the designers on my team, we strived to improve this listening experience for both on mobile and desktop.

• For this project, I collaborated closely with designers on our team to polish the audio player to appear more visually in line with the website and enhance the user experience. 
• Some enhancements included adding a scrubber to the drawer for on-demand audio, and allowing the drawer area to be scrollable – since there is a pinned space at the bottom for an ad in addition to a list of other streams. 
• Another enhancement was displaying the detailed audio info inside of the player drawer, which can be accessed either on desktop or mobile. The issue here was that the audio information could only be seen on the collapsed player (see screenshot below) but on mobile, longer titles are hidden with an ellipses. So, the decision was made to add audio info to the inside of the drawer. 

• How did I solve the problem?
  • There were some complications around naming so I reorganized the logic in which the fields were populated and made sure that the fields could be efficiently used in any scenario – depending on what information is provided or not provided. And since I was using existing data to just populate a different area, I organized the data population so that both areas of the player could get the same data with as few lines of code as possible. 

Organization & Understanding of Work

I learned a lot about organization and gained a better understanding of the work that both my team and my role did and so I tried to document my learnings.

• Often times I was the only front-end(FE)-focused developer on my team so I wrote up guides while I was learning to help myself learn and help demystify what was going on in the FE.
• I also contributed to creating standards through researching and writing a Tech Design guide for the team and improving team processes through creation of Slack Bot for various team reminders.

Proactiveness To Learn

Since I had no previous experience developing a CMS, I knew I had a lot to learn. Some of the things that I willingly put myself forward to learn were:

• Unit Testing: There were no unit tests written for the FE when I started, but by the end of my time at NPR, the coverage rose to above 30% — definitely was a team effort but I’m proud of myself for writing the most unit tests I’ve ever written since probably my software testing class in college.
• Work sometimes through unexpected things your way such as new priorities. I learned a lot about new areas such as cookies and ad management, which is not at all what I expected to learn on the job, but because of necessary integrations, I had to learn and help deploy those integrations before certain deadlines.