Expanding Horizons: From DevOps to Full-Stack Development

Hello, Hashnode community!

As I continue my journey in the tech world, I’m excited to share a significant update. Until now, my focus has been primarily on DevOps, diving deep into various tools and practices. However, I'm now expanding my focus to include full-stack development, particularly the MERN stack (MongoDB, Express.js, React.js, and Node.js). This new direction will not only enhance my skill set but also allow me to work on integrating full-stack development with DevOps practices in exciting new projects.

What You Can Expect

1. DevOps Insights: I will continue to share valuable insights and solutions related to DevOps. This includes practical tips, tutorials, and solutions to common issues I encounter. Expect to see more in-depth articles on CI/CD, infrastructure as code, automation, and cloud services.

2. Full-Stack Development: I am diving into full-stack development, starting with the MERN stack. You can look forward to content on building and deploying full-stack applications, best practices in modern web development, and integrating frontend and backend technologies.

3. Combining DevOps and Full-Stack Development: One of my main goals is to create and share projects that combine both DevOps and full-stack development. This means exploring how to efficiently deploy, manage, and scale MERN stack applications using DevOps tools and methodologies.

Recent Learnings and Projects

DOM Manipulation:

What I Learned: I explored various methods for manipulating the DOM, including document.getElementById, document.getElementsByTagName, and document.querySelectorAll.
Error Encountered: I tried using document.getElementsByTagName("h1").innerHTML directly, but encountered an error because getElementsByTagName returns a collection, not a single element.
Solution: I accessed the element from the collection using heading[0].innerHTML, successfully modifying the content.

Running JavaScript in Node.js:

What I Learned: I realized that Node.js does not support DOM-related commands like document, as it is not designed for browser environments.
Error Encountered: I faced a ReferenceError: document is not defined while running DOM-related JavaScript code in Node.js.
Solution: I understood that DOM manipulation must be performed in a browser environment, not in Node.js.

Using `innerHTML`:

What I Learned: I learned how to use innerHTML to modify the content of an element in the DOM.
Example: I successfully changed the content of an element without using an event listener by assigning new HTML to element.innerHTML.

Using `$0` in Developer Tools:

What I Learned: The $0 variable in the browser's developer tools refers to the most recently inspected element in the Elements panel. It allows for direct interaction with that element in the console.
Practical Use: I used $0 to quickly change the content of the inspected element.

Summary of `innerHTML` vs. `textContent`

innerHTML:

Purpose: Sets or gets HTML content, including tags and formatting.
Use Case: When manipulating HTML content.

Example:

  element.innerHTML = "<i>Italic Text</i>"; // Renders HTML elements

textContent:

Purpose: Sets or gets plain text content. HTML tags are treated as text.
Use Case: When dealing with plain text.

Example:

  element.textContent = "<i>Plain Text</i>"; // Displays tags as plain text

Rendering:

Definition: The process of displaying content involves parsing HTML, calculating layout, and painting content with styles.

Looking Ahead

I’m eager to continue this journey of learning and sharing. If you’re interested in DevOps, full-stack development, or combining the two, stay tuned for upcoming articles and projects. I’ll be posting updates on my progress and insights, and I look forward to engaging with this vibrant community.

Check out my personal practice repository on GitHub: DOM JavaScript Practice

Thank you for your support, and I’m excited about the new content and projects we’ll explore together!

Best regards,
Arham Iqbal