DEV Community: Gabrielle Jacobs

Why are my RSS Feed posts not saving an uploaded cover image

Gabrielle Jacobs — Thu, 22 Oct 2020 17:24:38 +0000

My Wordpress posts import fine from the RSS Feed but it doesn't include the featured image. In dev.to, I see the Upload Image button but when I upload an image, it doesn't allow me to edit the Alt Text then when I hit Preview there's no image showing. When I go back to Edit, the uploaded image link disappears. I tried uploading then publishing without previewing but again, no image shows. Images work fine when I write a post or embed them in the article.

Git Revert: aka How to delete a commit without losing other commits

Gabrielle Jacobs — Thu, 22 Oct 2020 16:53:00 +0000

I was pair programming and my partner somehow merged another pair’s branch and made several commits after. My partner never did a git merge so we were confused how that happened. But the important thing is… HOW DO WE FIX IT?!

I worried it would be very difficult and risky like doing a git rebase or something, but luckily it’s a very simple fix.

Revert a normal commit

git revert <commit hash>

Revert a merge commit

git revert <commit hash> -m 1

Note that commit hash is the 7 character id associated with the commit you want to delete.

You will then be asked to add your commit message as you would a normal commit. Then git push.

That’s it! You’re done!

Extra explanation for those who want it…

What is -m 1? The -m specifies the parent number and merge commits have more than one parent. Git doesn’t know automatically which parent branch is the main one and which one you want to un-merge.

When you do a git log, you will see next to Merge, the parent branches

commit 8f937c683929b08379097828c8a04350b9b8e183
Merge: 8989ee0 7c6b236
Author: John Doe <john@example.com>
Date: Wed Oct 21 22:49:41 2020 +0100

In this situation, git revert 8f937c6 -m 1 will get you the tree as it was in 8989ee0, and git revert -m 2 will reinstate the tree as it was in 7c6b236.

If you merged another branch with your’s, then your branch is most likely the first one so -m 1 will be what you use.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.

7 Git commands essential for contributing with a team

Gabrielle Jacobs — Wed, 07 Oct 2020 19:41:47 +0000

You've been coding away, working on your own projects, adding to your own repositories but now you're working with a team of people and you realize, "I have no idea how to work with a team on a project". Let's learn the git commands that will help you transition to this new team workflow so that you can continue confidently.

Add repo folder to local computer

If you're not already a member of the repository, Fork it in the upper right corner so it goes to your repos. If you are already apart of the repo you can skip this step.

Under the Code tab, click the green Code button and copy the HTTPS repo link.

In the terminal, cd to your where you want your folder to live, whether Desktop or Documents or another folder.

Now let's add the repo to your computer by doing git clone and pasting that link you just copied. Then hit enter to let it do it's thing.

git clone https://github.com/profile-name/repo-name.git

This has not only copied the folder but it also connected your local terminal to the GitHub repo

Now cd into your new created folder.

cd repo-name

If you're working with a project that requires dependencies such as node modules, we will need to update those to their latest version. Chances are good they have become out of date while sitting in the original repo.

npm update

This will automatically update all dependencies and will take some time to complete since dependency folders, like npm modules, are quite large.

You are all set. Now just double check it works by opening the file in a browser (possibly with npm start).

Create a new branch

We don't want to commit everything to the main branch immediately because we might break something, so a branch needs to be created that we can work off of.

If multiple people are working on the same issue, one branch can be used, but each new issue needs a new branch ideally. To create a new branch do this below.

git checkout -b new-branch-name

Now this branch is on your local computer, so how do your teammates get access to this branch? We have to push it to the online repo.

git push -u origin new-branch-name

You can confirm it worked by going to Github where you can see that the group repo has a new branch and you can click "branches" to see your's and all the others.

Change branches

Now ate this point, you should be working on this new branch you created. How can you confirm this? If it's wrong, how can you change it?

To see what branch you are on as well as see all other options for other branches, type this.

git branch -a

Your active branch will have an * next to it. The others are branch options you have. It should look something like this.

* new-branch-name
main
remotes/origin/new-brach-name
remotes/origin/main

What if that asterisk was on the main branch? Or what if you needed to go to the main branch for some reason? You can easily switch between them. Let's switch from new-branch-name to the main branch.

git checkout main

You'll get a confirmation that you switched branches and you can check it by doing git branch -a again.

* main
new-branch-name
remotes/origin/new-brach-name
remotes/origin/main

Great! Now this was just an example, but remember to switch back to your branch with git checkout new-branch-name to continue working with your project.

Track File Changes

Now you've been working and saving your project as normal and you're ready to start committing, but first we need to make sure we commit the right changes.

git status

This will show all the changes you made in red because that means these changes aren't being tracked yet.

Most of the time you'll want to commit all the files so you can just do this to add and track all changes.

git add .

But what if you have a couple of files that don't need to be committed? Maybe you had a personal file for your own purposes of unofficial debugging or testing .

git add file1 file4 file5

Now we should be able to do git status again and if you did all, they should all be green now. If you did certain files, only those files should be green. Green means they are being tracked and ready to be committed.

Commit

Now we have to commit these changes you made locally along with a message describing what you did. Luckily this is very simple to do!

Note: Before hitting enter to commit, if you worked on this commit with a teammate, read the next section first on adding multiple authors.

git commit -m "Commit message here."

If you want a multi-line message, you can simply hit enter. As long as you don't close the quotes, it will keep going as the commit message.

git commit -m "Commit message here.
Second commit line.
Third commit line."

Add multiple authors to a commit

Now when you commit, Github will give you credit as the committer and author. But you're working with a team, so what if that one commit was a group effort? Let's give everyone credit for it! We're going to add a line or so to the commit message.

There's a feature called "Co-authored-by" that allows you to connect each member's name and GitHub account to the commit. The name isn't too important but make sure the email is one they have linked to their GitHub account or else their info will look a bit funky in the official GitHub commit. Notice again that the commit quotes don't close until after the authors are added.

git commit -m “Commit message here.
*skip this line*
*skip this line*
Co-authored-by: name <name@example.com>
Co-authored-by: name <name@example.com>”

If you did this using Github desktop, you can simply add the exact format, Co-authored-by: name <name@example.com>, in the "Detailed description" box under the short description box of the commit.

You've officially committed your code to your local new-branch-name, but now let's add these commits to the group new-branch-name online.

Push Changes

Pushing is a very simple task that simply takes all the commits and changes you made locally to the group repository. You should still be in your new-branch-name but double check with git branch -a. Good? Great! Now let's push.

git push origin

Origin is saying, push to the branch I'm currently on and you don't have to fully type out git push origin new-branch-name every time.

Now go to Github, click your branch, and you can see your commits along with the co-authors you added.

Create a pull request via the GitHub desktop to request merging this branch with the main branch. Wait for approval or review or whatever your team does then the head merger will merge it.

Pull Latest Code

The code on the main repository has updated since you last used it and you need to make some new changes. You don't need to fork and clone anymore because it's on your computer already, just not the updated one. Let's pull the new code.

Note: Be sure to be in your desired branch or just the main one if you don't need a specific branch

git pull origin
//if new dependencies were added by another contributor or you are not sure, do...
npm install
//if its been awhile or you know an update occurred, do...
npm update

You can now check your local folder and you should notice the latest code in there. You can work on this as usual and follow all the same previous steps from above.

Conclusion

You now have all the basic knowledge you need to effectively contribute to a group project! And just in time for Hacktoberfest ;) .Hopefully this has helped someone to become 1 step closer to becoming a better developer.

Install Nodemon and how to deal with potential issues

Gabrielle Jacobs — Fri, 18 Sep 2020 04:12:38 +0000

Nodemon will monitor any changes in your code and automatically restart your server. This removes the need to type in node server.js to start, restart webpage to see changes, control+c to stop, and repeat after every single little change. You can read more about it here.

In a perfect world, this first step should work for you and be done. You can stop reading. In your terminal, it doesn’t need to be in a project folder, type this to download it to your computer.

npm install -g nodemon

Potential Issues

If that doesn’t work for you, then try this.

sudo npm install -g nodemon

You will need to enter a password so make sure you have admin privileges on your computer. If it’s your computer and not a job or school’s, then this shouldn’t be a problem.

Note: Your password won’t show up when you type it.

After installing Nodemon, if you try to run it and get a long error list, you can get rid of it by entering:

npm i pstree.remy@1.1.0 -D

The documentation for this issue can be found here on GitHub.

You should be good to go now!

Conclusion

Once you have it downloaded, you can go to your folder in the terminal and instead of typing node server.js, you can type nodemon server.js. It is now monitoring for changes. Every time you hit save, nodemon will automatically restart the server and you just need to refresh the browser to see your updates.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.

How to wrap text around an image outline

Gabrielle Jacobs — Mon, 31 Aug 2020 03:41:31 +0000

Today we’re going to learn how to wrap text around a non-traditional image outline instead of a square, rectangular, or circular image. In honor of Chadwick Boseman (R.I.P.), we’re going to use Black Panther.

Let’s start with an image and some text. Make sure the image is a png.

/*The image can be a link or a file*/
<img class="photo" src="https://image-link.png"/>
<div>
  <!-- Add as many paragraphs as you want -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

It should look like this so far.

Next let’s move the words next to the image. In the css, we’re going to add a float. Note the class name for the image is “photo”.

.photo{
  float: left;
}

Now we’re going to add some css styles you may not have heard of yet.

The first is called shape-outside. Shape-outside provides a way to customize the usual text-wrap wrapping, making it possible to wrap text around complex objects rather than simple boxes or circles. Note that this property will only work on floated elements.

The possible values for shape-outside are :

circle(): for making circular shapes.
ellipse(): for making elliptical shapes.
inset(): for making rectangular shapes.
polygon(): for creating any shape with 3 or more vertices.
url(): identifies which image should be used to wrap text around.
initial: the float area is unaffected.
inherit: inherits shape-outside value from parent.

We’re going to use url. So under your float style, add this.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
}

Now I’m not saying css is magic… but css can certainly be magical. It’s looking better already! 😉

Next we’re going to add something called the shape-image-threshold. It may not always be needed (and in my image’s case it’s not needed), but it’s good to be aware of. So I’m going to show you!

It’s mainly used with gradient images or images with a shadow and says, “This is how much of the gradient I want the words to cover.” Since my image doesn’t need it, here is an example.

The top image has a threshold of 0 while the second has a threshold of 0.3.

The possible range is from 0 to 1, same as opacity measurements.

In my image’s case, it will only slightly hug the edges of the image more or fully cover it if I input 1. It’s looking for shadows or gradient which my image doesn’t have. So let’s give Black Panther a nice little hug and add some shape-threshold. Adjust yours as needed.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
}

As you can see, nothing has really changed at all for my non-gradient image.

Now let’s give Black Panther some room to breathe by adding margin. But because we’re using shape-whatever, we can’t just use margin. We have to use shape-margin.

.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
  shape-margin: 2%;
}

That’s so much better!

Well there you have it, we’ve created a custom text wrap around an image.

Just to make it pretty, we can add some styles on the div.

div{
  width: 90%;
  margin: 0 auto;
  padding: 0 1%;
  font-family: Arial;
  text-align: justify;
  color: silver;
  background-color: black;
  border: 10px purple solid;
  border-radius: 10px;
}
.photo{
  float: left;
  shape-outside: url("https://image-link.png");
  shape-image-threshold: 0.9;
  shape-margin: 2%;
}

Today we learned about shape-outside, shape-image-threshold, and shape-margin to make a text wrap around a non-traditional image shape.

Hopefully this has helped someone to become 1 step closer to becoming a better developer.