These are quick development notes for common frontend and Git tasks. Each section includes the use case, the code, and a short explanation so the snippet is easier to reuse later.

Table of Contents

Use this approach when you want to print only one section of a page instead of the full document.

<section>
    <div id="printContent">
        <p>
            This content will be printed when the user clicks the print button.
        </p>
    </div>

    <button type="button" onclick="printDiv('printContent')">
        Print this section
    </button>
</section>
js
function printDiv(divId) {
    const printContents = document.getElementById(divId).innerHTML;
    const originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

This code temporarily replaces the page body with the selected content, opens the browser print dialog, and then restores the original page.

For simple pages this works fine. For complex applications, prefer print-specific CSS because replacing document.body.innerHTML can remove event listeners from the page.

Hide an element while printing

Use @media print when an element should appear on screen but not in the printed version.

css
@media print {
    .noprint,
    .noprint * {
        display: none !important;
    }
}

Example:

<button class="noprint">This button will not print</button>

Other options:

  • Use visibility: hidden if you want to hide the content but keep its space.
  • Use Bootstrap 5’s .d-print-none class if Bootstrap is available.
  • Use JavaScript only when the print behavior depends on user interaction or application state.

Append an overlay div to the page with jQuery

This is useful when you want to block user interaction during an AJAX call, form submission, or loading state.

js
$("body").append("<div class='page-overlay'></div>");
css
.page-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.6);
}

Remove the overlay when the work is complete:

js
$(".page-overlay").remove();

Avoid inline styles when possible. A CSS class keeps the JavaScript cleaner and makes the overlay easier to update.

Reload an iframe using JavaScript

Use this when an iframe needs to refresh without reloading the full parent page.

<iframe id="previewFrame" src="/preview.html"></iframe>
js
const iframe = document.getElementById("previewFrame");

iframe.contentWindow.location.reload();

If the iframe loads a page from a different domain, browser security rules may block direct access to contentWindow or contentDocument.

Clear iframe content with jQuery

If the iframe content is from the same domain, you can clear its body:

js
$("#previewFrame").contents().find("body").html("");

Make sure the selector includes # when selecting by ID. For example, use #previewFrame, not previewFrame.

Fix filename too long errors in Git for Windows

On Windows, Git may fail when a repository contains very long file paths. Enable long paths with:

bash
git config --system core.longpaths true

Run the terminal as administrator if the command requires permission.

You can verify the value with:

bash
git config --system core.longpaths

Stash untracked files in Git

By default, git stash may not include untracked files. Use this command when you also want to stash new files:

bash
git stash push --include-untracked --message "work in progress"

Older examples sometimes use git stash save, but git stash push is the newer form.

Update an image path with jQuery

This example toggles an image between two source paths when the button is clicked.

<div class="container">
    <button type="button" id="updateImg">
        Click me
        <img
            id="productImage"
            height="300"
            src="/assets/jpg/img1.jpg"
            alt="Product preview"
        />
    </button>
</div>
js
const firstImage = "/assets/jpg/img1.jpg";
const secondImage = "/assets/jpg/img2.jpg";

$("#updateImg").on("click", function () {
    const image = $("#productImage");
    const currentSource = image.attr("src");

    image.attr("src", currentSource === firstImage ? secondImage : firstImage);
});

Common mistakes:

  • Using duplicate IDs on the page.
  • Comparing relative and absolute paths that do not match exactly.
  • Forgetting meaningful alt text for the image.

Install an Angular project in the current directory

Use --directory ./ when you want Angular CLI to create the project files in the current folder.

bash
ng new yourAppName --directory ./

This is useful when you already created the folder and do not want Angular CLI to create another nested folder.

Resources