DEV Community: Jacqueline Binya

Using SVGs in Vuejs made simple

Jacqueline Binya — Fri, 29 Jan 2021 16:25:39 +0000

Images of the web

The most commonly used image formats in the web include bitmap, svg and webp.

Bitmap

Bitmap images are made up from tiny dots called pixels. Each pixel is actually a square which is assigned a specific color and is arranged in a pattern to form the image. When you zoom in on a bitmap you can actually see each pixel. Image formats like JPEG, PNG and GIF are all bitmap. Bitmap format is suited for highly detailed images like photographs.

WebP

WebP is a highly perfomant image format created by Google it was created to replace bitmap.

SVG

Scalable Vector Graphics (svg) is a vector image format are created from mathematical formula they don't come bundled with information about how they should be painted that can be computed in the rendering device. SVGs are lighter than bitmap and they are used to create sharp images which scale e.g icons, illustrations etc.

The syntax of SVG

SVG are defined in XML: a markup language.
The diagram below shows an example of a SVG in raw code:

Lets analyse the definition:

💡SVG usually consists of a variety of elements e.g. <path>, </style>,<circle> etc. nested inside an svg element. The inner elements enclosed inside the svg tags are used to describe specific properties of the SVG whereas the outer svg element which is normally referred to as the root element basically instantiate and terminate an instance of SVG.The root element may contain attributes like viewBox, class, id, fill, height, width and xmlns. The id and class attributes are usually used to extend functionality in Javascript or to style the svg element. The id attribute may also be used in XML specific configurations like the setting up of links. The xmlns attribute is a XML namespace, it is used by the browser to determine how to render the SVG.

Using SVGs in Vuejs

Generally SVGs can can be incorporated in an HTML document:
- inline or,
- as external standalone files.
The above listed methods can be used in Vuejs.

But before we explore how we can incorporate SVG in a Vuejs web app. First let us create a simple Vuejs application we will use to demonstrate how to embed SVG in Vuejs.

We will be using Vue CLI to bootstrap our project.

Requirements:

To create a Vuejs project:

On your terminal type: ```

vue create

Replace `<project-name>` with a unique name for your project. My project is name `svg-tutorial`.
- You will then be prompted to pick a preset for your app, just press Enter to choose the default preset which at the time of publishing this article is: `Default ([Vue 2] babel, eslint)`.
- Then wait as Vue CLI creates a Vuejs project for you.
- When you project is successfully created🎉, you will get the message below in your terminal:
![Successful vuejs project created](https://res.cloudinary.com/di70zcupa/image/upload/v1611909294/sucesssful-vuejs-install_ddlvl7.png)
The message contains handy commands to get you started!
- Let's take a look at our project's file structure paying special attention to the `src` folder since most of our work pertaining to SVG will be restricted to that folder.

<pre>
.
├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js
</pre>

- I have created a sample SVG to use in the interactive examples provided.. You may go ahead and download it by clicking this
<a href="https://raw.githubusercontent.com/JackieBinya/svg-resource-blog/main/sample.svg" download="sample" class="article-link">link</a>.

You may choose to rename the file, then proceed to add it to the root of the `src/assets` folder, such that the structure of the `src` folder is similar to the one below:

<pre>
.
├── App.vue
├── assets
│   ├── logo.png
│   └── sample.svg
├── components
│   └── HelloWorld.vue
└── main.js
</pre>

#### Inline SVG

![Inline SVG in Vuejs](https://res.cloudinary.com/di70zcupa/image/upload/v1611922129/inline-svg_jlerxx.png)

When using this method you include the `svg` directly in your markup. It's important to mention that when the `svg` is directly embedded in the document or template as in the case of Vuejs ,there is no need to include the `xlmns` attribute.

The pros of using this method are that you can use CSS to style your `svg` and use Javascript to extend its functionality just as you would a normal HTML element.

The main drawback of this method is that if your `svg` is large or when you have a lot of `svg` your template, your template becomes cluttered. In that case it would be better incorporate SVGs as standalone files as it is explained in the next section.

#### External SVG

To embed an external SVG in your Vuejs template you use the methods listed below and always ensure that the `xlmns` attribute is included in the root element of the SVG otherwise none of the methods provided will work!

💡
xmlns="http://www.w3.org/2000/svg"


(i) Embedding an external svg as an image element in a Vuejs template:

![Embedding an external svg as an image element in a Vuejs template]
(https://res.cloudinary.com/di70zcupa/image/upload/v1611904084/svg-img-implementantion_bhxx8s.png)

_Note: Replace the `<file-name>` with the unique name you gave to the svg resource you downloaded above._

Using this method limits how you can manipulate the `svg` as it really doesn't exist in the document but it is encapsulated in the `<img>` element. So at most you can only manipulate it as you would a normal image.

The cons of this method include limitations in styling and in extending the functionality of SVGs and in addition to that if you are dealing with a lot of SVGs in your template it becomes rather cumbersome to keep wrapping them in image elements.

(ii) Using `SVG Loaders`

Vuejs uses Webpack as an asset bundler. Webpack uses a loader for each file type it handles. The loaders for the common file types usually come pre-configured whenever you use Vue CLI to bootstrap your project. What that means is that when you import those file types they can be automatically read. But unfortunately `.svg` loaders do not come pre-configured so you have to download them from [npm](https://www.npmjs.com/) then configure them manually.

There are many modules available on npm which are svg vuejs loaders. In this example we will be using the [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader). The set up instructions are listed in the link provided, for those who have never installed and configured a module in Vuejs follow the instructions below:

_The instructions below are only suited for a project bootstrapped with Vue CLI._

- To install the module type the command below in your terminal:

npm i -D vue-svg-loader vue-template-compiler

- In the root of you project directory, create a `vue.config.js` file and copy and paste the code below:

module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');

svgRule.uses.clear();

svgRule
  .use('babel-loader')
  .loader('babel-loader')
  .end()
  .use('vue-svg-loader')
  .loader('vue-svg-loader');

},
};

Ensure that you save your changes.

Congrats!!!🎊 

You have successfully installed and configured the settings of the `vue-svg-loader` module.

Now, let's proceed to learn how we can use the `vue-svg-loader` module to embed SVG in Vuejs.

![using SVG loaders to embed svg in Vuejs](https://res.cloudinary.com/di70zcupa/image/upload/v1611925461/using-svg-loader_ximunw.png)

- You first remove all the boilerplate code from the `App.vue` file in the `src` directory.
- Then you copy the code in diagram above into `App.vue`, and save your changes.
- The `svg` I used exists as a standalone file in the assets folder as is named `sample.svg`, so depending on what you named your .svg file you may need to tweak the code above.
- Run the command below on your terminal, and then on your browser visit ` http://localhost:8080/` to view the Vuejs app with the embedded SVG 🚀.

npm run serve

The pros of using this method are:
- Your template is kept clean,
- And there are no limitations on how you can style or extend the functionality of your svg.

### References
1. <a href="https://youtu.be/hA7ESX7FsE4" class="article-link">What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified Episode 4<a>

Be the change

Jacqueline Binya — Tue, 23 Jun 2020 09:49:14 +0000

The calamity and threat brought by the pandemic had us locked away in our homes for months. As we came out of the lockdown we were forced to introspect and confront systematic and institutionalized prejudices(be it racism, ableism, ageism, sexism, homophobia, xenophobia, religious prejudice or any form of prejudice that exists thereof) which act as barriers to social and economic inclusion.

The catalyst to this awareness and movement was the untimely death of Gorge Floyd, a victim of police brutality and racism in Minneapolis, Minnesota USA. He has since become a global symbol for dismantling all forms of racial discrimination and inequality.

Now at the aftermath of global protests against inequality and racism the question in everyone else's mind is: 'How do we translate activism into long term meaningful and impactful change?'.

If only it were that simple 🤦🏿‍♀️

Well I have been a techie for a little over a year. I come from a small country in Southern Africa called Zimbabwe. A decade ago someone like me would had never been able to break into tech. Because of barriers of entry like:

Poverty (computers don't come cheap eey!, a quality CS degree is pricey, paid tutorials cost an arm and leg),
Lack of access to the internet,
And the worst by my books as a non native English speaker, was the fact that ten years ago I would have had to read and comprehend ancient documentation of age old technologies written in a complex hard to understand manner with excessive use of technical jargon.

Today in comparison we have:

Countless high quality free resources on the internet in the form of tutorials made by content-creators of diverse backgrounds.
The price of PCs has been on a steady decrease in the recent years so has that of the internet.
Technical writers and developer advocates are doing the most! Tech documentation of modern tools, frameworks and technologies is now more intuitive. Dev advocates create content in the form of demo applications, blogs, videos and are always available to answer questions. All this to facilitate faster onboarding of developers into using tools they represent.
Organizations like VueSchool although not free provide a discount in their subscriptions for users from marginalized backgrounds of up to 62%.
Online developer communities on DEV and tech Twitter. Those communities have been a lifeline for me. They allow me to stay up to date with the latest trends and provide opportunities to network with the global dev community.
Inclusive internship opportunities from organizations like Outreachy.

Disclaimer: Some of the above listed opportunities might have existed a decade ago, but the fact that tech communities weren't as strong and accessible as they are today. Those opportunities wouldn't have had been available to persons from marginalized backgrounds because they frankly would have been ignorant of their existence.

Tech has indeed been democratized, but there is still so much more to be done.

I have been a FOSS enthusiast for sometime now. My experiences in FOSS have been great. I have participated in communities where the maintainers and contributors collaborate, share and are intentional in ensuring that the community experience is positive for everyone. In turn I always try to make meaningful contributions and practise kindness. Despite my positive experiences, I have always had fears and doubts lurking at the back of my mind about contributing in FOSS and pursing a career in tech in general but in light of the recent events those fears have been amplified. These are some of the anxieties I have :

As a black woman from Africa are my contributions taken seriously and valued?
Is the playing field even? Do I have equal opportunity to participate and complete ?
Will my value as a techie diminish as I grow older? I transitioned into tech in my thirties and this something I plan to be doing for the longest time possible.

This winter I was fortunate to get involved with the Community Health Analytics Open Source Software(CHAOSS) Community and be part of the amazing work they are doing to change the future of tech. The work being done at CHAOSS gives me hope about the future and for me it's been an opportunity to be part of the change.
I am contributing to the awesome CHAOSS Diversity and Inclusion (D&I) Badging project. My participation in the CHAOSS D&I Badging project has been part of my application for Google Summer of Docs 2020.

The CHAOSS Project was created to meet the demand and satisfy the need to measure the health of open source projects or communities.

The simple way to solve this problem, was to:

Define metrics to measure open source health
Develop tools to measure those metrics
And then finally collect data and analyse it to determine open-source project health.

So,

CHAOSS is a Linux Foundation project focused on creating analytics and metrics to help define community health (CHAOSS official website).

The metrics to measure open source health defined by CHAOSS are:

Common Metrics
Diversity and Inclusion(D&I)
Evolution
Risk
Value

The CHAOSS Community is then divided into different Working Groups. The aims of the Working Groups is to refine the metrics and to work with software implementation.

Let's recap before we proceed:

💡Well in the beginning the big problem was coming up with a means to measure open source health. The CHAOSS Project then defined the metrics. But the metrics were still big and ambiguous and there was still no means to measure the metrics.The CHAOSS Project then formed different Working Groups for the defined metrics.The responsibility of each Working Group is to refine the metrics and come up with tools to measure the metrics.

So the CHAOSS D&I Badging Project falls under the CHAOSS D&I Working Group.

The D&I Working Group formulated the following focus areas(these are sub-metrics of D&I):

Communication Inclusivity
Contributor Community Diversity
Event Diversity
Governance
Leadership
Project and Community
Recognition of Good Work

The D&I Badging Project is implementation software, its purpose is to determine if open source projects and events are diverse and inclusive.

The D&I Badging Workflow takes place in the open and in the public on GitHub. The CHAOSS D&I Badging working group created two repos Project Badging and Event Bagding. All the documentation pertaining to the the D&I Badging workflow and D&I metrics for the above mentioned focus areas is also found in these repos.

In the documentation the prospective applicants are provided with information on how to apply for a badge. This is a two-step process which starts with appending either an event or project in a events or projects table in the corresponding repos of the entities. The table is used to showcase the badging status and/or outcome of either events or projects for which badging applications were made. Because of the underlining git workflow once the applicants append their entities to the tables i.e make changes, they can open pull requests so as to submit their changes. The PRs opened have an embedded template which is a form the applicants are expected to fill out in Markdown. The questions asked in the form are used for D&I assessment.
So far review guides or specifications are yet to be advised.

To participate in the CHAOSS Project, check out this link.

Where do my saved dev.to articles/blogs go?

Jacqueline Binya — Sat, 09 Nov 2019 02:16:13 +0000

Hello, dev.to Community

I'm a huge fan of dev.to, I read all sorts of tech articles but unfortunately sometimes because of time constraints I cannot read all the interesting blogs/articles I find on my feed. So I tend to click on the save option with the intent to read them later.

My question, where do I find those saved blogs/articles?

I have looked everywhere.

Help!!!

Joi Tutorial-Using @hapi/joi version 16.1.7 to validate a request body in a RESTful API.

Jacqueline Binya — Wed, 06 Nov 2019 02:39:11 +0000

Intro

Why validate?

Before we even get started I know there is someone thinking, " Why should I bother with validations in the backend? Validations should be done in the front end, after all, we have inbuilt HTML5 form validations, why must I validate twice?
Well, it is good practice when designing your API to always design it in isolation never make any assumptions, cause, in all honesty, you never know who is going to consume your API.

So in a RESTful API, you typically have at least one HTTP POST method that accepts a payload of user data in json format. Now the question arises how then do we ensure that the data we receive is of the desired type and in the correct format before we persist that data in our application's database?

To do that we use middleware functions normally referred to as validators. The goal is to ensure that your application's validators cover all edge cases so as to protect the integrity of your database. And to do that you use either regular expressions or alternately handy modules like @hapi/joi which make input validations in Javascript easy, seamless and fast.

What then is @hapi/joi

From the official documentation from npmjs, @hapi/joi is defined as:"
The most powerful schema description language and data validator for JavaScript.
joi is part of the hapi ecosystem and was designed to work seamlessly with the hapi web framework and its other components (but works great on its own or with other frameworks)..."

Well to break it down, @hapi/joi is a module that is used to define a schema or blueprint of Javascript objects. Once the schema is defined, you then can use Joi's handy methods that come bundled with it, to validate any other objects against the schema. It was designed for the hapi ecosystem but works well with other frameworks of which for our purposes we will use it in an express server.

Getting Started

In your project set up a basic express server, and then install @hapi/joi by running the command npm i @hapi/joi on the terminal. This will install the current latest version of @hapi/joi of which at the time of publishing this article was version 16.1.7

In the root of your project create files:

schema.js
validators.js

In the file schema.js we will define our schema and in the file validators.js we will define our validator middleware functions.

A schema can be defined as either a Joi type or a simple Javascript object whose keys are joi types.

What are Joi types

Joi has inbuilt types e.g. Joi.object(), Joi.string(), Joi.array(), Joi.date() etc. More types are found listed in the official documentation.

Defining a schema

In practical applications, the schema is usually defined as a Joi object, whose keys have values which are Joi types and have optional constraints chained to them. Below are two ways I use to define a validation schema in schema.js

Method One

Method Two

The above schema definitions are equal whatever method you use totally depends on personal preference.

Validating a request body payload

Before we are able to perform any validations we should be able to communicate with our server, and to do that on app.js we add a route localhost:5000/signup as shown in the figure below:

When it comes to performing actual validations the Joi module provides various different methods we can use to validate our data as shown below:

Synchronous validations

Async validations

Validating schema by using Joi.assert()

When we run our server and send a payload via Postman as shown in the figure below using any of the above validators we get the same output. Joi by default aborts validations once the first rule is broken.
Alt Text

Alternately if you want to list all the validation errors in the payload, you can pass an option of { abortEarly: false }, to any of the above-listed Joi validator methods, this is usually handy for debugging purposes. For example:

If we start the server and on Postman send the same payload as above to the endpoint POST localhost:5000/signup, as a response we get a detailed error message:

{
    "error": {
        "_original": {
            "username": "",
            "email": ""
        },
        "details": [
            {
                "message": "\"username\" is not allowed to be empty",
                "path": [
                    "username"
                ],
                "type": "string.empty",
                "context": {
                    "label": "username",
                    "value": "",
                    "key": "username"
                }
            },
            {
                "message": "\"email\" is not allowed to be empty",
                "path": [
                    "email"
                ],
                "type": "string.empty",
                "context": {
                    "label": "email",
                    "value": "",
                    "key": "email"
                }
            }
        ]
    }
}

Custom Error Messages

So far we have been sending default Joi error messages in the response object which look like:

{
    "error": "\"username\" is not allowed to be empty"
}

The error message above is difficult to understand for the end-user. Error messages must be short and easy to understand. So to customize error messages on our schema definition in schema.js

As you can see above in the schema we modified the value of the username key and added an extra rule/constraints messages().
messages() takes an object as an argument, whose keys are validation error types and their corresponding values are custom error messages.

Now to view our customized error messages on the response object:

We start our server then on Postman, in the payload we post an empty string as a username. The response:

And then, we intentionally post an invalid type as a username to test the other custom error message, which in this case is a number. The response:

So our error messages have been successfully customized.

Validating strings

The Joi module provides several constraints we can use to increase validations on string data types which allow us to cover more edge cases. The most common ones I often use are in the example below:

In the example in the figure above:

string.trim() removes any whitespace before and after the username
string.min() specifies the minimum number of characters for username
string.max() specifies the maximum number of characters for username
string.regex() specifies a regular expression the username must match against.

Validating numbers

The important thing to note when validating numbers is to pass the option
{ convert: false } to your default Joi validator functions. It's especially effective when validating decimals.

In the example in the figure above:

number.min() specifies the minimum number for age
number.max() specifies the maximum number for age
number.positive() specifies that only positive numbers are accepted for the price
number.precision(limit) specifies the maximum permissible number of decimal places for the price.

Note The purpose of this article was to hopefully get you started on using the Joi modules for validations, it does not in any way cover everything about performing validations using the module, to learn more, I encourage you to go over the official documentation..

Thank you for reading my article, if you loved it please like it below, and follow me on Twitter. Increasing my Twitter following will help me land my dream job as a technical writer. If you have any comments and suggestions please let me know.

Setting up a basic express server in E6, bootstrapped with eslint and Airbnb style guide

Jacqueline Binya — Wed, 06 Nov 2019 02:37:47 +0000

The purpose of this article is to save as a guide to setting up a basic express server. Please check out the attached repository on Github. It provides a simple boilerplate that will help you set up your server.

JackieBinya / Express-server-boilerplate

I created this repo to set up a basic express server in E6 and bootsrap it with eslint airbnb style guide.

Express-server-boilerplate

I created this repo to set up a basic express server boilerplate in E6 and bootsrapped my project with eslint airbnb style guide.

Requirements

Ensure that you have git installed on your local machine. And you are familiar with git basics which include creating a repo on Github, forking an existing repository and cloning a repository. If those are totally new concepts to you please check out this Youtube video

Set up guide

Fork this repo and use it as a template for any repo you want to set up an express server.
Then clone your repo in your local machine and open it on any text editor of your choice.
On the terminal run the command npm init -y to initialize your project.
And to install all dependencies listed in package.json run the command npm i on your terminal.

Starting the server

On the terminal run the command…

View on GitHub

Thank you for reading this article.

Recomendations for open source projects in Javascript.

Jacqueline Binya — Sun, 20 Oct 2019 11:37:46 +0000

I would love to get started on contributing to open source projects that are in Javascript.
My main interest are vanilla JS, React,Typescript and Postgres, unit testing using mocha/chai and jest.
I also do HTML5 and CSS3.

Please somebody point me in the right direction.
Thanks in advance!

Another conflict: resolving conflicts in git that occur when using rebase.

Jacqueline Binya — Thu, 17 Oct 2019 01:46:19 +0000

Background

This interactive tutorial about the resolution of conflicts in git is a continuation of my first blog in the series titled And then we resolve a merge conflict.... If you have not read it, please check it out here.

The aim of this tutorial is to show how you can use rebasing as an alternative to merging so to combine to branches in git. It will demonstrate how you resolve conflicts that occur thereof.

Intro to rebasing

Every commit in github is based on its preceding commit. When you trace the history you realize that every commit has an ancestor.
Practically this is shown by that whenever you log the history of a branch, all the commits are listed in chronological order. With first commit at the bottom and the most recent commit which is the HEAD at the top.
Now, what rebasing does is it rewrites history of your current branch, through assigning a commit of your choice as the ancestor of the HEAD.

Now, let's get started

As indicated in the first blog to get started, we create a repo on github and initialize it with a README. Then clone it locally on my machine. After that, I open the project on an editor. My editor of choice is Visual Studio Code.

I then create and check out a new branch called list-interests. And create bio.txt. In bio.txt I add a list of my personal interests. Then voila:

To stage the changes, on the terminal I run the command,

git add .

Then to commit the changes to my local repo I run the command,

git commit -m "Adds interests to bio"

Then to look up the history of the list-interests branch, on the terminal I run the command;

git log --oneline

The result:

5d944ac (HEAD -> list-interests) Adds interest to bio
305d937 (origin/master, origin/HEAD, master) Initial commit

Now let's imagine that a bunch of devs was assigned to this project. One dev, in particular, was assigned to add an intro to the bio. The dev successfully created the intro and then proceed to merge it to master.

To mimic that, on the terminal run the command,

git checkout -

The command above listed above allows you to navigate to the branch you were in before you checked out your current branch.

On master I then create the file bio.txt. Then add a basic intro about myself.

I then add the changes to the staging area by running the command below on the terminal.

git add .

To add the changes to my local repo,

git commit -m "Adds intro to bio"

Then I log the history by running the command;

git log --oneline

The output:

4586948 (HEAD -> master) Adds intro to bio
305d937 (origin/master, origin/HEAD) Initial commit

Then to sync master to my origin/master which is the branch that corresponds to master on the remote repository;

git push

I then check out the branch list-interests to continue.
If you log the history of the branch list-interests you will realize that it was based on the old version of master that did not have the intro. I intend to rebase it to the new version of master so as to include the intro.

To do that on the terminal I then run the command;

git rebase master

On the terminal I get the error message:

First, rewinding head to replay your work on top of it...
Applying: Adds interest to bio
Using index info to reconstruct a base tree...
Falling back to patching base and 3-way merge...
CONFLICT (add/add): Merge conflict in bio.txt
Auto-merging bio.txt
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch' to see the failed patch
Patch failed at 0001 Adds interest to bio
"git add/rm <conflicted_files>", then run "git rebase --continue".        
You can instead skip this commit: run "git rebase --skip".
To abort and get back to the state before "git rebase", run "git rebase --abort".

The above message informs me that git failed to merge then provides me commands I can use to resolve the issue.

On the editor, this is what is there:

Because I want to keep both the changes, I select the option Accept Both Changes on VS code.

To continue I then add the change to the staging area, by running the command;

git add .

Then on the terminal, I run the command;

git rebase --continue

Then get the message

Applying: Adds interest to bio

Under the hood when you rebase, git basically rewinds fetches the tip of master, places it in the position of the last commit of the branch you had checked out, then applies the tip of list_interests on master.

To visualize it imagine your history was a deck of cards, a stack. You pop the topmost card which is the HEAD of your current branch, in its place you push the HEAD of master then finally you push the HEAD of the current branch in its rightful position.

If you have conflicts you resolve them and then stage the changes. But instead of making a new merge commit when you run the command git rebase --continue the changes are applied to the HEAD, which in this case had the message Adds interests to bio. When you log the history you get:

1a378f3 (HEAD -> list-interests) Adds interest to bio
4586948 (origin/master, origin/HEAD, master) Adds intro to bio
305d937 Initial commit

I have successfully made a rebase. Rebasing offers a clean way to combine diverging branches and its main advantage is the history is kept linear, unlike when you do merge commits.

I then sync my local and remote. Make a pull request. Then merge my pull request to origin/master. On my local I checkout master then on the terminal run the command;

git pull

So as to sync master to origin/master. Then voila:

With that done, hopefully, you now have an understanding of how rebasing works in git. We now proceed to the main business of the day which is using rebasing to implement what we did on the first blog in the series.

Well, I would love to add a new feature to my bio. This time I will add a list of programming languages I have worked on. To do that I create and check out a new branch called list-languages. On the terminal, I run the command,

git checkout -b list-languages

Then I edit bio.txt by adding a list of programming languages.

To proceed I then add the changes to the staging area by running the command;

git add .

To commit the changes to my local repo, on the terminal I then run the command;

"git commit -m "Adds programming languages to bio"

To create a branch on the remote corresponding to list--languages and push changes associated with it. On the terminal I then run the command;

git push --set-upstream origin list-languages

I just realized I made a blooper on my bio. Instead of adding C++, I meant to add C. But in the same regard, I want to keep my commit message.

So back on my editor, I edit my bio.

Now to stage the changes I run:

git add .

And to commit to my local, on my terminal I run the command:

git commit --amend --no-edit

As we know from the first tutorial git commit --amend --no-edit, alters the history of the branch. We end up with a scenario whereby the local and remote diverge from each other with the remote branch always leading.

When I attempt to sync my local and remote using:

git push

I get this message as a response:

To github.com:JackieBinya/git-tut-2.git
! [rejected]        list-languages -> list-languages (non-fast-forward)
error: failed to push some refs to 'git@github.com:JackieBinya/git-tut-2.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Before we proceed let's take a quick look at the history of the branch list-languages, using the command:

git log --oneline

The output:

c0fa933 (HEAD -> list-languages) Adds programming languages to bio
d2c5e0f (origin/master, origin/HEAD, master) Merge pull request #1 from JackieBinya/list-interests
1a378f3 (origin/list-interests, list-interests) Adds interest to bio
4586948 Adds intro to bio
305d937 Initial commit

Basically when I run the command git push. Under the hood git attempts to sync my local list-languages to the corresponding branch on the remote origin/list-languages. Git is clever enough to realize that the branches have diverged, the remote is ahead of the local branch so it suggests I pull changes on the remote to my local, resolve any conflicts and push again.

To resolve the issue highlighted I run the command:

git pull --rebase

I added the flag --rebase to the git pull command so as to rebase the HEAD of my local on the tip of origin/list-laguages. This offers an alternative to merging branches.

On my editor this is what my file looks like:

To resolve the conflict, on VS Code I select the option to keep incoming changes. I then add the changes to the staging area then run the command;

_git rebase --continue_

This is what bio.txt looks like on my editor:

When I log the history on the terminal I get the output below:

b584e1c (HEAD -> list-languages) Adds programming languages to bio
7b06700 (origin/list-languages) Adds programming languages to bio
d2c5e0f (origin/master, origin/HEAD, master) Merge pull request #1 from JackieBinya/list-interests
1a378f3 (origin/list-interests, list-interests) Adds interest to bio
4586948 Adds intro to bio
305d937 Initial commit

I then sync my local and remote. Make a PR then merge it to master.

Finally my bio:

Thank you for reading my article.

My first ever Hacktoberfest Event experience

Jacqueline Binya — Mon, 14 Oct 2019 02:24:22 +0000

Its been a day of since we held our Hacktoberfest in Bulawayo event, the first one of its kind in my city Bulawayo in Zimbabwe and I was the the event's orgarniser.

My intentions in organizing the event although I myself am a total newbie to open source were: I am currently on a drive to improve my soft skills. I am especially focused on public speaking and technical writing.

One thing in my short techie life I've learnt is that you always have to be constantly learning and evolving. You must set challenges for yourself which might seem impossible to achieve and just take the plunge.
All you have to do is be humble enough to ask questions, collaborate and implement feedback basically just get things done. No matter how huge a task might seem to be, nothing is impossible to achieve.

That's been my story over and over again in my coding journey. On paper Im a woman, a mother and in my 30s. But I still got my first professional gig as a junior software developer, in 8 months with no background in programming.

So I went out and got things done and sought the assistance of anyone whom I thought could help. And in the end we had an epic team. The Tech Village was kind in enough to host the event, and we had brilliant speakers onboard: Alistair Holmes, Micheal Dera and Jeff Chiveya and the local techie community came in numbers to participate.

The speakers came up with the most brilliant and informative presentations, throughout out the whole event I was totally captivated kept at the edge of my seat. And am proud to say I'm now an open source convert!

Although I played a small part in yesterday's event. I did a basic intro to the event. I overcame my fear of speaking publicly. Despite sweaty palms and heart palpitations I did it!I overcame my anxieties. For me just that is a feat on its own. I know surely as I continue to volunteer to speak more I will improve.

Thank you for reading my story.
Now let me get back to working on my PRs;)

And then we resolve a merge conflict...

Jacqueline Binya — Thu, 10 Oct 2019 02:32:09 +0000

Since my introduction to the git workflow. I have resolved my own fair share of conflicts. Admittedly when I started using git, conflicts were frustrating and upsetting occurrence mainly because I didn't understand why and how they occurred.

Unwittingly I actually thought they were something I could avoid, I thought there was a way I could outsmart git, hahaha! The word conflict has a negative connotation to it so don't blame my newbie response.
I remember during my BootCamp at Andela, we worked in such a way that you could only merge your pull request to the main develop branch if it had been reviewed and then approved.
So my genius way of ensuring I totally avoided conflicts, was to wait and have my PRs approved and consequently merged to the develop branch one at a time and that impacted negatively on my overall output.
The reason I feared conflicts was the first time I was ever brave enough to queue up my PRs I made a giant mess trying to resolve the conflicts and lost all my work.

Anyways all the previous tutorials I had followed up to that point had only covered git clone, pull and push, I honestly didn't know we made war in git!

In this series, I document my steps in re-creating and hopefully resolving my favorite conflicts.

Keywords

HEAD: normally the HEAD pointer, points to the latest commit on a branch you have currently checked out.
History: Git works by compiling information about details of commits of individual branches if you run the command git log you get the history of a branch you have currently checked out. Then git log --oneline prints each commit on a single line, which is useful if you’re looking at a lot of commits.

Creating the conflict

To get started I created a repo on github initialized it with a README.md and cloned it on my machine.

Then on VS code, I opened
Using the command,

git checkout -b create-bio

I branched off master and created a branch called create-bio and then checked out create-bio.

create-bio is normally referred to as a feature branch. Its good practice to open a branch for every feature than work on your master. This ensures you only merge to master the code that works and your work is clean.

After that I then created a file called bio.txt and added a simple unimaginative line of code to it:

A git environment can be broken down into two distinct parts. The remote repository is where you push the code you want to share with others which in my case is hosted by Github and your development environment. The development environment consists of the working directory, staging area, and local repository. So basically when using git workflow, when you clone your repo from the remote it comes with a .git folder. That folder is basically the local repository.
In essence, Git is a clever piece of software that not only ensures that you can track your files it also allows you to share them as well. Under the hood, git works by persisting branches and commits.
The working directory is just that, the stuff you work on. So as you work you have to naturally keep track of the files you are working on and to do that you add them to the staging area.

So to track bio.txt. I add it to the staging area by running the command,

git add .

Using the command,

git commit -m "Adds bio.txt"

I add bio.txt to my local repository it's official, the changes I was tracking have been committed to my local repo.

Remember when I started off I cloned my remote repository and it only had the master branch now that I've created a new branch in my local. The local and the remote are out of sync so using the command,

git push --set-upstream origin create-bio

I create the branch create-bio in the origin/remote and simultaneously push the changes in that branch to the remote repo.

So far all things are fine and dandy, to introduce some chaos I then edit the file bio.txt ever so slightly,

If u run the command,

git status

You will see that the bio.txt has been modified. So to add the changes I made to bio.txt to the staging area I run the command

git add .

This time to add my staged changes to my local I use the command,

git commit --amend --no-edit

The command above allows me to combine staged changes with the previous commit instead of creating an entirely new commit. This git views as an entirely new commit, history has been re-written.

To verify that history has been altered, if I log my git history on the terminal, although the commit message is the same for the tip of the branch before and after running the command git commit --amend --no-edit the commit hashes (i.e. the string that precedes the commit message) are different as shown below:

f780b5d (HEAD -> create-bio, origin/create-bio) Adds bio.txt
7619836 (origin/master, origin/HEAD, master) Initial commit
PS C:\Users\\Desktop\git-tut-1> git commit --amend --no-edit
[create-bio 1b61b25] Adds bio.txt
 Date: Thu Oct 10 03:30:45 2019 +0200
 1 file changed, 3 insertions(+)
 create mode 100644 bio.txt
PS C:\Users\\Desktop\git-tut-1> git log --oneline
1b61b25 (HEAD -> create-bio) Adds bio.txt
7619836 (origin/master, origin/HEAD, master) Initial commit

If you run the command,

git status

The message you get on the terminal is:

On branch create-bio
Your branch and 'origin/create-bio' have diverged,
and have 1 and 1 different commits each, respectively.
  (use "git pull" to merge the remote branch into yours)

I then attempt to sync my remote to my local, by running the command,

git push

On the terminal I get the error:

As advised in the error message, I then run the command,

git pull

And voila the message on the terminal reads:

CONFLICT (add/add): Merge conflict in bio.txt
Auto-merging bio.txt
Automatic merge failed; fix conflicts and then commit the result.

The conflict on VS Code:

Resolving the Conflict

Using VS Code editor it's very easy to resolve the conflict I simply choose to Accept Current Change, this option allows me to keep the changes in the HEAD.
You can then play around with the other options to explore how they work. Just ensure when you are done resolving the conflict your code looks normal as in you have gotten rid of the arrows, commit hash, and equal signs.

I then run the command,

git add .

To add changes to the staging area, then proceed to commit them by running the command

git commit -m "Resolved"

After which I run the command:

git push

So my local and remote are in sync.