DEV Community: Sufiyan Yasa

Git: How to save your changes temporarily

Sufiyan Yasa — Sat, 29 Aug 2020 17:44:29 +0000

"Fixed". Please pull master...

This scenario should be very familiar to you.

"You are coding an important feature.

Git status reveals a large number of uncommitted
changes.

As you test your feature, the app reports a nasty crash/bug/assertion on a
different module. As you are blocked from testing, you reach out to the owner.

The code owner informs you that he pushed a fix a few moments ago."

If you have worked in a team environment, you should at least once experienced the scenario above.
I definitely have, especially working on a codebase with 1000 or more daily commits ( we use git as our version control ).

Well, what would you do? The most common step is to pull master to retrieve the fix.
So, you run back to your desk, and execute git pull --rebase.

I am a fan of git rebase. I think that using rebase makes git history so much cleaner and easier to maintain.

Instead of getting a list of file changes or commits, your terminal reports this error:

❯ git pull
error: cannot pull with rebase: You have unstaged changes.
error: please commit or stash them.

Translation: "You still have work in progress and I don't want to mess up and overwrite
your changes. Please commit or temporarily shelve your work."

Since you have uncommitted changes, you can't pull from master.
You could commit your changes and move on.

Emphasizing the word: commit - I personally think every commit should
be workable, compilable and maintainable code
( else I would rename git commit to git save )

Back to our problem - there is an easier way.

How to pull changes while having uncommitted changes?

Use Git Stash command.

Git Stash excels in these types of scenarios
(where you need to pull the latest code changes while not being ready to commit your
own changes).

git stash is a git command that allows you to temporarily shelve
or put aside uncommitted changes.
You are then free to update your local copy.
And can immediately continue where you left off by popping your stash.

Back to our scenario, I would execute git stash with:

git stash -u

The -u sign is optional but I find it very handy. It tells git stash to include
new files ( git stash untracked files ).

Now you're left with a clean working tree. Hopefully, git pull --rebase should be able
to work.
To continue where you left off, use git stash pop.

git stash pop

This will pop the latest stash to your working directory.
And that's it, you have successfully pulled master without committing your local changes
with just 3 commands.

git stash -u
git pull --rebase
git stash pop

Automation with "rebase.autostash"

I don't know about you but writing 3 commands every time does get tiring.

So, can "git pull" auto stash and pop pending changes? Yes.

You could create a special git alias that runs all 3 commands in order.

However, since Git version 2.7,
a new global config flag ( rebase.autostash ) was introduced that automates stashing. Amazing!

By default, this flag is set to false. Enable it globally by running:

git config --global rebase.autostash true

Now, whenever you run git pull --rebase, your local changes will automatically be stashed
and popped back. Pretty neat.

Wrap up

Git stash shines in scenarios when you're stuck between pulling master
and having a dirty working copy
( especially during moments when your boss comes in and demands that you fix something immediately ).

Paired with rebase.autoStash, my daily git experience is smooth and easy.

Finally, I highly recommend visiting git-stash documentation page,
if you want to know more about the different modes of git stash.

Commit Mistake: How to untracked files in Git

Sufiyan Yasa — Thu, 27 Aug 2020 21:02:54 +0000

My Reason to Git stop tracking file

There are a couple of reasons to untrack a file in your git repository.
Though my obvious reason is because of fat fingers.
Sometimes I accidentally committed a binary file with git add ..

Thus it is pretty handy to know how to untrack files in Git.
Plus it is super easy.

Tell Git to untrack file

Use git rm to Git untrack file.

git rm --cached <filename>

And if you need untrack more that one file, simply append the files:

git rm --cached <filename>  <filename2>  <filename3>

Both of the commands above git untrack file without deleting.
This is because of the cached option. Removing the cached option will
delete it from your disk.

git rm <filename>

After run this command, don't forget to commit the changes. Git update on other developers
machine will automatically remove this file

Tell Git untrack folder

What about when a whole folder needs to be untracked?
Removing a whole directory is simple too with the recursive option.

git rm -r --cached <folder>

If needed, ignore the file in the future

Optionally, once you have the file removed, you can add it to your git ignore file.
Conveniently, this file is called gitignore.

A gitignore file is a file that tells Git which files or folders to ignore.
Gitignore file is usually placed in the root directory of a project.

For more about gitignore - read this gitignore article

Why use 'git rm' to remove a file instead of 'rm'?

Technically they are both the same. git rm does 2 commands at once:

Removing the file from index
Staging the next commit with the removed file

rm only removes the file from disk. You will still the to stage and commit the deleted file.
git rm does that in one single step.

Appstore Connect API Golang Client code

Sufiyan Yasa — Thu, 30 Jul 2020 09:19:37 +0000

Apple AppStore Connect API Go client code

Over the weekend, I was testing AppStore Connect API Client in Go.

Announced on WWDC 2020, Apple published an OpenAPI specification for AppStore Connect API (more than 250 endpoint APIs ).

With OpenAPI, I can generate Go client code for AppStore Connect API.

During this process, I experienced difficulties in getting the client code to work.
I realized that I could share my generated code to save others the same trouble.

You can find this Github project with the generated Go code along with instructions.
AppstoreConnect-OpenAPI-Go

What you will find in the Github project:

Generated Code for Go
Command used to generate the client code ( in the Makefile )
An example on how to use the generated code.
An example on how to use Apple .p8 for JWT signing

External tools and dependencies used

I used OpenAPI generator to generate the client code.
JWT-Go helped with signing JWT token for testing.

What can you do with project

Some examples of services that can be automated are:

User invitation automation
AppStore release management
Test Flight
Certificate management

Hopefully the generated code will help you save time ( instead of manually coding each operation)

Final Thoughts

If this project is useful to you, I appreciate if you could give it a star.
That would help me understand if I should invest more effort into it.
I plan to add in the future:

More examples
Automation code generation
Create tag/release

How to create custom URLS on Gridsome blog

Sufiyan Yasa — Tue, 07 Jul 2020 01:54:39 +0000

Shorter URLs are better for your site

Your URL is one of the most important aspects for your site.

A great URL can help improve Search Engine Optimization (SEO) and bring more visitors to your site.
A poorly designed URL may discourage potential visitors away.

Imagine that you receive an email with 2 URLS, which one would you click?

URL A - www.somesite.com/folder1/folder2/http/jfkaliburrwweqze?sessionid=1231233&utm_medium=bcx
URL B - www.somesite.com/how-to-bake-cake

If you are like me, I would choose the URL B. It is:

easier to read
concise
understandable
likely to be shared on twitter

URL A on the other hand is:

longer
confusing as it has random words that does not make sense
looks spammy due to the URL parameters like sessions=1231233

Shorter URLs can help improve SEO

Can shorter URLs positively impact on SEO? Yes it can.

Search engines would favor URLs that consist of relevant keywords.
This rule may not be a main criteria for SEO but there are is some correlation
with top sites on Google search.

Here is a google search for search query 'types of marketing':

We can make a few observations from the image above:

All the URLs length are short
All the URLs contain the keywords usually in the first 3 positions
All the URLs do not URL parameters.

Give this a try on your own.

Make a few searches on your keywords and observe the top 10 results on Google.
Do they match with the observation above?

Next, lets look at URLs on GridSome.

Gridsome starters use Titles as URLs

Gridsome is a great static generator. It is easy to start blogging with Gridsome starters.
Gridsome starters are pre-made project templates.
They come with pre built design, plugins and markdown generators by the community.

Starters are great because they save alot of time and are a great resources
for learning Vue.js.
This site itself was made from Casper v3 Grdisome starter.

Unfortunately, Gridsome starters are rarely SEO tuned.
Often, you would need to investigate and apply SEO fixes on the starter yourself.
A common pattern in most starters are using the blog titles as URLs.

As an example, a blog with the following title

how to bake a cookie without using an oven

would be automatically linked to the following URL

www.abc.com/how-to-bake-a-cookie-without-using-an-oven/

This is very convenient. But this convenience comes with the following drawbacks:

A long title will make your URLS longer
Difficult to add important keyworrds in the first 3 positions of the URL
Upgrading your title will change your URL. Users that bookmark your previous URLs will receive a 404.

Titles are important for SEO. However, they are not great for generating URLs.
Thus blog titles and URLS should be separated.

Lets look at how to apply this to Gridsome.

Disclaimer

Not all Gridsome projects are built the same way. Depending on your setup - the instructions in this article may not apply.

How to define a custom URL for your blog

For the instructions below, I am applying changes to this github project project. For each changes applied, I will create a separate Merge request.

Open gridsome.config.j and look for the template section.

//In gridsome.config.js
templates: {
  Blog: [{
    path: '/blog/:title'
  }],
  Category: [{

The template section is used to create the pages (ie blog post ) for Gridsome.
Current each post if mapped to blog/:title
Lets change that to blog/:url instead.

//In gridsome.config.js
templates: {
  Blog: [{
    path: '/blog/:url'
  }],
  Category: [{

We refered to a new variable call :url. Since this variable does not exist yet.
Trying to generate our site will throw a duplicate warning as shown below:

Another problem is on the development server, we only see one article instead of two!

To fix this, we will need to go to every markdown file and add URL to the top.
Since we have only one blog post, lets update that quickly.
Open content/blog/entry1.md and add an url.

---
title: "Troes retardat"
tags: tag1, tag2
category: Digital
excerpt: Lorem markdownum aptos pes, Inachidos caput corrumpere! Vincere ferocia arva.
created: 2019-01-10
image: ./images/josh-spires-dronenr-sQalFlXIsLs-unsplash.jpg
image_caption: Photo by Josh Spires on Unsplash
author: author1
url: first url
---

Similarly, open content/blog/entry2.md and add another url.

--------
title: another article
tags: tag1, tag2
category: Digital
excerpt: Lorem markdownum aptos pes, Inachidos caput corrumpere! Vincere ferocia arva.
created: 2019-01-10
image: ./images/josh-spires-dronenr-sQalFlXIsLs-unsplash.jpg
image_caption: Photo by Josh Spires on Unsplash
author: author1
url: second url
--------

Rerun the gridsome site again. Our custom URL should be used.
http://localhost:8080/blog/first-url

Please check this merge request for the changes we have done so far.

Merge request 1

Redirecting existing traffic to new URLs

We saw how easy it is to change our URLs.
But we are not done yet.
If you have existing traffic on your site, changing the urls will cause a big drop in traffic.

It takes time for Google to re-index your site.
During that time, users that click on your links will be receive a 404 (Web page not found)

Thus, it is best to redirect your users to the new URL.
To do this, we need to add a new redirect feature.

We will redirect traffic from old URL to our new URL.

First lets create a new vue component that handles redirect.
Add the new file Redirect.vue in components folder.

//In src/components/Redirect.vue 
<page-query>
query Redirect ($id: ID!) {
   blog (id: $id) {
    path
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
        title: `Site has moved to ${this.$page.blog.path}`,
        meta: [
            { 'http-equiv': 'refresh', content: `0; URL=${this.$page.blog.path}`}
        ],
    }
  }
}
</script>

This component will redirect users to our new URL via meta refresh.

Back to our configuration file, add an additional section to use
our new Redirect component.

//In gridsome.config.js
templates: {
  Blog: [
  {
    path: '/blog/:url'
  },
  {
      name: 'redirects',
      path: '/blog/:title',
      component: './src/components/Redirect.vue'
    }
  ],

Above we are add another definition for our blog posts.
Each blog post will have 2 URLs, where one is a redirect to our new URL.

If we invoke http://localhost:8080/blog/another-title should redirect
to http://localhost:8080/blog/second-url

Please check this merge request for the changes we have done so far.

Merge request 2

Bonus: Can I use my file names for URL instead?

Yes, you can use your filename for the URL. I don't see any
downsides of this approach.

I leave this to the readers as practice.

Closing

Heres a quick recap of what we learned so far:

Understand why short custom URLs matter for SEO
Identified the downside of using blog titles as URLs
How to customize blog post URLs on Gridsome
How to avoid losing existing traffic

I hope that this article helped to demonstrates the benefit and approach of owning your URLs.
Short urls can be a game changer for your site.
If you have been struggling with SEO, short custom URLs may be worth a try.

For more reading on short URLs, here is a list of very good articles to read

Originally posted here