DEV Community: raielly

Move Your Repository to a New GitHub Repo on a VPS Hosting Site

raielly — Mon, 13 Oct 2025 16:41:03 +0000

⚠️ Warning: Live site may go offline temporarily. Perform during low-traffic or maintenance time.

Step 1: Prepare the New GitHub Repository

# Clone local repository
git clone **YOUR_LOCAL_REPO_PATH**
cd **YOUR_LOCAL_REPO_FOLDER**

# Remove old Git history and reinitialize
rm -rf .git
git init

# Add new repository as remote
git remote add origin git@github-company:**YOUR_ORG/YOUR_NEW_REPO.git

# Push to new repository
git add .
git commit -m "Initial commit"
git push -u origin main

Step 2: Generate SSH Key on VPS

# Generate new SSH key
ssh-keygen -t rsa -b 4096 -C "deploy@**YOUR_COMPANY.com**"

# Save key as
# /home/**YOUR_USER**/.ssh/id_rsa_company

# Copy public key
cat ~/.ssh/id_rsa_company.pub

Paste the copied key into GitHub → Settings → Deploy Keys
Check Allow write access

Step 3: Configure Multiple SSH Keys

nano ~/.ssh/config

Add the following:

# Personal GitHub
Host github-personal
    HostName github.com
    User git
    IdentityFile /home/**YOUR_USER**/.ssh/id_rsa
    IdentitiesOnly yes

# Company GitHub
Host github-company
    HostName github.com
    User git
    IdentityFile /home/**YOUR_USER**/.ssh/id_rsa_company
    IdentitiesOnly yes

Save and exit (CTRL + O, ENTER, CTRL + X) Test the connection:

ssh -T git@github-company

Expected output:

Hi **YOUR_COMPANY**! You've successfully authenticated, but GitHub does not provide shell access.

Step 4: Deploy Code on VPS

# Navigate to web root
cd /home/**YOUR_USER**/htdocs

# Backup old site
mv **YOUR_SITE_FOLDER** **YOUR_SITE_FOLDER**.bak

# Clone new repository
git clone git@github-company:**YOUR_ORG/YOUR_NEW_REPO.git **YOUR_SITE_FOLDER**

# Configure environment variables
cd **YOUR_SITE_FOLDER**
cp .env.example .env
vim .env

Update the following placeholders in .env:

APP_NAME=**YOUR_APP_NAME**
APP_ENV=**YOUR_APP_ENV**
APP_DEBUG=true/false
APP_URL=https://**YOUR_DOMAIN.com**

DB_CONNECTION=**YOUR_DB_CONNECTION**
DB_HOST=**YOUR_DB_HOST**
DB_PORT=**YOUR_DB_PORT**
DB_DATABASE=**YOUR_DB_NAME**
DB_USERNAME=**YOUR_DB_USER**
DB_PASSWORD=**YOUR_DB_PASSWORD**

Save and exit (ESC, :wq, ENTER) Install dependencies:

composer install
npm install

(Check Node/NPM versions: node -v, npm -v. Install if missing.)
Build assets:

npm run build

✅ Site is now live with the new repository.

Step 5: Configure GitHub Actions Deployment

# Check private key content
cat ~/.ssh/id_rsa_company

# Add public key to authorized_keys
cat ~/.ssh/id_rsa_company.pub >> ~/.ssh/authorized_keys

# Verify authorized_keys
cat ~/.ssh/authorized_keys

Copy the key and add it to GitHub Actions → SSH Key Secret After this, any commit, push, or release can trigger deployment to the VPS automatically.

Once this is set up, your live site is fully connected to the new GitHub repository, and all future changes commits, pushes, or releases will automatically deploy to your VPS via GitHub Actions. ✅

Tip: Always test deployments on a staging environment first if possible, to ensure everything works as expected before affecting your live site.

HAPPY CODING! 🚀

1–10 Must CSS Layout Rules (Safari + Responsive Safe)

raielly — Tue, 07 Oct 2025 07:07:50 +0000

If your website uses native CSS, skipping these guidelines can lead to hidden layout problems on real devices such as iPhones (11–15), Safari, and iPads.

1. Base Setup

✅ Always start with a reset or normalize:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✅ Use :root for color + spacing variables.
✅ Define body { font-family; line-height; color; background-color; }.
✅ Set global image styles:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

✅ Add overflow-x: hidden; on body if animations or transforms move content sideways.

2. Layout Systems

Flexbox Tips

Use Flex for 1-dimensional layouts (rows or columns only).
Use Grid for 2-dimensional layouts (rows + columns).
Common Flex rules:

display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;

Add fallback for Safari <15 (no gap):

@supports not (gap: 1rem) {
  .flex-item + .flex-item {
    margin-left: 1rem;
  }
}

Grid Tips

Always define rows/columns explicitly:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 1rem;

Prefer minmax(0, 1fr) to prevent overflow bugs in Safari.

3. Responsive Design

✅ Always include viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ Use relative units (rem, %, vh, vw) over px.
✅ Common breakpoints:

@media (max-width: 1200px) { ... } /* desktop */
@media (max-width: 992px) { ... }  /* tablet */
@media (max-width: 768px) { ... }  /* landscape phone */
@media (max-width: 480px) { ... }  /* mobile */

✅ Test with “responsive design mode” on Safari DevTools and Chrome.

4. Safari/iPhone-Specific Gotchas

Issue: Grid inside Flex not expanding   
Fix: Add width: 100%; min-height: 0;

Issue: Scrollable div inside flex not scrolling 
Fix: Add overflow: auto; -webkit-overflow-scrolling: touch;

Issue: gap not working in flex  
Fix: Use margin-left fallback

Issue: Fixed element with bottom: 0 overlaps keyboard   
Fix: Use position: sticky; bottom: 0; instead when possible

Issue: 100vh too tall on iPhone (browser UI height issue)   
Fix: Use height: 100dvh; (dynamic viewport unit)

Issue: Z-index issues on iOS (e.g. modals)  
Fix: Make sure parent has position: relative; z-index: 0;

Issue: position: sticky not working 
Fix: Ensure parent doesn’t have overflow: hidden; or overflow: auto;

5. Typography & Spacing

✅ Use fluid scaling:

html {
  font-size: clamp(14px, 1.5vw, 18px);
}

✅ Line height around 1.4–1.6 for body text.
✅ Use consistent spacing scale:

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

✅ Set consistent heading sizes (e.g. h1 { font-size: 2rem; } etc.)

6. Buttons, Forms, and Inputs

✅ Remove default Safari styles:

button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
}

✅ Add visible focus states for accessibility.
✅ Prevent zoom on input focus (iPhone Safari):

input, select, textarea {
  font-size: 16px;
}

7. Animations / Transitions

✅ Prefer transform and opacity (GPU-accelerated).
✅ Avoid animating layout properties (width, top, left).
✅ For Safari smoothness:

* {
  -webkit-transform: translateZ(0);
}

✅ Add prefers-reduced-motion media query for accessibility.

8. Accessibility & Semantics

✅ Use semantic tags (header, main, footer, section, nav, article).
✅ Use aria-labels or alt text for images.
✅ Check color contrast.
✅ Don’t rely on color alone to convey information.

9. Performance

✅ Combine and minify CSS.
✅ Lazy load images.
✅ Use content-visibility: auto; for off-screen sections (modern browsers).
✅ Use will-change sparingly for smoother animations.

10. Debug Checklist

Before marking a layout as done:

Works on Chrome, Safari, Firefox, Edge.
Tested on iPhone & Android devices.
No overflow horizontally.
Text readable at all breakpoints.
Buttons/touch targets large enough (min 44px height).
Scrolls smoothly without layout shift.
No console warnings.

Most effective way to learn JavaScript

raielly — Wed, 27 Aug 2025 16:27:42 +0000

Step 1: Stop Obsessing, Start Building (Week 1)

Pick one resource and commit. Most tutorials cover the same basics—don’t waste weeks searching for the “perfect” one.
Aim to get your first “Hello World” running in under an hour. Start coding on day one instead of passively consuming content.

Step 2: Learn the Bare Minimum, Then Build (Weeks 2–3)

Follow the 80/20 rule: learn the 20% of concepts you’ll use 80% of the time.
Build with the basics instead of trying to memorize every JavaScript method.
Get foundations right:
HTML: headings, paragraphs, divs/spans, forms, inputs, links, images
CSS: selectors (classes, IDs), Flexbox, media queries
Git: create a repo, run init, status, add, commit, push

Step 3: Master Core JavaScript (Weeks 4–8)

Variables & Data Types: var, let, const, primitives vs references
Operators & Control Flow: arithmetic, === vs ==, &&, ||, ternary, if/else, switch, loops
Functions: declarations, expressions, arrow functions, and higher-order methods (map, filter, reduce)
Arrays: create, access, update, and use methods like map, filter, forEach, push, pop
Objects: create, access properties, and iterate with Object.keys, Object.values, Object.entries

Step 4: Make It Interactive (Weeks 9–12)

DOM Manipulation:
querySelector, getElementById
innerHTML, textContent, .style
Add/remove classes, create/remove elements
Handle events with addEventListener(click, form, keyup)
Local Storage & Async JS:
localStorage: setItem, getItem, removeItem
Promises and async/await
Fetch API with real data (weather, jokes, any JSON API)

Step 5: Build Real Projects, Not Tutorials (Weeks 13–20)

Escape tutorial hell by actively building and modifying projects instead of copying them line by line.

Three suggested projects:

Personal Finance Tracker
- Data entry with HTML forms
- LocalStorage for persistence
- DOM updates for displaying data
- Simple charts with Chart.js
- CSV export option
Task Management System
- CRUD operations (Create, Read, Update, Delete)
- Drag-and-drop functionality
- LocalStorage with validation
- Responsive design
- Search and filter tasks
Real-Time Weather Dashboard
- Fetch API + async/await
- Geolocation API for location-based weather
- Dynamic DOM updates
- Error handling for failed requests
- LocalStorage for favorite cities

Step 6: Think Bigger (Weeks 21+)

Larger projects teach real-world skills:
Breaking down complex problems
Structuring bigger codebases
Handling messy, unpredictable requirements
Debugging across multiple files

Step 7: Learn to Read Code (Ongoing)

Most development time is spent reading code, not writing it.
Clone open-source projects from GitHub and study patterns.
Use debugger tools to step through code.
Master browser dev tools.
Use editor shortcuts (e.g., Ctrl+Click) to navigate functions.

Step 8: Modern Workflow (Weeks 25–32)

After building a strong JavaScript foundation:
Learn React basics: components, JSX, useState, useEffect
Understand why frameworks exist and what problems they solve
Learn testing with Jest
Set up build processes with Vite
Understand package.json and npm basics
Accept that modern projects include many dependencies—don’t panic

The AI Integration Strategy

Use AI wisely—follow the 20-minute rule: try first, then ask.
Best uses for AI:
- Explaining confusing concepts
- Reviewing and improving code
- Debugging stubborn errors
- Generating practice problems

Common Mistakes That Kill Progress

Productive Procrastination: spending weeks preparing to learn instead of coding.
Shiny Object Syndrome: jumping between languages and frameworks too often.
Tutorial Hell: consuming tutorials endlessly without applying knowledge.
Avoiding Struggle: relying on AI/Stack Overflow instantly instead of problem-solving.

The Learning Strategy That Works

Build in Public
- Share progress on Twitter, LinkedIn, or YouTube.
- Find accountability partners and mentors.
- Build a visible portfolio.
- Connect with other learners and devs.
- Show proof of consistent progress to future employers.
Daily Consistency Over Intensity
- Code for 1–2 hours daily.
- Consistency matters more than occasional long bursts.
- Missing one day can easily snowball into missing weeks.
Focus, Then Expand
- Stick with JavaScript for at least 6 months.
- Push through difficulties instead of hopping to another stack.
- Deep knowledge in one ecosystem beats shallow knowledge in many.

These notes were inspired by "How I Would Learn JavaScript If I Could Start Over". If you want to watch the full explanation, check out the original video.

Fixing the WordPress Redirect Issue to /wp-admin/upgrade.php

raielly — Fri, 14 Mar 2025 18:47:03 +0000

If you're suddenly being redirected to /wp-admin/upgrade.php when trying to log into your WordPress site, don’t worry—this is a common issue and can be fixed in just a few steps.

Why Does This Happen?

This usually happens when there’s a mismatch between your WordPress database version and the actual WordPress files. The system thinks an update is needed when it might not be.

How to Fix It

Follow these simple steps to resolve the issue:

1. Check Your Database Version

Log in to your hosting control panel.
Open phpMyAdmin and find your WordPress database.
Locate the wp_options table and check the db_version value.

2. Update Your WordPress Version File

Access your site’s files using FTP or your hosting’s File Manager.
Navigate to wp-includes/ and open the version.php file.
Compare the database version from wp_options with the $wp_db_version value in version.php.
If they don’t match, update the version.php file to reflect the correct database version and save the changes.

That’s it! Now, try logging in again, and your issue should be resolved.

Happy coding! 🚀

How to Fix "MySQL Shutdown Unexpectedly"

raielly — Sun, 17 Nov 2024 14:56:59 +0000

Have you ever run into the annoying “MySQL shutdown unexpectedly” error? It’s the worst, right? But don’t stress—you don’t need to be a tech wizard to sort it out. Just follow this super simple, friendly guide, and you’ll have your MySQL server up and running again in no time!

Step 1: Backup Your Current Data Folder

First, navigate to the folder where MySQL is installed. Inside, you’ll find a folder named data. Copy this folder and save it somewhere safe, just in case things go sideways.
C:\Program Files\MySQL\MySQL Server\data

Step 2: Delete Specific Files from the Data Folder

Now, go inside the data folder and remove these items:

The mysql folder.
The performance_schema folder.
Any folders or files related to phpmyadmin or test.
All other files except ibdata1.

👉 Don’t delete ibdata1! This file is crucial—it contains important information about your databases.

Step 3: Restore Files from Your Backup

Find the backup of your data folder you created earlier. From this backup:

Copy everything except the ibdata1 file.

Paste it into the original data folder, overwriting existing files if prompted.

This step replaces the corrupted files with working ones while keeping the critical ibdata1 intact.

Step 4: Restart MySQL

With the restored files in place, it’s time to restart MySQL:

If all went well, your MySQL server should now be running smoothly! 🎉

Fixing a MySQL server that unexpectedly shut down might feel intimidating at first, but as you’ve seen, it’s totally doable with a bit of patience and care.

To help avoid this happening again, here are a few handy tips:

Always shut down MySQL properly before turning off your computer.
Keep regular backups of your data—better safe than sorry!
Watch out for other software that might conflict with MySQL.

Have questions or want to share your own MySQL recovery story? Let us know in the comments—we’d love to hear from you!

Making Your GitHub Readme Profile Stand Out

raielly — Sun, 26 May 2024 10:50:58 +0000

In this article, I like to share with you how to make your GitHub Readme profile pop and stand out from the others.

Old 🙂

New 🤩

So, basically, you just make a new repository with the same name as your GitHub username. Like, if your username is 'raielly', you'd create a repo called 'raielly'.

Then, you use the README file to make changes to your page. There you can use Markdown and HTML to add your personal touch and make your profile stand out. show off whatever you want people to know about you, list your favorite languages and tech.

For some ideas, take a peek at this site:
https://zzetao.github.io/awesome-github-profile/

Cool images for your skills and social links, grab them from here:
https://github.com/alexandresanlim/Badges4-README.md-Profile

Once you're all set, don't forget to git commit your changes.

That's it! EzPz!

Now that you've seen how easy it is to redesign your GitHub page, What does your GitHub profile readme file look like? Share your GitHub Profile below 😊😎🔥

Simplest way to Downgrade Node Version on Windows

raielly — Sat, 13 May 2023 03:26:29 +0000

In this article, we'll walk through the simple steps to downgrade Nodejs version on Windows. So, let's get started!

To begin, we need to install the Node Version Manager (NVM) which will handle the node version management. We can do this by going to the link provided and downloading the NVM setup execution file.

https://github.com/coreybutler/nvm-windows/releases

Next, we will need to run the NVM installer. Once we have downloaded the installer from the link provided, we can find it in "Downloads" folder (usually the default location). Simply navigate to the folder and double-click on the "nvm-setup.exe" file to initiate the installation process.

After double-clicking on the "nvm-setup.exe" file, a wizard called "Setup-NVM for Windows" will appear on screen. To proceed with the installation of NVM, we will need to accept the license agreement by selecting the corresponding radio button and clicking the "Next" button.

We can leave the default selected location as is and click the "Next" button. Finally, click the "Install" button to start the NVM installation process.

Great job! We have successfully installed NVM on our Windows machine. All that's left to do now is to click the "Finish" button to wrap up the installation process and close the setup wizard.

And now, lets downgrade the Node version on Windows using NVM,

Open the Command Prompt on your Windows machine as an administrator. We can do this by searching for "Command Prompt" in the "Start" menu and then right-clicking on it and selecting "Run as administrator".

check the current Node version that is installed on Windows machine by using the "-v" option in the Command Prompt.

We are currently using node “v18.12.1” on Windows. Use the "nvm" command and specify the version we want to wish to install. For example, if we want to switch from Node version 18.12.1 to 18.5.0, simply execute the appropriate "nvm" command with the version number.

nvm install v18.5.0

Use the downgraded version, with the command:

nvm use 18.5.0

After downgrading the Node version using NVM, it is important to verify whether the downgrade was successful or not. To do this, check the Node version again using the same command as before.

node -v

That's it! if the output displays the version number that you specified during the downgrade process, then it indicates that you have successfully downgraded the Node version using NVM. Great Job!

Now if we want to check all the Node versions that are currently installed on our Windows machine using NVM, simply execute the command

nvm list

This will give us a list of all the installed Node versions. To switch to a specific version that we want to use, use the "nvm use" command along with the version number just like we did above process.

We demonstrate the simplest and most commonly used method to downgrade Node version on a Windows machine. Follow the steps carefully and we'll be able to successfully switch to the desired version. Thanks for reading this article. HAPPY CODING 🚀!!

My VS Code extensions that I absolutely love and use all the time

raielly — Sat, 18 Mar 2023 09:10:40 +0000

In this article, I'd like to share with you some of the Visual Studio Code extensions that I find incredibly useful and use on a daily basis. So, if you're interested in enhancing your coding experience with some great tools, keep reading and let's explore together!

Github Theme

I personally love to use the GitHub theme as my theme for VS Code. It's not really an extension, but it changes the look and feel of my editor. It's easy on the eyes and makes reading code a breeze.

Material Icon Theme

Want to spice up your Visual Studio Code editor? This extension has got you covered with a collection of icons to choose from!

Prettier

Say goodbye to messy code with this extension! It automatically formats your JavaScript, CSS, and HTML code, making it look clean and organized.

Polacode

This extension that lets you create shareable screenshots of your code, complete with your preferred theme and font.

GitLens

I love using these extensions to improve my Git workflow in VS Code. They have been incredibly helpful!

Bookmarks

Bookmark your code easily with this extension! Just use the shortcut 'ctrl+alt+k' to add or toggle a bookmark, and 'ctrl+alt+l' or 'ctrl+alt+j' to navigate between bookmarks.

Error Lens

Make your code errors and warnings easier to spot with this extension that enhances the highlighting of errors, warnings, and other language diagnostics.

Project Manager

If you work on multiple projects in Visual Studio Code and need to switch between them frequently, the Project Manager extension can simplify the process and make managing easy.

ESLint

This amazing tool for coding JavaScript highlights common errors as I write code, helping me detect and fix mistakes quickly. Plus, it provides real-time validation to keep my code error-free.

Live Server

Create a local development server with ease using this extension! It even includes a live reload feature that works for both static and dynamic web pages.

REST Client

Want to test your APIs without leaving Visual Studio Code? The REST Client extension has got you covered! It lets you send HTTP requests and view responses right inside VS Code. Say goodbye to switching between applications!

Output Colorizer

Make your log files easy on the eyes with this extension! It adds syntax highlighting to your logs for a colorful and organized display.

JavaScript (ES6) code snippets

This extension is essential for web development as it offers code snippets for JavaScript, Vue, React, and HTML.

Auto Rename Tag

This extension helps you save time by automatically updating the name of the corresponding close-tag when you modify the name of an open-tag. No need to manually update them anymore!

Auto Close Tag

Save time and maintain your HTML files easily with these two VS Code plugins. They automatically rename and close your tags, even in React's JSX syntax.

Auto Import

With this extension, you'll never have to manually search for imports again! It automatically detects and suggests code completion and actions for all available imports in your code, saving you time and effort.

Import Cost

Imagine being able to see how much space a third-party library takes up in your code! That's exactly what the Import Cost extension does. It even uses colors to show you which ones are heavy imports, and highlights them in red so you can easily spot them.

npm Intellisense

This awesome plugin for Visual Studio Code helps you quickly autocomplete your npm modules when writing import statements. No more typos or manual searching for module names!

Path Intellisense

Meet the sibling of NPM Intellisense! This awesome VS Code plugin now autocompletes your filesystem paths. It's from the same maintainer as NPM Intellisense, and it's become a must-have tool for me. Give it a try and simplify your coding workflow!

And there you have our selection of extensions, thank you for reading this article that can enhance your productivity and coding experience! I hope that these extensions, from code completion to debugging to project file management, will be helpful for you. Let me know in the comments which ones you find the most useful! Thanks again for reading! 🙌

Export an Array of JSON Objects to Excel with SheetJS

raielly — Tue, 07 Mar 2023 06:29:45 +0000

In this article, we will demonstrate how to convert JSON response data to an Excel file with defined headers and columns that can be downloaded directly by the client.

To accomplish this, we will utilize the SheetJS plugin.

Let's begin, add a button that users will click to generate an export

<button type="button" id="exportExcel" > Export Excel </button>

then create array of "employees" objects

const employees = [
  {
    id: '1',
    name: 'Saitama',
    age: '32'
  },
  {
    id: '2',
    name: 'Genos',
    age: "24"
  }
]

Next create a workbook
XLSX.utils.json_to_sheet generates a worksheet:

const worksheet = XLSX.utils.json_to_sheet(employees);

XLSX.utils.book_new creates a new workbook and XLSX.utils.book_append_sheet appends a worksheet to the workbook. The new worksheet will be called "Empoloyess":

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Employees");

Last export the file
XLSX.writeFile creates a spreadsheet file and tries to write it to the system.

compression: true enables ZIP compression for XLSX and other formats.

XLSX.writeFile(workbook, "Employee Lists.xlsx", { compression: true });

That’s it! this is the simplest code to convert JSON data in XLSX EXCEL file which will download on the client side.

Access functioning demo here

PS.

By default, json_to_sheet creates a worksheet with a header row. In this case, the headers come from the JS object keys: "id", "names" and "age".

Let's create array of custom header

const excelHeader = [
  "Employee Id",
  "Full Name",
  "Age"
]

If we want to fix the header and customize the name we can simply use XLSX.utils.sheet_add_aoa that can write text values to the existing worksheet starting at cell A1:

XLSX.utils.sheet_add_aoa(worksheet, [excelHeader], { origin: "A1" });

And since some names may exceed the default column width, we can adjust the column width by defining the "!cols" worksheet property. For example, the following line sets the width of column A to approximately length of the header + 5


// Map the array and get the length and add 5 to add extra spaces.
// Push the value to the defined variable `wscols` 
// Assign the varialbe `wscols` to `worksheet["!cols"]`
let wscols = []
excelHeader.map(arr => {
  wscols.push({ wch: arr.length + 5 })
})
worksheet["!cols"] = wscols;

Access functioning demo here

Some common scenarios where using git stash can be useful in a development workflow.

raielly — Sun, 05 Mar 2023 00:01:24 +0000

Git stash can be a useful tool in certain situations, such as when you need to quickly switch to another branch or work on a different feature. However, it's important to use this feature accordingly and in conjunction with other Git commands and techniques to ensure that your development workflow stays organized and manageable.

I find Git stash particularly useful in situations where I realize that I forgot something in my previous commit, and have already moved on to working on the next one within the same branch.

Here are some commands you can use:

git stash (command to save any changes that you haven't committed yet into a "stash". Please note that this command removes those changes from the working tree.)

git checkout other_branch (to switch to the desired branch -- in this case 'other_branch')

git stash list (check list of stashes)

git stash apply (apply the saved changes from stash to the current branch's working tree.)

git stash apply stash@{12} (in case you have multiple stashes, you can specify which stash to apply. Here, we are applying the 12th stash.)

git stash drop stash@{0} (to remove from stash list -- in this case stash 0)

git stash pop stash@{1} (to apply selected stash and drop it from stash list)

PS.
To save git stash with custom commented, we simply use
git stash push -m "my-stash-name" and then to apply changes use
git stash apply stash^{/my-stash-name}

So basically, Stash command is like a little magic trick for your changes. It lets you keep some changes that you don't need or want right now, but you may need them later on.

Merge changes made in the "master" branch into your development branch.

raielly — Sat, 04 Mar 2023 13:51:27 +0000

If we needs to stay in sync with the latest changes made in "master", while also retaining a complete record of all changes made. Let's try to use rebasing.

git checkout master
git pull --rebase
git checkout branch_name
git rebase master
git push -f origin branch_name

Note: Don't forget to backup first your branch when doing changes

git branch branch_name-bkp

If there's any conflict arise, use this command as needed to fix the issue based on the situation and the hints provided by git.

git rebase --continue
git rebase --skip
git mergetool

Please continue this process until all conflicts are resolved.

At this point, our branch should be rebased and aligned with the "master" branch, and the remote should also be updated. When checking the Git log, there should be no instances of "behind" or "ahead".