DEV Community: Dita Rahma P.

Managing Cleaner Git Branch

Dita Rahma P. — Mon, 13 Feb 2023 08:18:43 +0000

These are the rules that I always followed to keep the git branch clean when I need to work on a big feature that needs more than one sprint and is developed by more than one developer.

Create a parent branch that is dedicated and treated as a copy of the main branch.

The branch will be rebased regularly so it is always up to date with the changes in the main branch. All of the developers that work on the feature will create and merge their branch from and to this parent branch.
From a content perspective, rebasing is changing the base of your branch from one commit to another making it appear as if you'd created your branch from a different commit.

By rebasing the so-called parent branch regularly, we can avoid complicated conflicts when we merge the parent branch to the main branch.

How to do it:

git checkout {parent-branch}
git fetch
git rebase origin/main

Adding origin will be more efficient because after git fetch , we don’t need to check out the main branch and pulled all of the changes first.

We can use a story/epic ticket to name our parent branch, or just use one of the ticket cards of the feature so we can always see the overall progress in server preview.

Always keep the child branch up to date with the parent branch.

Because the parent branch will always be changing due to keeping it updated to the main branch, then, of course, we need it to keep all of the child branches always up to date with the parent branch. Always make sure when the time comes to merge the child branch to the parent, there is nothing like this The source branch is n commit behind the target branch

Sometimes this thing doesn’t cause any problem. But when we work in a big feature with other engineers, better safe than sorry right?

The clean merge request will look like this:

We can rebase the branch daily before we start any work or at the end of the day. Make sure to not be left too behind from the parent branch.

Keep the commit as concise as possible.

With keeping the commit number as little as possible, it will help us if the conflict happens when we try to rebase the branch. But sometimes we worry about losing our progress thus decide to commit little by little that will make our branch has a lot of commits with the same ticket code.
So what we need to do is squash it to become at least one commit per ticket code. The act of "squashing" your commits means that you combine multiple existing commits into a single one. To squash the commits, we can’t simply do git squash. Instead, we use interactive rebase.

For example, we have these commits that we want to squash into a single one:

What we will do step by step:

git rebase -i HEAD~3

On the command above the number on HEAD~n is the number of commits we want to squash as one.

Be careful when deciding the n number. Make sure it doesn’t exceed the total commits in the branch or we will mess the branch much worse by including the parent branch commits too.

Then you will see the editor like the image below, pick the top commit, and squash the following commits. p stands for pick and s stands for squash (look at the red box). After that save and quit the editor.

Then you will be shown another editor like the image below. This editor shows commit messages that will be shown on the squashed commits. You can change it or just leave it. I prefer to leave it as it is so later on, I can still see what commits I squashed.

After squashed successfully, all we need to do is:

git push -f

And then the commit list will be like this:

Keeping the commit number as little as possible will help us if there are too many conflicts happening when we rebase the branch to the parent branch. We can just skip rebasing and do reset the branch and then cherry-pick the commit instead. Cherry-pick one commit is of course much simpler than cherry-pick bunch of commits (we may lose track of which commits we already pick). That’s why I prefer to squash the commits first.

Reset the branch instead of rebasing it when there are too many conflicts.

Like I said before because now we just have one commit, it will be simpler to just reset the branch to the parent branch and cherry-pick the commit when we fall far too behind from the parent branch.

git checkout [child-branch]
git fetch
git reset --hard origin/[parent-branch]
git cherry-pick [hash-commit]
// make sure cherry-pick all of the commits
git push -f

Make sure you already save the hash commits and do git push -flater to avoid mistakes by pushing it before cherry-picking the commits.

If the conflict still happens, it will be easier to resolve because lesser commits mean lesser time resolving the conflicts.

Dark Mode with CSS Variable

Dita Rahma P. — Thu, 12 Nov 2020 12:24:40 +0000

Let's admit that Dark Mode now is a thing, and people love it. It does look cool, like the terminal in your computer, or your code editor. I bet you prefer them to be dark as well (people who use the light theme on their code editor is a monster lol).

Now because of the trend, let's say that we want our web to be dark too. But being a mindful dev, we also consider our users who prefer light mode over the fancy dark mode have their preference noticed.

Firstly, let's create the main container and put the light background color as the default state. Don't forget to set the margin to be 0 on the body and set the height to be 100vh so the container will have a full-screen display.

<div id="simulateDarkMode" class="container">
</div>

:root {
  --brand-basic: #dee8f3;
}

body {
  margin: 0
}

.container {
  height: 100vh;
  background-color: var(--brand-basic);
}

Notice that instead of assigning direct color, we use CSS variables that are placed on the root element to store the colors we're going to use, and assign it to the background-color CSS property. Here I choose the HEX #dee8f3 to be my default color scheme (it's light blue with a little hint of grey).

To make the color switchable, then we're going to put the button inside our container that acts as a switch to change the color scheme. Then, let's put the data-* attribute on the container that acts as a flag whether the page is on light mode or dark mode. Because data-* attribute is meant to store custom data private, then let's call ours data-theme. Don't forget to assign the default value to it.

<div id="simulateDarkMode" class="container" data-theme="light">
  <button id="toggleDarkMode" type="button" class="btn-toggle" onclick="toggleDarkMode()">
    DARK MODE
  </button>
</div>

We have a flag and a button that calls a function. Now put the logic inside the function that will turn the page from light mode to dark mode.

function toggleDarkMode() { 
 const container = document.getElementById('simulateDarkMode');
  const buttonDarkMode = document.getElementById('toggleDarkMode');
  const dataTheme = container.getAttribute('data-theme');

  if(dataTheme === 'dark') {
    container.setAttribute('data-theme', 'light');
    buttonDarkMode.innerHTML = 'DARK MODE';
  } else {
    container.setAttribute('data-theme', 'dark');
    buttonDarkMode.innerHTML = 'LIGHT MODE';
  }
}

The function is pretty basic. We have three variables; container, which is the outer wrapper we set our background-color; buttonDarkMode, the switch button itself; and dataTheme to store the value inside our custom attribute data-theme.

When the function is called, it will check the value inside the data-theme attribute. If the value returns dark, then it will change it to light and also change the button text and vice versa.

The data-theme value is successfully changed by clicking the button, now let's move back to the CSS to make the color changing happens.

:root {
  --brand-basic: #dee8f3;
}

[data-theme="dark"] {
  --brand-basic: #31456a;
}

body {
  margin: 0
}

.container {
  height: 100vh;
  background-color: var(--brand-basic);
}

The only thing we need to add to the CSS is an exact match selector that will only select the element with the exact data-theme attribute with a value equal to dark. Inside the selector, we replace the --brand-basic value from light color to dark color. That's it! Now your page can turn from light mode to dark mode in a single click!

Here's an example in codepen if you want to check (I put some sprinkles in the CSS to make it a bit pretty and smooth)!

Make a Camera App in Web (Part 2): Capturing the image

Dita Rahma P. — Wed, 12 Feb 2020 03:20:23 +0000

From the past article in Part 1, we already succeeded in accessing the webcam with mediaDevices.getUserMedia() and stop it with a single button. You may want to stop there if you just want to stream something without any action required after. But I doubt you just leave it like that because, what the hell that kind of thing going to be useful, right?

So now we're going to move to the next step. What did the camera do? Capture the image, yes. So after we successfully accessing the user permission to use the camera and stream it to our webpage, then we're going to add some spaces to store and display our captured image and of course, a button to capture it.

First, let's put <canvas></canvas> tag to display our image. Don't forget to make it the same size as the <video></video> so our image won't be cropped.

 <div v-if="isCameraOpen" class="camera-box">
    <video v-show="!isPhotoTaken" ref="camera" :width="450" :height="337.5" autoplay></video>
    <canvas v-show="isPhotoTaken" id="photoTaken" ref="canvas" :width="450" :height="337.5"></canvas>
 </div>

See that there is a condition put there which is isPhotoTaken. Why put the condition there? Think about the camera. It streams when we haven't captured any image yet. Then the moving picture gone replaced by the static image that we captured after clicking a button. So we're going to make just like a camera, the <video></video> will be hidden and <canvas></canvas> would appear after we click the shutter.

There you might think again why using v-show instead of v-if-else. It simply because v-show just hid the element, not delete it, so we're not going to call createCameraElement() multiple times if we want to take another photo.

Let's declare isPhotoTaken inside data() and handle it together with isCameraOpen in the toggleCamera() method so when we close the camera and open it again, it doesn't show the last captured image.

data() {
  return {
    isCameraOpen: false,
    isPhotoTaken: false
  }
},

methods: {
  toggleCamera() {
    if(this.isCameraOpen) {
      this.isCameraOpen = false;
      this.isPhotoTaken = false;
      this.stopCameraStream();
    } else {
      this.isCameraOpen = true;
      this.createCameraElement();
    }
  }
}

Nah now what we need after that is the shutter button. Let's add it to our HTML and give it an action to called a method that will capture our photo. Let's call our method takePhoto().

<div v-if="isCameraOpen" class="camera-shoot">
  <button type="button" class="button" @click="takePhoto">
    <img src="https://img.icons8.com/material-outlined/50/000000/camera--v2.png">
  </button>
</div>

I use the free image icons to fill the button and make it round with setting border-radius to 100% so it will look like a shutter button on a phone camera. Here's the styling if you wanna take a look.

button {
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;

  img {
    height: 35px;
    object-fit: cover;
  }
}

Now we have the shutter button. Great! Next is let's define the method takePhoto(). This method will basically grab the image on the <video></video> and put it inside <canvas></canvas>.

takePhoto() {
  this.isPhotoTaken = !this.isPhotoTaken;

  const context = this.$refs.canvas.getContext('2d');
  context.drawImage(this.$refs.camera, 0, 0, 450, 337.5);
}

In the method above, we have this toggle action on isPhotoTaken. This action will make the button not only as a shutter but also as a switch to replace the image and the camera stream. So when the stream is active, you click the shutter, it will capture your photo. To the opposite, when you already captured a photo and click the shutter again, the camera will stream and the existing photo will be gone.

For saving the image to the canvas, we first have to catch the canvas element by pointer it with $refs and get a drawing context on the canvas with getContext('2d'). And then we can assign the image from camera (<video></video>') to the canvas with drawImage(). For this part make sure that you draw with the correct size. Here's I draw starting from point x = 0, y = 0, and with 450 width and 337.5 height, the same size as the <video></video>.

That's it! Now you may want to run it and try to take a photo to see if it's work or not.

Is it all? No. We want to do something with the photo. You may want to upload it to the server or download it. Now let's try to put a download button below the shutter button like this. We're going to use anchor instead a button because we will assign href attribute later. Don't forget to put download attribute to define your file name that will be downloaded.

<div v-if="isPhotoTaken && isCameraOpen" class="camera-download">
  <a id="downloadPhoto" download="my-photo.jpg" class="button" role="button" @click="downloadImage">
    Download
  </a>
</div>

Giving the condition above, the button will be hidden when we click the close button. Actually, the close camera button will completely hide all the elements except the button itself. Now we have to define the downloadImage on javascript.

downloadImage() {
  const download = document.getElementById("downloadPhoto");
  const canvas = document.getElementById("photoTaken").toDataURL("image/jpeg")
    .replace("image/jpeg", "image/octet-stream");

  download.setAttribute("href", canvas);
}

downloadImage() will get data URI containing a representation of the image in the image/jpeg format then assign it to href attribute in download anchor.

Make a Camera App in Web (Part 1): Accessing the webcam

Dita Rahma P. — Thu, 06 Feb 2020 06:14:47 +0000

Last year I have a project that requires me to access device webcam using JavaScript. Since I can't find any good webcam library on Github that builds with Vue, then I decide to try to make it with JavaScript getUserMedia().

The problem with this method is, Internet Explorer doesn't support this, and in Safari, the compatibility is still unknown, both on mobile and desktop. It may be okay for IE because what on earth people still using that slow-problematic browser? But Safari is used by so many people and it may be a problem if you are a good developer who wants the best for the users. Well, it doesn't mean that I am a bad developer (or maybe I am!) for still using it despite the unknown compatibility with Safari. It just that we really need this feature back then. And maybe you are too.

So here it is, the low-key webcam feature that I build past year. You can open it directly on CodePen to run it to prevent any error message.

Before we get started, in the CodePen above I use Vue.js and Bulma for the styling.

The first thing that we want is a button. This button will act as a toggle to open and close the camera div also to turn it on/off so your camera won't active all the time (for the sake of privacy).

<div class="camera-button">
  <button type="button" class="button is-rounded" :class="{ 'is-primary' : !isCameraOpen, 'is-danger' : isCameraOpen}" @click="toggleCamera">
    <span v-if="!isCameraOpen">Open Camera</span>
    <span v-else>Close Camera</span>
  </button>
</div>

I put the class condition there. is-primary is active when the camera is closed, and is-danger gonna replace is-primary when the camera is open. These classes are not only to give the button some colors but also to better describe what the button does. And now, take a look at the JavaScript.

data() {
  return {
    isCameraOpen: false
  }
},

methods: {
  toggleCamera() {
    this.isCameraOpen = !this.isCameraOpen;
  }
}

The toggleCamera() would act as a switch to change isCameraOpen condition. The default value of isCameraOpen is false, and when the true value assigned through the button click, which gonna call toggleCamera(), the webcam will be activated.

Then we need a box which will display the camera. We're going to add <video></video> as a streaming media which will show up when isCameraOpen is true.

<div v-if="isCameraOpen" class="camera-box">  
  <video ref="camera" :width="450" :height="337.5" autoplay></video>
</div>

A little warning here, on the mobile web, the camera would appear vertically, unlike in desktop. So you might want to tweak the width and height a little bit if you want it to be seamlessly responsive.

And then the most important part; creating a method that initiates media input permission which produces a MediaStream with tracks containing the requested types of media.

createCameraElement() {
  const constraints = (window.constraints = {
    audio: false,
    video: true
  });


  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(stream => {
      this.$refs.camera.srcObject = stream;
    })
    .catch(error => {
      alert("May the browser didn't support or there is some errors.");
  });
}

constraints is a parameter describing the media types requested. Since we just want a camera that can only capture an image and not video streaming, so we just going to set the audio permission to false.

Then we call the mediaDevices.getUserMedia with the constraints as a parameter. From this call, we received a stream that going to be assigned to the <video></video> element we created before.

Inside constraints parameter, you also can specify where the camera is facing (you may want to use the back-facing camera on mobile). To require the rear camera, you can put this instead

const constraints = (window.constraints = {
  audio: false,
  video: {
    facingMode: {
      exact: "environment"
    }
  }
});

We're going to call that method when the user clicks the open button. But since the open and close button is the same, we're going to prevent it to be called when the user clicks the close button. So we also have to modify the toggleCamera() a little bit like this.

toggleCamera() {
  if(this.isCameraOpen) {
    this.isCameraOpen = false;
  } else {
    this.isCameraOpen = true;
    this.createCameraElement();
  }
}

There is still a problem though. We already managed to open the camera, and when we close it, it doesn't call the createCameraElement() again. But, the camera indicator on your laptop is still on! That makes the close button didn't do anything except just "hiding" the camera div. What we're going to do next is to really stop the camera from streaming.

stopCameraStream() {
  let tracks = this.$refs.camera.srcObject.getTracks();

  tracks.forEach(track => {
    track.stop();
  });
}

The method above is going to catch the tracks on the camera element and then stop it. To make it works, let's put it into the close button.

toggleCamera() {
  if(this.isCameraOpen) {
    this.isCameraOpen = false;
    this.stopCameraStream();
  } else {
    this.isCameraOpen = true;
    this.createCameraElement();
  }
}

That's it! We successfully access the webcam and put the stream inside an HTML tag. The next step is we want to capture the stream and download it as an image. But I'm going to make it in part two of this article.