My first ever build of an application from scratch.
Welcome to Tuneage, a digital music player like Spotify that I built to learn frontend web development.
This is not supposed to be a finished product but was part of the learning process of my web development course with Bloc covering core programming topics.
To create this application as a sole developer, working remotely, completing specific tasks outlined by Bloc.
Use Git to maintain a local repository of the project and a remote repository on GitHub, and use feature branches to ensure a smooth workflow and secure version control.
Lastly, deploy my application, enhancing my knowledge of Hosting, DNS and Domain Names.
Some of the many
problems challenges faced in building this application.
- Refactor standard HTML to meet HTML5 semantic requirements.
programming) allow users to pause and play songs, view and adjust playback progress, and
adjust volume, using a combination of HTML and CSS.
- Achieve Responsive Web Development - ensure that the appplication looks beautiful on all
different size screens from wide screen tv’s to laptops to mobiles.
- Refactor the whole app to use the frontend framework AngularJS
- This was not a challenging task, however, becoming familiar with new doccumentation
relating to upgraded web tehnologies is a critical skill in the ever-changing web tech world we
Consequently, I consulted MDN Documentation on HTML5 and refactored the original code. In this instance changing
<div>tags to their corresponding HTML5
- In order to break the task down and keep things nice and organised I created three “control
- Main controls, which contains the play/pause and previous/next buttons.
- Currently playing, which displays the currently playing song information, including the song progress.
- Volume, which contains the volume control slider.
After developing clear and concise HTML I moved on to the CSS creating a user friendly bar using ionicons.
One of the trickier parts was building the song progress and volume bars (“seek bars”):
But using some advanced CSS I was able to achieve the desired look
Lastly, the music player bar was to remain at the botttom of the users view of the screen at all times. This allowed for easy and smooth control of the music playing, without having to scroll all the way to the bottom of the entire page each time.
This was achieved using CSS:
3. The most basic starting point was to set the viewport meta tag.
This meant that the page now scaled to fit the width of the users device.
However, things still didnt look quite right…
divs at the bottom of the page were aligned next to each other using
table-cell; each with a
width: 33.3%;, however to prevent the user from having to
scroll left or right on smaller screens, ideally, it would be great to have them break out of this
fixed table and stack on top of each other for smaller devices.
Say hello to Media Queries.
I created my own grid system which would align the
divs next to each other whilst being
viewed on a medium size screen. If the viewport dropped below the size of a medium screen,
I would use media queries to turn my grid system off, allowing the
divs to fall back into the
‘normal flow’ of the doccument and stack on top of each other.
4. I used a CDN to pull the JQuery library into my app.
Now I was able to evolve from using DOM selectors to JQuery selectors.
This gave me better cross browser support and allowed me to use CSS-style syntax. Overall, this enabled my coding to be more efficent and run more smoothly.
Do you remember those three
divs we made responsive above, how cool if we could make those animated!
And now using the power of JQuery:
Refactoring my code (like the example above) using JQuery selectors as well as methods from the JQuery library allowed my coding and my app to become far more efficient.
However, tackling this learning curve would allow my app to utilise some of angulars core features such as two-way data binding and single page application design.
It is not possible to include everything I did here, but by way of example lets take a look at how I transformed Tuneage into a single page application.
Creating the Templates:
index.html would act as the global file for Tuneage. It would be the page that the user would navigate to, and all other data to be displayed to the user would simply be rendered on this page, without the browser navigating to a separate page.
To implement this we added
<ui-view></ui-view> tags to
Views to be rendered in the global file were created in the
Creating the Routes:
To display these templates in the view, Angular uses routing, which is organized around URL routes. Angular has a built-in router, but Bloc advised that many developers don’t use it.
Instead, we were advised use UI-Router because it is more flexible and features behaviors not found in the Angular tools.
Using dependency injection UI-Router was injected into the apps root module.
Time to configure paths and states:
Although, the configuration was very involved, once set up, this transformed Tuneage into an SPA.
In order to trigger a state UI-Router provided this tag
Given this application was only using front-end web technologies. I had two options for testing, either setting up a local server or simply opening my files in the browser itself. I opted for the latter as this met my needs and was quicker to implement.
Juidicious use of the DOM within google chromes development tool allowed for thorough testing, catching any mistakes or bugs, fixing and then re-testing again.
I was able to achieve the desired outcomes of the course project. However, given this was only for learning purposes there are naturally things that were not required, which in time I would like to implement or complete.
Feedback from my codementor was positive.
Going into my first ever project I was excited but naturally I had doubts, I was being thrown into the deep end, being asked to use high-tech skills to problem solve some tricky tasks and ultimatley produce a working application.
What surprised me the most was actually the amount of good, solid, well written code that is needed to produce a high quality application. However, more importantly, how code efficency from the beggining as well as using the right helper libraries can significantly increase efficiency.
Perhaps one of the most important things I learnt whilst doing this project, beyond the inherent skills themselves, was actually the resources that I could turn to when I felt like I had hit a brick wall.
Becoming familar with asking the right questions and communicating with others over slack or resoursces like stack overflow proved incredibly helpful, when sometimes it takes someone else to see or problem solve from a different angle than you have been pursuing.
Going forward, this learning curve, I am sure, will prove its worth, as being able to utilise and engage with the wider coding community can make (almost) any problem, challenge or task achievable.