DEV Community: Rodman Lavalais

A dive into IDEs

Rodman Lavalais — Mon, 17 Jun 2024 04:19:01 +0000

IDEs, which stands for Integrated Development Environments are tools that are super important in the entire subject of software development. They produce a available foundation for software engineering. A Integrated Development Environment include features like a debugger, a open source code editor and more. Integrated Development Environments are essential when it comes to software development and its entirety. Believe it or not, there's a high chance that you've already used a IDE and still might currently be using one without even knowing! There's many benefits and popular examples of the use of Integrated Development Environments, providing a very critical role in the programming world.

Integrated Development Environments simply are a collection of programs bundled together to provide solutions to different tasks. The main objective for Integrated Development Environments is to allow allow the efficiency of developers to be boosted with the best results by allowing developers to debug, testing and writing their code. This is wonderful, because not only can a programmer have the ability to write code to be executed, they can also test it and put a debugger to use that will work through the problems in whatever code they're dealing and while doing so they wouldn't have to use a variety of separate applications or mechanisms.

When it comes to the components that makes a Integrated Development Environment complete, there are several different parts which all play different roles. First there is the Source Code Editor, which is a text editor that is created for the sole purpose of writing and modifying code. The source code editor include features like bracket matching, which informs the developer whether or not their syntax is correct, it's very cool and appealing to the eye how it all operates. You'll be very contempt in whether or not your syntax is written correctly, because if not it'll notify you. Another awesome feature of the source code editor is code completion, which is when a user is typing code, it'll suggest a continuation that offers to finish the code out for you what it concluded would be best.

Next there's one of my favorites, which are the debuggers. Debuggers are super cool, because they literally are there to help you in being guided to fix your code if there are any errors in how things are set up. The debugger allows individuals to execute their code a step at a time, seeing the exact order execution went from beginning to end. Also, inspecting variables and and controlling the flow of things. By offering a real time look into the developers code behavior, debuggers assist these individuals into spotting the exact location where the problem within the code occurred. Which drastically can reduce the amount of time spent on developers troubleshooting, trying to figure out what went wrong and where. This significantly improves workflow and allow the code to be trustworthy before being complete.

There's a compiler, which is important because it transforms the written code into a format where the machine is able to understand it. The role that compilers play are very crucial for code to be readable. High level programming languages are converted are into executable instances that the hardware is able to actually understand. It's common for Integrated Development Environments to include compilers built in, to showcase testing, coding and debugging, allowing developers to write code that is immediately compiled, so they are able to see the output real time, in the present environment they're in.

Integrated Development Environments bring a lot of benefits, by consolidating all the features that would be extremely significant to developers, into a single interface. Integration inside of Integrated Development Environments amplify the overall software engineering experience by supplying workflows and better chemistry between multiple characteristics of the software engineering process. Creating a environment producing a great chemistry includes connecting many different tools in the developer world. As spoken about before, like the interpreters, the debuggers, source code editors and more. The Integrated Development Environments are simply just interfaces where all those features, plus more are ready for a software engineer at their hand, in a moments notice if they need it or not. This allows the simplicity when it comes to switching between things like coding, testing, and debugging, which we all know is so fundamental in the software engineering world.
The most popular Integrated Development Environment, is one that I and many other people use world wide. It's called Visual Studio Code (VS Code) and it was developed by Microsoft. One of the reasons that it's so popular is because it's free and the amount of versatility that's enabled inside of it. An example of Visual Studio Code being versatile is the different amount of programming languages that it supports. Not only is Visual Studio code very useful, it's also very appealing to the eye, allowing users to customize the program in so many ways that makes it more appealing to them. It's also available on Windows, Mac and Linux which is super cool.

Integrated Developer Environments (IDEs) are so fundamental in the coding world, and so many people use them without even knowing it. I certainly didn't know I was using a Integrated Developer Environment for a long time, before I found out what it was. It's fundamental for meaning the life of a software engineer easier and reducing the amount of time and steps it takes to do certain things.

Sources:

https://aws.amazon.com/what-is/ide/

https://www.codecademy.com/article/what-is-an-ide

https://www.redhat.com/en/topics/middleware/what-is-ide

https://www.veracode.com/security/integrated-development-environment

https://www.youtube.com/watch?v=vUn5akOlFXQ&pp=ygUOd2hhdCBpcyBhbiBpZGU%3D

https://www.youtube.com/watch?v=4Q3tw7sc1ZA&pp=ygUOd2hhdCBpcyBhbiBpZGU%3D

A dive into hacking and its evolution

Rodman Lavalais — Mon, 03 Jun 2024 06:00:24 +0000

Hacking is such a interesting topic, that I’ve always found completely fascinated. Hacking explained in one of it’s outer most layers simply refers to the act of manipulating or modifying systems and or devices to achieve objectives aside from it’s original goal. Now trust me I know when you hear that you may picture some under the radar geek in a dark room, with dramatic motions and random characters floating across a computer screen like exaggerated in movies, but I can assure you it’s one of those situations where the phrase “everything is not what it seems” fits perfectly here. Even though hacking is often looked at in a negative spotlight, understandably due to it’s relationship with illegal acts ranging from all sizes, it also can be used for many positive things also. Understanding hacking becomes easier to grasp once the individual allow themselves to be open minded, and consider the evolution of it, and the possible impacts its able to have within society.

The early days of where hacking was first becoming in the computer world can easily be tracked all the way back to the 1950s, where hacking was first used a cool nerdy term, meaning how creative could one get inside of the programming world. Passionate programmers wanted to see how far could they achieve modifying code, letting their imaginations roam wherever it possibly could. This was nothing more than curiosity of a specific niche, just like any other lane of focus. When people become so comfortable and experienced with something, it’s natural for their minds to roam and wonder exactly how far they can go. In some cases it’s even possible for some individuals to not just wonder how far they could go, but just repeatedly push their limits.

At the prestigious Massachusetts Institute of Technology (MIT) there was even a club called the Tech Model Railroad Club, which was affiliated with early computer hackers, having originated many different hacking styles and traditions. The tech savvy individuals within the Tech Model Railroad Club, would go on to create the blueprint that would go on to become known as the hacker culture, which stood on the values of keen problem solving, adventuring, and attacking curiosity. These students primarily focused on exploring ways to manipulate and modify complex systems.

As time went on in the years and technology became more advanced and popularity increased throughout society, the presence of hacking gained an even larger amount of individuals. With the personal computer making a uproar in the 1980s, this was the perfect opportunity for individuals all throughout society who had curiosity for technology to finally get a taste and see what they can do when it came to modifying these complex systems. It allowed innocent individuals to see how far they could let their creative minds roam within the computer world, and make their ideas come to life. However, with this being possible, as all things we know comes a dark side too. As one side allowed the harmless developers to let their creative brains roam free, it also birthed a generation of hackers seeing exactly how far they can go when it came to damaging systems taking actions with bad intentions.

There’s three different types of hacking which has to do with ones intentions and lawfulness. There’s white hat hacking, black hat hacking and gray hat hacking. They all independently stand for their own sole reason for existing, each being different than the other.

White Hat Hacking is also known as ethical hacking, and this primarily focuses on attempts to attack systems and identify vulnerabilities and improve security with given permission. These type of hackers play a very important role within cybersecurity, commonly assisting organizations in protecting their content or data from different type of attacks. These individuals are very useful for increasing protection from potential hits.

Next, there is Black Hat Hacking, which is hacking done without permission, usually for the most part involving illegal activitity being done without good intentions. These type of hackers find weaknesses within systems, and utilize them for their own use, which can include stealing information, or simply just attaking a system and making it not work properly. These powerful hacks can cause corporations or individuals to lose money, or lose data.

Finally there is Gray Hat Hacking, which is not so much Black Hat Hacking, but also not so much White Hat Hacking either. These type of hackers fall in between. They do things like gain access to weaknesses within systems without permission, but there isn’t any bad intentions behind them doing it. If they are seeking weaknesses within a system, and successfully get through their protection, even though their intentions aren’t bad, they still want a reward for doing it. Which isn’t so bad at all, and is honestly expected.

sources:
http://tmrc.mit.edu/hackers-ref.html

https://www.proofpoint.com/us/threat-reference/hacking

https://www.techtarget.com/searchsecurity/definition/white-hat

https://www.cybersmile.org/what-we-do/advice-help/online-security/hacking

https://digitalskills.ce.ucf.edu/cybersecurity/black-or-white-into-the-mind-of-the-hacker/

https://onlinedegrees.sandiego.edu/black-vs-gray-vs-white-hat-hackers/

What is Unreal Engine?

Rodman Lavalais — Mon, 27 May 2024 06:53:16 +0000

Unreal Engine, which was created by Epic Games has transformed the game development industry with its powerful abilities and versatile qualities. It is by far one of the coolest things I have ever seen, and being a video game lover as much as me, I’m so excited to tell you all more about how Unreal Engine has appealed to gamers and developers all across the world. I will talk about the designing aspect, the key features, the process of development and how the application further than just video games is present when it comes to Unreal Engine. By examining its rendering capabilities, physics system, and blueprint scripting, we will clarify why Unreal Engine continues to be a favored choice for developers worldwide. It’s no question asked about if it’s a favorite to me, because literally anyone get take the right steps toward furthering their education when it comes to creating gaming, even if its something really small.

Unreal Engine has made an appearance to be one of the most popular and successful gaming engines, smoothing out the process of creating widely interactive experiences. The amount of imagination one can have is truly amazing, considering how far the visual aspects and and user interaction in fiction worlds have come. Since first being brought to life in 1995, Unreal Engine has underwent a tremendous amount of modifications and updates to make process of gaming development more appealing to users all around the world. There’s so much to inform about when it comes to Unreal Engine, like it’s design, core features, and it’s impact on things further than just gaming, it’s a lot more crazier then you may think.

One of my favorite things about Unreal Engine is the Blueprint Scripting system. Blueprint scripting adds what you can compare to sort of a democracy aspect to game development by enabling individuals to contribute directly to gam creations. The visual scripting language enables for interactions and the presence of complicated conduct, even without having a huge amount of knowledge when it comes to programming. This aspect of Unreal Engine decreases the amount of time it takes to produce aspects of games and interaction. This is so cool, because think of how cool it would be to create game mechanics without fully resulting to traditional code, and doing it with a node based interfaced to create these aspects.

A key feature of this facet is that it has a blueprint scripting has a node-based interface, with each node representing a function or a variable. If you’re familiar with JavaScript, it’s most likely true that it’s not your first time hearing that term node. These nodes can be events, variables, or even actions that are able to be connected together to define game responses.

Another major part of this node based interface is that there’s also these things called pins and wires. The nodes have input and output pins, which are attached by wires to enable the flow of everything. The data wires that are blue, while the execution wires are white all work together proceed and execute properly.

The program language that Unreal Engine uses to develop games within the application is C++. C++ allows a developer to have a large amount of control over the hardware, which is important in enabling a game to run on more than one platform. Platforms meaning like consoles, mobile devices like phones or tablets, and PCs. It's also very popular in today's time for games to have a thing called cross-play, which is basically allowing different platforms to still play with one another. Whereas bac then, for example, only consoles could play with consoles, PCs with PCs, and so on. C++ excels in performance and efficiency, which is critical in having authority over memory management.

Unreal Engine is a wonderful creation that has made the imagination of individuals all throughout the world possible, without every step being so complex. By democratizing access to high-quality tools and providing a robust, user-friendly platform, it has empowered creators to bring their visions to life with unprecedented ease. Whether it's in game development, film production, or virtual reality, Unreal Engine's versatility and powerful features continue to push the boundaries of what's achievable. This innovation not only fosters creativity but also accelerates the pace of technological advancement, making it an indispensable asset in the digital age. It's one hundred percent, no question asked, a technology I am excited to further learn about!

Sources:

https://en.wikipedia.org/wiki/Unreal_Engine

https://cghero.com/glossary/what-is-unreal-engine

https://www.wholetomato.com/blog/2022/05/24/do-i-need-to-know-c-for-unreal-engine/#:~:text=Game%20engines%20such%20as%20Unreal,often%20implemented%20in%20C%2B%2B.

https://docs.unrealengine.com/4.26/en-US/ProgrammingAndScripting/ProgrammingWithCPP/

https://docs.unrealengine.com/4.27/en-US/ProgrammingAndScripting/Blueprints/BP_HowTo/PlacingNodes/

https://www.youtube.com/watch?v=tCJ3174CssY&ab_channel=GorkaGames

https://docs.unrealengine.com/4.27/en-US/ProgrammingAndScripting/Blueprints/QuickStart/

JavaScript Designs — Observer Pattern

Rodman Lavalais — Mon, 22 Apr 2024 02:34:34 +0000

When it comes to JavaScript design, the Observer pattern also known as the subscriber pattern, is a developmental design pattern that involves a object, which is also known as subject authorizing a list of its dependent which are called observers or subscribers. What this specific pattern does is give objects the ability to distribute information to one another without having explicit knowledge of each other. The instance of Observer Patterns are very popular when being put to use by developers, as they are used in numerous domains across software engineering. It’s common for them to be present in event driven systems, MVC’s and graphical user interfaces.

Understanding the livelihood of Observer Patterns involves being aware that two critical components lie at the heart, being the Subject and the Observer. The subject is is the operation being spectated or examined, which handles a list of observers and enable methods to add, remove and notify them. Observers on the other hand deals with receiving updates from the subject, also while including a implemented method that notifies changes to the subject condition. This promotes decoupling, when is when the observers are not squeezed with the objects, they having breathing room to be added or removed, without affecting other observers or the subject.

It’s important to expand more on observers, as it can sound similar to what a subject does. When the state of a subject changes, in any way, shape or form, it informs all observers, allowing them to process the information.

Observers have a implemented method, that allows them to retrieve and handle this incoming information from the Subject. This is known as the ‘update()’ method, and it enables the action that observer absorbs in response, while making needed changes in the subject.

Observers play a essential part in forging the one-to-many relationship between the subject and all the observer content. They implement loose data transferring between objects, due to the subject not needing to have direct knowledge of the observers.

So in simple terms, subscribers are the objects that enable the receiving of notifications from the subject and create functioning methods that handle these changes when they present themselves. Basically being the connection of communication between all objects, without them having direct access to each other.

Subjects naturally have data that will usually change over time. When the state of the subject changes, all the observers we spoke about servers are informed, by invoking a specific callback on each observer.

The Observer Pattern declarations can be created with the class keyword inside of JavaScript. Inside of the class, a construction function is created also, which then the observers array is created. Outside of the constructor, the methods of the Subject are then declared. These being the methods that deal with the observers. First there is a method for adding observers, which adds the brought up data into the observers array. There’s also the method for removing the observers. Last but not least, there is the method for notifying the observers of any changed that have been brought up in the subject at all.

The whole idea for Observe patterns is in it’s name, the changes are being observed, and taking note of any changes inside of objects, down to the smallest thing that was altered.

Observe patterns are all about communicating, while still allowing the data in difrerence places to be stored and flexible. However, the fact that there can be so many moving parts at any instance when it comes to dealing with objects, it’s important to not have too much information all clunked up together. That’s why the data being loosely stored plays a root, in all of the methods having their own declaration, instead of everything being bunch up in one small part together. Let’s say we had a new class instance that dealt with a button being clicked. The moment we clicked that button, let’s say we have an observer that outputs the console log of saying “this button has been clicked”. The moment that button is clicked, it is transferred to the addObserver() method, which in consequence pushes that observer to the observe array, that’s in the construction array of the class. That data is stored in that array, and then notified.

Another good example would be if we had a teacher dealing with student grade performances in a classroom. The final grade would be the subject, because every new performance that the student or students result in, would have be information thaqt needs to be stored, and immediately resulting in a change the final data. Whether their final grade raises or lowers, it’ll all be beacuse of their input. The teacher communicating with the grade book would be the communication of all observers. Adding grade, removing grades, applying fixes or corrections. All of these changes, no matter how big or small would be observed and have a effect on the final output.

Sources:
https://en.wikipedia.org/wiki/Observer_pattern#:~:text=In%20software%20design%20and%20engineering,calling%20one%20of%20their%20methods.

https://www.tutorialspoint.com/design_pattern/observer_pattern.htm

https://www.youtube.com/watch?v=wiQdrH2YpT4

https://www.geeksforgeeks.org/observer-method-javascript-design-pattern/

https://javascriptpatterns.vercel.app/patterns/design-patterns/observer-pattern

https://www.youtube.com/watch?v=PldXoGemkyk&pp=ygUaamF2YXNjcmlwdCBvYnNlcnZlIHBhdHRlcm4%3D

What is event bubbling?

Rodman Lavalais — Mon, 15 Apr 2024 01:04:47 +0000

Event handling is a foundational aspect of web development, that deals with the Document Object Model, allowing developers to create interfaces that are dynamic and enables interactivity. With the ample amount of knowledge out there surrounding event handling, event bubbling is a very essential feature to apprehend. With a base understanding of what event bubbling is, and how useful it is, developers acquire the ability to build powerful and structured web applications. It's name may trick you into thinking it's a small fun feature that doesn't require any usefulness, but soon you'll understand significance of it's usage.

Event bubbling is a appliance in the Document Object Model, where the event on inner most target element is effectively triggered, then successfully propagated through the rest of the Document Object Model tree. In this instance, that same event is transferred to its' ancestors (parent elements), upwards in its' hierarchical manner, until it finally reaches the root of the Document Object Model.

Below is an visual example on how event bubbling works, with a simple HTML document including nested elements:

<div id="element3">
  <div id="element2">
    <button id="element1">Click Me</button>
  </div>
</div>

Let's also add some attached event listeners to each of these elements:

document.getElementById('element3').addEventListener('click', function() {
  console.log('Element3 has been clicked!');
});

document.getElementById('element2').addEventListener('click', function() {
  console.log('Element2 has been clicked!');
});

document.getElementById('element1').addEventListener('click', function() {
  console.log('Element1 has been clicked!');
});

Now let's say the "Click Me" button get's clicked, three things here would happen in order. First, the click function would execute it's code block, resulting in a console.log of "Element1 has been clicked!". Next, that same event listener would then bubble (transfer) up the hierarchical structure, going to it's parent element, which is a div element that holds the id of "element2". Then the event handler in this element would be executed, resulting in a console.log of "Element2 has been clicked!". Bubbling one more time to the root, which in this example is the div element that holds the id of "Element3". Last but not least, it's event listener would be executing, resulting in "Element3 has been clicked!"

In the showcased example above, in short term every event listener was invoked starting from the inner most element, then propagating upwards in the hierarchical straight the Document Object Model represents.

Event handlers can be extremely powerful, reducing the amount of code written. They allow developers to apply the event listeners to parent elements, instead of applying them to every single child element, greatly reducing the amount of code needed.

For example, below is an example of how event bubbling could be significantly useful in a simple visual manner.

<div class="New Orleans">
    <div class="ward" id="3rd">3rd Ward</div>
    <div class="ward" id="7th">7th Ward</div>
    <div class="ward" id="9th">9th Ward</div>
</div>

<script>
    // Attaching event listeners to each child element individually
    document.getElementById('3rd').addEventListener('click', function () {
        console.log('Clicked on 3rd Ward AKA the best ward');
    });

    document.getElementById('7th').addEventListener('click', function () {
        console.log('Clicked on 7th ward');
    });

    document.getElementById('9th').addEventListener('click', function () {
        console.log('Clicked on 9th ward');
    });

</script>

With this example above, event bubbling is not being used, so an event listener would have to be added to each individual child element, to invoke the event handlers. As you can imagine, if there were a large amount of content, this would be very irritating.

Now below, let's do this same thing, but with an event bubbler on the parent element!

<div class="New Orleans" id="wardSelector">
    <div class="ward" id="3rd">3rd Ward</div>
    <div class="ward" id="7th">7th Ward</div>
    <div class="ward" id="9th">9th Ward</div>
</div>

<script>
    // Attaching event listeners to each child element individually
    document.getElementById('wardSelector').addEventListener('click', function (event) {
        if (event.target.classList.contains("ward")){
            console.log('Clicked on ' + event.target.textContent);  
            //.target refers to the specific element that triggered the event, in the event object
            //.textContent dispatches the text content of the specific element
        }
    });

</script>

Here the outcome is the same, however the code has been greatly reduce!

Now thinks about all the awesome components or aspects that can be creature using a feature like this. Above just shows the tip of the ice berg, imagine what a team of individuals combined with the determination of creating an mind blowing application could create. The possibilities could be limitless, all while being given the option to reduce the amount of code that has to be written as much as possible! So much data could be stored, so many options or objectives could be visualized and represented. All because of a very critical feature, that has a fun goofy name like "event bubbler"!

After being shown the awesome examples above, it becomes quite clear to understand that event bubbling is a foundational feature inside of JavaScript, when it comes to the topic of event handling. When it's present, it authorizes well structured web applications, which is involved in interactivity by developers. By having a clear understand of the how critical and necessary event bubbling is, a developer can easily appreciate its importance when it comes to the topic web development. The consequence of it involves developers being able to implement well polished, sustainable code.

Sources:
https://www.youtube.com/watch?v=KaHZdW02Tg0&pp=ygUWV2hhdCBpcyBldmVudCBidWJibGluZw%3D%3D

https://www.freecodecamp.org/news/event-bubbling-in-javascript/#:~:text=What%20is%20Event%20Bubbling%3F,gets%20to%20the%20root%20element.

https://en.wikipedia.org/wiki/Event_bubbling#:~:text=Event%20bubbling%20is%20a%20type,object%20(Provided%20the%20handler%20is

https://www.loginradius.com/blog/engineering/javascript-events-bubbling-capturing-and-propagation/#:~:text=Propagation%20refers%20to%20how%20events,until%20it%20reaches%20its%20destination.

https://www.youtube.com/watch?v=N9vEXAWPynU&ab_channel=DeeecodeTheWeb

How is the DOM created?

Rodman Lavalais — Mon, 08 Apr 2024 08:50:42 +0000

The DOM (Document Object Model) is a very essential tool and widely used by programmers in today's time. The DOM is an API (Application Program Interface) which results in the layout of intentional content by a user, and how it is accessed or manipulated. The Document Object Model is made up of nodes, that are put into a hierarchical structure, that's allows a user to have complete control of what's going on. It helps to visually understand that the Document Object Model is just a HTML document, represented as a JavaScript object. When a web browser receives a HTML document from a server, the first action it takes is parsing the entire file, which involves making every element in the HTML document a node, and setting it in it's correct position inside of a hierarchical data structure.

The Document Object Model is an API, which stands for Application Program Interface that sets the blueprint of content, allowing it to be accessed and manipulated. The Document Object Model isn't a program that runs, it's sole reason for existing is to navigate through the content on a webpage, while having complete control over it. When the browser parses through the HTML document, a DOM tree is created with a tree like structure, that is filled with nodes. These nodes are what were the elements in the HTML document. For example, some would be the head, body, div, and img just to name a few.

Data sent to the server is stored in the Document Object Model, which can then be accessed using JavaScript. Without the Document Object Model, web browsers wouldn't be able to properly communicate with HTHL documents, resulting in a static like situation, refraining from allowing individuals to have a interactive experience with the webpage as whole. The DOM is needed by the browser to parse through the HTML received from the server, which means without it the browser wouldn't be able to understand the structure of the HTML document. Organizing the content properly is very important in rendering content properly on the webpage, which once again wouldn't be able to be possible with the DOM, because that is what organizes the nodes properly in the hierarchical structure.

The Document Object Model also is the reason behind allowing essential functional interactions like clicks, mouse motions, and even keyboard inputs. It should start becoming more and more aware, exactly how vital the Document Object Model is, to being in complete control of your code. Event handling would not be possible, and web pages would have a scarce amount of interactivity. That is not desirable in a world, where we envision having the power to not just access content on a web page, but also modify whatever we please.

JavaScript and the Document Object Model were once tied together, but as things evolved, they each separated and stood separately. It's not shocking, as change is inevitable, especially with something as fast as coding.

Since the Document Object Model is simply the HTML document represented as a JavaScript object, when one is updated, so the the other. If anything is edited on the tree-like structure of the Document Object Model, it will make the exactly same change, or changes in the HTML document, at the she same time. Whether it's modifying, adding or deleting nodes, any type of manipulation done to the tree-like structure will make those same changes in the form of the HTML document. Same vice versa, if a type of manipulation is done to the HTML document, the same exact change will take place in the Document Object Model. Once again, this is all possible, because of the what? The Document Object Model. Without that being available and present, web browsers would be unable to interpret HTML documents, resulting in a static like circumstance. The Document Object Model plays a key role in allowing an individual to have dynamic control over web pages

While the parsing of the HTML document is taking place, there is a possibility that a external source may be encountered, such as a script, style sheet, or image. External resources like these are transferred to the Document Object Model asynchronously.

The Document Object Model is a very important tool in allowing individuals in tech to have creative control over their desires, when it comes to bringing ideas to life. It allows us to to have the ability to traverse over the entire file, and modifying anything we choose, even down to the smallest element. Without it, web pages would be at a still, and completely boring, underwhelming and have no interactivity at all! All of this is possible, because of the parsing action that goes into place, when a HTML document is sent to a server. Which then turns every element inside of that HTML document to a node. Which also as a plus, organizes all of the nodes into a hierarchical structure, giving proper placement of each element, allowing the user to correctly navigate through everything, and modify anything if needed.

Sources:
https://en.wikipedia.org/wiki/Document_Object_Model#:~:text=In%20summary%2C%20creating%20a%20DOM,case%20and%20the%20developer's%20preference.

https://engineering.teknasyon.com/what-is-the-dom-how-does-html-rendering-happen-in-browsers-cbeb12bdfea6

https://www.dynamicwebtraining.com.au/blog/dom-element-in-javascript#:~:text=How%20does%20DOM%20works%3F,as%20the%20Document%20Object%20Model.

Are you cool enough to get in? Understanding .filter

Rodman Lavalais — Fri, 01 Mar 2024 15:26:34 +0000

When it comes to .filter, imagine it as a body guard being the security of a party or some sort of get together. The security guards job is to only allow people on that list who meet the requirements. No matter how big or small, if a individual does not meet that requirement they won't be allowed into the function. Everyone who pass the test aka requirements are able to go inside and have a good time, while those who didn't have to watch from the outside. Funny way of thinking about it, but that's exactly how the higher order .filter functions.

Higher order functions are methods that make our life easier, when it comes to completing specific tasks or objectives when it comes to coding. Like if we wanted to loop through a specific data set, and apply a type of conditional, that code can be very long and become very repetitive. Higher order functions are a easier way to accomplish the same goal, while being able to write far less code.

When it comes to .filter, it's a higher order functions we apply to arrays, that when applied, it iterates over every element in the array for us, while returning a final array of elements that only passes the test. For example, if I wanted to look into an array and only return the elements that are less than the number 4, this is how that would look with a regular for loop and conditional

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

let output = [];

for (let i = 0; i < arr.length; i++){
if (arr[i] < 4){
output.push(arr[i]);
}

}

console.log(output);

This here will return the array of output as [1, 2, 3];

However we could achieve this same result with .filter doing

function lessThan4(){
return arr.filter((ele) => {
return ele < 4;
})

}

console.log(lessThan4(arr));

Another cool this about .filter is that it not only iterates through an array for you, but it also returns creates a new array for you, so the original never gets mutated.

So the .filter higher order function acts as a body guard that only let's cool people in (specific elements in a array)...that passes a test. If they meet the requirements, they're allowed to go in and party, but if not they have to hate from outside of the club!