Attack of the killer Webpack
(Note that I didn’t have much time this week, so didn’t make as much progress as I had hoped).
Things I've worked on/completed since my last post…
Finished Webpack theory
Started the Restaurant Page
Things that didn't go quite so well...
I felt like I could have re-read the Webpack material eight times and still have been confused. It did not help that I was doing half an hour here and there which almost meant re-starting each bit from scratch each time.
Predictably (judging by past experience), very little of the theory went into my head, in spite of a lot of it making sense as I was reading it. Before starting the project, I gave the theory one last look over and some of it did make more sense this time.
Although I did not feel like I had a great grasp of this before starting the project, I just started it and went through the instructions, asking questions when things were unclear.
I admit to being still confused with some of the commands, especially the ones that need to be run each time you open VS code, but I am trying not to dwell on this too much and just hope that it will become more automatic over time.
Things that went well...
A few things became clearer as I went through the project and referred back to the Webpack material, such as which files are created when (the json file and the webpack.config file for example) and what I might expect to see/find in them.
So far, I am enjoying seeing how the Restaurant page fits together, working with modules, creating all the elements using JS etc.
I found myself using a tool/trick which I learnt from another Odinite a few months back which involved resetting innerHTML to an empty string in order to remove the contents of a page - I was actually trying to remove the display of one page and replace it with another in order to create a ‘tab mechanism’ and this html trick popped into my head and worked perfectly for what I needed. I was delighted to have remembered this #small_victories.
Things I've learnt/need to improve on...
The only way I will get better at Webpack is by using it practically in projects and trying to pay attention to what is going on in the files.
While creating DOM elements in the projects, I became aware of something which I had previously not picked up on up to this point - the fact that when innerText is assigned to a parent node, all child nodes are removed and replaced by only one new text node - this created a problem in the way I had my DOM elements set up and made me realise that I need containers to hold text in the DOM, as those containers will not have an innerText property and therefore, this problem won’t arise.
Plan for the forthcoming week...
To finish the Restaurant project.
Subscribe to my newsletter
Read articles from CodeCara directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by