Understanding Streams and their Role

• Streams are a fundamental concept in Node.js for reading or writing data continuously. They allow data to be processed in chunks rather than loading the entire file into memory.

• In the scenario presented during the interview, with a memory size of 2MB and a file size of 10MB, the file would be read in smaller chunks through streams. This prevents overwhelming the memory with the entire file at once.

Realization and Connection to Streaming Services

• Reflecting on this, I made the connection that the concept of streaming in applications like YouTube or Netflix involves data being processed in small portions, similar to how streams work in programming.

• When we watch a video on YouTube, for example, the video is being streamed to our device in small pieces, allowing for smoother playback and less strain on memory.

Exploring Streams in Node.js

• In Node.js, streams are implemented through several types, such as Readable, Writable, Duplex, and Transform streams.

• These streams enable developers to efficiently handle reading from and writing to files, communicating with networks, and other data processing tasks.

• Source of Accurate Information: Official Documentation is created by experts in the field, ensuring that the information provided is reliable and up-to-date.

• Structured Learning Materials: The structured format of Official Documentation allows me to progress systematically through the learning process, covering all essential topics and concepts.

• Clear Explanation of Concepts: Official Documentation breaks down complex technical concepts into easy-to-understand language, making it accessible at my skill level.

Boosting My Confidence

By learning from Official Documentation, I gain hands-on practice opportunities and witness real-life application demonstrations, boosting my confidence in my skills and abilities.

"Hands-on practice with Official Documentation not only enhances my understanding but also gives me the confidence to tackle challenging tasks." - Sarah, Software Engineer

• Hands-on Practice Opportunities: Official Documentation often includes interactive exercises and projects allowing me to apply my knowledge practically.

• Real-life Application Demonstrations: Through case studies and examples, Official Documentation showcases how the technology can be used in real-world scenarios, giving me a glimpse into its practical applications.

• Building Skills and Expertise: By following Official Documentation closely, I continuously enhance my skills and expertise, becoming proficient in my chosen technology.

Time Efficiency

Learning from Official Documentation can significantly save me time by providing quick reference guides for problem-solving, ensuring updated information availability, and ultimately enhancing my productivity.

• Quick Reference for Problem-Solving: Official Documentation is my go-to resource when I encounter challenges or need clarification on specific topics, enabling fast and efficient problem-solving.

• Updated Information Availability: With regular updates and revisions, Official Documentation ensures that I have access to the most recent information, keeping me abreast of industry trends and best practices.

• Enhanced Productivity: Efficiently utilizing Official Documentation allows me to streamline my workflow, focus on high-priority tasks, and ultimately enhance my overall productivity.

Career Advancement

The knowledge and skills acquired through learning from Official Documentation not only showcase my professionalism but also lead to industry recognition and open up new employment opportunities for me as a software engineer.

• Showcase of Professionalism: Mastering Official Documentation demonstrates my dedication to learning and staying informed about the technology I work with, reflecting positively on my professionalism.

• Industry Recognition: Software engineers who excel in utilizing Official Documentation often receive recognition from industry peers and leaders, establishing themselves as experts in their field.

What is SaaS?

Software as a Service (SaaS) is a software distribution model where applications are hosted by a service provider and made available to customers over the Internet. Instead of purchasing and installing software on individual computers or servers, users can access these applications via a web browser, paying a subscription fee for the service.

Key Benefits of SaaS

Let's delve into some of the significant advantages that SaaS offers:

1. Accessibility

One of the most appealing aspects of SaaS is its accessibility. SaaS applications are available from any device with an internet connection. Whether we are at the office, at home, or on the go, we can easily access our software from our laptop, tablet, or smartphone. This flexibility ensures that we can stay productive no matter where we are.

2. Scalability

SaaS solutions are designed to scale effortlessly with our business needs. As our business grows, we can easily adjust our subscription to accommodate more users or access additional features. This scalability means that we only pay for what we need, making SaaS a cost-effective solution for businesses of all sizes.

3. Cost-Effectiveness

Traditional software requires significant upfront investment in licenses and hardware. In contrast, SaaS operates on a subscription basis, which spreads the cost over time and reduces the initial financial burden. Moreover, the subscription model includes maintenance, updates, and support, eliminating unexpected expenses and simplifying budgeting.

4. Automatic Updates

With SaaS, we always have access to the latest version of the software. Updates and patches are managed by the service provider and deployed automatically. This ensures that we benefit from the newest features, security enhancements, and bug fixes without any manual intervention, keeping our software up-to-date and secure.

5. Enhanced Collaboration

SaaS applications often come with built-in collaboration tools. These features enable teams to work together seamlessly, regardless of their location. Whether it’s sharing documents, managing projects, or communicating in real-time, SaaS fosters a collaborative environment that can boost productivity and innovation within our organization.

Real-World Examples of SaaS

We might be more familiar with SaaS than we realize. Here are a few well-known examples:

• Google Workspace: Provides tools like Gmail, Google Docs, and Google Drive, allowing teams to collaborate and communicate efficiently.

• Zoom: A leading virtual meeting platform that enables seamless video conferencing, webinars, and online meetings, helped us extremely during the 2024 pandemic.

• Dropbox: A cloud storage solution that allows users to store and share files easily.

• Slack: A communication tool that facilitates team collaboration through messaging, file sharing, and integrations with other software.

Why Our Business Should Consider SaaS

Adopting SaaS can bring numerous benefits to our business:

• Reduced IT Complexity: SaaS providers handle the technical aspects, including server maintenance, data backups, and security measures. This reduces the need for a large in-house IT team and allows us to focus on our core business activities.

• Quick Deployment: SaaS applications can be deployed rapidly, often within hours. This means we can start using the software and gaining its value almost immediately.

• Flexibility and Customization: Many SaaS solutions offer customizable features and integrations with other software, allowing us to tailor the application to meet our business needs.

The Pursuit of Perfection

As developers, we strive to create elegant and efficient code. We want our solutions to be scalable, maintainable, and free from any technical debt. We spend hours brainstorming the best possible design patterns and architecture, trying to predict all the possible future scenarios. While these efforts are certainly valuable, they can sometimes lead to over-engineering and unnecessary complexity.

The Pitfalls of Over-Optimization

When we focus too much on making the code perfectly designed from the start, we risk losing sight of the bigger picture. We may spend excessive time and effort on small details that don't contribute significantly to the overall functionality of the software. This can result in delays in delivering the main features and cause frustration among the team and stakeholders.

Additionally, trying to predict all future requirements and potential changes can lead to analysis paralysis. We can spend so much time trying to account for every possible scenario that we end up not shipping anything at all. It's essential to strike a balance between planning for the future and delivering value in the present.

First, Make it Work

Instead of getting hung up on making the code "perfectly designed" right from the start, the focus should be on getting it to work. This means prioritizing functionality and delivering the core features of the software. By adopting an iterative and incremental development approach, we can quickly build a working prototype or minimum viable product (MVP) that satisfies the primary requirements.

During this initial phase, the code may not be the most elegant or efficient, and that's okay. The primary goal is to demonstrate that the software can solve the problem it was designed for. This approach allows for faster feedback cycles, as stakeholders can see tangible progress and provide valuable input early in the process.

Refactor for Quality

Once the code is working and the main features are in place, it's time to shift the focus toward improving the code quality. Refactoring is the process of restructuring existing code without changing its external behavior. It involves eliminating redundancy, improving readability, and optimizing performance. Refactoring allows us to create more maintainable and scalable software while reducing technical debt.

Let's take a look at an example in JavaScript. Imagine we have a simple function that calculates the sum of an array of numbers:

function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

The above code works and gives us the correct result. However, we can refactor it to make it more concise and readable:

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

By refactoring the code, we've eliminated the need for a loop and made use of the reduce method, which simplifies the logic and improves readability.

Learning a new library or framework can be daunting for newbie programmers. To ensure a solid foundation, adopt a vanilla JavaScript approach first. Gain a deep understanding of the language's core features and implement them before reaching for external tools. This philosophy promotes problem-solving skills and informed decision-making when incorporating libraries or frameworks.

1. Understanding the Language's Core Features:

   • Grasp JavaScript fundamentals: variables, functions, arrays, objects, control flow, etc.

   • Build a strong knowledge base to support your coding journey.

2. Implementing Without Libraries: Trial and Error Process:

   • Gain hands-on experience by implementing features in vanilla JavaScript.

   • Encounter challenges and limitations, fostering problem-solving skills.

   • Understand the problems libraries are designed to solve.

3. Tackling Challenges and Seeking Solutions:

   • Break down problems into smaller parts for easier analysis.

   • Utilize documentation, online resources, and coding communities.

   • Engage in forums and discussions to learn from experienced developers.

4. When and How to Incorporate Libraries/Frameworks:

   • Assess project requirements and pain points that can benefit from a specific tool.

   • Understand the purpose and problem domain of the library or framework.

   • Consider community support, documentation quality, and maintenance status.

5. Striking the Right Balance:

   • Continuously learn and expand your JavaScript knowledge.

   • Embrace external tools while maintaining a strong understanding of the language.

   • Reinvent the wheel for learning purposes to sharpen problem-solving skills.

As a talented and enthusiastic programmer seeking employment, you may be caught in a frustrating situation: You need experience to get hired, but you must be employed to gain experience. It's a common challenge that many aspiring professionals face. However, there is a solution that can help you break free from this cycle: open source.

Understanding Open Source

Open source development revolves around making source code openly available for others to view, modify, and contribute to. This collaborative approach allows developers of all levels of experience and employment status to work together on projects. Platforms like GitHub provide the infrastructure needed to host and manage open-source projects, offering tools for version control, issue tracking, and collaboration.

How Open Source Can Help

By actively participating in open-source projects, you can acquire practical experience and demonstrate your skills to potential employers. Here's a step-by-step guide to get you started:

1. Choose the Right Project: Begin by exploring open-source projects on platforms like GitHub. Narrow down your search based on programming languages, labels, or specific topics that interest you. Look for projects that align with your skills and passions.

2. Immerse Yourself: Dive into the project you've chosen. Familiarize yourself with its codebase, documentation, and existing issues. This will help you understand the project's goals, architecture, and areas where you can contribute.

3. Start Small, Learn Big: Begin by taking on smaller tasks or issues within the project. This could involve fixing bugs, enhancing documentation, or adding small features. By starting with manageable tasks, you can gradually acquaint yourself with the codebase and development processes.

4. Engage with the Community: To interact with other contributors and maintainers, join the project's communication channels, such as mailing lists or chat platforms. Seek guidance, ask questions, and learn from experienced developers. Building relationships within the open-source community can provide valuable mentorship and networking opportunities.

5. Showcase Your Contributions: Keep track of the contributions you make to open-source projects. Create a portfolio or list them on your resume. You can also provide links to your GitHub profile to demonstrate your involvement. Highlighting your open-source contributions showcases your collaboration skills and willingness to contribute to real-world projects.

6. Participate in Events: Take part in events like Hacktoberfest, an annual celebration of open source where individuals are encouraged to make contributions. These events often provide additional incentives and recognition for your contributions, boosting your visibility within the developer community.

By actively engaging in open-source projects, you can gain practical experience, build a portfolio of real-world projects, and establish your reputation as a dedicated programmer. These contributions serve as tangible evidence of your skills and commitment when applying for job opportunities, even if you lack traditional work experience.

Have you ever found yourself in a situation where you applied a CSS pseudo-element to an element, but it just didn't seem to work? Fret not; you're not alone! CSS pseudo-elements can be a powerful tool for adding decorative elements to your web pages, but they come with certain limitations and nuances that might catch you off guard.

Understanding CSS Pseudo-elements

Before diving into the debugging process, let's briefly understand what CSS pseudo-elements are. In CSS, pseudo-elements are used to style parts of an element rather than the element itself. They are denoted by the::before and::after selectors and are often utilized for adding purely presentational elements to the UI, such as horizontal lines below text, decorative overlays, and more. It's essential to note that pseudo-elements don't carry any semantic meaning and are primarily used for enhancing the visual appearance of elements.

Application of CSS Pseudo-elements

Applying a CSS pseudo-element must be done in conjunction with the content property of the targeted element. The pseudo-element is inserted just before or after the content of the element, creating the desired effect.

Limitations of CSS Pseudo-elements

However, there are certain cases where pseudo-elements may not work as expected. One of the most common pitfalls is attempting to use pseudo-elements on elements without content. For instance, <img> and <hr> tags are self-closing and do not have content inside them. Therefore, applying a pseudo-element like ::before or ::after to these elements will have no visible effect.

Let's illustrate this with some CSS examples:

Example 1: Pseudo-element not working on <img> tag

<!DOCTYPE html>
<html>
<head>
  <style>
    /* This won't work */
    img::before {
      content: "Image Border";
      border: 1px solid red;
      padding: 5px;
    }
  </style>
</head>
<body>
  <img src="example.jpg" alt="Example Image">
</body>
</html>

In this example, we are trying to add a border with the text "Image Border" before the <img> element using a pseudo-element, but nothing will appear. This is due to the <img> tag's lack of content.

Example 2: Pseudo-element working on <div> tag

<!DOCTYPE html>
<html>
<head>
  <style>
    /* This works */
    div::before {
      content: "Decorative Element";
      background-color: #006699;
      padding: 10px;
      display: block;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>This is a div element with a pseudo-element.</div>
</body>
</html>

In this example, we use a <div> element containing content. The pseudo-element will now work as expected and display the text "Decorative Element" above the content of the <div>.

Debugging Tips

If your pseudo-elements aren't showing up as intended, consider the following steps for debugging:

1. Check the element's content: Ensure that the element you are targeting with the pseudo-element contains content. If it's an empty element like <img> or <hr>, the pseudo-element won't work.

2. Inspect the CSS selector: Double-check the CSS selector you are using for the pseudo-element. Make sure it's correctly written as ::before or ::after.

3. Inspect other CSS rules: Look for any conflicting CSS rules that might be affecting the pseudo-element's appearance. Use your browser's developer tools to inspect the element and its styles.

4. Content property: Verify that you have properly used the content property within the pseudo-element. It's required for the pseudo-element to render.

• The request needs to be sent using the POST method

• The query and variables need to be sent as a JSON object

// sample query
const query = `
    query HeroNameAndFriends($episode: Episode) {
        hero(episode: $episode) {
            name
            friends {
                  name
            }
      }
}
`;

const variables = {
        episode: "Some Episode Title"
    }

fetch("https://someGraphQL/endpoint", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({query, variables}),
})

Note: if there are no variables used in the query, send an empty object. Do not omit the key entirely.

GraphQL query is just an HTTP request

Underneath the hood, the GraphQL query works by sending HTTP request(s) to a certain endpoint. Unlike the REST API, GraphQL API has only one endpoint.

Anatomy of a GraphQL query

1. The query itself

2. Any query variables

 query HeroNameAndFriends($episode: Episode) {
        hero(episode: $episode) {
            name
            friends {
                  name
            }
      }
}

This query expects to get the Hero and their friend's name from a particular episode(variable)

Let's extract these two components into separate variables

// The query itself
const query = `
    query HeroNameAndFriends($episode: Episode) {
        hero(episode: $episode) {
            name
            friends {
                  name
            }
      }
}
`;

// Necessary Variables
const variables = {
        episode: "Some Episode Title"
    }

Using the Fetch API

• The request method must be POST

• The query and variables must be represented as an object and should be passed into the request body as a JSON string.

• Necessary headers must be included(content-type, authentication, etc.)

Putting it all together

// The query itself
const query = `
    query HeroNameAndFriends($episode: Episode) {
        hero(episode: $episode) {
            name
            friends {
                  name
            }
      }
}
`;

// Necessary Variables
const variables = {
        episode: "Some Episode Title"
    }

// Using Fetch
fetch("https://someGraphQL/endpoint", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({query, variables}),
})

I was reading an amazing article about JavaScript Best Practices.
While going through it, there were some points that I found useful and productive.
I wanted to save those points, which in turn would make it easier for me to reference back in the future.

Birth of SaveHash

As a solution to my problem mentioned above, I created SaveHash. SaveHash makes it easier for readers to save hash(#) links and refer back to them in the future.
Get It Here

Here is the Demo

The extension workflow looks like this,

This project is open source.

Feel free to contribute by following this guide.

While creating this PWA, I wanted to store the markdown data into the MongoDB's Atlas.

Example Markdown

# Some interesting title
Description about the topic...

- list #1
- list #2

> Maybe a quote ?

The above markdown would be stored as a single string in the database.

{
  // other fields
  markdown: "# Some interesting title\nDescription about the topic...\n- list #1\n- list #2\n> Maybe a quote ?"
  // further fields
}

The problem

While reading the data from the Atlas, the line-break escape character, i.e. \n would come as already escaped, i.e. \\n notice the double '\'.

Therefore, while parsing it as HTML, the line-break wouldn't be read as a line-break character but a literal \n character.

Rendered HTML

The Markdown parser(marked.js) expects a line break between each block(headings, lists, paragraphs, quotes, etc.) to render them as expected. Otherwise, it will render them as a single line of string.

In the example above, it renders everything as a heading level 1.

Why?

When the Markdown parser sees # token, it assumes that the text after it(until a line break) is to be rendered as a H₁. Thus, everything including lists, paragraphs, and quotes is rendered as <h1> because of no line-break.

The Solution

I made a mistake by thinking that the problem was with the Markdown parser, while instead, the problem was with the data coming from MongoDB.

The doubly escaped character \\n was the culprit.

As a workaround, I tried to replace all \\ns with \ns from the markdown string before passing it to the Markdown Parser.

import parser from "marked";

// 'markdownString' would be the markdown field read from mongodb
const replacedWithSingleEscape = markdownString.replace(/\\n/g, "\n");

parser(replacedWithSingleEscape);

Solved! This is how the rendered output would look after the fix