Skip to content

Latest commit

 

History

History
57 lines (45 loc) · 2.43 KB

README.md

File metadata and controls

57 lines (45 loc) · 2.43 KB

Notes and Possible Improvements

  • Web accessiblity (lack of time)

Page 1:

Accessed by ./page1.html in browser

  • Better fetching and loading of data by pagination and lazy loading.
  • Group posts by user: Another method I've tried is to use hashmap of user:postId. Will also be able to store sorted postIds.
/**
 * Hashmap where keys are user IDs (int)
 * and values are arrays of: post IDs (int)
 * @typedef {Object.<number, [number]>} UserPostMap
 */
const userPostMap = {
  1: [1, 2, 3, 4],
  2: [5, 6, 7, 8],
};

Page 2:

Accessed by ./page2.html in browser

  • Only used most basic 4 interfaces (AudioContext, AudioNode, AudioBuffer, AudioBufferSourceNode). Can try out others like GainNode and OscillatorNode.
  • Used fetch instead of XHR
  • Used external .ogg files hosted by archive.org because of CORS. Provided .ogg files can be re-hosted on a server with CORS access (lack of time).
  • Ideally will have better separation of business and UI logic.
  • Notes:
    • Multiple audio files can be played at the same time. Depending on requirements, may or may not be a functionality that is needed. In this case, will have to stop playing of one source node before starting another.
    • Have to create a new AudioBufferSourceNode for each play action, otherwise expect DOMException: Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once.

Comments:

  • sort() returns a reference to the original array, so const sorted = array.sort(...) is redundant.
  • You can use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare for sorting alphabetically, it more "correct" as it handles edge cases and, more importantly, should be simpler to use.
  • It seems like the CSS was a bit neglected, just by looking at the formatting.
  • Using "float" with "clear" for alignment works, but it's a "dated" technique.
  • The width values are not working as expected, the "columns" are uneven on a wide viewport.
  • I feel like the CORS could be addressed quickly by having some hosting solution ready to use (like GitHub Pages), but no big deal.
  • The audio page works fine.
  • Writing JSDoc is definitely a nice touch.

In general, functionalities are working as expected, but it is falling short on the CSS. I believe you could have avoided the layout problem entirely if you opted for flexbox or CSS grid, or maybe just used more "defensive" CSS.