Forem: Heru Hartanto

Why I think GitHub Copilot is a Must-Have Tool for Developers

Heru Hartanto — Sat, 04 Jan 2025 23:01:43 +0000

GitHub Copilot is an AI-powered code completion tool that helps you write better code faster. Here’s how to make the most of it:

Context-Aware Suggestions

GitHub Copilot provides suggestions based on the context of your code. It understands the programming language, libraries, and frameworks you are using. For example, if you are writing a function in Python, it will suggest code snippets relevant to Python.

Autocomplete

As you type, GitHub Copilot will suggest completions. Accept a suggestion by pressing Tab or Enter. Cycle through suggestions using Ctrl + ] or Ctrl + [. this is one of my most favorite feature.

Code Refactoring

GitHub Copilot can help you refactor your code by suggesting more efficient or cleaner ways to achieve the same functionality.

To get the best results from GitHub Copilot, follow these best practices:

Write Clear Comments

Clear and descriptive comments help GitHub Copilot understand what you are trying to achieve. This leads to more accurate and relevant suggestions.

Review Suggestions

Always review the suggestions to ensure they are optimal and error-free remember while it is a powerful tool it still not perfect.

Use as a Learning Tool

Analyze suggestions as a way to learn new coding techniques and best practices.

Conclusion

GitHub Copilot is a powerful tool that can help you write better code faster. Use clear comments, review suggestions, and leverage it as a learning tool.

Set Git to Recognize Case Changes

Heru Hartanto — Sun, 08 Dec 2024 02:22:25 +0000

By default, Git is case-insensitive, which can cause issues when renaming files by changing only their capitalization, e.g., flag.svg to Flag.svg.

To fix this, set core.ignorecase to false in your terminal:

git config --global core.ignorecase false

This global setting ensures Git detects case-sensitive changes in all repositories. To apply it only to a specific repository, run the command without --global.

How to Enable Communication Between Browser Windows with JavaScript

Heru Hartanto — Sun, 17 Nov 2024 22:11:26 +0000

The postMessage API in JavaScript is a powerful tool for securely enabling cross-origin communication between different windows or iframes. It’s commonly used to exchange data between a parent component and an embedded iframe, allowing for controlled interaction even if the documents originate from different sources.

Here’s a practical example of using postMessage to send data between an iframe and a parent component:


// Parent Component
const iframe = document.getElementById("myIframe");

// Send a message to the iframe
iframe.contentWindow.postMessage("Hello from parent", "https://iframe-domain.here");

// Listen the message
window.addEventListener("message", (event) => {
    if (event.origin === "https://iframe-domain.here") {
        console.log("Message from iframe:", event.data);
    }
}, false);


// Iframe Component
// Send a message to the parent
window.parent.postMessage("Hello from iframe", "https://parent-domain.here");

How to Temporarily Store Changes in Git

Heru Hartanto — Sat, 26 Oct 2024 11:26:50 +0000

git stash is a Git command used to temporarily save changes in your working directory without committing them.

This is useful when you want to switch branches or work on something else but don’t want to commit incomplete work.

Here some key command for git stash

git stash save

Saves your changes and resets your working directory to match the latest commit.

git stash save "WIP: working on feature"

git stash list

To show all stash that you have made.

git stash list
stash@{0}: WIP: working on feature

git stash drop

Removes a specific stash entry from the stack. You can drop the latest stash or specify one by index.

git stash drop stash@{0}

What is an IIFE (Immediately Invoked Function Expression) and Why Should You Care?

Heru Hartanto — Sun, 13 Oct 2024 03:39:38 +0000

An (IIFE) Immediately Invoked Function Expression is a function that executed as soon as it’s defined.
It’s a common design pattern that helps create a private scope and avoiding polluting the global scope.

(function () {
  // Code inside IIFE
})();

The function declare inside parentheses and trailing () immediately invoke it.

This can be useful when you need to fetch data immediately after the page loads, here the example:

(async function () {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
})();

Promise.finally(): Your Secret Weapon for Smoother Promise

Heru Hartanto — Sat, 31 Aug 2024 11:33:23 +0000

When you have a promise, sometimes you want to ensure that some code always runs, regardless of the outcome of the promise. For example, you may want to hide a loading spinner or close a file connection whether the operation was successful or not. Before finally(), developers had to duplicate code in both the .then() and .catch() blocks. finally() eliminates that redundancy.

fetchData()
  .then((data) => {
    console.log('Data fetched successfully', data);
  })
  .catch((error) => {
    console.error('Error fetching data', error);
  })
  .finally(() => {
    hideLoadingSpinner(); // Runs no matter the result
  });

Understanding Scope Chain in JavaScript

Heru Hartanto — Mon, 05 Aug 2024 21:24:28 +0000

In JavaScript, the scope chain is a mechanism that defines how variable resolution works in nested functions. It determines the order in which variables are looked up when a variable is referenced.

The scope chain works by looking up variables in the local scope first, then moving up to the outer (parent) scope, and finally to the global scope if necessary. This process continues until the variable is found or the global scope is reached.

Example

let globalVar = 'global';

function outerFunction() {
  let outerVar = 'outer';

  function innerFunction() {
    let innerVar = 'inner';

    console.log(innerVar);   // Outputs: inner
    console.log(outerVar);   // Outputs: outer
    console.log(globalVar);  // Outputs: global
  }

  innerFunction();
}

outerFunction();

Explanation:

innerFunction can access innerVar from its own scope, outerVar from outerFunction’s scope, and globalVar from the global scope.
If a variable is not found in the local scope, JavaScript moves up the scope chain to find it.

Understanding the scope chain is crucial for avoiding variable name conflicts and managing variable access in your code.

Understanding Tagged Template Literals in JavaScript

Heru Hartanto — Sun, 04 Aug 2024 10:13:01 +0000

What are Tagged Template Literals?

A tagged template literal involves a template literal prefixed with a function, called a tag. This function can process and manipulate the literal's content. Here's a simple example:

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Processed string';
}

const name = 'Alice';
const greeting = tag`Hello, ${name}! How are you?`;
console.log(greeting);

Use Cases for Tagged Template Literals

Internationalization (i18n)

Tagged template literals can dynamically translate strings based on the user’s locale. Here’s an example using Japanese:

function i18n(strings, ...values) {
    const translations = {
        'Hello, ': 'こんにちは、',
        '! How are you?': '！元気ですか？',
    };

    return strings.reduce((result, str, i) => result + translations[str] + (values[i] || ''), '');
}

const name = 'アリス';
const greeting = i18n`Hello, ${name}! How are you?`;
console.log(greeting); // Output: "こんにちは、アリス！元気ですか？"

2. Custom String Formatting

They can also implement custom formatting logic, such as escaping HTML.

function escapeHTML(strings, ...values) {
    const escape = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return strings.reduce((result, str, i) => result + str + escape(values[i] || ''), '');
}

const userInput = '<script>alert("XSS")</script>';
const sanitized = escapeHTML`User input: ${userInput}`;
console.log(sanitized); // Output: "User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"

Conclusion

Tagged template literals provide a versatile tool for dynamic string manipulation in JavaScript. They can simplify tasks like internationalization and custom string formatting, leading to more expressive and maintainable code.

The Impact of AI on Junior-Level Jobs

Heru Hartanto — Sat, 13 Jul 2024 11:33:44 +0000

The rapid advancement of artificial intelligence (AI) is transforming industries at an unprecedented rate, bringing both opportunities and challenges. Among the most affected by this technological revolution are junior-level professionals. From copywriting and UX writing to programming and administrative tasks, AI is increasingly capable of performing tasks traditionally carried out by entry-level workers. This shift poses significant questions about the future of work and the steps we need to take to adapt.

The Threat to Entry-Level Jobs

AI's capabilities have grown to include a wide array of functions that were once the domain of human workers. For instance, AI-driven tools are now proficient in generating content for blogs, marketing materials, and even technical documents. Applications like OpenAI's GPT-4 can produce coherent, contextually relevant text with minimal human input. This advancement threatens the job security of junior copywriters and UX writers, who typically start their careers performing these exact tasks.

Similarly, administrative roles such as drafting contracts, taking notes, and creating resumes are also at risk. AI-powered platforms can automate these processes, delivering accurate and efficient results. For example, AI can quickly draft a contract by analyzing templates and previous documents, saving time and reducing the need for a human touch.

Junior programmers are not immune to this trend either. Code generation tools like GitHub Copilot can assist in writing code, debugging, and even suggesting improvements. These tools, while beneficial for seasoned developers, could make it challenging for newcomers to find entry-level positions, as their tasks become increasingly automated.

Navigating the New Landscape

Given these challenges, it's crucial for junior-level professionals and those entering the job market to develop strategies to remain relevant. Here are a few recommendations:

Embrace Lifelong Learning: The pace of technological change means that continuous learning is more important than ever. Junior professionals should seek to expand their skill sets beyond basic tasks that AI can perform. This could include learning about AI and machine learning themselves, gaining a deeper understanding of advanced programming concepts, or developing skills in areas that require a human touch, such as creative thinking and problem-solving.
Focus on Soft Skills: While AI can handle many technical tasks, soft skills such as communication, teamwork, and leadership remain uniquely human. These skills are critical in roles that involve collaboration and strategic decision-making. Junior professionals should focus on honing these abilities, as they are less likely to be replicated by machines.
Specialize: Specialization in a niche area can provide a buffer against automation. Whether it's becoming an expert in a specific programming language, mastering a particular type of content creation, or focusing on a unique aspect of UX design, deep expertise in a specialized field can make a professional more valuable and harder to replace.
Leverage AI as a Tool: Rather than viewing AI purely as a threat, junior professionals should learn to leverage AI tools to enhance their productivity and creativity. Understanding how to effectively use AI can turn it into a powerful ally, helping to perform tasks more efficiently and freeing up time for more complex and rewarding work.
Seek Out Mentorship and Networking: Building relationships with experienced professionals can provide guidance and opportunities that might not be readily apparent. Mentors can offer insights into industry trends, advice on skill development, and potentially open doors to new roles that are less susceptible to automation.

Conclusion

The rise of AI undeniably presents challenges for junior-level professionals, but it also offers opportunities for growth and adaptation. By embracing continuous learning, focusing on soft skills, specializing, leveraging AI tools, and seeking mentorship, individuals can navigate this evolving landscape successfully. The key lies in staying adaptable and proactive, ensuring that as AI continues to advance, human professionals remain indispensable contributors to the workforce.

It's okay to be mediocre

Heru Hartanto — Mon, 08 Apr 2024 00:14:03 +0000

The coding world is vast! It's perfectly normal for developers to have areas of strength and areas for improvement. You might be a whiz with backend but still working on centering div in HTML, you maybe good at react framework but don't know anything about python. relax That's okay!.

We all have those days where progress feels slow, and mistakes pop up at work. But hey, that's being human! Remember, even the most experienced developers make mistakes. The key is to learn from them, dust yourself off, and keep building your skills.

There's no single "perfect developer."😎 Some excel at full-stack development, while others master in specific tools or areas. The beauty lies in our diverse skillsets that come together to build amazing things, you're like a single gear teeth that help car drivable, insignificant but nedded.

The most important thing? Your mediocre coding skills improve your life! Whether it puts food on the table for your family or opens doors to new opportunities, coding is a valuable skill you can be proud of 🤩. so It's okay to be mediocre.

How retired developer look like?

Heru Hartanto — Sun, 10 Dec 2023 12:06:00 +0000

Most of developer job today didn't exist in the least 50 year, I want to know what retired developer look like and what do you think about it?

How to deal with Imposter Syndrome

Heru Hartanto — Sat, 07 Oct 2023 10:00:33 +0000

What is Imposter Syndrome

As developer did you ever feel that you're not good at your job, you feel that other developer is better than you, their code is look cleaner and more efficient, you feel incompetent and useless.

Guest what you're not alone, as many as 58% of tech worker feel imposter syndrome.

In simple term imposter syndrome is feeling of self doubt event though you already have excellent skill and achievement, it will make you suffer with insecurity, demotivated and anxiety.

This list is an indicator that you have imposter syndrome

Fear of getting exposed as a fraud if`` your colleague expose your knowledge gap with them
Feel that you're not fit with your job
Fall behind your colleague's performance
Only doing "comfortable" task

How to deal with it

1. Realize if you have Imposter Syndrome

It's is a good sign that you recognize if you have Imposter syndrome, many developers don't realize if they have it and just ignore it.

2. Moving out from your comfort zone

Nobody in tech industry is expert at everything because technology always moving, the best developer is the one who able to keep learning and adapting to industry needs.

You must learn to deal with situation that make you feel uncomfortable such as doing task that you never done before, learning new language or using another framework that you never use, with doing things that you don't know you will expand your skill and you will feel more confident with yourself.

3. Don't compare

Don't compare yourself with other colleague, this behavior will make you look down upon yourself, so whenever you achieved something in your job it's because your effort, don't look down to it and celebrate every achievement.

4. Don't quit

You need determination, persistence and discipline if you want to level up in this field, look back in your journey and you will realize that you already make big improvement, you just need to continue and see a failure, mistake and a bug as opportunity to grow instead of step back.

Cover image

Source