Learning Webpack And SOLID Principles

This is my First ever post in dev.to and Im not very particular at formatting so you have to forgive me.

So I've been studying WebDev for 5 months now using The Odin Project as my guide for a Structured program and I've taught myself how to become more independent in looking up things and this made me more curious and made me want to learn more about web development thanks to TOP, concepts are the things that i look forward to learning and backend development, I've started this journey because i wanted to do something with my life and i don't want to cause anymore trouble or become a hindrance for my mother who's always supporting me throughout this whole journey of self-studying Web Development.

this is not a success story but more of a journal to see my progression and blog to get people's opinion and perspective on the topics that I've learned and if I've interpreted it or understood them correctly, so please do tell me if I understood some of it wrong and correct me, i don't want to be ignorant and oblivious about important concepts.

I've only used dev.to recently and was amazed of how abundant the resources you could learn from it, its crazy, so anyways this is the last 2 weeks of August 2022 of what i've learned.

What I Learned This week

19th - 20th week of TOP:

19th Week

I've just finished working on the Restaurant Page Provided by TOP, I've learned a lot about webpack5, how to bundle up modules so that we can decrease the size of our project (minifying it), how to structure our project using webpack eg: the dist (distribution) folder is where all of our modules are bundled up together in one output called 'main.js'(for my case, you can name your ouput whatever you want) and images or resources are also outputted there in the dist folder this will take our script at 'src/index.js' as the 'entry point', there are still gaps in my knowledge about webpack, i don't know why the resources' local url that are being used in our modules are being converted to different names after outputting it, i might look it up in the future.

In the Asset Management section in webpack documentations where if we want to use different types of file besides javascipt we could use a 'loader' or the built-in Asset Modules, understanding it is pretty straight forward(i think), the 'test:' property looks for a specific type eg: .css, .png or .jpeg and the second property "use:" uses the 'loader' that we installed using npm for that specific type of file or 'type' that doesn't take in a loader but instead uses the built-in asset module in Webpack eg: 'type': 'asset/resources'.

Parsing different file types into Json

We can use Json files and read other types of files (toml,yaml or Json5) and convert it into Json using a custom parser of a specific webpack loader.

first we install them and then inside webpack.config we use the require function on each file eg:'require('yaml')', then we do the same thing when we want to use different file types, "use" and "type" looks for the specific type extension, then use its loader, and now we use the 'parser' object with a 'parse:' property for each file type and in that 'parse' property we type in whatever that file type is with a '.parse' at the end to use the parse method, and then just import it to wherever you want to use it.

Script Automation

Script Automation, everytime we try to run our project after every change we need to build our wepack or project and referesh the page, but this task is tedious and no one wants to do a very small task just to see if a code actually works, 'watch' and 'web-dev-server' are helpful tools for that problem, watch build our projects whenever we save it without having to type in 'npx webpack build', it watches all the files within our dependency graph for change and if one of those files are changed, the 'watch' will recompile it automatically so we dont have to build it everytime.

In the package.json scripts property object we can make a property inside of it called "watch" and the value of it "webpack --watch" now we can do "npm run watch" from the command line.

Now for Web-dev-server this one provides a web server and has the ability to use a live reloading, (because watch doesnt have live reloading), first we need to install the module '--save-dev webpack-dev-server', after that we need to choose what file we want to serve (in this case the dist folder) so inside webpack config we add a devServer object and add in a property called 'static' with a value of './dist' this tells webpack to serve the files from the dist directory on localhost:8080 webpack server serves bundled files from the directory defined in output.path, then after that we go to our package.json to add a script called "start" with a value of "webpack serve --open" now we can just type in the command 'npm start' to run the webpack dev server.

20th Week

OOP Principles:
Currently im still trying to build up my knowledge to understand this concept which is pretty simple but some articles and blogs are using too much techy and abstract words and makes it more harder for me to understand some of it, but im slowly understanding the implementation of the SOLID principle:

Single Responsibility
Tells us that every module or class or function should only have one responsibility which is very self explanatory and it should not do anything else aside from that one thing, for example: if i make a Person class that makes a person then that class should just MAKE a person, not make person run jump or walk, Another one is a Book Class which just makes Books OR a basic calculator function that takes in 2 numbers and outputs something based on what operation the user uses, this function calculator SHOULD ONLY calculate things not display it to the user, you could do that in a separate function to achieve that.

Open/Closed
This one is easy to understand too, this one is used for extensibility of a Class or module or Function, so that we dont have to tinker the innards of a fully functioning Class or Module or function because modifying a built class or module would probably break the code and would need refactoring to cater different functionalities in the future.

Liskov Substitution
This tells us about having our dervied class from a parent class, to be able to be a substitute of a parent class, this one is achieved by using inheritance
--this is all that i understood from this principle because i still haven't been able to apply this to any of my projects YET but i think i'd be able to understand this one easily and apply this to one of my projects with further research, there's probably more to this or this is maybe all there is to it.

Interface Segregation
An easy one, this basically means that our Classes or subclasses should not have any methods that they dont need and shouldn't be forced to use any of those methods, one of the fundamentals of composition over inheritance.
these extra methods should be removed or tucked away, it should only execute actions that the Class requires.

Dependency Inversion
This part is still pretty tough for me to comprehend as i said in the Liskov substitution, i haven't been able to implement this principle yet, but i would love to explain it from how i understood it.

So what this one means is that if there are 2 classes or modules that need to work together for example a Class A, the has data of a customer and Class B that wants to output that data of the customer, but in order for Class B to output that data from Class A, we need to reference the Class A in Class B which violates this principle, because what if we want to have a different data from Class D(different :D) then this would cause problems in our program, because Class B only references the Class A, and if we want to use Class D we'd have to modify our Class B in order to cater different data that we want to import and use in Class B, so in order for us to avoid this conundrum, we would have to have a mediator between Classes A and D and Class B, or an interface if you will, this interface will connect the data from Classes A,D to B without having to disrupt or modify the functionality or behavior of Class B.

Summary
I've learned a lot in 2 weeks and have a long way to go since there are still a few gaps of my understanding in Webpacks and the SOLID Principles.
I'm hoping this community would help me understand more concepts in the future and i could really learn a lot from this community.