A clone of the backstage talks website
To practice my frontend skills using a bottom-up approach by first adding the basic styles, then designing sub-components, block-level components then finishing with the whole page.
In addition, I wanted to create this page as a layout to my pottery website.
On desktop, swipe up/down or use the keyboard up and down keys to move between issues. On the mobile version, just swipe up and down to move to the different issues.
Using Chrome dev tools to check if the site is responsive is nice, however it does not emulate touch events from a mobile. In order to test the mobile version, we first need to make sure both the computer and phone are on the same network, then get the local IP address of the network.
On the desktop, the live server will be deployed at a url like the following: http://127.0.0.1:5501/index.html. If we break it down into parts, this is how the url is structured http://[local_ip_address]:[port]/[html_file].
Replace the local host ip address in the browser (either localhost or 127.0.0.1) with your networks ip address, and enter the full url into your mobile browser!
Here's an article explaining it a bit more.
Developing on the mobile can be hard when you don't have access to the browser dev tools we have on the desktop. Eruda makes this process easier during development.
It's as easy as just adding the following script to the page, and voila! Dev tools on mobile browsers!
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>We can inject HTML elements into the DOM using template literals in javascript. Here is an article describing it.
However, it's probably best for future iterations to structure the files following an MVC pattern.
Within the template literals, I initially tried loading the pictures dynamically depending on the issue id, but that did not work. During build time, the bundler doesn't recognize that the string literal for the image urls are for image urls so it cannot import it properly. Hence we need to import it into the javascript file either by using import or require statements.
In order to improve this website, the following should be looked into:
- urls to the correct link items
- use the MVC pattern to organize the javascript files (and make the file naming more meaninful)
- refactor, and remove redundencies and duplicated code (slipped 🍌 in the end and css and js files are quite messy)