DEV Community: Eva

Merge the Current Branch to Main and Push to GitHub

Eva — Sat, 21 Feb 2026 16:04:38 +0000

| objective |

Merging the current branch to main at the end of a successful dev session is a professional "best practice." It ensures your "production" code is up to date and earns you that well-deserved, sweet, green square on your GitHub contribution graph.

| how-to |

1) Commit your current work to your branch:
git add .
git commit -m "feat: <details>"

Optional: You can push the branch for now and merge it to main later.
git push origin <branch name>

2) Switch to the main branch:
git checkout main

Optional: Pull the latest changes from the remote main branch to keep your local main up to date and avoid conflicts.
git pull origin main

3) Merge your feature branch into main:
git merge <branch name>

4) Resolve any merge conflicts if Git reports any:

If conflicts occur, Git will indicate which files are in conflict.
Manually edit the files to resolve the conflicts (the files will contain markers like <<<<<<<, =======, and >>>>>>>).
After resolving, stage the files:
git add <resolved-file>
Complete the merge with a commit:
git commit

5) Push the main branch to GitHub:
git push origin main

Scraping webpage header text with Python

Eva — Tue, 15 Oct 2024 01:18:18 +0000

| task |

We have several lists of URLs and need to get the headers from these pages. Assuming all the headers are wrapped in h1 tags and these pages are done in HTML/CSS.

| tech |

Python* and Beautifulsoup
*you need to install Python and bs4, and create a virtual environment to run Python. [how-to tk]

| solution |

First, put the URL lists into its .txt file and save them under the same folder as the project. After that, create another .txt file to store your output (output.txt).

Create a Python file (.py) to write the script in.

Here is the logic:

1) go to the URL, and get the HTML content of the page
2) if we can get the HTML content and the h1 tag exist
3) we get the text inside of the h1 tag and put it into our output.txt file
4) repeat the above steps for all the URLs
5) repeat the above for all the URL list .txt files in the folder if you have separate URL lists.

Full script:

import requests
from bs4 import BeautifulSoup

def print_h1(url: str):
    response = requests.get(url) # querying the webpage, and get an object as a response 
    soup = BeautifulSoup(response.text, 'html.parser')
    if response.status_code != 200 or soup.h1 == None:
        print("FAILED: ", url)
        return
    print("\t", soup.h1.text)

files = ["urls/urllist1.txt", "urls/urllist2.txt"]

for file in files:
    with open(file) as f:
        urls = f.readlines()
        print(file)
        for url in urls:
            print_h1(url.strip())

Here is the breakdown:
1) First, we need to import dependencies.
import requests from bs4 import BeautifulSoup

2) Write an algorithm to loop through the URL list files, and loop through all the URLs in one list.
Use a custom function "print_h1" to extract the h1 from the page, and url.strip() removes any extra space around the URLs in the .txt file. We also added "print(file)" so we know which URL list file all the headers belong to.
for file in files: with open(file) as f: urls = f.readlines() print(file) for url in urls: print_h1(url.strip())

3) Create an array for all the URL list files.
files = ["urls/urllist1.txt", "urls/urllist2.txt"]

At the end of #2, we have a function "print_h1" that needs to be defined. Now let's create the function.

response = requests.get(url)
Get the URL from the .txt file

soup = BeautifulSoup(response.text, 'html.parser')
This line creates a Python Beautiful Soup object and passes it to Python’s built-in HTML parser.

if response.status_code != 200 or soup.h1 == None: print("FAILED: ", url) return
This is our error-catching block. If we can't get an URL as a response, or there is no h1 tag on the page, we print "FAILED" and append the URL.

print("\t", soup.h1.text)
We print the text in the h1 tag in output.txt. "\t" adds a tab in front of the text.
[tk: how do we make the function print the output in output.txt?]

Run the Python file and it should write all the headers and error messages into the output file.

credit:
Christian Rang

reference:
https://oxylabs.io/blog/beautiful-soup-parsing-tutorial
https://www.crummy.com/software/BeautifulSoup/bs4/doc/

Photo by Javier Quesada on Unsplash

'Switch' is not exported from 'react-router-dom'

Eva — Wed, 06 Mar 2024 04:11:34 +0000

| error message |

SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=0634216f' does not provide an export named 'Switch'

| tech |

Vite as the local server with TypeScript

| solution |

In react-router-dom v6, "Switch" is replaced by routes "Routes". Here are the related updates you should make to your code:
update:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

to:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

update:

<Route path="/" component={Home} />

to:

<Route path='/' element={<Home/>} />

Other steps you may take to resolve this issue:

1) Check react-router-dom Version: Make sure that you're using the up-to-date version for 'react-router-dom'

2) Verify Import Statement: Double-check your import statement for the "Routes" component.

3) Check node_modules Directory: Verify that react-router-dom is installed in your node_modules directory. You can navigate to your project directory and check if there's a react-router-dom folder inside the node_modules folder.

4) Check package.json: Open your package.json file and ensure that react-router-dom is listed as a dependency. It should look something like this:

"dependencies": {
    "react-router-dom": "^X.X.X",
    ...
}

Happy coding!
Eva

Reference: https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom
More recouce:
https://reactrouter.com/en/main/upgrading/v5

Reverting to a Previous Commit with Git

Eva — Sat, 03 Feb 2024 18:42:08 +0000

| tech |

Working with Git and GitHub using Visual Studio Code

| goal |

Reverting to a previous commit that was already pushed to GitHub and potentially getting rid of any updates I made since the commit

| solution |

In your terminal on VSCode, enter git log to see your previous commits:

Locate the commit that you'd like to revert to and copy its ID:

Then enter git stash to stash away any changes you've done since the last commit, and enter git rest --hard 7a217627b999b54b6e60d8a2c7f61e7054da8f7b (the long string is the commit ID).

Your files should revert to whichever commit you choose after these steps. If you wish to retrieve the work that you stashed away, use the command git stash pop and they'll show up, but in my case, I don't need the work anymore. I've seen articles suggesting using the command git rest --hard 7a217627b999b54b6e60d8a2c7f61e7054da8f7b right away without stashing your work, but that is a less preferred approach to me.

Happy coding!

source: stackoverflow

Troubleshooting Vite Deployment Issues on Netlify

Eva — Wed, 08 Nov 2023 22:13:26 +0000

| tech |

Code stored on GitHub and then deployed on Netlify

| error message |

Failed during stage "Reading and parsing configuration files"

| solution |

In "Build settings" enter the below configuration:
Base directory:
Package directory:
Build command: vite build
Publish directory: dist

Leave the rest as is and deploy.

| context |

One of the things that has become a prerequisite of whether or not I would continue developing an app is my ability to deploy it online. As a not-so-new-newbie to software development, I've run into several issues deploying my apps in the past, resulting in me not being able to share my work with the world. As much as I love coding, if no one can see and interact with my work, it diminishes the purpose of creating apps!

Yes, I love to be dramatic, but wouldn't you agree that it's just as satisfying to share your apps with people? That's why after setting up the basic structure for this app, I tested the deployment right away but had no success.

I tried several different configurations for the deployment but failed, and when I was eventually able to deploy the web app, it loaded as a blank site. I knew it had something to do with Vite and the configurations on Netlify, and after a lot of trial and error, I found the correct config.

Other than reading the error messages on your platform of choice for deployment, try these steps the next time you encounter deployment issues:
1) Open the web inspector on the browser you are using to view the website or web app. Here I used Chrome, my preferred browser, but I also recommend Firefox.
2) Go to the console tab, or just click on the error icons that show up on your web inspector, if any, and it will open the console tab.

3) Google the error message and read the first few search results that come up.

Here is a log of all the failed deployments. To me, all the failed attempts are just part of a journey to the eventual shiny green "Published" status:

Have you encountered similar deployment challenges in your projects? Share your experiences!

Xoxo,
Eva